:root{
  --bg:#0b1824;--bg2:#12263a;--card:rgba(255,255,255,.055);--line:rgba(255,255,255,.09);
  --gold:#d8b862;--gold2:#f0dc9a;--cream:#f6efdc;--mist:#9fb3bf;--green:#2f5d55;--teal:#4fbf98;--red:#d9604f;
  --paper:#fbf5e3;--ink:#1d1a14;
  --ff:'Tajawal',system-ui,sans-serif;--fq:'Amiri',serif;--fqq:'Amiri Quran','Amiri',serif;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--ff);background:radial-gradient(130% 60% at 50% 0%,#1d3a55 0%,#12263a 42%,#0a1722 100%) fixed,#0b1824;color:var(--cream);direction:rtl;overscroll-behavior-y:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font-family:inherit}
[hidden]{display:none!important}
#app{max-width:560px;margin:0 auto;min-height:100%}
.view{display:none;padding:calc(var(--sat) + 10px) max(16px,env(safe-area-inset-right,0px)) calc(var(--sab) + 28px) max(16px,env(safe-area-inset-left,0px))}
.view.on{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}}
.muted{color:var(--mist)}.small{font-size:12.5px;color:var(--mist)}
.gold-t{color:var(--gold2)}
.row{display:flex;align-items:center}.gap{gap:8px}.center{justify-content:center;text-align:center}
.row-sb{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mt{margin-top:10px}
.note{font-size:12px;color:var(--mist);line-height:1.8;margin:12px 4px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px;margin:12px 0}
.list{display:flex;flex-direction:column;gap:7px}
.grp-h{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--gold2);font-size:14px;margin:18px 4px 8px}
.grp-h small{font-weight:400;color:var(--mist);font-size:11.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.08);font-weight:700;font-size:13.5px;min-height:44px}
.btn.sm{padding:7px 12px;min-height:36px;font-size:12.5px}
.btn.gold{background:var(--gold);color:#13263a}
.btn.wide{width:100%;margin-top:10px}
.btn.red{background:rgba(217,96,79,.2);color:#ffb3a7}
.btn:focus-visible,.ib:focus-visible,.pill:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.ib{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex:none}
.ib.ghost{background:none}
.back::before{content:"›";font-size:26px;line-height:1}
.pill{padding:8px 16px;border-radius:14px;background:var(--gold);color:#13263a;font-weight:700;font-size:13px}
.inp{width:100%;height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--cream);padding:0 14px;font-size:14px}
.inp:focus{outline:none;border-color:rgba(216,184,98,.6)}
select.inp option{background:#13263a}
textarea.inp{height:auto;min-height:70px;padding:10px 14px;line-height:1.7}
.lbl{display:block;font-size:12.5px;color:var(--mist);margin-bottom:6px}
.seg{display:flex;background:rgba(255,255,255,.06);border-radius:13px;padding:3px;gap:3px}
.seg button{flex:1;padding:8px 6px;border-radius:10px;font-size:12.5px;font-weight:700;color:var(--mist);white-space:nowrap}
.seg button.on{background:var(--gold);color:#13263a}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:7px 12px;border-radius:12px;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.07);color:var(--mist);white-space:nowrap}
.chip.on{background:var(--gold);color:#13263a}
.tog{width:46px;height:27px;border-radius:14px;background:rgba(255,255,255,.18);position:relative;flex:none;transition:background .2s}
.tog::after{content:"";position:absolute;top:3px;right:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:right .2s}
.tog.on{background:var(--gold)}.tog.on::after{right:22px;background:#13263a}
.bar{height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:6px;transition:width .3s}
/* view header */
.vh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.vh-t{flex:1;min-width:0}
.vh h2{font-family:var(--fq);font-size:22px;color:var(--gold2);line-height:1.3}
.vh small{font-size:12px;color:var(--mist)}
/* splash */
.splash{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(130% 70% at 50% 0%,#1d3a55,#12263a 45%,#081520);transition:opacity .5s}
.splash.out{opacity:0;pointer-events:none}
.sp-logo{width:min(52vw,220px);border-radius:50%;box-shadow:0 0 0 10px rgba(216,184,98,.1),0 0 0 22px rgba(216,184,98,.05),0 0 80px rgba(240,220,154,.45);animation:glow 2.4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 12px rgba(216,184,98,.14),0 0 0 26px rgba(216,184,98,.06),0 0 110px rgba(240,220,154,.6)}}
.sp-title{font-family:var(--fq);font-weight:700;font-size:30px;color:var(--gold2);margin-top:22px}
.sp-verse{font-family:var(--fq);font-size:17px;color:var(--mist)}
.sp-dots{display:flex;gap:8px;margin-top:22px}.sp-dots b{width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:.3;animation:dot 1.2s infinite}
.sp-dots b:nth-child(2){animation-delay:.2s}.sp-dots b:nth-child(3){animation-delay:.4s}
@keyframes dot{40%{opacity:1}}
.sp-credit{position:absolute;bottom:calc(var(--sab) + 30px);font-size:12.5px;color:var(--mist)}.sp-credit span{color:var(--gold2);font-weight:700}
/* home */
.home-top{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 12px}
.home-name{font-size:19px;font-weight:700}
/* unified date block: day · Hijri · Gregorian */
.dblk{display:flex;flex-direction:column;gap:1px;line-height:1.45}
.dblk .dd{font-size:12px;color:var(--mist)}
.dblk .dh{font-size:14.5px;color:var(--gold2);font-weight:700}
.dblk .dg{font-size:12.5px;color:var(--cream);opacity:.85;font-variant-numeric:tabular-nums}
.dblk.end{align-items:flex-end;text-align:left}
.dblk.center{align-items:center;text-align:center}
.dblk.row{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.dblk.row .dd::after{content:'·';margin-inline-start:12px;color:var(--mist)}
.dblk.row .dh::after{content:'·';margin-inline-start:12px;color:var(--mist);font-weight:400}
.dblk.big .dh{font-size:17px}.dblk.big .dg{font-size:14px}
.day-c{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}
.pill.sm{padding:4px 12px;font-size:11.5px}
.date-bar{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:-2px 0 12px;display:flex;justify-content:center}
.next-card{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:right;border-radius:20px;padding:13px 16px;background:linear-gradient(135deg,rgba(216,184,98,.22),rgba(216,184,98,.06));border:1px solid rgba(216,184,98,.35)}
.next-card b{display:block;font-size:19px;margin-top:2px}
.next-r{text-align:left}.cd{font-size:25px;font-weight:700;color:var(--gold2);direction:ltr;font-variant-numeric:tabular-nums}
.ring{position:relative;width:min(92vw,360px);aspect-ratio:1;margin:12px auto 4px}
.ring-line{position:absolute;inset:14%;border-radius:50%;border:1.5px dashed rgba(216,184,98,.35)}
.ring-core{position:absolute;left:50%;top:50%;width:36%;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 7px rgba(216,184,98,.12),0 0 40px rgba(240,220,154,.35)}
.r-it{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:5px;width:23%}
.r-it .b{width:min(15vw,58px);aspect-ratio:1;border-radius:50%;background:#173049;border:1.5px solid rgba(216,184,98,.55);display:flex;align-items:center;justify-content:center;font-size:min(6vw,24px);box-shadow:0 6px 14px rgba(0,0,0,.35);transition:transform .15s}
.r-it:active .b{transform:scale(.92)}
.r-it.main .b{background:var(--gold)}
.r-it span{font-size:11.5px;font-weight:700;text-align:center;line-height:1.25}
.prog-card{display:block;width:100%;text-align:right;border-radius:18px;padding:12px 16px;background:var(--card);border:1px solid var(--line);margin-top:4px}
.prog-card.static{margin:0 0 4px}
.mini-times{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:10px}
.mini-times div{border-radius:14px;padding:9px 4px;text-align:center;background:var(--card);font-size:11.5px;color:var(--mist)}
.mini-times b{display:block;font-size:14px;color:var(--cream);direction:ltr}
.mini-times .on{background:rgba(216,184,98,.18);border:1px solid rgba(216,184,98,.45)}.mini-times .on b{color:var(--gold2)}
.home-foot{text-align:center;margin-top:26px}
.link{color:var(--gold2);font-weight:700;font-size:13px;padding:6px 10px}
.credit{font-size:12.5px;color:var(--mist);margin-top:8px}.credit b{color:var(--gold2)}
.dua{font-family:var(--fq);font-size:14px;color:#c9b98a;line-height:1.9;margin-top:6px}
.src{display:block;margin-top:12px;line-height:1.8}
.s-logo{width:84px;border-radius:50%}
/* tasks */
.day-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 12px}
.day-nav .ib{font-size:24px}
.tr{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:15px;background:var(--card);min-height:52px}
.tr.main{background:rgba(216,184,98,.08);border:1px solid rgba(216,184,98,.22)}
.tr .nm{flex:1;min-width:0;font-weight:700;font-size:14px;text-align:right}
.tr .nm small{display:block;font-weight:400;font-size:11.5px;color:var(--mist);margin-top:2px}
.tr.done .nm{opacity:.6}
.lk{font-size:12px;opacity:.8}
.cb{width:30px;height:30px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;flex:none;font-size:15px;color:#13263a;font-weight:700}
.cb.on{background:var(--gold)}.cb.on::after{content:"✓"}
.mini{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--mist)}
.ed{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.ed.del{color:#ffb3a7}
/* prayer */
.pr{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:16px;background:var(--card);font-size:16px}
.pr b{font-size:18px;direction:ltr;font-variant-numeric:tabular-nums}
.pr.now{background:linear-gradient(135deg,rgba(216,184,98,.28),rgba(216,184,98,.08));border:1px solid rgba(216,184,98,.55)}.pr.now b{color:var(--gold2)}
.pr.past{opacity:.55}
.pr em{font-style:normal;font-size:11px;color:var(--gold2);margin-right:8px}
.city-list{max-height:55vh;overflow:auto;display:flex;flex-direction:column;gap:5px;margin-top:10px}
.city-list button{text-align:right;padding:11px 12px;border-radius:12px;background:var(--card);font-size:14px}
.adj{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.adj div{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--card);border-radius:12px;padding:6px;font-size:11.5px;color:var(--mist)}
.adj .hm{display:flex;gap:4px}.adj .hm label{display:flex;flex-direction:column;align-items:center;font-size:10px;gap:2px}
#s-adj input{width:46px}
.adj input{width:64px;height:32px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--cream);text-align:center}
/* qibla */
.compass-wrap{display:flex;justify-content:center;margin:18px 0}
.compass{position:relative;width:min(80vw,300px);aspect-ratio:1}
.dial{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 45%,#1d3a55,#0d1c29);border:2px solid var(--gold);box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 0 0 10px rgba(216,184,98,.07);transition:transform .25s linear}
.cn{position:absolute;font-weight:700;font-size:16px;color:var(--mist)}
.cn.n{top:8%;left:50%;transform:translateX(-50%);color:#e46a5a}.cn.s{bottom:8%;left:50%;transform:translateX(-50%)}
.cn.e{right:8%;top:50%;transform:translateY(-50%)}.cn.w{left:8%;top:50%;transform:translateY(-50%)}
.kaaba-arm{position:absolute;inset:0}
.needle{position:absolute;left:50%;top:14%;bottom:50%;width:8px;transform:translateX(-50%);background:linear-gradient(var(--gold2),var(--gold));border-radius:6px}
.kaaba{position:absolute;left:50%;top:2%;transform:translateX(-50%);font-size:28px}
.phone-mark{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:16px solid var(--teal)}
.q-deg{text-align:center}.q-deg b{display:block;font-size:30px;color:var(--gold2);direction:ltr}.q-deg span{font-size:13px;color:var(--mist)}
.q-deg.aligned b{color:var(--teal)}
/* hijri */
.wk,.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.wk{text-align:center;font-size:11px;font-weight:700;color:var(--mist);margin-bottom:5px}.wk .fr{color:var(--gold2)}
.cl{min-height:54px;border-radius:12px;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.cl b{font-family:var(--fq);font-size:20px;line-height:1.1}
.cl small{font-size:10.5px;color:var(--mist)}
.cl.e{background:none}
.cl.fri b{color:var(--gold2)}
.cl.td{background:var(--gold)}.cl.td b,.cl.td small{color:#13263a}
.cl.bid{box-shadow:inset 0 0 0 1.5px rgba(216,184,98,.7)}
.cl.mc small{color:#9fe0c8;font-weight:700}
.cl.sel{outline:2px solid var(--gold2)}
.cl .dt{position:absolute;top:5px;left:6px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.cl.gfirst b{font-family:var(--ff);font-size:17px;font-weight:700}
.lgd{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--mist);margin:10px 2px}
.lgd span{display:flex;align-items:center;gap:5px}
.sw{display:inline-block;width:12px;height:12px;border-radius:4px}.sw.td{background:var(--gold)}.sw.bid{box-shadow:inset 0 0 0 1.5px var(--gold)}.sw.fast{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.mc{color:#9fe0c8}
.conv{display:flex;gap:6px}.conv select,.conv input{flex:1;min-width:0}
.conv-out{margin-top:10px;padding:11px;border-radius:12px;background:rgba(216,184,98,.14);color:var(--gold2);font-weight:700;text-align:center;font-size:15px;min-height:44px}
.ev{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:15px;background:var(--card)}
.ev .n{flex:1}.ev .n b{display:block;font-size:14px}.ev .n small{display:block;font-size:11.5px;color:var(--mist);line-height:1.6}
.ev .k{text-align:center;min-width:52px;padding:6px;border-radius:11px;background:rgba(216,184,98,.15)}.ev .k b{display:block;color:var(--gold2);font-size:16px}.ev .k small{font-size:10px;color:var(--mist)}
/* adhkar */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.tile{min-height:84px;border-radius:16px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:700;text-align:center;padding:6px;line-height:1.3}
.tile i{font-style:normal;font-size:20px}
.tile.done{border-color:rgba(79,191,152,.6)}
.ali{text-align:right;padding:12px 14px;border-radius:14px;background:var(--card);font-size:13.5px;display:flex;justify-content:space-between;gap:8px}
.ali small{color:var(--mist)}
.pbar{display:flex;gap:3px;margin:2px 0 12px}.pbar i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.12)}.pbar i.d{background:var(--gold)}.pbar i.c{background:var(--gold2)}
.dk-card{border-radius:22px;background:#f8f0dc;color:var(--ink);padding:18px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.dk-card .tx{font-family:var(--fq);font-size:21px;line-height:2.1;text-align:center;white-space:pre-line}
.dk-card .tx.q{font-family:var(--fqq)}
.dk-card .meta{font-size:12px;color:#8a7a52;text-align:center;margin-top:6px}
.dk-card .fd{margin-top:10px;padding:10px 12px;border-radius:12px;background:#efe3c1;font-size:13px;line-height:1.8;color:#4a3f26}.dk-card .fd b{color:#2f5d55}
.tap-zone{display:flex;align-items:center;justify-content:space-between;margin:16px 0 10px}
.ring-c{position:relative;width:min(44vw,170px);aspect-ratio:1;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.ring-c svg,.m-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.rt{fill:none;stroke:rgba(255,255,255,.1);stroke-width:8}
.rp{fill:none;stroke:var(--gold);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .2s}
.rc{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 50% 32%,#264a6e,#13263a 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 0 0 1px rgba(216,184,98,.35)}
.rc b{font-size:clamp(34px,10vw,56px);line-height:1}.rc small{font-size:13px;color:var(--mist);margin-top:4px}
.ring-c:active .rc,.m-ring:active .rc{transform:scale(.97)}
.side{font-size:24px}
.notes{font-size:12px;color:var(--mist);line-height:1.9}
.notes h4{color:var(--gold2);font-size:13px;margin-bottom:6px}
.on-voice{background:var(--teal)!important;color:#08201a!important}
/* misbaha */
.m-dhikr{text-align:center;font-family:var(--fq);font-size:28px;color:var(--gold2);line-height:1.7;margin-top:10px;min-height:96px;display:flex;flex-direction:column;justify-content:center}
.m-dhikr small{font-family:var(--ff);font-size:12.5px;color:var(--mist)}
.m-ring{position:relative;width:min(76vw,290px);aspect-ratio:1;margin:8px auto 0;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.m-ring .rp,.m-ring .rt{stroke-width:11}
.m-ring .rc{inset:10%}.m-ring .rc b{font-size:clamp(48px,16vw,76px)}
.m-ctl{display:flex;justify-content:center;gap:12px;margin-top:6px}
.m-ctl button{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--mist)}
.m-ctl i{font-style:normal;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:17px}
.m-ctl .act i{background:var(--teal);color:#08201a}
.m-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.m-stats div{border-radius:14px;padding:10px 6px;text-align:center;background:var(--card);font-size:11.5px;color:var(--mist)}.m-stats b{display:block;font-size:17px;color:var(--cream)}
.dr{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:14px;background:var(--card);text-align:right;width:100%}
.dr .t{flex:1;min-width:0;font-family:var(--fq);font-size:17px}.dr .t small{display:block;font-family:var(--ff);font-size:11px;color:var(--mist)}
.dr .c{font-size:12px;font-weight:700;color:var(--gold2);direction:ltr}
.dr.sel{background:linear-gradient(135deg,rgba(216,184,98,.28),rgba(216,184,98,.08));border:1px solid rgba(216,184,98,.55)}
.dr.mine{border:1px dashed rgba(120,190,170,.5)}
.tag{font-size:10px;font-weight:700;color:#9fe0c8;background:rgba(47,143,115,.3);padding:2px 7px;border-radius:7px;margin-left:5px;font-family:var(--ff)}
/* quran */
.view.quran{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px));padding-bottom:calc(var(--sab) + 96px)}
.qh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.qh-t{flex:1;min-width:0;text-align:center}.qh-t b{display:block;font-family:var(--fq);font-size:19px;color:var(--gold2)}.qh-t small{font-size:11.5px;color:var(--mist)}
.qh-b{display:flex;gap:6px}
.q-stage{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.q-page{position:relative;margin:0 auto;max-width:520px;border-radius:6px;padding:8px;background:var(--pbg,#fbf5e3);box-shadow:0 2px 14px rgba(0,0,0,.35)}
.q-frame{position:relative;border:2px solid #b8963f;outline:1px solid #b8963f;outline-offset:-6px;padding:6px;border-radius:2px}
.q-frame::before{content:"";position:absolute;inset:3px;border:1.5px solid #2f5d55;pointer-events:none;z-index:2}
.q-img{position:relative;width:100%;aspect-ratio:404/660;overflow:hidden}
.q-img.first{aspect-ratio:299/414}
.q-img img{position:absolute;display:block;mix-blend-mode:multiply}
.q-img .hl{position:absolute;background:rgba(216,184,98,.42);border-radius:5px;mix-blend-mode:multiply;pointer-events:none;transition:all .2s}
.q-img .cover{position:absolute;left:2.5%;right:2.5%;background:var(--pbg,#fbf5e3);border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.q-img .cover::after{content:"";display:block;width:84%;height:22%;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(150,120,60,.35) 0 22px,transparent 22px 28px)}
.q-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8a7a52;font-size:13px}
.th-white{--pbg:#ffffff}.th-cream{--pbg:#fbf5e3}.th-green{--pbg:#e6f0e2}.th-antique{--pbg:#f3e3c3}
.th-night{--pbg:#111c22}
.th-night .q-img img{mix-blend-mode:normal;filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.95)}
.th-night .q-frame{border-color:#7a6a3a;outline-color:#7a6a3a}.th-night .q-frame::before{border-color:#2c4a44}
.th-night .q-img .hl{mix-blend-mode:screen;background:rgba(216,184,98,.3)}
.q-text{font-family:var(--fqq);font-size:clamp(19px,5.4vw,25px);line-height:2.25;text-align:justify;text-align-last:center;color:var(--ink);padding:6px 4px}
.th-night .q-text{color:#e8e0c8}
.q-text .sh{display:block;text-align:center;font-family:var(--fq);font-weight:700;font-size:19px;margin:6px 0;padding:4px;border:1.5px solid #b8963f;border-radius:20px;color:#2f5d55;background:rgba(47,93,85,.08)}
.q-text .an{font-family:var(--fq);color:#7a5f1f;font-size:.8em}
.tj-h,.tj-s,.tj-l{color:#9a9a9a}.tj-n{color:#537fff}.tj-p{color:#4050ff}.tj-m{color:#000ebc}.tj-q{color:#dd0008}.tj-o{color:#2144c1}.tj-c{color:#d500b7}.tj-f{color:#9400a8}.tj-w{color:#58b800}.tj-i{color:#26bffd}.tj-a{color:#169777}.tj-u{color:#169200}.tj-d,.tj-b{color:#a1a1a1}.tj-g{color:#ff7e1e}
.th-night .tj-m{color:#8a93ff}.th-night .tj-o{color:#7f9bff}
.tj-legend{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--mist);margin:8px 4px}.tj-legend span{display:flex;align-items:center;gap:4px}.tj-legend i{width:9px;height:9px;border-radius:50%;display:block}
.q-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.q-pn{flex:1;text-align:center;padding:6px;border-radius:12px;background:var(--card)}.q-pn b{display:block;font-size:15px}.q-pn small{font-size:11px;color:var(--mist)}
.hifz-bar{display:flex;gap:6px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.player{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:560px;display:flex;align-items:center;gap:8px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(var(--sab) + 10px) max(12px,env(safe-area-inset-left,0px));background:#13263a;border-top:1px solid rgba(216,184,98,.25);border-radius:22px 22px 0 0;z-index:20}
.player .ib{width:38px;height:38px;font-size:15px}
.player .play{background:var(--gold);color:#13263a;width:44px;height:44px;border-radius:50%}
.pl-n{flex:1;min-width:0}.pl-n b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pl-n small{font-size:11px;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
/* sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(3,8,12,.6);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:100%;max-width:560px;max-height:88vh;overflow:auto;background:#13263a;border-radius:24px 24px 0 0;z-index:41;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(var(--sab) + 20px) max(16px,env(safe-area-inset-left,0px));transition:transform .25s ease;overscroll-behavior:contain}
.sheet.on{transform:translate(-50%,0)}
.grab{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:0 auto 12px}
.sh-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sh-h b{font-family:var(--fq);font-size:20px;color:var(--gold2)}
.ay-box{border-radius:16px;background:rgba(255,255,255,.06);padding:12px;font-family:var(--fqq);font-size:20px;line-height:2;text-align:center}
.tf{font-size:15px;line-height:2;color:#e9e2cc;margin-top:12px;white-space:pre-line}
.tf .fn{font-size:12px;color:#93a6b1}
.tf h5{font-size:13px;color:var(--gold2);margin:10px 0 2px}
.acts{display:flex;justify-content:space-around;margin:12px 0 4px}
.acts button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:var(--mist)}
.acts i{font-style:normal;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:17px}
.ayi{text-align:right;padding:10px 12px;border-radius:13px;background:var(--card);font-family:var(--fqq);font-size:17px;line-height:1.9;width:100%}
.ayi small{font-family:var(--ff);color:var(--gold2);font-size:11px;display:block}
.sl{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line);width:100%;text-align:right}
.sl .num{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gold2);background:rgba(216,184,98,.12);border-radius:10px}
.sl .n{flex:1}.sl .n b{display:block;font-family:var(--fq);font-size:17px}.sl .n small{font-size:11px;color:var(--mist)}
.sl .pg{font-size:11px;color:var(--mist);text-align:left}.sl .pg b{display:block;font-size:13px;color:var(--cream)}
.rec{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:13px;background:var(--card);width:100%;text-align:right}
.rec.on{background:linear-gradient(135deg,rgba(216,184,98,.26),rgba(216,184,98,.08));border:1px solid rgba(216,184,98,.5)}
.rec .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3d6b7f,#25465a);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.rec .av.o{background:linear-gradient(135deg,#7a6236,#4e3f22);color:#f6e7b8}
.rec .n{flex:1;min-width:0;font-weight:700;font-size:13.5px}.rec .n small{display:block;font-weight:400;font-size:11px;color:var(--mist)}
.loading{padding:22px;text-align:center;color:var(--mist);font-size:13px}
.err{padding:14px;border-radius:12px;background:rgba(217,96,79,.12);color:#ffcdc5;font-size:13px;line-height:1.8}
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 90px);transform:translateX(-50%) translateY(20px);background:#f8f0dc;color:#2b2418;padding:11px 16px;border-radius:14px;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:all .25s;z-index:60;max-width:90vw;text-align:center;box-shadow:0 10px 26px rgba(0,0,0,.4)}
.toast.on{opacity:1;transform:translateX(-50%)}

.tr.mine{border-color:rgba(216,184,98,.28)}
.tr .tag{margin-inline-end:6px}

/* ===== full-screen mushaf ===== */
#v-quran.on{position:fixed;top:0;left:0;right:0;bottom:0;padding:0;overflow:hidden;display:block;background:#0a1620}
#v-quran .qh{position:absolute;top:0;left:0;right:0;z-index:6;margin:0;padding:calc(var(--sat) + 8px) max(10px,env(safe-area-inset-right,0px)) 22px max(10px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(10,22,32,.97) 55%,rgba(10,22,32,0))}
#v-quran .q-stage{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;overflow:hidden;padding:calc(var(--sat) + 4px) max(4px,env(safe-area-inset-right,0px)) calc(var(--sab) + 4px) max(4px,env(safe-area-inset-left,0px));transition:padding .3s}
#v-quran .q-stage.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
#v-quran .q-page{margin:auto;max-width:none;flex:none}
#v-quran .q-stage.scroll .q-page{margin:0 auto auto}
#v-quran.ui-pinned .q-stage{padding-top:calc(var(--sat) + 72px);padding-bottom:calc(var(--sab) + 136px)}
#v-quran .q-bottom{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 66px);z-index:6;padding:16px max(10px,env(safe-area-inset-right,0px)) 6px max(10px,env(safe-area-inset-left,0px));background:linear-gradient(0deg,rgba(10,22,32,.95) 45%,rgba(10,22,32,0))}
#v-quran .q-foot{margin:0}
#v-quran .hifz-bar{margin:0 0 8px}
.q-ui{transition:opacity .35s ease,transform .35s ease}
#v-quran.ui-off .q-ui{opacity:0;pointer-events:none}
#v-quran.ui-off .qh{transform:translateY(-30px)}
#v-quran.ui-off .q-bottom{transform:translateY(30px)}
#v-quran.ui-off .player{transform:translate(-50%,40px)}
.q-mini{position:absolute;left:50%;bottom:calc(var(--sab) + 6px);transform:translateX(-50%);z-index:5;font-size:11px;color:rgba(246,239,222,.55);background:rgba(10,22,32,.45);padding:2px 10px;border-radius:10px;opacity:0;transition:opacity .35s;pointer-events:none;white-space:nowrap}
#v-quran.ui-off .q-mini{opacity:1}
@media (prefers-reduced-motion:reduce){.q-ui,.q-mini,#v-quran .q-stage{transition:none}}

.adhan-bar{position:fixed;left:50%;top:calc(var(--sat) + 10px);transform:translate(-50%,-150%);z-index:60;display:flex;align-items:center;gap:12px;background:#f8f0dc;color:#2b2418;padding:8px 10px 8px 16px;border-radius:16px;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,.4);transition:transform .3s}
.adhan-bar.on{transform:translate(-50%,0)}
.adhan-bar .btn{background:#13263a;color:#f6efde}
input[type=range]{accent-color:var(--gold)}

.heard{margin:8px auto 0;max-width:420px;text-align:center;font-size:13px;color:var(--gold2);background:rgba(216,184,98,.1);border:1px dashed rgba(216,184,98,.35);border-radius:12px;padding:6px 10px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.6}}
@media (prefers-reduced-motion:reduce){.heard{animation:none}}
.qo-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.qo-acts .btn{font-size:13px;padding:10px 6px}
.ay-box.sm{font-size:17px;padding:8px}
.pt-it{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
optgroup{background:#13263a;color:var(--gold2)}option{color:var(--cream);background:#13263a}

/* page drawn with the mushaf fonts */
.q-img.fpage{display:flex}
.fp{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:space-between;direction:rtl;color:#1d1a14;padding:1% 2.2%}
.fl{height:var(--lh,6.6%);display:flex;align-items:center;justify-content:space-between;white-space:nowrap;line-height:1}
.fl.c{justify-content:center;gap:.28em}
.fl.measure{justify-content:flex-start;width:max-content}
.fl .w{display:inline-block;cursor:pointer;border-radius:4px;transition:color .2s,background .2s}
.fl .w.cur{background:rgba(216,184,98,.45)}
.fl.hd{justify-content:center}
.fl.hd span{font-family:var(--fq);font-weight:700;font-size:.8em;color:#2f5d55;border:1.5px solid #b8963f;border-radius:30px;padding:.1em 1.6em;background:rgba(47,93,85,.08)}
.fl.bs{justify-content:center;font-family:var(--fqq);font-size:.78em;color:#1d1a14}
.fl .w i{font-style:normal}
.fl .w.hid i{visibility:hidden}
.fl .w.hid{background:repeating-linear-gradient(90deg,rgba(150,120,60,.28) 0 70%,transparent 70% 100%) center/100% 34% no-repeat;filter:opacity(1)}
.fl .w.hid.e{background:none}
.fl .w.ok{background:rgba(40,160,110,.14)}
.fl .w.bad{background:rgba(220,40,40,.16);box-shadow:inset 0 -2px 0 #d03030;position:relative}
.fl .w.bad::after{content:"✗";position:absolute;top:-.55em;left:50%;transform:translateX(-50%);font:700 .38em var(--ff);color:#d03030}
.fl .w.wrong{animation:wshake .45s;box-shadow:inset 0 -2px 0 #d03030}
@keyframes wshake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.th-night .fp,.th-night .fl.bs{color:#ece4cc}
.th-night .fl.hd span{color:#d8c48a}

.dl-home{position:relative;width:40px;height:40px;border-radius:50%;background:rgba(216,184,98,.16);border:1px solid rgba(216,184,98,.45);color:var(--gold2);font-size:17px;display:flex;align-items:center;justify-content:center;flex:none}
.dl-home i{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:#e2574c}