:root{
  --ground:#eef3fb;
  --surface:#ffffff;
  --surface-2:#f6f9fe;
  --chart-bg:#ffffff;
  --sunk:#e9f0fa;
  --ink:#0b2a68;
  --ink-soft:#4c668f;
  --ink-faint:#7a91b5;
  --line:#d8e4f5;
  --line-soft:#eaf1fb;
  --accent:#1b5ecc;
  --accent-bg:#e7f0fd;
  --c1:#1f63c4;
  --c2:#a06a08;
  --c3:#00806a;
  --good:#00704b;
  --warn:#b5860c;
  --crit:#a82f26;
  --good-bg:#e4f4ed;
  --warn-bg:#fbf2da;
  --crit-bg:#fbeceb;
  --grid:#e9f0fa;
  --shadow:0 1px 2px rgba(11,42,104,.05), 0 4px 14px rgba(11,42,104,.05);
  --rail:#0b2a68;
  --rail-ink:#cfe0fa;
  --rail-ink-on:#ffffff;
  --rail-on:rgba(255,255,255,.13);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#061a44;
    --surface:#0b2a68;
    --surface-2:#0d2f70;
    --chart-bg:#071e4e;
    --sunk:#071e4e;
    --ink:#ffffff;
    --ink-soft:#b9d2f7;
    --ink-faint:#7ea3d8;
    --line:#17408d;
    --line-soft:#102f6f;
    --accent:#9ecbff;
    --accent-bg:#123f8f;
    --c1:#4a8bea;
    --c2:#bf8828;
    --c3:#12a07f;
    --good:#2fa872;
    --warn:#b78d0e;
    --crit:#d6453f;
    --good-bg:#0d3a2a;
    --warn-bg:#3a2f10;
    --crit-bg:#4a1a18;
    --grid:#123f8f;
    --shadow:0 1px 2px rgba(3,12,36,.35), 0 6px 18px rgba(3,12,36,.3);
    --rail:#041538;
    --rail-ink:#9dbdec;
    --rail-ink-on:#ffffff;
    --rail-on:rgba(255,255,255,.1);
  }
}
:root[data-theme="dark"]{
  --ground:#061a44;
  --surface:#0b2a68;
  --surface-2:#0d2f70;
  --chart-bg:#071e4e;
  --sunk:#071e4e;
  --ink:#ffffff;
  --ink-soft:#b9d2f7;
  --ink-faint:#7ea3d8;
  --line:#17408d;
  --line-soft:#102f6f;
  --accent:#9ecbff;
  --accent-bg:#123f8f;
  --c1:#4a8bea;
  --c2:#bf8828;
  --c3:#12a07f;
  --good:#2fa872;
  --warn:#b78d0e;
  --crit:#d6453f;
  --good-bg:#0d3a2a;
  --warn-bg:#3a2f10;
  --crit-bg:#4a1a18;
  --grid:#123f8f;
  --shadow:0 1px 2px rgba(3,12,36,.35), 0 6px 18px rgba(3,12,36,.3);
  --rail:#041538;
  --rail-ink:#9dbdec;
  --rail-ink-on:#ffffff;
  --rail-on:rgba(255,255,255,.1);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased
}
h1,h2,h3{margin:0;letter-spacing:-.02em}
button,input{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--ground);z-index:50;padding:20px}
.gate-box{
  display:flex;flex-direction:column;gap:12px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:32px 28px;width:min(360px,100%);box-shadow:var(--shadow)
}
.gate-box img{margin:0 auto}
.gate-box h1{font-size:21px}
.gate-box label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:left}
.gate-box input{padding:11px 13px;border-radius:9px;border:1px solid var(--line);background:var(--sunk);width:100%}
.gate-msg{margin:0;font-size:13.5px;color:var(--crit);min-height:20px}

.btn{
  padding:8px 15px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface);cursor:pointer;font-size:14px;min-height:36px
}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--ground);font-weight:640}

