@font-face{font-family:Q;src:url(fonts/quran.woff2) format('woff2');font-display:swap}
@font-face{font-family:U;src:url(fonts/ui400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:U;src:url(fonts/ui700.woff2) format('woff2');font-weight:700;font-display:swap}
:root{--ink:#18352D;--em:#1F6B55;--deep:#123F34;--sage:#DDE9DF;--cream:#F8F5EC;--paper:#FFFDF7;--gold:#C6A15B;--mut:#738078;--bd:#E6E8E0;--err:#9B3B2F}
*{box-sizing:border-box;margin:0}body{font:16px/1.7 U,'Noto Sans Arabic',Tahoma,sans-serif;background:var(--cream);color:var(--ink);padding-bottom:calc(72px + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#top{display:flex;align-items:center;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 18px 10px}.lg{font-weight:700;color:var(--em);flex:1;font-size:18px}
main{padding:0 18px 24px;max-width:760px;margin:auto}h1.pt{font-size:22px;margin:8px 0 14px}h2{font-size:16px;margin:20px 0 8px}h3{font-size:15px;color:var(--em);margin:14px 0 4px}
.st{text-align:center;padding:60px 10px;color:var(--mut)}.src{font-size:12px;color:var(--mut);margin-top:8px}
.b,.b2{font:inherit;font-weight:700;border-radius:12px;padding:12px 20px;border:1.5px solid var(--em);cursor:pointer;min-height:46px}.b{background:var(--em);color:#fff}.b2{background:transparent;color:var(--em)}.b:disabled{opacity:.5}.dg{color:var(--err);border-color:var(--err)}
.hero{background:var(--deep) radial-gradient(circle at 110% -10%,#1F6B55 0,transparent 55%);color:#fff;border-radius:0 0 28px 28px;margin:0 -18px;padding:22px 22px 26px;display:grid;gap:12px}.hero h1{font-size:24px;line-height:1.5}.hero p{opacity:.88}.hero .b{background:var(--gold);border-color:var(--gold);color:var(--deep);justify-self:start}
.ring{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:conic-gradient(var(--gold) var(--p),rgba(255,255,255,.2) 0)}.ring i{width:50px;height:50px;border-radius:50%;background:var(--deep);display:grid;place-items:center;font-style:normal;font-size:13px}.pr{display:flex;gap:12px;align-items:center;font-size:14px}
.ln{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;border-bottom:1px solid var(--bd)}.ln small{color:var(--mut)}
.in{width:100%;font:inherit;padding:12px 14px;border:1.5px solid var(--bd);border-radius:12px;background:var(--paper);margin-bottom:8px}
.sl{list-style:none;padding:0}.sl a{display:flex;gap:14px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--bd)}.sl b{width:34px;height:34px;border-radius:10px;background:var(--sage);display:grid;place-items:center;font-size:14px}.sl span{flex:1;font-weight:700}.sl em{color:var(--mut);font-style:normal;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:var(--sage);padding:4px 12px;border-radius:99px;font-size:14px}
.rh{display:flex;align-items:center;gap:12px;margin:8px 0}.rh h1{flex:1;text-align:center;font-size:22px}.rh a,.rh span{color:var(--em);font-size:14px;min-width:64px}
.mu{background:var(--paper);border:1px solid var(--bd);border-radius:18px;padding:22px 18px;font-family:Q,serif;line-height:2.4;text-align:justify;margin:10px 0}.bs{text-align:center;color:var(--gold);margin-bottom:6px}
.ay{cursor:pointer;border-radius:8px;padding:0 2px}.ay:hover{background:var(--sage)}.ay.on{background:#F1E6C8}.ay i{font-style:normal;color:var(--gold);font-size:.8em}.hid .ay{filter:blur(9px)}.hid .ay.rv{filter:none}
.tl{display:flex;gap:10px;margin:10px 0}.tl>*{flex:1}.fl{display:grid;gap:6px;margin:14px 0;font-weight:700}.fl select,.fl input[type=number]{font:inherit;padding:10px;border:1.5px solid var(--bd);border-radius:10px;background:var(--paper)}.ck{display:flex;align-items:center;gap:8px}.days{display:flex;gap:6px;flex-wrap:wrap}.days label{background:var(--sage);padding:4px 12px;border-radius:99px;font-weight:400;font-size:14px}
.done{text-align:center;padding:40px 10px}.done h1{font-size:22px;margin-bottom:10px}.done p{color:var(--mut);margin-bottom:6px}
nav{position:fixed;inset:auto 0 0;display:flex;background:var(--paper);border-top:1px solid var(--bd);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:5}nav a{flex:1;display:grid;justify-items:center;font-size:12px;color:var(--mut);gap:2px}nav a.on{color:var(--em);font-weight:700}
#sh{position:fixed;inset:auto 0 0;max-height:78vh;overflow:auto;background:var(--paper);border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(18,63,52,.18);padding:10px 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s;z-index:9}#sh.on{transform:none}
.gr{width:44px;height:4px;border-radius:9px;background:var(--bd);margin:0 auto 10px}.mt{color:var(--gold);font-weight:700}.qa{font-family:Q,serif;font-size:26px;line-height:2.2;margin:4px 0 10px}.row{display:flex;gap:8px;flex-wrap:wrap}.row>*{padding:8px 14px;min-height:40px}.tf{line-height:2;font-size:17px}
#ts{position:fixed;inset:auto 16px 90px;background:var(--deep);color:#fff;padding:12px 16px;border-radius:12px;text-align:center;opacity:0;pointer-events:none;transition:.25s;z-index:20}#ts.on{opacity:1}
@media(min-width:1024px){body{padding:0 220px 0 0}nav{inset:0 0 0 auto;width:220px;flex-direction:column;justify-content:flex-start;gap:6px;padding:80px 12px;border-top:0;border-left:1px solid var(--bd)}nav a{display:flex;font-size:15px;padding:12px 14px;border-radius:12px;gap:12px}nav a.on{background:var(--sage)}main{max-width:1000px;padding:0 40px 40px}.hero{margin:0;border-radius:28px;padding:44px}.hero h1{font-size:34px}.home{display:grid;grid-template-columns:2fr 1fr;gap:28px;margin-top:24px}.mu{padding:40px 56px}#sh{inset:0 auto 0 0;width:420px;max-height:none;border-radius:0 22px 22px 0;transform:translateX(-110%)}#sh.on{transform:none}#ts{inset:auto auto 30px 30px}}
.gh{background:linear-gradient(#2F7A63,#1F6B55);margin:0 -18px;padding:14px 18px 84px;color:#fff;text-align:center}.gh h2{margin:0;font-size:17px}
.ar{background:#fff;border-radius:140px 140px 18px 18px/110px 110px 18px 18px;text-align:center;padding:38px 20px 20px;display:grid;gap:8px;justify-items:center;box-shadow:0 6px 24px rgba(18,63,52,.15);margin:-70px 6px 0;position:relative}.ar h1{font-size:22px}.ar p{color:var(--mut)}
.ar .ring{background:conic-gradient(var(--em) var(--p),var(--sage) 0)}.ar .ring i{background:#fff;color:var(--ink)}.ar .tl{width:100%}.ar .b,.ar .b2{text-align:center;padding-top:11px}
.tg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}.tg a{background:#fff;border-radius:14px;padding:16px 6px;display:grid;justify-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--em);box-shadow:0 1px 6px rgba(0,0,0,.06);position:relative}.tg svg{width:34px;height:34px}.bd{position:absolute;top:6px;left:8px;background:var(--gold);color:#fff;border-radius:99px;min-width:20px;font-size:12px;padding:0 6px;text-align:center}
.pgf{border:3px double var(--gold);padding:18px 14px;line-height:2.5;text-align:justify;text-align-last:center}.sb{border:2px solid var(--gold);border-radius:6px;text-align:center;margin:8px 0;background:var(--sage);font-weight:700;font-size:.7em;line-height:2}
.mh{display:flex;justify-content:space-between;color:var(--mut);font-size:14px;margin-top:8px}.pn{display:flex;align-items:center;justify-content:space-between;margin:10px 0}.pn b{font-size:18px}.pn .b2{min-width:110px}
.tabs{display:flex;gap:6px;margin-bottom:10px}.tabs a{flex:1;text-align:center;padding:8px;border-radius:99px;background:var(--sage)}.tabs a.on{background:var(--em);color:#fff;font-weight:700}.sl b{min-width:34px;width:auto;padding:0 8px}
.wd{width:100%;margin:8px 0}#tp{background:var(--paper);border:1px solid var(--bd);border-radius:14px;padding:6px 14px;margin-bottom:8px}section h2{color:var(--em)}
#mp{position:fixed;inset:auto 12px calc(74px + env(safe-area-inset-bottom));background:var(--deep);color:#fff;border-radius:14px;padding:6px 14px;display:flex;align-items:center;justify-content:space-between;z-index:6}#mp[hidden]{display:none}#mp .b2{color:#fff;border-color:#fff;min-height:36px;padding:4px 14px}
.qb{width:240px;height:240px;border-radius:50%;border:3px solid var(--gold);margin:20px auto;position:relative;background:var(--paper)}#nd{position:absolute;inset:10px;transition:transform .2s}#nd::before{content:'';position:absolute;top:0;left:50%;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:100px solid var(--em)}
@media(min-width:1024px){.gh{margin:0;border-radius:28px 28px 0 0}.ar{margin:-70px 80px 0}#mp{inset:auto 240px 20px auto;width:320px}}
.tf{white-space:pre-line}
