/* Sahabat Pintar — gaya dasar (tanpa build step, aman untuk shared hosting) */
:root{
  --merah:#AE0000; --merah-tua:#7d0000; --oranye:#EFAB1E; --krem:#FFF8EC;
  --bg:#F6F4F1; --kartu:#FFFFFF; --teks:#1F1B18; --redup:#6B625B; --garis:#E4DED6;
  --ok:#1E7B46; --ok-bg:#E6F4EC; --warn:#8A5A00; --warn-bg:#FFF3D6; --err:#A11919; --err-bg:#FDE7E7;
  --r:10px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--teks);font-size:14px}
a{color:var(--merah)}
button,select,input,textarea{font:inherit}
/* ===== Kerangka v1.9.0: menu samping + bilah atas (terinspirasi portal kampus) ===== */
.kerangka{display:flex;min-height:100vh}
aside.sisi{width:240px;flex:none;background:var(--kartu);border-right:1px solid var(--garis);position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;z-index:40}
aside.sisi .merek{display:flex;align-items:center;gap:10px;background:var(--merah);color:#fff;text-decoration:none;padding:12px 14px;min-height:60px;border-bottom:4px solid var(--oranye);font-weight:700;font-size:16px;line-height:1.15}
aside.sisi .merek small{display:block;font-weight:400;font-size:11px;opacity:.85}
.logo-bulat{flex:none;width:36px;height:36px;border-radius:10px;background:#fff;color:var(--merah);display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.5px}
nav.menu{display:flex;flex-direction:column;gap:2px;padding:10px 10px 16px;flex:1}
nav.menu .judul-grup{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--redup);padding:12px 10px 4px;font-weight:600}
nav.menu a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--teks);text-decoration:none;white-space:nowrap;font-size:14px}
nav.menu a .ikon{color:var(--redup);flex:none}
nav.menu a:hover{background:var(--bg)}
nav.menu a.aktif{background:var(--krem);color:var(--merah);font-weight:700;box-shadow:inset 3px 0 0 var(--merah)}
nav.menu a.aktif .ikon{color:var(--merah)}
nav.menu a span:not(.lencana){flex:1}
nav.menu a.nanti{opacity:.5;pointer-events:none}
.kaki-sisi{padding:10px 16px;font-size:11.5px;color:var(--redup);border-top:1px solid var(--garis)}
.kanan{flex:1;min-width:0;display:flex;flex-direction:column}
header.atas{position:sticky;top:0;z-index:30;background:var(--kartu);border-bottom:1px solid var(--garis);min-height:60px;padding:8px 18px;display:flex;align-items:center;gap:8px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
header.atas .spacer{flex:1}
header.atas form{display:inline}
.judul-hal{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ikon-btn{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--teks);cursor:pointer;list-style:none}
.ikon-btn:hover,details[open]>.ikon-btn{background:var(--bg);border-color:var(--garis)}
.buka-sisi{display:none}
.titik-angka{position:absolute;top:1px;right:-3px;min-width:14px;height:16px;padding:0 3px;border-radius:99px;background:var(--merah);color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;border:2px solid var(--kartu);box-sizing:content-box}
details.dd>summary.ikon-btn{display:grid}
header.atas .tema-btn{width:40px;height:40px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--teks);font-size:18px;cursor:pointer}
header.atas .tema-btn:hover{background:var(--bg);border-color:var(--garis)}
.profil-btn{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border-radius:99px;cursor:pointer;list-style:none;border:1px solid var(--garis)}
.profil-btn:hover,details[open]>.profil-btn{background:var(--bg)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--merah);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.profil-nama{font-size:13px;line-height:1.15;font-weight:600}
.profil-nama small{display:block;font-weight:400;color:var(--redup);font-size:11.5px}
details.dd.lonceng .ddm{width:min(380px,calc(100vw - 20px));padding:0;max-height:70vh;overflow-y:auto}
details.dd.profil .ddm{min-width:250px}
.dd-kepala{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:10px 12px;border-bottom:1px solid var(--garis)}
.dd-kepala.kolom{flex-direction:column;align-items:flex-start;gap:2px}
.dd-kepala .redup{font-size:12px}
details.dd .ddm a.notif{display:flex;gap:10px;padding:9px 12px;border-radius:0;border-bottom:1px solid var(--garis);line-height:1.35;font-size:13px}
.notif .garis-warna{flex:none;width:4px;border-radius:4px}
.notif small{display:block;font-size:11px;font-weight:600}
details.dd .ddm a.dd-kaki{display:flex;align-items:center;justify-content:center;gap:4px;color:var(--merah);font-weight:600;padding:10px}
details.dd .ddm a .ikon,.dd-tombol .ikon{vertical-align:-3px;margin-right:6px;color:var(--redup)}
.dd-tombol{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--err)}
.dd-tombol:hover{background:var(--bg)}
.dd-tombol .ikon{color:var(--err)}
main{background:var(--kartu);margin:16px;border:1px solid var(--garis);border-radius:var(--r);padding:18px;min-height:60vh}
.tirai{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35}
@media (max-width:1023px){
  aside.sisi{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 24px rgba(0,0,0,.2)}
  body.sisi-buka aside.sisi{transform:none}
  .buka-sisi{display:inline-grid}
  header.atas{padding:8px 10px}
}
@media (max-width:640px){.profil-nama,.profil-btn>.ikon{display:none}.profil-btn{padding:3px;border-color:transparent}header.atas{gap:2px}.judul-hal{font-size:15px}}
h2{margin:0 0 12px;font-size:19px}
h3{margin:16px 0 8px;font-size:15px}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bar .spacer{flex:1}
.btn{display:inline-block;border:1px solid var(--garis);background:#fff;padding:7px 12px;border-radius:8px;cursor:pointer;color:var(--teks);text-decoration:none;line-height:1.3}
.btn:hover{border-color:#cfc6bb}
.btn.utama{background:var(--merah);border-color:var(--merah);color:#fff}
.btn.utama:hover{background:var(--merah-tua)}
.btn.kecil{padding:4px 9px;font-size:12px}
.btn.bahaya{color:var(--err);border-color:#f0c4c4}
.inp{padding:8px 10px;border:1px solid var(--garis);border-radius:8px;background:#fff;width:100%}
.f{display:grid;grid-template-columns:170px 1fr;gap:10px 14px;align-items:center;max-width:720px}
.f label{color:var(--redup)}
.f .lebar{grid-column:1/-1}
.salah{color:var(--err);font-size:12.5px;grid-column:2}
.pesan{padding:10px 12px;border-radius:8px;margin-bottom:12px}
.pesan.ok{background:var(--ok-bg);color:var(--ok)}
.pesan.warn{background:var(--warn-bg);color:var(--warn)}
.pesan.err{background:var(--err-bg);color:var(--err)}
.redup{color:var(--redup)}
.stat{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.stat div{background:var(--bg);border-radius:8px;padding:10px 14px;min-width:140px}
.stat b{display:block;font-size:22px}
.stat span{font-size:12px;color:var(--redup)}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;background:#F3EEE7;padding:8px;border-bottom:1px solid var(--garis);font-weight:600}
table.t td{padding:8px;border-bottom:1px solid var(--garis);vertical-align:top}
.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:var(--bg);color:var(--redup)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.err{background:var(--err-bg);color:var(--err)}
.kartu-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.kartu-menu a,.kartu-menu div{display:block;border:1px solid var(--garis);border-radius:10px;padding:14px;text-decoration:none;color:var(--teks);background:#fff}
.kartu-menu a:hover{border-color:var(--merah)}
.kartu-menu b{display:block;margin-bottom:4px;color:var(--merah)}
.kartu-menu .nanti{opacity:.55;background:var(--bg)}
.login{max-width:380px;width:calc(100% - 24px);margin:8vh auto;background:#fff;border:1px solid var(--garis);border-radius:14px;overflow:hidden}
.login .kepala{background:var(--merah);color:#fff;padding:18px 20px;border-bottom:4px solid var(--oranye)}
.login .kepala b{font-size:19px}
.login form{padding:20px;display:grid;gap:12px}
.cek{display:flex;gap:8px;align-items:center}
@media (max-width:640px){
  .f{grid-template-columns:1fr}
  .salah{grid-column:1}
  main{margin:8px;padding:12px}
}
.pil{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--garis)}
.pil a{padding:6px 14px;border:1px solid var(--garis);border-radius:99px;text-decoration:none;color:var(--teks);background:#fff}
.pil a.aktif{background:var(--merah);border-color:var(--merah);color:#fff}
.pil.kecil a{padding:4px 11px;font-size:12.5px}
.pil.kecil a.aktif{background:var(--krem);color:var(--merah);border-color:var(--oranye);font-weight:600}
.filter{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filter .inp{width:auto;min-width:150px}
.paginasi{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.paginasi a,.paginasi span{padding:4px 10px;border:1px solid var(--garis);border-radius:6px;text-decoration:none;color:var(--teks)}
.paginasi .aktif{background:var(--merah);color:#fff;border-color:var(--merah)}
.matriks{border-collapse:collapse;font-size:13px}
.matriks th,.matriks td{border:1px solid var(--garis);padding:5px 8px;text-align:center}
.matriks th:first-child,.matriks td:first-child{text-align:left}
.chip{display:inline-block;font-size:12px;padding:2px 8px;border-radius:99px;background:var(--bg);margin:1px 2px}
.chip.kartu{font-family:monospace;background:#EFE7FF;color:#4B2FA0}
.grup{border:1px solid var(--garis);border-radius:10px;padding:12px 14px;margin:10px 0}
.grup h3{margin:0 0 8px}
.dua-kolom{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:800px){.dua-kolom{grid-template-columns:1fr}}
table.t tr:hover td{background:#FBF9F6}
/* ===== Jadwal ===== */
.jgrid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--garis);border-radius:10px}
.jgrid{display:grid;grid-template-columns:56px repeat(7,minmax(150px,1fr));min-width:1120px;font-size:12.5px}
.jgrid .h{position:sticky;top:0;background:#F3EEE7;padding:7px 6px;font-weight:600;border-bottom:1px solid var(--garis);border-left:1px solid var(--garis);z-index:1}
.jgrid .h small{display:block;font-weight:400;color:var(--redup)}
.jgrid .h.hariini{background:var(--krem);color:var(--merah)}
.jgrid .h.merah{background:var(--err-bg);color:var(--err)}
.jgrid .h .lib{display:block;font-size:11px;font-weight:400}
.jgrid .jam{padding:6px;color:var(--redup);border-top:1px solid var(--garis);font-variant-numeric:tabular-nums}
.jgrid .sel{border-top:1px solid var(--garis);border-left:1px solid var(--garis);padding:4px;min-height:44px}
.jgrid .sel.hariini{background:#FFFCF6}
.ks{display:block;border-left:4px solid var(--c,#888);background:#fff;border-radius:6px;padding:5px 7px;margin-bottom:4px;box-shadow:0 1px 2px rgba(0,0,0,.08);color:var(--teks);text-decoration:none;line-height:1.35}
a.ks:hover{box-shadow:0 0 0 2px var(--oranye)}
.ks b{font-size:12.5px}
.ks .mp{color:var(--merah);font-weight:600}
.ks .sub{color:var(--redup);font-size:11.5px}
.ks.batal{opacity:.55;background:repeating-linear-gradient(135deg,#fff,#fff 6px,#f5f1ec 6px,#f5f1ec 12px)}
.ks.libur{outline:2px dashed #e08b8b}
.ks.pindahan{background:#EEF6FF}
.ks.pengganti{background:#FFF8E6}
.ks.terkunci{background:#F3F1EE;color:var(--redup)}
.tag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:99px;background:var(--bg);color:var(--redup);margin:1px 2px 0 0}
.tag.libur{background:var(--err-bg);color:var(--err)}
.tag.pindah{background:#E3F1FF;color:#1F4E8C}
.tag.ganti{background:var(--warn-bg);color:var(--warn)}
.tag.lintas{background:#EFE7FF;color:#4B2FA0}
.titik{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:middle}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--redup);margin-bottom:8px}
.tindak{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;border:1px solid var(--garis);border-left:4px solid var(--w,#8A5A00);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.tindak .aksi{white-space:nowrap;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.kand{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--garis)}
.heat{display:grid;grid-template-columns:52px repeat(7,1fr);gap:3px;font-size:12px;margin-top:8px;max-width:520px}
.heat a{display:block;text-align:center;padding:7px 0;border-radius:5px;text-decoration:none;color:#1f1b18}
.heat a.pilih{outline:2px solid var(--merah)}
.chk{display:flex;flex-wrap:wrap;gap:4px 14px}
.aksi-bawah{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--garis)}
.aksi-bawah form{display:inline}
.wa{background:#1FAF38;border-color:#1FAF38;color:#fff}
.lipat summary{cursor:pointer;color:var(--redup);font-size:13px;margin:4px 0}
@media (max-width:640px){.tindak{flex-direction:column}.tindak .aksi{justify-content:flex-start}}
details.dd{position:relative;display:inline-block}
details.dd summary{list-style:none}
details.dd summary::-webkit-details-marker{display:none}
details.dd .ddm{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--garis);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12);z-index:20;min-width:280px;padding:4px}
details.dd .ddm a{display:block;padding:8px 10px;color:var(--teks);text-decoration:none;border-radius:6px}
details.dd .ddm a:hover{background:var(--bg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.ks.izin{box-shadow:0 0 0 2px #e0a100}
.jdaftar{display:none}
.jdaftar.tampil{display:block}
.jhari{border:1px solid var(--garis);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:#fff}
.jhari.hariini{border-color:var(--oranye);background:#FFFCF6}
.jhari-h{font-weight:700;margin-bottom:6px}
.jhari .ks{margin-bottom:6px}
@media (max-width:760px){.jgrid-wrap.bisa-daftar{display:none}.jdaftar{display:block}}
/* v0.5 — alur daftar siswa */
.pesan:not(.ok):not(.warn):not(.err){background:#EEF4FB;color:#1F4E79}
.langkah{display:flex;gap:6px;margin:4px 0 14px;flex-wrap:wrap}
.langkah span{padding:5px 12px;border-radius:99px;background:var(--bg);color:var(--redup);font-size:13px}
.langkah span.aktif{background:var(--merah);color:#fff}
.langkah span.selesai{background:var(--ok-bg);color:var(--ok)}
.rek{border:1px solid var(--garis);border-radius:10px;padding:12px;margin-bottom:10px;background:#fff}
.rek.cocok{border-color:var(--ok)}
.rek .atas{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rek details{margin-top:8px}
.rek summary{cursor:pointer;color:var(--merah);font-size:13px}
.pilih-bentuk{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.pilih-bentuk label{border:1px solid var(--garis);border-radius:10px;padding:10px;cursor:pointer;display:flex;gap:8px;align-items:flex-start}
.pilih-bentuk label:has(input:checked){border-color:var(--merah);background:#FFF5F5}
/* v0.6 — menu bertingkat */
nav.menu a .lencana,.submenu .lencana{flex:none;display:inline-block;min-width:18px;padding:0 5px;margin-left:6px;border-radius:99px;background:var(--merah);color:#fff;font-size:11px;line-height:18px;text-align:center;font-weight:700}
.submenu{display:flex;gap:8px;align-items:center;margin:-4px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--garis)}
.submenu nav{display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:thin;padding-bottom:2px}
.submenu nav a{padding:6px 14px;border:1px solid var(--garis);border-radius:99px;text-decoration:none;color:var(--teks);background:#fff;white-space:nowrap;font-size:14px}
.submenu nav a.aktif{background:var(--merah);border-color:var(--merah);color:#fff}
.submenu .lainnya{flex:none}
.submenu .lainnya .ddm{right:0}
@media (max-width:640px){.submenu nav a{padding:6px 11px;font-size:13px}.submenu .lainnya .ddm{min-width:250px}}
/* beranda tugas */
.tugas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:6px 0 18px}
.tugas a{display:block;border:1px solid var(--garis);border-radius:12px;padding:16px;text-decoration:none;color:var(--teks);background:#fff}
.tugas a:hover{border-color:var(--merah)}
.tugas a b{display:block;font-size:17px;color:var(--merah);margin-bottom:4px}
.tugas a.utama{background:var(--merah);border-color:var(--merah);color:#fff}
.tugas a.utama b{color:#fff}
.tugas a.awas{border-color:var(--err);background:var(--err-bg)}
.tugas a .angka{font-size:28px;font-weight:800;line-height:1;display:block;margin-bottom:4px}
.hari-baris{display:grid;grid-template-columns:92px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--garis)}
.hari-baris .jam{font-weight:700;font-variant-numeric:tabular-nums}
.hari-baris .ks{margin:0}
details.grup-tindak{margin:6px 0 4px}
details.grup-tindak>summary{cursor:pointer;list-style:none;padding:6px 0}
details.grup-tindak>summary::-webkit-details-marker{display:none}
details.grup-tindak>summary::before{content:'▸ ';color:var(--redup)}
details.grup-tindak[open]>summary::before{content:'▾ '}
details.grup-tindak>summary .lencana{display:inline-block;min-width:22px;padding:0 7px;margin-left:6px;border-radius:99px;color:#fff;font-size:12px;line-height:22px;text-align:center;font-weight:700;vertical-align:middle}
details.lagi>summary{cursor:pointer;padding:4px 0 8px;font-size:13px}
.submenu nav a.aktif .lencana{background:#fff !important;color:var(--merah)}
@media (max-width:640px){
  nav.menu{gap:2px}
  nav.menu a{padding:8px 10px;font-size:14px}
  header.atas .btn.kecil{padding:4px 8px;font-size:12px}
}
@media (min-width:641px){.submenu nav{flex-wrap:wrap;overflow:visible}}
/* lihat/sembunyikan password */
.sandi{position:relative;display:block}
.sandi input{width:100%;padding-right:44px !important;box-sizing:border-box}
.sandi-mata{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--redup);cursor:pointer;padding:6px;line-height:0;border-radius:6px}
.sandi-mata:hover{color:var(--merah);background:var(--bg)}

/* v0.7: daftar siswa di HP — kolom kode, cabang, kartu, wali disembunyikan (ada di profil) */
@media (max-width:640px){.daftar-siswa th:nth-child(1),.daftar-siswa td:nth-child(1),.daftar-siswa th:nth-child(3),.daftar-siswa td:nth-child(3),.daftar-siswa th:nth-child(6),.daftar-siswa td:nth-child(6),.daftar-siswa th:nth-child(7),.daftar-siswa td:nth-child(7){display:none}}

/* v0.8 Presensi */
.absen-kepala{background:var(--krem);border:1px solid #f3dfb8;border-radius:10px;padding:10px 12px;margin-bottom:10px;line-height:1.5}
.absen-alat{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 10px}
.absen-ketik{display:flex;gap:6px;flex:1;min-width:230px}
.absen-baris{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:9px 4px;border-bottom:1px solid var(--garis);transition:background .3s}
.absen-baris.kedip{background:var(--ok-bg)}
.absen-nama{flex:1;min-width:170px}
.absen-st{display:flex;gap:4px}
.absen-st label{cursor:pointer}
.absen-st input{position:absolute;opacity:0;pointer-events:none}
.absen-st span{display:inline-block;padding:7px 10px;border:1px solid var(--garis);border-radius:8px;font-size:13px;min-width:54px;text-align:center;background:#fff;user-select:none}
.absen-st .st-hadir input:checked+span{background:var(--ok);border-color:var(--ok);color:#fff}
.absen-st .st-izin input:checked+span{background:#1F4E8C;border-color:#1F4E8C;color:#fff}
.absen-st .st-sakit input:checked+span{background:#B06A00;border-color:#B06A00;color:#fff}
.absen-st .st-alpa input:checked+span{background:var(--err);border-color:var(--err);color:#fff}
.absen-st .st-batal input:checked+span{background:#7B1FA2;border-color:#7B1FA2;color:#fff}
.absen-st input:disabled+span{opacity:.6;cursor:default}
.absen-st input:focus-visible+span{outline:2px solid var(--oranye)}
.absen-cat{width:100%;font-size:12.5px;color:var(--redup)}
.absen-cat summary{cursor:pointer;width:max-content}
.absen-cat .inp{margin-top:4px}
.absen-simpan{position:sticky;bottom:0;background:var(--kartu);display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:10px 0;margin-top:10px;border-top:1px solid var(--garis)}
.scan-box{position:relative;background:#000;border-radius:10px;overflow:hidden;margin-bottom:10px;max-width:480px}
.scan-box #scanArea{width:100%}
.scan-box #scanArea video{width:100%!important;display:block;max-height:46vh;object-fit:cover}
.scan-box .btn{position:absolute;right:8px;bottom:8px;z-index:5}
.ph{display:inline-block;min-width:22px;text-align:center;font-weight:600}
@media (max-width:640px){.absen-st span{min-width:0;padding:8px 9px}.absen-st{width:100%}.absen-st label{flex:1}.absen-st span{width:100%}}
.tabel-gulir{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* v2.9.20 menu tarik-turun di dalam tabel bergulir terpotong (overflow) → dibuka sebagai panel di tempat (Pantau kehadiran, dll.) */
.tabel-gulir details.dd{display:block}
.tabel-gulir details.dd .ddm{position:static;margin-top:6px;min-width:0;max-width:340px;box-shadow:none}

/* v0.9 Pembayaran */
.bulan-spp{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px}
.bulan-spp .bln{display:flex;flex-direction:column;gap:2px;border:1px solid var(--garis);border-radius:10px;padding:8px 10px;cursor:pointer;position:relative;background:#fff}
.bulan-spp .bln input{position:absolute;right:8px;top:8px;width:18px;height:18px}
.bulan-spp .bln small{font-size:11.5px;color:var(--redup)}
.bulan-spp .bln.lunas{background:var(--ok-bg);border-color:#bfe3cc;cursor:default;opacity:.8}
.bulan-spp .bln.lewat{border-color:#f0c4c4;background:#fff7f7}.bulan-spp .bln.lewat small{color:var(--err)}
.bulan-spp .bln:has(input:checked){outline:2px solid var(--merah);background:var(--krem)}
.kuitansi{background:#fff;border:1px solid var(--garis);border-radius:10px;padding:18px 20px;max-width:640px}
.kw-kepala{display:flex;justify-content:space-between;gap:10px;border-bottom:2px solid var(--merah);padding-bottom:8px}
.kw-ttd{display:flex;justify-content:flex-end;margin-top:22px;text-align:center}
@media print{aside.sisi,.tirai,header.atas,nav.menu,.submenu,.no-cetak,.pesan.ok{display:none!important}body{background:#fff}main{padding:0!important;border:0!important}.kuitansi{border:0}}
/* v0.9 Daftar siswa: urut, ceklis, kartu di HP */
.ds-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.ds-filter .inp{width:auto}
table.ds th[data-urut]{cursor:pointer;user-select:none;white-space:nowrap}
table.ds th[data-urut]::after{content:' ⇅';color:#b8aea4;font-weight:400}
table.ds th[data-urut][data-arah="▲"]::after{content:' ▲';color:var(--merah)}
table.ds th[data-urut][data-arah="▼"]::after{content:' ▼';color:var(--merah)}
table.ds .aksi6{white-space:nowrap}table.ds .aksi6 .btn{margin:0}table.ds .aksi6 .ddm{min-width:190px}
/* v2.9.3 tombol aksi daftar siswa selalu tampil di laptop: kisi 3 kolom rapat */
table.ds .aksi-kisi{display:grid;grid-template-columns:repeat(3,auto);gap:4px;justify-content:start}
@media (min-width:901px){table.ds .aksi-kisi .btn{padding:3px 8px;font-size:12px;text-align:center}}
@media (max-width:900px){table.ds .aksi-kisi{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}}
.cek-item{display:inline-block;font-size:11px;padding:1px 6px;border-radius:99px;margin:2px 2px 0 0;text-decoration:none;background:var(--err-bg);color:var(--err)}
.cek-item.ok{background:var(--ok-bg);color:var(--ok)}
@media (max-width:900px){
  table.ds thead{display:none}
  table.ds,table.ds tbody,table.ds tr,table.ds td{display:block;width:100%}
  table.ds tr{border:1px solid var(--garis);border-radius:10px;margin-bottom:10px;padding:8px 10px;background:#fff}
  table.ds tr[hidden]{display:none}
  table.ds td{border:0;padding:3px 0;display:flex;gap:8px;align-items:baseline}
  table.ds td[data-label]::before{content:attr(data-label);color:var(--redup);font-size:12px;min-width:112px;flex:none}
  table.ds td[data-label="Nama"]::before,table.ds td[data-label=""]::before{display:none}
  table.ds td[data-label="Nama"]{display:block;font-size:15px}
  table.ds .aksi6{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px;white-space:normal}
  table.ds .aksi6 .btn{text-align:center;padding:7px 4px;font-size:13px}
}
.saldo-f{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.saldo-f .inp{width:auto}.btn.mati{opacity:.45;pointer-events:none}
table.ds td[data-label="Nama"]{min-width:180px}
/* v0.9.1 — pilih siswa & template pesan */
table.ds .kolom-pilih{width:28px;text-align:center}table.ds .kolom-pilih input{width:17px;height:17px;cursor:pointer}
@media (max-width:900px){table.ds tr{position:relative}table.ds td.kolom-pilih{position:absolute;right:8px;top:8px;width:auto;padding:0}}
.bilah-pilih{position:sticky;bottom:10px;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--garis);border-radius:12px;padding:10px 14px;box-shadow:0 4px 18px rgba(0,0,0,.12);margin-top:10px;max-width:520px}
.bilah-pilih[hidden]{display:none}
.tpl-edit{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px}
@media (max-width:800px){.tpl-edit{grid-template-columns:1fr}}
.isian{display:flex;flex-wrap:wrap;gap:2px;margin:6px 0 12px}
button.chip{border:1px solid var(--garis);cursor:pointer;font-family:monospace;font-size:12px}button.chip:hover{background:#FFE9E9}
.pratinjau-wa{white-space:pre-wrap;background:#E7F8DC;border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.45;margin-top:6px;word-break:break-word}
.pratinjau-wa.kecil{font-size:12.5px;max-height:120px;overflow:auto;margin:0}
.pratinjau-wa mark{background:#FFF1B8;border-radius:3px;padding:0 2px}.pratinjau-wa .salah{background:#FFD3D3;color:#A11919;font-weight:600}
.tpl-banding{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px;margin:6px 0}
.antrean{display:flex;flex-direction:column;gap:10px;max-width:900px}
.antre{border:1px solid var(--garis);border-radius:10px;background:#fff;padding:10px 12px}
.antre.sudah{opacity:.6;background:#F4FBF0}.antre .teks{margin-top:6px;font-size:13px}
[hidden]{display:none!important}
/* v0.9.2 — kartu sesi tutor bisa diklik */
.ks-klik{cursor:pointer;position:relative}.ks-klik:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.ks-buka{font-size:22px;color:#b8aea4;line-height:1;align-self:center}
.sesi-detail{padding:14px 16px}
.catatan-lalu{padding:10px 12px;margin-bottom:8px}
/* ===== Honor & keuangan (v1.0) ===== */
.t .tengah{text-align:center}
.t .rp{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.inp.rp{width:110px;text-align:right;font-variant-numeric:tabular-nums}
.inp.rp.beda{border-color:#C98A00;background:#FFF8E6}
.tarif-tabel td,.tarif-tabel th{padding:4px 6px;vertical-align:middle}
.tarif-tabel tr.awal-grup td{border-top:2px solid var(--garis)}
.kartu-cabang{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:16px}
.kartu-cabang .grup{margin:0;border-left:4px solid var(--c,#AE0000)}
.kartu-cabang .total{font-size:22px;font-weight:700;margin:4px 0}
.cek-tanda{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:99px;background:var(--warn-bg);color:var(--warn);margin:1px 2px 0 0;white-space:nowrap}
.cek-tanda.err{background:var(--err-bg);color:var(--err)}
details.tutor-honor{border:1px solid var(--garis);border-radius:10px;background:var(--kartu);margin-bottom:8px}
details.tutor-honor>summary{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;cursor:pointer;list-style:none}
details.tutor-honor>summary::-webkit-details-marker{display:none}
details.tutor-honor>summary .total{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
details.tutor-honor[open]>summary{border-bottom:1px solid var(--garis)}
details.tutor-honor .isi{padding:10px 12px}
.slip{max-width:720px;background:var(--kartu);border:1px solid var(--garis);border-radius:12px;padding:20px 22px}
.slip h2{margin:0}
.slip .baris{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px dashed var(--garis)}
.slip .baris span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.slip .jumlah{display:flex;justify-content:space-between;font-size:20px;font-weight:700;padding-top:10px}
@media print{.slip{border:none;padding:0;max-width:none}.tanpa-cetak,aside.sisi,header.atas,nav.menu,.submenu,.pesan{display:none!important}}
.tren{display:flex;gap:6px;align-items:flex-end;height:220px;overflow-x:auto;padding-top:6px}
.tren-kol{flex:1;min-width:34px;display:flex;flex-direction:column;align-items:center;gap:2px;height:100%}
.tren-batang{flex:1;width:100%;display:flex;gap:2px;align-items:flex-end;justify-content:center}
.tren-batang i{display:block;width:40%;max-width:16px;border-radius:3px 3px 0 0;min-height:1px}
.tren-kol small{font-size:10.5px;color:var(--redup);white-space:nowrap}
.tren-legenda{display:flex;gap:14px;font-size:12.5px;color:var(--redup);margin-bottom:6px}
.tren-legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
@media print{.tanpa-cetak,aside.sisi,header.atas,nav.menu,.submenu,.pesan{display:none!important}form.bar .btn,form.bar select,form.bar input{display:none}}
/* ===== TEMA GELAP (v0.9.2) — dibuat otomatis dari aturan di atas; hanya layar, cetak tetap terang ===== */
@media screen{
:root[data-tema="gelap"]{color-scheme:dark;--merah:#C62828;--merah-tua:#9e1c1c;--oranye:#D9961A;--krem:#2a241d;--bg:#121010;--kartu:#1c1917;--teks:#ECE6E0;--redup:#A9A098;--garis:#3a332e;--ok:#6FD39A;--ok-bg:#163021;--warn:#F0C060;--warn-bg:#33280f;--err:#FF8F8F;--err-bg:#3a1818}
:where(:root[data-tema="gelap"]) a{color:#FF8A80}
:root[data-tema="gelap"] .btn,:root[data-tema="gelap"] .inp{background:#262120;color:var(--teks)}
:root[data-tema="gelap"] .btn.utama{background:var(--merah);color:#fff}
:root[data-tema="gelap"] .pesan[style*="#E3F1FF"]{background:#14263a!important;color:#9cc7ff!important}
:root[data-tema="gelap"] img:not(.latar){filter:brightness(.92)}
:root[data-tema="gelap"] nav.menu a.aktif{background:#342b1f}
:root[data-tema="gelap"] .logo-bulat{background:#fff}
:root[data-tema="gelap"] .btn{background:#212121}
:root[data-tema="gelap"] .btn:hover{border-color:#54493b}
:root[data-tema="gelap"] .btn.bahaya{border-color:#602e2e}
:root[data-tema="gelap"] .inp{background:#212121}
:root[data-tema="gelap"] table.t th{background:#352a1a}
:root[data-tema="gelap"] .kartu-menu a,:root[data-tema="gelap"] .kartu-menu div{background:#212121}
:root[data-tema="gelap"] .login{background:#212121}
:root[data-tema="gelap"] .pil a{background:#212121}
:root[data-tema="gelap"] .chip.kartu{background:#201536;color:#a491df}
:root[data-tema="gelap"] table.t tr:hover td{background:#312616}
:root[data-tema="gelap"] .jgrid .h{background:#352a1a}
:root[data-tema="gelap"] .jgrid .sel.hariini{background:#322813}
:root[data-tema="gelap"] .ks{border-left:4px solid var(--c,#474747);background:#212121}
:root[data-tema="gelap"] .ks.batal{background:repeating-linear-gradient(135deg,#212121,#212121 6px,#32281a 6px,#32281a 12px)}
:root[data-tema="gelap"] .ks.libur{outline:2px dashed #602e2e}
:root[data-tema="gelap"] .ks.pindahan{background:#142334}
:root[data-tema="gelap"] .ks.pengganti{background:#362d15}
:root[data-tema="gelap"] .ks.terkunci{background:#2d2820}
:root[data-tema="gelap"] .tag.pindah{background:#152637;color:#8ab1e5}
:root[data-tema="gelap"] .tag.lintas{background:#201536;color:#a491df}
:root[data-tema="gelap"] .heat a{color:#cec6c0}
:root[data-tema="gelap"] details.dd .ddm{background:#212121}
:root[data-tema="gelap"] .jhari{background:#212121}
:root[data-tema="gelap"] .jhari.hariini{background:#322813}
:root[data-tema="gelap"] .pesan:not(.ok):not(.warn):not(.err){background:#142435;color:#8db9e2}
:root[data-tema="gelap"] .rek{background:#212121}
:root[data-tema="gelap"] .pilih-bentuk label:has(input:checked){background:#331313}
:root[data-tema="gelap"] .submenu nav a{background:#212121}
:root[data-tema="gelap"] .tugas a{background:#212121}
:root[data-tema="gelap"] .submenu nav a.aktif .lencana{background:#212121 !important}
:root[data-tema="gelap"] .absen-kepala{border:1px solid #604f2e}
:root[data-tema="gelap"] .absen-st span{background:#212121}
:root[data-tema="gelap"] .bulan-spp .bln{background:#212121}
:root[data-tema="gelap"] .bulan-spp .bln.lunas{border-color:#2e6040}
:root[data-tema="gelap"] .bulan-spp .bln.lewat{border-color:#602e2e;background:#321313}
:root[data-tema="gelap"] .kuitansi{background:#212121}
:root[data-tema="gelap"] .bilah-pilih{background:#212121}
:root[data-tema="gelap"] button.chip:hover{background:#361414}
:root[data-tema="gelap"] .pratinjau-wa{background:#253b16}
:root[data-tema="gelap"] .pratinjau-wa mark{background:#423a19}
:root[data-tema="gelap"] .pratinjau-wa .salah{background:#3b1616;color:#ec8383}
:root[data-tema="gelap"] .antre{background:#212121}
:root[data-tema="gelap"] .antre.sudah{background:#203514}
:root[data-tema="gelap"] .inp.rp.beda{background:#362d15}
}
@media screen and (max-width:900px){:root[data-tema="gelap"] table.ds tr{background:#212121}}
/* tombol tema */
.tema-btn{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:8px;width:32px;height:30px;cursor:pointer;font-size:15px;line-height:1;padding:0}
/* v1.5.2 — HP: tabel lebar tidak lagi menggeser seluruh halaman; tabel .kartu-hp tampil sebagai kartu */
@media (max-width:700px){
  main table.t{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  main table.t.kartu-hp{display:block;overflow:visible}
  table.t.kartu-hp thead{display:none}
  table.t.kartu-hp tbody{display:block}
  table.t.kartu-hp tr{display:block;border:1px solid var(--garis);border-radius:10px;margin-bottom:10px;padding:8px 10px;background:var(--kartu,#fff)}
  table.t.kartu-hp td{display:block;border:0;padding:4px 0;text-align:right;overflow:hidden}
  table.t.kartu-hp td::before{content:attr(data-l);float:left;color:var(--redup);font-size:12px;text-align:left;max-width:45%;padding-right:10px}
  table.t.kartu-hp td[data-l=""]::before,table.t.kartu-hp td:not([data-l])::before{content:none}
  table.t.kartu-hp td.judul-hp,table.t.kartu-hp td[data-l=""]{text-align:left}
  table.t.kartu-hp td.judul-hp{font-weight:700;font-size:14px}
  table.t.kartu-hp td .inp{max-width:60%}
  table.t.kartu-hp tr:hover td{background:transparent}
}
:root[data-tema="gelap"] table.t.kartu-hp tr{background:#212121}
@media print{aside.sisi,.tirai,header.atas{display:none!important}main{margin:0!important}.kerangka{display:block}}
/* ===== Ubin pintasan berikon (v1.9.0) ===== */
.ubin-grup{margin:18px 0 6px}
.ubin-grup>h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.7px;color:var(--redup)}
.ubin{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ubin a{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:14px;border:1px solid var(--garis);border-radius:12px;background:var(--kartu);color:var(--teks);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.ubin a:hover{border-color:var(--c,var(--merah));transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.07)}
.ubin .ik{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:var(--c,var(--merah));background:color-mix(in srgb,var(--c,var(--merah)) 13%,transparent)}
.ubin b{font-size:14px;line-height:1.25}
.ubin small{color:var(--redup);font-size:12px;line-height:1.3;margin-top:-5px}
.ubin .hitung{position:absolute;top:10px;right:10px;min-width:22px;padding:1px 7px;border-radius:99px;background:var(--c,var(--merah));color:#fff;font-size:12px;font-weight:700;text-align:center}
@media (max-width:640px){.ubin{grid-template-columns:repeat(2,1fr);gap:8px}.ubin a{padding:12px}.ubin small{display:none}}
@media (max-width:640px){.tugas{grid-template-columns:1fr 1fr;gap:8px}.tugas a{padding:12px}.tugas a.utama{grid-column:1/-1}.tugas a b{font-size:15px}.tugas a .angka{font-size:24px}}
:root[data-tema="gelap"] .tugas a.utama{background:var(--merah);border-color:var(--merah);color:#fff}
/* Logo resmi (v1.9.1) */
.logo-lambang{flex:none;width:38px;height:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
img.panji{display:block;margin:5vh auto 0;width:104px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.login.login-panji{margin-top:14px}
/* v1.9.2: menu samping bisa diciutkan (ikon saja) di laptop; tabel lebar digulir di dalam kartu */
@media (min-width:1024px){
  .buka-sisi{display:inline-grid}
  body.sisi-ciut aside.sisi{width:68px}
  body.sisi-ciut aside.sisi .merek{justify-content:center;padding:12px 6px}
  body.sisi-ciut aside.sisi .merek>span,body.sisi-ciut nav.menu .judul-grup,body.sisi-ciut .kaki-sisi{display:none}
  body.sisi-ciut nav.menu{padding:10px 8px}
  body.sisi-ciut nav.menu a{justify-content:center;padding:10px 0;position:relative}
  body.sisi-ciut nav.menu a span{display:none}
  body.sisi-ciut nav.menu a span.lencana{display:block;position:absolute;top:2px;right:4px;margin:0;min-width:16px;line-height:16px;font-size:10px}
  /* v2.9.8 mode otomatis: saat menu melebar, isi halaman ikut bergeser ke kanan (tidak ada bagian yang tertutup menu) */
  aside.sisi{transition:width .18s ease}
  body.sisi-lihat aside.sisi{width:240px}
}
.mode-sisi{display:block;margin-bottom:6px}
.mode-sisi button{border:1px solid var(--garis);background:var(--kartu);color:var(--redup);border-radius:6px;font-size:11px;padding:1px 6px;margin-left:2px;cursor:pointer}
.mode-sisi button.aktif{background:var(--krem);color:var(--merah);border-color:var(--merah);font-weight:700}
.gulir-x{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
@media (min-width:901px){.hp-saja{display:none!important}}
@media (max-width:900px){.laptop-saja{display:none!important}}
@media (max-width:640px){
  /* menu tarik-turun bilah atas di HP: selebar layar di bawah bilah atas, tidak terpotong */
  header.atas details.dd>.ddm{position:fixed;left:8px;right:8px;top:62px;width:auto;min-width:0;max-height:calc(100vh - 80px);overflow-y:auto}
}
.f>*,.dua-kolom>*{min-width:0}
@media (min-width:641px) and (max-width:900px){table.ds tbody{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}table.ds tr{margin:0}}
/* v1.9.3: teks & isian tidak pernah melewati kotaknya di perangkat apa pun */
main,aside.sisi,.ddm{overflow-wrap:break-word}
.ubin a,.tugas a,.stat div,.kartu-menu a,.kartu-menu div,.grup,.pesan,.notif,.dd-kepala{min-width:0;overflow-wrap:anywhere}
.inp{max-width:100%;min-width:0}
select.inp{text-overflow:ellipsis}
.bar>*,.filter>*,.ds-filter>*{min-width:0;max-width:100%}
@media (max-width:640px){.inp{min-width:0!important}.inp[style*="flex"]{flex-basis:100%!important}}
input[type=file]{max-width:100%}
@media (min-width:641px) and (max-width:1100px){.tugas{grid-template-columns:1fr 1fr}}
/* v2.0 baris koreksi di buku kas */
tr.baris-koreksi td{background:var(--err-bg)}
tr.baris-dibalik td{color:var(--redup);text-decoration:line-through;text-decoration-color:rgba(161,25,25,.5)}
tr.baris-dibalik td a{color:inherit}

/* ===== v2.2: calon siswa ===== */
.cepat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 12px;margin-top:10px;align-items:end}
.cepat-grid>label{display:flex;flex-direction:column;gap:3px;font-size:13px;font-weight:600;min-width:0}
.cepat-grid .cepat-opsi{grid-column:1/-1}
.lead-daftar{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-bottom:6px}
.lead-kartu{display:flex;flex-direction:column;gap:2px;border:1px solid var(--garis);border-left:4px solid var(--c);border-radius:10px;padding:8px 10px;background:var(--kartu);color:var(--teks);text-decoration:none;min-width:0}
.lead-kartu:hover{border-color:var(--c)}
.lead-kartu small{color:var(--redup);font-size:12px}
.lead-info{font-size:12px;font-weight:600;color:var(--warn)}.lead-info.telat{color:var(--err)}
.papan-lead{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:10px;overflow-x:auto;padding-bottom:6px}
.papan-lead section{background:var(--bg);border-radius:10px;padding:8px;border-top:4px solid var(--c);display:flex;flex-direction:column;gap:6px;min-width:0}
.papan-lead h4{margin:0 0 2px;font-size:13.5px}.papan-lead h4 span{background:var(--c);color:#fff;border-radius:99px;padding:0 8px;font-size:12px;margin-left:4px}
@media (max-width:900px){.papan-lead{grid-template-columns:1fr;overflow-x:visible}}   /* v2.2.5: di HP kotak status bertumpuk ke bawah */
.stepper{display:flex;list-style:none;padding:0;margin:10px 0 14px;gap:4px;flex-wrap:wrap}
.stepper li{flex:1;min-width:92px;text-align:center;padding:7px 6px;border-radius:8px;background:var(--bg);color:var(--redup);font-size:13px;font-weight:600;border:1px solid var(--garis)}
.stepper li small{display:block;font-weight:400;font-size:11px}
.stepper li.lewat{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.stepper li.kini{background:var(--merah);color:#fff;border-color:transparent}
.stepper li.kini.gagal{background:#5B6B7A}
.stepper li.loncat{text-decoration:line-through;opacity:.6}
.pilih-status{display:flex;gap:6px;flex-wrap:wrap}.pilih-status label{border:1px solid var(--garis);border-radius:8px;padding:6px 10px;display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.lini{list-style:none;padding:0;margin:0}.lini li{border-left:2px solid var(--garis);padding:0 0 10px 12px;position:relative;font-size:13px;overflow-wrap:anywhere}
.lini li:before{content:"";position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--merah)}
.lini small{display:block;color:var(--redup)}
.corong{display:grid;grid-template-columns:130px 1fr 44px 44px;gap:8px;align-items:center;font-size:13px;margin:6px 0}
.corong div{background:var(--bg);border-radius:6px;height:14px;overflow:hidden}.corong i{display:block;height:100%;background:var(--merah);border-radius:6px}
.corong small{color:var(--redup);text-align:right}.corong b{text-align:right}
.br-l{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--garis);font-size:13.5px}.br-l span:first-child{flex:1}
.teks-err{color:var(--err)}

/* ===== v2.2: beranda owner ===== */
.salam{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}.salam h2{margin:0}.salam span{color:var(--redup);font-size:13px}
.kep-j{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--redup);margin:0 0 8px;font-weight:600}
.kep{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.kep a{display:flex;align-items:center;gap:8px;border:1px solid #f0c4c4;background:var(--err-bg);border-radius:10px;padding:9px 12px;color:var(--teks);text-decoration:none;font-size:13.5px;min-width:0}
.kep a b{color:var(--err)}.kep a.k2{background:var(--warn-bg);border-color:#ecd59a}.kep a.k2 b{color:var(--warn)}
.matriks4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1200px){.matriks4{grid-template-columns:1fr 1fr}}@media (max-width:640px){.matriks4{grid-template-columns:1fr}}
.kc{border:1px solid var(--garis);border-radius:12px;overflow:hidden;background:var(--kartu);border-top:4px solid var(--c);min-width:0}
.kc.hijau,.lampu.hijau{--c:#1E7B46}.kc.kuning,.lampu.kuning{--c:#D9961A}.kc.merah,.lampu.merah{--c:#C62828}
.kc-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--garis);flex-wrap:wrap}
.kc-h b{font-size:15px}.kc-h .lihat{font-size:12px;color:var(--merah)}
.lampu{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent);flex:none}
.tag-data{font-size:11px;background:var(--warn-bg);color:var(--warn);border-radius:99px;padding:1px 8px;width:100%;order:9}
.kc-s{padding:8px 12px 6px;border-bottom:1px solid var(--garis)}.kc-s:last-child{border-bottom:0}
.kc-s h5{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--redup)}
.br{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:2px 0;flex-wrap:wrap}.br .lb{color:var(--redup)}.br .nv{font-weight:700;font-variant-numeric:tabular-nums}
.br .nv.ok{color:var(--ok)}.br .nv.warn{color:var(--warn)}.br .nv.err{color:var(--err)}.br .sb{width:100%;text-align:right;font-size:11.5px;color:var(--redup);margin-top:-2px}
.br a{color:inherit;text-decoration-color:var(--garis);text-underline-offset:3px}
.blok-j{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;flex-wrap:wrap}.blok-j h3{margin:0}.blok-j span{font-size:12.5px;color:var(--redup)}
.mdk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}@media (max-width:1200px){.mdk{grid-template-columns:1fr 1fr}}@media (max-width:640px){.mdk{grid-template-columns:1fr}}
.mdk>div{border:1px solid var(--garis);border-radius:10px;padding:10px 12px;font-size:13px;min-width:0}.mdk b{display:block;margin-bottom:4px}.mdk li{margin:2px 0}.mdk ul{margin:0;padding-left:18px}
.tren6{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}@media (max-width:900px){.tren6{grid-template-columns:1fr 1fr}}
.tren6>div{border:1px solid var(--garis);border-radius:10px;padding:10px 12px;min-width:0}.tren6 span{display:block;font-size:12px;color:var(--redup)}.tren6 b{font-size:18px;display:block;margin:2px 0}
.tren6 svg{max-width:100%}
.kc-ringkas{display:none;padding:9px 12px;font-size:13px;color:var(--ok)}
@media (max-width:640px){.kc.hijau .kc-s{display:none}.kc.hijau .kc-ringkas{display:block}}

/* ===== v2.2: modul bimbel ===== */
.modul-bingkai{position:relative;border:1px solid var(--garis);border-radius:10px;overflow:hidden;background:#fff;height:calc(100vh - 210px);min-height:420px}
.modul-bingkai iframe{width:100%;height:100%;border:0;display:block}
.modul-bingkai .tutup-pojok{position:absolute;top:0;right:0;width:80px;height:58px;background:transparent;z-index:2}
.modul-cap{position:absolute;inset:0;pointer-events:none;z-index:1;display:flex;flex-wrap:wrap;align-content:space-around;justify-content:space-around;opacity:.07;font-size:22px;font-weight:700;transform:rotate(-20deg);color:#000;overflow:hidden}

/* ===== v2.2: operator ===== */
.pita-sebagai{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#C62828;color:#fff;border-radius:10px;padding:8px 12px;margin:-4px 0 12px;font-size:13.5px}
.pita-sebagai span{flex:1;min-width:200px}.pita-sebagai .btn{background:#fff;color:#C62828;border-color:#fff}
.sehat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}@media(max-width:1000px){.sehat{grid-template-columns:1fr 1fr}}@media(max-width:600px){.sehat{grid-template-columns:1fr}}
.ks2{border:1px solid var(--garis);border-top:4px solid var(--c);border-radius:12px;padding:10px 12px;background:var(--kartu);display:flex;flex-direction:column;gap:3px;min-width:0}
.ks2.hijau{--c:#1E7B46}.ks2.kuning{--c:#D9961A}.ks2.merah{--c:#C62828}
.ks2-h{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--redup);font-weight:600}.ks2 b{font-size:19px;overflow-wrap:anywhere}.ks2 small{color:var(--redup);font-size:12px}.ks2 .btn{align-self:flex-start;margin-top:4px}
.lihat-sebagai{border:2px dashed #C62828;background:var(--err-bg);border-radius:12px;padding:14px 16px}
.dua-op{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}@media(max-width:900px){.dua-op{grid-template-columns:1fr}}
.dua-op>.grup{margin:0;min-width:0}
.cek-list{list-style:none;margin:0;padding:0}.cek-list li{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--garis)}
.cek-list li>span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.cek-list li.ok>span{background:var(--ok-bg);color:var(--ok)}.cek-list li.belum>span{background:var(--warn-bg);color:var(--warn)}
.cek-list li div{flex:1;display:flex;flex-direction:column;min-width:0}.cek-list small{color:var(--redup);font-size:12px}
.pr{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-bottom:1px solid var(--garis);font-size:13.5px}.pr .badge{align-self:flex-start}.pr small{color:var(--redup)}
.lini2{list-style:none;padding:0;margin:0}.lini2 li{padding:6px 0;border-bottom:1px solid var(--garis);font-size:13.5px;overflow-wrap:anywhere}.lini2 small{display:block;color:var(--redup);font-size:12px}

/* ===== v2.2.1: daily tim di beranda owner ===== */
.tim-harian{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.tim-kartu{display:flex;flex-direction:column;gap:4px;border:1px solid var(--garis);border-radius:10px;padding:10px 12px;background:var(--kartu);color:var(--teks);text-decoration:none;min-width:0}
.tim-kartu:hover{border-color:var(--merah)}
.tim-atas{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.tim-atas b{overflow-wrap:anywhere}.tim-atas .badge{flex:none}
.tim-kartu small{color:var(--redup);font-size:12px;overflow-wrap:anywhere}
.tim-progres{height:6px;border-radius:6px;background:var(--bg);overflow:hidden}.tim-progres i{display:block;height:100%;background:var(--ok)}
[data-chat-belum][hidden]{display:none!important}
/* v2.2.5 ikon chat bergoyang & lencana berdenyut selama ada pesan belum dibuka */
[data-chat-ikon].ada-pesan svg{animation:chat-goyang 2.6s ease-in-out infinite;transform-origin:50% 55%}
[data-chat-ikon].ada-pesan .titik-angka,[data-chat-ikon].ada-pesan .lencana{animation:chat-denyut 2.6s ease-out infinite}
@keyframes chat-goyang{0%,62%,100%{transform:rotate(0)}68%{transform:rotate(-14deg)}74%{transform:rotate(12deg)}80%{transform:rotate(-8deg)}86%{transform:rotate(5deg)}92%{transform:rotate(-2deg)}}
@keyframes chat-denyut{0%{box-shadow:0 0 0 0 rgba(174,0,0,.55)}70%{box-shadow:0 0 0 9px rgba(174,0,0,0)}100%{box-shadow:0 0 0 0 rgba(174,0,0,0)}}
@media (prefers-reduced-motion:reduce){[data-chat-ikon].ada-pesan svg,[data-chat-ikon].ada-pesan .titik-angka,[data-chat-ikon].ada-pesan .lencana{animation:none}}
.suara-chat{border:1px solid var(--garis);background:var(--kartu);border-radius:99px;padding:3px 10px;font-size:12.5px;cursor:pointer;color:inherit}
.pesan.info{background:#E8F1FA;color:#174A7C}[data-theme=dark] .pesan.info{background:#16324d;color:#cfe3f7}   /* v2.2.7 */
.badge.info{background:#E8F1FA;color:#174A7C}[data-theme=dark] .badge.info{background:#16324d;color:#cfe3f7}   /* v2.3 */

/* v2.5.0 tombol Lapor kendala mengambang */
.lapor-tombol{position:fixed;right:12px;bottom:14px;z-index:40;width:44px;height:44px;border-radius:50%;border:1px solid var(--garis);background:var(--kartu);color:var(--merah);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.18);opacity:.6;cursor:grab;touch-action:none;transition:opacity .15s,transform .15s;padding:0}
.lapor-tombol:hover,.lapor-tombol:focus-visible,.lapor-tombol.digeser{opacity:1;transform:scale(1.06)}
.lapor-tombol.naik{bottom:84px}
.lapor-tombol.memotret{opacity:1;animation:lapor-denyut 1s ease-in-out infinite;cursor:progress}
@keyframes lapor-denyut{50%{transform:scale(.9)}}
.lapor-angka{position:absolute;top:-4px;right:-4px;min-width:18px;padding:0 4px;border-radius:99px;background:var(--merah);color:#fff;font-size:10.5px;line-height:18px;font-weight:700;text-align:center}
body.ada-lapor main{padding-bottom:72px}
.lapor-dialog{border:none;border-radius:14px;padding:16px;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;background:var(--kartu);color:var(--teks);box-shadow:0 10px 40px rgba(0,0,0,.3)}
.lapor-dialog::backdrop{background:rgba(0,0,0,.45)}
.lapor-kepala{display:flex;align-items:center;margin-bottom:4px;font-size:17px}
.lapor-gambar-kotak{display:flex;gap:10px;align-items:center;background:var(--bg);border-radius:10px;padding:8px;margin-bottom:8px}
.lapor-gambar-kotak img{width:150px;max-height:110px;object-fit:cover;object-position:top left;border-radius:6px;border:1px solid var(--garis)}
.lapor-pilih{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.lapor-label{font-size:13px;min-width:62px}
.chip-pilih{position:relative;cursor:pointer}
.chip-pilih input{position:absolute;opacity:0;width:1px;height:1px}
.chip-pilih span{display:inline-block;padding:5px 11px;border:1px solid var(--garis);border-radius:99px;font-size:13px;background:var(--kartu)}
.chip-pilih input:checked+span{background:var(--merah);border-color:var(--merah);color:#fff}
.chip-pilih input:focus-visible+span{outline:2px solid var(--oranye);outline-offset:1px}
.lapor-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.lapor-gambar{width:100%;border:1px solid var(--garis);border-radius:8px}
@media (max-width:900px){.lapor-detail{grid-template-columns:1fr}}
@media print{.lapor-tombol,.lapor-dialog{display:none !important}}

/* v2.5.3 ikon panduan: titik kecil bila ada panduan untuk halaman ini */
.dd.panduan summary.ada-bagian{position:relative}
.dd.panduan summary.ada-bagian::after{content:'';position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--oranye);box-shadow:0 0 0 2px var(--kartu)}
/* v2.10.0 Notes */
.note-kartu{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:14px}
.note-k{display:flex;flex-direction:column;gap:8px;min-height:110px;border:1px solid var(--garis);border-left:4px solid #8A8178;border-radius:10px;padding:14px;text-decoration:none;color:var(--teks);background:#fff}
.note-k:hover{border-color:var(--merah);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.note-k.t-pribadi{border-left-color:#5B6B8C}.note-k.t-cabang{border-left-color:#2F7D5B}.note-k.t-semua{border-left-color:var(--merah)}
.note-judul{font-size:16px;line-height:1.3;word-break:break-word}
.note-meta{display:flex;flex-wrap:wrap;gap:4px}
.note-kaki{font-size:12px;margin-top:auto}
.note-cari{display:flex;gap:6px;flex-wrap:wrap;max-width:640px}.note-cari input[type=search]{flex:1;min-width:180px}
.note-form{display:flex;flex-direction:column;gap:8px}.note-form label{display:flex;flex-direction:column;gap:3px}
.note-tingkat{display:flex;gap:8px;flex-wrap:wrap}.note-tingkat .pilih,.note-form .pilih{flex-direction:row;align-items:center;gap:6px;border:1px solid var(--garis);border-radius:8px;padding:6px 10px}
.note-tingkat .pilih span{font-size:12px}
.note-isi{max-width:820px;margin:8px 0 14px}
.note-poin{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--garis)}
.np-isi{flex:1;min-width:0;word-break:break-word}
.np-meta{font-size:11px;color:var(--redup);margin-top:3px}.np-oleh{color:var(--ok);font-weight:600}
.np-cek label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}.np-cek input{margin-top:3px;width:18px;height:18px}
.np-selesai{text-decoration:line-through;color:var(--redup)}
.np-nomor{display:flex;gap:8px}.np-no{font-weight:700;min-width:22px}
.np-akun{background:var(--bg);border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.np-lab{display:inline-block;min-width:74px;font-size:12px;color:var(--redup)}
.np-aksi{display:flex;gap:4px;align-items:flex-start;flex:none}
.note-poin{flex-wrap:wrap}.np-aksi:has(details[open]){flex-basis:100%;flex-wrap:wrap;justify-content:flex-end}.np-ubah[open]{flex-basis:100%}
.np-ubah[open] .poin-form{border:1px solid var(--garis);border-radius:8px;padding:10px;margin-top:6px;min-width:260px}
@media (max-width:640px){.note-poin{flex-direction:column}.np-aksi{align-self:flex-end}}
/* v2.10.1 dashboard: sapaan & motivasi */
.sambut{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap;margin-bottom:12px}
.sambut-salam{flex:1 1 260px}.sambut-salam h2{margin:0;font-size:24px}
.sambut-motivasi{flex:2 1 320px;margin:0;padding:12px 16px;border-left:4px solid var(--merah);background:var(--bg);border-radius:0 10px 10px 0;font-style:italic;line-height:1.5}
.sambut-kartu{margin-bottom:14px}.sambut-kartu a{padding:12px 14px}.sambut-kartu b{margin-bottom:2px}.sambut-kartu .redup{font-size:12px}
details.izin-kecil>summary{font-size:13px;color:var(--redup);cursor:pointer}
details.grup.izin-kecil:not([open]){border-style:dashed;padding:8px 12px;background:transparent}
/* v2.10.1 tombol melayang & panel geser Daily/Notes */
.apung-kerja{position:fixed;right:0;bottom:84px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:3px;width:44px;padding:8px 0;border:0;border-radius:12px 0 0 12px;background:var(--merah);color:#fff;cursor:pointer;box-shadow:-2px 2px 10px rgba(0,0,0,.18);font-size:10.5px;font-weight:600;touch-action:none;transition:transform .2s,opacity .2s}
.apung-kerja .grip{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.5)}
.apung-kerja.susut{transform:translateX(60%);opacity:.45}.apung-kerja.sembunyi{transform:translateX(110%)}
body.ada-meja main{padding-right:52px}
@media (max-width:700px){.apung-kerja{width:34px;font-size:9.5px;bottom:76px}.apung-kerja svg{width:17px;height:17px}body.ada-meja main{padding-right:30px}}
.apung-kerja svg{stroke:#fff}
.panel-kerja{position:fixed;right:0;top:0;bottom:0;z-index:70;width:min(390px,94vw);background:var(--bg);border-left:1px solid var(--garis);box-shadow:-6px 0 24px rgba(0,0,0,.18);overflow-y:auto;font-size:13.5px}
/* v2.12.1 (D-PNL-01) Meja Kerja Hari Ini / Pusat Pantau: kartu berwarna per bagian */
.mk-head{position:sticky;top:0;z-index:2;background:var(--merah);color:#fff;padding:12px 14px 10px}
.mk-head h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}.mk-head small{opacity:.88;font-size:12px}
.mk-head .x{margin-left:auto;background:rgba(255,255,255,.18);border:0;color:#fff;border-radius:8px;padding:4px 9px;font-size:12px;cursor:pointer}
.mk-isi{padding:10px 12px 18px;display:flex;flex-direction:column;gap:10px}
.mk-k{border-radius:12px;border:1px solid;padding:10px 12px;--kb:#BFD3F5;--kl:#F4F8FF;--ki:#2F5FB3;border-color:var(--kb);background:var(--kl)}
.mk-k h4{margin:0 0 6px;font-size:14px;display:flex;align-items:center;gap:7px}.mk-k h4 .kanan{margin-left:auto;font-weight:400;font-size:12px;white-space:nowrap}
.mk-k h4 .ik{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px;background:var(--ki)}
.k-daily{--kb:#BFD3F5;--kl:#F4F8FF;--ki:#2F5FB3}.k-note{--kb:#F0D58A;--kl:#FFFBEF;--ki:#B7830B}.k-chat{--kb:#B8DFC6;--kl:#F2FAF5;--ki:#1E7B46}.k-pulang{--kb:#E7B4B4;--kl:#FFF5F5;--ki:var(--merah)}
:root[data-tema="gelap"] .k-daily{--kb:#2c4166;--kl:#151d2b}:root[data-tema="gelap"] .k-note{--kb:#5c4a17;--kl:#211c10}:root[data-tema="gelap"] .k-chat{--kb:#24523a;--kl:#122019}:root[data-tema="gelap"] .k-pulang{--kb:#5e2525;--kl:#241414}
.mk-k .prog{height:7px;border-radius:9px;background:rgba(47,95,179,.15);overflow:hidden;margin:2px 0 8px}.mk-k .prog i{display:block;height:100%;background:#2F5FB3}
.mk-k .di{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 0;border-top:1px dashed var(--kb)}
.mk-k .di .t{flex:1 1 170px}.mk-k .di.ok .t{text-decoration:line-through;color:var(--redup)}
.mk-k .st{font-size:11px;padding:1px 7px;border-radius:99px;background:rgba(47,95,179,.12);color:#2F5FB3;white-space:nowrap}.mk-k .st-ok{background:var(--ok-bg);color:var(--ok)}.mk-k .st-p{background:var(--warn-bg);color:var(--warn)}
.mk-k .b{border:1px solid var(--kb);background:var(--kartu);color:var(--teks);border-radius:7px;padding:3px 9px;font-size:12px;cursor:pointer}.mk-k .b.u{background:var(--ki);color:#fff;border-color:var(--ki)}.mk-k .b:disabled{opacity:.5;cursor:not-allowed}
.mk-k .tb{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.mk-k .tb .inp{flex:1 1 150px;padding:6px 8px}.mk-k .tb select.inp{flex:0 0 auto;width:auto}.mk-k .tb .pd-pesan{flex-basis:100%;margin:0}
.mk-k .nt{border-top:1px dashed var(--kb);padding:6px 0}.mk-k .nt summary{cursor:pointer;list-style:none}.mk-k .nt summary::-webkit-details-marker{display:none}
.mk-k .nt summary b::before{content:"▸ ";color:var(--ki)}.mk-k .nt[open] summary b::before{content:"▾ "}.mk-k .nt summary b{display:block}.mk-k .nt summary .redup{font-size:11.5px}
.mk-k .cp{display:flex;gap:7px;align-items:flex-start;padding:3px 0 3px 4px;font-size:13px}.mk-k .cp input{margin-top:3px}.mk-k .cp small{display:block;color:var(--redup);font-size:11px}
.mk-k .lk{font-size:12px;margin-top:6px}
.mk-k .pd-chat{background:var(--kartu);border-color:var(--kb)}.mk-k .pd-chat .av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ki);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.mk-k .pd-chat .lencana{background:#25D366;color:#fff;border-radius:99px;font-size:11px;padding:0 7px;font-weight:700}
.btn-pulang{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border:0;border-radius:12px;background:var(--merah);color:#fff!important;font-size:15px;font-weight:700;box-shadow:0 3px 10px rgba(174,0,0,.25);cursor:pointer;text-decoration:none}.btn-pulang:disabled{opacity:.6}
.k-pulang.denyut{animation:mkDenyut 1.6s infinite}
@keyframes mkDenyut{0%,100%{box-shadow:0 0 0 0 rgba(174,0,0,.35)}50%{box-shadow:0 0 0 8px rgba(174,0,0,0)}}
@media (prefers-reduced-motion:reduce){.k-pulang.denyut{animation:none}}
.panel-kerja[hidden]{display:none}
.pd-item{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--garis)}
.pd-item .pd-teks{flex:1 1 180px}.pd-item.selesai .pd-teks{text-decoration:line-through;color:var(--redup)}.pd-item.jalan .pd-teks{font-weight:600}
.pd-tambah{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.pd-tambah input{flex:1 1 200px}.pd-pesan{flex-basis:100%;margin:4px 0 0}
.pd-note{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--garis);border-radius:8px;margin-bottom:6px;text-decoration:none;color:var(--teks)}
.pd-note:hover{border-color:var(--merah)}.pd-note .redup{font-size:12px}
@media print{.apung-kerja,.panel-kerja{display:none!important}}
@media (max-width:640px){.sambut-kartu{grid-template-columns:1fr 1fr}.sambut-salam h2{font-size:21px}}
.tautan-kecil{font-size:12.5px;color:var(--redup);align-self:center}.tautan-kecil:hover{color:var(--merah)}
/* v2.10.3 chat di panel geser */
.pd-chat{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--garis);border-radius:8px;margin-bottom:6px;text-decoration:none;color:var(--teks)}
.pd-chat:hover{border-color:var(--merah)}.pd-chat.belum{border-color:#25D366;background:#F1FBF4}
.pd-chat-isi{flex:1;min-width:0;display:flex;flex-direction:column}.pd-chat-isi small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-thread{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow-y:auto;padding:8px;background:#ECE5DD;border-radius:8px}
.pd-gel{max-width:85%;padding:6px 9px;border-radius:8px;background:#fff;font-size:14px;word-break:break-word;align-self:flex-start}
.pd-gel.saya{align-self:flex-end;background:#DCF8C6}.pd-gel b{display:block;font-size:12px;color:var(--merah)}.pd-gel small{display:block;text-align:right;font-size:10.5px;color:var(--redup)}
.pd-gel img{max-width:100%;border-radius:6px}.pd-sis{align-self:center;font-size:12px;color:var(--redup);background:#fff9;padding:2px 8px;border-radius:8px}
.pd-balas{display:flex;gap:6px;margin-top:8px}.pd-balas textarea{flex:1;resize:none}
.apung-kerja{position:fixed}.apung-kerja .lencana{position:absolute;top:-6px;left:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:#25D366;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.apung-kerja .lencana[hidden]{display:none}
/* v2.10.4 modul di form bayar */
.modul-grup{margin-top:10px}.modul-grup>b{display:block;font-size:13px;margin-bottom:6px;color:var(--redup)}.modul-grup>b.sesuai{color:var(--ok)}
.modul-kartu{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.mk{display:flex;flex-direction:column;gap:6px;border:1px solid var(--garis);border-radius:10px;padding:10px;cursor:pointer;background:#fff}
.mk.dipilih{border-color:var(--merah);box-shadow:0 0 0 2px #FDE2E2 inset}
.mk-atas{display:flex;gap:8px;align-items:flex-start}.mk-atas input{margin-top:3px;width:18px;height:18px}.mk-atas>span{display:flex;flex-direction:column}.mk-atas small{font-size:12px}
.mk-harga{display:flex;align-items:center;gap:4px;font-size:13px}.mk-harga input{width:110px}

/* v2.12.2 (D-DLY-06..10) absen pulang terpandu + pengingat jam pulang */
.pl-banner{position:sticky;top:68px;z-index:25;display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;background:#0B6E4F;color:#fff;padding:9px 14px;border-radius:10px;margin:0 0 12px;font-size:13.5px;box-shadow:0 3px 10px rgba(0,0,0,.12)}
.pl-banner[hidden]{display:none}
@media (max-width:700px){.pl-banner{position:static;padding:8px 10px;font-size:13px}}.pl-banner-aksi{display:flex;gap:6px;margin-left:auto}.pl-banner .btn{background:#fff;color:#0B6E4F;border:0;font-weight:700}
.apung-kerja.pulang{background:#0B6E4F;animation:plDenyut 1.6s infinite}
@keyframes plDenyut{0%,100%{box-shadow:-2px 2px 10px rgba(0,0,0,.18),0 0 0 0 rgba(11,110,79,.55)}50%{box-shadow:-2px 2px 10px rgba(0,0,0,.18),0 0 0 10px rgba(11,110,79,0)}}
@media (prefers-reduced-motion:reduce){.apung-kerja.pulang{animation:none}}
.pl-modal{position:fixed;inset:0;z-index:90;background:rgba(20,14,10,.55);display:flex;align-items:center;justify-content:center;padding:14px}.pl-modal[hidden]{display:none}
body.pl-buka{overflow:hidden}
.pl-dlg{width:min(470px,100%);max-height:calc(100vh - 28px);overflow-y:auto;background:var(--kartu);color:var(--teks);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.pl-dlg .hd{padding:14px 16px 8px;border-bottom:1px solid var(--garis);position:relative}.pl-dlg .hd small{color:var(--redup)}
.pl-dlg .hd .x{position:absolute;right:10px;top:10px;border:0;background:none;font-size:16px;color:var(--redup);cursor:pointer}
.pl-dlg .dots{display:flex;gap:5px;margin-top:8px}.pl-dlg .dots i{flex:1;height:5px;border-radius:5px;background:var(--garis)}.pl-dlg .dots i.on{background:var(--merah)}.pl-dlg .dots i.ok{background:#1E7B46}
.pl-dlg .bd{padding:14px 16px}.pl-dlg .itm{font-size:16px;font-weight:700;margin:2px 0 4px}
.pl-dlg .ft{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--garis);background:var(--krem)}
.pl-dlg .ft .kanan2{display:flex;gap:8px;margin-left:auto}
@media (max-width:640px){.pl-dlg .ft .kanan2{flex:1}.pl-dlg .ft .kanan2 .utama{flex:1}}
.pl-dlg .pil5{display:grid;gap:7px;margin:10px 0}
.pl-dlg .pil5 label{display:flex;gap:9px;align-items:center;border:1.5px solid var(--garis);border-radius:11px;padding:9px 11px;font-size:14px;cursor:pointer}
.pl-dlg .pil5 input{position:absolute;opacity:0;pointer-events:none}.pl-dlg .pil5 label:focus-within{outline:2px solid #2F5FB3;outline-offset:1px}
.pl-dlg .pil5 .e{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;flex:none}
.pl-dlg .pil5 small{display:block;color:var(--redup);font-size:11.5px}.pl-dlg .pil5 label.on{border-color:#2F5FB3;background:rgba(47,95,179,.08)}
.pl-dlg .ta,.pl-dlg .bd>.inp{width:100%;border:1px solid var(--garis);border-radius:9px;padding:8px;font:inherit;background:var(--kartu);color:var(--teks);margin-top:6px}.pl-dlg .ta{min-height:58px}
.pl-dlg .besok div{display:flex;gap:7px;align-items:center;margin:5px 0}.pl-dlg .besok .inp{flex:1}
.pl-dlg .rk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 12px}.pl-dlg .rk div{border-radius:10px;padding:8px;text-align:center;background:rgba(30,123,70,.1);font-size:12.5px}.pl-dlg .rk b{display:block;font-size:20px}
.pl-dlg .rk .rk-b{background:rgba(47,95,179,.1)}.pl-dlg .rk .rk-c{background:rgba(183,131,11,.12)}
.pl-ring{font-size:13px;line-height:1.55;background:var(--krem);border:1px solid var(--garis);border-radius:10px;padding:9px 11px;max-height:180px;overflow-y:auto}
.pl-err{margin-top:8px;color:var(--err);background:var(--err-bg);border-radius:8px;padding:7px 10px;font-size:13px}.pl-err[hidden]{display:none}
.btn-lapor{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:12px;border:0;border-radius:12px;background:#1DA851;color:#fff!important;font-weight:700;font-size:15px;cursor:pointer}.btn-lapor svg{stroke:#fff}.btn-lapor:disabled{opacity:.7}
.pl-dlg .apr{text-align:center;padding:22px 20px 18px}.pl-dlg .apr .bintang{font-size:46px;line-height:1}.pl-dlg .apr h2{margin:6px 0 2px;font-size:21px}.pl-dlg .apr p.k{font-size:15px;line-height:1.5;margin:10px 0}
@media print{.pl-banner,.pl-modal{display:none!important}}

/* v2.13.0 (D-DLY-11) absen datang terpandu */
.dt-bagian{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--redup);font-weight:700;margin:10px 0 2px}.dt-bagian span{text-transform:none;font-weight:400;letter-spacing:0}
.dt-cek{display:flex;gap:8px;align-items:flex-start;padding:7px 0;border-top:1px dashed var(--garis);font-size:14px}.dt-cek input{margin-top:3px}
.dt-ket{font-size:12px;margin:2px 0 8px}
.dt-chip{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;background:rgba(47,95,179,.12);color:#2F5FB3;white-space:nowrap;font-weight:600}
.dt-chip.r{background:#EDE7F6;color:#5E35B1}.dt-chip.j{background:#FFF3E0;color:#B26A00}.dt-chip.l{background:var(--err-bg);color:var(--err)}
:root[data-tema="gelap"] .dt-chip.r{background:#2a2140;color:#c7b4f5}:root[data-tema="gelap"] .dt-chip.j{background:#33280f;color:#F0C060}
.dt-jenis{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}.dt-jenis label{border:1.5px solid var(--garis);border-radius:99px;padding:5px 11px;font-size:13px;cursor:pointer}.dt-jenis input{position:absolute;opacity:0;pointer-events:none}
.dt-jenis label.on{border-color:#2F5FB3;background:rgba(47,95,179,.08);font-weight:600}.dt-jenis[hidden]{display:none}
.pl-dlg .dt-inp{width:100%;margin:6px 0 0}

/* v2.13.1 (D-RUT) pekerjaan rutin */
.rt-f{display:grid;grid-template-columns:170px 1fr;gap:12px 14px;align-items:start;max-width:960px}.rt-f>label{padding-top:7px;font-weight:600}.rt-f>.rt-seg{justify-self:start}
@media (max-width:700px){.rt-f{grid-template-columns:1fr}.rt-f>label{padding-top:4px}}
.rt-seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--garis);border-radius:10px;overflow:hidden}
.rt-seg label{padding:7px 14px;font-size:13.5px;border-right:1px solid var(--garis);cursor:pointer}.rt-seg label:last-child{border-right:0}.rt-seg input{position:absolute;opacity:0;pointer-events:none}
.rt-seg label.on{background:var(--merah);color:#fff;font-weight:600}.rt-seg label:focus-within{outline:2px solid #2F5FB3;outline-offset:-2px}
.rt-hari{display:flex;flex-wrap:wrap;gap:5px}.rt-hari label{min-width:42px;text-align:center;padding:6px 4px;border:1.5px solid var(--garis);border-radius:9px;font-size:13px;cursor:pointer}
.rt-hari input{position:absolute;opacity:0;pointer-events:none}.rt-hari label.on{border-color:var(--merah);background:var(--merah);color:#fff;font-weight:600}.rt-hari label:focus-within{outline:2px solid #2F5FB3}
.rt-orang{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.rt-orang label{border:1px solid var(--garis);border-radius:8px;padding:4px 9px;font-size:13px;cursor:pointer}.rt-orang label.on{background:rgba(30,123,70,.1);border-color:#1E7B46}
.rt-orang[hidden],[data-pola][hidden],[data-untuk][hidden]{display:none!important}
.rt-pratinjau{background:var(--krem);border:1px solid var(--garis);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.7}
.pl-banner.rt{background:#B26A00}.pl-banner.rt.lewat{background:#A11919}.pl-banner.rt.lewat .btn{color:#A11919}.pl-banner.rt .btn{color:#B26A00}

/* v2.13.2 (inspeksi 8 Nov) tampilan HP/tablet: judul kolom, tombol & kode tidak dipecah per huruf; tabel lebar bergulir ke samping */
table.t th,table.t .btn,table.t button,table.t .badge,table.t .tk,.kode,table.t [style*="monospace"]{white-space:nowrap}
table.t td{overflow-wrap:normal}
@media (max-width:900px){
  main table.t:not(.kartu-hp){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .cek-tanda{white-space:normal}
  table.lp-tabel th:first-child,table.lp-tabel td:first-child{min-width:140px}
}
@media (max-width:700px){
  .item{grid-template-columns:1fr}.item .aksi{justify-content:flex-start}
}
@media (max-width:640px){.f[style*="px 1fr"]{grid-template-columns:1fr!important}}
.btn.kecil{white-space:nowrap}
.legenda,.tren-legenda{flex-wrap:wrap;row-gap:4px}
.matriks th{white-space:nowrap}
.matriks td:first-child{min-width:120px}
@media (max-width:360px){.sambut-kartu{gap:8px}.sambut-kartu a{padding:10px}.sambut-kartu b{font-size:14px;overflow-wrap:normal}}
@media (max-width:900px){main .matriks{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}}
@media (max-width:420px){.f[style*="1fr auto"]{grid-template-columns:1fr!important}}
@media (max-width:420px){.l-paket label.cek{flex:1 1 100%}.kand{flex-wrap:wrap}.kand form{flex-wrap:wrap}.kand input[type=file]{max-width:100%}}
.tren6 b{white-space:nowrap}@media (max-width:420px){.tren6 b{font-size:15px}}

/* v2.13.2 tabel ruang (Pengaturan › Ruang) muat di HP tanpa geser: nama di baris atas, kapasitas · aktif · simpan di bawahnya */
@media (max-width:600px){
  main table.t.ruang-t{display:block;width:100%;overflow:visible}
  .ruang-t thead{display:none}
  .ruang-t tr>form{display:none} /* form kosong hasil parser (form di dalam tr); input tetap terikat */
  .ruang-t tbody{display:block}
  .ruang-t tr{display:grid;grid-template-columns:auto auto 1fr;gap:8px 14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--garis)}
  .ruang-t td{display:block;padding:0!important;border:0!important;background:none!important;min-width:0}
  .ruang-t td:nth-of-type(1){grid-column:1/-1}
  .ruang-t td:nth-of-type(2),.ruang-t td:nth-of-type(3){display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--redup)}
  .ruang-t td:nth-of-type(2)::before{content:"Kapasitas"}
  .ruang-t td:nth-of-type(3):has(input[type=checkbox])::before{content:"Aktif"}
  .ruang-t td:nth-of-type(4){justify-self:end}
  .ruang-t input[name=nama]{width:100%}
  .ruang-t input[name=kapasitas]{width:64px!important}
}
@media (max-width:360px){.ruang-t tr{column-gap:8px}.ruang-t td:nth-of-type(2)::before{content:"Kap."}.ruang-t input[name=kapasitas]{width:54px!important}.ruang-t .btn.kecil{padding:6px 9px}}