:root { --bg:#0e1117; --card:#161b24; --line:#262d3a; --text:#e6e9ef; --muted:#8b95a7; --up:#26a69a; --down:#ef5350; --acc:#4fc3f7; --warn:#f5a623; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; }
.hidden { display:none !important; }
.muted { color:var(--muted); font-size:.85rem; }
.err { color:var(--down); min-height:1.2em; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; }
header { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5; }
header .brand { flex:1; }
.tag { background:var(--warn); color:#000; border-radius:6px; padding:1px 6px; font-size:.75rem; margin-left:6px; }
button { background:var(--acc); color:#000; border:0; border-radius:8px; padding:10px 14px; font-weight:600; cursor:pointer; }
button.link { background:none; color:var(--muted); padding:4px 8px; font-weight:400; }
.login { max-width:340px; margin:18vh auto; display:flex; flex-direction:column; gap:10px; text-align:center; }
.login h1 { margin:0; font-size:1.4rem; }
input, select { background:#0b0f15; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:10px; font-size:16px; }
.banner { margin:10px 16px; padding:10px 14px; border-radius:10px; }
.banner.warn { background:#3a2a07; border:1px solid var(--warn); }
.banner.ok { background:#0f3a2f; border:1px solid var(--up); }
.metrics { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; padding:12px 16px; }
.metric .v { font-size:1.35rem; font-weight:600; }
nav { display:flex; gap:6px; overflow-x:auto; padding:4px 16px 10px; border-bottom:1px solid var(--line); }
nav button { background:transparent; color:var(--muted); border:1px solid var(--line); white-space:nowrap; font-weight:500; }
nav button.on { color:#000; background:var(--acc); border-color:var(--acc); }
main { padding:14px 16px 30px; }
footer { padding:10px 16px 24px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:12px; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.row > * { flex:1 1 320px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.chips button { background:transparent; border:1px solid var(--line); color:var(--text); padding:6px 10px; font-weight:500; }
.chips button.on { background:var(--acc); color:#000; border-color:var(--acc); }
.tv { height:460px; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.bar { height:8px; background:#252c38; border-radius:5px; overflow:hidden; margin:6px 0 4px; }
.bar > div { height:100%; background:var(--acc); }
.up { color:var(--up); } .down { color:var(--down); }
.check { padding:8px 0; border-bottom:1px solid var(--line); }
.check:last-child { border-bottom:0; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th, td { text-align:left; padding:6px 6px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-weight:500; }
.scroll { max-height:420px; overflow:auto; }
pre { white-space:pre-wrap; background:#0b0f15; padding:10px; border-radius:8px; margin:6px 0 12px; font-size:.85rem; }
h3 { margin:6px 0 10px; } h4 { margin:4px 0 8px; }
nav { scrollbar-width: none; } nav::-webkit-scrollbar { display: none; }