:root{
  --g9:rgb(var(--rc0));--g8:rgb(var(--rc1));--g7:rgb(var(--rc2));--g6:rgb(var(--rc3));--g5:rgb(var(--rc4));
  --gold:rgb(var(--rc5));--gold2:rgb(var(--rc6));--gold3:rgb(var(--rc7));
  --cream:rgb(var(--rc8));--paper:rgb(var(--rc9));--ink:rgb(var(--rc10));--muted:rgb(var(--rc11));
  --bg:rgb(var(--rc12));--card:rgb(var(--rc13));--card2:rgb(var(--rc14));--line:rgba(var(--rc7),.25);
  --shadow:0 6px 24px rgba(var(--rc1),.10),0 1px 3px rgba(var(--rc1),.08);
  --r:18px;--ui:'Tajawal',system-ui,sans-serif;--q:'Amiri Quran','Amiri',serif;--ar:'Amiri',serif;--kufi:'Reem Kufi','Tajawal',sans-serif;
  --qsize:28px;
}
html[data-theme=dark]{
  --bg:rgb(var(--rc15));--card:rgb(var(--rc16));--card2:rgb(var(--rc17));--ink:rgb(var(--rc18));--muted:rgb(var(--rc19));--line:rgba(var(--rc6),.18);
  --paper:rgb(var(--rc20));--shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--ui);background:var(--bg);color:var(--ink);line-height:1.7;-webkit-tap-highlight-color:transparent;min-height:100vh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.bgpat{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-opacity='.18' stroke-width='1'%3E%3Cpath d='M40 8l9 23 23 9-23 9-9 23-9-23-23-9 23-9z'/%3E%3Crect x='24' y='24' width='32' height='32' transform='rotate(45 40 40)'/%3E%3Crect x='24' y='24' width='32' height='32'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3C/g%3E%3C/svg%3E");}
html[data-theme=dark] .bgpat{opacity:.35}
a{color:inherit}
button{font-family:inherit}
img{max-width:100%}
h1,h2,h3{font-family:var(--kufi);font-weight:700;line-height:1.35;margin:.2em 0 .5em}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));
 background:linear-gradient(135deg,var(--g9),var(--g8) 60%,var(--g7));color:rgb(var(--rc21));box-shadow:0 2px 16px rgba(0,0,0,.25);border-bottom:1px solid rgba(var(--rc6),.35)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand-mark{width:40px;height:40px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(var(--rc6),.6)}
