/* ══════════════════════════════════════════════════════════════
   دينيَ الإسلام — deeni.css (v156)
   نظام تصميم موحَّد: لون واحد (وردي عتيق + ذهب)، خطوط محلية،
   حركات هادئة، وضع فاتح/داكن تلقائي. RTL أولًا.
   ══════════════════════════════════════════════════════════════ */

/* ───────── الخطوط (محلية) ───────── */
@font-face{font-family:'KFGQPC Hafs';src:url('../fonts/kfgqpc-hafs.woff2') format('woff2'),url('../fonts/kfgqpc-hafs.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Amiri';font-weight:400;src:url('../fonts/amiri-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Amiri';font-weight:700;src:url('../fonts/amiri-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Noto Naskh Arabic';font-weight:400;src:url('../fonts/noto-naskh.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Noto Naskh Arabic';font-weight:500;src:url('../fonts/noto-naskh-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Noto Naskh Arabic';font-weight:600;src:url('../fonts/noto-naskh-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Noto Naskh Arabic';font-weight:700;src:url('../fonts/noto-naskh-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Tajawal';font-weight:400;src:url('../fonts/tajawal-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Tajawal';font-weight:500;src:url('../fonts/tajawal-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Tajawal';font-weight:700;src:url('../fonts/tajawal-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Reem Kufi';font-weight:700;src:url('../fonts/reem-kufi-700.woff2') format('woff2');font-display:swap}

/* ───────── الرموز (Tokens) ───────── */
:root{
  --rose:#7E3350; --rose-deep:#5A2038; --rose-ink:#3E1527; --rose-soft:#B25578; --rose-tint:#F6E8EE; --rose-tint-2:#EFD6E0;
  --gold:#C9A24A; --gold-light:#E7CF8C; --gold-deep:#9C7A2C; --gold-tint:#FBF3DF;
  --bg:#FBF7F5; --paper:#FFFDFC; --paper-2:#F7EFF1; --line:#EBDDE3; --line-2:#DCC7D0;
  --ink:#2B1B22; --ink-2:#5C4650; --ink-3:#8A7580;
  --shadow-1:0 1px 2px rgba(62,21,39,.05),0 4px 14px rgba(62,21,39,.06);
  --shadow-2:0 2px 6px rgba(62,21,39,.07),0 14px 40px rgba(62,21,39,.10);
  --shadow-3:0 8px 30px rgba(62,21,39,.14),0 30px 80px rgba(62,21,39,.16);
  --glass:rgba(255,253,252,.78);
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
  --f-quran:'KFGQPC Hafs','Amiri Quran','Amiri',serif;
  --f-head:'Amiri','Noto Naskh Arabic',serif;
  --f-body:'Noto Naskh Arabic','Amiri',serif;
  --f-ui:'Tajawal','Cairo',system-ui,-apple-system,sans-serif;
  --fs:1;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --t:.28s var(--ease);
  --hdr-h:64px;
  color-scheme:light;
}
html[data-theme="dark"]{
  --rose:#C86A93; --rose-deep:#A64F77; --rose-ink:#F1DCE5; --rose-soft:#D98BB0; --rose-tint:#3A2530; --rose-tint-2:#4A2E3B;
  --gold:#D8B45C; --gold-light:#E9CF8E; --gold-deep:#F0D79A; --gold-tint:#3A2E1C;
  --bg:#171013; --paper:#211820; --paper-2:#2A1E27; --line:#3A2A33; --line-2:#4C3A45;
  --ink:#F3E8EC; --ink-2:#CDB7C1; --ink-3:#9C8592;
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.35);
  --shadow-2:0 2px 6px rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.45);
  --shadow-3:0 8px 30px rgba(0,0,0,.5),0 30px 80px rgba(0,0,0,.55);
  --glass:rgba(33,24,32,.78);
  color-scheme:dark;
}

/* ───────── أساسيات ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.06rem;line-height:1.95;direction:rtl;text-align:right;min-height:100dvh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 50% -200px,var(--rose-tint) 0%,transparent 60%);}
html[data-theme="dark"] body{background-image:radial-gradient(1200px 600px at 50% -200px,#2A1A24 0%,transparent 60%)}
a{color:var(--rose);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%;display:block}
::selection{background:var(--gold-light);color:var(--rose-ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ui{font-family:var(--f-ui)}
.wrap{max-width:820px;margin:0 auto;padding:0 18px}
@media(min-width:900px){.wrap{padding:0 24px}}
@media(min-width:640px){.parts{flex-wrap:wrap;justify-content:center;mask-image:none;overflow:visible}}
.ar-num{font-family:var(--f-head)}

/* ───────── الهيدر ───────── */
.hdr{position:sticky;top:0;z-index:60;background:var(--glass);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t)}
.hdr.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(62,21,39,.06)}
.hdr-in{height:var(--hdr-h);display:flex;align-items:center;gap:10px}
.hdr-menu{margin-inline-start:-8px}
@media(min-width:900px){.hdr-in{gap:14px}}
.brand{display:flex;align-items:center;gap:10px;color:var(--rose-ink);font-family:var(--f-head);font-weight:700;font-size:1.28rem;letter-spacing:.01em;margin-inline-end:auto}
.brand-mark{width:34px;height:34px;color:var(--gold);flex:none;transform-origin:center;animation:markIn 1.1s var(--spring) both}
.brand:hover .brand-mark{animation:markSpin 1.4s var(--ease)}
@keyframes markIn{from{opacity:0;transform:scale(.4) rotate(-40deg)}to{opacity:1;transform:none}}
@keyframes markSpin{to{transform:rotate(90deg)}}
.brand-name{position:relative}
.hdr-nav{display:none;gap:4px;font-family:var(--f-ui);font-weight:500;font-size:.95rem}
.hdr-nav a{padding:8px 12px;border-radius:999px;color:var(--ink-2);transition:background var(--t),color var(--t)}
.hdr-nav a:hover,.hdr-nav a[aria-current="page"]{background:var(--rose-tint);color:var(--rose)}
@media(min-width:900px){.hdr-nav{display:flex}}
.hdr-acts{display:flex;gap:6px}
.ibtn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:var(--rose);transition:background var(--t),transform .15s var(--ease)}
.ibtn:hover{background:var(--rose-tint)}
.ibtn:active{transform:scale(.92)}
.ibtn svg{width:22px;height:22px}

/* ───────── الدرج الجانبي ───────── */
.drawer-bg{position:fixed;inset:0;background:rgba(43,27,34,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:80;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(86vw,360px);background:var(--paper);z-index:81;transform:translateX(-102%);transition:transform .42s var(--ease);box-shadow:var(--shadow-3);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 16px) 18px calc(env(safe-area-inset-bottom,0px) + 18px);overflow-y:auto;overscroll-behavior:contain}
html[dir="rtl"] .drawer{transform:translateX(102%)}
body.drawer-open .drawer{transform:none}
body.drawer-open .drawer-bg{opacity:1;pointer-events:auto}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.drawer-brand{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:700;font-size:1.2rem;color:var(--rose-ink)}
.drawer-brand svg{width:30px;height:30px;color:var(--gold)}
.drawer-nav{display:flex;flex-direction:column;gap:2px;margin:8px 0 14px}
.drawer-nav a{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:14px;font-family:var(--f-ui);font-weight:500;font-size:1.02rem;color:var(--ink);opacity:0;transform:translateX(10px);transition:background var(--t)}
body.drawer-open .drawer-nav a{animation:navIn .5s var(--ease) forwards}
.drawer-nav a:nth-child(1){animation-delay:.05s}.drawer-nav a:nth-child(2){animation-delay:.1s}.drawer-nav a:nth-child(3){animation-delay:.15s}.drawer-nav a:nth-child(4){animation-delay:.2s}.drawer-nav a:nth-child(5){animation-delay:.25s}.drawer-nav a:nth-child(6){animation-delay:.3s}
@keyframes navIn{to{opacity:1;transform:none}}
.drawer-nav a:hover,.drawer-nav a[aria-current="page"]{background:var(--rose-tint);color:var(--rose)}
.drawer-nav a svg{width:21px;height:21px;color:var(--rose);flex:none}
.drawer-sec{font-family:var(--f-ui);font-size:.78rem;font-weight:700;color:var(--ink-3);letter-spacing:.04em;margin:14px 6px 8px}
.seg{display:inline-flex;position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:3px;font-family:var(--f-ui);font-weight:700;font-size:.9rem;isolation:isolate}
.seg button{position:relative;z-index:1;padding:7px 14px;border-radius:999px;color:var(--ink-2);transition:color var(--t);white-space:nowrap}
.seg button.on{color:#fff}
.seg-ind{position:absolute;top:3px;bottom:3px;left:3px;width:0;background:var(--rose);border-radius:999px;z-index:0;transition:transform .35s var(--spring),width .35s var(--ease);box-shadow:0 4px 12px rgba(126,51,80,.35)}
.drawer .seg{width:100%;display:flex}
.drawer .seg button{flex:1;text-align:center}
.fs-row{display:flex;align-items:center;gap:10px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:4px}
.fs-row button{flex:1;padding:7px;border-radius:999px;font-family:var(--f-ui);font-weight:700;font-size:.95rem;color:var(--rose);transition:background var(--t)}
.fs-row button:hover{background:var(--rose-tint)}
.fs-row span{font-family:var(--f-ui);font-size:.85rem;color:var(--ink-3);min-width:3.2em;text-align:center}
.drawer-cta{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:16px}
.support-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 16px;border-radius:16px;background:linear-gradient(135deg,var(--rose) 0%,var(--rose-deep) 100%);color:#fff;font-family:var(--f-ui);font-weight:700;font-size:1rem;box-shadow:0 8px 22px rgba(126,51,80,.3);transition:transform .2s var(--spring),box-shadow var(--t)}
.support-btn svg{width:20px;height:20px;color:var(--gold-light)}
.support-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(126,51,80,.38)}
.drawer-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:14px;font-family:var(--f-ui);font-size:.9rem;color:var(--ink-3);transition:color var(--t),background var(--t)}
.drawer-link:hover{color:var(--rose);background:var(--rose-tint)}
.drawer-link svg{width:17px;height:17px}

/* ───────── الهيرو (صفحة السورة) ───────── */
.s-hero{position:relative;text-align:center;padding:38px 0 22px;animation:fadeUp .8s var(--ease) both}
.s-no{width:78px;height:78px;margin:0 auto 14px;position:relative;display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:1.55rem;color:var(--rose);animation:markIn 1s .05s var(--spring) both}
.s-no::before,.s-no::after{content:"";position:absolute;inset:0;border:2px solid var(--gold);border-radius:20px;transition:transform .8s var(--ease)}
.s-no::after{transform:rotate(45deg)}
.s-hero:hover .s-no::after{transform:rotate(135deg)}
.s-hero:hover .s-no::before{transform:rotate(90deg)}
.s-name{font-family:var(--f-head);font-weight:700;font-size:clamp(2rem,6vw,2.7rem);margin:0;color:var(--rose-ink);letter-spacing:.005em}
.s-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-family:var(--f-ui);font-size:.86rem;font-weight:500;color:var(--ink-2)}
.s-meta span{padding:5px 13px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.parts{display:flex;gap:6px;overflow-x:auto;padding:16px 4px 6px;scrollbar-width:none;justify-content:flex-start;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.parts::-webkit-scrollbar{display:none}
.parts a{flex:none;padding:6px 13px;border-radius:999px;font-family:var(--f-ui);font-size:.84rem;font-weight:700;background:var(--paper);border:1px solid var(--line);color:var(--ink-2);transition:all var(--t)}
.parts a.on{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:0 6px 16px rgba(126,51,80,.28)}
.parts a:hover:not(.on){border-color:var(--rose-soft);color:var(--rose)}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;margin:20px auto 6px;max-width:320px}
.orn i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.orn b{width:9px;height:9px;background:var(--gold);transform:rotate(45deg);border-radius:2px;box-shadow:0 0 0 4px var(--gold-tint)}

/* ───────── أقسام التمهيد ───────── */
.sec{margin:26px 0 12px;display:flex;align-items:center;gap:12px}
.sec h2{margin:0;font-family:var(--f-head);font-weight:700;font-size:1.28rem;color:var(--rose-ink);white-space:nowrap}
.sec .ic{width:30px;height:30px;display:grid;place-items:center;color:var(--gold);flex:none}
.sec .ic svg{width:26px;height:26px;stroke-width:22}
.sec i{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 22px;box-shadow:var(--shadow-1)}
.card p{margin:0 0 .9em}.card p:last-child{margin-bottom:0}
.intro-card,.summary-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;box-shadow:var(--shadow-1);margin:0 0 14px}
.intro-card p,.summary-card p{margin:0 0 .9em}.intro-card p:last-child,.summary-card p:last-child{margin-bottom:0}
.summary-card{background:linear-gradient(180deg,var(--paper),var(--paper-2));border-color:var(--line-2)}
.summary-card h3,.summary-card h4,.intro-card h3,.intro-card h4{font-family:var(--f-head);color:var(--rose);margin:.2em 0 .5em;font-size:1.15rem}
.summary-card > div:first-child,.intro-card > div:first-child{font-family:var(--f-ui);font-weight:700}
.names-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.name-badge{padding:5px 13px;border-radius:999px;background:var(--gold-tint);border:1px solid var(--gold-light);color:var(--gold-deep);font-family:var(--f-ui);font-weight:700;font-size:.84rem}
html[data-theme="dark"] .name-badge{border-color:rgba(216,180,92,.35)}
.virtue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:14px}
.virtue-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:18px;box-shadow:var(--shadow-1);transition:transform .3s var(--ease),box-shadow var(--t)}
.virtue-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.v-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--gold-tint);color:var(--gold-deep);margin-bottom:10px}
.v-icon svg{width:22px;height:22px}
.v-icon svg.mk{width:24px;height:24px;stroke-width:24}
.virtue-item h4{margin:0 0 6px;font-family:var(--f-head);font-size:1.08rem;color:var(--rose)}
.virtue-item p{margin:0;font-size:.95em;color:var(--ink-2)}
.pill{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--rose-tint);color:var(--rose);font-family:var(--f-ui);font-size:.82rem;font-weight:700;margin:2px}

/* ───────── البسملة ───────── */
.basmala{font-family:var(--f-quran);font-size:clamp(1.9rem,5.4vw,2.6rem);text-align:center;color:var(--rose-ink);margin:26px 0 8px;line-height:1.8;animation:fadeUp .9s .1s var(--ease) both}

