/* v41 — buttery scrolling: no continuous animation, no blur/filters, cheap shadows, page pattern painted once as a small tile */
/* 1) shine: static blend only (no sweep element, no animation) */
.r-shn{display:none!important}
html[data-shine] .hx-hero::after,html[data-shine] .hero::after{animation:none!important;will-change:auto}
.skel{animation:none!important;background:rgba(127,127,127,.16)!important}
#app>*{animation:none!important}
/* 2) no blur / filter effects anywhere */
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.medal,.sx-m .ri{filter:none!important}
.tabbar{background:rgb(var(--rc22))!important}
.hx-ph .ph-b{background:rgba(var(--rc108),.86)!important}
.reader-bar{background:var(--card)!important}
.player{background:linear-gradient(135deg,rgb(var(--rc90)),rgb(var(--rc91)))}
.sx-band .sx-m{background:rgba(255,255,255,.1)}
/* 3) page pattern: no fixed full-screen layer — a small PNG tile on the page itself (perf41.js builds it per palette) */
html.bgt .bgpat{display:none!important}
html.bgt body{background-color:var(--bg);background-image:var(--bgtile);background-repeat:repeat;background-size:var(--bgtsz) var(--bgtsz);background-attachment:scroll}
.bgpat{will-change:auto!important;transform:none!important}
/* 4) shadows: small and cheap */
:root{--shadow:0 1px 2px rgba(var(--rc1),.08)}
html[data-theme=dark]{--shadow:0 1px 2px rgba(0,0,0,.3)}
.topbar{box-shadow:none}
.hero{box-shadow:0 3px 10px rgba(0,0,0,.14)}
.counter-btn{box-shadow:0 1px 2px rgba(0,0,0,.07),inset 0 0 0 3px rgba(var(--rc6),.6)}
.pt.next{box-shadow:0 1px 2px rgba(0,0,0,.07)}
.player{box-shadow:0 3px 10px rgba(0,0,0,.14)}
.hx-tile .hx-ic{box-shadow:inset 0 0 0 3px rgb(var(--rc84)),inset 0 0 0 4px rgba(var(--rc5),.22),0 1px 2px rgba(0,0,0,.07)}
.brand-mark{box-shadow:0 0 0 1px rgba(var(--rc6),.7),0 0 0 4px rgba(var(--rc6),.12),0 1px 2px rgba(0,0,0,.07)}
.tabbar{box-shadow:none}
.hx-btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.07)}
html[data-theme=dark] .hx-tile .hx-ic{box-shadow:inset 0 0 0 3px rgb(var(--rc87)),inset 0 0 0 4px rgba(var(--rc6),.12),0 1px 2px rgba(0,0,0,.07)}
.hx-av,.hx-rcard img{box-shadow:0 0 0 2px var(--card),0 0 0 3px rgba(var(--rc5),.55),0 1px 2px rgba(0,0,0,.07)}
.hx-seg button.on{box-shadow:0 1px 2px rgba(0,0,0,.07)}
.hx-tap{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 2px rgba(0,0,0,.07)}
.hx .counter-btn{box-shadow:0 0 0 4px var(--card),0 0 0 5px rgba(var(--rc5),.45),0 1px 2px rgba(0,0,0,.07)}
.btn:not(.ghost):not(.gold){box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.07)}
.btn.gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.07)}
.avatar{box-shadow:inset 0 0 0 1px rgba(var(--rc6),.55),0 1px 2px rgba(0,0,0,.07)}
.sheet{box-shadow:0 3px 10px rgba(0,0,0,.14)}
.toast{box-shadow:0 3px 10px rgba(0,0,0,.14)}
.page{box-shadow:0 1px 2px rgba(0,0,0,.07)}
html[data-theme=dark] .page{box-shadow:0 1px 2px rgba(0,0,0,.07)}
.pl-main{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.07)}
.plt-auto.on{box-shadow:0 1px 2px rgba(0,0,0,.07),inset 0 1px 0 rgba(var(--rc6),.25)}
.hx-tiles.hx-ptiles .hx-tile.hx-ph{box-shadow:0 1px 0 rgba(var(--rc100),.18) inset,0 1px 2px rgba(0,0,0,.07)}
.hx-tiles.hx-ptiles .hx-tile.hx-ph:hover{box-shadow:0 1px 0 rgba(var(--rc100),.2) inset,0 1px 2px rgba(0,0,0,.07)}
html[data-theme=dark] .hx-tiles.hx-ptiles .hx-tile.hx-ph{box-shadow:0 1px 2px rgba(0,0,0,.07)}
.ph-hero{box-shadow:0 3px 10px rgba(0,0,0,.14)}
.sx-m{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 1px 2px rgba(0,0,0,.07)}
.sx-t:hover .sx-m{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 1px 2px rgba(0,0,0,.07)}
html[data-theme=dark] .sx-m{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -3px 8px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.07)}
.sx-band{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.07)}
.sx-band .sx-m{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.07)}
.sx-go{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 1px 2px rgba(0,0,0,.07)}
.sk-big .sk-thumb{box-shadow:0 1px 2px rgba(0,0,0,.07),0 0 0 4px rgba(var(--rc5),.18)}
.sk-big.drag .sk-thumb{box-shadow:0 1px 2px rgba(0,0,0,.07),0 0 0 8px rgba(var(--rc5),.2)}
.sk-big .sk-tip{box-shadow:0 1px 2px rgba(0,0,0,.07)}
.ps-play{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.07)}
.tw-tab.on{box-shadow:0 1px 2px rgba(0,0,0,.07),inset 0 1px 0 rgba(255,255,255,.08)}
.lec-sc{box-shadow:0 1px 2px rgba(0,0,0,.07)}
.lec-av{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.07)}
.avatar.ny-av{box-shadow:0 1px 2px rgba(0,0,0,.07)}
.ny-r::-webkit-slider-thumb{box-shadow:0 1px 2px rgba(0,0,0,.07)}
/* 5) fixed / sticky chrome: own layer, opaque, contained */
.topbar{transform:translateZ(0);contain:layout style}
.tabbar,.player{transform:translateZ(0);contain:layout paint style}
.tabbar{border-top:1px solid rgba(var(--rc6),.3)}
/* 6) long lists: row containment measured and dropped (it created an extra page-tall layer in the surah list) */
#hcNext,.cd,.pt-left{font-variant-numeric:tabular-nums}

