/* ══════════ HSSTahfizh — mushaf PWA ══════════
   Mode siang & malam memanfaatkan gambar QK_*.webp berlatar TRANSPARAN.
   Malam: balik LIGHTNESS saja (hue & saturasi dipertahankan) supaya warna
   tajwid tetap membawa makna hukum bacaan yang benar. Membalik RGB mentah
   akan mengubah hijau jadi magenta — untuk mushaf tajwid itu fatal.        */

:root{
  --pad: env(safe-area-inset-bottom, 0px);
  /* Tinggi status bar HP (jam, baterai, sinyal). WAJIB dipakai karena
     `viewport-fit=cover` di index.html membuat konten naik SAMPAI tepi layar —
     tanpa ini bilah atas menumpuk indikator sistem. */
  --padTop: env(safe-area-inset-top, 0px);
  --bar: 52px;
  /* Ruang yang dipotong pemutar audio saat tampil. 0 ketika audio mati,
     supaya mushaf memakai seluruh tinggi layar. */
  --sisaPlayer: 0px;
  /* Warna aksen HIJAU (dulu emas-coklat). Dipakai untuk bilah tab, judul juz,
     bingkai panel, sorotan ayat — semua di satu tempat supaya konsisten. */
  --aksen: #1f7a4d;         /* hijau utama */
  --aksen-tua: #14593a;     /* untuk teks di atas latar hijau terang */
  --aksen-muda: #d9ecdf;    /* blok lembut: arti per-kata, dsb. */
  --ff: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* `height:100%` DIHINDARI di sini: itu mengunci tinggi html/body ke tinggi
   layar, sehingga saat isi lebih panjang (mushaf di layar mendatar) elemen
   `position:sticky` — bilah atas — kehilangan wadah dan ikut hanyut tergulir.
   `min-height` memberi tinggi minimum tanpa mengunci. */
html,body{margin:0; min-height:100%; font-family:var(--ff);
  overscroll-behavior-y:none}

/* ── tema ── */
/* Siang: kertas putih kehijauan tipis, bukan krem kecoklatan. */
body.siang{ --bg:#eef4ef; --kertas:#ffffff; --tinta:#1c2a21; --lemah:#5f7268;
            --garis:#c3dbcb; --panel:#ffffff; --barbg:#14432f; --bartx:#eaf5ee;
            --aksen-kontras:#ffffff }
/* Malam: hijau sangat gelap, tetap netral supaya tajwid tidak terganggu. */
body.malam{ --bg:#0b110d; --kertas:#111a14; --tinta:#e6efe8; --lemah:#8ba193;
            --garis:#24382c; --panel:#141f18; --barbg:#081109;
            --bartx:#dcebe1; --aksen:#3fa86b; --aksen-tua:#0c3f27;
            --aksen-muda:#1a2c21; --aksen-kontras:#08150d }
body{background:var(--bg); color:var(--tinta); transition:background .2s}

/* ── bilah atas ── */
/* Latar meluas ke belakang status bar (padding-top), tapi ISI-nya turun
   sehingga tombol tidak menumpuk jam/baterai/sinyal. */
#bar{position:sticky; top:0; z-index:20;
  height:calc(var(--bar) + var(--padTop)); padding-top:var(--padTop);
  background:var(--barbg); color:var(--bartx);
  display:flex; align-items:center; gap:8px; padding-left:8px;
  padding-right:8px}
#loc{flex:1; min-width:0; line-height:1.15}
#loc b{display:block; font-size:14px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
#loc span{font-size:11px; opacity:.72}
.ic{background:transparent; border:0; color:inherit; font-size:19px;
  padding:6px 7px; cursor:pointer; border-radius:8px; flex-shrink:0;
  line-height:1}
.ic:active{background:rgba(255,255,255,.14)}
/* penanda aktif: hijau, supaya terlihat dari bilah atas tanpa membuka panel */
.ic.on{color:var(--aksen)}
@media (max-width:360px){
  .ic{font-size:17px; padding:6px 5px}
  #loc b{font-size:13px}
}

/* ── panggung mushaf ── */
/* Bingkai ornamen mushaf DIBUANG lewat crop supaya huruf tampil lebih besar.
   Nama surah, nomor halaman, dan juz yang tercetak di bingkai sudah diwakili
   header & footer aplikasi, jadi tidak ada informasi yang hilang.

   Koordinat crop DIUKUR dari gambar (1080x1745), bukan ditebak. Bingkai mushaf
   ASIMETRIS — margin jilid ada di sisi dalam, jadi halaman ganjil dan genap
   punya batas kiri/kanan yang berbeda (saling cermin):
     genap  : x  56..1059
     ganjil : x  20..1023
     keduanya: y 67..1684
   Crop dilakukan dengan menskalakan gambar lalu menggesernya di dalam bingkai
   ber-overflow:hidden, sehingga #regions (koordinatnya relatif gambar penuh)
   cukup digeser dengan transform yang SAMA — posisi tap tetap presisi. */
/* Mushaf dibuat MUAT SATU LAYAR — tidak perlu digulir sama sekali.
   Ini sebabnya baris bawah tadi selalu tertutup pemutar: halaman 1258px
   sementara layar 633px, jadi menambah ruang bawah hanya menolong di ujung
   gulir. Dengan tinggi dibatasi sisa layar, seluruh 15 baris selalu terlihat.

   Ukuran diambil dari yang TERKECIL antara batas lebar dan batas tinggi,
   supaya halaman selalu utuh tanpa pernah terpotong — di HP tegak biasanya
   lebar yang membatasi, di layar lebar/mendatar tingginya. */
/* Mushaf DI TENGAH ruang yang tersedia, tombol halaman MEPET BAWAH.
   Sebelumnya semuanya menumpuk di atas dengan sisa ruang kosong di bawah. */
#stage{padding:8px; display:flex; flex-direction:column; align-items:center;
  gap:8px; min-height:0;
  /* Lebar mushaf dihitung SEKALI di sini lalu dipakai juga oleh bilah tombol
     halaman, supaya keduanya selalu sejajar. Sebelumnya bilah tombol memakai
     780px sendiri sehingga di tablet mendatar terlihat jauh lebih lebar
     daripada mushafnya. */
  --rasio: 0.62005;
  --sisaFoot: 58px;
  /* `--padTop` ikut dipotong: bilah atas kini lebih tinggi karena menyertakan
     ruang status bar. */
  --sisaTinggi: calc(100dvh - var(--bar) - var(--padTop) - var(--sisaFoot)
                     - 24px - var(--pad) - var(--sisaPlayer));
  /* Utamakan muat satu layar, tapi jangan mengecil di bawah ambang terbaca. */
  --lebarMushaf: max(min(100%, 320px),
                     min(780px, 100%, var(--sisaTinggi) * var(--rasio)));
  /* Isi panggung setinggi sisa layar supaya `justify-content` punya ruang
     untuk memusatkan mushaf dan mendorong tombol ke bawah. */
  min-height:calc(100dvh - var(--bar) - var(--padTop));
  justify-content:center}
#pageWrap{position:relative; flex:0 1 auto;
  /* `margin-block:auto` membagi sisa ruang RATA atas & bawah -> mushaf
     memusat vertikal, sekaligus mendorong bilah tombol ke dasar layar. */
  margin-block:auto;
  width:var(--lebarMushaf);
  background:var(--kertas); border:1px solid var(--garis); border-radius:10px;
  box-shadow:0 2px 14px rgba(20,60,40,.10); overflow:hidden;
  aspect-ratio:1002 / 1616}

