:root{--bg:#f4f6fa;--card:#fff;--ink:#1c2433;--mute:#667085;--line:#e4e8f0;--pri:#2563eb;--pri-ink:#fff;--ok:#16a34a;--warn:#ea580c;--bad:#dc2626;--okbg:#e8f7ee;--warnbg:#fff1e6;--badbg:#fde8e8;--shadow:0 1px 3px rgba(16,24,40,.08)}
@media(prefers-color-scheme:dark){:root{--bg:#0f141c;--card:#18202c;--ink:#e8ecf3;--mute:#94a0b4;--line:#283244;--pri:#4f8cff;--okbg:#12301f;--warnbg:#3a2412;--badbg:#3b1717;--shadow:none}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
.app{display:flex;min-height:100vh}
.nav{width:210px;background:var(--card);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.brand{font-weight:700;font-size:18px;padding:6px 10px 14px}
.nav button{all:unset;cursor:pointer;padding:10px 12px;border-radius:10px;color:var(--mute);font-weight:500}
.nav button:hover{background:var(--bg)}
.nav button.on{background:var(--pri);color:var(--pri-ink)}
main{flex:1;padding:22px;max-width:1200px;min-width:0}
h1{margin:0 0 4px;font-size:24px}h2{font-size:17px;margin:0 0 10px}h3{font-size:15px;margin:0 0 8px}
.sub{color:var(--mute);margin:0 0 18px}
.grid{display:grid;gap:14px}
.cards{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.two{grid-template-columns:minmax(260px,1fr) 1.6fr}
@media(max-width:900px){.two{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow);border:1px solid var(--line)}
.kpi .l{color:var(--mute);font-size:13px}.kpi .v{font-size:24px;font-weight:700;margin-top:2px}
.pos{color:var(--ok)}.neg{color:var(--bad)}.warn{color:var(--warn)}
.alert{padding:12px 14px;border-radius:12px;margin-bottom:14px;font-weight:500}
.alert.bad{background:var(--badbg);color:var(--bad)}.alert.warn{background:var(--warnbg);color:var(--warn)}.alert.ok{background:var(--okbg);color:var(--ok)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.grow{flex:1}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:8px 14px;border-radius:10px;cursor:pointer;font:inherit;font-weight:500}
.btn:hover{border-color:var(--pri)}.btn.pri{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}.btn.danger{color:var(--bad)}.btn.sm{padding:4px 9px;font-size:13px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:var(--card);color:var(--mute);padding:7px 11px;cursor:pointer;font:inherit}
.seg button.on{background:var(--pri);color:var(--pri-ink)}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.03em;position:sticky;top:0;background:var(--card)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr.bad td{background:var(--badbg)}tr.warn td{background:var(--warnbg)}tr.off td{opacity:.45}
.tw{overflow:auto;max-height:520px;border:1px solid var(--line);border-radius:10px}
.tw.flat{max-height:none}
label{display:block;font-size:13px;color:var(--mute);margin:10px 0 3px}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit}
input[type=range]{padding:0;accent-color:var(--pri)}input[type=checkbox]{width:auto}
.inline{display:flex;gap:8px}.inline>*{flex:1}
.chart{position:relative;width:100%}
.chart svg{display:block;overflow:visible}
.chart .grid{stroke:var(--line)}.chart .axis{fill:var(--mute);font-size:11px}
.chart .zero{stroke:var(--mute);stroke-width:1.2}.chart .thr{stroke:var(--warn);stroke-dasharray:4 4}.chart .hline{stroke:var(--mute);stroke-dasharray:3 3}
.tip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,0,0,.18);padding:8px 10px;border-radius:10px;font-size:13px;z-index:5;white-space:nowrap}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mute);margin:0 0 6px}
.legend i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:6px;border-radius:2px}
.tag{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--bg);color:var(--mute)}
.note{font-size:12px;color:var(--mute)}
.sec{margin-top:18px}
.ev{padding:6px 0;border-bottom:1px solid var(--line)}
dialog{border:0;border-radius:16px;padding:20px;width:min(460px,94vw);background:var(--card);color:var(--ink);box-shadow:0 10px 40px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(0,0,0,.45)}
@media(max-width:720px){
 .app{flex-direction:column}
 .nav{position:fixed;bottom:0;left:0;right:0;top:auto;width:auto;height:auto;flex-direction:row;justify-content:space-around;border-right:0;border-top:1px solid var(--line);padding:4px;z-index:20}
 .brand,.nav button span{display:none}.nav button{padding:10px 14px;font-size:20px}
 main{padding:14px 14px 80px}
}
@media print{.nav,.btn,.seg,dialog{display:none!important}.tw{max-height:none;overflow:visible}body{background:#fff}.card{box-shadow:none}}
.topbar{margin:-6px 0 14px}.topbar select{width:auto;min-width:200px}
.bar{height:10px;background:var(--line);border-radius:99px;overflow:hidden;margin:10px 0 6px}.bar i{display:block;height:100%;background:var(--ok);border-radius:99px}
.card.off{opacity:.5}
body.auth .nav{display:none}body.auth main{max-width:none;display:flex;justify-content:center;padding-top:8vh}
.authbox{width:min(400px,100%);height:fit-content}
a{color:var(--pri)}