:root{
  --bg:#0a1220; --panel:#111b2c; --panel-2:#0d1626; --line:#233250;
  --ink:#e7ecf5; --ink-soft:#93a3c1; --accent:#5b8def;
  --ok:#3ddba0; --ok-bg:#0e2a22; --warn:#f0a943; --warn-bg:#2b2113;
  --bad:#ef7a7a; --bad-bg:#2c1418; --off:#5b6a8a; --off-bg:#182338;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:14.5px; line-height:1.5;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em}

.shell{display:flex; min-height:100vh}
nav.side{
  width:200px; flex-shrink:0; background:var(--panel-2); border-right:1px solid var(--line);
  padding:20px 14px; display:flex; flex-direction:column; gap:2px;
}
nav.side .brand{font-weight:800; font-size:16px; color:#fff; margin:0 8px 18px}
nav.side .brand span{color:var(--ok)}
nav.side a{
  color:var(--ink-soft); padding:9px 10px; border-radius:8px; font-size:13.5px; font-weight:600;
}
nav.side a:hover{background:var(--off-bg); text-decoration:none; color:var(--ink)}
nav.side a.on{background:var(--accent); color:#fff}
nav.side form{margin-top:auto}
nav.side button{
  width:100%; background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:8px 10px; border-radius:8px; font-size:13px; cursor:pointer;
}
nav.side button:hover{border-color:var(--bad); color:var(--bad)}

main{flex:1; padding:26px 32px 60px; min-width:0}
main h1{font-size:20px; margin:0 0 4px}
main .lead{color:var(--ink-soft); font-size:13.5px; margin:0 0 22px}

.stats{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px}
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; min-width:120px;
}
.stat b{display:block; font-size:22px; font-variant-numeric:tabular-nums}
.stat span{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em}

.tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--panel)}
table{width:100%; border-collapse:collapse; min-width:600px}
th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); font-weight:700; padding:10px 14px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--panel);
}
td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top}
tr:last-child td{border-bottom:none}
td.num{font-variant-numeric:tabular-nums; text-align:right}
td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px}
td.trunc{max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.pill{
  display:inline-block; padding:3px 9px; border-radius:99px; font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.bad{background:var(--bad-bg); color:var(--bad)}
.pill.off{background:var(--off-bg); color:var(--off)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px 22px; margin-bottom:20px}
.card h2{font-size:15px; margin:0 0 12px}
.card .hint{color:var(--ink-soft); font-size:13px; margin:0 0 14px}

.form-row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.form-row .field{display:flex; flex-direction:column; gap:5px}
.form-row label{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em}
input[type=text], input[type=password]{
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink);
  padding:9px 11px; border-radius:8px; font-size:14px; min-width:0;
}
input:focus{outline:2px solid var(--accent); outline-offset:1px}
button.btn, input[type=submit]{
  background:var(--accent); color:#fff; border:none; border-radius:8px;
  padding:9px 16px; font-size:13.5px; font-weight:700; cursor:pointer;
}
button.btn:hover, input[type=submit]:hover{opacity:.9}
button.btn-ghost{
  background:none; border:1px solid var(--line); color:var(--ink-soft);
  padding:6px 12px; border-radius:8px; font-size:12.5px; cursor:pointer;
}
button.btn-ghost:hover{border-color:var(--bad); color:var(--bad)}

.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center}
.login-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:36px 34px; width:100%; max-width:340px;
}
.login-card h1{font-size:18px; margin:0 0 4px}
.login-card p{color:var(--ink-soft); font-size:13px; margin:0 0 22px}
.login-card .field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.login-card label{font-size:12px; color:var(--ink-soft)}
.login-card input{width:100%}
.login-card .err{color:var(--bad); font-size:13px; margin-bottom:14px}
.login-card button{width:100%; padding:11px; font-size:14px}

.empty{color:var(--ink-soft); font-size:13.5px; padding:20px; text-align:center}
.pagination{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px}
.pagination .pg-info{color:var(--ink-soft); font-size:12.5px}
.pagination .btn-ghost.disabled{opacity:.35; cursor:default; pointer-events:none}
.gap-note{
  background:var(--warn-bg); border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  color:var(--ink); border-radius:8px; padding:12px 14px; font-size:13px; margin-bottom:18px;
}
.gap-note b{color:var(--warn)}