/* LAYAR PENDEK / MENDATAR (tinggi ≤ 650px)
   Mushaf potret 15 baris tidak mungkin muat di layar mendatar: batas tinggi
   hanya menyisakan ~159px lebar, jauh di bawah ambang terbaca. Karena sudah
   pasti harus digulir, lebih baik memakai LEBAR yang tersedia sepenuhnya —
   huruf jadi besar dan nyaman dibaca sambil digulir, bukan kecil DAN digulir.
   Ambang 650px = tinggi minimum agar mushaf 320px masih muat satu layar
   (320/0.62005 + 134px untuk bilah & tombol). */
@media (max-height: 650px){
  #stage{ --lebarMushaf: min(780px, 100%) }
}
/* LAYAR LEBAR & TINGGI (tablet/desktop mendatar)
   Batas tinggi di sini menghasilkan mushaf yang jauh lebih sempit daripada
   ruang yang ada (mis. 425px di layar 1180px = 37%). Di layar seluas itu
   menggulir sedikit jauh lebih baik daripada huruf kecil, jadi lebar
   dinaikkan sampai separuh layar. */
@media (min-height: 651px) and (min-width: 900px){
  #stage{ --lebarMushaf: min(780px, 100%, max(52vw, var(--sisaTinggi) * var(--rasio))) }
}
/* Lapisan yang digeser+diperbesar. Gambar dan SVG region ikut bersama,
   jadi keduanya tidak pernah bergeser relatif satu sama lain.
   `transform` membuat lapisan ini jadi stacking context TERSENDIRI, sehingga
   mix-blend-mode pada #regions hanya berbaur dengan isi lapisan ini. Gambar
   mushaf berlatar TRANSPARAN, jadi kertasnya harus ada DI SINI — kalau hanya
   di #pageWrap (luar), multiply berbaur dengan ketiadaan dan sorotan tidak
   pernah terlihat. */
