/* Hifz – day: plaster wall + mashrabiya shadow. Night (maghrib to sunrise): emerald + lantern. */
:root{
  --bg:#f1e4cc; --bg-2:#f8eedc; --card:#fbf3e4; --line:rgba(110,79,47,.18);
  --ink:#2b1e12; --ink-2:#5a4632; --ink-3:#8a7258;
  --accent:#123d32; --accent-2:#1a5544; --on-accent:#fff6e2;
  --gold:#c08a35; --gold-hi:#f2cf86;
  --ok:#2f7a5a; --warn:#c08a35; --bad:#a3442b;
  --green:#3f8f68; --yellow:#d4a640; --orange:#d07a32; --red:#b2452c;
  --head:url(img/hero-tall.jpg);
  --shadow:0 18px 40px -28px rgba(70,45,15,.55);
  --display:"Amiri", serif; --text:"Noto Naskh Arabic", "Amiri", serif;
  --tabs-h:68px;
}
[data-theme="night"]{
  --bg:#0a1f19; --bg-2:#0f2a22; --card:#12322a; --line:rgba(242,207,134,.14);
  --ink:#f1e6cd; --ink-2:#cdbf9f; --ink-3:#9a8f76;
  --accent:#e2b45c; --accent-2:#f2cf86; --on-accent:#1b1205;
  --head:url(img/lantern.jpg);
  --shadow:0 18px 40px -26px rgba(0,0,0,.8);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.85;
  padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom));transition:background .6s,color .6s;min-height:100svh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.35}
.wrap{max-width:640px;margin:0 auto;padding:0 18px}
.muted{color:var(--ink-3)}
.small{font-size:14.5px}

