:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1f2328; --muted:#6b7280;
  --line:#e5e7eb; --accent:#2563eb; --danger:#b91c1c; --ok:#15803d;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 "Segoe UI",system-ui,-apple-system,Arial,sans-serif}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px;
  background:var(--card);border-bottom:1px solid var(--line)}
.spacer{flex:1}
.wrap{max-width:1100px;margin:24px auto;padding:0 16px}
.wrap.narrow{max-width:620px}
h1{font-size:20px;margin:0 0 16px}
h2{font-size:15px;margin:0 0 12px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,Consolas,"Courier New",monospace}
.num{text-align:right;font-variant-numeric:tabular-nums}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px;margin-bottom:18px}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.grid{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.grid th,.grid td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.grid thead th{background:#f0f2f5;font-weight:600}
.grid tbody tr:hover{background:#fafbfc}
label{display:block;margin-bottom:12px}
input,select{width:100%;padding:8px 10px;border:1px solid var(--line);
  border-radius:6px;font:inherit;background:#fff}
.toolbar input{width:auto;min-width:240px}
button{padding:8px 16px;border:0;border-radius:6px;background:var(--accent);
  color:#fff;font:inherit;cursor:pointer}
button:hover{filter:brightness(.95)}
button.danger{background:var(--danger)}
.btn-link{color:var(--accent);text-decoration:none}
.btn-link:hover{text-decoration:underline}
.err{background:#fef2f2;border:1px solid #fecaca;color:var(--danger);padding:10px 12px;border-radius:6px}
.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:var(--ok);padding:10px 12px;border-radius:6px}
.warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e;padding:10px 12px;border-radius:6px}
.confirm ul{margin:0 0 12px 18px}
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{width:340px}
.status{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(21,128,61,.15)}
.dot.off{background:var(--danger);box-shadow:0 0 0 3px rgba(185,28,28,.15)}