/* Desain: modern premium. Putih + indigo, kartu rounded-2xl berborder tipis, tombol pil. Section selang-seling putih dan abu muda. */
:root {
  --bg: #ffffff; --surface: #ffffff; --surface2: #f8fafc; --ink: #0f172a; --muted: #475569; --line: #e2e8f0;
  --brand: #4f46e5; --brand-hover: #4338ca; --brand-ink: #ffffff; --brand-soft: #eef2ff;
  --ok: #15803d; --on-ok: #ffffff; --ok-soft: #dcfce7;
  --warn: #facc15; --on-warn: #422006; --warn-soft: #fef9c3;
  --bad: #dc2626; --on-bad: #ffffff; --bad-soft: #fee2e2;
  --scrim: rgba(15, 23, 42, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120; --surface: #111a2e; --surface2: #0f172a; --ink: #f1f5f9; --muted: #a3b1c6; --line: #263349;
    --brand: #818cf8; --brand-hover: #a5b4fc; --brand-ink: #0b1120; --brand-soft: #1e2347;
    --ok: #4ade80; --on-ok: #052e16; --ok-soft: #12311f;
    --warn: #facc15; --on-warn: #422006; --warn-soft: #3b3410;
    --bad: #f87171; --on-bad: #3f0a0a; --bad-soft: #3f1d1d;
    --scrim: rgba(0, 0, 0, 0.65); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1120; --surface: #111a2e; --surface2: #0f172a; --ink: #f1f5f9; --muted: #a3b1c6; --line: #263349;
  --brand: #818cf8; --brand-hover: #a5b4fc; --brand-ink: #0b1120; --brand-soft: #1e2347;
  --ok: #4ade80; --on-ok: #052e16; --ok-soft: #12311f;
  --warn: #facc15; --on-warn: #422006; --warn-soft: #3b3410;
  --bad: #f87171; --on-bad: #3f0a0a; --bad-soft: #3f1d1d;
  --scrim: rgba(0, 0, 0, 0.65); color-scheme: dark;
}
body { background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.font-mono { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.glass { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--surface); }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--brand); width: 1.1rem; height: 1.1rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }