:root {
  --bg-main: radial-gradient(1200px 800px at 20% 10%, #1b2a41 0%, #0b1220 60%);
  --bg-card: rgba(15, 23, 42, 0.78);
  --border-soft: rgba(255,255,255,0.08);
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --good: #22c55e;
  --warn: #f59e0b;
  --bad:  #ef4444;
}
body { background: var(--bg-main); color: var(--text-main); margin:0; font-family: system-ui, sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; }
.pill { padding:6px 10px; border-radius:999px; font-weight:600; }
.pill.good { background:#14532d; color:#22c55e; }
.pill.bad { background:#450a0a; color:#ef4444; }

.dashboard-grid { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap:16px; padding:16px; }
.card { background: var(--bg-card); backdrop-filter: blur(8px); border:1px solid var(--border-soft); border-radius:14px; padding:12px; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: span 12; }

@media (max-width:1399px){ .dashboard-grid{ grid-template-columns: repeat(8,1fr);} }
@media (max-width:900px){
  .dashboard-grid{ grid-template-columns: 1fr; }
  .card{ grid-column: span 1 !important; }
}