#pageCrop{position:absolute; inset:0; transform-origin:0 0;
  background:var(--kertas)}

/* ── animasi geser halaman ──
   Dua lapisan: `#pageCrop` (halaman baru) dan `#pageCropLama` (halaman lama).
   Saat berpindah, keduanya digeser bersamaan sehingga terlihat MENGGESER,
   bukan gambar berganti mendadak.
   Arah RTL: maju = halaman baru masuk dari KIRI, lama keluar ke KANAN. */
#pageCropLama{position:absolute; inset:0; transform-origin:0 0;
  background:var(--kertas); pointer-events:none; display:none; z-index:2}
#pageCropLama img{width:100%; display:block}
body.malam #pageCropLama img{
  filter:invert(1) hue-rotate(180deg) saturate(1.22) brightness(1.06)}
/* Saat animasi aktif, kedua lapisan diberi transisi & lapisan lama tampil */
#pageWrap.geser #pageCropLama{display:block}
#pageWrap.geser #pageCrop,
#pageWrap.geser #pageCropLama{transition:transform .26s cubic-bezier(.22,.61,.36,1)}
/* Gambar berada DI ATAS lapisan sorotan (lihat urutan di index.html).
   `pointer-events:none` supaya ketukan tetap tembus ke rect di bawahnya. */
#pageImg{width:100%; display:block; position:relative; z-index:1;
  pointer-events:none}
/* mode malam: balik lightness, hue terjaga */
body.malam #pageImg{filter:invert(1) hue-rotate(180deg) saturate(1.22) brightness(1.06)}
#regions{position:absolute; inset:0; width:100%; height:100%; z-index:0}
#regions rect{fill:transparent; cursor:pointer; transition:fill .12s}
/* sentuhan sesaat saat ayat diketuk — hijau muda, sekadar umpan balik */
#regions rect:active{fill:var(--aksen-muda); fill-opacity:1}
/* halaman yang masuk penanda hafalan: hijau sangat lembut menyeluruh —
   lebih pudar daripada sorotan audio supaya keduanya bisa dibedakan. */
#regions rect.hafal{fill:#e4f2e9; fill-opacity:1}
body.malam #regions rect.hafal{fill:#16241b}
/* Sorotan ayat aktif HARUS menang atas penanda hafalan — ditulis setelahnya
   dan dengan selektor lebih spesifik.
   Hijau muda senada blok arti per-kata. Tidak memakai --aksen-muda mentah
   (#d9ecdf) karena di atas kertas putih warnanya nyaris tak terlihat — diuji
   langsung, butuh sedikit lebih berisi agar terbaca sebagai sorotan. */
#regions rect.on, #regions rect.hafal.on{fill:#c2e2cd; fill-opacity:1}
/* Malam: kertas gelap, jadi sorotan pakai hijau gelap senada blok kata. */
body.malam #regions rect.on,
body.malam #regions rect.hafal.on{fill:#22402e}

body.playerOn{ --sisaPlayer: 66px }   /* 58px pemutar + 8px jarak */
/* Bilah tombol halaman TETAP TAMPIL saat audio berjalan (permintaan user):
   pindah halaman sambil menyimak adalah hal yang wajar, jadi tombolnya
   tidak boleh hilang. Ruangnya tetap diperhitungkan (--sisaFoot utuh). */
/* Bila mushaf tetap harus digulir (layar mendatar/pendek), ruang bawah
   disediakan supaya baris terakhir tidak tertutup pemutar. */
body.playerOn #stage{padding-bottom:calc(74px + var(--pad))}

/* Bilah tombol memakai lebar yang SAMA dengan mushaf supaya sejajar.
   TIDAK memakai `margin-top:auto` — itu menyerap SELURUH sisa ruang sehingga
   mushaf terdorong menempel ke atas (terukur: sisa 8px atas vs 131px bawah).
   Mushaf yang memusatkan diri (margin-block:auto) sudah cukup mendorong
   bilah ini ke dasar. */
#pageFoot{width:var(--lebarMushaf); max-width:100%; display:flex;
  align-items:center; justify-content:space-between; gap:8px;
  padding-bottom:var(--pad)}
.nav{flex:1; background:var(--panel); color:var(--tinta);
  border:1px solid var(--garis); border-radius:9px; padding:11px 8px;
  font:inherit; font-size:13px; cursor:pointer}
.nav:active{background:var(--aksen); color:var(--aksen-kontras)}
/* nomor halaman = tombol lompat cepat, lebih sempit dari tombol navigasi */
#pageNo{flex:0 0 auto; min-width:104px; font-size:12.5px;
  background:var(--aksen-muda); color:var(--tinta)}
