/* Akidah — tema subjek (hijau zamrud + keemasan; gaya asas dari _core/css/style.css).
   Kafa §4: tiada audio bacaan — visual sahaja. Kelas warna dunia via .opt.<kelas>
   dengan pemilih :not(...) supaya feedback teras (.good/.bad/.picked) tetap menang. */

:root {
  --blue: #0e7a4f;          /* hijau zamrud — tajuk & aksen */
  --sky: #f0faf4;           /* latar hijau lembut */
  --green: #16a34a;
  --green-d: #0e7a4f;
}

body {
  background: var(--sky) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><circle cx="20" cy="30" r="4" fill="%23d7f2e3"/><circle cx="90" cy="70" r="5" fill="%23f7edc9"/><circle cx="55" cy="100" r="3" fill="%23dff5e1"/></svg>');
}

.homehead h1 { color: var(--blue); letter-spacing: .06em; }
.namecard h1, .celcard h2 { color: var(--blue); }
.btn.primary { background: var(--green); border-color: var(--green-d); }
.trophy { background: #ffd84d; color: #6b4b00; }        /* keemasan trofi */

/* sempadan pilihan mesra hijau */
.opt { border-color: #cfeee0; }
.opt:hover { background: #e9f8f0; }

/* kelas warna opsional untuk opsyen (mcq/multi) — teks LABEL tetap sumber maklumat */
.opt.emas:not(.good):not(.bad):not(.picked)  { background:#fff6cf; border-color:#e8a900; }
.opt.lembut:not(.good):not(.bad):not(.picked){ background:#e8f6ee; border-color:#2fb457; }