/* ───────── بطاقة الآية ───────── */
.ayahs{display:flex;flex-direction:column;gap:12px;margin:18px 0 8px}
.ayah{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-1);overflow:hidden;transition:box-shadow .3s var(--ease),border-color .3s,transform .3s var(--ease);scroll-margin-top:calc(var(--hdr-h) + 70px)}
.ayah:hover{border-color:var(--line-2)}
.ayah.open{box-shadow:var(--shadow-2);border-color:var(--rose-tint-2)}
.ayah.flash{animation:flash 1.6s var(--ease)}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(201,162,74,.0)}20%{box-shadow:0 0 0 6px rgba(201,162,74,.35)}100%{box-shadow:var(--shadow-1)}}
.ayah.playing{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint),var(--shadow-2)}
.ayah-head{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:14px;padding:18px 18px 16px;text-align:right}
.ayah-head>span:nth-child(2){display:block;min-width:0}
.ayah-no{width:40px;height:40px;position:relative;display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:.98rem;color:var(--rose);margin-top:8px;flex:none}
.ayah-no::before,.ayah-no::after{content:"";position:absolute;inset:0;border:1.5px solid var(--gold);border-radius:10px;transition:transform .6s var(--ease)}
.ayah-no::after{transform:rotate(45deg)}
.ayah.open .ayah-no::after{transform:rotate(135deg)}
.ayah.open .ayah-no::before{transform:rotate(90deg)}
.ayah-cap{display:block;font-family:var(--f-ui);font-size:.78rem;font-weight:700;color:var(--gold-deep);margin-bottom:4px;letter-spacing:.01em}
.ayah-text{margin:0;font-family:var(--f-quran);font-size:1.62rem;line-height:2.05;color:var(--ink);word-spacing:.05em}
.ayah-chev{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);margin-top:13px;transition:transform .4s var(--spring),background var(--t),color var(--t)}
.ayah-chev svg{width:16px;height:16px}
.ayah.open .ayah-chev{transform:rotate(180deg);background:var(--rose-tint);color:var(--rose)}
.ayah-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.ayah.open .ayah-body{grid-template-rows:1fr}
.ayah-inner{min-height:0;overflow:hidden}
.ayah-pad{padding:2px 18px 18px;border-top:1px solid var(--line);margin-top:0;opacity:0;transform:translateY(-6px);transition:opacity .4s .12s var(--ease),transform .45s .1s var(--ease)}
.ayah.open .ayah-pad{opacity:1;transform:none}
.ayah-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:8px 0 4px}
.acts{display:flex;gap:4px}
.act{height:40px;padding:0 12px;border-radius:12px;display:inline-flex;align-items:center;gap:7px;font-family:var(--f-ui);font-size:.86rem;font-weight:700;color:var(--ink-2);transition:background var(--t),color var(--t),transform .15s}
.act svg{width:19px;height:19px}
.act:hover{background:var(--rose-tint);color:var(--rose)}
.act:active{transform:scale(.94)}
.act.on{color:var(--gold-deep)}
.act.on svg{fill:var(--gold);color:var(--gold-deep)}
.act.playing{color:var(--rose)}
@media(max-width:420px){.act span{display:none}.act{padding:0 10px}}
.pane{display:block}
.pane[data-pane="tadabbur"]{margin-top:22px}
@keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* نصّ التفسير */
.tafsir-text,.tadabbur{font-size:1.02rem;line-height:2.05;color:var(--ink)}
.tafsir-text p,.tadabbur p{margin:0 0 .85em}
.tafsir-text p:last-child{margin-bottom:0}
.tafsir-text strong{font-weight:700;color:var(--rose-ink)}
/* المقاطع القرآنية ﴿…﴾ داخل النص: بخط المصحف — تُوسَم تلقائيًا بـ qf/qv (لا تعتمد على الترتيب أبدًا) */
.tafsir-text strong.qf{font-family:var(--f-quran);font-weight:400;font-size:1.12em;color:var(--rose)}
.qv{font-family:var(--f-quran);font-size:1.08em;color:var(--rose-ink);line-height:1.6}
.tadabbur .qv,.summary-card .qv,.intro-card .qv,.virtue-item .qv,.lat .qv,.hadith-box .qv{color:var(--rose-ink)}
html[data-theme="dark"] .qv{color:var(--rose-ink)}
.scholar-name{color:var(--rose);font-weight:700;padding:0 2px}
.scholar-block{margin:14px 0 0;padding:14px 16px 12px;border-radius:var(--r-m);background:var(--paper-2);border:1px solid var(--line);position:relative}
.scholar-block-label{font-family:var(--f-ui);font-size:.76rem;font-weight:700;color:var(--gold-deep);margin-bottom:4px;display:inline-flex;align-items:center;gap:6px}
.scholar-block-label::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);border-radius:1px}
.scholar-block p{margin:0}
.hadith-box{margin:14px 0;padding:14px 16px;border-radius:var(--r-m);background:var(--gold-tint);border:1px solid var(--gold-light);color:var(--ink)}
html[data-theme="dark"] .hadith-box{border-color:rgba(216,180,92,.3)}
.hadith-label{font-family:var(--f-ui);font-size:.76rem;font-weight:700;color:var(--gold-deep);margin-bottom:4px}
.highlight-quote{margin:14px 0;padding:14px 18px;border-inline-start:3px solid var(--gold);background:var(--rose-tint);border-radius:0 var(--r-m) var(--r-m) 0;color:var(--rose-ink);font-family:var(--f-head);font-size:1.06em}
html[dir="rtl"] .highlight-quote{border-radius:var(--r-m) 0 0 var(--r-m)}
.tadabbur{position:relative;padding:14px 18px 16px;border-radius:var(--r-m);background:var(--gold-tint);border:1px solid var(--gold-light)}
html[data-theme="dark"] .tadabbur{border-color:rgba(216,180,92,.28)}

.tadabbur p:last-child{margin-bottom:0}
.tafsir-text ul,.tafsir-text ol,.intro-card ul,.summary-card ul{padding-inline-start:1.3em;margin:.4em 0 .9em}

/* المصادر */
.src{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.src-h{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:.8rem;font-weight:700;color:var(--ink-3);margin-bottom:10px}
.src-h svg{width:16px;height:16px;color:var(--gold-deep)}
.src-list{display:flex;flex-direction:column;gap:8px}
.src-item{border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper-2);overflow:hidden}
.src-top{display:flex;align-items:center;gap:10px;padding:11px 14px;width:100%;text-align:right}
.src-book{font-family:var(--f-ui);font-weight:700;font-size:.9rem;color:var(--rose-ink);flex:1;line-height:1.5}
.src-book small{display:block;font-weight:500;color:var(--ink-3);font-size:.76rem}
.src-go{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:var(--paper);border:1px solid var(--line-2);color:var(--rose);font-family:var(--f-ui);font-size:.78rem;font-weight:700;white-space:nowrap;transition:background var(--t),color var(--t),border-color var(--t)}
.src-go:hover{background:var(--rose);color:#fff;border-color:var(--rose)}
.src-go svg{width:14px;height:14px}
.src-q{padding:0 14px 14px;font-size:.98em;line-height:2;color:var(--ink)}
.src-q p{margin:0 0 .6em}
.src-q .q{padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line-2);font-family:var(--f-body)}
.src-q .q::before{content:"«";color:var(--gold);font-size:1.3em}
.src-q .q::after{content:"»";color:var(--gold);font-size:1.3em}
.src-note{font-family:var(--f-ui);font-size:.78rem;color:var(--ink-3);margin-top:8px;display:flex;align-items:center;gap:6px}
.src-note svg{width:14px;height:14px;color:var(--gold-deep)}
.src-general{font-family:var(--f-ui);font-size:.8rem;color:var(--ink-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.src-general a{padding:4px 10px;border-radius:999px;background:var(--rose-tint);color:var(--rose);font-weight:700}

/* ───────── تنقّل السورة السفلي ───────── */
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:30px 0 10px}
.foot-nav a{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);transition:transform .3s var(--ease),box-shadow var(--t),border-color var(--t);color:var(--ink)}
.foot-nav a:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--rose-tint-2)}
.foot-nav small{font-family:var(--f-ui);font-size:.74rem;color:var(--ink-3);font-weight:700}
.foot-nav b{font-family:var(--f-head);font-size:1.08rem;color:var(--rose);font-weight:700}
.foot-nav a.next{text-align:left;align-items:flex-end}
.foot-nav a.idx{grid-column:1/-1;align-items:center;text-align:center;background:var(--rose-tint);border-color:var(--rose-tint-2)}
.foot-nav .ph{visibility:hidden}

/* ───────── التذييل ───────── */
.foot{margin-top:56px;padding:34px 0 calc(28px + env(safe-area-inset-bottom,0px));text-align:center;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,var(--rose-tint) 140%)}
.foot-verse{font-family:var(--f-quran);font-size:1.5rem;color:var(--rose-ink);margin-bottom:10px}
.foot p{margin:4px 0;font-family:var(--f-ui);font-size:.86rem;color:var(--ink-3)}
.foot-links{display:flex;justify-content:center;align-items:center;gap:2px;flex-wrap:nowrap;margin-top:14px;font-family:var(--f-ui);font-size:.84rem;white-space:nowrap}
.foot-links>*+*::before{content:"·";color:var(--line-2);margin-inline-end:8px}
.foot-links a,.foot-links button{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2);padding:6px 8px;border-radius:999px;transition:background var(--t),color var(--t)}
.foot-links a:hover,.foot-links button:hover{background:var(--rose-tint);color:var(--rose)}

/* ───────── مشغّل الصوت ───────── */
.player{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));inset-inline:0;margin:0 auto;width:min(92vw,460px);height:64px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--line);box-shadow:var(--shadow-3);z-index:65;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;transform:translateY(120%);opacity:0;transition:transform .5s var(--spring),opacity .3s}
.player.show{transform:none;opacity:1}
.pl-btn{width:44px;height:44px;border-radius:50%;background:var(--rose);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 6px 16px rgba(126,51,80,.35);transition:transform .15s}
.pl-btn:active{transform:scale(.92)}
.pl-btn svg{width:18px;height:18px}
.pl-info{flex:1;min-width:0;font-family:var(--f-ui);font-size:.86rem;font-weight:700;color:var(--ink);display:flex;flex-direction:column;gap:2px}
.pl-info>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.pl-info small{font-weight:500;color:var(--ink-3);font-size:.74rem}
.pl-bar{position:relative;height:16px;margin:0 9px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.pl-bar::before{content:"";position:absolute;inset-inline:0;height:3px;border-radius:3px;background:var(--line-2)}
.pl-bar i{position:absolute;right:0;height:3px;border-radius:3px;width:100%;transform-origin:right center;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--rose));will-change:transform}
.pl-bar b{position:absolute;top:50%;right:0;width:14px;height:14px;margin-top:-7px;margin-right:-7px;border-radius:50%;background:var(--rose);border:2.5px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.28);will-change:transform}
html[data-theme="dark"] .pl-bar b{border-color:var(--paper)}
.pl-time{font-size:.68rem;color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.pl-x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);flex:none}
.pl-x svg{width:16px;height:16px}
.pl-x:hover{background:var(--rose-tint);color:var(--rose)}
body.has-player{padding-bottom:90px}

/* ───────── توست ───────── */
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));inset-inline:0;margin:0 auto;width:max-content;max-width:88vw;padding:11px 18px;border-radius:999px;background:var(--rose-ink);color:#fff;font-family:var(--f-ui);font-weight:500;font-size:.9rem;z-index:100;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .3s,transform .4s var(--spring);pointer-events:none;box-shadow:var(--shadow-3)}
html[data-theme="dark"] .toast{background:var(--gold);color:#2B1B22}
.toast.show{opacity:1;transform:none}
body.has-player .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

/* ───────── الألواح (Sheets/Modals) ───────── */
.sheet-bg{position:fixed;inset:0;background:rgba(43,27,34,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:90;opacity:0;pointer-events:none;transition:opacity .35s}
.sheet-bg.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;inset-inline:0;bottom:0;margin:0 auto;width:min(100%,560px);max-height:92dvh;overflow-y:auto;background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-3);z-index:91;transform:translateY(110%);transition:transform .5s var(--ease);padding:14px 22px calc(26px + env(safe-area-inset-bottom,0px));overscroll-behavior:contain}
.sheet.show{transform:none}
@media(min-width:640px){.sheet{bottom:auto;top:50%;transform:translateY(-40%) scale(.96);opacity:0;border-radius:var(--r-xl);transition:transform .45s var(--spring),opacity .3s;max-height:86dvh}.sheet.show{transform:translateY(-50%);opacity:1}}
.sheet-x{position:absolute;top:14px;inset-inline-start:14px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--ink-2);z-index:2}
.sheet-x svg{width:16px;height:16px}
.sheet-x:hover{background:var(--rose-tint);color:var(--rose)}
.sheet-h{text-align:center;padding:18px 0 6px}
.sheet-h .mark{width:56px;height:56px;margin:0 auto 10px;color:var(--gold);animation:markIn .9s var(--spring) both}
.sheet-h h2{font-family:var(--f-head);font-size:1.5rem;margin:0;color:var(--rose-ink)}
.sheet-h p{margin:6px 0 0;font-family:var(--f-ui);color:var(--ink-3);font-size:.92rem}

/* دعم الموقع */
.sup-body{text-align:center;padding:8px 4px 4px}
.sup-verse{font-family:var(--f-quran);font-size:1.45rem;color:var(--rose-ink);line-height:2;margin:6px 0 10px}
.sup-ref{font-family:var(--f-ui);font-size:.8rem;color:var(--ink-3);margin-bottom:14px}
.sup-text{font-size:1rem;color:var(--ink-2);line-height:1.95;margin:0 auto 18px;max-width:420px}
.sup-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px;border-radius:18px;background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;font-family:var(--f-ui);font-weight:700;font-size:1.05rem;box-shadow:0 10px 26px rgba(126,51,80,.32);transition:transform .2s var(--spring)}
.sup-btn:hover{transform:translateY(-2px)}
.sup-btn svg{width:22px;height:22px;color:var(--gold-light)}
.sup-alt{margin-top:10px;display:flex;justify-content:center;gap:10px;font-family:var(--f-ui);font-size:.86rem}
.sup-alt button{color:var(--ink-2);padding:8px 12px;border-radius:999px;background:var(--paper-2);display:inline-flex;align-items:center;gap:6px}
.sup-alt button svg{width:15px;height:15px}
.sup-heart{width:64px;height:64px;margin:6px auto 12px;color:var(--rose);animation:beat 2.2s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.08)}28%{transform:scale(1)}42%{transform:scale(1.06)}}

