:root{ --brand:#4338ca; --brand2:#f59e0b; --ink:#0f172a; --muted:#64748b; }
body { color: var(--ink); }
.bg-hero{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(67,56,202,0.25), transparent),
    radial-gradient(900px 500px at 100% 0%, rgba(245,158,11,0.20), transparent),
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.card { background: white; border-radius: 18px; box-shadow: 0 10px 40px rgba(2,6,23,0.08); }
.pill { background:#f1f5f9; border:1px solid #e2e8f0; padding:6px 10px; border-radius:999px; font-size:12px; }
.heading { background: linear-gradient(90deg, var(--brand), var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.num { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
#err { position: fixed; left: 12px; bottom: 12px; background: #fee2e2; color:#7f1d1d; padding:10px 12px; border-radius:10px; font-size:12px; max-width: 90vw; display:none; z-index:9999; }
.hint { color: var(--muted); font-size: 12px; }
.labelcap { font-size: 12px; color: var(--muted); }