/* ════════════════════════════════════════════════
   إسلاميّاتنا — ثيم Vapih الكرتوني (بنفسجي العنب)
   عربي RTL · خط Alexandria · فاتح/داكن
════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;500;600;700;800&family=Amiri:wght@400;700&display=swap');

:root{
  --grape:#7c5cff; --grape-d:#5b3ae0; --pink:#ff5ca8; --sky:#38bdf8;
  --yellow:#ffd23f; --mint:#2fe0a0; --coral:#ff6b6b;
  --bg:#f6f1ff; --bg2:#ece3ff; --panel:#ffffff; --panel2:#f4eeff;
  --ink:#221d3a; --line:#221d3a; --text:#2a2548; --muted:#6c6388;
  --bw:2.5px; --r:18px; --r-lg:26px;
  --pop:3px 3px 0 var(--ink); --pop-lg:5px 5px 0 var(--ink);
  --font:'Alexandria',system-ui,sans-serif; --quran:'Amiri',serif;
}
[data-theme="dark"]{
  --bg:#15122b; --bg2:#1c1738; --panel:#211a40; --panel2:#2a2150;
  --ink:#0c0a18; --line:#0c0a18; --text:#efeaff; --muted:#a99fce;
  --pop:3px 3px 0 #0c0a18; --pop-lg:5px 5px 0 #0c0a18;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); background:var(--bg); color:var(--text);
  direction:rtl; min-height:100vh; line-height:1.7;
  background-image:radial-gradient(circle at 12% 8%,rgba(124,92,255,.10),transparent 40%),radial-gradient(circle at 88% 4%,rgba(255,92,168,.08),transparent 38%);
  transition:background .4s ease,color .4s ease;
}
::selection{background:var(--grape);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ── شريط علوي ── */
.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
  padding:12px clamp(14px,4vw,40px); background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px); border-bottom:var(--bw) solid var(--line);
}
[data-theme="dark"] .topbar{background:rgba(33,26,64,.75)}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.25rem}
.brand .logo{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;
  background:linear-gradient(150deg,var(--grape),var(--grape-d));border:var(--bw) solid var(--line);
  box-shadow:var(--pop);color:#fff;flex:0 0 auto;transform:rotate(-4deg);
}
.brand b{color:var(--grape)}
.brand-logo{height:42px;width:auto;max-width:min(60vw,230px);object-fit:contain;display:block}
.spacer{flex:1}

/* ── تبويبات التنقل ── */
.nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.nav button{
  font-family:inherit;font-weight:700;font-size:.95rem;cursor:pointer;
  padding:9px 16px;border-radius:100px;border:var(--bw) solid transparent;
  background:transparent;color:var(--muted);transition:.18s;
}
.nav button:hover{color:var(--text);background:var(--panel2)}
.nav button.active{
  background:var(--grape);color:#fff;border-color:var(--line);box-shadow:var(--pop);
}

/* ── الحاوية والأقسام ── */
.wrap{max-width:1080px;margin:0 auto;padding:clamp(20px,4vw,44px) clamp(14px,4vw,28px)}
.view{display:none;animation:pop .35s cubic-bezier(.34,1.56,.5,1)}
.view.active{display:block}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

.section-head{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.section-head h2{font-size:clamp(1.5rem,4vw,2.1rem);font-weight:800}
.section-head .emoji{font-size:2rem}
.section-head p{color:var(--muted);width:100%;font-size:.98rem}

/* ── بطاقات ── */
.card{
  background:var(--panel);border:var(--bw) solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--pop);padding:20px;transition:.18s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--pop-lg)}

