/* براعم القرآن – app styles */
:root{
  --bg:#f7f3e8; --paper:#fffdf8; --ink:#1c2a44; --ink2:#4a5675; --muted:#7c8399; --line:#ebe2cc; --soft:#f2ecdc;
  --green:#1f7a5a; --greenD:#155c43; --greenSoft:#dff1e8; --gold:#b8861b; --goldSoft:#fbefcd; --red:#c8453b; --redSoft:#fbe3df; --orange:#d98a1c;
  --night:#0f2a22; --hl:#fff0bd; --shadow:0 14px 34px -22px rgba(28,42,68,.45); --shadowS:0 4px 12px -6px rgba(28,42,68,.3);
  --ar:'Baloo Bhaijaan 2',Tahoma,sans-serif; --q:'Amiri Quran','Amiri',serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  color-scheme:dark; --bg:#0c1a16; --paper:#12241e; --ink:#eef2ec; --ink2:#c3cfc8; --muted:#8fa39a; --line:#223a32; --soft:#0f201b;
  --greenSoft:#153a2e; --goldSoft:#3a3114; --redSoft:#3e1d1a; --hl:#3b3314; --shadow:0 14px 34px -22px rgba(0,0,0,.8);
}}
:root[data-theme="dark"]{ color-scheme:dark; --bg:#0c1a16; --paper:#12241e; --ink:#eef2ec; --ink2:#c3cfc8; --muted:#8fa39a; --line:#223a32; --soft:#0f201b;
  --greenSoft:#153a2e; --goldSoft:#3a3114; --redSoft:#3e1d1a; --hl:#3b3314; --shadow:0 14px 34px -22px rgba(0,0,0,.8); }
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 16px/1.7 var(--ar);-webkit-tap-highlight-color:transparent;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
h1,h2,h3{margin:0;line-height:1.3}
p{margin:0}
/* top bar */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:10px;min-height:58px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px;color:var(--green);flex:1;min-width:0}
.brand img{width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--goldSoft)}
.back{border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:5px 12px;font-weight:700;white-space:nowrap}
.ibtn{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--paper);font-size:18px;display:grid;place-items:center;flex:none}
.bar h2{font-size:20px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* bottom nav */
.nav{position:fixed;inset-inline:0;bottom:0;z-index:30;background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.nav .wrap{display:flex}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 0 6px;text-decoration:none;color:var(--muted);font-size:12.5px;font-weight:700}
.nav a b{font-size:21px;line-height:1.2}
.nav a[aria-current=page]{color:var(--green)}
.nav a[aria-current=page] b{transform:translateY(-1px)}
.hide-nav .nav{display:none}
/* cards */
.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow)}
.sec{margin:20px 0 10px;font-size:17px;color:var(--ink2);display:flex;align-items:center;justify-content:space-between}
.btn{border:1px solid var(--line);background:var(--paper);border-radius:16px;padding:11px 18px;font-weight:800;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;color:inherit}
.btn.pri{background:var(--green);border-color:var(--green);color:#fff}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1d1403}
.btn.big{padding:14px 22px;font-size:18px;width:100%}
.btn:disabled{opacity:.5}
.row{display:flex;gap:10px;flex-wrap:wrap}
/* sheikh */
.sheikh{display:flex;align-items:center;gap:12px}
.sheikh .av{width:62px;height:62px;border-radius:50%;background:#fff;border:3px solid var(--goldSoft);flex:none;object-fit:cover}
.sheikh .bub{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:18px 18px 18px 4px;padding:9px 14px;box-shadow:var(--shadowS);font-size:15.5px;line-height:1.6;position:relative}
.sheikh .bub b{display:block;color:var(--gold);font-size:13px}
.sheikh .say{border:0;background:var(--goldSoft);border-radius:50%;width:40px;height:40px;flex:none}
/* home */
.hello{display:flex;align-items:flex-end;gap:12px;margin-top:14px}
.hello .full{width:104px;flex:none;margin-bottom:-6px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.12))}
.cont{display:flex;align-items:center;gap:14px;margin-top:14px;background:linear-gradient(135deg,var(--green),#2b9b72);color:#fff;border:0;width:100%;text-align:right;border-radius:22px;padding:16px;box-shadow:var(--shadow)}
.cont .ic{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:24px;flex:none}
.cont small{opacity:.85;display:block}
.cont b{font-size:20px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stats div{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:10px;text-align:center}
.stats b{display:block;font-size:24px;color:var(--green);line-height:1.2}
.stats small{color:var(--muted);font-size:12.5px}
.goal{display:flex;align-items:center;gap:14px}
.ring{--p:0;width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--soft) 0);display:grid;place-items:center;flex:none}
.ring span{width:50px;height:50px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-weight:800;font-size:15px}
/* surah list */
.search{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:4px 12px;margin-top:14px}
.search input{border:0;background:none;flex:1;padding:8px 0;outline:none;min-width:0}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 0 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:5px 14px;font-weight:700;font-size:14px;color:var(--ink2)}
.chip[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.sc{display:flex;align-items:center;gap:12px;text-align:right;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:10px 12px;width:100%}
.sc .no{width:38px;height:38px;flex:none;display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--green);background:var(--greenSoft);border-radius:12px}
.sc .t{flex:1;min-width:0}
.sc .t b{display:block;font-size:17px;line-height:1.3}
.sc .t small{color:var(--muted);font-size:12.5px}
.sc .moon{width:28px;height:28px;flex:none}
.sc .lock{font-size:15px;opacity:.7}
.jh{grid-column:1/-1;font-weight:800;color:var(--gold);font-size:14px;margin:10px 2px 0}
/* reader */
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}
.seg{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:3px}
.seg button{border:0;background:none;border-radius:11px;padding:5px 11px;font-size:14px;font-weight:700;color:var(--ink2)}
.seg button[aria-pressed=true]{background:var(--greenSoft);color:var(--green)}
.mushaf{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:22px 16px 26px;box-shadow:var(--shadow);position:relative;margin-top:12px}
.mushaf::before{content:"";position:absolute;inset:7px;border:1.5px solid var(--goldSoft);border-radius:20px;pointer-events:none}
.sname{text-align:center;font:26px/1.6 var(--q);color:var(--green);margin-bottom:2px}
.bsm{font:30px/2 var(--q);text-align:center;color:var(--gold)}
.qtext{font:30px/2.3 var(--q);text-align:justify;text-align-last:center;word-spacing:1px}
.ay{border-radius:10px;cursor:pointer;transition:background .25s,box-shadow .25s}
.ay.on{background:var(--hl);box-shadow:0 0 0 3px var(--hl)}
.ay.sel{box-shadow:0 0 0 2px var(--gold)}
.num{font-family:var(--q);color:var(--gold);white-space:nowrap}
.stages{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.stg{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);border-radius:14px;padding:7px 12px;font-weight:700;font-size:15px}
.stg.done{background:var(--goldSoft);border-color:var(--gold)}
/* ayah action sheet */
.sheet{position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--paper);border-radius:24px 24px 0 0;box-shadow:0 -18px 40px -16px rgba(0,0,0,.4);padding:14px 16px calc(16px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .25s}
.sheet.open{transform:none}
.sheet .grab{width:44px;height:5px;border-radius:9px;background:var(--line);margin:0 auto 10px}
.sheet .in{max-width:820px;margin:0 auto}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.acts button{border:1px solid var(--line);background:var(--soft);border-radius:18px;padding:12px 6px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:2px}
.acts button b{font-size:24px}
.acts .mic{background:var(--green);border-color:var(--green);color:#fff}
.scrim{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}
/* listening */
.listen{text-align:center}
.pulse{width:110px;height:110px;border-radius:50%;margin:10px auto;background:var(--green);color:#fff;display:grid;place-items:center;font-size:40px;border:0;box-shadow:0 0 0 0 rgba(31,122,90,.45)}
.lvl{width:160px;height:8px;border-radius:8px;background:var(--soft);margin:4px auto 8px;overflow:hidden}.lvl i{display:block;height:100%;width:0;background:var(--green);transition:width .08s}
.pulse.on{animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,122,90,.45)}70%{box-shadow:0 0 0 22px rgba(31,122,90,0)}100%{box-shadow:0 0 0 0 rgba(31,122,90,0)}}
.words{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0;direction:rtl}
.words span{font:24px/1.9 var(--q);padding:0 10px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.words .ok{background:var(--greenSoft);border-color:var(--green)}
.words .mid{background:var(--goldSoft);border-color:var(--orange)}
.words .bad{background:var(--redSoft);border-color:var(--red)}
.words .miss{background:var(--redSoft);border-color:var(--red);opacity:.75;text-decoration:underline wavy var(--red)}
.score{font-size:42px;font-weight:800;color:var(--green);line-height:1.1}
.legend{display:flex;gap:12px;justify-content:center;font-size:13px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:middle;margin-inline-end:4px}
/* player */
.player{position:fixed;inset-inline:0;bottom:0;z-index:25;background:var(--paper);border-top:1px solid var(--line);padding:8px 0 calc(8px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}
.player .wrap{display:flex;align-items:center;gap:10px}
.pb{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--soft);font-size:17px;display:grid;place-items:center;flex:none}
.pb.main{width:58px;height:58px;background:var(--green);color:#fff;border:0;font-size:22px}
.pb.mic{background:var(--gold);border-color:var(--gold);color:#1d1403}
.player .info{flex:1;min-width:0;font-size:13.5px}
.player .info b{display:block;font-size:16px}
/* test */
.tcard{text-align:center}
.tcard .q{font:28px/2.2 var(--q);margin:14px 0;min-height:64px}
.tcard .q.hid{filter:blur(9px);user-select:none}
.dots{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.dots i.y{background:var(--green)} .dots i.n{background:var(--orange)}
/* plans */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:14px}
.tier{text-align:center;position:relative}
.tier.pop{border:2px solid var(--green)}
.tier em{position:absolute;top:-12px;inset-inline:0;margin:auto;width:max-content;background:var(--green);color:#fff;border-radius:99px;padding:0 12px;font-style:normal;font-size:13px;font-weight:800}
.tier .amt{font-size:34px;font-weight:800;color:var(--green)}
.fld{display:block;margin:10px 0;font-weight:700}
.fld input{display:block;width:100%;margin-top:4px;border:1px solid var(--line);border-radius:14px;padding:11px;background:var(--bg)}
.pay{background:var(--soft);border-radius:16px;padding:12px;margin:10px 0}
.payto{font-size:24px;font-weight:800;letter-spacing:1px;direction:ltr;text-align:center;color:var(--green)}
.err{color:var(--red);font-weight:700;min-height:1.2em}
.foot{margin:30px 0 10px;font-size:12.5px;color:var(--muted);text-align:center;line-height:1.7}
.toast{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:var(--night);color:#f3efe0;border-radius:14px;padding:8px 16px;z-index:60;font-weight:700;opacity:0;transition:opacity .3s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1}
.onb{max-width:460px;margin:8vh auto 0;text-align:center}
.onb img{width:170px}
.onb input{width:100%;text-align:center;font-size:22px;border:2px solid var(--line);border-radius:18px;padding:12px;background:var(--paper);margin:14px 0}
@media (max-width:480px){ .qtext{font-size:25px} .bsm{font-size:25px} .hello .full{width:84px} .list{grid-template-columns:1fr 1fr} .sc{padding:9px} .sc .no{display:none} }
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* rewards */
.pbar{height:10px;border-radius:10px;background:var(--soft);overflow:hidden;margin:6px 0 4px}.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold));border-radius:10px}
.lvlcard,.treasure{display:flex;gap:12px;align-items:center;margin-top:12px}.lvlcard .big,.treasure .chest{font-size:44px;line-height:1}
.treasure.ready{border:2px solid var(--gold);animation:glow 1.6s infinite alternate}@keyframes glow{to{box-shadow:0 0 18px rgba(201,154,46,.55)}}
.tools .seg button{white-space:nowrap}
.plancard,.revcard{margin-top:12px}.plancard{display:flex;gap:12px;align-items:flex-start;text-align:start;width:100%}.plancard .big{font-size:40px;line-height:1}
button.plancard{border:1px solid var(--line);cursor:pointer}.plancard small{display:block}
.revcard .sc{gap:6px}.revcard .sc .btn{padding:4px 10px;font-size:14px}
.kidb{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:3px 10px;font-weight:700;margin-inline-start:auto;margin-inline-end:8px}

/* ================= ثيم الأطفال: ألوان مبهجة، كروت «بتتداس»، حركة خفيفة ================= */
:root,:root:not([data-theme="light"]){
  color-scheme:light;
  --bg:#fff8ec; --paper:#ffffff; --ink:#23305a; --ink2:#4b5787; --muted:#7a82a6; --line:#f0e3c8; --soft:#fff3dc;
  --green:#14a06f; --greenD:#0d7a54; --greenSoft:#dcf7ea; --gold:#f2a516; --goldSoft:#ffefc2; --red:#f0584a; --redSoft:#ffe2dd; --orange:#ff9f1c;
  --sky:#5cc8ff; --skySoft:#dff4ff; --pink:#ff7eb6; --pinkSoft:#ffe6f1; --purple:#8b6cff; --purpleSoft:#ece6ff;
  --hl:#fff1a8; --shadow:0 10px 24px -14px rgba(35,48,90,.35); --shadowS:0 4px 10px -6px rgba(35,48,90,.3);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:light; --bg:#fff8ec; --paper:#fff; --ink:#23305a; --ink2:#4b5787; --muted:#7a82a6; --line:#f0e3c8; --soft:#fff3dc;
  --greenSoft:#dcf7ea; --goldSoft:#ffefc2; --redSoft:#ffe2dd; --hl:#fff1a8; }}
body{background:
  radial-gradient(circle at 12% 8%,rgba(92,200,255,.18) 0 90px,transparent 91px),
  radial-gradient(circle at 92% 22%,rgba(255,126,182,.14) 0 70px,transparent 71px),
  radial-gradient(circle at 80% 88%,rgba(139,108,255,.12) 0 110px,transparent 111px),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23f2a516' opacity='.13'%3E%3Cpath d='M20 12l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z'/%3E%3Ccircle cx='90' cy='80' r='4'/%3E%3Ccircle cx='70' cy='25' r='2.5'/%3E%3Cpath d='M98 20a10 10 0 1 0 8 16 8 8 0 1 1-8-16z'/%3E%3C/g%3E%3C/svg%3E"),
  var(--bg);font-size:17px}
/* شريط فوق */
.bar{background:color-mix(in srgb,#fff 82%,transparent);border-bottom:0;box-shadow:0 6px 18px -14px rgba(35,48,90,.4)}
.brand{font-size:22px;color:var(--green)}
.brand img{width:42px;height:42px;border:3px solid var(--gold);animation:bob 3s ease-in-out infinite}
.back{border:0;background:var(--skySoft);color:#1677b8;border-radius:16px;padding:7px 14px;font-weight:800;box-shadow:0 3px 0 #b5e3ff}
.back:active{transform:translateY(3px);box-shadow:none}
.ibtn{border:0;background:var(--pinkSoft);box-shadow:0 3px 0 #ffc5de}
/* تحت: أيقونات في فقاعات */
.nav{background:#fff;border-top:0;box-shadow:0 -8px 24px -16px rgba(35,48,90,.45);border-radius:26px 26px 0 0}
.nav a{font-size:13px;color:var(--muted);padding:6px 0 8px}
.nav a b{width:46px;height:40px;border-radius:16px;display:grid;place-items:center;font-size:22px;transition:transform .2s,background .2s}
.nav a[aria-current=page]{color:var(--ink)}
.nav a[aria-current=page] b{background:var(--goldSoft);transform:translateY(-6px) scale(1.12);box-shadow:0 4px 0 #ffd873}
.nav a:nth-child(2)[aria-current=page] b{background:var(--greenSoft);box-shadow:0 4px 0 #a6e9c9}
.nav a:nth-child(3)[aria-current=page] b{background:var(--purpleSoft);box-shadow:0 4px 0 #cfc2ff}
.nav a:nth-child(4)[aria-current=page] b{background:var(--pinkSoft);box-shadow:0 4px 0 #ffc5de}
/* كروت وأزرار «3D» بتتداس */
.card{border:0;border-radius:28px;box-shadow:0 6px 0 var(--line),var(--shadow)}
.btn{border:0;border-radius:18px;background:#fff;box-shadow:0 4px 0 var(--line),var(--shadowS);transition:transform .08s,box-shadow .08s}
.btn:active,.sc:active,.cont:active,.acts button:active,.pb:active,.stg:active{transform:translateY(4px);box-shadow:none}
.btn.pri{background:var(--green);box-shadow:0 5px 0 var(--greenD)}
.btn.gold{background:var(--gold);color:#3a2500;box-shadow:0 5px 0 #c27f00}
.sec{font-size:19px;color:var(--ink);font-weight:800}
/* الشيخ متولي */
.sheikh .av{width:68px;height:68px;border:4px solid var(--gold);animation:bob 3.2s ease-in-out infinite}
.sheikh .bub{border:0;border-radius:22px 22px 22px 6px;background:#fff;box-shadow:0 4px 0 var(--line),var(--shadowS);font-size:16.5px}
.sheikh .bub b{color:#e08a00}
.sheikh .say{background:var(--gold);color:#fff;width:46px;height:46px;font-size:18px;box-shadow:0 4px 0 #c27f00;animation:pulseS 2.2s infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes pulseS{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.hello .full{width:118px;animation:bob 3.6s ease-in-out infinite}
/* الرئيسية */
.cont{background:linear-gradient(135deg,#17b37c,#0f8f63 60%,#0c7a55);border-radius:30px;box-shadow:0 7px 0 #0a5f43,var(--shadow);position:relative;overflow:hidden}
.cont::after{content:"✨";position:absolute;left:18px;top:10px;font-size:26px;animation:twinkle 2s infinite}
.cont .ic{width:60px;height:60px;border-radius:50%;background:#fff;color:var(--green);font-size:26px;box-shadow:0 4px 0 rgba(0,0,0,.15)}
@keyframes twinkle{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.stats div{border:0;border-radius:22px;box-shadow:0 5px 0 var(--line)}
.stats div:nth-child(1){background:var(--greenSoft)} .stats div:nth-child(2){background:var(--goldSoft)} .stats div:nth-child(3){background:var(--purpleSoft)}
.stats b{font-size:26px}
.ring{background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--soft) 0);width:70px;height:70px}
/* قايمة السور: كل كارت بلون */
.sc{border:0;border-radius:22px;box-shadow:0 5px 0 var(--line);transition:transform .08s,box-shadow .08s}
.list > .sc:nth-child(5n+1) .no{background:var(--greenSoft);color:var(--green)}
.list > .sc:nth-child(5n+2) .no{background:var(--skySoft);color:#1677b8}
.list > .sc:nth-child(5n+3) .no{background:var(--pinkSoft);color:#d63d82}
.list > .sc:nth-child(5n+4) .no{background:var(--goldSoft);color:#b57300}
.list > .sc:nth-child(5n) .no{background:var(--purpleSoft);color:#6a4ee0}
.sc .no{border-radius:50% 50% 50% 14px;width:44px;height:44px;font-size:16px}
.chip{border:0;box-shadow:0 3px 0 var(--line)}
.chip[aria-pressed=true]{box-shadow:0 3px 0 var(--greenD)}
.search{border:0;border-radius:20px;box-shadow:0 4px 0 var(--line)}
/* المصحف */
.mushaf{border:0;border-radius:30px;box-shadow:0 7px 0 var(--line),var(--shadow);background:#fffdf6}
.mushaf::before{border:2px dashed #f5d892}
.ay.on{background:var(--hl);box-shadow:0 0 0 4px var(--hl)}
.stg{border:0;border-radius:18px;box-shadow:0 4px 0 var(--line)}
.seg{border:0;box-shadow:0 3px 0 var(--line);border-radius:16px}
.seg button[aria-pressed=true]{background:var(--green);color:#fff}
.player{border-radius:26px 26px 0 0;border-top:0}
.pb{border:0;box-shadow:0 4px 0 var(--line)}
.pb.main{width:64px;height:64px;box-shadow:0 5px 0 var(--greenD)}
.pb.mic{box-shadow:0 5px 0 #c27f00;animation:pulseS 2s infinite}
/* السماع */
.pulse{width:130px;height:130px;font-size:48px;background:radial-gradient(circle at 35% 30%,#2fd394,var(--green));box-shadow:0 7px 0 var(--greenD)}
.lvl{height:12px;width:190px}.lvl i{background:linear-gradient(90deg,var(--green),var(--gold),var(--pink))}
.score{font-size:54px;background:linear-gradient(90deg,var(--green),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.words span{border:0;box-shadow:0 3px 0 var(--line)}
/* السورة اللي قبلها/بعدها */
.nextprev{display:flex;gap:10px;margin:16px 0}
.nextprev a{flex:1;text-decoration:none;color:inherit;background:#fff;border-radius:22px;padding:12px 14px;box-shadow:0 5px 0 var(--line);display:flex;flex-direction:column;align-items:center;font-weight:800}
.nextprev a small{color:var(--muted);font-weight:700}
.nextprev a.nx{background:var(--greenSoft);box-shadow:0 5px 0 #a6e9c9}
.nextprev a:active{transform:translateY(4px);box-shadow:none}
/* احتفال */
.party{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.party i{position:absolute;top:-40px;font-style:normal;font-size:28px;animation:fall 1.8s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}
.toast{background:linear-gradient(135deg,#23305a,#3b4a86);border-radius:20px;padding:10px 18px;font-size:16px;box-shadow:0 6px 18px -6px rgba(0,0,0,.4)}
.toast.show{animation:pop .35s ease-out}
@keyframes pop{0%{transform:translateX(-50%) scale(.7)}100%{transform:translateX(-50%) scale(1)}}
.onb input{border:0;box-shadow:0 5px 0 var(--line);border-radius:22px}
.onb img{animation:bob 3.4s ease-in-out infinite}
.treasure .chest{animation:bob 2.6s ease-in-out infinite}
.sheet{max-height:88vh;overflow-y:auto}
.herok{margin-top:14px;border-radius:30px;overflow:hidden;border:5px solid #fff;box-shadow:0 7px 0 var(--line),var(--shadow);aspect-ratio:1200/640}.herok img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.hello .sheikh{flex:1}

.heard{background:var(--skySoft);border-radius:18px;padding:8px 14px;margin:8px auto;max-width:520px;text-align:center;box-shadow:0 3px 0 #b5e3ff}
.heard small{color:#1677b8;font-weight:800}.heard p{font:22px/1.9 var(--q);min-height:1.9em;color:var(--ink)}
.heard.done{background:#fff;box-shadow:0 3px 0 var(--line)}
.fixloop{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;background:var(--goldSoft);border-radius:18px;padding:8px 12px;margin-bottom:10px;font-weight:700}
.fixloop .btn{padding:4px 12px;font-size:14px}
.words .flash{animation:flash 1s ease-in-out 3}@keyframes flash{50%{transform:scale(1.15);box-shadow:0 0 0 4px var(--red)}}

/* اتعلّم */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:#fff;border-radius:24px;padding:14px 8px;text-decoration:none;color:inherit;box-shadow:0 5px 0 var(--line)}
.tile:nth-child(4n+1){background:var(--goldSoft)}.tile:nth-child(4n+2){background:var(--skySoft)}.tile:nth-child(4n+3){background:var(--pinkSoft)}.tile:nth-child(4n){background:var(--greenSoft)}
.tile .big{font-size:44px;line-height:1.2}.tile small{color:var(--muted)}.tile:active{transform:translateY(4px);box-shadow:none}
.storycard{text-align:center;margin-top:14px;background:linear-gradient(160deg,#fff,var(--goldSoft))}.storycard.occ{background:linear-gradient(160deg,#fff,var(--greenSoft))}
.bigi{font-size:64px;line-height:1.2;animation:bob 3s ease-in-out infinite}
.occban{display:flex;gap:12px;align-items:center;margin-top:14px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#fff3c4,#ffe0ef);border:2px solid var(--gold);animation:glow 1.6s infinite alternate}
.occban .big{font-size:44px}.occban small{display:block;color:var(--ink2)}
.giftcard{text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.gift{font-size:84px;border:0;background:none;animation:wiggle 1.2s ease-in-out infinite;cursor:pointer}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.05)}75%{transform:rotate(10deg) scale(1.05)}}
.tjex{margin-top:10px}.tjex .q{font:26px/2.1 var(--q);text-align:center}.tjw{background:#ffe27a;border-radius:8px;padding:0 4px;box-shadow:0 0 0 3px #ffe27a}
.tag{background:var(--purpleSoft);color:#6a4ee0;border-radius:12px;padding:3px 10px;font-weight:800;font-size:14px}
.opts,.gopts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}.gopts{flex-direction:column}.gopts .btn{font:22px/1.9 var(--q);white-space:normal}
.opts .btn{font-size:18px}.opts .btn.right,.gopts .btn.right{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--greenD)}.btn.wrong{background:var(--red);color:#fff;box-shadow:0 4px 0 #b53b30}
.game{margin-top:12px;text-align:center}.gq{font:26px/2.1 var(--q)}
.gline{min-height:60px;border:2px dashed var(--line);border-radius:18px;padding:6px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font:24px/1.9 var(--q);direction:rtl}
.gline span{background:var(--greenSoft);border-radius:12px;padding:0 10px;animation:pop2 .25s}
@keyframes pop2{from{transform:scale(.6)}to{transform:none}}
.gpool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.gw{font:24px/1.9 var(--q);border:0;background:#fff;border-radius:14px;padding:2px 12px;box-shadow:0 4px 0 var(--line)}.gw.used{opacity:.25}
.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.blank{display:inline-block;min-width:70px;border-bottom:3px solid var(--gold);color:var(--gold)}.blank.done{color:var(--green);border-color:var(--green)}
.gres{font-size:20px;font-weight:800;color:var(--green);min-height:1.6em;margin-top:8px}
.gtabs{justify-content:center}.gtabs button{flex:1}
.nav a:nth-child(3)[aria-current=page] b{background:var(--skySoft);box-shadow:0 4px 0 #b5e3ff}

.wsel{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;direction:rtl}
.wsel button{font:24px/1.9 var(--q);border:0;background:#fff;border-radius:14px;padding:0 10px;box-shadow:0 3px 0 var(--line)}
.wsel button.on{background:var(--hl);box-shadow:0 3px 0 #e6c200}
.fld select{display:block;width:100%;margin-top:4px;border:0;border-radius:14px;padding:11px;background:var(--bg);font:inherit;box-shadow:0 3px 0 var(--line)}

.dhrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dh{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:inherit;padding:12px}.dh .big{font-size:36px}.dh small{color:var(--muted)}
.dh:first-child{background:linear-gradient(160deg,#fff,var(--goldSoft))}.dh:last-child{background:linear-gradient(160deg,#fff,var(--skySoft))}
.dhk{margin-top:10px}.dhk.done{opacity:.6}.dt{font:600 21px/1.9 'Baloo Bhaijaan 2',Tahoma}.dt.big{font-size:24px;margin:10px 0}.qsm{font:23px/2 var(--q)}
.cnt{min-width:64px;height:64px;border-radius:50%;border:0;background:var(--green);color:#fff;font-size:22px;font-weight:800;box-shadow:0 5px 0 var(--greenD)}
.cnt:active{transform:translateY(4px);box-shadow:none}.cnt.done{background:var(--gold);box-shadow:0 5px 0 #c27f00}
.tile.pic{padding:0 0 10px;overflow:hidden}.tile.pic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:6px}
.storycard.pic{padding:0 0 14px;overflow:hidden}.storycard.pic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;margin-bottom:10px}

/* الاشتراك */
.lockn{margin-top:14px;background:var(--goldSoft)}
.pricecard{margin-top:14px;text-align:center;position:relative;background:linear-gradient(170deg,#fff,#eafff5);border:3px solid var(--green);overflow:hidden}
.pricecard .ribbon{position:absolute;top:14px;left:-34px;transform:rotate(-35deg);background:var(--gold);color:#3a2500;font-weight:800;font-size:13px;padding:3px 40px}
.pricecard .amt{font-size:56px;font-weight:800;color:var(--green);line-height:1.1;margin:6px 0}.pricecard .amt small{font-size:20px}.pricecard .amt s{font-size:24px;color:var(--muted)}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;text-align:start}
.feats div{background:#fff;border-radius:16px;padding:8px 10px;box-shadow:0 3px 0 var(--line);display:grid;grid-template-columns:auto 1fr;column-gap:8px}
.feats span{grid-row:span 2;font-size:24px}.feats b{font-size:15px}.feats small{color:var(--muted);font-size:12px;line-height:1.4}
.refbox{background:var(--goldSoft);border-radius:18px;padding:10px;margin:10px 0;text-align:start}.refbox label{font-weight:800}
.refbox input{flex:1;min-width:0;border:0;border-radius:12px;padding:10px;font:700 18px monospace;text-transform:uppercase;box-shadow:0 3px 0 var(--line)}
.trust{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px;font-size:13px;color:var(--ink2)}.trust span{background:#fff;border-radius:99px;padding:3px 10px}
.cmp{margin-top:12px}.cmp table{width:100%;border-collapse:collapse;margin-top:8px;font-size:15px}.cmp td,.cmp th{padding:7px;border-bottom:1px solid var(--line);text-align:center}.cmp td:first-child{text-align:start}
.cmp th:last-child,.cmp td:last-child{background:var(--greenSoft);color:var(--green);font-weight:800}
.faq{margin-top:12px}.faq details{border-bottom:1px solid var(--line);padding:8px 0}.faq summary{font-weight:800;cursor:pointer}.faq p{margin-top:6px;color:var(--ink2)}
.steps3{display:flex;gap:6px;margin-top:14px}.steps3 span{flex:1;text-align:center;background:#fff;border-radius:14px;padding:6px;font-weight:800;font-size:14px;color:var(--muted);box-shadow:0 3px 0 var(--line)}
.steps3 .on{background:var(--gold);color:#3a2500}.steps3 .done{background:var(--greenSoft);color:var(--green)}
.paycard{margin-top:12px;text-align:center}.paycard .big{color:var(--green);font-size:28px}.howto{background:var(--skySoft);border-radius:14px;padding:10px;margin:10px 0;text-align:start;line-height:1.8}
.payto{font:800 34px monospace;letter-spacing:2px;color:var(--green);margin:6px 0}
.tl{text-align:start;list-style:none;padding:0;margin:12px auto;max-width:340px}.tl li{padding:6px 12px;border-radius:12px;margin:4px 0;background:var(--soft);font-weight:700;color:var(--muted)}
.tl .done{background:var(--greenSoft);color:var(--green)}.tl .on{background:var(--goldSoft);color:#8a5a00;animation:glow 1.4s infinite alternate}
.invite{margin-top:12px;text-align:center;background:linear-gradient(160deg,#fff,var(--pinkSoft))}.invite .code{font:800 36px monospace;letter-spacing:4px;color:#d63d82;margin:8px 0}
.qr{width:190px;margin:6px auto 10px;background:#fff;padding:6px;border-radius:14px;box-shadow:0 4px 0 var(--line)}.qr svg{width:100%;height:auto;display:block}

/* الترتيب */
.lbcta{display:flex;gap:12px;align-items:center;margin-top:12px;text-decoration:none;color:inherit;background:linear-gradient(135deg,#fff5d6,#ffe3f0)}.lbcta .big{font-size:40px}.lbcta small{display:block;color:var(--ink2)}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin-top:12px}
.podium>div{background:#fff;border-radius:20px 20px 8px 8px;padding:10px 6px;text-align:center;box-shadow:0 5px 0 var(--line);position:relative}
.podium .p1{order:2;background:linear-gradient(180deg,#fff3c4,#fff);padding-top:18px;min-height:150px}.podium .p2{order:1;min-height:120px}.podium .p3{order:3;min-height:105px}
.podium .av{font-size:38px;display:block}.podium b{display:block;font-size:15px}.podium small{color:var(--muted);font-size:12px}.podium i{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:28px;font-style:normal}
.lbrow{display:grid;grid-template-columns:36px 34px 1fr auto;align-items:center;gap:8px;padding:8px;border-radius:14px}.lbrow+.lbrow{border-top:1px solid var(--line)}
.lbrow .rk{font-weight:800;text-align:center}.lbrow .av{font-size:24px}.lbrow small{color:var(--muted);font-size:13px}.lbrow.me{background:var(--greenSoft)}
.mine{margin-top:12px;border:2px solid var(--green)}
.avs{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:8px 0 12px}.avs button{font-size:26px;border:0;background:#fff;border-radius:14px;padding:6px 0;box-shadow:0 3px 0 var(--line)}
.avs button[aria-pressed=true]{background:var(--goldSoft);box-shadow:0 3px 0 #ffd873;transform:scale(1.1)}