:root {
  --ld-bg-0: #0c0a08;
  --ld-bg-1: #141210;
  --ld-gold: #c79b50;
  --ld-gold-soft: rgba(199,155,80,.45);
  --ld-gold-hair: rgba(199,155,80,.22);
  --ld-gold-tint: rgba(199,155,80,.08);
  --ld-bone: #e8e2d6;
  --ld-bone-dim: rgba(232,226,214,.62);
  --ld-bone-mute: rgba(232,226,214,.4);
  --ld-hair: rgba(232,226,214,.10);
  --ld-hair-2: rgba(232,226,214,.18);
  --ld-safe: #6b9a5a;
  --ld-info: #59c5d4;
  --ld-warn: #e0b86d;
}

/* ── Overlay wrapper (used in SiteLayout) ─────────────────────────── */
.ld-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  background: var(--ld-bg-0);
}
.ld-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.ld-overlay.fading {
  opacity: 0;
  pointer-events: none;
}

/* ── Background layers ────────────────────────────────────────────── */
.ld-bg-stamp {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/assets/img/Main%20Stamp.png") top left / 380px repeat;
  filter: blur(1.5px) brightness(.18) sepia(.55) saturate(.75);
  opacity: .55;
  animation: ld-drift 180s linear infinite alternate;
}
.ld-bg-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 0%, rgba(0,0,0,.72) 85%),
    linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.55));
}
.ld-scanlines {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(232,226,214,.012) 0,
    rgba(232,226,214,.012) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  opacity: .55;
}
@keyframes ld-drift { 100% { background-position: 80vw 80vh; } }

/* ── Stage ────────────────────────────────────────────────────────── */
.ld-stage {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* ── Card ─────────────────────────────────────────────────────────── */
.ld-card {
  position: relative;
  width: min(560px, 100%);
  background: rgba(20,18,16,.72);
  border: 1px solid var(--ld-gold-hair);
  backdrop-filter: blur(10px);
  padding: 28px 30px 24px;
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--ld-bone);
}
.ld-card::before,
.ld-card::after,
.ld-card .br-tr,
.ld-card .br-bl {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.ld-card::before  { top:-1px;    left:-1px;  border-top:1px solid var(--ld-gold); border-left:1px solid var(--ld-gold); }
.ld-card::after   { bottom:-1px; right:-1px; border-bottom:1px solid var(--ld-gold); border-right:1px solid var(--ld-gold); }
.ld-card .br-tr   { top:-1px;    right:-1px; border-top:1px solid var(--ld-gold); border-right:1px solid var(--ld-gold); }
.ld-card .br-bl   { bottom:-1px; left:-1px;  border-bottom:1px solid var(--ld-gold); border-left:1px solid var(--ld-gold); }

/* ── Header ───────────────────────────────────────────────────────── */
.ld-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--ld-hair);
}
.ld-brand { display: flex; align-items: center; gap: 12px; }
.ld-brand img { width: 28px; height: 28px; filter: brightness(1.15); }
.ld-brand .bn { display: flex; flex-direction: column; line-height: 1.1; }
.ld-brand .bn b    { font-size: 12px; letter-spacing: .18em; color: var(--ld-bone); font-weight: 700; }
.ld-brand .bn small { font-size: 9px; letter-spacing: .26em; color: var(--ld-gold); margin-top: 2px; }
.ld-doc {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ld-bone-mute);
  text-align: right;
  line-height: 1.5;
}
.ld-doc b { color: var(--ld-gold); font-weight: 500; }

/* ── Hero row ─────────────────────────────────────────────────────── */
.ld-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 0 18px;
}
.ld-spinner {
  width: 64px;
  height: 64px;
  position: relative;
  flex: none;
}
.ld-spinner .ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--ld-gold-hair);
  border-top-color: var(--ld-gold);
  border-right-color: var(--ld-gold-soft);
  border-radius: 50%;
  animation: ld-spin 1.4s linear infinite;
}
.ld-spinner .ring.inner {
  inset: 10px;
  border: 1px solid var(--ld-hair);
  border-bottom-color: var(--ld-gold);
  animation: ld-spin 2.1s linear infinite reverse;
}
.ld-spinner .core {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ld-gold);
  font-size: 14px;
  letter-spacing: .12em;
  font-weight: 700;
  animation: ld-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes ld-spin  { to { transform: rotate(360deg); } }
@keyframes ld-pulse {
  from { opacity: .45; transform: scale(.95); }
  to   { opacity: 1;   transform: scale(1); }
}

.ld-hero .ld-status {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ld-status .ld-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--ld-gold);
  text-transform: uppercase;
}
.ld-status .ld-kicker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ld-gold);
  box-shadow: 0 0 8px var(--ld-gold);
  animation: ld-pulse 1.2s ease-in-out infinite alternate;
}
.ld-status .ld-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--ld-bone);
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.ld-status .ld-title .caret {
  display: inline-block;
  width: 10px;
  height: 18px;
  background: var(--ld-gold);
  animation: ld-caret 1s steps(1) infinite;
  transform: translateY(2px);
}
@keyframes ld-caret { 50% { opacity: 0; } }
.ld-status .ld-sub {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ld-bone-dim);
}
.ld-status .ld-sub .arr { color: var(--ld-gold); margin: 0 6px; }

