/* ── Design tokens ─────────────────────────────────────────── */
:root{
  --bg:#05070A; --panel:#0E1319; --panel-t:rgba(14,19,25,.86);
  --line:rgba(126,166,196,.13); --line-hi:rgba(126,166,196,.28);
  --ink:#E8EDF2; --muted:#8A97A5; --faint:#4E5A66;
  --cyan:#22D3EE; --magenta:#E838A0;
  --g-blue:#0081C6; --g-red:#F04931; --g-yellow:#FBAB18; --g-green:#00AE57;
  --up:#00AE57; --deg:#FBAB18; --down:#F04931;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.45 var(--sans);overflow:hidden;
  background-image:radial-gradient(1100px 600px at 70% -10%,rgba(0,129,198,.10),transparent 60%),
                   radial-gradient(900px 500px at 10% 110%,rgba(34,211,238,.05),transparent 55%)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.eyebrow{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}

/* ── Gate ── */
.gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:var(--bg);transition:opacity .5s}
.gate.hidden{opacity:0;pointer-events:none}
.gate-card{width:min(360px,88vw);text-align:center}
.gate-logo svg{width:230px;height:auto}
.gate-sub{font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:18px 0 26px}
.gate form{display:flex;gap:8px}
.gate input{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  padding:12px 14px;font:14px var(--mono);outline:none}
.gate input:focus{border-color:var(--cyan)}
.gate button{background:var(--cyan);color:#04252B;border:0;border-radius:8px;padding:0 22px;font:700 13px var(--sans);cursor:pointer}
.gate-hint{margin-top:14px;font-size:12px;color:var(--faint)}
.gate-hint.err{color:var(--down)}
.gate-op{margin-top:44px;font:600 9px/1 var(--mono);letter-spacing:.3em;color:var(--faint)}

/* ── Chrome ── */
.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo svg{height:34px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand-ev{font-weight:700;font-size:14px}
.brand-ed{font-size:11px;color:var(--muted)}
.top-right{display:flex;align-items:center;gap:18px}
.live{display:flex;align-items:center;gap:7px;font:700 11px/1 var(--mono);letter-spacing:.14em;color:var(--up)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--up);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,174,87,.5)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.clock{font-size:15px;color:var(--ink)}
.gbar{display:flex;height:2px}
.gbar i{flex:1}.g-b{background:var(--g-blue)}.g-r{background:var(--g-red)}.g-y{background:var(--g-yellow)}.g-g{background:var(--g-green)}

.view[hidden]{display:none!important}
main{position:relative;height:calc(100vh - 58px - 2px - 46px)}
.view{position:absolute;inset:0;padding:16px 20px;overflow:auto}
.panel{background:var(--panel-t);border:1px solid var(--line);border-radius:12px;padding:16px 18px;backdrop-filter:blur(6px)}

/* status glyphs — palabra + glifo, nunca color solo */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:9px;vertical-align:1px}
.dot.up{background:var(--up)}.dot.deg{background:var(--deg);border-radius:2px;transform:rotate(45deg)}.dot.down{background:var(--down)}
.st{font:700 11px var(--mono);letter-spacing:.1em}
.st.up{color:var(--up)}.st.deg{color:var(--deg)}.st.down{color:var(--down)}.st.stb{color:var(--muted)}

/* ── Overview ── */
.ov-grid{display:grid;grid-template-columns:1.35fr 1fr;grid-auto-rows:min-content;gap:14px;max-width:1500px;margin:0 auto}
.span2{grid-column:1 / -1}
.hero-status{font:800 clamp(20px,2.4vw,32px)/1.1 var(--sans);letter-spacing:.01em;margin:2px 0 18px}
.hero-clients{display:flex;align-items:baseline;gap:14px;margin-bottom:8px}
.hc-num{font-size:clamp(44px,5.5vw,76px);font-weight:700;line-height:1;color:var(--cyan)}
.hc-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.chart-wrap{position:relative}
.area-chart{width:100%;height:150px;display:block}
.tip{position:absolute;background:#0A0F14;border:1px solid var(--line-hi);border-radius:6px;padding:5px 9px;
  font-size:11px;pointer-events:none;white-space:nowrap;transform:translate(-50%,-120%)}
