/* Layout: satu kolom lebar 6xl, kartu datar, panel navigasi kanan saat ujian. Warna: hijau tinta + abu kehijauan, semantik hijau/ambar/merah. */
:root {
  --bg: #edf1f0; --surface: #ffffff; --surface2: #f4f7f6; --ink: #13201e; --muted: #50625e; --line: #d0dbd8;
  --brand: #0d5c52; --brand-ink: #ffffff; --brand-soft: #d9eeea;
  --ok: #17703d; --on-ok: #ffffff; --ok-soft: #dcf2e4;
  --warn: #a85f00; --on-warn: #ffffff; --warn-soft: #fcebc6;
  --bad: #b3261e; --on-bad: #ffffff; --bad-soft: #fadfdb;
  --scrim: rgba(10, 22, 20, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1615; --surface: #152220; --surface2: #1b2b29; --ink: #e5eeec; --muted: #9db2ad; --line: #2c403d;
    --brand: #55c8b6; --brand-ink: #06201c; --brand-soft: #143a35;
    --ok: #52c783; --on-ok: #07210f; --ok-soft: #173626;
    --warn: #f0b04a; --on-warn: #2a1c00; --warn-soft: #3a2b0f;
    --bad: #f27d70; --on-bad: #2c0a06; --bad-soft: #3d1b17;
    --scrim: rgba(0, 0, 0, 0.65); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1615; --surface: #152220; --surface2: #1b2b29; --ink: #e5eeec; --muted: #9db2ad; --line: #2c403d;
  --brand: #55c8b6; --brand-ink: #06201c; --brand-soft: #143a35;
  --ok: #52c783; --on-ok: #07210f; --ok-soft: #173626;
  --warn: #f0b04a; --on-warn: #2a1c00; --warn-soft: #3a2b0f;
  --bad: #f27d70; --on-bad: #2c0a06; --bad-soft: #3d1b17;
  --scrim: rgba(0, 0, 0, 0.65); color-scheme: dark;
}
body { background: var(--bg); color: var(--ink); font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.5; }
.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: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input[type="radio"] { accent-color: var(--brand); width: 1.1rem; height: 1.1rem; }