/* Tema "Mosaik Nusantara": krem hangat + coklat bata, judul serif, pola mozaik di kepala halaman.
   Mode gelap = coklat kopi. Pilihan tampilan (Ikuti HP / Terang / Gelap) diatur tema.js lewat <html data-tema>. */
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url('font/lora-latin-700.woff2') format('woff2')}
:root{
  color-scheme:light;
  --z50:#f6ecdc; --z100:#eddcc4; --z500:#b8703d; --z600:#9a5429; --z700:#7f4120; --z800:#6a3418;
  --aksen:#7f4120; --isi:#7f4120; --isi2:#9a5429; --isi-teks:#fff7ec;
  --kepala1:#6a3418; --kepala2:#9a5429; --kepala-teks:#fff7ec;
  --ok:#1f6b4e; --ok50:#e3f1ea;
  --emas:#b7860b; --merah:#b42318; --merah50:#fdecea; --isi-merah:#b42318; --kuning:#8a5a00; --kuning50:#fff4d6; --isi-kuning:#8a5a00;
  --teks:#2b1d14; --redup:#6b5a4c; --garis:#e3d5c1; --garis-isian:#9c8468; --latar:#fbf6ee; --kartu:#fffdf9; --isian:#fffdf9;
  --cincin:rgba(154,84,41,.28); --bayang:rgba(106,52,24,.22); --toast:#2b1d14; --toast-teks:#fff7ec; --tirai:rgba(43,29,20,.55); --pola:.16;
  --judul:'Lora',Georgia,'Times New Roman',serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="terang"]){ color-scheme:dark;
  --z50:#3a2518; --z100:#4a2f1e; --z500:#d08a56; --z600:#b8703d; --z700:#9a5429; --z800:#7f4120;
  --aksen:#eab88e; --isi:#8a4a25; --isi2:#6a3418; --isi-teks:#fff7ec;
  --kepala1:#3b1f10; --kepala2:#6a3418; --kepala-teks:#fff7ec;
  --ok:#8ad9b5; --ok50:#173a2c;
  --emas:#e0b040; --merah:#ffb4a8; --merah50:#4a1a14; --isi-merah:#c0281f; --kuning:#f3cd7a; --kuning50:#3d2c0a; --isi-kuning:#8a5a00;
  --teks:#f6ead9; --redup:#cdbba6; --garis:#4a382b; --garis-isian:#8a7260; --latar:#1a120c; --kartu:#271a12; --isian:#1f150e;
  --cincin:rgba(208,138,86,.35); --bayang:rgba(0,0,0,.5); --toast:#f6ead9; --toast-teks:#2b1d14; --tirai:rgba(0,0,0,.6); --pola:.10; }
}
:root[data-tema="gelap"]{ color-scheme:dark;
  --z50:#3a2518; --z100:#4a2f1e; --z500:#d08a56; --z600:#b8703d; --z700:#9a5429; --z800:#7f4120;
  --aksen:#eab88e; --isi:#8a4a25; --isi2:#6a3418; --isi-teks:#fff7ec;
  --kepala1:#3b1f10; --kepala2:#6a3418; --kepala-teks:#fff7ec;
  --ok:#8ad9b5; --ok50:#173a2c;
  --emas:#e0b040; --merah:#ffb4a8; --merah50:#4a1a14; --isi-merah:#c0281f; --kuning:#f3cd7a; --kuning50:#3d2c0a; --isi-kuning:#8a5a00;
  --teks:#f6ead9; --redup:#cdbba6; --garis:#4a382b; --garis-isian:#8a7260; --latar:#1a120c; --kartu:#271a12; --isian:#1f150e;
  --cincin:rgba(208,138,86,.35); --bayang:rgba(0,0,0,.5); --toast:#f6ead9; --toast-teks:#2b1d14; --tirai:rgba(0,0,0,.6); --pola:.10; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;color:var(--teks);background:var(--latar);line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--aksen)}
.sembunyi{display:none!important}
.redup{color:var(--redup)}
.kecil{font-size:.82rem}
.layar.tengah{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.kotak-masuk{width:100%;max-width:420px;background:var(--kartu);border-radius:22px;padding:1.4rem;box-shadow:0 10px 30px -12px var(--bayang);text-align:center;position:relative;border:1px solid var(--garis);border-top:6px solid var(--isi)}
.kotak-masuk h1{font-size:1.45rem;margin:.5rem 0 .2rem}
.kotak-masuk form{text-align:left;margin-top:1rem}
.logo-besar{width:88px;height:88px;object-fit:contain}
label{display:block;font-weight:700;margin:.8rem 0 .3rem}
input,select,textarea{width:100%;padding:.85rem .9rem;border:2px solid var(--garis-isian);border-radius:14px;background:var(--isian);font-size:1.05rem;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--z600);box-shadow:0 0 0 4px var(--cincin)}
.sandi-baris{display:flex;gap:.4rem}
.tombol-lihat{flex:0 0 auto;border:2px solid var(--garis-isian);background:var(--kartu);border-radius:14px;padding:0 .9rem;font-weight:700}
.petunjuk{font-size:.9rem;background:var(--z50);border-radius:12px;padding:.7rem .8rem;margin:.8rem 0 0}
.tombol{display:block;width:100%;margin-top:1rem;padding:.95rem 1rem;border:0;border-radius:14px;background:var(--isi);color:var(--isi-teks);font-weight:800;font-size:1.05rem}
.tombol:disabled{opacity:.6}
.tombol.halus{background:transparent;color:var(--aksen);border:2px solid var(--garis-isian)}
.tombol.merah{background:var(--isi-merah);color:#fff}
.tombol.kecil{display:inline-block;width:auto;padding:.55rem .9rem;font-size:.92rem;margin-top:.5rem}
.pesan{margin-top:.8rem;font-weight:700;color:var(--merah);min-height:1.2em}
.pesan.ok{color:var(--ok)}
/* aplikasi */
.kepala{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;background:linear-gradient(135deg,var(--kepala1),var(--kepala2));color:var(--kepala-teks);
        padding-top:calc(.6rem + env(safe-area-inset-top))}
.kepala img{width:36px;height:36px;border-radius:50%;background:#fff;object-fit:contain}
.kepala-teks{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.kepala-teks b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kepala-teks span{font-size:.85rem;opacity:.9}
.tombol-anak{border:1px solid rgba(255,247,236,.65);background:rgba(43,29,20,.18);color:var(--kepala-teks);border-radius:999px;padding:.35rem .75rem;font-weight:700;font-size:.85rem}
.isi{max-width:720px;margin:0 auto;padding:.9rem .9rem calc(6rem + env(safe-area-inset-bottom));outline:none}
.bawah{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);background:var(--kartu);
       border-top:1px solid var(--garis);padding-bottom:env(safe-area-inset-bottom)}
.bawah button{position:relative;border:0;background:none;padding:.5rem .1rem .55rem;font-size:.78rem;font-weight:700;color:var(--redup);display:flex;flex-direction:column;align-items:center;gap:.1rem}
.bawah button .ikon{font-size:1.35rem;line-height:1}
.bawah button.aktif{color:var(--aksen)}
.bawah button.aktif::before{content:'';position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--isi)}
.badge{position:absolute;top:.2rem;left:56%;min-width:1.2rem;height:1.2rem;border-radius:999px;background:var(--isi-merah);color:#fff;font-size:.72rem;line-height:1.2rem;padding:0 .3rem}
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:16px;padding:1rem;margin-bottom:.8rem;box-shadow:0 3px 10px -8px var(--bayang)}
.kartu h2{font-size:1.15rem;margin:0 0 .4rem}
.kartu h3{font-size:1.02rem;margin:0 0 .3rem}
.baris{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.salam{background:linear-gradient(135deg,var(--isi),var(--isi2));color:var(--isi-teks);border-color:transparent;position:relative;overflow:hidden}
.salam::before{content:'';position:absolute;inset:0;opacity:var(--pola);pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0 L15 9 L24 12 L15 15 L12 24 L9 15 L0 12 L9 9Z' fill='none' stroke='%23ffe8c7' stroke-width='.8'/%3E%3C/svg%3E")}
.salam > *{position:relative}
.salam .redup{color:#fdf0e0}
.spanduk{background:var(--kuning50);color:var(--kuning);border:2px solid currentColor;border-radius:14px;padding:.75rem .85rem;font-weight:700;margin-bottom:.8rem}
.spanduk button{display:block;margin-top:.4rem;background:var(--isi-kuning);color:#fff;border:0;border-radius:10px;padding:.45rem .8rem;font-weight:800}
.angka-besar{font-size:1.9rem;font-weight:800;line-height:1.1}
.daftar{list-style:none;margin:0;padding:0}
.daftar li{padding:.65rem 0;border-bottom:1px solid var(--garis)}
.daftar li:last-child{border-bottom:0}
.daftar button.li{all:unset;display:block;width:100%;cursor:pointer}
.pil{display:inline-block;font-size:.75rem;font-weight:800;border-radius:999px;padding:.12rem .55rem;background:var(--latar);color:var(--redup)}
.pil.hijau{background:var(--ok50);color:var(--ok)} .pil.merah{background:var(--merah50);color:var(--merah)} .pil.kuning{background:var(--kuning50);color:var(--kuning)}
.isi-teks{overflow-wrap:anywhere}
.menu-lain{display:grid;gap:.55rem}
.menu-lain button{display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;border:1px solid var(--garis);background:var(--kartu);border-radius:16px;padding:.95rem 1rem;font-weight:700;box-shadow:0 3px 10px -8px var(--bayang)}
.menu-lain .ikon{font-size:1.4rem}
.menu-lain .badge{position:static;margin-left:auto}
.kembali{border:0;background:none;color:var(--aksen);font-weight:800;padding:.2rem 0;margin-bottom:.5rem}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:.5rem .4rem;border-bottom:1px solid var(--garis);text-align:left;vertical-align:top}
th{font-size:.8rem;color:var(--redup)}
td.angka,th.angka{text-align:center;white-space:nowrap}
.kosong{text-align:center;color:var(--redup);padding:1.5rem .5rem}
.memuat{display:inline-block;width:1.1rem;height:1.1rem;border:3px solid var(--garis);border-top-color:var(--z600);border-radius:50%;animation:putar 1s linear infinite;vertical-align:middle}
@keyframes putar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .memuat{animation:none} }
.toast{position:fixed;left:50%;bottom:5.5rem;transform:translateX(-50%);z-index:20;display:flex;flex-direction:column;gap:.4rem;width:min(92vw,420px)}
.toast div{background:var(--toast);color:var(--toast-teks);border-radius:12px;padding:.7rem .9rem;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.toast div.galat{background:#9b1c1c;color:#fff}
dialog{border:0;border-radius:20px;padding:0;width:min(94vw,460px);background:var(--kartu);color:var(--teks)}
dialog::backdrop{background:var(--tirai)}
.isi-dialog{padding:1.1rem}
.chip-anak{display:grid;gap:.5rem;margin-top:.6rem}
.chip-anak button{text-align:left;border:2px solid var(--garis-isian);background:var(--kartu);border-radius:14px;padding:.75rem .9rem;font-weight:700}
.chip-anak button.aktif{border-color:var(--z600);background:var(--z50)}
/* angket */
.tanya{background:var(--kartu);border-radius:16px;padding:.9rem;margin-bottom:.7rem;border:2px solid transparent}
.tanya.salah{border-color:var(--merah)}
.tanya .wajib{color:var(--merah)}
.tanya .ket{font-size:.88rem;color:var(--redup);margin-top:.15rem}
.opsi{display:flex;align-items:center;gap:.65rem;padding:.55rem .2rem;font-weight:500;margin:0}
.opsi input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--z600)}
.skala{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem;align-items:center}
.skala label{margin:0;position:relative;cursor:pointer}
.skala input{position:absolute;opacity:0;width:1px;height:1px}
.skala span.nilai{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:50%;border:2px solid var(--garis-isian);font-weight:800}
.skala input:checked + span.nilai{background:var(--isi);border-color:var(--isi);color:var(--isi-teks)}
.skala input:focus-visible + span.nilai{outline:3px solid var(--z500)}
.skala .ujung{font-size:.8rem;color:var(--redup)}
.kisi{overflow-x:auto}
.kisi table{min-width:320px}
.kisi td,.kisi th{text-align:center;border:0}
.kisi td:first-child{text-align:left}
.kisi input{width:22px;height:22px;accent-color:var(--z600)}
.bagian{border-left:6px solid var(--z700);background:var(--kartu);border-radius:12px;padding:.7rem .9rem;margin:1.1rem 0 .7rem}
.bar{height:10px;background:var(--latar);border-radius:99px;overflow:hidden;margin:.15rem 0 .45rem}
.bar div{height:100%;background:var(--z600)}
/* tema: judul serif, pola mozaik, pilihan tampilan */
h1,h2,h3,.kepala-teks b,.angka-besar{font-family:var(--judul);font-weight:700;letter-spacing:.005em}
.kepala::before{content:'';position:absolute;inset:0;opacity:var(--pola);pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0 L15 9 L24 12 L15 15 L12 24 L9 15 L0 12 L9 9Z' fill='none' stroke='%23ffe8c7' stroke-width='.8'/%3E%3C/svg%3E")}
.kepala > *{position:relative}
.layar.tengah{position:relative}
.layar.tengah::before{content:'';position:fixed;inset:0;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0 L15 9 L24 12 L15 15 L12 24 L9 15 L0 12 L9 9Z' fill='none' stroke='%239a5429' stroke-width='.8'/%3E%3C/svg%3E");background-size:36px 36px}
.bawah{box-shadow:0 -4px 14px -12px var(--bayang)}
.baris-tombol{display:flex;flex-wrap:wrap;gap:.5rem}
.pilih-tema{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin-top:.5rem}
.pilih-tema button{border:2px solid var(--garis-isian);background:var(--kartu);border-radius:12px;padding:.65rem .3rem;font-weight:700;font-size:.92rem}
.pilih-tema button[aria-pressed="true"]{background:var(--isi);border-color:var(--isi);color:var(--isi-teks)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--z500);outline-offset:2px}
/* usulan biodata */
details.lipat{padding:0}
details.lipat > summary{cursor:pointer;font-weight:800;padding:1rem;list-style-position:inside}
details.lipat[open] > summary{border-bottom:1px solid var(--garis);margin-bottom:.4rem}
details.lipat > *:not(summary){margin-left:1rem;margin-right:1rem}
details.lipat > .isian-bio:last-child{margin-bottom:1rem}
.isian-bio{margin:0 0 .2rem;border-left:4px solid transparent;padding-left:.5rem}
.isian-bio.ubah{border-left-color:var(--emas)}
.isian-bio.ubah label::after{content:' (diubah)';font-weight:600;font-size:.8rem;color:var(--kuning)}
.isian-bio.salah{border-left-color:var(--merah)}
.isian-bio.salah input,.isian-bio.salah select{border-color:var(--merah)}
.ket-bio{font-size:.8rem;color:var(--redup);margin-top:.2rem}
.galat-bio{font-size:.85rem;font-weight:700;color:var(--merah)}
.tgl-kata{font-size:.9rem;font-weight:700;color:var(--aksen);margin-top:.2rem;min-height:1.2em}
.baris-salin{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.3rem}
.baris-salin .tombol.kecil{margin-top:0}
/* cetak rapor */
.cetak{display:none}
@media print{
  @page{size:A4;margin:12mm}
  body{background:#fff;color:#000}
  #layar-app,#layar-masuk,#layar-wajib,.toast,dialog{display:none!important}
  .cetak{display:block!important;font-family:Arial,Helvetica,sans-serif;font-size:10pt;color:#000}
  .cetak .kop{display:grid;grid-template-columns:18mm 1fr 18mm;align-items:center;gap:3mm;border-bottom:3px double #000;padding-bottom:2mm;margin-bottom:3mm;text-align:center}
  .cetak .kop img{width:16mm;height:16mm;object-fit:contain}
  .cetak .kop .k2{font-size:13pt;font-weight:700}
  .cetak h1{font-size:12pt;text-align:center;margin:2mm 0}
  .cetak table{font-size:9.5pt}
  .cetak table.tb th,.cetak table.tb td{border:1px solid #000;padding:.8mm 2mm;color:#000}
  .cetak table.idn td{border:0;padding:.5mm 1mm}
  .cetak .kotak{border:1px solid #000;padding:1.5mm 2.5mm;min-height:10mm}
  .cetak .ttd{display:grid;grid-template-columns:1fr 1fr;margin-top:5mm;text-align:center;font-size:9.5pt;break-inside:avoid}
  .cetak .ttd .ruang{height:15mm}
  .cetak .ttd .kepsek{grid-column:1/span 2;margin-top:2mm}
  .cetak .kepsek-qr{display:flex;justify-content:center;align-items:center;gap:4mm;text-align:left}
  .cetak .kepsek-qr img{width:24mm;height:24mm}
  .cetak .catatan-portal{font-size:7.5pt;color:#333;margin-top:3mm;text-align:center}
}

/* Balasan Kepala Madrasah pada Saran & Laporan */
.balasan{border-left:4px solid var(--ok);background:rgba(31,107,78,.10);border-radius:12px;padding:.65rem .8rem;margin-top:.5rem;overflow-wrap:anywhere}
textarea{resize:vertical;min-height:7rem}

/* ---------- pembayaran SPP & Daftar Ulang ---------- */
.tagihan{display:flex;gap:.7rem;align-items:flex-start;padding:.75rem 0;border-bottom:1px solid var(--garis);cursor:pointer;font-weight:400}
.tagihan input{width:22px;height:22px;flex:none;margin:.15rem 0 0;padding:0}
.tagihan .t-isi{flex:1;min-width:0}
.tagihan .t-isi b{display:block;line-height:1.35}
.tagihan .t-angka{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.t-du{padding:.5rem 0 .8rem 2.3rem;border-bottom:1px solid var(--garis)}
.pil-baris{display:flex;gap:.35rem;flex-wrap:wrap;margin:.5rem 0 .2rem}
.total-bayar{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;margin:.9rem 0 .6rem;font-weight:800}
.total-bayar #by-jumlah{font-size:1.25rem;font-variant-numeric:tabular-nums}
.rek-besar{font-size:1.6rem;font-weight:800;letter-spacing:.05em;font-variant-numeric:tabular-nums;margin:.15rem 0;word-break:break-all}
.jalan{padding:.7rem 0;border-bottom:1px solid var(--garis)}
.jalan:last-child{border-bottom:0;padding-bottom:0}
.qr-bayar{display:block;width:min(260px,80%);height:auto;margin:.6rem auto;border-radius:12px;background:#fff;padding:6px}
.pratinjau-bukti{display:block;max-width:100%;max-height:280px;margin:.7rem auto .3rem;border-radius:10px;border:1px solid var(--garis)}
input[type=file]{padding:.55rem;font-size:.95rem}
#by-rincian .baris > span, .tagihan .t-isi, .jalan, #by-riwayat li{min-width:0;overflow-wrap:anywhere}
#by-rincian .baris > b, #by-riwayat .baris > b{white-space:nowrap}
.salam .tombol.halus{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.jalan .baris{flex-wrap:wrap}
.jalan .baris > b{white-space:nowrap;font-size:1.15rem;font-variant-numeric:tabular-nums}
.tagihan .t-isi .redup{display:block;line-height:1.45;margin-top:.15rem}
.kw-kepala{text-align:center;line-height:1.5;border-bottom:2px solid var(--garis);padding-bottom:.6rem;margin-bottom:.5rem}
.kw-tabel{width:100%;border-collapse:collapse}
.kw-tabel td{padding:.4rem 0;border-bottom:1px solid var(--garis);vertical-align:top}
.kw-tabel td.angka{text-align:right;font-variant-numeric:tabular-nums;padding-left:.8rem}
.kw-tabel .kw-jumlah td{border-bottom:0;border-top:2px solid var(--garis);font-size:1.1rem}
.kw-kaki{display:flex;gap:.9rem;align-items:center;margin-top:.8rem;line-height:1.45}
.kw-kaki img{width:110px;height:110px;background:#fff;border-radius:8px;padding:4px;flex:none}
@media print{
  .cetak .kw-cetak{max-width:150mm;margin:0 auto;border:1px solid #000;padding:6mm}
  .cetak .kw-cetak .kw-kepala{border-bottom:2px solid #000}
  .cetak .kw-cetak .kw-tabel td{border-bottom:1px solid #999;color:#000}
  .cetak .kw-cetak .kw-jumlah td{border-top:2px solid #000}
  .cetak .kw-cetak .redup{color:#333}
}

/* Rencana penarikan tabungan (Fitur 4): tanggal tetap "besok" yang tidak bisa diubah */
.isian-tetap{padding:.85rem .9rem;border:2px dashed var(--garis-isian);border-radius:14px;background:var(--latar)}
/* Angket lompat bagian: satu bagian per halaman */
.hal-bagian[hidden],.nav-bagian [hidden],#f-angket .tombol[hidden]{display:none!important}
.nav-bagian{margin-top:.6rem}
.nav-bagian .tombol{margin-top:.6rem}