:root{
  --g:#1a6b4a;--gl:#2a8a5f;--gd:#0f4530;--g2:#0a2e1f;
  --gold:#c9a84c;--goldl:#e8c96a;--goldd:#a07830;
  --cream:#faf7f0;--creamd:#f0ead8;--creamdd:#e4dbc8;
  --txt:#1a1a1a;--muted:#6b7280;
  --red:#dc2626;--blue:#2563eb;--orange:#ea580c;
  --sh:0 1px 2px rgba(15,69,48,.05),0 4px 14px rgba(15,69,48,.07);--shm:0 2px 8px rgba(15,69,48,.06),0 12px 32px rgba(15,69,48,.11);--shb:0 14px 50px rgba(15,69,48,.16);
  --r:14px;--r2:20px;--r3:28px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{font-family:'Outfit',sans-serif;background:var(--cream);color:var(--txt);min-height:100vh;overflow-x:hidden;-webkit-text-size-adjust:100%;overflow-wrap:break-word;word-break:break-word;}

/* ── global polish ── */
::selection{background:rgba(201,168,76,.32);color:var(--gd);}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:rgba(26,107,74,.28);border-radius:10px;border:2px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(26,107,74,.5);background-clip:content-box;}
::-webkit-scrollbar-track{background:transparent;}
input:focus,textarea:focus,select:focus{box-shadow:0 0 0 3px rgba(26,107,74,.13);}
img{max-width:100%;}

nav:not(.bnav){background:var(--g2);padding:env(safe-area-inset-top) 16px 0;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:500;box-shadow:0 1px 0 rgba(201,168,76,.2),0 4px 20px rgba(0,0,0,.4);}
.admin-bar.show ~ nav:not(.bnav),#install-banner.show ~ nav:not(.bnav){padding-top:0;}
.nb{display:flex;align-items:center;gap:10px;padding:12px 0;}
.ni{width:34px;height:34px;background:var(--gold);border-radius:50%;display:grid;place-items:center;font-size:16px;flex-shrink:0;}
.nt h1{font-family:'Amiri',serif;font-size:17px;font-weight:700;color:#fff;line-height:1.1;}
.nt p{font-size:9px;color:rgba(255,255,255,.45);letter-spacing:1.5px;text-transform:uppercase;}
.ntabs{display:flex;gap:2px;}
.ntab{background:none;border:none;cursor:pointer;color:rgba(255,255,255,.7);font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;padding:10px 13px;border-radius:9px;transition:all .2s;white-space:nowrap;}
.ntab:hover{background:rgba(255,255,255,.08);color:#fff;}
.ntab.active{background:var(--gold);color:var(--gd);font-weight:600;}
.hbg{display:none;background:none;border:none;cursor:pointer;color:#fff;font-size:22px;padding:6px;line-height:1;}
.mmenu{display:none;background:var(--g2);border-top:1px solid rgba(255,255,255,.06);padding:6px 14px 14px;flex-direction:column;gap:2px;}
.mmenu.open{display:flex;}
.mmenu .ntab{text-align:left;}
.mm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.mm-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:15px;padding:16px 6px;cursor:pointer;color:#fff;font-family:'Outfit',sans-serif;transition:background .2s,transform .12s;-webkit-tap-highlight-color:transparent;}
.mm-tile .mt-ic{font-size:25px;line-height:1;}
.mm-tile .mt-lb{font-size:12px;font-weight:600;text-align:center;line-height:1.15;letter-spacing:.2px;}
.mm-tile:hover{background:rgba(255,255,255,.11);}
.mm-tile:active{transform:scale(.94);}
.mm-tile.active{background:var(--gold);color:var(--gd);border-color:var(--gold);}
.mm-sep{height:1px;background:rgba(255,255,255,.1);margin:12px 4px 6px;}
.uc-card{background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);box-shadow:var(--sh);padding:36px 24px 30px;text-align:center;margin-top:18px;}
.uc-card .uc-emoji{font-size:56px;line-height:1;margin-bottom:14px;}
.uc-card h3{font-family:'Amiri',serif;font-size:24px;color:var(--gd);margin-bottom:10px;}
.uc-card p{font-size:14px;color:var(--muted);line-height:1.6;max-width:420px;margin:0 auto 12px;}
.uc-card .uc-soon{color:var(--goldd);font-weight:700;font-size:15px;}
.mm-notif{display:flex;align-items:center;gap:8px;color:var(--goldl)!important;font-weight:600;}
.mm-notif.on{color:#fff!important;background:rgba(26,107,74,.45);}

.bnav{position:fixed;bottom:0;left:0;right:0;z-index:600;background:var(--g2);border-top:1px solid rgba(201,168,76,.2);padding:6px 0 max(6px,env(safe-area-inset-bottom));justify-content:space-around;align-items:center;display:none;}
.bntab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;cursor:pointer;padding:8px 6px;border-radius:12px;transition:all .15s;min-width:58px;min-height:52px;flex:1;-webkit-tap-highlight-color:transparent;}
.bntab.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--gold),var(--goldl));box-shadow:0 0 6px rgba(201,168,76,.5);}
.bntab:active{background:rgba(255,255,255,.08);transform:scale(.94);}
.bntab .bic{font-size:23px;line-height:1;transition:transform .15s;}
.bntab .blb{font-size:10px;font-weight:600;color:rgba(255,255,255,.62);letter-spacing:.3px;text-transform:uppercase;margin-top:1px;}
.bntab.active .blb{color:var(--goldl);}
.bntab.active .bic{filter:drop-shadow(0 0 5px rgba(201,168,76,.6));transform:scale(1.1);}

