:root {
  --bg:#0f1216; --panel:#171b21; --panel2:#1d232b; --line:#272f3a;
  --txt:#e6eaf0; --muted:#8a95a5; --accent:#5aa6ff;
  --ok:#3fb86b; --okbg:rgba(63,184,107,.14);
  --bad:#e5564b; --badbg:rgba(229,86,75,.14);
  --warn:#e0a93b; --warnbg:rgba(224,169,59,.14);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--txt);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
a { color:var(--accent); text-decoration:none; }

.topbar { display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:var(--panel); border-bottom:1px solid var(--line); }
.brand { font-weight:700; letter-spacing:.5px; }
.brand span { opacity:.9; }
.topbar nav { display:flex; align-items:center; gap:14px; }
.who { color:var(--muted); font-size:13px; }
.btn-ghost { border:1px solid var(--line); padding:6px 12px; border-radius:8px; color:var(--txt); }
.btn-ghost:hover { background:var(--panel2); }

.wrap { max-width:1080px; margin:0 auto; padding:26px 22px 60px; }
.foot { text-align:center; color:var(--muted); font-size:12px; padding:24px; }

.section { margin-bottom:38px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.section-head.sub { margin-top:26px; }
h2 { font-size:20px; margin:0 0 6px; }
h3 { font-size:15px; margin:22px 0 8px; color:var(--txt); }
.muted { color:var(--muted); }
.tiny { font-size:11px; color:var(--muted); }
.center { text-align:center; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.nowrap { white-space:nowrap; }

.ranges, .chip { display:inline-flex; gap:6px; }
.chip { padding:5px 12px; border:1px solid var(--line); border-radius:20px;
  color:var(--muted); font-size:13px; }
.chip.on { background:var(--accent); border-color:var(--accent); color:#06101f; font-weight:600; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:16px 0 8px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; }
.card .k { font-size:28px; font-weight:700; }
.card .l { color:var(--muted); font-size:13px; margin-top:2px; }
.card.ok .k { color:var(--ok); }
.card.bad .k { color:var(--bad); }

.tbl { width:100%; border-collapse:collapse; margin:10px 0 4px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.tbl th, .tbl td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th { background:var(--panel2); color:var(--muted); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.4px; }
.tbl tr:last-child td { border-bottom:none; }
.tbl .msg { color:var(--muted); font-size:13px; max-width:320px; }
.row-alert { background:rgba(229,86,75,.05); }

.badge { display:inline-block; padding:2px 9px; border-radius:20px; font-size:12px; font-weight:600; }
.badge.ok { background:var(--okbg); color:var(--ok); }
.badge.bad { background:var(--badbg); color:var(--bad); }
.badge.warn { background:var(--warnbg); color:var(--warn); }
.badge.muted { background:var(--panel2); color:var(--muted); }
.tag { display:inline-block; padding:1px 8px; border:1px solid var(--line); border-radius:6px;
  font-size:12px; color:var(--muted); }

.alert { background:var(--badbg); border:1px solid var(--bad); color:#ffd9d5;
  padding:10px 14px; border-radius:10px; margin:12px 0; font-size:14px; }
.alert.soft { background:var(--warnbg); border-color:var(--warn); color:#f1dcae; }

.logs { margin:8px 0 4px; }
.logs summary { cursor:pointer; color:var(--muted); font-size:13px; padding:6px 0; }
.logs pre { background:#0b0e12; border:1px solid var(--line); border-radius:10px;
  padding:12px; overflow:auto; font-size:12px; max-height:320px; }

/* Login */
.login-card { max-width:360px; margin:8vh auto 0; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:28px; }
.login-card h1 { margin:0 0 4px; font-size:22px; }
.login-card label { display:block; margin:14px 0 0; font-size:13px; color:var(--muted); }
.login-card input { width:100%; margin-top:5px; padding:10px 12px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel2); color:var(--txt); font-size:15px; }
.btn { width:100%; margin-top:20px; padding:11px; border:none; border-radius:9px;
  background:var(--accent); color:#06101f; font-weight:700; font-size:15px; cursor:pointer; }
.btn:hover { filter:brightness(1.08); }