:root{
  --bg: #0b1220;
  --card: #0f1a2e;
  --muted: rgba(255,255,255,.65);
  --accent: #7dd3fc;
  --danger: #fb7185;
  --warn: #fbbf24;
  --ok: #34d399;
}

body{
  background: radial-gradient(1200px 600px at 20% 10%, rgba(125,211,252,.10), transparent 55%),
              radial-gradient(1000px 500px at 90% 20%, rgba(52,211,153,.10), transparent 50%),
              radial-gradient(900px 450px at 60% 90%, rgba(251,113,133,.08), transparent 45%),
              var(--bg);
}

.kpi-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.kpi-title{ color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em;}
.kpi-value{ font-size: 28px; font-weight: 700; line-height: 1.1; color: white;}
.kpi-sub{ color: var(--muted); font-size: 12px; margin-top: 6px;}

.badge-ok{ color: var(--ok); }
.badge-warn{ color: var(--warn); }
.badge-danger{ color: var(--danger); }

.panel{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
}