/* ==========================================================
   موسوعة الحدادية — الستايل الكامل
   ==========================================================
   تَصميم رَصين عَصري يَجمع بين الكلاسيكيّة الإسلاميّة والحَداثة
   لوحة الألوان: أخضر زمردي عميق + أخضر بحري هادئ + أسطح خضراء رمادية + ذهبي نَحاسي
   ========================================================== */

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah/thmanyahsans-Light.otf') format('opentype');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah/thmanyahsans-Regular.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah/thmanyahsans-Medium.otf') format('opentype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah/thmanyahsans-Bold.otf') format('opentype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Thmanyah Sans';
    src: url('../fonts/thmanyah/thmanyahsans-Black.otf') format('opentype');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

:root {
    /* الألوان الأساسيّة */
    /* الأخضر مسحوبٌ من غلاف الموسوعة: عمقُ الخلفية ثم درجاتها صعودًا. */
    --emerald: #0a3a26;
    --emerald-2: #0f4d33;
    --emerald-3: #17694a;
    --emerald-deep: #052c1c;
    /* والذهب من الغلاف نفسه: ظِلُّه ومتنُه ولمعتُه. */
    --gold: #d5a242;
    --gold-light: #f2d489;
    --gold-dark: #8e5714;
    --gold-sheen: #fcedaf;
    /* التدرّج المعدني كما ينحدر الضوء على صفحات الكتاب في الشعار. */
    --gold-metal: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 34%, var(--gold-sheen) 52%, var(--gold) 68%, var(--gold-dark) 100%);
    --teal: #17707c;
    --teal-deep: #10545e;
    --teal-light: #6fa8b4;
    --surface-page: #e9f1ec;
    --surface-muted: #dcebe2;
    --surface-strong: #cee0d6;
    --surface-raised: #f6faf8;
    --surface-tint: #bdd8ca;
    --surface-tint-strong: #abccbc;
    --bg: var(--surface-page);
    --bg-2: var(--surface-muted);
    --bg-3: var(--surface-strong);
    --white: #ffffff;
    --red: #b3261e;
    --red-deep: #8a1c17;
    --red-soft: #fdecec;
    --royal: var(--teal);
    --royal-deep: var(--teal-deep);
    --note-bg: #d6e6dc;
    --note-bg-2: #c5ddd0;
    --note-border: #afcbbc;
    --green: #1e6f36;
    --text: #16291f;
    --text-soft: #556e60;
    --text-muted: #7f948a;
    --border: #c2d5ca;
    --border-soft: #d9e6de;

    /* الظلال */
    --shadow-xs: 0 1px 2px rgba(4, 26, 16, .06);
    --shadow-sm: 0 2px 8px rgba(4, 26, 16, .08);
    --shadow-md: 0 8px 24px rgba(4, 26, 16, .12);
    --shadow-lg: 0 20px 50px rgba(4, 26, 16, .18);
    --shadow-xl: 0 30px 80px rgba(4, 26, 16, .25);
    --shadow-gold: 0 12px 30px rgba(213, 162, 66, .35);
    --shadow-red: 0 12px 30px rgba(179, 38, 30, .30);
    --shadow-royal: 0 12px 30px rgba(23, 112, 124, .26);
    --shadow-teal: 0 12px 30px rgba(23, 112, 124, .20);

    /* الأبعاد */
    --radius-sm: 4px;
    --radius: 7px;
    --radius-lg: 11px;
    --radius-xl: 16px;
    --maxw: 1280px;

    /* الحركات */
    --t-fast: .2s cubic-bezier(.4, 0, .2, 1);
    --t: .35s cubic-bezier(.4, 0, .2, 1);
    --t-slow: .6s cubic-bezier(.4, 0, .2, 1);
    --t-bounce: .5s cubic-bezier(.34, 1.56, .64, 1);
}

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Thmanyah Sans', 'Tajawal', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.85;
    color: var(--text);
    background: var(--bg);
    direction: rtl;
    text-align: right;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

main { flex: 1; }

.skip-link {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 12px;
    z-index: 1000;
    padding: 9px 14px;
    border-radius: 4px;
    background: var(--emerald);
    color: var(--white);
    font-weight: 700;
    transform: translateY(-160%);
}
.skip-link:focus {
    color: var(--white);
    transform: translateY(0);
}

a {
    color: var(--emerald);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover { color: var(--gold-dark); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.55;
    color: var(--emerald);
    margin-bottom: .6em;
}
h1 { font-size: clamp(1.62rem, 3vw, 2rem); font-weight: 900; }
h2 { font-size: clamp(1.52rem, 2.5vw, 1.74rem); font-weight: 800; }
h3 { font-size: clamp(1.36rem, 2.2vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.28rem; font-weight: 700; }

p { margin-bottom: 1.1em; }

/* لا خطَّ مائلًا في الموقع كلِّه: العربية لا تُمال، والميل يُضعف قراءتها.
   وهذه هي العناصر التي يميلها المتصفِّح من تلقاء نفسه. */
em, i, cite, dfn, var, address, q, blockquote, figcaption { font-style: normal; }

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}
/* على الشاشات الضيّقة تُشدُّ الهوامش الجانبيّة ليتّسع النصُّ لا الفراغ. */
@media (max-width: 640px) {
    .container { padding: 0 14px; }
}
@media (max-width: 400px) {
    .container { padding: 0 10px; }
}

/* ==========================================================
   الشريط العلوي
   ========================================================== */
.site-header {
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-soft);
    transition: all var(--t);
}
.site-header::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}
.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    max-width: var(--maxw);
    margin: 0 auto;
    gap: 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    flex-shrink: 0;
    transition: transform var(--t);
}
.brand:hover { transform: translateY(-1px); }
.brand-icon {
    width: 52px;
    height: 52px;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    box-shadow: 0 8px 20px rgba(10, 58, 38, .24);
    position: relative;
    overflow: hidden;
}
.brand-icon::before {
    display: none;
}
.brand-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
.brand-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.2; }
.brand-name { font-weight: 900; color: var(--emerald); font-size: 18px; }
.brand-tag { font-size: .9rem; color: var(--text-soft); }

.main-nav { display: flex; align-items: center; gap: 2px; }
.main-nav a {
    color: var(--emerald);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: 5px;
    transition: all var(--t);
    position: relative;
    font-size: 15.5px;
}
.main-nav a::before {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 50%;
    transform: translateX(50%);
    width: 0;
    height: 3px;
    background: var(--gold);
    border-radius: 3px;
    transition: width var(--t);
}
.main-nav a:hover { background: var(--bg-2); color: var(--emerald); }
.main-nav a:hover::before { width: 24px; }
/* الوسمُ النشط يأخذ لون قسمه نفسَه، فيُرى في القائمة ما يُرى في رأس
   المادّة. والهيئةُ واحدة في الجميع: داكنٌ بنصٍّ ذهبيّ، ولا يتغيّر
   إلا اللون. وما لا لون له يبقى على الزمرّديّ. */
.main-nav a.active {
    --nav-sec: var(--emerald-2);
    background: linear-gradient(135deg, color-mix(in srgb, var(--nav-sec) 82%, #000), var(--nav-sec));
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.main-nav a.sec-basair.active   { --nav-sec: #650046; }
.main-nav a.sec-about.active    { --nav-sec: #013238; }
.main-nav a.sec-shubha.active   { --nav-sec: #000053; }
.main-nav a.sec-articles.active { --nav-sec: #510360; }
.main-nav a.sec-posts.active    { --nav-sec: #0a5a58; }
.main-nav a.sec-books.active    { --nav-sec: #572301; }
.main-nav a.sec-videos.active   { --nav-sec: #b40111; }
.main-nav a.sec-figures.active  { --nav-sec: #0a0a0f; }
.main-nav a.active::before { width: 0; }

.menu-toggle {
    display: none;
    background: var(--emerald);
    color: var(--gold-light);
    border: 0;
    width: 46px;
    height: 46px;
    border-radius: 6px;
    font-size: 22px;
    cursor: pointer;
    transition: transform var(--t);
}
.menu-toggle:hover { transform: scale(1.05); }

@media (max-width: 1080px) {
    .menu-toggle { display: flex; align-items: center; justify-content: center; }
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        box-shadow: var(--shadow-lg);
        gap: 4px;
        max-height: 80vh;
        overflow-y: auto;
    }
    .main-nav.open { display: flex; animation: slideDown .35s var(--t); }
    .main-nav a { padding: 14px 16px; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================
   البطل (Hero) — قسم البطل المُتحرّك
   ========================================================== */
.hero {
    background:
        radial-gradient(ellipse 1200px 600px at 20% 0%, rgba(213, 162, 66, .12), transparent 60%),
        radial-gradient(ellipse 1000px 500px at 100% 100%, rgba(179, 38, 30, .10), transparent 60%),
        linear-gradient(135deg, var(--emerald-deep) 0%, var(--emerald) 50%, var(--emerald-2) 100%);
    color: var(--white);
    padding: 110px 24px 100px;
    position: relative;
    overflow: hidden;
    text-align: center;
    isolation: isolate;
}

/* نَمط هندسي متحرّك في الخلفيّة */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(213,162,66,.08) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 60px 60px, 30px 30px;
    background-position: 0 0, 30px 30px;
    pointer-events: none;
    animation: bgShift 60s linear infinite;
    z-index: -1;
}
@keyframes bgShift {
    from { background-position: 0 0, 30px 30px; }
    to   { background-position: 600px 0, 630px 30px; }
}

/* أَشعّة من الذهب */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent 0, transparent 100px, rgba(213,162,66,.025) 100px, rgba(213,162,66,.025) 101px);
    pointer-events: none;
    z-index: -1;
}

.hero-inner { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; }

.hero-logo {
    display: block;
    width: clamp(150px, 15vw, 216px);
    aspect-ratio: 1.483;
    object-fit: contain;
    margin: 0 auto 16px;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .2));
    animation: fadeInUp .75s var(--t) both;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(179, 38, 30, .9), rgba(122, 24, 18, .9));
    color: var(--white);
    padding: 9px 22px;
    border-radius: 15px;
    font-size: 16.3px;
    font-weight: 700;
    margin-bottom: 28px;
    box-shadow: var(--shadow-red);
    animation: fadeInUp .9s var(--t) .18s both;
    border: 1px solid rgba(255,255,255,.15);
}
.hero-badge i { color: var(--gold); }

.hero h1 {
    color: var(--white);
    font-weight: 900;
    margin-bottom: 20px;
    font-size: clamp(1.66rem, 3.5vw, 2.43rem);
    line-height: 1.25;
    animation: fadeInUp .9s var(--t) .08s both;
}
.hero h1 .accent {
    color: var(--gold);
    background: linear-gradient(180deg, var(--gold-light), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
}
.hero h1 .accent::after {
    content: '';
    position: absolute;
    inset: auto 0 -8px 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    border-radius: 2px;
}

.hero p.lead {
    font-size: clamp(1.05rem, 2.1vw, 1.3rem);
    color: rgba(255,255,255,.92);
    max-width: 760px;
    margin: 0 auto 38px;
    line-height: 1.95;
    animation: fadeInUp 1s var(--t) .25s both;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    animation: fadeInUp 1.1s var(--t) .4s both;
}

@media (max-width: 640px) {
    .hero { padding: 72px 18px 64px; }
    .hero-logo {
        width: 146px;
        margin-bottom: 12px;
    }
    .hero h1 { margin-bottom: 17px; }
    .hero-badge {
        gap: 8px;
        padding: 8px 16px;
        margin-bottom: 22px;
        font-size: .96rem;
    }
}

/* ==========================================================
   رأس الصفحات الداخليّة — خفيف ومباشر
   ========================================================== */
.page-intro {
    --page-accent: var(--teal);
    position: relative;
    overflow: hidden;
    padding: 16px 0 15px;
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(226,239,232,.94));
    border-bottom: 1px solid var(--border-soft);
}
.page-intro::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--page-accent) 10%, transparent), transparent 34%);
    pointer-events: none;
}
.page-intro .container {
    position: relative;
    z-index: 1;
}
.page-intro-copy {
    max-width: 980px;
    padding-inline-start: 14px;
    border-inline-start: 3px solid var(--page-accent);
}

/* ترويسةُ الفهرس تأخذ لون قسمها كما تأخذه المادّةُ في رأسها والوسمُ
   في القائمة، فيطّرد اللون على القسم كلِّه. */
.page-intro--dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 40px 42px;
    border-bottom: 0;
    /* أربعُ طبقات: نسيجٌ مائل خفيف، ثم ضوءٌ منسكب من أعلى اليمين، ثم
       وهجٌ ذهبيّ، ثم التدرّج الأساس داكنُ الطرفين ليستوي التباين. */
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 9px),
        radial-gradient(ellipse 70% 120% at 88% -10%, rgba(255, 255, 255, .12) 0, rgba(255, 255, 255, 0) 62%),
        radial-gradient(circle at 94% 12%, rgba(213, 162, 66, .15) 0, rgba(213, 162, 66, 0) 44%),
        linear-gradient(150deg, color-mix(in srgb, var(--sec) 68%, #000) 0%, var(--sec) 62%, color-mix(in srgb, var(--sec) 82%, #000) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}
.page-intro--dark::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--gold-metal);
    pointer-events: none;
}
/* ظلُّ الأيقونة يُزاح إلى حرف اللوحة فلا يقع خلف سطور المقدّمة. */
.page-intro--dark::before {
    content: var(--sec-glyph);
    position: absolute;
    z-index: -1;
    inset-inline-start: -18px;
    inset-block-end: -30px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 128px;
    line-height: 1;
    color: rgba(255, 255, 255, .045);
    pointer-events: none;
}
/* يُرفع الشريطُ الجانبيّ الباهت، ويقوم مقامَه خيطٌ ذهبيّ قصير تحت
   العنوان: أهدأُ وأدلُّ على الترتيب. */
.page-intro.page-intro--dark .page-intro-copy {
    border-inline-start: 0;
    padding-inline-start: 0;
    max-width: 900px;
}
/* ختمُ القسم في ترويسة الفهرس أصغرُ منه في رأس المادّة، لأن العنوان أصغر. */
.page-intro.page-intro--dark .sp-mark {
    width: 34px;
    height: 34px;
    margin-inline-end: 11px;
    vertical-align: 2px;
    border-radius: 9px;
    font-size: .88rem;
}
.page-intro.page-intro--dark h1 {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 15px;
    color: #fff;
    font-size: clamp(1.42rem, 2.3vw, 1.86rem);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}
.page-intro.page-intro--dark h1::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 68px;
    height: 3px;
    border-radius: 3px;
    background: var(--gold-metal);
}
.page-intro.page-intro--dark h1 .accent { color: rgba(255, 255, 255, .78); }

/* الشعارُ لبُّ التعريف فيُقدَّم، وما بعده شرحٌ يهدأ صوتُه درجة. */
.page-intro.page-intro--dark .page-intro-tagline {
    margin-bottom: 12px;
    color: #fff;
    font-size: clamp(1.04rem, 1.7vw, 1.18rem);
    font-weight: 800;
}
.page-intro.page-intro--dark p {
    max-width: 74ch;
    color: rgba(255, 255, 255, .90);
    font-size: clamp(.94rem, 1.4vw, 1.02rem);
    line-height: 1.98;
}
.page-intro.page-intro--dark p + p { margin-top: 9px; }

/* التنبيهُ داخل اللوحة الداكنة: زجاجٌ داكن بحدٍّ أبيض شفّاف، فالوردِيُّ
   الفاتح كان ينبو عن اللوحة ويكسر تناسقها. */
.page-intro.page-intro--dark .video-ai-notice {
    margin-top: 16px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 7px;
    background: rgba(0, 0, 0, .22);
    color: rgba(255, 255, 255, .94);
}
.page-intro.page-intro--dark .video-ai-notice i { color: var(--gold-light); }
.page-intro.page-intro--dark .video-ai-notice strong { color: #fff; }
.page-intro h1 {
    margin: 0;
    color: var(--emerald);
    font-size: clamp(1.19rem, 1.75vw, 1.44rem);
    line-height: 1.35;
}
.page-intro h1 .accent { color: var(--page-accent); }
.page-intro p {
    max-width: 900px;
    margin: 0;
    color: var(--text-soft);
    font-size: clamp(.94rem, 1.5vw, 1.04rem);
    line-height: 1.75;
}
.page-intro .video-ai-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(179, 38, 30, .22);
    border-radius: 4px;
    background: rgba(253, 236, 236, .72);
    color: var(--red-deep);
    font-size: clamp(.78rem, 1.25vw, .88rem);
    line-height: 1.65;
}
.video-ai-notice i {
    flex: 0 0 auto;
    margin-top: .34em;
    color: var(--red);
}
.video-ai-notice strong { font-weight: 800; }
.page-intro + .section { padding: 30px 0 68px; }
.page-intro + .section > .container > .single-page:first-child { margin-top: 0; }
main > .breadcrumb + .section { padding-top: 42px; }

@media (max-width: 640px) {
    .page-intro { padding: 12px 0 11px; }
    .page-intro-copy {
        padding-inline-start: 10px;
        border-inline-start-width: 2px;
    }
    .page-intro h1 { font-size: clamp(1.08rem, 4.5vw, 1.18rem); }
    .page-intro .video-ai-notice {
        gap: 7px;
        margin-top: 7px;
        padding: 6px 8px;
        font-size: 0.94rem;
        line-height: 1.6;
    }
    .page-intro + .section { padding: 24px 0 52px; }
    main > .breadcrumb + .section { padding-top: 30px; }
}

/* ==========================================================
   الأزرار
   ========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--gold-metal);
    color: var(--emerald-deep);
    padding: 15px 32px;
    border-radius: 6px;
    font-weight: 800;
    font-family: inherit;
    font-size: 15.5px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--t);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-sheen) 48%, var(--gold-light) 100%);
    opacity: 0;
    transition: opacity var(--t);
    z-index: -1;
}
.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-gold);
    color: var(--emerald-deep);
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(-1px); }

.btn.btn-outline {
    background: transparent;
    color: var(--white);
    border-color: rgba(255,255,255,.4);
}
.btn.btn-outline::before {
    background: rgba(255,255,255,.1);
}
.btn.btn-outline:hover {
    color: var(--white);
    border-color: var(--white);
    box-shadow: 0 8px 25px rgba(255,255,255,.15);
}

.btn.btn-emerald {
    background: linear-gradient(135deg, var(--emerald), var(--emerald-2));
    color: var(--gold-light);
}
.btn.btn-emerald::before {
    background: linear-gradient(135deg, var(--emerald-2), var(--emerald));
}
.btn.btn-emerald:hover { color: var(--gold-light); box-shadow: var(--shadow-md); }

.btn.btn-red {
    background: linear-gradient(135deg, var(--red), var(--red-deep));
    color: var(--white);
}
.btn.btn-red::before {
    background: linear-gradient(135deg, var(--red-deep), #5b1208);
}
.btn.btn-red:hover { color: var(--white); box-shadow: var(--shadow-red); }

.btn.btn-sm { padding: 9px 20px; font-size: 17.5px; }
.btn.btn-lg { padding: 18px 40px; font-size: 17px; }

/* ==========================================================
   الأقسام العامّة
   ========================================================== */
.section { padding: 90px 0; position: relative; }
.section.section-tight { padding: 60px 0; }
.section.alt { background: var(--white); }
.section.dark {
    background: linear-gradient(135deg, var(--emerald-deep), var(--emerald));
    color: var(--white);
    position: relative;
    overflow: hidden;
}
.section.dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 80% 20%, rgba(213,162,66,.08), transparent 50%);
    pointer-events: none;
}
.section.dark > * { position: relative; }
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 { color: var(--white); }

.section-head {
    text-align: center;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.section-head .eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, var(--teal), var(--teal-deep));
    color: var(--white);
    font-size: 15.6px;
    font-weight: 700;
    margin-bottom: 18px;
    padding: 7px 18px;
    border-radius: 3px;
    text-transform: uppercase;
    box-shadow: var(--shadow-teal);
}
.section.dark .section-head .eyebrow {
    border: 1px solid rgba(242, 212, 137, .48);
    background: rgba(255,255,255,.07);
    color: var(--gold-light);
    box-shadow: none;
}
.section-head h2 {
    font-size: clamp(1.39rem, 2.65vw, 1.77rem);
    margin-bottom: 16px;
    position: relative;
}
.section-head h2::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
    margin: 18px auto 0;
    border-radius: 2px;
}
.section-head p {
    color: var(--text-soft);
    font-size: 1.3rem;
    line-height: 1.95;
}
.section.dark .section-head p { color: rgba(255,255,255,.82); }

