:root{--bg:#141417;--panel:#1d1d22;--panel2:#25252c;--line:#2f2f38;--text:#ececf1;--muted:#9a9aa6;--dim:#6b6b76;
--accent:#7c3aed;--accent2:#a78bfa;--green:#22c55e;--red:#ef4444;--amber:#f59e0b;--blue:#38bdf8}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent2);text-decoration:none}button{font:inherit;cursor:pointer}
.num{font-variant-numeric:tabular-nums}.pos{color:var(--green)}.neg{color:var(--red)}.muted{color:var(--muted)}.dim{color:var(--dim)}
header{position:sticky;top:0;z-index:20;background:rgba(20,20,23,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:16px;padding:10px 18px;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.3px}.brand span{color:var(--accent2)}
.kpis{display:flex;gap:22px;flex-wrap:wrap;flex:1}.kpi .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.kpi .v{font-size:18px;font-weight:600}
.mkt{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.dot.open{background:var(--green);box-shadow:0 0 8px var(--green)}.dot.stale{background:var(--amber)}
.btn{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:7px 12px}
.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent)}
.btn.danger{background:#3a1416;border-color:#7f1d1d;color:#fecaca}.btn.danger:hover{background:var(--red);color:#fff}
.btn.panicall{background:var(--red);border:0;color:#fff;font-weight:700;padding:9px 16px;letter-spacing:.5px}
.btn.small{padding:4px 9px;font-size:12px}
nav{display:flex;gap:4px;padding:0 14px;overflow-x:auto}nav a{padding:9px 12px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
nav a.active{color:var(--text);border-color:var(--accent)}
main{padding:16px 18px;max-width:1500px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;position:relative}
.card.off{opacity:.62}.card.off:hover{opacity:1}
.card h3{margin:0 0 2px;font-size:15px;display:flex;align-items:center;gap:8px}
.desc{color:var(--muted);font-size:12.5px;margin-bottom:10px;min-height:34px}
.badge{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.5px;margin-left:auto}
.b-ACTIVE{background:#1f3b2a;color:#86efac}.b-LIVE{background:#3b2a6b;color:#ddd6fe}.b-PANICD{background:#4c1518;color:#fecaca}.b-DISABLED{background:#333;color:#bbb}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;margin:8px 0 10px}.stat .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.stat .v{font-weight:600}
table{width:100%;border-collapse:collapse;font-size:12.5px}th{color:var(--muted);font-weight:500;text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:5px 5px;border-bottom:1px solid #26262d;white-space:nowrap}td.r,th.r{text-align:right}
.tablewrap{overflow-x:auto}
.sec{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:10px 0 4px}
.note{font-size:12px;color:var(--muted);background:var(--panel2);border-radius:8px;padding:7px 9px;margin-top:6px}
.cardfoot{display:flex;align-items:center;gap:8px;margin-top:10px}
.reen{visibility:hidden;font-size:12px}.card.off:hover .reen{visibility:visible}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px}
.panel h2{font-size:14px;margin:0 0 10px;font-weight:600}
.chartbox{position:relative;height:320px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input,select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:7px;padding:7px 9px;font:inherit}
input:focus,select:focus{outline:1px solid var(--accent)}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:3px}
.fld{margin-bottom:10px}
.pill{font-size:11px;padding:1px 7px;border-radius:10px;background:var(--panel2);color:var(--muted)}
.s-FILLED{color:var(--green)}.s-PENDING,.s-QUEUED{color:var(--amber)}.s-FAILED{color:var(--red)}.s-CANCELLED{color:var(--dim)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent);padding:10px 16px;border-radius:10px;z-index:50}
.seg button{background:var(--panel2);border:1px solid var(--line);color:var(--muted);padding:5px 10px}.seg button.on{color:#fff;border-color:var(--accent);background:#2a1f45}
.seg button:first-child{border-radius:7px 0 0 7px}.seg button:last-child{border-radius:0 7px 7px 0}
.login{max-width:340px;margin:12vh auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px}
.hidden{display:none!important}
@media (max-width:640px){.hrow{padding:8px 12px;gap:10px}.kpi .v{font-size:15px}main{padding:12px 10px}.grid{grid-template-columns:1fr}.chartbox{height:240px}.stats{grid-template-columns:repeat(2,1fr)}}

.viewonly-only{display:none}
body.viewer .viewonly-only{display:inline-flex}
body.viewer #panicAll, body.viewer [data-panic], body.viewer .reen, body.viewer #nav a[href="#settings"], body.viewer #v-settings{display:none!important}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:18px;padding:6px 12px;font-size:12.5px;line-height:1.2;user-select:none;-webkit-tap-highlight-color:transparent}
.chip i{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none}
.chip.off{color:var(--dim)}.chip.off i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--c)}
.chip.quick{color:var(--muted)}.chip.quick.on{color:#fff;border-color:var(--accent);background:#2a1f45}
.chipsep{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.seg button{min-width:38px}
@media (max-width:640px){.chip{padding:8px 12px;font-size:13px}.seg button{padding:6px 8px;min-width:0}}