/*
 * BACALAH — "Gaya Ceria"
 * Disalin dari blok <style> di _referensi-desain/Asesmen Membaca.dc.html.
 * Warna, radius, dan bayangan memakai variabel di :root.
 */

:root {
  /* Warna dasar */
  --latar: #f5f6fc;
  --putih: #fff;
  --teks: #1e2140;
  --teks-2: #4b5072;
  --aksen-muda: #8193ff;
  --aksen: #5d6ff0;
  --aksen-chip: #4257e0;
  --aksen-tua: #2b3cb8;
  --aksen-hover: #1e2a8a;
  --lembut: #eef0fd;
  --garis: #dde1f6;
  --garis-hover: #aab3ee;
  --garis-tipis: #e6e9f7;
  --garis-tabel: #eceefa;
  --garis-baris: #f0f1fa;
  --latar-hover: #fafbff;
  --oranye: #d94c1c;
  --oranye-tua: #c2410c;
  --oranye-pilih: #c94512;
  --oranye-gelap: #b23a0a;
  --hijau: #178a50;
  --hijau-tua: #11703f;
  --kuning: #ffc94a;
  --merah: #a8231c;
  --merah-titik: #d6332b;
  --merah-garis: #f3c2bf;
  --cincin-isi: #6a7cf6;
  --cincin-sisa: rgba(255, 255, 255, .28);
  --putih-transparan: rgba(255, 255, 255, .22);
  --putih-30: rgba(255, 255, 255, .3);

  /* Warna tag dan pesan */
  --tag-good-latar: #e6f6ee;
  --tag-good-teks: #146c3f;
  --tag-warn-latar: #fdecea;
  --tag-warn-teks: #a8231c;
  --tag-sun-latar: #fff1cc;
  --tag-sun-teks: #6b4800;
  --tag-muted-latar: #eef0f6;
  --tag-muted-teks: #4b5072;
  --note-latar: #fff6dc;
  --ok-latar: #e6f6ee;
  --ok-teks: #0f4f2d;

  /* Warna level (urutan Pra: Pemula → Pemahaman: Mahir) */
  --level-1: #d94c1c;
  --level-2: #f08a3c;
  --level-3: #f2b52e;
  --level-4: #9fb0ff;
  --level-5: #7d8ff7;
  --level-6: #4257e0;
  --level-7: #178a50;

  /* Warna kartu: judul (.jdl), tag penuh (.tag-warna), tombol lembut (.btn-warna).
     Per warna: utama, latar tombol lembut, teks tombol lembut. */
  --biru-utama: #3a4bd6;    --biru-lembut: #e6e9fd;    --biru-lembut-teks: #3a4bd6;
  --oranye-utama: #c2410c;  --oranye-lembut: #fde9dd;  --oranye-lembut-teks: #a8360a;
  --ungu-utama: #5b45c9;    --ungu-lembut: #ece8fc;    --ungu-lembut-teks: #4f3bb8;
  --hijau-utama: #14753f;   --hijau-lembut: #e0f3e8;   --hijau-lembut-teks: #11663a;
  --pink-utama: #b8236f;    --pink-lembut: #fbe4ef;    --pink-lembut-teks: #9e1d5f;

  /* Kartu angka pastel (.kps-*): latar dan teks */
  --kps-biru: #e8ebfd;   --kps-biru-teks: #26318f;
  --kps-mint: #e2f4ea;   --kps-mint-teks: #14593a;
  --kps-peach: #fde7dc;  --kps-peach-teks: #8a3412;
  --kps-krem: #fdf1dc;   --kps-krem-teks: #6b4300;

  /* Kartu gradien (.kpi-*) */
  --kpi-biru-1: #7183f7;   --kpi-biru-2: #4f60e0;
  --kpi-peach-1: #e2602a;  --kpi-peach-2: #c2410c;
  --kpi-bulatan: rgba(255, 201, 74, .9);

  /* Radius */
  --r-hero: 28px;
  --r-kartu: 24px;
  --r-soft: 20px;
  --r-opsi: 20px;
  --r-pesan: 18px;
  --r-ikon: 16px;
  --r-isian: 14px;
  --r-huruf: 12px;
  --r-kapsul: 999px;

  /* Bayangan */
  --bayangan-kartu: 0 8px 24px rgba(70, 85, 180, .08);
  --bayangan-baris: 0 4px 14px rgba(70, 85, 180, .06);
  --bayangan-opsi: 0 6px 18px rgba(70, 85, 180, .08);
  --bayangan-ikon: 0 6px 18px rgba(70, 85, 180, .1);
  --bayangan-nav: 0 4px 12px rgba(70, 85, 180, .12);
  --bayangan-hero: 0 16px 36px rgba(93, 111, 240, .28);
  --bayangan-primer: 0 8px 18px rgba(194, 65, 12, .28);
  --bayangan-primer-hover: 0 10px 24px rgba(194, 65, 12, .4);
  --bayangan-opsi-pilih: 0 10px 22px rgba(194, 65, 12, .3);
  --bayangan-hijau: 0 8px 18px rgba(17, 112, 63, .28);
  --bayangan-kpi-biru: 0 14px 30px rgba(93, 111, 240, .25);
  --bayangan-kpi-peach: 0 14px 30px rgba(194, 65, 12, .25);
  --cincin-fokus: 0 0 0 3px rgba(93, 111, 240, .18);

  --huruf: 'Lexend', system-ui, sans-serif;
}