/* ── Progress bar ─────────────────────────────────────────────────── */
.ld-prog-wrap { margin-top: 4px; }
.ld-prog-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ld-bone-mute);
  padding-bottom: 8px;
}
.ld-prog-head .pct { color: var(--ld-gold); font-weight: 700; font-size: 11px; letter-spacing: .12em; }
.ld-prog {
  position: relative;
  height: 6px;
  background: rgba(232,226,214,.05);
  border: 1px solid var(--ld-hair);
  overflow: hidden;
}
.ld-prog .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(199,155,80,.55), var(--ld-gold));
  box-shadow: 0 0 12px rgba(199,155,80,.6);
  transition: width .3s ease;
}
.ld-prog .fill::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 30px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18));
}
.ld-prog-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ld-bone-mute);
}
.ld-prog-ticks span { position: relative; }
.ld-prog-ticks span::before {
  content: "";
  position: absolute;
  top: -8px; left: 0;
  width: 1px; height: 4px;
  background: var(--ld-hair-2);
}

/* ── Step list ────────────────────────────────────────────────────── */
.ld-steps {
  margin: 22px 0 18px;
  border-top: 1px solid var(--ld-hair);
  border-bottom: 1px solid var(--ld-hair);
  padding: 14px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ld-steps .step {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ld-bone-mute);
  transition: color .25s;
}
.ld-steps .step .ic {
  width: 14px; height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ld-hair-2);
  color: var(--ld-bone-mute);
  font-size: 10px;
  line-height: 1;
}
.ld-steps .step .lbl {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
}
.ld-steps .step .ms {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ld-bone-mute);
  font-variant-numeric: tabular-nums;
}
.ld-steps .step.done { color: var(--ld-bone-dim); }
.ld-steps .step.done .ic {
  border-color: rgba(107,154,90,.45);
  color: var(--ld-safe);
  background: rgba(107,154,90,.08);
}
.ld-steps .step.done .ms { color: var(--ld-safe); }
.ld-steps .step.active { color: var(--ld-bone); }
.ld-steps .step.active .ic {
  border-color: var(--ld-gold);
  color: var(--ld-gold);
  background: var(--ld-gold-tint);
  animation: ld-pulse 1s ease-in-out infinite alternate;
}
.ld-steps .step.active .lbl { color: var(--ld-gold); }
.ld-steps .step.active .ms  { color: var(--ld-gold); }

/* ── Log feed ─────────────────────────────────────────────────────── */
.ld-log {
  background: rgba(8,7,5,.65);
  border: 1px solid var(--ld-hair);
  padding: 10px 12px;
  height: 96px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.55;
  position: relative;
  mask: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
}
.ld-log .line {
  display: flex;
  gap: 8px;
  letter-spacing: .02em;
  color: var(--ld-bone-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ld-log .line .t  { color: var(--ld-bone-mute); flex: none; }
.ld-log .line .lv { flex: none; font-weight: 600; letter-spacing: .12em; }
.ld-log .line .lv.ok   { color: var(--ld-safe); }
.ld-log .line .lv.info { color: var(--ld-info); }
.ld-log .line .lv.warn { color: var(--ld-warn); }
.ld-log .line .m b { color: var(--ld-bone); font-weight: 500; }

/* ── Footer ───────────────────────────────────────────────────────── */
.ld-foot {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ld-bone-mute);
  text-transform: uppercase;
}
.ld-foot .clearance b { color: var(--ld-gold); font-weight: 600; }
.ld-foot .blink { animation: ld-caret 1.6s steps(1) infinite; }
.ld-foot .sep { color: var(--ld-hair-2); margin: 0 8px; }

/* ── Arriving mode — plain dark screen, no card ──────────────────── */
.ld-overlay.arriving .ld-stage { display: none; }

/* ── Mini mode (enforcement/scd) — spinner + title only ──────────── */
.ld-overlay.mini .ld-head,
.ld-overlay.mini .ld-prog-wrap,
.ld-overlay.mini .ld-steps,
.ld-overlay.mini .ld-log,
.ld-overlay.mini .ld-foot { display: none; }

.ld-overlay.mini .ld-card {
  padding: 28px 30px;
}

.ld-overlay.mini .ld-hero {
  padding: 0;
  justify-content: center;
}

/* ── Standalone page base ─────────────────────────────────────────── */
.ld-standalone-body {
  margin: 0;
  padding: 0;
  background: var(--ld-bg-0);
  color: var(--ld-bone);
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  min-height: 100vh;
  overflow: hidden;
}