.brand-mark img{width:100%;height:100%;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt b{font-family:var(--kufi);font-size:24px;color:var(--gold2)}
.brand-txt small{font-size:11px;opacity:.85;margin-top:3px}
.topnav{display:none;gap:2px;margin-inline:auto;flex-wrap:wrap}
.topnav a{text-decoration:none;padding:7px 11px;border-radius:999px;font-size:14.5px;opacity:.9}
.topnav a:hover{background:rgba(255,255,255,.08)}
.topnav a.on{background:rgba(var(--rc6),.18);color:var(--gold2);opacity:1}
.top-actions{display:flex;gap:8px;margin-inline-start:auto}
.icon-btn{background:rgba(255,255,255,.08);color:rgb(var(--rc21));border:1px solid rgba(var(--rc6),.35);border-radius:12px;height:38px;min-width:38px;padding:0 10px;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.icon-btn span{font-size:13px}
@media(min-width:1000px){.topnav{display:flex}.tabbar{display:none!important}body{padding-bottom:90px}.top-actions{margin-inline-start:0}}
main{max-width:1180px;margin:0 auto;padding:16px 14px 30px;outline:none}
.tabbar{position:fixed;bottom:0;inset-inline:0;z-index:45;display:flex;justify-content:space-around;background:rgba(var(--rc22),.96);backdrop-filter:blur(10px);padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-top:1px solid rgba(var(--rc6),.3)}
.tabbar a{flex:1;text-align:center;text-decoration:none;color:rgb(var(--rc23));font-size:11.5px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 0;border-radius:12px}
.tabbar a i{font-style:normal;font-size:19px;line-height:1.3}
.tabbar a.on{color:var(--gold2)}
.tabbar a.on i{transform:translateY(-1px)}
/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sec-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 2px 10px}
.sec-title h2{margin:0;font-size:21px;color:var(--g7)}
html[data-theme=dark] .sec-title h2{color:var(--gold2)}
.sec-title h2::before{content:'۞';color:var(--gold);margin-inline-end:8px;font-size:.85em}
.muted{color:var(--muted)}
.small{font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:9px 16px;font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;background:var(--g7);color:#fff;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.97)}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:rgb(var(--rc24))}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:6px 11px;font-size:13.5px;border-radius:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:14px;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--g7);color:#fff;border-color:var(--g7)}
html[data-theme=dark] .chip.on{background:var(--gold);color:rgb(var(--rc25));border-color:var(--gold)}
.scroll-x{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
input[type=text],input[type=search],input[type=number],select,textarea{font-family:inherit;font-size:16px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px;width:100%}
.searchbox{position:relative}
/* hero */
.hero{position:relative;overflow:hidden;border-radius:24px;padding:26px 20px 22px;color:rgb(var(--rc26));
 background:radial-gradient(120% 90% at 85% 0%,rgba(var(--rc6),.25),transparent 55%),linear-gradient(150deg,rgb(var(--rc27)),rgb(var(--rc1)) 45%,rgb(var(--rc28)));box-shadow:0 14px 40px rgba(var(--rc0),.35);border:1px solid rgba(var(--rc6),.4)}
.hero::before{content:'';position:absolute;inset:0;opacity:.22;background-image:var(--ru0)}
.hero>*{position:relative}
.hero .greet{font-size:14px;opacity:.85;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hero .dates b{color:var(--gold2);font-weight:700}
.ayah-day{margin:14px 0 8px;font-family:var(--q);font-size:clamp(23px,4.5vw,34px);line-height:2.05;text-align:center;color:rgb(var(--rc29));min-height:90px}
.ayah-ref{text-align:center;color:var(--gold2);font-size:14px}
.hero-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.hero-actions .btn.ghost{color:rgb(var(--rc26));border-color:rgba(var(--rc6),.45)}
.countdown{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding:12px 14px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(var(--rc6),.3)}
.countdown .cd-time{font-size:26px;font-weight:800;color:var(--gold2);font-variant-numeric:tabular-nums;letter-spacing:.5px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(min-width:700px){.tiles{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(11,1fr)}}
.tile{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;padding:12px 4px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);font-size:13px;font-weight:700;text-align:center;transition:transform .15s}
.tile:hover{transform:translateY(-2px)}
.tile .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;color:#fff;background:linear-gradient(135deg,var(--g6),var(--g8));box-shadow:inset 0 0 0 1px rgba(var(--rc6),.5)}
.tile:nth-child(3n+2) .ic{background:linear-gradient(135deg,rgb(var(--rc30)),rgb(var(--rc31)))}
.tile:nth-child(3n) .ic{background:linear-gradient(135deg,rgb(var(--rc32)),rgb(var(--rc33)))}
/* daily */
.daily .hadith-text{font-family:var(--ar);font-size:19px;line-height:2}
.counter-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.counter-btn{width:86px;height:86px;border-radius:50%;border:0;cursor:pointer;font-size:26px;font-weight:800;color:#fff;background:radial-gradient(circle at 30% 30%,var(--g5),var(--g8));box-shadow:0 8px 18px rgba(var(--rc1),.35),inset 0 0 0 3px rgba(var(--rc6),.6);transition:transform .08s}
.counter-btn:active{transform:scale(.93)}
.bar{height:8px;border-radius:9px;background:rgba(127,127,127,.18);overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--g5));border-radius:9px;transition:width .3s}
/* surah list */
.surah-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.s-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;transition:background .15s}
.s-item:hover{background:var(--card2)}
.s-num{flex:none;width:42px;height:42px;display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--g7);
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.6'%3E%3Crect x='7' y='7' width='26' height='26' rx='3'/%3E%3Crect x='7' y='7' width='26' height='26' rx='3' transform='rotate(45 20 20)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
html[data-theme=dark] .s-num{color:var(--gold2)}
.s-name{font-family:var(--ar);font-size:21px;font-weight:700;line-height:1.3}
.s-meta{font-size:12.5px;color:var(--muted)}
.s-end{margin-inline-start:auto;text-align:left;font-size:12px;color:var(--muted)}
.badge{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:999px;background:rgba(var(--rc5),.16);color:var(--gold3);font-weight:700}
html[data-theme=dark] .badge{color:var(--gold2)}
.badge.green{background:rgba(var(--rc4),.14);color:var(--gt)}
html[data-theme=dark] .badge.green{color:rgb(var(--rc34))}
/* reader */
.reader-bar{position:sticky;top:64px;z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:8px 10px;box-shadow:var(--shadow);margin-bottom:12px}
@media(min-width:1000px){.reader-bar{top:70px}}
.reader-bar .title{font-family:var(--ar);font-weight:700;font-size:19px}
.reader-bar .sp{flex:1}
.mushaf{max-width:860px;margin:0 auto}
.page{position:relative;background:var(--paper);border-radius:10px;padding:26px 22px 20px;box-shadow:var(--shadow);
 border:2px solid var(--gold);outline:6px double rgba(var(--rc5),.45);outline-offset:-14px;min-height:60vh}
html[data-theme=dark] .page{outline-color:rgba(var(--rc6),.25)}
.page-head{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin:0 6px 10px;font-family:var(--ar)}
.page-foot{text-align:center;margin-top:14px;font-family:var(--ar);color:var(--gold3);font-weight:700}
.qtext{font-family:var(--q);font-size:var(--qsize);line-height:2.25;text-align:justify;text-align-last:center;word-spacing:1px}
.qtext.cont{text-align:justify;text-align-last:auto}
.ayah{cursor:pointer;border-radius:8px;transition:background .2s;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px}
.ayah:hover{background:rgba(var(--rc5),.12)}
.ayah.sel{background:rgba(var(--rc5),.25)}
.ayah.playing{background:rgba(var(--rc4),.18)}
.anum{display:inline-grid;place-items:center;min-width:1.45em;height:1.45em;margin:0 .15em;font-family:var(--ar);font-size:.62em;color:var(--g7);vertical-align:middle;line-height:1;
 background:var(--ru1) center/contain no-repeat}
html[data-theme=dark] .anum{color:var(--gold2)}
.surah-head{margin:18px 0 8px;text-align:center;padding:10px;border-radius:12px;font-family:var(--ar);font-size:24px;font-weight:700;color:var(--g8);
 background:linear-gradient(90deg,transparent,rgba(var(--rc5),.22),transparent);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold)}
html[data-theme=dark] .surah-head{color:var(--gold2)}
.basmala{text-align:center;font-family:var(--q);font-size:calc(var(--qsize) * .95);margin:6px 0 8px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0}
.cont-wrap{background:var(--paper);border-radius:16px;padding:18px 18px;border:1px solid var(--line);box-shadow:var(--shadow)}
/* tafsir */
.tafsir-text p{margin:.4em 0 .9em;font-family:var(--ar);font-size:19px;line-height:2}
.ayah-box{font-family:var(--q);font-size:calc(var(--qsize) * .95);line-height:2.1;text-align:center;padding:16px;border-radius:16px;background:var(--paper);border:1px solid var(--line)}
/* lists */
.list{display:flex;flex-direction:column;gap:8px}
.li{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-decoration:none;cursor:pointer}
.li:hover{background:var(--card2)}
.li .grow{flex:1;min-width:0}
.avatar{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--kufi);font-size:20px;color:#fff;background:linear-gradient(135deg,var(--g6),var(--g9));box-shadow:inset 0 0 0 2px rgba(var(--rc6),.6)}
.avatar.eg{background:linear-gradient(135deg,rgb(var(--rc35)),rgb(var(--rc36)))}
.hcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
.hcard .htext{font-family:var(--ar);font-size:19px;line-height:2.05;white-space:pre-wrap}
.hcard .hfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
/* prayer */
.ptimes{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.pt{padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:center}
.pt b{display:block;font-size:24px;font-variant-numeric:tabular-nums}
.pt.next{background:linear-gradient(135deg,var(--g7),var(--g9));color:#fff;border-color:var(--gold);box-shadow:0 8px 20px rgba(var(--rc1),.35)}
.pt.next b{color:var(--gold2)}
.compass{width:180px;height:180px;border-radius:50%;margin:10px auto;position:relative;background:radial-gradient(circle,var(--paper) 55%,rgba(var(--rc5),.25) 56%,var(--paper) 70%);border:3px solid var(--gold);box-shadow:var(--shadow)}
.compass .n{position:absolute;top:4px;left:50%;transform:translateX(-50%);font-weight:800;color:#b33}
.compass .needle{position:absolute;inset:0;transition:transform .4s}
.compass .needle::before{content:'';position:absolute;left:50%;top:14px;width:6px;height:76px;margin-left:-3px;border-radius:6px;background:linear-gradient(var(--g6),var(--g8))}
.compass .needle::after{content:'🕋';position:absolute;left:50%;top:-2px;transform:translateX(-50%);font-size:24px}
/* dhikr */
.dhikr{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
.dhikr .dtext{font-family:var(--ar);font-size:19px;line-height:2.05}
.dhikr .dcount{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.dhikr.done{opacity:.6}
.round{border:0;border-radius:999px;padding:8px 16px;font-weight:800;cursor:pointer;background:var(--g7);color:#fff;font-size:15px}
/* kids */
.kids{--k1:#ff8a5b;--k2:rgb(var(--rc37));--k3:rgb(var(--rc38));--k4:#7b6cf6;--k5:#ef5d8f}
.kids-hero{border-radius:24px;padding:20px;color:#fff;background:linear-gradient(135deg,rgb(var(--rc39)),rgb(var(--rc37)) 55%,rgb(var(--rc38)));box-shadow:var(--shadow)}
.kids-hero h1{font-size:28px;margin:0}
.letters{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.letter{aspect-ratio:1;border:0;border-radius:20px;font-family:var(--ar);font-size:40px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.15);transition:transform .1s}
.letter:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.letter:nth-child(5n+1){background:var(--k1)}.letter:nth-child(5n+2){background:var(--k2)}.letter:nth-child(5n+3){background:var(--k3)}.letter:nth-child(5n+4){background:var(--k4)}.letter:nth-child(5n){background:var(--k5)}
.kid-ayah{font-family:var(--q);font-size:32px;line-height:2.1;text-align:center;padding:18px;border-radius:20px;background:var(--paper);border:3px solid rgb(var(--rc37));margin:10px 0}
.kid-ayah.playing{border-color:rgb(var(--rc38));box-shadow:0 0 0 5px rgba(var(--rc38),.25)}
.stars{color:rgb(var(--rc37));letter-spacing:2px;font-size:18px}
/* sira */
details.acc{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:10px;box-shadow:var(--shadow);overflow:hidden}
details.acc summary{cursor:pointer;padding:14px 16px;font-family:var(--kufi);font-weight:700;font-size:18px;list-style:none;display:flex;align-items:center;gap:10px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:'⌄';margin-inline-start:auto;transition:transform .2s;color:var(--gold)}
details.acc[open] summary::after{transform:rotate(180deg)}
details.acc .acc-body{padding:0 18px 16px;font-size:16.5px}
details.acc .acc-body li{margin-bottom:6px}
.ref{font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px;margin-top:8px}
/* names */
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.name{text-align:center;padding:16px 6px;border-radius:16px;background:var(--card);border:1px solid var(--line);font-family:var(--ar);font-size:24px;font-weight:700;color:var(--g7);box-shadow:var(--shadow)}
html[data-theme=dark] .name{color:var(--gold2)}
.name small{display:block;font-family:var(--ui);font-size:11px;color:var(--muted);font-weight:400}
/* player */
.player{position:fixed;inset-inline:8px;bottom:calc(68px + env(safe-area-inset-bottom));z-index:44;border-radius:18px;background:linear-gradient(135deg,rgb(var(--rc27)),rgb(var(--rc2)));color:rgb(var(--rc26));box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid rgba(var(--rc6),.45);overflow:hidden;max-width:760px;margin:0 auto}
@media(min-width:1000px){.player{bottom:14px}}
.pl-progress{height:4px;background:rgba(255,255,255,.12);cursor:pointer}
.pl-progress div{height:100%;width:0;background:var(--gold2)}
.pl-row{display:flex;align-items:center;gap:6px;padding:8px 10px}
.pl-btn{background:none;border:0;color:rgb(var(--rc26));font-size:17px;width:36px;height:36px;border-radius:50%;cursor:pointer;flex:none}
.pl-btn:hover{background:rgba(255,255,255,.1)}
.pl-main{background:var(--gold2);color:rgb(var(--rc25));font-size:16px}
.pl-main:hover{background:var(--gold2)}
.pl-info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3;cursor:pointer}
.pl-info b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-info small{font-size:12px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* sheet */
.sheet-wrap{position:fixed;inset:0;z-index:60}
.sheet-back{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:fade .2s}
.sheet{position:absolute;bottom:0;inset-inline:0;max-height:88vh;overflow:auto;background:var(--card);border-radius:22px 22px 0 0;padding:8px 18px calc(18px + env(safe-area-inset-bottom));animation:up .22s ease-out;max-width:720px;margin:0 auto;border-top:2px solid var(--gold)}
.sheet-grip{width:44px;height:5px;border-radius:5px;background:rgba(127,127,127,.35);margin:4px auto 10px}
@keyframes up{from{transform:translateY(40px);opacity:0}}
@keyframes fade{from{opacity:0}}
.act-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.act{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;border:1px solid var(--line);background:var(--card2);cursor:pointer;font-size:12.5px;color:var(--ink)}
.act i{font-style:normal;font-size:20px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row>label{font-size:14px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:150px;transform:translateX(-50%) translateY(20px);opacity:0;background:rgb(var(--rc1));color:#fff;padding:10px 18px;border-radius:999px;z-index:80;transition:.25s;pointer-events:none;font-size:14px;border:1px solid var(--gold);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}
.skel{height:14px;border-radius:8px;background:linear-gradient(90deg,rgba(127,127,127,.12),rgba(127,127,127,.22),rgba(127,127,127,.12));background-size:200% 100%;animation:sk 1.2s infinite;margin:8px 0}
@keyframes sk{to{background-position:-200% 0}}
.err{padding:14px;border-radius:14px;background:rgba(200,60,60,.08);border:1px solid rgba(200,60,60,.25)}
.note{padding:10px 14px;border-radius:14px;background:rgba(var(--rc5),.1);border:1px solid var(--line);font-size:14px}
.site-foot{max-width:1180px;margin:20px auto 0;padding:22px 16px 30px;text-align:center;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
.site-foot a{color:var(--gt);font-weight:700}
html[data-theme=dark] .site-foot a{color:var(--gold2)}
.ornament{display:block;text-align:center;color:var(--gold);letter-spacing:8px;margin:6px 0}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl td,.tbl th{padding:8px;border-bottom:1px solid var(--line);text-align:right}
.switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.switch input{width:22px;height:22px;accent-color:var(--g6)}
.hl{background:rgba(var(--rc5),.35);border-radius:4px}
@media(max-width:420px){.qtext{line-height:2.15}.page{padding:20px 14px 16px;outline-offset:-10px}.brand-txt small{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.chip{text-decoration:none}
body.has-player{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
@media(min-width:1000px){body.has-player{padding-bottom:110px}}

/* name + dedication card */
.ded-card{margin-top:14px;background:linear-gradient(180deg,var(--paper),var(--card2));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 18px 16px;text-align:center;position:relative}
.ded-card:before,.ded-card:after{content:'';position:absolute;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55}
.ded-card:before{top:7px}.ded-card:after{bottom:7px}
.ded-lbl{display:inline-block;font-family:var(--kufi);font-size:15px;color:var(--gold3);letter-spacing:.5px;margin-bottom:4px;padding:0 10px;border-bottom:1px solid var(--line)}
html[data-theme=dark] .ded-lbl{color:var(--gold2)}
.ded-card p{margin:4px auto;max-width:640px;font-family:var(--ar);font-size:18px;line-height:1.9}
.ded-about p{font-size:17px;color:var(--muted)}
.ded-sep{color:var(--gold);font-size:13px;margin:8px 0 6px;opacity:.8}
.ded-card p.ded-sign{margin-top:8px;font-family:var(--ui);font-weight:700;font-size:15px;color:var(--gold3)}
html[data-theme=dark] .ded-card p.ded-sign{color:var(--gold2)}
@media (max-width:480px){.ded-card{padding:16px 14px 14px}.ded-card p{font-size:16.5px}.ded-about p{font-size:15.5px}}

/* ===== home v9 — editorial ===== */
.hx{--hl:rgba(var(--rc10),.10);--hs:#fff;--hs2:rgb(var(--rc40));display:flex;flex-direction:column;gap:0}
html[data-theme=dark] .hx{--hl:rgba(var(--rc6),.14);--hs:rgb(var(--rc16));--hs2:rgb(var(--rc17))}
.hx .ico{width:18px;height:18px;flex:none;display:block}
.hx-top{display:grid;gap:14px}
@media(min-width:1000px){.hx-top{grid-template-columns:1.55fr 1fr;align-items:stretch}}
.hx-hero{position:relative;overflow:hidden;border-radius:22px;padding:22px 20px 20px;background:var(--g8);color:rgb(var(--rc41));border:1px solid rgba(var(--rc6),.22)}
.hx-hero::before{content:'';position:absolute;inset:0;opacity:.07;pointer-events:none;background-image:var(--ru2)}
.hx-hero>*{position:relative}
.hx-dates{font-size:13px;color:rgba(var(--rc41),.72);text-align:center}
.hx-dates b{color:var(--gold2);font-weight:700}
.hx-eyebrow{display:flex;align-items:center;gap:12px;margin:14px 0 2px;color:var(--gold2);font-size:12.5px;font-weight:700;letter-spacing:.4px}
.hx-eyebrow::before,.hx-eyebrow::after{content:'';flex:1;height:1px;background:rgba(var(--rc6),.28)}
.hx-ayah{color:rgb(var(--rc42));min-height:80px;margin:10px 0 6px}
.hx-ref{text-align:center;color:var(--gold2);font-size:13.5px;opacity:.9}
.hx-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.hx-actions .primary{grid-column:1/-1}
@media(min-width:620px){.hx-actions{display:flex;justify-content:center;flex-wrap:wrap}.hx-actions .primary{grid-column:auto}}
.hx-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 16px;border-radius:12px;border:1px solid rgba(var(--rc6),.32);background:transparent;color:inherit;font:700 14.5px var(--ui);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.hx-btn:hover{background:rgba(255,255,255,.06)}
.hx-btn .ico{width:17px;height:17px}
.hx-btn.primary{background:var(--gold);border-color:var(--gold);color:rgb(var(--rc43))}
.hx-btn.primary:hover{background:var(--gold2)}
.hx-btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:10px}
.hx-btn.ghost{border-color:var(--hl);color:var(--ink)}
.hx-btn.ghost:hover{background:var(--hs2)}
.hx-card{display:block;background:var(--hs);border:1px solid var(--hl);border-radius:18px;padding:16px;color:inherit;text-decoration:none}
.hx-prayer{display:flex;flex-direction:column;gap:14px;transition:border-color .15s}
.hx-prayer:hover,.hx-last:hover,.hx-srow:hover,.hx-tile:hover,.hx-rlink:hover{border-color:rgba(var(--rc7),.55)}
.hx-pr-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hx-pr-city{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--muted)}
.hx-pr-city .ico{width:16px;height:16px;color:var(--gold3)}
.hx-pr-main{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.hx-pr-main small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.hx-pr-next{font-family:var(--kufi);font-size:24px;font-weight:700;color:var(--g7);line-height:1.3}
html[data-theme=dark] .hx-pr-next{color:var(--gold2)}
.hx-pr-cd{text-align:left}
.hx-pr-cd .cd-time{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.5px;color:var(--ink);direction:ltr;line-height:1.3}
.hx-strip{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--hl);border-radius:14px;overflow:hidden;margin-top:auto}
.hx-strip>div{display:flex;flex-direction:column;align-items:center;padding:9px 2px;gap:2px;border-inline-start:1px solid var(--hl);min-width:0}
.hx-strip>div:first-child{border-inline-start:0}
.hx-strip span{font-size:12px;color:var(--muted)}
.hx-strip b{font-size:13px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.hx-strip>div.on{background:var(--g8);color:rgb(var(--rc41))}
.hx-strip>div.on span{color:var(--gold2)}
.hx-last{display:flex;align-items:center;gap:12px;margin-top:14px}
.hx-last small{display:block;font-size:12px;color:var(--muted)}
.hx-last b{display:block;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-last .grow{flex:1;min-width:0}
.hx-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--hs2);border:1px solid var(--hl);color:var(--g7)}
html[data-theme=dark] .hx-ic{color:var(--gold2)}
.hx-ic .ico{width:21px;height:21px}
.hx-sec{margin-top:30px}
.hx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 2px 12px;padding-bottom:10px;border-bottom:1px solid var(--hl)}
.hx-head h2{margin:0;font-family:var(--ui);font-weight:800;font-size:20px;line-height:1.3;color:var(--ink)}
.hx-head p{margin:2px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.hx-more{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;color:var(--gt);text-decoration:none;white-space:nowrap;flex:none}
html[data-theme=dark] .hx-more{color:var(--gold2)}
.hx-more .ico{width:15px;height:15px}
.hx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(min-width:620px){.hx-tiles{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1000px){.hx-tiles{grid-template-columns:repeat(11,1fr)}}
.hx-tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px 12px;border-radius:16px;background:var(--hs);border:1px solid var(--hl);text-decoration:none;color:var(--ink);font-size:12.5px;font-weight:700;text-align:center;line-height:1.3;transition:border-color .15s}
.hx-tile .hx-ic{width:44px;height:44px}
.hx-search{display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:14px;background:var(--hs);border:1px solid var(--hl);margin-bottom:12px;color:var(--muted)}
.hx-search:focus-within{border-color:var(--gold)}
.hx-search input{flex:1;min-width:0;border:0!important;background:transparent!important;outline:0;box-shadow:none!important;padding:0!important;height:100%;font:500 15px var(--ui);color:var(--ink)}
.hx-slist{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:760px){.hx-slist{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.hx-slist{grid-template-columns:repeat(4,1fr)}}
.hx-srow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--hs);border:1px solid var(--hl);text-decoration:none;color:inherit;min-width:0;transition:border-color .15s}
.hx-snum{width:34px;height:34px;flex:none;display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--gold3);border:1px solid rgba(var(--rc7),.45);border-radius:10px;transform:rotate(45deg)}
.hx-snum{transform:none;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);border:0;background:rgba(var(--rc5),.14)}
html[data-theme=dark] .hx-snum{color:var(--gold2)}
.hx-sname{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.hx-sname b{font-family:var(--ar);font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-sname small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.hx-spage{font-size:11px;color:var(--muted);white-space:nowrap;display:none}
@media(min-width:760px){.hx-spage{display:block}}
.hx-rrow{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:thin;overscroll-behavior-x:contain}
.hx-rcard{flex:0 0 148px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:14px 12px 12px;border-radius:18px;background:var(--hs);border:1px solid var(--hl);text-align:center}
.hx-rlink{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:inherit;border:1px solid transparent;border-radius:12px}
.hx-av{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--kufi);font-size:20px;font-weight:700;color:var(--g7);background:var(--hs2);border:1px solid rgba(var(--rc7),.4);margin-bottom:4px}
.hx-av.eg{color:var(--gold3)}
html[data-theme=dark] .hx-av{color:var(--gold2)}
.hx-rlink b{font-size:14px;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hx-rlink small{font-size:12px;color:var(--muted)}
.hx-rplay{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;border-radius:10px;border:1px solid var(--hl);background:transparent;color:var(--g7);font:700 13px var(--ui);cursor:pointer}
.hx-rplay:hover{background:var(--hs2)}
.hx-rplay .ico{width:13px;height:13px}
html[data-theme=dark] .hx-rplay{color:var(--gold2)}
@media(min-width:1000px){.hx-rcard{flex-basis:168px}}
.hx-seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--hs2);border:1px solid var(--hl);margin-bottom:12px;gap:2px}
.hx-seg button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:700 13.5px var(--ui);cursor:pointer}
.hx-seg button .ico{width:16px;height:16px}
.hx-seg button.on{background:var(--hs);color:var(--ink);box-shadow:0 0 0 1px var(--hl)}
.hx-dk{display:grid;gap:10px}
@media(min-width:900px){.hx-dk{grid-template-columns:repeat(3,1fr)}}
.hx-dhikr{display:flex;flex-direction:column;gap:12px}
.hx-dtext{font-family:var(--ar);font-size:17.5px;line-height:2;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.hx-dfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--hl)}
.hx-tap{display:inline-flex;align-items:center;gap:6px;height:38px;min-width:86px;justify-content:center;padding:0 14px;border-radius:999px;border:1px solid var(--g7);background:var(--g7);color:#fff;font:800 14px var(--ui);cursor:pointer;font-variant-numeric:tabular-nums}
.hx-tap .ico{width:15px;height:15px}
.hx-dhikr.done .hx-tap{background:transparent;color:var(--gt);border-color:var(--hl)}
.hx-dhikr.done .hx-dtext{opacity:.6}
.hx-wide{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;height:44px;border-radius:14px;border:1px solid var(--hl);background:var(--hs);color:var(--gt);font-weight:700;font-size:14px;text-decoration:none}
html[data-theme=dark] .hx-wide{color:var(--gold2)}
.hx-wide .ico{width:15px;height:15px}
.hx-daily{display:grid;gap:10px}
@media(min-width:760px){.hx-daily{grid-template-columns:repeat(2,1fr)}}
.hx-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hx-daily .hadith-text{font-family:var(--ar);font-size:18px;line-height:2;margin-top:6px}
.hx-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.hx-kh{display:flex;align-items:center;gap:12px}
.hx-kh .grow{flex:1;min-width:0}
.hx .counter-btn{width:76px;height:76px;font-size:24px;background:var(--g8);box-shadow:none;border:1px solid rgba(var(--rc6),.45)}
.hx .bar{height:6px}
.hx .bar>i{background:var(--gold)}
.hx-ded{margin-top:34px}
.hx-ded .ded-card{box-shadow:none;background:var(--hs)}
@media(max-width:380px){.hx-strip b{font-size:11.5px}.hx-actions .hx-btn{padding:0 8px;font-size:13.5px}}

.hx-rcard a.hx-rplay{text-decoration:none}
.hx-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 6px}
.hx-tile{flex:0 0 calc(25% - 6px);background:transparent;border:0;padding:4px 2px;gap:7px;font-weight:600}
.hx-tile .hx-ic{width:54px;height:54px;border-radius:16px;background:var(--hs);transition:border-color .15s}
.hx-tile .hx-ic .ico{width:24px;height:24px}
.hx-tile:hover .hx-ic{border-color:rgba(var(--rc7),.55)}
@media(min-width:620px){.hx-tile{flex-basis:calc(16.66% - 6px)}}
@media(min-width:1000px){.hx-tiles{flex-wrap:nowrap;justify-content:space-between}.hx-tile{flex:1 1 0}}
.hx-av{font-size:22px}
@media(max-width:620px){.hx-dtext{-webkit-line-clamp:5}}
@media(min-width:1000px){.hx-prayer{padding:20px}.hx-pr-next{font-size:30px}.hx-pr-cd .cd-time{font-size:32px}.hx-pr-main{margin-top:auto}}

/* swipe navigation */
#mushaf{touch-action:pan-y}
#mushaf>.page,#mushaf>.cont-wrap{will-change:transform}
@keyframes swInN{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
@keyframes swInP{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.sw-in-n{animation:swInN .22s ease both}.sw-in-p{animation:swInP .22s ease both}
.sw-hint{position:sticky;top:8px;z-index:5;margin:0 auto 10px;width:max-content;max-width:90%;background:rgba(17,24,39,.82);color:#fff;font-size:13px;padding:7px 14px;border-radius:999px;text-align:center}

/* ---------- mushaf pager ---------- */
body.mp-on{overflow:hidden;padding-bottom:0!important;height:100%;overscroll-behavior:none}
html:has(body.mp-on){overflow:hidden;height:100%}
body.mp-on .topbar,body.mp-on .tabbar,body.mp-on .site-foot,body.mp-on #siteFoot{display:none!important}
body.mp-on .player{bottom:calc(8px + env(safe-area-inset-bottom))}
.mp{position:fixed;inset:0;z-index:42;display:flex;flex-direction:column;background:var(--bg);padding:calc(6px + env(safe-area-inset-top)) 8px calc(6px + env(safe-area-inset-bottom));box-sizing:border-box}
body.mp-on.has-player .mp{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.mp .mp-bar{position:relative;top:auto;flex-wrap:nowrap;margin:0 auto 6px;width:100%;max-width:860px;box-sizing:border-box;padding:6px 8px;gap:6px}
.mp .mp-bar .title{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mp .mp-bar .chips{flex-wrap:nowrap}
.mp-view{position:relative;flex:1;min-height:0;width:100%;max-width:860px;margin:0 auto;overflow:hidden;touch-action:pan-y;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
.mp-view.dragging{cursor:grabbing}
.mp-track{position:absolute;inset:0;will-change:transform;transform:translate3d(0,0,0)}
.mp-pane{position:absolute;inset:0;padding:8px 8px 4px;box-sizing:border-box;contain:layout paint;backface-visibility:hidden}
.mp-page{height:100%;min-height:0;box-sizing:border-box;display:flex;flex-direction:column;padding:12px 14px 8px;margin:0}
.mp-page .page-head{flex:none;margin-bottom:4px}
.mp-page .page-foot{flex:none;margin-top:4px}
.mp-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.mp-body.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}
.mp-fit{margin:auto 0;width:100%}
.mp-pane .qtext{font-size:var(--fit,var(--qsize));line-height:2.05;margin:0}
.mp-pane .basmala{font-size:calc(var(--fit,var(--qsize))*.95);margin:.1em 0 .15em;line-height:1.9}
.mp-pane .surah-head{font-size:calc(var(--fit,var(--qsize))*.78);margin:.25em 0 .2em;padding:.25em .6em}
.mp-pane .skel,.mp-pane .card{margin:6px 0}
.mp-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;max-width:860px;margin:4px auto 0;min-height:34px}
.mp-foot .btn{min-width:84px}
.mp-foot .btn:disabled{opacity:.35}
.mp-info{font-size:12.5px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mp-hint{position:absolute;top:auto;bottom:18px;left:50%;transform:translateX(-50%);z-index:5;margin:0}
@media(max-width:420px){.mp .mp-lbl{display:none}.mp .mp-bar .chip{padding:5px 9px;font-size:12.5px}.mp .mp-bar .btn.sm{padding:6px 8px}}
@media(min-width:900px){.mp-page{padding:20px 26px 12px}}

/* extra audio */
.ax-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:6px;scrollbar-width:none}
.ax-chips::-webkit-scrollbar{display:none}
.ax-grp{margin-top:16px}
.ax-gh{display:flex;align-items:center;gap:12px;margin:0 2px 10px}
.ax-gh .avatar{width:40px;height:40px;font-size:17px}
.ax-gh .avatar .ico,.li .avatar .ico{width:22px;height:22px}
.ax-row{width:100%;text-align:start;font:inherit;color:inherit}
.ax-row b{display:block;font-size:15px;line-height:1.5}
.ax-row .badge{margin-inline-start:4px;vertical-align:1px}
.ax-play{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--g7);background:var(--card2)}
html[data-theme=dark] .ax-play{color:var(--gold2)}
.ax-play .ico{width:15px;height:15px}
.ax-row.on{border-color:var(--gold)}
.ax-row.on .ax-play{background:var(--g7);color:#fff;border-color:var(--g7)}
.ax-home{display:grid;gap:26px}
@media(min-width:900px){.ax-home{grid-template-columns:1fr 1fr;gap:24px}}
.dz-card .dz-top{display:flex;align-items:center;gap:12px}
.dz-lines{display:grid;gap:4px;margin:12px 0 6px;font-family:var(--quran,inherit);font-size:16px;color:var(--g7)}
html[data-theme=dark] .dz-lines{color:var(--gold2)}
.dz-note{font-size:12.5px;color:var(--muted,#6b7280);margin-top:4px}
.dz-note::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-inline-end:6px;vertical-align:2px}
.dz-card.on .dz-note::before{background:rgb(var(--rc4))}
.dz-sw{position:relative;flex:none;width:50px;height:30px;cursor:pointer}
.dz-sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.dz-sw span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .2s}
.dz-sw span::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.dz-sw input:checked+span{background:var(--g7)}
.dz-sw input:checked+span::after{transform:translateX(-20px)}
html[dir=ltr] .dz-sw input:checked+span::after{transform:translateX(20px)}
.dz-set .dz-note{margin:-2px 0 6px}

/* recitations filter (v15) */
.rf{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px}
.rf-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--card2)}
.rf-search .ico{width:18px;height:18px;color:var(--muted);flex:none}
.rf-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);padding:10px 0;outline:none}
.rf-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rf-sel{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0}
.rf-sel>span{font-size:12px;color:var(--muted);font-weight:700;padding-inline-start:4px}
.rf-sel select,.rf-cbtn{width:100%;min-width:0;font:inherit;font-size:14.5px;color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:9px 10px;text-align:start;appearance:none;-webkit-appearance:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 background-image:var(--ru3);background-repeat:no-repeat;background-position:left 10px center;padding-left:28px}
.rf-pop{position:absolute;top:100%;inset-inline:0;z-index:40;margin-top:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;min-width:210px}
.rf-pop[hidden]{display:none}
.rf-pop input{width:100%;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card2);color:var(--ink);outline:none}
.rf-opts{max-height:260px;overflow:auto;margin-top:6px;display:flex;flex-direction:column}
.rf-opts button{font:inherit;font-size:14.5px;text-align:start;background:none;border:0;color:var(--ink);padding:8px 10px;border-radius:9px;cursor:pointer}
.rf-opts button.on,.rf-opts button:hover{background:rgba(var(--rc4),.10)}
.rf-chips{margin:0;padding-bottom:2px}
.rf-sort{display:flex;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.rf-sort button{flex:1;font:inherit;font-size:13.5px;font-weight:700;border:0;background:none;color:var(--muted);padding:7px 4px;border-radius:9px;cursor:pointer;white-space:nowrap}
.rf-sort button.on{background:var(--g7);color:#fff}
html[data-theme=dark] .rf-sort button.on{background:var(--gold);color:rgb(var(--rc25))}
.rf-count{margin:4px 4px 8px}
.badge.new{background:#b4372f;color:#fff}
html[data-theme=dark] .badge.new{background:#d0574d;color:#fff}
.rx-row{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rx-row::-webkit-scrollbar{display:none}
.rx-card{flex:none;width:168px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;text-align:start;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;cursor:pointer}
.rx-card.on{border-color:var(--g5)}
.rx-card b{font-size:14.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.rx-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.rx-top .avatar{width:36px;height:36px;font-size:16px}
.rx-meta{display:flex;align-items:center;gap:4px;margin-top:auto}
.rx-meta .ico{width:14px;height:14px}

.ti{width:100%;height:100%;overflow:visible}.ti .d{fill:var(--ti-d,rgb(var(--rc5)));opacity:.42}.ti .m{fill:var(--ti-m,rgb(var(--rc2)))}.ti .s{fill:none;stroke:var(--ti-m,rgb(var(--rc2)));stroke-width:16;stroke-linecap:round;stroke-linejoin:round}.ti .b{fill:var(--ti-b,rgb(var(--rc13)))}.ti .t{font:700 92px Amiri,serif;fill:var(--ti-m,rgb(var(--rc2)))}
.medal{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center}.medal svg{position:absolute;inset:0;width:100%;height:100%}.medal b{position:relative;font-family:Amiri,serif;font-weight:700;font-size:15px;color:rgb(var(--rc2));line-height:1;padding-top:3px}
.m1{fill:rgb(var(--rc44));stroke:rgb(var(--rc5));stroke-width:1.1}.m2{fill:rgb(var(--rc13));stroke:rgb(var(--rc7));stroke-width:.9}.m3{fill:none;stroke:rgb(var(--rc3));stroke-width:.5;opacity:.6}.m4{fill:rgb(var(--rc3));opacity:.75}

/* ===== v16 polish ===== */
html[data-theme=dark]{--ti-m:rgb(var(--rc6));--ti-d:rgb(var(--rc5));--ti-b:rgb(var(--rc16))}
html[data-theme=dark] .medal b{color:rgb(var(--rc6))}html[data-theme=dark] .m1{fill:rgb(var(--rc45));stroke:rgb(var(--rc5))}html[data-theme=dark] .m2{fill:rgb(var(--rc16));stroke:rgb(var(--rc5))}html[data-theme=dark] .m3{stroke:rgb(var(--rc6))}html[data-theme=dark] .m4{fill:rgb(var(--rc6))}
.hx-tiles{gap:16px 4px}
.hx-tile{font-size:12.5px;font-weight:700;letter-spacing:0;color:var(--ink)}
.hx-tile .hx-ic{width:60px;height:60px;border-radius:18px;padding:14px;box-sizing:border-box;background:var(--card);border:1px solid rgba(var(--rc7),.32);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 2px 6px rgba(var(--rc1),.06);transition:transform .15s,border-color .15s}
html[data-theme=dark] .hx-tile .hx-ic{background:rgb(var(--rc17));border-color:rgba(var(--rc6),.22);box-shadow:none}
.hx-tile:hover .hx-ic,.hx-tile:focus-visible .hx-ic{border-color:rgba(var(--rc7),.7);transform:translateY(-1px)}
.hx-tile .hx-ic .ti{width:32px;height:32px}
.s-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;color:var(--gold3);opacity:.9}
.s-ic svg{width:22px;height:22px}
html[data-theme=dark] .s-ic{color:var(--gold2)}
.s-item,.hx-srow{align-items:center}
.s-item .medal,.hx-srow .medal{margin-inline-end:2px}
.hx-srow .s-ic{margin-inline-start:auto}
.hx-srow .hx-spage{margin-inline-start:6px}
/* reciter photos */
.avatar.ph{padding:0;overflow:hidden;background:var(--card2);box-shadow:0 0 0 2px var(--card),0 0 0 3px rgba(var(--rc5),.65)}
.avatar.ph img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar.mono{font-family:var(--ar);font-weight:700;background:linear-gradient(160deg,var(--g7),var(--g9));color:var(--gold2);box-shadow:0 0 0 2px var(--card),0 0 0 3px rgba(var(--rc5),.55)}
.avatar.mono.eg{background:linear-gradient(160deg,rgb(var(--rc46)),rgb(var(--rc47)));color:rgb(var(--rc48))}
.rec-li .avatar{width:52px;height:52px;font-size:22px}
.avatar.lg{width:76px!important;height:76px!important;font-size:30px}
.hx-rcard .avatar.hx-av{width:64px;height:64px;font-size:26px;margin:0 auto}
/* fadl */
.fadl{margin-top:10px;border-top:1px dashed rgba(var(--rc7),.4);padding-top:8px}
.fadl summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.fadl summary::-webkit-details-marker{display:none}
.fadl-k{flex:none;font-weight:800;color:var(--g7);background:rgba(var(--rc4),.1);border:1px solid rgba(var(--rc4),.25);border-radius:999px;padding:1px 10px}
html[data-theme=dark] .fadl-k{color:var(--gold2);background:rgba(var(--rc6),.08);border-color:rgba(var(--rc6),.25)}
.fadl-r{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fadl summary:after{content:'';margin-inline-start:auto;flex:none;width:8px;height:8px;border-inline-start:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.fadl[open] summary:after{transform:rotate(135deg)}
.fadl-t{font-family:var(--ar);font-size:16.5px;line-height:1.95;margin:8px 0 6px;color:var(--ink)}
.fadl-m{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.fadl-src{color:var(--muted);font-size:12px}
/* hadith of the day */
.hx-hd .hd-title{font-family:var(--ar);font-weight:700;font-size:16px;color:var(--g7);margin:6px 0 2px}
html[data-theme=dark] .hx-hd .hd-title{color:var(--gold2)}
.hd-meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.hd-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 4px;background:var(--card2)}
.hd-chip i{font-style:normal;font-weight:600;font-size:11px;color:var(--muted);background:var(--card);border-radius:999px;padding:0 8px}
.hd-chip.g{color:var(--gt);border-color:rgba(var(--rc4),.35)}
html[data-theme=dark] .hd-chip.g{color:rgb(var(--rc49))}
.hd-exp{margin-top:8px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--card2)}
.hd-exp summary{cursor:pointer;font-weight:800;font-size:13.5px;color:var(--g7)}
html[data-theme=dark] .hd-exp summary{color:var(--gold2)}
.hd-exp p{margin:6px 0;font-family:var(--ar);font-size:16px;line-height:1.95}
.hd-exp ul{margin:4px 0 2px;padding-inline-start:18px;font-size:14px;line-height:1.8}
.hd-sub{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.hd-ref{font-family:var(--ui)!important;font-size:13px!important;color:var(--muted)}
.hd-link{display:inline-block;margin-top:8px;font-size:12px;color:var(--muted)}
/* dedication */
.ded16{padding:26px 20px 22px;background:var(--paper);border:1px solid rgba(var(--rc7),.45);box-shadow:none}
.ded16:before,.ded16:after{left:8px;right:8px;opacity:.7}
.ded16 .orn{display:block;width:min(220px,70%);height:20px;margin:6px auto 10px;color:var(--gold3)}
html[data-theme=dark] .ded16 .orn{color:var(--gold2)}
.ded-h{margin:0;font-family:'Reem Kufi',var(--ar);font-weight:500;font-size:30px;letter-spacing:1px;color:var(--g8);line-height:1.4}
html[data-theme=dark] .ded-h{color:var(--gold2)}
.ded-lines p{margin:0 auto;padding:7px 0;max-width:600px;font-family:var(--ar);font-size:18px;line-height:1.95;color:var(--ink)}
.ded-lines p+p{border-top:1px solid rgba(var(--rc7),.16)}
.ded16 p.ded-sign{font-family:var(--ar)!important;font-size:18.5px;font-weight:700;color:var(--g7);margin:0 auto;max-width:560px}
html[data-theme=dark] .ded16 .ded-sign{color:var(--gold2)}
/* footer + credit */
#siteFoot.site-foot{display:block!important;max-width:1180px;margin:22px auto 0;padding:18px 16px 8px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:13px}
body.mp-on #siteFoot.site-foot{display:none!important}

.ft-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;align-items:center}
.ft-links a{color:var(--gt);font-weight:700}
html[data-theme=dark] .ft-links a{color:var(--gold2)}
.credit{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);opacity:.9}
.cr-ar{font-size:12.5px}.cr-ar b{font-family:var(--ui);font-weight:800;letter-spacing:.3px;color:var(--ink)}
.cr-en{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.4px}
.cr-en span[dir=ltr]{font-family:var(--ui);font-weight:700;letter-spacing:1.6px;font-size:10.5px}
.cr-en i{width:3px;height:3px;border-radius:50%;background:var(--gold);display:inline-block}
/* settings: mushaf themes */
.mt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
@media(min-width:700px){.mt-grid{grid-template-columns:repeat(4,1fr)}}
.mt-opt{font:inherit;color:inherit;text-align:center;cursor:pointer;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.mt-opt b{font-size:13.5px}.mt-opt small{font-size:11.5px;color:var(--muted);line-height:1.4}
.mt-opt.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(var(--rc5),.35)}
.mt-sw{width:100%;height:58px;border-radius:8px;display:grid;place-items:center;font-size:22px;border:2px solid;outline:3px double;outline-offset:-7px}
.mt-sw span{font-family:'Amiri Quran',serif;line-height:1}
.mt-madina{background:rgb(var(--rc50));border-color:rgb(var(--rc5));outline-color:rgba(var(--rc2),.6);color:rgb(var(--rc51))}
.mt-classic{background:#f3e3c0;border-color:#7a4a22;outline-color:rgba(158,47,34,.7);color:#2a1a0c}
.mt-classic span{font-family:'Scheherazade New',serif}
.mt-azhar{background:#f5f8f0;border-color:#1f6b4f;outline-color:rgba(201,162,74,.75);color:#10241b}
.mt-azhar span{font-family:'Noto Naskh Arabic',serif}
.mt-layl{background:#0f1d18;border-color:rgba(201,162,74,.6);outline-color:rgba(201,162,74,.3);color:#e8dfc6}
/* mushaf themes on the reader page */
html[data-mt]{--mt-bg:var(--bg)}
html[data-mt=madina]{--q:'Amiri Quran','Amiri',serif;--mt-paper:rgb(var(--rc50));--mt-frame:rgb(var(--rc5));--mt-frame2:rgba(var(--rc2),.55);--mt-ink:rgb(var(--rc51));--mt-acc:rgb(var(--rc2));--mt-corner:var(--ru4) left top/16px no-repeat,var(--ru5) right top/16px no-repeat,var(--ru6) left bottom/16px no-repeat,var(--ru7) right bottom/16px no-repeat}
html[data-mt=classic]{--q:'Scheherazade New','Amiri Quran',serif;--mt-bg:#ebdcb9;--mt-paper:#f4e4c1;--mt-frame:#7a4a22;--mt-frame2:rgba(158,47,34,.65);--mt-ink:#2a1a0c;--mt-acc:#8b2a1d;--mt-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%238b2a1d' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%238b2a1d'/%3E%3C/svg%3E") left top/16px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%238b2a1d' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%238b2a1d'/%3E%3C/svg%3E") right top/16px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%238b2a1d' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%238b2a1d'/%3E%3C/svg%3E") left bottom/16px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%238b2a1d' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%238b2a1d'/%3E%3C/svg%3E") right bottom/16px no-repeat}
html[data-mt=azhar]{--q:'Noto Naskh Arabic','Amiri Quran',serif;--mt-bg:#e6eee4;--mt-paper:#f6f9f2;--mt-frame:#1f6b4f;--mt-frame2:rgba(201,162,74,.7);--mt-ink:#10241b;--mt-acc:#1f6b4f;--mt-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%231f6b4f' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%231f6b4f'/%3E%3C/svg%3E") left top/16px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%231f6b4f' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%231f6b4f'/%3E%3C/svg%3E") right top/16px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%231f6b4f' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%231f6b4f'/%3E%3C/svg%3E") left bottom/16px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%231f6b4f' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%231f6b4f'/%3E%3C/svg%3E") right bottom/16px no-repeat}
html[data-mt=layl]{--q:'Amiri Quran','Amiri',serif;--mt-bg:#07110d;--mt-paper:#0f1d18;--mt-frame:rgba(201,162,74,.55);--mt-frame2:rgba(201,162,74,.22);--mt-ink:#e8dfc6;--mt-acc:#d9bb6e;--mt-corner:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%23c9a24a'/%3E%3C/svg%3E") left top/16px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%23c9a24a'/%3E%3C/svg%3E") right top/16px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%23c9a24a'/%3E%3C/svg%3E") left bottom/16px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23c9a24a' stroke-width='1.1'%3E%3Cpath d='M10 1.5l2.4 3.4 4.1-.8-.8 4.1 3.4 2.4-3.4 2.4.8 4.1-4.1-.8L10 19.7l-2.4-3.4-4.1.8.8-4.1L.9 10.6l3.4-2.4-.8-4.1 4.1.8z'/%3E%3Ccircle cx='10' cy='10.6' r='3'/%3E%3C/g%3E%3Ccircle cx='10' cy='10.6' r='1.2' fill='%23c9a24a'/%3E%3C/svg%3E") right bottom/16px no-repeat}
html[data-mt] .mp{background:var(--mt-bg)}
html[data-mt] .page{background:var(--mt-paper);border-color:var(--mt-frame);outline-color:var(--mt-frame2);color:var(--mt-ink)}
html[data-mt] .page:after{content:'';position:absolute;inset:4px;pointer-events:none;background:var(--mt-corner)}
html[data-mt] .page .qtext,html[data-mt] .page .basmala{color:var(--mt-ink)}
html[data-mt] .page .surah-head{color:var(--mt-acc);border-color:var(--mt-frame)}
html[data-mt] .page .anum{color:var(--mt-acc)}
html[data-mt] .page .page-head,html[data-mt] .page .page-foot{color:var(--mt-acc);opacity:.85}
html[data-mt=layl] .page .surah-head{background:linear-gradient(90deg,transparent,rgba(201,162,74,.12),transparent)}
html[data-mt=layl] .mp .mp-bar,html[data-mt=layl] .mp .mp-foot{color:#e8dfc6}
html[data-mt=layl] .mp .mp-bar .btn,html[data-mt=layl] .mp .mp-foot .btn,html[data-mt=layl] .mp .chip{color:#e8dfc6;border-color:rgba(201,162,74,.35);background:rgba(255,255,255,.03)}
html[data-mt=layl] .mp .mp-bar .chip.on{background:rgba(201,162,74,.2)}
html[data-mt=layl] .mp-info{color:#bfb59b}
html[data-mt=layl] .ayah.sel{background:rgba(201,162,74,.22)}
.mt-btn .ico{width:18px;height:18px}
@media(max-width:420px){.mp .mp-bar{gap:4px}.mp .mp-bar .btn.sm{padding:6px 7px}}
.credits{margin:8px 0 0;padding-inline-start:18px;font-size:13px;line-height:1.9}

html[data-mt=layl] .mp .mp-bar{background:#0f1d18;border-color:rgba(201,162,74,.25);box-shadow:none}
html[data-mt=layl] .mp .mp-bar .title{color:#e8dfc6}

.hx-dk>*{min-width:0}.hx-dhikr{min-width:0;max-width:100%}.fadl,.fadl summary{min-width:0;max-width:100%}
@media(max-width:700px){.hx-dk{grid-template-columns:minmax(0,1fr)}}

/* v18: safe areas (notch / home bar / landscape) */
.topbar{padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right))}
.tabbar{padding-left:calc(4px + env(safe-area-inset-left));padding-right:calc(4px + env(safe-area-inset-right))}
main{padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}
.mp{padding-left:calc(8px + env(safe-area-inset-left));padding-right:calc(8px + env(safe-area-inset-right))}
#siteFoot.site-foot{padding-bottom:calc(8px + env(safe-area-inset-bottom))}

/* dedication v20 — compact */
.ded16{padding:16px 16px 13px}
.ded16 .orn{height:14px;margin:3px auto 6px;width:min(160px,55%)}
.ded-h{font-size:22px;line-height:1.3}
.ded16 .ded-about p{font-size:15px;margin:2px auto}
.ded16 .ded-lbl{font-size:13px;margin-bottom:2px}
.ded-lines p{font-size:15.5px;line-height:1.75;padding:3px 0;max-width:560px}
.ded-lines p+p{border-top:0}
.ded16 p.ded-sign{font-size:15.5px;line-height:1.7;max-width:520px}
@media (max-width:480px){.ded16{padding:14px 12px 11px}.ded-lines p{font-size:15px}.ded-h{font-size:20px}}


/* ======================================================================
   v21 — «luxury mushaf» refinement layer (visual only)
   ====================================================================== */
:root{
  --bg:rgb(var(--rc52));--card:rgb(var(--rc13));--card2:rgb(var(--rc14));--paper:rgb(var(--rc53));
  --gl:rgba(var(--rc7),.22);--gl2:rgba(var(--rc7),.42);
  --sh1:0 1px 2px rgba(var(--rc1),.05),0 6px 16px -10px rgba(var(--rc1),.22);
  --sh2:0 2px 4px rgba(var(--rc1),.06),0 16px 32px -18px rgba(var(--rc1),.34);
  --sh3:0 24px 48px -24px rgba(var(--rc0),.55),0 4px 10px -4px rgba(var(--rc0),.25);
  --ease:cubic-bezier(.2,.7,.2,1);
  --rl:22px;--rm:16px;--rs:12px;
}
html[data-theme=dark]{
  --bg:rgb(var(--rc54));--card:rgb(var(--rc55));--card2:rgb(var(--rc56));--paper:rgb(var(--rc57));
  --gl:rgba(var(--rc6),.13);--gl2:rgba(var(--rc6),.32);
  --sh1:0 1px 2px rgba(0,0,0,.25),0 8px 18px -12px rgba(0,0,0,.6);
  --sh2:0 2px 4px rgba(0,0,0,.3),0 18px 34px -18px rgba(0,0,0,.7);
  --sh3:0 24px 48px -22px rgba(0,0,0,.8),0 4px 10px -4px rgba(0,0,0,.5);
}
html[data-theme=dark] .hx{--hs:var(--card);--hs2:var(--card2);--hl:var(--gl)}
.hx{--hs:var(--card);--hl:var(--gl)}
body{background:var(--bg);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.bgpat{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23a9832f' stroke-opacity='0.075' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Cpath d='M0 0L14 14M64 0L50 14M0 64L14 50M64 64L50 50M32 0V9M32 64V55M0 32H9M64 32H55'/%3E%3Crect x='-8' y='-8' width='16' height='16' transform='rotate(45 0 0)'/%3E%3Crect x='56' y='-8' width='16' height='16' transform='rotate(45 64 0)'/%3E%3Crect x='-8' y='56' width='16' height='16' transform='rotate(45 0 64)'/%3E%3Crect x='56' y='56' width='16' height='16' transform='rotate(45 64 64)'/%3E%3C/g%3E%3C/svg%3E");background-size:64px 64px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 420px,rgba(0,0,0,.25) 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 420px,rgba(0,0,0,.25) 100%)}
html[data-theme=dark] .bgpat{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e7cd85' stroke-opacity='0.045' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Cpath d='M0 0L14 14M64 0L50 14M0 64L14 50M64 64L50 50M32 0V9M32 64V55M0 32H9M64 32H55'/%3E%3Crect x='-8' y='-8' width='16' height='16' transform='rotate(45 0 0)'/%3E%3Crect x='56' y='-8' width='16' height='16' transform='rotate(45 64 0)'/%3E%3Crect x='-8' y='56' width='16' height='16' transform='rotate(45 0 64)'/%3E%3Crect x='56' y='56' width='16' height='16' transform='rotate(45 64 64)'/%3E%3C/g%3E%3C/svg%3E")}
::selection{background:rgba(var(--rc5),.35)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:10px}
#app>*{animation:v21in .26s var(--ease) both}
@keyframes v21in{from{opacity:0}}

/* svg icon sizing in chrome */
.icon-btn svg{width:19px;height:19px;flex:none}
.pl-btn svg{width:20px;height:20px;display:block;margin:auto}
.tabbar a i svg{width:22px;height:22px;display:block}
.avatar svg.ico{width:24px;height:24px}
.avatar svg.ti{width:30px;height:30px}
.act i svg{width:22px;height:22px;display:block}
.btn svg.ico{width:17px;height:17px;flex:none}
.li svg.ico{width:18px;height:18px;flex:none;color:var(--gold3)}

/* ---------- top bar ---------- */
.topbar{background:linear-gradient(180deg,rgb(var(--rc58)),rgb(var(--rc59)));border-bottom:0;box-shadow:0 10px 24px -16px rgba(0,0,0,.6);isolation:isolate}
.topbar::before{content:'';position:absolute;inset:0;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e7cd85' stroke-opacity='1' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Cpath d='M0 0L14 14M64 0L50 14M0 64L14 50M64 64L50 50M32 0V9M32 64V55M0 32H9M64 32H55'/%3E%3Crect x='-8' y='-8' width='16' height='16' transform='rotate(45 0 0)'/%3E%3Crect x='56' y='-8' width='16' height='16' transform='rotate(45 64 0)'/%3E%3Crect x='-8' y='56' width='16' height='16' transform='rotate(45 0 64)'/%3E%3Crect x='56' y='56' width='16' height='16' transform='rotate(45 64 64)'/%3E%3C/g%3E%3C/svg%3E");background-size:56px 56px;opacity:.07;pointer-events:none}
.topbar::after{content:'';position:absolute;inset-inline:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--rc6),.75) 20%,rgba(var(--rc6),.75) 80%,transparent);pointer-events:none}
.brand-mark{border-radius:13px;box-shadow:0 0 0 1px rgba(var(--rc6),.7),0 0 0 4px rgba(var(--rc6),.12),0 6px 14px -6px rgba(0,0,0,.6)}
.brand-txt b{font-size:25px;letter-spacing:.5px}
.brand-txt small{letter-spacing:.3px;color:rgba(var(--rc21),.78)}
.icon-btn{background:rgba(255,255,255,.05);border-color:rgba(var(--rc6),.3);border-radius:13px;height:40px;min-width:40px;color:rgb(var(--rc60));transition:background .18s var(--ease),border-color .18s,transform .15s}
.icon-btn:hover{background:rgba(var(--rc6),.12);border-color:rgba(var(--rc6),.55)}
.icon-btn:active{transform:scale(.94)}
.topnav a{transition:background .18s var(--ease),color .18s;font-weight:500}
.topnav a.on{background:rgba(var(--rc6),.14);box-shadow:inset 0 0 0 1px rgba(var(--rc6),.35)}

/* ---------- bottom tab bar ---------- */
.tabbar{background:rgba(var(--rc22),.94);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-top:0;padding:7px 6px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px -18px rgba(0,0,0,.6)}
.tabbar::before{content:'';position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--rc6),.6) 25%,rgba(var(--rc6),.6) 75%,transparent)}
.tabbar a{position:relative;gap:3px;padding:2px 0;color:rgba(var(--rc61),.72);font-size:11px;font-weight:500;letter-spacing:.2px;transition:color .2s var(--ease)}
.tabbar a i{display:grid;place-items:center;width:54px;height:30px;border-radius:999px;transition:background .22s var(--ease),transform .22s var(--ease)}
.tabbar a.on{color:var(--gold2);font-weight:700}
.tabbar a.on i{background:rgba(var(--rc6),.15);box-shadow:inset 0 0 0 1px rgba(var(--rc6),.28);transform:none}
.tabbar a.on::before{content:'';position:absolute;top:-7px;left:50%;width:22px;height:2px;margin-left:-11px;border-radius:0 0 3px 3px;background:var(--gold2)}
.tabbar a:active i{transform:scale(.9)}

/* ---------- section heads ---------- */
.hx-sec{margin-top:36px}
.hx-head{border-bottom:0;position:relative;padding-bottom:12px;margin-bottom:14px}
.hx-head::after{content:'';position:absolute;inset-inline:0;bottom:0;height:1px;background:linear-gradient(to left,rgba(var(--rc5),.65),rgba(var(--rc5),.18) 45%,transparent)}
html[dir=ltr] .hx-head::after{background:linear-gradient(to right,rgba(var(--rc5),.65),rgba(var(--rc5),.18) 45%,transparent)}
.hx-head h2{font-family:var(--kufi);font-weight:700;font-size:21px;letter-spacing:.2px;display:flex;align-items:center;gap:9px;color:var(--g8)}
html[data-theme=dark] .hx-head h2{color:rgb(var(--rc62))}
.hx-head h2::before{content:'';width:15px;height:15px;flex:none;background:var(--ru8) center/contain no-repeat}
html[data-theme=dark] .hx-head h2::before{background-image:var(--ru9)}
.hx-head p{font-size:12.5px;margin-top:3px;padding-inline-start:24px}
.hx-more{padding:5px 10px;border-radius:999px;background:rgba(var(--rc5),.10);transition:background .18s var(--ease)}
.hx-more:hover{background:rgba(var(--rc5),.2)}
.sec-title h2{display:flex;align-items:center;gap:9px;color:var(--g8)}
html[data-theme=dark] .sec-title h2{color:rgb(var(--rc62))}
.sec-title h2::before{content:'';width:16px;height:16px;flex:none;margin:0;background:var(--ru10) center/contain no-repeat}
html[data-theme=dark] .sec-title h2::before{background-image:var(--ru11)}

/* ---------- hero ---------- */
.hx-hero{border-radius:26px;padding:30px 24px 24px;border:1px solid rgba(var(--rc6),.32);
  background:radial-gradient(120% 70% at 50% -10%,rgb(var(--rc63)) 0%,rgb(var(--rc64)) 42%,rgb(var(--rc59)) 70%,rgb(var(--rc65)) 100%);box-shadow:var(--sh3)}
html[data-theme=dark] .hx-hero{background:radial-gradient(120% 70% at 50% -10%,rgb(var(--rc66)) 0%,rgb(var(--rc67)) 45%,rgb(var(--rc68)) 72%,rgb(var(--rc69)) 100%);border-color:rgba(var(--rc6),.3)}
.hx-hero::before{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23e7cd85' stroke-opacity='0.16' stroke-width='1.2'%3E%3Ccircle cx='120' cy='120' r='112'/%3E%3Ccircle cx='120' cy='120' r='104'/%3E%3Crect x='60' y='60' width='120' height='120' transform='rotate(0 120 120)'/%3E%3Crect x='60' y='60' width='120' height='120' transform='rotate(22.5 120 120)'/%3E%3Crect x='60' y='60' width='120' height='120' transform='rotate(45 120 120)'/%3E%3Crect x='60' y='60' width='120' height='120' transform='rotate(67.5 120 120)'/%3E%3Ccircle cx='120' cy='120' r='46'/%3E%3Cpath d='M120.00,80.00 L129.49,97.09 L148.28,91.72 L142.91,110.51 L160.00,120.00 L142.91,129.49 L148.28,148.28 L129.49,142.91 L120.00,160.00 L110.51,142.91 L91.72,148.28 L97.09,129.49 L80.00,120.00 L97.09,110.51 L91.72,91.72 L110.51,97.09Z'/%3E%3Ccircle cx='120' cy='120' r='14'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e7cd85' stroke-opacity='0.09' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Cpath d='M0 0L14 14M64 0L50 14M0 64L14 50M64 64L50 50M32 0V9M32 64V55M0 32H9M64 32H55'/%3E%3Crect x='-8' y='-8' width='16' height='16' transform='rotate(45 0 0)'/%3E%3Crect x='56' y='-8' width='16' height='16' transform='rotate(45 64 0)'/%3E%3Crect x='-8' y='56' width='16' height='16' transform='rotate(45 0 64)'/%3E%3Crect x='56' y='56' width='16' height='16' transform='rotate(45 64 64)'/%3E%3C/g%3E%3C/svg%3E");background-size:300px 300px,64px 64px;background-position:calc(100% + 90px) -90px,center;background-repeat:no-repeat,repeat;
  -webkit-mask-image:radial-gradient(140% 100% at 50% 0%,#000 30%,rgba(0,0,0,.35) 100%);mask-image:radial-gradient(140% 100% at 50% 0%,#000 30%,rgba(0,0,0,.35) 100%)}
.hx-hero::after{content:'';position:absolute;inset:9px;border:1px solid rgba(var(--rc6),.3);border-radius:18px;pointer-events:none;
  background:var(--ru12) left 5px top 5px/15px no-repeat,var(--ru13) right 5px top 5px/15px no-repeat,var(--ru14) left 5px bottom 5px/15px no-repeat,var(--ru15) right 5px bottom 5px/15px no-repeat}
.hx-dates{font-size:12.5px;letter-spacing:.2px;color:rgba(var(--rc41),.7)}
.hx-dates b{display:inline-block;padding:1px 10px;margin-inline-start:2px;border-radius:999px;background:rgba(var(--rc6),.12);border:1px solid rgba(var(--rc6),.28)}
.hx-eyebrow{font-family:var(--kufi);font-weight:500;font-size:14px;letter-spacing:1px;margin:16px 0 4px;gap:10px}
.hx-eyebrow::before{background:linear-gradient(to left,rgba(var(--rc6),.6),transparent)}
.hx-eyebrow::after{background:linear-gradient(to right,rgba(var(--rc6),.6),transparent)}
.hx-eyebrow span{display:inline-flex;align-items:center;gap:9px}
.hx-eyebrow span::before,.hx-eyebrow span::after{content:'';width:5px;height:5px;transform:rotate(45deg);background:var(--gold2);opacity:.85}
.hx-ayah{text-shadow:0 1px 0 rgba(0,0,0,.18)}
.hx-ref{font-family:var(--ar);font-size:15px;letter-spacing:.3px}
.hx-actions{gap:9px;margin-top:20px}
.hx-btn{height:44px;border-radius:13px;transition:background .18s var(--ease),border-color .18s,transform .15s var(--ease),box-shadow .18s}
.hx-btn:active{transform:scale(.97)}
.hx-hero .hx-btn:not(.primary){background:rgba(255,255,255,.045);border-color:rgba(var(--rc6),.3);color:rgb(var(--rc70))}
.hx-hero .hx-btn:not(.primary):hover{background:rgba(var(--rc6),.12);border-color:rgba(var(--rc6),.5)}
.hx-hero .hx-btn:not(.primary) .ico{color:var(--gold2)}
.hx-btn.primary{background:linear-gradient(180deg,rgb(var(--rc71)),rgb(var(--rc5)) 60%,rgb(var(--rc72)));border-color:rgb(var(--rc73));color:rgb(var(--rc74));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 18px -10px rgba(0,0,0,.6)}
.hx-btn.primary:hover{background:linear-gradient(180deg,rgb(var(--rc75)),rgb(var(--rc76)) 60%,rgb(var(--rc77)))}

/* ---------- cards: one family ---------- */
.hx-card,.card,.hcard,.li,.s-item,.hx-srow,.hx-rcard,.hx-search,.cont-wrap,.hx-wide,.act{border-color:var(--gl);box-shadow:var(--sh1)}
.hx-card,.card{border-radius:var(--rl)}
.hx-card,.card,.hcard,.li,.s-item,.hx-srow,.hx-rcard,.hx-wide,.act,.hx-tile .hx-ic{transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s,background .2s}
@media (hover:hover){
 .hx-prayer:hover,.hx-srow:hover,.s-item:hover,.li:hover,.hx-rcard:hover,.hx-wide:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--gl2)}
}
.hx-srow:active,.s-item:active,.li:active,.hx-last:active,.hx-wide:active,.act:active,.hx-prayer:active{transform:scale(.985)}
.hx-tile:active .hx-ic{transform:scale(.93)}

/* prayer card */
.hx-prayer{position:relative;overflow:hidden;padding:18px 18px 16px;border-radius:var(--rl)}
.hx-prayer::before{content:'';position:absolute;top:0;inset-inline:22px;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.hx-pr-city{color:var(--ink);font-size:13.5px}
.hx-pr-next{font-size:28px;letter-spacing:.2px}
.hx-pr-cd .cd-time{font-size:28px;font-weight:800;color:var(--g8)}
html[data-theme=dark] .hx-pr-cd .cd-time{color:rgb(var(--rc70))}
.hx-strip{border-color:var(--gl);border-radius:14px;background:var(--card2)}
.hx-strip>div{border-color:var(--gl);padding:10px 2px 9px}
.hx-strip>div.on{background:linear-gradient(180deg,rgb(var(--rc78)),rgb(var(--rc1)));box-shadow:inset 0 -2px 0 var(--gold2)}

/* continue reading */
.hx-last{position:relative;overflow:hidden;margin-top:14px;padding:16px 18px;border-radius:var(--rl);
  background:linear-gradient(135deg,rgb(var(--rc1)),rgb(var(--rc2)));border:1px solid rgba(var(--rc6),.38);color:rgb(var(--rc52));box-shadow:var(--sh2)}
.hx-last::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e7cd85' stroke-opacity='0.55' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Cpath d='M0 0L14 14M64 0L50 14M0 64L14 50M64 64L50 50M32 0V9M32 64V55M0 32H9M64 32H55'/%3E%3Crect x='-8' y='-8' width='16' height='16' transform='rotate(45 0 0)'/%3E%3Crect x='56' y='-8' width='16' height='16' transform='rotate(45 64 0)'/%3E%3Crect x='-8' y='56' width='16' height='16' transform='rotate(45 0 64)'/%3E%3Crect x='56' y='56' width='16' height='16' transform='rotate(45 64 64)'/%3E%3C/g%3E%3C/svg%3E") 0 0/56px 56px;opacity:.06;pointer-events:none}
.hx-last::after{content:'';position:absolute;inset:6px;border:1px solid rgba(var(--rc6),.18);border-radius:16px;pointer-events:none}
.hx-last>*{position:relative}
.hx-last small{color:var(--gold2);font-weight:700;letter-spacing:.3px}
.hx-last b{font-family:var(--ar);font-size:18px;color:rgb(var(--rc79))}
.hx-last .hx-ic{width:48px;height:48px;border-radius:50%;background:rgba(var(--rc6),.12);border:1px solid rgba(var(--rc6),.5);color:var(--gold2);box-shadow:0 0 0 4px rgba(var(--rc6),.07)}
html[data-theme=dark] .hx-last{background:linear-gradient(135deg,rgb(var(--rc80)),rgb(var(--rc81)))}

/* section tiles */
.hx-tile{font-weight:600;font-size:12.5px;color:var(--ink)}
.hx-tile .hx-ic{width:62px;height:62px;border-radius:20px;background:linear-gradient(180deg,rgb(var(--rc82)),rgb(var(--rc83)));border:1px solid rgba(var(--rc7),.4);
  box-shadow:inset 0 0 0 3px rgb(var(--rc84)),inset 0 0 0 4px rgba(var(--rc5),.22),0 8px 16px -10px rgba(var(--rc1),.35)}
html[data-theme=dark] .hx-tile .hx-ic{background:linear-gradient(180deg,rgb(var(--rc85)),rgb(var(--rc86)));border-color:rgba(var(--rc6),.3);box-shadow:inset 0 0 0 3px rgb(var(--rc87)),inset 0 0 0 4px rgba(var(--rc6),.12),0 8px 16px -10px rgba(0,0,0,.7)}
@media (hover:hover){.hx-tile:hover .hx-ic{transform:translateY(-2px);border-color:rgba(var(--rc7),.75)}}

/* search */
.hx-search{height:50px;border-radius:var(--rm);background:var(--card)}
.hx-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(var(--rc5),.14),var(--sh1)}
.hx-search .ico{color:var(--gold3)}

/* surah rows */
.hx-srow,.s-item{border-radius:var(--rm);background:var(--card);padding:11px 12px}
.hx-sname b,.s-name{font-family:var(--ar);letter-spacing:.2px}
.s-name{font-size:20px}
.medal{filter:drop-shadow(0 2px 3px rgba(var(--rc7),.18))}
.s-end{font-variant-numeric:tabular-nums}

/* reciters */
.hx-rcard{border-radius:var(--rl);background:var(--card)}
.hx-av,.hx-rcard img{box-shadow:0 0 0 2px var(--card),0 0 0 3px rgba(var(--rc5),.55),0 8px 14px -8px rgba(var(--rc1),.45)}
.hx-rplay{border-radius:11px;border-color:var(--gl2);transition:background .18s var(--ease),transform .15s}
.hx-rplay:active{transform:scale(.96)}

/* adhkar */
.hx-seg{border-radius:14px;background:var(--card2);border-color:var(--gl)}
.hx-seg button{border-radius:11px;transition:background .2s var(--ease),color .2s}
.hx-seg button.on{background:var(--g8);color:rgb(var(--rc52));box-shadow:0 4px 10px -6px rgba(var(--rc1),.6)}
html[data-theme=dark] .hx-seg button.on{background:var(--gold);color:rgb(var(--rc25))}
.hx-seg button.on .ico{color:var(--gold2)}
html[data-theme=dark] .hx-seg button.on .ico{color:rgb(var(--rc25))}
.hx-dhikr{position:relative}
.hx-dtext{font-size:18px}
.hx-tap{background:linear-gradient(180deg,rgb(var(--rc88)),rgb(var(--rc1)));border-color:rgb(var(--rc1));box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 6px 12px -8px rgba(var(--rc1),.7);transition:transform .15s var(--ease)}
.hx-tap:active{transform:scale(.95)}
.hx-wide{border-radius:var(--rm)}
.hx .counter-btn{background:radial-gradient(circle at 50% 35%,rgb(var(--rc88)),rgb(var(--rc1)) 70%);box-shadow:0 0 0 4px var(--card),0 0 0 5px rgba(var(--rc5),.45),0 12px 22px -12px rgba(var(--rc1),.8);transition:transform .12s var(--ease)}
.hx .counter-btn:active{transform:scale(.95)}

/* dedication */
.ded16{background:var(--paper);border-color:rgba(var(--rc7),.5);box-shadow:inset 0 0 0 5px var(--paper),inset 0 0 0 6px rgba(var(--rc5),.28),var(--sh1)}

/* buttons/chips */
.btn{border-radius:13px;transition:transform .15s var(--ease),filter .18s,box-shadow .18s}
.btn:not(.ghost):not(.gold){background:linear-gradient(180deg,rgb(var(--rc88)),rgb(var(--rc2)));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 14px -10px rgba(var(--rc1),.8)}
.btn.gold{background:linear-gradient(180deg,rgb(var(--rc71)),rgb(var(--rc5)) 60%,rgb(var(--rc72)));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -10px rgba(var(--rc89),.7);color:rgb(var(--rc74))}
.btn.ghost{border-color:var(--gl2)}
.chip{transition:background .18s var(--ease),border-color .18s,color .18s;border-color:var(--gl2)}
.chip.on{background:var(--g8);border-color:var(--g8);color:rgb(var(--rc52))}
.avatar{background:linear-gradient(160deg,rgb(var(--rc88)),rgb(var(--rc59)));color:var(--gold2);box-shadow:inset 0 0 0 1px rgba(var(--rc6),.55),0 6px 12px -8px rgba(var(--rc1),.7)}
.act{background:var(--card);border-radius:var(--rm)}
.act i{color:var(--g7)}
html[data-theme=dark] .act i{color:var(--gold2)}
.sheet{border-radius:26px 26px 0 0;box-shadow:0 -20px 50px -20px rgba(0,0,0,.5)}
.toast{box-shadow:0 12px 28px -12px rgba(0,0,0,.6)}

/* ---------- reader ---------- */
.reader-bar{background:color-mix(in srgb,var(--card) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--gl);border-radius:var(--rm);box-shadow:var(--sh1)}
.page{box-shadow:inset 0 0 60px rgba(var(--rc5),.06),0 2px 6px rgba(var(--rc1),.06),0 28px 50px -30px rgba(var(--rc1),.5)}
html[data-theme=dark] .page{box-shadow:0 28px 50px -26px rgba(0,0,0,.85)}
.surah-head{font-family:var(--kufi);font-weight:700;letter-spacing:.5px}

/* ---------- player ---------- */
.player{border-radius:22px;background:linear-gradient(135deg,rgba(var(--rc90),.97),rgba(var(--rc91),.97));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(var(--rc6),.42);box-shadow:0 18px 40px -16px rgba(0,0,0,.65);overflow:visible}
.pl-progress{height:4px;margin:10px 16px 0;border-radius:4px;background:rgba(255,255,255,.14);position:relative}
.pl-progress div{position:relative;border-radius:4px;background:linear-gradient(90deg,rgb(var(--rc5)),rgb(var(--rc6)))}
.pl-progress div::after{content:'';position:absolute;top:50%;inset-inline-end:-6px;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:rgb(var(--rc92));box-shadow:0 0 0 3px rgba(var(--rc6),.22)}
.pl-row{padding:8px 10px 10px;gap:4px}
.pl-btn{width:40px;height:40px;color:rgb(var(--rc93));transition:background .18s var(--ease),transform .15s}
.pl-btn:active{transform:scale(.9)}
.pl-main{width:46px;height:46px;background:linear-gradient(180deg,rgb(var(--rc94)),rgb(var(--rc5)));color:rgb(var(--rc25));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -6px rgba(0,0,0,.6)}
.pl-main svg{width:22px;height:22px}
.pl-info{padding-inline-start:6px}
.pl-info b{font-family:var(--ar);font-size:16px;color:rgb(var(--rc95))}
.pl-info small{color:var(--gold2);opacity:.85}

/* footer */
#siteFoot.site-foot{border-top:0;position:relative}
#siteFoot.site-foot::before{content:'';position:absolute;top:0;left:50%;width:min(320px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--gold),transparent)}

@media (max-width:380px){.hx-hero{padding:26px 16px 20px}.hx-tile .hx-ic{width:56px;height:56px}}
@media (prefers-reduced-motion:reduce){#app>*{animation:none!important}*{transition:none!important}}

.hx-hero{padding:30px 20px 22px}
.hx-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
.hx-actions .hx-btn{padding:0 10px;min-width:0}
@media(min-width:620px){.hx-actions .hx-btn{padding:0 18px}}

.badge.new{background:var(--g7)!important;color:rgb(var(--rc26))!important;box-shadow:inset 0 0 0 1px rgba(var(--rc6),.45)}
html[data-theme=dark] .badge.new{background:var(--gold)!important;color:rgb(var(--rc25))!important}

.avatar{--ti-m:rgb(var(--rc6));--ti-d:rgb(var(--rc5));--ti-b:rgb(var(--rc16))}
.btn svg.ico{margin:0}

.hx-prayer{justify-content:space-between}
@media(min-width:1000px){.hx-pr-main{margin-top:0}}

/* v22 — continuous play / shuffle controls */
.pl-top{display:flex;align-items:center;gap:6px;padding:6px 8px 0}
.pl-top .pl-progress{flex:1;margin:0 4px}
.pl-mini{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:none;color:rgba(var(--rc93),.5);cursor:pointer;position:relative;display:grid;place-items:center;transition:color .18s var(--ease),background .18s var(--ease),transform .15s}
.pl-mini svg{width:17px;height:17px;display:block}
.pl-mini:hover{background:rgba(255,255,255,.08)}
.pl-mini:active{transform:scale(.9)}
.pl-mini.on{color:var(--gold2)}
.pl-mini.on::after{content:'';position:absolute;bottom:2px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold2)}
.pl-mini.dis{opacity:.28;pointer-events:none}
.pl-mini.dis::after{display:none}
.ps-modes{margin:6px 0 12px;padding:12px;border:1px solid var(--line,rgba(var(--rc5),.35));border-radius:16px;background:rgba(var(--rc5),.06)}
.ps-mt{font-size:13px;font-weight:600;margin-bottom:8px;opacity:.85}
.ps-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ps-seg button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;border-radius:12px;border:1px solid rgba(var(--rc5),.35);background:transparent;color:inherit;font:inherit;font-size:12.5px;cursor:pointer;transition:background .18s var(--ease),border-color .18s,color .18s}
.ps-seg button svg{width:20px;height:20px}
.ps-seg button.on{background:rgb(var(--rc2));border-color:rgb(var(--rc5));color:rgb(var(--rc96))}
.ps-shuf{margin-top:8px;width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid rgba(var(--rc5),.35);background:transparent;color:inherit;font:inherit;font-size:13.5px;cursor:pointer;transition:background .18s var(--ease),border-color .18s}
.ps-shuf svg{width:20px;height:20px;flex:none}
.ps-shuf span{flex:1;text-align:start}
.ps-shuf .ps-dot{width:34px;height:20px;border-radius:20px;background:rgba(128,128,128,.35);position:relative;flex:none;transition:background .18s}
.ps-shuf .ps-dot::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:inset-inline-start .18s var(--ease)}
.ps-shuf.on{border-color:rgb(var(--rc5));background:rgba(var(--rc2),.12)}
.ps-shuf.on .ps-dot{background:rgb(var(--rc2))}
.ps-shuf.on .ps-dot::after{inset-inline-start:16px;background:rgb(var(--rc6))}
.ps-hint{margin-top:8px}
#rsl .s-item.on{border-color:var(--gold,rgb(var(--rc5)));box-shadow:0 0 0 2px rgba(var(--rc5),.25)}
@media(prefers-reduced-motion:reduce){.pl-mini,.ps-seg button,.ps-shuf,.ps-dot::after{transition:none}}

/* v23 — continuous-play / shuffle pills at the top of each audio section */
.plt-sec{flex-wrap:wrap;row-gap:8px}
.plt{display:inline-flex;align-items:center;gap:6px;flex:none;margin-inline-start:auto}
.plt button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;border:1.5px solid rgba(var(--rc2),.38);background:transparent;color:var(--g7);font:700 13px/1 var(--ui);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background .18s var(--ease,ease),border-color .18s,color .18s,transform .12s}
.plt button:active{transform:scale(.96)}
.plt button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.plt .ico{width:17px;height:17px;flex:none}
.plt-sw{position:relative;width:24px;height:14px;border-radius:99px;border:1.5px solid currentColor;opacity:.75;flex:none;transition:background .18s,border-color .18s}
.plt-sw::after{content:'';position:absolute;top:1.5px;inset-inline-start:1.5px;width:8px;height:8px;border-radius:50%;background:currentColor;transition:inset-inline-start .18s var(--ease,ease),background .18s}
.plt-auto.on{background:linear-gradient(180deg,rgb(var(--rc97)),rgb(var(--rc1)));border-color:rgb(var(--rc5));color:rgb(var(--rc8));box-shadow:0 2px 8px rgba(var(--rc1),.22),inset 0 1px 0 rgba(var(--rc6),.25)}
.plt-auto.on .ico{color:rgb(var(--rc6))}
.plt-auto.on .plt-sw{background:rgb(var(--rc5));border-color:rgb(var(--rc5));opacity:1}
.plt-auto.on .plt-sw::after{inset-inline-start:11.5px;background:rgb(var(--rc9))}
.plt-auto.one .plt-sw{background:transparent;border-color:rgb(var(--rc6))}
.plt-auto.one .plt-sw::after{inset-inline-start:6px;background:rgb(var(--rc6))}
.plt-shuf{padding:0 10px}
.plt-shuf.on{background:rgba(var(--rc5),.16);border-color:rgb(var(--rc5));color:var(--g8)}
.plt-shuf.on .ico{color:var(--gold3)}
html[data-theme=dark] .plt button{border-color:rgba(var(--rc6),.35);color:rgb(var(--rc6))}
html[data-theme=dark] .plt-auto.on{background:linear-gradient(180deg,rgb(var(--rc98)),rgb(var(--rc2)));border-color:rgb(var(--rc6));color:rgb(var(--rc9))}
html[data-theme=dark] .plt-shuf.on{background:rgba(var(--rc6),.16);color:rgb(var(--rc62))}
html[data-theme=dark] .plt-shuf.on .ico{color:rgb(var(--rc6))}
.plt.compact button{height:30px;padding:0 10px;font-size:12px}
.plt.compact .ico{width:15px;height:15px}
.hx-head.plt-sec{align-items:center}
.hx-head.plt-sec>div:first-child{flex:1 1 100%}
.hx-head.plt-sec .plt{margin-inline-start:0}
.hx-head.plt-sec .hx-more{margin-inline-start:auto}
@media(max-width:360px){.plt-shuf .plt-l{display:none}.plt-shuf{padding:0 9px}}
@media(prefers-reduced-motion:reduce){.plt button,.plt-sw,.plt-sw::after{transition:none}}

/* ===================== v24 — big screens (laptop / desktop / TV / tablet landscape) ===================== */
/* phones (<768px) are untouched by everything below except the hidden full-screen button */
#fsBtn[hidden]{display:none!important}
@media(max-width:767px){#fsBtn{display:none!important}}
#fsBtn .ico{width:18px;height:18px}
#fsBtn .fs-off{display:none}
:fullscreen #fsBtn .fs-on,:-webkit-full-screen #fsBtn .fs-on{display:none}
:fullscreen #fsBtn .fs-off,:-webkit-full-screen #fsBtn .fs-off{display:block}
html.is-fs #fsBtn .fs-on{display:none}html.is-fs #fsBtn .fs-off{display:block}

@media(min-width:768px){
  :root{--pad:clamp(20px,3.4vw,76px)}
  main{max-width:none;padding-top:clamp(16px,1.6vw,34px);padding-left:calc(var(--pad) + env(safe-area-inset-left));padding-right:calc(var(--pad) + env(safe-area-inset-right))}
  .site-foot,#siteFoot.site-foot{max-width:none!important;margin-left:var(--pad)!important;margin-right:var(--pad)!important}
  .topbar{padding-left:calc(var(--pad) + env(safe-area-inset-left));padding-right:calc(var(--pad) + env(safe-area-inset-right))}
  /* TV remotes / keyboards: a clear gold focus ring */
  a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
  /* audio lists become grids */
  #rList,#axL,#hChapters,.ax-grp>.list,#rfL .list,#qBody .list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:10px;align-items:stretch}
  #rList>*,#axL>*,#hChapters>*,.ax-grp>.list>*,#rfL .list>*{min-width:0;height:100%}
  #rList>.skel,#rList>p,#rfL .list>p{grid-column:1/-1}
  .ax-grp{margin-bottom:18px}
  .surah-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
  .chips.scroll-x{flex-wrap:wrap}
}

@media(min-width:1000px){
  .topbar{gap:clamp(12px,1.4vw,28px);min-height:clamp(62px,4.4vw,84px)}
  .brand-mark{width:clamp(40px,2.6vw,52px);height:clamp(40px,2.6vw,52px)}
  .brand-txt b{font-size:clamp(24px,1.5vw,32px)}
  .brand-txt small{font-size:clamp(11px,.62vw,13.5px)}
  .topnav{gap:clamp(2px,.3vw,8px)}
  .topnav a{font-size:clamp(14.5px,.86vw,18px);padding:clamp(7px,.45vw,10px) clamp(11px,.8vw,18px)}
  .icon-btn{height:clamp(38px,2.4vw,48px);min-width:clamp(38px,2.4vw,48px)}
  .icon-btn .ico{width:clamp(18px,1.1vw,22px);height:clamp(18px,1.1vw,22px)}

  body{font-size:clamp(16px,.42vw + 10px,19px)}
  .sec-title{margin:clamp(22px,1.8vw,38px) 2px clamp(10px,.9vw,18px)}
  .sec-title h2{font-size:clamp(21px,1.05vw + 8px,32px)}
  .hx-head h2{font-size:clamp(21px,1.05vw + 8px,32px)}
  .hx-head p{font-size:clamp(12.5px,.55vw + 5px,16px)}
  .hx-sec{margin-top:clamp(18px,1.6vw,36px)}
  .muted.small,.small{font-size:clamp(13px,.4vw + 7px,15.5px)}
  .li{padding:clamp(12px,.8vw,18px) clamp(12px,.9vw,20px)}
  .li b,.ax-row b{font-size:clamp(15px,.5vw + 8px,19px)}
  .btn{font-size:clamp(15px,.45vw + 8px,18px);padding:clamp(9px,.55vw,13px) clamp(16px,1vw,24px)}
  .btn.sm{font-size:clamp(13.5px,.4vw + 7px,16px)}
  .chip{font-size:clamp(13.5px,.4vw + 7px,16.5px)}
  input[type=search],input[type=text],select{font-size:clamp(15px,.45vw + 8px,18px)}

  /* home */
  .hx-top{grid-template-columns:1.6fr 1fr;gap:clamp(14px,1.2vw,28px)}
  .hx-hero{padding:clamp(30px,2.4vw,56px) clamp(24px,2.6vw,64px) clamp(24px,2vw,44px)}
  .hx-ayah{font-size:clamp(26px,1.6vw + 6px,46px)!important;line-height:1.9!important;min-height:clamp(80px,7vw,170px)}
  .hx-ref,.hx-dates,.hx-eyebrow{font-size:clamp(13px,.5vw + 6px,17px)}
  .hx-hero .hx-btn,.hx-btn{height:auto;min-height:clamp(42px,2.6vw,54px);font-size:clamp(14px,.45vw + 7px,17.5px)}
  .hx-pr-next{font-size:clamp(28px,1.6vw + 6px,46px)!important}
  .hx-pr-cd .cd-time{font-size:clamp(30px,1.7vw + 6px,50px)!important}
  .hx-prayer{padding:clamp(20px,1.6vw,36px)}
  .hx-strip b{font-size:clamp(13px,.5vw + 6px,17px)}
  .hx-tiles{gap:clamp(8px,.8vw,18px)}
  .hx-tile{font-size:clamp(12.5px,.5vw + 5.5px,17px)}
  .hx-tile .hx-ic{width:clamp(62px,4.2vw,92px);height:clamp(62px,4.2vw,92px);border-radius:clamp(20px,1.3vw,28px);padding:clamp(14px,.95vw,22px)}
  .hx-tile .hx-ic .ti,.hx-tile .hx-ic .ico{width:100%;height:100%}
  .hx-slist{gap:clamp(8px,.7vw,14px)}
  .hx-srow{padding:clamp(11px,.75vw,17px) clamp(12px,.9vw,20px)}
  .hx-srow b{font-size:clamp(15px,.5vw + 8px,19px)}
  .hx-rcard{flex-basis:clamp(168px,10.5vw,230px)}
  .hx-rcard .avatar.hx-av,.hx-rcard img{width:clamp(64px,4.4vw,96px);height:clamp(64px,4.4vw,96px)}
  .ax-home{gap:clamp(24px,2vw,44px)}
  .ded-card,.ded16{max-width:none}

  /* player bar: centred, scaled */
  .player{inset-inline:max(16px,calc((100% - 1560px) / 2))}
  .pl-main{width:clamp(46px,2.9vw,58px);height:clamp(46px,2.9vw,58px)}

  /* reading view: wider readable column (not full-bleed) + larger type */
  .mushaf{max-width:clamp(860px,60vw,1240px)}
  .mp .mp-bar,.mp-view,.mp-foot{max-width:clamp(860px,62vw,1260px)}
  .mp .mp-bar .title{font-size:clamp(17px,.7vw + 6px,22px)}
  .mp-info{font-size:clamp(12.5px,.4vw + 6px,15.5px)}
  .mp-page{padding:clamp(20px,1.5vw,34px) clamp(26px,2vw,48px) clamp(12px,.8vw,18px)}

  /* toast & sheets scale */
  .toast{font-size:clamp(14px,.5vw + 7px,18px);bottom:clamp(150px,9vw,190px)}
}

/* settings: two balanced columns on wide screens */
@media(min-width:1200px){
  body[data-route=settings] #app{columns:2;column-gap:clamp(18px,1.6vw,32px)}
  body[data-route=settings] #app>*{break-inside:avoid;-webkit-column-break-inside:avoid;margin-top:0;margin-bottom:clamp(14px,1.1vw,22px)}
  body[data-route=settings] #app>.sec-title{column-span:all;-webkit-column-span:all}
  body[data-route=more] #app .grid,body[data-route=more] #app .g3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
@media(min-width:1440px){
  #rList,#axL,#hChapters,.ax-grp>.list,#rfL .list{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
  .hx-slist{grid-template-columns:repeat(6,1fr)}
  .surah-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
}
@media(min-width:1900px){
  #rList,#axL,#hChapters,.ax-grp>.list,#rfL .list{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:14px}
  .hx-rrow{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
  .hx-rcard{flex:1 1 calc(100% / 7 - 14px);max-width:calc(100% / 6)}
}

@media(min-width:1000px){
  .topnav{flex-wrap:nowrap}
  .topnav a{white-space:nowrap}
  .hx-ayah{font-size:clamp(28px,1.9vw + 4px,48px)!important}
  .hx-prayer{justify-content:space-between}
  .hx-pr-main{margin-block:auto!important}
}
@media(min-width:1000px) and (max-width:1279px){
  .topbar{gap:10px}
  .topnav{gap:0}
  .topnav a{padding:7px 7px;font-size:14px}
  .brand-txt small{display:none}
  #installBtn span{display:none}
  .top-actions{gap:6px}
}
@media(min-width:1000px){.player{max-width:clamp(760px,46vw,1040px)}}
/* 2K / 4K monitors and TVs at native resolution: scale the whole interface so it reads from a distance */
@media(min-width:2200px){html{zoom:1.25}}
@media(min-width:2800px){html{zoom:1.6}}
@media(min-width:3400px){html{zoom:2}}

/* ===== v25: premium photo section tiles ===== */
.hx-tiles.hx-ptiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:10px;flex-wrap:initial}
.hx-tiles.hx-ptiles .hx-tile.hx-ph{position:relative;display:block;flex:none;width:auto;min-width:0;aspect-ratio:1/1.06;padding:0;margin:0;border-radius:18px;overflow:hidden;isolation:isolate;
  background:rgb(var(--rc1));border:1px solid rgba(var(--rc5),.6);color:rgb(var(--rc99));text-decoration:none;
  box-shadow:0 1px 0 rgba(var(--rc100),.18) inset,0 12px 24px -16px rgba(var(--rc101),.75);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .2s;-webkit-tap-highlight-color:transparent}
.hx-tiles.hx-ptiles .hx-tile.hx-ph.w2{grid-column:span 2;aspect-ratio:auto}
.hx-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.01);transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:saturate(.92) contrast(1.02)}
.hx-ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(var(--rc102),.96) 0%,rgba(var(--rc103),.78) 26%,rgba(var(--rc104),.22) 58%,rgba(var(--rc104),0) 76%),
             radial-gradient(120% 70% at 50% 0%,rgba(var(--rc105),.10),rgba(var(--rc105),0) 60%)}
.hx-ph::before{content:"";position:absolute;inset:4px;z-index:2;pointer-events:none;border-radius:14px;border:1px solid rgba(var(--rc6),.28)}
.hx-ph .ph-lab{position:absolute;inset-inline:0;bottom:0;z-index:3;padding:0 11px 10px;font-size:13.5px;font-weight:700;line-height:1.3;letter-spacing:0;color:rgb(var(--rc106));text-align:start;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.hx-ph .ph-lab::before{content:"";display:block;width:16px;height:1.5px;margin-bottom:6px;border-radius:2px;background:linear-gradient(90deg,rgb(var(--rc6)),rgb(var(--rc107)))}
.hx-ph .ph-b{position:absolute;top:8px;inset-inline-start:8px;z-index:3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--rc108),.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(var(--rc6),.5);color:rgb(var(--rc6))}
.hx-ph .ph-b .ico{width:14px;height:14px;stroke-width:1.7}
.hx-ph.w2 .ph-lab{font-size:15.5px;padding-bottom:12px}
.hx-ph.w2 .ph-b{width:30px;height:30px}.hx-ph.w2 .ph-b .ico{width:16px;height:16px}
.hx-ph:active{transform:scale(.97)}
.hx-ph:focus-visible{outline:2px solid rgb(var(--rc6));outline-offset:2px}
@media (hover:hover){.hx-tiles.hx-ptiles .hx-tile.hx-ph:hover{transform:translateY(-3px);border-color:rgba(var(--rc6),.9);box-shadow:0 1px 0 rgba(var(--rc100),.2) inset,0 18px 30px -16px rgba(var(--rc101),.8)}.hx-ph:hover img{transform:scale(1.07)}}
html[data-theme=dark] .hx-tiles.hx-ptiles .hx-tile.hx-ph{border-color:rgba(var(--rc6),.38);box-shadow:0 12px 26px -16px rgba(0,0,0,.85)}
html[data-theme=dark] .hx-ph img{filter:saturate(.85) brightness(.9)}
/* per-photo focal points */
.ph-quran img{object-position:62% 45%}.ph-sira img{object-position:45% 62%}.ph-dua img{object-position:50% 70%}
@media (min-width:620px){
  .hx-tiles.hx-ptiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  .hx-ph .ph-lab{font-size:14.5px}
}
@media (min-width:1200px){
  .hx-tiles.hx-ptiles{grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(12px,.9vw,22px)}
  .hx-tiles.hx-ptiles .hx-tile.hx-ph{aspect-ratio:1/.92;border-radius:clamp(18px,1.2vw,26px)}
  .hx-tiles.hx-ptiles .hx-tile.hx-ph.ph-sira{grid-column:auto;aspect-ratio:1/.92}
  .hx-ph::before{border-radius:clamp(14px,1vw,22px)}
  .hx-ph .ph-lab{font-size:clamp(15px,.55vw + 7px,22px);padding:0 clamp(12px,.8vw,20px) clamp(11px,.8vw,18px)}
  .hx-ph.w2 .ph-lab{font-size:clamp(17px,.7vw + 7px,26px)}
  .hx-ph .ph-b{width:clamp(28px,1.7vw,40px);height:clamp(28px,1.7vw,40px);top:clamp(8px,.6vw,14px);inset-inline-start:clamp(8px,.6vw,14px)}
  .hx-ph .ph-b .ico{width:52%;height:52%}
}
@media (max-width:360px){.hx-tiles.hx-ptiles{gap:8px}.hx-ph .ph-lab{font-size:12.5px;padding:0 8px 8px}}
/* kids hero + sira hero: photo, no emoji */
.kids-hero{border:1px solid rgba(var(--rc5),.55);color:rgb(var(--rc106))}
.kids-hero h1{display:flex;align-items:center;gap:8px;color:rgb(var(--rc106))}
.kids-hero .kstar{width:26px;height:26px;color:rgb(var(--rc6));fill:rgba(var(--rc6),.25)}
.kids-hero .kstar.sm{width:20px;height:20px;vertical-align:-3px}
#kDone .ico{width:18px;height:18px;vertical-align:-3px;margin-inline-end:4px}
.ph-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;min-height:150px;margin:4px 0 14px;padding:18px 18px 16px;display:flex;flex-direction:column;justify-content:flex-end;
  background-size:cover;background-position:45% 88%;border:1px solid rgba(var(--rc5),.6);color:rgb(var(--rc106));box-shadow:0 12px 24px -16px rgba(var(--rc101),.7)}
.ph-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(var(--rc102),.95),rgba(var(--rc103),.6) 45%,rgba(var(--rc104),.1))}
.ph-hero::before{content:"";position:absolute;inset:5px;border-radius:15px;border:1px solid rgba(var(--rc6),.28);pointer-events:none}
.ph-hero h2{margin:0;font-size:22px;color:rgb(var(--rc106))}.ph-hero p{margin:4px 0 0;font-size:13.5px;color:rgba(var(--rc106),.85)}
.ph-hero .ph-b{position:absolute;top:12px;inset-inline-start:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--rc108),.55);border:1px solid rgba(var(--rc6),.5);color:rgb(var(--rc6))}
.ph-hero .ph-b .ico{width:17px;height:17px}
.sira-md{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;margin-inline-end:10px;border-radius:50%;font-size:14px;font-weight:700;color:rgb(var(--rc109));
  background:radial-gradient(circle at 50% 35%,rgb(var(--rc9)),rgb(var(--rc110)));border:1px solid rgba(var(--rc7),.6);box-shadow:inset 0 0 0 2px rgb(var(--rc9)),inset 0 0 0 3px rgba(var(--rc7),.25)}
html[data-theme=dark] .sira-md{color:rgb(var(--rc6));background:radial-gradient(circle at 50% 35%,rgb(var(--rc111)),rgb(var(--rc86)));border-color:rgba(var(--rc6),.45);box-shadow:inset 0 0 0 2px rgb(var(--rc86)),inset 0 0 0 3px rgba(var(--rc6),.15)}
.acc summary .sira-md+*{}
.chip .ico,#liveC .ico,.acc-body .btn .ico{width:16px;height:16px;vertical-align:-3px;margin-inline-end:4px}

/* ===== v26: premium icon tiles (no photos) ===== */
:root{--sxPat:var(--ru16)}
.ri{display:block;overflow:visible;width:100%;height:100%}
.ri .s{fill:url(#rgG)}.ri .d{fill:rgb(var(--rc6));fill-opacity:.24}
.ri .l{fill:none;stroke:url(#rgG);stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.ri .d.l{fill:rgb(var(--rc6));fill-opacity:.24}
.sx{display:grid;gap:14px}
.sx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 6px}
.sx-t{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-width:0;-webkit-tap-highlight-color:transparent}
.sx-m{position:relative;display:grid;place-items:center;width:64px;aspect-ratio:1;border-radius:20px;isolation:isolate;
  background:radial-gradient(130% 100% at 50% -10%,rgb(var(--rc112)) 0%,rgb(var(--rc113)) 42%,rgb(var(--rc114)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 8px rgba(0,0,0,.22),0 1px 1.5px rgba(var(--rc101),.22),0 10px 18px -10px rgba(var(--rc101),.65);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s}
.sx-m::before{content:"";position:absolute;inset:1px 1px 48% 1px;border-radius:19px 19px 40% 40%/19px 19px 14px 14px;background:linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,0));pointer-events:none;z-index:-1}
.sx-m::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(var(--rc6),.32);pointer-events:none}
.sx-m .ri{width:54%;height:54%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.sx-l{font-size:13px;font-weight:700;line-height:1.3;text-align:center;letter-spacing:0;max-width:100%}
.sx-t:active .sx-m{transform:scale(.93)}
.sx-t:focus-visible{outline:none}.sx-t:focus-visible .sx-m{outline:2px solid var(--gold);outline-offset:3px}
@media (hover:hover){.sx-t:hover .sx-m{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 8px rgba(0,0,0,.22),0 2px 3px rgba(var(--rc101),.2),0 16px 24px -12px rgba(var(--rc101),.7)}}
html[data-theme=dark] .sx-m{background:radial-gradient(130% 100% at 50% -10%,rgb(var(--rc115)) 0%,rgb(var(--rc116)) 45%,rgb(var(--rc117)) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -3px 8px rgba(0,0,0,.3),0 10px 20px -10px rgba(0,0,0,.9)}
html[data-theme=dark] .sx-m::after{border-color:rgba(var(--rc6),.42)}
/* green band (featured card + section headers) */
.sx-band{position:relative;isolation:isolate;overflow:hidden;color:rgb(var(--rc106));border-radius:20px;border:1px solid rgba(var(--rc5),.5);
  background:var(--sxPat) center/52px 52px,radial-gradient(120% 140% at 85% 0%,rgb(var(--rc118)) 0%,rgb(var(--rc119)) 50%,rgb(var(--rc120)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 28px -18px rgba(var(--rc101),.8)}
.sx-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--rc120),.0),rgba(var(--rc120),.55));pointer-events:none}
.sx-band::after{content:"";position:absolute;inset:5px;border-radius:15px;border:1px solid rgba(var(--rc6),.22);pointer-events:none}
.sx-band .sx-m{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 20px -12px rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.sx-band .sx-m::after{border-color:rgba(var(--rc6),.5)}
.sx-feat{display:flex;align-items:center;gap:14px;padding:16px 16px;text-decoration:none;min-height:96px}
.sx-feat .sx-m{width:64px;flex:none}
.sx-ft{display:flex;flex-direction:column;min-width:0;flex:1}
.sx-ft b{font-family:var(--kufi);font-size:20px;font-weight:700;color:rgb(var(--rc121));line-height:1.3}
.sx-ft small{font-size:13px;color:rgba(var(--rc106),.82);margin-top:2px}
.sx-go{flex:none;display:inline-flex;align-items:center;gap:4px;padding:7px 12px 7px 10px;border-radius:999px;font-weight:700;font-size:13.5px;color:rgb(var(--rc24));background:linear-gradient(135deg,rgb(var(--rc122)),rgb(var(--rc5)));box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 4px 10px -4px rgba(0,0,0,.5)}
.sx-go .ico{width:15px;height:15px}
.sx-feat:active{transform:scale(.985)}
@media (hover:hover){.sx-feat{transition:transform .2s,box-shadow .2s}.sx-feat:hover{transform:translateY(-2px)}}
/* sira + kids headers */
.ph-hero.sx-band{background:var(--sxPat) center/52px 52px,radial-gradient(120% 140% at 85% 0%,rgb(var(--rc118)) 0%,rgb(var(--rc119)) 50%,rgb(var(--rc120)) 100%);min-height:0;display:flex;flex-direction:row;align-items:center;gap:14px;padding:18px}
.ph-hero.sx-band::after{inset:5px;z-index:auto;background:none;border:1px solid rgba(var(--rc6),.22);border-radius:15px}
.ph-hero.sx-band .sx-m{width:68px;flex:none}
.ph-hero.sx-band .hb-t{min-width:0}
.kids-hero{background:var(--sxPat) center/52px 52px,radial-gradient(120% 140% at 85% 0%,rgb(var(--rc118)) 0%,rgb(var(--rc119)) 50%,rgb(var(--rc120)) 100%) !important;border:1px solid rgba(var(--rc5),.5);color:rgb(var(--rc106));position:relative;isolation:isolate;overflow:hidden}
.kids-hero::after{content:"";position:absolute;inset:5px;border-radius:19px;border:1px solid rgba(var(--rc6),.22);pointer-events:none}
.kids-hero .hb-row{display:flex;align-items:center;gap:14px}
.kids-hero .hb-row .sx-m{width:68px;flex:none}
.kids-hero .hb-row>div{min-width:0}
@media (max-width:360px){.sx-grid{gap:14px 4px}.sx-m{width:58px;border-radius:18px}.sx-l{font-size:12px}.sx-go{display:none}}
@media (min-width:768px){
  .sx-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 10px}
  .sx-m{width:72px;border-radius:22px}.sx-m::before{border-radius:21px 21px 40% 40%/21px 21px 16px 16px}
  .sx-l{font-size:14px}
}
@media (min-width:1024px){
  .sx{grid-template-columns:minmax(280px,24%) minmax(0,1fr);gap:clamp(16px,1.4vw,32px);align-items:stretch}
  .sx-feat{flex-direction:column;align-items:flex-start;justify-content:space-between;padding:clamp(18px,1.4vw,30px);gap:clamp(12px,1vw,20px)}
  .sx-feat .sx-m{width:clamp(70px,5.2vw,130px);border-radius:clamp(20px,1.5vw,38px)}
  .sx-ft b{font-size:clamp(22px,1.3vw + 6px,36px)}.sx-ft small{font-size:clamp(13px,.5vw + 6px,19px)}
  .sx-go{font-size:clamp(13.5px,.45vw + 7px,19px);padding:.5em 1em .5em .8em}
  .sx-grid{align-content:center;gap:clamp(18px,1.4vw,34px) clamp(8px,.8vw,20px)}
  .sx-m{width:clamp(74px,5.6vw,140px);border-radius:clamp(22px,1.6vw,40px)}
  .sx-m::before{border-radius:clamp(21px,1.55vw,39px) clamp(21px,1.55vw,39px) 40% 40%/clamp(21px,1.55vw,39px) clamp(21px,1.55vw,39px) 18px 18px}
  .sx-l{font-size:clamp(14px,.55vw + 7px,24px)}
  .ph-hero.sx-band,.kids-hero{padding:clamp(18px,1.5vw,32px)}
  .ph-hero.sx-band .sx-m,.kids-hero .hb-row .sx-m{width:clamp(68px,4.6vw,110px);border-radius:clamp(20px,1.4vw,32px)}
}

.kst{width:1em;height:1em;vertical-align:-.12em;color:var(--gold);stroke-width:1.7;margin-inline-end:1px}.kst.on{fill:var(--gold2);color:var(--gold3)}
.kids-hero .kst{color:rgb(var(--rc6))}.kids-hero .kst.on{fill:rgb(var(--rc6));color:rgb(var(--rc6))}
@media (min-width:1024px){.ph-hero.sx-band h2{font-size:clamp(24px,1.3vw + 8px,42px)}.ph-hero.sx-band p{font-size:clamp(14px,.6vw + 6px,22px)}.ph-hero.sx-band{padding:clamp(18px,1.8vw,40px)}}
@media (max-width:767px){.sx-grid{gap:16px 4px}.sx-l{font-size:12.5px;white-space:nowrap}}
.sx-feat .sx-m .ri{width:58%;height:58%}

/* ---------- v28: seek controls ---------- */
.pl-tm{flex:none;font-size:11.5px;font-variant-numeric:tabular-nums;color:rgba(var(--rc93),.72);min-width:34px;text-align:center;unicode-bidi:isolate;letter-spacing:.2px}
.pl-top .pl-progress.sk{position:relative;cursor:pointer;touch-action:none;height:4px;margin:0 6px;transition:height .15s var(--ease)}
.pl-top .pl-progress.sk::before{content:'';position:absolute;inset:-14px 0}
.pl-top .pl-progress.sk:hover,.pl-top .pl-progress.sk.drag{height:6px}
.pl-progress.sk div{transition:none}
.pl-progress.sk div::after{transition:transform .15s var(--ease)}
.pl-progress.sk.drag div::after{transform:scale(1.35)}
.pl-progress.sk:focus-visible{outline:2px solid var(--gold2);outline-offset:6px}
.pl-resume{display:flex;align-items:center;gap:6px;margin:8px 10px 0;padding:4px 4px 4px 4px;border-radius:14px;background:rgba(var(--rc6),.12);border:1px solid rgba(var(--rc6),.28);animation:fade .25s}
.pl-resume[hidden]{display:none}
.pl-res-go{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:none;color:rgb(var(--rc106));font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;padding:6px 8px;text-align:start}
.pl-res-go svg{width:18px;height:18px;flex:none;color:var(--gold2)}
.pl-res-go b{font-variant-numeric:tabular-nums;color:rgb(var(--rc123));unicode-bidi:isolate}
.pl-res-x{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:none;color:rgba(var(--rc93),.6);cursor:pointer;display:grid;place-items:center}
.pl-res-x svg{width:15px;height:15px}
/* sheet */
.ps-seek{margin:14px 2px 4px}
.sk-big{position:relative;height:44px;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;outline:none}
.sk-big .sk-track{position:absolute;inset-inline:0;top:50%;height:6px;margin-top:-3px;border-radius:6px;background:rgba(127,127,127,.2);overflow:hidden;transition:height .15s,margin .15s}
html[data-theme=dark] .sk-big .sk-track{background:rgba(255,255,255,.12)}
.sk-big .sk-buf,.sk-big .sk-fill{position:absolute;top:0;bottom:0;right:0;width:0;border-radius:6px}
.sk-big .sk-buf{background:rgba(var(--rc5),.22)}
.sk-big .sk-fill{background:linear-gradient(270deg,var(--gold3),var(--gold) 55%,var(--gold2))}
.sk-big .sk-thumb{position:absolute;top:50%;width:20px;height:20px;margin:-10px -10px 0 0;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgb(var(--rc124)),var(--gold2) 55%,var(--gold));box-shadow:0 2px 6px rgba(0,0,0,.25),0 0 0 4px rgba(var(--rc5),.18);transform:translateX(0);transition:box-shadow .15s,transform .15s}
.sk-big.drag .sk-track,.sk-big:hover .sk-track{height:8px;margin-top:-4px}
.sk-big.drag .sk-thumb{transform:scale(1.2);box-shadow:0 3px 10px rgba(0,0,0,.3),0 0 0 8px rgba(var(--rc5),.2)}
.sk-big:focus-visible .sk-thumb{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--gold)}
.sk-big .sk-tip{position:absolute;bottom:100%;margin-bottom:-2px;transform:translateX(50%);padding:3px 9px;border-radius:9px;background:var(--g8);color:rgb(var(--rc125));font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.sk-big.drag .sk-tip{opacity:1}
.sk-times{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:-6px;padding:0 2px}
.sk-times span{unicode-bidi:isolate}
.sk-times .sk-ay{color:var(--gold3);font-weight:700;font-family:var(--ui)}
html[data-theme=dark] .sk-times .sk-ay{color:var(--gold2)}
.ps-trans{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(8px,3.5vw,22px);margin:8px 0 14px}
.ps-tb{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .15s,background .15s}
.ps-tb svg{width:22px;height:22px;display:block}
.ps-tb:active{transform:scale(.92)}
.ps-tb:hover{background:var(--card2)}
.ps-10{width:54px;height:54px;color:var(--g7)}
html[data-theme=dark] .ps-10{color:var(--gold2)}
.ps-10 svg{width:30px;height:30px}
.ps-10 svg text{font-family:var(--ui)}
.ps-play{width:66px;height:66px;border:0;background:linear-gradient(180deg,rgb(var(--rc94)),rgb(var(--rc5)));color:rgb(var(--rc25));box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px -8px rgba(var(--rc126),.7)}
.ps-play:hover{background:linear-gradient(180deg,rgb(var(--rc94)),rgb(var(--rc5)))}
.ps-play svg{width:28px;height:28px}
.sk-flash{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:12.5px;font-weight:700;color:var(--gold3);opacity:0;pointer-events:none;font-variant-numeric:tabular-nums}
html[data-theme=dark] .sk-flash{color:var(--gold2)}
.sk-flash.on{animation:skf .9s ease-out}
@keyframes skf{0%{opacity:0;transform:translate(-50%,4px)}20%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
.ps-start{margin:0 0 6px;padding:10px 0 4px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.ps-sbtns{display:flex;flex-wrap:wrap;gap:8px}
.ps-sb{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card2);color:var(--ink);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;min-height:40px;transition:background .15s,border-color .15s}
.ps-sb svg{width:18px;height:18px;color:var(--gold3);flex:none}
html[data-theme=dark] .ps-sb svg{color:var(--gold2)}
.ps-sb.on{border-color:var(--gold);background:rgba(var(--rc5),.14)}
.ps-sb.res{background:linear-gradient(135deg,var(--g8),var(--g7));color:rgb(var(--rc125));border-color:rgba(var(--rc6),.4)}
.ps-sb.res svg{color:var(--gold2)}
.ps-sb.res b{font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.ps-sb[hidden]{display:none}
.ps-panel{margin-top:10px;padding:12px;border-radius:14px;background:var(--card2);border:1px solid var(--line);animation:fade .2s}
.ps-panel[hidden]{display:none}
.ps-pl{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.ps-row{display:flex;gap:8px;align-items:stretch;margin-bottom:6px}
.ps-row input,.ps-row select{flex:1;min-width:0}
.ps-row input{text-align:center;font-variant-numeric:tabular-nums;font-size:18px;letter-spacing:1px}
.ps-row .btn{flex:none;min-width:84px}
@media(min-width:1000px){.ps-tb{width:52px;height:52px}.ps-10{width:60px;height:60px}.ps-play{width:72px;height:72px}.sk-times{font-size:14px}}
@media(prefers-reduced-motion:reduce){.sk-flash.on{animation:none}.sk-big .sk-thumb,.pl-top .pl-progress.sk{transition:none}}

/* v29: التواشيح */
.tw-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;margin:2px 0 12px;background:var(--card2);border:1px solid var(--line);border-radius:16px}
.tw-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:6px 4px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;text-align:center;line-height:1.25;transition:background .15s,color .15s}
.tw-tab small{font-weight:500;font-size:12px;color:var(--muted)}
.tw-tab.on{background:linear-gradient(180deg,rgb(var(--rc127)),rgb(var(--rc1)));color:rgb(var(--rc106));box-shadow:0 2px 8px rgba(var(--rc1),.25),inset 0 1px 0 rgba(255,255,255,.08)}
.tw-tab.on small{color:rgba(var(--rc106),.8)}
html[data-theme=dark] .tw-tab.on{background:linear-gradient(180deg,rgb(var(--rc128)),rgb(var(--rc129)));border:1px solid rgba(var(--rc6),.25)}
.tw-chips .chip{font-size:13.5px}
.tw-hero{min-height:118px}
@media(min-width:900px){.tw-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.tw-tabs{max-width:640px}}

/* v29: 13 tiles — half-column grid so a lone last tile sits centred */
.sx-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
.sx-grid>.sx-t{grid-column:span 2}
.sx-grid>.sx-t:last-child:nth-child(4n+1){grid-column:4/span 2}
@media (min-width:768px){.sx-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.sx-grid>.sx-t:last-child:nth-child(4n+1){grid-column:span 2}.sx-grid>.sx-t:last-child:nth-child(6n+1){grid-column:6/span 2}}

/* v30: دروس ومحاضرات */
.sx-grid>.sx-t:nth-last-child(2):nth-child(4n+1){grid-column:3/span 2}
@media (min-width:768px){.sx-grid>.sx-t:nth-last-child(2):nth-child(4n+1){grid-column:span 2}.sx-grid>.sx-t:nth-last-child(2):nth-child(6n+1){grid-column:5/span 2}}
.lec-scs{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.lec-sc .grow{min-width:0;flex:1 1 auto}
.lec-sc>.ico{width:20px;height:20px}
.lec-sc{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;box-shadow:0 6px 18px -14px rgba(var(--rc101),.5);transition:transform .15s,box-shadow .15s}
.lec-sc:active{transform:scale(.99)}
.lec-sc b{display:block;font-size:17px;line-height:1.35}
.lec-sc small{display:block;color:var(--muted);font-size:13px;margin-top:2px;line-height:1.45}
.lec-meta{display:inline-block;margin-top:6px;font-size:12.5px;font-weight:700;color:rgb(var(--rc130))}
html[data-theme=dark] .lec-meta{color:rgb(var(--rc6))}
.lec-av{flex:0 0 auto;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:24px;font-weight:800;color:rgb(var(--rc106));background:radial-gradient(120% 140% at 80% 0%,rgb(var(--rc118)),rgb(var(--rc1)) 70%);border:1px solid rgba(var(--rc5),.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px -8px rgba(var(--rc101),.7)}
.lec-chev{transform:scaleX(-1);color:var(--muted);flex:0 0 auto}
.lec-top{display:flex;margin:-4px 0 8px}
.lec-back{display:inline-flex;align-items:center;gap:4px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:700;padding:4px 2px}
.lec-back .ico{width:18px;height:18px}
.lec-q{margin:0 0 10px}
.lec-q input{width:100%;box-sizing:border-box;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:0 14px;font:inherit;font-size:16px}
.lec-q input:focus{outline:2px solid rgba(var(--rc5),.6);outline-offset:1px}
.lec-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.lec-chips::-webkit-scrollbar{display:none}
.lec-chips .chip{flex:0 0 auto;white-space:nowrap;font-size:13.5px}
.lec-chips .chip small{margin-inline-start:6px;opacity:.7;font-size:11.5px}
.lec-sub{margin:-4px 2px 10px}
.lec-sel{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-weight:700}
.lec-sel select{flex:1;min-width:0;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:15px;padding:0 10px}
.lec-ch{display:flex;align-items:center;gap:10px;margin:14px 2px 6px;font-size:15px;color:var(--ink)}
.lec-ch:first-child{margin-top:2px}
.lec-ch b{font-weight:800}
.lec-n{flex:0 0 auto;min-width:30px;height:30px;padding:0 4px;box-sizing:border-box;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:800;color:rgb(var(--rc130));background:rgba(var(--rc5),.14);border:1px solid rgba(var(--rc5),.35)}
html[data-theme=dark] .lec-n{color:rgb(var(--rc6))}
.lec-row .grow{min-width:0}
.lec-row .grow b{display:block;overflow-wrap:anywhere}
.lec-res{color:rgb(var(--rc130));font-weight:700}
html[data-theme=dark] .lec-res{color:rgb(var(--rc6))}
.lec-bar{display:block;height:3px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden}
.lec-bar>i{display:block;height:100%;background:linear-gradient(90deg,rgb(var(--rc5)),rgb(var(--rc6)));margin-inline-start:0}
@media(min-width:900px){.lec-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.lec-list .lec-ch{grid-column:1/-1}.lec-scs{grid-template-columns:repeat(3,minmax(0,1fr))}.lec-q{max-width:640px}.lec-chips{flex-wrap:wrap;overflow:visible}}

/* v33 home grid: every section, last row always centred */
.hx .sx-grid{display:flex!important;flex-wrap:wrap;justify-content:center;column-gap:0!important}
.hx .sx-grid>.sx-t{flex:0 0 25%;max-width:25%;grid-column:auto!important;padding:0 3px;box-sizing:border-box}
@media (min-width:768px){.hx .sx-grid>.sx-t{flex-basis:16.6667%;max-width:16.6667%}}
@media (min-width:1200px){.hx .sx-grid>.sx-t{flex-basis:12.5%;max-width:12.5%}}
.hx .hx-ded{margin-top:40px}

/* v34 sira tabs */
.sira-tabs{display:flex;gap:6px;padding:5px;margin:0 0 14px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.sira-tabs a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border-radius:12px;font-weight:800;font-size:15px;color:var(--ink);text-decoration:none;opacity:.78;transition:background .15s,opacity .15s}
.sira-tabs a.on{opacity:1;color:rgb(var(--rc106));background:radial-gradient(120% 140% at 80% 0%,rgb(var(--rc118)),rgb(var(--rc1)) 70%);box-shadow:inset 0 0 0 1px rgba(var(--rc5),.55)}
.sira-tabs .ico{width:19px;height:19px;flex:0 0 auto}
.sira-tabs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sira-sub{font-weight:600;font-size:12.5px;color:var(--muted,rgb(var(--rc131)))}

/* v35: loading spinner on the active item and on the player's play button */
@keyframes plspin{to{transform:rotate(360deg)}}
.ax-row.ld .ax-play,#player.pl-ld #plPlay{position:relative}
.ax-row.ld .ax-play svg,#player.pl-ld #plPlay svg{opacity:0}
.ax-row.ld .ax-play::after,#player.pl-ld #plPlay::after{content:'';position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:plspin .8s linear infinite}
@media(prefers-reduced-motion:reduce){.ax-row.ld .ax-play::after,#player.pl-ld #plPlay::after{animation-duration:2s}}

/* v36: رمضان من الشارقة — أحمد عبد الرازق نصر */
.ny-hero{min-height:0;padding:16px}
.ny-hd{display:flex;align-items:center;gap:14px}
.ny-hd .hb-t h2{margin:0 0 4px}
.ny-hd .hb-t p{margin:0}
.avatar.ny-av{width:68px;height:68px;flex:none;border:2px solid rgba(var(--rc94),.85);box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.avatar.ny-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ny-pl{padding:12px;margin-bottom:14px}
.ny-vid{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:rgb(var(--rc132))}
.ny-vid iframe,.ny-vid #nyYT{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.ny-tap{position:absolute;inset:auto 10px 10px 10px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:12px;background:rgba(var(--rc120),.88);color:rgb(var(--rc106));font-weight:700;font-size:13.5px;pointer-events:none}
.ny-tap .ico{width:16px;height:16px}
.ny-err{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;color:rgb(var(--rc106));font-size:14px;line-height:1.7}
.ny-err a{color:rgb(var(--rc94))}
.ny-now{display:flex;flex-direction:column;align-items:center;text-align:center;margin:12px 4px 4px}
.ny-now b{font-size:18px}
.ny-now small{color:var(--muted);font-size:13px;margin-top:2px}
.ny-seek{margin:10px 4px 2px}
.ny-r{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;direction:ltr;transform:scaleX(-1);margin:0;cursor:pointer;touch-action:none}
.ny-r::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(to right,var(--gold,rgb(var(--rc5))) var(--p,0%),var(--line) var(--p,0%))}
.ny-r::-moz-range-track{height:6px;border-radius:99px;background:var(--line)}
.ny-r::-moz-range-progress{height:6px;border-radius:99px;background:var(--gold,rgb(var(--rc5)))}
.ny-r::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-7px;background:#fff;border:3px solid var(--gold,rgb(var(--rc5)));box-shadow:0 2px 6px rgba(0,0,0,.25)}
.ny-r::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--gold,rgb(var(--rc5)))}
.ny-r:focus-visible{outline:2px solid var(--gold,rgb(var(--rc5)));outline-offset:4px;border-radius:8px}
.ny-trans{position:relative}
.ny-row.on{border-color:rgba(var(--rc5),.75);background:var(--card2)}
.ny-row.on b{color:var(--g7)}
html[data-theme=dark] .ny-row.on b{color:var(--gold2)}
.ny-sn{flex:none}
.ny-home{display:flex;align-items:center;gap:14px;padding:14px 16px;text-decoration:none}
.ny-home .ny-ht{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ny-home .ny-ht small{color:rgb(var(--rc94));font-weight:700;font-size:12.5px}
.ny-home .ny-ht b{font-size:17px;color:rgb(var(--rc133))}
.ny-home .ny-ht span{font-size:12.5px;opacity:.85}
.ny-home .sx-go{flex:none}
@media(min-width:900px){.ny-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}.ny-pl{max-width:760px;margin-inline:auto}}
.ny-tap[hidden]{display:none}

/* v37: Nasr — year groups + search */
.ny-sbox{margin:0 0 12px}
.ny-sbox input{width:100%;box-sizing:border-box}
details.acc.ny-yr summary{font-size:17px;padding:12px 16px}
details.acc.ny-yr .ny-yt{flex:none}
details.acc.ny-yr .ny-yc{font-family:inherit;font-weight:500;font-size:13px}
details.acc.ny-yr .ny-list{padding:0 10px 12px}
details.acc.ny-yr[hidden],.ny-row[hidden],.ny-no[hidden]{display:none}
.ny-no{text-align:center;padding:12px}
.ny-row .grow{min-width:0}

.ny-sec{margin:18px 4px 8px;font-size:15px;color:var(--muted);font-weight:700}
.ny-yr .ny-yc{white-space:nowrap}