/* ==========================================================
   الشبكة
   ========================================================== */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) {
    .grid-4, .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
    .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
    /*
     * عند انهيار الشبكات إلى عمودين: إن كان عددُ البطاقات فرديًّا بقيت
     * الأخيرةُ يتيمةً معلّقةً في عمودٍ واحد، فتُبسط على السطر كاملًا.
     */
    .grid-3 > *:last-child:nth-child(odd),
    .grid-4 > *:last-child:nth-child(odd),
    .grid-5 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
}

/* ==========================================================
   البطاقات
   ========================================================== */
.card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-soft);
    transition: all var(--t);
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t);
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(213, 162, 66, .3);
}
.card:hover::before { transform: scaleX(1); }
.card .icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--emerald), var(--emerald-3));
    color: var(--gold-light);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
    transition: transform var(--t-bounce);
    position: relative;
    box-shadow: var(--shadow-sm);
}
.card:hover .icon {
    transform: rotate(-8deg) scale(1.08);
}
.card h3 { color: var(--emerald); margin-bottom: 12px; font-size: 1.18rem; }
.card p { color: var(--text-soft); margin-bottom: 0; font-size: 15.5px; line-height: 1.85; }

/* بطاقة تَحذيريّة (للأصول الفاسدة) */
.card.danger::before {
    background: linear-gradient(90deg, var(--red), #d63832, var(--red));
}
.card.danger .icon {
    background: linear-gradient(135deg, var(--red), var(--red-deep));
    color: var(--white);
}
.card.danger h3 { color: var(--red); }
.card.danger:hover { border-color: rgba(179, 38, 30, .25); }

/* بطاقة قاعدة حقّ (ذهبي) */
.card.ok::before {
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold-dark));
    transform: scaleX(1);
}
.card.ok .icon {
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    color: var(--emerald);
}
.card.ok h3 { color: var(--gold-dark); }

/* ==========================================================
   بطاقة شخصيّة (Figure)
   ========================================================== */
.figure-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 26px 24px 0;
    box-shadow: var(--shadow-xs);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.figure-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold) 35%, var(--gold) 65%, transparent);
    opacity: .5;
    transition: opacity var(--t);
}
.figure-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--surface-tint);
    color: inherit;
}
.figure-card:hover::before { opacity: 1; }
.figure-top {
    display: flex;
    align-items: center;
    gap: 14px;
}
.figure-medal {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--emerald-deep), var(--emerald-2));
    color: var(--gold-light);
    font-size: 21px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 14px rgba(4, 26, 16, .18);
    transition: transform var(--t);
}
.figure-card:hover .figure-medal { transform: scale(1.05); }
.figure-id {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.figure-name {
    color: var(--emerald);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.45;
}
.figure-role {
    color: var(--text-soft);
    font-size: 13.6px;
    font-weight: 600;
    line-height: 1.6;
}
.figure-intro {
    margin: 0;
    color: var(--text-soft);
    font-size: 16.6px;
    line-height: 1.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.figure-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 0 17px;
    border-top: 1px solid var(--border-soft);
}
.figure-loc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13.4px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.figure-loc i { color: var(--gold-dark); font-size: 12px; }
.figure-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--emerald);
    font-weight: 700;
    font-size: 15.2px;
    white-space: nowrap;
    transition: gap var(--t), color var(--t);
}
.figure-card:hover .figure-link { gap: 12px; color: var(--gold-dark); }
/* شبكات ضيّقة (الرئيسية وأسفل صفحة الرمز): رأس مكدَّس وأحجام أصغر */
.grid-4 .figure-top, .grid-5 .figure-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.grid-4 .figure-name, .grid-5 .figure-name { font-size: 1.06rem; }
.grid-4 .figure-medal, .grid-5 .figure-medal { width: 48px; height: 48px; font-size: 19px; border-radius: 7px; }
.grid-4 .figure-intro, .grid-5 .figure-intro { font-size: 15.4px; }
@media (max-width: 640px) {
    .grid-4 .figure-top, .grid-5 .figure-top { flex-direction: row; align-items: center; }
}

/* ==========================================================
   بطاقة الإمام (Scholar)
   ========================================================== */
.scholar-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-soft);
    transition: all var(--t);
    text-decoration: none;
    color: inherit;
    display: block;
}
.scholar-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: rgba(213, 162, 66, .35);
    color: inherit;
}
.scholar-card .scholar-head {
    background: linear-gradient(135deg, var(--emerald), var(--emerald-2));
    padding: 36px 28px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.scholar-card .scholar-head::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(213,162,66,.25), transparent 60%);
}
.scholar-card .scholar-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--emerald);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 16px;
    box-shadow: 0 12px 30px rgba(213, 162, 66, .4);
    position: relative;
    z-index: 1;
    transition: transform var(--t-bounce);
}
.scholar-card:hover .scholar-icon { transform: rotate(-8deg) scale(1.06); }
.scholar-card .scholar-name {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 6px;
    position: relative;
    z-index: 1;
}
.scholar-card .scholar-era {
    color: var(--gold-light);
    font-size: 16.3px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.scholar-card .scholar-body {
    padding: 24px 26px;
}
.scholar-card .scholar-intro {
    color: var(--text-soft);
    font-size: 18.1px;
    line-height: 1.85;
    margin-bottom: 16px;
}
.scholar-card .scholar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--emerald);
    font-weight: 700;
    font-size: 18.1px;
    transition: gap var(--t);
}
.scholar-card:hover .scholar-link { gap: 14px; color: var(--gold-dark); }

/* ==========================================================
   شريط الإحصائيّات: بطاقةٌ زمرديةٌ داكنة تجلس منفصلةً تحت
   لوحة الاقتباس، أيقوناتُها بألوان أقسامها، والذهبُ محصورٌ
   في الأرقام والخيط العلوي وأيقونة الميزان.
   ========================================================== */
.stats-bar {
    position: relative;
    z-index: 5;
    margin-top: 44px;
    padding: 30px 32px 26px;
    border-radius: 16px;
    background:
        radial-gradient(ellipse 55% 130% at 88% -15%, rgba(23, 105, 74, .55), transparent 62%),
        radial-gradient(ellipse 45% 120% at 8% 118%, rgba(213, 162, 66, .13), transparent 58%),
        linear-gradient(135deg, var(--emerald-deep) 0%, var(--emerald) 55%, var(--emerald-2) 100%);
    border: 1px solid rgba(213, 162, 66, .32);
    box-shadow: 0 30px 80px rgba(4, 26, 16, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
    overflow: hidden;
}
/* خيطُ الذهب أعلى البطاقة: توقيعُ الموقع نفسُه الذي يعلو الترويسة. */
.stats-bar::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-sheen) 50%, var(--gold) 78%, transparent);
}
.stats-grid {
    display: grid;
    /* أعمدةٌ مقرَّرة لا تلقائية: 6 ثم 3 ثم 2، فلا يبقى عدّادٌ يتيمٌ في سطر. */
    grid-template-columns: repeat(6, 1fr);
    gap: 22px 24px;
    text-align: center;
}
/* فاصلٌ ذهبيٌّ شفيف يتلاشى طرفاه، فيصفّ الخانات دون أن يقطّع البطاقة. */
.stat-item { position: relative; padding: 6px 8px; --stat-c: var(--emerald-3); }
.stat-item + .stat-item::before {
    content: '';
    position: absolute;
    inset-inline-start: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, transparent, rgba(213, 162, 66, .45) 50%, transparent);
}
/* كلُّ أيقونةٍ بلون قسمها المعتمد في التنقل ورؤوس الصفحات. */
.stat--basair   { --stat-c: #650046; }
.stat--shubha   { --stat-c: #000053; }
.stat--articles { --stat-c: #510360; }
.stat--posts    { --stat-c: #0a5a58; }
.stat--videos   { --stat-c: #b40111; }
.stat-item .stat-icon {
    width: 42px;
    height: 42px;
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .30), transparent 55%),
        linear-gradient(145deg, color-mix(in srgb, var(--stat-c) 74%, #000) 0%, var(--stat-c) 55%, color-mix(in srgb, var(--stat-c) 74%, #fff) 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin: 0 auto 12px;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--stat-c) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .30);
    transition: transform var(--t), box-shadow var(--t);
}
.stat-item:hover .stat-icon {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--stat-c) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .30);
}
/* الميزان وحده يبقى ذهبيًّا: قلبُ الموسوعة وتاجُ البطاقة. */
.stat--mizan .stat-icon {
    background:
        radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .35), transparent 55%),
        var(--gold-metal);
    color: var(--emerald-deep);
    border-color: rgba(252, 237, 175, .55);
    box-shadow: 0 6px 16px rgba(213, 162, 66, .40), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.stat--mizan:hover .stat-icon {
    box-shadow: 0 10px 24px rgba(213, 162, 66, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.stat-item .stat-num {
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
    color: var(--gold-light);
    background: linear-gradient(180deg, var(--gold-sheen) 0%, var(--gold-light) 55%, var(--gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-item .stat-label {
    color: rgba(236, 246, 240, .82);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
}
@media (max-width: 1100px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .stat-item:nth-child(3n+1)::before { display: none; }
    .stat-item + .stat-item::before { height: 48px; }
}
@media (max-width: 600px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-item::before { display: none; }
    .stat-item:nth-child(even)::before { display: block; }
}

/* ==========================================================
   الخطّ الزمني (Timeline)
   ========================================================== */
.timeline {
    position: relative;
    padding: 40px 0;
    max-width: 920px;
    margin: 0 auto;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 4px;
    background: linear-gradient(180deg, var(--gold-light), var(--gold), var(--gold-dark));
    border-radius: 2px;
}
@media (max-width: 780px) {
    .timeline::before { right: 24px; transform: none; }
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
    width: 50%;
    padding-left: 40px;
}
.timeline-item:nth-child(even) {
    margin-right: 50%;
    padding-left: 0;
    padding-right: 40px;
    text-align: left;
}
@media (max-width: 780px) {
    .timeline-item, .timeline-item:nth-child(even) {
        width: 100%;
        margin-right: 0;
        padding-right: 60px;
        padding-left: 0;
        text-align: right;
    }
}

.timeline-marker {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--white);
    border: 4px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--accent-color, var(--red));
    box-shadow: var(--shadow-md);
    z-index: 2;
    right: -65px;
    top: 8px;
    transition: transform var(--t-bounce);
}
.timeline-item:nth-child(even) .timeline-marker {
    right: auto;
    left: -65px;
}
@media (max-width: 780px) {
    .timeline-item .timeline-marker, .timeline-item:nth-child(even) .timeline-marker {
        right: 0;
        left: auto;
    }
}
.timeline-item:hover .timeline-marker {
    transform: scale(1.15) rotate(-5deg);
}

/*
 * بطاقةُ المحطة تلبس لونَ محطتها كاملًا: تدرجٌ داكن من لون المحطة
 * (--accent-color من ملف البيانات)، ونصٌّ أبيض، وشارةُ تاريخ ذهبيةُ
 * الحرف بإطارٍ شفيف. كلُّ محطةٍ لوحةٌ قائمة بذاتها.
 */
.timeline-content {
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent-color, var(--emerald)) 62%, #000), var(--accent-color, var(--emerald)) 70%, color-mix(in srgb, var(--accent-color, var(--emerald)) 86%, #fff));
    padding: 22px 26px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid color-mix(in srgb, var(--accent-color, var(--emerald)) 60%, #fff);
    transition: all var(--t);
    position: relative;
}
.timeline-content:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: rgba(213,162,66,.45);
}
.timeline-content .date {
    display: inline-block;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(242, 212, 137, .5);
    color: var(--gold-light);
    padding: 4px 14px;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}
.timeline-content h4 {
    color: #fff;
    margin-bottom: 8px;
    font-size: 1.05rem;
    line-height: 1.5;
}
.timeline-content p {
    color: rgba(255, 255, 255, .85);
    font-size: 18.1px;
    line-height: 1.85;
    margin-bottom: 0;
}

/* ==========================================================
   شريط الفُتات
   ========================================================== */
.breadcrumb {
    padding: 11px 0;
    font-size: 16.9px;
    color: var(--text-soft);
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-soft);
}
.breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--emerald); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--gold-dark); }
.breadcrumb .sep { color: var(--gold); font-size: 17.5px; }
.breadcrumb .current { color: var(--text); font-weight: 600; }

/* ==========================================================
   صفحة منفردة (Single page)
   ========================================================== */
.single-page {
    background: var(--white);
    border-radius: var(--radius);
    padding: 50px clamp(24px, 5vw, 64px);
    box-shadow: var(--shadow-md);
    margin: 40px auto;
    max-width: 920px;
    border: 1px solid var(--border-soft);
}
/* ==========================================================
   لوحةُ رأس المادّة
   العنوانُ وما تحته في لوحةٍ ملوَّنة على هيئة لوحة النقل في بصائر:
   خلفيّةٌ متدرّجة بلون النوع، وختمٌ ذهبيّ بأيقونته، وظلُّ أيقونةٍ
   كبيرة خلفها، وخيطٌ ذهبيّ يفصلها عن المتن. ولكل نوعٍ لونُه ورمزُه
   في متغيّرين اثنين لا غير: --sec و --sec-glyph.
   ========================================================== */