/* ── الرئيسية / البطل ── */
.hero{
  text-align:center;padding:46px 24px;border-radius:var(--r-lg);
  border:var(--bw) solid var(--line);box-shadow:var(--pop-lg);
  background:linear-gradient(150deg,#fff,var(--panel2));position:relative;overflow:hidden;
}
[data-theme="dark"] .hero{background:linear-gradient(150deg,var(--panel),var(--panel2))}
.hero h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:800;line-height:1.25}
.hero h1 b{color:var(--grape)}
.hero p{color:var(--muted);max-width:560px;margin:14px auto 0;font-size:1.05rem}
.hero .basmala{font-family:var(--quran);font-size:clamp(1.6rem,5vw,2.4rem);color:var(--grape-d);margin-bottom:8px}
[data-theme="dark"] .hero .basmala{color:#b9a6ff}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:30px}
.tile{
  cursor:pointer;text-align:center;padding:24px 16px;border-radius:var(--r);
  background:var(--panel);border:var(--bw) solid var(--line);box-shadow:var(--pop);transition:.18s;
}
.tile:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:var(--pop-lg)}
.tile .ico{font-size:2.4rem;display:block;margin-bottom:8px}
.tile b{display:block;font-size:1.05rem}
.tile span{color:var(--muted);font-size:.85rem}

