:root{
  --bg:#fbf6ea; --kartu:#ffffff; --teks:#1a1a1a; --lembut:#4a4a42; --aksen:#0f5f4a; --aksen-teks:#ffffff;
  --garis:#cfc6ae; --arab-bg:#fffdf6; --arti-bg:#f1ead6; --tombol:#e9e1c8; --fokus:#c25b00;
  --arab-size:1.95rem; --teks-size:1.3rem;
  font-size:18px;
}
:root[data-tema="terang"]{--bg:#ffffff;--kartu:#fff;--arab-bg:#fff;--arti-bg:#f1f3f2;--tombol:#e6e9e8;--garis:#c4c9c7;--lembut:#444}
:root[data-tema="gelap"]{--bg:#121513;--kartu:#1c211e;--teks:#f3f0e6;--lembut:#cfcbbd;--aksen:#4fc9a0;--aksen-teks:#08130f;--garis:#3a423d;--arab-bg:#181d1a;--arti-bg:#1f2521;--tombol:#2b332e;--fokus:#ffb060}
:root[data-arab="2"]{--arab-size:2.4rem}
:root[data-arab="3"]{--arab-size:2.9rem}
:root[data-teks="2"]{--teks-size:1.5rem}
:root[data-teks="3"]{--teks-size:1.75rem}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--teks);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.5;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);overscroll-behavior:none}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:4px solid var(--fokus);outline-offset:2px}

.screen{min-height:100%;max-width:760px;margin:0 auto}

/* tombol */
.btn{border:2px solid var(--garis);background:var(--tombol);border-radius:16px;min-height:56px;padding:12px 18px;font-size:1.05rem;font-weight:600}
.btn:active{transform:scale(.98)}
.btn-lembut{background:var(--tombol)}
.btn-utama{background:var(--aksen);color:var(--aksen-teks);border-color:var(--aksen)}
.btn-besar{width:100%;min-height:64px;font-size:1.2rem;margin-top:14px}