#pageNo:active{background:var(--aksen); color:var(--aksen-kontras)}

/* ── panel ayat ── */
#sheet{position:fixed; left:0; right:0; bottom:0; z-index:30;
  max-height:76vh; display:flex; flex-direction:column;
  background:var(--panel); border-top:2px solid var(--aksen);
  border-radius:16px 16px 0 0; box-shadow:0 -6px 26px rgba(0,0,0,.26);
  padding-bottom:var(--pad); transform:translateY(0); transition:transform .22s}
#sheet.hidden{transform:translateY(104%)}
/* `#sheet{display:flex}` lebih spesifik daripada aturan bawaan peramban
   `[hidden]{display:none}`, sehingga atribut hidden tadinya TIDAK berfungsi —
   panel hanya tergeser ke bawah tapi tetap ada di pohon dokumen (masih bisa
   dibaca pembaca layar & masih menyita ruang). Aturan ini memperbaikinya. */
#sheet[hidden]{display:none}
#sheetGrip{width:42px; height:4px; border-radius:2px; background:var(--garis);
  margin:7px auto 3px}
#sheetHead{display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; padding:4px 12px 8px}
#sheetHead b{font-size:15px}
#sheetHead span{display:block; font-size:11px; color:var(--lemah)}
.shBtns{display:flex; gap:4px; flex-shrink:0}
.chip{background:transparent; border:1px solid var(--garis); color:var(--tinta);
  border-radius:8px; padding:6px 9px; font:inherit; font-size:13px; cursor:pointer}
.chip:active{background:var(--aksen); color:var(--aksen-kontras)}
.chip.on{background:var(--aksen); color:var(--aksen-kontras); border-color:var(--aksen)}
.chip.go{background:var(--aksen); color:var(--aksen-kontras); border-color:var(--aksen);
  font-weight:600}
.chip.big{font-size:17px; padding:7px 14px}

/* baris navigasi ayat di panel — tombol lebar penuh, mudah disentuh */
#shNav{display:flex; gap:6px; padding:0 12px 8px; flex-shrink:0}
.navb{flex:1; background:var(--aksen-muda); color:var(--tinta);
  border:1px solid var(--garis); border-radius:9px; padding:11px 8px;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  min-height:42px}
.navb:active{background:var(--aksen); color:var(--aksen-kontras);
  border-color:var(--aksen)}
.navb:disabled{opacity:.35; cursor:default}
.navb small{font-size:11px; font-weight:400; opacity:.75}

/* PENTING: flex-shrink:0 supaya bilah tab TIDAK tertekan/tertumpuk ketika
   isi daftar panjang (114 surah). Tanpa ini, tab menyusut sampai hilang di
   tab Surah tapi tampak normal di tab lain yang isinya pendek. */
#tabs,#drawerTabs{display:flex; gap:4px; padding:0 10px 8px; overflow-x:auto;
  flex-shrink:0}
#drawerTabs{background:var(--panel); position:relative; z-index:3;
  padding-top:8px; border-bottom:1px solid var(--garis)}
.tab,.dtab{flex:0 0 auto; background:transparent; border:0; font:inherit;
  font-size:12.5px; color:var(--lemah); padding:7px 11px; border-radius:8px;
  cursor:pointer; white-space:nowrap}
.tab.on,.dtab.on{background:var(--aksen); color:var(--aksen-kontras); font-weight:600}
/* min-height:0 wajib: tanpa ini flex item tidak boleh menyusut di bawah
   tinggi isinya, sehingga overflow-y tidak pernah aktif dan isi meluber. */
#sheetBody,#drawerBody{overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:2px 12px 16px; font-size:14px; line-height:1.62;
  flex:1 1 auto; min-height:0}

/* arti per-kata */
.kata{display:flex; flex-wrap:wrap; gap:7px; direction:rtl}
.kk{background:var(--aksen-muda); border:1px solid var(--garis);
  border-radius:9px; padding:7px 10px; text-align:center; min-width:62px}
.kk .ar{font-size:21px; line-height:1.9; font-family:"LPMQ", serif}
.kk .id{font-size:10.5px; color:var(--lemah); direction:ltr; margin-top:2px}
.kk.kosong{background:transparent; border-style:dashed}
.kk.kosong .id{opacity:.45; font-style:italic}

.blok{margin:0 0 14px}
.blok h4{margin:0 0 4px; font-size:12px; color:var(--aksen);
  text-transform:uppercase; letter-spacing:.4px}
