/* =====================================================================
   روائع قرّاء القرآن الكريم — نظام الهوية الموحّد (theme.css) — v48
   ---------------------------------------------------------------------
   المرجع: صفحة الغلاف — أخضر المصحف العميق + ذهب التذهيب + نجمة ثمانية.
   يُحمَّل بعد styles.css في الموسوعة والبث المباشر، ويُحمَّل وحده في
   الفوائد القرآنية وصفحة المصادر. لا يغيّر أي معرّف أو وظيفة، بل يوحّد:
   الألوان · الخطوط · الأزرار · البطاقات · العناوين · المسافات · الحركة.
   ===================================================================== */

/* ---------- الخطوط (المسارات نفسها المعتمدة في styles.css) ---------- */
@font-face{font-family:Amiri;font-weight:400;font-display:swap;src:url(assets/fonts/amiri-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Amiri;font-weight:700;font-display:swap;src:url(assets/fonts/amiri-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Amiri;font-weight:400;font-display:swap;src:url(assets/fonts/amiri-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Amiri;font-weight:700;font-display:swap;src:url(assets/fonts/amiri-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Plex;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Plex;font-weight:700;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:Plex;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Plex;font-weight:500;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Plex;font-weight:700;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}

/* ---------- الرموز (Design tokens) ---------- */
:root{
  /* ألوان الغلاف */
  --cover-green:#075c38; --cover-deep:#053a26; --cover-ink:#04241a;
  --night:#0e2c21; --brand:#18583f; --brand-2:#236b4f;
  --gold:#b8913a; --gold-soft:#e6cf92; --gold-light:#f4e6bd; --gold-ink:#8a6a22; --amber:#ffc75a;
  /* الورق والسطوح */
  --paper:#faf6ec; --paper-2:#f3ecdb; --surface:#ffffff; --ink:#18261f; --muted:#5b6a62;
  --line:#e2dccd; --line-strong:#cfc6ae; --tint:#eef3ec;
  /* الخطوط */
  --display:Amiri,"Traditional Arabic","Times New Roman",serif;
  --ui:Plex,"Segoe UI",Tahoma,system-ui,sans-serif;
  /* المقاسات */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px; --wrap:1240px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  /* الظلال والحركة */
  --sh-1:0 1px 2px rgb(14 44 33 / .05),0 6px 18px -10px rgb(14 44 33 / .18);
  --sh-2:0 2px 4px rgb(14 44 33 / .06),0 22px 44px -22px rgb(14 44 33 / .38);
  --sh-gold:0 0 0 1px rgb(184 145 58 / .35),0 14px 34px -18px rgb(184 145 58 / .55);
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.18s; --t:.32s;
  /* خلفية الشريط الأخضر المستوحاة من الغلاف */
  --band:
    radial-gradient(120% 85% at 50% -20%,rgb(24 128 80 / .55),transparent 62%),
    linear-gradient(180deg,#0b4a34 0%,#075c38 100%);
  /* نجمة ثمانية ذهبية دقيقة — تكرار هادئ */
  --star-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e6cf92' stroke-width='.8'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='4'/%3E%3Cpath d='M0 32h8M56 32h8M32 0v8M32 56v8'/%3E%3C/g%3E%3C/svg%3E");
  --orn-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cg fill='none' stroke='%23b8913a' stroke-width='1'%3E%3Cpath d='M20 1l5 5-5 5-5-5z'/%3E%3Ccircle cx='8' cy='6' r='1.4' fill='%23b8913a'/%3E%3Ccircle cx='32' cy='6' r='1.4' fill='%23b8913a'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:light;
}
/* الوضع الليلي: الموسوعة (data-theme) والفوائد (body.dark) بلوحة واحدة */
[data-theme=dark],body.dark{
  --night:#0b2319; --paper:#10261c; --paper-2:#132d22; --surface:#173628; --ink:#eef4ef; --muted:#aac0b4;
  --line:#28493a; --line-strong:#356150; --tint:#1d3f30; --brand:#6cc79a; --brand-2:#86d6ad;
  --gold:#dfbf69; --gold-soft:#ecd79c; --gold-ink:#e6c77a;
  --sh-1:0 1px 2px rgb(0 0 0 / .25),0 8px 22px -12px rgb(0 0 0 / .55);
  --sh-2:0 2px 6px rgb(0 0 0 / .3),0 24px 48px -22px rgb(0 0 0 / .7);
  color-scheme:dark;
}

/* نص داكن على الأخضر الفاتح في الوضع الليلي لوضوح أعلى */
:is([data-theme=dark],body.dark) :is(.btn.primary,.btn.active,.seg button.active,.live-tab.is-on,.alpha-btn.active,.tabbtn.on,.cat.on,.quiz-play){color:#0b2319}
:is([data-theme=dark],body.dark) :is(header .btn.primary,.hero .btn.primary,.live-player .btn.primary,.pctrl .btn.primary){color:#14372a}

/* ---------- أساسيات مشتركة ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{text-rendering:optimizeLegibility}
::selection{background:rgb(230 207 146 / .55);color:#14372a}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
@supports (scrollbar-color:red blue){
  *{scrollbar-color:color-mix(in srgb,var(--gold) 55%,transparent) transparent}
}

/* الانتقال بين صفحات الموقع كأنها صفحة واحدة (متصفحات تدعم View Transitions) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:qr-page-out .28s var(--ease) both}
::view-transition-new(root){animation:qr-page-in .42s var(--ease) both}
@keyframes qr-page-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes qr-page-in{from{opacity:0;transform:translateY(8px)}}

/* ---------- الشريط الأخضر (قطعة من الغلاف تتكرر في رأس كل صفحة) ---------- */
.qr-band{position:relative;isolation:isolate;overflow:hidden;background:var(--band);color:#fff}
.qr-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--star-tile);background-size:64px 64px;opacity:.07;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgb(0 0 0 / .6) 55%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgb(0 0 0 / .6) 55%,transparent 100%)}
.qr-band::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(230 207 146 / .55) 22%,rgb(230 207 146 / .55) 78%,transparent)}

/* الزخرفة الصغيرة تحت العناوين: معين ذهبي بين نقطتين */
.qr-orn{display:block;width:40px;height:12px;margin:var(--s-3) auto 0;background:var(--orn-diamond) center/contain no-repeat;opacity:.9}
.qr-band .qr-orn{filter:brightness(1.5) saturate(.9)}

/* ركيزة (kicker) صغيرة فوق العناوين كما في الغلاف */
.qr-kicker{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--gold-soft);font:500 13px/1.4 var(--ui);letter-spacing:.02em}
.qr-kicker::before,.qr-kicker::after{content:"";width:18px;height:1px;background:currentColor;opacity:.55}

/* ---------- الأزرار ---------- */
.qr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 20px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);
  font:600 14.5px/1.2 var(--ui);text-decoration:none;cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease),box-shadow var(--t-fast)}
