/* murid.css — design system Duolingo-like. Jangan pernah di-load bersamaan dengan admin.css */

body.tema-murid {
    background: var(--murid-bg-soft);
    color: var(--murid-text);
    font-family: var(--murid-font);
    font-size: 16px;
    padding-bottom: 72px; /* ruang untuk bottom nav */
}

.murid-container {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-3);
}

/* Tombol besar full-width ala Duolingo, efek "tekan" 3D -- sengaja disamakan PERSIS (tinggi,
   font, mekanisme shadow-tekan) dengan .btn-soal (tombol "Periksa" di layar soal) supaya SEMUA
   tombol besar sisi murid terasa satu keluarga, bukan cuma warnanya doang. Bedanya cuma lebar:
   .btn-murid full-width (dipakai berdiri sendiri di form/kartu), .btn-soal lebar mengikuti isi
   (dipakai berdampingan dgn tombol lain di footer soal). */
.btn-murid {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--murid-btn-height);
    padding: 0 24px;
    font-weight: 900;
    font-size: var(--murid-text-base);
    letter-spacing: .06em;
    font-family: var(--murid-font);
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    background: var(--murid-primary);
    border-radius: var(--murid-border-radius);
    border: 0;
    box-shadow: 0 4px 0 var(--murid-primary-dark);
    transition: transform 100ms ease;
    cursor: pointer;
}
/* Wrapper form untuk tombol logout (POST+CSRF, bukan <a href> GET) --
   tidak boleh menambah margin/border sendiri, murni pembungkus layout. */
.murid-logout-form { margin: 0; border: none; padding: 0; }
.btn-murid:active {
    transform: translateY(4px);
    box-shadow: none;
}
.btn-murid.btn-secondary {
    background: var(--murid-secondary);
    box-shadow: 0 4px 0 var(--murid-secondary-dark);
}
.btn-murid:disabled {
    opacity: .5;
    pointer-events: none;
}

/* Progress bar bulat/pill */
.progress-murid {
    width: 100%;
    height: 16px;
    background: var(--murid-border);
    border-radius: 999px;
    overflow: hidden;
}
.progress-murid__fill {
    height: 100%;
    background: var(--murid-primary);
    border-radius: 999px;
    transition: width 400ms ease;
}

/* Maskot robot (Core\View::maskot()), pose netral/senang/semangat/kecewa/pagi/malam/cemas/rayakan */
.maskot {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--space-3);
}
.maskot-svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Badge liga = ikon medali warna-warni (View::ikonMedali(): emas/perak/perunggu, assets/icons/dq) --
   warnanya sudah bawaan gambar, jadi tidak lagi dibungkus lingkaran warna polos per tier. Class tier
   (.bronze/.silver/.gold) tetap dipasang di markup sebagai penanda semantik. */
.badge-liga {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
}
.badge-liga svg,
.badge-liga .ikon-emoji { display: block; width: 100%; height: 100%; }

/* Banner "Mode pratinjau" -- dipakai saat admin/guru mencoba kuis dari Quiz Builder
   (layouts/murid.php, lihat QuizController::preview()). Menempel di atas layar. */
.murid-preview-bar {
    position: sticky; top: 0; z-index: 60;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 9px 16px; background: var(--murid-warning); color: #3C3C3C;
    font-size: var(--murid-text-xs);
}
.murid-preview-bar__tutup { color: #3C3C3C; font-weight: 800; text-decoration: underline; white-space: nowrap; }

/* Status bar persisten (streak/poin/XP) -- tampil di ATAS SEMUA halaman murid biasa (dashboard,
   mata pelajaran, bab, leaderboard, progres, profil, exam-quest), ala bilah atas Duolingo yang
   selalu menampilkan progres murid ke mana pun dia pindah tab. Disembunyikan di mode fokus
   (pengerjaan soal, .soal-topbar sudah punya bilahnya sendiri) & mode pratinjau (guru/admin
   mencoba kuis, bukan murid sungguhan) -- sama seperti bottom-nav, lihat layouts/murid.php.
   Datanya SELALU dihitung ulang di layout (bukan cuma dilempar controller per halaman) supaya
   satu komponen ini otomatis muncul di semua halaman murid tanpa perlu ubah tiap controller. */
.murid-statusbar {
    position: sticky; top: 0; z-index: 55;
    background: var(--murid-bg);
    border-bottom: 1px solid var(--murid-border);
}
.murid-statusbar__in {
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: 10px var(--space-3);
}
.murid-statusbar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    font-size: var(--murid-text-sm);
    color: var(--murid-text);
}
.murid-statusbar__item svg { display: block; width: 22px; height: 22px; }
/* Warna disamakan PERSIS dengan profil-stat (murid/profil/index.php) -- fire=oranye,
   star(poin)=biru sekunder, lightning(xp)=kuning warning -- supaya 1 statistik selalu
   berwarna sama di status bar & halaman Profil (sebelumnya dashboard.php malah menukar
   warna poin/xp dibanding profil; status bar baru ini sengaja ikut skema Profil). */
.murid-statusbar__item--streak { color: #ff9600; }
.murid-statusbar__item--poin { color: var(--murid-secondary); }
.murid-statusbar__item--xp { color: var(--murid-warning); }

/* ===== Mode fokus (halaman pengerjaan soal: kuis & misi Exam Quest) =====
   Dipicu flag `fokus` dari controller -> layouts/murid.php menambah class tema-murid--fokus
   di <body>, dan menyembunyikan bottom nav, header sekolah, & toggle tema.
   Tata letak & gaya DITIRU PERSIS dari layar "Pelajaran" (.dq-lesson) pada referensi
   kuis-duolingo.html: bilah atas (X + progress) -> soal -> footer aksi yang berubah jadi panel
   hijau/merah setelah jawaban diperiksa. Warna dasar memakai token --murid-*; warna tambahan
   yang hanya dipakai layar ini didefinisikan sebagai --sq-* di bawah (ikut berganti di mode gelap). */
body.tema-murid.tema-murid--fokus {
    --sq-green-l: #d7ffb8;
    --sq-blue-d: var(--murid-secondary-dark); --sq-blue-l: #ddf4ff; --sq-blue-b: #84d8ff;
    --sq-red-d: #ea2b2b;  --sq-red-l: #ffdfe0;
    --sq-hover: #f7f7f7;
    --sq-dis: #e5e5e5; --sq-dis-d: #cfcfcf; --sq-dis-tx: #afafaf;
    background: var(--murid-bg);
    padding-bottom: 0;
}
html[data-theme="dark"] body.tema-murid.tema-murid--fokus {
    --sq-green-l: #233a1f; --sq-blue-l: #1b3a4b; --sq-red-l: #3a2226;
    --sq-hover: #272830;
    --sq-dis: #2f3037; --sq-dis-d: #26272c; --sq-dis-tx: #6b6d75;
}
.tema-murid--fokus .murid-container { max-width: none; padding: 0; }

/* Kerangka layar: bilah atas (sticky) -> panggung soal (flex:1) -> footer aksi (sticky di bawah) */
.soal-app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.soal-wrap { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 20px; }
.soal-sr { /* judul kuis untuk pembaca layar saja (referensi tidak menampilkan judul di layar soal) */
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.soal-stage { flex: 1; display: flex; flex-direction: column; padding: 24px 0; }
.soal-stage > .soal-wrap { flex: 1; display: flex; flex-direction: column; }
.soal-card { animation: soal-naik .3s cubic-bezier(.2, .9, .3, 1); }

/* Bilah atas: tombol X + progress bar (.dq-top) */
.soal-topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 16px;
    width: 100%; max-width: 600px; margin: 0 auto;
    padding: 20px 20px 8px;
    background: var(--murid-bg);
}
.tema-murid--pratinjau .soal-topbar { position: static; } /* banner pratinjau sudah sticky di atas */
.soal-topbar__tutup {
    display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0;
    border-radius: 10px; color: var(--sq-dis-tx);
}
.soal-topbar__tutup:hover,
.soal-topbar__tutup:active { color: var(--murid-text-muted); }
.soal-topbar__ikon { width: 24px; height: 24px; }
.soal-topbar .progress-murid { position: relative; flex: 1; min-width: 0; }
.soal-topbar .progress-murid__fill { position: relative; transition: width .45s cubic-bezier(.3, .9, .3, 1); }
.soal-topbar .progress-murid__fill::after {
    content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px;
    border-radius: 999px; background: rgba(255, 255, 255, .32);
}

/* Tombol (.dq-btn): hijau "Periksa/Lanjut", abu-abu (--ghost) untuk aksi sekunder */
.btn-soal {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 150px; height: var(--murid-btn-height); padding: 0 24px;
    border: 0; border-radius: var(--murid-border-radius);
    font-family: var(--murid-font); font-size: var(--murid-text-base); font-weight: 900;
    letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer; transition: filter .12s;
}
.btn-soal--go    { background: var(--murid-primary); color: #fff; box-shadow: 0 4px 0 var(--murid-primary-dark); }
.btn-soal--ghost { background: transparent; color: var(--murid-text-muted); border: 2px solid var(--murid-border); box-shadow: 0 4px 0 var(--murid-border); }
.btn-soal--text  { background: transparent; color: var(--murid-danger); box-shadow: none; }
a.btn-soal { text-decoration: none; }
.btn-soal:hover:not(:disabled) { filter: brightness(1.06); }
.btn-soal:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.btn-soal:disabled {
    background: var(--sq-dis); color: var(--sq-dis-tx); border-color: transparent;
    box-shadow: none; cursor: not-allowed; transform: none; filter: none;
}
.btn-soal:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: 2px; }

/* Footer aksi + panel feedback (.dq-foot). data-state: idle | ok | bad */
.soal-foot {
    position: sticky; bottom: 0; z-index: 40;
    padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px));
    border-top: 2px solid var(--murid-border);
    background: var(--murid-bg);
    transition: background .2s;
}
.soal-foot__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.soal-foot[data-state="ok"]  { background: var(--sq-green-l); border-top-color: transparent; }
.soal-foot[data-state="bad"] { background: var(--sq-red-l);   border-top-color: transparent; }
.soal-foot[data-state="ok"]  .soal-foot__in,
.soal-foot[data-state="bad"] .soal-foot__in { animation: soal-naik .28s cubic-bezier(.2, .9, .3, 1); }
.soal-foot[data-state="bad"] .soal-main { background: var(--murid-danger); box-shadow: 0 4px 0 var(--sq-red-d); }
.soal-foot[data-state="bad"] .soal-main:active { box-shadow: none; }
/* Tombol utama selalu di kanan, juga saat panel feedback (kiri) belum tampil (state idle). */
.soal-main { margin-left: auto; }