.blok p{margin:0; white-space:pre-wrap}
.blok .fn{font-size:11.5px; color:var(--lemah); margin-top:5px}
.ar-ayat{font-family:"LPMQ", serif; font-size:26px; line-height:2.5;
  direction:rtl; text-align:justify; margin:0 0 12px}

/* ── menu samping ── */
/* Laci menempel ke tepi FISIK layar (top:0), jadi isinya akan menumpuk
   jam/baterai/sinyal kalau tidak didorong turun. Sama seperti bilah atas:
   latar tetap meluas ke belakang status bar (enak dilihat), tapi ISI-nya
   dimulai di bawahnya lewat padding-top safe-area.
   TIDAK bisa diuji di browser desktop — di sana env() = 0. */
#drawer{position:fixed; top:0; bottom:0; left:0; z-index:40; width:min(86vw,340px);
  background:var(--panel); border-right:1px solid var(--garis);
  display:flex; flex-direction:column; transform:translateX(0);
  transition:transform .2s;
  padding-top:var(--padTop); padding-bottom:var(--pad)}
#drawer.hidden{transform:translateX(-102%)}
#drawerHead{display:flex; align-items:center; justify-content:space-between;
  padding:12px; border-bottom:1px solid var(--garis); flex-shrink:0}
#scrim{position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.42)}
#scrim.hidden{display:none}
.item{display:flex; align-items:center; gap:9px; padding:9px 6px;
  border-bottom:1px solid var(--garis); cursor:pointer}
.item:active{background:var(--bg)}
.item .no{width:28px; height:28px; flex-shrink:0; border-radius:50%;
  background:var(--bg); border:1px solid var(--garis); font-size:11px;
  display:grid; place-items:center}
.item .nm{flex:1; min-width:0}
.item .nm b{display:block; font-size:13.5px}
.item .nm span{font-size:10.5px; color:var(--lemah)}
.item .ar{font-family:"LPMQ", serif; font-size:19px}
#drawerBody input[type=text]{width:100%; padding:10px; font:inherit;
  border:1px solid var(--garis); border-radius:9px; background:var(--bg);
  color:var(--tinta); margin:6px 0 10px}

/* kotak cari surah tetap terlihat saat daftar digulir; z-index:2 berada
   di atas judul juz (1) tapi di bawah bilah tab (3) */
#sFilterWrap{position:sticky; top:0; z-index:2; background:var(--panel);
  padding-top:2px}
#sFilterWrap input{margin:4px 0 8px}

/* judul kelompok juz pada daftar surah — lengket saat digulir supaya
   santri selalu tahu sedang melihat juz berapa.
   z-index HARUS di bawah #drawerTabs (z-index:3) agar tidak menimpa tab. */
.gh{position:sticky; top:52px; z-index:1; display:flex; align-items:baseline;
  justify-content:space-between; gap:8px; padding:7px 8px; cursor:pointer;
  background:var(--aksen); color:var(--aksen-kontras); border-radius:7px; margin:10px 0 2px}
.gh span{font-size:11.5px; font-weight:700; letter-spacing:.6px}
.gh small{font-size:10px; opacity:.82}
.gh:active{filter:brightness(.93)}
.grup:first-child .gh{margin-top:2px}
/* baris lanjutan surah pada juz yang tidak memulai surah baru */
.item.lanjut{opacity:.72}
.item.lanjut .no{background:transparent; border-style:dashed}

/* ── pemutar ── */
/* Saat panel ayat terbuka, pemutar duduk DI ATAS panel (bukan menimpanya).
   Sebelumnya pemutar menutupi 66px bagian bawah panel — di layar HP yang
   pendek itu terlihat seperti panel tertutup sendiri. */
/* Pemutar MEPET dasar layar — hanya disisakan ruang safe-area (tombol
   navigasi sistem), bukan jarak kosong tambahan. */
#player{position:fixed; left:0; right:0; bottom:0;
  z-index:32; background:var(--panel);
  border-top:1px solid var(--aksen);
  padding:8px 10px calc(8px + var(--pad)); display:flex; align-items:center;
  gap:10px; box-shadow:0 4px 18px rgba(0,0,0,.24)}
#player.hidden{display:none}
/* panel ayat terbuka + audio berjalan -> sisakan ruang untuk pemutar */
body.adaPlayer #sheet{padding-bottom:calc(var(--pad) + 74px)}
#plInfo{flex:1; min-width:0}
#plInfo b{display:block; font-size:13px}
#plInfo span{font-size:10.5px; color:var(--lemah)}
/* Pemilih qari di dalam pemutar: dibuat rata dengan latar supaya tidak
   terlihat seperti kotak formulir yang berat, tapi tetap jelas bisa diketuk. */
