:root {
  color-scheme: light;
  --latar: #f2f6f1;
  --permukaan: #ffffff;
  --tinta: #1b2630;
  --redup: #56626c;
  --garis: #d6ddd5;
  --garis-isian: #b9c2b9;
  --utama: #0d6455;
  --utama-gelap: #08463b;
  --utama-muda: #e0f2ed;
  --ragu: #b76e00;
  --ragu-gelap: #875100;
  --ragu-muda: #fdf0d8;
  --bahaya: #b3261e;
  --bahaya-muda: #fbe9e7;
  --cincin: #5aa89a;
  --garis-aktif: #9fb3ad;
  --cahaya-1: #c6ecdf;
  --cahaya-2: #fbeac6;
  --pola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 18v16M22 26h16'/%3E%3Ccircle cx='112' cy='38' r='9'/%3E%3Cpath d='M58 92l11 19H47z'/%3E%3Crect x='124' y='106' width='17' height='17' rx='3'/%3E%3C/svg%3E");
}

/* Tema dari nama. Kursor SVG diabaikan browser yang tidak mendukungnya, lalu kembali ke kursor biasa. */
html[data-tema="perempuan"] {
  --latar: #fbf2f7;
  --garis: #eed9e4;
  --garis-isian: #d9bccb;
  --utama: #b0326b;
  --utama-gelap: #84214e;
  --utama-muda: #fbe4ef;
  --cincin: #e58ab2;
  --garis-aktif: #dba3bd;
  --cahaya-1: #fbcfe2;
  --cahaya-2: #e6d8fb;
  --kursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M3 2 L3 22 L8.5 17 L12.5 26 L16 24.5 L12 16 L19 16 Z' fill='%23b0326b' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M24 29 C19 25 17 23 17 20.5 C17 18.5 18.5 17.5 20 17.5 C21.5 17.5 23 18.5 24 20 C25 18.5 26.5 17.5 28 17.5 C29.5 17.5 31 18.5 31 20.5 C31 23 29 25 24 29 Z' fill='%23e8578f' stroke='%23fff'/%3E%3C/svg%3E") 3 2, auto;
  --kursor-tunjuk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 29 C7 22 2.5 17.5 2.5 11.5 C2.5 7 6 4 9.5 4 C12.5 4 14.5 5.5 16 8 C17.5 5.5 19.5 4 22.5 4 C26 4 29.5 7 29.5 11.5 C29.5 17.5 25 22 16 29 Z' fill='%23e8578f' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 16 14, pointer;
}
html[data-tema="laki"] {
  --latar: #eff4fa;
  --garis: #d5deeb;
  --garis-isian: #b7c5d8;
  --utama: #1f4e8c;
  --utama-gelap: #143661;
  --utama-muda: #e0ebf8;
  --cincin: #7ba3d6;
  --garis-aktif: #9db5d3;
  --cahaya-1: #cbdffb;
  --cahaya-2: #cfeff0;
  --kursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M3 2 L3 24 L9 18.5 L13 28 L17 26.3 L13 17 L21 17 Z' fill='%231f4e8c' stroke='%23fff' stroke-width='1.5' stroke-linejoin='miter'/%3E%3C/svg%3E") 3 2, auto;
  --kursor-tunjuk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 2 L28 7 V16 C28 23 22.5 27.5 16 30 C9.5 27.5 4 23 4 16 V7 Z' fill='%231f4e8c' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M16 9 L18 14 H23 L19 17 L20.5 22 L16 19 L11.5 22 L13 17 L9 14 H14 Z' fill='%23fff'/%3E%3C/svg%3E") 16 15, pointer;
}
html[data-tema="perempuan"] body, html[data-tema="laki"] body { cursor: var(--kursor); }
html[data-tema="perempuan"] :is(button, select, .opsi, .tanda-ragu, .tanda-ragu input),
html[data-tema="laki"] :is(button, select, .opsi, .tanda-ragu, .tanda-ragu input) { cursor: var(--kursor-tunjuk); }
html[data-tema="perempuan"] .tombol:disabled, html[data-tema="laki"] .tombol:disabled { cursor: not-allowed; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--tinta);
  font: 16px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Latar: satu lapisan tetap, tanpa animasi dan tanpa file gambar, jadi cukup digambar sekali. */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  contain: strict;
}
body::before {
  background:
    radial-gradient(70vmax 70vmax at 100% 0, var(--cahaya-1), transparent 62%),
    radial-gradient(60vmax 60vmax at 0 100%, var(--cahaya-2), transparent 62%);
}
body::after {
  background: var(--utama);
  opacity: .07;
  -webkit-mask: var(--pola) 0 0 / 160px 160px;
  mask: var(--pola) 0 0 / 160px 160px;
}

[hidden] { display: none !important; }

h1 { margin: 0 0 4px; font-size: 1.65rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
h2 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 12px; }

.redup { color: var(--redup); }