.single-page { --sec: var(--emerald); --sec-glyph: '\f1ea'; }
.sp--article { --sec: #510360; --sec-glyph: '\f1ea'; }  /* أرجوانيّ داكن */
.sp--post    { --sec: #003130; --sec-glyph: '\f5ad'; }  /* أخضر مزرقّ داكن */
.sp--shubha  { --sec: #000053; --sec-glyph: '\f059'; }  /* قرمزيّ */
.sp--book    { --sec: #572301; --sec-glyph: '\f02d'; }  /* بنّيّ داكن */
.sp--video   { --sec: #b40111; --sec-glyph: '\f144'; }  /* أحمر قانٍ */
.sp--figure  { --sec: #0a0a0f; --sec-glyph: '\f21b'; }  /* نيليّ داكن */
.sp--about   { --sec: #013238; --sec-glyph: '\f06e'; }  /* بحريّ داكن */

:is(.single-page, .video-single-head) .head {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    background:
        radial-gradient(circle at 92% 8%, rgba(213, 162, 66, .20) 0, rgba(213, 162, 66, 0) 46%),
        linear-gradient(145deg, color-mix(in srgb, var(--sec) 78%, #000) 0%, var(--sec) 58%, color-mix(in srgb, var(--sec) 86%, #fff) 100%);
}
/* اللوحةُ داخل البطاقة تمتدّ إلى حرفيها، فتُلغى حواشي البطاقة عندها. */
.single-page .head {
    margin: -50px calc(-1 * clamp(24px, 5vw, 64px)) 36px;
    padding: 30px clamp(24px, 5vw, 64px) 32px;
    border-radius: 6px 6px 0 0;
}
/* ظلُّ أيقونة النوع خلف العنوان. */
:is(.single-page, .video-single-head) .head::before {
    content: var(--sec-glyph);
    position: absolute;
    z-index: -1;
    inset-inline-start: 18px;
    inset-block-end: -30px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 140px;
    line-height: 1;
    color: rgba(255, 255, 255, .07);
    pointer-events: none;
}
/* خيطٌ ذهبيّ معدنيّ يفصل الرأس عن المتن. */
:is(.single-page, .video-single-head) .head::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: var(--gold-metal);
}
:is(.single-page, .video-single-head) .head h1 { color: #fff; }
:is(.single-page, .video-single-head) .head .meta { color: rgba(255, 255, 255, .82); }
:is(.single-page, .video-single-head) .head .meta a { color: #fff; }
:is(.single-page, .video-single-head) .head .meta i { color: rgba(255, 255, 255, .70); }
:is(.single-page, .video-single-head) .head .meta .badge {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .30);
    color: #fff;
}

/* ختمُ النوع داخل سطر العنوان، كختم الاقتباس في بصائر. */
.sp-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-inline-end: 13px;
    vertical-align: 5px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .06));
    color: #fff;
    font-size: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px rgba(0, 0, 0, .22);
}

/* رأسُ صفحة المقطع ليس داخل بطاقة، فيحمل اللوحة بنفسه بأربع زوايا. */
.video-single-head .head {
    margin: 0 0 30px;
    padding: 28px clamp(22px, 4vw, 34px) 30px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.video-single-head h1 {
    margin-bottom: 14px;
    color: #fff;
    font-size: clamp(1.28rem, 2.45vw, 1.58rem);
    line-height: 1.5;
}
.video-single-head .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 1.02rem;
}
.video-single-head .meta strong { color: #fff; }
.video-single-head .meta .fa-youtube { color: #fff; }

@media (max-width: 640px) {
    .single-page .head { margin-inline: -20px; padding-inline: 20px; }
}
.single-page h1 {
    font-size: clamp(1.6rem, 2.6vw, 1.83rem);
    margin-bottom: 16px;
    color: var(--emerald);
    /* العناوين العربية متعددة الأسطر تحتاج تنفسا بين السطور وإلا تراكبت أشكالها */
    line-height: 1.85;
    /* موازنة أطوال الأسطر (لا ضبط للطرفين: جُرّب فمَطّ الفراغات مطًّا قبيحًا) */
    text-wrap: balance;
}
.single-page .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: var(--text-soft);
    font-size: 17.5px;
}
.single-page .meta .badge {
    background: var(--sec);
    color: #fff;
    padding: 5px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15.6px;
}

.content-body {
    font-size: 1.5rem;
    line-height: 2.05;
    color: var(--text);
}
.content-body h2 {
    color: var(--emerald);
    font-size: 1.52rem;
    margin: 38px 0 18px;
    padding-right: 18px;
    border-right: 5px solid var(--gold);
    line-height: 1.5;
}
.content-body h3 {
    color: var(--emerald-2);
    font-size: 1.37rem;
    margin: 30px 0 14px;
}
/*
 * متونُ القراءة الطويلة تُحاذى للطرفين على عرف الكتاب العربي المطبوع.
 * تقتصر على الأجساد الطويلة؛ فالبطاقات والقصار تفسدها فجوات الضبط.
 */
.content-body p,
.ps-prose p,
.kb-note .kb-note-paragraph,
.rs-bayan-paragraph,
.mz-prose p,
.mz-gate-word p,
.kb-intro p,
.about-section .content-body p,
.rs-intro p {
    text-align: justify;
    text-align-last: start;
}
/* الكلمة الخاتمة الذهبية في البصائر والرسائل تبقى موسَّطة أبدًا. */
.kb-note .kb-note-paragraph.is-closing,
.rs-bayan-paragraph.is-closing {
    text-align: center;
    text-align-last: center;
}

.content-body p { margin-bottom: 1.2em; }
.content-body ul, .content-body ol {
    margin: 14px 28px 22px;
    line-height: 2;
}
.content-body li { margin-bottom: 8px; }
.content-body strong { color: var(--emerald); font-weight: 700; }
.content-body em { color: var(--gold-dark); font-style: normal; font-weight: 600; }

/* الوسائط المضمّنة داخل المقالات: تحفظ نسبتها ولا تتجاوز عمود النص. */
.content-body iframe[data-content-media] {
    display: block;
    width: 100% !important;
    max-width: var(--content-media-max, 100%);
    height: auto !important;
    aspect-ratio: var(--content-media-ratio, auto);
    margin: 24px auto;
    border: 0;
    border-radius: 5px;
    background: var(--emerald-deep);
}
.content-body iframe[data-content-provider="facebook"] {
    background: var(--white);
    border-radius: 4px;
}
.content-body .wp-video {
    display: block;
    max-width: 100% !important;
    margin: 24px auto;
}
.content-body .wp-video > video,
.content-body .wp-video > .wp-video-shortcode {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    margin: 0;
    object-fit: contain;
    border-radius: 5px;
    background: #000;
}

/* شبكة أمان: لا يتجاوز مقطعٌ عرضَ عمود النصّ مهما كانت أبعاده الأصلية. */
.content-body video { max-width: 100%; height: auto; }

/* الصور والمقاطع الشاهدة داخل المقالات: إطارٌ خفيف وتعليقٌ تحتها. */
.content-body figure.art-shot {
    margin: 28px auto;
    max-width: var(--art-shot-max, 100%);
}
.content-body figure.art-shot img,
.content-body figure.art-shot video {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
}
.content-body figure.art-shot video {
    aspect-ratio: var(--art-shot-ratio, 16 / 9);
    object-fit: contain;
    background: #000;
}
.content-body figure.art-shot figcaption {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.7;
    text-align: center;
}

@media (max-width: 640px) {
    .content-body iframe[data-content-media],
    .content-body .wp-video { margin-block: 18px; }
    .content-body figure.art-shot { margin-block: 20px; }
}

.content-body blockquote:not(.twitter-tweet) {
    background: linear-gradient(135deg, var(--surface-muted), var(--surface-tint));
    border: 0;
    border-inline-start: 4px solid var(--teal);
    padding: 15px 62px 15px 22px;
    margin: 22px 0;
    border-radius: 7px;
    color: var(--emerald);
    font-weight: 500;
    font-size: 1.36rem;
    line-height: 1.82;
    box-shadow: 0 5px 16px rgba(23,112,124,.14);
    position: relative;
    min-height: 0;
}
.content-body blockquote:not(.twitter-tweet) > :first-child { margin-top: 0; }
.content-body blockquote:not(.twitter-tweet) > :last-child { margin-bottom: 0; }
.content-body blockquote:not(.twitter-tweet) p { margin-bottom: .65em; }
.content-body blockquote:not(.twitter-tweet)::before {
    content: '\f10e';
    position: absolute;
    top: 17px;
    inset-inline-start: 17px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1;
    color: var(--white);
    background: linear-gradient(135deg, var(--teal), var(--emerald-3));
    box-shadow: 0 5px 12px rgba(23,112,124,.22);
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

@media (max-width: 640px) {
    .content-body blockquote:not(.twitter-tweet) {
        padding: 13px 50px 13px 15px;
        margin: 18px 0;
        border-radius: 6px;
        font-size: 1.18rem;
        line-height: 1.8;
    }
    .content-body blockquote:not(.twitter-tweet)::before {
        top: 14px;
        inset-inline-start: 13px;
        width: 28px;
        height: 28px;
        border-radius: 5px;
        font-size: 12px;
    }
}

/* صفحة التعريف المطوّلة */
.about-longform {
    max-width: 1000px;
    margin-top: 0;
}
/* لوحاتُ المباحث تأخذ لون قسم «الحدّاديّة» نفسه، كما تأخذ كلُّ مادّةٍ
   لون قسمها في رأسها وفي القائمة. */
.about-chapter-title {
    --sec: #013238;
    position: relative;
    overflow: hidden;
    margin: 58px 0 30px;
    padding: 28px clamp(22px, 5vw, 42px);
    border-radius: 9px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--sec) 78%, #000), var(--sec) 62%, color-mix(in srgb, var(--sec) 88%, #fff));
    box-shadow: var(--shadow-md);
}
.about-chapter-title:first-child { margin-top: 0; }
.about-chapter-title::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 20%, rgba(213,162,66,.22), transparent 38%);
    pointer-events: none;
}
.content-body .about-chapter-title h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--white);
    font-size: clamp(1.58rem, 2.5vw, 1.83rem);
}
.content-body .about-feature-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 16px 19px;
    border-right: 4px solid var(--gold);
    border-radius: 5px;
    background: var(--bg-2);
    line-height: 1.75;
}
.about-feature-heading i {
    flex: 0 0 auto;
    margin-top: .55em;
    color: var(--gold-dark);
    font-size: 11.3px;
}
.content-body .about-list {
    margin: 18px 0 26px;
    padding: 20px 48px 20px 22px;
    border: 1px solid var(--border-soft);
    border-radius: 7px;
    background: var(--bg-2);
}
.content-body .about-list li::marker { color: var(--gold-dark); }

@media (max-width: 640px) {
    .about-longform { padding-inline: 20px; }
    .about-chapter-title { margin-inline: -8px; }
    .content-body .about-list { padding-right: 38px; }
}

/* النصّ المطوّل داخل صفحة الرمز */
.figure-translation {
    margin: 42px -18px 0;
    padding: clamp(22px, 4vw, 38px);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: linear-gradient(180deg, #fff, var(--bg-2));
    box-shadow: var(--shadow-sm);
}
/* حين تكون لوحة الترجمة أول محتوى البطاقة تمتد لأعلى بلا فراغ ميت */
.single-page > .figure-translation:first-child {
    margin-top: -26px;
}
/* عنوان الترجمة كلّها: يتصدّرها بلا شريط جانبيّ، ويفصله خطٌّ ذهبيّ عمّا بعده */
.figure-translation-body h2.translation-title {
    margin: 0 0 22px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 2px solid var(--gold);
    color: var(--emerald);
    font-size: 1.42rem;
    line-height: 1.65;
    text-align: center;
}

.figure-translation-body .translation-opening {
    padding: 22px 24px;
    border-right: 5px solid var(--red);
    border-radius: 6px;
    background: #fbe8e6;
    color: var(--emerald);
    font-size: 1.08em;
    font-weight: 700;
}
.figure-translation-body .translation-point {
    margin: 12px 0;
    padding: 16px 19px;
    border-right: 4px solid var(--gold);
    border-radius: 5px;
    background: var(--white);
    box-shadow: var(--shadow-xs);
    color: var(--text);
    line-height: 2;
}
.figure-translation-body .translation-source-note {
    margin-top: 34px;
    padding: 18px 20px;
    border: 1px dashed var(--gold-dark);
    border-radius: 6px;
    background: #faf3e2;
    color: var(--text-soft);
    font-size: .94em;
}
@media (max-width: 640px) {
    .figure-translation {
        margin-inline: -10px;
        padding: 18px;
    }
    .figure-translation-body { font-size: 16.5px; }
}

/* ==========================================================
   رأس صفحة الشخصيّة — ملف تعريفي مضغوط
   ========================================================== */
/* رأسُ الرمز لوحةٌ نيليّة داكنة على نظام لوحات المواد، وعليها ختمُ
   الرمز بأيقونته وخيطٌ ذهبيّ يفصلها عن المتن. */
.figure-page-intro {
    --sec: #0a0a0f;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 26px 28px;
    border-bottom: 0;
    background:
        radial-gradient(circle at 92% 8%, rgba(213, 162, 66, .20) 0, rgba(213, 162, 66, 0) 46%),
        linear-gradient(145deg, color-mix(in srgb, var(--sec) 82%, #000) 0%, var(--sec) 58%, color-mix(in srgb, var(--sec) 78%, #fff) 100%);
}
/* الخيطُ الذهبيّ في قاع اللوحة نفسِها لا في قاع حاويتها الداخلية. */
.figure-page-intro::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--gold-metal);
    pointer-events: none;
}
.figure-page-intro::before {
    content: '\f21b';
    position: absolute;
    z-index: -1;
    inset-inline-start: 6%;
    inset-block-end: -34px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 150px;
    line-height: 1;
    color: rgba(255, 255, 255, .06);
    pointer-events: none;
}
.figure-page-intro h1 { color: #fff; }
.figure-page-intro p { color: rgba(255, 255, 255, .80); }
/* يُحاذى رأسُ الرمز عرضَ بطاقة المتن تحته، فلا ينفرد الرأسُ باليمين
   والمتنُ بالوسط. والحسبة: 920px عرضُ .single-page، يُزاد عليها
   حاشيتا .container (24px لكل جهة) ليتطابق حرفا الكتلتين. */
.figure-intro-inner { max-width: 968px; }
.figure-profile-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
/* ختمُ الرمز: أيقونتُه بلونه هو، محاطةً بحدٍّ ذهبيّ على لوحة الترويسة. */
.figure-page-intro .figure-icon-lg {
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 12px;
    background: linear-gradient(135deg, var(--page-accent), var(--page-accent-dark));
    color: var(--white);
    font-size: 27px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 8px 20px rgba(0, 0, 0, .28);
}
.figure-profile-copy {
    flex: 1;
    min-width: 0;
}
.figure-profile-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.figure-profile-title h1 { margin: 0; }
.figure-page-intro .role-tag {
    display: inline-flex;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 14.4px;
    font-weight: 800;
}
.figure-page-intro .real-name {
    margin-top: 5px;
    color: rgba(255, 255, 255, .94);
    font-size: 16.3px;
    font-weight: 700;
}
.figure-page-intro p { margin-top: 8px; }
.figure-page-intro .figure-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
    color: rgba(255, 255, 255, .74);
    font-size: 15.6px;
}
.figure-page-intro .figure-meta i {
    margin-left: 5px;
    color: rgba(255, 255, 255, .78);
}

@media (max-width: 640px) {
    .figure-page-intro { padding-block: 16px; }
    .figure-profile-head { gap: 12px; }
    .figure-page-intro .figure-icon-lg {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        border-radius: 7px;
        font-size: 21px;
    }
    .figure-profile-title { align-items: flex-start; }
    .figure-page-intro p { font-size: .9rem; line-height: 1.65; }
    .figure-page-intro .figure-meta { gap: 6px 12px; }
}

/* ==========================================================
   تَذييل (Footer)
   ========================================================== */
.site-footer {
    background: linear-gradient(135deg, var(--emerald-deep) 0%, var(--emerald) 100%);
    color: rgba(255,255,255,.78);
    padding: 70px 0 28px;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand h3 { color: var(--gold-light); margin-bottom: 16px; font-size: 1.17rem; font-weight: 800; }
.footer-brand p { color: rgba(255,255,255,.72); line-height: 1.95; font-size: 1.05rem; }

/* حسابات الموسوعة الرسمية في التذييل */
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 1px solid rgba(213,162,66,.35);
    border-radius: 50%;
    color: var(--gold-light);
    font-size: 1.15rem;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.footer-social-link:hover,
.footer-social-link:focus-visible {
    color: var(--white);
    border-color: transparent;
    transform: translateY(-2px);
}
.footer-social-x:hover, .footer-social-x:focus-visible { background: #111111; }
.footer-social-youtube:hover, .footer-social-youtube:focus-visible { background: #ff0000; }
.footer-social-facebook:hover, .footer-social-facebook:focus-visible { background: #1877f2; }
.footer-social-telegram:hover, .footer-social-telegram:focus-visible { background: #229ed9; }

.footer-col h4 {
    color: var(--gold-light);
    margin-bottom: 18px;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(213,162,66,.25);
    padding-bottom: 10px;
    font-weight: 700;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a {
    color: rgba(255,255,255,.72);
    font-size: 1.05rem;
    transition: all var(--t-fast);
    display: inline-block;
}
.footer-col a:hover {
    color: var(--gold-light);
    transform: translateX(-4px);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 24px;
    text-align: center;
    color: rgba(255,255,255,.5);
    font-size: 1rem;
    line-height: 1.85;
}
.footer-bottom .accent { color: var(--gold-light); }
.footer-bottom .verse {
    display: block;
    margin-top: 8px;
    font-size: 1.15rem;
    color: var(--gold-light);
    font-weight: 500;
}

/* ==========================================================
   حركات (Animations)
   ========================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: scale(1); }
}

[data-aos] { opacity: 0; transition: all .9s var(--t); }
[data-aos].aos-animate { opacity: 1; }
[data-aos="fade-up"] { transform: translateY(32px); }
[data-aos="fade-up"].aos-animate { transform: translateY(0); }
[data-aos="fade-down"] { transform: translateY(-32px); }
[data-aos="fade-down"].aos-animate { transform: translateY(0); }
[data-aos="fade-right"] { transform: translateX(32px); }
[data-aos="fade-right"].aos-animate { transform: translateX(0); }
[data-aos="fade-left"] { transform: translateX(-32px); }
[data-aos="fade-left"].aos-animate { transform: translateX(0); }
[data-aos="zoom-in"] { transform: scale(.92); }
[data-aos="zoom-in"].aos-animate { transform: scale(1); }

/* ==========================================================
   صفحة 404
   ========================================================== */
.notfound {
    text-align: center;
    padding: 100px 24px;
    min-height: 60vh;
}
.notfound .num {
    font-size: clamp(7rem, 18vw, 12rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.notfound h2 { font-size: 1.5rem; color: var(--emerald); margin-bottom: 14px; }
.notfound p { color: var(--text-soft); margin-bottom: 28px; font-size: 1.05rem; }

/* ==========================================================
   تَنبيهات
   ========================================================== */
.alert {
    padding: 18px 22px;
    border-radius: var(--radius);
    margin-bottom: 22px;
    border-right: 4px solid;
    font-weight: 500;
    background: var(--white);
    box-shadow: var(--shadow-xs);
}
.alert-warn { background: var(--red-soft); color: var(--red-deep); border-color: var(--red); }
.alert-info { background: var(--surface-muted); color: var(--emerald); border-color: var(--teal); }
.alert-ok { background: #e7f4ea; color: var(--green); border-color: var(--green); }

/* ==========================================================
   فيديو
   ========================================================== */
.video-filter-stack {
    margin: -18px 0 28px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
}
.video-source-filters,
.video-scholar-filters {
    margin: 0;
    padding: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(226, 239, 232, .92));
    border: 1px solid rgba(23, 112, 124, .22);
    border-radius: 8px;
    box-shadow: var(--shadow-xs);
}
.video-scholar-filters {
    background: linear-gradient(135deg, rgba(246, 250, 248, .98), rgba(213, 231, 221, .88));
    border-color: rgba(15, 77, 51, .2);
}
.video-filter-group-title {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 3px 6px;
    color: var(--text-soft);
    font-size: 14.4px;
    line-height: 1.4;
    font-weight: 800;
}
.video-filter-group-title i { color: var(--gold-dark); }
.video-scholar-filter-row,
.video-source-filter-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}
.video-scholar-filter-row > .video-filter-group-title,
.video-source-filter-row > .video-filter-group-title {
    margin: 0;
    padding-inline: 4px;
    color: var(--emerald);
    font-size: 15px;
}
.video-filter-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 6px;
}
.video-filter-btn {
    --channel-color: var(--emerald);
    --channel-color-2: var(--emerald-deep);
    --channel-soft: var(--surface-muted);
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 6px 16px 6px 9px;
    border: 1px solid color-mix(in srgb, var(--channel-color) 52%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--channel-soft) 78%, var(--white));
    color: var(--channel-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    transition: transform var(--t), border-color var(--t), color var(--t), background var(--t), box-shadow var(--t);
}
.video-filter-btn::before {
    content: '';
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--channel-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--channel-color) 16%, transparent);
}
.video-filter-btn span {
    flex: 1;
    min-width: 0;
}
.video-filter-btn:hover {
    color: var(--channel-color);
    border-color: var(--channel-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}
.video-filter-btn b {
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--channel-color) 13%, var(--white));
    color: var(--channel-color);
    font-size: 12.5px;
}
.video-filter-btn.active {
    color: var(--white);
    border-color: var(--channel-color);
    background: linear-gradient(135deg, var(--channel-color), var(--channel-color-2));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--channel-color) 24%, transparent);
}
.video-filter-btn.active b {
    color: var(--channel-color);
    background: rgba(255, 255, 255, .9);
}
.video-filter-btn.active::before {
    background: var(--white);
    box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}
.video-filter-btn[hidden] { display: none; }
.video-scholar-picker {
    position: relative;
    min-width: 0;
}
.video-scholar-picker summary {
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid rgba(15, 77, 51, .28);
    border-radius: 5px;
    background: rgba(255, 255, 255, .94);
    color: var(--emerald);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    list-style: none;
    cursor: pointer;
    font-size: 15.6px;
    font-weight: 800;
    transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.video-scholar-picker summary::-webkit-details-marker { display: none; }
.video-scholar-picker summary:hover,
.video-scholar-picker[open] summary {
    border-color: var(--emerald-2);
    background: var(--white);
    box-shadow: 0 4px 12px rgba(4, 26, 16, .1);
}
.video-scholar-picker summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gold) 50%, transparent);
    outline-offset: 2px;
}
.video-scholar-picker-label {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.video-scholar-picker-label i { color: var(--gold-dark); }
.video-scholar-picker-label span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-scholar-picker-count {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--text-soft);
    font-size: 13.1px;
    white-space: nowrap;
}
.video-scholar-picker-chevron {
    color: var(--text-soft);
    font-size: 12.5px;
    transition: transform var(--t);
}
.video-scholar-picker[open] .video-scholar-picker-chevron { transform: rotate(180deg); }
.video-scholar-picker-panel {
    max-width: 100%;
    margin-top: 7px;
    padding: 9px;
    border: 1px solid rgba(15, 77, 51, .18);
    border-radius: 6px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 12px 28px rgba(4, 26, 16, .12);
    overflow-x: hidden;
}
.video-scholar-picker-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}
.video-scholar-search {
    position: relative;
    min-width: 0;
    display: block;
}
.video-scholar-search i {
    position: absolute;
    inset-inline-start: 11px;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 15px;
    pointer-events: none;
}
.video-scholar-search input {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 6px 34px 6px 11px;
    border: 1px solid rgba(4, 26, 16, .18);
    border-radius: 5px;
    background: var(--bg);
    color: var(--emerald);
    font: inherit;
    font-size: 15px;
}
.video-scholar-search input:focus {
    outline: none;
    border-color: var(--emerald-2);
    box-shadow: 0 0 0 3px rgba(15, 77, 51, .1);
}
.video-scholar-clear {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid rgba(179, 38, 30, .22);
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--red-deep);
    background: var(--red-soft);
    font-size: 14.4px;
    font-weight: 800;
    white-space: nowrap;
}
.video-scholar-clear:hover { color: var(--red); border-color: var(--red); }
.video-scholar-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 6px;
}
.video-scholar-option {
    --scholar-color: var(--emerald);
    --scholar-color-2: var(--emerald-2);
    --scholar-soft: var(--surface-muted);
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 6px 9px;
    border: 1px solid color-mix(in srgb, var(--scholar-color) 42%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--scholar-soft) 82%, var(--white));
    color: var(--scholar-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 750;
    text-align: center;
    transition: transform var(--t), border-color var(--t), color var(--t), background var(--t), box-shadow var(--t);
}
.video-scholar-option::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--scholar-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--scholar-color) 14%, transparent);
}
.video-scholar-option span {
    flex: 1;
    min-width: 0;
}
.video-scholar-option b {
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: color-mix(in srgb, var(--scholar-color) 12%, var(--white));
    color: var(--scholar-color);
    font-size: 12.5px;
}
.video-scholar-option:hover {
    color: var(--scholar-color);
    border-color: var(--scholar-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}
.video-scholar-option.active {
    color: var(--white);
    border-color: var(--scholar-color);
    background: linear-gradient(135deg, var(--scholar-color), var(--scholar-color-2));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--scholar-color) 24%, transparent);
}
.video-scholar-option.active b {
    color: var(--scholar-color);
    background: rgba(255, 255, 255, .92);
}
.video-scholar-option.active::before {
    background: var(--white);
    box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}
.video-scholar-option::after {
    content: '✓';
    display: none;
    color: currentColor;
    font-size: 12.5px;
    font-weight: 900;
}
.video-scholar-option.active::after { display: inline-block; }
.video-scholar-option[hidden] { display: none; }
.video-picker-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
}
.video-picker-option {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 8px;
    border: 0;
    border-bottom: 1px solid rgba(4, 26, 16, .09);
    border-inline-start: 3px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: var(--emerald);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 700;
    text-align: right;
    transition: color var(--t), background var(--t), border-color var(--t);
}
.video-picker-option span {
    flex: 1;
    min-width: 0;
}
.video-picker-option b {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 13.1px;
    font-weight: 700;
}
.video-picker-option:hover {
    color: var(--emerald-deep);
    background: var(--bg-2);
}
.video-picker-option.active {
    color: var(--emerald-deep);
    border-inline-start-color: var(--gold);
    background: rgba(213, 162, 66, .13);
    font-weight: 900;
}
.video-picker-option.active b { color: var(--gold-dark); }
.video-picker-option::after {
    content: '\2713';
    display: none;
    color: var(--gold-dark);
    font-size: 12.5px;
    font-weight: 900;
}
.video-picker-option.active::after { display: inline-block; }
.video-picker-option[hidden] { display: none; }
.video-scholar-no-results {
    margin: 8px 0 2px;
    padding: 12px;
    border-radius: 5px;
    background: var(--bg-2);
    color: var(--text-soft);
    font-size: 15px;
    text-align: center;
}
.video-filter-empty {
    text-align: center;
    padding: 34px;
}
@media (min-width: 881px) {
    .video-filter-stack {
        position: relative;
        z-index: 4;
    }
    .video-scholar-picker[open] { z-index: 20; }
    .video-scholar-picker-panel {
        position: absolute;
        z-index: 30;
        inset-block-start: 100%;
        inset-inline: 0;
    }
}
@media (max-width: 880px) {
    .video-filter-stack {
        grid-template-columns: 1fr;
        margin-bottom: 24px;
        gap: 7px;
    }
    .video-source-filters,
    .video-scholar-filters {
        padding: 7px;
    }
    .video-filter-actions {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: 5px;
    }
    .video-filter-btn {
        min-height: 36px;
        padding: 5px 15px 5px 8px;
        font-size: 14.4px;
    }
    .video-scholar-filter-row,
    .video-source-filter-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .video-scholar-filter-row > .video-filter-group-title,
    .video-source-filter-row > .video-filter-group-title { padding-inline: 3px; }
    .video-scholar-picker summary { min-height: 44px; }
    .video-scholar-picker-panel { padding: 7px; }
    .video-scholar-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
    .video-scholar-option {
        min-height: 40px;
        padding: 5px 7px;
        font-size: 14.4px;
    }
    .video-picker-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 8px;
    }
    .video-picker-option {
        min-height: 38px;
        padding: 6px;
        font-size: 14.4px;
    }
}
@media (max-width: 480px) {
    .video-scholar-picker-tools { grid-template-columns: 1fr; }
    .video-scholar-clear { width: 100%; }
}