#plQari{width:100%; max-width:100%; margin-top:2px;
  font:inherit; font-size:11px; color:var(--lemah);
  background:transparent; border:1px solid var(--garis);
  border-radius:6px; padding:2px 4px; cursor:pointer}
#plCtl{display:flex; gap:4px; align-items:center}
#plSet svg{display:block}

/* ── dialog ── */
#repDlg, #goDlg{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.5);
  display:grid; place-items:center; padding:16px}
#repDlg.hidden, #goDlg.hidden{display:none}
.dlg{background:var(--panel); border:1px solid var(--aksen); border-radius:14px;
  padding:14px; width:100%; max-width:380px; display:flex; flex-direction:column;
  gap:9px; max-height:86vh; overflow:auto}
.dlgFoot{display:flex; justify-content:flex-end; margin-top:2px}
.dlg label{font-size:12px; color:var(--lemah); display:block}
.dlg input,.dlg select{width:100%; padding:8px; font:inherit; font-size:14px;
  margin-top:3px; border:1px solid var(--garis); border-radius:8px;
  background:var(--bg); color:var(--tinta)}
.dlg .row{display:flex; gap:8px}
.dlg .row.end{justify-content:flex-end; margin-top:4px}
.dlg .row label{flex:1}
/* pilihan bersegmen: 1×/2×/3×/Loop — lebih cepat disentuh daripada input angka */
.seg{display:flex; gap:4px; margin-top:4px}
.sg{flex:1; background:var(--bg); border:1px solid var(--garis);
  color:var(--tinta); border-radius:8px; padding:8px 4px; font:inherit;
  font-size:12.5px; cursor:pointer; white-space:nowrap}
.sg.on{background:var(--aksen); color:var(--aksen-kontras); border-color:var(--aksen);
  font-weight:700}
.dlg label.chk{display:flex; align-items:center; gap:8px; font-size:12px;
  color:var(--tinta)}
.dlg label.chk input{width:auto; margin:0; flex-shrink:0}
#repRangeRow.hidden{display:none}

/* pilihan edisi terjemah/tafsir di tab Tampilan */
.pick{display:flex; align-items:flex-start; gap:9px; padding:8px 4px;
  border-bottom:1px solid var(--garis); cursor:pointer}
.pick:active{background:var(--aksen-muda)}
.pick input{flex-shrink:0; margin-top:3px; width:17px; height:17px;
  accent-color:var(--aksen)}
.pick span{flex:1; min-width:0}
.pick b{display:block; font-size:13px; font-weight:600}
.pick small{display:block; font-size:10.5px; color:var(--lemah); margin-top:1px}
.chip:disabled{opacity:.35; cursor:default}

/* Pemilih qari berada tepat di atas info & tombol unduh audio, jadi perlu
   jarak bawah — tanpa ini angka "Tersimpan N ayat" menempel ke kotak pilihan
   dan terbaca seperti bagian dari dropdown. */
#qariSel{margin-bottom:8px}

/* ── layar Unduh: bilah progres & tombol berbahaya ── */
/* Bilah progres pakai lebar persen pada <i>, bukan <progress> bawaan:
   tampilan <progress> berbeda-beda antar WebView Android dan tidak bisa
   diwarnai mengikuti tema siang/malam. */
.bar{height:6px; border-radius:99px; background:var(--garis);
  overflow:hidden; margin:8px 0 4px}
.bar i{display:block; height:100%; background:var(--aksen);
  border-radius:99px; transition:width .15s linear}
