:root{--bg:#F2F0E8;--tx:#1D2B25;--mu:#55645D;--ac:#1E6B50;--b1:#8FCBAE;--b2:#EBC98A;--gb:rgba(255,255,255,.5);--gbr:rgba(255,255,255,.85);--ln:rgba(29,43,37,.12);--btf:#fff;--bl:22px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:'IBM Plex Sans Arabic',sans-serif;line-height:1.7;min-height:100vh}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.q{font-family:'Amiri Quran',serif}
.m{font-size:13px;color:var(--mu)}
#bg i{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none}
#bg i:nth-child(1){top:-90px;right:-70px;width:320px;height:320px;background:var(--b1);opacity:.8;animation:dr 26s ease-in-out infinite alternate}
#bg i:nth-child(2){bottom:60px;left:-90px;width:300px;height:300px;background:var(--b2);opacity:.7;animation:dr 30s ease-in-out infinite alternate-reverse}
@keyframes dr{to{transform:translate(30px,40px)}}
.g{background:var(--gb);border:1px solid var(--gbr);backdrop-filter:blur(var(--bl)) saturate(var(--sat,160%));-webkit-backdrop-filter:blur(var(--bl)) saturate(var(--sat,160%));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 30px rgba(0,0,0,.15)}
@media(prefers-reduced-transparency:reduce){.g{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}}
.wrap{position:relative;max-width:720px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) 20px 150px;display:flex;flex-direction:column;gap:18px}
header{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:28px;color:var(--ac)}
.ib{width:44px;height:44px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;color:var(--ac);cursor:pointer}
h1{margin:0;font-size:clamp(26px,5vw,34px);font-weight:600;line-height:1.3}
.sub{font-size:15px;color:var(--mu)}
.card{border-radius:24px;padding:22px}
.sb{display:flex;align-items:center;gap:10px;padding:0 18px;height:54px;border-radius:27px}
.sb input{flex:1;border:0;background:transparent;font-size:17px;outline:none;min-width:0}
.btn{height:46px;padding:0 22px;border:0;border-radius:23px;background:var(--ac);color:var(--btf);font-size:15px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.btn.o{background:var(--gb);border:1px solid var(--gbr);color:var(--tx);cursor:pointer}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.list{border-radius:24px;padding:6px 16px;display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:12px 4px;min-height:60px}
.row+.row{border-top:1px solid var(--ln)}
.row .w{font-size:26px;color:var(--ac);min-width:96px;max-width:46%;line-height:1.5}
.row .t{flex:1;min-width:0}
.row .t div:first-child{font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bd{width:38px;height:38px;border-radius:50%;border:1px solid var(--ac);color:var(--ac);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;flex:none}
.wd{font-size:clamp(44px,9vw,64px);line-height:1.5;color:var(--ac)}
.ay{font-size:clamp(22px,4vw,28px);line-height:2.1}
mark{display:inline-block;line-height:1.6;padding:.08em .32em .14em;border-radius:10px;background:color-mix(in srgb,var(--ac) 20%,transparent);color:inherit;text-decoration:none;-webkit-box-decoration-break:slice;box-decoration-break:slice}
.cols{display:grid;gap:16px}
@media(min-width:800px){.cols{grid-template-columns:1fr 1fr}.wrap{max-width:900px}}
nav{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 40px));height:64px;border-radius:32px;display:flex;justify-content:space-around;align-items:center;z-index:5}
nav a{min-height:44px;padding:0 14px;display:flex;align-items:center;border-radius:22px;font-size:13px}
nav a.on{background:var(--ac);color:var(--btf);font-weight:500}
#sh{position:fixed;inset:0;z-index:10;display:none;background:rgba(0,0,0,.25)}
#sh.open{display:block}
#sh .p{position:absolute;left:12px;right:12px;bottom:12px;max-width:520px;margin:0 auto;border-radius:32px;padding:20px 22px;display:flex;flex-direction:column;gap:18px;max-height:calc(100% - 24px);overflow:auto;background:var(--bg)}
.seg{display:flex;border-radius:22px;padding:4px;gap:4px}
.seg button{flex:1;height:38px;border:0;border-radius:18px;background:none;cursor:pointer;font-size:14px}
.seg button.on{background:var(--ac);color:var(--btf);font-weight:500}
.arts{display:flex;gap:12px;align-items:flex-start}
.opt2{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border-radius:18px;border:1.5px solid var(--ln);background:transparent;color:var(--tx);cursor:pointer;font-size:13px;min-height:44px}
.opt2:nth-child(1){flex:1.25}
.opt2:nth-child(2){flex:1}
.opt2.on{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac)}
.artw{container-type:inline-size;width:100%}
.art{width:100%;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4cqw;padding:8%;background:linear-gradient(160deg,color-mix(in srgb,var(--b1) 50%,var(--bg)),var(--bg) 72%);color:var(--tx)}
.art.st{aspect-ratio:9/16}
.art.rg{aspect-ratio:4/5}
.art .lg3{font-size:7cqw;color:var(--ac)}
.art .pl{font-size:5cqw;padding:1cqw 4cqw;border-radius:99px;border:1px solid color-mix(in srgb,var(--ac) 55%,transparent);background:color-mix(in srgb,var(--ac) 18%,transparent)}
.art .aw{font-size:13cqw;line-height:1.9;color:var(--ac)}
.art .av{font-size:6cqw;line-height:2.1}
.art .am{font-size:5.4cqw;line-height:1.8;opacity:.92;border-top:1px dashed var(--ln);padding-top:3cqw}
.gs{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border-radius:22px}
.gs input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:44px;background:none;cursor:pointer;margin:0}
.gs input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--ln)}
.gs input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--ln)}
.gs input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--ac);border:2px solid var(--bg);margin-top:-9px}
.gs input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--ac);border:2px solid var(--bg)}
.gs input[type=range]:focus-visible{outline:2px solid var(--ac);outline-offset:4px;border-radius:12px}
.gs .lbl{font-size:14px;color:var(--mu);min-width:38px;text-align:center}
.sw{display:flex;flex-wrap:wrap;gap:14px 6px;justify-content:space-between}
.sw button{background:none;border:0;padding:0;width:62px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:12px;color:var(--mu)}
.sw i{width:48px;height:48px;border-radius:50%;display:block}
.sw .on i{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ac)}
.tg{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.tg button{width:48px;height:28px;border-radius:14px;border:0;background:var(--ln);position:relative;cursor:pointer}
.tg button:after{content:"";position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;background:var(--tx);transition:transform .2s}
.tg button.on{background:var(--ac)}
.tg button.on:after{transform:translateX(-20px);background:var(--btf)}
.sh-def-d{--p0:url(assets/tiles/def-day-1.webp);--p1:url(assets/tiles/def-day-2.webp);--p2:url(assets/tiles/def-day-3.webp);--p3:url(assets/tiles/def-day-4.webp);--p4:url(assets/tiles/def-day-5.webp);--p5:url(assets/tiles/def-day-6.webp);}.sh-def-n{--p0:url(assets/tiles/def-night-1.webp);--p1:url(assets/tiles/def-night-2.webp);--p2:url(assets/tiles/def-night-3.webp);--p3:url(assets/tiles/def-night-4.webp);--p4:url(assets/tiles/def-night-5.webp);--p5:url(assets/tiles/def-night-6.webp);}.sh-lav-d{--p0:url(assets/tiles/lav-day-1.webp);--p1:url(assets/tiles/lav-day-2.webp);--p2:url(assets/tiles/lav-day-3.webp);--p3:url(assets/tiles/lav-day-4.webp);--p4:url(assets/tiles/lav-day-5.webp);--p5:url(assets/tiles/lav-day-6.webp);}.sh-lav-n{--p0:url(assets/tiles/lav-night-1.webp);--p1:url(assets/tiles/lav-night-2.webp);--p2:url(assets/tiles/lav-night-3.webp);--p3:url(assets/tiles/lav-night-4.webp);--p4:url(assets/tiles/lav-night-5.webp);--p5:url(assets/tiles/lav-night-6.webp);}.sh-sun-d{--p0:url(assets/tiles/sun-day-1.webp);--p1:url(assets/tiles/sun-day-2.webp);--p2:url(assets/tiles/sun-day-3.webp);--p3:url(assets/tiles/sun-day-4.webp);--p4:url(assets/tiles/sun-day-5.webp);--p5:url(assets/tiles/sun-day-6.webp);}.sh-sun-n{--p0:url(assets/tiles/sun-night-1.webp);--p1:url(assets/tiles/sun-night-2.webp);--p2:url(assets/tiles/sun-night-3.webp);--p3:url(assets/tiles/sun-night-4.webp);--p4:url(assets/tiles/sun-night-5.webp);--p5:url(assets/tiles/sun-night-6.webp);}.sh-neo-d{--p0:url(assets/tiles/neo-day-1.webp);--p1:url(assets/tiles/neo-day-2.webp);--p2:url(assets/tiles/neo-day-3.webp);--p3:url(assets/tiles/neo-day-4.webp);--p4:url(assets/tiles/neo-day-5.webp);--p5:url(assets/tiles/neo-day-6.webp);}.sh-neo-n{--p0:url(assets/tiles/neo-night-1.webp);--p1:url(assets/tiles/neo-night-2.webp);--p2:url(assets/tiles/neo-night-3.webp);--p3:url(assets/tiles/neo-night-4.webp);--p4:url(assets/tiles/neo-night-5.webp);--p5:url(assets/tiles/neo-night-6.webp);}.sh-min-d{--p0:url(assets/tiles/min-day-1.webp);--p1:url(assets/tiles/min-day-2.webp);--p2:url(assets/tiles/min-day-3.webp);--p3:url(assets/tiles/min-day-4.webp);--p4:url(assets/tiles/min-day-5.webp);--p5:url(assets/tiles/min-day-6.webp);}.sh-min-n{--p0:url(assets/tiles/min-night-1.webp);--p1:url(assets/tiles/min-night-2.webp);--p2:url(assets/tiles/min-night-3.webp);--p3:url(assets/tiles/min-night-4.webp);--p4:url(assets/tiles/min-night-5.webp);--p5:url(assets/tiles/min-night-6.webp);}
.dy{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px}
.dy.ok{background:var(--ac);color:var(--btf);border-color:var(--ac)}
.dy.cur{border:2px solid var(--ac);color:var(--ac);box-shadow:0 0 18px var(--ac)}
.bar{height:6px;border-radius:3px;background:var(--ln)}.bar i{display:block;height:6px;border-radius:3px;background:var(--ac)}
.opt{display:block;width:100%;text-align:right;padding:14px 18px;border-radius:18px;font-size:16px;cursor:pointer;line-height:1.7}
.opt.ok{background:var(--ac);color:var(--btf);border-color:var(--ac)}
.opt.bad{border-color:#d4553f;color:#d4553f}
.dy{position:relative;padding:0;font:inherit;font-weight:600;cursor:pointer}.dy .bg{position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:var(--bg);color:var(--ac);border:1px solid var(--ac);display:flex;align-items:center;justify-content:center}.dy.lk{opacity:.6;color:var(--mu);cursor:not-allowed}.dy.lk .bg{color:var(--mu);border-color:var(--mu)}.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);padding:10px 18px;border-radius:22px;font-size:14px;z-index:20;white-space:nowrap;display:flex;align-items:center;gap:8px}.lg{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--mu)}.lg .li{display:inline-flex;align-items:center;gap:8px}.lg .li .sw{width:24px!important;height:24px!important;border-radius:8px!important;padding:0;flex:none;display:inline-flex;align-items:center;justify-content:center;cursor:default}.lg .li .sw:not(.cur){box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.18)}.lg .li .sw .bg{width:13px;height:13px;top:-4px;right:-4px}.lg .li .sw .bg svg{width:8px;height:8px}
.ld{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .4s}.ld.gone{opacity:0;pointer-events:none}.ld .logo{font-size:44px}.lb{width:120px;height:3px;background:var(--ln);border-radius:2px;overflow:hidden}.lb i{display:block;height:100%;width:40%;background:var(--ac);animation:ldm 1.1s ease-in-out infinite}@keyframes ldm{from{transform:translateX(120%)}to{transform:translateX(-260%)}}
nav.g{display:grid;grid-template-columns:repeat(4,1fr);padding:6px;transition:transform .35s cubic-bezier(.3,.8,.3,1)}nav.g.hide{transform:translateX(-50%) translateY(120px)}
nav.g .ind{position:absolute;top:6px;bottom:6px;right:6px;width:calc((100% - 12px)/4);border-radius:26px;background:var(--ac);transform:translateX(calc(var(--i,0)*-100%));transition:transform .45s cubic-bezier(.34,1.4,.64,1)}nav.g.none .ind{opacity:0}
nav.g .t{position:relative;z-index:1;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:0;min-height:0;font-size:11px;border-radius:26px;transition:transform .15s,color .25s}nav.g .t.on{background:none;color:var(--btf)}nav.g .t:active{transform:scale(.9)}nav.g .t.on svg{stroke-width:2.3;fill:rgba(255,255,255,.18);animation:pop .4s}@keyframes pop{40%{transform:scale(1.2)}}
.dt{position:absolute;top:7px;right:calc(50% - 18px);width:10px;height:10px;border-radius:50%;background:#d4553f;border:2px solid var(--bg)}
.pg>*:not(header){animation:pgin .25s ease-out}.pgs>*:not(header){animation:pgs .3s cubic-bezier(.3,.8,.3,1)}@keyframes pgin{from{transform:translateY(6px)}}@keyframes pgs{from{transform:translateX(-18px)}}
.lg2 p{margin:0 0 12px;line-height:2}.strip{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:20px;font-size:14px}.strip>span:first-child{flex:1;line-height:1.6}.so{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:22px;font-size:13px;color:var(--ac)}.strip .so{padding:0;width:44px;height:44px;justify-content:center}.strip .so span{display:none}.strip button{width:36px;height:36px;border:0;background:none;font-size:22px;color:var(--mu);cursor:pointer}
.ft{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--ln);text-align:center}.fs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.fs .so{border:1px solid var(--ln)}.fl{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;font-size:13px}.fl a{padding:8px 0}
.opts{display:flex;flex-direction:column;gap:12px}
@media(min-width:601px){.wrap{max-width:760px;padding-left:32px;padding-right:32px}.cg{grid-template-columns:repeat(10,1fr)!important}.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}.sl,.rs{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}.sl .row,.rs .row{border-top:0;border-bottom:1px solid var(--ln)}}
@media(min-width:1025px){.wrap{max-width:1080px;padding-top:100px}nav.g{top:18px;bottom:auto}nav.g.hide{transform:translateX(-50%) translateY(-120px)}.sl,.rs{grid-template-columns:1fr 1fr 1fr}.sb,.strip{max-width:720px;width:100%;margin-left:auto;margin-right:auto}.acts{justify-content:center}#sh .p{top:50%;bottom:auto;transform:translateY(-50%);max-width:480px}}
.cols .card{display:flex;flex-direction:column;gap:8px}.cols .card .wd{margin-bottom:4px}.cols .card:first-child>div:last-child{line-height:1.9}
.pill{align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:24px;font-size:20px;font-weight:600;color:var(--tx);background:color-mix(in srgb,var(--ac) 20%,transparent);border:1px solid color-mix(in srgb,var(--ac) 55%,transparent)}
.cw{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"c c" "p n";gap:14px}
.cw .cols{grid-area:c;align-items:stretch}
.cw .pv{grid-area:p;justify-self:start}
.cw .nx{grid-area:n;justify-self:end}
.pnb{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:24px;font-size:14px;cursor:pointer;color:var(--ac);text-decoration:none;justify-content:center}
.cw .ay{font-size:clamp(21px,3.6vw,25px);line-height:2.1}
.cw .vr{margin-top:8px;padding-top:12px;border-top:1px dashed var(--ln)}
.cw .mn{font-size:20px;line-height:1.9}
.acts.v3{justify-content:center}
@media(max-width:600px){.acts.v3 .btn{flex:1 1 100%}}
@media(min-width:801px){.cw{grid-template-columns:auto 1fr auto;grid-template-areas:"p c n";align-items:center}.pnb{flex-direction:column;width:104px;min-height:112px;padding:14px 8px;text-align:center;justify-content:center}}
.cw.snav>.list{grid-area:c}
@media(max-width:800px){.cw.snav{grid-template-areas:"p n" "c c"}}
.shade h1{font-family:'Amiri Quran',serif;font-weight:400;font-size:clamp(34px,7vw,60px);line-height:1.35}
.shade .bd,.shade .lg{font-family:'IBM Plex Mono','IBM Plex Sans Arabic',monospace}
.shade .g,.shade .card,.shade .sb,.shade .strip,.shade .toast,.shade .seg,.shade .list,.shade .ib{background:var(--sf);border:1px solid var(--sbd);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.shade .card,.shade .list,.shade .strip{border-radius:26px}
.shade nav.g{background:var(--sf);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.shade nav.g .ind{background:var(--tx)}.shade nav.g .t.on{color:var(--bg)}.shade .dt{border-color:var(--sf)}
.shade .btn{background:var(--tx);color:var(--bg)}.shade .btn.o{background:transparent;color:var(--tx);border:1px solid var(--ln)}
.shade #bg i:nth-child(1){top:-24%;right:-20%;width:140%;height:46%;border-radius:50%;background:radial-gradient(ellipse at center,var(--tc) 0%,transparent 68%);filter:blur(46px);opacity:1;animation:none}
.shade #bg i:nth-child(2){bottom:6%;left:-18%;width:300px;height:300px;background:radial-gradient(circle,var(--tc) 0%,transparent 68%);filter:blur(50px);opacity:.55;animation:none}
.shade .wd{color:var(--ac)}.shade .row .w{color:var(--ac)}
.shade .cols .card:first-child{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--tc) 0,color-mix(in srgb,var(--tc) 38%,var(--sf)) 42px,var(--sf) 90px) no-repeat border-box var(--sf);padding:96px 22px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.shade .list.sl{background:none;border:0;padding:0;border-radius:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shade .sl .row{position:relative;display:grid;grid-template-columns:34px 1fr;column-gap:10px;row-gap:0;align-content:center;align-items:center;aspect-ratio:auto;min-height:84px;border:0;border-radius:26px;padding:12px 14px;gap:0;background:linear-gradient(155deg,color-mix(in srgb,var(--tc) 24%,var(--sf)),var(--sf) 62%)!important}
.shade .sl .row+.row{border-top:0}
.shade .sl .row:nth-child(6n+2),.shade .dy:nth-child(6n+2){background-image:var(--p1)}.shade .sl .row:nth-child(6n+3),.shade .dy:nth-child(6n+3){background-image:var(--p2)}.shade .sl .row:nth-child(6n+4),.shade .dy:nth-child(6n+4){background-image:var(--p3)}.shade .sl .row:nth-child(6n+5),.shade .dy:nth-child(6n+5){background-image:var(--p4)}.shade .sl .row:nth-child(6n),.shade .dy:nth-child(6n){background-image:var(--p5)}
.shade .sl .bd{position:static;grid-row:1/3;width:34px;height:34px;border:0;background:var(--bdbg);color:var(--bdc);font-size:12px}
.shade .sl .q{grid-column:2;text-align:start;font-size:25px;flex:none;line-height:1.5}.shade .sl .m{grid-column:2;text-align:start;font-size:12px}.shade .sl svg{display:none}
.shade .dy{width:44px!important;height:44px!important;aspect-ratio:auto;border-radius:12px!important;border:0;color:var(--tx);align-items:center;padding:0;background:var(--sf)!important}
.shade .dy.ok{background:linear-gradient(180deg,var(--tc),color-mix(in srgb,var(--tc) 40%,var(--sf)))!important}.shade .dy.cur{background:var(--sf)!important;border:2px solid var(--tx);box-shadow:0 0 22px var(--tc)}.shade .dy:not(.ok):not(.cur):not(.lk){filter:saturate(.5) brightness(.8)}.shade .dy.lk{background:var(--sf)!important;filter:none;color:var(--mu)}
.shade .dy .bg{background:var(--bg);color:var(--ac);border-color:var(--ac)}
.shade .cg{grid-template-columns:repeat(auto-fill,44px)!important;justify-content:center;gap:12px!important}.shade .opt{border-radius:22px}.shade .opt.ok{background:linear-gradient(180deg,var(--tc),var(--sf));color:var(--tx);border:1px solid var(--tc)}.shade .opt.bad{border-color:var(--mu);color:var(--mu);opacity:.7}
.shade #sh .p{background:var(--bg)}
@media(min-width:601px){.shade .list.sl{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1025px){.shade .list.sl{grid-template-columns:repeat(4,1fr)}.shade .cols .card:first-child{background:linear-gradient(180deg,var(--tc) 0,color-mix(in srgb,var(--tc) 38%,var(--sf)) 52px,var(--sf) 110px) no-repeat border-box var(--sf);padding-top:118px}}
/* ===== Phase B ===== */
/* B2: search results and surah word rows are individual cards */
.list.rs{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;border-radius:0;gap:12px;overflow:visible}
.list.rs:after{display:none}
.list.rs .row{margin:0;padding:14px 18px;border-radius:22px;min-height:76px;position:relative;transition:transform .3s,box-shadow .3s,border-color .3s;border:1px solid color-mix(in srgb,var(--gbr) 60%,transparent);background:linear-gradient(145deg,var(--gb),color-mix(in srgb,var(--gb) 40%,transparent) 50%,var(--gb));backdrop-filter:blur(var(--bl)) saturate(200%) brightness(1.08);-webkit-backdrop-filter:blur(var(--bl)) saturate(200%) brightness(1.08);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.55),inset 0 -1px 1px rgba(255,255,255,.2),0 14px 34px rgba(0,0,0,.22)}
.shade .list.rs .row{background:linear-gradient(155deg,color-mix(in srgb,var(--tc) 16%,var(--sf)),var(--sf) 62%);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--sbd);box-shadow:none}
#res .list.rs{grid-template-columns:1fr;max-width:720px;width:100%;margin-inline:auto}
@media(hover:hover){.list.rs a.row:hover{background-color:transparent;transform:translateY(-1.5px)}.shade .list.rs a.row:hover{border-color:var(--tc);box-shadow:0 4px 12px rgba(0,0,0,.14)}}
.list:not(.sl):not(.rs) .row{padding-inline:12px;margin-inline:-12px;border-radius:16px;transition:background .25s}
@media(hover:hover){.list:not(.sl):not(.rs) a.row:hover{background:color-mix(in srgb,var(--ac) 10%,transparent);transform:none;box-shadow:none;border-color:var(--ln)}}
/* B3: shade surah picker very light hover */
@media(hover:hover){.shade .list.sl a.row:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.12)}}
/* B4: per-theme interaction (hover / press / focus) */
.btn{gap:8px}.btn svg{flex:none}
.btn,.opt,.pnb,.chip,a.g,button.g{transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .3s}
@media(hover:hover){:is(a.g,button.g,.btn.o,.opt,.pnb,.chip):hover{box-shadow:inset 0 1.5px 1px rgba(255,255,255,.55),0 10px 26px color-mix(in srgb,var(--ac) 18%,transparent)}}
:is(a.g,button.g,.btn,.opt,.pnb,.chip):active{transform:scale(.96)}
/* E2: quiz options never move on press, and every option reserves the ok/bad glyph slot from the start */
.opt:active{transform:none!important}
.ogi{display:inline-block;width:24px;height:16px;vertical-align:-2px}
.so{position:relative;isolation:isolate}
.so:before{content:"";position:absolute;inset:-2px;border-radius:50%;z-index:-1;opacity:0;transform:scale(.55);transition:.4s cubic-bezier(.3,1.4,.5,1);background:radial-gradient(circle,color-mix(in srgb,var(--ac) 55%,transparent),color-mix(in srgb,var(--ac) 18%,transparent) 65%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--ac) 45%,transparent)}
.so:hover:before,.so:focus-visible:before,.so:active:before{opacity:1;transform:scale(1.05)}
.shade :is(a.g,button.g,.btn,.opt,.pnb,.chip,.row,.so){transition:transform .25s,border-color .25s,background .25s,box-shadow .25s}
@media(hover:hover){.shade :is(a.g,button.g,.btn.o,.opt,.pnb,.chip):hover{border-color:var(--tc);background-color:color-mix(in srgb,var(--tc) 14%,var(--sf));box-shadow:0 10px 24px rgba(0,0,0,.3)}.shade a.row:hover{border-color:var(--tc);background-color:color-mix(in srgb,var(--tc) 14%,var(--sf));box-shadow:0 10px 24px rgba(0,0,0,.3);transform:translateY(-2px)}}
.shade :is(a.g,button.g,.btn,.opt,.pnb,.chip):active{transform:translateY(1px) scale(.98)}
.shade .so{border-radius:14px}.shade .so:before{inset:0;width:100%;height:100%;border-radius:14px;transform:scale(.7);box-shadow:none;background:color-mix(in srgb,var(--tc) 38%,var(--sf))}
.shade .so:hover:before,.shade .so:focus-visible:before,.shade .so:active:before{transform:scale(1)}
.cols .card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
@media(hover:hover){.cols .card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)}.shade .cols .card:hover{border-color:color-mix(in srgb,var(--tc) 55%,var(--sbd))}}
/* B5: floating settings gear (above content, below open sheets) */
#gear{position:fixed;top:max(14px,env(safe-area-inset-top));inset-inline-end:16px;z-index:8;transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .2s ease,visibility .2s ease}
#gear:hover,#gear:active,#gear:focus-visible{transform:rotate(60deg)}
/* ===== Phase C ===== */
/* F1: desktop-only gear inset just outside the content column (never over nav/content) */
@media(min-width:1025px){#gear{inset-inline-end:max(16px,calc((100vw - 1080px)/2 - 56px))}}
/* F2: prev/next identical structure - icon above text on desktop, same height */
@media(min-width:801px){.cw .nx{flex-direction:column-reverse}.cw .pnb{height:116px}}
/* F3: the filled draw button inverts with its outlined siblings on hover/focus */
@media(hover:hover){
.acts:has([data-a="rnd"]) [data-a="rnd"]:hover,.acts:has([data-a="rnd"]) [data-a="rnd"]:focus-visible{box-shadow:inset 0 1.5px 1px rgba(255,255,255,.55),0 8px 24px color-mix(in srgb,var(--ac) 30%,transparent)}
.acts:has([data-a="rnd"]) .btn.o:hover,.acts:has([data-a="rnd"]) .btn.o:focus-visible{background:var(--ac);color:var(--btf);border-color:var(--ac);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.55),0 10px 26px color-mix(in srgb,var(--ac) 18%,transparent)}
.shade .acts:has([data-a="rnd"]) [data-a="rnd"]:hover,.shade .acts:has([data-a="rnd"]) [data-a="rnd"]:focus-visible{background:transparent;color:var(--tx);border:1px solid var(--ln);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.shade .acts:has([data-a="rnd"]) .btn.o:hover,.shade .acts:has([data-a="rnd"]) .btn.o:focus-visible{background:var(--tx);color:var(--bg);border-color:var(--tx);box-shadow:0 10px 24px rgba(0,0,0,.3)}
}
/* F4: social strip gets a very light hover shadow, never a movement */
.strip{transition:box-shadow .35s}
@media(hover:hover){.strip:hover{box-shadow:0 6px 16px rgba(0,0,0,.12)}.shade .strip:hover{box-shadow:0 6px 16px rgba(0,0,0,.32)}}
/* J1: search collapse */
/* K4b: overflow was permanently hidden on the action rows, clipping the button
   shadow into a straight grey band (the .acts box bottom == button bottom, so a
   hover/focus shadow with a 24px blur is cut off). Clip only while collapsing. */
.acts, .strip{transition:height .2s ease,margin .2s ease,padding .2s ease,opacity .2s ease}
.searching .acts, .searching .strip{height:0!important;margin:0!important;padding-top:0!important;padding-bottom:0!important;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden}
.searching .acts, .searching .strip[aria-hidden="true"]{display:block}

/* F5: shade header - roomier tagline line and a fixed gap to the counts line */
.shade h1{line-height:1.5}
.shade h1+.sub{margin-top:8px}
/* H4: surah heading - the name block over the count block, then the words row */
.shd{display:flex;flex-direction:column}
.shd>h1{line-height:1.7}
.shd>.sub{margin-top:8px}
.shd>.cw.snav{margin-top:16px}
/* C1: shared roulette overlay (glass translucent / shade solid) */
.rou{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.4);opacity:0;transition:opacity .25s}
.rou.in{opacity:1}
.roucard{width:100%;max-width:340px;border-radius:28px;padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.rout{font-size:22px;font-weight:600}
.rous{font-size:14px;color:var(--mu)}
.reel{width:100%;height:168px;overflow:hidden;position:relative;margin:6px 0;border-radius:18px;background:color-mix(in srgb,var(--ac) 6%,transparent);border:1px solid var(--ln)}
.reelstrip{display:flex;flex-direction:column;transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.reelrow{height:56px;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--ac);flex:none;border-radius:14px}
.reelrow.pick{box-shadow:0 0 0 2px var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent)}
.rouacts{display:flex;justify-content:center;width:100%;margin-top:2px}
.rousnd{font-size:12px;color:var(--mu)}
.shade .reel{background:color-mix(in srgb,var(--tc) 10%,var(--sf))}
.shade .reelrow{color:var(--tx)}
.shade .reelrow.pick{box-shadow:0 0 22px var(--tc);background:color-mix(in srgb,var(--tc) 22%,var(--sf))}
/* D3: challenge day cards - stacked, collapsible (no roulette, no next) */
.dw{display:flex;flex-direction:column;gap:14px}
.dh{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"h h" "p n";gap:12px;align-items:center}
.dh h1{grid-area:h;text-align:center}
.dh .pv{grid-area:p;justify-self:start}
.dh .nx{grid-area:n;justify-self:end}
@media(min-width:601px){.dh{grid-template-columns:1fr auto 1fr;grid-template-areas:"p h n"}}
.dprog{display:flex;flex-direction:column;gap:10px}
.dcount{font-size:15px}
.dcard{width:100%;display:flex;flex-direction:column;gap:0;border-radius:22px;padding:14px 16px;min-height:64px;text-align:start;cursor:pointer;font:inherit;color:var(--tx);background:var(--gb);border:1px solid var(--gbr);backdrop-filter:blur(var(--bl));-webkit-backdrop-filter:blur(var(--bl));transition:box-shadow .3s,border-color .3s}
.dcard .dhead{display:flex;align-items:center;gap:12px}
.dcard .bdg{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent);border:1px solid color-mix(in srgb,var(--ac) 26%,transparent)}
.dcard .chev{width:36px;height:36px;border-radius:50%;display:inline-flex;flex:none;align-items:center;justify-content:center;color:var(--mu);border:1px solid color-mix(in srgb,var(--mu) 30%,transparent);transition:transform .3s}
.dcard.open .chev{transform:rotate(180deg)}
.dcard .dbody{display:none;flex-direction:column;gap:10px;text-align:center;margin-top:12px}
.dcard.open .dbody{display:flex}
.dword{font-size:25px;line-height:1.9;color:var(--ac);flex:1;text-align:start;transform:translateY(-6px)}
.shade .dcard{background:var(--sf);border:1px solid var(--sbd);backdrop-filter:none;-webkit-backdrop-filter:none}
.dw [data-a="done"]{min-width:140px}
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}
.dw .dcard{animation:rise .5s cubic-bezier(.3,1.2,.5,1) both;animation-delay:var(--d,0ms)}
@media(hover:hover){.dcard:hover{box-shadow:0 6px 16px rgba(0,0,0,.12)}.shade .dcard:hover{box-shadow:0 6px 16px rgba(0,0,0,.32)}}
@media(hover:hover){.dcard:hover{box-shadow:0 6px 16px rgba(0,0,0,.12)}.shade .dcard:hover{box-shadow:0 6px 16px rgba(0,0,0,.32)}}
/* K4: measurement showed the small repeated controls were the bulk of the
   per-route blurred layers (up to 37 visible on /challenge: 34 day dots, 4 quiz
   options, 3 word rows). Blur is kept on the large surfaces - the cards, the
   strip, the word list, the nav and the roulette card - while these controls
   stay translucent and drop the (expensive) backdrop filter. */