.video-wrap {
    position: relative;
    padding-top: 56.25%;
    background: var(--emerald-deep);
    border-radius: calc(var(--radius) + 4px);
    overflow: hidden;
    box-shadow: 0 24px 54px rgba(4, 26, 16, .24), 0 0 0 1px rgba(213, 162, 66, .3);
    margin-bottom: 30px;
}
.video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: inherit;
    pointer-events: none;
}
.video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-soft);
    transition: all var(--t);
    display: flex;
    flex-direction: column;
}
.video-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(213,162,66,.3);
}
.video-thumb {
    position: relative;
    padding-top: 56.25%;
    background: var(--emerald);
    overflow: hidden;
    display: block;
}
.video-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow);
}
.video-card:hover .video-thumb img { transform: scale(1.08); }
.video-thumb .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--emerald);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: all var(--t);
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.video-card:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 16px 40px rgba(213,162,66,.5);
}
.video-card .video-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.video-card h3 { font-size: 1.05rem; margin-bottom: 10px; line-height: 1.55; }
.video-card h3 a { color: var(--emerald); }
.video-card h3 a:hover { color: var(--gold-dark); }
.video-card .channel {
    color: var(--text-soft);
    font-size: 16.9px;
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ==========================================================
   مقال
   ========================================================== */
.article-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-soft);
    transition: all var(--t);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.article-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(213,162,66,.3);
    color: inherit;
}
.article-card .article-body { padding: 22px 24px 0; flex: 1; display: flex; flex-direction: column; }
.article-card h3 {
    margin: 0 0 14px;
    line-height: 1.65;
    font-size: 1.22rem;
    color: var(--emerald);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-card .article-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0 16px;
    border-top: 1px solid var(--border-soft);
}
.article-card .article-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13.4px;
    white-space: nowrap;
}
.article-card .article-date i { color: var(--gold-dark); font-size: 12px; }
.article-card .more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-dark);
    font-weight: 700;
    font-size: 15.2px;
    white-space: nowrap;
    transition: gap var(--t);
}
.article-card:hover .more { gap: 14px; }

/* ==========================================================
   شَريط أقتباس فُتنة (للعَرض)
   ========================================================== */
.quote-strip {
    background: linear-gradient(135deg, var(--emerald-deep), var(--emerald));
    color: var(--white);
    padding: 92px 24px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/*
 * فلسفةُ ترويسات الأقسام نفسها: علامةُ اقتباسٍ ضخمةٌ شفيفةٌ تملأ جنبَ
 * اللوحة، وفوق النص علامةٌ صغيرةٌ هادئةُ الذهب بلا زخرف.
 */
.quote-strip::before {
    content: '\f10e';
    position: absolute;
    top: 30px;
    right: 50%;
    transform: translateX(50%);
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 38px;
    line-height: 1;
    color: rgba(242, 212, 137, .85);
}
.quote-strip::after {
    content: '\f10e';
    position: absolute;
    top: 50%;
    inset-inline-start: 6%;
    transform: translateY(-50%) rotate(-12deg);
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: clamp(150px, 26vw, 260px);
    line-height: 1;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
}
/*
 * كلمةُ الافتتاح تحت الهيرو: تلتحم به بلا درزٍ فاتح، وشريطُ الأرقام
 * يجلس تحتها منفصلًا عنها في المساحة الفاتحة، فلا تراكُب بينهما.
 */
.quote-strip--opening { padding-bottom: 64px; }

.quote-strip blockquote {
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    color: var(--white);
    font-weight: 500;
    line-height: 2;
    max-width: 820px;
    margin: 0 auto 22px;
    position: relative;
}
/* روابط العزو في شريط الاقتباس: ذهبية مسطرة وإلا ذابت في اللوحة */
.quote-strip cite a {
    color: var(--gold-light);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgba(213, 162, 66, .6);
}
.quote-strip cite a:hover { color: #fff; text-decoration-color: #fff; }

.quote-strip cite {
    display: block;
    color: var(--gold-light);
    font-size: 15px;
    font-weight: 700;
    font-style: normal;
}

/* ==========================================================
   كَلمات صغيرة / مكوّنات
   ========================================================== */
.tag-pill {
    display: inline-block;
    padding: 5px 14px;
    background: var(--bg-2);
    color: var(--emerald);
    border-radius: 10px;
    font-size: 15.6px;
    font-weight: 600;
    margin: 2px;
}
.tag-pill.gold { background: rgba(213,162,66,.18); color: var(--gold-dark); }
.tag-pill.red { background: var(--red-soft); color: var(--red-deep); }

/* ==========================================================
   صفحات الأرشفة والربط الموضوعي
   ========================================================== */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 44px;
}
.page-link,
.page-gap {
    min-width: 42px;
    min-height: 42px;
    padding: 9px 13px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-soft);
    background: var(--white);
    color: var(--emerald);
    font-weight: 700;
}
.page-link:hover { border-color: var(--gold); color: var(--gold-dark); }
.page-link.current {
    color: var(--white);
    border-color: var(--emerald);
    background: linear-gradient(135deg, var(--emerald), var(--emerald-2));
}
.page-next,
.page-prev { min-width: 145px; }
.page-gap { border: 0; background: transparent; min-width: 26px; }

.source-note,
.policy-contact {
    margin: 24px 0;
    padding: 16px 20px;
    border-right: 4px solid var(--gold);
    border-radius: 5px;
    background: var(--bg-2);
    color: var(--text-soft);
}
.topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 24px 0 6px;
}
.topic-chips a {
    padding: 7px 13px;
    border-radius: 10px;
    background: rgba(213,162,66,.13);
    border: 1px solid rgba(213,162,66,.28);
    color: var(--emerald);
    font-size: 16.3px;
    font-weight: 700;
}
.topic-chips a:hover { background: var(--gold); color: var(--emerald-deep); }
.scholar-topic-chips { margin-bottom: -12px; }
.scholar-topic-chips a {
    background: rgba(15, 77, 51, .09);
    border-color: rgba(15, 77, 51, .22);
    color: var(--emerald-2);
}
.scholar-topic-chips a:hover {
    background: var(--emerald);
    border-color: var(--emerald);
    color: var(--white);
}

.policy-layout { max-width: 920px; }
.policy-article h2 { margin-top: 32px; color: var(--emerald); }
.policy-article h2:first-child { margin-top: 0; }
.policy-article p { line-height: 2; }
.policy-article code { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.policy-updated { color: var(--text-soft); font-size: 1.05rem; border-top: 1px solid var(--border-soft); padding-top: 20px; }

/* ==========================================================
   صفحة التواصل والدعم
   ========================================================== */
.contact-section { background: linear-gradient(180deg, var(--surface-page), var(--surface-muted)); }
.contact-layout { max-width: 1100px; }
.contact-lead {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
.contact-lead h2 {
    margin-bottom: 3px;
    color: var(--emerald);
    font-size: clamp(1.14rem, 1.7vw, 1.3rem);
}
.contact-lead p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.8;
}
.contact-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.contact-method {
    --contact-color: var(--emerald);
    --contact-soft: var(--bg-2);
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 112px;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--contact-color) 24%, var(--border-soft));
    border-block-start: 3px solid var(--contact-color);
    border-radius: 7px;
    background: var(--white);
    color: var(--emerald);
    box-shadow: var(--shadow-xs);
    transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.contact-method:hover {
    color: var(--emerald);
    border-color: color-mix(in srgb, var(--contact-color) 48%, var(--border-soft));
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.contact-method-email {
    --contact-color: var(--gold-dark);
    --contact-soft: #fff8e8;
}
.contact-method-whatsapp {
    --contact-color: #167f5a;
    --contact-soft: #ecfaf4;
}
.contact-method-telegram {
    --contact-color: #1685b8;
    --contact-soft: #edf8fd;
}
.contact-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 7px;
    background: var(--contact-soft);
    color: var(--contact-color);
    font-size: 21px;
}
.contact-method-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.contact-method-label {
    color: var(--contact-color);
    font-size: 15.6px;
    font-weight: 700;
}
.contact-method-value {
    direction: ltr;
    unicode-bidi: isolate;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--emerald);
    font-size: clamp(.92rem, 1.5vw, 1.05rem);
    line-height: 1.55;
    text-align: right;
}
.contact-method small {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 14.4px;
    line-height: 1.55;
}

.support-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(310px, .88fr);
    align-items: center;
    gap: clamp(22px, 4vw, 42px);
    margin-top: 24px;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid rgba(213,162,66,.3);
    border-radius: 10px;
    background:
        radial-gradient(circle at 12% 18%, rgba(213,162,66,.16), transparent 35%),
        linear-gradient(135deg, var(--emerald-deep), var(--emerald-2));
    box-shadow: var(--shadow-lg);
}
.support-panel-copy { color: var(--white); }
.support-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--gold-light);
    font-size: 16.3px;
    font-weight: 700;
}
.support-panel h2 {
    margin-bottom: 9px;
    color: var(--white);
    font-size: clamp(1.25rem, 2.15vw, 1.55rem);
}
.support-panel-copy > p {
    margin: 0;
    color: rgba(255,255,255,.8);
    line-height: 1.9;
}
.support-benefits {
    display: grid;
    gap: 7px;
    margin-top: 17px;
    list-style: none;
}
.support-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: rgba(255,255,255,.9);
    font-size: 17.5px;
}
.support-benefits i {
    margin-top: .45em;
    color: var(--gold-light);
    font-size: 12.5px;
}
.stripe-card {
    position: relative;
    min-width: 0;
    padding: 24px 20px 18px;
    border-radius: 8px;
    background: var(--white);
    text-align: center;
    box-shadow: var(--shadow-md);
}
.stripe-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 8px;
    border-radius: 6px;
    background: #635bff;
    color: var(--white);
    font-size: 22px;
}
.stripe-card h3 {
    margin-bottom: 4px;
    color: var(--emerald);
    font-size: 1.15rem;
}
.stripe-card > p {
    margin: 0;
    color: var(--text-soft);
    font-size: 16.3px;
    line-height: 1.7;
}
.stripe-button-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 82px;
    margin: 11px auto 5px;
    overflow: visible;
}
.stripe-button-wrap stripe-buy-button {
    display: block;
    max-width: 100%;
}
.stripe-card .stripe-trust-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    color: var(--green);
    font-size: 14.4px;
}
.stripe-trust-note i { margin-top: .35em; }

.support-alternatives {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    margin-top: 18px;
    padding: 20px 22px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--shadow-xs);
}
.support-alternatives-label {
    color: var(--gold-dark);
    font-size: 15px;
    font-weight: 700;
}
.support-alternatives h2 {
    margin: 1px 0 2px;
    color: var(--emerald);
    font-size: 1.18rem;
}
.support-alternatives p {
    margin: 0;
    color: var(--text-soft);
    font-size: 16.9px;
}
.support-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.support-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 13px;
    border-radius: 5px;
    color: var(--white);
    font-size: 16.9px;
    font-weight: 700;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.support-action:hover {
    color: var(--white);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.support-action-patreon { background: #6f3cff; }
.support-action-youtube { background: #c5221f; }
.support-action-arrow { font-size: 12.5px; opacity: .75; }

@media (max-width: 900px) {
    .support-panel { grid-template-columns: 1fr; }
    .stripe-card { max-width: 520px; width: 100%; margin-inline: auto; }
    .support-alternatives { grid-template-columns: 1fr; }
    .support-actions { justify-content: flex-start; }
}
@media (max-width: 720px) {
    .contact-methods { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .contact-layout { padding-inline: 16px; }
    .contact-lead { margin-bottom: 14px; }
    .contact-method {
        min-height: 94px;
        padding: 12px;
    }
    .support-panel {
        margin-top: 18px;
        padding: 20px 14px;
        border-radius: 8px;
    }
    .stripe-card { padding: 20px 12px 15px; }
    .support-alternatives { padding: 17px 14px; }
    .support-actions { display: grid; grid-template-columns: 1fr; }
    .support-action { justify-content: center; }
}

.author-card,
.topic-card { text-align: right; height: 100%; }
.author-card .icon,
.topic-card .icon { margin-inline: 0; }
.author-card h2,
.topic-card h2 { color: var(--emerald); font-size: 1.24rem; margin: 14px 0 8px; }
.topic-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.topic-counts span {
    padding: 5px 11px;
    border-radius: 9px;
    background: var(--bg-2);
    color: var(--emerald);
    font-size: 15.6px;
    font-weight: 700;
}
.related-content-grid + .related-content-grid { margin-top: 28px; }
.article-card h2 { margin-bottom: 12px; line-height: 1.5; font-size: 1.18rem; color: var(--emerald); }

@media (max-width: 600px) {
    .pagination { gap: 6px; }
    .page-link, .page-gap { min-width: 38px; min-height: 38px; padding: 7px 10px; }
    .page-next, .page-prev { order: 2; flex: 1 1 46%; }
}

@media (prefers-reduced-motion: reduce) {
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .contact-method,
    .support-action { transition: none !important; }
    .hero::before,
    .hero-logo,
    .hero-badge,
    .hero h1,
    .hero p.lead,
    .hero-actions { animation: none !important; }
    html { scroll-behavior: auto; }
}

/* ==========================================================
   رسوم تَفاعلية
   ========================================================== */
.danger-banner {
    background: linear-gradient(135deg, var(--red-deep), #5b1208);
    color: var(--white);
    padding: 26px 32px;
    border-radius: var(--radius);
    margin: 30px 0;
    box-shadow: var(--shadow-red);
    display: flex;
    align-items: center;
    gap: 22px;
    position: relative;
    overflow: hidden;
}
.danger-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(255,255,255,.04) 12px, rgba(255,255,255,.04) 24px);
}
.danger-banner i {
    font-size: 36px;
    color: var(--gold-light);
    flex-shrink: 0;
    position: relative;
}
.danger-banner-text { position: relative; }
.danger-banner h4 { color: var(--white); margin-bottom: 4px; font-size: 1.1rem; }
.danger-banner p { color: rgba(255,255,255,.85); margin: 0; font-size: 18.1px; line-height: 1.7; }

@media (max-width: 600px) {
    .danger-banner { flex-direction: column; text-align: center; gap: 14px; padding: 22px; }
}

/* ==========================================================
   الكتب والمؤلفات
   ========================================================== */
.books-page-intro { padding-block-end: 48px; }
.books-section { padding-top: 44px; }
.books-overview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    padding: 25px 28px;
    border: 1px solid rgba(23, 112, 124, .24);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(213,231,221,.9));
    box-shadow: var(--shadow-sm);
}
.books-overview-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--emerald), var(--emerald-3));
    color: var(--gold-light);
    font-size: 28px;
    box-shadow: var(--shadow-md);
}
.books-overview h2 { margin: 0 0 3px; font-size: 1.19rem; }
.books-overview p { max-width: 980px; margin: 0; color: var(--text-soft); line-height: 1.85; }

.books-track-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 44px;
}
.books-track-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--white);
    color: var(--emerald);
    font-weight: 700;
    box-shadow: var(--shadow-xs);
}
.books-track-nav a:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.books-track-nav span {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 10px;
    background: var(--bg-2);
    color: var(--gold-dark);
    font-size: 14.4px;
}

.books-track { scroll-margin-top: 110px; }
.books-track + .books-track { margin-top: 68px; }
.books-track-head { max-width: 930px; margin-bottom: 23px; }
.books-track-kicker {
    display: inline-flex;
    margin-bottom: 5px;
    color: var(--gold-dark);
    font-size: 1rem;
    font-weight: 800;
}
.books-track-head h2 { margin-bottom: 7px; }
.books-track-head p { margin: 0; color: var(--text-soft); line-height: 1.9; }
.books-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.book-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    padding: 23px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.book-card::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--border);
}
.book-card--downloadable::before { background: linear-gradient(var(--gold), var(--gold-dark)); }
.book-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.book-card-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 6px;
    background: var(--bg-2);
    color: var(--gold-dark);
    font-size: 18px;
}
.book-card-type {
    padding: 4px 10px;
    border-radius: 9px;
    background: var(--surface-muted);
    color: var(--emerald-2);
    font-size: .95rem;
    font-weight: 800;
}
.book-card h3 { margin: 0 0 5px; font-size: 1.25rem; line-height: 1.55; }
.book-subtitle { margin: 0 0 9px; color: var(--gold-dark); font-size: 1.1rem; font-weight: 700; line-height: 1.65; }
.book-author {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 13px;
    color: var(--text-soft);
    font-size: 1.08rem;
    font-weight: 700;
}
.book-author i { margin-top: .45em; color: var(--gold-dark); font-size: 13.8px; }
.book-description { margin: 0 0 12px; color: var(--text); font-size: 1.15rem; line-height: 1.85; }
.book-relevance {
    margin: 0 0 17px;
    padding: 11px 13px;
    border-radius: 5px;
    background: var(--bg);
    color: var(--text-soft);
    font-size: 1.08rem;
    line-height: 1.75;
}
.book-relevance strong { color: var(--emerald); }
.book-card-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; padding-top: 5px; }
.book-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 1.05rem;
    transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.book-action > i { flex: 0 0 auto; font-size: 17px; }
.book-action > span { display: flex; flex-direction: column; line-height: 1.35; }
.book-action strong { font-size: 1.02rem; }
.book-action small { opacity: .75; font-size: 1.07rem; }
.book-action--download { background: var(--emerald); color: var(--white); box-shadow: var(--shadow-xs); }
.book-action--download:hover { color: var(--gold-light); box-shadow: var(--shadow-md); transform: translateY(-1px); }
/* تلوين أزرار التحميل بحسب الصيغة: PDF أحمر، Word أزرق ملكي. */
.book-action--pdf { background: var(--red); }
.book-action--pdf:hover { background: var(--red-deep); color: var(--white); box-shadow: var(--shadow-red); }
.book-action--doc { background: var(--royal); }
.book-action--doc:hover { background: var(--royal-deep); color: var(--white); box-shadow: var(--shadow-royal); }
.book-action--external { border: 1px solid var(--border); background: var(--white); color: var(--emerald); }
.book-action--external:hover { border-color: var(--gold); color: var(--emerald); transform: translateY(-1px); }
.book-action--reference { border: 1px dashed var(--border); background: var(--bg); color: var(--text-soft); }

/* ===== شبهات وردود =====
   القائمة هي قائمةُ الرسائل نفسها (rs-list): سطرٌ مرقَّم لكل شبهة، أوضحُ
   على الهاتف من البطاقتين المتجاورتين. ولا يخصُّها هنا إلا لونُ القائل. */
.rs-list.shubuhat-list .rs-item-source { color: var(--red-deep); font-weight: 700; }
.rs-list.shubuhat-list a:hover .rs-item-arrow { color: var(--red-deep); }
.shubuhat-empty { color: var(--text-soft); }