.bad{color:#b3261e}
body.malam .bad{color:#ff8a80}

/* Tombol hapus dibedakan JELAS dari tombol unduh: warnanya merah dan
   memenuhi lebar, supaya tidak tertekan saat santri bermaksud mengunduh. */
.chip.hapus{display:block; width:100%; margin-top:10px;
  border-color:#e3b4b0; color:#b3261e}
.chip.hapus:active{background:#b3261e; color:#fff; border-color:#b3261e}
body.malam .chip.hapus{border-color:#6b2c28; color:#ff8a80}

/* Tombol hentikan tetap terlihat sebagai jalan keluar saat unduhan jalan. */
.chip.stop{border-color:var(--aksen); color:var(--aksen)}
.chip.stop.hidden{display:none}

/* tab Halaman: input nomor + tombol Buka */
.gorow{display:flex; gap:8px; align-items:stretch; margin:6px 0 6px}
/* `width:auto` mengalahkan `.dlg input{width:100%}` supaya flex:1 bekerja
   dan tombol Buka tidak terdorong ke bawah. */
.gorow input{flex:1; width:auto; margin-top:0; padding:12px; font:inherit;
  font-size:18px; font-weight:700; text-align:center;
  border:1px solid var(--garis); border-radius:9px;
  background:var(--bg); color:var(--tinta)}
/* Sembunyikan panah naik-turun bawaan peramban: memakan ruang dan membuat
   angka tampak tidak di tengah. Nomor halaman diketik langsung. */
.gorow input::-webkit-outer-spin-button,
.gorow input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.gorow input{-moz-appearance:textfield; appearance:textfield}
.gorow .chip{padding:0 18px; font-size:14px}
/* kisi lompat cepat per juz */
.gogrid{display:grid; grid-template-columns:repeat(auto-fill, minmax(72px,1fr));
  gap:6px; margin-top:6px}
.gobox{background:var(--aksen-muda); border:1px solid var(--garis);
  border-radius:9px; padding:8px 4px; font:inherit; cursor:pointer;
  color:var(--tinta); text-align:center; min-height:46px}
.gobox:active{background:var(--aksen); color:var(--aksen-kontras);
  border-color:var(--aksen)}
.gobox b{display:block; font-size:12.5px}
.gobox small{display:block; font-size:9.5px; color:var(--lemah); margin-top:1px}
.gobox:active small{color:inherit; opacity:.8}

#toast{position:fixed; left:50%; bottom:calc(76px + var(--pad));
  transform:translateX(-50%); z-index:60; background:var(--barbg); color:var(--bartx);
  padding:9px 15px; border-radius:20px; font-size:12.5px; max-width:86vw;
  text-align:center; box-shadow:0 3px 14px rgba(0,0,0,.3)}
#toast.hidden{display:none}
.hidden{display:none}

@font-face{
  font-family:"LPMQ";
  src:url("/font/LPMQ_IsepMisbah.ttf") format("truetype");
  font-display:swap;
}

/* ══════════════════ layar depan ══════════════════
   Menutupi mushaf (position:fixed + z-index tinggi), bukan menggantikannya.
   Mushaf tetap hidup di belakang sehingga membuka Al-Qur'an terasa seketika. */
#beranda{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column;
  background:var(--bg);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
#beranda.hidden{display:none}

/* Blok atas: gradasi hijau, seragam dengan warna aksen aplikasi.
   padding-top memakai safe-area supaya tidak menabrak jam & baterai. */
#bdAtas{
  background:linear-gradient(160deg,#1f7a4d 0%,#14593a 55%,#0f4a30 100%);
  color:#fff;
  padding:calc(var(--padTop) + 14px) 18px 20px;
  border-radius:0 0 26px 26px;
}
body.malam #bdAtas{
  background:linear-gradient(160deg,#17603c 0%,#0e3f28 55%,#092b1c 100%);
}

#bdKota{font-size:15px; opacity:.9; letter-spacing:.2px}

#bdJudul{
  margin:2px 0 12px; font-size:27px; font-weight:800; letter-spacing:.3px;
}
#bdJudul span{font-weight:400; opacity:.92}

/* Dua tanggal dalam satu kapsul: Masehi di atas, Hijriah di bawah. */
#bdTgl{
  background:rgba(255,255,255,.16);
  border-radius:14px; padding:9px 14px; margin-bottom:14px;
}
#bdMasehi{font-size:13.5px; opacity:.92}
#bdHijri{font-size:16px; font-weight:700; margin-top:2px}

/* Waktu sholat terdekat + ilustrasi masjid di kanan. */
#bdNext{display:flex; align-items:center; gap:10px}
#bdNext .kiri{flex:1; min-width:0}
#bdNext .baris{display:flex; align-items:baseline; gap:10px}
#bdSholat{font-size:30px; font-weight:400; letter-spacing:.5px}
#bdJam{font-size:34px; font-weight:800}
#bdSisa{
  display:inline-block; margin-top:8px;
  background:rgba(255,255,255,.22); border-radius:999px;
  padding:7px 16px; font-size:14px; font-weight:700;
}
#bdNext .masjid{width:104px; height:104px; flex:none; opacity:.95}

/* Lima waktu sholat sekilas. */
#bdDaftar{
  display:flex; gap:6px; margin-top:16px;
  background:rgba(255,255,255,.12); border-radius:14px; padding:8px 6px;
}
#bdDaftar .wk{
  flex:1; text-align:center; font-size:11.5px; opacity:.86;
  padding:5px 2px; border-radius:9px; line-height:1.5;
}
#bdDaftar .wk b{display:block; font-size:13.5px; font-weight:700}
/* Waktu yang sedang dinanti ditandai jelas, bukan sekadar dibedakan warna
   tipis — supaya terbaca sekilas tanpa mencari. */
#bdDaftar .wk.kini{background:rgba(255,255,255,.28); opacity:1}

