:root{--bg:#f5f6f8;--panel:#fff;--txt:#1b1f27;--muted:#6b7280;--line:#e5e7eb;--acc:#2563eb;--acc2:#e8efff;--up:#15803d;--upbg:#dcfce7;--down:#b91c1c;--downbg:#fee2e2;--flat:#6b7280;--flatbg:#f3f4f6;--side:#111827;--sidetxt:#cbd5e1;--bar:#93c5fd}
[data-theme=dark]{--bg:#0f1218;--panel:#171b23;--txt:#e6e8ee;--muted:#9aa3b2;--line:#262b36;--acc:#60a5fa;--acc2:#1a2740;--up:#4ade80;--upbg:#14301f;--down:#f87171;--downbg:#3a1a1a;--flat:#9aa3b2;--flatbg:#232833;--side:#0b0e14;--sidetxt:#9aa3b2;--bar:#2f5aa8}
*{box-sizing:border-box}body{margin:0;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;background:var(--bg);color:var(--txt)}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
.shell{display:flex;min-height:100vh}.side{width:210px;background:var(--side);color:var(--sidetxt);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center;padding:18px 16px;color:#fff}.brand small{display:block;color:var(--sidetxt);font-size:11px}.logo{background:var(--acc);color:#fff;font-weight:700;border-radius:8px;padding:6px 8px}
.side nav{display:flex;flex-direction:column;padding:6px}.side nav a{color:var(--sidetxt);padding:9px 12px;border-radius:8px;display:flex;gap:10px;align-items:center}.side nav a i{font-style:normal;width:16px;text-align:center;opacity:.8}.side nav a.on,.side nav a:hover{background:#1f2937;color:#fff;text-decoration:none}
.side-foot{margin-top:auto;padding:12px;font-size:12px;display:flex;flex-direction:column;gap:8px}.sync-badge{color:var(--sidetxt)}.user a{color:#fff}
.main{flex:1;padding:22px 26px;min-width:0}
h1{font-size:20px;margin:0 0 4px}h2{font-size:15px;margin:22px 0 8px}.sub{color:var(--muted);margin:0 0 14px}
.btn{display:inline-block;background:var(--acc);color:#fff;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;font:inherit}.btn:hover{text-decoration:none;filter:brightness(1.08)}.btn.small{padding:5px 10px;font-size:12px}.btn.ghost{background:transparent;color:var(--acc);border:1px solid var(--acc)}.btn.danger{background:var(--down)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}.kpi .l{color:var(--muted);font-size:12px}.kpi .v{font-size:22px;font-weight:600;margin-top:2px}.kpi .s{font-size:12px;color:var(--muted);margin-top:4px}
.delta{font-size:12px;padding:2px 7px;border-radius:999px;font-weight:600}.delta.up{color:var(--up);background:var(--upbg)}.delta.down{color:var(--down);background:var(--downbg)}.delta.flat{color:var(--flat);background:var(--flatbg)}
.rangebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}.seg a{padding:6px 11px;color:var(--txt);border-right:1px solid var(--line)}.seg a:last-child{border-right:0}.seg a.on{background:var(--acc);color:#fff}.seg a:hover{text-decoration:none}
input,select{font:inherit;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--txt)}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{color:var(--muted);font-weight:600;white-space:nowrap;font-size:12px}th a{color:var(--muted)}td.n,th.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}tr:hover td{background:var(--acc2)}
.bar{display:inline-block;width:90px;height:7px;background:var(--flatbg);border-radius:4px;vertical-align:middle;margin-right:6px}.bar i{display:block;height:100%;background:var(--bar);border-radius:4px}
.muted{color:var(--muted)}.small{font-size:12px}.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.flash{background:var(--acc2);border:1px solid var(--acc);border-radius:10px;padding:10px 14px;margin-bottom:14px}.flash pre{white-space:pre-wrap;font-size:12px;margin:6px 0 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:1000px){.grid2{grid-template-columns:1fr}}
.tag{display:inline-block;background:var(--flatbg);border-radius:6px;padding:1px 7px;font-size:11px;color:var(--muted);margin-right:4px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tree td.lvl1{padding-left:28px}.tree td.lvl2{padding-left:48px}.tree tr.child{display:none}.tree tr.child.show{display:table-row}.tw{cursor:pointer;user-select:none}.tw:before{content:'▸ ';color:var(--muted)}.tw.open:before{content:'▾ '}
.login{max-width:380px;margin:10vh auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px}.login input{width:100%;margin:6px 0 14px}
.status-ok{color:var(--up)}.status-err{color:var(--down)}
.chart{width:100%;height:260px}
.chips a{display:inline-block;margin:0 6px 6px 0;padding:4px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--txt);font-size:13px}.chips a:hover{background:var(--acc2);text-decoration:none}
.trunc{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
@media(max-width:800px){.shell{flex-direction:column}.side{width:100%;height:auto;position:static}.side nav{flex-direction:row;flex-wrap:wrap}.main{padding:14px}}