:root{--bg:#0b1020;--panel:#131a2d;--panel2:#182239;--text:#ecf1ff;--muted:#8fa0c2;--accent:#6ea8fe;--ok:#4fd1a1;--warn:#ffbf69;--bad:#ff6b6b;--line:#283653}
*{box-sizing:border-box}body{margin:0;font:14px/1.45 system-ui,Segoe UI,Arial;background:var(--bg);color:var(--text)}
.layout{display:grid;grid-template-columns:235px 1fr;min-height:100vh}aside{background:#090e1b;border-right:1px solid var(--line);padding:22px}
.brand{font-size:20px;font-weight:800;letter-spacing:1px;margin-bottom:25px}.brand span{color:var(--accent)}
nav a{display:block;padding:11px 12px;color:var(--muted);text-decoration:none;border-radius:8px;margin:3px 0}nav a:hover{background:var(--panel);color:#fff}
main{padding:0 24px 40px}.topbar{height:64px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:22px}
.grid{display:grid;gap:16px}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}.kpi b{font-size:28px;display:block}.muted{color:var(--muted)}
table{width:100%;border-collapse:collapse;background:var(--panel);border-radius:12px;overflow:hidden}th,td{padding:11px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--muted);font-weight:600}
.btn{display:inline-block;border:0;border-radius:8px;padding:9px 13px;background:var(--accent);color:#07101e;font-weight:700;text-decoration:none;cursor:pointer}.btn.secondary{background:var(--panel2);color:#fff}.btn.bad{background:var(--bad);color:#fff}.btn.warn{background:var(--warn);color:#1a1a1a}
input,select,textarea{width:100%;background:#0d1426;border:1px solid var(--line);border-radius:8px;padding:10px;color:#fff;margin:5px 0 12px}
label{display:block;color:var(--muted)}.row{display:flex;gap:12px;align-items:center}.row>*{flex:1}.badge{padding:4px 8px;border-radius:999px;background:var(--panel2)}.online{color:var(--ok)}.offline{color:var(--bad)}
.progress{height:8px;background:#0a0f1c;border-radius:10px;overflow:hidden}.progress i{display:block;height:100%;background:var(--accent)}
.flash{padding:12px;background:#15352e;border:1px solid #23654f;border-radius:8px;margin-bottom:15px}.error{background:#3a171d;border-color:#6b2834}
code{background:#080d18;padding:3px 6px;border-radius:5px;word-break:break-all}.actions form{display:inline}
.login{max-width:420px;margin:10vh auto}.login .card{padding:28px}
@media(max-width:900px){.layout{grid-template-columns:1fr}aside{display:none}.g4,.g2{grid-template-columns:1fr}main{padding:0 12px}}