/* ---------- Dasar ---------- */
html, body { margin: 0; background: var(--latar); color: var(--teks); font-family: var(--huruf); -webkit-font-smoothing: antialiased }
* { box-sizing: border-box }
[hidden] { display: none !important }
a { color: var(--aksen-tua); text-decoration: none }
a:hover { color: var(--aksen-hover); text-decoration: underline }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; text-wrap: pretty }
h1 { font-size: clamp(26px, 6vw, 34px); font-weight: 800 }
h2 { font-size: clamp(22px, 5vw, 28px) }
h3 { font-size: 18px }
h4 { font-size: 16px }
p { margin: 0; line-height: 1.6; text-wrap: pretty }
button, input, select, textarea { font-family: inherit; color: inherit }

/* ---------- Tata letak ---------- */
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 20px clamp(16px, 4vw, 32px) }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px }
.halaman { min-height: 100vh; display: flex; flex-direction: column }
.utama { flex: 1; padding-bottom: 40px }

/* ---------- Kartu ---------- */
.card { background: var(--putih); border-radius: var(--r-kartu); padding: 20px; box-shadow: var(--bayangan-kartu); display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.soft { background: var(--lembut); border-radius: var(--r-soft); padding: 14px 16px; min-width: 0 }
.hero { background: linear-gradient(160deg, var(--aksen-muda) 0%, var(--aksen) 100%); color: var(--putih); border-radius: var(--r-hero); padding: 22px; box-shadow: var(--bayangan-hero) }
.hero .kicker, .hero h1, .hero h2, .hero p { color: var(--putih) }

/*
 * Warna kartu (desain v0.5, diperbarui 2 Okt). Kelas .warna-{biru|oranye|ungu|hijau|pink}
 * pada kartu menentukan warna judul .jdl, tag .tag-warna, dan tombol .btn-warna di dalamnya.
 */
.warna-biru { --w: var(--biru-utama); --w-lembut: var(--biru-lembut); --w-lembut-teks: var(--biru-lembut-teks) }
.warna-oranye { --w: var(--oranye-utama); --w-lembut: var(--oranye-lembut); --w-lembut-teks: var(--oranye-lembut-teks) }
.warna-ungu { --w: var(--ungu-utama); --w-lembut: var(--ungu-lembut); --w-lembut-teks: var(--ungu-lembut-teks) }
.warna-hijau { --w: var(--hijau-utama); --w-lembut: var(--hijau-lembut); --w-lembut-teks: var(--hijau-lembut-teks) }
.warna-pink { --w: var(--pink-utama); --w-lembut: var(--pink-lembut); --w-lembut-teks: var(--pink-lembut-teks) }
.jdl { font-weight: 800; font-size: 19px; color: var(--w, var(--teks)) }
.kicker.kicker-warna { font-size: 13px; color: var(--w, var(--teks-2)) }

/* Kartu angka pastel */
.kps { border-radius: var(--r-kartu); padding: 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.kps-biru { background: var(--kps-biru); color: var(--kps-biru-teks) }
.kps-mint { background: var(--kps-mint); color: var(--kps-mint-teks) }
.kps-peach { background: var(--kps-peach); color: var(--kps-peach-teks) }
.kps-krem { background: var(--kps-krem); color: var(--kps-krem-teks) }

/* Kartu gradien dengan bulatan kuning di pojok */
.kpi { border-radius: var(--r-kartu); padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; color: var(--putih); box-shadow: var(--bayangan-kpi-biru); position: relative; overflow: hidden }
.kpi::after { content: ''; position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: var(--r-kapsul); background: var(--kpi-bulatan) }
.kpi > * { position: relative; z-index: 1 }
.kpi .kicker, .kpi h3, .kpi p { color: var(--putih) }
.kpi h3 { font-size: 20px }
.kpi-biru { background: linear-gradient(160deg, var(--kpi-biru-1), var(--kpi-biru-2)) }
.kpi-peach { background: linear-gradient(160deg, var(--kpi-peach-1), var(--kpi-peach-2)); box-shadow: var(--bayangan-kpi-peach) }

/* ---------- Teks ---------- */
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teks-2) }
.muted { color: var(--teks-2) }
.small { font-size: 13px }
.num { font-size: 28px; font-weight: 800; line-height: 1.05 }
.merah { color: var(--merah) }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .02em }

