:root{--bg:#f7f5ef;--sf:#fff;--tx:#1d2b2a;--mu:#5d6b69;--ac:#1f6f66;--bd:#dcd8cc;--hl:#fdeeb8;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111a19;--sf:#1a2625;--tx:#e8efed;--mu:#9bb0ac;--ac:#5cc4b6;--bd:#2f4340;--hl:#4a4318;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#111a19;--sf:#1a2625;--tx:#e8efed;--mu:#9bb0ac;--ac:#5cc4b6;--bd:#2f4340;--hl:#4a4318;color-scheme:dark}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.7 system-ui,"Segoe UI",Tahoma,sans-serif}
nav{display:flex;gap:4px;overflow-x:auto;padding:8px;background:var(--sf);border-bottom:1px solid var(--bd);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
nav button{flex:none;border:0;background:none;color:var(--mu);padding:8px 12px;border-radius:8px;font:inherit;cursor:pointer}
nav button[aria-current=true]{background:var(--ac);color:#fff}
main{max-width:720px;margin:0 auto;padding:16px}
.card{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:14px;margin:12px 0}
.btn{background:var(--ac);color:#fff;border:0;border-radius:8px;padding:8px 14px;font:inherit;cursor:pointer;margin:2px}
.btn.s{background:none;color:var(--ac);border:1px solid var(--ac)}
.q{font-family:"Amiri","Scheherazade New","Noto Naskh Arabic",serif;line-height:2.3}
.ay{cursor:pointer;border-radius:6px;padding:2px 4px}.ay.sel{background:var(--hl)}
.n{color:var(--ac);font-size:.7em;margin:0 4px}
.tag{display:inline-block;font-size:.78em;background:var(--hl);color:var(--tx);border-radius:6px;padding:1px 8px}
.mu{color:var(--mu);font-size:.9em}select,input{font:inherit;padding:7px;border-radius:8px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);max-width:100%}
label{display:block;margin:10px 0 2px}h2{margin:.2em 0}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.ok{color:var(--ac)}.bad{color:#b3261e}
:root{--bg:#f6f2e8;--sf:#fffdf8;--tx:#1b2a28;--mu:#4f5f5a;--ac:#17695e;--ac2:#b8923a;--ac2t:#7a5a12;--bd:#e4dcc8;--hl:#f9e9b0;--sh:0 2px 10px rgba(30,50,45,.07)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1716;--sf:#16221f;--tx:#e9f0ed;--mu:#9bb1ab;--ac:#5cc4b6;--ac2:#d9b660;--bd:#2a3f3b;--hl:#4a4116;--sh:0 2px 10px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--bg:#0e1716;--sf:#16221f;--tx:#e9f0ed;--mu:#9bb1ab;--ac:#5cc4b6;--ac2:#d9b660;--bd:#2a3f3b;--hl:#4a4116}
body{font-family:Tajawal,"Segoe UI",Tahoma,sans-serif;font-size:17px}
header{display:flex;align-items:center;gap:10px;padding:14px 18px;background:linear-gradient(135deg,#17695e,#0d4a43);color:#fff;position:sticky;top:env(safe-area-inset-top,0px);z-index:6}
header b{font-size:22px;letter-spacing:.5px}header small{opacity:.8;margin-inline-start:auto;font-size:13px}
header i{width:34px;height:34px;border-radius:50%;background:var(--ac2);display:grid;place-items:center;font-style:normal;color:#fff;font-size:18px}
nav{position:fixed;top:auto;bottom:0;left:0;right:0;justify-content:space-around;gap:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--bd);border-bottom:0;box-shadow:0 -4px 14px rgba(0,0,0,.08);z-index:7}
nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 2px;font-size:11.5px;border-radius:12px;line-height:1.35}
nav button span{font-size:19px;filter:grayscale(.6)}nav button[aria-current=true]{background:none;color:var(--ac);font-weight:700}nav button[aria-current=true] span{filter:none;transform:translateY(-1px)}
nav button[aria-current=true]::after{content:"";width:18px;height:3px;border-radius:3px;background:var(--ac2);margin-top:2px}
main{padding:18px 16px 110px}
h2{font-size:22px;color:var(--ac)}
.card{box-shadow:var(--sh);border-radius:16px;padding:16px}
.btn{border-radius:999px;padding:9px 20px;font-weight:500}.btn:active{transform:scale(.97)}
.hero{background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.14) 0 2px,transparent 3px) 0 0/26px 26px,linear-gradient(145deg,#17695e,#0d4a43);color:#fff;border-radius:20px;padding:22px 18px;margin:0 0 14px;box-shadow:var(--sh)}
.hero h1{margin:0 0 6px;font-size:26px}.hero p{margin:0;opacity:.9;font-size:15px}
.steps{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}.steps span{background:rgba(255,255,255,.16);border-radius:999px;padding:3px 12px;font-size:14px}
.q{font-family:Amiri,"Scheherazade New","Noto Naskh Arabic",serif;text-align:center}
.card.ay{border:1px solid var(--bd);transition:background .15s,border-color .15s}.card.ay.sel{background:var(--hl);border-color:var(--ac2);box-shadow:0 0 0 2px var(--ac2) inset}
.n{color:var(--ac2t);font-family:Tajawal,sans-serif;font-size:.62em}
.tag{background:color-mix(in srgb,var(--ac2) 25%,transparent);color:var(--tx);font-weight:500}
input[type=range]{width:100%;accent-color:var(--ac)}select,input{border-radius:10px;padding:9px 10px;background:var(--sf)}
@media(min-width:760px){nav{left:50%;right:auto;transform:translateX(-50%);width:560px;border-radius:18px 18px 0 0}}
.btn,nav button,header button{min-height:44px}
header button{background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:50%;width:44px;font-size:18px;cursor:pointer;margin-inline-start:6px}
header small{margin-inline-start:auto}
.bn{margin:6px 0 12px;text-align:center;padding:12px 10px;border:2px solid var(--ac2);border-radius:14px;background:linear-gradient(var(--sf),var(--sf)) padding-box;position:relative}
.bn::before,.bn::after{content:"❖";color:var(--ac2);position:absolute;top:50%;transform:translateY(-50%);font-size:16px}.bn::before{inset-inline-start:14px}.bn::after{inset-inline-end:14px}
.bn span{display:block;font:700 28px Amiri,serif;color:var(--ac)}.bn small{color:var(--mu);font-size:13px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.tiles button{background:var(--sf);border:1px solid var(--bd);border-radius:16px;box-shadow:var(--sh);padding:12px 4px;font:500 14px Tajawal,sans-serif;color:var(--tx);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:72px}
.tiles button:active{transform:scale(.96)}.tiles em{font-style:normal;font-size:24px}
@media(prefers-reduced-motion:no-preference){main>*{animation:up .35s both}@keyframes up{from{opacity:0;transform:translateY(8px)}}}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:8px 0}
.cwd{text-align:center;font-size:12px;color:var(--mu);padding:2px 0}
.cd{border:1px solid var(--bd);background:var(--sf);border-radius:10px;min-height:56px;padding:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--tx);font:inherit;cursor:pointer;gap:0}
.cd b{font-size:17px;line-height:1.3}.cd small{font-size:10px;color:var(--mu);line-height:1.2}
.cd.today{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac) inset}.cd.sel{background:var(--hl)}
.cd.empty{border:0;background:none;cursor:default;box-shadow:none}
.dots{display:flex;gap:2px;min-height:7px}.dt{display:inline-block;width:7px;height:7px;border-radius:50%}
.dt.general{background:var(--ac2)}.dt.sunni{background:#3b7ea1}.dt.imami{background:#8a5a9e}
.lg{font-size:13px;color:var(--mu);display:flex;gap:12px;flex-wrap:wrap;align-items:center}.lg .dt{margin-inline-end:4px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ml{display:block;width:100%;text-align:start;background:none;border:0;border-bottom:1px solid var(--bd);padding:8px 2px;font:inherit;color:var(--tx);cursor:pointer;min-height:44px}

/* a11y: dark-mode contrast fixes and larger controls */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ac2t:#d9b660}.btn{color:#0e1716}.bad{color:#ff8a80}}
:root[data-theme="dark"]{--ac2t:#d9b660}:root[data-theme="dark"] .btn{color:#0e1716}:root[data-theme="dark"] .bad{color:#ff8a80}
:root[data-theme="light"] .btn{color:#fff}
.btn.s{color:var(--ac)}
input[type=checkbox]{width:24px;height:24px;vertical-align:middle;accent-color:var(--ac)}
.ay:focus-visible{outline:3px solid var(--ac);outline-offset:2px}

textarea{font:inherit;padding:7px;border-radius:8px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);max-width:100%}summary{cursor:pointer;min-height:24px}