/* Bentuk dasar: garis tebal dan tepi bawah padat. Tepinya memakai box-shadow agar tidak menggeser tata letak. */
.kartu {
  background: var(--permukaan);
  border: 2px solid var(--garis);
  border-radius: 20px;
  box-shadow: 0 5px 0 var(--garis);
  padding: 24px;
}

.tombol, .opsi, .daftar-soal button {
  position: relative;
  transition: transform .08s, box-shadow .08s, background-color .12s, border-color .12s;
}
/* Area klik diperluas sampai ke tepi bawah. Tanpa ini, menekan tepi bawah bisa meleset karena kotaknya ikut turun. */
.tombol::after, .opsi::after, .daftar-soal button::after {
  content: "";
  position: absolute;
  inset: -2px -2px -7px;
}

.tombol {
  min-height: 46px;
  padding: 10px 18px;
  border: 2px solid var(--garis);
  border-radius: 14px;
  background: var(--permukaan);
  box-shadow: 0 4px 0 var(--garis);
  color: var(--tinta);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tombol:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--garis); }
.tombol:disabled { opacity: .5; cursor: not-allowed; }
.tombol.utama { background: var(--utama); border-color: var(--utama); box-shadow: 0 4px 0 var(--utama-gelap); color: #fff; }
.tombol.utama:active:not(:disabled) { box-shadow: 0 1px 0 var(--utama-gelap); }
.tombol.lebar { width: 100%; }
:focus-visible { outline: 3px solid var(--cincin); outline-offset: 2px; }

@media (hover: hover) {
  .tombol:hover:not(:disabled) { background: var(--utama-muda); border-color: var(--garis-aktif); }
  .tombol.utama:hover:not(:disabled) { background: var(--utama-gelap); border-color: var(--utama-gelap); }
  .opsi:hover { border-color: var(--garis-aktif); background: var(--utama-muda); }
}

/* Layar identitas, melanjutkan, selesai */
.layar-tengah {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px 30px;
}
.layar-tengah > .kartu { width: 100%; max-width: 480px; }

label { display: block; margin: 14px 0 5px; font-weight: 700; font-size: .9rem; }
input:not([type]), input[type="text"], select {
  width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  border: 2px solid var(--garis-isian);
  border-radius: 12px;
  background-color: #fff;
  color: inherit;
  font: inherit;
  transition: border-color .12s;
}
select {
  padding-right: 30px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2356626c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}
input:not([type]):focus, input[type="text"]:focus, select:focus, textarea:focus { border-color: var(--utama); }

.baris-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ganti-tema { flex: none; padding: 0; border: 0; background: none; color: var(--redup); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; visibility: hidden; }
/* Ruangnya selalu tersedia: kalau form bergeser saat kolom nama ditinggalkan, klik pada tombol Mulai bisa meleset. */
.ganti-tema.tampak { visibility: visible; }
.tiga-kolom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.aturan {
  margin: 18px 0;
  padding: 12px 12px 12px 30px;
  border-radius: 12px;
  background: var(--latar);
  color: var(--redup);
  font-size: .88rem;
}
.aturan li + li { margin-top: 4px; }

.galat { padding: 10px 12px; border-radius: 12px; background: var(--bahaya-muda); color: var(--bahaya); font-size: .92rem; }
.info { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--utama-muda); color: var(--utama-gelap); font-size: .92rem; }

.ringkasan { margin: 16px 0 20px; }
.ringkasan > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 2px solid var(--garis); }
.ringkasan dt { color: var(--redup); }
.ringkasan dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }

/* Layar ujian: teks soal tidak bisa diseleksi */
#layar-ujian {
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#layar-ujian textarea { -webkit-user-select: text; user-select: text; }
#layar-ujian.tertutup .tata-ujian { visibility: hidden; }