/* نصّ الشبهة يُعرض في إطارٍ أحمر مميَّز، فلا يلتبس بكلامنا. */
.shubha-statement {
    margin-bottom: 32px;
    padding: 22px 24px;
    border: 1px solid var(--note-border);
    border-inline-start: 4px solid var(--red);
    border-radius: var(--radius-lg);
    background: var(--red-soft);
}
.shubha-statement h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 13px;
    color: var(--red-deep);
    font-size: 1.17rem;
}
.shubha-statement h2 i { font-size: 17px; }
.shubha-statement p { margin: 0 0 11px; color: var(--text); font-size: 1.15rem; line-height: 1.95; }
.shubha-statement p:last-child { margin-bottom: 0; }
.shubha-statement-source {
    padding-top: 11px;
    border-top: 1px dashed var(--note-border);
    color: var(--text-soft);
    font-size: 1.02rem;
}
/* شارة القائل تُخالف لون بقية الشارات، فاسمُه ليس وسمًا محايدًا. */
.single-page .meta .badge-claimant { background: var(--red-soft); color: var(--red-deep); }
.single-page .meta .badge-claimant i { margin-inline-end: 5px; font-size: 12px; }
.shubha-radd h2 { margin-top: 34px; }
.shubha-radd h3 { margin-top: 26px; color: var(--emerald-2); font-size: 1.25rem; }

/* ===== قائمة الكتب المضغوطة: سطرٌ لكل كتاب يفتح صفحته ===== */
.books-track-count {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--text-soft);
    font-size: 1rem;
    font-weight: 700;
    vertical-align: middle;
}
.books-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.books-list-item { margin: 0; padding: 0; list-style: none; }
.books-list-link {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 62px;
    height: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.books-list-link:hover,
.books-list-link:focus-visible {
    border-color: var(--gold);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.books-list-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 7px;
    background: var(--emerald);
    color: var(--gold-light);
    font-size: 16px;
}
.books-list-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
/* سطران للعنوان على الأكثر، فتبقى صفوف القائمة متساوية والعين تمسحها سريعًا. */
.books-list-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--emerald);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.55;
}
.books-list-author {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.books-list-meta {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.books-list-type { color: var(--text-muted); font-size: .95rem; white-space: nowrap; }
.books-list-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}
.books-list-tag i { font-size: 11px; }
.books-list-tag--download { background: var(--emerald); color: var(--gold-light); }
.books-list-tag--external { border: 1px solid var(--border); background: var(--white); color: var(--teal-deep); }
.books-list-tag--reference { border: 1px dashed var(--border); background: var(--bg); color: var(--text-muted); }
.books-list-arrow { flex: 0 0 auto; color: var(--text-muted); font-size: 13px; transition: transform var(--t-fast), color var(--t-fast); }
.books-list-link:hover .books-list-arrow { color: var(--gold-dark); transform: translateX(-3px); }

/* ===== صفحة الكتاب المفرد ===== */
.book-single-subtitle { margin: 6px 0 0; color: var(--gold-dark); font-size: 1.15rem; font-weight: 700; line-height: 1.7; }
.book-single-lead {
    padding-inline-start: 14px;
    border-inline-start: 3px solid var(--gold);
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.9;
}
.book-outline { margin: 0 0 22px; padding-inline-start: 0; list-style: none; counter-reset: book-outline; }
.book-outline li {
    position: relative;
    padding: 9px 40px 9px 0;
    border-bottom: 1px dashed var(--border-soft);
    counter-increment: book-outline;
    line-height: 1.85;
}
.book-outline li:last-child { border-bottom: 0; }
.book-outline li::before {
    content: counter(book-outline);
    position: absolute;
    inset-inline-start: 0;
    top: 11px;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 6px;
    background: var(--bg-2);
    color: var(--emerald);
    font-size: .95rem;
    font-weight: 700;
}
.book-single-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--bg-3);
}
.book-single-articles { margin-top: 32px; }
.book-single-articles h2 { margin: 0 0 14px; font-size: 1.22rem; }
.book-article-links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.book-article-links li { margin: 0; padding: 0; list-style: none; }
.book-article-links a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: var(--emerald);
    font-size: 1.08rem;
    line-height: 1.7;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.book-article-links a:hover { border-color: var(--gold); box-shadow: var(--shadow-xs); }
.book-article-links i { margin-top: .4em; flex: 0 0 auto; color: var(--gold-dark); font-size: 14px; }

.section-suggestion {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-top: 62px;
    padding: 24px 26px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--emerald), var(--emerald-2));
    color: rgba(255,255,255,.86);
    box-shadow: var(--shadow-lg);
}
.section-suggestion-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: rgba(213,162,66,.15);
    color: var(--gold-light);
    font-size: 22px;
}
.section-suggestion h2 { margin: 0 0 2px; color: var(--white); font-size: 1.28rem; }
.section-suggestion p { margin: 0; color: rgba(255,255,255,.78); font-size: 1.15rem; }
.section-suggestion .btn { white-space: nowrap; }

@media (max-width: 780px) {
    .books-track-nav,
    .books-list,
    .books-grid { grid-template-columns: 1fr; }
    .books-list-meta { align-items: flex-end; }
    .section-suggestion { grid-template-columns: auto 1fr; }
    .section-suggestion .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 520px) {
    .books-page-intro { padding-block-end: 34px; }
    .books-section { padding-top: 30px; }
    .books-overview { grid-template-columns: 1fr; padding: 20px 17px; }
    .books-overview-icon { width: 54px; height: 54px; border-radius: 8px; font-size: 23px; }
    .books-track-nav { margin-bottom: 34px; }
    .books-track + .books-track { margin-top: 52px; }
    .book-card { padding: 19px 17px; }
    .book-card-actions { display: grid; grid-template-columns: 1fr; }
    .book-action { width: 100%; }
    /* على الجوال يهبط النوع والشارة تحت العنوان بدل مزاحمته. */
    .books-list-link { flex-wrap: wrap; padding: 12px; }
    .books-list-body { flex: 1 1 100%; order: 2; }
    .books-list-meta { flex: 1 1 100%; order: 3; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; }
    .books-list-arrow { display: none; }
    .book-single-actions { display: grid; grid-template-columns: 1fr; }
    .book-outline li { padding-inline-end: 34px; }
    .section-suggestion { grid-template-columns: 1fr; padding: 21px 18px; }
}


/* ==========================================================
   الميزان — القسم المنهجي لكشف الحدادية
   ========================================================== */

/* --- البوابة --- */
.mz-gate {
    position: relative;
    overflow: hidden;
    padding: 78px 0 70px;
    color: var(--white);
    background:
        radial-gradient(circle at 12% 18%, rgba(242,212,137,.16), transparent 32%),
        radial-gradient(circle at 88% 82%, rgba(179,38,30,.18), transparent 34%),
        linear-gradient(140deg, var(--emerald-deep), var(--emerald-2) 62%, var(--emerald-3));
}
.mz-gate::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 54px 54px;
    pointer-events: none;
}
.mz-gate-inner { position: relative; max-width: 900px; text-align: center; }
.mz-gate-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 18px;
    border: 1px solid rgba(213,162,66,.42);
    border-radius: 999px;
    background: rgba(213,162,66,.10);
    color: var(--gold-light);
    font-size: 1.1rem;
    font-weight: 700;
}
.mz-gate h1 {
    margin-bottom: 10px;
    color: var(--white);
    font-size: clamp(1.88rem, 4.55vw, 2.87rem);
    font-weight: 900;
}
.mz-gate-tagline {
    margin-bottom: 30px;
    color: var(--gold-light);
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    font-weight: 500;
}
.mz-gate-word {
    max-width: 760px;
    margin: 0 auto 30px;
    padding: 26px 28px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg);
    background: rgba(3,20,12,.34);
    text-align: right;
}
.mz-gate-word p { margin-bottom: .9em; color: rgba(255,255,255,.86); font-size: 1.42rem; line-height: 2.05; }
.mz-gate-word p:last-child { margin-bottom: 0; }
.mz-gate-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mz-stat {
    padding: 10px 20px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.80);
    font-size: 1.15rem;
}
.mz-stat strong { color: var(--gold-light); font-size: 1.4rem; font-weight: 800; }

/* --- الطريق والمراحل --- */
.mz-path-section { background: linear-gradient(180deg, var(--bg), #fff 40%, var(--bg)); }
.mz-stage + .mz-stage { margin-top: 62px; }
.mz-stage-head {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 2px solid var(--border-soft);
}
.mz-stage-icon {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--emerald-2), var(--emerald-deep));
    color: var(--gold-light);
    font-size: 1.8rem;
    box-shadow: var(--shadow-md);
}
.mz-stage-label {
    display: block;
    margin-bottom: 3px;
    color: var(--gold-dark);
    font-size: 1.1rem;
    font-weight: 800;
}
.mz-stage-head h3 { margin-bottom: 8px; font-size: clamp(1.33rem, 2.2vw, 1.52rem); }
.mz-stage-head p { margin: 0; color: var(--text-soft); font-size: 1.24rem; line-height: 1.95; }

.mz-chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(324px, 1fr));
    gap: 18px;
}
.mz-chapter-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
    overflow: hidden;
}
.mz-chapter-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), transparent);
    opacity: 0;
    transition: opacity var(--t);
}
.mz-chapter-card:hover {
    transform: translateY(-4px);
    border-color: rgba(213,162,66,.55);
    box-shadow: var(--shadow-md);
    color: var(--text);
}
.mz-chapter-card:hover::before { opacity: 1; }
.mz-chapter-num {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 18px;
    color: var(--text-muted);
    opacity: .5;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}
.mz-chapter-card:hover .mz-chapter-num { color: var(--gold); opacity: .75; }
.mz-chapter-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 7px;
    background: var(--bg-2);
    color: var(--emerald);
    font-size: 1.12rem;
    transition: background var(--t), color var(--t);
}
.mz-chapter-card:hover .mz-chapter-icon { background: var(--emerald); color: var(--gold-light); }
.mz-chapter-card h4 { margin-bottom: 2px; font-size: 1.24rem; font-weight: 800; }
.mz-chapter-sub {
    display: block;
    margin-bottom: 11px;
    color: var(--gold-dark);
    font-size: 1.12rem;
    font-weight: 600;
}
.mz-chapter-card p {
    flex: 1;
    margin-bottom: 16px;
    color: var(--text-soft);
    font-size: 1.15rem;
    line-height: 1.92;
}
.mz-chapter-go {
    color: var(--emerald);
    font-size: 1.08rem;
    font-weight: 800;
}
.mz-chapter-go i { transition: transform var(--t-fast); }
.mz-chapter-card:hover .mz-chapter-go i { transform: translateX(-5px); }

/* --- العهد --- */
.mz-oath { max-width: 860px; }
.mz-oath h2 { margin-bottom: 14px; }
.mz-oath > p { color: var(--text-soft); line-height: 2; }
.mz-oath-list { margin: 20px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mz-oath-list li {
    position: relative;
    padding: 14px 52px 14px 18px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--bg);
    font-size: 1.4rem;
}
.mz-oath-list li::before {
    content: '\f00c';
    position: absolute;
    inset-inline-start: 16px;
    inset-block-start: 15px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--green);
    font-size: 1.12rem;
}
.mz-oath-seal {
    margin: 0;
    padding-inline-start: 16px;
    border-inline-start: 3px solid var(--gold);
    color: var(--emerald);
    font-weight: 600;
}

/* --- ترويسة الباب --- */
.mz-chapter-hero {
    position: relative;
    overflow: hidden;
    padding: 62px 0 56px;
    color: var(--white);
    background:
        radial-gradient(circle at 82% 24%, rgba(242,212,137,.14), transparent 30%),
        linear-gradient(135deg, var(--emerald-deep), var(--emerald-2));
}
.mz-chapter-hero-inner { max-width: 860px; }
.mz-chapter-stage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 16px;
    border: 1px solid rgba(213,162,66,.38);
    border-radius: 999px;
    background: rgba(213,162,66,.10);
    color: var(--gold-light);
    font-size: 1.05rem;
    font-weight: 700;
}
.mz-chapter-order {
    display: block;
    margin-bottom: 16px;
    color: rgba(255,255,255,.46);
    font-size: 1.05rem;
    font-weight: 700;
}
.mz-chapter-hero h1 { margin-bottom: 14px; color: var(--white); font-size: clamp(1.61rem, 3.45vw, 2.21rem); line-height: 1.6; }
.mz-chapter-subtitle { margin: 0; color: var(--gold-light); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 500; }

/* --- تخطيط الباب --- */
.mz-chapter-section { background: linear-gradient(180deg, var(--bg), #fff 30%, var(--bg)); }
.mz-chapter-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 44px;
    align-items: start;
}
.mz-chapter-body { max-width: 760px; }

.mz-outline {
    position: sticky;
    inset-block-start: 96px;
    order: 2;
    padding: 22px 20px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-xs);
}
.mz-outline-title {
    display: block;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--emerald);
    font-size: 1.12rem;
    font-weight: 800;
}
.mz-outline ol { margin: 0; padding: 0; list-style: none; counter-reset: mz-out; }
.mz-outline li { counter-increment: mz-out; }
.mz-outline li + li { margin-top: 3px; }
.mz-outline a {
    display: block;
    padding: 8px 30px 8px 8px;
    position: relative;
    border-radius: 5px;
    color: var(--text-soft);
    font-size: 1.04rem;
    line-height: 1.6;
    transition: background var(--t-fast), color var(--t-fast);
}
.mz-outline a::before {
    content: counter(mz-out, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 8px;
    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 800;
}
.mz-outline a:hover { background: var(--bg-2); color: var(--emerald); }

/* --- لبنات المتن --- */
.mz-lead {
    margin-bottom: 34px;
    padding: 26px 26px 26px 24px;
    border-inline-start: 4px solid var(--gold);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(213,162,66,.10), rgba(213,162,66,.03));
}
.mz-lead p {
    margin-bottom: .85em;
    color: var(--emerald);
    font-size: 1.58rem;
    font-weight: 500;
    line-height: 2.05;
}
.mz-lead p:last-child { margin-bottom: 0; }

.mz-prose { margin-bottom: 26px; }
.mz-prose p { color: var(--text); font-size: 1.5rem; line-height: 2.1; margin-bottom: 1.05em; }
.mz-prose p:last-child { margin-bottom: 0; }

.mz-heading {
    position: relative;
    margin: 54px 0 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--border-soft);
}
.mz-heading:first-child { margin-top: 0; }
/* شارة المحور: تُميَّز بخلفية وإطار حتى لا تبدو كلمةً سابحة فوق العنوان. */
.mz-heading-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 8px 20px 8px 16px;
    border: 1px solid rgba(213,162,66,.45);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(213,162,66,.16), rgba(213,162,66,.06));
    color: var(--gold-dark);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5;
}
.mz-heading-eyebrow::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold-dark);
    flex: none;
}
.mz-heading h2 { margin: 0; font-size: clamp(1.5rem, 2.5vw, 1.74rem); }
.mz-anchor {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 16px;
    color: var(--text-muted);
    font-size: .95rem;
    opacity: 0;
    transition: opacity var(--t-fast), color var(--t-fast);
}
.mz-heading:hover .mz-anchor, .mz-asl-head:hover .mz-anchor { opacity: 1; }
.mz-anchor:hover { color: var(--gold-dark); }