/* ---------- Tombol ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--r-kapsul); border: none; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform .1s, box-shadow .15s; text-decoration: none }
.btn:hover { text-decoration: none }
.btn:active { transform: scale(.98) }
.btn:disabled, .btn-off { opacity: .45; cursor: not-allowed; pointer-events: none }
.btn-primary { background: linear-gradient(135deg, var(--oranye), var(--oranye-tua)); color: var(--putih); box-shadow: var(--bayangan-primer) }
.btn-primary:hover { box-shadow: var(--bayangan-primer-hover); color: var(--putih) }
.btn-secondary { background: var(--putih); color: var(--teks); border: 1.5px solid var(--garis) }
.btn-secondary:hover { border-color: var(--garis-hover); background: var(--latar-hover); color: var(--teks) }
.btn-ghost { background: transparent; color: var(--aksen-tua); padding: 0 8px; min-height: 40px }
.btn-ghost:hover { background: var(--lembut) }
.btn-sun { background: var(--kuning); color: var(--teks) }
.btn-sun:hover { color: var(--teks) }
.btn-good { background: linear-gradient(135deg, var(--hijau), var(--hijau-tua)); color: var(--putih); box-shadow: var(--bayangan-hijau) }
.btn-good:hover { color: var(--putih) }
.btn-warna { background: var(--w-lembut, var(--lembut)); color: var(--w-lembut-teks, var(--aksen-tua)) }
.btn-warna:hover { filter: brightness(.96); color: var(--w-lembut-teks, var(--aksen-tua)) }
.btn.small { font-size: 13px }
.wide { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; height: auto; padding: 12px 18px }
.iconbtn { width: 48px; height: 48px; flex: none; border-radius: var(--r-ikon); border: none; background: var(--putih); box-shadow: var(--bayangan-ikon); font-size: 20px; display: grid; place-items: center; cursor: pointer }

/* ---------- Navigasi ---------- */
.navlink { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-kapsul); border: none; background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--teks) }
.navlink:hover { background: var(--lembut); color: var(--teks); text-decoration: none }
.navlink-on, .navlink-on:hover { background: var(--putih); color: var(--aksen-tua); box-shadow: var(--bayangan-nav) }