/* ألوان مرحة للبلاطات */
.tile:nth-child(1){background:linear-gradient(150deg,#fff,#efe9ff)}
.tile:nth-child(2){background:linear-gradient(150deg,#fff,#ffe9f4)}
.tile:nth-child(3){background:linear-gradient(150deg,#fff,#e6f7ff)}
.tile:nth-child(4){background:linear-gradient(150deg,#fff,#e7fff5)}
.tile:nth-child(5){background:linear-gradient(150deg,#fff,#fff6e0)}
.tile:nth-child(6){background:linear-gradient(150deg,#fff,#ffeceb)}
[data-theme="dark"] .tile{background:var(--panel2)!important}

/* ── شريط البحث ── */
.search{
  display:flex;align-items:center;gap:10px;background:var(--panel);
  border:var(--bw) solid var(--line);border-radius:100px;padding:6px 18px;
  box-shadow:var(--pop);margin-bottom:22px;
}
.search input{flex:1;border:0;background:transparent;font-family:inherit;font-size:1rem;color:var(--text);outline:none}
.search input::placeholder{color:var(--muted)}
.search .ico{font-size:1.2rem}

/* ── قائمة السور ── */
.surah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.surah{
  display:flex;align-items:center;gap:14px;cursor:pointer;padding:14px 16px;
  background:var(--panel);border:var(--bw) solid var(--line);border-radius:var(--r);
  box-shadow:var(--pop);transition:.16s;
}
.surah:hover{transform:translateY(-3px);box-shadow:var(--pop-lg);border-color:var(--grape)}
.surah .num{
  width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;font-weight:800;
  background:var(--grape);color:#fff;border:var(--bw) solid var(--line);
  border-radius:12px;transform:rotate(45deg);
}
.surah .num span{transform:rotate(-45deg)}
.surah .info b{display:block;font-size:1.12rem}
.surah .info small{color:var(--muted)}
.surah .info .ename{font-size:.78rem;opacity:.8}

/* ── عارض السورة ── */
.reader-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.btn{
  font-family:inherit;font-weight:700;cursor:pointer;padding:9px 18px;border-radius:100px;
  border:var(--bw) solid var(--line);background:var(--panel);color:var(--text);
  box-shadow:var(--pop);transition:.15s;display:inline-flex;align-items:center;gap:7px;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--pop-lg)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--grape);color:#fff}
.btn.pink{background:var(--pink);color:#fff}
.reader{
  background:var(--panel);border:var(--bw) solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--pop-lg);padding:clamp(20px,4vw,38px);
}
.reader .title{text-align:center;margin-bottom:18px}
.reader .title h2{font-size:1.9rem}
.reader .title small{color:var(--muted)}
.basmala-line{
  font-family:var(--quran);font-size:1.7rem;text-align:center;color:var(--grape-d);
  padding:14px;margin-bottom:14px;border-bottom:2px dashed var(--line);
}
[data-theme="dark"] .basmala-line{color:#b9a6ff}
.ayah{
  font-family:var(--quran);font-size:clamp(1.4rem,3.6vw,1.9rem);line-height:2.3;
  text-align:justify;display:inline;
}
.ayah-mark{
  display:inline-grid;place-items:center;width:30px;height:30px;margin:0 4px;font-size:.8rem;
  font-family:var(--font);font-weight:700;color:var(--grape-d);vertical-align:middle;
  background:radial-gradient(circle,var(--yellow) 60%,transparent 62%);
}
[data-theme="dark"] .ayah-mark{color:var(--ink)}

/* ── أحاديث ── */
.hadith{margin-bottom:16px}
.hadith .text{font-size:1.18rem;line-height:2;font-family:var(--quran)}
.hadith .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  font-size:.82rem;font-weight:700;padding:5px 13px;border-radius:100px;
  border:2px solid var(--line);background:var(--panel2);
}
.chip.grade{background:var(--mint);color:#0a3b29;border-color:#0a3b29}
.chip.rawi{background:var(--sky);color:#06334a;border-color:#06334a}
.chip.src{background:var(--yellow);color:#5b4500;border-color:#5b4500}
.chip.topic{background:var(--pink);color:#5b0d33;border-color:#5b0d33}

/* ── أذكار ── */
.tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.dhikr{margin-bottom:14px;cursor:pointer;position:relative;overflow:hidden}
.dhikr .text{font-size:1.12rem;line-height:1.95;font-family:var(--quran)}
.dhikr .foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:10px}
.dhikr .ref{color:var(--muted);font-size:.85rem}
.dhikr .cnt{
  background:var(--grape);color:#fff;border:var(--bw) solid var(--line);border-radius:100px;
  padding:4px 14px;font-weight:800;box-shadow:var(--pop);min-width:54px;text-align:center;
}
.dhikr.done{opacity:.55}
.dhikr.done .cnt{background:var(--mint);color:#0a3b29}

/* ── أسماء الله الحسنى ── */
.names{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.name{text-align:center;padding:18px 14px}
.name .ar{font-family:var(--quran);font-size:1.7rem;font-weight:700;color:var(--grape-d)}
[data-theme="dark"] .name .ar{color:#b9a6ff}
.name .en{font-size:.85rem;color:var(--muted);margin:2px 0 8px}
.name .mean{font-size:.92rem;line-height:1.6}
.name .idx{
  font-size:.72rem;font-weight:700;width:26px;height:26px;display:grid;place-items:center;margin:0 auto 6px;
  background:var(--yellow);border:2px solid var(--line);border-radius:50%;color:#5b4500;
}

/* ── مواقيت الصلاة ── */
.prayer-card{text-align:center}
.prayer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-top:20px}
.prayer{padding:18px 12px;border-radius:var(--r);border:var(--bw) solid var(--line);box-shadow:var(--pop);background:var(--panel2)}
.prayer .ico{font-size:1.8rem}
.prayer .nm{font-weight:800;font-size:1.1rem;margin:4px 0}
.prayer .tm{color:var(--grape-d);font-weight:700;font-size:1.15rem;direction:ltr}
[data-theme="dark"] .prayer .tm{color:#b9a6ff}
.prayer.next{background:var(--grape);color:#fff;transform:scale(1.04)}
.prayer.next .tm{color:#fff}

/* ── المسبحة ── */
.tasbeeh{text-align:center;padding:40px 24px}
.tasbeeh .word{font-family:var(--quran);font-size:2.4rem;color:var(--grape-d);min-height:60px}
[data-theme="dark"] .tasbeeh .word{color:#b9a6ff}
.tasbeeh .count{font-size:4.5rem;font-weight:800;line-height:1;margin:10px 0}
.bead{
  width:170px;height:170px;border-radius:50%;margin:18px auto;cursor:pointer;user-select:none;
  display:grid;place-items:center;font-size:1.4rem;font-weight:800;color:#fff;
  background:radial-gradient(circle at 35% 30%,#9b85ff,var(--grape) 55%,var(--grape-d));
  border:var(--bw) solid var(--line);box-shadow:var(--pop-lg);transition:.1s;
}
.bead:active{transform:scale(.93);box-shadow:var(--pop)}
.tasbeeh .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* ── تذييل ── */
.footer{text-align:center;padding:30px 16px;color:var(--muted);border-top:var(--bw) solid var(--line);margin-top:30px;font-size:.9rem}
.footer b{color:var(--grape)}

/* ── حالة تحميل ── */
.loading{text-align:center;padding:50px;color:var(--muted)}
.spin{
  width:42px;height:42px;border:5px solid var(--panel2);border-top-color:var(--grape);
  border-radius:50%;margin:0 auto 14px;animation:sp .8s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

@media(max-width:680px){
  .nav{order:3;width:100%;justify-content:center;overflow-x:auto}
  .topbar{flex-wrap:wrap}
}

/* ═══════════════════════════════════════════════════════════════
   ✦ VAPIH LEGENDARY THEME TOGGLE ✦  (shared sun⇄moon sky switch)
   Palette-agnostic · keyed off [data-theme="dark"] on <html>
═══════════════════════════════════════════════════════════════ */
.vp-toggle{position:relative;width:64px;height:32px;border-radius:100px;border:2.5px solid var(--line,#221d3a);background:linear-gradient(160deg,#8fd6ff,#5fb8ff 55%,#3a93f0);cursor:pointer;padding:0;flex:0 0 auto;overflow:hidden;box-shadow:inset 0 2px 5px rgba(255,255,255,.45),2px 2px 0 var(--line,#221d3a);transition:background .5s ease,transform .15s ease,box-shadow .15s ease;vertical-align:middle;}
.vp-toggle:hover{transform:translateY(-2px) scale(1.03);}
.vp-toggle:active{transform:scale(.95);}
[data-theme="dark"] .vp-toggle{background:linear-gradient(160deg,#1b1d3a,#2b1d52 60%,#3a2068);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),2px 2px 0 var(--line,#0c0a18);}
.vp-toggle::before{content:"";position:absolute;top:8px;left:9px;width:2.5px;height:2.5px;border-radius:50%;background:#fff;box-shadow:7px 5px 0 -.5px rgba(255,255,255,.85),15px -3px 0 -1px rgba(255,255,255,.7),21px 7px 0 -1px rgba(255,255,255,.6),12px 12px 0 -1px rgba(255,255,255,.55);opacity:0;transition:opacity .4s ease;pointer-events:none;}
[data-theme="dark"] .vp-toggle::before{opacity:1;}
.vp-toggle .vp-tt-thumb{position:absolute;top:50%;left:4px;width:23px;height:23px;transform:translate(32px,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6d6,#ffd24d 60%,#ffb02e);box-shadow:0 0 10px 2px rgba(255,200,70,.7),inset -2px -2px 3px rgba(180,120,0,.3);transition:transform .5s cubic-bezier(.34,1.7,.5,1),background .5s ease,box-shadow .5s ease;pointer-events:none;}
.vp-toggle .vp-tt-thumb::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle,transparent 62%,#ffd24d 62%,#ffd24d 70%,transparent 71%);-webkit-mask:repeating-conic-gradient(#000 0 18deg,transparent 18deg 36deg);mask:repeating-conic-gradient(#000 0 18deg,transparent 18deg 36deg);opacity:.9;animation:vpSun 9s linear infinite;}
@keyframes vpSun{to{transform:rotate(360deg);}}
[data-theme="dark"] .vp-toggle .vp-tt-thumb{transform:translate(0,-50%);background:radial-gradient(circle at 35% 30%,#fdfbf0,#dfe3ef 65%,#c3c9dd);box-shadow:inset -5px -3px 0 -1px rgba(150,160,190,.55),0 0 8px 1px rgba(220,230,255,.4);}
[data-theme="dark"] .vp-toggle .vp-tt-thumb::before{opacity:0;}
@media (prefers-reduced-motion: reduce){.vp-toggle .vp-tt-thumb::before{animation:none;}.vp-toggle,.vp-toggle .vp-tt-thumb{transition-duration:.05ms;}}