:root{
  --bg:#0b1020; --panel:#111833; --panel2:#172042; --line:#243058;
  --fg:#e6ebff; --mute:#93a0c8; --accent:#5cf0c0; --accent2:#7b8cff;
  --danger:#ef4444; --warn:#f59e0b; --ok:#10b981; --info:#3b82f6;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1280px;margin:24px auto;padding:0 20px}
.topbar{display:flex;align-items:center;gap:20px;padding:14px 24px;background:linear-gradient(90deg,#0e1530,#141c42);border-bottom:1px solid var(--line)}
.brand{font-weight:700;font-size:16px;color:var(--fg)}
.nav-links{display:flex;gap:18px;flex:1}
.nav-links a{color:var(--mute)} .nav-links a:hover{color:var(--fg)}
.nav-user{display:flex;align-items:center;gap:12px;color:var(--mute)}
button,.btn{background:var(--accent);color:#04140e;border:none;padding:9px 14px;border-radius:8px;font-weight:600;cursor:pointer}
button.secondary,.btn.secondary{background:var(--panel2);color:var(--fg);border:1px solid var(--line)}
button.danger{background:var(--danger);color:#fff}
button.link{background:transparent;color:var(--mute);padding:0}
input,select,textarea{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%;font-size:14px}
label{display:block;margin:10px 0 6px;color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px}
.card h2,.card h3{margin:0 0 12px}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c6{grid-template-columns:repeat(6,1fr)}
@media(max-width:900px){.grid.c3,.grid.c6{grid-template-columns:1fr 1fr}}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mute);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;background:var(--panel2)}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.sev-critical{background:#7f1d1d;color:#fee2e2}
.sev-high{background:#9a3412;color:#ffedd5}
.sev-medium{background:#92400e;color:#fef3c7}
.sev-low{background:#065f46;color:#d1fae5}
.sev-info{background:#1e40af;color:#dbeafe}
.muted{color:var(--mute)}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 16px}
.kv div:nth-child(odd){color:var(--mute)}
.flash-error{background:#3b0f15;border:1px solid #7f1d1d;color:#fecaca;padding:10px 14px;border-radius:10px;margin-bottom:14px}

/* ==== Gauges ==== */
.gauge-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
@media(max-width:900px){.gauge-grid{grid-template-columns:repeat(2,1fr)}}
.gauge{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center}
.gauge svg{width:100%;height:auto;max-width:180px}
.gauge .label{color:var(--mute);font-size:12px;margin-top:4px;text-transform:uppercase;letter-spacing:.08em}
.gauge .value{font-size:28px;font-weight:700;margin-top:-56px;position:relative;z-index:2}
.gauge .value small{color:var(--mute);font-size:13px;font-weight:500}
.auth-wrap{max-width:380px;margin:10vh auto}
.auth-wrap .card{padding:28px}