.soal-fb { display: none; align-items: center; gap: 16px; min-width: 0; }
.soal-foot[data-state="ok"] .soal-fb,
.soal-foot[data-state="bad"] .soal-fb { display: flex; }
.soal-fb__icon { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--murid-bg); }
.soal-fb__icon svg { display: block; width: 34px; height: 34px; }
.soal-foot[data-state="ok"]  .soal-fb__icon { color: var(--murid-primary); }
.soal-foot[data-state="bad"] .soal-fb__icon { color: var(--murid-danger); }
.soal-fb__title { font-size: 22px; font-weight: 900; }
.soal-fb__sub { margin-top: 2px; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.soal-fb__sub.is-ar { font-size: 24px; }
.soal-foot[data-state="ok"]  .soal-fb__title, .soal-foot[data-state="ok"]  .soal-fb__sub { color: var(--murid-primary-dark); }
.soal-foot[data-state="bad"] .soal-fb__title, .soal-foot[data-state="bad"] .soal-fb__sub { color: var(--sq-red-d); }

/* Layar hasil akhir (.dq-end / .dq-cards / .dq-card pada referensi). murid.js menampilkannya dengan
   display:flex & menyembunyikan bilah atas + footer soal; footer hasil (.soal-foot--hasil) ikut muncul. */
.soal-hasil {
    flex: 1;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; text-align: center;
}
.soal-hasil__maskot { width: 150px; height: 150px; }
.soal-hasil__maskot .maskot-svg { display: block; width: 100%; height: 100%; }
/* Wrapper maskot + kilau dekoratif berputar di sekelilingnya (meniru "twinkle" pada referensi
   Duolingo "Pelajaran Selesai!") -- posisi absolut relatif terhadap kotak maskot, jadi ukurannya
   ikut menyesuaikan kalau .soal-hasil__maskot suatu saat diubah. */
.soal-hasil__maskot-wrap { position: relative; width: 150px; height: 150px; }
.soal-hasil__kilau { position: absolute; width: 22px; height: 22px; }
.soal-hasil__kilau--1 { top: -6px; left: -22px; width: 26px; height: 26px; animation: soal-kilau-kedip 1.8s ease-in-out infinite; }
.soal-hasil__kilau--2 { bottom: 10px; right: -26px; width: 18px; height: 18px; animation: soal-kilau-kedip 1.8s ease-in-out .4s infinite; }
.soal-hasil__kilau--3 { top: 20px; right: -6px; width: 12px; height: 12px; animation: soal-kilau-kedip 1.8s ease-in-out .9s infinite; }
@keyframes soal-kilau-kedip { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.05); } }
.soal-hasil__judul { margin: 0; color: #e5a800; font-size: 30px; font-weight: 900; }
.soal-hasil__kartu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; max-width: 380px; }
.soal-stat { overflow: hidden; border: 2px solid var(--c); border-radius: 16px; background: var(--murid-bg); }
.soal-stat__h { padding: 6px 4px; background: var(--c); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.soal-stat__v { display: flex; align-items: center; justify-content: center; gap: 6px; height: 64px; color: var(--cd); font-size: 22px; font-weight: 900; }
.soal-stat__v svg { display: block; width: 28px; height: 28px; flex: none; }
.soal-hasil__skor { margin: 0; max-width: 380px; color: var(--murid-text-muted); font-size: 17px; }
.soal-hasil__waktu { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
    .soal-hasil__kilau { animation: none !important; }
}
.soal-foot--hasil .soal-foot__in > :only-child { margin-left: auto; }
@media (max-width: 520px) { .soal-foot--hasil .soal-foot__in { flex-direction: column-reverse; } .soal-foot--hasil .soal-foot__in > :only-child { margin-left: 0; } }

@keyframes soal-naik { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .soal-card, .soal-foot__in { animation: none !important; }
    .soal-foot, .soal-topbar .progress-murid__fill { transition: none !important; }
}
@media (max-width: 520px) {
    .soal-foot__in { flex-direction: column; align-items: stretch; gap: 12px; }
    .soal-main { order: 2; margin-left: 0; }
    .soal-fb { order: 1; }
    .soal-fb__icon { display: none; }
    .btn-soal { width: 100%; }
}

/* Dialog konfirmasi keluar -- markup di layouts/murid.php, logika di murid.js (#dialog-keluar).
   Gaya "bottom sheet" ditiru dari .dq-modal pada referensi kuis-duolingo.html.
   Pola tampil/sembunyi sama dengan #fakeselect-modal (class .active). */
.keluar-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
}
.keluar-dialog-backdrop.active { display: flex; }
.keluar-dialog-box {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 600px;
    text-align: center;
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    background: var(--murid-bg);
    animation: soal-naik .28s cubic-bezier(.2, .9, .3, 1);
}
.keluar-dialog-box__judul {
    margin: 0;
    color: var(--murid-text);
    font-size: 24px;
    font-weight: 900;
}
.keluar-dialog-box__teks {
    margin: 0;
    color: var(--murid-text-muted);
    font-size: 17px;
}
.keluar-dialog-box .btn-soal { width: 100%; }
@media (prefers-reduced-motion: reduce) { .keluar-dialog-box { animation: none; } }

/* Bottom nav bar (mobile-first) -- gaya ditiru dari .dq-nav/.dq-tab pada
   referensi kuis-duolingo.html: tab ikon bulat/pil, latar biru muda saat aktif,
   tanpa label teks (label dipindah ke aria-label/title, sama seperti sumbernya).
   Wrapper luar (.bottom-nav) tetap fixed di bawah layar seperti sebelumnya --
   hanya isinya (.bottom-nav__in + .bottom-nav a) yang diganti gayanya. */
.bottom-nav {
    --dq-blue-l: #ddf4ff; --dq-blue-b: #84d8ff; --dq-hover: #f7f7f7; --dq-line: #e5e5e5;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    background: var(--murid-bg);
    border-top: 1px solid var(--murid-border);
    box-shadow: 0 -2px 10px var(--murid-shadow-sm);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
}
html[data-theme="dark"] .bottom-nav { --dq-blue-l: #1b3a4b; --dq-blue-b: #2a4e5f; --dq-hover: #1c2b32; --dq-line: #37464f; }
.bottom-nav__in {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
}
.bottom-nav a {
    display: grid;
    place-items: center;
    flex: 1;
    max-width: 88px;
    height: 54px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 14px;
    color: inherit;
}
.bottom-nav a:hover { background: var(--dq-hover); }
.bottom-nav a.active { background: var(--dq-blue-l); border-color: var(--dq-blue-b); }


/* ===== Header halaman standar sisi murid (Core\View::muridHeader()) =====
   SATU komponen header untuk semua halaman utama bottom-nav (Beranda, Peringkat, Progres,
   Profil, & fallback Mata Pelajaran), meniru .dq-head pada referensi kuis-duolingo.html:
   ikon + judul rata tengah + garis bawah tebal. Tombol kembali (.murid-head__kembali, exam-quest)
   diposisikan absolut supaya judul TETAP center & tinggi header sama di semua halaman. Halaman berkonteks satu mapel
   (bab, exam-quest) memakai header yang SAMA, hanya judulnya jadi tombol ganti mapel (course-switcher, blok di bawah). */
.murid-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 2px solid var(--murid-border);
    text-align: center;
}
.murid-head h1 {
    font-weight: 800;
    font-size: var(--murid-text-lg);
}
.murid-head .ikon-emoji { width: 28px; height: 28px; }
.murid-head__kembali {
    position: absolute;
    top: 0;
    bottom: var(--space-3); /* sejajarkan dgn area judul (di luar padding-bottom) */
    display: flex;
    align-items: center;
    color: var(--murid-text-muted);
}
.murid-head__kembali { left: 0; }
.murid-head__kembali svg { width: 22px; height: 22px; }
/* Keterangan kecil tepat di bawah header (mis. periode peringkat), menempel ke header. */
.murid-head-sub {
    text-align: center;
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
    margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}

/* ---------- Course-switcher (header halaman berkonteks SATU mapel: bab, exam-quest) ----------
   Header-nya = .murid-head biasa (lihat blok di atas), jadi tampilannya identik dgn halaman lain.
   Yang beda cuma judul mapel aktif berupa tombol (#mapel-switcher-btn) yang membuka modal grid semua
   mapel. Markup di murid/partials/_course-switcher.php, buka/tutup modal di murid.js. */
.murid-head__judul { margin: 0; font-weight: 800; font-size: var(--murid-text-lg); }
.murid-head__judul-btn {
    position: relative;
    margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: inherit; text-align: inherit;
}
.murid-head__judul-btn:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: 4px; border-radius: 6px; }
/* Penanda "bisa diketuk": absolut di kanan judul supaya ikon+judul tetap center persis seperti halaman lain. */
.murid-head__chev {
    position: absolute; left: 100%; top: 50%;
    width: 8px; height: 8px; margin: -6px 0 0 8px;
    border-right: 2px solid var(--murid-text-muted); border-bottom: 2px solid var(--murid-text-muted);
    transform: rotate(45deg);
}

/* Modal grid ganti mapel: 2 kolom, ~3 baris kelihatan lalu discroll */
.mapel-switcher-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    display: none; align-items: flex-end; justify-content: center; z-index: 1000;
}
.mapel-switcher-modal-backdrop.active { display: flex; }
.mapel-switcher-modal-box {
    width: 100%; max-width: 480px; max-height: 82vh;
    display: flex; flex-direction: column;
    background: var(--murid-bg); border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.18);
    animation: mapelSwitcherIn 180ms ease-out;
}
@keyframes mapelSwitcherIn { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mapel-switcher-modal-head {
    flex: none; display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px 14px; border-bottom: 2px solid var(--murid-border);
}
.mapel-switcher-modal-head h2 { margin: 0; font-size: 18px; font-weight: 900; color: var(--murid-text); }
.mapel-switcher-modal-close { border: 0; background: none; padding: 4px; color: var(--murid-text-muted); cursor: pointer; }
.mapel-switcher-modal-close svg { display: block; width: 24px; height: 24px; }
.mapel-switcher-modal-grid {
    flex: 1; min-height: 0; overflow-y: auto;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
    padding: 18px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    /* Tinggi dibatasi supaya kira-kira 3 baris kelihatan (kartu + gap), sisanya discroll. */
    max-height: calc(3 * 116px + 2 * 14px + 36px);
}
.mapel-switcher-modal__item {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 6px; text-align: center; text-decoration: none; color: var(--murid-text);
    border: 2px solid var(--murid-border); border-bottom-width: 4px; border-radius: 16px;
    background: var(--murid-bg);
    transition: background 120ms ease, transform 100ms ease, border-bottom-width 100ms ease, margin-bottom 100ms ease;
}
.mapel-switcher-modal__item:hover { background: var(--murid-bg-soft); }
.mapel-switcher-modal__item:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.mapel-switcher-modal__item.is-current { border-color: var(--murid-secondary); background: var(--murid-info-soft); }
.mapel-switcher-modal__i {
    display: grid; place-items: center; flex: none;
    width: 56px; height: 56px; border-radius: 16px;
    background: color-mix(in srgb, var(--c, var(--murid-secondary)) 18%, var(--murid-bg-soft));
}
.mapel-switcher-modal__i svg { display: block; width: 36px; height: 36px; }
.mapel-switcher-modal__nama {
    font-size: 13px; font-weight: 800; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ===== Halaman "Mata Pelajaran" (murid/mata-pelajaran/index.php, kini hanya fallback kosong) =====
   Daftar kartu warna-warni ditiru dari .dq-practice-list pada referensi kuis-duolingo.html
   (tab "Latihan"): tiap kartu = kotak ikon berwarna (--c diset per item lewat
   Core\View::mapelWarna()) + judul + subjudul kecil. */
.mapel-list {
    display: grid;
    gap: var(--space-3);
}
.mapel-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    text-align: left;
    border: var(--murid-border-width) solid var(--murid-border);
    border-bottom-width: 4px;
    border-radius: var(--murid-border-radius);
    background: var(--murid-bg);
    color: var(--murid-text);
    text-decoration: none;
    transition: background 120ms ease, transform 100ms ease, border-bottom-width 100ms ease, margin-bottom 100ms ease;
}
.mapel-item:hover { background: var(--murid-bg-soft); }
.mapel-item:active {
    transform: translateY(2px);
    border-bottom-width: var(--murid-border-width);
    margin-bottom: 2px;
}
.mapel-item__i {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--c, var(--murid-primary)) 18%, var(--murid-bg-soft));
}
.mapel-item__i svg { display: block; width: 34px; height: 34px; }
.mapel-item__t { min-width: 0; }
.mapel-item strong {
    display: block;
    font-size: var(--murid-text-sm);
    font-weight: 800;
}
.mapel-item small {
    display: block;
    margin-top: 2px;
    font-size: var(--murid-text-xs);
    font-weight: 700;
    color: var(--murid-text-muted);
}

