:root{
  --fs:20px;
  --bg:#FBF6EC; --card:#FFFFFF; --ink:#1E2A22; --muted:#5B6660; --line:#E7DDC8;
  --green:#1F3B2D; --green-2:#2E5A43; --gold:#C8962E; --gold-soft:#F4E6C4; --gold-ink:#7A5712;
  --ok:#2E7D4F; --ok-soft:#DDF0E3; --warn:#B3541E; --warn-soft:#FBE3D3;
  --shadow:0 2px 10px rgba(31,59,45,.08);
  --ar:"Amiri Quran","Amiri","Scheherazade New",serif;
}
:root[data-contrast="1"]{
  --bg:#FFFFFF; --card:#FFFFFF; --ink:#000; --muted:#222; --line:#000;
  --green:#00331A; --gold:#8A5A00; --gold-soft:#FFE9A8; --gold-ink:#4A3000;
}
*{box-sizing:border-box}
html{font-size:var(--fs);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,system-ui,sans-serif;line-height:1.55;
  padding-bottom:calc(90px + env(safe-area-inset-bottom))}
body.has-player{padding-bottom:calc(90px + 6rem + env(safe-area-inset-bottom))}
h1,h2,h3{font-family:Lora,Georgia,serif;color:var(--green);line-height:1.25;margin:0 0 .5rem}
h1{font-size:1.5rem} h2{font-size:1.2rem} h3{font-size:1.05rem}
p{margin:.3rem 0 .7rem}
a{color:var(--green-2)}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:640px;margin:0 auto;padding:1rem 16px}
.top{background:var(--green);color:#fff;padding:1.1rem 16px 1.4rem;border-radius:0 0 1.4rem 1.4rem}
.top .wrap{padding:0 0}
.top h1{color:#fff;margin:0}
.top .sub{color:#E9DDBF;font-size:.9rem}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{width:2.2rem;height:2.2rem;border-radius:.6rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:1.1rem;padding:1rem;margin:0 0 1rem;box-shadow:var(--shadow)}
.card.gold{background:var(--gold-soft);border-color:#E8D29C}
.card.warn{background:var(--warn-soft);border-color:#F0C2A2}
.card.ok{background:var(--ok-soft);border-color:#B8DEC5}
.muted{color:var(--muted);font-size:.9rem}
.small{font-size:.85rem}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.grow{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:3rem;padding:.6rem 1.1rem;border-radius:.9rem;border:2px solid var(--green);
  background:var(--green);color:#fff;font-weight:800;cursor:pointer;text-decoration:none;text-align:center}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--green)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.danger{background:var(--warn);border-color:var(--warn)}
.btn.block{width:100%}
.btn.sm{min-height:2.4rem;padding:.3rem .8rem;font-size:.9rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.stack>*+*{margin-top:.6rem}
.big-num{font-family:Lora,serif;font-size:2.4rem;font-weight:700;color:var(--gold-ink);line-height:1}
.pill{display:inline-block;padding:.1rem .65rem;border-radius:99px;font-size:.8rem;font-weight:800;background:var(--line);color:var(--ink)}
.pill.pernah{background:var(--gold-soft);color:var(--gold-ink)}
.pill.nempel{background:var(--ok-soft);color:var(--ok)}
.check{display:flex;gap:.8rem;align-items:flex-start;padding:.8rem;border-radius:.9rem;border:2px solid var(--line);background:var(--card);margin:.5rem 0;cursor:pointer}
.check.done{border-color:var(--ok);background:var(--ok-soft)}
.check .box{flex:0 0 1.8rem;height:1.8rem;border-radius:.5rem;border:2px solid var(--green);display:grid;place-items:center;font-weight:900;color:#fff}
.check.done .box{background:var(--ok);border-color:var(--ok)}
.grid30{display:grid;grid-template-columns:repeat(10,1fr);gap:.3rem;margin:.6rem 0}
.grid30 div{aspect-ratio:1;border-radius:.35rem;background:#EFE8D9;display:grid;place-items:center;font-size:.6rem;color:var(--muted)}
.grid30 .h{background:#E8C977;color:#5a430f}
.grid30 .f{background:var(--green-2);color:#fff}
.grid30 .t{outline:3px solid var(--gold);outline-offset:1px}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:.2rem;vertical-align:middle;margin-right:.3rem}
label.f{display:block;font-weight:700;margin:.8rem 0 .3rem}
input[type=text],input[type=number],input[type=date],input[type=password],select,textarea{width:100%;min-height:3rem;padding:.5rem .8rem;border-radius:.8rem;border:2px solid var(--line);background:#fff}
input:focus,select:focus,textarea:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.seg{display:flex;flex-wrap:wrap;gap:.4rem}
.seg button{min-height:2.8rem;min-width:3rem;padding:.3rem .9rem;border-radius:.8rem;border:2px solid var(--line);background:#fff;font-weight:800;cursor:pointer}
.seg button.on{background:var(--green);border-color:var(--green);color:#fff}
.stepper{display:flex;align-items:center;gap:.5rem}
.stepper button{width:3rem;height:3rem;border-radius:.8rem;border:2px solid var(--green);background:#fff;color:var(--green);font-size:1.4rem;font-weight:900;cursor:pointer}
.stepper b{min-width:3rem;text-align:center;font-size:1.3rem}
.ayat{border-bottom:1px solid var(--line);padding:1rem .2rem}
.ayat:last-child{border-bottom:0}
.ayat.playing{background:var(--gold-soft);border-radius:.8rem;padding:1rem .6rem}
.ar{font-family:var(--ar);direction:rtl;text-align:right;font-size:calc(var(--fs) * 1.75);line-height:2.1;color:var(--ink)}
.ar .num{display:inline-grid;place-items:center;min-width:1.6em;height:1.6em;font-size:.55em;border:1.5px solid var(--gold);border-radius:50%;color:var(--gold-ink);font-family:Nunito,sans-serif;margin:0 .3em;vertical-align:middle}
.tr{color:var(--muted);font-size:.9rem;margin-top:.3rem}
.hide-text .ar{filter:blur(9px);user-select:none}
.hide-tr .tr{display:none}
.list a.item,.list button.item{display:flex;align-items:center;gap:.8rem;width:100%;padding:.8rem;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;text-decoration:none;color:inherit;cursor:pointer}
.list .item:last-child{border-bottom:0}
.nomor{flex:0 0 2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:.7rem;background:var(--gold-soft);color:var(--gold-ink);font-weight:800;font-size:.85rem}
.item .ar-name{font-family:var(--ar);font-size:1.4rem;color:var(--green)}
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.4rem,1fr));gap:.5rem}
.map button{border:2px solid var(--line);background:#fff;border-radius:.9rem;padding:.55rem .3rem;cursor:pointer;min-height:4.4rem;text-align:center}
.map button .n{font-size:.75rem;color:var(--muted)}
.map button .t{font-weight:800;font-size:.85rem;line-height:1.2}
.map button.pernah{background:var(--gold-soft);border-color:#E3C57C}
.map button.nempel{background:var(--ok-soft);border-color:var(--ok)}
.bar{height:.8rem;border-radius:99px;background:#EFE8D9;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--green-2))}
.nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;
  padding:.3rem .2rem calc(.3rem + env(safe-area-inset-bottom));z-index:20;box-shadow:0 -2px 12px rgba(0,0,0,.05)}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--muted);font-size:13px;font-weight:800;padding:7px 0;border-radius:14px;max-width:7rem;white-space:nowrap}
.nav .ni{font-size:24px;line-height:1}
.nav a.on{color:var(--green);background:var(--gold-soft)}
.player{position:fixed;left:0;right:0;bottom:calc(70px + env(safe-area-inset-bottom));z-index:19;padding:0 12px}
.player .in{max-width:640px;margin:0 auto;background:var(--green);color:#fff;border-radius:1rem;padding:.7rem .9rem;display:flex;align-items:center;gap:.7rem;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.player .in .grow{min-width:0}
.player .t1{font-weight:800;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .t2{font-size:.8rem;color:#E9DDBF}
.player button{width:3rem;height:3rem;border-radius:50%;border:0;background:var(--gold);color:#fff;font-size:1.2rem;font-weight:900;cursor:pointer;flex:0 0 3rem}
.player button.x{background:rgba(255,255,255,.15)}
.toast{position:fixed;left:50%;top:1rem;transform:translateX(-50%) translateY(-150%);background:var(--green);color:#fff;padding:.7rem 1.1rem;border-radius:.9rem;font-weight:700;z-index:50;transition:transform .25s;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
.toast.show{transform:translateX(-50%) translateY(0)}
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem 16px;background:linear-gradient(180deg,var(--green) 0 45%,var(--bg) 45%)}
.gate .card{max-width:30rem;width:100%;padding:1.5rem}
.gate .logo{width:5rem;height:5rem;border-radius:1.3rem;display:block;margin:0 auto .8rem;box-shadow:var(--shadow)}
.center{text-align:center}
.rec-dot{display:inline-block;width:.9rem;height:.9rem;border-radius:50%;background:#D33;animation:blink 1s infinite;vertical-align:middle}
@keyframes blink{50%{opacity:.2}}
details summary{cursor:pointer;font-weight:800;color:var(--green);padding:.3rem 0}
.tabs{display:flex;gap:.4rem;margin-bottom:1rem}
.tabs button{flex:1;min-height:2.8rem;border-radius:.8rem;border:2px solid var(--line);background:#fff;font-weight:800;cursor:pointer}
.tabs button.on{background:var(--green);color:#fff;border-color:var(--green)}
hr{border:0;border-top:1px solid var(--line);margin:1rem 0}
@media (max-width:370px){.nav a{font-size:11px}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.5rem;text-align:center}
.stats .big-num{font-size:2rem}
.acts{display:flex;gap:.4rem;margin-top:.5rem}
.acts .btn{flex:1;white-space:nowrap;padding:.3rem .4rem;font-size:.8rem;min-height:2.6rem}