/* ── tiga pintu masuk ── */
#bdMenu{
  display:grid; gap:12px; padding:18px 16px 24px;
  grid-template-columns:1fr;
}
/* Layar lebar (tablet/mendatar): sejajarkan bertiga supaya tidak memanjang. */
@media (min-width:600px){ #bdMenu{grid-template-columns:repeat(3,1fr)} }

#bdMenu .kartu{
  display:flex; align-items:center; gap:14px; text-align:left;
  background:var(--panel); color:var(--tinta);
  border:1px solid var(--garis); border-radius:16px;
  padding:16px 16px; font-family:var(--ff); cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
@media (min-width:600px){
  #bdMenu .kartu{flex-direction:column; text-align:center; gap:8px; padding:22px 14px}
}
#bdMenu .kartu:active{transform:scale(.985)}
#bdMenu .ikon{
  width:52px; height:52px; flex:none; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--aksen-muda); color:var(--aksen-tua);
}
body.malam #bdMenu .ikon{background:rgba(63,168,107,.18); color:#7fd3a3}
#bdMenu .kartu b{display:block; font-size:16.5px; font-weight:700}
#bdMenu .kartu small{display:block; color:var(--lemah); font-size:12.5px; margin-top:2px}

/* Blok atas dan menu tidak boleh melar mengisi sisa layar: keduanya setinggi
   isinya saja. Tanpa ini, pada layar tinggi kartu menu ikut merenggang. */
#bdAtas, #bdMenu{flex:none}
/* Penutup sisa layar. `overflow-y:auto` pada #beranda membuatnya jadi kotak
   gulir setinggi isi; di layar tinggi mushaf di belakangnya ikut terlihat.
   Blok pengisi ini menuntaskan sisa ruang dengan warna latar yang sama. */
#bdSisaLayar{flex:1 0 auto; background:var(--bg)}

/* Saat layar depan terbuka, mushaf di belakang tidak boleh ikut tergulir. */
body.di-beranda{overflow:hidden}

/* ── nama kota = tombol ganti lokasi ── */
#bdKota{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.16); border:0; border-radius:999px;
  color:#fff; font-family:var(--ff); font-size:14px; font-weight:600;
  padding:6px 12px 6px 10px; cursor:pointer;
}
#bdKota:active{background:rgba(255,255,255,.26)}
#bdKota .chev{font-size:11px; opacity:.85}

/* ── dialog pemilih lokasi ── */
#lokasiDlg{
  position:fixed; inset:0; z-index:90;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center;
}
#lokasiDlg.hidden{display:none}
@media (min-width:600px){ #lokasiDlg{align-items:center} }

#lokasiDlg .kotak{
  width:100%; max-width:520px;
  background:var(--panel); color:var(--tinta);
  border-radius:18px 18px 0 0;
  padding:14px 16px calc(14px + var(--pad));
  /* Dibatasi tinggi layar supaya daftar panjang tetap bisa digulir dan
     tombol GPS/kotak cari tidak terdorong keluar layar. */
  max-height:86vh; display:flex; flex-direction:column;
}
@media (min-width:600px){ #lokasiDlg .kotak{border-radius:18px; max-height:80vh} }

.lkHead{display:flex; align-items:center; justify-content:space-between; margin-bottom:2px}
.lkHead b{font-size:17px}
.lkKet{margin:2px 0 10px; color:var(--lemah); font-size:12.5px}

.lkGps{
  width:100%; padding:12px; margin-bottom:10px;
  background:var(--aksen); color:#fff; border:0; border-radius:12px;
  font-family:var(--ff); font-size:14.5px; font-weight:700; cursor:pointer;
}
.lkGps:disabled{opacity:.65}

#lkCari{
  width:100%; padding:11px 13px; margin-bottom:8px;
  border:1px solid var(--garis); border-radius:12px;
  background:var(--kertas); color:var(--tinta);
  font-family:var(--ff); font-size:15px;
}
#lkCari:focus{outline:2px solid var(--aksen); outline-offset:-1px}

#lkHasil{overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; min-height:120px}
.lkItem{
  display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
  padding:11px 12px; margin-bottom:4px;
  background:var(--kertas); color:var(--tinta);
  border:1px solid var(--garis); border-radius:11px;
  font-family:var(--ff); cursor:pointer;
}
.lkItem b{font-size:14.5px; font-weight:600}
.lkItem small{color:var(--lemah); font-size:12px}
/* Lokasi yang sedang dipakai ditandai jelas supaya santri tahu posisinya. */
.lkItem.on{border-color:var(--aksen); background:var(--aksen-muda)}
body.malam .lkItem.on{background:rgba(63,168,107,.16)}
.lkKosong{padding:20px 8px; text-align:center; color:var(--lemah); font-size:13.5px; line-height:1.6}