/* Varian kartu untuk halaman "Progres" (murid/progres/index.php): kartu .mapel-item yang sama,
   ditambah bar progres pil di bawah subjudul (warna ikut --c mapelnya, dengan kilau tipis di
   atas ala bar progres pada layar soal) dan persen di sisi kanan. */
.mapel-item--progres .mapel-item__t { flex: 1; }
.mapel-item__bar {
    display: block;
    height: 14px;
    margin-top: var(--space-2);
    overflow: hidden;
    border-radius: 999px;
    background: var(--murid-border);
}
.mapel-item__bar-fill {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--c, var(--murid-primary));
    transition: width 400ms ease;
}
.mapel-item__bar-fill::after {
    content: "";
    position: absolute;
    left: 6px; right: 6px; top: 3px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
}
.mapel-item__persen {
    flex: none;
    min-width: 3.25em; /* lebar tetap ("0%" s.d. "100%") supaya panjang bar sama di semua kartu */
    text-align: right;
    color: var(--murid-text-muted);
    font-size: var(--murid-text-sm);
    font-weight: 800;
}
.mapel-item--progres.is-selesai .mapel-item__persen { color: var(--murid-primary-dark); }
@media (prefers-reduced-motion: reduce) { .mapel-item__bar-fill { transition: none; } }

/* ===== Halaman "Progres": accordion mata pelajaran > bab > misi > hasil soal =====
   Markup di murid/progres/index.php (hasil per soal: murid/progres/_hasil-kuis.php, dimuat malas oleh
   murid.js). Kartu mapel tetap .mapel-item (di atas) -- di sini hanya tambahan untuk bagian yang bisa
   dibuka. Warna mapel (--c) dipasang di .progres-mapel: kartu, bar progres, & garis penghubung hierarki
   (.progres-rel) memakai warna yang sama. Semua panel memakai pola .akordeon__panel di bawah. */
.progres-mapel { min-width: 0; }

/* Kartu mapel tanpa misi aktif: bukan tombol, jadi tanpa efek hover/tekan. */
.mapel-item--statis:hover { background: var(--murid-bg); }
.mapel-item--statis:active { transform: none; border-bottom-width: 4px; margin-bottom: 0; }

button.mapel-item { font: inherit; cursor: pointer; }
.mapel-item:focus-visible,
.progres-rel__jalur:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: 2px; }
.mapel-item .akordeon__chevron { margin-left: calc(-1 * var(--space-1)); }

/* Panah buka/tutup (sama bentuknya dgn .murid-head__chev): mengarah ke bawah saat tertutup, berputar
   ke atas saat aria-expanded="true" di tombol induknya. translate kecil = mengoreksi titik berat panah. */
.akordeon__chevron {
    flex: none;
    width: 9px; height: 9px;
    border-right: 3px solid var(--murid-text-muted);
    border-bottom: 3px solid var(--murid-text-muted);
    border-radius: 2px;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 200ms ease;
}
[aria-expanded="true"] > .akordeon__chevron { transform: rotate(-135deg) translate(-2px, -2px); }

/* Panel yang membuka/menutup dengan animasi tinggi (grid 0fr -> 1fr). visibility:hidden saat tertutup
   supaya isinya tidak bisa difokus keyboard / dibaca pembaca layar; delay visibility = lama animasi
   tutup, jadi isi tetap terlihat selagi menutup. .akordeon__in wajib overflow:hidden + min-height:0.
   Saat terbuka memakai visibility:inherit (BUKAN visible): panel bersarang (misi di dalam bab di dalam
   mapel) yang masih terbuka tetap ikut tersembunyi begitu panel induknya ditutup. */
.akordeon__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* isi panjang tak boleh melebarkan panel melewati layar */
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 240ms ease, visibility 0s linear 240ms;
}
.akordeon__panel.is-open {
    grid-template-rows: 1fr;
    visibility: inherit;
    transition-delay: 0s;
}
.akordeon__in { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .akordeon__panel, .akordeon__chevron { transition: none; }
}

/* Isi panel mapel: daftar bab di sebelah kanan sebuah garis vertikal berwarna mapel yang jatuh tepat
   di bawah tengah kotak ikon (52px ikon + 16px padding kartu + 2px border => tengah ~44px). */
.progres-rel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-1) 42px;
    padding: var(--space-1) 0 var(--space-1) var(--space-3);
    border-left: 3px solid color-mix(in srgb, var(--c, var(--murid-primary)) 45%, var(--murid-border));
}
.progres-rel__jalur {
    display: block;
    padding: 10px var(--space-3);
    text-align: center;
    font-size: var(--murid-text-xs);
    font-weight: 800;
    color: var(--murid-text);
    background: var(--murid-bg);
    border: var(--murid-border-width) solid var(--murid-border);
    border-bottom-width: 4px;
    border-radius: 14px;
}
.progres-rel__jalur:hover { background: var(--murid-bg-soft); }

/* 1 bab = 1 kartu: judul (tombol) di atas, daftar misinya menyatu di dalam kartu yang sama. */
.progres-bab {
    overflow: hidden;
    background: var(--murid-bg);
    border: var(--murid-border-width) solid var(--murid-border);
    border-bottom-width: 4px;
    border-radius: 14px;
}
.progres-bab__btn,
.progres-kuis__btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--murid-text);
    background: none;
    border: 0;
}
button.progres-bab__btn,
button.progres-kuis__btn { cursor: pointer; }
button.progres-bab__btn:hover,
button.progres-kuis__btn:hover { background: var(--murid-bg-soft); }
/* Outline di DALAM elemen: kartu bab overflow:hidden akan memotong outline yang di luar. */
.progres-bab__btn:focus-visible,
.progres-kuis__btn:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: -3px; }

.progres-bab__btn { padding: 12px var(--space-3); }
.progres-bab__t, .progres-kuis__t { flex: 1; min-width: 0; }
.progres-bab__t strong,
.progres-kuis__t strong {
    display: block;
    font-size: var(--murid-text-sm);
    font-weight: 800;
    overflow-wrap: anywhere;
}
.progres-bab__t small,
.progres-kuis__t small {
    display: block;
    font-size: var(--murid-text-xs);
    font-weight: 700;
    color: var(--murid-text-muted);
}
.progres-bab__cek { display: grid; flex: none; }
.progres-bab__cek svg { width: 26px; height: 26px; }

/* Daftar misi di dalam bab: baris datar dipisah garis tipis, bukan kartu bertumpuk. */
.progres-kuis-list { border-top: var(--murid-border-width) solid var(--murid-border-soft); }
.progres-kuis + .progres-kuis { border-top: var(--murid-border-width) solid var(--murid-border-soft); }
.progres-kuis__btn { padding: 12px var(--space-3); }
.progres-kuis__btn--statis { color: var(--murid-text-muted); }

/* Penanda status misi: centang hijau (selesai), cincin setengah kuning (sedang dikerjakan), cincin abu (belum). */
.progres-kuis__status { display: grid; place-items: center; flex: none; width: 26px; height: 26px; }
.progres-kuis__status svg { width: 26px; height: 26px; }
.progres-kuis--berjalan .progres-kuis__status::before,
.progres-kuis--belum .progres-kuis__status::before {
    content: "";
    width: 20px; height: 20px;
    box-sizing: border-box;
    border: 3px solid var(--murid-border);
    border-radius: 50%;
}
.progres-kuis--berjalan .progres-kuis__status::before {
    border-color: var(--murid-warning);
    background: conic-gradient(var(--murid-warning) 0 50%, transparent 0);
}

/* Hasil per soal (dimuat malas ke .progres-kuis__isi). */
.progres-kuis__isi {
    padding: var(--space-3) 12px;
    background: var(--murid-bg-soft);
    border-top: var(--murid-border-width) solid var(--murid-border-soft);
}
.progres-hasil__status,
.progres-hasil__kosong {
    font-size: var(--murid-text-xs);
    font-weight: 700;
    color: var(--murid-text-muted);
}
.progres-hasil__ulang {
    padding: 0;
    font-size: inherit;
    font-weight: 800;
    color: var(--murid-text);
    text-decoration: underline;
}
.progres-hasil__ringkas {
    margin-bottom: var(--space-2);
    font-size: var(--murid-text-xs);
    font-weight: 700;
    color: var(--murid-text-muted);
}
.progres-hasil__ringkas strong { color: var(--murid-text); font-weight: 800; }
.progres-soal-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.progres-soal {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: var(--murid-bg);
    border-radius: 12px;
    box-shadow: 0 2px 0 var(--murid-border);
}
.progres-soal__ikon { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.progres-soal__ikon svg { width: 22px; height: 22px; }
.progres-soal--belum .progres-soal__ikon::before {
    content: "";
    display: block;
    width: 16px; height: 16px; margin: 3px;
    box-sizing: border-box;
    border: 3px solid var(--murid-border);
    border-radius: 50%;
}
.progres-soal__isi { flex: 1; min-width: 0; }
.progres-soal__label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--murid-text-xs);
    font-weight: 800;
    color: var(--murid-primary-dark);
}
.progres-soal--salah .progres-soal__label { color: var(--murid-danger); }
.progres-soal--belum .progres-soal__label { color: var(--murid-text-muted); }
.progres-soal__poin { flex: none; font-weight: 700; color: var(--murid-text-muted); }
.progres-soal__tanya {
    margin: 2px 0 var(--space-2);
    font-size: var(--murid-text-sm);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.progres-soal--belum .progres-soal__tanya { margin-bottom: 0; }
.progres-soal .review-soal__baris { overflow-wrap: anywhere; }
.progres-soal .review-soal__baris:last-child { margin-bottom: 0; }
.progres-soal--salah .review-soal__baris.jawabanmu { background: var(--murid-danger-soft); }

/* ===== Halaman "Profil" (murid/profil/index.php) =====
   Ditiru dari tab "Profil" (.dq-profile) pada referensi kuis-duolingo.html: kartu avatar besar
   di atas, nama + "Bergabung <bulan tahun>", grid statistik 2x2 warna-warni (--c diset per
   kartu di view, kotaknya diwarnai lewat color-mix() di bawah), lalu daftar "Pencapaian" &
   "Pengaturan" bergaya .dq-list/.dq-row + switch bulat ala iOS. */
.profil-hero {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 170px;
    margin-bottom: var(--space-3);
    overflow: hidden;
    border-radius: var(--murid-border-radius);
    background: linear-gradient(180deg, var(--murid-info-soft), color-mix(in srgb, var(--murid-secondary) 10%, var(--murid-info-soft)));
}
.profil-hero .maskot-svg { display: block; margin-bottom: -8px; }

.profil-me {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-4);
}
.profil-me__n {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--murid-text);
    font-size: var(--murid-text-lg);
    font-weight: 900;
}
.profil-me__n .badge-liga { width: 30px; height: 30px; flex: none; }
.profil-me__s {
    margin-top: 4px;
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
    font-weight: 700;
}
.profil-me__joined {
    margin-top: 2px;
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
}

