:root{
  --bg:#0b0f16;--card:#111827;--muted:#9ca3af;--txt:#e5e7eb;--b:#1f2937;
  --btn:#2563eb;--btn2:#374151;--ok:#22c55e;--bad:#ef4444;--warn:#f59e0b;--cyan:#22d3ee;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1000px 600px at 35% 0%, #121c3a, var(--bg));color:var(--txt);
  font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu}
a{color:#93c5fd;text-decoration:none}
.wrap{min-height:100vh;display:grid;grid-template-columns:260px 1fr}
.side{border-right:1px solid var(--b);background:rgba(17,24,39,.88);padding:16px;position:sticky;top:0;height:100vh}
.brand{font-weight:900;font-size:15px;letter-spacing:.2px}
.brand small{display:block;color:var(--muted);font-weight:600;margin-top:6px}
.nav{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.nav a{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid transparent;color:var(--txt)}
.nav a:hover{border-color:var(--b);background:#0b1220}
.nav a.active{border-color:#1d4ed8;background:rgba(37,99,235,.12)}
.tag{margin-top:14px;border:1px solid var(--b);padding:10px 12px;border-radius:12px;color:var(--muted);font-size:12px}
.main{padding:18px 18px 28px}
.top{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.h1{font-size:18px;font-weight:900}
.sub{color:var(--muted);margin-top:4px}
.card{background:rgba(17,24,39,.92);border:1px solid var(--b);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:hidden}
.card-h{padding:16px 16px 12px;border-bottom:1px solid var(--b)}
.card-b{padding:16px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
@media(max-width:980px){.wrap{grid-template-columns:1fr}.side{height:auto;position:relative}.col-6,.col-4,.col-3{grid-column:span 12}}
.kpi{padding:12px;border:1px solid var(--b);border-radius:14px;background:#0b1220}
.kpi .k{color:var(--muted);font-size:12px}
.kpi .v{font-weight:900;font-size:20px;margin-top:8px}
.kpi .h{color:var(--muted);margin-top:8px}
.badge{display:inline-block;border:1px solid var(--b);padding:4px 8px;border-radius:999px;color:var(--muted);font-size:12px}
.badge.ok{color:var(--ok);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.badge.bad{color:var(--bad);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.badge.warn{color:var(--warn);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.badge.cyan{color:var(--cyan);border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.08)}
.table-wrap{overflow:auto;border:1px solid var(--b);border-radius:14px;background:#0b1220}
table{width:100%;border-collapse:collapse;min-width:860px}
th,td{padding:10px 12px;border-bottom:1px solid rgba(31,41,55,.6);text-align:left;white-space:nowrap}
th{color:var(--muted);font-size:12px}
tr:hover td{background:rgba(37,99,235,.05)}
input,select,textarea{width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--b);background:#0b1220;color:var(--txt);outline:none}
textarea{resize:vertical}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:0;border-radius:12px;padding:11px 14px;background:var(--btn);color:white;font-weight:900;cursor:pointer}
.btn.secondary{background:var(--btn2);border:1px solid var(--b)}
.btn.danger{background:#991b1b}
.btn:disabled{opacity:.6;cursor:not-allowed}
.flash{margin-top:10px;padding:10px 12px;border:1px solid var(--b);border-radius:12px;background:#0b1220;color:#dbeafe}
.small{font-size:12px;color:var(--muted)}
.progress{height:10px;border:1px solid var(--b);border-radius:999px;overflow:hidden;background:#0b1220}
.progress > div{height:100%;width:0%;background:var(--btn)}
code{color:#93c5fd}