.header { position: sticky; top: 0; z-index: 5; background: rgba(245, 246, 252, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--garis-tipis) }
.header-isi { display: flex; align-items: center; gap: 8px 14px; padding-top: 10px; padding-bottom: 10px }
.merek { font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: var(--teks); white-space: nowrap }
.merek:hover { color: var(--teks); text-decoration: none }
.nav { display: flex; gap: 2px; flex-wrap: wrap; margin-right: auto }
.akun { display: flex; align-items: center; gap: 6px }
.akun-nama { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.akun form { margin: 0 }
.tautan-peran, .tautan-peran:hover { text-decoration: none }
.tautan-peran:hover .tag { filter: brightness(.95) }

/* Menu HP: <details> tanpa JavaScript */
.menu-hp { display: none; margin-left: auto; position: relative }
.menu-hp > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-kapsul); background: var(--putih); border: 1.5px solid var(--garis); font-size: 14px; font-weight: 600; cursor: pointer }
.menu-hp > summary::-webkit-details-marker { display: none }
.menu-hp > summary::after { content: '▾'; font-size: 12px }
.menu-hp[open] > summary::after { content: '▴' }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(280px, calc(100vw - 32px)); background: var(--putih); border-radius: var(--r-pesan); box-shadow: var(--bayangan-kartu); padding: 10px; display: flex; flex-direction: column; gap: 4px }
.menu-panel .navlink { width: 100%; min-height: 48px }
.menu-panel .akun { flex-wrap: wrap; padding: 10px 8px 4px; border-top: 1px solid var(--garis-baris); margin-top: 4px }
.menu-panel .akun-nama { max-width: 100% }

/* Layar sedang: tautan dipadatkan dan nama akun disembunyikan (tetap ada di tooltip dan menu HP),
   supaya merek "Asesmen Membaca" dan menu (termasuk Bantuan) muat dalam satu baris. Di bawah 960px memakai
   tombol Menu. Batas 1080px = lebar maksimum .wrap; di atasnya semua menu peran muat tanpa dipadatkan. */
@media (max-width: 1079px) {
  .nav .navlink { padding: 0 10px }
  .akun.nav-desktop .akun-nama { display: none }
}
@media (max-width: 959px) {
  .nav-desktop { display: none !important }
  .menu-hp { display: block }
}

/* Menu panjang (admin, 7 tautan termasuk FAQ) selalu dipadatkan, karena bersama merek "Asesmen Membaca" versi
   lebarnya tidak muat di .wrap (maks. 1080px); di bawah 1080px beralih ke tombol Menu agar tetap satu baris. */
.menu-panjang .nav { flex-wrap: nowrap }
.menu-panjang .navlink { white-space: nowrap }
.menu-panjang .nav .navlink { padding: 0 10px }
.menu-panjang .akun.nav-desktop .akun-nama { display: none }
@media (max-width: 1079px) {
  .menu-panjang .nav-desktop { display: none !important }
  .menu-panjang .menu-hp { display: block }
}

/* Tamu (belum masuk): Bantuan dan Masuk. Di HP keduanya tidak muat sebaris dengan merek, jadi Bantuan
   disembunyikan bila Masuk juga tampil; bila tetap tidak muat (layar sangat sempit), turun ke baris kedua. */
.header-tamu { flex-wrap: wrap }
.tamu-aksi { display: flex; align-items: center; gap: 6px; margin-left: auto }
@media (max-width: 479px) {
  .tamu-aksi .navlink { padding: 0 10px }
  .tamu-aksi-dua .navlink { display: none }
}

.pita-lokal { background: var(--tag-sun-latar); color: var(--tag-sun-teks); font-size: 12px; font-weight: 600; text-align: center; padding: 4px 16px }