.profil-h2 {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--murid-text);
    font-size: var(--murid-text-base);
    font-weight: 800;
}
.profil-h2:first-of-type { margin-top: 0; }

.profil-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.profil-stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    border: var(--murid-border-width) solid var(--murid-border);
    border-radius: var(--murid-border-radius);
}
.profil-stat__i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--c, var(--murid-primary)) 18%, var(--murid-bg-soft));
    color: var(--c, var(--murid-primary));
}
.profil-stat__i svg { display: block; width: 26px; height: 26px; }
.profil-stat b {
    display: block;
    color: var(--murid-text);
    font-size: var(--murid-text-xl);
    font-weight: 900;
    line-height: 1.1;
}
.profil-stat small {
    display: block;
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
    font-weight: 700;
}
.profil-stat-note {
    margin-top: var(--space-2);
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
    text-align: center;
}

.profil-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: var(--murid-border-width) solid var(--murid-border);
    border-radius: var(--murid-border-radius);
}
.profil-list__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-top: var(--murid-border-width) solid var(--murid-border);
}
.profil-list__row:first-child { border-top: 0; }
/* Baris yang bisa diketuk (mis. "Panduan"): dibedakan dari baris info biasa (mis. Email) lewat
   panah kanan (.profil-list__panah) + warna teks & bg yg jelas dpt-diketuk pd tap/hover. */
a.profil-list__row--tautan { color: inherit; text-decoration: none; }
a.profil-list__row--tautan:active,
a.profil-list__row--tautan:hover { background: var(--murid-bg-soft); }
a.profil-list__row--tautan:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: -3px; }
.profil-list__panah { flex: none; width: 20px; height: 20px; color: var(--murid-text-muted); }
.profil-list__panah svg { display: block; width: 100%; height: 100%; }
.profil-list__ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--murid-bg-soft);
    box-shadow: inset 0 0 0 2px var(--murid-ring-soft);
}
.profil-list__ikon img { width: 26px; height: 26px; }
.profil-list__row--terkunci .profil-list__ikon { filter: grayscale(1); opacity: .5; }
.profil-list__row--terkunci .profil-list__t { opacity: .55; }
.profil-list__t { flex: 1; min-width: 0; }
.profil-list__t strong { display: block; font-size: var(--murid-text-sm); font-weight: 800; }
.profil-list__t small { display: block; margin-top: 2px; color: var(--murid-text-muted); font-size: var(--murid-text-xs); }
.profil-list__status { flex: none; width: 24px; height: 24px; color: var(--murid-primary); }
.profil-list__status svg { display: block; width: 100%; height: 100%; }
.profil-list__status--kunci {
    width: auto;
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ===== Kartu Pencapaian ala Duolingo (murid/profil/_pencapaian-daftar.php) =====
   Baris = ubin berwarna (--c diset per baris di view) + nama/angka progres/bar/deskripsi. Bar memakai
   komponen .progress-murid yang sudah ada: kuning selama berjalan, hijau kalau sudah didapat. */
.pencapaian {
    overflow: hidden;
    border: var(--murid-border-width) solid var(--murid-border);
    border-radius: var(--murid-border-radius);
}
.pencapaian__daftar { list-style: none; margin: 0; padding: 0; }
.pencapaian__baris {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-top: var(--murid-border-width) solid var(--murid-border);
}
.pencapaian__baris:first-child { border-top: 0; }
.pencapaian__ubin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;
    width: 76px;
    padding: 10px 0 8px;
    border-radius: 12px;
    background: var(--c, var(--murid-secondary));
    border-bottom: 4px solid color-mix(in srgb, var(--c, var(--murid-secondary)) 72%, #000);
}
.pencapaian__ikon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
}
.pencapaian__ikon img { display: block; width: 30px; height: 30px; }
.pencapaian__label {
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pencapaian__isi { flex: 1; min-width: 0; }
.pencapaian__atas { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pencapaian__nama { min-width: 0; font-size: var(--murid-text-base); font-weight: 800; line-height: 1.2; }
.pencapaian__angka { flex: none; color: var(--murid-text-muted); font-size: var(--murid-text-sm); font-weight: 700; }
.pencapaian__bar { height: 14px; margin-top: var(--space-2); }
.pencapaian__fill { background: var(--murid-warning); }
.pencapaian__baris.is-selesai .pencapaian__fill { background: var(--murid-primary); }
.pencapaian__deskripsi { margin: var(--space-2) 0 0; color: var(--murid-text-muted); font-size: var(--murid-text-sm); line-height: 1.35; }
.pencapaian__semua {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    border-top: var(--murid-border-width) solid var(--murid-border);
    color: var(--murid-text);
    font-size: var(--murid-text-base);
    font-weight: 800;
}
.pencapaian__semua svg { display: block; width: 22px; height: 22px; color: var(--murid-text-muted); }
.pencapaian__semua:active { background: var(--murid-bg-soft); }
.pencapaian__semua:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
    .pencapaian__fill { transition: none; }
}

/* Utility teks sekunder -- lihat catatan di tokens-murid.css. Dipakai di
   seluruh view murid menggantikan color:#777/#999/#AFAFAF/#555 inline. */
.text-muted { color: var(--murid-text-muted); }

.card-murid {
    background: var(--murid-bg);
    border-radius: var(--murid-border-radius);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    box-shadow: 0 2px 0 var(--murid-border);
}

/* ===== Empty/locked state ramah (Core\View::stateKosong()) =====
   Maskot kecil + judul + teks (+ tombol opsional) di SEMUA state kosong/terkunci sisi murid.
   Sengaja diletakkan SETELAH .card-murid supaya padding-nya menimpa padding kartu biasa. */
.empty-murid { text-align: center; padding: var(--space-4) var(--space-3); }
.empty-murid__maskot { width: 88px; height: 88px; margin: 0 auto var(--space-2); }
.empty-murid__judul { font-weight: 800; font-size: var(--murid-text-base); }
.empty-murid__teks {
    color: var(--murid-text-muted);
    font-size: var(--murid-text-sm);
    margin: var(--space-1) auto 0;
    max-width: 320px;
}
.empty-murid__aksi { margin-top: var(--space-3); }
.empty-murid--ringkas { padding: var(--space-3) var(--space-2); }
.empty-murid--ringkas .empty-murid__maskot { width: 56px; height: 56px; margin-bottom: var(--space-1); }
.empty-murid--ringkas .empty-murid__judul { font-size: var(--murid-text-sm); }
.empty-murid--ringkas .empty-murid__teks { font-size: var(--murid-text-xs); }

/* ===== Kartu misi Exam Quest (Fase C item 5-7, dipakai murid/exam-quest/index.php) =====
   .misi-status--hijau/kuning/merah (ambang §4.1 roadmap: hijau >=80%, kuning 50-79%, merah
   <50%) cuma menyetel custom property --misi-status-color, lalu dipakai ulang di 3 tempat
   sekaligus tanpa perlu modifier terpisah per tempat: aksen border kiri kartu (.misi-card),
   dot+teks badge (.misi-status-badge), dan warna fill progress bar (ditempel langsung ke
   .progress-murid__fill). Contoh pakai: <div class="card-murid misi-card
   misi-status--kuning">, <span class="misi-status-badge misi-status--kuning">Perlu
   Latihan</span>, <div class="progress-murid__fill misi-status--kuning" style="width:60%">. */
.misi-status--hijau  { --misi-status-color: var(--murid-primary); }
.misi-status--kuning { --misi-status-color: var(--murid-warning); }
.misi-status--merah  { --misi-status-color: var(--murid-danger); }

.misi-card {
    border-left: 6px solid var(--misi-status-color, transparent);
}

.misi-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--misi-status-color, var(--murid-text-muted));
}
.misi-status-badge::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.progress-murid__fill.misi-status--hijau,
.progress-murid__fill.misi-status--kuning,
.progress-murid__fill.misi-status--merah {
    background: var(--misi-status-color);
}

/* Kartu "Final Challenge" di paling bawah daftar misi -- aksen beda dari kartu misi biasa
   (bukan status penguasaan topik, jadi tidak pakai .misi-status--*). */
.misi-card--final {
    border: 2px solid var(--murid-secondary);
}

/* ===== Kartu soal (dipakai QuizTypeInterface::render() semua tipe) =====
   Gaya ditiru dari .dq-prompt / .dq-option / .dq-tile pada referensi kuis-duolingo.html. */
/* Teks Arab: font Naskh ikut otomatis lewat fallback --murid-font; kelas ini hanya memberi tinggi baris lega */
.is-ar { line-height: 1.5; }
.soal-pertanyaan {
    margin: 0 0 24px;
    color: var(--murid-text);
    font-size: 26px;
    font-weight: 900;
    line-height: 1.25;
}
.soal-petunjuk {
    font-size: 14px;
    color: var(--murid-text-muted);
    margin: -8px 0 var(--space-3);
}

/* Pilihan ganda & benar/salah: kartu pilihan dengan nomor di kiri (.dq-option).
   <input type=radio> tetap ada (dibaca murid.js) tapi disembunyikan secara visual. */
.opsi-list {
    display: grid;
    gap: 12px;
}
.opsi-pilihan {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--murid-border);
    border-bottom-width: 4px;
    border-radius: 16px;
    background: var(--murid-bg);
    color: var(--murid-text);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.opsi-pilihan:hover { background: var(--sq-hover); }
.opsi-pilihan:active { transform: translateY(2px); border-bottom-width: 2px; margin-bottom: 2px; }
.opsi-pilihan input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.opsi-pilihan:has(input:focus-visible) { outline: 3px solid var(--murid-secondary); outline-offset: 2px; }
.opsi-pilihan__no {
    display: grid; place-items: center; flex: none; width: 30px; height: 30px;
    border: 2px solid var(--murid-border); border-radius: 8px;
    color: var(--murid-text-muted); font-size: 14px; font-weight: 800;
}
.opsi-pilihan__teks { min-width: 0; overflow-wrap: anywhere; }
.opsi-pilihan__teks.is-ar { font-size: 26px; }
.opsi-pilihan:has(input:checked) { background: var(--sq-blue-l); border-color: var(--sq-blue-b); color: var(--sq-blue-d); }
.opsi-pilihan:has(input:checked) .opsi-pilihan__no { border-color: var(--murid-secondary); color: var(--murid-secondary); }
/* Sesudah diperiksa (kelas dipasang murid.js): opsi benar = hijau, opsi salah yang dipilih = merah */
.opsi-pilihan.is-right, .opsi-pilihan.is-right:has(input:checked) { background: var(--sq-green-l); border-color: var(--murid-primary); color: var(--murid-primary-dark); }
.opsi-pilihan.is-right .opsi-pilihan__no, .opsi-pilihan.is-right:has(input:checked) .opsi-pilihan__no { border-color: var(--murid-primary); color: var(--murid-primary-dark); }
.opsi-pilihan.is-wrong, .opsi-pilihan.is-wrong:has(input:checked) { background: var(--sq-red-l); border-color: var(--murid-danger); color: var(--sq-red-d); }
.opsi-pilihan.is-wrong .opsi-pilihan__no, .opsi-pilihan.is-wrong:has(input:checked) .opsi-pilihan__no { border-color: var(--murid-danger); color: var(--sq-red-d); }
@media (hover: none) { .opsi-pilihan__no { display: none; } }

/* Benar/Salah: 2 kotak sebaris (kiri Benar, kanan Salah), bukan ditumpuk ke bawah seperti
   pilihan ganda. Kotak dibuat lebih tinggi & isinya di tengah supaya nyaman diketuk. */