.mz-callout {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    margin: 30px 0;
    padding: 22px 22px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-xs);
}
.mz-callout-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 7px;
    font-size: 1.1rem;
}
.mz-callout-body h3 { margin-bottom: 7px; font-size: 1.36rem; }
.mz-callout-body p { margin-bottom: .7em; color: var(--text); font-size: 1.44rem; line-height: 2; }
.mz-callout-body p:last-child { margin-bottom: 0; }
.mz-callout-rule { border-color: rgba(12,56,38,.22); background: linear-gradient(135deg, rgba(12,56,38,.055), transparent); }
.mz-callout-rule .mz-callout-icon { background: var(--emerald); color: var(--gold-light); }
.mz-callout-gold { border-color: rgba(213,162,66,.5); background: linear-gradient(135deg, rgba(213,162,66,.12), transparent); }
.mz-callout-gold .mz-callout-icon { background: linear-gradient(140deg, var(--gold), var(--gold-dark)); color: #fff; }
.mz-callout-warn { border-color: rgba(179,38,30,.3); background: var(--red-soft); }
.mz-callout-warn .mz-callout-icon { background: var(--red); color: #fff; }
.mz-callout-warn .mz-callout-body h3 { color: var(--red-deep); }
.mz-callout-note { border-color: var(--border); background: var(--bg-3); }
.mz-callout-note .mz-callout-icon { background: var(--emerald-3); color: #fff; }

.mz-quote { margin: 30px 0; padding: 0; }
.mz-quote blockquote { margin: 0; padding: 20px 24px; border-radius: var(--radius); background: var(--bg-2); }
.mz-quote blockquote p { margin: 0; color: var(--emerald); font-size: 1.52rem; line-height: 2.05; font-weight: 500; }
.mz-quote figcaption { margin-top: 8px; padding-inline-start: 24px; color: var(--text-muted); font-size: 1.1rem; }
.mz-quote-ayah blockquote {
    border-inline-start: 4px solid var(--green);
    background: rgba(30,111,54,.06);
    text-align: center;
}
.mz-quote-ayah blockquote p { color: var(--green); font-weight: 700; }
.mz-quote-hadith blockquote { border-inline-start: 4px solid var(--emerald); }
.mz-quote-athar blockquote { border-inline-start: 4px solid var(--gold); }
.mz-quote-plain blockquote { border-inline-start: 4px solid var(--border); }

.mz-cards { margin: 32px 0; }
.mz-cards-title { margin-bottom: 16px; font-size: 1.4rem; }
.mz-cards-grid { display: grid; gap: 12px; }
.mz-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 15px;
    padding: 18px 18px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mz-card:hover { border-color: rgba(213,162,66,.45); box-shadow: var(--shadow-sm); }
.mz-card-num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: linear-gradient(140deg, var(--emerald-2), var(--emerald-deep));
    color: var(--gold-light);
    font-size: 1.05rem;
    font-weight: 800;
}
.mz-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: var(--bg-2);
    color: var(--emerald);
    font-size: 1.02rem;
}
.mz-card-body h4 { margin-bottom: 5px; font-size: 1.33rem; font-weight: 700; }
.mz-card-body p { margin-bottom: .6em; color: var(--text-soft); font-size: 1.4rem; line-height: 1.95; }
.mz-card-body p:last-child { margin-bottom: 0; }

/* --- الكفّتان --- */
.mz-contrast { margin: 34px 0; }
.mz-contrast-title { margin-bottom: 16px; font-size: 1.4rem; }
.mz-contrast-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mz-pan { padding: 20px 20px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.mz-pan-label {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 800;
}
.mz-pan ul { margin: 0; padding: 0; list-style: none; }
.mz-pan li {
    position: relative;
    padding: 8px 22px 8px 0;
    font-size: 1.38rem;
    line-height: 1.85;
}
.mz-pan li + li { border-top: 1px dashed var(--border-soft); }
.mz-pan li::before {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 12px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.9rem;
}
.mz-pan-sunna { border-color: rgba(30,111,54,.3); background: rgba(30,111,54,.05); }
.mz-pan-sunna .mz-pan-label { background: var(--green); color: #fff; }
.mz-pan-sunna li::before { content: '\f00c'; color: var(--green); }
.mz-pan-ghuluw { border-color: rgba(179,38,30,.3); background: var(--red-soft); }
.mz-pan-ghuluw .mz-pan-label { background: var(--red); color: #fff; }
.mz-pan-ghuluw li::before { content: '\f00d'; color: var(--red); }

/* --- بطاقات الأصول --- */
.mz-usul { margin: 32px 0; display: grid; gap: 18px; }
.mz-asl {
    position: relative;
    padding: 22px 22px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-xs);
    scroll-margin-top: 90px;
}
.mz-asl:target { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(213,162,66,.16), var(--shadow-md); }
.mz-asl-head {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}
.mz-asl-num {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: linear-gradient(140deg, var(--red), var(--red-deep));
    color: #fff;
    font-size: 1.02rem;
    font-weight: 900;
}
.mz-asl-head h3 { margin: 0; font-size: 1.39rem; font-weight: 800; line-height: 1.55; }
.mz-asl-part { position: relative; padding-inline-start: 15px; }
.mz-asl-part + .mz-asl-part { margin-top: 15px; }
.mz-asl-tag {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 11px;
    border-radius: 3px;
    font-size: 1.15rem;
    font-weight: 800;
}
.mz-asl-part p { margin-bottom: .6em; font-size: 1.42rem; line-height: 1.98; }
.mz-asl-part p:last-child { margin-bottom: 0; }
.mz-asl-image { border-inline-start: 3px solid rgba(179,38,30,.4); }
.mz-asl-image .mz-asl-tag { background: var(--red-soft); color: var(--red-deep); }
.mz-asl-image p { color: var(--text-soft); }
.mz-asl-naqd { border-inline-start: 3px solid var(--green); }
.mz-asl-naqd .mz-asl-tag { background: rgba(30,111,54,.1); color: var(--green); }
.mz-asl-naqd p { color: var(--text); }
.mz-asl-question {
    margin: 15px 0 0;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    color: var(--emerald);
    font-size: 1.38rem;
    font-weight: 600;
    line-height: 1.85;
}
.mz-asl-question span { color: var(--gold-dark); font-weight: 900; margin-inline-end: 7px; }

/* --- الأطوار --- */
.mz-timeline { margin: 32px 0; padding: 0 24px 0 0; list-style: none; position: relative; }
.mz-timeline::before {
    content: '';
    position: absolute;
    inset-block: 10px;
    inset-inline-start: 7px;
    width: 2px;
    background: linear-gradient(180deg, var(--gold), rgba(213,162,66,.2));
}
.mz-timeline-item { position: relative; padding-bottom: 26px; }
.mz-timeline-item::before {
    content: '';
    position: absolute;
    inset-inline-start: -22px;
    inset-block-start: 8px;
    width: 14px;
    height: 14px;
    border: 3px solid var(--white);
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 2px var(--gold);
}
.mz-timeline-era {
    display: inline-block;
    margin-bottom: 5px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--emerald);
    color: var(--gold-light);
    font-size: 1rem;
    font-weight: 700;
}
.mz-timeline-body h3 { margin-bottom: 8px; font-size: 1.37rem; }
.mz-timeline-body p { margin-bottom: .7em; color: var(--text-soft); font-size: 1.42rem; line-height: 2; }
.mz-timeline-body p:last-child { margin-bottom: 0; }

/* --- الإلزام --- */
.mz-ilzam {
    position: relative;
    margin: 34px 0;
    padding: 26px 24px 22px;
    border-radius: var(--radius-lg);
    background: linear-gradient(140deg, var(--emerald-deep), var(--emerald-2));
    color: rgba(255,255,255,.88);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.mz-ilzam::after {
    content: '';
    position: absolute;
    inset: auto -40px -80px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(213,162,66,.14), transparent 65%);
}
.mz-ilzam-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 6px 16px;
    border: 1px solid rgba(213,162,66,.45);
    border-radius: 999px;
    background: rgba(213,162,66,.12);
    color: var(--gold-light);
    font-size: 1.02rem;
    font-weight: 800;
}
.mz-ilzam p { position: relative; margin-bottom: .8em; font-size: 1.46rem; line-height: 2.05; }
.mz-branches { position: relative; margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.mz-branches li {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(0, 1.4fr);
    gap: 14px;
    align-items: center;
    padding: 13px 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius);
    background: rgba(255,255,255,.05);
}
.mz-branch-if { color: var(--gold-light); font-size: 1.36rem; font-weight: 700; }
.mz-branch-then { color: rgba(255,255,255,.82); font-size: 1.36rem; line-height: 1.8; }

/* --- المحاورة --- */
.mz-dialogue { margin: 32px 0; }
.mz-dialogue-title { margin-bottom: 14px; font-size: 1.4rem; }
.mz-turn + .mz-turn { margin-top: 14px; }
.mz-turn-tag {
    display: inline-block;
    margin-inline-end: 9px;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 1.15rem;
    font-weight: 800;
    vertical-align: 2px;
}
.mz-turn-q {
    margin: 0 0 8px;
    padding: 13px 16px;
    border-radius: var(--radius) var(--radius) var(--radius) 4px;
    background: var(--red-soft);
    color: var(--text);
    font-size: 1.43rem;
    line-height: 1.9;
}
.mz-turn-q .mz-turn-tag { background: var(--red); color: #fff; }
.mz-turn-a {
    padding: 14px 17px;
    border-inline-start: 3px solid var(--green);
    border-radius: var(--radius);
    background: rgba(30,111,54,.05);
}
.mz-turn-a .mz-turn-tag { background: var(--green); color: #fff; }
.mz-turn-a p { margin-bottom: .6em; font-size: 1.43rem; line-height: 2; }
.mz-turn-a p:last-child { margin-bottom: 0; }

/* --- الخطوات --- */
.mz-steps { margin: 32px 0; }
.mz-steps-title { margin-bottom: 14px; font-size: 1.4rem; }
.mz-steps ol { margin: 0; padding: 0; list-style: none; counter-reset: mz-step; }
.mz-steps li {
    counter-increment: mz-step;
    position: relative;
    padding: 4px 0 18px;
    border-inline-start: 2px solid var(--border-soft);
    margin-inline-start: 15px;
    padding-inline-start: 22px;
}
.mz-steps li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.mz-steps li::before {
    content: counter(mz-step);
    position: absolute;
    inset-inline-start: -16px;
    inset-block-start: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--emerald);
    color: var(--gold-light);
    font-size: 1rem;
    font-weight: 800;
}
.mz-steps li strong { display: block; margin-bottom: 4px; color: var(--emerald); font-size: 1.55rem; }
.mz-steps li p { margin-bottom: .5em; color: var(--text-soft); font-size: 1.4rem; line-height: 1.95; }
.mz-steps li p:last-child { margin-bottom: 0; }

/* --- ختم الباب --- */
.mz-seal {
    position: relative;
    margin: 44px 0 0;
    padding: 28px 28px 26px;
    border: 1px solid rgba(213,162,66,.42);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(213,162,66,.12), rgba(213,162,66,.03));
    text-align: center;
}
.mz-seal-mark {
    display: block;
    width: 42px;
    height: 3px;
    margin: 0 auto 16px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}
.mz-seal p {
    margin-bottom: .8em;
    color: var(--emerald);
    font-size: 1.56rem;
    font-weight: 600;
    line-height: 2.05;
}
.mz-seal p:last-child { margin-bottom: 0; }

/* --- تنقّل الأبواب --- */
.mz-chapter-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mz-nav-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 20px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--text);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.mz-nav-card:hover { transform: translateY(-3px); border-color: rgba(213,162,66,.5); box-shadow: var(--shadow-sm); color: var(--text); }
.mz-nav-tag { color: var(--gold-dark); font-size: 1.02rem; font-weight: 800; }
.mz-nav-card strong { color: var(--emerald); font-size: 1.3rem; }
.mz-nav-sub { color: var(--text-muted); font-size: 1.02rem; }
.mz-nav-next { text-align: left; }
.mz-nav-index { background: var(--bg-2); text-align: center; }

.mz-suggest-section { padding-top: 0; }

@media (max-width: 1080px) {
    .mz-chapter-layout { grid-template-columns: 1fr; gap: 26px; }
    .mz-outline { position: static; order: -1; }
    .mz-outline ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 3px; }
    .mz-chapter-body { max-width: none; }
}
@media (max-width: 760px) {
    .mz-gate { padding: 54px 0 50px; }
    .mz-gate-word { padding: 20px 18px; }
    .mz-stage-head { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
    .mz-stage-icon { width: 58px; height: 58px; border-radius: 9px; font-size: 1.4rem; }
    .mz-chapter-grid { grid-template-columns: 1fr; }
    .mz-contrast-grid { grid-template-columns: 1fr; }
    .mz-chapter-nav { grid-template-columns: 1fr; }
    .mz-nav-next { text-align: right; }
    .mz-branches li { grid-template-columns: 1fr; gap: 5px; }
    .mz-callout { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
    .mz-callout-icon { width: 40px; height: 40px; border-radius: 6px; font-size: .96rem; }
    .mz-card { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
    .mz-card-num, .mz-card-icon { width: 38px; height: 38px; border-radius: 6px; font-size: .95rem; }
    .mz-asl-head { grid-template-columns: 44px minmax(0, 1fr); gap: 11px; }
    .mz-asl-num { width: 44px; height: 44px; border-radius: 7px; font-size: 1.05rem; }
    .mz-lead { padding: 20px 18px; }
    .mz-lead p { font-size: 1.42rem; }
    .mz-seal { padding: 22px 18px; }
}

/* ==========================================================
   قسم «قال الكبار»
   ========================================================== */
.kb-hero {
    padding: 62px 0 46px;
    /* التدرج يقرأ لوحة القسم إن عُرِّفت (sec-hero--<key>)، وإلا فلوحة بصائر. */
    background: linear-gradient(160deg, var(--hero-1, var(--emerald-deep)), var(--hero-2, var(--emerald-2)) 55%, var(--hero-3, var(--emerald-3)));
    color: #fff;
    text-align: center;
}
.kb-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.kb-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 18px;
    border: 1px solid rgba(213,162,66,.45);
    border-radius: 999px;
    color: var(--gold-light);
    font-size: .86rem; font-weight: 700;
}
.kb-hero h1 { margin: 0; font-size: clamp(1.61rem, 3.45vw, 2.27rem); font-weight: 900; color: #fff; }
.kb-hero-tagline { margin: 0; max-width: 40ch; color: var(--gold-light); font-size: 1.12rem; font-weight: 600; }
/*
 * نداءُ الافتتاح: يخاطب المحتجَّ نفسه، فهو قفلُ الهيرو لا حاشيتَه. ولذلك يأخذ
 * لوحةً ذهبيةً على منوال «الكلمة الخاتمة» في البيان، تنفصل عن زرقة الهيرو
 * انفصالًا تامًّا؛ ومقاسُ خطِّه مقاسُ البيان نفسه فلا يُقرأ حاشيةً صغيرة.
 * والنصُّ مصفوفٌ إلى أول السطر لا موسَّطًا، لأنه فقرةٌ تُقرأ لا شعارٌ يُلمح.
 */
.kb-hero-call {
    margin: 10px 0 2px;
    max-width: 58ch;
    padding: 26px 30px;
    border: 2px solid var(--gold-dark);
    border-radius: 10px;
    background: linear-gradient(135deg, #f7ecc8, #e8d296 55%, #dcc484);
    color: var(--emerald-deep);
    font-size: 1.5rem; font-weight: 750; line-height: 2;
    text-align: start;
    text-wrap: pretty;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .7);
}
/* عنوانٌ للفهارس وقارئات الشاشة وحدها، لا يُرسم في الصفحة. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/*
 * في ترويسات الأقسام (دون لوحة الرئيسية): اللوحةُ الذهبية تضيق حتى تقارب
 * نسبة لوحة الميزان، فتُقرأ كتلةً وقورة لا شريطًا ممدودًا.
 */
.kb-hero:not(.hm-feature) .kb-hero-call { max-width: 660px; }
.kb-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.kb-stat {
    padding: 8px 18px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius);
    background: rgba(255,255,255,.06);
    font-size: .92rem;
}
.kb-stat strong { color: var(--gold-light); font-size: 1.18rem; font-weight: 900; }

.kb-intro-section { padding: 46px 0 10px; }
/* مقاسُ القراءة واحدٌ في الصفحة كلِّها: المقدمة والنصوص والشروح على 1.5rem كالمقالات. */
.kb-intro { margin-inline: auto; }
.kb-intro p { margin-bottom: 1.1em; font-size: 1.5rem; line-height: 2.05; color: var(--text); }
.kb-intro p:first-child {
    padding-inline-start: 20px;
    border-inline-start: 4px solid var(--gold);
    font-weight: 700;
}
/* قاعدةٌ تُختم بها المقدمة، تُبرَز لتعلق في الذهن. */
.kb-intro p.kb-intro-highlight {
    margin-top: 1.4em;
    margin-bottom: 0;
    padding: 20px 24px;
    border: 1px solid rgba(138, 28, 23, .22);
    border-inline-start: 5px solid var(--red);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(138, 28, 23, .07));
    color: var(--emerald);
    font-weight: 850;
    text-align: center;
    box-shadow: 0 10px 24px rgba(96, 24, 18, .09);
}
.kb-intro p.kb-intro-highlight::first-letter { font-size: 1em; }
@media (max-width: 640px) {
    .kb-intro p.kb-intro-highlight { padding: 16px 14px; }
}

.kb-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
/* المرشِّحات في ذيل القسم لا في صدره، لئلا تُطيل الصفحة قبل أن يبلغ القارئُ النقول. */
.kb-filters--end {
    margin: 34px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--border);
    scroll-margin-top: 90px;
}
.kb-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--text-soft);
    font: inherit; font-size: .93rem; font-weight: 700;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.kb-chip:hover { border-color: var(--gold); color: var(--text); }
.kb-chip.is-active { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.kb-chip-num {
    min-width: 22px; padding: 1px 6px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--text-soft);
    font-size: .78rem; font-weight: 800;
}
.kb-chip.is-active .kb-chip-num { background: rgba(255,255,255,.18); color: var(--gold-light); }

/* مرشِّح القائل: شريطٌ واحد خفيف قبل أول نقل، وقائمته مرتبةٌ ترتيبَ الصفحة الزمني. */
.kb-source-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-bottom: 24px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-xs);
}
.kb-source-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .98rem; font-weight: 800; color: var(--text-soft);
}
.kb-source-label i { color: var(--gold); }
.kb-source-select {
    flex: 1 1 240px;
    max-width: 430px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-2);
    color: var(--text);
    font: inherit; font-size: .95rem; font-weight: 700;
    cursor: pointer;
    transition: border-color var(--t);
}
.kb-source-select:hover, .kb-source-select:focus { border-color: var(--gold); outline: none; }

.kb-grid { display: flex; flex-direction: column; gap: 20px; }
/* النصّ أولًا ثم الشرح تحته: ترتيبٌ يتبع القراءة، ولا يترك فراغًا حين يقصر النصّ ويطول الشرح. */
.kb-card {
    display: block;
    overflow: clip;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-xs);
    scroll-margin-top: 90px;
}
.kb-card[hidden] { display: none; }
.kb-col { min-width: 0; padding: 30px 32px 26px; }

/* الكفة اليمنى: النصّ المنقول
   لوحةٌ زمرديّة داكنة تفصل النقلَ عمّا حوله فصلًا بيّنًا، عليها ختمُ اقتباسٍ
   ذهبيّ، وخلفها ظلُّ علامة التنصيص، ويحدُّها من أسفل خيطٌ ذهبيّ. */
.kb-col-quote {
    --sec: #650046;
    position: relative;
    isolation: isolate;
    padding: 30px 32px 32px;
    background:
        radial-gradient(circle at 92% 6%, rgba(213, 162, 66, .22) 0, rgba(213, 162, 66, 0) 44%),
        radial-gradient(circle at 4% 94%, rgba(0, 0, 0, .30) 0, rgba(0, 0, 0, 0) 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--sec) 76%, #000) 0%, var(--sec) 56%, color-mix(in srgb, var(--sec) 86%, #fff) 100%);
}
/* ظلُّ علامة الاقتباس: زخرفةٌ خافتة خلف النصّ لا تزاحم قراءته. */
.kb-col-quote::before {
    content: '\f10e';
    position: absolute;
    z-index: -1;
    inset-inline-start: 16px;
    inset-block-end: -26px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 148px;
    line-height: 1;
    color: rgba(242, 212, 137, .085);
    pointer-events: none;
}
/* خيطٌ ذهبيّ معدنيّ يفصل النقلَ عن بيانه. */
.kb-col-quote::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 3px;
    background: var(--gold-metal);
}
.kb-quote-wrap { position: relative; }
/* ختمُ الاقتباس: أيقونةٌ ذهبيّة تتصدّر النقل. */
.kb-quote-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-inline-end: 12px;
    vertical-align: 4px;
    border: 1px solid rgba(242, 212, 137, .36);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(242, 212, 137, .22), rgba(213, 162, 66, .07));
    color: var(--gold-light);
    font-size: .96rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 16px rgba(4, 26, 16, .22);
}
.kb-quote { margin: 0; padding: 0; border: 0; }
.kb-quote p {
    margin: 0;
    padding-inline-start: 22px;
    border-inline-start: 3px solid rgba(242, 212, 137, .45);
    color: #f4f8f5;
    font-size: 1.55rem; font-weight: 500; line-height: 2.1;
    text-wrap: pretty;
}
.kb-quote-attribution { color: var(--gold-light); font-weight: 850; }

/* ==========================================================
   القراءةُ الصوتيّة للبصيرة: شريطٌ ذهبيّ على لوحة النقل الداكنة
   ========================================================== */
.kb-audio {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 12px 14px;
    border: 1px solid rgba(242, 212, 137, .26);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(242, 212, 137, .13), rgba(0, 0, 0, .18));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
    transition: border-color var(--t), box-shadow var(--t);
}
.kb-audio.is-playing {
    border-color: rgba(242, 212, 137, .55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 24px rgba(4, 26, 16, .28);
}
.kb-audio audio { display: none; }

/* زرُّ التشغيل: قرصٌ ذهبيّ يتقدّم الشريط. */
.kb-audio-play {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gold-metal, linear-gradient(135deg, #f2d489, #d5a242));
    color: #2a1c05;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(4, 26, 16, .34);
    transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}
.kb-audio-play:hover { transform: scale(1.06); filter: brightness(1.06); }
.kb-audio-play:active { transform: scale(.97); }
.kb-audio-play i { margin-inline-start: 2px; }
.kb-audio.is-playing .kb-audio-play i { margin-inline-start: 0; }

.kb-audio-main { flex: 1 1 auto; min-width: 0; }

.kb-audio-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.kb-audio-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gold-light);
    font-size: .92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kb-audio-time {
    flex: none;
    color: rgba(255, 255, 255, .62);
    font-size: .84rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* الشريط: مجرى داكن يمتلئ ذهبًا، وعليه قُرصٌ صغير يدلّ على الموضع. */
.kb-audio-track {
    position: relative;
    height: 8px;
    /* فسحةٌ على الطرفين بقدر نصف القرص، فلا يلتصق بزرّ التشغيل عند البداية
       ولا بمفتاح السرعة عند النهاية. */
    margin-inline: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .34);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .34);
    cursor: pointer;
    touch-action: none;
}
.kb-audio-track:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 4px;
}
.kb-audio-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #d5a242, #f2d489);
    pointer-events: none;
}
.kb-audio-knob {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff6df;
    /* الصفحة من اليمين لليسار، فالقرص يُزاح يسارًا نصفَ عرضه ليتوسّط رأسَ القراءة. */
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(213, 162, 66, .45), 0 2px 6px rgba(0, 0, 0, .35);
    opacity: 0;
    transition: opacity var(--t-fast);
}
.kb-audio:hover .kb-audio-knob,
.kb-audio.is-playing .kb-audio-knob,
.kb-audio-track:focus-visible .kb-audio-knob { opacity: 1; }

/* مفتاحُ السرعة: للمستمع الذي يستعجل أو يتمهّل. */
.kb-audio-rate {
    flex: none;
    min-width: 46px;
    padding: 7px 9px;
    border: 1px solid rgba(242, 212, 137, .32);
    border-radius: 9px;
    background: rgba(0, 0, 0, .22);
    color: var(--gold-light);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.kb-audio-rate:hover { border-color: rgba(242, 212, 137, .6); background: rgba(242, 212, 137, .14); }

@media (max-width: 560px) {
    .kb-audio { gap: 11px; padding: 11px 12px; }
    .kb-audio-play { width: 42px; height: 42px; }
    .kb-audio-label { font-size: .86rem; }
    .kb-audio-rate { min-width: 42px; padding: 6px 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .kb-audio-play:hover, .kb-audio-play:active { transform: none; }
}
/* اسمُ القائل تحت النقل في بطاقات الرئيسية. */
.kb-said { margin-top: 16px; color: var(--gold-light); font-size: 1.02rem; font-weight: 800; }
.kb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.kb-tag {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .95rem; font-weight: 700;
}

/* الكفة اليسرى: موضع الإلزام */
.kb-note {
    border-top: 1px solid var(--note-border);
    background:
        radial-gradient(circle at 88% 10%, rgba(138, 28, 23, .17) 0, rgba(138, 28, 23, 0) 35%),
        radial-gradient(circle at 8% 92%, rgba(10, 44, 30, .16) 0, rgba(10, 44, 30, 0) 38%),
        var(--surface-page);
    color: var(--text);
}
.kb-note-tag {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 0 0 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--red), var(--red-deep));
    color: #fff;
    font-size: 1.02rem; font-weight: 800;
    line-height: 1.4;
    vertical-align: middle;
    box-shadow: 0 7px 18px rgba(138, 28, 23, .28);
}
.kb-note p { margin-bottom: 1.1em; font-size: 1.5rem; line-height: 2.05; text-wrap: pretty; }
.kb-note p:last-child { margin-bottom: 0; }
.kb-note > p:first-of-type { color: var(--emerald); font-weight: 700; }
.kb-note-body {
    display: grid;
    gap: 0;
    padding: 10px 22px;
    border: 1px solid rgba(10, 44, 30, .2);
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 14px 34px rgba(9, 40, 27, .08), inset 0 1px 0 rgba(255,255,255,.9);
}
/* مقطعُ البصيرة: يُعرض قبل البطاقة الذهبية في بصائر والرسائل. */
.kb-clip { margin: 18px 0 14px; }
.kb-clip video,
.kb-clip img {
    display: block;
    width: 100%; max-width: 100%; height: auto;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--emerald-deep);
}
.kb-clip video { aspect-ratio: 16 / 9; object-fit: contain; }
.kb-clip-embed iframe {
    display: block;
    width: 100%; max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--emerald-deep);
}
.kb-clip-embed[data-embed-mode="ratio"] iframe { aspect-ratio: var(--kb-embed-ratio, 16 / 9); height: auto; }
.kb-clip-embed[data-embed-mode="fixed"] iframe { height: var(--kb-embed-height, 640px); }
.kb-clip figcaption {
    margin-top: 9px;
    color: var(--text-muted);
    font-size: .86rem; font-weight: 700; text-align: center;
}

