:root {
  --hijau:#1a7f37; --hijau-muda:#e6f4ea;
  --biru:#1f6feb;  --biru-muda:#e8f0fe;
  --merah:#cf222e; --merah-muda:#fdeceb;
  --kuning:#bf8700;--kuning-muda:#fff8e1;
  --teks:#1f2328; --redup:#656d76; --garis:#d8dee4; --latar:#f4f6f8;
  --r:14px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--latar); color:var(--teks); font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a { color:var(--biru); }

.bilah {
  background:#fff; border-bottom:1px solid var(--garis); padding:10px 16px;
  display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:20;
}
.bilah h1 { font-size:17px; margin:0; flex:1; }
.bilah .siapa { font-size:14px; color:var(--redup); }

.wadah { max-width:920px; margin:0 auto; padding:16px; }
.wadah.sempit { max-width:520px; }

.kartu {
  background:#fff; border:1px solid var(--garis); border-radius:var(--r);
  padding:18px; margin-bottom:14px;
}
.kartu h2 { margin:0 0 4px; font-size:18px; }
.kartu h3 { margin:16px 0 8px; font-size:15px; }
.kartu p.ket { margin:0 0 14px; color:var(--redup); font-size:14px; }

label { display:block; font-size:14px; font-weight:600; margin:12px 0 5px; }
input,select,textarea {
  width:100%; padding:12px 14px; font-size:16px; font-family:inherit;
  border:1px solid var(--garis); border-radius:10px; background:#fff; color:var(--teks);
}
input:focus,select:focus,textarea:focus { outline:2px solid var(--biru); border-color:var(--biru); }
textarea { min-height:80px; resize:vertical; }

.tombol {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 20px; font-size:16px; font-weight:600; font-family:inherit;
  border:0; border-radius:10px; background:var(--hijau); color:#fff; cursor:pointer;
  text-decoration:none; min-height:48px;
}
.tombol:hover { filter:brightness(.94); }
.tombol:disabled { opacity:.5; cursor:not-allowed; }
.tombol.penuh { width:100%; }
.tombol.biru { background:var(--biru); }
.tombol.abu { background:#fff; color:var(--teks); border:1px solid var(--garis); }
.tombol.merah { background:var(--merah); }
.tombol.kecil { padding:8px 14px; font-size:14px; min-height:38px; }

.pilihan-besar {
  display:block; width:100%; text-align:left; background:#fff; border:2px solid var(--garis);
  border-radius:12px; padding:14px 16px; margin-bottom:10px; font-size:16px;
  cursor:pointer; font-family:inherit; color:var(--teks); line-height:1.45;
}
.pilihan-besar:hover { border-color:var(--biru); background:var(--biru-muda); }
.pilihan-besar.dipilih { border-color:var(--biru); background:var(--biru-muda); font-weight:600; }
.pilihan-besar.benar { border-color:var(--hijau); background:var(--hijau-muda); }
.pilihan-besar.salah { border-color:var(--merah); background:var(--merah-muda); }
.pilihan-besar .huruf {
  display:inline-flex; width:30px; height:30px; margin-right:10px; flex:none;
  align-items:center; justify-content:center; border-radius:50%;
  background:#eef1f4; font-weight:700; font-size:14px;
}
.pilihan-besar.dipilih .huruf { background:var(--biru); color:#fff; }
.pilihan-besar.benar .huruf { background:var(--hijau); color:#fff; }
.pilihan-besar.salah .huruf { background:var(--merah); color:#fff; }

.baris { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.baris.kanan { justify-content:flex-end; }
.rentang { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; }
.rentang button {
  padding:11px; border:2px solid var(--garis); background:#fff; border-radius:10px;
  font-size:15px; font-family:inherit; cursor:pointer; color:var(--teks);
}
.rentang button.aktif { border-color:var(--biru); background:var(--biru-muda); font-weight:700; }

.pesan { padding:11px 14px; border-radius:10px; font-size:14px; margin:10px 0; }
.pesan.galat { background:var(--merah-muda); color:var(--merah); }
.pesan.oke { background:var(--hijau-muda); color:var(--hijau); }
.pesan.info { background:var(--kuning-muda); color:var(--kuning); }

.angka-besar { font-size:38px; font-weight:800; line-height:1.1; }
.grid-statistik { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.statistik { background:#fff; border:1px solid var(--garis); border-radius:12px; padding:14px; }
.statistik .label { font-size:13px; color:var(--redup); }
.statistik .nilai { font-size:26px; font-weight:700; }

table.data { width:100%; border-collapse:collapse; font-size:14px; }
table.data th, table.data td { border-bottom:1px solid var(--garis); padding:8px 6px; text-align:left; }
table.data th { color:var(--redup); font-weight:600; font-size:13px; }
.gulir { overflow-x:auto; }

.bar-luar { background:#eef1f4; border-radius:6px; height:10px; overflow:hidden; min-width:70px; }
.bar-dalam { height:100%; border-radius:6px; background:var(--hijau); }
.bar-dalam.sedang { background:var(--kuning); }
.bar-dalam.buruk { background:var(--merah); }

.lencana { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:700; }
.lencana.hijau { background:var(--hijau-muda); color:var(--hijau); }
.lencana.kuning { background:var(--kuning-muda); color:var(--kuning); }
.lencana.merah { background:var(--merah-muda); color:var(--merah); }
.lencana.abu { background:#eef1f4; color:var(--redup); }

/* --- khusus halaman kuis --- */
.kemajuan { height:6px; background:#eef1f4; }
.kemajuan div { height:100%; background:var(--hijau); transition:width .2s; }
.nomor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); gap:7px; }
.nomor-grid button {
  aspect-ratio:1; border:1px solid var(--garis); background:#fff; border-radius:9px;
  font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; color:var(--teks);
}
.nomor-grid button.terisi { background:var(--biru); border-color:var(--biru); color:#fff; }
.nomor-grid button.ragu { background:var(--kuning-muda); border-color:var(--kuning); color:var(--kuning); }
.nomor-grid button.kini { outline:3px solid var(--teks); }
.jam { font-variant-numeric:tabular-nums; font-weight:700; }
.jam.mepet { color:var(--merah); }

.sembunyi { display:none !important; }
.mini { font-size:13px; color:var(--redup); }
.tengah { text-align:center; }

@media (max-width:640px) {
  .wadah { padding:12px; }
  .kartu { padding:14px; border-radius:12px; }
  .angka-besar { font-size:32px; }
}
@media print { .bilah, .tombol, .no-cetak { display:none !important; } body { background:#fff; } }