/* ============ tokens — dark ops room, warm-biased neutrals, Sun-Yellow brand ============ */
/* LOCKED design from MOCKUP.html — do not alter the palette or layout. */
:root{
  --bg:#12110D; --bg-2:#171510; --surface:#1B1913; --surface-2:#232017; --raise:#2A2619;
  --line:#332F23; --line-soft:#28241B;
  --text:#F3EEE1; --dim:#9C9583; --faint:#6C6555; --ghost:#463f31;
  --accent:#F6C445;            /* Sun Yellow — BRAND only (wordmark, heartbeat, emphasis) */
  --accent-soft:#3a3210;
  --ok:#46C08A; --ok-dim:#183a2e;
  --warn:#EE9B3A; --warn-dim:#3a2c14;
  --crit:#EF5F5F; --crit-dim:#3a1c1c;
  --info:#79A9C6; --info-dim:#17303c;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --r:7px; --r-sm:5px;
}
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:
    radial-gradient(1100px 500px at 82% -8%, #1c1a12 0%, transparent 60%),
    radial-gradient(900px 460px at 8% 108%, #16150f 0%, transparent 55%),
    var(--bg);
  color:var(--text); font-family:var(--sans);
  font-size:14px; line-height:1.45; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom);
}
.wrap{max-width:1320px; margin:0 auto; padding:0 clamp(12px,3vw,28px)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums}
.ml{font-size:10.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--dim); font-weight:600}
a{color:inherit}
[hidden]{display:none !important}

/* ============ command bar ============ */
.cmd{position:sticky; top:0; z-index:20; background:rgba(18,17,13,.86);
  backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--line)}
.cmd .wrap{display:flex; align-items:center; gap:14px; height:56px}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.brand .mk{width:11px; height:11px; border-radius:2px; background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); transform:rotate(45deg)}
.brand b{font-size:15px}
.brand .noc{font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.16em;
  border:1px solid var(--ghost); padding:2px 6px; border-radius:4px}
.cmd .sp{flex:1}
.clock{font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.03em; white-space:nowrap}
.clock b{color:var(--text); font-weight:600}
.beat{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--faint)}
.beat .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:.35; box-shadow:0 0 0 0 var(--accent-soft)}50%{opacity:1; box-shadow:0 0 0 4px transparent}}
/* command-bar buttons (sign out / mock badge) */
.cmd .btn{font-family:var(--mono); font-size:11px; color:var(--dim); background:transparent;
  border:1px solid var(--line); border-radius:5px; padding:5px 9px; cursor:pointer; letter-spacing:.04em}
.cmd .btn:hover{color:var(--text); border-color:var(--ghost)}
.mockbadge{font-family:var(--mono); font-size:10px; color:var(--accent); border:1px solid var(--ghost);
  background:var(--accent-soft); padding:3px 7px; border-radius:4px; letter-spacing:.12em}

.pill{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; font-weight:600;
  padding:5px 11px; border-radius:100px; border:1px solid; letter-spacing:.04em}
