:root{
  --bg:#EEF0EC;--paper:#FBFBF8;--ink:#1B2623;--muted:#5C6B66;--line:#D7DDD8;
  --green:#14423F;--green-2:#1E5A55;--green-soft:#E2ECE9;--on-green:#F4F1E6;
  --gold:#A9822E;--gold-soft:#F4EBD6;
  --logo:"Aref Ruqaa","Amiri",serif;--display:"Amiri","Traditional Arabic",serif;--ui:"Readex Pro",Tahoma,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0F1614;--paper:#17211E;--ink:#E5ECE8;--muted:#9BABA5;--line:#2B3A35;
  --green:#0E2E2B;--green-2:#7CC4B5;--green-soft:#1C332F;--on-green:#F1EDE0;--gold:#DDB766;--gold-soft:#352C1B;color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.85;direction:rtl;padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.45;margin:0;text-wrap:balance}
h1{font-size:1.9rem;color:var(--green-2)}h2{font-size:1.55rem}h3{font-size:1.25rem;color:var(--green-2)}h4{font-size:1.05rem;color:var(--gold)}
p{margin:0}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.muted{color:var(--muted);font-size:.92rem}
.band{position:relative;background:var(--green);color:var(--on-green);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px max(16px,env(safe-area-inset-right)) 14px max(16px,env(safe-area-inset-left));padding-top:max(14px,env(safe-area-inset-top))}
.band::before{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23E9D9A8' stroke-width='1.2'%3E%3Crect x='14' y='14' width='28' height='28'/%3E%3Crect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3C/g%3E%3C/svg%3E")}
.brand,.who{position:relative;display:flex}
.brand{flex-direction:column}
.logo{font-family:var(--logo);font-size:2rem;line-height:1.2}
.sub,.rl{font-size:.82rem;opacity:.85}
.who{align-items:center;gap:12px}
.who img{width:76px;height:76px;border-radius:50%;object-fit:cover;border:3px solid var(--gold)}
.nm{font-family:var(--display);font-size:1.15rem;font-weight:700;line-height:1.3}
.tabs{position:sticky;top:0;z-index:5;display:flex;overflow-x:auto;background:var(--paper);border-bottom:1px solid var(--line)}
.tabs button{flex:1 0 auto;border:0;background:none;padding:11px 14px;font:500 .95rem var(--ui);color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-current="true"]{color:var(--green-2);border-bottom-color:var(--gold);font-weight:600}
main{max-width:860px;margin:0 auto;padding:22px max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}
.pane{display:flex;flex-direction:column;gap:16px}
.hero{display:flex;flex-direction:column;gap:10px}
.lead{color:var(--muted);max-width:62ch}
.facts{display:flex;gap:8px;flex-wrap:wrap}
.facts span{background:var(--green-soft);color:var(--green-2);border-radius:999px;padding:2px 12px;font-size:.88rem;font-weight:500}
.tests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.tests{grid-template-columns:minmax(0,1fr)}}
.tcard{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--paper);text-align:right;display:flex;flex-direction:column;gap:6px;color:inherit}
.tcard:hover{border-color:var(--gold)}
.tcard .q{font-family:var(--display);font-size:1.3rem;font-weight:700;line-height:1.5}
.tcard .m{font-size:.82rem;color:var(--muted)}
.tcard.wide{background:var(--green-soft);border-color:transparent}
.disc{font-size:.82rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}
.btn{font:600 1rem var(--ui);background:var(--green-2);color:var(--paper);border:0;border-radius:12px;padding:11px 20px;align-self:flex-start}
.btn.ghost{background:transparent;color:var(--green-2);border:1.5px solid var(--green-2)}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.prog{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--gold);transition:width .3s}
.qbox{border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:16px;background:var(--paper)}
.qbox .s{font-family:var(--display);font-size:1.45rem;line-height:1.75}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opt{border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:12px;padding:10px;font:500 1rem var(--ui);text-align:right}
.opt:hover{border-color:var(--green-2)}
.opt:disabled{opacity:.5}
.rx{border:1.5px solid var(--green-2);border-radius:16px;overflow:hidden;background:var(--paper)}
.rx-h{background:var(--green);color:var(--on-green);padding:12px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rx-h .t{font-family:var(--logo);font-size:1.7rem}
.rx-b{padding:18px;display:flex;flex-direction:column;gap:16px}
#rx-body,.bview{display:flex;flex-direction:column;gap:14px}
#rx-body section,.bview section{display:flex;flex-direction:column;gap:4px}
.ail{font-size:1.35rem}
.say{color:var(--muted);font-style:normal}
.q{font-family:var(--display);font-size:1.25rem;color:var(--green-2);border-inline-start:4px solid var(--gold);padding-inline-start:12px}

p.qwho{color:var(--muted);font-size:.88rem;padding-inline-start:16px}
.why{background:var(--gold-soft);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}
.why h3{color:var(--gold)}
.why ul,.bview ul,.bview ol{margin:0;padding-inline-start:20px}
.codebox{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.codebox input{font:600 1.25rem var(--ui);letter-spacing:.15em;direction:ltr;text-align:center;width:220px;max-width:100%;padding:9px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink)}
.bnav{display:flex;gap:6px;flex-wrap:wrap}
.bnav button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:4px 14px;font:500 .92rem var(--ui)}
.bnav button[aria-current="true"]{background:var(--green-2);color:var(--paper);border-color:var(--green-2)}
.prot{position:relative;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bview{position:relative;z-index:1;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px}
.bview.blur{filter:blur(14px)}
.wm{position:absolute;inset:44px 0 0 0;z-index:2;pointer-events:none;opacity:.10;background-repeat:repeat}
.daygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px}
.daygrid button{border:1px solid var(--line);border-radius:8px;padding:6px;background:var(--paper);color:var(--ink);font:500 .85rem var(--ui)}
.daygrid button:disabled{color:var(--muted);opacity:.6}
.daygrid button.today{border-color:var(--green-2);background:var(--green-soft);color:var(--green-2);font-weight:600}
.qi{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.qi .opts{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
.opt[aria-pressed="true"]{background:var(--green-soft);border-color:var(--green-2);color:var(--green-2)}
.klist{display:flex;flex-direction:column;gap:10px}
.kcard{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--paper);text-align:right;color:inherit;display:flex;flex-direction:column;gap:2px}
.kcard .t{font-family:var(--display);font-size:1.4rem;font-weight:700;color:var(--green-2)}
.khutba p{font-family:var(--display);font-size:1.2rem;line-height:2}
.khutba .v{text-align:center;color:var(--green-2)}
.khutba .n{font-size:.9rem;color:var(--muted);font-family:var(--ui)}
.about{align-items:center;text-align:center}
.about img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid var(--gold)}
.about p{max-width:60ch}
.foot{text-align:center;font-size:.8rem;color:var(--muted);padding:18px 16px 28px;border-top:1px solid var(--line)}
.noprint{display:none}
@media print{body>*{display:none!important}.noprint{display:block!important;padding:40px;font-size:20px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}