:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  --fg:#16181d; --mut:#6b7280; --line:#e6e7eb; --bg:#fafafb; --card:#fff;
  --accent:#3a5bd9; --accent-soft:#eef1fc;
  --ok:#136b2b; --ok-soft:#d8f5dd; --warn:#8a5a00; --warn-soft:#fff3d6;
  --err:#8a1f1f; --err-soft:#fae0e0; --info:#1f3f8a; --info-soft:#dde8ff; --tenant:#5b3aa0; --tenant-soft:#efe7fb;
}
* { box-sizing:border-box; }
html,body { margin:0; }
body { color:var(--fg); background:var(--bg); line-height:1.5; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
code { background:#f1f1f4; padding:.1rem .35rem; border-radius:5px; font-size:.85em; }
pre { background:#0f1117; color:#e7e9ee; border-radius:9px; padding:.85rem 1rem; overflow:auto; font-size:.8rem; line-height:1.45; }
.muted { color:var(--mut); font-size:.85rem; }
.hidden { display:none !important; }

/* header + nav */
header.top { position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--line); }
.top-row { display:flex; align-items:center; gap:.6rem; padding:.6rem 1.1rem; }
.top-row b { font-size:1.05rem; } .top-row .sub { color:var(--mut); font-size:.8rem; }
.top-row .sp { flex:1; }
.who { color:var(--mut); font-size:.82rem; }
.btn { font:inherit; font-size:.85rem; padding:.34rem .7rem; border:1px solid var(--line); border-radius:8px; background:var(--card); cursor:pointer; color:var(--fg); }
.btn:hover { border-color:#bcc0c9; } .btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn.sm { padding:.2rem .5rem; font-size:.78rem; }
nav.tabs { display:flex; gap:.15rem; padding:0 .8rem; overflow-x:auto; }
nav.tabs a { color:var(--mut); font-size:.86rem; padding:.55rem .7rem; border-bottom:2px solid transparent; white-space:nowrap; }
nav.tabs a:hover { color:var(--fg); text-decoration:none; }
nav.tabs a.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

main { max-width:1100px; margin:0 auto; padding:1.2rem 1.1rem 4rem; }
.view { display:none; } .view.active { display:block; }
h1.sec { font-size:1.1rem; margin:.2rem 0 .2rem; }
.sec-sub { color:var(--mut); font-size:.85rem; margin:0 0 1rem; }
.toolbar { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.4rem 0 1rem; }
.range { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.range button { font:inherit; font-size:.8rem; padding:.3rem .6rem; border:0; background:var(--card); cursor:pointer; color:var(--mut); border-right:1px solid var(--line); }
.range button:last-child { border-right:0; } .range button.on { background:var(--accent-soft); color:var(--accent); font-weight:600; }

.card { background:var(--card); border:1px solid var(--line); border-radius:11px; padding:1rem 1.1rem; margin:.7rem 0; }
.card h3 { margin:.1rem 0 .5rem; font-size:.98rem; }
.grid { display:grid; gap:.7rem; } .g2 { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

/* KPI cards */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; margin:.4rem 0 1rem; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:11px; padding:.8rem .9rem; }
.kpi .label { color:var(--mut); font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; }
.kpi .val { font-size:1.5rem; font-weight:700; margin:.15rem 0; line-height:1.1; }
.kpi .delta { font-size:.78rem; } .delta.up { color:var(--ok); } .delta.down { color:var(--err); } .delta.flat { color:var(--mut); }
.kpi.alert .val { color:var(--err); }

/* tables */
table { border-collapse:collapse; width:100%; font-size:.86rem; }
th,td { text-align:left; border-bottom:1px solid var(--line); padding:.42rem .55rem; vertical-align:top; }
th { color:var(--mut); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.02em; }
tbody tr.click { cursor:pointer; } tbody tr.click:hover { background:var(--accent-soft); }
.bar { height:7px; border-radius:5px; background:#eceef3; overflow:hidden; min-width:80px; }
.bar > span { display:block; height:100%; background:var(--accent); }
.bar.warn > span { background:#d98a00; } .bar.err > span { background:#cf3b3b; }

/* badges */
.badge { display:inline-block; padding:.1rem .5rem; border-radius:20px; font-size:.7rem; font-weight:700; letter-spacing:.02em; }
.b-ok{background:var(--ok-soft);color:var(--ok);} .b-warn{background:var(--warn-soft);color:var(--warn);}
.b-err{background:var(--err-soft);color:var(--err);} .b-info{background:var(--info-soft);color:var(--info);}
.b-tenant{background:var(--tenant-soft);color:var(--tenant);} .b-mut{background:#eef0f3;color:var(--mut);}
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; } .dot.ok{background:#2bb24c;} .dot.err{background:#cf3b3b;} .dot.mut{background:#c2c6cf;}

/* charts */
.panel { background:var(--card); border:1px solid var(--line); border-radius:11px; padding:.85rem 1rem; }
.panel h3 { margin:0 0 .5rem; font-size:.9rem; }
.uplot { width:100%; }
.empty { color:var(--mut); font-size:.85rem; text-align:center; padding:1.6rem 1rem; }
.svgbars { width:100%; }

/* login overlay */
.login { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:50; }
.login .box { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.6rem 1.5rem; width:340px; box-shadow:0 8px 40px rgba(0,0,0,.08); }
.login h2 { margin:.1rem 0 .2rem; } .login .box .sub { color:var(--mut); font-size:.82rem; margin-bottom:1rem; }
.login input { width:100%; font:inherit; padding:.55rem .7rem; border:1px solid var(--line); border-radius:9px; margin:.3rem 0; }
.login .err { color:var(--err); font-size:.82rem; min-height:1.2em; margin-top:.3rem; }

/* logs drawer */
.drawer-bg { position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:40; display:flex; justify-content:flex-end; }
.drawer { background:var(--card); width:min(640px,92vw); height:100%; overflow:auto; padding:1.2rem 1.3rem; box-shadow:-8px 0 40px rgba(0,0,0,.12); }
.drawer h3 { margin-top:0; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem; font-size:.85rem; margin:.5rem 0; }
.kv .k { color:var(--mut); }

ul.tight { margin:.3rem 0; padding-left:1.15rem; } ul.tight li { margin:.15rem 0; }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
details summary { cursor:pointer; }