.kb-note .kb-note-paragraph {
    position: relative;
    margin: 0;
    padding: 18px 24px 18px 4px;
    border-bottom: 1px dashed rgba(72, 106, 92, .2);
    color: var(--text);
}
.kb-note .kb-note-paragraph::before {
    content: '';
    position: absolute;
    inset-inline-start: 2px;
    top: 1.58em;
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 50%;
    background: var(--red-deep);
    box-shadow: 0 0 0 4px rgba(138, 28, 23, .14);
}
.kb-note .kb-note-paragraph.is-lead {
    margin: 0 -10px 6px;
    padding: 20px 24px;
    border: 1px solid rgba(138, 28, 23, .22);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(138, 28, 23, .07));
    color: var(--emerald);
    font-weight: 850;
    box-shadow: 0 9px 22px rgba(96, 24, 18, .08);
}
.kb-note .kb-note-paragraph.is-lead::before { display: none; }
.kb-inline-ayah {
    padding: 0;
    background: transparent;
    color: var(--red-deep);
    font-weight: 850;
}
.kb-inline-quote { color: var(--emerald); font-weight: 750; }
.kb-note .kb-note-paragraph.is-closing {
    margin: 8px -10px 2px;
    padding: 15px 22px;
    border: 1px solid rgba(142, 87, 20, .38);
    border-radius: 7px;
    background: linear-gradient(135deg, #f4e7bd, #dfca87);
    color: var(--emerald-deep);
    font-weight: 900;
    text-align: center;
    box-shadow: 0 9px 22px rgba(142, 87, 20, .14), inset 0 1px 0 rgba(255, 255, 255, .56);
}
.kb-note .kb-note-paragraph.is-closing::before { display: none; }
.kb-note .kb-note-paragraph.is-closing .kb-inline-ayah,
.kb-note .kb-note-paragraph.is-closing .kb-inline-quote { color: var(--emerald-deep); }
.kb-inline-emphasis { color: var(--emerald-deep); font-style: normal; font-weight: 700; }
/* رابطٌ داخليّ داخل البيان: يُميَّز بالأحمر والتسطير ليُعرف أنه قابل للضغط. */
.kb-inline-link {
    color: var(--red-deep);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(138, 28, 23, .4);
}
.kb-inline-link:hover,
.kb-inline-link:focus-visible { color: var(--emerald); text-decoration-color: currentColor; }
.kb-note .kb-note-paragraph.is-closing .kb-inline-link { color: var(--emerald-deep); }
.kb-note-more { margin-top: 14px; }
.kb-note-more a { color: var(--red-deep); font-weight: 800; text-decoration: underline; }
.kb-note-more a:hover { color: var(--emerald); }
.kb-empty { margin-top: 24px; color: var(--text-muted); text-align: center; }


@media (max-width: 640px) {
    .kb-hero { padding: 46px 0 34px; }
    .kb-hero-call { padding: 18px 18px; font-size: 1.28rem; line-height: 1.95; }
    .kb-source-bar { padding: 12px 14px; }
    .kb-source-select { max-width: none; flex-basis: 100%; }
    .kb-grid { gap: 16px; }
    .kb-col { padding: 22px 13px 20px; }
    .kb-note-body { padding: 8px 8px; border-radius: 8px; }
    .kb-note .kb-note-paragraph { padding: 15px 17px 15px 2px; }
    .kb-note .kb-note-paragraph.is-lead,
    .kb-note .kb-note-paragraph.is-closing { margin-inline: -4px; padding-inline: 12px; }
    /* على الجوّال يهبط المقاسُ هبوطًا واحدًا للجميع، فيبقى النصُّ والشرحُ والمقدمة سواء. */
    .kb-quote p, .kb-note p, .kb-intro p { font-size: 1.28rem; }
}

/* ==========================================================
   قسم «منشورات»
   ========================================================== */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.ps-card {
    display: flex; flex-direction: column;
    padding: 24px 22px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.ps-card:hover { transform: translateY(-4px); border-color: rgba(213,162,66,.55); box-shadow: var(--shadow-md); color: var(--text); }
.ps-card h2, .ps-card h3 { margin: 12px 0 8px; font-size: 1.2rem; font-weight: 800; line-height: 1.7; }
.ps-card p { margin: 0; color: var(--text-soft); font-size: .96rem; line-height: 1.9; }
.ps-card-platform {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--emerald);
    font-size: .79rem; font-weight: 800;
}
.ps-card-foot {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
    margin-top: auto; padding-top: 16px;
    font-size: .86rem; font-weight: 700;
}
.ps-card-author { color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.ps-card-go { color: var(--gold-dark); display: inline-flex; align-items: center; gap: 6px; }
.ps-card:hover .ps-card-go i { transform: translateX(-5px); transition: transform var(--t); }
.ps-more-title { margin-bottom: 22px; font-size: 1.22rem; font-weight: 900; }

/* المنشور المفرد: يتبع بطاقة الصفحة المنفردة نفسها المستعملة في المقالات */
.single-page .meta .badge-platform i { margin-inline-end: 6px; font-size: 13px; }
.ps-single .ps-single-body { max-width: none; }
.ps-lead {
    margin-bottom: 24px;
    padding-inline-start: 20px;
    border-inline-start: 4px solid var(--gold);
}
.ps-lead p { margin: 0 0 12px; color: var(--emerald); font-size: 1.5rem; font-weight: 600; line-height: 2.05; }
.ps-lead p:last-child { margin-bottom: 0; }
.ps-prose p { margin-bottom: 1.2em; font-size: 1.5rem; line-height: 2.05; color: var(--text); text-wrap: pretty; }

.ps-chips { margin: 26px 0; padding: 22px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.ps-chips-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--emerald); font-size: 1.02rem; font-weight: 800; }
.ps-chips-count {
    min-width: 26px; padding: 2px 8px;
    border-radius: 999px;
    background: var(--emerald); color: var(--gold-light);
    font-size: .78rem; font-weight: 800; text-align: center;
}
.ps-chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-chip {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--emerald);
    font-size: .9rem; font-weight: 700;
}
.ps-chips-names .ps-chip { background: var(--bg-2); border-color: transparent; color: var(--text); font-weight: 600; }

.ps-says { display: grid; gap: 12px; margin: 26px 0; }
.ps-say {
    padding: 16px 18px;
    border-inline-start: 3px solid var(--gold);
    border-radius: var(--radius);
    background: var(--bg-2);
}
.ps-say-who { display: block; margin-bottom: 6px; color: var(--red-deep); font-size: .92rem; font-weight: 800; }
.ps-say-text { margin: 0; color: var(--emerald); font-size: 1.3rem; font-weight: 600; line-height: 2; }
.ps-say-text::before { content: '«'; }
.ps-say-text::after { content: '»'; }

