:root{
  --pinus:#14584A; --pinus-tua:#0C3A30; --pinus-gelap:#071F1A;
  --emas:#B98A1E; --emas-muda:#E0B54C;
  --krem:#FAF6EE; --krem-tua:#F0E9DA; --tinta:#171714; --abu:#6E6A60; --garis:#DDD5C4;
  --hijau:#2E7D5B; --kuning:#C58A16; --merah:#BC4A2A; --wa:#1FA855;
  --disp:'Bricolage Grotesque',system-ui,sans-serif; --teks:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:var(--teks);background:#E7E2D6;color:var(--tinta);-webkit-font-smoothing:antialiased}

/* Di sini pernah ada potongan aturan yatim — deklarasi tanpa selektor dan tanpa
   kurung pembuka, sisa dari elemen yang sudah dihapus:

     display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-bottom:2px solid var(--emas)}

   Peramban tidak membuangnya begitu saja. Ia mencari selektor, MENELAN potongan
   itu beserta `.pentas` di bawahnya, lalu membuang keduanya sebagai satu aturan
   tidak sah. Akibatnya `display:flex; justify-content:center` di `.pentas` tidak
   pernah berlaku, dan kartu 460px itu duduk di tepi kiri layar. Di ponsel tidak
   terlihat karena lebar layar di bawah 460px sehingga kartunya memenuhi layar;
   baru muncul di desktop.

   Diperiksa uji-css.js sekarang. Satu kurung yang salah bisa mematikan aturan
   BERIKUTNYA, bukan cuma dirinya sendiri — itu yang membuatnya sulit dilacak. */

.pentas{padding:0;display:flex;justify-content:center;min-height:100vh}
.ponsel{width:100%;max-width:460px;background:var(--krem);display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh}
@media(min-width:520px){.pentas{padding:24px 16px;align-items:flex-start}
  .ponsel{min-height:auto;border-radius:20px;box-shadow:0 18px 44px rgba(8,39,32,.18);overflow:hidden}}

.kop{padding:14px 22px 12px;border-bottom:1px solid var(--garis);display:flex;flex-direction:column;gap:8px;
  position:sticky;top:0;z-index:5;background:var(--krem);
  padding-top:calc(14px + env(safe-area-inset-top))}
.kop .baris{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:nowrap}
.kop .nama{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kop .hitung{flex:0 0 auto;white-space:nowrap}
.kop .nama{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--pinus);letter-spacing:-.01em}
.kop .hitung{font-size:11.5px;font-weight:600;color:var(--abu);letter-spacing:.04em;white-space:nowrap}
.rel{height:4px;background:var(--krem-tua);border-radius:99px;overflow:hidden;display:flex;gap:3px}
.rel span{display:block;height:100%;background:var(--krem-tua);border-radius:99px;overflow:hidden}
.rel span i{display:block;height:100%;background:var(--emas);width:0;transition:width .3s}
.rel .s1{flex:0 0 22%} .rel .s2{flex:1}
.isi{flex:1;padding:24px 22px 26px;display:flex;flex-direction:column}

/* pembuka */
.buka .tag{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--emas)}
.buka h1{font-family:var(--disp);font-weight:800;font-size:33px;line-height:1.02;color:var(--pinus);
  letter-spacing:-.02em;margin:22px 0 4px}
.buka p{font-size:15px;line-height:1.55;color:var(--abu);margin-top:13px}
.langkah2{margin-top:22px;display:flex;flex-direction:column;gap:11px}
.lk{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--garis);
  border-radius:12px;padding:14px 15px}
.lk .no{width:26px;height:26px;border-radius:50%;background:var(--emas);color:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:14px}
.lk .tx b{display:block;font-family:var(--disp);font-weight:700;font-size:15px;margin-bottom:2px}
.lk .tx span{font-size:12.5px;line-height:1.45;color:var(--abu)}
.buka ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:9px}
.buka li{font-size:13px;line-height:1.45;padding-left:22px;position:relative}
.buka li::before{content:'';position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--emas)}
.buka li b{font-weight:600;color:var(--pinus)}

/* bagian 1 */
.nominal{font-family:var(--disp);font-weight:800;font-size:50px;line-height:.95;color:var(--pinus);
  margin:16px 0 4px;letter-spacing:-.025em}