/* beranda */
#home{display:flex;flex-direction:column;gap:18px;padding:24px 18px 32px}
.home-head{text-align:center;padding:8px 0 4px}
.salam{margin:0;color:var(--lembut);font-size:1.1rem}
h1{margin:4px 0 8px;font-size:2.1rem;line-height:1.2;color:var(--aksen)}
.saran{margin:0;font-size:1.15rem;font-weight:600}
.kartu{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--kartu);border:3px solid var(--garis);border-radius:22px;padding:22px 20px;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.kartu.disarankan{border-color:var(--aksen);box-shadow:0 0 0 3px var(--aksen) inset}
.kartu-judul{font-size:1.7rem;font-weight:800}
.kartu-info{font-size:1.05rem;color:var(--lembut)}
.kartu-aksi{margin-top:6px;font-size:1.15rem;font-weight:700;color:var(--aksen)}
.home-foot{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.catatan{text-align:center;color:var(--lembut);margin:6px 0 0;font-size:.95rem}

/* layar baca */
#reader{display:flex;flex-direction:column;height:100vh;height:100dvh}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--kartu);border-bottom:2px solid var(--garis)}
.btn-bar{min-height:52px;padding:8px 12px;font-size:1rem}
.bar-tengah{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.25}
.bar-tengah strong{font-size:1.05rem}
.bar-tengah span{font-size:1rem;color:var(--lembut);font-weight:600}
.progres{height:8px;background:var(--tombol)}
#progres-isi{height:100%;width:0;background:var(--aksen);transition:width .3s}

.isi{flex:1;overflow-y:auto;padding:18px 16px 24px;-webkit-overflow-scrolling:touch}
h2{margin:0 0 6px;font-size:1.45rem;line-height:1.3;text-align:center}
.ulang{margin:0 0 14px;text-align:center;font-weight:700;color:var(--aksen);font-size:1.15rem}
.arab-box{background:var(--arab-bg);border:2px solid var(--garis);border-radius:20px;padding:18px 14px}
.arab{margin:0;font-family:"Amiri","Noto Naskh Arabic","Scheherazade New","Traditional Arabic","Geeza Pro","Droid Arabic Naskh","Segoe UI",serif;
  font-size:var(--arab-size);line-height:1.85;text-align:center;font-weight:400}
.latin{margin:16px 4px 0;font-size:var(--teks-size);font-style:italic;color:var(--lembut);text-align:center}
.arti-box{margin-top:16px;background:var(--arti-bg);border-radius:20px;padding:16px 18px}
.arti-label{margin:0 0 4px;font-weight:800;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;color:var(--aksen)}
.arti{margin:0;font-size:var(--teks-size);line-height:1.6}
.sumber{margin:8px 0 0;font-size:1rem;color:var(--lembut);font-weight:600}
.sumber:empty{display:none}

.kontrol{padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:var(--kartu);border-top:2px solid var(--garis);display:flex;flex-direction:column;gap:10px}
.hitung{width:100%;min-height:72px;border-radius:20px;border:3px solid var(--aksen);background:var(--kartu);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:800}
#hitung-besar{font-size:1.5rem;color:var(--aksen)}
#hitung-kecil{font-size:1rem;color:var(--lembut);font-weight:600}
.hitung:active{background:var(--arti-bg)}
.hitung.selesai{background:var(--aksen);border-color:var(--aksen)}
.hitung.selesai #hitung-besar,.hitung.selesai #hitung-kecil{color:var(--aksen-teks)}
.nav{display:grid;grid-template-columns:1fr 1.3fr;gap:10px}
.btn-nav{min-height:58px;font-size:1.15rem}
.btn-utama.sorot{animation:denyut 1.6s ease-in-out infinite}
@keyframes denyut{50%{box-shadow:0 0 0 6px rgba(15,95,74,.28)}}
@media (prefers-reduced-motion:reduce){.btn-utama.sorot{animation:none}#progres-isi{transition:none}}

/* selesai */
#selesai{display:flex;align-items:center;justify-content:center;padding:24px}
.selesai-isi{text-align:center;width:100%}
.centang{width:110px;height:110px;margin:0 auto 14px;border-radius:50%;background:var(--aksen);color:var(--aksen-teks);font-size:4rem;line-height:110px;font-weight:800}
.selesai-isi h2{font-size:2rem;color:var(--aksen)}
.selesai-isi p{font-size:1.2rem;color:var(--lembut)}

/* sheet */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet-isi{background:var(--bg);width:100%;max-width:760px;max-height:92dvh;overflow-y:auto;border-radius:24px 24px 0 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
.sheet-kepala{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;position:sticky;top:-16px;background:var(--bg);padding:6px 0}
.sheet-kepala h2{margin:0;text-align:left}
.daftar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.daftar button{width:100%;text-align:left;display:flex;gap:12px;align-items:center;min-height:62px;padding:10px 14px;border-radius:16px;border:2px solid var(--garis);background:var(--kartu);font-size:1.1rem;font-weight:600}
.daftar .no{flex:0 0 38px;height:38px;border-radius:50%;background:var(--tombol);display:grid;place-items:center;font-weight:800}
.daftar .ket{display:block;font-size:.9rem;color:var(--lembut);font-weight:500}
.daftar .saat{border-color:var(--aksen);box-shadow:0 0 0 2px var(--aksen) inset}
.daftar .sudah .no{background:var(--aksen);color:var(--aksen-teks)}
.atur{margin:14px 0 18px}
.atur h3{margin:0 0 8px;font-size:1.1rem}
.seg{display:flex;gap:8px}
.seg button{flex:1;min-height:56px;border:2px solid var(--garis);background:var(--kartu);border-radius:14px;font-weight:700;font-size:1.05rem;padding:6px}
.seg button[aria-pressed="true"]{background:var(--aksen);color:var(--aksen-teks);border-color:var(--aksen)}

@media (min-width:700px){:root{font-size:20px}}
@media (max-height:560px){.btn-nav{min-height:52px}.hitung{min-height:64px}}