:root{--bg:#070b12;--panel:#0d141f;--panel2:#111b29;--line:#1c2a3d;--line2:#26384f;--tx:#d6e2f0;--mut:#7d90a8;--dim:#52647b;--cy:#35d6ff;--gr:#3ddc97;--am:#ffb43a;--rd:#ff5468;--vi:#a78bfa;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--tx);font:13px/1.45 Inter,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}.app{display:grid;grid-template-columns:232px 1fr;min-height:100%}.side{background:#080e17;border-right:1px solid var(--line);padding:14px 10px;position:sticky;top:0;height:100vh;overflow:auto}.brand{padding:4px 8px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}.brand b{display:block;font-family:var(--mono);letter-spacing:.12em;color:var(--cy);font-size:14px}.brand span{font-size:10.5px;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}.nav{display:flex;flex-direction:column;gap:2px}.nav button{display:flex;gap:9px;align-items:center;text-align:left;background:none;border:1px solid transparent;border-radius:6px;padding:7px 9px;color:var(--mut);font-size:12.5px}.nav button:hover{background:var(--panel);color:var(--tx)}.nav button.on{background:linear-gradient(90deg,#35d6ff24,#35d6ff05);border-color:#35d6ff59;color:#fff}.nav i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--dim);width:18px}.nav button.on i{color:var(--cy)}.sidefoot{margin-top:14px;padding:10px 8px;border-top:1px solid var(--line);font-size:10.5px;color:var(--dim);line-height:1.5}.main{padding:16px 22px 40px;min-width:0}.topbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-radius:8px}.topbar .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-right:2px}.live{margin-left:auto;display:flex;gap:14px;font-family:var(--mono);font-size:11.5px;color:var(--mut)}.live b{color:var(--tx)}.kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--cy);text-transform:uppercase}h1{margin:4px 0 6px;font-size:24px;letter-spacing:-.01em}.desc{color:var(--mut);max-width:880px;margin:0 0 12px}.meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:11px;color:var(--mut);margin-bottom:14px}.meta b{color:var(--tx)}.sim{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--am);border:1px solid rgba(255,180,58,.4);background:#ffb43a12;padding:2px 8px;border-radius:99px;text-transform:uppercase}.grid{display:grid;gap:12px;margin-bottom:12px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}.g13{grid-template-columns:minmax(260px,1fr) minmax(0,2fr)}.g21{grid-template-columns:minmax(0,2fr) minmax(260px,1fr)}.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:0}.card>h3{margin:0 0 2px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cy);font-weight:600;display:flex;justify-content:space-between;gap:8px;align-items:center}.card>.sub{font-size:11.5px;color:var(--mut);margin-bottom:10px}.metric{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;border-left:3px solid var(--line2)}.metric .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}.metric .v{font-family:var(--mono);font-size:22px;font-weight:600;margin-top:2px}.metric .v small{font-size:11px;color:var(--mut);font-weight:400;margin-left:3px}.metric .s{font-size:11px;color:var(--dim);margin-top:1px}.metric.ok{border-left-color:var(--gr)}.metric.ok .v{color:var(--gr)}.metric.warn{border-left-color:var(--am)}.metric.warn .v{color:var(--am)}.metric.bad{border-left-color:var(--rd)}.metric.bad .v{color:var(--rd)}.metric.info{border-left-color:var(--cy)}.metric.info .v{color:var(--cy)}.sl{margin:0 0 11px}.sl-h{display:flex;justify-content:space-between;font-size:12px;color:var(--tx)}.sl-h b{font-family:var(--mono);color:var(--cy);font-weight:500}.hint{font-size:10.5px;color:var(--dim);margin-top:1px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;background:var(--line2);outline:none;margin:7px 0 2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--cy);border:2px solid #06101a;cursor:pointer;box-shadow:0 0 0 1px var(--cy)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--cy);border:2px solid #06101a;cursor:pointer}.tg{display:flex;align-items:center;gap:8px;margin:6px 12px 6px 0;font-size:12px;color:var(--tx);cursor:pointer;-webkit-user-select:none;user-select:none}.tg input{position:absolute;opacity:0;pointer-events:none}.tg .kn{width:30px;height:16px;border-radius:99px;background:var(--line2);position:relative;transition:.15s;flex:none}.tg .kn:after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#9db0c6;transition:.15s}.tg input:checked+.kn{background:#35d6ff59}.tg input:checked+.kn:after{left:16px;background:var(--cy)}.row{display:flex;flex-wrap:wrap;align-items:center}.seg{display:inline-flex;border:1px solid var(--line2);border-radius:6px;overflow:hidden;margin:2px 8px 6px 0}.seg button{background:var(--panel2);border:0;border-right:1px solid var(--line2);padding:5px 11px;color:var(--mut);font-size:12px}.seg button:last-child{border-right:0}.seg button.on{background:#35d6ff2e;color:#fff}.chip{background:var(--panel2);border:1px solid var(--line2);border-radius:99px;padding:4px 11px;font-size:12px;color:var(--mut)}.chip:hover{color:#fff;border-color:var(--cy)}.chip.on{background:#35d6ff29;border-color:var(--cy);color:#fff}.btn{background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:6px 12px;font-size:12px;color:var(--tx);margin:2px 6px 2px 0}.btn:hover{border-color:var(--cy)}.btn.pri{background:#35d6ff2e;border-color:var(--cy);color:#fff}.btn.reset{width:100%;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-top:4px}table{width:100%;border-collapse:collapse;font-size:12px}th{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-align:left;padding:5px 8px;border-bottom:1px solid var(--line2)}td{padding:5px 8px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11.5px}tr.hl td{background:#35d6ff12}tr.click{cursor:pointer}tr.click:hover td{background:var(--panel2)}.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;min-width:60px}.bar>i{display:block;height:100%;background:var(--cy)}.ins{margin:0;padding:0;list-style:none}.ins li{padding:6px 9px 6px 11px;margin:5px 0;border-left:3px solid var(--cy);background:var(--panel2);border-radius:0 5px 5px 0;font-size:12.5px}.ins li.warn{border-color:var(--am)}.ins li.bad{border-color:var(--rd)}.ins li.ok{border-color:var(--gr)}.vp{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#05080e}.vp .ov{position:absolute;left:10px;top:8px;font-family:var(--mono);font-size:10.5px;color:var(--mut);pointer-events:none;line-height:1.6}.vp .ov b{color:var(--tx)}.vp canvas{display:block;width:100%}.legend{height:8px;border-radius:4px;margin:6px 0 2px}.legend+div{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--mut)}.pill{display:inline-block;padding:1px 8px;border-radius:99px;font-size:10.5px;font-family:var(--mono);border:1px solid var(--line2)}.pill.ok{color:var(--gr);border-color:#3ddc9766}.pill.warn{color:var(--am);border-color:#ffb43a66}.pill.bad{color:var(--rd);border-color:#ff546880}.note{font-size:11.5px;color:var(--mut);border:1px dashed var(--line2);border-radius:8px;padding:9px 12px;margin-top:14px;line-height:1.55}.note b{color:var(--cy)}.mat{font-family:var(--mono);font-size:15px;text-align:center;line-height:1.2}.cellgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.cellbtn{border:1px solid rgba(255,255,255,.12);border-radius:5px;padding:7px 2px;font-family:var(--mono);font-size:11px;color:#06101a;font-weight:600;text-align:center}.cellbtn.sel{outline:2px solid #fff;outline-offset:1px}.cellbtn small{display:block;font-size:9px;opacity:.7;font-weight:400}@media (max-width:1100px){.g4,.g5,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g13,.g21{grid-template-columns:1fr}}@media (max-width:760px){.app{grid-template-columns:1fr}.side{position:static;height:auto}.nav{flex-direction:row;flex-wrap:wrap}.g2,.g3,.g4,.g5{grid-template-columns:1fr}.main{padding:12px}}