:root {
  --bg:#0f1115; --surface:#171a20; --surface2:#1e222a; --line:#282d37;
  --ink:#e8eaee; --muted:#8b93a1; --accent:#4ade9f; --accent-dim:#1c3a30;
  --warn:#f5a524; --bad:#f4685e; --ok:#4ade9f;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:14px; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
.hidden { display:none !important; }

/* Login */
.login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login form { background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:34px; width:100%; max-width:380px; }
.login h1 { margin:0 0 6px; font-size:1.5rem; letter-spacing:-.02em; }
.login p { margin:0 0 24px; color:var(--muted); font-size:.9rem; }
label { display:block; font-size:.82rem; color:var(--muted); margin:14px 0 6px; }
input { width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  padding:11px 13px; border-radius:9px; font-size:.95rem; font-family:inherit; }
input:focus { outline:none; border-color:var(--accent); }
button { background:var(--accent); color:#06251a; border:0; padding:11px 20px; border-radius:9px;
  font-weight:650; cursor:pointer; font-size:.92rem; font-family:inherit; }
button:hover { filter:brightness(1.08); }
button.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
button:disabled { opacity:.5; cursor:not-allowed; }
.err { color:var(--bad); font-size:.85rem; margin-top:14px; min-height:1.2em; }

/* Shell */
.top { border-bottom:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:60px; }
.top .brand { font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }
.top .brand span { color:var(--accent); }
.top nav { display:flex; gap:4px; }
.top nav button { background:transparent; color:var(--muted); font-weight:500; padding:8px 14px; }
.top nav button.on { background:var(--surface2); color:var(--ink); }
.top .who { color:var(--muted); font-size:.85rem; display:flex; gap:14px; align-items:center; }
main { padding:26px 24px 60px; max-width:1400px; margin:0 auto; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:28px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; }
.card b { display:block; font-size:1.9rem; letter-spacing:-.03em; line-height:1.15; }
.card span { color:var(--muted); font-size:.82rem; }
.card.accent b { color:var(--accent); }
.card.warn b { color:var(--warn); }

h2 { font-size:1.05rem; margin:0 0 14px; letter-spacing:-.01em; }
.bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; }
.bar input { max-width:260px; }

table { width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; }
th { text-align:left; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding:11px 14px; border-bottom:1px solid var(--line); font-weight:600; }
td { padding:12px 14px; border-bottom:1px solid var(--line); }
tr:last-child td { border-bottom:0; }
tr:hover td { background:var(--surface2); }
.mono { font-family:var(--mono); font-size:.86rem; }
.dim { color:var(--muted); }

.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:.78rem; font-weight:600; background:var(--surface2); color:var(--muted); }
.pill.ok { background:var(--accent-dim); color:var(--ok); }
.pill.bad { background:#3a1f1d; color:var(--bad); }
.pill.warn { background:#3a2f16; color:var(--warn); }
.dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

.empty { padding:40px; text-align:center; color:var(--muted); background:var(--surface);
  border:1px solid var(--line); border-radius:12px; }
.new { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:20px; margin-top:20px; }
.new code { display:block; font-family:var(--mono); background:var(--bg); padding:10px 12px;
  border-radius:8px; margin:6px 0; font-size:.84rem; word-break:break-all; }