/* ───────── الجولة التعريفية (Tips) ───────── */
.tour{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:18px;background:rgba(43,27,34,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .4s}
.tour.show{opacity:1;pointer-events:auto}
.tour-card{width:min(100%,420px);background:var(--paper);border-radius:var(--r-xl);box-shadow:var(--shadow-3);overflow:hidden;transform:translateY(24px) scale(.96);transition:transform .55s var(--spring);display:flex;flex-direction:column;max-height:min(88dvh,720px)}
.tour.show .tour-card{transform:none}
.tour-stage{position:relative;height:250px;background:linear-gradient(160deg,var(--rose) 0%,var(--rose-deep) 100%);overflow:hidden;flex:none}
.tour-stage::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.12),transparent 40%),radial-gradient(circle at 70% 70%,rgba(231,207,140,.16),transparent 45%);animation:drift 12s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(6%,4%) rotate(8deg)}}
.tour-slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateX(-30px);transition:opacity .4s,transform .5s var(--ease);pointer-events:none}
.tour[data-dir="back"] .tour-slide{transform:translateX(30px)}
.tour-card{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tour-x{position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:12px;color:#fff;background:rgba(255,255,255,.14)}
.tour-x:hover{background:rgba(255,255,255,.24)}
.tour-x svg{width:18px;height:18px}
.tour-prev{display:none;align-items:center;gap:4px;padding:10px 14px 10px 10px;border-radius:999px;font-family:var(--f-ui);font-weight:700;font-size:.92rem;color:var(--rose);background:var(--rose-tint);transition:transform .2s var(--spring)}
.tour-prev svg{width:16px;height:16px}
.tour-prev.show{display:inline-flex}
.tour-prev:active{transform:scale(.95)}
.tour-skip.hide{display:none}
.tour-slide.on{opacity:1;transform:none;pointer-events:auto}
.tour-body{padding:22px 24px 8px;text-align:center;flex:1;overflow:auto}
.tour-body h3{font-family:var(--f-head);font-size:1.45rem;margin:0 0 8px;color:var(--rose-ink)}
.tour-body p{margin:0;font-size:1rem;color:var(--ink-2);line-height:1.9}
.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px 20px}
.tour-dots{display:flex;gap:6px}
.tour-dots i{width:7px;height:7px;border-radius:99px;background:var(--line-2);transition:width .35s var(--spring),background var(--t)}
.tour-dots i.on{width:22px;background:var(--rose)}
.tour-next{padding:12px 22px;border-radius:999px;background:var(--rose);color:#fff;font-family:var(--f-ui);font-weight:700;font-size:.98rem;box-shadow:0 8px 20px rgba(126,51,80,.3);transition:transform .2s var(--spring)}
.tour-next:active{transform:scale(.95)}
.tour-skip{font-family:var(--f-ui);font-size:.9rem;color:var(--ink-3);padding:10px 12px}
/* رسوم الشرائح */
.tf-mark{width:120px;height:120px;color:var(--gold-light);filter:drop-shadow(0 12px 30px rgba(0,0,0,.25));animation:tfFloat 4s ease-in-out infinite}
@keyframes tfFloat{50%{transform:translateY(-8px) rotate(4deg)}}
.tf-card{width:270px;background:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 20px 50px rgba(0,0,0,.25);color:#2B1B22;text-align:right;transform-origin:center}
.tf-card .tq{font-family:var(--f-quran);font-size:1.25rem;line-height:1.9;margin:0}
.tf-card .tl{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.tf-card.on .tl{grid-template-rows:1fr}
.tf-card .tl > div{min-height:0;overflow:hidden}
.tf-lines{padding-top:10px;display:flex;flex-direction:column;gap:7px}
.tf-lines i{display:block;height:7px;border-radius:99px;background:linear-gradient(90deg,#EFD6E0,#F6E8EE)}
.tf-lines i:nth-child(2){width:88%}.tf-lines i:nth-child(3){width:70%}
.tf-hand{position:absolute;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 0 rgba(255,255,255,.5);animation:tap 2.6s infinite}
@keyframes tap{0%,30%{transform:scale(0);opacity:0}38%{transform:scale(1);opacity:1;box-shadow:0 0 0 0 rgba(255,255,255,.6)}55%{box-shadow:0 0 0 18px rgba(255,255,255,0)}70%,100%{transform:scale(0);opacity:0}}
.tf-seg{display:inline-flex;position:relative;background:rgba(255,255,255,.18);border-radius:999px;padding:4px;font-family:var(--f-ui);font-weight:700;color:#fff;font-size:1rem;border:1px solid rgba(255,255,255,.3)}
.tf-seg span{position:relative;z-index:1;padding:10px 0;width:118px;text-align:center}
.tf-seg i{position:absolute;top:4px;bottom:4px;right:4px;width:118px;border-radius:999px;background:#fff;animation:segSlide 3.4s var(--ease) infinite}
.tf-seg span:nth-child(1){color:#7E3350;animation:segC1 3.4s infinite}
.tf-seg span:nth-child(2){animation:segC2 3.4s infinite}
@keyframes segSlide{0%,40%{transform:translateX(0)}50%,90%{transform:translateX(-118px)}100%{transform:translateX(0)}}
@keyframes segC1{0%,45%{color:#7E3350}50%,95%{color:#fff}100%{color:#7E3350}}
@keyframes segC2{0%,45%{color:#fff}50%,95%{color:#7E3350}100%{color:#fff}}
.tf-acts{display:flex;gap:18px}
.tf-acts span{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;color:#fff;animation:pop 3s var(--spring) infinite}
.tf-acts span:nth-child(2){animation-delay:.25s}.tf-acts span:nth-child(3){animation-delay:.5s}
.tf-acts svg{width:30px;height:30px}
@keyframes pop{0%,15%{transform:scale(.7);opacity:.4}30%,85%{transform:scale(1);opacity:1}100%{transform:scale(.7);opacity:.4}}
.tf-src{width:280px;background:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 20px 50px rgba(0,0,0,.25);color:#2B1B22;text-align:right;font-family:var(--f-ui);font-size:.9rem}
.tf-src b{display:block;font-weight:700;color:#3E1527}
.tf-src small{color:#8A7580}
.tf-src .go svg{width:14px;height:14px}
.tf-src .go{margin-top:8px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#7E3350;color:#fff;font-weight:700;font-size:.8rem;white-space:nowrap;animation:goPulse 2.4s infinite}
@keyframes goPulse{0%,100%{box-shadow:0 0 0 0 rgba(126,51,80,.5)}60%{box-shadow:0 0 0 12px rgba(126,51,80,0)}}

/* ───────── البحث ───────── */
.search{position:fixed;inset:0;z-index:92;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .3s;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.search.show{opacity:1;pointer-events:auto}
.search-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.search-field{flex:1;position:relative;display:flex;align-items:center;min-width:0}
.search-field input{width:100%;padding-inline-start:52px!important}
.search-bar input{flex:1;min-width:0;height:48px;border-radius:16px;border:1px solid var(--line);background:var(--paper-2);padding:0 16px;font-family:var(--f-body);font-size:1.05rem;color:var(--ink);outline:0;transition:border-color var(--t),box-shadow var(--t)}
.search-bar input:focus{border-color:var(--rose-soft);box-shadow:0 0 0 4px var(--rose-tint)}
.search-res{flex:1;overflow-y:auto;padding:12px 18px calc(30px + env(safe-area-inset-bottom,0px))}
.search-hint{text-align:center;color:var(--ink-3);font-family:var(--f-ui);padding:40px 10px;font-size:.95rem;line-height:2}
.search-hint b{color:var(--rose)}
.sr-item{display:block;padding:14px 16px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line);margin-bottom:10px;color:var(--ink);transition:transform .25s var(--ease),box-shadow var(--t);animation:fadeUp .4s var(--ease) both}
.sr-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.sr-meta{font-family:var(--f-ui);font-size:.78rem;font-weight:700;color:var(--rose);margin-bottom:4px}
.sr-text{font-family:var(--f-quran);font-size:1.25rem;line-height:1.9}
.sr-text mark{background:var(--gold-light);color:var(--rose-ink);border-radius:4px;padding:0 2px}

/* ───────── الفهرس ───────── */
.home-hero{text-align:center;padding:40px 0 20px;animation:fadeUp .9s var(--ease) both}
.home-mark{width:96px;height:96px;margin:0 auto 14px;color:var(--gold);animation:markIn 1.2s var(--spring) both}
.home-mark svg{stroke-width:11}
.home-hero h1{font-family:var(--f-head);font-size:clamp(2.1rem,7vw,3rem);margin:0;color:var(--rose-ink);font-weight:700}
.home-hero .basmala{margin:14px 0 8px}
.home-hero p{margin:0;font-family:var(--f-ui);color:var(--ink-3);font-size:1rem}
.home-hero p.basmala{font-family:var(--f-quran);color:var(--rose-ink);font-size:clamp(1.9rem,5.4vw,2.6rem)}
.cont{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-l);background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;box-shadow:0 14px 34px rgba(126,51,80,.3);margin:8px 0 14px;position:relative;overflow:hidden;animation:fadeUp .7s .1s var(--ease) both}
.cont::after{content:"";position:absolute;inset:0;background:radial-gradient(400px 120px at 90% 0%,rgba(231,207,140,.25),transparent)}
.cont .ci{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none;color:var(--gold-light)}
.cont .ci svg{width:24px;height:24px}
.cont small{display:block;font-family:var(--f-ui);font-size:.76rem;opacity:.85}
.cont b{display:block;font-family:var(--f-head);font-size:1.15rem}
.cont .ar{margin-inline-start:auto;color:var(--gold-light)}
.cont .ar svg{width:22px;height:22px}
.rnd{position:relative;padding:20px 20px 16px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);margin:0 0 20px;overflow:hidden;animation:fadeUp .7s .18s var(--ease) both}
.rnd::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,var(--gold-light),transparent 40%,transparent 60%,var(--gold-light));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{opacity:.25}}
.rnd-h{display:flex;align-items:center;justify-content:space-between;font-family:var(--f-ui);font-size:.8rem;font-weight:700;color:var(--gold-deep);margin-bottom:8px}
.rnd-h button{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--ink-3);transition:background var(--t),color var(--t),transform .5s var(--ease)}
.rnd-h button:hover{background:var(--rose-tint);color:var(--rose);transform:rotate(180deg)}
.rnd-h button svg{width:17px;height:17px}
.rnd-t{font-family:var(--f-quran);font-size:1.45rem;line-height:1.95;color:var(--ink);margin:0}
.rnd-f{margin-top:8px;display:flex;justify-content:space-between;align-items:center;font-family:var(--f-ui);font-size:.82rem;color:var(--ink-3)}
.rnd-f a{font-weight:700;display:inline-flex;align-items:center;gap:5px}
.rnd-f a svg{width:15px;height:15px}
.filt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 16px}
.filt .seg{flex:none}
.filt input{flex:1;min-width:160px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--paper);padding:0 16px;font-family:var(--f-body);font-size:1rem;color:var(--ink);outline:0;transition:border-color var(--t),box-shadow var(--t)}
.filt input:focus{border-color:var(--rose-soft);box-shadow:0 0 0 4px var(--rose-tint)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media(min-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}
.sc{position:relative;display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line);color:var(--ink);transition:transform .3s var(--ease),box-shadow var(--t),border-color var(--t);animation:fadeUp .5s var(--ease) both}
.sc:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--rose-tint-2)}
.sc .n{width:38px;height:38px;position:relative;display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:.92rem;color:var(--rose);flex:none}
.sc .n::before,.sc .n::after{content:"";position:absolute;inset:0;border:1.5px solid var(--gold);border-radius:9px}
.sc .n::after{transform:rotate(45deg)}
.sc b{display:block;font-family:var(--f-head);font-size:1.12rem;font-weight:700;color:var(--rose-ink);line-height:1.3}
.sc small{font-family:var(--f-ui);font-size:.74rem;color:var(--ink-3)}
.sc.soon{opacity:.55;pointer-events:none}
.sc.soon .n{color:var(--ink-3)}.sc.soon .n::before,.sc.soon .n::after{border-color:var(--line-2)}
.sc .done{display:none}
.sc.hidden{display:none}
.stat{font-family:var(--f-ui);font-size:.82rem;color:var(--ink-3);margin:14px 4px 0;text-align:center}

/* ───────── صفحة المحفوظات ───────── */
.bm{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);margin-bottom:10px;animation:fadeUp .5s var(--ease) both}
.bm a{flex:1;color:var(--ink);min-width:0}
.bm .l{font-family:var(--f-ui);font-size:.78rem;font-weight:700;color:var(--rose);margin-bottom:4px;display:inline-flex;align-items:center;gap:6px}
.bm .v{font-family:var(--f-quran);font-size:1.32rem;line-height:1.9}
.bm .v.txt{font-family:var(--f-body);font-size:1rem;line-height:1.9}
.bm .x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);flex:none}
.bm .x:hover{background:var(--rose-tint);color:var(--rose)}
.bm .x svg{width:16px;height:16px}
.empty{text-align:center;padding:50px 20px;color:var(--ink-3);font-family:var(--f-ui)}
.empty .em{width:70px;height:70px;margin:0 auto 14px;color:var(--gold-light)}
.empty p{margin:4px 0}

/* ───────── المصادر ───────── */
.books{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:640px){.books{grid-template-columns:1fr 1fr}}
.book{display:flex;gap:14px;padding:18px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);transition:transform .3s var(--ease),box-shadow var(--t);animation:fadeUp .5s var(--ease) both}
.book:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.book .sp{width:14px;border-radius:5px;background:linear-gradient(180deg,var(--rose),var(--rose-deep));flex:none;position:relative;box-shadow:inset -3px 0 6px rgba(0,0,0,.2)}
.book .sp::after{content:"";position:absolute;inset:8px 4px;border-inline:1px solid rgba(231,207,140,.7)}
.book .bi{flex:1;min-width:0}
.book h3{margin:0 0 2px;font-family:var(--f-head);font-size:1.15rem;color:var(--rose-ink)}
.book .au{font-family:var(--f-ui);font-size:.86rem;font-weight:700;color:var(--rose)}
.book .ed{font-family:var(--f-ui);font-size:.78rem;color:var(--ink-3);margin:6px 0 10px;line-height:1.7}
.book .tag{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--gold-tint);color:var(--gold-deep);font-family:var(--f-ui);font-size:.72rem;font-weight:700;margin-inline-end:4px}
.note{padding:16px 18px;border-radius:var(--r-l);background:var(--gold-tint);border:1px solid var(--gold-light);font-size:.98rem;line-height:1.95;margin:0 0 18px}
html[data-theme="dark"] .note{border-color:rgba(216,180,92,.3)}
.note b{color:var(--gold-deep)}

/* ───────── المتشابهات ───────── */
.ms-bar{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.ms-filter-btn{padding:7px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink-2);font-family:var(--f-ui);font-weight:700;font-size:.84rem;display:inline-flex;align-items:center;gap:6px;transition:all var(--t)}
.ms-filter-btn.active{background:var(--rose);border-color:var(--rose);color:#fff}
.ms-filter-count{font-size:.72rem;padding:0 7px;border-radius:99px;background:var(--rose-tint);color:var(--rose)}
.ms-filter-btn.active .ms-filter-count{background:rgba(255,255,255,.22);color:#fff}
#ms-filter-label{font-family:var(--f-ui);font-size:.8rem;color:var(--ink-3);margin:0 0 14px}
.ms-quote{padding:14px 16px;border-radius:var(--r-m);background:var(--paper-2);border:1px solid var(--line);margin-bottom:10px}
.ms-label{font-family:var(--f-ui);font-size:.74rem;font-weight:700;color:var(--gold-deep);margin-bottom:6px}
.ms-verse{font-family:var(--f-quran);font-size:1.28rem;line-height:2.1;text-align:center;margin:0}
.ms-diff{background:var(--gold-light);color:var(--rose-ink);border-radius:6px;padding:0 5px 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html[data-theme="dark"] .ms-diff{background:rgba(216,180,92,.28);color:var(--gold-light)}
.ms-ref{font-family:var(--f-ui);font-size:.76rem;font-weight:700;color:var(--rose);text-align:left;margin-top:4px}
.ms-dabit{padding:13px 16px;border-radius:var(--r-m);background:var(--gold-tint);border:1px solid var(--gold-light);margin:14px 0}
.ms-dabit-label{font-family:var(--f-ui);font-size:.76rem;font-weight:700;color:var(--gold-deep);margin-bottom:5px}
.ms-dabit p{margin:0}

/* ───────── حكايتنا ───────── */
.about-lead{font-size:1.12rem;line-height:2;color:var(--ink-2);text-align:center;max-width:620px;margin:0 auto 22px}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:22px}
.feat{padding:18px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);animation:fadeUp .5s var(--ease) both}
.feat .fi{width:40px;height:40px;border-radius:12px;background:var(--rose-tint);color:var(--rose);display:grid;place-items:center;margin-bottom:10px}
.feat .fi svg{width:21px;height:21px}
.feat h4{margin:0 0 4px;font-family:var(--f-head);font-size:1.1rem;color:var(--rose-ink)}
.feat p{margin:0;font-size:.95rem;color:var(--ink-2)}
.dua{text-align:center;padding:26px 20px;border-radius:var(--r-l);background:linear-gradient(160deg,var(--rose-tint),var(--paper));border:1px solid var(--rose-tint-2)}
.dua p{margin:0 0 8px;color:var(--ink-2)}
.dua .q{font-family:var(--f-quran);font-size:1.4rem;color:var(--rose-ink)}

/* ───────── حركات عامة ───────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
@media print{.hdr,.back,.player,.toast,.drawer,.drawer-bg,.foot-nav,.acts{display:none!important}.ayah-body{grid-template-rows:1fr!important}.ayah-pad{opacity:1!important}}
/* ───────── زر العودة للأعلى (شفاف، يظهر عند التوقف) ───────── */
.totop{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom,0px));left:18px;width:48px;height:48px;border-radius:50%;background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);color:var(--rose);display:grid;place-items:center;z-index:64;opacity:0;transform:translateY(14px) scale(.85);pointer-events:none;transition:opacity .4s var(--ease),transform .55s var(--spring);box-shadow:var(--shadow-1)}
.totop::before{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1px;background:conic-gradient(from 200deg,var(--gold-light),var(--rose-soft),var(--gold),var(--gold-light));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.totop.show{opacity:.62;transform:none;pointer-events:auto}
.totop:hover{opacity:1}
.totop svg{width:18px;height:18px;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
body.has-player .totop{bottom:calc(90px + env(safe-area-inset-bottom,0px))}

/* ───────── شريط القراءة (اسم السورة + التنقّل السريع) ───────── */
.rbar{position:sticky;top:var(--hdr-h);z-index:58;margin:0 -18px 6px;padding:8px 18px;display:flex;align-items:center;gap:8px;background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t);transform:translateY(-6px);opacity:0;animation:rbarIn .6s .2s var(--ease) forwards}
@keyframes rbarIn{to{transform:none;opacity:1}}
.rbar.stuck{border-bottom-color:var(--line);box-shadow:0 8px 24px rgba(62,21,39,.06)}
@media(min-width:900px){.rbar{margin:0 -24px 6px;padding:8px 24px;border-radius:0 0 18px 18px}}
.rbar-t{flex:1;min-width:0;font-family:var(--f-head);font-weight:700;font-size:1.05rem;color:var(--rose-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rbar-t small{font-family:var(--f-ui);font-weight:500;font-size:.76rem;color:var(--ink-3);margin-inline-start:8px}
.rbtn{height:36px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-family:var(--f-ui);font-weight:700;font-size:.82rem;color:var(--rose);background:var(--rose-tint);border:1px solid var(--rose-tint-2);transition:background var(--t),color var(--t),transform .15s}
.rbtn:hover{background:var(--rose);color:#fff}
.rbtn:active{transform:scale(.95)}
.rbtn svg{width:16px;height:16px}
.pick-list{display:flex;flex-direction:column;gap:6px;padding:6px 0 4px}
.pick-s{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);transition:background var(--t),border-color var(--t)}
.pick-s:hover{border-color:var(--rose-tint-2);background:var(--rose-tint)}
.pick-s.cur{border-color:var(--rose);background:var(--rose-tint)}
.pick-s .n{width:34px;height:34px;position:relative;display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:.85rem;color:var(--rose);flex:none}
.pick-s .n::before,.pick-s .n::after{content:"";position:absolute;inset:0;border:1.5px solid var(--gold);border-radius:8px}
.pick-s .n::after{transform:rotate(45deg)}
.pick-s b{font-family:var(--f-head);font-size:1.08rem;color:var(--rose-ink)}
.pick-s small{display:block;font-family:var(--f-ui);font-size:.74rem;color:var(--ink-3)}
/* ── منتقي الصفحات ── */
.pick-pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;padding:8px 0 4px}
.pg{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 9px;border-radius:14px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);text-align:center;transition:background var(--t),border-color var(--t),transform .15s var(--ease)}
.pg b{font-family:var(--f-head);font-weight:700;font-size:1.15rem;color:var(--rose);line-height:1.2}
.pg small{font-family:var(--f-ui);font-size:.68rem;color:var(--ink-3);white-space:nowrap}
.pg:hover{border-color:var(--rose-tint-2);background:var(--rose-tint);transform:translateY(-1px)}
.pg.cur{border-color:var(--rose);background:var(--rose-tint);box-shadow:0 0 0 3px var(--rose-tint)}
/* ── شارة الصفحة في الهيدر ── */
.page-badge{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;max-width:100%;margin:22px auto 4px;padding:9px 18px;border-radius:999px;background:linear-gradient(180deg,var(--paper),var(--gold-tint));border:1px solid var(--gold-light);box-shadow:0 6px 18px rgba(156,122,44,.10),inset 0 1px 0 rgba(255,255,255,.7);font-family:var(--f-ui);font-size:.84rem;color:var(--ink-2)}
.s-hero .page-badge + .orn{margin-top:22px}
html[data-theme="dark"] .page-badge{background:linear-gradient(180deg,var(--paper-2),var(--gold-tint));box-shadow:none}
.page-badge svg{width:16px;height:16px;color:var(--gold-deep)}
.page-badge b{font-family:var(--f-head);font-size:1.08rem;color:var(--rose-ink)}
.page-badge i{width:1px;height:14px;background:var(--gold-light)}
html[data-theme="dark"] .page-badge{border-color:rgba(216,180,92,.3)}
/* ── تنقل الصفحات أسفل الصفحة ── */
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 0 8px}
.pnav a{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:var(--r-m);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--ink);transition:transform .25s var(--ease),box-shadow var(--t),border-color var(--t)}
.pnav a:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--rose-tint-2)}
.pnav small{font-family:var(--f-ui);font-size:.74rem;color:var(--ink-3)}
.pnav b{font-family:var(--f-head);font-size:1.05rem;color:var(--rose)}
.pnav .next{text-align:start}.pnav .prev{text-align:end}
.pnav .ph{visibility:hidden}
.pnav-all{display:flex;justify-content:center;margin:0 0 6px}
.pnav-all button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;font-family:var(--f-ui);font-weight:700;font-size:.84rem;color:var(--rose);background:var(--rose-tint);border:1px solid var(--rose-tint-2)}
.pnav-all button svg{width:15px;height:15px}
/* ── الشرح التفصيلي (بعد قصة أو حكم) ── */
.deep{margin:18px 0 6px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--gold-light);box-shadow:var(--shadow-1);overflow:hidden;position:relative}
.deep::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
.deep-h{display:flex;align-items:center;gap:12px;padding:16px 18px 14px 20px;cursor:pointer;text-align:start;width:100%}
.deep-h .deep-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--gold-tint);color:var(--gold-deep);flex:none}
.deep-h .deep-ic svg{width:22px;height:22px}
.deep-h .deep-t{flex:1;min-width:0}
.deep-h .deep-t small{display:block;font-family:var(--f-ui);font-size:.72rem;font-weight:700;color:var(--gold-deep);letter-spacing:.02em;margin-bottom:2px}
.deep-h .deep-t b{display:block;font-family:var(--f-head);font-size:1.18rem;color:var(--rose-ink);line-height:1.5}
.deep-h .lats-chev{flex:none}
.deep.open .deep-h .lats-chev{transform:rotate(180deg);color:var(--rose)}
.deep-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.deep-b>div{overflow:hidden;padding:0 20px}
.deep.open .deep-b{grid-template-rows:1fr}
.deep.open .deep-b>div{padding-bottom:18px}
.deep-b h4{margin:14px 0 6px;font-family:var(--f-head);font-size:1.06rem;color:var(--rose);display:flex;align-items:center;gap:8px}
.deep-b h4::before{content:"";width:7px;height:7px;background:var(--gold);transform:rotate(45deg);border-radius:1px;flex:none}
.deep-b p{margin:0 0 .8em;font-size:.98em;line-height:2}
.deep-b ul{margin:.2em 0 .9em;padding-inline-start:1.3em}
.deep-b li{margin:0 0 .35em}
.pick-parts a{padding:5px 11px;border-radius:999px;font-family:var(--f-ui);font-size:.78rem;font-weight:700;background:var(--paper);border:1px solid var(--line);color:var(--ink-2)}
.pick-parts a.cur{background:var(--rose);border-color:var(--rose);color:#fff}
.pick-v{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px;padding:6px 0}
.pick-v a{height:46px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line);background:var(--paper-2);font-family:var(--f-head);font-weight:700;color:var(--rose);transition:all var(--t)}
.pick-v a:hover{background:var(--rose);color:#fff;border-color:var(--rose)}
.pick-soon{font-family:var(--f-ui);font-size:.8rem;color:var(--ink-3);text-align:center;padding:10px 0 0}

/* تظليل الكلمة المبحوث عنها */
mark.hl{position:relative;display:inline;background-color:transparent;color:var(--rose-ink);border-radius:7px;padding:0 4px;margin:0 -4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-image:linear-gradient(110deg,var(--gold-light),var(--gold) 55%,var(--gold-light));background-repeat:no-repeat;background-size:0% 100%;background-position:right center;animation:hlSweep 2.7s cubic-bezier(.22,1,.36,1) forwards}
mark.hl::after{content:"";position:absolute;left:4px;right:4px;bottom:-2px;height:2px;border-radius:2px;background:var(--rose);transform:scaleX(0);transform-origin:right center;animation:hlLine 2.7s cubic-bezier(.22,1,.36,1) forwards}
@keyframes hlSweep{0%{background-size:0% 100%;background-position:right center}24%{background-size:100% 100%;background-position:right center}66%{background-size:100% 100%;background-position:left center}100%{background-size:0% 100%;background-position:left center}}
@keyframes hlLine{0%,14%{transform:scaleX(0);transform-origin:right center}40%{transform:scaleX(1);transform-origin:right center}62%{transform:scaleX(1);transform-origin:left center}88%,100%{transform:scaleX(0);transform-origin:left center}}

/* مايك البحث */
.mic{position:absolute;inset-inline-start:5px;top:5px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--rose);background:var(--rose-tint);transition:background var(--t),color var(--t)}
.mic svg{width:20px;height:20px}
.mic.rec{background:var(--rose);color:#fff;animation:micPulse 1.2s infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(126,51,80,.45)}60%{box-shadow:0 0 0 12px rgba(126,51,80,0)}}
bdi,[dir="ltr"]{unicode-bidi:isolate}

/* مصادر: أقسام */
.books-h{display:flex;align-items:center;gap:10px;margin:22px 0 10px;font-family:var(--f-ui);font-weight:700;color:var(--gold-deep);font-size:.86rem}
.books-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

.search-count{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:8px 2px 10px;margin-bottom:6px;font-family:var(--f-ui);font-size:.82rem;font-weight:700;color:var(--ink-3);background:var(--bg)}
.search-count button{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--rose);font-size:.78rem;opacity:0;transition:opacity .3s}
.search-count button.show{opacity:1}
.search-count button svg{width:14px;height:14px}
.sr-more{display:block;width:100%;padding:13px;border-radius:16px;background:var(--rose-tint);color:var(--rose);font-family:var(--f-ui);font-weight:700;margin:4px 0 10px}
.sr-end{text-align:center;font-family:var(--f-ui);font-size:.8rem;color:var(--ink-3);padding:10px 0 20px}
.ms-save{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-family:var(--f-ui);font-size:.8rem;font-weight:700;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);margin-inline-start:auto;flex:none;transition:all var(--t)}
.ms-save svg{width:16px;height:16px}
.ms-save.on{color:var(--gold-deep);border-color:var(--gold-light);background:var(--gold-tint)}
.ms-save.on svg{fill:var(--gold)}
.about-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 22px}
.about-nav a{padding:8px 16px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-family:var(--f-ui);font-weight:700;font-size:.86rem;color:var(--rose);transition:all var(--t)}
.about-nav a:hover{background:var(--rose);color:#fff;border-color:var(--rose)}

/* ───────── علامة الصفحات الفرعية (الشعار الكبير بخط رفيع) ───────── */
.s-mark{width:96px;height:96px;margin:0 auto 12px;color:var(--gold);animation:markIn 1.1s var(--spring) both}
.s-mark svg{stroke-width:11}

/* ───────── صفحة الإبلاغ عن خطأ ───────── */
.rp{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.rp-field{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:14px 16px 12px;box-shadow:var(--shadow-1);transition:border-color var(--t),box-shadow var(--t);animation:fadeUp .5s var(--ease) both}
.rp-field:focus-within{border-color:var(--rose-soft);box-shadow:0 0 0 4px var(--rose-tint),var(--shadow-1)}
.rp-field label{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:.8rem;font-weight:700;color:var(--gold-deep);margin-bottom:6px}
.rp-field label svg{width:16px;height:16px}
.rp-field input,.rp-field textarea{width:100%;border:0;background:transparent;font-family:var(--f-body);font-size:1.02rem;line-height:1.9;color:var(--ink);outline:0;resize:vertical;padding:0}
.rp-field textarea{min-height:120px}
.rp-field input::placeholder,.rp-field textarea::placeholder{color:var(--ink-3);opacity:.8}
.rp-where{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--rose-tint);border:1px solid var(--rose-tint-2);font-family:var(--f-ui);font-size:.86rem;font-weight:700;color:var(--rose)}
.rp-where svg{width:15px;height:15px}
.rp-types{display:flex;flex-wrap:wrap;gap:8px}
.rp-types label{margin:0;cursor:pointer}
.rp-types input{position:absolute;opacity:0;width:0;height:0}
.rp-types span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);font-family:var(--f-ui);font-size:.84rem;font-weight:700;color:var(--ink-2);transition:all var(--t)}
.rp-types input:checked+span{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:0 6px 16px rgba(126,51,80,.28)}
.rp-send{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;border-radius:18px;background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;font-family:var(--f-ui);font-weight:700;font-size:1.05rem;box-shadow:0 12px 28px rgba(126,51,80,.32);transition:transform .2s var(--spring),opacity .2s;margin-top:4px}
.rp-send:hover{transform:translateY(-2px)}
.rp-send:disabled{opacity:.6;transform:none}
.rp-send svg{width:20px;height:20px;color:var(--gold-light)}
.rp-note{font-family:var(--f-ui);font-size:.8rem;color:var(--ink-3);text-align:center;line-height:1.8}
.rp-done{text-align:center;padding:36px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--shadow-2);animation:fadeUp .6s var(--spring) both}
.rp-done .ok{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;background:var(--gold-tint);display:grid;place-items:center;color:var(--gold-deep)}
.rp-done .ok svg{width:34px;height:34px;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .7s .25s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rp-done h3{font-family:var(--f-head);font-size:1.5rem;margin:0 0 6px;color:var(--rose-ink)}
.rp-done p{margin:0;color:var(--ink-2)}
.rp-done a{display:inline-block;margin-top:16px;padding:10px 18px;border-radius:999px;background:var(--rose-tint);color:var(--rose);font-family:var(--f-ui);font-weight:700}

.rp{overflow:hidden}
#rp-hp{position:absolute;width:0;height:0;opacity:0;overflow:hidden;pointer-events:none;left:0}
.foot{overflow-x:hidden}
@media(max-width:480px){.foot-links{font-size:.76rem;gap:0}.foot-links a,.foot-links button{padding:6px 4px}.foot-links>*+*::before{margin-inline-end:5px}.foot-links svg{display:none}}

/* الأقواس: من خطٍّ يعكس اتجاهها صحيحًا في العربية (خط أميري يعكسها مرتين) */
.pn{font-family:'Tajawal',system-ui,-apple-system,Arial,sans-serif;font-weight:500}

/* ───────── نظام التوثيق: بطاقات النصوص المنقولة ───────── */


/* ── أدوات الآية: هادئة، أيقونات فقط ── */
.acts{gap:2px}
.acts .act{width:36px;height:36px;padding:0;border-radius:10px;display:grid;place-items:center;color:var(--ink-3);background:none;transition:color var(--t),background var(--t)}
.acts .act span{display:none}
.acts .act svg{width:17px;height:17px}
.acts .act:hover,.acts .act.on{color:var(--rose);background:var(--rose-tint)}
/* ── مقاطع الآية ── */
.tseg{margin:0 0 18px}
.tseg:last-of-type{margin-bottom:0}
.tseg-w{display:inline-block;font-family:var(--f-quran);font-size:1.22em;line-height:1.8;color:var(--rose-ink);margin:0 0 6px;padding-bottom:3px;border-bottom:2px solid var(--gold-light)}
.tseg p{margin:0}
.tseg p strong{color:var(--rose)}
/* ── لطائف المفسرين (هادئة، قابلة للطي) ── */
.lats{margin:18px 0 0;border:1px solid var(--line);border-radius:var(--r-m);background:transparent;overflow:hidden}
.lats-h{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;text-align:start;font-family:var(--f-ui);cursor:pointer;transition:background var(--t)}
.lats-h:hover{background:var(--paper-2)}
.lats-t{font-weight:700;font-size:.86rem;color:var(--ink);white-space:nowrap}
.lats-t b{font-weight:500;color:var(--ink-3);margin-inline-start:4px}
.lats-who{flex:1;min-width:0;font-size:.74rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lats-chev{flex:none;width:14px;height:14px;border:0;background:currentColor;color:var(--ink-3);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/contain no-repeat;transform:none;transition:transform .35s var(--ease)}
.lats.open .lats-chev{transform:rotate(180deg);color:var(--rose)}
.lats-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.lats-b>div{overflow:hidden;padding:0 12px}
.lats.open .lats-b{grid-template-rows:1fr}
.lats.open .lats-b>div{padding-bottom:12px}
.lat{margin:10px 0 0;padding:12px 14px;border-radius:12px;background:var(--paper-2)}
.lat:first-child{margin-top:2px}
.lat-who{display:block;font-family:var(--f-ui);font-size:.76rem;font-weight:700;color:var(--rose);margin-bottom:3px}
.lat p{margin:0;font-size:.97em}
.lat p strong{color:var(--rose-ink)}
.lats.open .lat{animation:fadeUp .45s var(--ease) both}
.lats.open .lat:nth-child(2){animation-delay:.06s}.lats.open .lat:nth-child(3){animation-delay:.12s}.lats.open .lat:nth-child(4){animation-delay:.18s}.lats.open .lat:nth-child(5){animation-delay:.24s}.lats.open .lat:nth-child(6){animation-delay:.3s}
/* ── وقفة تدبر ── */
.tad-h{display:inline-block;font-family:var(--f-ui);font-weight:700;font-size:.8rem;color:var(--gold-deep);margin:0 0 6px}
.tad-h::before{content:"✦ ";color:var(--gold)}
/* ── المصادر (زرّ صغير يفتح الشارات) ── */
.refs{margin-top:14px;font-family:var(--f-ui)}
.refs-h{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--ink-3);cursor:pointer;transition:color var(--t),background var(--t)}
.refs-h svg{width:14px;height:14px}
.refs-h b{font-weight:500}
.refs-h:hover,.refs.open .refs-h{color:var(--rose);background:var(--rose-tint)}
.refs-chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.refs.open .refs-chev{transform:rotate(-135deg) translateY(-1px)}
.refs-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.refs-b>div{overflow:hidden;display:flex;flex-wrap:wrap;gap:6px;padding:0 2px}
.refs.open .refs-b{grid-template-rows:1fr}
.refs.open .refs-b>div{padding-top:10px}
.ref{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2);font-size:.76rem;font-weight:700;line-height:1.3;transition:color var(--t),background var(--t),border-color var(--t)}
.ref small{font-weight:500;color:var(--ink-3)}
.ref svg{width:11px;height:11px;color:var(--ink-3)}
.ref:hover{color:var(--rose);border-color:var(--rose-tint-2);background:var(--rose-tint)}
.refs.open .ref{animation:fadeUp .4s var(--ease) both;animation-delay:calc(var(--i,1) * .045s)}
/* ── حركة دخول متدرجة عند فتح الآية ── */
.ayah.open .tseg,.ayah.open .lats,.ayah.open .hadith-box,.ayah.open .pane[data-pane="tadabbur"],.ayah.open .refs{animation:fadeUp .55s var(--ease) both}
.ayah.open .tseg:nth-child(2){animation-delay:.06s}.ayah.open .tseg:nth-child(3){animation-delay:.12s}.ayah.open .tseg:nth-child(4){animation-delay:.18s}
.ayah.open .hadith-box{animation-delay:.22s}.ayah.open .lats{animation-delay:.26s}.ayah.open .refs{animation-delay:.3s}.ayah.open .pane[data-pane="tadabbur"]{animation-delay:.34s}
@media(prefers-reduced-motion:reduce){.ayah.open .tseg,.ayah.open .lats,.ayah.open .hadith-box,.ayah.open .pane[data-pane="tadabbur"],.ayah.open .refs,.lats.open .lat,.refs.open .ref{animation:none}}
html[data-theme="dark"] .tseg-w{border-bottom-color:rgba(216,180,92,.45)}
html[data-theme="dark"] .lat{background:var(--paper-2)}

