:root{
  --navy:#1e2761; --navy-dark:#141a45; --ice:#edf3fc; --garis:#d3dceb;
  --teks:#1a1f35; --redup:#5b6478; --putih:#fff; --sukses:#2f6b3a; --galat:#8f2b2b;
  --aksen:#8a5216;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#f6f8fc;color:var(--teks);
  font-family:"Segoe UI",Calibri,Candara,system-ui,-apple-system,Arial,sans-serif;
  font-size:16px;line-height:1.6}
.wadah{max-width:960px;margin:0 auto;padding:0 20px}
.bilah{background:var(--navy);color:#fff;padding:26px 0 24px;margin-bottom:26px}
.bilah h1{margin:2px 0 0;font-size:26px;line-height:1.25;font-weight:700}
.bilah .jejak{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#a9bde3}
.bilah .sub{margin:8px 0 0;color:#cadcfc;font-size:15px}
main{padding-bottom:40px}
.kartu{background:var(--putih);border:1px solid var(--garis);border-radius:6px;padding:22px 24px;margin-bottom:20px}
.kartu h2{margin:0 0 12px;font-size:19px}
.kartu h3{margin:18px 0 8px;font-size:16px;color:var(--navy)}
p{margin:0 0 12px}
.kecil{font-size:13px;color:var(--redup)}
label{display:block;font-weight:600;font-size:14px;margin:0 0 5px}
input[type=text],input[type=email],input[type=password],select{
  width:100%;padding:10px 12px;border:1px solid #b9c4d6;border-radius:4px;
  font:inherit;font-size:15px;background:#fff;color:var(--teks)}
input:focus,select:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.baris{display:flex;gap:16px;flex-wrap:wrap}
.baris>div{flex:1 1 220px;margin-bottom:14px}
button,.tombol{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:4px;
  padding:11px 22px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none}
button:hover,.tombol:hover{background:var(--navy-dark)}
.tombol.sekunder{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.tombol.sekunder:hover{background:var(--ice)}
.pesan{padding:12px 16px;border-radius:4px;margin:0 0 18px;font-size:14.5px;border:1px solid}
.pesan.info{background:var(--ice);border-color:#b8cbe8;color:var(--navy)}
.pesan.galat{background:#fbeded;border-color:#e0b6b6;color:var(--galat)}
.pesan.sukses{background:#eaf4ec;border-color:#b5d5bd;color:var(--sukses)}
.soal{background:#fff;border:1px solid var(--garis);border-radius:6px;padding:20px 22px;margin-bottom:16px}
.soal .nomor{display:inline-block;background:var(--navy);color:#fff;border-radius:50%;
  width:28px;height:28px;line-height:28px;text-align:center;font-weight:700;font-size:14px;margin-right:8px}
.soal .topik{float:right;font-size:12px;color:var(--redup);letter-spacing:.06em;text-transform:uppercase}
.soal .teks{font-weight:600;margin:10px 0 14px}
.opsi{display:block;border:1px solid var(--garis);border-radius:4px;padding:10px 14px;margin-bottom:8px;
  cursor:pointer;font-weight:400;font-size:15px;background:#fff}
.opsi:hover{background:var(--ice);border-color:#a9bde3}
.opsi input{margin-right:10px}
.opsi.terpilih{background:var(--ice);border-color:var(--navy)}
.opsi.benar{background:#eaf4ec;border-color:#8ab896}
.opsi.salah{background:#fbeded;border-color:#dda9a9}
.huruf{font-weight:700;margin-right:6px}
.nilai-besar{font-size:52px;font-weight:700;color:var(--navy);line-height:1.1;margin:0}
.grid3{display:flex;gap:16px;flex-wrap:wrap}
.grid3>div{flex:1 1 180px;background:var(--ice);border-radius:6px;padding:16px 18px}
.grid3 .angka{font-size:26px;font-weight:700;color:var(--navy)}
table{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
th,td{border:1px solid var(--garis);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--navy);color:#fff;font-weight:600}
tbody tr:nth-child(even){background:#f7fafd}
.kanan{text-align:right}
.bar-alat{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.kaki{border-top:1px solid var(--garis);background:#fff;padding:20px 0;font-size:13px;color:var(--redup)}
.kaki p{margin:0 0 6px}
.pembahasan{border-left:3px solid var(--aksen);background:#fbf6ef;padding:10px 14px;margin-top:10px;font-size:14px}
.lencana{display:inline-block;padding:2px 9px;border-radius:10px;font-size:12px;font-weight:600}
.lencana.lulus{background:#eaf4ec;color:var(--sukses)}
.lencana.gagal{background:#fbeded;color:var(--galat)}
.penunjuk{position:sticky;top:0;background:#fff;border:1px solid var(--garis);border-radius:6px;
  padding:10px 16px;margin-bottom:16px;font-size:14px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;z-index:5}
.penunjuk strong{color:var(--navy)}
@media print{
  .bilah{background:#fff;color:#000;border-bottom:2px solid #000}
  .bilah h1,.bilah .jejak,.bilah .sub{color:#000}
  .tombol,button,.bar-alat{display:none}
  body{background:#fff;font-size:12px}
  th{background:#e7e7e7;color:#000}
}

/* kelas pengganti gaya sebaris (CSP melarang atribut style=) */
.rapat{margin:0}
.sempit{max-width:460px}
.aksi-baris{flex:0 0 auto;align-self:flex-end}
.sembunyi{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bahaya{color:var(--galat)}
fieldset.soal{border:1px solid var(--garis)}
.kaki-catatan{margin-top:10px}

/* blok kode untuk pemasangan manual */
pre.kode {
  background: #f4f4f4;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  padding: .9rem 1rem;
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .82rem;
  line-height: 1.5;
  white-space: pre;
}