:root{
  --bg:#05080d; --bg2:#0a1018; --panel:#0c141e; --panel2:#101b28;
  --line:#1b2b3d; --line2:#27405a;
  --ink:#e6f0f7; --ink2:#9fb3c4; --ink3:#6a8196;
  --cy:#3fd8ff; --cy-d:#1b8fb3; --cy-glow:rgba(63,216,255,.18);
  --good:#37e6a0; --warn:#ffc233; --serious:#ff8a3d; --crit:#ff4d5e;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --disp:'Chakra Petch','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--disp);
  background-image:linear-gradient(rgba(63,216,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(63,216,255,.035) 1px,transparent 1px);
  background-size:36px 36px;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 20% 0,rgba(63,216,255,.08),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(55,230,160,.05),transparent 50%);z-index:0}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);z-index:50;opacity:.35}
small{font:500 10px var(--mono);letter-spacing:.14em;color:var(--ink3);display:block}
h1,h2,h3{margin:0;font-weight:600}
button,select,input{font:inherit;color:inherit}
.banner{position:relative;z-index:2;text-align:center;font:700 10px var(--mono);letter-spacing:.25em;padding:5px 8px;background:#0e2a1d;color:var(--good);border-bottom:1px solid #1a4d36}

.topbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 24px;border-bottom:1px solid var(--line);background:linear-gradient(var(--bg2),rgba(10,16,24,.7))}
.brand{display:flex;gap:12px;align-items:center;color:var(--cy)}
.brand b{font-size:19px;letter-spacing:.14em;color:var(--ink);display:block;line-height:1.1}
.brand b span{color:var(--cy)}
.brand svg{filter:drop-shadow(0 0 6px var(--cy))}
.top-meta{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.top-meta b{font:500 13px var(--mono);display:block}
.ok{color:var(--good)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);margin-right:6px;box-shadow:0 0 8px var(--good);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}

.btn{background:transparent;border:1px solid var(--cy-d);color:var(--cy);font:600 11px var(--mono);letter-spacing:.12em;padding:8px 12px;cursor:pointer;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:.15s}
.btn:hover{background:var(--cy-glow);box-shadow:0 0 14px var(--cy-glow)}
.btn:focus-visible,select:focus-visible,input:focus-visible,.m-item:focus-visible,.seg button:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.btn.ghost{border-color:var(--line2);color:var(--ink2)}
.btn.sm{padding:4px 9px;font-size:10px}
.btn.done{border-color:#1a4d36;color:var(--good);cursor:default}

.layout{position:relative;z-index:2;display:grid;grid-template-columns:290px 1fr;gap:20px;padding:20px 24px 40px;max-width:1600px;margin:0 auto}
.rail{align-self:start;position:sticky;top:12px;border:1px solid var(--line);background:var(--panel);padding:14px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}
.rail-title{font:600 11px var(--mono);letter-spacing:.16em;color:var(--ink3);margin-bottom:12px;display:flex;justify-content:space-between}
.rail-title em{font-style:normal;color:var(--cy)}
.m-item{display:block;width:100%;text-align:left;background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--line2);padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:.15s;position:relative}
.m-item:hover{border-color:var(--line2);background:var(--panel2)}
.m-item.on{border-color:var(--cy-d);border-left-color:var(--cy);background:linear-gradient(90deg,var(--cy-glow),var(--panel2));box-shadow:inset 0 0 20px rgba(63,216,255,.06)}
.m-item .code{font:500 10px var(--mono);color:var(--cy);letter-spacing:.14em}
.m-item .nm{font-weight:600;display:block;margin:2px 0 6px}
.m-item .row{display:flex;justify-content:space-between;align-items:center;font:500 12px var(--mono);color:var(--ink2)}
.bar-mini{height:3px;background:var(--line);margin-top:7px}
.bar-mini i{display:block;height:100%}
.rail-foot{border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.gauge-wrap{position:relative;width:150px;margin:6px auto 2px}
.gauge-wrap b{position:absolute;left:0;right:0;bottom:2px;text-align:center;font:700 22px var(--mono)}
.rail-foot small:last-child{text-align:center;text-transform:none;letter-spacing:.04em}

.main{min-width:0;display:flex;flex-direction:column;gap:16px}
.head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.crumb{font:500 11px var(--mono);letter-spacing:.2em;color:var(--cy)}
h1{font-size:30px;letter-spacing:.03em;margin:2px 0 4px;text-shadow:0 0 22px rgba(63,216,255,.25)}
.head p{margin:0;color:var(--ink2);max-width:760px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:500 10px var(--mono);letter-spacing:.1em;border:1px solid var(--line2);color:var(--ink2);padding:3px 8px;background:var(--bg2)}

.filters{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;padding:12px 14px;border:1px solid var(--line);background:var(--panel)}
.filters label{font:500 10px var(--mono);letter-spacing:.14em;color:var(--ink3);display:flex;flex-direction:column;gap:6px}
.seg{display:inline-flex;border:1px solid var(--line2)}
.seg button{background:transparent;border:0;border-right:1px solid var(--line2);padding:7px 11px;font:500 11px var(--mono);letter-spacing:.08em;color:var(--ink2);cursor:pointer}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--panel2);color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--cy);color:#02141b;font-weight:700}
select,input[type=search]{background:var(--bg2);border:1px solid var(--line2);padding:7px 10px;font:500 12px var(--mono);min-width:200px}
select{color-scheme:dark}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{position:relative;border:1px solid var(--line);background:var(--panel);padding:14px 16px;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--cy);box-shadow:0 0 10px var(--cy)}
.kpi .lab{font:500 10px var(--mono);letter-spacing:.14em;color:var(--ink3)}
.kpi .val{font:700 34px/1.15 var(--mono);margin:4px 0 2px;display:flex;align-items:baseline;gap:6px}
.kpi .val u{text-decoration:none;font-size:15px;color:var(--ink3)}
.kpi .sub{display:flex;justify-content:space-between;align-items:center;font:500 11px var(--mono);color:var(--ink2);gap:8px}
.delta.up{color:var(--good)}.delta.down{color:var(--crit)}.delta.flat{color:var(--ink3)}
.stat{display:inline-flex;gap:5px;align-items:center;font:700 10px var(--mono);letter-spacing:.1em;padding:2px 7px;border:1px solid}
.stat.good{color:var(--good);border-color:#1a4d36}.stat.warn{color:var(--warn);border-color:#5c4710}
.stat.serious{color:var(--serious);border-color:#5e3115}.stat.crit{color:var(--crit);border-color:#5e1d26}

.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:12px}
.panel{border:1px solid var(--line);background:var(--panel);min-width:0}
.panel>header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--line)}
.panel h3{font:600 12px var(--mono);letter-spacing:.16em;color:var(--ink2)}
.panel h3 em{font-style:normal;color:var(--cy);margin-left:8px}
.legend{font:500 10px var(--mono);color:var(--ink3);display:flex;gap:6px;align-items:center;letter-spacing:.06em}
.sw{display:inline-block;width:16px;height:0;margin-left:8px}
.sw.line{border-top:2px solid var(--cy)}.sw.bar{height:8px;width:8px;background:var(--cy);border-top:0}
.sw.tgt{border-top:2px dashed var(--warn)}
.chart{padding:8px 12px 12px;position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font:500 10px var(--mono);fill:var(--ink3)}
.chart .gl{stroke:var(--line);stroke-width:1}
.bar-row{cursor:pointer}
.bar-row:hover rect.hit{fill:rgba(63,216,255,.06)}
.bar-row.dim{opacity:.35}