.opsi-benar-salah { grid-template-columns: 1fr 1fr; }
.opsi-benar-salah .opsi-pilihan {
    justify-content: center;
    min-height: 96px;
    padding: 14px 10px;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

/* Isian (fill in the blank) */
.isian-blank {
    border: none;
    border-bottom: 3px solid var(--murid-secondary);
    color: var(--murid-text);
    font-family: inherit;
    font-weight: 800;
    font-size: 22px;
    padding: 2px 6px;
    width: 7em;
    min-width: 120px;
    max-width: 100%;
    text-align: center;
    background: var(--murid-input-bg);
    border-radius: 4px;
}
.isian-blank:focus { outline: none; background: var(--sq-blue-l); }
.isian-blank.is-right { border-bottom-color: var(--murid-primary); background: var(--sq-green-l); color: var(--murid-primary-dark); }
.isian-blank.is-wrong { border-bottom-color: var(--murid-danger); background: var(--sq-red-l); color: var(--sq-red-d); }
.isian-esai {
    display: block; width: 100%; padding: 14px 16px;
    border: 2px solid var(--murid-border); border-bottom-width: 4px; border-radius: 16px;
    background: var(--murid-bg); color: var(--murid-text);
    font-family: var(--murid-font); font-size: 17px; font-weight: 700; resize: vertical;
}
.isian-esai:focus { outline: none; border-color: var(--sq-blue-b); background: var(--sq-blue-l); }

/* Mencocokkan: 2 kolom (kiri | kanan), murid menarik garis dari item kiri ke item kanan.
   Markup dari Mencocokkan::render(), logika di murid.js (initMencocokkan). Garis digambar di
   <svg class="cocok-garis"> yang menimpa seluruh .cocok-area (pointer-events: none, jadi
   tidak menghalangi sentuhan). Warna pasangan (--cocok-warna) diset murid.js per pasangan. */
.cocok-area {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    align-items: start;
}
.cocok-kolom {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.cocok-garis {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}
.cocok-garis line {
    stroke: var(--murid-secondary);
    stroke-width: 4;
    stroke-linecap: round;
}
.cocok-garis__seret {
    stroke-dasharray: 6 8;
}
.cocok-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 10px 12px;
    background: var(--murid-bg);
    color: var(--murid-text);
    border: 2px solid var(--murid-border);
    border-bottom-width: 4px;
    border-radius: 16px;
    font-family: var(--murid-font);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    /* none: supaya menarik garis dengan jari tidak malah menggulir halaman */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 100ms ease, background 100ms ease;
}
.cocok-teks.is-ar { font-size: 26px; }
.cocok-titik {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--murid-bg);
    border: 2px solid var(--murid-border);
}
.cocok-item[data-sisi="kiri"] .cocok-titik { right: -8px; }
.cocok-item[data-sisi="kanan"] .cocok-titik { left: -8px; }
.cocok-item--terhubung {
    border-color: var(--cocok-warna);
    background: color-mix(in srgb, var(--cocok-warna) 12%, var(--murid-bg));
}
.cocok-item--terhubung .cocok-titik {
    background: var(--cocok-warna);
    border-color: var(--cocok-warna);
}
.cocok-item--terpilih,
.cocok-item--tarik,
.cocok-item--sasaran {
    border-color: var(--murid-secondary);
    background: var(--murid-info-soft);
}
.cocok-item--terpilih .cocok-titik,
.cocok-item--tarik .cocok-titik,
.cocok-item--sasaran .cocok-titik {
    border-color: var(--murid-secondary);
}
@media (max-width: 359px) {
    .cocok-area { column-gap: 44px; }
    .cocok-item { font-size: 14px; padding: var(--space-2); }
}

/* Urutan kata & susun huruf: area jawaban bergaris (.dq-answer) + bank ubin (.dq-bank/.dq-tile).
   Tiap baris = 48px ubin + 8px jarak = 56px, garis digambar di dasar tiap baris. */
.urutan-jawaban,
.huruf-jawaban {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    min-height: 112px;
    margin-bottom: 28px;
    padding: 0;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 54px, var(--murid-border) 54px, var(--murid-border) 56px);
}
.urutan-pool,
.huruf-pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.urutan-chip,
.huruf-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 16px;
    background: var(--murid-bg);
    border: 2px solid var(--murid-border);
    border-bottom-width: 4px;
    border-radius: 14px;
    font-weight: 700;
    font-family: var(--murid-font);
    font-size: 17px;
    white-space: nowrap;
    color: var(--murid-text);
    cursor: pointer;
    transition: transform 100ms ease;
}
.urutan-chip.is-ar,
.huruf-chip.is-ar { font-size: 22px; }
.huruf-chip { min-width: 48px; }
.urutan-chip:hover,
.huruf-chip:hover { background: var(--sq-hover); }
.urutan-chip:active,
.huruf-chip:active {
    transform: translateY(2px);
}

/* Urutan Kata & Susun Huruf: chip bisa di-drag (murid.js, blok "Urutan Kata & Susun Huruf: drag & drop") selain di-tap */
.soal-urutan--horizontal .urutan-chip,
.soal-susun-huruf .urutan-chip {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* none: supaya menyeret kata dengan jari tidak menggulir halaman */
    touch-action: none;
}
/* Bank kata tetap punya tinggi walau kosong, supaya masih bisa jadi target seret-balik */
.soal-urutan--horizontal .urutan-pool,
.soal-susun-huruf .urutan-pool { min-height: 52px; }
.urutan-chip--melayang {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    margin: 0;
    box-sizing: border-box;
    pointer-events: none;
    border-color: var(--murid-secondary);
    box-shadow: 0 10px 24px var(--murid-shadow-md);
}
.urutan-chip-slot {
    box-sizing: border-box;
    border: 2px dashed var(--murid-border);
    border-radius: 14px;
    background: var(--murid-bg-soft);
}
.urutan-jawaban--sasaran {
    background-color: var(--murid-info-soft);
}

/* Urutan Kalimat: daftar kartu bernomor yang diurutkan dengan drag & drop.
   Nomor (lingkaran biru) = posisi kartu saat ini; diperbarui murid.js saat kartu digeser. */
.urutan-petunjuk {
    margin: 0 0 var(--space-3);
    font-size: var(--murid-text-xs);
    font-weight: 700;
    color: var(--murid-text-muted);
}
.urutan-drag {
    position: relative; /* offsetTop kartu dihitung relatif ke list saat drag */
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}
.urutan-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 2px 10px 14px;
    background: var(--murid-bg);
    border: var(--murid-border-width) solid var(--murid-border);
    border-bottom-width: 5px;
    border-radius: 22px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.urutan-item__no {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--murid-secondary);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}
.urutan-item__teks {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--murid-text);
    overflow-wrap: anywhere;
}
.urutan-item__handle {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 14px;
    color: var(--murid-text-muted);
    cursor: grab;
    /* none: supaya menyeret dari gagang tidak menggulir halaman */
    touch-action: none;
}
.urutan-item__handle svg { fill: currentColor; }
.urutan-item__handle:focus-visible {
    outline: 3px solid var(--murid-secondary);
    outline-offset: -2px;
}
.urutan-drag--aktif,
.urutan-drag--aktif .urutan-item,
.urutan-drag--aktif .urutan-item__handle { cursor: grabbing; }
.urutan-item--drag {
    z-index: 10;
    border-color: var(--murid-secondary);
    background: var(--murid-info-soft);
    box-shadow: 0 10px 24px var(--murid-shadow-md);
}
.urutan-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .urutan-item { transition: none !important; }
}

/* Leaderboard (Fase 5 Bagian 3) */
.tab-murid-nav {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-3);
}
.tab-murid {
    flex: none;
    padding: var(--space-2) var(--space-3);
    border-radius: 999px;
    background: var(--murid-bg);
    border: 2px solid var(--murid-border);
    color: var(--murid-text);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
/* Tab aktif = biru MUDA + garis & teks biru (bukan biru penuh) supaya ikon warna-warni di dalam tab tetap
   terlihat -- ikon biru (bumi, dsb.) akan tenggelam di atas latar biru penuh. */
.tab-murid.active {
    background: var(--murid-info-soft);
    border-color: var(--murid-secondary);
    color: var(--murid-secondary);
}
.tab-murid .ikon-emoji { width: 18px; height: 18px; vertical-align: -4px; }
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--murid-border-soft);
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-row.saya {
    background: var(--murid-success-soft);
    border-radius: 12px;
    padding: var(--space-2) var(--space-2);
    margin: 0 calc(var(--space-2) * -1);
}
.leaderboard-rank {
    width: 28px;
    text-align: center;
    font-weight: 800;
    color: var(--murid-text-muted);
    flex: none;
}
.leaderboard-rank { display: flex; align-items: center; justify-content: center; } /* angka & medali sejajar tengah baris */
.leaderboard-rank .ikon-emoji { width: 26px; height: 26px; vertical-align: middle; } /* medali peringkat 1-3 */
.leaderboard-nama {
    flex: 1;
    font-weight: 700;
    font-size: 15px;
}
.leaderboard-poin {
    font-weight: 800;
    color: var(--murid-secondary); /* disamakan dgn profil-stat & status bar: poin = biru sekunder (sebelumnya kuning di sini) */
    white-space: nowrap;
}

/* Tombol versi outline (garis tipis, latar transparan) -- dipakai layar "Buka Papan Skor"
   untuk CTA sekunder yang tidak sekuat .btn-murid (hijau penuh) tapi tetap jelas bisa diketuk.
   Ukuran (tinggi/lebar/font) ikut .btn-murid sepenuhnya (cuma override warna) -- mekanisme
   shadow-tekannya disamakan dgn .btn-soal--ghost (border abu-abu + box-shadow abu-abu, BUKAN
   border-bottom manual) supaya satu keluarga sama seperti .btn-murid & .btn-soal. */
.btn-murid--outline {
    background: transparent;
    color: var(--murid-secondary);
    border: var(--murid-border-width) solid var(--murid-border);
    box-shadow: 0 4px 0 var(--murid-border);
}
.btn-murid--outline:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* ===== Layar "Buka Papan Skor" (leaderboard terkunci, lihat leaderboard/terkunci.php) =====
   Ditampilkan LeaderboardController::index() sebagai pengganti leaderboard sungguhan selama
   murid belum menyelesaikan cukup pelajaran (MIN_KUIS_SELESAI). */
.leaderboard-locked {
    text-align: center;
    padding-top: var(--space-4);
}
.leaderboard-locked__maskot {
    width: 120px;
    height: 120px;
    margin: 0 auto;
}
.leaderboard-locked__judul {
    font-weight: 800;
    font-size: var(--murid-text-lg);
    margin-top: var(--space-3);
}
.leaderboard-locked__sub {
    color: var(--murid-text-muted);
    font-size: var(--murid-text-base);
    margin: var(--space-2) auto var(--space-4);
    max-width: 320px;
}
.leaderboard-locked__preview {
    margin-top: var(--space-5);
    text-align: left;
}

/* Baris ghost/skeleton ala leaderboard-row, tapi abu-abu & tidak bisa diketuk -- sekadar
   memberi petunjuk visual "ini akan jadi daftar peringkat" tanpa membocorkan data sungguhan.
   Dipisah dari .admin-skeleton-* (skeleton.css, khusus token --admin-*) karena sisi murid
   pakai tema Duolingo sendiri (tokens-murid.css) & bisa tampil di mode gelap juga. */