/* ---------- header ---------- */
.head{position:relative;min-height:230px;padding:calc(env(safe-area-inset-top) + 22px) 18px 26px;overflow:hidden;color:#2b1e12;isolation:isolate}
.head::before{content:"";position:absolute;inset:-6%;z-index:-2;background:var(--head) center 70%/cover;animation:sun 30s ease-in-out infinite alternate}
.head::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(241,228,204,.72),rgba(241,228,204,.15) 55%,var(--bg))}
[data-theme="night"] .head{color:#f6e8c8}
[data-theme="night"] .head::before{background-position:12% center}
[data-theme="night"] .head::after{background:linear-gradient(270deg,rgba(6,22,17,.9),rgba(6,22,17,.55) 60%,rgba(6,22,17,.2)),linear-gradient(180deg,transparent 60%,var(--bg))}
@keyframes sun{from{transform:scale(1.04) translate3d(1%,-1%,0)}to{transform:scale(1.1) translate3d(-1%,1%,0)}}
.head .hello{font-family:var(--display);font-size:34px;font-weight:700;line-height:1.3}
.head .date{font-size:15px;opacity:.85}
.head .next{margin-top:14px;display:inline-flex;gap:8px;align-items:center;font-size:14.5px;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
[data-theme="night"] .head .next{background:rgba(255,255,255,.08)}

/* ---------- cards ---------- */
.stack{display:grid;gap:14px;margin-top:-10px;position:relative}
.card{background:var(--card);border-radius:20px;padding:18px 18px 16px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.card h2{font-size:25px}
.card h3{font-size:20px}
.card .lead{color:var(--ink-2);margin:4px 0 12px;font-size:16px}
.card.hero{padding:0;overflow:hidden}
.card.hero .pic{height:200px;background:url(img/mushaf-day.jpg) 74% 42%/cover}
[data-theme="night"] .card.hero .pic{background-image:url(img/mushaf-night.jpg);background-position:68% 40%}
.card.hero .in{padding:16px 18px 18px}
.kick{font-size:14px;color:var(--gold);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;font-size:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:999px;padding:13px 22px;font-weight:700;font-size:17px;
  background:var(--accent);color:var(--on-accent);box-shadow:0 12px 24px -14px rgba(18,61,50,.9);transition:transform .12s}
.btn{text-decoration:none}
.btn:active{transform:scale(.97)}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.btn.gold{background:linear-gradient(180deg,#d39a45,#a8691f);color:#fff8e8}
.btn.sm{padding:8px 14px;font-size:15px;font-weight:600}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* page chips */
.pg{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border-radius:12px;font-weight:700;
  background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.pg.green{box-shadow:inset 0 0 0 2px var(--green)}
.pg.yellow{box-shadow:inset 0 0 0 2px var(--yellow)}
.pg.orange{box-shadow:inset 0 0 0 2px var(--orange)}
.pg.red{box-shadow:inset 0 0 0 2px var(--red)}

/* list rows with result buttons */
.item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.item:first-of-type{border-top:0}
.item .t{font-weight:600}
.item .s{font-size:14px;color:var(--ink-3)}
.res{display:flex;gap:6px}
.res button{border:0;border-radius:12px;padding:8px 10px;font-size:14px;font-weight:600;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.res .ok{color:var(--ok)}.res .slip{color:var(--warn)}.res .fail{color:var(--bad)}

/* ---------- 3D beads ---------- */
.bead{width:22px;height:22px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#fffaf0 0 7%,#e9dcc4 30%,#cdbb9a 70%,#a8946f 100%);
  box-shadow:inset -2px -3px 5px rgba(80,60,30,.25),0 3px 5px -2px rgba(90,60,20,.3);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.bead.on{background:radial-gradient(circle at 34% 30%,#fff1c9 0 7%,#f2b45a 22%,#c27a24 55%,#7a430e 92%);box-shadow:inset -2px -3px 5px rgba(60,25,0,.45),0 4px 7px -2px rgba(90,50,10,.5);transform:scale(1.08)}
.bead.jade.on{background:radial-gradient(circle at 34% 30%,#e6fff2 0 7%,#3fa27f 26%,#135a44 62%,#062a1f 95%)}
[data-theme="night"] .bead:not(.on){background:radial-gradient(circle at 34% 30%,#3c5b51 0 7%,#21433a 40%,#0f2a22 100%)}
.beads{display:flex;gap:8px;flex-wrap:wrap}
.tapbeads{display:flex;gap:6px;flex-wrap:wrap;align-items:center;border:0;background:none;padding:0}

/* ---------- session ---------- */
.session{min-height:100svh;padding:calc(env(safe-area-inset-top) + 14px) 0 30px}
.steps{display:flex;gap:6px;margin:6px 0 14px}
.steps i{flex:1;height:4px;border-radius:4px;background:var(--line)}
.steps i.on{background:var(--gold)}
.mushaf{font-family:"Amiri",serif;font-size:24px;line-height:2.25;text-align:justify;background:var(--bg-2);border-radius:18px;padding:16px 16px 12px;
  box-shadow:inset 0 0 0 1px var(--line);position:relative;user-select:none}
.mushaf .w{border-radius:6px;padding:0 1px;transition:background .25s}
.mushaf .w.mark{background:rgba(192,138,53,.28);box-shadow:inset 0 -2px 0 var(--gold)}
.mushaf .end{display:inline-grid;place-items:center;width:30px;height:30px;font-size:13px;font-family:var(--text);color:var(--gold);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23c08a35' stroke-width='1.6'%3E%3Crect x='9' y='9' width='22' height='22'/%3E%3Crect x='9' y='9' width='22' height='22' transform='rotate(45 20 20)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;vertical-align:middle;margin:0 2px}
/* the Madina page as a real image */
.mushaf.page-img{padding:0;border:0;outline:0;background:#fff;overflow:hidden;border-radius:14px;box-shadow:0 14px 34px -22px rgba(60,40,10,.7),inset 0 0 0 1px var(--line)}
.page-img img{display:block;width:100%;height:auto;aspect-ratio:622/917;background:#fbf8f0}
[data-theme="night"] .page-img img{filter:brightness(.92) sepia(.12)}
.page-img .playing{position:absolute;top:10px;right:10px;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:600;padding:4px 12px;border-radius:999px}
.mushaf.hidden .txt img{filter:blur(14px) brightness(1.05)}
/* (older text layout, kept for reference) */
.mushaf{padding:14px 12px;border:1.5px solid rgba(192,138,53,.55);outline:1px solid rgba(192,138,53,.35);outline-offset:-6px}
.mpage{font-family:"Amiri Quran","Amiri",serif;line-height:1.95;text-align:center}
.mpage .ln{display:flex;justify-content:space-between;align-items:baseline;white-space:nowrap;min-height:1.95em}
.mpage .ln.c{justify-content:center;gap:.28em}
.mpage.measuring .ln{justify-content:flex-start;gap:.22em}
.mpage .w{padding:0 .04em}
.mpage .end{width:1.25em;height:1.25em;font-size:.82em;margin:0 .05em}
.mpage .sh{margin:.25em 0;padding:.05em 0;border:1px solid var(--gold);outline:1px solid rgba(192,138,53,.45);outline-offset:3px;border-radius:4px;
  background:linear-gradient(90deg,transparent,rgba(192,138,53,.14),transparent);font-family:"Amiri",serif;font-weight:700;color:var(--ink-2);line-height:1.8}
.mpage .bs{font-size:.95em}
.mushaf .now{background:rgba(63,143,104,.18);border-radius:6px}
.mushaf.hidden .txt{filter:blur(11px);opacity:.55}
.mushaf .cover{position:absolute;inset:0;display:none;place-items:center;text-align:center;font-family:var(--display);font-size:24px;color:var(--ink-2)}
.mushaf.hidden .cover{display:grid}
.big-counter{display:flex;justify-content:center;gap:16px;margin:16px 0 6px}
.big-counter .bead{width:46px;height:46px}
.timer{font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink-3)}
.result{text-align:center;padding:26px 18px}
.result .dot{width:88px;height:88px;border-radius:50%;margin:0 auto 10px;box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
.dot.green{background:radial-gradient(circle at 34% 30%,#e9fff1 0 8%,var(--green) 40%,#1f5a3f)}
.dot.yellow{background:radial-gradient(circle at 34% 30%,#fff7da 0 8%,var(--yellow) 40%,#8f6a19)}
.dot.orange{background:radial-gradient(circle at 34% 30%,#ffeedb 0 8%,var(--orange) 40%,#8b4512)}
.dot.red{background:radial-gradient(circle at 34% 30%,#ffe3dc 0 8%,var(--red) 40%,#6d2010)}
.audio-row{display:flex;gap:10px;align-items:center;margin:10px 0}
.rec{display:inline-flex;align-items:center;gap:8px}
.rec .live{width:12px;height:12px;border-radius:50%;background:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.3}}

/* ---------- map ---------- */
.map{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.cell{aspect-ratio:3/4;border-radius:10px;border:0;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--bg-2);
  box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-3);position:relative}
.cell.learned{color:var(--ink)}
.cell.green{box-shadow:inset 0 0 0 2.5px var(--green)}
.cell.yellow{box-shadow:inset 0 0 0 2.5px var(--yellow)}
.cell.orange{box-shadow:inset 0 0 0 2.5px var(--orange)}
.cell.red{box-shadow:inset 0 0 0 2.5px var(--red)}
.cell.heard::after{content:"";position:absolute;top:6px;left:6px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.cell.next{background:var(--accent);color:var(--on-accent)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--ink-2);margin-top:10px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-inline-end:6px;vertical-align:-1px}

/* ---------- sheet ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(10,8,4,.45);z-index:40;display:flex;align-items:flex-end;animation:fade .2s}
.sheet{background:var(--bg);width:100%;max-height:92svh;overflow:auto;border-radius:24px 24px 0 0;padding:16px 18px calc(24px + env(safe-area-inset-bottom));animation:up .28s cubic-bezier(.2,.8,.2,1)}
.sheet .grab{width:44px;height:5px;border-radius:5px;background:var(--line);margin:0 auto 12px}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(30%)}}

/* forms */
label.f{display:block;margin:10px 0}
label.f span{display:block;font-size:14.5px;color:var(--ink-2);margin-bottom:4px}
input[type=text],input[type=password],input[type=time],input[type=number],input[type=date],select,textarea{width:100%;border:0;border-radius:14px;padding:12px 14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
textarea{min-height:90px;resize:vertical}
.seg{display:flex;background:var(--bg-2);border-radius:999px;padding:4px;box-shadow:inset 0 0 0 1px var(--line)}
.seg button{flex:1;border:0;background:none;border-radius:999px;padding:7px 10px;font-size:15px;font-weight:600;color:var(--ink-3)}
.seg button.on{background:var(--accent);color:var(--on-accent)}

/* stats */
.bars{display:flex;align-items:flex-end;gap:4px;height:110px;margin-top:8px}
.bars i{flex:1;background:linear-gradient(180deg,var(--gold),#a8691f);border-radius:6px 6px 2px 2px;min-height:3px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{text-align:center;background:var(--bg-2);border-radius:14px;padding:12px 6px;box-shadow:inset 0 0 0 1px var(--line)}
.kpi b{display:block;font-family:var(--display);font-size:30px;line-height:1.2}
.kpi span{font-size:13.5px;color:var(--ink-3)}

/* login */
.login{min-height:100svh;display:grid;place-items:end center;background:linear-gradient(180deg,rgba(6,22,17,.1),rgba(6,22,17,.55)),url(img/mushaf-medallion.jpg) center 35%/cover;padding:24px 18px calc(40px + env(safe-area-inset-bottom))}
.login .box{width:100%;max-width:420px;background:rgba(251,243,228,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:24px;padding:24px;box-shadow:var(--shadow);color:#2b1e12}
.login h1{font-size:40px}
.login input{background:#fff8ec}
.err{color:var(--bad);font-size:15px;min-height:1.5em}

/* tabs */
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--line)}
.tabs[hidden]{display:none}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--ink-3);font-size:12.5px;padding:4px 0}
.ic{width:1.2em;height:1.2em;fill:currentColor;flex:none;vertical-align:-.22em}
.tabs .ic{width:26px;height:26px}
.btn .ic{width:20px;height:20px}
.head .next .ic{width:18px;height:18px;color:var(--gold)}
.pg .ic{width:22px;height:22px;color:var(--gold)}
.tabs a.on{color:var(--accent)}
[data-theme="night"] .tabs a.on{color:var(--gold-hi)}
.toast{position:fixed;left:50%;bottom:calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:15px;transition:.25s;z-index:60;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.empty{text-align:center;padding:26px 10px;color:var(--ink-2)}
hr.soft{border:0;border-top:1px solid var(--line);margin:14px 0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* page flip */
.flipbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 4px}
.flipbar .pgno{font:600 18px 'Amiri',serif;color:var(--muted,#8a7a5c)}
.flipbar .btn[disabled]{opacity:.35;pointer-events:none}
.flip.in-next{animation:flipNext .32s cubic-bezier(.2,.7,.2,1)}
.flip.in-prev{animation:flipPrev .32s cubic-bezier(.2,.7,.2,1)}
@keyframes flipNext{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes flipPrev{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.flip.in-next,.flip.in-prev{animation:none}}