.pill .led{width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px currentColor}
.pill.ok{color:var(--ok); border-color:#2a5744; background:var(--ok-dim)}
.pill.warn{color:var(--warn); border-color:#5a4522; background:var(--warn-dim)}
.pill.crit{color:var(--crit); border-color:#5a2b2b; background:var(--crit-dim)}

/* ============ offline / stale banner ============ */
.opsbanner{display:none; align-items:center; gap:9px; padding:9px 14px; border-radius:var(--r-sm);
  border:1px solid #4d3a1c; background:var(--warn-dim); color:var(--warn);
  font-family:var(--mono); font-size:12px; margin:14px 0 0}
.opsbanner.show{display:flex}
.opsbanner .ic{font-weight:700; letter-spacing:.05em}
.opsbanner .x{color:var(--dim)}

/* ============ hero ============ */
.hero{display:grid; grid-template-columns:minmax(240px,300px) 1fr; gap:16px; padding:20px 0 6px}
.verdict{background:linear-gradient(160deg,var(--surface-2),var(--surface)); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 18px 16px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden}
.verdict::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ok)}
.verdict[data-status="warn"]::before{background:var(--warn)}
.verdict[data-status="crit"]::before{background:var(--crit)}
.verdict h1{margin:0; font-size:27px; line-height:1.05; letter-spacing:-.01em; font-weight:800; text-wrap:balance}
.verdict .sub{color:var(--dim); font-size:13px}
.verdict .rollup{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:10px}
.tag{font-family:var(--mono); font-size:11px; padding:3px 8px; border-radius:5px; border:1px solid var(--line-soft);
  color:var(--dim); display:inline-flex; gap:6px; align-items:center}
.tag .d{width:7px;height:7px;border-radius:50%}
.d.ok{background:var(--ok)} .d.warn{background:var(--warn)} .d.crit{background:var(--crit)} .d.info{background:var(--info)}

.instruments{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.inst{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px 10px;
  display:flex; flex-direction:column; gap:7px; position:relative; min-height:104px}
.inst .top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.inst .v{font-family:var(--mono); font-size:26px; font-weight:600; line-height:1; letter-spacing:-.02em}
.inst .v small{font-size:14px; color:var(--dim); font-weight:500; letter-spacing:0}
.inst .delta{font-family:var(--mono); font-size:11.5px; font-weight:600; white-space:nowrap}
.up{color:var(--ok)} .down{color:var(--crit)} .flat{color:var(--faint)}
.inst.warn .v{color:var(--warn)} .inst.crit .v{color:var(--crit)} .inst.ok .v{color:var(--text)}
.inst .foot{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto}
.inst .note{font-size:11px; color:var(--faint); line-height:1.25}
.spark{display:block}
/* per-tile stale badge */
.inst .stale,.row .stale{font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--warn);
  border:1px solid #4d3a1c; background:var(--warn-dim); border-radius:3px; padding:1px 4px; text-transform:uppercase}
.inst .stale{position:absolute; top:10px; right:10px}

/* ============ alerts ============ */
.alerts{display:flex; gap:9px; flex-wrap:wrap; padding:12px 0 4px}
.alert{display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); font-size:12.5px}
.alert .ic{font-family:var(--mono); font-weight:700; font-size:11px; padding:2px 6px; border-radius:4px; letter-spacing:.05em}
.alert.warn{border-color:#4d3a1c} .alert.warn .ic{color:var(--warn); background:var(--warn-dim)}
.alert.crit{border-color:#5a2b2b} .alert.crit .ic{color:var(--crit); background:var(--crit-dim)}
.alert.info{border-color:#243c47} .alert.info .ic{color:var(--info); background:var(--info-dim)}
.alert.mut{opacity:.72} .alert.mut .ic{color:var(--faint); background:#211e16}
.alert b{font-weight:600} .alert .x{color:var(--dim)}

/* ============ lenses ============ */
.sect-h{display:flex; align-items:center; gap:10px; margin:26px 0 12px}
.sect-h .ttl{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--dim); font-weight:700}
.sect-h .rule{flex:1; height:1px; background:linear-gradient(90deg,var(--line),transparent)}

.lenses{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start}
.lens{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.lens > .h{display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,var(--surface-2),transparent)}
.lens .glyph{width:26px; height:26px; border-radius:6px; display:grid; place-items:center; font-size:14px;
  background:var(--bg-2); border:1px solid var(--line)}
.lens .h .nm{font-weight:700; font-size:13.5px; letter-spacing:.01em}
.lens .h .st{margin-left:auto; font-family:var(--mono); font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:100px; letter-spacing:.04em}
.st.ok{color:var(--ok); background:var(--ok-dim)} .st.warn{color:var(--warn); background:var(--warn-dim)}
.st.crit{color:var(--crit); background:var(--crit-dim)}
.st.quiet{color:var(--info); background:var(--info-dim)}

.row{display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:11px 15px; border-top:1px solid var(--line-soft);
  align-items:center; cursor:default; transition:background .12s}
.row:first-of-type{border-top:none}
.row:hover{background:var(--bg-2)}
.row .lab{font-size:12.5px; color:var(--dim); display:flex; align-items:center; gap:7px}
.row .lab .sev{width:6px; height:6px; border-radius:50%; flex:none}
.row .val{font-family:var(--mono); font-size:15px; font-weight:600; text-align:right; white-space:nowrap}
.row .val small{font-size:11px; color:var(--faint); font-weight:500}
.row .meta{grid-column:1/2; font-size:11px; color:var(--faint); font-family:var(--mono)}
.row .sparkwrap{grid-column:2/3; justify-self:end}
.row.warn .val{color:var(--warn)} .row.crit .val{color:var(--crit)}
.bar{grid-column:1/-1; height:4px; border-radius:3px; background:var(--bg-2); overflow:hidden; margin-top:2px}
.bar i{display:block; height:100%; border-radius:3px}

/* ============ event feed ============ */
.feed{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.feed .h{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line-soft)}
.feed .h .nm{font-weight:700; font-size:13px}
.feed .h .live{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--ok); display:flex; gap:6px; align-items:center}
.feed .h .live.stale{color:var(--warn)}
.feed .h .live .dot{width:6px;height:6px;border-radius:50%;background:var(--ok); animation:beat 2s infinite}
.feed .h .live.stale .dot{background:var(--warn)}
.tl{list-style:none; margin:0; padding:6px 0; display:grid}
.tl li{display:grid; grid-template-columns:64px 18px 1fr; gap:10px; align-items:start; padding:8px 16px}
.tl .t{font-family:var(--mono); font-size:11px; color:var(--faint); padding-top:1px; text-align:right}
.tl .k{position:relative; display:flex; justify-content:center}
.tl .k::before{content:""; position:absolute; top:11px; bottom:-13px; width:1px; background:var(--line)}
.tl li:last-child .k::before{display:none}
.tl .k i{width:9px; height:9px; border-radius:50%; margin-top:4px; border:2px solid var(--bg); z-index:1}
.tl .msg{font-size:12.5px; line-height:1.35}
.tl .msg b{font-weight:600}
.tl .msg .src{font-family:var(--mono); font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em}

/* ============ footer ============ */
.foot{margin:26px 0 40px; display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center;
  padding-top:16px; border-top:1px solid var(--line-soft); color:var(--faint); font-size:11.5px}
.foot .src{display:flex; align-items:center; gap:7px; font-family:var(--mono)}
.foot .src i{width:7px;height:7px;border-radius:50%}
.legend{display:flex; gap:14px; margin-left:auto; flex-wrap:wrap}
.legend span{display:inline-flex; gap:6px; align-items:center}
.legend i{width:8px;height:8px;border-radius:50%}
.stamp{width:100%; color:var(--ghost); font-family:var(--mono); font-size:10.5px; letter-spacing:.03em}
.stamp b{color:var(--faint)}

/* ============ login gate ============ */
.gate{min-height:100dvh; display:grid; place-items:center; padding:24px}
.gate .card{width:100%; max-width:360px; background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; display:flex; flex-direction:column; gap:16px}
.gate .brand{justify-content:center; margin-bottom:2px}
.gate h1{margin:0; font-size:19px; font-weight:800; text-align:center; letter-spacing:-.01em}
.gate .lede{color:var(--dim); font-size:12.5px; text-align:center; margin:-8px 0 2px}
.gate label{font-size:10.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--dim); font-weight:600}
.gate input{width:100%; font-family:var(--mono); font-size:15px; color:var(--text); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px; letter-spacing:.02em}
.gate input:focus{outline:none; border-color:var(--accent)}
.gate .otp{letter-spacing:.5em; text-align:center; font-size:18px}
.gate .field{display:flex; flex-direction:column; gap:7px}
.gate button.primary{font-family:var(--sans); font-weight:700; font-size:14px; color:#1a1710;
  background:var(--accent); border:none; border-radius:var(--r-sm); padding:12px; cursor:pointer; letter-spacing:.01em}
.gate button.primary:disabled{opacity:.5; cursor:default}
.gate button.link{background:none; border:none; color:var(--dim); font-family:var(--mono); font-size:11.5px;
  cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.gate .msg{font-size:12px; font-family:var(--mono); text-align:center; min-height:16px}
.gate .msg.err{color:var(--crit)} .gate .msg.ok{color:var(--ok)} .gate .msg.info{color:var(--dim)}
.gate .foothint{font-size:10.5px; color:var(--faint); text-align:center; line-height:1.4}

/* skeleton shimmer while first load resolves */
.skel{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--r); min-height:104px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============ responsive ============ */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .lenses{grid-template-columns:1fr}
}
@media (max-width:560px){
  .instruments{grid-template-columns:repeat(2,1fr)}
  .cmd .clock .cd{display:none}
  .brand .noc{display:none}
  .verdict h1{font-size:23px}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important} }
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}