.skel-row-murid {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}
.skel-row-murid__avatar,
.skel-row-murid__nama,
.skel-row-murid__poin {
    position: relative;
    overflow: hidden;
    background: var(--murid-border-soft);
    border-radius: 6px;
}
.skel-row-murid__avatar::after,
.skel-row-murid__nama::after,
.skel-row-murid__poin::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--murid-border), transparent);
    animation: skel-row-murid-shimmer 1.4s ease-in-out infinite;
}
.skel-row-murid__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.skel-row-murid__nama { flex: 1; height: 14px; max-width: 140px; }
.skel-row-murid__poin { width: 48px; height: 14px; flex: none; }
@keyframes skel-row-murid-shimmer {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .skel-row-murid__avatar::after,
    .skel-row-murid__nama::after,
    .skel-row-murid__poin::after {
        animation: none;
    }
}

/* ===== Halaman Hasil Kuis / review jawaban (Fase 6 Bagian 1) ===== */
.review-soal {
    border-left: 6px solid var(--murid-primary);
}
.review-soal.salah {
    border-left-color: var(--murid-danger);
}
.review-soal__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--murid-primary);
    margin-bottom: var(--space-1);
}
.review-soal.salah .review-soal__label {
    color: var(--murid-danger);
}
.review-soal__label .ikon-emoji { width: 20px; height: 20px; }
.review-soal__pertanyaan {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: var(--space-2);
}
.review-soal__baris {
    font-size: 14px;
    padding: 6px var(--space-2);
    border-radius: 10px;
    margin-bottom: 6px;
}
.review-soal__baris.jawabanmu {
    background: var(--murid-bg-soft);
}
.review-soal.salah .review-soal__baris.jawabanmu {
    background: var(--murid-danger-soft);
}
.review-soal__baris.benar {
    background: var(--murid-success-soft);
}
.review-soal__baris strong {
    font-weight: 800;
}

/* ===== Fase 6 Bagian 3: audit responsive/mobile-first ===== */
/* Sisi murid sudah mobile-first sejak awal (container 480px, tombol besar, bottom nav fixed).
   Tambahan ini memastikan layar sangat sempit (<360px, HP lama/murah) & layar lebar (tablet/
   desktop) tetap nyaman, tanpa mengubah pengalaman mobile yang sudah jadi acuan utama. */
@media (max-width: 359px) {
    .murid-container { padding: var(--space-2); }
    /* Cuma padding horizontal yang dikecilkan di layar sangat sempit -- tinggi & font TETAP
       sama persis dgn .btn-soal (lihat komentar di deklarasi .btn-murid), tidak boleh ikut
       menyusut supaya "100% ikut ukuran tombol Periksa" tetap berlaku di semua lebar layar. */
    .btn-murid { padding: 0 var(--space-3); }
}
@media (min-width: 600px) {
    /* Container tetap selebar mobile (konsisten dgn gaya Duolingo), tapi dipusatkan dengan kartu
       lebih lega. Isi bottom nav (.bottom-nav__in) sudah dibatasi 480px & dipusatkan sendiri,
       jadi wrapper luarnya cukup diberi garis tepi kiri/kanan supaya kelihatan seperti bingkai app. */
    body.tema-murid:not(.tema-murid--fokus) { background: var(--murid-bg-soft); }
    .bottom-nav { border-left: 1px solid var(--murid-border); border-right: 1px solid var(--murid-border); }
}

/* Ikon SVG pengganti emotikon. Sisi murid memakai versi WARNA-WARNI (Core\View::ikon(),
   assets/icons/dq) -- warnanya bawaan gambar, jadi CSS color di sekitarnya tidak berpengaruh. */
.ikon-emoji {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.15em;
    flex-shrink: 0;
}
.ikon-emoji--lg { width: 24px; height: 24px; vertical-align: -6px; } /* judul kartu (Misi Harian, Exam Readiness, dst.) */
.bottom-nav .dq-ico { width: 32px; height: 32px; display: block; }
.bottom-nav .dq-ico svg { display: block; width: 100%; height: 100%; }

/* ===== Fase F item 8: toast "Achievement baru!" (murid.js::tampilkanToastAchievement) =====
   Mengambang di ATAS layar (beda posisi dgn footer feedback .soal-foot yg di bawah) supaya tidak
   tumpang tindih kalau kebetulan tampil berbarengan (mis. jawaban terakhir benar SEKALIGUS
   membuka achievement). z-index tinggi supaya di atas bottom-nav (z-index 45). */
.achievement-toast {
    position: fixed;
    top: var(--space-3);
    left: 50%;
    transform: translate(-50%, -120%);
    z-index: 200;
    max-width: 320px;
    width: calc(100% - var(--space-3) * 2);
    background: var(--murid-bg);
    border-radius: var(--murid-border-radius);
    box-shadow: 0 6px 16px var(--murid-shadow-md);
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: transform 300ms ease;
}
.achievement-toast--show {
    transform: translate(-50%, 0);
}
.achievement-toast__ikon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}
.achievement-toast__judul {
    font-size: 11px;
    font-weight: 700;
    color: var(--murid-warning);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.achievement-toast__nama {
    font-size: 14px;
    font-weight: 800;
    color: var(--murid-text);
}

/* ===== Beranda murid (murid/dashboard.php): sapaan maskot, "Lanjutkan belajar", Kartu Misi =====
   Bahasa visual sama dengan kartu mapel (.mapel-item): garis tepi 2px + dasar 4px "3D", ubin ikon
   berwarna lembut (color-mix), tombol/chip bertekstur tekan. Semua warna dari token --murid-*
   supaya otomatis ikut mode gelap ([data-theme="dark"], tokens-murid.css). */

/* -- 1. Sapaan maskot: maskot di kiri, gelembung ucapan berekor di kanan (ala Duolingo). Warna
      gelembung diganti lewat --sapaan-bg/--sapaan-border per kondisi (kelas .sapaan--<kunci>
      dari SapaanMaskotService), ekornya ikut karena memakai variabel yang sama. -- */
.sapaan {
    --sapaan-bg: var(--murid-bg);
    --sapaan-border: var(--murid-border);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.sapaan--streak-terancam {
    /* Sengaja campuran OPAK (bukan --murid-danger-soft yang transparan): ekor gelembung menumpuk di atas garis tepi, jadi latarnya tidak boleh tembus pandang. */
    --sapaan-bg: color-mix(in srgb, var(--murid-danger) 12%, var(--murid-bg));
    --sapaan-border: var(--murid-danger);
}
.sapaan--naik-level {
    --sapaan-bg: color-mix(in srgb, var(--murid-warning) 16%, var(--murid-bg));
    --sapaan-border: var(--murid-warning);
}
.sapaan__maskot { flex: none; width: 96px; height: 96px; }
.sapaan__maskot .maskot-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sapaan__bubble {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--sapaan-bg);
    border: var(--murid-border-width) solid var(--sapaan-border);
    border-bottom-width: 4px;
    border-radius: var(--murid-border-radius);
}
/* Ekor: kotak berputar 45 derajat, hanya sisi kiri+bawahnya yang bergaris -> segitiga menunjuk maskot. */
.sapaan__bubble::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -9px;
    background: var(--sapaan-bg);
    border-left: var(--murid-border-width) solid var(--sapaan-border);
    border-bottom: var(--murid-border-width) solid var(--sapaan-border);
    transform: rotate(45deg);
}
.sapaan__judul { font-size: var(--murid-text-base); font-weight: 800; line-height: 1.25; }
.sapaan__pesan {
    margin-top: 2px;
    color: var(--murid-text-muted);
    font-size: var(--murid-text-sm);
    font-weight: 600;
    line-height: 1.4;
}
/* Gerak singkat & terbatas (bukan looping terus): maskot mengangguk sekali-dua kali saat halaman
   dibuka, meloncat saat naik level, bergetar kecil saat streak terancam. */
@keyframes maskot-angguk  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes maskot-loncat  { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-12px) rotate(-5deg); } 60% { transform: translateY(-4px) rotate(4deg); } }
@keyframes maskot-gemetar { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.sapaan__maskot { animation: maskot-angguk 2.4s ease-in-out 2; }
.sapaan__maskot--rayakan { animation: maskot-loncat 1s ease-in-out 3; }
.sapaan__maskot--cemas { animation: maskot-gemetar .4s ease-in-out 4; }
@media (prefers-reduced-motion: reduce) {
    .sapaan__maskot { animation: none; }
}
@media (max-width: 359px) {
    .sapaan { gap: var(--space-2); }
    .sapaan__maskot { width: 80px; height: 80px; }
}

/* -- 2. Lanjutkan belajar: kartu besar bertema warna mapel (--c diset per kartu di view dari
      View::mapelWarna()) -- elemen utama beranda, jadi paling besar & tombolnya paling mencolok.
      Teks tetap warna teks biasa (bukan --c) supaya kontrasnya aman untuk semua warna mapel. -- */
.lanjut {
    --c: var(--murid-primary);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: color-mix(in srgb, var(--c) 9%, var(--murid-bg));
    border: var(--murid-border-width) solid var(--c);
    border-bottom-width: 4px;
    border-radius: var(--murid-border-radius);
}
.lanjut__label {
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.lanjut__isi { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.lanjut__ikon {
    display: grid;
    place-items: center;
    flex: none;
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--c) 24%, var(--murid-bg));
}
.lanjut__ikon svg { display: block; width: 44px; height: 44px; }
.lanjut__teks { min-width: 0; }
.lanjut__judul { font-size: var(--murid-text-lg); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.lanjut__sub { margin-top: 2px; color: var(--murid-text-muted); font-size: var(--murid-text-sm); font-weight: 700; }
.lanjut__progres { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; }
.lanjut__bar { flex: 1; height: 14px; overflow: hidden; border-radius: 999px; background: var(--murid-border); }
.lanjut__bar-fill { position: relative; display: block; height: 100%; border-radius: 999px; background: var(--c); transition: width 400ms ease; }
.lanjut__bar-fill::after {
    content: "";
    position: absolute;
    left: 6px; right: 6px; top: 3px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
}
.lanjut__angka { flex: none; color: var(--murid-text-muted); font-size: var(--murid-text-xs); font-weight: 800; }
.lanjut__tombol { padding-top: 18px; padding-bottom: 18px; font-size: 22px; letter-spacing: .03em; }

/* -- 3. Kartu Misi ("Misi Harian", gaya Daily Quests Duolingo): baris = ubin ikon + nama + bar
      progres pil + penanda di kanan. --misi-warna = warna ubin & isi bar; baris bab mengambilnya
      dari status penguasaan (.misi-status--hijau/kuning/merah menyetel --misi-status-color). -- */
.misi {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    background: var(--murid-bg);
    border: var(--murid-border-width) solid var(--murid-border);
    border-radius: var(--murid-border-radius);
}
.misi__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.misi__judul { font-size: var(--murid-text-lg); font-weight: 800; }
/* Penghitung mundur ala Duolingo: pil oranye lembut, teks tetap gelap (oranye polos di atas putih kurang kontras). */
.misi__waktu {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, #ff9600 18%, var(--murid-bg));
    color: var(--murid-text);
    font-size: var(--murid-text-xs);
    font-weight: 800;
    white-space: nowrap;
}
.misi__grup {
    padding-top: var(--space-3);
    border-top: var(--murid-border-width) solid var(--murid-border);
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
/* Subjudul penjelas di bawah "Bab yang perlu dilatih": bab-bab ini cuma cuplikan dari kisi-kisi
   Exam Quest, bukan sistem terpisah -- lihat catatan penamaan di murid/dashboard.php. */
.misi__grup-sub {
    margin-top: 2px;
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}
.misi__baris {
    --misi-warna: var(--misi-status-color, var(--murid-secondary));
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: var(--murid-border-width) solid var(--murid-border);
}
.misi__baris:last-child { padding-bottom: 0; }
.misi__grup + .misi__baris,
.misi__grup-sub + .misi__baris { border-top: 0; padding-top: var(--space-2); }
.misi__baris--target { --misi-warna: var(--murid-warning); }
.misi__baris--target.is-selesai { --misi-warna: var(--murid-primary); }
/* Kartu Target Harian sekarang cuma berisi 1 baris (tidak ada .misi__grup di atasnya seperti
   dulu) -- baris ini tidak butuh garis pemisah atas lagi. */
.misi__baris--tanpa-garis { border-top: 0; padding-top: 0; }
/* Misi dinamis "Perbaiki soal yang salah": merah selama masih ada soal salah, hijau kalau sudah bersih. */
.misi__baris--salah { --misi-warna: var(--murid-danger); }
.misi__baris--salah.is-selesai { --misi-warna: var(--murid-primary); }
.misi__ikon {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--misi-warna) 20%, var(--murid-bg-soft));
}
.misi__ikon svg { display: block; width: 34px; height: 34px; }
.misi__isi { flex: 1; min-width: 0; }
.misi__nama {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: var(--murid-text-sm);
    font-weight: 800;
    line-height: 1.3;
}
.misi__sub { display: block; margin-top: 4px; color: var(--murid-text-muted); font-size: var(--murid-text-xs); font-weight: 700; line-height: 1.3; }
.misi__meta { display: flex; align-items: center; gap: var(--space-2); margin-top: 6px; }
.misi__bar { flex: 1; height: 16px; overflow: hidden; border-radius: 999px; background: var(--murid-border); }
.misi__bar-fill { position: relative; display: block; height: 100%; border-radius: 999px; background: var(--misi-warna); transition: width 400ms ease; }
.misi__bar-fill::after {
    content: "";
    position: absolute;
    left: 6px; right: 6px; top: 4px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
}
.misi__angka { flex: none; min-width: 2.6em; text-align: right; color: var(--murid-text-muted); font-size: var(--murid-text-xs); font-weight: 800; }
/* Penanda kanan baris target: cincin kosong -> ikon centang kalau target tercapai. */
.misi__cincin { flex: none; width: 32px; height: 32px; border: 3px solid var(--murid-border); border-radius: 50%; }
.misi__cek { flex: none; width: 34px; height: 34px; }
.misi__cek svg { display: block; width: 100%; height: 100%; }
/* Chip "Latih" (gaya tombol START Duolingo): baris bab seluruhnya link, chip hanya penanda aksi. */
.misi__baris--latih { color: inherit; }
.misi__chip {
    flex: none;
    padding: 8px 14px;
    background: var(--murid-bg);
    border: var(--murid-border-width) solid var(--murid-border);
    border-bottom-width: 4px;
    border-radius: 12px;
    color: var(--murid-secondary-dark); /* biru sekunder yang lebih tua: --murid-secondary di atas putih kurang kontras untuk teks kecil */
    font-size: var(--murid-text-xs);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: transform 100ms ease, border-bottom-width 100ms ease;
}
html[data-theme="dark"] .misi__chip { color: var(--murid-secondary); }
.misi__baris--latih:active .misi__chip { transform: translateY(2px); border-bottom-width: var(--murid-border-width); }
.misi__baris--latih:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: 2px; border-radius: 12px; }
.misi__semua { margin-top: var(--space-1); font-size: var(--murid-text-sm); }