.app{display:flex;min-height:100vh}

.rail{
  flex:0 0 214px;background:var(--rail);color:var(--rail-ink);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  padding:18px 12px calc(14px + env(safe-area-inset-bottom));
  padding-left:max(12px, env(safe-area-inset-left))
}
.rail-brand{display:flex;align-items:center;gap:10px;padding:0 8px 20px;color:var(--rail-ink-on);font-weight:750;letter-spacing:-.02em}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.rail-nav button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 12px;border:0;border-radius:10px;background:none;color:var(--rail-ink);
  cursor:pointer;font-size:14.5px;min-height:42px
}
.rail-nav button svg{width:19px;height:19px;fill:currentColor;flex:none;opacity:.8}
.rail-nav button:hover{background:var(--rail-on);color:var(--rail-ink-on)}
.rail-nav button.on{background:var(--rail-on);color:var(--rail-ink-on);font-weight:680}
.rail-nav button.on svg{opacity:1}
.rail-foot{margin-top:auto;padding:12px 10px 0;border-top:1px solid rgba(255,255,255,.12)}
.fresh{margin:0;font-size:11.5px;color:var(--rail-ink);opacity:.75;line-height:1.45}

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.bar{
  position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:14px 24px;padding-right:max(24px, env(safe-area-inset-right));
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between
}
.bar h1{font-size:20px}
.bar p{margin:1px 0 0;font-size:12.5px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.bar-head{display:flex;align-items:center;gap:12px;min-width:0}
.bar-name{min-width:0}
.bar-right{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.menu-btn{
  display:none;place-items:center;flex:none;width:40px;height:40px;
  border:1px solid var(--line);border-radius:10px;background:var(--sunk);cursor:pointer
}
.menu-btn svg{width:20px;height:20px;fill:currentColor}
.filters-btn{
  display:none;align-items:center;gap:7px;margin-left:auto;flex:none;
  padding:8px 13px;min-height:40px;border:1px solid var(--line);border-radius:10px;
  background:var(--sunk);cursor:pointer;font-size:13.5px
}
.filters-btn svg{width:16px;height:16px;fill:currentColor;opacity:.8}
.scrim{position:fixed;inset:0;background:rgba(2,10,28,.55);z-index:35}
.ranges{display:flex;flex-wrap:wrap;gap:4px;background:var(--sunk);padding:3px;border-radius:11px}
.ranges button{
  padding:6px 12px;border-radius:8px;border:0;background:none;
  cursor:pointer;font-size:13px;color:var(--ink-soft);min-height:32px
}
.ranges button:hover{color:var(--ink)}
.ranges button.on{background:var(--surface);color:var(--ink);font-weight:650;box-shadow:var(--shadow)}
.ranges.muted{opacity:.45}
.ranges.muted button{cursor:not-allowed}
.custom{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.custom label{font-size:12.5px;color:var(--ink-faint);display:flex;gap:6px;align-items:center}
.custom input{padding:6px 9px;border-radius:8px;border:1px solid var(--line);background:var(--sunk);min-height:32px}

main{
  flex:1;padding:22px 24px 44px;
  padding-right:max(24px, env(safe-area-inset-right));
  max-width:1440px;width:100%
}
.view{display:flex;flex-direction:column;gap:14px}

.sec{
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:700;margin:12px 0 -2px
}
.view > .sec:first-child{margin-top:0}

.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.card > header{padding:15px 18px 11px}
.card > header h2{font-size:15px;font-weight:660}
.card > header p{margin:3px 0 0;font-size:12.5px;color:var(--ink-faint);line-height:1.4}
.card .body{padding:4px 18px 18px}
.card.lead .body{padding-bottom:20px}

.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:3px
}
.tile .k{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:640}
.tile .v{font-family:var(--mono);font-size:29px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.1}
.tile .row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:2px}
.tile .d{font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tile .d.up{color:var(--good)}
.tile .d.down{color:var(--crit)}
.tile .d.flat{color:var(--ink-faint)}
.tile .row{min-width:0}
.tile svg{flex:0 1 auto;min-width:0;max-width:100%;height:auto}

.alerts{display:grid;gap:8px}
@media (min-width:1180px){ .alerts{grid-template-columns:1fr 1fr} }
.alerts .more{grid-column:1/-1}
.alert{
  display:flex;gap:10px;align-items:flex-start;padding:9px 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--surface);font-size:13px;line-height:1.4
}
.alert .ico{flex:none;width:17px;height:17px;margin-top:2px}
.alert .ico svg{width:100%;height:100%;fill:currentColor}
.alert b{display:block;font-weight:670;margin-bottom:1px}
.alert span{color:var(--ink-soft)}
.alert.crit{background:var(--crit-bg);border-color:var(--crit);color:var(--crit)}
.alert.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.alert.good{background:var(--good-bg);border-color:var(--good);color:var(--good)}
.alert.info{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.alert .go{
  margin-left:auto;flex:none;border:0;background:none;color:inherit;cursor:pointer;
  font-size:12.5px;font-weight:680;text-decoration:underline;padding:4px 6px;min-height:34px
}
.more{
  border:1px dashed var(--line);background:none;color:var(--ink-soft);cursor:pointer;
  border-radius:11px;padding:8px;font-size:12.5px;font-weight:640;min-height:36px
}
.more:hover{border-color:var(--accent);color:var(--accent)}

.loading,.empty,.failed{font-size:13.5px;color:var(--ink-faint);padding:10px 0}
.failed{color:var(--crit)}

.scroll{overflow-x:auto;margin:0 -18px;padding:0 18px}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
th{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:650;background:var(--surface);position:sticky;top:0
}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
tbody tr:last-child td{border-bottom:0}
tbody tr.pick{cursor:pointer}
tbody tr.pick:hover{background:var(--surface-2)}
td.name{font-weight:620}
td:first-child,th:first-child{padding-left:2px}

.chip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:20px;font-size:11.5px;font-weight:650}
.chip.good{background:var(--good-bg);color:var(--good)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.crit{background:var(--crit-bg);color:var(--crit)}
.chip.mute{background:var(--sunk);color:var(--ink-faint)}
.thin{color:var(--ink-faint);font-size:11.5px}

.legend{display:flex;flex-wrap:wrap;gap:13px;margin:2px 0 12px;font-size:12.5px;color:var(--ink-soft)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:14px;padding-top:6px}
.stat .k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:640}
.stat .v{font-family:var(--mono);font-size:21px;font-weight:680;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .sub{font-size:11.5px;color:var(--ink-faint);line-height:1.35}

.funnel{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.step{display:grid;grid-template-columns:112px 1fr auto;gap:11px;align-items:center;font-size:13px}
.step .track{background:var(--sunk);border-radius:6px;height:20px;overflow:hidden}
.step .fill{height:100%;border-radius:6px;background:var(--c1)}
.step .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;min-width:84px;text-align:right}

svg.chart{display:block;width:100%;height:auto;overflow:visible}
svg.chart .gridline{stroke:var(--grid);stroke-width:1}
svg.chart .axis{fill:var(--ink-faint);font-size:10.5px;font-family:var(--mono)}
svg.chart .dot{stroke:var(--surface);stroke-width:2}
svg.chart .hover{fill:transparent;cursor:crosshair}
svg.chart .cross{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:3 3;opacity:0}
svg.chart.live .cross{opacity:1}

.bars{display:flex;flex-direction:column;gap:7px;padding-top:6px}
.bar{display:grid;grid-template-columns:minmax(66px,24%) 1fr auto;gap:10px;align-items:center;font-size:13px}
.bar .track{background:var(--sunk);border-radius:5px;height:16px}
.bar .fill{height:100%;border-radius:5px;background:var(--c1)}
.bar .val{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
.bar .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ladder{display:flex;flex-direction:column;gap:5px;padding-top:4px}
.rung{display:grid;grid-template-columns:minmax(88px,18%) 1fr;gap:11px;align-items:center;font-size:13px}
.rung .lab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rung .three{display:flex;gap:3px;height:18px}
.rung .seg{border-radius:4px;position:relative;min-width:2px}
.rung .seg span{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-family:var(--mono);color:#fff;font-weight:650}

.detail{margin-top:10px;padding-top:18px;border-top:2px solid var(--line);display:flex;flex-direction:column;gap:14px}
.detail-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.detail-top h2{font-size:23px}
.eyebrow{margin:0 0 2px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}

.tip{
  position:fixed;z-index:60;pointer-events:none;background:var(--surface);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;
  box-shadow:var(--shadow);max-width:250px;line-height:1.45
}
.tip b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tip .row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.tip .row i{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}

.foot{
  padding:16px 24px;border-top:1px solid var(--line);color:var(--ink-faint);
  font-size:12px;max-width:1440px
}
.foot p{margin:0}

@media (max-width:900px){
  .app{display:block}
  .menu-btn{display:grid}
  .rail{
    position:fixed;top:0;left:0;z-index:40;
    width:min(272px,84vw);height:100dvh;
    transform:translateX(-100%);transition:transform .24s cubic-bezier(.32,.72,0,1);
    box-shadow:0 0 40px rgba(2,10,28,.5)
  }
  .rail.open{transform:none}
  .rail-nav button{min-height:44px}
  .bar{
    position:sticky;top:0;padding:12px 14px;gap:10px;
    display:grid;grid-template-columns:1fr;
    padding-right:max(14px, env(safe-area-inset-right));
    padding-left:max(14px, env(safe-area-inset-left))
  }
  .filters-btn{display:flex}
  .bar-right{display:none;align-items:stretch;min-width:0;max-width:100%}
  .bar.filters-open .bar-right{display:flex}
  .ranges{flex-wrap:wrap;justify-content:flex-start;max-width:100%;min-width:0}
  .ranges button{white-space:nowrap;flex:none;padding:6px 10px}
  main{
    padding:16px 14px 36px;
    padding-right:max(14px, env(safe-area-inset-right));
    padding-left:max(14px, env(safe-area-inset-left))
  }
  .foot{padding:16px 14px}
  .step{grid-template-columns:92px 1fr auto}
  .grid.two,.grid.three,.grid.four{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){ .rail{transition:none} }
@media (max-width:560px){
  .hero{grid-template-columns:repeat(2,1fr);gap:10px}
  .tile{padding:13px 14px 12px}
  .tile .v{font-size:22px}
  .tile svg{display:none}
  .alert{flex-wrap:wrap}
  .alert .go{margin-left:28px}
}

.rail-nav .dot{width:7px;height:7px;border-radius:50%;background:var(--good);
  margin-inline-start:auto;flex:none;animation:livePulse 2.4s ease-in-out infinite}
.livebar{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:12px;background:var(--card)}
.livebar p{margin:0;font-size:13px;color:var(--ink-soft)}
.livebar .tick{margin-inline-start:auto;font-size:12px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums}
.livebar .pulse{width:9px;height:9px;border-radius:50%;background:var(--good);flex:none;
  box-shadow:0 0 0 0 var(--good);animation:livePulse 2.4s ease-in-out infinite}
.livebar.paused .pulse{animation:none;background:var(--ink-soft)}
.live-resume{font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  padding:5px 12px;border-radius:999px;border:1px solid var(--line);
  background:var(--card-hi);color:var(--ink)}
.live-resume:hover{border-color:var(--accent);color:var(--accent)}
.fresh.wm{opacity:.75}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@media (prefers-reduced-motion:reduce){
  .rail-nav .dot,.livebar .pulse{animation:none}
}