/* ---------- Mode simulasi (spesifikasi 7.8, F-77): latar berbeda, pita lengket, tanda air; selalu dengan teks ---------- */
:root { --latar-simulasi: #fff6e0; --pita-simulasi: #3b2a05; --pita-simulasi-teks: #fff3cf }
body.mode-simulasi { background: var(--latar-simulasi) }
.pita-simulasi { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--pita-simulasi); color: var(--pita-simulasi-teks); font-size: 14px }
.pita-simulasi strong { letter-spacing: .06em }
.pita-simulasi form { margin: 0 }
.pita-simulasi-keluar { min-height: 36px; padding: 0 14px; border-radius: var(--r-kapsul); border: 1.5px solid var(--pita-simulasi-teks); background: transparent; color: var(--pita-simulasi-teks); font: inherit; font-weight: 700; cursor: pointer }
.pita-simulasi-keluar:hover { background: var(--pita-simulasi-teks); color: var(--pita-simulasi) }
/* Hanya pita yang menempel di atas; tinggi pita berubah di HP (dua baris), jadi header tidak ikut menempel. */
.mode-simulasi .header { position: static }
.tanda-air { position: relative; overflow: hidden }
.tanda-air::after { content: "SIMULASI"; position: absolute; right: -6px; bottom: 6px; transform: rotate(-12deg); font-weight: 800; font-size: 40px; letter-spacing: .1em; color: currentColor; opacity: .08; pointer-events: none }
.kotak-skenario { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-isian); border: 2px dashed var(--kuning); background: var(--putih) }
.skenario-teks { font-size: 18px; font-weight: 600 }
.kotak-deskripsi-gambar { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r-kartu); border: 2px dashed var(--garis-hover); background: var(--putih) }
.kotak-deskripsi-gambar p { margin: 0; font-size: 17px; line-height: 1.5 }

/* ---------- Kolom isian ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.field label { font-size: 13px; font-weight: 600 }
.input { width: 100%; min-height: 48px; border-radius: var(--r-isian); border: 1.5px solid var(--garis); background: var(--putih); padding: 10px 14px; font-size: 15px; outline: none }
.input:focus { border-color: var(--aksen); box-shadow: var(--cincin-fokus) }
.input-galat { border-color: var(--merah-titik) }
textarea.input { line-height: 1.6; resize: vertical }
.galat { font-size: 13px; font-weight: 500; color: var(--merah) }

/* ---------- Tag ---------- */
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-kapsul); background: var(--lembut); color: var(--aksen-tua); font-size: 12px; font-weight: 700; white-space: nowrap }
.tag-good { background: var(--tag-good-latar); color: var(--tag-good-teks) }
.tag-warn { background: var(--tag-warn-latar); color: var(--tag-warn-teks) }
.tag-sun { background: var(--tag-sun-latar); color: var(--tag-sun-teks) }
.tag-muted { background: var(--tag-muted-latar); color: var(--tag-muted-teks) }
.tag-warna { background: var(--w, var(--aksen-tua)); color: var(--putih) }

/* ---------- Pesan ---------- */
.warn { display: flex; gap: 10px; align-items: flex-start; background: var(--putih); border: 1.5px solid var(--merah-garis); border-radius: var(--r-pesan); padding: 12px 14px; font-size: 14px; line-height: 1.5 }
.warn::before { content: ''; width: 10px; height: 10px; border-radius: var(--r-kapsul); background: var(--merah-titik); flex: none; margin-top: 6px }
.note { background: var(--note-latar); border-radius: var(--r-pesan); padding: 12px 14px; font-size: 14px; line-height: 1.55 }
.ok { background: var(--ok-latar); border-radius: var(--r-pesan); padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--ok-teks) }

/* ---------- Grafik batang ---------- */
.track { flex: 1; height: 8px; border-radius: var(--r-kapsul); background: var(--garis-tipis); overflow: hidden; min-width: 40px; display: block }
.fill { display: block; height: 100%; border-radius: var(--r-kapsul) }

/* ---------- Tabel dan daftar ---------- */
.tablewrap { background: var(--putih); border-radius: var(--r-kartu); box-shadow: var(--bayangan-kartu); overflow-x: auto }
.table { width: 100%; border-collapse: collapse; font-size: 14px }
.table th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teks-2); padding: 14px 16px; border-bottom: 1.5px solid var(--garis-tabel); white-space: nowrap }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--garis-baris); vertical-align: top }
.table tr:last-child td { border-bottom: none }
.listrow { display: flex; align-items: center; gap: 12px; background: var(--putih); border-radius: var(--r-pesan); padding: 12px 14px; box-shadow: var(--bayangan-baris); min-width: 0 }