.bilah-atas {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--permukaan);
  border-bottom: 2px solid var(--garis);
}
.bilah-judul { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.bilah-judul > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bilah-judul .redup { font-size: .82rem; }
.status-simpan { flex: none; color: var(--redup); font-size: .82rem; }
.status-simpan.gagal { color: var(--bahaya); font-weight: 600; }
.waktu {
  flex: none;
  min-width: 96px;
  padding: 5px 12px;
  border: 2px solid var(--utama);
  border-radius: 12px;
  background: var(--utama-muda);
  color: var(--utama-gelap);
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.waktu.hampir { border-color: var(--ragu); background: var(--ragu-muda); color: var(--ragu-gelap); }
.waktu.kritis { border-color: var(--bahaya); background: var(--bahaya); color: #fff; }

.tata-ujian {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px;
}

.nomor-soal { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--redup); font-size: .88rem; font-weight: 700; }
.jenis-soal { padding: 2px 10px; border-radius: 99px; background: var(--utama-muda); color: var(--utama-gelap); font-weight: 600; }
.teks-soal { margin-bottom: 18px; font-size: 1.16rem; font-weight: 600; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

.gambar-soal { margin-bottom: 18px; }
.gambar-soal img {
  display: block;
  max-width: 100%;
  max-height: 340px;
  height: auto;
  border: 2px solid var(--garis);
  border-radius: 14px;
  background: #fff;
}
.gambar-gagal { padding: 12px; border: 2px dashed var(--garis); border-radius: 14px; color: var(--redup); font-size: .9rem; }
.gambar-gagal button { margin-left: 8px; padding: 2px 10px; border: 2px solid var(--garis); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }

/* Pilihan jawaban: ubin. Jawaban pendek dan gambar tersusun dua kolom. */
.daftar-opsi { display: grid; gap: 12px 12px; }
.opsi {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 11px 14px;
  min-height: 56px;
  border: 2px solid var(--garis);
  border-radius: 16px;
  background: var(--permukaan);
  box-shadow: 0 4px 0 var(--garis);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
.opsi:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--garis); }
.opsi input { position: absolute; opacity: 0; pointer-events: none; }
.opsi input:focus-visible + .huruf { outline: 3px solid var(--cincin); outline-offset: 2px; }
/* Huruf pilihan seperti tombol keyboard */
.huruf {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--garis);
  border-radius: 9px;
  background: var(--permukaan);
  box-shadow: 0 2px 0 var(--garis);
  color: var(--redup);
  font-size: .85rem;
  font-weight: 800;
}
.isi-opsi { min-width: 0; overflow-wrap: anywhere; }
.isi-opsi img { display: block; width: 100%; max-width: 160px; height: auto; }
.opsi.terpilih { border-color: var(--utama); background: var(--utama-muda); box-shadow: 0 4px 0 var(--utama); }
.opsi.terpilih:active { box-shadow: 0 1px 0 var(--utama); }
.opsi.terpilih .huruf { border-color: var(--utama); background: var(--utama); box-shadow: 0 2px 0 var(--utama-gelap); color: #fff; }
.hapus-pilihan { margin-top: 14px; padding: 4px 0; border: 0; background: none; color: var(--redup); font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }

@media (min-width: 560px) {
  .daftar-opsi.ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.daftar-opsi.bergambar { grid-template-columns: repeat(2, minmax(0, 1fr)); }

textarea {
  display: block;
  width: 100%;
  min-height: 220px;
  padding: 12px 14px;
  border: 2px solid var(--garis-isian);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  resize: vertical;
  transition: border-color .12s;
}
.hitung-karakter { margin-top: 6px; color: var(--redup); font-size: .82rem; text-align: right; }

.navigasi-soal { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.tanda-ragu { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tanda-ragu input { width: 18px; height: 18px; accent-color: var(--ragu); }

.kolom-daftar { position: sticky; top: 80px; padding: 18px; }
.daftar-soal { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 10px 8px; }
.daftar-soal button {
  min-height: 42px;
  border: 2px solid var(--garis);
  border-radius: 11px;
  background: var(--permukaan);
  box-shadow: 0 3px 0 var(--garis);
  color: var(--tinta);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.daftar-soal button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--garis); }
.daftar-soal .terjawab { background: var(--utama); border-color: var(--utama); box-shadow: 0 3px 0 var(--utama-gelap); color: #fff; }
.daftar-soal .ragu { background: var(--ragu); border-color: var(--ragu); box-shadow: 0 3px 0 var(--ragu-gelap); color: #fff; }
.daftar-soal .kini { outline: 3px solid var(--tinta); outline-offset: 2px; }

.keterangan { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 16px 0; padding: 0; list-style: none; color: var(--redup); font-size: .82rem; }
.keterangan li { display: flex; align-items: center; gap: 6px; }
.kotak { width: 13px; height: 13px; border: 2px solid var(--garis); border-radius: 4px; background: var(--permukaan); }
.kotak.terjawab { background: var(--utama); border-color: var(--utama); }
.kotak.ragu { background: var(--ragu); border-color: var(--ragu); }

/* Lapisan */
.lapisan {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20, 28, 34, .72);
}
.lapisan > .kartu { width: 100%; max-width: 440px; }
#penghalang { background: #18222b; }
#lapisan-kirim { z-index: 30; }
.baris-tombol { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

.pemberitahuan {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 15;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--tinta);
  color: #fff;
  font-size: .92rem;
  transform: translateX(-50%);
}

@media (max-width: 820px) {
  .tata-ujian { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px; }
  .kolom-daftar { position: static; }
  .kartu { padding: 18px; border-radius: 18px; }
  .bilah-atas { gap: 10px; padding: 8px 12px; }
  .bilah-judul { display: none; }
  .status-simpan { flex: 1; }
  .teks-soal { font-size: 1.08rem; }
  .gambar-soal img { max-height: 280px; }
  .navigasi-soal { gap: 8px; }
  .navigasi-soal .tombol { padding: 10px 12px; }
  .tanda-ragu { gap: 6px; font-size: .92rem; }
}

@media (max-width: 360px) {
  .tiga-kolom { grid-template-columns: 1fr; gap: 0; }
  .daftar-opsi.bergambar { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tombol, .opsi, .daftar-soal button { transition: none; }
}

/* Halaman ujian tidak bisa dicetak */
@media print {
  body { display: none !important; }
}