.gap-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font:600 10px var(--mono);letter-spacing:.14em;color:var(--ink3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line2);white-space:nowrap;background:var(--bg2)}
th[data-k]{cursor:pointer}th[data-k]:hover{color:var(--cy)}
th.sorted::after{content:" ▾";color:var(--cy)}th.sorted.asc::after{content:" ▴"}
td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.r{cursor:pointer}tr.r:hover td{background:var(--panel2)}
tr.r.open td{background:var(--panel2)}
td.mono,.mono{font-family:var(--mono);font-size:12px}
.src-tags{display:flex;gap:4px;flex-wrap:wrap}
.src-tags span{font:500 9px var(--mono);letter-spacing:.08em;border:1px solid var(--line2);color:var(--ink2);padding:1px 5px}
.src-tags span.nlp{border-color:var(--cy-d);color:var(--cy)}
tr.detail td{background:#08111a;border-left:2px solid var(--cy);padding:14px 18px}
.ev{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.ev h4{margin:0 0 6px;font:600 10px var(--mono);letter-spacing:.14em;color:var(--cy)}
.ev ul{list-style:none;margin:0;padding:0;font:12px/1.7 var(--mono);color:var(--ink2)}
.ev li b{color:var(--ink);font-weight:500}
.ev blockquote{margin:0;padding:8px 12px;border-left:2px solid var(--cy-d);background:var(--bg2);font:12px/1.6 var(--mono);color:var(--ink2)}
.ev mark{background:rgba(63,216,255,.18);color:var(--cy);padding:0 2px}
.table-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font:500 11px var(--mono);color:var(--ink3)}
.empty{padding:30px;text-align:center;color:var(--ink3);font:12px var(--mono)}

.spec dl{margin:0;display:grid;grid-template-columns:170px 1fr}
.spec dt,.spec dd{margin:0;padding:10px 16px;border-bottom:1px solid var(--line)}
.spec dt{font:600 10px var(--mono);letter-spacing:.14em;color:var(--cy);background:var(--bg2)}
.spec dd{color:var(--ink2);font-size:13px}
.spec.closed dl{display:none}

.tip{position:fixed;z-index:60;pointer-events:none;opacity:0;transform:translate(-50%,-110%);background:#02060a;border:1px solid var(--cy-d);padding:7px 10px;font:500 11px var(--mono);box-shadow:0 0 18px var(--cy-glow);white-space:nowrap;transition:opacity .1s}
.tip b{color:var(--cy)}
.toast{position:fixed;z-index:70;right:20px;bottom:20px;background:#07131d;border:1px solid var(--cy);padding:10px 16px;font:500 12px var(--mono);transform:translateY(20px);opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1;transform:none}

@media (max-width:1100px){
  .layout{grid-template-columns:1fr}
  .rail{position:static}
  #measureList{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
  .m-item{margin:0}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
}
@media (max-width:600px){
  .layout{padding:14px 16px 30px}.topbar{padding:12px 16px}
  .kpis{grid-template-columns:1fr}
  h1{font-size:24px}
  .spec dl{grid-template-columns:1fr}.spec dt{border-bottom:0;padding-bottom:0;background:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}