.nominal small{display:block;font-size:18px;font-weight:600;color:var(--emas);letter-spacing:.02em;margin-bottom:6px}
.soal-tx{font-size:16px;line-height:1.55;margin:14px 0 2px}
.soal-tx b{font-weight:600}
.catatan-tx{font-size:13px;line-height:1.5;color:var(--abu);margin-top:10px;padding-left:12px;border-left:2px solid var(--garis)}
.kolom{margin-top:22px}
.kolom .lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--emas);margin-bottom:7px}
.kolom input{width:100%;font-family:var(--teks);font-size:17px;padding:14px 15px;border:1.5px solid var(--garis);
  border-radius:12px;background:#fff;color:var(--tinta)}
.kolom input:focus{outline:none;border-color:var(--pinus);box-shadow:0 0 0 3px rgba(20,88,74,.13)}
.kolom input::placeholder{color:#C0B9A8}
.kolom+.kolom{margin-top:15px}

/* jembatan */
.jbt{text-align:center;display:flex;flex-direction:column;justify-content:center;flex:1}
.jbt .centang{width:58px;height:58px;border-radius:50%;background:var(--pinus);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:28px;margin:0 auto 20px}
.jbt h2{font-family:var(--disp);font-weight:800;font-size:27px;color:var(--pinus);margin-bottom:9px}
.jbt p{font-size:14.5px;line-height:1.55;color:var(--abu)}
.jawabmu{margin:22px 0;background:var(--krem-tua);border-radius:12px;padding:16px;text-align:left}
.jawabmu div{font-size:15px;font-weight:600;color:var(--pinus-tua);padding:5px 0}
.jawabmu div span{color:var(--emas);font-weight:700;margin-right:8px}
.ubah{background:none;border:none;color:var(--emas);font-size:13.5px;font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}

/* pertanyaan */
.tanya{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.01em}
.bantu{font-size:13px;line-height:1.5;color:var(--abu);margin-top:9px}
.pilih{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.op{width:100%;text-align:left;font-family:var(--teks);font-size:15px;line-height:1.35;padding:14px 16px;
  border:1.5px solid var(--garis);border-radius:12px;background:#fff;color:var(--tinta);cursor:pointer;
  transition:.14s;display:flex;align-items:center;gap:11px}
.op:hover{border-color:var(--pinus)}
.op .kotak{width:19px;height:19px;border:2px solid var(--garis);border-radius:5px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}
.op.bulat .kotak{border-radius:50%}
.op[aria-pressed="true"]{border-color:var(--pinus);background:#F2F8F5}
.op[aria-pressed="true"] .kotak{background:var(--pinus);border-color:var(--pinus)}

.kaki{margin-top:auto;padding-top:22px;padding-bottom:env(safe-area-inset-bottom);display:flex;gap:10px}
.tbl{flex:1;font-family:var(--disp);font-weight:700;font-size:16px;padding:15px;border:none;border-radius:12px;
  background:var(--pinus);color:#fff;cursor:pointer}
.tbl:disabled{background:#C9C2B2;cursor:not-allowed}
.tbl.hantu{flex:0 0 auto;background:transparent;color:var(--abu);border:1.5px solid var(--garis);padding:15px 18px}
.privasi{font-size:12px;line-height:1.5;color:var(--abu);text-align:center;margin-top:12px}

/* identitas gabungan */
.grup+.grup{margin-top:24px}
.grup .tanya{font-size:18px}
.pilih.chip{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.pilih.chip .op{width:100%;padding:14px 10px;font-size:15px;justify-content:center;text-align:center;
  font-weight:500}
.pilih.chip .op .kotak{display:none}
.pilih.chip .op:nth-child(odd):last-child{grid-column:1 / -1}
.pilih.chip .op[aria-pressed="true"]{background:var(--pinus);color:#fff;border-color:var(--pinus);
  box-shadow:0 2px 8px rgba(20,88,74,.22)}
.grup .tanya{font-size:19px}
.grup+.grup{margin-top:26px}

/* penafian */
.penafian{margin-top:24px;background:var(--krem-tua);border:1px solid var(--garis);border-radius:12px;padding:17px 19px}
.penafian .jdl{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--pinus);margin-bottom:9px;
  display:flex;align-items:center;gap:7px}
.penafian p{font-size:12.5px;line-height:1.6;color:var(--abu)}
.penafian p+p{margin-top:9px}
.penafian b{color:var(--tinta);font-weight:600}

/* hasil */
.hasil-kop{background:var(--pinus-tua);color:#fff;padding:26px 22px 24px;text-align:center}
.hasil-kop .lbl{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--emas-muda)}
.hasil-kop .skor{font-family:var(--disp);font-weight:800;font-size:66px;line-height:1;letter-spacing:-.04em;margin:8px 0 2px}
.hasil-kop .skor small{font-size:22px;opacity:.5}
.hasil-kop .band{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--emas-muda);margin-top:6px}
.hasil-kop .band-ket{font-size:13px;line-height:1.5;color:rgba(255,255,255,.7);margin-top:9px}
.kartu{border:1px solid var(--garis);border-left:4px solid var(--w);border-radius:11px;padding:15px 16px;background:#fff}
.kartu+.kartu{margin-top:11px}
.kartu .atas{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:7px}
.kartu .jdl{font-family:var(--disp);font-weight:700;font-size:15.5px}
.kartu .nilai{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--w);padding:3px 9px;border-radius:99px;white-space:nowrap}
.kartu .jwb{font-size:12.5px;color:var(--abu);margin-bottom:8px;font-style:italic}
.kartu .ket{font-size:13.5px;line-height:1.55}
.kartu .ket b{color:var(--w);font-weight:600}
.kartu.diskusi{border-left-color:var(--garis);background:var(--krem-tua)}
.kartu.diskusi .nilai{background:var(--abu)}
.sesi{margin-top:22px}
.sesi .cap{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--emas);margin-bottom:11px}
.tutup{margin-top:22px;background:var(--pinus);color:#fff;border-radius:12px;padding:18px 20px}
.tutup .jdl{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--emas-muda);margin-bottom:8px}
.tutup p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.86)}
.simpan{margin-top:20px;padding-top:20px;border-top:1px solid var(--garis)}
.simpan .cap{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--emas);margin-bottom:6px}
.simpan p{font-size:13px;line-height:1.5;color:var(--abu);margin-bottom:13px}
.simpan .tombol{display:flex;gap:9px}
.simpan a,.simpan button{flex:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:15px;padding:14px;border-radius:12px;border:none;
  cursor:pointer;text-decoration:none}
.simpan .wa{background:var(--wa);color:#fff}
.simpan .salin{background:#fff;color:var(--pinus);border:1.5px solid var(--garis)}
.ulang{margin-top:14px;width:100%;background:none;border:1.5px solid var(--garis);border-radius:12px;
  padding:13px;font-family:var(--teks);font-size:14px;font-weight:600;color:var(--abu);cursor:pointer}



/* --- tambahan plugin --- */
.pk-pesan{padding:40px 26px;text-align:center;display:flex;flex-direction:column;
  justify-content:center;min-height:70vh}
.pk-pesan h2{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--pinus);margin-bottom:10px}
.pk-pesan p{font-size:15px;line-height:1.55;color:var(--abu)}
.pk-galat{background:#FDECE7;border:1px solid #E7B9AB;color:#8A2E14;border-radius:10px;
  padding:12px 14px;font-size:13.5px;line-height:1.5;margin-top:14px}
.pk-memuat{opacity:.55;pointer-events:none}

.pk-terkirim{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--hijau);
  font-weight:600;margin-top:12px}
.pk-terkirim span{width:18px;height:18px;border-radius:50%;background:var(--hijau);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 auto}
.pk-kirim-jalan{font-size:13px;color:var(--abu);margin-top:12px}

/* penanda simpan bertahap di kepala */
.kop .hitung{display:flex;align-items:center;gap:9px}
.simpan-titik{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:block;
  background:var(--garis);transition:background .25s,transform .25s}
.simpan-titik.jalan{background:var(--emas);transform:scale(1.15)}
.simpan-titik.aman{background:var(--hijau)}
.simpan-titik.gagal{background:var(--merah);transform:scale(1.2)}
.pk-galat-atas{background:#FBE7E0;color:#8A2E14;font-size:12.5px;line-height:1.5;
  padding:10px 22px;border-bottom:1px solid #E7B9AB}
.pk-muat-ulang{background:#8A2E14;color:#fff;border:none;border-radius:7px;padding:4px 11px;
  font-family:var(--teks);font-size:12px;font-weight:600;cursor:pointer;margin-left:4px}

/* Penanda versi — untuk memastikan HP tidak sedang memegang salinan lama. */
.pk-versi{font-size:10px;color:#C6BFAE;text-align:center;padding:0 0 10px;letter-spacing:.08em}

/* ---------- gerbang kode kelas ----------
   Layar pertama yang dilihat peserta kalau QR tidak terbaca atau kodenya
   diketik manual. Sengaja dibuat lapang dan cuma punya satu hal untuk
   dilakukan — di ruang kelas, layar ini dibaca sambil berdiri. */
.pk-gerbang{padding:52px 26px 40px;display:flex;flex-direction:column;
  justify-content:center;min-height:70vh;text-align:center}
.pk-gerbang .tanda{font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--emas);margin-bottom:16px}
.pk-gerbang h2{font-family:var(--disp);font-weight:800;font-size:27px;
  line-height:1.15;color:var(--pinus);letter-spacing:-.02em}
.pk-gerbang h2 em{font-style:normal;color:var(--emas)}
.pk-gerbang .ket{font-size:14.5px;line-height:1.5;color:var(--abu);margin-top:9px}
.pk-gerbang form{display:flex;flex-direction:column;gap:11px;margin-top:24px}
.pk-gerbang .halus{font-size:12.5px;line-height:1.5;color:var(--abu);margin-top:22px}

/* Empat angka besar dan berjarak. font-variant-numeric:tabular-num menjaga
   lebar tiap angka tetap sama, jadi kotaknya tidak bergoyang waktu diketik. */
.kotak-kode{width:100%;height:66px;border:2px solid var(--garis);border-radius:14px;
  background:#fff;font-family:var(--disp);font-weight:800;font-size:32px;
  letter-spacing:.34em;text-indent:.34em;text-align:center;color:var(--pinus);
  font-variant-numeric:tabular-nums;outline:none;transition:border-color .18s}
.kotak-kode::placeholder{color:var(--garis)}
.kotak-kode:focus{border-color:var(--pinus)}

.tbl-kode{height:52px;border:none;border-radius:13px;background:var(--pinus);color:#fff;
  font-family:var(--teks);font-weight:600;font-size:15.5px;cursor:pointer;
  transition:background .18s}
.tbl-kode:hover{background:var(--pinus-tua)}
.tbl-kode:active{background:var(--pinus-gelap)}