.admin-bar{background:linear-gradient(90deg,var(--gd),#1a3a2a);border-bottom:2px solid var(--gold);padding:calc(8px + env(safe-area-inset-top)) 16px 8px;display:none;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.admin-bar.show{display:flex;}
.admin-bar .at{color:var(--goldl);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.admin-pill{background:rgba(201,168,76,.2);color:var(--goldl);padding:3px 10px;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:1px;border:1px solid rgba(201,168,76,.3);white-space:nowrap;}

#install-banner{display:none;background:linear-gradient(90deg,var(--gd),var(--g));padding:10px 14px;align-items:center;gap:10px;border-bottom:1px solid rgba(201,168,76,.2);}
#install-banner.show{display:flex;}
#install-banner p{color:#fff;font-size:11px;flex:1;line-height:1.4;}
#install-banner p strong{color:var(--goldl);}

/* live alert banner (broadcast / janazah) */
#alert-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:1500;background:linear-gradient(90deg,var(--gd),var(--g));color:#fff;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;align-items:center;gap:12px;box-shadow:0 4px 20px rgba(0,0,0,.3);}
#alert-banner.show{display:flex;animation:slideDown .35s ease;}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
#alert-banner .ab-txt{flex:1;font-size:13px;line-height:1.45;}
#alert-banner .ab-txt strong{color:var(--goldl);margin-right:4px;}
#alert-banner button{background:rgba(255,255,255,.15);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;flex-shrink:0;font-size:13px;}

/* ramadan banner */
#ramadan-banner{background:linear-gradient(135deg,#1a1442,#3a2d6b 60%,var(--gd));border:1px solid rgba(201,168,76,.35);border-radius:var(--r2);padding:16px 18px;margin-bottom:16px;color:#fff;text-align:center;box-shadow:var(--sh);}
#ramadan-banner .rm-top{font-family:'Amiri',serif;font-size:18px;color:var(--goldl);margin-bottom:12px;}
#ramadan-banner .rm-times{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:10px;align-items:center;}
#ramadan-banner .rm-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.55);}
#ramadan-banner .rm-t{font-family:'Amiri',serif;font-size:22px;font-weight:700;color:#fff;}
#ramadan-banner .rm-cd{background:rgba(201,168,76,.15);border-radius:12px;padding:8px 6px;}
#ramadan-banner .rm-big{font-family:'Amiri',serif;font-size:20px;font-weight:700;color:var(--goldl);line-height:1;}

/* janazah card on home */
.jz-card{background:#fff;border-left:4px solid #6b5bb5;border-radius:var(--r);padding:14px 16px;margin-bottom:12px;box-shadow:var(--sh);}
.jz-card .jz-ar{font-family:'Amiri',serif;font-size:15px;color:#6b5bb5;direction:rtl;margin-bottom:6px;}
.jz-card .jz-name{font-size:14px;font-weight:700;color:var(--gd);}
.jz-card .jz-meta{font-size:11px;color:var(--muted);margin-top:3px;}
.jz-card .jz-det{font-size:11px;color:var(--txt);margin-top:6px;line-height:1.5;}

/* ask the imam card + public Q&A */
.aimam-card{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:13px 16px;margin-bottom:16px;cursor:pointer;box-shadow:var(--sh);transition:all .2s;}
.aimam-card:hover{border-color:var(--g);box-shadow:var(--shm);}
.aimam-card .aimam-t{font-size:14px;font-weight:700;color:var(--gd);}
.aimam-card .aimam-s{font-size:11px;color:var(--muted);}
.qa-card{background:#fff;border-radius:var(--r);padding:13px 15px;margin-bottom:10px;box-shadow:var(--sh);border-left:3px solid var(--gold);}
.qa-q{font-size:13px;font-weight:600;color:var(--gd);margin-bottom:7px;line-height:1.45;}
.qa-a{font-size:12px;color:var(--txt);line-height:1.55;}
.qa-badge{display:inline-block;background:rgba(26,107,74,.1);color:var(--g);font-size:9px;font-weight:700;padding:1px 7px;border-radius:20px;margin-right:6px;text-transform:uppercase;letter-spacing:.5px;}

/* ── Ask the Imam — community Q&A page (reddit-style) ── */
.imam-hero{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--g2),var(--gd));border-radius:var(--r);padding:18px 18px;margin-bottom:16px;box-shadow:var(--shm);}
.imam-hero .ih-ic{width:48px;height:48px;flex-shrink:0;background:var(--gold);border-radius:14px;display:grid;place-items:center;font-size:24px;}
.imam-hero h2{color:#fff;font-family:'Amiri',serif;font-size:20px;line-height:1.1;}
.imam-hero p{color:rgba(255,255,255,.6);font-size:11px;margin-top:2px;}
.imam-hero .btn{margin-left:auto;white-space:nowrap;}
.imam-bio{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:var(--r);padding:16px 16px;margin-bottom:16px;box-shadow:var(--sh);border-left:3px solid var(--gold);}
.imam-bio .ib-avatar{width:58px;height:58px;flex-shrink:0;overflow:hidden;background:linear-gradient(135deg,var(--gold),var(--goldd));color:#fff;border-radius:50%;display:grid;place-items:center;font-family:'Outfit',sans-serif;font-weight:700;font-size:18px;letter-spacing:.5px;border:2px solid var(--gold);}
.imam-bio .ib-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.imam-bio .ib-name{font-family:'Amiri',serif;font-size:17px;font-weight:700;color:var(--txt);line-height:1.15;}
.imam-bio .ib-role{font-size:11px;font-weight:600;color:var(--goldd);text-transform:uppercase;letter-spacing:.4px;margin:3px 0 7px;}
.imam-bio .ib-text{font-size:12.5px;line-height:1.5;color:var(--muted);}
.imam-bar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
#imam-search{flex:1;min-width:150px;padding:11px 14px;border-radius:11px;border:1.5px solid var(--creamdd);font-size:13px;font-family:'Outfit',sans-serif;background:#fff;}
#imam-search:focus{outline:none;border-color:var(--g);}
.imam-sorts{display:flex;gap:4px;background:var(--creamd);border-radius:10px;padding:3px;}
.isort{background:none;border:none;cursor:pointer;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;color:var(--muted);padding:7px 14px;border-radius:8px;transition:all .15s;}
.isort.active{background:#fff;color:var(--gd);box-shadow:var(--sh);}
.rcard{display:flex;gap:0;background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);margin-bottom:11px;overflow:hidden;box-shadow:var(--sh);}
.rvote{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;background:var(--creamd);padding:12px 10px;min-width:48px;}
.rup{background:none;border:none;cursor:pointer;font-size:16px;line-height:1;color:var(--muted);padding:2px 4px;border-radius:6px;transition:all .15s;-webkit-tap-highlight-color:transparent;}
.rup:hover{color:var(--g);background:rgba(26,107,74,.08);}
.rup.voted{color:var(--gold);}
.rcount{font-size:13px;font-weight:700;color:var(--gd);}
.rbody{flex:1;padding:13px 15px;min-width:0;}
.rmeta{font-size:10px;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
.rq{font-size:15px;font-weight:700;color:var(--gd);line-height:1.35;margin-bottom:9px;}
.ra{font-size:13px;color:var(--txt);line-height:1.6;background:var(--creamd);border-radius:10px;padding:9px 11px;border-left:3px solid var(--g);}
.ra .by{display:block;font-size:10px;color:var(--muted);margin-top:6px;}
.imam-pending{background:#fff;border:1.5px dashed var(--creamdd);border-radius:var(--r);padding:13px 15px;margin-bottom:11px;}
.imam-pending .rq{margin-bottom:4px;}
.imam-pending .pend{font-size:11px;color:var(--gold2,var(--g));font-weight:600;font-style:italic;}
.imam-empty{text-align:center;padding:40px 20px;color:var(--muted);}
.imam-empty .ie-ic{font-size:40px;margin-bottom:10px;opacity:.5;}

/* ── Daily Reminder card (home) ── */
.daily-card{background:linear-gradient(135deg,var(--g2),var(--gd));border-radius:var(--r);padding:13px 14px;margin-bottom:8px;box-shadow:var(--sh);border:1px solid rgba(201,168,76,.2);}
.dc-head{margin-bottom:8px;}
.dc-tag{display:inline-block;background:rgba(201,168,76,.18);color:var(--goldl);font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 9px;border-radius:20px;}
.dc-ar{font-family:'Amiri',serif;font-size:17px;line-height:1.8;color:#fff;text-align:right;margin-bottom:5px;direction:rtl;}
.dc-tr{font-size:11px;color:var(--goldl);font-style:italic;margin-bottom:4px;}
.dc-en{font-size:12px;color:rgba(255,255,255,.88);line-height:1.55;}
.dc-src{font-size:10px;color:rgba(255,255,255,.5);margin-top:5px;}
.dc-rule{height:1px;background:rgba(255,255,255,.1);margin:10px 0;}
.dc-hadith{font-size:12px;color:rgba(255,255,255,.82);line-height:1.55;}

/* ── Jumu'ah (Friday) banner ── */
.jumuah{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,#1a4a30,var(--gd));border:1px solid rgba(201,168,76,.4);border-radius:var(--r);padding:14px 16px;margin-bottom:16px;cursor:pointer;box-shadow:var(--shm);transition:transform .15s;}
.jumuah:active{transform:scale(.99);}
.jumuah .jm-ic{font-size:26px;flex-shrink:0;}
.jumuah .jm-txt{flex:1;min-width:0;}
.jumuah .jm-main{font-family:'Amiri',serif;font-size:18px;font-weight:700;color:var(--goldl);}
.jumuah .jm-sub{font-size:12px;color:rgba(255,255,255,.7);margin-top:1px;}
.jumuah .jm-arrow{color:var(--goldl);font-weight:700;font-size:18px;}

/* ── Salawat card ── */
.salawat{text-align:center;background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:16px 18px;margin-bottom:8px;cursor:pointer;box-shadow:var(--sh);user-select:none;transition:border-color .2s;}
.salawat:hover{border-color:var(--gold);}
.salawat .sw-ar{font-family:'Amiri',serif;font-size:24px;color:var(--gd);line-height:1.6;direction:rtl;margin-bottom:6px;}
.salawat .sw-en{font-size:12px;color:var(--muted);}
.salawat .sw-count{font-size:12px;color:var(--g);font-weight:600;margin-top:8px;background:rgba(26,107,74,.08);border-radius:20px;padding:6px 12px;display:inline-block;}
.salawat.pulse{animation:swpulse .4s ease;}
@keyframes swpulse{0%{transform:scale(1)}40%{transform:scale(1.03);box-shadow:0 8px 26px rgba(201,168,76,.35)}100%{transform:scale(1)}}
.tdisp.pop{animation:tpop .45s ease;}
@keyframes tpop{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ── Zakat calculator ── */
.zcard{background:#fff;border-radius:var(--r);padding:8px 16px;box-shadow:var(--sh);margin-bottom:16px;}
.zrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--creamd);}
.zrow:last-of-type{border-bottom:none;}
.zrow label{flex:1;font-size:13px;font-weight:600;color:var(--gd);}
.zrow input{width:120px;padding:9px 11px;border-radius:9px;border:1.5px solid var(--creamdd);font-size:14px;font-family:'Outfit',sans-serif;text-align:right;}
.zrow input:focus{outline:none;border-color:var(--g);}
.zrow.zminus label{color:var(--red);}
.znote{font-size:11px;color:var(--muted);line-height:1.6;padding:12px 0 8px;}
.zresult{background:linear-gradient(135deg,var(--g),var(--gd));border-radius:var(--r);padding:18px;color:#fff;box-shadow:var(--shm);}
.zr-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.8);}
.zr-line strong{font-size:16px;color:#fff;}
.zr-status{font-size:12px;text-align:center;padding:10px 0;color:rgba(255,255,255,.7);}
.zr-status.due{color:var(--goldl);font-weight:700;}
.zr-due{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.18);padding-top:12px;}
.zr-due span{font-size:14px;font-weight:600;}
.zr-due strong{font-family:'Amiri',serif;font-size:26px;color:var(--goldl);}

/* ── About & Contact page ── */
.about-hero{text-align:center;background:linear-gradient(135deg,var(--g2),var(--gd));border-radius:var(--r);padding:26px 20px;margin-bottom:6px;box-shadow:var(--shm);border:1px solid rgba(201,168,76,.2);}
.about-hero .ah-ic{width:60px;height:60px;margin:0 auto 12px;background:var(--gold);border-radius:18px;display:grid;place-items:center;font-size:30px;}
.about-hero h2{color:#fff;font-family:'Amiri',serif;font-size:21px;line-height:1.2;margin-bottom:8px;}
.about-hero p{color:rgba(255,255,255,.7);font-size:13px;line-height:1.6;max-width:520px;margin:0 auto;}
.team-card{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;box-shadow:var(--sh);cursor:pointer;transition:border-color .2s,box-shadow .2s;}
.team-card:hover{border-color:var(--g);box-shadow:var(--shm);}
.team-card .tc-ic{width:56px;height:56px;flex-shrink:0;background:var(--creamd);border-radius:50%;display:grid;place-items:center;font-size:26px;overflow:hidden;}
.team-card .tc-ic img{width:100%;height:100%;object-fit:cover;}
.team-card .tc-info{flex:1;min-width:0;}
.team-card .tc-name{font-size:16px;font-weight:700;color:var(--gd);}
.team-card .tc-role{font-size:12px;color:var(--muted);margin-top:1px;}
.team-card .tc-bio{display:none;font-size:12.5px;color:var(--txt);line-height:1.5;margin-top:6px;}   /* shown on wider screens */
.team-card .tc-wa{flex-shrink:0;background:var(--g);color:#fff;border:none;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;padding:10px 16px;border-radius:30px;cursor:pointer;white-space:nowrap;}
.team-card .tc-wa:active{opacity:.85;}
.about-card{background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);font-size:13px;color:var(--txt);line-height:1.6;}
.about-card a{color:var(--g);text-decoration:none;font-weight:600;}
/* profile popup photo */
.pf-photo{width:110px;height:110px;margin:4px auto 0;border-radius:24px;background:var(--creamd);display:grid;place-items:center;font-size:52px;overflow:hidden;}
.pf-photo img{width:100%;height:100%;object-fit:cover;}
@media(min-width:600px){ .team-card .tc-bio{display:block;} }


.page{display:none;animation:fadeUp .25s ease;}
.page.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.hero{background:linear-gradient(150deg,var(--g2) 0%,var(--gd) 40%,var(--g) 80%,var(--gl) 100%);padding:48px 20px 36px;text-align:center;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 15% 60%,rgba(201,168,76,.15),transparent 55%),radial-gradient(ellipse at 85% 20%,rgba(201,168,76,.1),transparent 45%);}
.hpat{position:absolute;inset:-25%;opacity:.05;background-image:repeating-linear-gradient(45deg,var(--gold) 0,var(--gold) 1px,transparent 0,transparent 22px),repeating-linear-gradient(-45deg,var(--gold) 0,var(--gold) 1px,transparent 0,transparent 22px);animation:patDrift 38s linear infinite;}
@keyframes patDrift{from{transform:translate(0,0)}to{transform:translate(22px,22px)}}
.hc{position:relative;z-index:1;max-width:800px;margin:0 auto;}
.harabic{font-family:'Amiri',serif;font-size:24px;color:var(--goldl);direction:rtl;margin-bottom:5px;text-shadow:0 0 22px rgba(232,201,106,.35);animation:glowBreathe 5s ease-in-out infinite;}
@keyframes glowBreathe{0%,100%{text-shadow:0 0 18px rgba(232,201,106,.28)}50%{text-shadow:0 0 30px rgba(232,201,106,.5)}}
.hero h2{font-size:clamp(20px,5vw,34px);font-weight:700;color:#fff;margin-bottom:5px;letter-spacing:-.3px;}
.hsub{color:rgba(255,255,255,.6);font-size:13px;max-width:360px;margin:0 auto 24px;}
.hcards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;max-width:480px;margin:0 auto;}
@media(min-width:480px){.hcards{grid-template-columns:repeat(4,1fr);max-width:640px;}}
.hcard{background:rgba(255,255,255,.09);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.13);border-radius:var(--r2);padding:14px 8px;cursor:pointer;transition:all .25s;text-align:center;}
.hcard:hover{background:rgba(255,255,255,.14);transform:translateY(-2px);}
.hcard:active{background:rgba(255,255,255,.18);transform:translateY(0);}
.hcard .ic{width:48px;height:48px;margin:0 auto 9px;display:grid;place-items:center;font-size:23px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.18),inset 0 1px 1px rgba(255,255,255,.25);}
.hcard .lb{color:rgba(255,255,255,.65);font-size:10px;font-weight:500;letter-spacing:.3px;}
.hcard .vl{color:var(--goldl);font-size:13px;font-weight:700;font-family:'Amiri',serif;margin-top:3px;word-break:break-word;line-height:1.3;}

.wrap{max-width:920px;margin:0 auto;padding:24px 16px 32px;}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px;flex-wrap:wrap;}
.stitle{font-family:'Amiri',serif;font-size:22px;color:var(--gd);}
.stitle span{color:var(--gold);background:linear-gradient(95deg,var(--goldd),var(--gold) 45%,var(--goldl));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ssub{color:var(--muted);font-size:11px;margin-top:1px;}

.btn{padding:8px 16px;border-radius:10px;border:none;cursor:pointer;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1.4;text-decoration:none;}
.btn:active{transform:scale(.97);}
.btn-g{background:linear-gradient(135deg,var(--gl),var(--g));color:#fff;}
.btn-g:hover{filter:brightness(1.06);}
.btn-o{background:transparent;color:var(--g);border:1.5px solid var(--g);}
.btn-o:hover{background:var(--g);color:#fff;}
.btn-gold{background:linear-gradient(135deg,var(--goldl),var(--gold));color:var(--gd);font-weight:700;position:relative;overflow:hidden;}
.btn-gold:hover{filter:brightness(1.05);}
/* Apple Pay button — Apple's required black pill with the  logo (iOS in-app giving) */
.btn-applepay{background:#000!important;color:#fff!important;font-weight:600;letter-spacing:.2px;display:flex;align-items:center;justify-content:center;gap:2px;}
.btn-applepay:hover{filter:brightness(1.15);}
.btn-gold::after{content:'';position:absolute;top:0;left:-75%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:btnShine 5.5s ease-in-out infinite;pointer-events:none;}
@keyframes btnShine{0%,55%{left:-75%}88%,100%{left:170%}}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{background:#b91c1c;}
.btn-sm{padding:6px 12px;font-size:12px;}

.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:20px;}   /* five across everywhere — no more 3+2 wrap on phones */
/* sunrise / shurooq strip — end of the Fajr window, start of ishrāq (matches the TVs) */
.sunstrip{display:none;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;background:linear-gradient(120deg,rgba(201,168,76,.12),rgba(26,107,74,.06));border:1px solid rgba(201,168,76,.4);border-radius:30px;padding:8px 18px;font-size:12px;font-weight:600;color:var(--gd);margin-bottom:14px;box-shadow:var(--sh);}
.sunstrip b{font-family:'Amiri',serif;font-size:17px;color:var(--g);line-height:1;}
.sunstrip .ss-note{color:var(--muted);font-weight:500;}
.pcard{background:#fff;border-radius:var(--r2);padding:14px 8px;text-align:center;box-shadow:var(--sh);border:2px solid transparent;position:relative;overflow:hidden;transition:border-color .2s;}
.pcard.next{border-color:var(--gold);background:linear-gradient(135deg,#fff 65%,rgba(201,168,76,.07));}
.pcard.next::after{content:'NEXT';position:absolute;top:6px;right:6px;background:var(--gold);color:var(--gd);font-size:7px;font-weight:700;letter-spacing:.8px;padding:1px 5px;border-radius:20px;animation:nextPulse 2.6s ease-in-out infinite;}
@keyframes nextPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.5)}50%{box-shadow:0 0 0 5px rgba(201,168,76,0)}}
.pcard .pn{font-size:10px;color:var(--muted);font-weight:600;margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px;}
.pcard .pt{font-family:'Amiri',serif;font-size:18px;color:var(--gd);font-weight:700;line-height:1.1;}
.pcard .pi{font-size:12.5px;color:var(--g);font-weight:700;margin-top:4px;}
.pcard .pi.sub{font-size:11px;color:var(--muted);font-weight:600;}
.pcard .pa{font-family:'Amiri',serif;font-size:13px;color:var(--gold);direction:rtl;margin-bottom:2px;}
.locbar{background:#fff;border-radius:var(--r);padding:11px 14px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--sh);margin-bottom:12px;gap:8px;flex-wrap:wrap;}
.locbar .loc{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;}
.hijri{font-family:'Amiri',serif;font-size:13px;color:var(--g);text-align:right;}
.greg{font-size:10px;color:var(--muted);text-align:right;margin-top:1px;}
.ptoggle{display:flex;gap:8px;margin-bottom:14px;}
.ptbtn{flex:1;padding:9px 12px;border-radius:20px;border:1.5px solid var(--creamdd);background:#fff;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s;font-family:'Outfit',sans-serif;text-align:center;box-shadow:var(--sh);}
.ptbtn:hover{border-color:var(--g);color:var(--g);}
.ptbtn.active{background:var(--g);color:#fff;border-color:var(--g);box-shadow:0 3px 12px rgba(26,107,74,.25);}

.qwrap{background:#fff;border-radius:var(--r2);padding:28px 24px;box-shadow:var(--sh);text-align:center;margin-top:0;border:1px solid var(--creamd);}
.couter{width:170px;height:170px;margin:0 auto 12px;border-radius:50%;background:var(--creamd);display:grid;place-items:center;position:relative;box-shadow:inset 0 3px 14px rgba(0,0,0,.08),0 6px 22px rgba(0,0,0,.08);transition:box-shadow .3s;}
.couter.live{box-shadow:inset 0 3px 14px rgba(0,0,0,.08),0 0 0 3px rgba(201,168,76,.45),0 6px 26px rgba(201,168,76,.35);}
.cring{width:146px;height:146px;border-radius:50%;border:2px dashed rgba(26,107,74,.18);display:grid;place-items:center;position:relative;}
.cdirs{position:absolute;inset:0;}   /* no transition — the JS animation loop smooths rotation (transitions cause the 359°→0° long-way spin) */
.cdirs .cn{color:var(--red);}
.cdirs span{position:absolute;font-size:10px;font-weight:700;color:var(--g);}
.cdirs .cn{top:3px;left:50%;transform:translateX(-50%);}
.cdirs .cs{bottom:3px;left:50%;transform:translateX(-50%);}
.cdirs .ce{right:3px;top:50%;transform:translateY(-50%);}
.cdirs .cw{left:3px;top:50%;transform:translateY(-50%);}
.cneedle{width:3px;height:60px;position:absolute;transform-origin:bottom center;bottom:50%;left:calc(50% - 1.5px);}
.cneedle .kb{position:absolute;top:-21px;left:50%;transform:translateX(-50%);font-size:15px;line-height:1;z-index:3;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25));transition:font-size .3s,filter .3s;}
.nn{width:3px;height:32px;background:var(--gold);border-radius:3px 3px 0 0;}
.ns{width:3px;height:28px;background:#bbb;border-radius:0 0 3px 3px;}
.ccenter{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--gd);top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;}
.qdeg{font-family:'Amiri',serif;font-size:38px;color:var(--gd);font-weight:700;line-height:1;}

.evlist{display:flex;flex-direction:column;gap:10px;}
.ecard{background:#fff;border-radius:var(--r2);padding:14px 16px;box-shadow:var(--sh);display:flex;gap:12px;border-left:4px solid var(--g);transition:box-shadow .2s;}
.ecard:hover{box-shadow:var(--shm);}
.ecard.ann{border-left-color:var(--gold);}
.ecard.urg{border-left-color:var(--red);}
.edate{text-align:center;min-width:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;}
.edate .dy{font-size:22px;font-weight:700;color:var(--gd);line-height:1;font-family:'Amiri',serif;}
.edate .mo{font-size:9px;text-transform:uppercase;color:var(--muted);letter-spacing:.8px;}
.ebody{flex:1;min-width:0;}
.etitle{font-size:14px;font-weight:600;color:var(--txt);margin-bottom:2px;}
.edesc{font-size:11px;color:var(--muted);line-height:1.5;margin-bottom:6px;}
.etags{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
.tag{padding:2px 8px;border-radius:20px;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;}
.tg{background:rgba(26,107,74,.1);color:var(--g);}
.tgold{background:rgba(201,168,76,.18);color:var(--goldd);}
.tr{background:rgba(220,38,38,.1);color:var(--red);}
.tgray{background:rgba(107,114,128,.15);color:var(--muted);}
/* per-prayer Short / Full length picker */
.aset-len{display:inline-flex;gap:3px;margin-top:6px;background:var(--creamd);border-radius:9px;padding:3px;}
.aset-len .lenbtn{border:none;background:none;cursor:pointer;font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;color:var(--muted);padding:4px 11px;border-radius:7px;transition:all .15s;}
.aset-len .lenbtn.on{background:#fff;color:var(--gd);box-shadow:var(--sh);}
.aset-hint{font-size:11px;color:var(--muted);line-height:1.5;margin:10px 2px 2px;}
/* Knowledge (library) page */
.lib-filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;}
.lib-card{background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:14px 15px;margin-bottom:11px;box-shadow:var(--sh);}
.lib-head{display:flex;align-items:flex-start;gap:11px;}
.lib-kind{font-size:24px;line-height:1;flex-shrink:0;}
.lib-title{font-size:15px;font-weight:700;color:var(--gd);line-height:1.25;}
.lib-cat{display:inline-block;margin-top:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--goldd);background:rgba(201,168,76,.16);padding:2px 8px;border-radius:20px;}
.lib-desc{font-size:13px;color:var(--muted);line-height:1.55;margin:9px 0 4px;}
.lib-card .btn{margin-top:9px;}
.lib-video{position:relative;width:100%;padding-top:56.25%;margin-top:10px;border-radius:12px;overflow:hidden;background:#000;}
.lib-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* floating Stop Athan button (shown while the athan plays) */
#athan-stop{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(14px);z-index:9999;background:var(--red);color:#fff;border:none;border-radius:30px;padding:15px 30px;font-size:15px;font-weight:700;font-family:'Outfit',sans-serif;box-shadow:0 10px 34px rgba(0,0,0,.4);cursor:pointer;display:none;align-items:center;gap:8px;opacity:0;transition:opacity .25s ease, transform .25s ease;-webkit-tap-highlight-color:transparent;}
#athan-stop.show{display:flex;opacity:1;transform:translateX(-50%) translateY(0);animation:athanPulse 1.8s ease-in-out infinite;}
@keyframes athanPulse{0%,100%{box-shadow:0 10px 34px rgba(220,38,38,.4)}50%{box-shadow:0 10px 40px rgba(220,38,38,.7)}}
.msrc{padding:2px 8px;border-radius:20px;font-size:9px;font-weight:700;}
.mjtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.mjbtn{padding:5px 12px;border-radius:20px;border:1.5px solid var(--creamdd);background:#fff;cursor:pointer;font-size:11px;font-weight:600;transition:all .2s;font-family:'Outfit',sans-serif;display:flex;align-items:center;gap:4px;}
.mjbtn:hover{border-color:var(--g);color:var(--g);}
.mjbtn.active{background:var(--g);color:#fff;border-color:var(--g);}

.qsrch{display:flex;gap:7px;margin-bottom:14px;}
.qsrch input{flex:1;padding:10px 13px;border-radius:11px;border:1.5px solid var(--creamdd);background:#fff;font-family:'Outfit',sans-serif;font-size:13px;outline:none;transition:border-color .2s;box-shadow:var(--sh);}
.qsrch input:focus{border-color:var(--g);}
.slist{display:flex;flex-direction:column;gap:6px;}
.sitem{background:#fff;border-radius:var(--r);padding:12px 15px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh);cursor:pointer;transition:all .2s;border:1.5px solid transparent;}
.sitem:hover{border-color:var(--creamdd);box-shadow:var(--shm);}
.sitem:active{border-color:var(--g);}
.snum{width:36px;height:36px;border-radius:50%;background:var(--creamd);display:grid;place-items:center;font-weight:600;font-size:13px;color:var(--gd);flex-shrink:0;}
.sinfo{flex:1;}
.sname{font-weight:600;font-size:13px;}
.smeta{font-size:11px;color:var(--muted);margin-top:1px;}
.sarabic{font-family:'Amiri',serif;font-size:19px;color:var(--g);direction:rtl;}
.vview{background:#fff;border-radius:var(--r2);padding:20px;box-shadow:var(--shm);margin-bottom:14px;}
.varabic{font-family:'Amiri',serif;font-size:24px;line-height:2;direction:rtl;text-align:right;color:var(--gd);border-bottom:1px solid var(--creamd);padding-bottom:12px;margin-bottom:12px;}
.vtrans{font-size:13px;line-height:1.7;color:var(--muted);}
.vref{font-size:10px;color:var(--gold);font-weight:700;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px;}
.vnav{display:flex;gap:8px;margin-top:14px;align-items:center;}

/* full surah reader */
.surah-head{background:linear-gradient(135deg,var(--gd),var(--g));border-radius:var(--r2);padding:20px;text-align:center;color:#fff;margin-bottom:14px;box-shadow:var(--sh);}
.surah-head .sh-ar{font-family:'Amiri',serif;font-size:30px;color:var(--goldl);margin-bottom:4px;}
.surah-head .sh-name{font-size:16px;font-weight:700;}
.surah-head .sh-meta{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px;text-transform:uppercase;letter-spacing:.5px;}
.bismillah{font-family:'Amiri',serif;font-size:24px;color:var(--gd);text-align:center;direction:rtl;padding:14px 0 18px;}
.ayah{background:#fff;border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);margin-bottom:10px;}
.ayah-ar{font-family:'Amiri',serif;font-size:23px;line-height:2.1;direction:rtl;text-align:right;color:var(--gd);}
.ayah-num{display:inline-grid;place-items:center;width:26px;height:26px;margin:0 6px;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;color:var(--g);background:rgba(26,107,74,.1);border-radius:50%;vertical-align:middle;}
.ayah-en{font-size:13px;line-height:1.7;color:var(--muted);border-top:1px solid var(--creamd);margin-top:12px;padding-top:10px;}
.loading-q{text-align:center;padding:50px;color:var(--muted);font-size:13px;}
.qspin{width:32px;height:32px;border:3px solid var(--creamd);border-top-color:var(--g);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 14px;}
@keyframes spin{to{transform:rotate(360deg)}}

.dhero{background:linear-gradient(135deg,var(--gd),var(--g));border-radius:var(--r2);padding:22px 18px;margin-bottom:16px;text-align:center;color:#fff;position:relative;overflow:hidden;}
.dhero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(201,168,76,.22),transparent 60%),radial-gradient(ellipse at 10% 80%,rgba(255,255,255,.05),transparent 50%);}
.dhero h3{font-family:'Amiri',serif;font-size:26px;position:relative;z-index:1;margin-bottom:4px;}
.dhero .dm{opacity:.75;font-size:12px;margin:0 0 14px;position:relative;z-index:1;line-height:1.5;}
.dpbar{background:rgba(255,255,255,.18);border-radius:20px;height:9px;overflow:hidden;margin-bottom:6px;position:relative;z-index:1;}
.dpfill{height:100%;background:linear-gradient(90deg,var(--gold),var(--goldl));border-radius:20px;transition:width 1.2s ease;position:relative;overflow:hidden;}
.dpfill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:barShine 2.8s ease-in-out infinite;}
@keyframes barShine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

.srow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.d-notice{background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.3);border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:12.5px;color:var(--gd);line-height:1.55;}
.sc{background:#fff;border-radius:var(--r);padding:14px 10px;text-align:center;box-shadow:var(--sh);border:1px solid var(--creamd);}
.sc .sn{font-family:'Amiri',serif;font-size:22px;color:var(--gd);font-weight:700;}
.sc .sl{font-size:10px;color:var(--muted);margin-top:2px;font-weight:500;}

.dtypes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px;}
.dtype{background:#fff;border:2px solid var(--creamdd);border-radius:var(--r);padding:14px 8px;cursor:pointer;text-align:center;transition:all .22s;box-shadow:var(--sh);}
.dtype:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(201,168,76,.15);}
.dtype.sel{border-color:var(--gold);background:linear-gradient(135deg,#fff 60%,rgba(201,168,76,.06));box-shadow:0 4px 20px rgba(201,168,76,.2);}
.dtype .dic{font-size:22px;margin-bottom:6px;}
.dtype .dnm{font-size:12px;font-weight:700;color:var(--gd);line-height:1.2;}
.dtype .dsub{font-size:9px;color:var(--muted);margin-top:3px;line-height:1.4;}

.dfreq{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px;}
.freqbtn{background:#fff;border:2px solid var(--creamdd);border-radius:var(--r);padding:12px 10px;cursor:pointer;text-align:center;transition:all .2s;box-shadow:var(--sh);}
.freqbtn:hover{border-color:var(--gold);}
.freqbtn.sel{border-color:var(--gold);background:linear-gradient(135deg,#fff 60%,rgba(201,168,76,.06));box-shadow:0 4px 18px rgba(201,168,76,.18);}
.freqbtn .fq{font-size:14px;font-weight:700;color:var(--gd);}
.freqbtn .fqs{font-size:9px;color:var(--muted);margin-top:2px;}

/* manage monthly giving cards */
.mg-card{background:var(--creamd);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
.mg-card .mg-amt{font-size:14px;font-weight:700;color:var(--gd);}
.mg-card .mg-meta{font-size:11px;color:var(--muted);margin-top:1px;}
.mg-actions{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.mg-change{display:flex;gap:6px;flex:1;min-width:140px;}
.mg-change input{flex:1;min-width:0;padding:7px 9px;border-radius:8px;border:1.5px solid var(--creamdd);font-family:'Outfit',sans-serif;font-size:12px;}

.damts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.dabtn{background:#fff;border:2px solid var(--creamdd);border-radius:var(--r);padding:11px 6px;cursor:pointer;font-family:'Outfit',sans-serif;transition:all .2s;text-align:center;box-shadow:var(--sh);}
.dabtn:hover{border-color:var(--g);}
.dabtn.sel{border-color:var(--g);background:rgba(26,107,74,.04);box-shadow:0 2px 12px rgba(26,107,74,.12);}
.dabtn .da{font-size:17px;font-weight:700;color:var(--gd);}
.dabtn .dl{font-size:9px;color:var(--muted);margin-top:2px;}
.dcust{background:#fff;border-radius:var(--r);padding:14px;box-shadow:var(--sh);margin-bottom:16px;border:1px solid var(--creamd);}
.dcust h4{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px;}
.cinp{display:flex;}
.cpfx{padding:10px 12px;background:var(--creamd);border-radius:9px 0 0 9px;font-weight:700;font-size:14px;color:var(--gd);border:1.5px solid var(--creamd);border-right:none;}
.cinp input{flex:1;padding:10px 12px;border-radius:0 9px 9px 0;border:1.5px solid var(--creamd);border-left:none;font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;outline:none;background:#fff;transition:border-color .2s;}
.cinp input:focus{border-color:var(--g);}

.don-summary{background:linear-gradient(135deg,rgba(26,107,74,.06),rgba(201,168,76,.06));border:1.5px solid rgba(26,107,74,.15);border-radius:var(--r);padding:13px 15px;margin-bottom:16px;font-size:13px;color:var(--gd);}
.don-summary strong{font-size:15px;}

.cc-block{background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:14px;margin:4px 0 6px;}
.cc-title{font-size:11px;font-weight:700;color:var(--gd);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;}
.cc-secure{text-align:center;font-size:10px;color:var(--muted);margin-top:10px;}

.twrap{text-align:center;padding-bottom:8px;}
.tdisp{width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,var(--gd),var(--g));margin:0 auto 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 10px 34px rgba(26,107,74,.4),inset 0 -3px 8px rgba(0,0,0,.2);cursor:pointer;user-select:none;transition:transform .08s;position:relative;overflow:hidden;}
.tdisp::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.15),transparent 60%);}
.tdisp:active{transform:scale(.92);}
.tdisp .tc{font-family:'Amiri',serif;font-size:54px;color:#fff;line-height:1;z-index:1;}
.tdisp .th2{font-size:10px;color:rgba(255,255,255,.5);z-index:1;margin-top:3px;}
.tdhikr{font-family:'Amiri',serif;font-size:26px;color:var(--gd);margin-bottom:4px;direction:rtl;}
.ttrans{color:var(--muted);font-size:12px;margin-bottom:20px;}
.topts{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;}
.dbtn{padding:6px 13px;border-radius:20px;border:1.5px solid var(--creamdd);background:#fff;cursor:pointer;font-size:11px;transition:all .2s;font-family:'Outfit',sans-serif;}
.dbtn:hover{border-color:var(--g);color:var(--g);}
.dbtn.active{border-color:var(--g);background:var(--g);color:#fff;}
.tprog{background:var(--creamd);border-radius:20px;height:6px;flex:1;max-width:160px;overflow:hidden;}
.tpfill{height:100%;background:var(--gold);border-radius:20px;transition:width .3s;}
.tstat{text-align:center;background:#fff;border-radius:11px;padding:13px 18px;box-shadow:var(--sh);min-width:76px;border:1px solid var(--creamd);}
.tstat .tsn{font-family:'Amiri',serif;font-size:22px;color:var(--gd);}
.tstat .tsl{font-size:10px;color:var(--muted);}

.mlist{display:flex;flex-direction:column;gap:8px;}
.mitem{background:#fff;border-radius:var(--r);padding:12px 14px;box-shadow:var(--sh);display:flex;align-items:center;gap:12px;transition:box-shadow .2s;}
.mitem:hover{box-shadow:var(--shm);}
.mdist{background:var(--creamd);border-radius:8px;padding:8px 6px;text-align:center;min-width:48px;flex-shrink:0;}
.mdist .dd{font-weight:700;color:var(--gd);font-size:13px;}
.mdist .du{font-size:9px;color:var(--muted);}
.minfo{flex:1;min-width:0;}
.minfo h4{font-size:13px;font-weight:600;}
.minfo p{font-size:11px;color:var(--muted);margin-top:1px;}
.mst{margin-left:auto;font-size:10px;font-weight:700;white-space:nowrap;flex-shrink:0;}
.open{color:#16a34a;}.closed{color:var(--red);}
.mapbox{background:linear-gradient(135deg,#e8f5ee,#c8e6d8);border-radius:var(--r2);height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:14px;cursor:pointer;border:2px dashed rgba(26,107,74,.3);transition:background .2s;}
.mapbox:hover{background:linear-gradient(135deg,#daf0e5,#b8dccb);}

.apanel{background:#fff;border-radius:var(--r2);padding:18px;box-shadow:var(--sh);margin-bottom:14px;border:1px solid var(--creamd);}
.apanel h4{font-size:14px;font-weight:700;color:var(--gd);margin-bottom:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.atable{width:100%;border-collapse:collapse;font-size:12px;}
.atable th{text-align:left;padding:7px 8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--creamd);}
.atable td{padding:8px;border-bottom:1px solid var(--creamd);vertical-align:middle;}
.atable tr:last-child td{border-bottom:none;}
.aedit,.adel{padding:3px 8px;border-radius:6px;border:none;cursor:pointer;font-size:10px;font-weight:600;transition:all .2s;font-family:'Outfit',sans-serif;}
.aedit{background:rgba(26,107,74,.1);color:var(--g);margin-right:3px;}
.aedit:hover{background:var(--g);color:#fff;}
.adel{background:rgba(220,38,38,.1);color:var(--red);}
.adel:hover{background:var(--red);color:#fff;}

.drec{display:flex;gap:10px;padding:10px 12px;background:var(--creamd);border-radius:10px;margin-bottom:6px;align-items:flex-start;}
.drec-badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;margin-top:2px;font-family:'Outfit',sans-serif;}
.drec-badge.edu{background:rgba(37,99,235,.12);color:#2563eb;}
.drec-badge.fun{background:rgba(124,58,237,.12);color:#7c3aed;}
.drec-badge.gen{background:rgba(26,107,74,.12);color:var(--g);}

.adm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--creamd);border-radius:10px;margin-bottom:7px;}
.adm-name{font-size:13px;font-weight:600;color:var(--gd);}
.adm-by{font-size:11px;font-weight:400;color:var(--muted);}
.adm-meta{font-size:11px;color:var(--muted);margin-top:1px;}

.iqtable{width:100%;border-collapse:collapse;font-size:12px;}
.iqtable th{padding:6px 8px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--creamd);text-align:left;}
.iqtable td{padding:7px 8px;border-bottom:1px solid var(--creamd);}
.iqtable tr:last-child td{border-bottom:none;}
.iqtable td:first-child{font-weight:600;font-size:12px;color:var(--gd);width:90px;}
.iqtable input[type="time"],.iqtable input[type="text"],.iqtable input[type="number"],.iqtable select{width:100%;padding:6px 8px;border-radius:7px;border:1.5px solid var(--creamd);font-family:'Outfit',sans-serif;font-size:12px;outline:none;background:var(--cream);transition:border-color .2s;}
.iqtable input:focus,.iqtable select:focus{border-color:var(--g);}
.iqtable td:first-child{width:auto;min-width:90px;}
.iqtable td{vertical-align:top;}

.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(5px);z-index:1000;display:none;align-items:flex-end;justify-content:center;}
.modal-bg.open{display:flex;animation:fadein .2s ease;}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{background:var(--cream);border-radius:24px 24px 0 0;padding:20px 18px max(28px,env(safe-area-inset-bottom));width:100%;max-width:560px;max-height:92vh;overflow-y:auto;animation:slideUp .28s cubic-bezier(.34,1.2,.64,1);}
@keyframes slideUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal h3{font-family:'Amiri',serif;font-size:21px;color:var(--gd);margin-bottom:16px;}
.mhandle{width:36px;height:4px;background:var(--creamdd);border-radius:20px;margin:0 auto 16px;}
.fg{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;}
.fg label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.fg input,.fg textarea,.fg select{padding:10px 12px;border-radius:9px;border:1.5px solid var(--creamdd);background:#fff;font-family:'Outfit',sans-serif;font-size:13px;outline:none;transition:border-color .2s;}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--g);}
.fg textarea{resize:vertical;min-height:65px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.form-actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap;}

/* ── startup animation ── */
#splash{position:fixed;inset:0;z-index:5000;background:linear-gradient(160deg,var(--g2) 0%,var(--gd) 55%,var(--g) 110%);display:flex;align-items:center;justify-content:center;transition:opacity .6s ease;overflow:hidden;}
#splash::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(201,168,76,.14),transparent 60%);}
#splash.hide{opacity:0;pointer-events:none;}
.sp-inner{position:relative;text-align:center;padding:22px;}
.sp-bism{font-family:'Amiri',serif;font-size:22px;color:var(--goldl);margin-bottom:24px;opacity:0;animation:spFade .8s ease .1s forwards;text-shadow:0 0 22px rgba(232,201,106,.4);}
.sp-logo{width:118px;height:118px;margin:0 auto 20px;border-radius:28px;overflow:hidden;box-shadow:0 18px 55px rgba(0,0,0,.5),0 0 0 1px rgba(201,168,76,.35);opacity:0;transform:scale(.55);animation:spPop .85s cubic-bezier(.34,1.56,.64,1) .28s forwards;}
.sp-logo img{width:100%;height:100%;object-fit:cover;display:block;}
.sp-title{font-family:'Amiri',serif;font-size:44px;font-weight:700;color:#fff;letter-spacing:2px;opacity:0;animation:spUp .6s ease .6s forwards;}
.sp-sub{font-size:12px;color:rgba(255,255,255,.6);letter-spacing:2.5px;text-transform:uppercase;margin-top:7px;opacity:0;animation:spUp .6s ease .75s forwards;}
.sp-dots{display:flex;gap:8px;justify-content:center;margin-top:28px;opacity:0;animation:spFade .5s ease 1.05s forwards;}
.sp-dots span{width:8px;height:8px;border-radius:50%;background:var(--goldl);animation:spDot 1.2s ease-in-out infinite;}
.sp-dots span:nth-child(2){animation-delay:.18s}
.sp-dots span:nth-child(3){animation-delay:.36s}
@keyframes spPop{to{opacity:1;transform:scale(1)}}
@keyframes spUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spFade{to{opacity:1}}
@keyframes spDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-7px);opacity:1}}

/* ── text never overflows its box — long words / URLs wrap to a new line ── */
input,textarea,select{max-width:100%;}
textarea{white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;}
.lib-title,.qa-card,.rcard,.ra,.about-card,.ecard,.etitle,.edesc,.adm-meta,.mg-meta,.aimam-card,.team-card,.uc-card,.d-notice,.imam-bio,.lib-card{overflow-wrap:anywhere;}

.lscreen{position:fixed;inset:0;z-index:2000;background:linear-gradient(160deg,var(--g2),var(--gd));display:none;align-items:center;justify-content:center;}
.lscreen.open{display:flex;animation:fadein .25s ease;}
.lcard{background:#fff;border-radius:var(--r3);padding:32px 24px;width:min(360px,92vw);text-align:center;box-shadow:var(--shb);}
.lcard .lic{font-size:44px;margin-bottom:10px;}
.lcard h2{font-family:'Amiri',serif;font-size:26px;color:var(--gd);margin-bottom:3px;}
.lcard p{color:var(--muted);font-size:12px;margin-bottom:20px;line-height:1.5;}
.lcard input{width:100%;padding:12px 13px;border-radius:11px;border:1.5px solid var(--creamdd);font-family:'Outfit',sans-serif;font-size:13px;outline:none;margin-bottom:9px;transition:border-color .2s;background:#fff;}
.lcard input:focus{border-color:var(--g);}
.lerr{color:var(--red);font-size:11px;margin-bottom:9px;min-height:16px;font-weight:500;}

#toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--gd);color:#fff;padding:11px 20px;border-radius:18px;font-size:12.5px;font-weight:500;line-height:1.4;box-shadow:var(--shm);transition:all .3s;z-index:9998;opacity:0;pointer-events:none;white-space:normal;max-width:88vw;width:max-content;text-align:center;border:1px solid rgba(201,168,76,.2);}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

/* hidden from the public — only appears (as "Exit Admin") once you're logged in */
#admin-badge{position:fixed;bottom:80px;right:14px;z-index:997;background:var(--gd);border:2px solid var(--gold);color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.8px;padding:7px 12px;border-radius:30px;cursor:pointer;box-shadow:var(--shm);transition:all .2s;display:none;align-items:center;gap:5px;text-transform:uppercase;}
#admin-badge:hover{background:var(--g);}
/* "Exit Admin" — subtle/faded by default, brightens on hover or tap */
#admin-badge.active{display:flex;background:rgba(15,69,48,.6);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.6);box-shadow:none;font-size:9px;padding:6px 11px;opacity:.55;}
#admin-badge.active:hover,#admin-badge.active:active{opacity:1;background:var(--gd);border-color:var(--gold);color:var(--gold);}

@media(max-width:879px){
  .ntabs{display:none;}
  .hbg{display:block;}
  .bnav{display:flex!important;}
  body{padding-bottom:68px;}
  /* "More" menu becomes a bottom sheet above the bottom nav */
  .mmenu{position:fixed;left:0;right:0;bottom:0;z-index:650;background:var(--g2);border-top:1px solid rgba(201,168,76,.25);border-radius:18px 18px 0 0;padding:18px 16px calc(74px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.45);max-height:calc(100dvh - 56px);overflow-y:auto;touch-action:pan-y;}   /* tall enough to show every tile; scrolls only on tiny screens */
  .mmenu::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:3px;background:rgba(255,255,255,.3);}
  .mmenu.open{display:flex;animation:sheetUp .22s ease;}
  .mmenu .ntab{padding:14px 14px;font-size:15px;color:#fff;}
  .mmenu .ntab.active{color:var(--gd);}
  /* tap-anywhere-outside backdrop */
  #mm-backdrop{display:none;position:fixed;inset:0;z-index:640;background:rgba(0,0,0,.45);}
  #mm-backdrop.open{display:block;}
  #admin-badge{display:none!important;}   /* hidden on mobile — use "Sign Out" in the top admin bar instead */
  #toast{bottom:78px;}
  .frow{grid-template-columns:1fr;}
  .atable th:nth-child(4),.atable td:nth-child(4){display:none;}

  .dtypes{grid-template-columns:1fr;}
  .damts{grid-template-columns:repeat(3,1fr);}
  .wrap{padding:18px 14px 28px;}
  .dhero{padding:18px 16px;}
}
@media(min-width:480px) and (max-width:879px){

  .dtypes{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:880px){
  .bnav{display:none!important;}
  .hbg{display:none;}
  body{padding-bottom:20px;}
  #admin-badge{bottom:24px;}
  #toast{bottom:24px;}
}
@media(min-width:768px){
  .dtypes{grid-template-columns:repeat(3,1fr);}
  .damts{grid-template-columns:repeat(6,1fr);}
}

/* ===== Home-screen PWA (iOS/Android standalone): app-shell scrolling =====
   iOS standalone has a long-standing bug where position:fixed bottom bars DRIFT while the
   BODY scrolls (most visible on long pages like admin). Fix: the body doesn't scroll —
   an inner container (#main-app) does — so the fixed bottom nav stays truly locked. */
@media all and (display-mode: standalone){
  html,body{height:100%;overflow:hidden;}
  #main-app{height:100vh;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .wrap{padding-bottom:calc(86px + env(safe-area-inset-bottom));}   /* clear the fixed bottom nav */
}
@media all and (display-mode: standalone) and (min-width:880px){
  #main-app{height:auto;overflow:visible;}                          /* desktop PWA: no bottom nav, normal scroll */
  html,body{height:auto;overflow:visible;}
  .wrap{padding-bottom:32px;}
}
/* Native Capacitor app (iOS/Android) does NOT report display-mode:standalone, so apply the
   same app-shell here — otherwise the fixed bottom nav drifts while scrolling in the WKWebView. */
html.native, html.native body{height:100%;overflow:hidden;}
html.native #main-app{height:100vh;height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
@media(max-width:879px){ html.native .wrap{padding-bottom:calc(86px + env(safe-area-inset-bottom));} }

/* ════════════════ Smooth transitions & micro-interactions ════════════════ */
.page{animation:pageIn .4s cubic-bezier(.22,.61,.36,1);}
@keyframes pageIn{from{opacity:0;transform:translateY(12px) scale(.994)}to{opacity:1;transform:translateY(0) scale(1)}}

/* staggered content rise — makes each tab feel alive as it opens */
.page.active > .wrap > *{animation:riseIn .4s cubic-bezier(.22,.61,.36,1) backwards;}
.page.active > .wrap > *:nth-child(1){animation-delay:.04s}
.page.active > .wrap > *:nth-child(2){animation-delay:.09s}
.page.active > .wrap > *:nth-child(3){animation-delay:.14s}
.page.active > .wrap > *:nth-child(4){animation-delay:.19s}
.page.active > .wrap > *:nth-child(5){animation-delay:.23s}
.page.active > .wrap > *:nth-child(n+6){animation-delay:.26s}
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* home sections are grouping wrappers, not cards — animating a whole section moves a
   giant slab of page (feels blocky). Animate the CARDS inside instead, in parallel,
   so everything below the fold settles fast and scrolling never catches blocks mid-rise. */
.page.active > .wrap > .hsec{animation:none;}
.page.active .hsec > *{animation:riseIn .4s cubic-bezier(.22,.61,.36,1) backwards;}
.page.active .hsec > *:nth-child(1){animation-delay:.04s}
.page.active .hsec > *:nth-child(2){animation-delay:.1s}
.page.active .hsec > *:nth-child(3){animation-delay:.16s}
.page.active .hsec > *:nth-child(4){animation-delay:.21s}
.page.active .hsec > *:nth-child(n+5){animation-delay:.25s}

/* bottom-nav icon gives a little bounce when its tab becomes active */
.bntab.active .bic{animation:iconPop .42s cubic-bezier(.34,1.56,.64,1);}
@keyframes iconPop{0%{transform:scale(1)}55%{transform:scale(1.28)}100%{transform:scale(1.1)}}

/* ripple on button taps */
.btn{position:relative;overflow:hidden;}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:rippleAnim .6s ease-out;pointer-events:none;mix-blend-mode:soft-light;}
@keyframes rippleAnim{to{transform:scale(2.4);opacity:0}}

/* tappable elements get a gentle press feedback */
.btn,.ntab,.bntab,.hcard,.dtype,.dabtn,.aimam-card,.team-card,.qa-card,.rcard,.dbtn,.ptbtn,.isort,.mitem{
  transition:transform .14s ease, box-shadow .22s ease, border-color .2s ease, background .22s ease, color .2s ease, opacity .2s ease;
}
.btn:active,.ntab:active,.bntab:active,.dbtn:active,.ptbtn:active{transform:scale(.95);}
.hcard:active,.dtype:active,.aimam-card:active,.team-card:active,.qa-card:active,.rcard:active,.mitem:active{transform:scale(.985);}

/* gentle lift on devices with a real pointer (desktop) */
@media(hover:hover){
  .hcard:hover,.aimam-card:hover,.team-card:hover,.qa-card:hover{transform:translateY(-2px);box-shadow:var(--shm);}
}

/* accessibility: respect users who prefer less motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ════════════════ Athan settings (toggles) ════════════════ */
.aset-card{background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:4px 16px;margin-bottom:14px;box-shadow:var(--sh);}
.aset-master{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px;}
.aset-mt{font-size:15px;font-weight:700;color:var(--gd);}
.aset-ms{font-size:11px;color:var(--muted);margin-top:2px;}
.aset-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:12px 0 2px;}
.aset-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--creamd);}
.aset-name{font-size:15px;font-weight:600;color:var(--gd);}
.aset-ar{font-family:'Amiri',serif;color:var(--gold);margin-left:6px;font-size:16px;}
.aswitch{width:48px;height:28px;border-radius:20px;border:none;background:var(--creamdd);cursor:pointer;position:relative;transition:background .22s;flex-shrink:0;padding:0;}
.aswitch .ak{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s;}
.aswitch.on{background:var(--g);}
.aswitch.on .ak{transform:translateX(20px);}
.aswitch.big{width:54px;height:31px;}
.aswitch.big .ak{width:25px;height:25px;}
.aswitch.big.on .ak{transform:translateX(23px);}
.aswitch[disabled]{opacity:.45;cursor:default;}
.aset-note{font-size:12px;color:var(--muted);line-height:1.6;padding:4px;}

/* ════════════════ Native-app feel (Capacitor only — scoped to .native, website unaffected) ════════════════ */
html.native, html.native body{overscroll-behavior:none;}                                  /* no rubber-band / pull-to-refresh reveal */
html.native body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}   /* no text selection / iOS long-press menus on UI */
html.native input,html.native textarea,html.native [contenteditable],
html.native #ayah-list,html.native #ayah-list *{                                           /* but keep selectable in forms + the Qur'an */
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;}

/* ════════════════ Premium polish layer ════════════════ */
/* time-of-day greeting in the hero */
.hgreet{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.66);font-size:12px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:5px 14px;backdrop-filter:blur(8px);animation:greetIn .7s cubic-bezier(.22,.9,.32,1) both;}
.hgreet:empty{display:none;}
.hgreet .hg-ar{font-family:'Amiri',serif;font-size:15px;color:var(--goldl);text-transform:none;letter-spacing:0;}
.hgreet .hg-dot{color:rgba(255,255,255,.35);}
@keyframes greetIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* athan voice picker (mu'adhin) */
.vrow{display:flex;align-items:center;gap:12px;padding:14px 2px;border-top:1px solid var(--creamd);cursor:pointer;border-radius:12px;transition:background .18s;}
.vrow:first-of-type{border-top:none;}
.vrow:active{background:rgba(26,107,74,.05);}
.vradio{width:22px;height:22px;flex-shrink:0;border-radius:50%;border:2px solid var(--creamdd);display:grid;place-items:center;transition:border-color .2s,background .2s;background:#fff;}
.vradio span{width:10px;height:10px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .22s cubic-bezier(.34,1.56,.64,1);}
.vrow.sel .vradio{border-color:var(--g);background:var(--g);box-shadow:0 0 0 4px rgba(26,107,74,.12);}
.vrow.sel .vradio span{transform:scale(1);}
.vinfo{flex:1;min-width:0;}
.vname{font-size:15px;font-weight:700;color:var(--gd);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.vrow.sel .vname{color:var(--g);}
.vbadge{background:linear-gradient(135deg,var(--goldl),var(--gold));color:var(--gd);font-size:8.5px;font-weight:800;letter-spacing:1px;padding:2px 8px;border-radius:20px;text-transform:uppercase;box-shadow:0 1px 4px rgba(201,168,76,.4);}
.vsub{font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4;}
.vplay{width:38px;height:38px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--creamdd);background:#fff;color:var(--g);font-size:13px;cursor:pointer;display:grid;place-items:center;transition:all .2s;box-shadow:var(--sh);padding:0;line-height:1;}
.vplay:hover{border-color:var(--g);}
.vplay:active{transform:scale(.9);}
.vplay.playing{background:linear-gradient(135deg,var(--gl),var(--g));color:#fff;border-color:transparent;box-shadow:0 0 0 5px rgba(26,107,74,.14),0 4px 12px rgba(26,107,74,.35);animation:playPulse 1.6s ease-in-out infinite;}
@keyframes playPulse{0%,100%{box-shadow:0 0 0 4px rgba(26,107,74,.16),0 4px 12px rgba(26,107,74,.35)}50%{box-shadow:0 0 0 8px rgba(26,107,74,.07),0 4px 12px rgba(26,107,74,.35)}}
.vnote{font-size:11.5px;color:var(--muted);line-height:1.55;padding:10px 2px 12px;border-top:1px dashed var(--creamd);margin-top:2px;}

/* skeleton shimmer while prayer times load */
.pcard.skel{min-height:104px;background:linear-gradient(100deg,#fff 35%,var(--creamd) 48%,#fff 61%);background-size:220% 100%;animation:skelWave 1.3s linear infinite;border:2px solid transparent;}
@keyframes skelWave{from{background-position:130% 0}to{background-position:-90% 0}}
@media (prefers-reduced-motion:reduce){.pcard.skel{animation:none;background:var(--creamd);}}

/* next-prayer card: soft gold glow so it reads instantly */
.pcard.next{box-shadow:0 0 0 1px rgba(201,168,76,.28),0 10px 30px rgba(201,168,76,.24),var(--sh);}
.pcard.next .pt{font-size:20px;}

/* steady numerals — times & counters never jiggle as they tick */
.pcard .pt,.pcard .pi,#next-countdown,.tdisp,.rm-t,.rm-big,.qdeg,.hcard .vl{font-variant-numeric:tabular-nums;}

/* frosted toast */
#toast{background:rgba(10,46,31,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(201,168,76,.32);box-shadow:0 10px 34px rgba(0,0,0,.3);}

/* ════════════════ Micro-animations round 2 ════════════════ */
/* prayer time cards cascade in one after another (home + prayer page) */
.pgrid .pcard:not(.skel){animation:cardIn .5s cubic-bezier(.22,.9,.32,1) backwards;}
.pgrid .pcard:not(.skel):nth-child(1){animation-delay:.03s;}
.pgrid .pcard:not(.skel):nth-child(2){animation-delay:.09s;}
.pgrid .pcard:not(.skel):nth-child(3){animation-delay:.15s;}
.pgrid .pcard:not(.skel):nth-child(4){animation-delay:.21s;}
.pgrid .pcard:not(.skel):nth-child(5){animation-delay:.27s;}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* hero quick-action cards cascade when the home page appears */
.hcards .hcard{animation:heroCardIn .55s cubic-bezier(.22,.9,.32,1) backwards;}
.hcards .hcard:nth-child(1){animation-delay:.12s;}
.hcards .hcard:nth-child(2){animation-delay:.22s;}
.hcards .hcard:nth-child(3){animation-delay:.32s;}
.hcards .hcard:nth-child(4){animation-delay:.42s;}
@keyframes heroCardIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* More-menu tiles pop in with a stagger each time the sheet opens */
.mmenu.open .mm-tile{animation:tileIn .38s cubic-bezier(.34,1.3,.64,1) backwards;}
.mmenu.open .mm-tile:nth-child(1){animation-delay:.04s;}
.mmenu.open .mm-tile:nth-child(2){animation-delay:.08s;}
.mmenu.open .mm-tile:nth-child(3){animation-delay:.12s;}
.mmenu.open .mm-tile:nth-child(4){animation-delay:.16s;}
.mmenu.open .mm-tile:nth-child(5){animation-delay:.20s;}
.mmenu.open .mm-tile:nth-child(6){animation-delay:.24s;}
.mmenu.open .mm-tile:nth-child(7){animation-delay:.28s;}
.mmenu.open .mm-tile:nth-child(8){animation-delay:.32s;}
.mmenu.open .mm-tile:nth-child(9){animation-delay:.36s;}
@keyframes tileIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}

/* iOS-style springy toggles: knob overshoots, and squashes while held */
.aswitch .ak{transition:transform .32s cubic-bezier(.34,1.45,.64,1),width .16s ease;}
.aswitch:active .ak{width:26px;}
.aswitch.on:active .ak{transform:translateX(16px);}
.aswitch.big:active .ak{width:29px;}
.aswitch.big.on:active .ak{transform:translateX(19px);}

/* gentle heartbeat on the Donate shortcuts (two beats, then rest) */
@keyframes heartBeat{0%,30%,100%{transform:scale(1)}8%{transform:scale(1.14)}16%{transform:scale(1)}24%{transform:scale(1.09)}}
.hcards .hcard:nth-child(3) .ic{animation:heartBeat 3.8s ease-in-out 1.2s infinite;}
.bnav .bntab:nth-child(4):not(.active) .bic{animation:heartBeat 3.8s ease-in-out 1.2s infinite;}

/* the "Maghrib in 2h 14m" countdown softly breathes */
#next-countdown:not(:empty){animation:cdBreathe 3.2s ease-in-out infinite;}
@keyframes cdBreathe{0%,100%{opacity:.7}50%{opacity:1}}

/* toast pops up with a little spring instead of a flat slide */
#toast{transition:transform .38s cubic-bezier(.34,1.4,.64,1),opacity .25s ease;}

/* slow shine sweep across the gold ABIC badge on the voice picker */
.vbadge{position:relative;overflow:hidden;}
.vbadge::after{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:btnShine 4.5s ease-in-out infinite;pointer-events:none;}

/* ════════════════ Qibla lock — the whole page turns green when you face Makkah ════════════════ */
body{transition:background-color .7s ease;}
body.qibla-aimed{background:#dff0e6;}
body.qibla-aimed .qwrap{background:linear-gradient(180deg,#edf8f1,#fff 70%);border-color:rgba(26,107,74,.4);box-shadow:0 0 0 2px rgba(26,107,74,.22),0 18px 55px rgba(26,107,74,.25);transition:all .5s ease;}
body.qibla-aimed .couter{background:#cdeadb;box-shadow:inset 0 3px 14px rgba(26,107,74,.15),0 0 0 4px rgba(26,107,74,.35),0 10px 40px rgba(26,107,74,.4);animation:qiblaFound 1.1s ease-out;}
body.qibla-aimed .cring{border-color:rgba(26,107,74,.45);}
body.qibla-aimed .qdeg{color:var(--g);text-shadow:0 0 18px rgba(26,107,74,.3);}
body.qibla-aimed #qinfo{color:var(--g)!important;font-weight:700;}
body.qibla-aimed .cneedle .kb{font-size:22px;filter:drop-shadow(0 0 10px rgba(201,168,76,.9)) drop-shadow(0 2px 4px rgba(0,0,0,.3));}
@keyframes qiblaFound{0%{outline:0 solid rgba(26,107,74,.45);outline-offset:0}100%{outline:26px solid rgba(26,107,74,0);outline-offset:26px}}

/* ════════════════ Ask the Imam — polish ════════════════ */
/* subtle drifting gold pattern in the page header (same language as the home hero) */
.imam-hero{position:relative;overflow:hidden;}
.imam-hero::after{content:'';position:absolute;inset:-25%;opacity:.06;pointer-events:none;background-image:repeating-linear-gradient(45deg,var(--gold) 0,var(--gold) 1px,transparent 0,transparent 22px),repeating-linear-gradient(-45deg,var(--gold) 0,var(--gold) 1px,transparent 0,transparent 22px);animation:patDrift 38s linear infinite;}
.imam-hero > *{position:relative;z-index:1;}

/* answer cards cascade in */
#imam-list .rcard{animation:cardIn .45s cubic-bezier(.22,.9,.32,1) backwards;}
#imam-list .rcard:nth-child(1){animation-delay:.03s;}
#imam-list .rcard:nth-child(2){animation-delay:.08s;}
#imam-list .rcard:nth-child(3){animation-delay:.13s;}
#imam-list .rcard:nth-child(4){animation-delay:.18s;}
#imam-list .rcard:nth-child(5){animation-delay:.23s;}
#imam-list .rcard:nth-child(n+6){animation-delay:.28s;}

/* upvote: springy gold pop when tapped */
.rup{transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .15s,background .15s;}
.rup.pop,.rcount.pop{animation:votePop .45s cubic-bezier(.34,1.56,.64,1);}
.rup.voted{color:var(--gold);filter:drop-shadow(0 0 5px rgba(201,168,76,.55));}
@keyframes votePop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}

/* meta badges */
.rtag{display:inline-block;font-size:8.5px;font-weight:800;letter-spacing:.7px;padding:1.5px 7px;border-radius:20px;text-transform:uppercase;vertical-align:1px;margin-left:2px;}
.rtag.rnew{background:rgba(26,107,74,.12);color:var(--g);}
.rtag.rtop{background:linear-gradient(135deg,var(--goldl),var(--gold));color:var(--gd);box-shadow:0 1px 4px rgba(201,168,76,.4);}
.rcard.tophit{border-color:rgba(201,168,76,.55);box-shadow:0 0 0 1px rgba(201,168,76,.2),0 8px 26px rgba(201,168,76,.18);}
.rcard.tophit .rvote{background:linear-gradient(180deg,rgba(201,168,76,.18),var(--creamd));}

/* ════════════════ More life: selection pops, list cascades, login shake, tasbeeh ring ════════════════ */
/* anything selectable gives a springy little pop when chosen */
@keyframes selPop{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
.dabtn.sel,.dtype.sel,.freqbtn.sel,.dbtn.active,.ptbtn.active,.isort.active{animation:selPop .3s cubic-bezier(.34,1.56,.64,1);}

/* lists cascade in: surahs, events, nearby mosques, team cards, ayahs */
.sitem,.ecard,.mitem,.team-card,#ayah-list > *{animation:cardIn .38s cubic-bezier(.22,.9,.32,1) backwards;}
.sitem:nth-child(1),.ecard:nth-child(1),.mitem:nth-child(1),.team-card:nth-child(1),#ayah-list > :nth-child(1){animation-delay:.03s;}
.sitem:nth-child(2),.ecard:nth-child(2),.mitem:nth-child(2),.team-card:nth-child(2),#ayah-list > :nth-child(2){animation-delay:.07s;}
.sitem:nth-child(3),.ecard:nth-child(3),.mitem:nth-child(3),.team-card:nth-child(3),#ayah-list > :nth-child(3){animation-delay:.11s;}
.sitem:nth-child(4),.ecard:nth-child(4),.mitem:nth-child(4),.team-card:nth-child(4),#ayah-list > :nth-child(4){animation-delay:.15s;}
.sitem:nth-child(5),.ecard:nth-child(5),.mitem:nth-child(5),.team-card:nth-child(5),#ayah-list > :nth-child(5){animation-delay:.19s;}
.sitem:nth-child(6),.ecard:nth-child(6),.mitem:nth-child(6),.team-card:nth-child(6),#ayah-list > :nth-child(6){animation-delay:.23s;}
.sitem:nth-child(7),.ecard:nth-child(7),.mitem:nth-child(7){animation-delay:.27s;}
.sitem:nth-child(8),.ecard:nth-child(8),.mitem:nth-child(8){animation-delay:.31s;}

/* wrong password → the login card shakes its head */
.lcard.shake{animation:shakeX .5s cubic-bezier(.36,.07,.19,.97);}
@keyframes shakeX{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}

/* tasbeeh: a gold ring ripples out of the counter on every tap */
.tdisp.ring{animation:tapRing .5s ease-out;}
@keyframes tapRing{from{box-shadow:0 0 0 0 rgba(201,168,76,.5)}to{box-shadow:0 0 0 24px rgba(201,168,76,0)}}

/* events filter chips pop when picked; Jumu'ah TODAY tag pulses; zakat total pops as it changes */
.mjbtn.active{animation:selPop .3s cubic-bezier(.34,1.56,.64,1);}
#jummah-card .tgold{animation:nextPulse 2.6s ease-in-out infinite;}
.zr-due strong.pop{display:inline-block;animation:votePop .4s cubic-bezier(.34,1.56,.64,1);}

/* ════════════════ Feedback (problems + suggestions) ════════════════ */
/* type toggle in the modal */
.fbt-row{display:flex;gap:8px;margin-bottom:14px;}
.fbt{flex:1;padding:12px 8px;border-radius:12px;border:1.5px solid var(--creamdd);background:#fff;font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s;}
.fbt:active{transform:scale(.96);}
.fbt.sel{border-color:var(--g);background:rgba(26,107,74,.08);color:var(--gd);animation:selPop .3s cubic-bezier(.34,1.56,.64,1);}

/* invite card on the About page */
.fbk-invite{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:14px 16px;margin-top:14px;cursor:pointer;box-shadow:var(--sh);transition:all .2s;}
.fbk-invite:hover{border-color:var(--g);box-shadow:var(--shm);}
.fbk-invite:active{transform:scale(.985);}
.fbk-invite .fbk-ic{width:42px;height:42px;flex-shrink:0;background:rgba(26,107,74,.1);border-radius:12px;display:grid;place-items:center;font-size:20px;}
.fbk-invite .fbk-t{font-size:14px;font-weight:700;color:var(--gd);}
.fbk-invite .fbk-s{font-size:11.5px;color:var(--muted);margin-top:2px;}

/* admin list */
.fbk-card{background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;box-shadow:var(--sh);animation:cardIn .35s cubic-bezier(.22,.9,.32,1) backwards;}
.fbk-card.done{opacity:.55;}
.fbk-card.done .fbk-msg{text-decoration:line-through;text-decoration-color:rgba(26,107,74,.4);}
.fbk-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px;}
.fbk-chip{font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:2px 9px;border-radius:20px;}
.fbk-chip.problem{background:rgba(220,38,38,.1);color:var(--red);}
.fbk-chip.idea{background:rgba(201,168,76,.16);color:var(--goldd);}
.fbk-meta{font-size:10.5px;color:var(--muted);}
.fbk-msg{font-size:13px;color:var(--txt);line-height:1.55;overflow-wrap:anywhere;}
.fbk-ua{font-size:9.5px;color:var(--muted);opacity:.7;margin-top:6px;overflow-wrap:anywhere;}
.fbk-actions{display:flex;gap:8px;margin-top:10px;}

/* ════════════════ New Muslim page ════════════════ */
.nm-hero{background:linear-gradient(135deg,var(--g2),var(--gd));border-radius:var(--r2);padding:24px 20px;text-align:center;color:#fff;margin-bottom:16px;box-shadow:var(--shm);}
.nm-hero .nm-ic{font-size:44px;margin-bottom:8px;}
.nm-hero h3{font-family:'Amiri',serif;font-size:22px;margin-bottom:8px;color:var(--goldl);}
.nm-hero p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.75);max-width:480px;margin:0 auto;}
.nm-card{background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:18px 16px;margin-bottom:14px;box-shadow:var(--sh);}
.nm-title{font-size:15px;font-weight:700;color:var(--gd);margin-bottom:10px;}
.nm-p{font-size:13px;line-height:1.65;color:var(--txt);margin-bottom:8px;}
.nm-shahada{background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(26,107,74,.06));border:1px solid rgba(201,168,76,.3);border-radius:14px;padding:16px;text-align:center;margin:12px 0;}
.nm-shahada .nm-ar{font-family:'Amiri',serif;font-size:22px;color:var(--gd);direction:rtl;line-height:1.9;margin-bottom:8px;}
.nm-shahada .nm-tr{font-size:12.5px;font-style:italic;color:var(--goldd);margin-bottom:6px;}
.nm-shahada .nm-en{font-size:12.5px;color:var(--muted);line-height:1.5;}
.nm-pillar{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--creamd);font-size:13px;line-height:1.5;}
.nm-pillar:first-child{border-top:none;}
.nm-pillar span{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,var(--goldl),var(--gold));color:var(--gd);font-weight:800;font-size:13px;display:grid;place-items:center;}
.nm-cta{display:flex;gap:10px;margin:4px 0 10px;}

/* ════════════════ Duas & Adhkar ════════════════ */
.dua-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;}
.dchip{padding:8px 14px;border-radius:30px;border:1.5px solid var(--creamdd);background:#fff;font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s;}
.dchip:active{transform:scale(.95);}
.dchip.active{background:var(--g);border-color:var(--g);color:#fff;animation:selPop .3s cubic-bezier(.34,1.56,.64,1);}
.dua-card{background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:16px;margin-bottom:12px;box-shadow:var(--sh);animation:cardIn .38s cubic-bezier(.22,.9,.32,1) backwards;}
.dua-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.dua-cat{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.dua-rep{background:linear-gradient(135deg,var(--goldl),var(--gold));color:var(--gd);font-size:10px;font-weight:800;padding:2px 9px;border-radius:20px;}
.dua-share{margin-left:auto;background:none;border:none;cursor:pointer;font-size:15px;padding:4px 6px;border-radius:8px;transition:transform .15s;}
.dua-share:active{transform:scale(.85);}
.dua-ar{font-family:'Amiri',serif;font-size:21px;color:var(--gd);direction:rtl;text-align:right;line-height:2;margin-bottom:8px;}
.dua-tr{font-size:12.5px;font-style:italic;color:var(--goldd);line-height:1.55;margin-bottom:6px;}
.dua-en{font-size:13px;color:var(--txt);line-height:1.6;}
.dua-src{font-size:11px;color:var(--muted);margin-top:8px;}

/* ════════════════ 99 Names ════════════════ */
.names-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.name-card{position:relative;background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r);padding:16px 10px 13px;text-align:center;box-shadow:var(--sh);transition:all .2s;animation:cardIn .35s cubic-bezier(.22,.9,.32,1) backwards;}
.name-card:hover{border-color:rgba(201,168,76,.5);box-shadow:var(--shm);}
.name-num{position:absolute;top:7px;left:9px;font-size:9px;font-weight:800;color:var(--creamdd);background:var(--cream);border-radius:12px;padding:1px 6px;}
.name-ar{font-family:'Amiri',serif;font-size:26px;color:var(--gd);line-height:1.4;}
.name-tr{font-size:12px;font-weight:700;color:var(--goldd);margin-top:3px;}
.name-en{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35;}

/* ════════════════ event card bell + share, language picker ════════════════ */
.ebtn{background:none;border:1px solid var(--creamdd);border-radius:8px;cursor:pointer;font-size:13px;padding:2px 8px;line-height:1.5;transition:all .15s;vertical-align:middle;}
.ebtn:active{transform:scale(.88);}
.ebtn.on{border-color:rgba(201,168,76,.6);background:rgba(201,168,76,.12);animation:selPop .3s cubic-bezier(.34,1.56,.64,1);}

/* ════════════════ How to Pray stepper (New Muslim page) ════════════════ */
.wudu-strip{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px;}
.wudu-strip span{background:rgba(26,107,74,.07);border:1px solid rgba(26,107,74,.15);border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600;color:var(--gd);}
.wudu-strip em{font-style:normal;color:var(--muted);font-weight:500;}
.nm-rakat{margin-top:12px;text-align:center;font-size:12px;color:var(--muted);background:var(--creamd);border-radius:10px;padding:9px 10px;}
.nm-rakat strong{color:var(--gd);}
.hp-box{background:linear-gradient(180deg,rgba(26,107,74,.05),transparent 40%);border:1.5px solid var(--creamdd);border-radius:16px;padding:16px 14px 14px;text-align:center;margin-top:4px;}
.hp-fig{color:var(--gd);max-width:250px;margin:0 auto;animation:hpIn .4s cubic-bezier(.22,.9,.32,1);}
.hp-fig svg{width:100%;height:auto;animation:hpSway 5s ease-in-out infinite;}
@keyframes hpIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes hpSway{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.hp-count{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--goldd);margin-top:2px;}
.hp-title{font-size:16px;font-weight:800;color:var(--gd);margin-top:3px;}
.hp-ar{font-family:'Amiri',serif;font-size:24px;color:var(--gold);direction:rtl;line-height:1.7;margin-top:2px;}
.hp-say{background:rgba(201,168,76,.12);border:1px solid rgba(201,168,76,.3);border-radius:12px;padding:9px 12px;font-size:13px;font-weight:600;color:var(--gd);margin:8px auto 0;max-width:420px;line-height:1.5;}
.hp-tip{font-size:12.5px;color:var(--muted);line-height:1.6;margin:9px auto 0;max-width:440px;}
.hp-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;}
.hp-nav .btn[disabled]{opacity:.35;pointer-events:none;}
.hp-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.hp-dot{width:8px;height:8px;border-radius:50%;background:var(--creamdd);cursor:pointer;transition:all .25s;}
.hp-dot.on{background:var(--gold);width:22px;border-radius:5px;}

/* ════════════════ Website footer (hidden in the native apps) ════════════════ */
.site-footer{background:var(--g2);color:#fff;margin-top:40px;padding:44px 20px calc(90px + env(safe-area-inset-bottom));border-top:2px solid rgba(201,168,76,.3);}
@media(min-width:880px){ .site-footer{padding-bottom:36px;} }   /* desktop has no bottom nav to clear */
html.native .site-footer{display:none;}
.sf-inner{max-width:900px;margin:0 auto;}
.sf-brand{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.sf-logo{width:52px;height:52px;border-radius:50%;background:var(--gold);display:grid;place-items:center;font-size:26px;}
.sf-name{font-family:'Amiri',serif;font-size:20px;font-weight:700;}
.sf-ar{font-family:'Amiri',serif;font-size:15px;color:var(--goldl);direction:rtl;text-align:left;margin-top:2px;}
.sf-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;}
.sf-col h5{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--goldl);margin-bottom:12px;}
.sf-col a{display:block;color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px;line-height:1.5;margin-bottom:9px;transition:color .2s;}
.sf-col a:hover{color:var(--goldl);}
.sf-bottom{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(255,255,255,.4);text-align:center;}

/* ════════════════ How-to-Pray recite block (full text + transliteration + Listen) ════════════════ */
.hp-recite{background:#fff;border:1.5px solid var(--creamdd);border-radius:14px;margin:10px auto 0;max-width:460px;text-align:left;overflow:hidden;}
.hp-rhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:rgba(26,107,74,.06);font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--gd);}
.hp-listen{border:1.5px solid var(--g);background:#fff;color:var(--g);border-radius:20px;padding:5px 13px;font-family:'Outfit',sans-serif;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;}
.hp-listen:active{transform:scale(.93);}
.hp-listen.on{background:var(--g);color:#fff;animation:playPulse 1.6s ease-in-out infinite;}
.hp-rbody{padding:12px 14px 14px;}
.hp-rar{font-family:'Amiri',serif;font-size:19px;color:var(--gd);direction:rtl;text-align:right;line-height:2;}
.hp-rtr{font-size:12.5px;font-style:italic;color:var(--goldd);line-height:1.7;margin-top:8px;}
.hp-ren{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:7px;}
.hp-recite.collapsed .hp-rbody{display:none;}

/* developer credit on the About page */
.dev-card{position:relative;overflow:hidden;text-align:center;background:linear-gradient(155deg,var(--g2) 0%,var(--gd) 55%,var(--g) 100%);border:1px solid rgba(201,168,76,.28);border-radius:var(--r2);padding:26px 22px 24px;margin-top:16px;box-shadow:var(--shm);}
.dev-pat{position:absolute;inset:-25%;opacity:.05;pointer-events:none;background-image:repeating-linear-gradient(45deg,var(--gold) 0,var(--gold) 1px,transparent 0,transparent 20px),repeating-linear-gradient(-45deg,var(--gold) 0,var(--gold) 1px,transparent 0,transparent 20px);animation:patDrift 40s linear infinite;}
.dev-card>*{position:relative;z-index:1;}
.dev-label{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(232,201,106,.75);margin-bottom:14px;}
.dev-mono{width:66px;height:66px;margin:0 auto 12px;border-radius:50%;background:linear-gradient(135deg,var(--goldl),var(--goldd));color:var(--g2);font-family:'Amiri',serif;font-size:28px;font-weight:700;letter-spacing:1px;display:grid;place-items:center;box-shadow:0 8px 22px rgba(201,168,76,.35),inset 0 1px 2px rgba(255,255,255,.4);border:2px solid rgba(255,255,255,.25);}
.dev-name{font-family:'Amiri',serif;font-size:26px;font-weight:700;color:#fff;line-height:1.1;}
.dev-role{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--goldl);margin-top:5px;}
.dev-link{display:inline-flex;align-items:center;gap:6px;position:relative;overflow:hidden;margin-top:18px;background:linear-gradient(135deg,var(--goldl),var(--gold));color:var(--g2);text-decoration:none;font-size:13.5px;font-weight:800;padding:11px 22px;border-radius:30px;box-shadow:0 6px 18px rgba(201,168,76,.3);transition:transform .15s;}
.dev-link span:first-child{opacity:.7;font-weight:600;}
.dev-link:hover{filter:brightness(1.05);}
.dev-link:active{transform:scale(.96);}
.dev-link::after{content:'';position:absolute;top:0;left:-75%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:btnShine 4.5s ease-in-out infinite;pointer-events:none;}
.dev-arrow{font-weight:700;}

/* admin control: athan-TV "prayer in progress" overlay toggle (Prayer tab) */
.tvo-card{background:#fff;border:1.5px solid var(--creamdd);border-radius:var(--r2);padding:16px;box-shadow:var(--sh);}
.tvo-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
.tvo-t{font-size:14px;font-weight:800;color:var(--gd);}
.tvo-s{font-size:11.5px;color:var(--muted);margin-top:2px;}
.tvo-badge{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.5px;padding:6px 11px;border-radius:20px;background:var(--creamd);color:var(--muted);white-space:nowrap;}
.tvo-badge.on{background:rgba(26,107,74,.12);color:var(--g);animation:playPulse 1.8s ease-in-out infinite;}
.tvo-note{font-size:10.5px;color:var(--muted);margin-top:9px;text-align:center;}

/* catch-up modal: announcements since your last visit */
.cu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.cu-t{font-size:16px;font-weight:800;color:var(--gd);}
.cu-count{font-size:10.5px;font-weight:800;letter-spacing:.5px;background:rgba(26,107,74,.1);color:var(--g);padding:5px 11px;border-radius:20px;white-space:nowrap;}
.cu-bc{background:linear-gradient(135deg,rgba(26,107,74,.05),rgba(201,168,76,.07));border:1.5px solid var(--creamdd);border-radius:14px;padding:16px;}
.cu-bt{font-size:14.5px;font-weight:800;color:var(--gd);margin-bottom:7px;}
.cu-bb{font-size:13px;color:#333;line-height:1.6;white-space:pre-wrap;}
.cu-when{font-size:10.5px;color:var(--muted);margin-top:10px;}
.cu-chg{margin-top:4px;}
.cu-chg-row{display:flex;align-items:center;justify-content:space-between;padding:9px 2px;border-bottom:1px dashed var(--creamdd);font-size:13px;}
.cu-chg-row:last-child{border-bottom:none;}
.cu-chg-row span{font-weight:700;color:var(--gd);}
.cu-chg-row b{color:var(--g);font-weight:800;}
.cu-chg-row i{color:var(--gold);font-style:normal;font-weight:800;}

/* ════════════════ premium pass: live prayer progress, particles, hovers ════════════════ */
/* Prayer page: countdown + progress bar between the previous and next prayer */
.ppnext{background:linear-gradient(135deg,var(--g2),var(--gd));border-radius:var(--r2);padding:14px 16px;margin-bottom:14px;box-shadow:var(--shm);border:1px solid rgba(201,168,76,.22);}
.ppn-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;}
#pp-countdown{color:#fff;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.2px;}
#pp-countdown b{color:var(--goldl);font-weight:800;}
.ppn-live{font-size:9px;font-weight:800;letter-spacing:1.2px;color:var(--goldl);opacity:.85;animation:playPulse 2s ease-in-out infinite;}
.ppn-bar{height:6px;background:rgba(255,255,255,.14);border-radius:20px;overflow:hidden;}
#pp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--goldl));border-radius:20px;transition:width 1s linear;box-shadow:0 0 8px rgba(232,201,106,.5);}

/* salawāt hearts float up from the card on every tap */
.salawat{position:relative;overflow:hidden;}
.sw-float{position:absolute;bottom:16px;font-size:19px;pointer-events:none;animation:swFloat 1.15s ease-out forwards;}
@keyframes swFloat{0%{opacity:0;transform:translateY(0) scale(.6)}18%{opacity:1}100%{opacity:0;transform:translateY(-90px) scale(1.3)}}

/* the NEXT prayer card breathes gently */
.pcard.next{animation:nextBreath 3.4s ease-in-out infinite;}
@keyframes nextBreath{0%,100%{box-shadow:0 0 0 1px rgba(201,168,76,.28),0 10px 30px rgba(201,168,76,.2),var(--sh)}50%{box-shadow:0 0 0 1px rgba(201,168,76,.5),0 12px 38px rgba(201,168,76,.38),var(--sh)}}

/* the bismillah on the home hero glows softly */
.harabic{animation:bismGlow 5.5s ease-in-out infinite;}
@keyframes bismGlow{0%,100%{text-shadow:0 0 0 rgba(232,201,106,0)}50%{text-shadow:0 0 18px rgba(232,201,106,.45)}}

/* desktop (website): cards lift on hover */
@media(hover:hover){
  .pcard:not(.skel):hover,.hcard:hover,.dua:hover,.team-card:hover,.dtype:hover,.rcard:hover,.qa-card:hover,.aimam-card:hover,.jz-card:hover,.name-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,69,48,.14);}
  .btn:hover{filter:brightness(1.06);}
}

/* steady digits — clocks and counters stop jittering as they tick */
.pt,.tdisp,#tc,#next-countdown,.time,.rm-big,.hijri{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion:reduce){
  .ppn-live,.pcard.next,.harabic{animation:none;}
  .sw-float{animation-duration:.3s;}
  #pp-fill{transition:none;}
}

/* catch-up widget: centered pop-in card instead of a bottom sheet */
#catchup-modal{align-items:center;padding:18px;}
#catchup-modal .modal{border-radius:24px;animation:cuPop .34s cubic-bezier(.34,1.3,.64,1);}
@keyframes cuPop{from{opacity:0;transform:scale(.9) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media (prefers-reduced-motion:reduce){#catchup-modal .modal{animation:none;}}

/* ════════════════ website pass: desktop nav dropdown, layouts, print, ⌘K palette ════════════════ */
/* "More ▾" dropdown in the desktop top nav */
.nmore{position:relative;display:inline-block;}
.nmore-dd{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:#0d3b28;border:1px solid rgba(201,168,76,.3);border-radius:14px;padding:8px;box-shadow:0 18px 50px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .18s ease;z-index:600;}
.nmore:hover .nmore-dd,.nmore.open .nmore-dd{opacity:1;visibility:visible;transform:translateY(0);}
.nmore-dd button{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.85);font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;padding:10px 12px;border-radius:9px;transition:background .15s;}
.nmore-dd button:hover{background:rgba(201,168,76,.15);color:#fff;}

/* phone-only things that make no sense on a computer */
#print-times{display:none;}
@media(min-width:880px){
  #qibla-live-btn{display:none;}          /* desktops have no orientation sensors — the static bearing is shown instead */
  #print-times{display:inline-block;}     /* printing is a desktop thing */
  #dua-list{columns:2;column-gap:18px;}   /* duas read as a 2-column wall on wide screens */
  #dua-list>*{break-inside:avoid;}
}
html.native #print-times,html.native .nmore{display:none!important;}   /* apps keep their own More sheet */

/* clean printable prayer schedule (triggered from the Prayer page) */
@media print{
  nav,.bnav,#install-banner,.site-footer,.qwrap,.ppnext,.sh button,.sh div[style*="flex"] button,.ptoggle,#tv-overlay-ctrl,#admin-badge,#toast,#alert-banner,.admin-bar,#kpal{display:none!important;}
  body,.page{background:#fff!important;}
  .page{display:none!important;}
  #page-prayer{display:block!important;}
  .pcard{box-shadow:none!important;border:1px solid #ccc!important;animation:none!important;}
  #jummah-card{box-shadow:none!important;border:1px solid #ccc!important;}
}

/* ⌘K quick-jump palette (website only) */
#kpal{position:fixed;inset:0;z-index:4000;background:rgba(10,46,31,.55);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:12vh 18px 18px;}
#kpal.open{display:flex;}
.kpal-box{width:100%;max-width:440px;background:var(--cream);border-radius:18px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.5);animation:cuPop .22s cubic-bezier(.34,1.3,.64,1);}
#kpal-in{width:100%;border:none;outline:none;background:#fff;padding:16px 18px;font-family:'Outfit',sans-serif;font-size:15px;color:var(--gd);border-bottom:1.5px solid var(--creamdd);}
#kpal-list{max-height:46vh;overflow-y:auto;padding:8px;}
.kpal-it{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:'Outfit',sans-serif;font-size:13.5px;font-weight:600;color:var(--gd);padding:11px 12px;border-radius:10px;}
.kpal-it.sel,.kpal-it:hover{background:rgba(26,107,74,.1);}
.kpal-it .kp-hint{margin-left:auto;font-size:10px;color:var(--muted);font-weight:500;}
.kbd-hint{display:none;}
@media(min-width:880px){.kbd-hint{display:inline;font-size:11px;color:rgba(255,255,255,.35);}.kbd-hint kbd{background:rgba(255,255,255,.1);border-radius:4px;padding:1px 5px;font-family:'Outfit',sans-serif;}}
/* Athan Settings is native-only → hide its tile on the website (kept in the app) */
html:not(.native) .app-only{display:none!important;}

/* ════════════ HOME SECTIONS — one consistent rhythm: section ▸ 12px between cards ▸ 38px between sections ════════════ */
.hsec{margin-bottom:38px;}
.hsec > *{margin-bottom:12px;}
.hsec > :last-child{margin-bottom:0;}
.hsec .sh{margin-bottom:14px;}
/* inner cards keep no extra bottom margin — the section owns the spacing */
.hsec .fast-card,.hsec .nod,.hsec .daily-card,.hsec .salawat,.hsec .aimam-card{margin-bottom:0;}
.hsec .wgrid{margin-bottom:12px;}
.hsec .sunstrip{margin-bottom:12px;}

/* ════════════ DAILY WORSHIP SUITE — tracker · hijri calendar · fasting · adhkār ════════════ */
/* home pills + fasting card */
/* fasting card — deep-green premium, always shows the NEXT sunnah fast */
.fast-card{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--g2) 0%,var(--gd) 55%,#15573d 100%);border-radius:var(--r2);padding:18px;box-shadow:var(--shm);border:1px solid rgba(201,168,76,.4);margin-bottom:24px;color:#fff;}
.fast-card::before{content:'🌙';position:absolute;right:-16px;top:-22px;font-size:120px;opacity:.08;transform:rotate(-14deg);pointer-events:none;}
.fast-card::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 85% 20%,rgba(201,168,76,.16),transparent 55%);}
.fc-when{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#fff;flex-wrap:wrap;position:relative;z-index:1;}
.fc-moon{font-size:19px;filter:drop-shadow(0 0 8px rgba(232,201,106,.5));}
.fc-chip{font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;background:linear-gradient(120deg,var(--gold),var(--goldl));color:var(--g2);border-radius:20px;padding:3px 11px;}
.fc-why{font-size:12px;color:var(--goldl);font-weight:600;margin:5px 0 13px;position:relative;z-index:1;}
.fc-times{display:flex;align-items:center;gap:22px;margin-bottom:12px;position:relative;z-index:1;}
.fc-sep{width:1px;height:34px;background:rgba(201,168,76,.4);}
.fc-lbl{font-size:9.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.55);}
.fc-t{font-family:'Amiri',serif;font-size:25px;font-weight:700;color:var(--goldl);line-height:1.2;text-shadow:0 0 16px rgba(232,201,106,.25);}
.fc-src{font-size:10.5px;color:rgba(255,255,255,.55);font-style:italic;line-height:1.5;position:relative;z-index:1;}
/* daily worship grid — live-status launchpad */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.wtile{background:#fff;border-radius:var(--r2);padding:14px 8px 12px;text-align:center;box-shadow:var(--sh);cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .2s,box-shadow .2s;}
.wtile:hover{box-shadow:var(--shm);}
.wtile:active{transform:scale(.95);}
.wtile.hot{border-color:rgba(201,168,76,.5);background:linear-gradient(160deg,#fff 65%,rgba(201,168,76,.12));}
.wt-ic{font-size:25px;width:50px;height:50px;margin:0 auto 7px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(26,107,74,.1),rgba(201,168,76,.14));border-radius:17px;}
.wtile.hot .wt-ic{background:linear-gradient(135deg,rgba(201,168,76,.22),rgba(26,107,74,.12));}
.wt-t{font-size:12.5px;font-weight:800;color:var(--gd);}
.wt-s{font-size:9.5px;color:var(--muted);margin-top:2px;font-weight:600;}
/* name of Allah today */
.nod{position:relative;display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,#fff 50%,rgba(201,168,76,.16));border:1px solid rgba(201,168,76,.45);border-radius:var(--r2);padding:15px 18px;box-shadow:var(--sh);margin-bottom:32px;cursor:pointer;overflow:hidden;transition:transform .15s,box-shadow .2s;}
.nod:hover{box-shadow:var(--shm);}
.nod:active{transform:scale(.985);}
.nod-left{flex:1;min-width:0;}
.nod-k{font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--goldd);margin-bottom:4px;}
.nod-tr{font-size:17px;font-weight:800;color:var(--gd);line-height:1.2;}
.nod-en{font-size:11.5px;color:var(--muted);margin-top:1px;}
.nod-ar{font-family:'Amiri',serif;font-size:36px;font-weight:700;color:var(--g);line-height:1;direction:rtl;text-shadow:0 1px 0 rgba(201,168,76,.25);}
.nod-go{color:var(--g);font-weight:800;font-size:15px;}
/* prayer tracker */
.pt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.pt-stat{background:#fff;border-radius:var(--r2);padding:12px 8px;text-align:center;box-shadow:var(--sh);}
.pts-n{font-size:19px;font-weight:800;color:var(--gd);}
.pts-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;}
.pt-today{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.ptrow{display:flex;align-items:center;gap:12px;background:#fff;border-radius:var(--r2);padding:12px 14px;box-shadow:var(--sh);cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .1s;}
.ptrow:active{transform:scale(.985);}
.pt-ar{font-family:'Amiri',serif;font-size:20px;color:var(--gold);width:56px;text-align:right;direction:rtl;}
.pt-nm{font-size:14px;font-weight:700;color:var(--txt);flex:1;}
.pt-t{font-size:11px;color:var(--muted);font-weight:500;margin-left:7px;}
.pt-state{font-size:12px;font-weight:700;border-radius:20px;padding:5px 12px;background:var(--cream);color:var(--muted);min-width:86px;text-align:center;}
.pt-state.s1{background:rgba(26,107,74,.12);color:var(--g);}
.pt-state.s2{background:linear-gradient(120deg,rgba(201,168,76,.25),rgba(201,168,76,.12));color:var(--goldd);}
.hm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.hm-title{font-size:15px;font-weight:800;color:var(--gd);text-align:center;}
.hm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:12px;}
.hm-dow{font-size:10px;font-weight:700;color:var(--muted);text-align:center;padding:2px 0;}
.hm-pad{}
.hm-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;font-size:11.5px;font-weight:600;color:var(--txt);background:#fff;box-shadow:var(--sh);}
.hm-cell.hm0{color:var(--muted);}
.hm-cell.hm1{background:rgba(26,107,74,.12);}
.hm-cell.hm2{background:rgba(26,107,74,.22);}
.hm-cell.hm3{background:rgba(26,107,74,.35);color:#fff;}
.hm-cell.hm4{background:rgba(26,107,74,.55);color:#fff;}
.hm-cell.hm5{background:var(--g);color:#fff;font-weight:800;}
.hm-cell.hmf{opacity:.35;box-shadow:none;}
.hm-cell.hm-today{outline:2px solid var(--gold);outline-offset:1px;}
.pt-note{font-size:10.5px;color:var(--muted);text-align:center;margin-bottom:10px;}
.pt-hadith{font-size:12px;color:var(--gd);font-style:italic;text-align:center;background:rgba(201,168,76,.08);border-radius:var(--r2);padding:12px 16px;line-height:1.5;margin-bottom:24px;}
/* hijri calendar */
.hc-loading{text-align:center;color:var(--muted);padding:40px 0;font-size:13px;}
.hc-hlabel{font-family:'Amiri',serif;font-size:13px;font-weight:400;color:var(--goldd);}
.hc-grid .hc-cell{aspect-ratio:auto;padding:6px 2px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;position:relative;background:#fff;border-radius:9px;box-shadow:var(--sh);border:2px solid transparent;}
.hc-g{font-size:12.5px;font-weight:700;color:var(--txt);line-height:1;}
.hc-h{font-family:'Amiri',serif;font-size:10.5px;color:var(--muted);line-height:1;}
.hc-dot{font-size:9px;line-height:1;}
.hc-cell.hc-fri{background:rgba(26,107,74,.06);}
.hc-cell.hc-white{background:rgba(201,168,76,.14);}
.hc-cell.hc-white .hc-h{color:var(--goldd);font-weight:700;}
.hc-cell.hc-ev{border-color:rgba(201,168,76,.5);}
.hc-cell.hc-today{border-color:var(--g);background:rgba(26,107,74,.1);}
.hc-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:10.5px;color:var(--muted);margin-bottom:6px;}
.hc-legend .lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px;}
.lg-today{background:rgba(26,107,74,.1);border:2px solid var(--g);}
.lg-white{background:rgba(201,168,76,.35);}
.lg-fri{background:rgba(26,107,74,.15);}
.hc-ups{display:flex;flex-direction:column;gap:7px;margin-bottom:8px;}
.hc-up{background:#fff;border-radius:var(--r2);padding:11px 14px;font-size:12.5px;color:var(--txt);box-shadow:var(--sh);line-height:1.4;}
.hc-up b{color:var(--gd);}
/* adhkār routine */
.adh-prog{height:8px;background:var(--creamd);border-radius:20px;overflow:hidden;margin-bottom:6px;}
.adh-fill{height:100%;background:linear-gradient(90deg,var(--g),var(--gold));border-radius:20px;transition:width .4s ease;}
.adh-progl{font-size:11.5px;font-weight:700;color:var(--gd);margin-bottom:12px;}
.adh-done-banner{background:linear-gradient(120deg,rgba(26,107,74,.12),rgba(201,168,76,.14));border:1px solid rgba(201,168,76,.4);border-radius:var(--r2);padding:13px 16px;font-size:13px;font-weight:700;color:var(--gd);text-align:center;margin-bottom:14px;animation:adhPop .4s ease;}
@keyframes adhPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.adh-card{background:#fff;border-radius:var(--r2);padding:15px 16px;box-shadow:var(--sh);margin-bottom:10px;cursor:pointer;border:2px solid transparent;transition:border-color .2s,opacity .2s,transform .1s;user-select:none;-webkit-user-select:none;}
.adh-card:active{transform:scale(.99);}
.adh-card.done{border-color:rgba(26,107,74,.35);opacity:.72;}
.adh-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.adh-t{font-size:12.5px;font-weight:800;color:var(--gd);}
.adh-count{font-size:12px;font-weight:800;background:var(--cream);color:var(--muted);border-radius:20px;padding:4px 12px;min-width:52px;text-align:center;}
.adh-count.fin{background:rgba(26,107,74,.14);color:var(--g);}
.adh-ar{font-family:'Amiri',serif;font-size:19px;color:var(--txt);direction:rtl;line-height:1.9;margin-bottom:8px;}
.adh-en{font-size:11.5px;color:var(--muted);line-height:1.5;margin-bottom:4px;}
.adh-src{font-size:10.5px;color:var(--goldd);font-weight:600;}
@media(min-width:880px){
  .pt-today{max-width:640px;}
  .hm-grid{max-width:640px;}
  .hc-grid{max-width:none;}
  .adh-card{max-width:760px;}
}

/* phones: the five prayers as elegant full-width rows — Arabic · name+iqamah · big time.
   Same design language as the masjid TV's prayer column (kept LAST so nothing overrides it). */
@media(max-width:499px){
  .pgrid{display:flex;flex-direction:column;gap:8px;}
  .pcard{display:grid;grid-template-columns:58px 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;padding:12px 16px;border-radius:14px;}
  .pcard .pa{grid-column:1;grid-row:1/3;font-size:20px;margin:0;text-align:center;line-height:1.3;white-space:nowrap;}
  .pcard .pn{grid-column:2;grid-row:1;align-self:end;font-size:12px;margin:0;letter-spacing:.6px;}
  .pcard .pi{grid-column:2;grid-row:2;align-self:start;font-size:11px;margin:2px 0 0;white-space:nowrap;}
  .pcard .pi.sub{font-size:10.5px;}
  .pcard .pt,.pcard.next .pt{grid-column:3;grid-row:1/3;font-size:22px;white-space:nowrap;text-align:right;}
  .pcard.next{padding-top:22px;}                                  /* headroom for the NEXT pill */
  .pcard.next .pt{font-size:23px;}
  .pcard.next::after{top:6px;right:16px;font-size:6.5px;}
  .pcard.skel{min-height:56px;}
}