/* Tema LMS edu1st: "Ceria" (terang, bawaan) dan "Malam Ceria" (html[data-tema="malam"]) */
:root{
  --aksen:#6b4fe0;--aksen-tua:#4f36b8;--aksen-muda:#ece7ff;--teks-tombol:#fff;
  --tinta:#2b2540;--redup:#6f6888;--garis:#efe3cf;--latar:#fff7ec;--kartu:#fff;--bayang:#f1e2cc;
  --isian:#fff;--isian-garis:#e9dcc6;
  --koral:#ffe0d6;--koral-t:#b4482a;--hijau:#d6f3ea;--hijau-t:#16795c;--ungu:#e6e0ff;--ungu-t:#5b45c4;--kuning:#fff1c2;--kuning-t:#8a6200;
  --biru:#dcecff;--biru-t:#1f5fa8;--pink:#ffdcec;--pink-t:#a3306a;
  --baik:#16795c;--baik-muda:#d6f3ea;--buruk:#b3261e;--buruk-muda:#ffe3df;--awas:#8a6200;--awas-muda:#fff1c2;
  --wa:#1f8f4e;--r:22px;
  color-scheme:light;
}
html[data-tema="malam"]{
  --aksen:#7cf5d6;--aksen-tua:#5fe0bf;--aksen-muda:#24504a;--teks-tombol:#0b2a24;
  --tinta:#f1efff;--redup:#b3acd6;--garis:#2f2a5e;--latar:#16132e;--kartu:#211d45;--bayang:#0f0c24;
  --isian:#2a2552;--isian-garis:#3b3570;
  --koral:#3d2440;--koral-t:#ff9a7a;--hijau:#173f45;--hijau-t:#7cf5d6;--ungu:#2e2760;--ungu-t:#b9a4ff;--kuning:#3d3420;--kuning-t:#ffd36e;
  --biru:#1d3157;--biru-t:#8cc0ff;--pink:#3f2140;--pink-t:#ff9ccf;
  --baik:#7cf5d6;--baik-muda:#173f45;--buruk:#ff9a9a;--buruk-muda:#3d1f2c;--awas:#ffd36e;--awas-muda:#3d3420;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Nunito,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:16px;line-height:1.55;color:var(--tinta);background:var(--latar);transition:background .25s,color .25s}
[hidden]{display:none!important}
a{color:var(--aksen-tua);font-weight:700}
html[data-tema="malam"] a{color:var(--aksen)}

/* kepala */
.kepala{background:var(--kartu);border-bottom:2px solid var(--garis)}
.kepala .isi{max-width:960px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.merek{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;text-decoration:none;color:var(--tinta)}
html[data-tema="malam"] .merek{color:var(--tinta)}
.logo{width:38px;height:38px;border-radius:12px;background:#ff8a5b;color:#fff;display:grid;place-items:center;font-weight:900;font-size:.85rem;box-shadow:0 3px 0 #e2643a}
.merek small{display:block;font-weight:600;font-size:.75rem;color:var(--redup);line-height:1.2}
.kepala .kanan{margin-left:auto;display:flex;gap:8px;align-items:center}
.tombol-tema{width:42px;height:42px;border-radius:50%;border:2px solid var(--garis);background:var(--latar);font-size:1.15rem;cursor:pointer;display:grid;place-items:center;padding:0}
.tombol-tema:hover{border-color:var(--aksen)}

main{max-width:960px;margin:0 auto;padding:24px 16px 48px}
.sempit{max-width:520px;margin:0 auto}
h1{font-size:1.6rem;margin:0 0 6px;line-height:1.25;font-weight:800}
h2{font-size:1.15rem;margin:0 0 8px;font-weight:800}
h3{font-size:1rem;margin:0 0 4px;font-weight:800}
p{margin:0 0 12px}
.redup{color:var(--redup);font-size:.95rem}
.kartu{background:var(--kartu);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:0 4px 0 var(--bayang)}

/* langkah bernomor */
.langkah{display:flex;gap:12px;align-items:flex-start}
.nomor{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ungu);color:var(--ungu-t);display:grid;place-items:center;font-weight:900}
.langkah>div{flex:1;min-width:0}

/* formulir */
label{display:block;font-weight:800;font-size:.92rem;margin:14px 0 6px}
input,textarea,select{font:inherit;width:100%;padding:12px 14px;border:2px solid var(--isian-garis);border-radius:14px;background:var(--isian);color:var(--tinta)}
input::placeholder,textarea::placeholder{color:var(--redup);opacity:.8}
input:focus,textarea:focus{outline:none;border-color:var(--aksen)}
textarea{font-family:Consolas,ui-monospace,monospace;font-size:.85rem}

/* tombol */
.tombol{font:inherit;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 20px;border-radius:14px;border:0;background:var(--aksen);color:var(--teks-tombol);cursor:pointer;text-decoration:none;min-height:46px;box-shadow:0 4px 0 var(--aksen-tua);transition:transform .08s,box-shadow .08s}
.tombol:hover{filter:brightness(1.05)}
.tombol:active{transform:translateY(3px);box-shadow:0 1px 0 var(--aksen-tua)}
.tombol:disabled{opacity:.6;cursor:wait}
.tombol.garis{background:var(--kartu);color:var(--tinta);box-shadow:0 0 0 2px var(--garis) inset,0 4px 0 var(--bayang)}
.tombol.garis:active{box-shadow:0 0 0 2px var(--garis) inset,0 1px 0 var(--bayang)}
.tombol.kecil{padding:6px 14px;min-height:36px;font-size:.88rem;border-radius:12px}
.tombol.wa{background:var(--wa);color:#fff;box-shadow:0 4px 0 #156a39}
.tombol.penuh{width:100%}
.baris{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}

/* pesan & kotak */
.pesan{font-size:.92rem;margin-top:12px;font-weight:700}
.pesan:empty{display:none}
.pesan.buruk{color:var(--buruk);background:var(--buruk-muda);padding:10px 14px;border-radius:14px}
.pesan.baik{color:var(--baik);background:var(--baik-muda);padding:10px 14px;border-radius:14px}
.pesan.awas{color:var(--awas);background:var(--awas-muda);padding:10px 14px;border-radius:14px}
.kotak-id{font-family:Consolas,ui-monospace,monospace;font-size:.8rem;word-break:break-all;background:var(--latar);border:2px dashed var(--garis);border-radius:14px;padding:10px 12px}
.info{background:var(--awas-muda);color:var(--awas);border-radius:16px;padding:12px 16px;font-size:.92rem;font-weight:700}

/* beranda */
.sapa-kecil{display:block;font-size:.95rem;color:var(--redup);font-weight:700}
.kepala-beranda{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.kepala-beranda>div{flex:1;min-width:0}
.avatar{flex:none;width:56px;height:56px;border-radius:50%;background:var(--kuning);display:grid;place-items:center;font-size:1.8rem;box-shadow:0 3px 0 var(--bayang)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.statistik{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.statistik .kartu{margin:0;padding:14px 16px;display:flex;align-items:center;gap:12px}
.ikon{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem}
.w-koral{background:var(--koral);color:var(--koral-t)}.w-hijau{background:var(--hijau);color:var(--hijau-t)}
.w-ungu{background:var(--ungu);color:var(--ungu-t)}.w-kuning{background:var(--kuning);color:var(--kuning-t)}
.w-biru{background:var(--biru);color:var(--biru-t)}.w-pink{background:var(--pink);color:var(--pink-t)}
.angka{font-size:1.6rem;font-weight:900;line-height:1.1}
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.menu .item{background:var(--kartu);border-radius:var(--r);padding:16px;box-shadow:0 4px 0 var(--bayang);display:flex;gap:12px;align-items:flex-start}
.menu .item>div{flex:1}
.menu .item p{margin:0 0 8px}
.menu .item.nanti{opacity:.75}
.menu a.item,.menu button.item{color:inherit;text-decoration:none;font:inherit;text-align:left;border:0;cursor:pointer;transition:transform .08s}
.menu a.item:hover,.menu button.item:hover{transform:translateY(-2px)}
.menu a.item:focus-visible,.menu button.item:focus-visible{outline:3px solid var(--aksen);outline-offset:2px}

/* halaman menu */
.kembali{display:inline-block;margin-bottom:8px;text-decoration:none;font-weight:800}
.chip-baris{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.chip{font:inherit;font-weight:800;padding:8px 14px;border-radius:999px;border:2px solid var(--garis);background:var(--kartu);color:var(--tinta);cursor:pointer}
.chip span{display:inline-block;min-width:22px;padding:0 6px;border-radius:999px;background:var(--latar);font-size:.8rem;margin-left:2px}
.chip.aktif{background:var(--aksen);border-color:var(--aksen);color:var(--teks-tombol)}
.chip.aktif span{background:rgba(255,255,255,.25)}
.chip.tambah{border-style:dashed;color:var(--redup)}
.judul-baris{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.grid.dua{grid-template-columns:1fr 1fr;gap:12px}

/* tabel (berubah jadi kartu di HP) */
.tabel-wadah{overflow-x:auto}
.tabel{width:100%;border-collapse:collapse;font-size:.95rem}
.tabel th{text-align:left;font-size:.8rem;color:var(--redup);font-weight:800;padding:8px 10px;border-bottom:2px solid var(--garis)}
.tabel td{padding:10px;border-bottom:1px solid var(--garis);vertical-align:middle}
.tabel tr.nonaktif td{opacity:.6}
.tabel tr.st-masalah td{background:var(--buruk-muda)}
.tabel tr.st-perbarui td{background:var(--kuning)}
.mono{font-family:Consolas,ui-monospace,monospace;font-weight:700;letter-spacing:.05em}
@media (max-width:600px){
  .tabel thead{display:none}
  .tabel,.tabel tbody,.tabel tr,.tabel td{display:block;width:100%}
  .tabel tr{padding:10px 0;border-bottom:1px solid var(--garis)}
  .tabel td{border:0;padding:2px 0;display:flex;gap:8px}
  .tabel td[data-l]::before{content:attr(data-l);min-width:52px;color:var(--redup);font-size:.8rem;font-weight:800}
  .tabel td:last-child{justify-content:flex-end}
  /* daftar siswa: ringkas 2 baris per siswa */
  .tabel.siswa tr{display:grid;grid-template-columns:28px 1fr auto;gap:2px 10px;align-items:center}
  .tabel.siswa td{padding:0}
  .tabel.siswa td::before{content:none!important}
  .tabel.siswa td:nth-child(2)::before{content:"NIS "!important;min-width:0;font-size:inherit;font-weight:600}
  .tabel.siswa td:nth-child(1){grid-row:1/3;grid-column:1;color:var(--redup);font-weight:800}
  .tabel.siswa td:nth-child(3){grid-row:1;grid-column:2}
  .tabel.siswa td:nth-child(2),.tabel.siswa td:nth-child(4){grid-row:2;grid-column:2;font-size:.85rem;color:var(--redup);display:inline}
  .tabel.siswa td:nth-child(2)::after{content:"  ·  PIN " attr(data-pin)}
  .tabel.siswa td:nth-child(4){display:none}
  .tabel.siswa td:nth-child(5){grid-row:1/3;grid-column:3}
}

/* dialog */
.dialog{border:0;border-radius:24px;padding:22px;width:min(480px,calc(100vw - 24px));background:var(--kartu);color:var(--tinta);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.dialog.lebar{width:min(760px,calc(100vw - 24px))}
.dialog::backdrop{background:rgba(30,20,50,.45)}
.dialog h2{margin-bottom:4px}
.dlg-aksi{margin-top:18px}
.dlg-aksi .isi-sisa{flex:1}
.dialog .tabel-wadah{max-height:45vh;overflow:auto}
.tombol.hapus{color:var(--buruk)}
.pilih-ikon{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.pilih-ikon button{font-size:1.3rem;height:42px;border-radius:12px;border:2px solid var(--garis);background:var(--latar);cursor:pointer}
.pilih-ikon button[aria-pressed="true"]{border-color:var(--aksen);background:var(--aksen-muda)}
.pilih-warna{display:flex;gap:10px}
.pilih-warna button{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.pilih-warna button[aria-pressed="true"]{border-color:var(--tinta)}

/* materi & bab */
.kartu.bab h2{font-size:1.2rem}
details.tp{margin:4px 0 12px;background:var(--latar);border-radius:14px;padding:8px 14px}
details.tp summary{cursor:pointer;font-weight:800;color:var(--redup);font-size:.92rem}
details.tp ol{margin:8px 0 4px;padding-left:22px}
.daftar-materi{display:flex;flex-direction:column;gap:8px}
.baris-materi{font:inherit;display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 14px;border-radius:14px;border:2px solid var(--garis);background:var(--kartu);color:var(--tinta);cursor:pointer}
.baris-materi:hover{border-color:var(--aksen)}
.baris-materi .judul{flex:1;font-weight:800;min-width:0}
.baris-materi small{color:var(--redup);white-space:nowrap}
@media (max-width:480px){.baris-materi{flex-wrap:wrap}.baris-materi small{width:100%;padding-left:30px}}

/* editor */
.editor-kartu{padding:0}
.bilah-alat{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:2px solid var(--garis);background:var(--kartu);border-radius:22px 22px 0 0;position:sticky;top:0;z-index:2}
.bilah-alat button{font:inherit;font-size:.85rem;font-weight:700;min-height:36px;padding:4px 10px;border-radius:10px;border:0;background:transparent;color:var(--tinta);cursor:pointer}
.bilah-alat button:hover{background:var(--aksen-muda)}
.bilah-alat .pemisah{width:2px;background:var(--garis);margin:4px 2px;flex:none}
@media (max-width:600px){
  .bilah-alat{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .bilah-alat button{flex:none;white-space:nowrap}
  .isi-materi.editor{padding:14px}
  .bilah-simpan .isi-sisa{display:none}
}
.isi-materi.editor{min-height:340px;padding:18px 20px;outline:none}
.isi-materi.editor:empty::before{content:attr(data-kosong);color:var(--redup)}
#ePratinjau{padding:18px 20px}
.bilah-simpan{position:sticky;bottom:0;background:var(--latar);padding:10px 0;margin-top:0}
.pratinjau-media{margin-top:12px}
.pratinjau-media img{max-width:100%;max-height:240px;border-radius:12px}

/* isi materi (sama untuk guru & siswa) */
.isi-materi{font-size:1.02rem;line-height:1.7;overflow-wrap:anywhere}
.isi-materi h2{font-size:1.35rem;margin:18px 0 8px}
.isi-materi h3{font-size:1.12rem;margin:16px 0 6px}
.isi-materi p{margin:0 0 12px}
.isi-materi ul,.isi-materi ol{margin:0 0 12px;padding-left:26px}
.isi-materi li{margin-bottom:4px}
.isi-materi blockquote{margin:0 0 14px;padding:12px 16px;border-radius:14px;background:var(--kuning);color:var(--kuning-t);font-weight:600}
.isi-materi img{max-width:100%;height:auto;border-radius:14px;display:block;margin:6px auto}
.isi-materi table{border-collapse:collapse;width:100%;margin:0 0 14px;display:block;overflow-x:auto}
.isi-materi th,.isi-materi td{border:2px solid var(--garis);padding:8px 10px;text-align:left;vertical-align:top;min-width:80px}
.isi-materi th{background:var(--ungu);color:var(--ungu-t)}
.isi-materi a{word-break:break-all}
.isi-materi hr{border:0;border-top:2px dashed var(--garis);margin:16px 0}
.isi-materi figure{margin:0 0 14px}
.bingkai-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.bingkai-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.isi-materi figcaption{font-size:.85rem;color:var(--redup);text-align:center;margin-top:4px}

/* kotak jawaban LKPD */
.isi-materi figure.kotak-jawab{border:2px dashed var(--isian-garis);border-radius:14px;background:var(--latar);padding:10px 14px;margin:0 0 14px;color:var(--redup);font-size:.85rem;font-weight:700}

/* jenis konten */
.lencana.jenis-materi{background:var(--biru);color:var(--biru-t)}
.lencana.jenis-lkpd{background:var(--hijau);color:var(--hijau-t)}
.lencana.jenis-evaluasi{background:var(--koral);color:var(--koral-t)}

/* buat dengan AI */
.sempit-lebar{max-width:760px;margin:0 auto}
.pilih-jenis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 4px}
.pilih-jenis button{font:inherit;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border-radius:16px;border:2px solid var(--garis);background:var(--kartu);color:var(--tinta);cursor:pointer}
.pilih-jenis button span{font-size:1.6rem}
.pilih-jenis button[aria-pressed="true"]{border-color:var(--aksen);background:var(--aksen-muda)}
.daftar-centang{display:flex;flex-direction:column;gap:6px}
.daftar-centang label{display:flex;gap:8px;align-items:flex-start;font-weight:600;margin:0}
.daftar-centang input{width:auto;margin-top:4px;flex:none}
.jumlah-soal{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.jumlah-soal label{margin:0;font-size:.85rem}
#aiPerintah,#aiJawaban{font-size:.82rem}

/* editor soal */
.kartu-soal .nomor{width:34px;height:34px}
.kartu-soal select[data-tipe]{width:auto;padding:8px 12px}
.kartu-soal.galat{box-shadow:0 0 0 3px var(--buruk) inset,0 4px 0 var(--bayang)}
.kartu-soal textarea{font-family:inherit;font-size:.98rem}
.daftar-opsi{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.opsi-baris{display:flex;gap:8px;align-items:center}
.opsi-baris input:not([type]){flex:1}
.kunci-pilih{display:flex;align-items:center;gap:4px;margin:0;cursor:pointer;flex:none}
.kunci-pilih{position:relative}
.kunci-pilih input{position:absolute;opacity:0;width:30px;height:30px;margin:0;cursor:pointer}
.kunci-pilih input:focus-visible+b{outline:3px solid var(--aksen);outline-offset:2px}
.kunci-pilih b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--latar);border:2px solid var(--garis)}
.kunci-pilih input:checked+b{background:var(--baik-muda);border-color:var(--baik);color:var(--baik)}
.pil{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:700}
.pil input{width:auto}
details.tambahan{margin-top:10px}
details.tambahan summary{cursor:pointer;font-weight:800;font-size:.9rem;color:var(--redup)}
details.tambahan[open] summary{margin-bottom:6px}
.gambar-soal{display:block;max-width:100%;max-height:260px;border-radius:12px;margin:8px 0}
.tambah-soal{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.soal-siswa{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--garis)}
.soal-no{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ungu);color:var(--ungu-t);display:grid;place-items:center;font-weight:900}
.soal-isi{flex:1;min-width:0}
.teks-soal{margin:2px 0 8px}
.opsi-siswa{display:flex;gap:8px;align-items:flex-start;font-weight:600;margin:0 0 6px}
.opsi-siswa input{width:auto;margin-top:5px}
@media (max-width:480px){
  .pilih-jenis button{font-size:.85rem}
  .opsi-baris .tombol.kecil{padding:6px 10px}
  .sempit-lebar .grid.dua{grid-template-columns:1fr}
  .sempit-lebar .langkah{gap:8px}
  .sempit-lebar .nomor{width:26px;height:26px;font-size:.8rem}
}

/* kartu login: hanya tampil saat dicetak */
#cetak{display:none}
@media print{
  @page{size:A4;margin:10mm}
  body{background:#fff}
  body>*:not(#cetak){display:none!important}
  #cetak{display:grid!important;grid-template-columns:1fr 1fr;gap:6mm}
  .kartu-login{break-inside:avoid;border:1.5px dashed #999;border-radius:10px;padding:4mm 5mm;height:62mm;display:flex;flex-direction:column;color:#2b2540;font-family:Nunito,"Segoe UI",sans-serif}
  .kl-atas{display:flex;gap:8px;align-items:center;border-bottom:1px solid #eee;padding-bottom:2mm}
  .kl-atas .logo{width:28px;height:28px;font-size:.65rem;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .kl-atas b{display:block;font-size:.85rem}.kl-atas small{font-size:.7rem;color:#666}
  .kl-isi{display:flex;gap:4mm;flex:1;align-items:center}
  .kl-data{flex:1;min-width:0}
  .kl-nama{font-weight:900;font-size:1rem;line-height:1.2}
  .kl-kelas{font-size:.75rem;color:#666;margin-bottom:2mm}
  .kl-baris{display:flex;gap:6px;font-size:.85rem}.kl-baris span{width:30px;color:#666}
  .kl-baris b{font-family:Consolas,monospace;font-size:1.05rem;letter-spacing:.08em}
  .kl-qr{width:26mm;flex:none}.kl-qr svg{width:100%;height:auto}
  .kl-kaki{font-size:.62rem;color:#777}
}
/* ===== Tahap 7: penugasan (guru) ===== */
.materi-item{display:flex;gap:8px;align-items:stretch}
.materi-item .baris-materi{flex:1;min-width:0}
.materi-item>.tombol{flex:none;align-self:center}
@media (max-width:480px){.materi-item{flex-wrap:wrap}.materi-item>.tombol{width:100%}}
.kemajuan{height:10px;border-radius:999px;background:var(--latar);border:1px solid var(--garis);overflow:hidden}
.kemajuan i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--aksen),#ff8a5b);transition:width .4s}
.kemajuan.besar{height:14px;margin:8px 0}
.daftar-tugas-guru{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.tugas-guru{margin:0}
.tugas-guru.st-terjadwal{opacity:.8;border-style:dashed}
.tugas-guru.st-lewat .lencana.st{background:var(--latar);color:var(--redup)}
.lencana.kelas{background:var(--biru);color:var(--biru-t)}
.lencana.st{background:var(--hijau);color:var(--hijau-t)}
.tugas-guru.st-terjadwal .lencana.st{background:var(--kuning);color:var(--kuning-t)}
.lencana.st-belum{background:var(--latar);color:var(--redup)}
.lencana.st-kirim{background:var(--baik-muda);color:var(--baik)}
.lencana.st-telat{background:var(--buruk-muda);color:var(--buruk)}
.tabel.pantau tr.belum td{color:var(--redup)}
.tabel.pantau .lencana{white-space:nowrap}
.grid.dua>*{min-width:0}
input[type="datetime-local"]{min-width:0;max-width:100%}

/* ===== Tahap 7: halaman siswa ===== */
.prestasi{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0}
.prestasi .lv{flex:1 1 220px;display:flex;gap:12px;align-items:center;min-width:0}
.lv-ikon{flex:none;width:52px;height:52px;border-radius:16px;background:var(--ungu);display:grid;place-items:center;font-size:1.7rem}
.lv-isi{flex:1;min-width:0}
.lv-isi b{display:block;font-size:1.1rem}
.lv-isi small{display:block;color:var(--redup);font-weight:700;margin-bottom:6px}
.prestasi .mini{flex:1 0 84px;text-align:center;padding:6px 12px;border-radius:16px;background:var(--latar);min-width:84px}
.prestasi .mini b{display:block;font-size:1.4rem;font-weight:900;line-height:1.2}
.prestasi .mini small{display:block;color:var(--redup);font-weight:700;font-size:.75rem;max-width:96px;line-height:1.25}
.chip.kecil{padding:5px 12px;font-size:.85rem}
#pilihMapelS{margin-top:-6px}
#daftarTugas{display:flex;flex-direction:column;gap:10px}
.tugas-item{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r);border:2px solid var(--garis);background:var(--kartu);color:var(--tinta);text-decoration:none;box-shadow:0 4px 0 var(--bayang);transition:transform .15s,border-color .15s}
.tugas-item:hover{border-color:var(--aksen);transform:translateY(-1px)}
html[data-tema="malam"] .tugas-item{color:var(--tinta)}
.tugas-item .ikon{flex:none}
.ti-isi{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ti-isi b{font-size:1.02rem;line-height:1.3;margin-top:4px}
.ti-isi small{color:var(--redup);font-weight:600;font-size:.82rem}
.ti-isi small.tenggat{font-weight:800}
.tenggat.dekat{color:var(--awas)!important}
.tenggat.telat{color:var(--buruk)!important}
.tenggat.aman{color:var(--baik)!important}
.tugas-item .panah{font-size:1.8rem;color:var(--redup);font-weight:900;padding:0 4px}
.tugas-item .centang{width:34px;height:34px;border-radius:50%;background:var(--baik-muda);color:var(--baik);display:grid;place-items:center;font-weight:900}
.nilai-kecil{min-width:44px;padding:6px 8px;border-radius:12px;background:var(--ungu);color:var(--ungu-t);font-weight:900;text-align:center}
.bilah-waktu{position:sticky;top:0;z-index:5;margin:0 -4px 12px;padding:10px 16px;border-radius:0 0 16px 16px;background:var(--aksen);color:var(--teks-tombol);font-weight:800;text-align:center;box-shadow:0 4px 0 var(--bayang)}
.bilah-waktu b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.bilah-waktu.genting{background:var(--buruk);color:#fff;animation:denyut 1s infinite}
@keyframes denyut{50%{opacity:.75}}
.hasil-kirim{display:flex;gap:14px;align-items:flex-start;border-color:var(--baik)}
.hasil-ikon{flex:none;font-size:2.2rem;line-height:1}
.nilai-besar{font-size:2.6rem;font-weight:900;color:var(--aksen-tua);line-height:1.1}
html[data-tema="malam"] .nilai-besar{color:var(--aksen)}
.poin-baru{margin:8px 0 0;font-weight:900;color:var(--kuning-t);background:var(--kuning);display:inline-block;padding:4px 12px;border-radius:999px}
.soal-kerja{margin:0 0 12px;padding:14px 16px}
.soal-kerja .soal-siswa{border:0;padding:0}
.soal-kerja.terjawab .soal-no{background:var(--aksen);color:var(--teks-tombol)}
.opsi-siswa.pilih{padding:10px 12px;border:2px solid var(--garis);border-radius:14px;cursor:pointer;background:var(--kartu);margin:0 0 8px;align-items:center}
.opsi-siswa.pilih input{margin:0;width:20px;height:20px;flex:none;accent-color:var(--aksen)}
.opsi-siswa.pilih:has(input:checked){border-color:var(--aksen);background:var(--aksen-muda)}
.opsi-siswa.pilih:has(input:disabled){cursor:default}
.opsi-siswa.pilih b{flex:none}
.pilih-bs{display:flex;gap:8px}
.pilih-bs .opsi-siswa{flex:1}
.petunjuk-soal{margin:0 0 8px;font-size:.88rem;color:var(--redup)}
.pembahasan{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--latar);font-size:.92rem}
.pembahasan p{margin:6px 0 0}
.isi-materi figure.kotak-jawab textarea{width:100%;border:0;background:transparent;padding:0;font:inherit;font-size:1rem;color:var(--tinta);resize:vertical;min-height:3em;outline:none;font-weight:600}
#tJenis{display:block;width:fit-content}
.isi-materi figure.kotak-jawab:focus-within{border-color:var(--aksen);border-style:solid;background:var(--isian)}
.foto-daftar{display:flex;flex-wrap:wrap;gap:10px}
.foto-item{position:relative;width:96px;height:96px;border-radius:14px;overflow:hidden;border:2px solid var(--garis);background:var(--latar)}
.foto-item img{width:100%;height:100%;object-fit:cover;display:block}
.tombol-hapus-foto{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:1.1rem;font-weight:900;cursor:pointer;line-height:1}
#lbFoto{cursor:pointer;align-items:center}
#lbFoto.sibuk{opacity:.5;pointer-events:none}
.bilah-kirim{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--latar);padding:10px 0;border-top:2px solid var(--garis);margin-top:8px}
.bilah-kirim .isi-sisa{flex:1}
@media (max-width:480px){.bilah-kirim .tombol{width:100%}.bilah-kirim .isi-sisa{display:none}}

/* ---------- Tahap 8: koreksi & rekap nilai ---------- */
.koreksi-kepala{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.koreksi-kepala>div:first-child{min-width:0}
.koreksi-nav{display:flex;align-items:center;gap:6px;flex:none;font-weight:800;font-size:.9rem}
.koreksi-nav .tombol{min-width:40px;padding-left:0;padding-right:0;font-size:1.1rem}
.isi-koreksi{margin-bottom:8px}
/* pesan & tombol koreksi selalu terlihat di bawah dialog */
.koreksi-bawah{position:sticky;bottom:-22px;background:var(--kartu);margin:14px -22px -22px;padding:10px 22px 16px;border-top:2px solid var(--garis);z-index:2}
.koreksi-bawah .pesan{margin:0 0 8px}
.koreksi-bawah .dlg-aksi{margin-top:0}
.jawab-siswa{border:2px solid var(--aksen-muda);border-left:6px solid var(--aksen);border-radius:14px;background:var(--isian);padding:10px 14px;margin:0 0 14px;font-weight:600;white-space:normal;overflow-wrap:anywhere}
.jawab-siswa.kosong{border-color:var(--garis);border-left-color:var(--isian-garis);color:var(--redup);font-style:italic;font-weight:600}
.soal-koreksi{padding:14px 16px;margin-bottom:12px}
.soal-koreksi.uraian{box-shadow:0 4px 0 var(--bayang),inset 0 0 0 2px var(--kuning)}
.sk-kepala{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:8px}
.sk-skor{margin:0 0 0 auto;display:flex;align-items:center;gap:6px;font-size:.85rem;white-space:nowrap}
.sk-skor input{width:76px;padding:6px 8px;text-align:center;font-weight:800}
.sk-skor input.perlu{border-color:var(--awas);background:var(--awas-muda)}
.soal-koreksi .teks-soal{margin-bottom:8px}
.opsi-koreksi{display:grid;gap:4px}
.ok-opsi{display:flex;gap:8px;align-items:baseline;padding:6px 10px;border-radius:10px;border:2px solid transparent;font-size:.95rem}
.ok-opsi em{margin-left:auto;font-style:normal;font-size:.78rem;font-weight:800;white-space:nowrap}
.ok-opsi.kunci{background:var(--baik-muda);color:var(--baik)}
.ok-opsi.kunci span{color:var(--tinta)}
.ok-opsi.dipilih{border-color:var(--buruk)}
.ok-opsi.dipilih.kunci{border-color:var(--baik)}
.ok-opsi.dipilih:not(.kunci) em{color:var(--buruk)}
.jk{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0}
.pedoman{margin:-4px 0 0;font-size:.9rem}
.pedoman summary{cursor:pointer;font-weight:800;color:var(--redup)}
.pedoman div{background:var(--latar);border-radius:12px;padding:8px 12px;margin-top:6px}
.penilaian{padding:14px 16px;margin:8px 0 0;background:var(--latar);box-shadow:none;border:2px solid var(--garis)}
.penilaian label:first-child{margin-top:0}
.total-koreksi{margin:0;font-size:1.05rem}
.nilai-koreksi{font-size:1.25rem;color:var(--baik)}
.nilai-koreksi.bawah{color:var(--buruk)}
.awas-teks{color:var(--awas);font-weight:800}
.foto-daftar-koreksi{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.foto-koreksi{width:120px;height:120px;border-radius:14px;overflow:hidden;border:2px solid var(--garis);background:var(--latar);padding:0;cursor:zoom-in;display:grid;place-items:center;font-size:.8rem}
.foto-koreksi:hover{border-color:var(--aksen)}
.foto-koreksi img{width:100%;height:100%;object-fit:cover;display:block}
.dialog.foto-besar{width:min(960px,calc(100vw - 16px));padding:12px}
.fb-wadah{height:min(76vh,900px);position:relative;overflow:hidden;background:#000;border-radius:16px}
.fb-wadah img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:100%;max-height:100%;object-fit:contain;transition:transform .2s}
/* tabel rekap: tetap tabel di HP (geser ke samping), kolom nama menempel */
.rekap-wadah{border-radius:16px;border:2px solid var(--garis);background:var(--kartu);margin-bottom:8px;max-height:70vh}
.rekap{border-collapse:separate;border-spacing:0;font-size:.92rem;min-width:100%}
.rekap th,.rekap td{padding:8px 10px;border-bottom:1px solid var(--garis);text-align:center;white-space:nowrap}
.rekap thead th{position:sticky;top:0;background:var(--kartu);z-index:2;font-size:.78rem;color:var(--redup);vertical-align:bottom;border-bottom:2px solid var(--garis)}
.rekap .lekat{position:sticky;left:0;background:var(--kartu);z-index:1;text-align:left;font-weight:700;max-width:220px;overflow:hidden;text-overflow:ellipsis;border-right:2px solid var(--garis)}
.rekap thead .lekat{z-index:3}
.rekap tfoot td,.rekap tfoot th{font-weight:800;background:var(--latar);border-bottom:0}
.rekap tfoot .lekat{background:var(--latar)}
.rekap tfoot small{display:block;font-size:.72rem}
.th-ikon{display:block;font-size:.85rem;color:var(--tinta)}
.th-judul{display:block;max-width:110px;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.sel-nilai{min-width:46px;padding:5px 8px;border-radius:10px;border:2px solid transparent;background:var(--hijau);color:var(--hijau-t);font:inherit;font-weight:900;cursor:pointer}
.sel-nilai:hover{border-color:var(--aksen)}
.sel-nilai.bawah{background:var(--buruk-muda);color:var(--buruk)}
.sel-nilai.tunggu{background:var(--kuning);color:var(--kuning-t)}
.sel-nilai.perbaiki{background:var(--ungu);color:var(--ungu-t)}
.sel-kosong{color:var(--redup);font-weight:700}
.sel-kosong.bawah{color:var(--buruk)}
.rekap td.rata{font-weight:900}
.rekap td.rata.bawah{color:var(--buruk)}
.kecil-teks{font-size:.82rem}
.daftar-ab{display:grid;gap:8px}
.ab-item{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 14px;border-radius:14px;background:var(--latar)}
.ab-item>div{min-width:0}
.ab-item small{display:block}
@media (max-width:480px){.ab-item{flex-wrap:wrap}.ab-item .tombol{width:100%}.koreksi-kepala{flex-direction:column-reverse}.koreksi-nav{align-self:flex-end}}
/* siswa: catatan guru */
.catatan-guru{background:var(--ungu);color:var(--tinta);border-radius:16px;padding:12px 16px;margin:0 0 14px;font-weight:600}
.catatan-guru b{color:var(--ungu-t)}
.catatan-guru.perbaiki{background:var(--kuning)}
.catatan-guru.perbaiki b{color:var(--kuning-t)}

.lencana{display:inline-block;font-size:.75rem;font-weight:800;padding:3px 10px;border-radius:999px;background:var(--kuning);color:var(--kuning-t)}
.kosong{text-align:center;padding:12px 8px 4px}
.kosong .ikon-besar{font-size:2.6rem;line-height:1;margin-bottom:8px}
.kaki{text-align:center;color:var(--redup);font-size:.8rem;padding:16px;font-weight:600}
.pusat{text-align:center}
.ikon-besar{font-size:2.4rem;line-height:1}
@media (max-width:480px){
  main{padding:18px 14px 40px}
  .kartu{padding:16px}
  h1{font-size:1.35rem}
  .merek small{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}