/* v42 — reciter switcher inside the player (no blur, no shadow, only the sheet's own slide) */
.pl-mini.pl-recb{width:auto;height:28px;padding:0 9px 0 8px;gap:4px;display:inline-flex;align-items:center;border-radius:14px;border:1px solid rgba(var(--rc6),.45);color:var(--gold2);font:500 12px/1 var(--ui)}
.pl-mini.pl-recb svg{width:15px;height:15px}
.pl-mini.pl-recb[hidden]{display:none}
.ps-rec{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card2);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.ps-rec .grow{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.ps-rec small{font-size:11.5px;color:var(--muted)}
.ps-rec b{font-family:var(--ar);font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-rec-i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--rc6),.16);color:var(--gold)}
.ps-rec-i svg{width:19px;height:19px}
.ps-rec-c{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:700;color:var(--gold)}
.ps-rec-c svg{width:15px;height:15px}
.rs-wrap{z-index:62}
.rs-sheet{display:flex;flex-direction:column;overflow:hidden;height:min(82vh,720px);padding-bottom:0}
.rs-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:10px}
.rs-head .grow{flex:1;min-width:0}
.rs-head h3{margin:0 0 2px;font-size:18px}
.rs-x{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--card2);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.rs-x svg{width:18px;height:18px}
.rs-search{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card2);color:var(--muted)}
.rs-search svg{width:18px;height:18px;flex:none}
.rs-search input{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;padding:11px 0!important;font:inherit;font-size:15px;color:var(--ink);outline:none}
.rs-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:8px -18px 0;padding:0 12px calc(16px + env(safe-area-inset-bottom))}
.rs-sec{font-size:12.5px;font-weight:700;color:var(--gold);margin:12px 6px 4px}
.rs-sec span{color:var(--muted);font-weight:500}
.rs-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 6px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer;contain:content}
.rs-row .avatar{width:40px;height:40px;font-size:17px}
.rs-row .grow{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.rs-row b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-row small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-row.on{background:rgba(var(--rc6),.12);border-radius:12px}
.rs-row.on b{color:var(--gold)}
.rs-cur{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--card)}
.rs-cur svg{width:16px;height:16px}
.rs-row.dis{opacity:.45;cursor:default}
.rs-row.dis .avatar{filter:none}
.rs-none{padding:14px 6px}
html[data-theme=dark] .ps-rec-i{background:rgba(var(--rc6),.14);color:var(--gold2)}
html[data-theme=dark] .ps-rec-c,html[data-theme=dark] .rs-sec,html[data-theme=dark] .rs-row.on b{color:var(--gold2)}
html[data-theme=dark] .rs-cur{background:var(--gold2)}
/* v43: no accidental pull-to-refresh (it kills the recitation); inner lists keep their own scrolling */
html,body{overscroll-behavior-y:none}