.ps-callout {
    margin: 28px 0;
    padding: 22px 24px;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--emerald-2), var(--emerald-deep));
    color: rgba(255,255,255,.93);
}
.ps-callout p { margin-bottom: 12px; font-size: 1.35rem; line-height: 2.05; }
.ps-callout p:last-child { margin-bottom: 0; }
.ps-callout p:first-child { color: #fff; font-weight: 700; }
.ps-callout-gold { background: linear-gradient(150deg, var(--gold-dark), #7d621f); }

.ps-shout {
    margin: 28px 0;
    color: var(--red-deep);
    font-size: clamp(1.22rem, 2.35vw, 1.5rem); font-weight: 900; text-align: center;
}

.ps-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.ps-topic {
    padding: 5px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: .82rem; font-weight: 700;
}
.ps-signature { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.ps-signature-rule { flex: 1; height: 1px; background: var(--border); }
.ps-signature-name { color: var(--emerald); font-size: 1.05rem; font-weight: 800; }

@media (max-width: 640px) {
    .ps-grid { grid-template-columns: 1fr; }
    .ps-chips { padding: 18px 16px; }
    .ps-prose p, .ps-lead p { font-size: 1.3rem; }
}

/* لبنات إضافية في المنشورات: لقطة، رابط، نقاط */
.ps-shot { margin: 26px 0; }
.ps-shot img, .ps-shot video {
    display: block;
    width: 100%; max-width: 100%; height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--emerald-deep);
}
.ps-shot video { aspect-ratio: 16 / 9; object-fit: contain; }
.ps-shot figcaption { margin-top: 10px; color: var(--text-muted); font-size: .88rem; font-weight: 700; text-align: center; }

.ps-watch {
    display: flex; align-items: center; gap: 14px;
    margin: 24px 0;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--text);
    transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.ps-watch:hover { transform: translateY(-2px); border-color: rgba(213,162,66,.6); box-shadow: var(--shadow-sm); color: var(--text); }
.ps-watch-icon {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 6px;
    background: var(--red-soft);
    color: var(--red);
    font-size: 1.15rem;
}
.ps-watch-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ps-watch-body strong { font-size: 1.02rem; font-weight: 800; }
.ps-watch-body span { color: var(--text-muted); font-size: .88rem; }
.ps-watch-go { margin-inline-start: auto; color: var(--text-muted); font-size: .9rem; }

.ps-points { margin: 26px 0; }
.ps-points-title { margin-bottom: 14px; font-size: 1.12rem; font-weight: 800; }
.ps-points ol { margin: 0; padding: 0; list-style: none; counter-reset: pspoint; }
.ps-points li {
    position: relative;
    margin-bottom: 14px;
    padding: 16px 18px 14px 18px;
    padding-inline-start: 58px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}
.ps-points li::before {
    counter-increment: pspoint;
    content: counter(pspoint);
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    display: grid; place-items: center;
    width: 28px; height: 28px;
    border-radius: 5px;
    background: var(--emerald);
    color: var(--gold-light);
    font-size: .84rem; font-weight: 900;
}
.ps-points li strong { display: block; margin-bottom: 6px; color: var(--emerald); font-weight: 800; }
.ps-points li p { margin: 0 0 8px; font-size: 1.02rem; line-height: 2; }
.ps-points li p:last-child { margin-bottom: 0; }

/* ملحق ومقارنة داخل المنشورات */
.ps-appendix { margin: 44px 0 22px; padding-top: 26px; border-top: 2px solid var(--border); }
.ps-appendix-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--emerald);
    color: var(--gold-light);
    font-size: .8rem; font-weight: 800;
}
.ps-appendix h2 { margin: 0; font-size: clamp(1.17rem, 2.1vw, 1.39rem); font-weight: 900; line-height: 1.7; }

.ps-muqarana { margin: 26px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
/* العنوان داخل الإطار المقصوص، فيحتاج حاشيةً تُبعده عن الحافة المنحنية. */
.ps-muqarana-title { margin: 0; padding: 15px 20px 13px; font-size: 1.12rem; font-weight: 800; }
.ps-muqarana-head { display: grid; grid-template-columns: 1fr 1fr; background: var(--emerald); }
.ps-muqarana-head span { padding: 12px 18px; color: #fff; font-size: .95rem; font-weight: 800; text-align: center; }
.ps-muqarana-head span:first-child { color: var(--gold-light); }
.ps-muqarana-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); }
.ps-muqarana-cell { padding: 18px 18px 16px; }
.ps-muqarana-cell p { margin: 0; font-size: .99rem; line-height: 1.95; }
.ps-muqarana-right { background: var(--bg); }
.ps-muqarana-right p { color: var(--emerald); font-weight: 600; }
.ps-muqarana-left { background: var(--red-soft); border-inline-start: 1px solid var(--border); }
.ps-muqarana-left p { color: var(--red-deep); }

@media (max-width: 700px) {
    .ps-muqarana-head, .ps-muqarana-row { grid-template-columns: 1fr; }
    .ps-muqarana-left { border-inline-start: 0; border-top: 1px dashed var(--border); }
}

/* ==========================================================
   الصفحة الرئيسية — أقسام الموسوعة ودرجات الميزان
   ========================================================== */
/* ==========================================================
   الرئيسية: أبواب الموسوعة الملوّنة، وبصيرة المحنة، ومعمل النقض
   ========================================================== */
/* روابط ما بعد «من هم الحدادية؟» */
.hm-followups { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }

/*
 * هوية الأقسام في الرئيسية: كل قسمٍ فاتحٍ يحمل لون قسمه القانوني في
 * شارة العنوان، ويتدلى فوق رأسه خيطُ وصلٍ بلونه من القسم الذي قبله.
 */
.hm-sec { --sec-c: var(--emerald); }
.hm-sec--about    { --sec-c: #013238; }
.hm-sec--figures  { --sec-c: #0a0a0f; }
.hm-sec--posts    { --sec-c: #003130; }
.hm-sec--articles { --sec-c: #510360; }
.hm-sec--videos   { --sec-c: #b40111; }

.hm-sec .section-head .eyebrow {
    background: linear-gradient(135deg, color-mix(in srgb, var(--sec-c) 72%, #000), var(--sec-c));
}
.hm-sec .section-head { position: relative; }
.hm-sec .section-head::before {
    content: '';
    position: absolute;
    top: -56px;
    right: 50%;
    transform: translateX(50%);
    width: 2px;
    height: 44px;
    background: linear-gradient(180deg, transparent, var(--sec-c));
}

/* أربعة منشورات في سطرٍ واحد على الشاشات الواسعة */
.hm-sec--posts .ps-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .hm-sec--posts .ps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .hm-sec--posts .ps-grid { grid-template-columns: 1fr; } }

/*
 * بطاقاتُ الأبواب: كل بطاقة تلبس لوحة قسمها (متغيرات sec-hero--<key>
 * نفسها التي تصبغ ترويسات الأقسام)، فالرئيسية تعرض هوية الموقع كلها.
 */
.hm-gates .hm-gate {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 22px;
    border-radius: 12px;
    background: linear-gradient(160deg, var(--hero-1, var(--emerald-deep)), var(--hero-2, var(--emerald-2)) 60%, var(--hero-3, var(--emerald-3)));
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t), box-shadow var(--t);
}
.hm-gate:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 0, 0, .26); }
.hm-gate-ghost {
    position: absolute;
    z-index: -1;
    inset-inline-start: -14px;
    bottom: -24px;
    transform: rotate(-10deg);
    font-size: 110px;
    color: rgba(255, 255, 255, .06);
    pointer-events: none;
}
.hm-gate-top { display: flex; justify-content: space-between; align-items: center; }
.hm-gate-top > i { font-size: 1.6rem; color: var(--gold-light); }
.hm-gate-count {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}
/* بطاقةُ بصائر بلون خلفية النقل في بطاقات القسم نفسِه (وهو لون شارتها في القائمة). */
.hm-gates .hm-gate.sec-hero--basair {
    --hero-1: color-mix(in srgb, #650046 55%, #000);
    --hero-2: #650046;
    --hero-3: color-mix(in srgb, #650046 84%, #fff);
}

.hm-gate h3 { margin: 0; color: #fff; font-size: 1.22rem; font-weight: 900; }
.hm-gate p { margin: 0; flex: 1; color: rgba(255, 255, 255, .82); font-size: .95rem; line-height: 1.9; }
.hm-gate .hm-go { color: var(--gold-light); }
.hm-gate:hover .hm-go i { transform: translateX(-5px); transition: transform var(--t); }

/* بصيرةُ المحنة: لوحة kb-hero بعينها، والعنوان والذيل خاصان بها */
.hm-feature .hm-feature-title { margin: 0; color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 900; }
.hm-feature .kb-hero-call { margin-inline: auto; }
.hm-feature-cite { margin: 4px 0 8px; max-width: 62ch; color: var(--gold-light); font-size: 1.05rem; font-weight: 700; }

/* معمل النقض: لوحة الشبهات النيلية على عرض الصفحة */
.hm-shubuhat {
    background: linear-gradient(160deg, #000032, #000053 55%, #14147a);
    color: #fff;
}
.hm-shubuhat .section-head h2 { color: #fff; }
.hm-shubuhat .section-head p { color: rgba(255, 255, 255, .75); }
.hm-shubha-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 22px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    text-decoration: none;
    transition: transform var(--t), background var(--t);
}
.hm-shubha-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .09); }
.hm-shubha-claimant {
    align-self: flex-start;
    padding: 5px 13px;
    border: 1px solid rgba(213, 162, 66, .5);
    border-radius: 999px;
    color: var(--gold-light);
    font-size: .84rem;
    font-weight: 700;
}
.hm-shubha-card h3 { margin: 0; flex: 1; color: #fff; font-size: 1.06rem; font-weight: 800; line-height: 1.95; }
.hm-shubha-naqd { color: var(--gold-light); font-size: .9rem; font-weight: 700; }
.hm-shubha-card:hover .hm-shubha-naqd i { transform: translateX(-5px); transition: transform var(--t); }

.hm-sections .hm-section {
    display: flex; flex-direction: column;
    color: var(--text);
    text-align: start;
}
.hm-section h3 {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.hm-count {
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--gold-dark);
    font-size: .78rem; font-weight: 800;
}
.hm-section:hover .hm-count { background: var(--emerald); color: var(--gold-light); }
.hm-section p { flex: 1; }
.hm-go {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 16px;
    color: var(--gold-dark);
    font-size: .9rem; font-weight: 800;
}
.hm-section:hover .hm-go i { transform: translateX(-5px); transition: transform var(--t); }

.hm-mizan .hm-stage {
    padding: 26px 22px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.05);
    text-align: center;
}
.hm-stage-icon {
    display: grid; place-items: center;
    width: 54px; height: 54px;
    margin: 0 auto 14px;
    border-radius: 8px;
    background: linear-gradient(140deg, var(--gold), var(--gold-dark));
    color: var(--emerald-deep);
    font-size: 1.3rem;
}
.hm-stage-label {
    display: block; margin-bottom: 8px;
    color: var(--gold-light);
    font-size: .82rem; font-weight: 800;
}
.hm-mizan .hm-stage h3 { margin-bottom: 10px; color: #fff; font-size: 1.1rem; font-weight: 800; }
.hm-mizan .hm-stage p { margin: 0; color: rgba(255,255,255,.72); font-size: .93rem; line-height: 1.85; }

@media (max-width: 1000px) {
    .grid.grid-4.hm-sections { grid-template-columns: repeat(2, 1fr); }
    .grid.grid-4.hm-stages { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid.grid-4.hm-sections, .grid.grid-4.hm-stages { grid-template-columns: 1fr; }
    .stats-bar { margin-top: 30px; padding: 22px 16px 18px; border-radius: 14px; }
    .stat-item .stat-num { font-size: 1.6rem; }
    .stat-item .stat-label { font-size: 13px; }
    .stat-item .stat-icon { width: 36px; height: 36px; font-size: 15px; margin-bottom: 9px; }
}

/* ==========================================================
   رسائل إلى الحدادية
   ========================================================== */
/*
 * ترويسة قسم الرسائل: لوحةُ بصائر نفسُها (kb-hero) حتى يتوحد لونُ القسمين،
 * ومعها ظرفٌ مفتوحٌ شفيفٌ يملأ الخلفية، وأيقونةٌ صريحة بجوار العنوان.
 */
.rs-hero, .sec-hero { position: relative; overflow: hidden; }
.rs-hero .kb-hero-inner, .sec-hero .kb-hero-inner { position: relative; z-index: 1; }
.rs-hero-bg, .sec-hero-bg {
    position: absolute;
    top: 50%; inset-inline-start: 6%;
    transform: translateY(-50%) rotate(-12deg);
    font-size: clamp(150px, 26vw, 260px);
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
}
.rs-hero-icon, .sec-hero-icon { margin-inline-end: 6px; color: var(--gold-light); font-size: .88em; }

/*
 * لوحاتُ الأقسام: كلُّ قسمٍ له لونٌ قانونيٌّ واحد هو لونُ رؤوس مواده
 * الداخلية (متغيرات --sec عند .sp--*)، والهيرو يشتقّ درجاته الثلاث منه
 * بالمعادلة نفسها: أدكنُ منه، ثم هو، ثم أفتحُ منه قليلًا.
 * الميزانُ زمرديٌّ بالوراثة (لون قلب الموقع)؛ وبصائرُ والرسائلُ خمريّتان
 * بلون القسم نفسِه في شريط التنقل ولوحات الرسائل.
 */
.sec-hero--basair, .sec-hero--rasail { --hero-1: color-mix(in srgb, #650046 55%, #000); --hero-2: #650046; --hero-3: color-mix(in srgb, #650046 84%, #fff); }
.sec-hero--articles { --hero-1: color-mix(in srgb, #510360 55%, #000); --hero-2: #510360; --hero-3: color-mix(in srgb, #510360 84%, #fff); }
.sec-hero--posts    { --hero-1: color-mix(in srgb, #003130 55%, #000); --hero-2: #003130; --hero-3: color-mix(in srgb, #003130 84%, #fff); }
/* الشبهات أخذت لوحة النيلي (بطلب المستخدم)، والرموزُ سوادٌ قاتم يليق بهم. */
.sec-hero--shubuhat { --hero-1: color-mix(in srgb, #000053 55%, #000); --hero-2: #000053; --hero-3: color-mix(in srgb, #000053 84%, #fff); }
.sec-hero--books    { --hero-1: color-mix(in srgb, #572301 55%, #000); --hero-2: #572301; --hero-3: color-mix(in srgb, #572301 84%, #fff); }
.sec-hero--videos   { --hero-1: color-mix(in srgb, #b40111 55%, #000); --hero-2: #b40111; --hero-3: color-mix(in srgb, #b40111 84%, #fff); }
.sec-hero--figures  { --hero-1: #000000; --hero-2: #0a0a0f; --hero-3: #22222b; }
.sec-hero--about    { --hero-1: color-mix(in srgb, #013238 55%, #000); --hero-2: #013238; --hero-3: color-mix(in srgb, #013238 84%, #fff); }

/*
 * المسافة بعد الهيرو: قاعدةُ .section العامة تحشو 90px من فوق، وهي لإيقاع
 * الصفحة الداخلي لا لِما يلي الترويسة؛ فيُضبط أولُ قطاعٍ بعد الهيرو كما كان
 * يُضبط بعد page-intro القديمة.
 */
.sec-hero + .section { padding-top: 34px; }
.sec-hero + .mz-gate { padding-top: 40px; padding-bottom: 46px; }
@media (max-width: 640px) {
    .sec-hero + .section { padding-top: 26px; }
    .sec-hero + .mz-gate { padding-top: 30px; }
}

/* أقسامٌ لا مادةَ داخليةً ملوّنةً لها، فلها لوحاتٌ خاصة لا تصادم القانونية. */
.sec-hero--timeline { --hero-1: #3c2705; --hero-2: #5e3f0b; --hero-3: #815913; }
.sec-hero--topics   { --hero-1: #173029; --hero-2: #25493e; --hero-3: #346253; }
.sec-hero--authors  { --hero-1: #232f3d; --hero-2: #374b60; --hero-3: #4b6783; }
.sec-hero--contact  { --hero-1: #06331f; --hero-2: #0b4f30; --hero-3: #116b41; }
.rs-index { max-width: 880px; }
.rs-intro p {
    font-size: 1.18rem;
    line-height: 2.05;
    color: var(--text-soft);
}
.rs-intro a { font-weight: 700; }

.rs-list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    counter-reset: rs-msg;
}
.rs-list li { counter-increment: rs-msg; }
.rs-list a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 15px 10px;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 5px;
    color: inherit;
    transition: background var(--t-fast);
}
.rs-list li:last-child a { border-bottom: 0; }
/* تمييزُ الصفوف: يتناوب لونُ الخلفية سطرًا بعد سطر، فلا تختلط
   الأسطر على العين في القوائم الطويلة. */
.rs-list li:nth-child(even) > a { background: color-mix(in srgb, var(--sec, var(--emerald)) 5%, transparent); }
.rs-list.shubuhat-list { --sec: #000053; }
.rs-list a::before {
    content: counter(rs-msg, decimal-leading-zero);
    min-width: 34px;
    padding-top: 4px;
    text-align: center;
    color: var(--gold-dark);
    font-size: .95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.rs-list a:hover { background: var(--surface-raised); }
.rs-item-body { min-width: 0; }
.rs-item-title {
    display: block;
    color: var(--emerald);
    font-size: 1.17rem;
    font-weight: 700;
    line-height: 1.85;
    transition: color var(--t-fast);
}
.rs-list a:hover .rs-item-title { color: var(--gold-dark); }
.rs-item-source {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .92rem;
}
.rs-item-arrow {
    margin-inline-start: auto;
    align-self: center;
    color: var(--text-muted);
    font-size: .95rem;
    transition: transform var(--t-fast), color var(--t-fast);
}
.rs-list a:hover .rs-item-arrow { color: var(--gold-dark); transform: translateX(-4px); }

/* --- صفحة الرسالة --- */
.rs-single { max-width: 880px; }
.rs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--emerald-deep), var(--emerald-2));
    color: var(--gold-light);
    font-size: .95rem;
    font-weight: 700;
}
.rs-title {
    margin: 16px 0 6px;
    font-size: clamp(1.3rem, 2.45vw, 1.58rem);
    line-height: 1.75;
}
/* النقلُ في صفحة الرسالة: اللوحةُ الزمرديّة نفسها التي في بصائر. */
.rs-quote { margin: 26px 0 0; padding: 0; }
.rs-quote blockquote {
    --sec: #650046;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    padding: 28px 30px 30px;
    border: 0;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 92% 6%, rgba(213, 162, 66, .22) 0, rgba(213, 162, 66, 0) 44%),
        radial-gradient(circle at 4% 94%, rgba(0, 0, 0, .30) 0, rgba(0, 0, 0, 0) 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--sec) 76%, #000) 0%, var(--sec) 56%, color-mix(in srgb, var(--sec) 86%, #fff) 100%);
    box-shadow: var(--shadow-md);
}
.rs-quote blockquote::before {
    content: '\f10e';
    position: absolute;
    z-index: -1;
    inset-inline-start: 16px;
    inset-block-end: -26px;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 148px;
    line-height: 1;
    color: rgba(242, 212, 137, .085);
    pointer-events: none;
}
.rs-quote blockquote::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 3px;
    background: var(--gold-metal);
}
.rs-quote blockquote p {
    margin: 0;
    padding-inline-start: 22px;
    border-inline-start: 3px solid rgba(242, 212, 137, .45);
    color: #f4f8f5;
    font-size: 1.5rem;
    line-height: 2.1;
    font-weight: 500;
    text-wrap: pretty;
}
.rs-attribution { color: var(--gold-light); font-weight: 850; }
.rs-bayan { margin-top: 30px; }
.rs-bayan-paragraph {
    margin-bottom: 1.15em;
    font-size: 1.34rem;
    line-height: 2.05;
    text-wrap: pretty;
}
.rs-bayan-paragraph:last-child { margin-bottom: 0; }
.rs-bayan .kb-note-tag { margin: 0 0 0 12px; font-size: .98rem; }

/* خاتمةُ الرسالة: الدعاء في مستطيلٍ أحمر بلون وسم «البيان»، فالرسائل تصميمٌ مستقل. */
.rs-bayan-paragraph.is-closing {
    margin: 26px 0 0;
    padding: 20px 26px;
    border: 1px solid rgba(138, 28, 23, .34);
    border-radius: 9px;
    background: linear-gradient(135deg, var(--red), var(--red-deep));
    color: #fff;
    font-size: 1.24rem; font-weight: 800;
    line-height: 1.95;
    text-align: center;
    box-shadow: 0 10px 24px rgba(138, 28, 23, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.rs-bayan-paragraph.is-closing .kb-inline-ayah,
.rs-bayan-paragraph.is-closing .kb-inline-quote,
.rs-bayan-paragraph.is-closing .kb-inline-emphasis,
.rs-bayan-paragraph.is-closing .kb-inline-link,
.rs-bayan-paragraph.is-closing strong { color: #fff; }

.rs-footer { margin-top: 34px; }
.rs-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding-top: 22px;
    border-top: 1px solid var(--border-soft);
}
.rs-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--emerald);
    font-weight: 700;
    font-size: 1.02rem;
}
.rs-links a:hover { color: var(--gold-dark); }
.rs-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 22px;
}
.rs-nav-item {
    display: block;
    padding: 15px 17px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface-raised);
    color: inherit;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    min-width: 0;
}
.rs-nav-item:hover { border-color: var(--surface-tint); box-shadow: var(--shadow-sm); color: inherit; }
.rs-nav-next { text-align: left; }
.rs-nav-label {
    display: block;
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: 4px;
}
.rs-nav-title {
    display: block;
    color: var(--emerald);
    font-size: .99rem;
    font-weight: 700;
    line-height: 1.75;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.rs-nav-item:hover .rs-nav-title { color: var(--gold-dark); }

@media (max-width: 640px) {
    .rs-quote blockquote { padding: 20px 18px; }
    .rs-quote blockquote p { font-size: 1.32rem; }
    .rs-bayan-paragraph { font-size: 1.22rem; }
    .rs-nav { grid-template-columns: 1fr; }
    .rs-item-title { font-size: 1.08rem; }
}

/* ==========================================================
   هوامش المقالات
   إحالةٌ صغيرة في المتن، وقائمةٌ مجموعة في ذيل المقال، وبينهما
   ذهابٌ وإياب بنقرة واحدة، وبطاقةٌ عائمة تُري القارئ نصّ الهامش
   من غير أن يفارق موضعه من السطر.
   ========================================================== */
.content-body .fn-ref {
    font-size: .58em;
    line-height: 0;
    vertical-align: super;
    white-space: nowrap;
    scroll-margin-top: 110px;
}
/*
 * الإحالة تبقى `inline` لا `inline-block`، لأنّ المتّصل المستقلّ يفتح للمتصفّح
 * موضعَ قطعٍ قبله فينزل الرقمُ وحده إلى أول السطر التالي، ورابط الكلمة
 * (U+2060) الموضوع حوله في المتن لا يمنع ذلك في كروم.
 */
.content-body .fn-ref > a {
    display: inline;
    padding: .3em .5em;
    margin-inline-start: 3px;
    border: 1px solid var(--surface-tint);
    border-radius: 4px;
    background: var(--surface-muted);
    color: var(--teal-deep);
    font-weight: 700;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.content-body .fn-ref > a:hover,
.content-body .fn-ref > a:focus-visible,
.content-body .fn-ref > a.is-open {
    background: linear-gradient(135deg, var(--teal), var(--emerald-3));
    border-color: var(--teal-deep);
    color: var(--white);
}
/* وميضٌ يدلّ القارئ على موضعه حين يرجع من الهامش إلى المتن. */
.content-body .fn-ref.is-target > a {
    background: var(--gold-light);
    border-color: var(--gold);
    color: var(--gold-dark);
}

.content-body .article-footnotes {
    margin-top: 48px;
    padding: 24px 26px;
    border: 1px solid var(--surface-tint);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--surface-raised), var(--surface-muted));
    box-shadow: var(--shadow-xs);
    scroll-margin-top: 110px;
}
.content-body .article-footnotes > h2 {
    margin: 0 0 14px;
    font-size: 1.29rem;
}
.content-body .fn-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.14rem;
    line-height: 1.9;
    color: var(--text-soft);
}
.content-body .fn-list > li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px dashed var(--surface-tint);
    scroll-margin-top: 110px;
    border-radius: 4px;
    transition: background .3s ease;
}
.content-body .fn-list > li:first-child { border-top: 0; }
.content-body .fn-list > li.is-target {
    background: rgba(213, 162, 66, .18);
    box-shadow: 0 0 0 6px rgba(213, 162, 66, .18);
}
.fn-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 26px;
    padding: 0 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--teal), var(--emerald-3));
    color: var(--white);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}
.fn-num:hover,
.fn-num:focus-visible {
    background: var(--gold-metal);
    color: var(--emerald-deep);
    transform: translateY(-1px);
}
.fn-text { flex: 1 1 auto; }

/* البطاقة العائمة: تُبنى بالسكربت عند النقر، وتُغلق بالنقر خارجها أو بـ Esc. */
.fn-pop {
    position: absolute;
    z-index: 900;
    width: min(390px, calc(100vw - 24px));
    padding: 14px 16px 12px;
    border: 1px solid var(--surface-tint);
    border-radius: 7px;
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--text);
    animation: fnPopIn .18s ease-out;
}
@keyframes fnPopIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.fn-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.fn-pop-num {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 24px;
    padding: 0 7px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--teal), var(--emerald-3));
    color: var(--white);
    font-size: .86rem;
    font-weight: 700;
    line-height: 1;
}
.fn-pop-text { margin: 0 0 8px; color: var(--text); }
.fn-pop-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--teal-deep);
    font-size: .96rem;
    font-weight: 700;
    text-decoration: none;
}
.fn-pop-go:hover { color: var(--gold-dark); }
.fn-pop-close {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: .9rem;
    cursor: pointer;
}
.fn-pop-close:hover { background: var(--surface-muted); color: var(--red); }

@media (max-width: 640px) {
    .content-body .article-footnotes { padding: 18px 16px; border-radius: 7px; }
    .content-body .fn-list { font-size: 1.06rem; }
    .content-body .fn-list > li { gap: 9px; }
    .fn-pop { font-size: 1.02rem; }
}

/* ==========================================================
   شريط المشاركة
   أيقونةٌ لكل قناة بلونها، ونسخُ الرابط بنقرة، وزرُّ مشاركة
   الجهاز يظهر على الجوّال وحده. ويعمل كله بلا جافاسكربت
   عدا النسخ والمشاركة النظامية.
   ========================================================== */
.share-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
    padding: 16px 20px;
    border: 1px solid var(--surface-tint);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--surface-raised), var(--surface-muted));
}
.share-bar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--surface-tint);
    border-radius: 5px;
    background: var(--white);
    color: var(--emerald);
    font-family: inherit;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.share-btn i { font-size: 1.02rem; }
/* زرُّ مشاركة الجهاز مخفيٌّ حتى يظهره السكربت، و`display` هنا يغلب قاعدة المتصفّح. */
.share-btn[hidden] { display: none; }
.share-btn:hover,
.share-btn:focus-visible {
    color: var(--white);
    border-color: transparent;
    transform: translateY(-2px);
}
.share-whatsapp:hover, .share-whatsapp:focus-visible { background: #25d366; }
.share-telegram:hover, .share-telegram:focus-visible { background: #229ed9; }
.share-x:hover, .share-x:focus-visible { background: #111111; }
.share-facebook:hover, .share-facebook:focus-visible { background: #1877f2; }
.share-copy:hover, .share-copy:focus-visible {
    background: linear-gradient(135deg, var(--teal), var(--emerald-3));
}
/* «شارِك» متصدّر الشريط: أيقونته حمراء مميزة، وعند الإشارة يكتسي الزر كله بالأحمر. */
.share-native { border-color: rgba(179, 38, 30, .35); }
.share-native i { color: var(--red); }
.share-native:hover, .share-native:focus-visible {
    background: linear-gradient(135deg, var(--red), var(--red-deep));
}
.share-native:hover i, .share-native:focus-visible i { color: var(--white); }
.share-copy.is-done {
    background: linear-gradient(135deg, var(--emerald-2), var(--emerald-3));
    border-color: transparent;
    color: var(--white);
}
.share-feedback {
    color: var(--emerald-3);
    font-size: .94rem;
    font-weight: 700;
}

@media (max-width: 640px) {
    .share-bar {
        gap: 10px;
        padding: 14px;
        border-radius: 7px;
    }
    .share-btn { padding: 9px 12px; font-size: .94rem; }
    /* على الشاشات الضيقة تكفي الأيقونة، والاسمُ يبقى للقارئ الآلي. */
    .share-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .share-native .share-btn-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        clip-path: none;
        overflow: visible;
        line-height: 1.5;
    }
}

/* ==========================================================
   شدُّ الهوامش الجانبيّة على الجوّال
   يوضع في آخر الملف عمدًا ليغلب حشوات الأقسام المعرَّفة قبله.
   ========================================================== */
@media (max-width: 640px) {
    .single-page { padding-inline: 16px; }
    .shubha-statement { padding-inline: 15px; }
    .article-body, .post-body { padding-inline: 0; }
}
@media (max-width: 400px) {
    .single-page { padding-inline: 12px; }
    .shubha-statement { padding-inline: 12px; }
}

/* ==========================================================
   ترقيمُ «بصائر»: شريطُ تقدُّمٍ ونداءٌ لإتمام القراءة
   ========================================================== */
.kb-chip { text-decoration: none; }
.kb-active-filter {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 18px;
    padding: 11px 16px;
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--emerald);
    border-radius: 10px;
    background: var(--white);
    color: var(--text-soft);
    font-size: 1.02rem;
}
.kb-active-filter i { color: var(--emerald); }
.kb-active-filter a { color: var(--emerald); font-weight: 700; }

.kb-pager {
    margin: 34px 0 0;
    padding: 26px 26px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(140deg, var(--white), rgba(16, 78, 55, .05));
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.kb-pager-progress { margin: 0 0 14px; }
.kb-pager-count { display: block; margin-bottom: 9px; color: var(--text-soft); font-size: 1.02rem; }
.kb-pager-count strong { color: var(--emerald); font-weight: 850; }
.kb-pager-bar {
    display: block;
    height: 7px;
    max-width: 420px;
    margin-inline: auto;
    border-radius: 999px;
    background: rgba(16, 78, 55, .12);
    overflow: hidden;
}
.kb-pager-bar > span {
    display: block; height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), var(--emerald));
    transition: width var(--t);
}
.kb-pager-call {
    max-width: 620px;
    margin: 0 auto 20px;
    color: var(--text);
    font-size: 1.16rem;
    line-height: 1.9;
    font-weight: 700;
}
.kb-pager-call strong { color: var(--red-deep); font-weight: 850; }
.kb-pager-call--done { color: var(--emerald); }

.kb-pager-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.kb-pager-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition: transform var(--t), box-shadow var(--t), background var(--t);
}
/* أحمرُ دمِ الغزال، فهو نداءُ المتابعة الأوّل في الصفحة ويجب أن يُرى. */
.kb-pager-btn--next {
    background: linear-gradient(135deg, var(--red), var(--red-deep));
    color: #fff;
    box-shadow: 0 10px 22px rgba(138, 28, 23, .28);
}
/* القاعدةُ العامّة a:hover تُذهِّب لونَ النصّ وهي أقوى تخصيصًا،
   فيُثبَّت البياضُ في كلِّ الحالات لئلّا يبهت الزرُّ عند اللمس. */
.kb-pager-btn--next:hover,
.kb-pager-btn--next:focus,
.kb-pager-btn--next:active,
.kb-pager-btn--next:visited { color: #fff; }
.kb-pager-btn--next:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(138, 28, 23, .38); }
.kb-pager-btn--prev:hover,
.kb-pager-btn--prev:focus,
.kb-pager-btn--prev:active { color: var(--text); }
.kb-pager-btn--prev { border: 1px solid var(--border); background: var(--white); color: var(--text-soft); }
.kb-pager-btn--prev:hover { border-color: var(--gold); color: var(--text); }

.kb-pager-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.kb-pager-num {
    display: inline-grid; place-items: center;
    min-width: 38px; height: 38px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--white);
    color: var(--text-soft);
    font-weight: 750;
    text-decoration: none;
    transition: border-color var(--t), color var(--t);
}
.kb-pager-num:hover { border-color: var(--gold); color: var(--text); }
.kb-pager-num.is-current { background: var(--emerald); border-color: var(--emerald); color: #fff; }

@media (max-width: 640px) {
    .kb-pager { padding: 20px 13px 18px; }
    .kb-pager-call { font-size: 1.08rem; }
    .kb-pager-btn { padding: 11px 18px; }
    .kb-pager-num { min-width: 34px; height: 34px; }
}