/* -- 3 kartu misi terpisah (Kisi-Kisi Ujian, Perbaiki Soal, Target Harian): tiap kartu bertema
      .misi sebagai "shell" (padding/border/radius), CTA-nya tombol besar .btn-murid biasa, cuma
      dikasih jarak dari konten di atasnya lewat .misi__tombol. -- */
.misi__tombol { margin-top: var(--space-3); }

/* Kartu Kisi-Kisi Ujian: subjudul nama ujian & mapel di bawah judul, bar progres bertema warna
   sekunder (bukan status per-bab, karena ini angka kesiapan KESELURUHAN). */
.misi__sub-ujian { margin-top: 2px; margin-bottom: var(--space-3); color: var(--murid-text-muted); font-size: var(--murid-text-sm); font-weight: 700; }
.misi__meta--kisikisi { margin-bottom: 4px; }
.misi__meta--kisikisi .misi__bar-fill { background: var(--murid-secondary); }

/* Kartu Perbaiki Soal yang Salah: tepi merah selama masih ada soal salah, hijau + ikon centang
   di header kalau sudah beres (sama bahasa warna dengan baris lama .misi__baris--salah). */
.misi--perbaiki { border-color: var(--murid-danger); }
.misi--perbaiki.is-selesai { border-color: var(--murid-primary); }
.misi--perbaiki .misi__tombol { background: var(--murid-danger); box-shadow: 0 4px 0 color-mix(in srgb, var(--murid-danger) 70%, black); }
@media (prefers-reduced-motion: reduce) {
    .lanjut__bar-fill, .misi__bar-fill, .misi__chip { transition: none; }
}

/* ===== Pembuat avatar "Buat Avatar" (murid/profil/avatar.php, dijalankan murid.js #avatar-app) =====
   Layar penuh (mode fokus): bilah atas -> pratinjau -> tab bagian -> panel pilihan yang bisa digulir.
   Palet warna = kisi 5 kolom kotak berwarna (--w diset JS per tombol), gaya = kisi 2 kolom berisi
   thumbnail avatar (SVG disusun murid.js). Pilihan aktif ditandai bingkai biru sekunder. */
.avatar-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    background: var(--murid-bg);
}
.avatar-bar { flex: none; display: flex; align-items: center; gap: var(--space-3); padding: 14px 16px; }
.avatar-bar__tutup { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; color: var(--murid-text-muted); }
.avatar-bar__judul { flex: 1; margin: 0; text-align: center; color: var(--murid-text-muted); font-size: var(--murid-text-lg); font-weight: 800; }
.avatar-bar__selesai {
    flex: none; padding: 8px 4px; border: 0; background: none; cursor: pointer;
    color: var(--murid-secondary); font: inherit; font-size: var(--murid-text-sm); font-weight: 900;
    letter-spacing: .06em; text-transform: uppercase;
}
.avatar-bar__tutup:focus-visible, .avatar-bar__selesai:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: 2px; }

.avatar-pratinjau {
    flex: none;
    display: flex; justify-content: center; align-items: flex-end;
    height: clamp(200px, 34dvh, 300px);
    overflow: hidden;
    background: var(--murid-bg-soft);
    border-top: var(--murid-border-width) solid var(--murid-border);
    border-bottom: var(--murid-border-width) solid var(--murid-border);
}
.avatar-pratinjau svg { display: block; height: 100%; width: auto; }

.avatar-tabs {
    flex: none; display: flex; gap: 2px; padding: 0 8px; overflow-x: auto;
    border-bottom: var(--murid-border-width) solid var(--murid-border);
    scrollbar-width: none;
}
.avatar-tabs::-webkit-scrollbar { display: none; }
.avatar-tab {
    flex: none; display: grid; place-items: center; width: 64px; height: 58px; padding: 0;
    border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; background: none; cursor: pointer;
    color: var(--murid-text-muted);
}
.avatar-tab.is-aktif { color: var(--murid-secondary); border-bottom-color: var(--murid-secondary); }
.avatar-tab:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: -3px; border-radius: 10px; }

.avatar-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 40px; }
.avatar-bagian__judul { margin: 22px 0 14px; font-size: var(--murid-text-lg); font-weight: 800; color: var(--murid-text); }

.avatar-warna-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.avatar-warna {
    aspect-ratio: 1; padding: 6px; cursor: pointer;
    border: var(--murid-border-width) solid var(--murid-border); border-radius: 14px; background: var(--murid-bg);
}
.avatar-warna__isi { display: block; width: 100%; height: 100%; border-radius: 8px; background: var(--w); }

.avatar-opsi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.avatar-opsi {
    aspect-ratio: 1; padding: 10px; cursor: pointer; overflow: hidden;
    border: var(--murid-border-width) solid var(--murid-border); border-radius: 18px; background: var(--murid-bg);
}
.avatar-opsi__gambar { display: block; width: 100%; height: 100%; }
.avatar-opsi__gambar svg { display: block; width: 100%; height: 100%; }

.avatar-warna.is-dipilih, .avatar-opsi.is-dipilih { border-color: var(--murid-secondary); background: var(--murid-info-soft); }
.avatar-warna:focus-visible, .avatar-opsi:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: 2px; }

/* Kartu avatar di halaman Profil (murid/profil/index.php): avatar terpotong di bawah kartu (kepala + bahu),
   atau siluet putus-putus "+" untuk murid yang belum membuat avatar; tombol pensil di pojok = ubah avatar. */
.profil-hero { position: relative; }
.profil-hero__avatar, .profil-hero__kosong { display: flex; align-items: flex-end; height: 100%; }
.profil-hero__avatar svg, .profil-hero__kosong svg { display: block; height: 100%; width: auto; }
.profil-hero__siluet { fill: color-mix(in srgb, var(--murid-secondary) 40%, var(--murid-info-soft)); stroke: var(--murid-secondary); stroke-width: 3; stroke-dasharray: 9 7; stroke-linecap: round; stroke-linejoin: round; }
.profil-hero__plus { fill: none; stroke: var(--murid-secondary); stroke-width: 8; stroke-linecap: round; }
.profil-hero__ubah {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    display: grid; place-items: center; width: 44px; height: 44px;
    border: var(--murid-border-width) solid var(--murid-border); border-bottom-width: 4px; border-radius: 14px;
    background: var(--murid-bg); color: var(--murid-text);
}
.profil-hero__ubah svg { display: block; width: 22px; height: 22px; }
.profil-hero__ubah:active { border-bottom-width: 2px; transform: translateY(2px); }
.profil-hero__ubah:focus-visible, .profil-hero__kosong:focus-visible { outline: 3px solid var(--murid-secondary); outline-offset: 2px; }

/* ===== Halaman "Panduan" (murid/profil/panduan.php): cara pakai & fitur aplikasi utk anak SD.
   Tiap topik = <details class="panduan-item"> (native, tanpa JS) di dalam .card-murid supaya
   halamannya tidak jadi 1 tembok teks panjang -- murid tinggal ketuk topik yang mau dibaca. ===== */
.panduan-intro {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.panduan-intro__maskot { flex: none; }
.panduan-intro__teks { flex: 1; font-size: var(--murid-text-sm); color: var(--murid-text-muted); font-weight: 700; }
.panduan-item__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
    font-weight: 800;
    font-size: var(--murid-text-sm);
}
.panduan-item__head::-webkit-details-marker { display: none; }
.panduan-item__ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--murid-bg-soft);
    box-shadow: inset 0 0 0 2px var(--murid-ring-soft);
}
.panduan-item__ikon svg { display: block; width: 24px; height: 24px; }
.panduan-item__judul { flex: 1; }
.panduan-item__chev { flex: none; width: 20px; height: 20px; color: var(--murid-text-muted); transition: transform 200ms ease; }
.panduan-item__chev svg { display: block; width: 100%; height: 100%; }
.panduan-item[open] > .panduan-item__head .panduan-item__chev { transform: rotate(90deg); }
.panduan-item__body {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    padding-left: 52px;
    border-top: var(--murid-border-width) solid var(--murid-border);
    color: var(--murid-text);
    font-size: var(--murid-text-sm);
    line-height: 1.5;
}
.panduan-item__body p { margin-bottom: var(--space-2); }
.panduan-item__body p:last-child { margin-bottom: 0; }
.panduan-item__body ul { margin: 0 0 var(--space-2); padding-left: 1.2em; }
.panduan-item__body ul:last-child { margin-bottom: 0; }
.panduan-item__body li { margin-bottom: 6px; }
.panduan-item__body li:last-child { margin-bottom: 0; }
.panduan-item__body strong { color: var(--murid-text); }
.panduan-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
    font-weight: 800;
}
.panduan-status::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--dot, var(--murid-text-muted));
}
.panduan-status--hijau  { --dot: var(--murid-primary); }
.panduan-status--kuning { --dot: var(--murid-warning); }
.panduan-status--merah  { --dot: var(--murid-danger); }
.panduan-footer {
    text-align: center;
    color: var(--murid-text-muted);
    font-size: var(--murid-text-xs);
    font-weight: 700;
    margin-top: var(--space-2);
}