.btn,.opt,.row,.pnb,.ib,.sb,.dy,.chip,.so,.seg,.toast{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* K3: ALL motion is gated by exactly ONE class (.cm, set on <html> for the static
   pages and on <body> in the app) and ONE media query (device
   prefers-reduced-motion). The two blocks below carry identical declarations, so
   the toggle and the OS setting behave identically: entrance animations off, no
   hover lift, the roulette becomes a quick fade (<=400ms), no challenge stagger,
   the gear does not rotate, transitions are removed (<=1ms), the glow blobs stay
   visible but static, and the nav does not slide. Sound is untouched. */
.cm #bg i,.cm .pg>*:not(header),.cm .pgs>*:not(header),.cm nav.g,.cm nav.g .ind,.cm nav.g .t,.cm nav.g .t:active,.cm nav.g .t.on svg,.cm .lb i,.cm #gear,.cm .btn,.cm .opt,.cm .pnb,.cm .chip,.cm a.g,.cm button.g,.cm .cols .card,.cm .list.rs .row,.cm .list:not(.sl):not(.rs) .row,.cm .so,.cm .so:before,.cm .shade :is(a.g,button.g,.btn,.opt,.pnb,.chip,.row,.so),.cm .acts,.cm .strip,.cm .dcard,.cm .dcard .chev,.cm .ld,.cm .tg button:after,.cm .rou{animation:none;transition:none}
.cm #gear:hover,.cm #gear:active,.cm #gear:focus-visible,.cm .dcard.open .chev,.cm nav.g .t:active{transform:none}
.cm :is(a.g,button.g,.btn,.opt,.pnb,.chip,a.row,.cols .card):hover,.cm :is(a.g,button.g,.btn,.opt,.pnb,.chip):active,.cm a.row:hover{transform:none!important}.cm .so:before{transform:none!important}
.cm .reelstrip{transition:opacity .3s}
@media(prefers-reduced-motion:reduce){
#bg i,.pg>*:not(header),.pgs>*:not(header),nav.g,nav.g .ind,nav.g .t,nav.g .t:active,nav.g .t.on svg,.lb i,#gear,.btn,.opt,.pnb,.chip,a.g,button.g,.cols .card,.list.rs .row,.list:not(.sl):not(.rs) .row,.so,.so:before,.shade :is(a.g,button.g,.btn,.opt,.pnb,.chip,.row,.so),.acts,.strip,.dcard,.dcard .chev,.ld,.tg button:after,.rou{animation:none;transition:none}
#gear:hover,#gear:active,#gear:focus-visible,.dcard.open .chev,nav.g .t:active{transform:none}
:is(a.g,button.g,.btn,.opt,.pnb,.chip,a.row,.cols .card):hover,:is(a.g,button.g,.btn,.opt,.pnb,.chip):active,a.row:hover{transform:none!important}.so:before{transform:none!important}
.reelstrip{transition:opacity .3s}
}

footer{margin-top:26px;text-align:center;border-top:1px solid var(--ln);padding-top:16px}
.fl{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:8px 0;font-size:14px}
.para{font-size:17px;line-height:1.95;margin:0 0 14px}
.legal{max-width:680px;margin:0 auto;padding:22px 18px 60px}
h2{font-size:20px;margin:6px 0 12px;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:999px;font-size:20px;color:var(--ac);cursor:pointer}