.qr-btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.qr-btn-gold{border:1px solid #f1dfa6;background:linear-gradient(115deg,#f3e2ae,#e6cf92 50%,#d9b86c);color:#14372a;box-shadow:0 8px 22px -10px rgb(0 0 0 / .5)}
.qr-btn-gold:hover{background:linear-gradient(115deg,#f8ebc2,#ecd8a0 50%,#e2c47c);color:#0f2e21}
.qr-btn-ghost{background:rgb(5 39 30 / .35);border-color:rgb(232 207 142 / .45);color:#f3ecd6;backdrop-filter:blur(4px)}
.qr-btn-ghost:hover{background:rgb(5 39 30 / .55);color:#fff}

/* ---------- شريط التنقل الخفيف (للصفحات الفرعية) ---------- */
.qr-topbar{position:sticky;top:0;z-index:500;display:flex;align-items:center;gap:var(--s-3);
  padding:8px max(14px,calc((100vw - var(--wrap))/2));
  background:color-mix(in srgb,var(--night) 94%,transparent);backdrop-filter:blur(12px);color:#fff;
  box-shadow:inset 0 -1px 0 rgb(230 207 146 / .22)}
.qr-topbar .qr-brand{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font:700 19px/1 var(--display);white-space:nowrap}
.qr-topbar .qr-brand img{width:28px;height:28px}
.qr-links{display:flex;gap:2px;margin-inline-start:auto;overflow-x:auto;scrollbar-width:none}
.qr-links::-webkit-scrollbar{display:none}
.qr-links a{color:#d6e6dd;text-decoration:none;padding:7px 12px;border-radius:var(--r-pill);font:500 14px/1.2 var(--ui);white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
.qr-links a:hover{background:#ffffff18;color:#fff}
.qr-links a[aria-current=page]{color:var(--gold-soft);background:rgb(230 207 146 / .12)}

/* ---------- روابط التذييل المشتركة ---------- */
.qr-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;margin:0 0 var(--s-3)!important}
.qr-footer-links a{color:var(--brand);text-decoration:none;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);transition:background var(--t-fast)}
.qr-footer-links a:hover{background:var(--tint)}
.qr-footer-links a+a::before{content:"";display:inline-block;width:4px;height:4px;margin-inline-end:14px;margin-inline-start:-8px;vertical-align:middle;transform:rotate(45deg);background:var(--gold);opacity:.7}

/* ---------- ظهور هادئ عند التمرير (تحسين تدريجي، بلا JavaScript) ---------- */
@supports (animation-timeline:view()){
  .qr-reveal{animation:qr-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 32%}
}
@keyframes qr-reveal{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}

/* =====================================================================
   قاعدة عامة لصفحات بلا تنسيق خاص (مثل references.html)
   أضف class="qr-base" إلى <body>. كل القواعد هنا بأولوية منخفضة (:where)
   فلا تطغى على أي تنسيق موجود في الصفحة، بل تكمل ما ينقصها فقط.
   ===================================================================== */
:where(body.qr-base){margin:0;background:var(--paper);color:var(--ink);font:400 15.5px/1.85 var(--ui);-webkit-font-smoothing:antialiased}
:where(body.qr-base) :where(h1,h2,h3){font-family:var(--display);font-weight:700;line-height:1.3;color:var(--brand)}
:where(body.qr-base) :where(h1){font-size:clamp(28px,4.6vw,46px)}
:where(body.qr-base) :where(h2){font-size:clamp(23px,3vw,32px);margin:var(--s-6) 0 var(--s-3)}
:where(body.qr-base) :where(h3){font-size:clamp(18px,2.2vw,22px);margin:var(--s-4) 0 var(--s-2)}
:where(body.qr-base) :where(a){color:var(--brand);text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--gold) 70%,transparent)}
:where(body.qr-base) :where(a:hover){color:var(--brand-2)}
:where(body.qr-base) > :where(header:first-of-type){position:relative;isolation:isolate;overflow:hidden;background:var(--band);color:#fff;text-align:center;padding:var(--s-6) var(--s-4) var(--s-5)}
:where(body.qr-base) > :where(header:first-of-type) :where(h1){color:var(--gold-soft);margin:0}
:where(body.qr-base) > :where(header:first-of-type) :where(p){color:#dcebe2;max-width:62ch;margin:var(--s-2) auto 0}
:where(body.qr-base) > :where(header:first-of-type) :where(a){color:var(--gold-soft)}
:where(body.qr-base) > :where(main){max-width:var(--wrap);margin:0 auto;padding:var(--s-5) 18px var(--s-7)}
:where(body.qr-base) :where(main p,main li){max-width:75ch}
:where(body.qr-base) :where(main section,main article){background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s-5);margin:0 0 var(--s-4);box-shadow:var(--sh-1)}
:where(body.qr-base) :where(main section section,main section article,main article article){background:transparent;border:0;box-shadow:none;padding:0}
:where(body.qr-base) :where(main ul,main ol){padding-inline-start:22px}
:where(body.qr-base) :where(main li){margin-bottom:6px}
:where(body.qr-base) :where(main li::marker){color:var(--gold)}
:where(body.qr-base) :where(table){width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1)}
:where(body.qr-base) :where(th,td){padding:10px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
:where(body.qr-base) :where(th){background:var(--tint);color:var(--brand);font-weight:700}
:where(body.qr-base) :where(button,.btn){border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-pill);padding:8px 18px;min-height:40px;font:600 14px/1.2 var(--ui);cursor:pointer}
:where(body.qr-base) :where(input,select,textarea){font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;min-height:42px;max-width:100%}
:where(body.qr-base) > :where(footer:last-of-type){max-width:var(--wrap);margin:0 auto;padding:var(--s-5) 18px var(--s-6);border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:13px}
:where(body.qr-base) :where(img,video,iframe){max-width:100%;height:auto}
@media(max-width:640px){
  :where(body.qr-base) :where(main section,main article){padding:var(--s-4)}
  :where(body.qr-base) :where(table){display:block;overflow-x:auto}
}

/* ---------- تقليل الحركة ---------- */
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .qr-reveal{animation:none!important}
  .qr-btn{transition:none}
}