/* v43: silent dhikr card while a YouTube recitation plays */
.ytz{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:85;width:min(92vw,420px);display:flex;align-items:center;gap:10px;padding:10px 8px 10px 14px;background:var(--card);color:var(--ink);border:1px solid var(--gold);border-radius:16px;box-shadow:0 3px 10px rgba(0,0,0,.14);opacity:0;transition:opacity .2s}
.ytz.on{opacity:1}.ytz[hidden]{display:none}
.ytz-ic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--rc6),.12);color:var(--gold2)}.ytz-ic svg{width:18px;height:18px}
.ytz-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.ytz-b small{font-size:11.5px;color:var(--muted)}.ytz-b b{font-family:var(--ar),serif;font-size:19px;font-weight:700;line-height:1.5;color:var(--ink)}
.ytz-x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}.ytz-x svg{width:15px;height:15px}
@media (prefers-reduced-motion:reduce){.ytz{transition:none}}

/* v43: persistent YouTube host — inline over the page slot, or docked above the bottom bar */
.yth{position:absolute;z-index:3;border-radius:14px;overflow:hidden;background:#000}
.yth[hidden]{display:none}
.yth-v{width:100%;height:100%}.yth-in,.yth-in>div,.yth-in iframe{width:100%;height:100%;border:0;display:block}
.yth-bar{display:none}
.ny-vid .ny-tap{z-index:4}
.yth.dock{position:fixed;left:10px;right:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:216px;height:auto;z-index:70;background:var(--card);border:1px solid var(--gold);box-shadow:0 3px 10px rgba(0,0,0,.18)}
body.has-player .yth.dock{bottom:calc(160px + env(safe-area-inset-bottom,0px))}
.yth.dock .yth-v{height:121.5px;background:#000}
.yth.dock .yth-bar{display:flex;align-items:center;gap:4px;padding:4px 4px 4px 6px}
.yth-pp,.yth-x{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.yth-pp{background:rgba(var(--rc6),.14);color:var(--gold2)}.yth-pp .ico,.yth-x .ico{width:17px;height:17px}.yth-x{color:var(--muted)}
.yth-t{flex:1;min-width:0;border:0;background:none;text-align:start;padding:2px 4px;cursor:pointer;color:var(--ink);font:inherit;display:flex;flex-direction:column}
.yth-t b{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.yth-t small{font-size:10.5px;color:var(--muted)}
body.yh-dock .ytz{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 12px)}