:root {
  --bg:#0b1020; --panel:#141b30; --panel2:#0e1424; --line:#26304a; --text:#e6ebf5;
  --muted:#8b96ad; --accent:#5b8cff; --accent2:#38e0c4; --ok:#4ade80; --bad:#f87171; --warn:#fbbf24;
}
* { box-sizing:border-box; }
body { margin:0; font:14px/1.55 system-ui,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--accent); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:.02em; }
.brand .dot { width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 0 14px var(--accent); }
.brand small { color:var(--muted); font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-bottom:1px solid var(--line); background:var(--panel2); position:sticky; top:0; z-index:5; }
.topbar .role { color:var(--muted); font-size:13px; }
.wrap { max-width:1180px; margin:0 auto; padding:22px; }

h1 { font-size:20px; margin:0 0 16px; }
h2 { font-size:13px; margin:0 0 12px; color:var(--accent2); text-transform:uppercase; letter-spacing:.05em; }
section { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px; }

table { width:100%; border-collapse:collapse; margin-top:8px; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:middle; }
th { color:var(--muted); font-weight:600; }

input,select,button { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:14px; }
input::placeholder { color:#5b6480; }
button { cursor:pointer; background:var(--accent); border-color:var(--accent); color:#06122e; font-weight:700; }
button.ghost { background:transparent; color:var(--accent); }
button.danger { background:var(--bad); border-color:var(--bad); color:#2a0808; }
button:disabled { opacity:.45; cursor:default; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.muted { color:var(--muted); font-size:13px; }
.ok { color:var(--ok); } .bad { color:var(--bad); } .warn { color:var(--warn); }
.pill { display:inline-block; padding:2px 9px; border-radius:99px; font-size:12px; border:1px solid var(--line); color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.stat { background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:12px; }
.stat .v { font-size:20px; font-weight:800; }
.stat .l { color:var(--muted); font-size:12px; margin-top:2px; }
code { background:var(--panel2); padding:1px 6px; border-radius:5px; font-size:12px; }
#err { position:fixed; right:16px; bottom:16px; background:#7f1d1d; color:#fecaca; padding:10px 14px; border-radius:10px; max-width:420px; display:none; white-space:pre-wrap; z-index:20; }
.tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.tabs button { background:transparent; border:1px solid var(--line); color:var(--muted); font-weight:600; }
.tabs button.active { background:var(--panel); color:var(--text); border-color:var(--accent); }