/* ---------- Chip dan opsi jawaban ---------- */
.chip { min-height: 40px; padding: 0 16px; border-radius: var(--r-kapsul); border: 1.5px solid var(--garis); background: var(--putih); font-size: 14px; font-weight: 600; cursor: pointer; color: var(--teks) }
.chip-on { background: var(--aksen-chip); color: var(--putih); border-color: var(--aksen-chip) }
.opsi { width: 100%; min-height: 60px; border-radius: var(--r-opsi); border: 2px solid transparent; background: var(--putih); box-shadow: var(--bayangan-opsi); display: flex; align-items: center; gap: 14px; padding: 10px 16px; font-size: 18px; font-weight: 600; text-align: left; cursor: pointer; color: var(--teks); line-height: 1.35 }
.opsi-on { border-color: var(--oranye-tua); background: var(--oranye-pilih); color: var(--putih); box-shadow: var(--bayangan-opsi-pilih) }
.huruf { width: 36px; height: 36px; flex: none; border-radius: var(--r-huruf); background: var(--lembut); color: var(--aksen-tua); display: grid; place-items: center; font-weight: 800; font-size: 16px }
.opsi-on .huruf { background: var(--putih); color: var(--oranye-gelap) }
.ring { border-radius: var(--r-kapsul); display: grid; place-items: center }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-kapsul); margin-right: 6px; vertical-align: middle }

/* ---------- Beranda guru ---------- */
.hero-ringkas { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 18px }
.cincin { width: 84px; height: 84px; flex: none; border-radius: var(--r-kapsul); display: grid; place-items: center; background: conic-gradient(var(--kuning) 0 var(--persen, 0%), var(--cincin-sisa) var(--persen, 0%) 100%) }
.cincin span { width: 66px; height: 66px; border-radius: var(--r-kapsul); background: var(--cincin-isi); display: grid; place-items: center; font-weight: 800; font-size: 17px }
.ringkas-teks { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px }
.ringkas-angka { font-weight: 800; font-size: 24px; line-height: 1.15 }

/* ---------- Pilih murid ---------- */
a.listrow { color: var(--teks); min-height: 56px; transition: box-shadow .15s }
a.listrow:hover { color: var(--teks); text-decoration: none; box-shadow: var(--bayangan-kartu) }
.listrow-nama { font-weight: 600; flex: 1; min-width: 0 }
.listrow-kanan { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right }

