:root {
  --bg:#0f1115; --bg-2:#171a21; --bg-3:#1f232c; --line:#2a2f3a; --line-2:#39404e;
  --fg:#e7eaf0; --fg-2:#aab2c0; --fg-3:#717a8a;
  --accent:#4f8cff; --ok:#3fb950; --warn:#d29922; --bad:#f85149;
  --radius:12px; --mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.wrap { max-width:1100px; margin:0 auto; padding:0 20px; }
.muted { color:var(--fg-3); } .small { font-size:12.5px; } .mono { font-family:var(--mono); }
.num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }
.err { color:var(--bad); font-size:13px; min-height:18px; margin:8px 0 0; }
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}

.brand { font-weight:800; letter-spacing:-.02em; margin:0; font-size:22px; }
.brand span { color:var(--accent); }

.btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; border:none;
  border-radius:8px; padding:10px 16px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; transition:.15s; }
.btn:hover { filter:brightness(1.08); } .btn:disabled { opacity:.6; cursor:default; }
.btn--ghost { background:transparent; color:var(--fg-2); border:1px solid var(--line-2); }
.btn--ghost:hover { color:var(--fg); border-color:var(--fg-3); }

/* Topbar */
.topbar { border-bottom:1px solid var(--line); background:var(--bg-2); position:sticky; top:0; z-index:10; }
.topbar__in { display:flex; align-items:center; justify-content:space-between; height:62px; gap:16px; }
.topbar__tools { display:flex; align-items:center; gap:12px; }

/* Cards */
.card { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin:22px 0; }
.card h2 { margin:0 0 16px; font-size:17px; }
.card--muted { opacity:.85; }
.badge { display:inline-block; margin-top:8px; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--warn); border:1px solid var(--line-2); border-radius:999px; padding:3px 10px; }

/* Gauge */
.gauge { margin-bottom:18px; }
.gauge__head { display:flex; justify-content:space-between; align-items:baseline; font-size:14px; margin-bottom:8px; }
.gauge__pct { font-family:var(--mono); font-weight:700; }
.gauge__bar { height:10px; background:var(--bg-3); border-radius:6px; overflow:hidden; }
.gauge__bar span { display:block; height:100%; border-radius:6px; background:var(--ok); }
.gauge__bar span.warn { background:var(--warn); } .gauge__bar span.bad { background:var(--bad); }

/* Table */
.tbl { width:100%; border-collapse:collapse; font-size:14px; }
.tbl th { text-align:left; color:var(--fg-3); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding:8px 10px; border-bottom:1px solid var(--line); }
.tbl th.num { text-align:right; }
.tbl td { padding:9px 10px; border-bottom:1px solid var(--line); }
.tbl tr:last-child td { border-bottom:none; }

/* Login */
.login-body { display:grid; place-items:center; min-height:100vh; }
.login { width:100%; max-width:360px; text-align:center; }
.login .form { display:flex; flex-direction:column; gap:10px; margin-top:22px; text-align:left; }
.login label { font-size:12.5px; color:var(--fg-2); }
.login input { background:var(--bg-3); border:1px solid var(--line-2); border-radius:8px; padding:12px 14px; color:var(--fg); font-size:15px; }
.login input:focus { outline:none; border-color:var(--accent); }
#code { font-family:var(--mono); font-size:22px; letter-spacing:.3em; text-align:center; }

@media (max-width:768px) {
  .topbar__in { height:auto; flex-wrap:wrap; padding:12px 0; gap:10px; }
  .topbar__tools { width:100%; justify-content:space-between; }
  .card { padding:16px; }
  .tbl { font-size:13px; } .tbl th, .tbl td { padding:7px 6px; }
}