.wan-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.wan-name{font-weight:600}.wan-carrier{font-size:11px;color:var(--muted)}
.spark{width:120px;height:26px}
.gcp-eb{margin-top:16px}
.gcp-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gcp-tile{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.gcp-ms{font:700 26px var(--mono);color:var(--ink)}
.gcp-ms small{font-size:13px;color:var(--muted)}
.gcp-verdict{font:700 10px var(--mono);letter-spacing:.12em}
.gcp-lbl{font-size:11px;color:var(--muted);margin-top:2px}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px}
.svc-cell{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;font-size:13px}
.svc-cell .st{font-size:10px}
.core-line{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.core-line b{color:var(--ink);font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── Ingress ── */
#view-ingress{padding:0}
#ingressCanvas{position:absolute;inset:0;width:100%;height:100%}
.ing-panel{position:absolute;top:24px;width:250px}
.ing-left{left:24px}.ing-right{right:24px}
.ing-big{font:700 30px var(--mono);margin:4px 0 2px}
.ing-big small{font-size:14px;color:var(--muted)}
.ing-kv{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:3px 0}
.ing-kv b{color:var(--ink);font-family:var(--mono);font-weight:600}
.ing-core{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  font-size:11px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;text-align:center}

/* ── Edge ── */
#view-edge{padding:0}
#edge3d,#edge2d{position:absolute;inset:0;width:100%;height:100%}
.edge-side{position:absolute;top:18px;right:18px;width:230px;background:var(--panel-t);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;backdrop-filter:blur(6px)}
.fl-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12.5px;border-bottom:1px solid var(--line)}
.fl-row:last-of-type{border-bottom:0}
.fl-badge{font:600 9px var(--mono);letter-spacing:.1em;color:var(--faint);margin-right:7px}
.fl-cl{font-family:var(--mono);color:var(--cyan)}
.dens-legend i{display:block;height:8px;border-radius:4px;margin:6px 0 4px;
  background:linear-gradient(90deg,#1B4FA0,#22D3EE,#E838A0,#FF6A3D)}
.dens-legend span{font-size:10px;color:var(--faint)}
.edge-hud{position:absolute;pointer-events:none;padding:8px 12px;font-size:12px}
.edge-hud b{font-family:var(--mono)}
.replay{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;
  width:min(560px,calc(100% - 300px));padding:10px 14px}
.rp-btn{background:none;border:1px solid var(--line-hi);color:var(--ink);border-radius:7px;
  padding:6px 12px;font:700 11px var(--mono);letter-spacing:.1em;cursor:pointer}
.rp-btn.on{background:var(--cyan);color:#04252B;border-color:var(--cyan)}
#rpScrub{flex:1;accent-color:var(--cyan)}
#rpTime{min-width:52px;text-align:right;font-size:12px}

/* ── Services ── */
#view-services{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;align-content:start}
.svc-detail{overflow:auto}
.bar-row{display:grid;grid-template-columns:150px 1fr 110px;gap:12px;align-items:center;padding:7px 0}
.bar-name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-cls{font:600 8.5px var(--mono);color:var(--faint);letter-spacing:.08em;display:block}
.bar-track{position:relative;height:10px;background:rgba(126,166,196,.08);border-radius:5px}
.bar-fill{position:absolute;inset:0 auto 0 0;border-radius:5px;background:var(--cyan);min-width:2px}
.bar-alloc{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--line-hi)}
.bar-val{font:600 11.5px var(--mono);color:var(--muted);text-align:right}
.bar-val b{color:var(--ink)}
.strip-row{display:grid;grid-template-columns:150px 1fr 56px;gap:12px;align-items:center;padding:7px 0}
.strip{display:flex;gap:2px;height:14px}
.strip i{flex:1;border-radius:2px;background:var(--up);opacity:.85}
.strip i.deg{background:var(--deg)}.strip i.down{background:var(--down)}.strip i.off{background:rgba(126,166,196,.12)}
.strip-pct{font:600 11.5px var(--mono);text-align:right}

/* ── Rail ── */
.rail{height:46px;display:flex;align-items:center;gap:6px;padding:0 20px;border-top:1px solid var(--line)}
.tab{background:none;border:0;color:var(--muted);font:700 11px var(--mono);letter-spacing:.16em;
  padding:8px 14px;border-radius:7px;cursor:pointer}
.tab.active{color:var(--ink);background:rgba(34,211,238,.10);box-shadow:inset 0 0 0 1px rgba(34,211,238,.3)}
.tab:focus-visible,.rp-btn:focus-visible,.gate button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.rail-right{margin-left:auto;display:flex;align-items:center;gap:16px}
#dataAge{font-size:10px}
.ap-ind{display:flex;align-items:center;gap:8px;font:700 9px var(--mono);letter-spacing:.2em;color:var(--faint)}
.ap-prog{width:60px;height:3px;background:rgba(126,166,196,.12);border-radius:2px;overflow:hidden}
.ap-prog i{display:block;height:100%;width:0;background:var(--cyan)}
.ap-ind.off{opacity:.35}
.opmark{position:fixed;right:16px;bottom:56px;font-size:9px;letter-spacing:.3em;color:var(--faint);pointer-events:none}

/* empty state */
.empty{padding:26px 0;text-align:center;color:var(--faint);font-size:12.5px;letter-spacing:.05em}

/* ── Responsive ── */
@media (max-width:980px){
  body{overflow:auto}
  main{height:auto;min-height:calc(100vh - 106px)}
  .view{position:relative;padding:12px}
  .ov-grid,#view-services{grid-template-columns:1fr}
  #view-ingress,#view-edge{height:78vh}
  .ing-panel{width:200px;top:12px}.ing-left{left:12px}.ing-right{right:12px}
  .edge-side{position:relative;inset:auto;width:auto;margin:10px}
  .replay{width:calc(100% - 36px)}
  .brand-ed{display:none}
}
@media (prefers-reduced-motion:reduce){
  .live-dot{animation:none}
  *{transition:none!important}
}