:root{
  --navy:#1b2a4a;--navy2:#12203a;--gold:#c8a24a;--gold2:#e8d49a;--cream:#fbf6e9;--paper:#fffdf6;
  --g:#1b2a4a;--g2:#12203a;--bg:#fbf6e9;--card:#fffdf6;--tx:#1e2433;--mu:#6a6f7d;--bd:#e3d9bd;--err:#b3261e;--conf:#1b2a4a;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Crect width='36' height='36' fill='%231b2a4a'/%3E%3Cpath d='M18 3l3.5 10.5L32 10l-7 8 7 8-10.5-3.5L18 33l-3.5-10.5L4 26l7-8-7-8 10.5 3.5z' fill='none' stroke='%23c8a24a' stroke-width='1.1'/%3E%3Ccircle cx='18' cy='18' r='2' fill='%23c8a24a'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Tahoma,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--tx);line-height:1.65}
a{color:var(--navy)}
.hidden{display:none!important}
.muted{color:var(--mu)}.small{font-size:.85rem}

/* ---------- الترويسة ---------- */
.top{background:var(--cream)}
.band{height:34px;background:var(--pat);border-block:3px solid var(--gold)}
.mosque{text-align:center;color:#fff;min-height:260px;padding:22px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(to bottom,rgba(18,32,58,.55),rgba(18,32,58,.78)),url(/mosque.jpg) center 85%/cover no-repeat,var(--navy2)}
.dome{width:64px;height:56px;filter:drop-shadow(0 2px 4px #0006)}
.dome [fill="#1b2a4a"]{fill:#fff}
.mosque h1{margin:.2em 0 .1em;font-size:1.9rem;color:#fff;letter-spacing:.5px;text-shadow:0 2px 8px #000a}
.sub{margin:0;color:var(--gold2);font-size:1rem;font-weight:600;text-shadow:0 1px 6px #000a}
@media(min-width:641px){.mosque{min-height:320px;
  background-position:center,center 22%,center}}

main{max-width:58rem;margin:0 auto;padding:0 12px 28px}
.hero{text-align:center;padding:18px 4px 6px}
.campaign{margin:0 0 .3em;font-size:1.9rem;color:var(--gold);text-shadow:0 1px 0 #fff;position:relative;display:inline-block}
.campaign::before,.campaign::after{content:"✦";font-size:.9rem;color:var(--gold);margin-inline:.6em;vertical-align:middle}
.invite{margin:.15em 0;font-size:1.05rem;color:var(--navy)}

/* ---------- بطاقات عامة ---------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:16px;margin-bottom:14px}
h2{margin:0 0 8px;font-size:1.15rem}h3{margin:0 0 8px;font-size:1.2rem}
.stats-card{margin-top:14px;border-color:var(--gold)}
.bar{height:14px;background:#efe6c9;border-radius:99px;overflow:hidden}
#barConfirmed{height:100%;background:linear-gradient(90deg,var(--navy),#34508a);transition:width .6s}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin-top:12px}
.stats b{display:block;font-size:1.3rem;color:var(--navy)}.stats span{font-size:.75rem;color:var(--mu)}
.done{background:var(--navy);color:var(--gold2);border-radius:10px;padding:10px;text-align:center;font-weight:700;margin-bottom:10px}

/* ---------- لوحة المربعات ---------- */
.grid{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;direction:rtl;max-width:40rem;margin-inline:auto;
  border:4px solid var(--navy);border-radius:6px;padding:6px;background:var(--paper);
  box-shadow:0 0 0 2px var(--gold),0 6px 18px #1b2a4a22}
.grid .sq{aspect-ratio:1;border:1px solid var(--navy);border-radius:2px;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:900;
  font-size:clamp(.5rem,1.6vw,.8rem);line-height:1}
.grid .sq.c{background:#fffaf0}
.grid .sq.new{animation:pop .6s}
@keyframes pop{0%{transform:scale(.3);background:var(--gold)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.gridnote{text-align:center;color:var(--mu);font-size:.85rem;margin:8px 0}
.donors{text-align:center;font-size:.85rem;color:var(--mu);margin-bottom:6px}

/* ---------- طرق التبرع والتواصل ---------- */
.give{margin-top:10px}
.give h3{color:var(--navy);text-align:center}
.note{text-align:center;color:var(--mu);font-size:.88rem;margin:0 0 10px}
.methods{display:grid;gap:10px}
.method{background:var(--navy);color:#fff;border-radius:14px;padding:14px 16px;border:2px solid var(--gold)}
.method .mt{color:var(--gold2);font-weight:700}
.method .holder{color:#cfd6e8;font-size:.85rem}
.numrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;flex-wrap:wrap}
.num{font-size:clamp(1.15rem,5vw,1.75rem);letter-spacing:1.5px;color:#fff;direction:ltr}
.contact{margin:14px 0;border:2px solid var(--gold);border-radius:14px;padding:12px 14px;background:var(--paper)}
.contact .ct{color:var(--navy);font-weight:700;text-align:center;margin-bottom:8px}
.contact small{color:var(--mu);font-weight:400}
.phones{display:grid;gap:8px}
.ph{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--navy);color:#fff;border-radius:999px;padding:6px 16px}
.ph a{color:var(--gold2);text-decoration:none;font-weight:700}
.ph .nm{font-weight:600}
.ph .tel{direction:ltr;font-size:1.05rem}

/* ---------- أزرار ونماذج (مشتركة مع لوحة المسؤول) ---------- */
button,.btn{font:inherit;cursor:pointer}
.btn{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:10px;padding:10px 18px;text-decoration:none;text-align:center}
.btn:hover{background:var(--navy2)}.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.btn.small{padding:6px 12px;font-size:.9rem}
.btn.gold{display:block;width:100%;background:var(--gold);color:var(--navy2);font-weight:700}
.btn.gold:hover{background:#b8933d}
.copy{background:var(--gold);border:0;color:var(--navy2);border-radius:8px;padding:4px 14px;font-size:.85rem;font-weight:700}
input:not([type=checkbox]){font:inherit;padding:9px 10px;border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--tx);width:100%}
label{display:block;margin:10px 0;font-size:.9rem}label input:not([type=checkbox]){margin-top:4px}
label.check{display:flex;gap:8px;align-items:flex-start}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.row input{flex:1;min-width:0}
.err{color:var(--err);min-height:1.2em;margin:4px 0}
.toast{position:fixed;bottom:24px;inset-inline:16px;margin:auto;max-width:26rem;background:var(--navy2);color:#fff;padding:10px 14px;border-radius:10px;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:20}
.toast.show{opacity:1}
footer{text-align:center;padding:14px;color:var(--mu)}

@media(max-width:640px){
  .grid{grid-template-columns:repeat(20,1fr);gap:2px;padding:5px;border-width:3px}
  .grid .sq{font-size:.62rem;border-radius:1.5px}
  .invite{font-size:.92rem}
  .mosque h1{font-size:1.5rem}.campaign{font-size:1.5rem}
  .stats b{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){.grid .sq.new{animation:none}}