:root{
  --bg1:#0b1220;
  --bg2:#0f1b34;
  --card:#0b1220cc;
  --card2:#ffffff;
  --muted:#6b7280;
  --ring:#2563eb;
}

html.dark body{
  background: radial-gradient(1200px 600px at 20% 10%, #1d4ed833, transparent 60%),
              radial-gradient(900px 500px at 85% 30%, #22c55e22, transparent 60%),
              linear-gradient(180deg, #050814, #0b1220);
  color: #e5e7eb;
}

body{
  background: radial-gradient(1200px 600px at 20% 10%, #2563eb14, transparent 60%),
              radial-gradient(900px 500px at 85% 30%, #22c55e14, transparent 60%),
              linear-gradient(180deg, #f7f8fb, #eef2ff);
}

.glass{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.kpi{
  letter-spacing: -0.02em;
}

.pill{
  border: 1px solid rgba(0,0,0,.08);
}

html.dark .pill{
  border-color: rgba(255,255,255,.12);
}

.meter{
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}

.meter > div{
  height: 100%;
}

.marker{
  position: absolute;
  top: -6px;
  width: 2px;
  height: 26px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
}

.marker-dot{
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
}

.fade-in{
  animation: fadeIn .35s ease-out both;
}

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}