/* ================================================================================
   ===== Audit desktop lanjutan: sidebar tetap, kolom kanan, breadcrumb, hover,
   ===== grid daftar, tooltip (permintaan: manfaatkan ruang kosong desktop tanpa
   ===== merusak nuansa "app" mobile-first yang sudah jadi acuan, lihat catatan
   ===== lama di atas soal @media min-width:600px -- itu TIDAK diubah/dihapus).
   ================================================================================ */

:root {
    --murid-sidebar-w: 232px;
    --murid-rail-w: 300px;
}

/* ---------- Sidebar nav tetap (pengganti bottom-nav di layar lebar) ----------
   Markup SAMA persis dgn bottom-nav (1 sumber $menuUtama di layouts/murid.php), cuma tampilan
   beda: ikon+label rata kiri, bukan ikon bulat di bawah layar -- bottom-nav ala HP terasa aneh
   dipakai mouse. Disembunyikan default (mobile-first, sesuai pola breakpoint file ini), baru
   ditampilkan di blok @media min-width:1100px di bawah bersama kolom kanan & penyesuaian body. */
.sidebar-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--murid-sidebar-w);
    padding: var(--space-4) var(--space-3);
    border-right: 1px solid var(--murid-border);
    background: var(--murid-bg);
    overflow-y: auto;
    z-index: 45; /* sama seperti .bottom-nav */
}
.sidebar-nav__in { display: flex; flex-direction: column; gap: 4px; }
.sidebar-nav__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 2px solid transparent;
    border-radius: 14px;
    color: var(--murid-text);
    font-weight: 800;
    font-size: var(--murid-text-sm);
}
.sidebar-nav__link .dq-ico { width: 28px; height: 28px; flex: none; display: block; }
.sidebar-nav__link .dq-ico svg { display: block; width: 100%; height: 100%; }
.sidebar-nav__link:hover { background: var(--murid-bg-soft); }
.sidebar-nav__link.active { background: #ddf4ff; border-color: #84d8ff; }
html[data-theme="dark"] .sidebar-nav__link.active { background: #1b3a4b; border-color: #2a4e5f; }

/* ---------- Kolom kanan (.murid-rail): ringkasan streak/poin/xp, Target Harian, mini papan skor.
   Markup & data di layouts/murid.php ($railTarget/$railLeaderboardTop, lihat catatan lengkap di
   sana). Sengaja dibuat komponen KARTU sendiri (bukan menarik ulang .misi__* dari dashboard.php
   apa adanya) supaya tidak terikat variabel lokal punya dashboard -- lebih aman dipakai di SEMUA
   halaman murid dari 1 tempat (layout), gayanya tetap mengikuti bahasa visual kartu murid biasa
   (.murid-border-radius, dst). ---------- */
.murid-rail {
    display: none;
    flex-direction: column;
    gap: var(--space-3);
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: var(--murid-rail-w);
    padding: var(--space-4) var(--space-3);
    overflow-y: auto;
    border-left: 1px solid var(--murid-border);
}
.murid-rail__card {
    padding: var(--space-3);
    border: var(--murid-border-width) solid var(--murid-border);
    border-radius: var(--murid-border-radius);
    background: var(--murid-bg);
}
.murid-rail__ringkasan { display: flex; justify-content: space-around; }
.murid-rail__ringkasan-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-weight: 800; font-size: var(--murid-text-sm);
}
.murid-rail__ringkasan-item svg { display: block; width: 24px; height: 24px; }
.murid-rail__ringkasan-item--streak { color: #ff9600; }
.murid-rail__ringkasan-item--poin { color: var(--murid-secondary); }
.murid-rail__ringkasan-item--xp { color: var(--murid-warning); }
.murid-rail__card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.murid-rail__card-head h2 { font-size: var(--murid-text-base); font-weight: 800; }
.murid-rail__waktu { font-size: var(--murid-text-xs); color: var(--murid-text-muted); font-weight: 700; white-space: nowrap; }
.murid-rail__target-teks { font-size: var(--murid-text-sm); font-weight: 700; margin-bottom: 8px; }
.murid-rail__target-angka {
    display: flex; align-items: center; gap: 4px;
    margin-top: 6px;
    font-size: var(--murid-text-xs); font-weight: 800; color: var(--murid-text-muted);
}
.murid-rail__target-angka svg { display: block; width: 16px; height: 16px; color: var(--murid-primary); }
.murid-rail__lihat-semua { font-size: var(--murid-text-xs); font-weight: 800; color: var(--murid-secondary); }
.murid-rail__lb { display: flex; flex-direction: column; gap: 8px; }
.murid-rail__lb-baris { display: flex; align-items: center; gap: 8px; font-size: var(--murid-text-xs); font-weight: 700; }
.murid-rail__lb-baris.is-aku { color: var(--murid-primary-dark); font-weight: 900; }
.murid-rail__lb-no { flex: none; width: 22px; color: var(--murid-text-muted); }
.murid-rail__lb-nama { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.murid-rail__lb-poin { flex: none; }

/* ---------- Susun ulang di layar lebar: sidebar kiri + kolom kanan, container tetap 480px ----------
   Breakpoint dipisah dari @media min-width:600px yang lama (itu cuma nambah garis bingkai) --
   1100px dipilih supaya sidebar (232px) + container (480px) + rail (300px) + sedikit napas masih
   muat tanpa berdesakan. HANYA aktif utk murid sungguhan (body.tema-murid--shell, diset layout
   bareng status bar) -- mode fokus (pengerjaan soal) & pratinjau TETAP polos seperti sebelumnya,
   sesuai permintaan "halaman soal/kuis: pertahankan lebar sempit, jangan diubah". */
@media (min-width: 1100px) {
    body.tema-murid--shell {
        padding-bottom: 0; /* bottom-nav diganti sidebar, tidak perlu ruang cadangan di bawah lagi */
        padding-left: var(--murid-sidebar-w);
        padding-right: var(--murid-rail-w);
    }
    body.tema-murid--shell .bottom-nav { display: none; }
    body.tema-murid--shell .sidebar-nav { display: flex; }
    body.tema-murid--shell .murid-rail { display: flex; }
    /* Streak/poin/xp sudah pindah ke kolom kanan (.murid-rail__ringkasan) -- bilah atas lama
       disembunyikan di layar lebar supaya tidak tampil dobel. */
    body.tema-murid--shell .murid-statusbar { display: none; }
}

/* ---------- Breadcrumb (Mapel > Bab > ...), HANYA desktop ----------
   Markup: murid/partials/_breadcrumb.php, dipasang di halaman berkonteks 1 mapel (bab/index.php,
   exam-quest/index.php). Disembunyikan di HP: tombol kembali & course-switcher sudah cukup dekat
   ibu jari di sana; di mouse+layar lebar, klik-mundur berkali² lewat tombol kembali terasa lambat
   dibanding lompat langsung lewat breadcrumb. */
.murid-breadcrumb {
    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-3);
    font-size: var(--murid-text-xs);
    font-weight: 700;
    color: var(--murid-text-muted);
}
.murid-breadcrumb a { color: var(--murid-text-muted); }
.murid-breadcrumb a:hover { color: var(--murid-secondary); text-decoration: underline; }
.murid-breadcrumb__sep { color: var(--murid-border); }
.murid-breadcrumb__saat-ini { color: var(--murid-text); font-weight: 800; }
@media (min-width: 1100px) {
    .murid-breadcrumb { display: flex; }
}

/* ---------- Grid 2 kolom untuk daftar mapel di layar lebar ----------
   Modifier TERPISAH dari .mapel-list biasa (bukan mengubah .mapel-list langsung) -- .mapel-list
   juga dipakai progres/index.php, yang tiap kartunya membungkus accordion bertingkat (bab > misi >
   hasil soal); kalau ikut grid, panel accordion yang terbuka jadi sempit ke lebar 1 kolom grid.
   Grid ini dipakai KHUSUS di mata-pelajaran/index.php (daftar datar, tanpa accordion), lewat
   class tambahan .mapel-list--grid. Dibatasi 2 kolom (bukan 3) -- container tetap 480px (lihat
   catatan @media min-width:600px lama), 3 kolom di lebar segitu bikin tiap kartu terlalu sempit
   utk ikon 52px + judul + subjudul. */
@media (min-width: 600px) {
    .mapel-list--grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Hover berbeda dari :active, khusus perangkat mouse ----------
   Sebelumnya elemen kartu/tombol cuma punya :active (efek "tekan" utk jari) & kadang :hover yang
   SAMA persis (cuma ganti warna latar) -- di mouse itu jadi tidak ada "notifikasi" hover yang jelas
   sebelum diklik. Ditambah sedikit efek "terangkat" HANYA di perangkat dgn hover sungguhan +
   pointer presisi (mouse), dijaga :not(:active) supaya tidak menimpa efek "tekan" 3D yang sudah
   ada saat tombol/kartu itu SEDANG diklik (hover & active bisa aktif bersamaan saat klik mouse). */
@media (hover: hover) and (pointer: fine) {
    .mapel-item:hover:not(:active),
    .btn-murid:hover:not(:active):not(:disabled),
    .btn-soal:hover:not(:active):not(:disabled),
    .progres-rel__jalur:hover:not(:active),
    .dq-node:hover:not(:active):not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px var(--murid-shadow-sm);
    }
    .mapel-switcher-modal__item:hover:not(:active) { transform: translateY(-2px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    .mapel-item:hover:not(:active),
    .btn-murid:hover:not(:active):not(:disabled),
    .btn-soal:hover:not(:active):not(:disabled),
    .progres-rel__jalur:hover:not(:active),
    .dq-node:hover:not(:active):not(:disabled),
    .mapel-switcher-modal__item:hover:not(:active) {
        transform: none;
    }
}

/* ---------- Tooltip ringan (ikon tanpa label): ringkasan streak/poin/xp di kolom kanan ----------
   Elemen ini sudah punya data-tooltip (isinya sama dgn versi title/aria-label bilah status lama)
   -- HANYA aktif di perangkat mouse (hover:hover + pointer:fine) supaya tidak "nyangkut" nempel
   layar setelah disentuh (tap tidak selalu bersih meng-un-hover di browser layar sentuh). */
@media (hover: hover) and (pointer: fine) {
    [data-tooltip] { position: relative; }
    [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 50%; top: 100%;
        transform: translate(-50%, 6px);
        padding: 5px 10px;
        border-radius: 8px;
        background: var(--murid-text);
        color: var(--murid-bg);
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 120ms ease;
        z-index: 80;
    }
    [data-tooltip]:hover::after { opacity: 1; }
}