/* ---------- Layar tes ---------- */
.tes { width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px }
.tes-lebar { max-width: 620px }
.tes-penuh { min-height: calc(100vh - 80px) }
.tes-atas { display: flex; align-items: center; gap: 12px }
.tes-atas .iconbtn { color: var(--teks); text-decoration: none }
.tes-murid { display: flex; flex-direction: column; min-width: 0 }
.tes-nama { font-weight: 700; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tes-nomor { margin-left: auto; font-size: 15px; padding: 8px 14px }
.segmen { display: flex; gap: 6px }
.segmen span { flex: 1; height: 6px; border-radius: var(--r-kapsul); background: var(--garis) }
.segmen span.terisi { background: var(--aksen) }
.kotak-butir { flex: 1; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px }
.kotak-butir .petunjuk { font-weight: 600; font-size: 15px; text-align: center }
.butir { align-self: stretch; background: var(--putih); color: var(--teks); border-radius: var(--r-hero); padding: 22px 12px; font-weight: 800; line-height: 1; text-align: center; white-space: nowrap; overflow: hidden }
.tes-bawah { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 0 16px; background: var(--latar) }
.tombol-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.tombol-besar { min-height: 76px; font-size: 20px; font-weight: 800 }
.kalimat-besar { font-weight: 600; font-size: clamp(22px, 6vw, 30px); line-height: 1.45 }

/* ---------- Layar soal pemahaman ---------- */
.tes-soal { max-width: 560px; gap: 18px }
.hero-soal { display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 22px }
.iconbtn-hero, .iconbtn-hero:hover { background: var(--putih-transparan); color: var(--putih); box-shadow: none; text-decoration: none }
.pil-soal { background: var(--putih); color: var(--teks); border-radius: var(--r-kapsul); padding: 8px 16px; font-weight: 700; font-size: 15px; white-space: nowrap }
.kemajuan { display: block; height: 8px; border-radius: var(--r-kapsul); background: var(--putih-30) }
.kemajuan span { display: block; height: 8px; border-radius: var(--r-kapsul); background: var(--kuning) }
.kartu-wacana { padding: 20px 22px; gap: 8px }
.judul-wacana { font-weight: 700; font-size: 16px }
.teks-wacana { line-height: 1.75; font-weight: 500; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.teks-wacana p { margin: 0; white-space: pre-line }
/* Tabel dalam wacana (baris berawalan "|"): huruf tetap besar, garis jelas, digeser mendatar bila tidak muat. */
.tabel-wacana-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1.5px solid var(--garis); border-radius: var(--r-isian); background: var(--putih) }
.tabel-wacana-wrap:focus-visible { outline: 3px solid var(--aksen-muda); outline-offset: 2px }
.tabel-wacana { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.45 }
.tabel-wacana th, .tabel-wacana td { padding: 10px 12px; border: 1px solid var(--garis); text-align: left; vertical-align: top; min-width: 7ch }
.tabel-wacana th { background: var(--lembut); font-weight: 700 }
.tabel-wacana tr > :first-child { border-left: none }
.tabel-wacana tr > :last-child { border-right: none }
.tabel-wacana thead th { border-top: none }
.tabel-wacana tbody tr:last-child td { border-bottom: none }
.teks-wacana-1-2 { font-size: 22px }
.teks-wacana-3-4 { font-size: 19px }
.teks-wacana-5-6 { font-size: 18px }
.gambar-soal { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--r-kartu); background: var(--putih) }
.gambar-kosong { height: 180px; border-radius: var(--r-kartu); background: var(--note-latar); border: 2px dashed rgba(30, 33, 64, .2); display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--teks-2); text-align: center; padding: 16px }
.soal-teks { font-size: 22px; line-height: 1.35 }
.tombol-soal { min-height: 60px; font-size: 17px }

/* ---------- Hasil, panduan, rekomendasi ---------- */
.kartu-tautan { color: var(--teks); transition: box-shadow .15s }
.kartu-tautan:hover { color: var(--teks); text-decoration: none; box-shadow: var(--bayangan-nav) }
.listrow-tumpuk { flex-direction: column; align-items: flex-start; gap: 4px }
a.listrow-tumpuk { min-height: 0 }
.daftar-opsi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px }
.daftar-opsi li { display: grid; grid-template-columns: 32px 1fr; gap: 12px }
.huruf-kecil { width: 32px; height: 32px; font-size: 14px }
.table tr.baris-ditandai td { background: var(--lembut) }
.hanya-cetak { display: none }

/* ---------- Dashboard ---------- */
.baris-batang { display: flex; align-items: center; gap: 10px; font-size: 13px }
.label-batang { width: 14ch; flex: none }
.angka-batang { width: 3ch; text-align: right; font-weight: 600 }

/* ---------- Data murid ---------- */
.baris-murid { flex-direction: column; align-items: stretch; gap: 10px }
.baris-murid > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer }
.baris-murid > summary::-webkit-details-marker { display: none }
.baris-murid[open] > summary .btn { background: var(--lembut) }
.baris-murid-info { display: flex; flex-direction: column; min-width: 0; flex: 1 }
.form-ubah { gap: 10px; border-top: 1px solid var(--garis-tabel); padding-top: 12px }
.grid-ubah { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px }
.kartu-konfirmasi { border: 2px solid var(--kuning) }
.kartu-laporan { border: 2px solid var(--level-4) }

