/* murid.css — tema "Petualangan Hoot" Ruang Murid (PR69–PR71)
 * Satu berkas dipakai index.html, tugas.php, materi.php, main.php.
 * Nama kelas lama (.bungkus .kartu .tombol .opsi .pesan ...) dipertahankan supaya markup halaman
 * lama tetap berfungsi. Mode gelap otomatis. Animasi dimatikan lewat body.anim-off. */
:root{
  --hijau:#1FA06A; --hijau-tua:#157A50; --hijau-muda:#DDF5E8;
  --kuning:#FFC83D; --kuning-muda:#FFF3CC;
  --jingga:#FF7A2F; --jingga-muda:#FFE6D6;
  --langit:#3D9BFF; --langit-muda:#DCEBFF;
  --ungu:#8B6CF0; --ungu-muda:#ECE6FF;
  --merah:#E5484D; --merah-muda:#FDE4E4;
  --teks:#16302A; --redup:#5C7168; --garis:#DDEAE2; --latar:#F3FBF6; --kartu:#FFFFFF;
  --biru:var(--hijau); --biru-muda:var(--hijau-muda);
  --radius:20px; --bayang:0 2px 0 rgba(22,48,42,.06),0 8px 20px -8px rgba(22,48,42,.18);
  --f-judul:'Baloo 2','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-isi:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --dasar:17px;
}
@media (prefers-color-scheme:dark){:root{
  --hijau:#3CC98A; --hijau-tua:#2AA871; --hijau-muda:#163A2B;
  --kuning-muda:#3A3015; --jingga-muda:#40261A; --langit-muda:#172C45; --ungu-muda:#2A2347; --merah-muda:#431D1F;
  --teks:#E8F3EC; --redup:#9DB3A8; --garis:#244036; --latar:#0E1D17; --kartu:#162A22;
  --bayang:0 2px 0 rgba(0,0,0,.25),0 8px 20px -8px rgba(0,0,0,.5);
}}
body.huruf-l{--dasar:19px} body.huruf-s{--dasar:15.5px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{font-size:var(--dasar)}
body{font-family:var(--f-isi);background:var(--latar);color:var(--teks);line-height:1.5;-webkit-text-size-adjust:100%;font-weight:500}
h1,h2,h3{font-family:var(--f-judul);font-weight:700;line-height:1.2;letter-spacing:-.01em}
h1{font-size:1.5rem} h2{font-size:1.15rem;margin-bottom:10px} h3{font-size:1rem}
.bungkus{max-width:560px;margin:0 auto;padding:16px 14px 40px}
.app{max-width:560px;margin:0 auto;padding:14px 14px calc(104px + env(safe-area-inset-bottom))}
.redup{color:var(--redup)}
a{color:var(--hijau-tua)}
@media (prefers-color-scheme:dark){a{color:var(--hijau)}}

/* ── kartu & tombol ── */
.kartu{background:var(--kartu);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--bayang)}
.tombol{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:12px 20px;border:none;border-radius:16px;
  background:var(--hijau);color:#fff;font:inherit;font-family:var(--f-judul);font-size:1.05rem;font-weight:700;cursor:pointer;text-decoration:none;
  box-shadow:0 4px 0 var(--hijau-tua);transition:transform .08s,box-shadow .08s;text-align:center}