/* ── لا تظليل عند اللمس ── */
*{-webkit-tap-highlight-color:transparent}
a,button,.ayah-head,.book,.ref,.lats-h,.refs-h,.act,.rbtn,.ibtn{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
:focus:not(:focus-visible){outline:none}
@media(hover:none){
  .lats-h:hover{background:transparent}
  .refs-h:hover{color:var(--ink-3);background:transparent}
  .refs.open .refs-h{color:var(--rose);background:var(--rose-tint)}
  .acts .act:hover{color:var(--ink-3);background:none}
  .acts .act.on{color:var(--rose);background:var(--rose-tint)}
  .ref:hover{color:var(--ink-2);border-color:var(--line);background:var(--paper-2)}
  .ibtn:hover,.rbtn:hover,.drawer-nav a:hover,.hdr-nav a:hover,.fs-row button:hover,.dc-go:hover{background:transparent}
}

/* المصادر العامة (قبل التوثيق الحرفي) */
.src-general{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:.8rem;color:var(--ink-3)}
.src-general svg{width:16px;height:16px;flex:none}
.src-general a{margin-inline-start:auto;font-weight:700;color:var(--rose)}

/* ── لغة بصرية موحَّدة للشارات (نفس روح شارة الصفحة) ── */
.s-meta span{background:linear-gradient(180deg,var(--paper),var(--paper-2));border-color:var(--line-2);box-shadow:0 4px 12px rgba(62,21,39,.05),inset 0 1px 0 rgba(255,255,255,.7)}
.name-badge{background:linear-gradient(180deg,var(--paper),var(--gold-tint));border:1px solid var(--gold-light);box-shadow:0 4px 12px rgba(156,122,44,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.refs .ref{background:linear-gradient(180deg,var(--paper),var(--paper-2));box-shadow:0 3px 10px rgba(62,21,39,.05),inset 0 1px 0 rgba(255,255,255,.7)}
.rbtn{background:linear-gradient(180deg,var(--paper),var(--rose-tint));box-shadow:0 3px 10px rgba(126,51,80,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.pnav a{background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.pick-s{background:linear-gradient(180deg,var(--paper),var(--paper-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.pick-pgs{margin-inline-start:auto;flex:none;font-style:normal;font-family:var(--f-ui);font-size:.74rem;font-weight:700;color:var(--gold-deep);background:var(--gold-tint);border:1px solid var(--gold-light);border-radius:999px;padding:4px 10px;white-space:nowrap}
.pick-pgs i{font-style:normal;font-weight:500}
.pick-list{gap:8px}
html[data-theme="dark"] .s-meta span,html[data-theme="dark"] .name-badge,html[data-theme="dark"] .refs .ref,html[data-theme="dark"] .rbtn,html[data-theme="dark"] .pnav a,html[data-theme="dark"] .pick-s{box-shadow:none;background:var(--paper-2)}

.card + .dua,.dua{margin-top:18px}

/* ── v97: فواصل بلا نقاط، رقم الآية في آخرها، أرقام الصفحات بشارات صغيرة مجسَّمة ── */
.sep{display:inline-block;width:1px;height:.85em;background:var(--gold-light);margin:0 .55em;vertical-align:-.1em}
html[data-theme="dark"] .sep{background:rgba(216,180,92,.35)}
.lat-who .sep,.lats-who .sep{margin:0 .4em}
.ayah-end{display:inline-grid;place-items:center;position:relative;width:20px;height:20px;margin-inline-start:.5em;vertical-align:.02em;font-family:var(--f-head);font-weight:700;font-size:.56rem;line-height:1;color:var(--rose);opacity:.85;word-spacing:0}
.ayah-end::before,.ayah-end::after{content:"";position:absolute;inset:0;border:1px solid var(--rose-tint-2);border-radius:5px}
.ayah-end::after{transform:rotate(45deg)}
html[data-theme="dark"] .ayah-end::before,html[data-theme="dark"] .ayah-end::after{border-color:rgba(200,120,150,.45)}
/* شارة رقم الصفحة الصغيرة المجسَّمة (نفس حجم الشارة القديمة) */
.pgn,.page-badge{font-family:var(--f-ui)}
.pgn{display:inline-flex;align-items:center;gap:0 9px;max-width:100%;padding:6px 14px;border-radius:999px;font-style:normal;font-family:var(--f-ui);font-size:.84rem;color:var(--ink-2);background:linear-gradient(180deg,#fff,var(--gold-tint));border:1px solid var(--gold-light);box-shadow:0 2px 6px rgba(156,122,44,.14),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(156,122,44,.12)}
.pgn b{font-family:var(--f-head);font-size:1rem;color:var(--rose-ink)}
.pgn i{width:1px;height:14px;background:var(--gold-light)}
.pgn span{white-space:nowrap}
html[data-theme="dark"] .pgn{background:linear-gradient(180deg,var(--paper-2),var(--gold-tint));box-shadow:none;border-color:rgba(216,180,92,.3)}
.pnav a{align-items:center;text-align:center}
.pg{background:linear-gradient(180deg,var(--paper),var(--paper-2));box-shadow:0 1px 2px rgba(0,0,0,.05),inset 0 1px 0 rgba(255,255,255,.8)}
.pg b{font-size:1.05rem}
html[data-theme="dark"] .pg{box-shadow:none}
.ayah-text .nobr{white-space:nowrap}
.ayah-end{vertical-align:middle;margin-top:-.15em}
/* v101: علامة رقم الآية تجلس على سطر الكتابة كما في المصحف — منتصفها في منتصف أجسام الحروف لا فوقها */
.ayah-end{vertical-align:-.14em;margin-top:0;margin-inline-start:.42em}
/* v102: ضبط نهائي لمستوى علامة الآية — وسط ارتفاع الحروف تمامًا */
.ayah-end{vertical-align:-.07em}
/* v103 */
.ayah-end{vertical-align:-.01em}
/* v104 */
.ayah-end{vertical-align:.06em}
/* v105 */
.ayah-end{vertical-align:.11em}
/* v106 */
.ayah-end{vertical-align:.18em}

/* ── v108: mobile fit + scrollbar + compact page pills ── */
html{scrollbar-width:thin;scrollbar-color:var(--rose) transparent}
.wrap,main{max-width:100%}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rose);border-radius:99px;border:1px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--rose-deep)}
.sec h2{white-space:normal;line-height:1.5}
.pnav a{min-width:0}
.pnav .pgn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;box-sizing:border-box;padding:6px 8px;font-size:.7rem;line-height:1.5}
.pnav .pgn b{font-size:.9rem;white-space:nowrap}
.pnav .pgn i{display:none}
.pnav .pgn span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--ink-3)}
.page-badge{max-width:100%;box-sizing:border-box}
.tseg-w{white-space:normal}
.lats-h{min-width:0}

/* ── v111: reading bar fits phones — name on top, range beneath ── */
@media(max-width:600px){
  .rbar{padding:6px 14px;gap:6px}
  .rbar-t{display:flex;flex-direction:column;gap:0;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;font-size:.98rem}
  .rbar-t small{display:block;margin-inline-start:0;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .rbtn{height:32px;padding:0 9px;font-size:.76rem;gap:4px;flex:none}
  .rbtn svg{width:14px;height:14px}
}

/* v117 — أسماء السورة: كتلة معنونة مسطّحة (بلا تدرّج ولا ظل) */
.names-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:16px 0 18px;padding:13px 14px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:transparent}
.names-t{flex-basis:100%;display:flex;align-items:center;gap:8px;margin:0 0 3px;font-family:var(--f-ui);font-size:.8rem;font-weight:700;color:var(--ink-3)}
.names-t::before{content:"";flex:none;width:15px;height:15px;background:var(--gold);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g transform='translate(256 256)' fill='none' stroke='black' stroke-width='34'><rect x='-150' y='-150' width='300' height='300' rx='32'/><rect x='-150' y='-150' width='300' height='300' rx='32' transform='rotate(45)'/><circle r='50' fill='black' stroke='none'/></g></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g transform='translate(256 256)' fill='none' stroke='black' stroke-width='34'><rect x='-150' y='-150' width='300' height='300' rx='32'/><rect x='-150' y='-150' width='300' height='300' rx='32' transform='rotate(45)'/><circle r='50' fill='black' stroke='none'/></g></svg>") center/contain no-repeat}
.names-row .name-badge,html[data-theme="dark"] .names-row .name-badge{background:var(--paper-2);border:0;box-shadow:none;border-radius:var(--r-s);padding:4px 11px;color:var(--gold-deep);font-weight:600;font-size:.86rem}

/* تخريج الحديث — الدرر السنية */
.hd{display:inline-block;font-size:.8em;opacity:.78;margin-inline-start:.25em;white-space:nowrap}
.hd .dorar{color:var(--rose);text-decoration:none;border:0}
.hd .dorar:hover{opacity:1}



/* v142: توسيط علامة الآية على منتصف جسم الكلمة الأخيرة (مقيس فعليًا) */
.ayah-end{vertical-align:.56em}
/* ── معاني الكلمات الغريبة (gloss) ── */
.gw{color:inherit}
.gm{font-family:var(--f-body);font-size:.8em;color:var(--rose-soft);margin-inline-start:.3em;font-weight:400}
.gm::before{content:'أي: ';opacity:.85}
html[data-theme="dark"] .gm{color:var(--rose-soft)}

/* ══════════════════════════════════════════════════════════════
   v145 — ختم الدرر السنية، لوحة التنقّل، الجولة التعريفية، عن الموقع
   ══════════════════════════════════════════════════════════════ */

/* ── ختم الدرر السنية: شكل صغير بدل كلمة «الدرر السنية» ── */
.hd{white-space:normal}
.hd .dorar{position:relative;display:inline-grid;place-items:center;width:1.55em;height:1.55em;margin-inline-start:.3em;border-radius:.45em;background:linear-gradient(180deg,var(--gold-tint),#F5E7C4);border:1px solid var(--gold-light);color:var(--gold-deep);vertical-align:-.42em;opacity:1;box-shadow:0 2px 6px rgba(156,122,44,.14),inset 0 1px 0 rgba(255,255,255,.7);transition:transform .2s var(--spring),background var(--t),color var(--t),box-shadow var(--t)}
.hd .dorar svg{width:1em;height:1em;display:block}
@media(hover:hover) and (pointer:fine){.hd .dorar:hover{background:var(--rose);border-color:var(--rose);color:#fff;transform:translateY(-1px);box-shadow:0 6px 14px rgba(126,51,80,.25)}}
.hd .dorar:active{transform:scale(.94)}
.hd .dorar:focus{outline:0}
@media(hover:hover) and (pointer:fine){.hd .dorar:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;transform:translateX(50%);padding:5px 10px;border-radius:9px;background:var(--rose-ink);color:#fff;font-family:var(--f-ui);font-size:.72rem;font-weight:700;white-space:nowrap;pointer-events:none;z-index:3;animation:fadeUp .25s var(--ease) both}}
html[data-theme="dark"] .hd .dorar{background:linear-gradient(180deg,rgba(201,162,74,.16),rgba(201,162,74,.08));border-color:rgba(201,162,74,.35);color:var(--gold-light);box-shadow:none}
@media(hover:hover) and (pointer:fine){html[data-theme="dark"] .hd .dorar:hover{background:var(--rose);color:#fff}}

/* ── لوحة التنقّل بين السور والصفحات ── */
.sheet-h .mark svg{width:100%;height:100%}
.sheet-h .mark{width:48px;height:48px;margin-bottom:8px}
.pick-list .pick-s{position:relative;padding:13px 16px;border-radius:18px;animation:fadeUp .5s var(--ease) both;animation-delay:calc(var(--i,0) * .05s);transition:background var(--t),border-color var(--t),transform .25s var(--ease),box-shadow .25s var(--ease)}
.pick-s:hover{transform:translateX(-3px);box-shadow:var(--shadow-1)}
.pick-s .n{width:38px;height:38px}
.pick-s .n::before,.pick-s .n::after{border-radius:9px;transition:transform .6s var(--ease)}
.pick-s:hover .n::after,.pick-s.cur .n::after{transform:rotate(135deg)}
.pick-s:hover .n::before,.pick-s.cur .n::before{transform:rotate(90deg)}
.pick-s.cur{background:linear-gradient(135deg,var(--rose-tint),var(--paper));border-color:var(--rose-tint-2);box-shadow:0 0 0 3px var(--rose-tint),var(--shadow-1)}
.pick-s.cur .n{color:var(--rose)}
.pick-now{position:absolute;top:-9px;inset-inline-end:14px;padding:2px 10px;border-radius:999px;background:var(--rose);color:#fff;font-family:var(--f-ui);font-size:.66rem;font-weight:700;font-style:normal;box-shadow:0 4px 10px rgba(126,51,80,.3);letter-spacing:.01em}
.pick-s .pick-arrow{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);flex:none;margin-inline-start:4px;transition:transform .3s var(--ease),color var(--t),background var(--t)}
.pick-s .pick-arrow svg{width:14px;height:14px}
.pick-s:hover .pick-arrow{color:var(--rose);background:var(--rose-tint);transform:translateX(-3px)}
.pick-soon{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 0 2px}
.pick-soon::before,.pick-soon::after{content:"";flex:1;max-width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.pick-sum{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 10px;font-family:var(--f-ui);font-size:.78rem;color:var(--ink-3)}
.pick-sum b{font-weight:700;color:var(--rose)}
.pick-sum .sep{margin:0 2px}
.pick-pg{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px}
.pick-pg .pg{position:relative;padding:12px 6px 10px;border-radius:16px;background:linear-gradient(180deg,var(--paper),var(--paper-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px rgba(62,21,39,.04);animation:pgIn .5s var(--spring) both;animation-delay:calc(var(--i,0) * .025s);transition:background var(--t),border-color var(--t),transform .2s var(--ease),box-shadow .2s var(--ease)}
.pick-pg .pg b{font-size:1.25rem}
.pick-pg .pg:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.pick-pg .pg.cur{background:linear-gradient(160deg,var(--rose),var(--rose-deep));border-color:var(--rose-deep);box-shadow:0 10px 24px rgba(126,51,80,.32)}
.pick-pg .pg.cur b{color:#fff}
.pick-pg .pg.cur small{color:rgba(255,255,255,.82)}
@keyframes pgIn{from{opacity:0;transform:scale(.86) translateY(6px)}to{opacity:1;transform:none}}
.pick-leg{display:flex;justify-content:center;gap:16px;margin-top:12px;font-family:var(--f-ui);font-size:.72rem;color:var(--ink-3)}
.pick-leg span{display:inline-flex;align-items:center;gap:6px}
.pick-leg i.r{width:10px;height:10px;border-radius:3px;background:var(--rose);display:inline-block}

/* ── الجولة التعريفية: مسرح فاتح بعناصر الموقع نفسها ── */
.tour-card{width:min(100%,440px);max-height:min(90dvh,760px)}
.tour-stage{height:272px;background:linear-gradient(160deg,#FCF6F8 0%,#F3E2EA 55%,#F7EDE0 100%);border-bottom:1px solid var(--line)}
.tour-stage::before{background:radial-gradient(circle at 20% 25%,rgba(126,51,80,.10),transparent 38%),radial-gradient(circle at 80% 75%,rgba(201,162,74,.18),transparent 42%);animation:drift 12s ease-in-out infinite alternate}
.tour-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g transform='translate(256 256)' fill='none' stroke='%237E3350' stroke-width='10' opacity='.06'><rect x='-150' y='-150' width='300' height='300' rx='32'/><rect x='-150' y='-150' width='300' height='300' rx='32' transform='rotate(45)'/></g></svg>") calc(100% + 110px) -110px/300px 300px no-repeat,url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g transform='translate(256 256)' fill='none' stroke='%23C9A24A' stroke-width='10' opacity='.09'><rect x='-150' y='-150' width='300' height='300' rx='32'/><rect x='-150' y='-150' width='300' height='300' rx='32' transform='rotate(45)'/></g></svg>") -120px calc(100% + 120px)/280px 280px no-repeat}
html[data-theme="dark"] .tour-stage{background:linear-gradient(160deg,#2B1B22 0%,#241620 55%,#2A2019 100%)}
.tour-x{color:var(--rose);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.tour-x:hover{background:var(--rose-tint)}
.tour-slide{padding:18px 20px}
.tour-body{padding:20px 24px 6px}
.tour-body h3{font-size:1.4rem}
.tour-body p{font-size:.98rem;line-height:1.95}
.tour-body .tour-k{display:inline-flex;align-items:center;gap:6px;margin:0 0 8px;padding:4px 12px;border-radius:999px;background:var(--gold-tint);border:1px solid var(--gold-light);font-family:var(--f-ui);font-size:.7rem;font-weight:700;color:var(--gold-deep);letter-spacing:.02em}
.tour-dots i.on{background:linear-gradient(90deg,var(--gold),var(--rose))}
/* الشريحة ١: الشعار */
.tf-mark{width:128px;height:128px;color:var(--rose);filter:drop-shadow(0 16px 30px rgba(126,51,80,.22));animation:tfFloat 4s ease-in-out infinite}
.tf-mark svg{width:100%;height:100%;overflow:visible}
.tf-mark .gd{fill:var(--gold)}
.tf-hello{position:absolute;bottom:18px;inset-inline:0;text-align:center;font-family:var(--f-head);font-weight:700;font-size:1.05rem;color:var(--rose-ink);opacity:.9}
/* الشريحة ٢: بطاقة الآية الحقيقية */
.tf .ayah{width:300px;margin:0 auto;animation:none;transform:none;opacity:1}
.tf .ayah-head{padding:14px 14px 12px;gap:10px;cursor:default}
.tf .ayah-no{width:34px;height:34px;font-size:.86rem;margin-top:6px}
.tf .ayah-text{font-size:1.32rem;line-height:1.95}
.tf .ayah-chev{margin-top:9px}
.tf .ayah-pad{padding:2px 14px 14px}
.tf .tseg{margin:0 0 10px}
.tf .tseg-w{font-size:1.05em;line-height:1.7}
.tf .tf-lines{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.tf .tf-lines i{display:block;height:7px;border-radius:99px;background:linear-gradient(90deg,var(--rose-tint-2),var(--rose-tint))}
.tf .tf-lines i:nth-child(2){width:86%}.tf .tf-lines i:nth-child(3){width:64%}
.tf-hand{background:var(--rose);box-shadow:0 0 0 0 rgba(126,51,80,.45);border:2.5px solid #fff;width:24px;height:24px}
/* الشريحة ٣: المقاطع */
.tf-pane{width:304px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-2);padding:14px 16px 12px;text-align:right}
.tf-pane .tseg{animation:fadeUp .6s var(--ease) both}
.tf-pane .tseg:nth-child(2){animation-delay:.35s}
.tf-pane .tseg p{font-size:.86rem;line-height:1.85;color:var(--ink-2)}
.tour-slide.on .tf-pane .tseg{animation-name:fadeUp}
.tf-pane .tseg-w{font-size:1.05rem;margin-bottom:3px}
/* الشريحة ٤: اللطائف */
.tf-pane .lats{margin:0;background:var(--paper)}
.tf-pane .lats-h{padding:10px 12px;cursor:default}
.tf-pane .lats-t{font-size:.84rem}
.tf-pane .lats-who{font-size:.72rem}
.tf-pane .lat{padding:10px 12px;margin-top:8px}
.tf-pane .lat p{font-size:.84rem;line-height:1.8;color:var(--ink-2)}
.tf-pane .lat-who{font-size:.72rem}
/* الشريحة ٥: التدبر */
.tf-pane.tf-tad{padding:0;border:0;background:none;box-shadow:none}
.tf-pane .tadabbur{box-shadow:var(--shadow-2);padding:14px 16px 14px}
.tf-pane .tadabbur p{margin:0;font-size:.9rem;line-height:1.9;color:var(--ink-2)}
.tf-tad .tad-h{font-size:.8rem}
.tf-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 60%,rgba(201,162,74,.22),transparent 55%);animation:breathe 4s ease-in-out infinite}
/* الشريحة ٦: المصادر */
.tf-src2{width:304px;margin:0 auto;display:flex;flex-direction:column;gap:10px;text-align:right}
.tf-src2 .row{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1);padding:10px 14px 12px;animation:fadeUp .55s var(--ease) both}
.tf-src2 .row:nth-child(2){animation-delay:.3s}
.tf-src2 .lb{display:flex;align-items:center;gap:7px;font-family:var(--f-ui);font-size:.72rem;font-weight:700;color:var(--gold-deep);margin-bottom:8px}
.tf-src2 .lb svg{width:14px;height:14px}
.tf-src2 .chips{display:flex;flex-wrap:wrap;gap:6px}
.tf-src2 .ref{animation:fadeUp .4s var(--ease) both;animation-delay:calc(.15s + var(--i,0) * .1s)}
.tf-src2 .hd{opacity:1;font-size:.84rem;color:var(--ink-2);font-family:var(--f-body)}
.tf-src2 .hd .dorar{animation:sealPop 2.6s var(--spring) infinite}
@keyframes sealPop{0%,70%,100%{transform:none}80%{transform:translateY(-2px) scale(1.12)}}
/* الشريحة ٧: الاستماع والأزرار */
.tf-play{width:304px;margin:0 auto;display:flex;flex-direction:column;gap:14px;align-items:center}
.tf-play .player{position:static;width:100%;height:60px;transform:none;opacity:1;margin:0;display:flex;align-items:center;gap:10px;padding:0 10px 0 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-2);text-align:right}
.tf-play .pl-btn{width:40px;height:40px}
.tf-play .pl-info{font-size:.8rem}
.tf-play .pl-bar i{animation:plRun 6s linear infinite;transform-origin:right center}
.tf-play .pl-bar b{animation:plThumb 6s linear infinite}
@keyframes plRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes plThumb{from{transform:translateX(0)}to{transform:translateX(calc(-100% * 14))}}
.tf-play .pl-bar{width:100%}
.tf-play .pl-eq{display:flex;align-items:flex-end;gap:2px;height:16px;flex:none;margin-inline-end:2px}
.tf-play .pl-eq i{width:3px;border-radius:2px;background:var(--gold);animation:eq 1s ease-in-out infinite}
.tf-play .pl-eq i:nth-child(2){animation-delay:.15s}.tf-play .pl-eq i:nth-child(3){animation-delay:.3s}.tf-play .pl-eq i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
.tf-play .acts{display:flex;gap:14px}
.tf-play .acts span{width:52px;height:52px;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);display:grid;place-items:center;color:var(--rose);animation:pop 3s var(--spring) infinite}
.tf-play .acts span:nth-child(2){animation-delay:.25s}.tf-play .acts span:nth-child(3){animation-delay:.5s}
.tf-play .acts svg{width:22px;height:22px}
.tf-play .acts span.g{color:var(--gold-deep)}
.tf-play .acts span.g svg{fill:var(--gold)}
/* الشريحة ٨: التنقل */
.tf-nav{width:304px;margin:0 auto;position:relative;height:230px}
.tf-nav .rbar{position:absolute;top:0;inset-inline:0;margin:0;padding:8px 12px;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);opacity:1;transform:none;animation:none;z-index:1}
.tf-nav .rbar-t{font-size:.98rem}
.tf-nav .rbtn{pointer-events:none;transition:background .2s,color .2s,box-shadow .2s}
.tf-nav .rbtn.lit{background:var(--rose);color:#fff;border-color:var(--rose);box-shadow:0 6px 16px rgba(126,51,80,.3)}
.tf-nav .mini{position:absolute;top:66px;inset-inline:10px;bottom:0;background:var(--paper);border:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:var(--shadow-3);padding:12px 12px 0;overflow:hidden;transform:translateY(110%);animation:miniUp .55s .3s var(--ease) forwards}
@keyframes miniUp{from{transform:translateY(110%)}to{transform:none}}
.tf-nav .mini h5{margin:0 0 8px;text-align:center;font-family:var(--f-head);font-size:.95rem;color:var(--rose-ink)}
.tf-nav .mini .grip{width:36px;height:4px;border-radius:4px;background:var(--line-2);margin:0 auto 8px}
.tf-nav .pick-s{padding:8px 10px;gap:9px;border-radius:13px;animation:none}
.tf-nav .pick-s .n{width:28px;height:28px;font-size:.7rem}
.tf-nav .pick-s b{font-size:.92rem}
.tf-nav .pick-s small{font-size:.66rem}
.tf-nav .pick-pgs{font-size:.64rem;padding:3px 8px}
.tf-nav .pick-list{gap:6px;padding:0}
.tf-nav .pgs{display:flex;gap:6px;margin-top:8px}
.tf-nav .pgs .pg{flex:1;padding:7px 4px 6px;border-radius:11px;animation:none}
.tf-nav .pgs .pg b{font-size:.95rem}
.tf-nav .pgs .pg small{font-size:.6rem}
.tf-nav .tf-hand{z-index:2}
@media (max-width:380px){.tf .ayah,.tf-pane,.tf-src2,.tf-play,.tf-nav{width:100%}}
.rp-types span svg{width:15px;height:15px;opacity:.85}
.rp-types input:checked+span svg{color:var(--gold-light)}

/* ── عن الموقع (v145) ── */
.about-why p{font-size:1.02rem;line-height:2}
.about-sub{font-family:var(--f-ui);font-size:.92rem;color:var(--ink-3);text-align:center;margin:-2px 0 16px}
.steps{list-style:none;margin:0 0 6px;padding:0;position:relative}
.steps::before{content:"";position:absolute;top:22px;bottom:22px;inset-inline-start:21px;width:2px;background:linear-gradient(180deg,var(--gold-light),var(--rose-tint-2),var(--gold-light))}
.step{position:relative;display:flex;gap:16px;margin:0 0 14px;animation:fadeUp .55s var(--ease) both;animation-delay:calc(var(--i,0) * .08s)}
.st-n{position:relative;z-index:1;width:44px;height:44px;flex:none;display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:1rem;color:var(--rose);background:var(--paper)}
.st-n::before,.st-n::after{content:"";position:absolute;inset:3px;border:1.5px solid var(--gold);border-radius:10px;transition:transform .6s var(--ease)}
.st-n::after{transform:rotate(45deg)}
.step:hover .st-n::after{transform:rotate(135deg)}.step:hover .st-n::before{transform:rotate(90deg)}
.st-b{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--shadow-1);transition:transform .3s var(--ease),box-shadow var(--t)}
.step:hover .st-b{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.st-b h4{margin:0 0 6px;font-family:var(--f-head);font-size:1.18rem;color:var(--rose-ink)}
.st-b p{margin:0;font-size:.98rem;line-height:1.95;color:var(--ink-2)}
.st-demo{margin-top:12px;padding:12px 14px;border-radius:var(--r-m);background:var(--paper-2);border:1px dashed transparent;border-color:var(--line)}
.st-demo .ayah-text{font-size:1.3rem;line-height:1.9;margin:0}
.st-demo .tseg{margin:0}.st-demo .tseg p{font-size:.9rem;color:var(--ink-2)}
.st-demo .tseg-w{font-size:1.05rem;margin-bottom:4px}
.st-demo .lats{margin:0;background:var(--paper)}
.st-demo .lats-h{padding:9px 12px;cursor:default;display:flex}
.st-demo .tadabbur{padding:12px 14px}.st-demo .tadabbur p{margin:0;font-size:.92rem}
.st-demo .chips{display:flex;flex-wrap:wrap;gap:6px}
.st-demo .ref{pointer-events:none}
.src-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:14px}
.src-card{position:relative;display:flex;flex-direction:column;padding:22px 20px 20px;border-radius:var(--r-l);background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--ink);overflow:hidden;animation:fadeUp .6s var(--ease) both;animation-delay:calc(var(--i,0) * .12s);transition:transform .3s var(--ease),box-shadow var(--t),border-color var(--t)}
.src-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--rose),var(--rose-soft))}
.src-card.gold::before{background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
.src-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--rose-tint-2)}
.src-card .sc-ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--rose-tint);color:var(--rose);margin-bottom:12px}
.src-card .sc-ic svg{width:26px;height:26px}.src-card .sc-ic svg.mk{stroke-width:24}
.src-card.gold .sc-ic{background:var(--gold-tint);color:var(--gold-deep)}
.src-card h3{margin:0;font-family:var(--f-head);font-size:1.35rem;color:var(--rose-ink)}
.src-card small{display:block;font-family:var(--f-ui);font-size:.78rem;font-weight:700;color:var(--gold-deep);margin:2px 0 10px}
.src-card p{margin:0 0 14px;font-size:.96rem;line-height:1.95;color:var(--ink-2);flex:1}
.src-card .go{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--rose);color:#fff;font-family:var(--f-ui);font-size:.8rem;font-weight:700;transition:transform .2s var(--spring)}
.src-card.gold .go{background:var(--gold-deep)}
.src-card:hover .go{transform:translateX(-3px)}
.rules h4{margin:0 0 10px;font-family:var(--f-head);font-size:1.15rem;color:var(--rose)}
.rules ul{margin:0;padding:0;list-style:none}
.rules li{position:relative;padding-inline-start:22px;margin:0 0 9px;line-height:1.95;color:var(--ink-2)}
.rules li::before{content:"";position:absolute;inset-inline-start:2px;top:.78em;width:8px;height:8px;background:var(--gold);transform:rotate(45deg);border-radius:1px}
.rules li:last-child{margin-bottom:0}
.feat-btn{margin-top:12px;padding:8px 16px;border-radius:999px;background:var(--rose-tint);color:var(--rose);font-family:var(--f-ui);font-weight:700;font-size:.82rem;transition:background var(--t),color var(--t),transform .2s var(--spring)}
.feat-btn:hover{background:var(--rose);color:#fff;transform:translateY(-1px)}
@media (max-width:480px){.steps::before{inset-inline-start:17px}.st-n{width:36px;height:36px;font-size:.88rem}.step{gap:12px}.st-b{padding:14px 14px}}
.pick-pg.few{display:flex;justify-content:center}.pick-pg.few .pg{width:118px}
.tour-next{white-space:nowrap}
.tf-nav{height:236px}
.tf-nav .mini{top:60px;padding:10px 10px 0}
.tf-nav .mini h5{margin:0 0 6px;font-size:.9rem}
.tf-nav .pick-s{padding:6px 9px}
.tf-nav .pick-s .n{width:26px;height:26px}
.tf-nav .pgs{margin-top:6px}
.tf-nav .pgs .pg{padding:5px 4px 4px}
.tour-slide .tf-nav{padding:0}

/* v146: حجم الخط يعمل في كل صفحات الموقع (يُكبَّر محتوى الصفحة كله) */
main.wrap{zoom:var(--fs)}
/* المشغّل: مسافة بين رقم الآية واسم الشيخ */
.pl-info small{margin-inline-start:10px;font-size:.68rem;opacity:.85}
/* الجولة: ضغطة أوضح */
.tf-hand{width:26px;height:26px;border:3px solid #fff;background:var(--gold);opacity:.92;box-shadow:0 4px 12px rgba(62,21,39,.3);animation:tap2 2.8s infinite;transform-origin:center}
.tf-hand::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--rose);opacity:0;animation:ripple 2.8s infinite}
@keyframes tap2{0%,100%{transform:scale(1);opacity:.95}30%{transform:scale(1)}36%{transform:scale(.72)}44%{transform:scale(1.05)}50%{transform:scale(1)}}
@keyframes ripple{0%,34%{transform:scale(.6);opacity:0}38%{opacity:.8}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.tf .ayah{position:relative}
.tf .ayah .tf-hand{position:absolute;top:30px;left:18px;z-index:3}
.tf .ayah-chev{animation:chevPress 2.8s infinite}
@keyframes chevPress{0%,33%,50%,100%{transform:scale(1)}38%{transform:scale(.8);background:var(--rose-tint)}}
.tf .ayah.open .ayah-chev{animation:none}
.tf-pane{position:relative}
.tf-pane .lats-h .lats-chev{color:var(--ink-3)}
.tf-pane .lats-hand{position:absolute;top:30px;left:22px;z-index:3}
.tf-nav .nav-hand{position:absolute;top:30px;z-index:4;left:139px;transition:left .5s var(--ease)}
.tf-nav.pages .nav-hand{left:47px}
.tf-nav .mini .list,.tf-nav .mini .grid{transition:opacity .22s,transform .3s var(--ease)}
.tf-nav .mini .grid{position:absolute;inset:34px 10px 0;opacity:0;transform:translateY(10px);pointer-events:none}
.tf-nav.pages .mini .list{opacity:0;transform:translateY(-6px)}
.tf-nav.pages .mini .grid{opacity:1;transform:none}
.tf-nav .grid .pick-pg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0}
.tf-nav .grid .pg{padding:7px 4px 6px;border-radius:11px;animation:none}
.tf-nav .grid .pg b{font-size:1rem}
.tf-nav .grid .pg small{font-size:.6rem}

/* v147: شريط القراءة خارج main (حتى لا يتأثر بتكبير الخط) */
.rbar{margin:0 0 6px;padding:8px max(18px,calc((100% - 820px) / 2 + 18px))}
.tf-nav .rbar{padding:8px 12px}

/* v148: حركات الجولة أسرع */
.tf .ayah-body{transition:grid-template-rows .3s var(--ease)}
.tf .ayah-pad{transition:opacity .25s .05s var(--ease),transform .3s .03s var(--ease)}
.tf .ayah-no::before,.tf .ayah-no::after{transition:transform .35s var(--ease)}
.tf .ayah-chev{transition:transform .25s var(--spring),background .2s,color .2s}
.tf-pane .lats-b{transition:grid-template-rows .3s var(--ease)}
.tf-pane .lats.open .lat{animation-duration:.3s}
.tf-pane .lats.open .lat:nth-child(2){animation-delay:.04s}
.tf-pane .lats-chev{transition:transform .25s var(--ease)}
.tf-nav .mini h5{transition:none}

/* v150: صفحات لم تُفتح بعد */
.pnav .soon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:14px 16px;border-radius:var(--r-m);background:var(--paper-2);border:1px dashed var(--line-2);color:var(--ink-3);opacity:.75;min-width:0}
.pnav .soon b{color:var(--ink-3)}
.soon-card p+p{margin-top:10px}
.soon-card .sep{margin:0 10px;vertical-align:middle}

/* ══════════════════════════════════════════════════════════════
   v154 — وضع التطبيق (PWA): شريط تبويبات، انتقالات، تثبيت
   ══════════════════════════════════════════════════════════════ */
html.app{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
html.app body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px));overscroll-behavior-y:none}
html.app .hdr{padding-top:env(safe-area-inset-top,0px)}
html.app .hdr-nav{display:none}
html.app .hdr-menu{display:none}
html.app .hdr-in{justify-content:center;position:relative}
html.app .hdr-acts{position:absolute;inset-inline-end:18px;top:50%;transform:translateY(-50%)}
html.app .brand{margin:0 auto}
html.app .foot{margin-top:40px;padding-bottom:16px}
html.app .totop{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
html.app .player{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
html.app .toast{bottom:calc(96px + env(safe-area-inset-bottom,0px))}
html.app .hdr,html.app .tabbar,html.app .rbar,html.app .ibtn,html.app .rbtn,html.app .act{-webkit-user-select:none;user-select:none}
html.app a,html.app button{touch-action:manipulation}
.tabbar{display:none}
html.app .tabbar{position:fixed;bottom:0;inset-inline:0;z-index:70;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(22px);backdrop-filter:saturate(1.6) blur(22px);border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(62,21,39,.06)}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 2px;border-radius:14px;font-family:var(--f-ui);font-size:.66rem;font-weight:700;color:var(--ink-3);background:none;border:0;cursor:pointer;transition:color var(--t),transform .2s var(--spring);position:relative}
.tabbar a:active,.tabbar button:active{transform:scale(.92)}
.tb-ic{width:44px;height:30px;border-radius:12px;display:grid;place-items:center;transition:background var(--t),color var(--t),transform .3s var(--spring)}
.tb-ic svg{width:22px;height:22px}
.tabbar .on{color:var(--rose)}
.tabbar .on .tb-ic{background:var(--rose-tint);color:var(--rose)}
.tabbar .on .tb-ic svg{fill:none}
.tabbar .on::after{content:"";position:absolute;top:0;width:18px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--gold),var(--rose))}
.tb-main{width:50px;height:50px;border-radius:50%;margin-top:-26px;background:linear-gradient(145deg,var(--rose),var(--rose-deep));color:#fff;box-shadow:0 10px 24px rgba(126,51,80,.35),0 0 0 5px var(--bg);transition:transform .3s var(--spring),box-shadow var(--t)}
.tb-main svg{width:23px;height:23px}
.tabbar button:active .tb-main{transform:scale(.9)}
html[data-theme="dark"] .tb-main{box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 0 5px var(--bg)}
/* بطاقة تابع القراءة */
.resume{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;border-radius:var(--r-l);background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:#fff;box-shadow:0 14px 30px rgba(126,51,80,.3);position:relative;overflow:hidden;transition:transform .3s var(--ease)}
.resume::before{content:"";position:absolute;inset:-40% -10% auto auto;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(201,162,74,.35),transparent 65%)}
.resume:active{transform:scale(.985)}
.rs-ic{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.rs-ic svg{width:24px;height:24px}
.rs-t{flex:1;min-width:0}
.rs-t small{display:block;font-family:var(--f-ui);font-size:.7rem;font-weight:700;color:var(--gold-light);letter-spacing:.02em;margin-bottom:2px}
.rs-t b{display:block;font-family:var(--f-head);font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-t .sep{background:rgba(255,255,255,.4)}
.rs-go{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.rs-go svg{width:16px;height:16px}
/* دعوة التثبيت */
.install{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));inset-inline:12px;z-index:85;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 10px;border-radius:22px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-3);transform:translateY(120%);opacity:0;transition:transform .5s var(--spring),opacity .3s}
.install.show{transform:none;opacity:1}
.in-ic{width:44px;height:44px;flex:none;color:var(--gold);display:grid;place-items:center}
.in-ic svg{width:100%;height:100%}
.in-t{flex:1;min-width:0}
.in-t b{display:block;font-family:var(--f-head);font-size:1rem;color:var(--rose-ink)}
.in-t small{display:block;font-family:var(--f-ui);font-size:.74rem;color:var(--ink-3);margin-top:2px}
.in-btn{padding:9px 16px;border-radius:999px;background:var(--rose);color:#fff;font-family:var(--f-ui);font-weight:700;font-size:.82rem;border:0;flex:none}
.in-share{width:36px;height:36px;border-radius:10px;background:var(--rose-tint);color:var(--rose);display:grid;place-items:center;flex:none}
.in-share svg{width:18px;height:18px}
.in-x{width:32px;height:32px;flex:none;color:var(--ink-3)}
/* انتقالات بين الصفحات كأنها تطبيق واحد */
@media (prefers-reduced-motion:no-preference){
  html.app{view-transition-name:none}
  @view-transition{navigation:auto}
  html.app .hdr{view-transition-name:hdr}
  html.app .tabbar{view-transition-name:tabbar}
  html.app .player{view-transition-name:player}
  ::view-transition-old(root){animation:vtOut .22s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .32s var(--ease) both}
  @keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
  @keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
}
@media (max-width:360px){.tabbar a,.tabbar button{font-size:.6rem}}


/* ══════════════════════════════════════════════════════════════
   v160 — الإنجليزية (EN): خطوط لاتينية، اتجاه LTR، زر اللغة،
   وانتقال متحرّك بين اللغتين. نصوص القرآن والتفسير تبقى RTL.
   ══════════════════════════════════════════════════════════════ */
@font-face{font-family:'Cormorant Garamond';font-weight:600;src:url('../fonts/cormorant-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Cormorant Garamond';font-weight:700;src:url('../fonts/cormorant-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Lora';font-weight:400;src:url('../fonts/lora-400.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Lora';font-weight:400;font-style:italic;src:url('../fonts/lora-400i.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Lora';font-weight:500;src:url('../fonts/lora-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Lora';font-weight:700;src:url('../fonts/lora-700.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:500;src:url('../fonts/inter-500.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:600;src:url('../fonts/inter-600.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Inter';font-weight:700;src:url('../fonts/inter-700.woff2') format('woff2');font-display:swap}

/* ── إخفاء الصفحة لحظةً حتى تُترجَم (مع مهلة أمان لو تعطّل السكربت) ── */
html.i18n-wait body{animation:i18nWait 1.4s steps(1,end) both}
@keyframes i18nWait{0%{opacity:0}100%{opacity:1}}

/* ── خطوط ومقاسات الإنجليزية ── */
html[lang="en"]{--f-head:'Cormorant Garamond','Iowan Old Style','Palatino Linotype',Georgia,serif;--f-body:'Lora',Georgia,'Times New Roman',serif;--f-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
html[lang="en"] body{direction:ltr;text-align:left;font-size:1.02rem;line-height:1.75}
html[lang="en"] .brand{font-size:1.45rem;letter-spacing:-.005em;white-space:nowrap}
html[lang="en"] .brand-name{white-space:nowrap}
@media(max-width:430px){html[lang="en"] .brand{font-size:1.22rem;gap:8px}}
@media(max-width:360px){html[lang="en"] .brand{font-size:1.1rem}}
html[lang="en"] .sc small{line-height:1.6}
html[lang="en"] .drawer-brand{font-size:1.4rem}
html[lang="en"] .home-hero h1{font-size:clamp(2.5rem,8vw,3.6rem);letter-spacing:-.01em}
html[lang="en"] .s-name{font-size:clamp(2.3rem,7vw,3.1rem);letter-spacing:-.01em}
html[lang="en"] .sec h2{font-size:1.5rem;letter-spacing:-.005em}
html[lang="en"] .sheet-h h2{font-size:1.8rem}
html[lang="en"] .tour-body h3{font-size:1.75rem;line-height:1.15}
html[lang="en"] .tour-body p{font-size:.96rem;line-height:1.7}
html[lang="en"] .tour-k{letter-spacing:.14em;text-transform:uppercase;font-size:.7rem}
html[lang="en"] .feat h4,html[lang="en"] .step h4,html[lang="en"] .card h4{font-size:1.3rem}
html[lang="en"] .src-card h3{font-size:1.6rem}
html[lang="en"] .sc b,html[lang="en"] .pick-s b{font-size:1.22rem}
html[lang="en"] .foot-nav b,html[lang="en"] .pnav b{font-size:1.18rem}
html[lang="en"] .rbar-t{font-size:1.18rem}
html[lang="en"] .s-no,html[lang="en"] .ayah-no,html[lang="en"] .sc .n,html[lang="en"] .pick-s .n,html[lang="en"] .st-n{font-family:var(--f-ui);font-weight:700}
html[lang="en"] .ayah-no{font-size:.9rem}
html[lang="en"] .about-lead{line-height:1.8;font-size:1.08rem}
html[lang="en"] .drawer-sec{text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}
html[lang="en"] .seg button,html[lang="en"] .about-nav a,html[lang="en"] .act,html[lang="en"] .rbtn,html[lang="en"] .pnav-all button{font-weight:600}
html[lang="en"] .foot p{font-size:.84rem}
html[lang="en"] .fs-row button{font-family:var(--f-head);font-weight:700;font-size:1.05rem}

/* ── v157: المحتوى كله يُترجَم؛ لا يبقى عربيًّا إلا نصُّ القرآن (ومراجع الكتب) ── */
html[lang="en"] .ayah-text,html[lang="en"] .basmala,html[lang="en"] .qv,html[lang="en"] .qf,html[lang="en"] .tseg-w,html[lang="en"] .foot-verse,html[lang="en"] .sup-verse,html[lang="en"] .sr-text,html[lang="en"] .bm .v,html[lang="en"] .dua .q,html[lang="en"] .ms-verse,html[lang="en"] .book .bi{
  --f-head:'Amiri','Noto Naskh Arabic',serif;--f-body:'Noto Naskh Arabic','Amiri',serif;--f-ui:'Tajawal','Cairo',system-ui,-apple-system,sans-serif;
  direction:rtl;unicode-bidi:isolate}
html[lang="en"] .basmala,html[lang="en"] .foot-verse,html[lang="en"] .sup-verse,html[lang="en"] .dua .q{text-align:center}
html[lang="en"] .ayah-text,html[lang="en"] .sr-text,html[lang="en"] .bm .v,html[lang="en"] .book .bi{text-align:right}
html[lang="en"] .ayah-head{text-align:right}
html[lang="en"] .tseg-w{display:block;text-align:left}
html[lang="en"] .qv,html[lang="en"] strong.qf{unicode-bidi:isolate;direction:rtl}
html[lang="en"] .tafsir-text,html[lang="en"] .tadabbur{font-size:1rem;line-height:1.8}
html[lang="en"] .lat p{line-height:1.75}
html[lang="en"] .intro-card,html[lang="en"] .summary-card{line-height:1.8}
html[lang="en"] .highlight-quote{line-height:1.7}
html[lang="en"] .lat-who,html[lang="en"] .lats-who,html[lang="en"] .lats-t,html[lang="en"] .tad-h,html[lang="en"] .hadith-label,html[lang="en"] .names-t,html[lang="en"] .name-badge,html[lang="en"] .hd,html[lang="en"] .deep-t small{font-family:var(--f-ui)}
html[lang="en"] .virtue-item h4,html[lang="en"] .deep-b h4,html[lang="en"] .deep-t b,html[lang="en"] .intro-card h3,html[lang="en"] .intro-card h4,html[lang="en"] .summary-card h3,html[lang="en"] .summary-card h4{font-family:var(--f-head);font-size:1.25rem}
html[lang="en"] .en-unit em{font-style:italic}
html[lang="en"] .refs,html[lang="en"] .src{direction:ltr;text-align:left}
html[lang="en"] .book .tag{direction:ltr;text-align:left;display:inline-block}

/* ── الأماكن القليلة المكتوبة بإحداثيات فعلية (يمين/يسار) ── */
html[dir="ltr"] .pl-bar i{right:auto;left:0;transform-origin:left center}
html[dir="ltr"] .pl-bar b{right:auto;left:0;margin-right:0;margin-left:-7px}
html[dir="ltr"] .totop{left:auto;right:18px}
html[dir="ltr"] .tf-seg i{right:auto;left:4px;animation-name:segSlideL}
@keyframes segSlideL{0%,40%{transform:translateX(0)}50%,90%{transform:translateX(118px)}100%{transform:translateX(0)}}
html[dir="ltr"] mark.hl::after{transform-origin:left center}
html[dir="ltr"] .highlight-quote{border-radius:0 var(--r-m) var(--r-m) 0}
html[dir="ltr"] .pick-s:hover{transform:translateX(3px)}
html[dir="ltr"] .pick-s:hover .pick-arrow{transform:translateX(3px)}
html[dir="ltr"] .src-card:hover .go{transform:translateX(3px)}
html[dir="ltr"] .tour-slide{transform:translateX(30px)}
html[dir="ltr"] .tour[data-dir="back"] .tour-slide{transform:translateX(-30px)}
html[dir="ltr"] .tour-slide.on{transform:none}
html[dir="ltr"] .drawer-nav a{transform:translateX(-10px)}
html[dir="ltr"] .foot-nav a.next{text-align:right}
html[dir="ltr"] .tf-card,html[dir="ltr"] .tf-src,html[dir="ltr"] .tf-src2,html[dir="ltr"] .tf-play .player{text-align:left}
html[dir="ltr"] .tf-pane{text-align:left}
html[dir="ltr"] .tf .tf-hand,html[dir="ltr"] .tf-pane .lats-hand{left:auto;right:18px}
/* الأسهم الاتجاهية تنعكس */
html[dir="ltr"] .tour-prev svg,html[dir="ltr"] .pick-arrow svg,html[dir="ltr"] .rs-go svg,html[dir="ltr"] .sheet .pick-s .pick-arrow svg{transform:scaleX(-1)}

/* ── v158: في الإنجليزية القائمة تنزلق من اليسار (بداية السطر) بتصميمٍ مضبوط على اليسار ── */
html[dir="ltr"] .hdr-menu svg{transform:scaleX(-1)}   /* أيقونة القائمة تنعكس لتناسب اليسار */
html[dir="ltr"] .drawer{border-radius:0 28px 28px 0;box-shadow:12px 0 40px rgba(62,21,39,.18)}
html[dir="ltr"] .drawer-nav a{transform:translateX(-10px)}
html[dir="ltr"] .drawer-nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--rose)}
html[dir="ltr"] .drawer-sec{padding-left:2px}

/* ── الدرج أضيق على الموبايل (v158) ── */
.drawer{width:min(68vw,300px)}
@media(max-width:360px){.drawer{width:74vw}}

/* ── زر اللغة (ع | EN) — أُزيل من الهيدر في v158، ويبقى التبديل من القائمة ── */
.lang-btn{position:relative;height:34px;padding:0 4px;border-radius:999px;display:inline-flex;align-items:center;gap:0;background:var(--paper-2);border:1px solid var(--line);font-family:'Inter','Tajawal',system-ui,sans-serif;font-weight:700;font-size:.76rem;color:var(--ink-3);cursor:pointer;isolation:isolate;transition:border-color var(--t),box-shadow var(--t),transform .18s var(--spring);-webkit-tap-highlight-color:transparent;align-self:center}
.lang-btn i{position:relative;z-index:1;font-style:normal;width:32px;height:26px;display:grid;place-items:center;border-radius:999px;transition:color .35s var(--ease);letter-spacing:.02em;line-height:1}
.lang-btn .lb-ar{font-family:'Tajawal','Cairo',system-ui,sans-serif;font-size:.95rem;padding-top:1px}
.lang-btn .lb-ind{position:absolute;top:3px;bottom:3px;left:3px;width:32px;border-radius:999px;background:linear-gradient(135deg,var(--rose),var(--rose-deep));box-shadow:0 3px 10px rgba(126,51,80,.32);transition:transform .45s var(--spring);z-index:0}
.lang-btn[data-l="ar"] .lb-ind{transform:translateX(32px)}
.lang-btn[data-l="en"] .lb-ind{transform:translateX(0)}
html[dir="ltr"] .lang-btn[data-l="ar"] .lb-ind{transform:translateX(0)}
html[dir="ltr"] .lang-btn[data-l="en"] .lb-ind{transform:translateX(32px)}
.lang-btn[data-l="ar"] .lb-ar,.lang-btn[data-l="en"] .lb-en{color:#fff}
.lang-btn:hover{border-color:var(--rose-soft);box-shadow:0 0 0 4px var(--rose-tint)}
.lang-btn:active{transform:scale(.94)}
.lang-btn:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
html[data-theme="dark"] .lang-btn{background:var(--paper)}
@media(max-width:360px){.lang-btn i{width:28px}.lang-btn[data-l="ar"] .lb-ind,html[dir="ltr"] .lang-btn[data-l="en"] .lb-ind{transform:translateX(28px)}.lang-btn .lb-ind{width:28px}}
/* دخول الزر مع الهيدر */
.lang-btn{animation:lbIn .7s .2s var(--spring) both}
@keyframes lbIn{from{opacity:0;transform:translateY(-6px) scale(.9)}to{opacity:1;transform:none}}

/* ── انتقال اللغة: ستارة مائلة تكتسح الشاشة، ورمز يتقلّب ع ⇄ EN ── */
.lang-veil{position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden}
.lang-veil[data-to="ar"]{transform:scaleX(-1)}
.lv-panel{position:absolute;top:-30%;bottom:-30%;left:-240vw;width:240vw;transform:translateX(0) skewX(-11deg);background:linear-gradient(100deg,var(--rose-deep) 0%,var(--rose) 38%,#9A446A 55%,var(--rose-deep) 100%);box-shadow:0 0 120px rgba(62,21,39,.55);display:grid;place-items:center;will-change:transform}
.lv-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(201,162,74,.28),transparent 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 46px);mix-blend-mode:screen}
.lv-panel::after{content:"";position:absolute;top:0;bottom:0;right:-2px;width:3px;background:linear-gradient(180deg,transparent,var(--gold-light) 30%,var(--gold-light) 70%,transparent);filter:drop-shadow(0 0 14px rgba(231,207,140,.9))}
.lang-veil.go .lv-panel{animation:lvSweep 1.5s cubic-bezier(.7,0,.22,1) forwards}
@keyframes lvSweep{0%{transform:translateX(0) skewX(-11deg)}38%{transform:translateX(160vw) skewX(-11deg)}60%{transform:translateX(200vw) skewX(-11deg)}100%{transform:translateX(440vw) skewX(-11deg)}}
.lv-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;color:#fff;text-align:center;opacity:0;z-index:2}
.lang-veil[data-to="ar"] .lv-core{transform:translate(-50%,-50%) scaleX(-1)}
.lang-veil.go .lv-core{animation:lvCore 1.5s var(--ease) forwards}
@keyframes lvCore{0%,24%{opacity:0}40%,62%{opacity:1}78%,100%{opacity:0}}
.lv-ring{position:absolute;width:150px;height:150px;border:1.5px solid rgba(231,207,140,.75);border-radius:30px;transform:rotate(45deg) scale(.4);opacity:0}
.lv-ring.r2{transform:rotate(0) scale(.4);border-color:rgba(255,255,255,.45)}
.lang-veil.go .lv-ring{animation:lvRing 1.1s .36s var(--ease) both}
.lang-veil.go .lv-ring.r2{animation:lvRing2 1.1s .42s var(--ease) both}
@keyframes lvRing{0%{transform:rotate(45deg) scale(.4);opacity:0}30%{opacity:1}100%{transform:rotate(135deg) scale(1.25);opacity:0}}
@keyframes lvRing2{0%{transform:rotate(0) scale(.4);opacity:0}30%{opacity:.9}100%{transform:rotate(90deg) scale(1.45);opacity:0}}
.lv-flip{position:relative;width:150px;height:110px;perspective:900px;transform-style:preserve-3d}
.lv-f{position:absolute;inset:0;display:grid;place-items:center;font-family:'Cormorant Garamond','Amiri',Georgia,serif;font-weight:700;font-size:4.4rem;line-height:1;backface-visibility:hidden;-webkit-backface-visibility:hidden;text-shadow:0 10px 30px rgba(0,0,0,.35);letter-spacing:.02em}
.lv-f.lv-a{font-family:'Amiri','Noto Naskh Arabic',serif;font-size:5rem}
.lang-veil[data-to="ar"] .lv-f.lv-a{font-family:'Cormorant Garamond',Georgia,serif;font-size:4.4rem}
.lang-veil[data-to="ar"] .lv-f.lv-b{font-family:'Amiri','Noto Naskh Arabic',serif;font-size:5rem}
.lv-f.lv-b{transform:rotateY(180deg)}
.lang-veil.go .lv-flip{animation:lvFlip .8s .52s cubic-bezier(.65,0,.25,1) both}
@keyframes lvFlip{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.lv-tag{margin-top:6px;white-space:nowrap;font-family:'Inter','Tajawal',system-ui,sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);opacity:0}
.lang-veil[data-to="ar"] .lv-tag{letter-spacing:.06em;text-transform:none;font-family:'Tajawal','Cairo',system-ui,sans-serif;font-size:.95rem;font-weight:700}
.lang-veil.go .lv-tag{animation:lvTag 1.1s .62s var(--ease) both}
@keyframes lvTag{0%{opacity:0;transform:translateY(10px);letter-spacing:.4em}40%{opacity:1;transform:none}100%{opacity:1}}
/* المحتوى يخرج في اتجاه القراءة القديم ويدخل من الاتجاه الجديد */
body.lang-swapping main,body.lang-swapping .hdr-in,body.lang-swapping .foot>.wrap,body.lang-swapping .rbar,body.lang-swapping .tabbar,body.lang-swapping .player{animation:lvOutR .55s cubic-bezier(.6,0,.4,1) forwards}
html[dir="ltr"] body.lang-swapping main,html[dir="ltr"] body.lang-swapping .hdr-in,html[dir="ltr"] body.lang-swapping .foot>.wrap,html[dir="ltr"] body.lang-swapping .rbar,html[dir="ltr"] body.lang-swapping .tabbar,html[dir="ltr"] body.lang-swapping .player{animation-name:lvOutL}
body.lang-entered main,body.lang-entered .hdr-in,body.lang-entered .foot>.wrap,body.lang-entered .rbar,body.lang-entered .tabbar,body.lang-entered .player{animation:lvInR .7s .08s var(--ease) both}
html[dir="ltr"] body.lang-entered main,html[dir="ltr"] body.lang-entered .hdr-in,html[dir="ltr"] body.lang-entered .foot>.wrap,html[dir="ltr"] body.lang-entered .rbar,html[dir="ltr"] body.lang-entered .tabbar,html[dir="ltr"] body.lang-entered .player{animation-name:lvInL}
@keyframes lvOutR{to{opacity:0;transform:translateX(-40px) scale(.985)}}
@keyframes lvOutL{to{opacity:0;transform:translateX(40px) scale(.985)}}
@keyframes lvInR{from{opacity:0;transform:translateX(-44px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lvInL{from{opacity:0;transform:translateX(44px) scale(.985)}to{opacity:1;transform:none}}
body.lang-swapping .hdr-in,body.lang-entered .hdr-in{filter:none}
@media(prefers-reduced-motion:reduce){.lang-veil{display:none}body.lang-swapping main,body.lang-entered main{animation:none}}

/* ── v164: القائمة الجانبية المُحكمة + زر الدعم المميّز + لوحة الدعم المُصمَّمة ── */
.drawer{padding:calc(env(safe-area-inset-top,0px) + 12px) 14px calc(env(safe-area-inset-bottom,0px) + 12px)}
.drawer-head{margin-bottom:4px}
.drawer-brand{font-size:1.08rem;gap:8px}
.drawer-brand svg{width:26px;height:26px}
.drawer-nav{gap:1px;margin:4px 0 6px}
.drawer-nav a{padding:8px 10px;gap:10px;font-size:.95rem;border-radius:12px}
.drawer-nav a svg{width:19px;height:19px}
.drawer-sec{font-size:.7rem;margin:8px 6px 4px}
html[lang="en"] .drawer-sec{font-size:.62rem}
.drawer .seg{padding:2px;font-size:.84rem}
.drawer .seg button{padding:5px 10px}
.drawer .seg-ind{top:2px;bottom:2px;left:2px}
.drawer .fs-row{padding:3px}
.drawer .fs-row button{padding:5px;font-size:.9rem}
.drawer .fs-row span{font-size:.8rem}
.drawer-cta{gap:8px;padding-top:12px}
/* زر الدعم — مميّز بإطار ذهبي ولمعة خفيفة */
.support-btn{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:12px 14px;border-radius:18px;text-align:start;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--rose) 0%,var(--rose-deep) 100%);color:#fff;font-size:1rem;
  box-shadow:0 0 0 1.5px var(--gold),0 10px 24px rgba(126,51,80,.32);transition:transform .2s var(--spring),box-shadow var(--t)}
.support-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);transform:translateX(-120%);animation:sbShine 4.5s ease-in-out infinite;z-index:-1}
html[dir="ltr"] .support-btn::before{transform:translateX(120%)}
@keyframes sbShine{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
.support-btn .sb-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(231,207,140,.5)}
.support-btn .sb-ic svg{width:21px;height:21px;color:var(--gold-light);animation:beat 2.2s ease-in-out infinite}
.support-btn .sb-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.support-btn .sb-t b{font-size:1.02rem;font-weight:700;line-height:1.3}
.support-btn .sb-t small{font-size:.72rem;font-weight:500;color:var(--gold-light);line-height:1.4;opacity:.95}
.support-btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1.5px var(--gold),0 14px 30px rgba(126,51,80,.4)}
/* الرابطان الصغيران جنبًا إلى جنب */
.drawer-links{display:flex;gap:6px}
.drawer-link{flex:1;padding:7px 8px;font-size:.78rem;font-weight:500;gap:5px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line);white-space:nowrap}
.drawer-link svg{width:14px;height:14px;flex:none}
@media(max-height:620px){
  .drawer{padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
  .drawer-nav a{padding:6px 10px;font-size:.9rem}
  .drawer-sec{margin:5px 6px 3px}
  .drawer .seg button{padding:4px 10px}
  .drawer .fs-row button{padding:4px}
  .drawer-cta{padding-top:8px;gap:6px}
  .support-btn{padding:9px 12px}
  .support-btn .sb-ic{width:34px;height:34px}
  .support-btn .sb-t b{font-size:.95rem}
  .drawer-link{padding:6px 8px;font-size:.75rem}
}
/* لوحة الدعم */
.sup-body{padding:4px 2px 6px}
.sup-card{position:relative;margin:4px 0 14px;padding:18px 16px 12px;border-radius:20px;background:linear-gradient(180deg,var(--gold-tint),var(--paper));border:1px solid var(--rose-tint-2);box-shadow:inset 0 0 0 1px rgba(201,162,74,.25)}
.sup-card::before,.sup-card::after{content:"❖";position:absolute;top:8px;font-size:.7rem;color:var(--gold);opacity:.8}
.sup-card::before{inset-inline-start:12px}.sup-card::after{inset-inline-end:12px}
.sup-card .sup-verse{font-size:1.5rem;line-height:1.95;margin:0 0 10px;color:var(--rose-ink)}
.sup-ref{display:inline-flex;align-items:center;gap:8px;margin:0 auto;padding:5px 14px;border-radius:999px;background:var(--paper);border:1px solid var(--rose-tint-2);font-family:var(--f-ui);font-size:.8rem;font-weight:700;color:var(--rose)}
.sup-ref .sup-ref-s{color:var(--rose-ink)}
.sup-ref i{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.sup-text{font-size:.98rem;margin-bottom:14px}
.sup-uses{margin:0 auto 16px;max-width:420px}
.sup-uses-h{display:block;font-family:var(--f-ui);font-size:.74rem;font-weight:700;color:var(--ink-3);letter-spacing:.03em;margin-bottom:8px}
.sup-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sup-chips span{font-family:var(--f-ui);font-size:.8rem;font-weight:700;color:var(--rose);background:var(--rose-tint);border:1px solid var(--rose-tint-2);border-radius:999px;padding:5px 12px}
.sup-btn{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1.5px var(--gold),0 12px 28px rgba(126,51,80,.34)}
.sup-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);animation:sbShine 4.5s ease-in-out 1s infinite;z-index:-1}
html[dir="ltr"] .sup-btn::before{transform:translateX(120%)}
html[data-theme="dark"] .sup-card{background:linear-gradient(180deg,var(--gold-tint),var(--paper-2))}
html[data-theme="dark"] .sup-ref{background:var(--paper-2)}
html[lang="en"] .support-btn .sb-t small{font-size:.68rem}
html[lang="en"] .drawer-link{font-size:.74rem}
@media(prefers-reduced-motion:reduce){.support-btn::before,.sup-btn::before,.support-btn .sb-ic svg{animation:none}}

/* ── v165: لوحة الدعم أكثر إحكامًا — تظهر كاملة على الموبايل حتى زر الدعم ── */
.sheet.sup{padding:10px 18px calc(14px + env(safe-area-inset-bottom,0px))}
.sheet.sup .sheet-h{padding:8px 0 2px}
.sheet.sup .sup-heart{width:42px;height:42px;margin:0 auto 6px}
.sheet.sup .sheet-h h2{font-size:1.3rem}
html[lang="en"] .sheet.sup .sheet-h h2{font-size:1.5rem}
.sheet.sup .sup-body{padding:2px 0 0}
.sheet.sup .sup-card{margin:2px 0 10px;padding:12px 14px 10px;border-radius:16px}
.sheet.sup .sup-card .sup-verse{font-size:1.28rem;line-height:1.8;margin-bottom:8px}
.sheet.sup .sup-ref{padding:4px 12px;font-size:.74rem}
.sheet.sup .sup-text{font-size:.9rem;line-height:1.75;margin-bottom:10px}
.sheet.sup .sup-uses{margin-bottom:20px}
.sheet.sup .sup-uses-h{font-size:.7rem;margin-bottom:6px}
.sheet.sup .sup-chips{gap:5px}
.sheet.sup .sup-chips span{font-size:.74rem;padding:4px 10px}
.sheet.sup .sup-btn{padding:12px;font-size:1rem;border-radius:16px}
.sheet.sup .sup-btn svg{width:20px;height:20px}
.sheet.sup .sup-alt{margin-top:14px;font-size:.8rem}
.sheet.sup .sup-alt button{padding:6px 10px}
@media(max-height:700px){
  .sheet.sup .sup-heart{width:34px;height:34px;margin-bottom:4px}
  .sheet.sup .sup-card .sup-verse{font-size:1.18rem;line-height:1.7}
  .sheet.sup .sup-text{font-size:.86rem;line-height:1.65;margin-bottom:8px}
  .sheet.sup .sup-uses{margin-bottom:16px}
}

/* ───────── v168: نُطق الآيات بالحروف اللاتينية — سطر خفيف تحت الآية في الوضع الإنجليزي فقط ───────── */
.ayah-tr,.tr-credit{display:none}
html[lang="en"] .ayah-tr{display:block;position:relative;margin:9px 0 0;padding:0 0 0 14px;font-family:'Lora',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:.95rem;line-height:1.72;color:var(--ink-2);direction:ltr;text-align:left;unicode-bidi:isolate;letter-spacing:.002em;animation:trIn .55s var(--ease) both}
html[lang="en"] .ayah-tr::before{content:"";position:absolute;left:0;top:.42em;bottom:.42em;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--gold),var(--gold-tint));opacity:.85}
html[lang="en"] .ayah.open .ayah-tr{color:var(--ink)}
html[lang="en"] .ayah-head{row-gap:0}
html[lang="en"] .tr-credit{display:flex;align-items:center;gap:10px;margin:14px 2px 0;font-family:var(--f-ui);font-size:.74rem;font-weight:500;letter-spacing:.04em;color:var(--ink-3);direction:ltr;text-align:left}
html[lang="en"] .tr-credit::before{content:"";width:18px;height:1px;background:var(--gold);opacity:.7;flex:none}
@keyframes trIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){html[lang="en"] .ayah-tr{animation:none}}
@media(max-width:430px){html[lang="en"] .ayah-tr{font-size:.92rem;line-height:1.68;padding-left:12px}}
@media print{html[lang="en"] .ayah-tr{color:#000}}

/* ───────── v169: نُطق المقاطع القرآنية داخل الصفحة (إنجليزي فقط) ───────── */
.qtr{display:none}
html[lang="en"] .qtr-b{display:block;margin:-2px 0 8px;font-family:'Lora',Georgia,serif;font-style:italic;font-weight:400;font-size:.9rem;line-height:1.6;color:var(--ink-3);direction:ltr;text-align:left;unicode-bidi:isolate}
html[lang="en"] .basmala + .qtr-b,html[lang="en"] .dua .q + .qtr-b{text-align:center;margin:-2px 0 10px;font-size:.95rem}
html[lang="en"] .qtr-i{display:inline;font-family:'Lora',Georgia,serif;font-style:italic;font-weight:400;font-size:.88em;color:var(--ink-3);direction:ltr;unicode-bidi:isolate;margin-left:.25em;white-space:normal}
html[lang="en"] .tseg-w{margin-bottom:4px}

html[lang="en"] .foot-verse + .qtr-b,html[lang="en"] .sup-verse + .qtr-b{text-align:center;margin:-4px 0 12px;font-size:.92rem}

/* v174 — أسماء السورة: سطر نص؛ العنوان بلون النص والأسماء باللون المميز */
.intro-card .names-row,html[data-theme="dark"] .intro-card .names-row{display:block;margin:0 0 .9em;padding:0;border:0;background:none;line-height:inherit}
.intro-card .names-t{display:inline;margin:0;font:inherit;font-weight:700;color:inherit}
.intro-card .names-t::before{content:none;display:none}
.intro-card .names-t::after{content:": "}
.intro-card .names-row .name-badge,html[data-theme="dark"] .intro-card .names-row .name-badge{display:inline-block;margin:3px 0 3px 4px;padding:1px 10px;border:0;border-radius:8px;background:var(--rose-tint);box-shadow:none;font:inherit;font-weight:700;color:var(--rose);line-height:1.9}
html[data-theme="dark"] .intro-card .names-row .name-badge{background:rgba(255,255,255,.07)}
html[lang="en"] .intro-card .names-row .name-badge{margin:3px 4px 3px 0}
.vfadl{margin:0 0 14px}
.vf-h{margin:0 0 8px;font-weight:700;color:var(--rose)}
.vfadl .virtue-item,html[data-theme="dark"] .vfadl .virtue-item{display:block;margin:0 0 8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:transparent;box-shadow:none;transform:none!important}
.vfadl .virtue-item:last-child{margin-bottom:0}
.vfadl .virtue-item .v-icon{display:none}
.vfadl .virtue-item h4,html[lang="en"] .vfadl .virtue-item h4{margin:0 0 4px;font-family:var(--f-ui);font-size:.95rem;font-weight:700;color:var(--rose)}
.vfadl .virtue-item p{margin:0;font-size:.97em;color:inherit}