/* ---------- Editor bank soal ---------- */
.fieldset-polos { border: 0; margin: 0; padding: 0; min-width: 0 }
.fieldset-polos:disabled { opacity: .75 }
.baris-opsi { display: flex; align-items: center; gap: 10px }
.baris-opsi .input { flex: 1; min-width: 0 }
.pilih-kunci { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer }
.pilih-kunci input { width: 20px; height: 20px; accent-color: var(--hijau) }
.grid-gambar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px }
.pratinjau-gambar { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--r-ikon); background: var(--putih) }
.gambar-kecil { width: 72px; height: 54px; object-fit: cover; border-radius: 10px; background: var(--putih); border: 1px solid var(--garis); flex: none }
.gambar-kecil.lama { opacity: .6 }
.daftar-validasi { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px }
.kartu-wacana-editor { scroll-margin-top: 80px }

/* ---------- Pengawas ---------- */
.tiga-angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.angka-sedang { font-size: 22px; font-weight: 800 }
.batang-tumpuk { display: flex; height: 10px; border-radius: var(--r-kapsul); overflow: hidden; gap: 2px; background: var(--garis-tipis) }
/* Perkembangan antarsemester (F-47–F-49a) */
.baris-semester { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--garis-tabel) }
.baris-semester:first-child { border-top: none; padding-top: 4px }
.semester-isi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px 18px; align-items: start }
@media (max-width: 640px) { .semester-isi { grid-template-columns: minmax(0, 1fr) } }
.naik-turun { white-space: nowrap; font-weight: 600 }
.naik-turun.naik { color: var(--hijau) }
.naik-turun.turun { color: var(--oranye) }
.chip-kecil { min-height: 36px; padding: 0 12px; font-size: 13px; display: inline-flex; align-items: center; text-decoration: none }
.chip-kecil:hover { text-decoration: none }
.kartu-binaan { scroll-margin-top: 80px }

/* ---------- Layar masuk ---------- */
.layar-masuk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; align-items: start }
.ikon-g { width: 28px; height: 28px; flex: none; border-radius: var(--r-kapsul); display: grid; place-items: center; background: var(--lembut); color: var(--aksen-tua); font-weight: 800; font-size: 14px }
.kolom-sempit { max-width: 520px }

/* ---------- Bantuan (FAQ) ---------- */
.faq-kelompok { gap: 8px }
.faq-kelompok > h3 { margin-top: 8px }
.faq-butir { display: block; padding: 0; scroll-margin-top: 80px }
.faq-butir > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 14px; border-radius: var(--r-pesan); font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer }
.faq-butir > summary::-webkit-details-marker { display: none }
.faq-butir > summary::after { content: '+'; margin-left: auto; flex: none; font-size: 20px; font-weight: 500; line-height: 1; color: var(--aksen-tua) }
.faq-butir[open] > summary::after { content: '–' }
.faq-butir > summary:hover { background: var(--latar-hover) }
.faq-butir > summary:focus-visible { outline: none; box-shadow: var(--cincin-fokus) }
.faq-jawab { padding: 0 14px 14px; font-size: 15px; line-height: 1.6; color: var(--teks-2); white-space: pre-line; overflow-wrap: anywhere }

@media print {
  @page { size: A4; margin: 15mm }
  .noprint { display: none !important }
  html, body { background: var(--putih) }
  .card, .tablewrap, .listrow { box-shadow: none; border: 1px solid #ddd; break-inside: avoid }
  .wrap { padding: 0; max-width: none }
  .lembar-hasil { max-width: none !important; gap: 12px !important }
  /* Hero dicetak putih dengan teks gelap: hemat tinta dan terbaca di printer hitam-putih. */
  .hero { background: var(--putih); color: var(--teks); border: 2px solid var(--teks); box-shadow: none }
  .hero .kicker, .hero h1, .hero h2, .hero p { color: var(--teks) }
  .soft { border: 1px solid #ddd }
  .hanya-cetak { display: block }
  .kepala-cetak { border-bottom: 2px solid var(--teks); padding-bottom: 10px; margin-bottom: 4px; font-size: 13px }
  .kepala-cetak table { border-collapse: collapse; margin-top: 6px }
  .kepala-cetak td { padding: 2px 12px 2px 0; vertical-align: top }
  .kepala-cetak td:first-child { color: var(--teks-2); white-space: nowrap }
}