.tombol:active{transform:translateY(3px);box-shadow:0 1px 0 var(--hijau-tua)}
.tombol:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.tombol.sekunder{background:var(--kartu);color:var(--teks);border:2px solid var(--garis);box-shadow:0 3px 0 var(--garis)}
.tombol.kecil{width:auto;min-height:44px;padding:8px 16px;font-size:.9rem}
.tombol.kuning{background:var(--kuning);color:#3A2C00;box-shadow:0 4px 0 #D9A400}
input[type=text],input[type=url],textarea{width:100%;padding:14px 16px;border:2px solid var(--garis);border-radius:16px;font:inherit;font-size:1rem;background:var(--kartu);color:var(--teks)}
input[type=text]{text-align:center;letter-spacing:1px}
input:focus,textarea:focus{outline:none;border-color:var(--hijau)}
textarea{resize:vertical}
:focus-visible{outline:3px solid var(--langit);outline-offset:2px}
.pesan{border-radius:16px;padding:12px 14px;font-size:.92rem;margin-bottom:12px;font-weight:700}
.merah{background:var(--merah-muda);color:#B4232A} .hijau{background:var(--hijau-muda);color:var(--hijau-tua)}
.kuning{background:var(--kuning-muda);color:#8A5A00} .biru{background:var(--langit-muda);color:#1D5FB8}
@media (prefers-color-scheme:dark){.merah{color:#FF9A9E}.hijau{color:#7DE0B2}.kuning{color:#FFD76A}.biru{color:#8DBEFF}}
.lencana{font-size:.72rem;font-weight:800;padding:3px 10px;border-radius:99px;white-space:nowrap;font-family:var(--f-judul)}
.l-hijau{background:var(--hijau-muda);color:var(--hijau-tua)} .l-kuning{background:var(--kuning-muda);color:#8A5A00}
.l-merah{background:var(--merah-muda);color:#B4232A} .l-langit{background:var(--langit-muda);color:#1D5FB8} .l-ungu{background:var(--ungu-muda);color:#5B3FD0}
@media (prefers-color-scheme:dark){.l-hijau{color:#7DE0B2}.l-kuning{color:#FFD76A}.l-merah{color:#FF9A9E}.l-langit{color:#8DBEFF}.l-ungu{color:#C2B2FF}}
.kosong{text-align:center;padding:22px 10px;color:var(--redup);font-size:.95rem}
.ikon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:1.4rem;flex:none}

/* ── Hoot (maskot) ── */
.hoot{width:86px;height:86px;flex:none;position:relative;transform-origin:50% 90%}
.hoot img{width:100%;height:100%;object-fit:contain;display:block}
.anim .hoot.idle{animation:hootNapas 3.2s ease-in-out infinite}
.anim .hoot.lambai{animation:hootLambai 1.1s ease-in-out 2}
.anim .hoot.senang{animation:hootLompat .7s cubic-bezier(.3,1.6,.5,1) 2}
@keyframes hootNapas{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1.5deg)}}
@keyframes hootLambai{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
@keyframes hootLompat{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-22px) scale(1.06,.96)}100%{transform:translateY(0) scale(1)}}
.sapa{display:flex;align-items:flex-end;gap:10px;margin:2px 0 14px}
.gelembung{position:relative;flex:1;background:var(--kartu);border-radius:20px 20px 20px 6px;padding:12px 15px;box-shadow:var(--bayang);font-size:.95rem}
.gelembung>b:first-child{font-family:var(--f-judul);font-size:1.1rem;display:block;margin-bottom:2px}
.gelembung b{font-weight:800}

/* ── layar masuk ── */
.masuk-atas{text-align:center;padding:20px 0 12px}
.masuk-atas .hoot{margin:0 auto 6px;width:110px;height:110px}
.masuk-atas p{color:var(--redup);font-size:.95rem;margin-top:4px}

/* ── beranda ── */
.atas{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--kuning),var(--jingga));color:#fff;display:grid;place-items:center;
  font-family:var(--f-judul);font-weight:800;font-size:1.25rem;overflow:hidden;flex:none;border:3px solid var(--kartu);box-shadow:var(--bayang)}
.avatar img{width:100%;height:100%;object-fit:cover}
.atas .nama{font-family:var(--f-judul);font-weight:700;font-size:1.05rem;line-height:1.15}
.atas .kelas{font-size:.8rem;color:var(--redup)}
.misi{display:block;text-decoration:none;color:#fff;border-radius:24px;padding:18px;margin-bottom:14px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--hijau) 0%,#12805A 100%);box-shadow:0 5px 0 var(--hijau-tua),0 14px 24px -12px rgba(18,128,90,.7)}
.misi.langit{background:linear-gradient(135deg,#3D9BFF,#2766D6);box-shadow:0 5px 0 #1D4FA8,0 14px 24px -12px rgba(39,102,214,.7)}
.misi.jingga{background:linear-gradient(135deg,#FF8F45,#E5581A);box-shadow:0 5px 0 #B8420F,0 14px 24px -12px rgba(229,88,26,.7)}
.misi.ungu{background:linear-gradient(135deg,#9B80F5,#6B4BDB);box-shadow:0 5px 0 #4E34B0,0 14px 24px -12px rgba(107,75,219,.7)}
.misi::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.14)}
.misi small{font-weight:800;opacity:.9;letter-spacing:.06em;font-size:.72rem;text-transform:uppercase}
.misi h2{color:#fff;font-size:1.3rem;margin:4px 0 4px}
.misi p{opacity:.92;font-size:.9rem}
.misi .aksi{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:#fff;color:#16302A;border-radius:14px;padding:10px 16px;font-family:var(--f-judul);font-weight:700}
.misi.selesai{background:linear-gradient(135deg,#FFC83D,#FF9F1C);color:#3A2C00;box-shadow:0 5px 0 #D9A400,0 14px 24px -12px rgba(217,164,0,.7)}
.misi.selesai h2{color:#3A2C00}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mini{background:var(--kartu);border-radius:18px;padding:12px 8px;text-align:center;box-shadow:var(--bayang)}
.mini .e{font-size:1.4rem;line-height:1}
.mini .n{font-family:var(--f-judul);font-weight:800;font-size:1.35rem;line-height:1.15;margin-top:2px}
.mini .t{font-size:.72rem;color:var(--redup);line-height:1.2}
.judul-bagian{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 8px}
.judul-bagian h2{margin:0}
.judul-bagian button{background:none;border:none;font:inherit;font-family:var(--f-judul);font-weight:700;color:var(--hijau-tua);cursor:pointer;padding:6px}
@media (prefers-color-scheme:dark){.judul-bagian button{color:var(--hijau)}}
.hari-ini{display:flex;align-items:center;gap:12px}
.hari-ini .ikon{background:var(--hijau-muda)}

/* ── daftar item (tugas/kuis/materi/game) ── */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:42px;padding:8px 16px;border-radius:99px;border:2px solid var(--garis);background:var(--kartu);color:var(--teks);font:inherit;font-family:var(--f-judul);font-weight:700;font-size:.95rem;cursor:pointer}
.chip.aktif{background:var(--hijau);border-color:var(--hijau);color:#fff}
.item{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:10px;background:var(--kartu);border-radius:20px;box-shadow:var(--bayang);text-decoration:none;color:inherit;min-height:68px}
.item:active{transform:scale(.985)}
.item .isi{flex:1;min-width:0}
.item .jdl{font-family:var(--f-judul);font-weight:700;font-size:1.02rem;line-height:1.2;overflow-wrap:anywhere}
.item .sub{font-size:.8rem;color:var(--redup);margin-top:2px}
.item .skor{font-family:var(--f-judul);font-weight:800;font-size:1.15rem;color:var(--hijau-tua);text-align:right;line-height:1}
@media (prefers-color-scheme:dark){.item .skor{color:var(--hijau)}}
.item .skor small{display:block;font-size:.65rem;color:var(--redup);font-family:var(--f-isi);font-weight:700;margin-top:3px}
.ik-tugas{background:var(--jingga-muda)} .ik-kuis{background:var(--langit-muda)} .ik-materi{background:var(--hijau-muda)} .ik-game{background:var(--ungu-muda)}
details.selesai-box{margin-top:6px} details.selesai-box summary{cursor:pointer;font-family:var(--f-judul);font-weight:700;padding:10px 4px;color:var(--redup)}
.kartu-game{padding:16px}
.kartu-game .atasg{display:flex;gap:12px;align-items:center}
.kartu-game .bar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}

/* ── progres / tantangan ── */
.bar-prog{height:12px;border-radius:99px;background:var(--garis);overflow:hidden}
.bar-prog>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--hijau),#7BDCA6);width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.bar-prog.kuning>i{background:linear-gradient(90deg,var(--kuning),var(--jingga))}
.tantang{display:flex;gap:12px;align-items:center;padding:10px 0}
.tantang+.tantang{border-top:2px dashed var(--garis)}
.tantang .isi{flex:1;min-width:0} .tantang .jdl{font-family:var(--f-judul);font-weight:700}
.tantang .ket{font-size:.78rem;color:var(--redup);margin:1px 0 6px}
.lenc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lenc{text-align:center;padding:12px 6px;border-radius:18px;background:var(--kuning-muda)}
.lenc .e{font-size:1.9rem;line-height:1.1} .lenc .n{font-family:var(--f-judul);font-weight:700;font-size:.85rem;line-height:1.15;margin-top:4px}
.lenc .c{font-size:.68rem;color:var(--redup);margin-top:2px}
.baris-set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.baris-set+.baris-set{border-top:2px dashed var(--garis)}
.baris-set .ket{font-size:.78rem;color:var(--redup);font-weight:600}
.sakelar{position:relative;width:58px;height:34px;flex:none;border-radius:99px;border:none;background:var(--garis);cursor:pointer;transition:background .15s}
.sakelar::after{content:"";position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.sakelar[aria-checked=true]{background:var(--hijau)} .sakelar[aria-checked=true]::after{transform:translateX(24px)}
.seg{display:flex;gap:6px} .seg button{min-width:46px;min-height:42px;border-radius:12px;border:2px solid var(--garis);background:var(--kartu);color:var(--teks);font:inherit;font-family:var(--f-judul);font-weight:700;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--hijau);border-color:var(--hijau);color:#fff}

/* ── navigasi bawah ── */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--kartu);border-top:2px solid var(--garis)}
.nav-dalam{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}   /* Okt 2026: 5 tab (+ Kebiasaan) */
.nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:58px;border:none;background:none;border-radius:16px;font:inherit;font-family:var(--f-judul);font-weight:700;font-size:.78rem;color:var(--redup);cursor:pointer}
.nav button .e{font-size:1.5rem;line-height:1.1;filter:grayscale(.7);opacity:.75;transition:transform .15s}
.nav button[aria-current=page]{background:var(--hijau-muda);color:var(--hijau-tua)}
@media (prefers-color-scheme:dark){.nav button[aria-current=page]{color:var(--hijau)}}
.nav button[aria-current=page] .e{filter:none;opacity:1;transform:translateY(-2px) scale(1.08)}
.nav .titik{position:absolute;top:4px;right:calc(50% - 26px);min-width:20px;height:20px;border-radius:99px;background:var(--jingga);color:#fff;font-size:.7rem;display:grid;place-items:center;padding:0 5px;border:2px solid var(--kartu)}

/* ── halaman tugas / materi (pakai kelas lama) ── */
.opsi{display:flex;gap:12px;align-items:flex-start;padding:14px;border:2px solid var(--garis);border-radius:18px;margin-bottom:10px;cursor:pointer;font-size:1rem;background:var(--kartu);transition:border-color .12s,background .12s,transform .1s;min-height:56px}
.opsi:active{transform:scale(.99)}
.opsi.pilih{border-color:var(--hijau);background:var(--hijau-muda);font-weight:800}
.opsi .huruf{flex:none;width:30px;height:30px;border-radius:50%;background:var(--latar);display:grid;place-items:center;font-size:.9rem;font-weight:800;font-family:var(--f-judul)}
.opsi.pilih .huruf{background:var(--hijau);color:#fff}
.anim .opsi.pilih .huruf{animation:pop .3s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.soal{margin-bottom:22px;padding-bottom:4px;scroll-margin-top:14px}
.soal-nomor{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tag{font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:99px;background:var(--ungu-muda);color:#5B3FD0}
.bilah{position:fixed;left:0;right:0;bottom:0;background:var(--kartu);border-top:2px solid var(--garis);padding:10px 14px calc(10px + env(safe-area-inset-bottom));z-index:20}
.bilah-dalam{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px}
.progres{flex:1;height:12px;border-radius:99px;background:var(--garis);overflow:hidden}
.progres>i{display:block;height:100%;background:linear-gradient(90deg,var(--hijau),#7BDCA6);width:0;transition:width .3s;border-radius:99px}
.simpan-info{font-size:.74rem;color:var(--redup);min-height:15px;margin-top:3px}
.lompat{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lompat button{width:40px;height:40px;border-radius:12px;border:2px solid var(--garis);background:var(--kartu);font:inherit;font-weight:800;color:var(--redup);cursor:pointer}
.lompat button.ok{background:var(--hijau);border-color:var(--hijau);color:#fff}
.konten{font-size:1rem;white-space:pre-wrap;word-break:break-word}
.bintang-baris{display:flex;justify-content:center;gap:8px;font-size:2.2rem;margin:6px 0}
.bintang-baris span{filter:grayscale(1);opacity:.35}
.bintang-baris span.nyala{filter:none;opacity:1}
.anim .bintang-baris span.nyala{animation:bintangPop .6s cubic-bezier(.3,1.8,.5,1) both}
.anim .bintang-baris span.nyala:nth-child(2){animation-delay:.18s}.anim .bintang-baris span.nyala:nth-child(3){animation-delay:.36s}
@keyframes bintangPop{0%{transform:scale(0) rotate(-40deg)}100%{transform:scale(1) rotate(0)}}
.konfeti{position:fixed;left:0;top:0;width:100%;height:0;pointer-events:none;z-index:100;overflow:visible}
.konfeti i{position:absolute;top:0;width:10px;height:14px;border-radius:3px;will-change:transform}
.skel{border-radius:20px;background:linear-gradient(90deg,var(--garis),var(--kartu),var(--garis));background-size:200% 100%}
.anim .skel{animation:kilau 1.3s linear infinite}
@keyframes kilau{to{background-position:-200% 0}}
body.anim-off *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:720px){.app{padding-top:28px}}

/* ══ PR4 (Okt 2026): profil diingat di perangkat ("Siapa yang belajar hari ini?") ══ */
.profil-baris{display:flex;align-items:stretch;gap:8px;margin-bottom:10px}
.profil-kartu{flex:1;display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 14px;border:2px solid var(--garis);border-radius:18px;
  background:var(--kartu);color:var(--teks);font:inherit;text-align:left;cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s}
.profil-kartu:hover,.profil-kartu:focus-visible{border-color:var(--hijau);box-shadow:var(--bayang);outline:none}
.profil-kartu:active{transform:scale(.98)}
.profil-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--f-judul);font-weight:800;font-size:1.3rem}
.profil-teks{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.profil-teks b{font-family:var(--f-judul);font-size:1.15rem}
.profil-teks span{font-size:.82rem;color:var(--redup)}
.profil-lupa{flex:none;width:44px;border:2px solid var(--garis);border-radius:18px;background:transparent;color:var(--redup);font:inherit;font-size:1rem;cursor:pointer}
.profil-lupa:hover,.profil-lupa:focus-visible{border-color:var(--merah);color:var(--merah);outline:none}
.cek-ingat{display:flex;gap:12px;align-items:flex-start;text-align:left;margin:16px 0 4px;padding:12px 14px;border-radius:14px;background:var(--hijau-muda);cursor:pointer}
.cek-ingat input{flex:none;width:24px;height:24px;margin-top:2px;accent-color:var(--hijau)}
.cek-ingat span{display:flex;flex-direction:column;font-size:.95rem}
.cek-ingat small{font-size:.8rem;color:var(--redup);font-weight:600;margin-top:2px}

/* ═══════════ PR5 (Okt 2026) — Hoot tumbuh bersamamu ═══════════
   Seluruhnya aditif. Kontras: teks putih hanya di atas latar gelap (>= 4.5:1). */
.sr-saja{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* perbaikan kontras tombol utama: putih di atas #1FA06A hanya ~3.2:1 → pakai hijau tua; mode gelap pakai teks gelap */
.tombol{background:var(--hijau-tua);box-shadow:0 4px 0 #0F5A3A}
.tombol:active{box-shadow:0 1px 0 #0F5A3A}
.tombol.kuning{background:var(--kuning);box-shadow:0 4px 0 #D9A400}
@media (prefers-color-scheme:dark){
  .tombol{background:var(--hijau);color:#06241A;box-shadow:0 4px 0 var(--hijau-tua)}
  .tombol:active{box-shadow:0 1px 0 var(--hijau-tua)}
  .tombol.kuning{color:#3A2C00}
}
/* kartu level */
.hoot-lv{color:#fff;position:relative;overflow:hidden;background:linear-gradient(135deg,#157A50,#0F5A3A)}
.hoot-lv::after{content:"";position:absolute;right:-34px;bottom:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.1)}
.hoot-lv.tema-senja{background:linear-gradient(135deg,#C2410C,#9A3412)}
.hoot-lv.tema-langit{background:linear-gradient(135deg,#1D5FB8,#1E3A8A)}
.hoot-lv.tema-galaksi{background:linear-gradient(135deg,#5B3FD0,#2E1F73)}
.hoot-lv.tema-merdeka{background:linear-gradient(135deg,#B91C1C,#7F1D1D)}
.hoot-lv.tema-batik{background:linear-gradient(135deg,#7A4A2B,#3E2415)}
.hoot-lv.tema-pemuda{background:linear-gradient(135deg,#0F766E,#134E4A)}
.lv-atas{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.lv-lencana{flex:none;width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-judul);font-weight:800;font-size:1.55rem;line-height:1}
.lv-lencana small{font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.lv-judul b{display:block;font-family:var(--f-judul);font-size:1.2rem;line-height:1.15}
.lv-judul span{font-size:.82rem;opacity:.92}
.lv-bar{height:12px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}
.lv-bar i{display:block;height:100%;border-radius:99px;background:#FFD76A;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.lv-ket{font-size:.8rem;margin-top:6px;opacity:.95}
.lv-baris{margin-top:10px;font-weight:700;font-size:.95rem;position:relative;z-index:1}
.lv-kecil{margin-top:4px;font-size:.78rem;opacity:.92;position:relative;z-index:1}
/* misi harian */
.harian .hr-kepala{display:flex;align-items:center;justify-content:space-between}
.hr-hitung{font-family:var(--f-judul);font-weight:800;font-size:.95rem;background:var(--hijau-muda);color:var(--hijau-tua);padding:3px 12px;border-radius:99px;margin-bottom:10px}
@media (prefers-color-scheme:dark){.hr-hitung{color:#7DE0B2}}
.hr-daftar{list-style:none}
.hr-item{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 12px;margin-bottom:8px;border:2px solid var(--garis);border-radius:16px;background:var(--kartu);color:var(--teks);font:inherit;text-decoration:none;text-align:left;cursor:pointer}
button.hr-item:active,a.hr-item:active{transform:scale(.985)}
.hr-item.sudah{background:var(--hijau-muda);border-color:transparent;cursor:default}
.hr-cek{flex:none;width:34px;height:34px;border-radius:50%;background:var(--latar);display:grid;place-items:center;font-size:1.1rem;font-weight:800}
.hr-item.sudah .hr-cek{background:var(--hijau-tua);color:#fff}
@media (prefers-color-scheme:dark){.hr-item.sudah .hr-cek{background:var(--hijau);color:#06241A}}
.hr-teks{flex:1;font-weight:700;font-size:.95rem;line-height:1.25}
.hr-item.sudah .hr-teks{text-decoration:line-through;text-decoration-thickness:1px;opacity:.85}
.hr-go{font-size:1.4rem;color:var(--redup)}
.hr-cukup{margin-top:6px;padding:12px 14px;border-radius:16px;background:var(--kuning-muda);color:#6B4700;font-size:.92rem}
@media (prefers-color-scheme:dark){.hr-cukup{color:#FFD76A}}
.hr-cukup b{display:block;font-family:var(--f-judul)}
/* kartu Misi Perbaikan */
.perbaikan{display:flex;gap:14px;align-items:flex-start;border:2px solid var(--langit-muda)}
.perbaikan.selesai{border-color:var(--hijau-muda)}
.pb-e{flex:none;width:52px;height:52px;border-radius:16px;background:var(--langit-muda);display:grid;place-items:center;font-size:1.6rem}
.perbaikan.selesai .pb-e{background:var(--hijau-muda)}
.pb-isi{flex:1;min-width:0}.pb-isi h2{margin-bottom:4px}
.pb-isi p{font-size:.9rem;margin-bottom:10px}.pb-isi .pb-kecil{margin:10px 0 0;font-size:.8rem;color:var(--redup)}
/* semangat & hari nasional */
.semangat{background:linear-gradient(135deg,var(--kuning-muda),var(--jingga-muda));border:2px solid var(--kuning)}
.semangat ul{list-style:none;margin-bottom:12px}.semangat li{padding:4px 0;font-weight:700}
.musim{display:flex;gap:12px;align-items:center;padding:14px;position:relative;border:2px dashed var(--garis)}
.musim-e{flex:none;font-size:2rem;line-height:1}
.musim-isi b{display:block;font-family:var(--f-judul)}.musim-isi span{font-size:.88rem;color:var(--redup)}
.musim-x{position:absolute;top:2px;right:2px;width:44px;height:44px;border:none;background:none;color:var(--redup);font-size:1rem;cursor:pointer;border-radius:50%}
.musim-isi{padding-right:30px}
/* tema */
.tema-daftar{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tema-pil{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:62px;padding:10px 12px;border-radius:16px;border:3px solid transparent;color:#fff;font:inherit;text-align:left;cursor:pointer;background:linear-gradient(135deg,#157A50,#0F5A3A)}
.tema-pil.tema-senja{background:linear-gradient(135deg,#C2410C,#9A3412)}.tema-pil.tema-langit{background:linear-gradient(135deg,#1D5FB8,#1E3A8A)}
.tema-pil.tema-galaksi{background:linear-gradient(135deg,#5B3FD0,#2E1F73)}.tema-pil.tema-merdeka{background:linear-gradient(135deg,#B91C1C,#7F1D1D)}
.tema-pil.tema-batik{background:linear-gradient(135deg,#7A4A2B,#3E2415)}.tema-pil.tema-pemuda{background:linear-gradient(135deg,#0F766E,#134E4A)}
.tema-pil b{font-family:var(--f-judul);font-size:.92rem;line-height:1.15}.tema-pil small{font-size:.72rem;opacity:.95}
.tema-pil.dipilih{border-color:var(--kuning);box-shadow:0 0 0 2px var(--kartu),0 0 0 4px var(--kuning)}
.tema-pil:disabled{filter:grayscale(.85) brightness(.7);cursor:not-allowed}
/* overlay Misi Perbaikan */
.ov-pb{position:fixed;inset:0;z-index:80;background:var(--latar);overflow-y:auto;-webkit-overflow-scrolling:touch}
.ov-dalam{max-width:560px;margin:0 auto;min-height:100%;padding:12px 16px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.ov-kepala{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ov-tutup{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid var(--garis);background:var(--kartu);color:var(--teks);font-size:1rem;cursor:pointer}
.ov-bar{flex:1;height:12px;border-radius:99px;background:var(--garis);overflow:hidden}
.ov-bar i{display:block;height:100%;border-radius:99px;background:var(--hijau);transition:width .5s}
.ov-hit{font-family:var(--f-judul);font-weight:800;font-size:.9rem;color:var(--redup);min-width:34px;text-align:right}
.ov-isi small{font-weight:800;color:var(--redup);font-size:.78rem;letter-spacing:.04em}
.ov-isi h2{font-size:1.25rem;margin:6px 0 16px;outline:none;overflow-wrap:anywhere}
.ov-opsi{display:flex;flex-direction:column;gap:10px}
.opsi-p{display:flex;gap:12px;align-items:flex-start;width:100%;min-height:56px;padding:12px 14px;border:2px solid var(--garis);border-radius:18px;background:var(--kartu);color:var(--teks);font:inherit;font-size:1rem;text-align:left;cursor:pointer;transition:border-color .12s,background .12s,transform .1s}
.opsi-p:active:not(:disabled){transform:scale(.99)}
.opsi-p .h{flex:none;width:30px;height:30px;border-radius:50%;background:var(--latar);display:grid;place-items:center;font-size:.9rem;font-weight:800;font-family:var(--f-judul)}
.opsi-p .t{flex:1;padding-top:3px;overflow-wrap:anywhere}
.opsi-p:disabled{cursor:default;opacity:1;color:var(--teks)}
.opsi-p.benar{border-color:var(--hijau-tua);background:var(--hijau-muda)}
.opsi-p.benar .h{background:var(--hijau-tua);color:#fff}
.opsi-p.salah{border-color:#C26A00;background:var(--kuning-muda)}
.opsi-p.salah .h{background:#C26A00;color:#fff}
@media (prefers-color-scheme:dark){.opsi-p.benar .h{background:var(--hijau);color:#06241A}.opsi-p.salah .h{background:#FFC83D;color:#3A2C00}.opsi-p.salah{border-color:#FFC83D}}
.ov-umpan{margin-top:14px}
.umpan{border-radius:16px;padding:12px 14px;margin-bottom:12px;font-size:.93rem}
.umpan b{font-family:var(--f-judul);font-size:1.05rem}.umpan p{margin-top:4px}
.umpan.ok{background:var(--hijau-muda);color:var(--hijau-tua)}.umpan.belum{background:var(--kuning-muda);color:#6B4700}.umpan.info{background:var(--langit-muda);color:#1D5FB8}
@media (prefers-color-scheme:dark){.umpan.ok{color:#7DE0B2}.umpan.belum{color:#FFD76A}.umpan.info{color:#8DBEFF}}
.umpan .pemb{font-weight:600}
.ov-ringkas{text-align:center;padding-top:10px}
.ov-ringkas .hoot{margin:0 auto 6px;width:96px;height:96px}
.ov-ringkas h2{margin-bottom:6px}.ov-ringkas p{margin-bottom:10px}
.ov-skor b{font-family:var(--f-judul);font-size:2rem;color:var(--hijau-tua)}
@media (prefers-color-scheme:dark){.ov-skor b{color:var(--hijau)}}
.ov-xp{font-family:var(--f-judul);font-weight:800;color:#8A5A00}
@media (prefers-color-scheme:dark){.ov-xp{color:#FFD76A}}
/* jenjang usia: kelas 1-3 lebih besar & lega; SMA lebih ringkas */
.umur-kecil .opsi-p{min-height:68px;font-size:1.15rem}
.umur-kecil .ov-isi h2{font-size:1.45rem}
.umur-kecil .hr-item{min-height:60px}
.umur-sma .hoot-lv{padding:16px}
@media (prefers-reduced-motion:reduce){.lv-bar i,.ov-bar i{transition:none}}
body.anim-off .lv-bar i,body.anim-off .ov-bar i{transition:none}
.chip.aktif{background:var(--hijau-tua);border-color:var(--hijau-tua)}
@media (prefers-color-scheme:dark){.chip.aktif{background:var(--hijau);border-color:var(--hijau);color:#06241A}}

/* ── FITUR (Okt 2026): Jurnal 7 Kebiasaan Anak Indonesia Hebat ── */
.kh-kepala{background:linear-gradient(135deg,var(--hijau-muda),var(--kuning-muda))}
.kh-kepala h2{margin-bottom:4px}
.kh-daftar-mini{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.kh-daftar-mini span{background:var(--latar);border-radius:99px;padding:4px 10px;font-size:.8rem}
.kh-hari{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:14px}
.kh-hari button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:14px;border:2px solid var(--garis);background:var(--kartu);color:var(--teks);font:inherit;cursor:pointer;min-height:64px}
.kh-hari button span{font-size:.62rem;color:var(--redup);font-weight:700;white-space:nowrap}
.kh-hari button b{font-family:var(--f-judul);font-size:1.05rem;line-height:1.1}
.kh-hari button i{font-style:normal;font-size:.66rem;color:var(--hijau-tua);font-weight:800}
.kh-hari button[aria-selected="true"]{border-color:var(--hijau);background:var(--hijau-muda)}
.kh-daftar{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.kh-item{border-radius:16px;border:2px solid var(--garis);background:var(--kartu);overflow:hidden;transition:border-color .15s,background .15s}
.kh-item.on{border-color:var(--hijau);background:var(--hijau-muda)}
.kh-tog{display:flex;align-items:center;gap:10px;width:100%;min-height:58px;padding:9px 12px;background:none;border:0;color:var(--teks);font:inherit;text-align:left;cursor:pointer}
.kh-tog .e{font-size:1.6rem;width:34px;text-align:center;flex:none}
.kh-tog .n{flex:1;font-weight:800;line-height:1.25}
.kh-tog .n small{display:block;font-weight:600;font-size:.74rem;color:var(--redup)}
.kh-tog .c{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--garis);display:grid;place-items:center;font-weight:900;color:#fff;background:var(--kartu)}
.kh-item.on .kh-tog .c{background:var(--hijau);border-color:var(--hijau)}
.kh-ekstra{display:flex;align-items:center;gap:8px;padding:0 12px 10px 56px;font-size:.85rem;font-weight:700;color:var(--redup)}
.kh-ekstra input{flex:1;min-width:0;font:inherit;font-size:.9rem;padding:8px 10px;border-radius:12px;border:2px solid var(--garis);background:var(--kartu);color:var(--teks)}
.kh-ekstra input[type=time]{flex:none;width:auto}
.kh-ortu{padding:0 12px 8px 56px;font-size:.74rem;font-weight:800;color:var(--hijau-tua)}
.kh-pekan{display:grid;gap:6px}
.kh-pekan>div{display:grid;grid-template-columns:28px 1fr 22px;gap:8px;align-items:center}
.kh-pekan b{text-align:right;font-size:.85rem}
.kh-pekan .bar-prog{margin:0}