/* =====================================================
   المكوّنات - Components
   ===================================================== */

/* ===========================================
   Hero Section
   =========================================== */
/*
 * لا حدّ أدنى للارتفاع: كان ٦٥٪ من الشاشة يوم كان تحت الاسم لقبٌ واقتباس،
 * وبعد حذفهما صار المحتوى أقصر فبقي تحت الأرقام فراغٌ كبير بلا معنى.
 */
.hero {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-ink-deep));
    color: var(--color-cream);
    margin-bottom: var(--space-12);
    isolation: isolate;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 30% 20%, rgba(201, 169, 97, 0.18), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(212, 175, 55, 0.12), transparent 50%);
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(60deg, transparent, transparent 80px, rgba(201, 169, 97, 0.04) 80px, rgba(201, 169, 97, 0.04) 81px),
        repeating-linear-gradient(-60deg, transparent, transparent 80px, rgba(201, 169, 97, 0.04) 80px, rgba(201, 169, 97, 0.04) 81px);
    z-index: 1;
}

.hero__video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    z-index: 0;
}

.hero__inner {
    position: relative;
    z-index: 2;
    padding: var(--space-16) var(--space-12) var(--space-12);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-10);
    align-items: center;
    /*
     * سقف للعرض ثمّ توسيط: بدونه يتمدّد العمودان على الشاشات العريضة
     * بينما النصّ محدود بـ ٦٠٠ بكسل، فتنفتح فجوة فارغة بين النصّ والصورة.
     */
    max-width: 1180px;
    margin-inline: auto;
}

/* بلا صورة: عمود واحد موسَّط — العمودان يتركان نصف الواجهة فارغاً */
.hero__inner--solo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    max-width: 900px;
}

.hero__inner--solo .hero__content {
    max-width: 720px;
}

.hero__inner--solo .hero__quote {
    margin-inline: auto;
}

.hero__inner--solo .hero__actions {
    justify-content: center;
}

.hero__content {
    max-width: 600px;
}

.hero__greeting {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(201, 169, 97, 0.15);
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: var(--radius-full);
    color: var(--color-gold-shimmer);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-bottom: var(--space-6);
}

.hero__title {
    /*
     * الاسم بخطّ النسخ الكلاسيكي لا بخطّ الواجهات: حروفه أدقّ تفصيلاً
     * وأقرب إلى الخطّ العربي المكتوب، فيليق باسم عالم. وهو محمَّل أصلاً
     * لأن الاقتباس يستعمله، فلا طلب شبكة إضافياً.
     */
    font-family: 'Amiri', var(--font-display), serif;
    font-size: clamp(var(--text-4xl), 4.6vw + 1rem, 4.2rem);
    font-weight: 700;
    /* النسخ يحتاج سطراً أوسع: حروفه تنزل تحت الخطّ وتعلو فوقه */
    line-height: 1.55;
    letter-spacing: 0.01em;
    margin-bottom: var(--space-5);
    color: var(--color-cream);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.hero__title-accent {
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-shimmer));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.hero__quote {
    font-family: 'Amiri', serif;
    font-style: italic;
    font-size: var(--text-xl);
    color: rgba(250, 247, 240, 0.88);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-8);
}

.hero__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.hero__visual {
    position: relative;
    aspect-ratio: 1;
    max-width: 420px;
    margin-inline: auto;
}

.hero__portrait-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-gold-soft);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.4),
        inset 0 0 0 8px rgba(250, 247, 240, 0.05);
    background: linear-gradient(135deg, var(--color-emerald-mid), var(--color-emerald-deep));
}

.hero__portrait-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__portrait-frame::before {
    content: '';
    position: absolute;
    inset: -20px;
    border: 1px dashed rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    animation: rotate-slow 30s linear infinite;
}

/* Hero Stats */
.hero-stats {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*
     * أعمدة متساوية بـ flex لا بـ grid: مع ثلاثة مؤشّرات كان
     * auto-fit يضع اثنين في سطر وواحداً وحده على الهاتف، فيبدو
     * الصفّ مكسوراً. هنا تتقاسم العناصر العرض بالتساوي مهما كان عددها.
     */
    max-width: 720px;
    margin-inline: auto;
    padding: var(--space-6) var(--space-6) var(--space-10);
    border-top: 1px solid rgba(201, 169, 97, 0.2);
}

.hero-stat {
    flex: 1 1 0;
    min-width: 96px;
    text-align: center;
    padding-inline: var(--space-3);
}

/* فاصل رفيع بين المؤشّرات — أوضح من الاعتماد على الفراغ وحده */
.hero-stat + .hero-stat {
    border-inline-start: 1px solid rgba(201, 169, 97, 0.22);
}

.hero-stat__value {
    /*
     * الأرقام بخطّ المتن لا بخطّ الواجهات: أشكاله الهندسية تميّز
     * ٤ من ٦ ومن ٨ بوضوح، بينما الخطّ الزخرفي يقارب بينها في الحجم الصغير.
     */
    font-family: var(--font-body);
    font-size: var(--text-3xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--color-gold-shimmer);
    line-height: 1.15;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-2);
}

.hero-stat__label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(250, 247, 240, 0.82);
    letter-spacing: 0.02em;
}

/*
 * أربعة مؤشّرات شبكةٌ ثابتة من أربعة أعمدة: الصفّ المرن كان يلتفّ على بعض
 * المقاسات (أو مع تكبير خطّ الجهاز) فيسقط الرابع وحده تحت الثلاثة.
 */
.hero-stats--quad {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero-stats--quad .hero-stat {
    min-width: 0;
}

/*
 * أربعة مؤشّرات على الهاتف: شبكةٌ اثنان في اثنين بفواصل متقاطعة.
 * كانت صفّاً يلتفّ حين يضيق — ثلاثةٌ فوق ورابعٌ وحده تحتها ملتصقٌ بها،
 * وأوّل ما يلتفّ عند ٣٨٠ بكسل تقريباً لا ٣٦٠. وفوق ٤٨٠ يتّسع لها سطرٌ واحد.
 * المحدِّد مركّب فيغلب مقاسات الهاتف العامّة في responsive.css.
 */
@media (max-width: 480px) {
    .hero-stats--quad {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--space-2) var(--space-3) var(--space-6);
    }

    .hero-stats--quad .hero-stat {
        min-width: 0;
        padding: var(--space-5) var(--space-2);
    }

    /* فاصلٌ عموديّ بين العمودين وحدهما، وأفقيّ بين الصفّين */
    .hero-stats--quad .hero-stat:nth-child(odd) {
        border-inline-start: 0;
    }

    .hero-stats--quad .hero-stat:nth-child(n + 3) {
        border-top: 1px solid rgba(201, 169, 97, 0.22);
    }

    /* في الشبكة متّسعٌ للرقم: أكبر من صفّ الأربعة المضغوط */
    .hero-stats--quad .hero-stat__value {
        font-size: var(--text-2xl);
    }

    .hero-stats--quad .hero-stat__label {
        font-size: var(--text-sm);
    }
}

/* ===========================================
   Card - Generic Content Card
   =========================================== */
.card {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
    /*
     * خصائص محدَّدة لا `all`: مع `all` يضطرّ المتصفّح إلى موازنة كل
     * خاصية قابلة للتحريك عند أي تغيير، وتأثير التمايل يكتب `transform`
     * مع كل حركة للفأرة — فيبدأ انتقالٌ كامل ستّين مرّة في الثانية على
     * كل بطاقة، ويتجمّد الخيط الرئيسي في الصفحات كثيرة البطاقات.
     */
    transition:
        transform var(--transition-elegant),
        box-shadow var(--transition-elegant),
        border-color var(--transition-base);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

/* أثناء التمايل لا انتقال أصلاً: الحركة تتبع الفأرة مباشرةً */
.card.is-tilting,
.quick-link-card.is-tilting,
.book-card.is-tilting,
.announcement-card.is-tilting,
.social-item.is-tilting,
.timeline-item__body.is-tilting {
    transition: none;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-gold-soft);
}

.card__cover {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-emerald-mid), var(--color-emerald-deep));
}

.card__cover-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-elegant);
}

.card:hover .card__cover-media {
    transform: scale(1.05);
}

.card__cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(10, 61, 46, 0.85));
    display: flex;
    align-items: flex-end;
    padding: var(--space-4);
    z-index: 2;
}

.card__type-badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 3;
    padding: var(--space-1) var(--space-3);
    background: rgba(250, 247, 240, 1);
    color: var(--color-emerald-deep);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    box-shadow: var(--shadow-md);
}

.card__featured-mark {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 3;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-deep);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.card__featured-mark svg {
    width: 16px;
    height: 16px;
}

.card__play-button {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.card:hover .card__play-button {
    opacity: 1;
}

.card__play-button-inner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-emerald-deep);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: scale(0.85);
    transition: transform var(--transition-base);
}

.card:hover .card__play-button-inner {
    transform: scale(1);
}

.card__play-button-inner svg {
    width: 26px;
    height: 26px;
    /* المثلّث يشير يميناً، فتوسيطه البصري يقتضي إزاحته يميناً لا يساراً */
    margin-left: 2px;
}

.card__body {
    padding: var(--space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card__category {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-gold-deep);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card__category::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    transition: color var(--transition-fast);
}

.card:hover .card__title {
    color: var(--color-emerald-deep);
}

.card__description {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
    flex: 1;
}

.card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.card__meta-item svg {
    width: 14px;
    height: 14px;
}

.card__external-mark {
    position: absolute;
    bottom: var(--space-3);
    left: var(--space-3);
    z-index: 3;
    padding: var(--space-1) var(--space-2);
    background: rgba(212, 175, 55, 0.95);
    color: var(--color-emerald-deep);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Cover placeholder */
.cover-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cover-placeholder__letter {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 700;
    color: rgba(212, 175, 55, 0.5);
    z-index: 2;
}

.cover-placeholder__pattern {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.15), transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(212, 175, 55, 0.1), transparent 40%);
    z-index: 1;
}

.cover-placeholder::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(212, 175, 55, 0.05) 20px, rgba(212, 175, 55, 0.05) 21px);
    z-index: 1;
}

/* ===========================================
   Cards Grid Layouts
   =========================================== */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
}

/*
 * شبكة تملأ صفّها دائماً.
 *
 * المشكلة: `auto-fill` يفتح على الشاشة العريضة خمسة أعمدة أو ستّة بينما
 * البطاقات ثلاث، فيبقى نصف الصفّ فارغاً. والحلّ ليس في الشبكة وحدها:
 * نجلب من الخادم بطاقات أكثر ممّا يُعرض، ثمّ نكشف منها بقدر أعمدة كل
 * مقاس بالضبط — فلا صفّ ناقص ولا سطر ثانٍ فيه بطاقة يتيمة.
 *
 * الافتراضي ثلاث: هو ما يناسب الشاشات الصغيرة والمتوسّطة.
 */
.cards-grid.cards-grid--fill > *:nth-child(n + 4) {
    display: none;
}

@media (min-width: 1280px) {
    .cards-grid.cards-grid--fill {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cards-grid.cards-grid--fill > *:nth-child(4) {
        display: flex;
    }

    .cards-grid.cards-grid--fill > *:nth-child(n + 5) {
        display: none;
    }
}

@media (min-width: 1600px) {
    .cards-grid.cards-grid--fill {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cards-grid.cards-grid--fill > *:nth-child(5) {
        display: flex;
    }

    .cards-grid.cards-grid--fill > *:nth-child(n + 6) {
        display: none;
    }
}

@media (min-width: 1900px) {
    .cards-grid.cards-grid--fill {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .cards-grid.cards-grid--fill > *:nth-child(6) {
        display: flex;
    }
}

.cards-grid--lg {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.cards-grid--sm {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ===========================================
   Filter Bar (Client-side filtering)
   =========================================== */
.filter-bar {
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-sm);
}

.filter-bar__top {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

.filter-search {
    flex: 1;
    min-width: 240px;
    position: relative;
}

.filter-search__input {
    width: 100%;
    padding: var(--space-3) var(--space-12) var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-md);
    background: var(--color-cream-mist);
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.filter-search__input:focus {
    outline: none;
    border-color: var(--color-gold-soft);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12);
}

.filter-search__input::placeholder {
    color: var(--text-muted);
}

.filter-search__icon {
    position: absolute;
    top: 50%;
    right: var(--space-4);
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.filter-search__icon svg {
    width: 20px;
    height: 20px;
}

.filter-sort {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-md);
    background: var(--color-cream-mist);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 180px;
}

.filter-sort:focus {
    outline: none;
    border-color: var(--color-gold-soft);
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12);
}

.filter-bar__bottom {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px dashed var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filter-group__label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-tertiary);
    margin-left: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-cream-warm);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.filter-chip:hover {
    background: var(--color-cream-mist);
    border-color: var(--color-gold-soft);
    color: var(--text-primary);
}

.filter-chip.is-active {
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-emerald-mid));
    color: var(--color-cream);
    border-color: var(--color-emerald-deep);
    box-shadow: var(--shadow-emerald);
}

.filter-chip__count {
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    color: inherit;
}

.filter-chip:not(.is-active) .filter-chip__count {
    background: rgba(0, 0, 0, 0.06);
}

.filter-results-count {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-4);
    font-weight: 500;
}

/* ===========================================
   Empty State
   =========================================== */
.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    color: var(--text-tertiary);
}

.empty-state__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-cream-warm);
    border-radius: 50%;
    color: var(--color-gold-soft);
}

.empty-state__icon svg {
    width: 40px;
    height: 40px;
}

.empty-state__message {
    font-size: var(--text-md);
    color: var(--text-tertiary);
    margin: 0;
}

/* ===========================================
   Featured Section / Highlights
   =========================================== */
.section-highlight {
    background: linear-gradient(135deg, rgba(10, 61, 46, 0.03), rgba(201, 169, 97, 0.04));
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    margin-block: var(--space-8);
    position: relative;
    overflow: hidden;
}

.section-highlight::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(201, 169, 97, 0.08), transparent 70%);
    border-radius: 50%;
}

/* ===========================================
   Quick Links Grid
   =========================================== */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-block: var(--space-8);
}

.quick-link-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    color: var(--text-primary);
}

.quick-link-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-gold-soft);
    color: var(--text-primary);
}

.quick-link-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-emerald-mid));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-shimmer);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.quick-link-card__icon svg {
    width: 28px;
    height: 28px;
}

.quick-link-card__content {
    flex: 1;
    min-width: 0;
}

.quick-link-card__label {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--text-primary);
}

.quick-link-card__count {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ===========================================
   Article / Detail Page
   =========================================== */
.detail-page {
    max-width: var(--content-max);
    margin: 0 auto;
}

/*
 * زرّ العودة في صفحات التفاصيل: بعرض المحتوى ونصّه في الوسط، بإطارٍ ولونٍ
 * واضحين. كان زرّاً شفّافاً صغيراً في الزاوية يكاد لا يُرى زرّاً.
 */
.back-link {
    display: flex;
    width: 100%;
    min-height: 48px;
    justify-content: center;
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    color: var(--color-emerald-deep);
    font-weight: 700;
    white-space: normal;
    text-align: center;
}

.back-link svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-gold-deep);
}

.back-link:hover,
.back-link:focus-visible {
    background: var(--color-cream-warm);
    border-color: var(--color-gold-soft);
    color: var(--color-emerald-deep);
}

.detail-cover {
    aspect-ratio: 16/8;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-8);
    position: relative;
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-ink-deep));
}

.detail-cover video,
.detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-meta {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border-light);
}

.detail-heading {
    margin-bottom: var(--space-6);
}

.detail-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-4);
}

.detail-body {
    font-size: var(--text-md);
    line-height: var(--leading-loose);
    color: var(--text-secondary);
}

.detail-body p {
    margin-bottom: var(--space-4);
}

.detail-body h2,
.detail-body h3 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    color: var(--color-emerald-deep);
}

/* ===========================================
   Media Player Block
   =========================================== */
.media-player {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-8);
}

.media-player__video {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
}

.media-player__audio {
    width: 100%;
    padding: var(--space-4);
}

.media-player__audio audio {
    width: 100%;
}

.external-link-block {
    background: linear-gradient(135deg, rgba(10, 61, 46, 0.05), rgba(201, 169, 97, 0.05));
    border: 2px dashed var(--color-gold-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
    margin-bottom: var(--space-8);
}

.external-link-block__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-emerald-deep);
}

.external-link-block__icon svg {
    width: 32px;
    height: 32px;
}

.external-link-block__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
}

.external-link-block__desc {
    color: var(--text-tertiary);
    margin-bottom: var(--space-6);
}

/* ===========================================
   Timeline (Life Page)
   =========================================== */
.timeline {
    position: relative;
    padding-right: var(--space-12);
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 24px;
    width: 2px;
    background: linear-gradient(180deg, var(--color-gold-soft), var(--color-emerald-deep), transparent);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--space-12);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item__marker {
    position: absolute;
    right: -36px;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep));
    border: 4px solid var(--bg-page);
    box-shadow: 0 0 0 2px var(--color-gold-soft);
    z-index: 2;
}

.timeline-item__period {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(10, 61, 46, 0.1);
    color: var(--color-emerald-deep);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    margin-bottom: var(--space-3);
    letter-spacing: 0.05em;
}

.timeline-item__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--color-emerald-deep);
}

.timeline-item__body {
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.timeline-item__image {
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: var(--space-4);
}

/* ===========================================
   Social Grid (Contact Page)
   =========================================== */
.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

.social-item {
    padding: var(--space-6);
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.social-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--social-color, var(--color-gold-soft)), transparent);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.social-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--social-color, var(--color-gold-soft));
}

.social-item:hover::before {
    opacity: 0.05;
}

.social-item__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--social-color, var(--color-gold-soft)), color-mix(in srgb, var(--social-color, var(--color-gold-soft)) 70%, black));
    border-radius: var(--radius-md);
    color: white;
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 2;
}

.social-item__icon svg {
    width: 28px;
    height: 28px;
}

.social-item__name {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
}

/* ===========================================
   Announcement Banner / Card
   =========================================== */
.announcement-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    position: relative;
}

.announcement-card.is-pinned::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    background: linear-gradient(225deg, var(--color-gold-bright) 50%, transparent 50%);
    z-index: 2;
}

.announcement-card.is-pinned::after {
    content: '★';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 18px;
    color: var(--color-emerald-deep);
    z-index: 3;
}

.announcement-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.announcement-card__media {
    aspect-ratio: 16/9;
    overflow: hidden;
    position: relative;
}

.announcement-card__media img,
.announcement-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.announcement-card__body {
    padding: var(--space-5);
}

.announcement-card__date {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-emerald-deep);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.announcement-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.announcement-card__desc {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    line-height: var(--leading-relaxed);
}

/* ===========================================
   Book / PDF Card
   =========================================== */
.book-card {
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.book-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-gold-soft);
}

.book-card__cover {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-bronze), var(--color-gold-deep));
    position: relative;
}

.book-card__cover img,
.book-card__cover video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-card__cover-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    text-align: center;
    color: var(--color-cream);
}

.book-card__cover-placeholder-title {
    font-family: 'Amiri', serif;
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
}

.book-card__cover-placeholder::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(250, 247, 240, 0.3);
    border-radius: var(--radius-sm);
}

.book-card__body {
    padding: var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.book-card__title {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 600;
    margin-bottom: var(--space-1);
    color: var(--text-primary);
}

.book-card__subtitle {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.book-card__actions {
    margin-top: auto;
    display: flex;
    gap: var(--space-2);
}

.book-card__download-label {
    display: none;
}

/*
 * بطاقتان في السطر على الهاتف تضيقان عن زرّين متجاورين فكان زرّ التحميل
 * يُقصّ. فيتراصّان بعرض البطاقة، ويظهر نصّ التحميل بدل الأيقونة وحدها.
 */
@media (max-width: 480px) {
    .book-card__actions {
        flex-wrap: wrap;
    }

    .book-card__actions .btn {
        flex: 1 1 100%;
    }

    .book-card__download-label {
        display: inline;
    }
}

/* ===========================================
   About Page Specific
   =========================================== */
.about-page {
    max-width: var(--content-max);
    margin: 0 auto;
}

.about-hero {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-10);
    margin-bottom: var(--space-12);
    align-items: center;
}

.about-portrait {
    aspect-ratio: 1;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-emerald-mid), var(--color-emerald-deep));
    box-shadow: var(--shadow-xl);
    position: relative;
    border: 4px solid var(--color-gold-soft);
}

.about-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(10, 61, 46, 0.4));
}

.about-content__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    margin-bottom: var(--space-2);
    color: var(--color-emerald-deep);
}

.about-content__subtitle {
    font-size: var(--text-md);
    color: var(--color-gold-deep);
    font-weight: 500;
    margin-bottom: var(--space-6);
}

.about-content__quote {
    font-family: 'Amiri', serif;
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--text-secondary);
    border-right: 3px solid var(--color-gold-soft);
    padding-right: var(--space-4);
    margin-bottom: var(--space-6);
    line-height: var(--leading-relaxed);
}

.about-bio {
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    box-shadow: var(--shadow-sm);
    line-height: var(--leading-loose);
    color: var(--text-secondary);
    font-size: var(--text-md);
    position: relative;
    overflow: hidden;
}

.about-bio::before {
    content: '"';
    position: absolute;
    top: -20px;
    right: 20px;
    font-family: 'Amiri', serif;
    font-size: 12rem;
    color: rgba(201, 169, 97, 0.08);
    line-height: 1;
}

.about-bio p {
    margin-bottom: var(--space-4);
    position: relative;
}

/* ===========================================
   Login Form (Admin)
   =========================================== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-ink-deep));
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.15), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(201, 169, 97, 0.1), transparent 50%);
}

.login-card {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    width: 100%;
    max-width: 440px;
    box-shadow: var(--shadow-xl);
    position: relative;
    border: 1px solid var(--color-border-light);
}

.login-card__brand {
    text-align: center;
    margin-bottom: var(--space-8);
}

.login-card__logo {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-emerald-deep);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    box-shadow: var(--shadow-gold);
}

.login-card__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.login-card__subtitle {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

.form-group {
    margin-bottom: var(--space-5);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-md);
    background: var(--color-cream-mist);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-gold-soft);
    background: white;
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12);
}

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.alert-error {
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.2);
    color: var(--color-danger);
}

.alert-success {
    background: rgba(45, 138, 95, 0.08);
    border: 1px solid rgba(45, 138, 95, 0.2);
    color: var(--color-success);
}

/* =====================================================
   قائمة حلقات السلسلة - Series Episode List
   ===================================================== */
/* =====================================================
   صفحة السلسلة — لوحة البيانات
   -----------------------------------------------------
   خاناتٌ متساوية في بطاقةٍ واحدة على الشاشة الواسعة، وصفوفٌ
   (العنوان يميناً والقيمة يساراً) على الهاتف. والتنبيهات ذيلٌ
   للبطاقة نفسها لا صناديق مستقلّة تزاحمها.
   ===================================================== */
.series-overview {
    margin-bottom: var(--space-6);
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.series-facts {
    display: grid;
    margin: 0;
}

/* كل بيانٍ سطرٌ بعرض البطاقة، والأيقونة والنصّ في وسطه */
.series-fact {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    text-align: center;
}

.series-fact + .series-fact {
    border-top: 1px solid var(--color-border-light);
}

.series-fact__value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin: 0;
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-emerald-deep);
}

.series-fact__value svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-gold-soft);
}

/* التاريخان لا ينقسم أحدهما: يلتفّ السطر بينهما لا في منتصف التاريخ */
.series-fact__range {
    white-space: nowrap;
}

.series-overview__notes {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border-light);
    background: rgba(212, 160, 84, 0.07);
}

.series-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

.series-note svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 0.25em;
    color: var(--color-warning);
}

.series-note strong {
    color: var(--text-primary);
}

.series-episodes-head {
    margin-bottom: var(--space-4);
}

.series-episodes-head__title {
    margin-bottom: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-emerald-deep);
}

.series-episodes-head__meta {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

@media (max-width: 640px) {
    .series-fact__value {
        font-size: var(--text-sm);
    }

    /* على الهاتف: «من …» سطرٌ و«إلى …» سطرٌ تحته، في الوسط */
    .series-fact__range {
        display: block;
    }

    .series-overview__notes {
        padding: var(--space-4);
    }
}

.episode-search {
    position: relative;
    margin-bottom: var(--space-4);
}

.episode-search input {
    width: 100%;
    padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-md);
    background: var(--color-cream-mist);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.episode-search input:focus {
    outline: none;
    border-color: var(--color-gold-soft);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12);
}

.episode-search__icon {
    position: absolute;
    top: 50%;
    right: var(--space-4);
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.episode-search__icon svg {
    width: 18px;
    height: 18px;
}

.episode-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
}

.episode-list--scroll {
    max-height: 460px;
    overflow-y: auto;
}

.episode-item + .episode-item {
    border-top: 1px solid var(--color-border-light);
}

.episode-item__link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast, 200ms);
}

.episode-item__link:hover {
    background: var(--color-cream-warm);
}

.episode-item.is-current .episode-item__link {
    background: rgba(201, 169, 97, 0.12);
    border-right: 3px solid var(--color-gold-soft);
}

.episode-item__number {
    flex-shrink: 0;
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-cream-warm);
    color: var(--color-emerald-deep);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-sm);
}

.episode-item.is-current .episode-item__number {
    background: var(--color-emerald-deep);
    color: var(--color-gold-shimmer);
}

.episode-item__body {
    flex: 1;
    min-width: 0;
}

.episode-item__title {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-snug, 1.4);
    margin-bottom: var(--space-1);
}

.episode-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.episode-item__meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.episode-item__meta svg {
    width: 13px;
    height: 13px;
}

.episode-item__play {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--color-cream-warm);
    color: var(--color-emerald-deep);
}

.episode-item__play svg {
    width: 14px;
    height: 14px;
}

.episode-item__link:hover .episode-item__play {
    background: var(--color-gold-soft);
    color: #fff;
}

.episode-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-8);
}

.episode-nav__link {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color 200ms, box-shadow 200ms;
}

.episode-nav__link:hover {
    border-color: var(--color-gold-soft);
    box-shadow: var(--shadow-sm);
}

.episode-nav__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.episode-nav__title {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-emerald-deep);
}

@media (max-width: 768px) {
    .episode-item__link {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-3);
    }

    .episode-item__number {
        min-width: 34px;
        height: 34px;
    }

    .episode-item__play {
        display: none;
    }
}

/* =====================================================
   التحميل التدريجي - Progressive Feed Loading
   ===================================================== */
.js-enabled .requires-no-js {
    display: none !important;
}

.feed-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    color: var(--text-tertiary);
    font-size: var(--text-sm);
}

.feed-loader[hidden] {
    display: none;
}

.feed-loader__spinner {
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-border-mid);
    border-top-color: var(--color-gold-soft);
    border-radius: 50%;
    animation: feed-spin 700ms linear infinite;
}

@keyframes feed-spin {
    to { transform: rotate(360deg); }
}

.feed-sentinel {
    height: 1px;
}

.feed-sentinel[hidden] {
    display: none;
}

.feed-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-6) 0 var(--space-2);
}

.feed-more[hidden] {
    display: none;
}

.feed-end {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.feed-end[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .feed-loader__spinner {
        animation-duration: 2s;
    }
}

/* =====================================================
   شريط الفلاتر — قوائم منسدلة بجانب البحث
   ===================================================== */
.filter-bar--compact {
    padding: var(--space-4) var(--space-5);
}

.filter-bar__row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
}

.filter-bar__row .filter-search {
    flex: 1 1 260px;
}

.filter-controls {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    flex: 0 1 auto;
}

.filter-select {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.filter-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: var(--space-3) var(--space-4);
    padding-left: var(--space-10);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-md);
    background: var(--color-cream-mist);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    min-width: 150px;
    max-width: 100%;
    transition: all var(--transition-fast);
}

.filter-select select:hover {
    border-color: var(--color-gold-soft);
    background: #fff;
}

.filter-select select:focus {
    outline: none;
    border-color: var(--color-gold-soft);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12);
}

/* القائمة التي عليها فلتر مفعَّل تُبرز بلون الهوية */
.filter-select.is-filtered select {
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-emerald-mid));
    border-color: var(--color-emerald-deep);
    color: var(--color-cream);
    font-weight: 600;
}

.filter-select.is-filtered .filter-select__arrow {
    color: var(--color-gold-shimmer);
}

.filter-select__arrow {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
    display: inline-flex;
}

.filter-select__arrow svg {
    width: 14px;
    height: 14px;
}

/* شرائح الفلاتر المفعَّلة (قابلة للإزالة) */
.filter-active {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-border-light);
}

.filter-active[hidden] {
    display: none;
}

.filter-active__label {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.05em;
}

.filter-active__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--color-cream-warm);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-emerald-deep);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.filter-active__pill:hover {
    background: var(--color-cream-mist);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.filter-active__pill::after {
    content: '✕';
    font-size: 0.7rem;
    opacity: 0.6;
}

.filter-active__clear {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-decoration: underline;
    margin-right: auto;
}

.filter-active__clear:hover {
    color: var(--color-danger);
}

/* ٩٠٠ يتيمة — ضُمّت إلى سلّم المشروع */
@media (max-width: 1024px) {
    /* الشاشات الصغيرة: البحث في سطر، والقوائم تحته موزّعة بالتساوي */
    .filter-bar__row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    /*
     * في العمود يصير أساسُ المرونة ارتفاعاً لا عرضاً: قاعدة «1 1 260px»
     * أعلاه جعلت حاوية البحث بطول ٢٦٠ بكسل على الهاتف، فبقي الحقل في
     * أعلاها وانزلقت أيقونة البحث إلى منتصفها وانفتح تحته فراغٌ كبير.
     */
    .filter-bar__row .filter-search {
        flex: 0 0 auto;
        min-width: 0;
    }

    .filter-controls {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }

    .filter-select {
        display: flex;
    }

    .filter-select select {
        width: 100%;
        min-width: 0;
        padding-right: var(--space-3);
        padding-left: var(--space-8);
        text-overflow: ellipsis;
    }

    .filter-controls .btn {
        grid-column: 1 / -1;
    }
}

/* ٥٢٠ يتيمة — ضُمّت إلى سلّم المشروع */
@media (max-width: 480px) {
    .filter-controls {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   القائمة المنسدلة المنسّقة بهوية الموقع
   ===================================================== */

/* عند تفعيل الجافاسكربت يُخفى الـ select الأصلي بصرياً ويبقى في النموذج */
.filter-select.is-enhanced > select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.dropdown__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-width: 152px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-md);
    background: var(--color-cream-mist);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: right;
    transition: all var(--transition-fast);
}

.dropdown__button:hover {
    background: #fff;
    border-color: var(--color-gold-soft);
    color: var(--text-primary);
}

.dropdown__button:focus-visible {
    outline: none;
    border-color: var(--color-gold-soft);
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12);
}

.filter-select.is-open .dropdown__button {
    background: #fff;
    border-color: var(--color-gold-soft);
    box-shadow: 0 0 0 4px rgba(201, 169, 97, 0.12);
}

.dropdown__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown__arrow {
    position: static;
    transform: none;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.filter-select.is-open .dropdown__arrow {
    transform: rotate(180deg);
}

/* الحقل الذي عليه فلتر مفعَّل */
.filter-select.is-filtered .dropdown__button {
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-emerald-mid));
    border-color: var(--color-emerald-deep);
    color: var(--color-cream);
    font-weight: 600;
    box-shadow: var(--shadow-emerald);
}

.filter-select.is-filtered .dropdown__arrow {
    color: var(--color-gold-shimmer);
}

/* اللوحة المنبثقة */
.dropdown__panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + var(--space-2));
    inset-inline: 0;
    min-width: 100%;
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: var(--space-2);
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: dropdown-appear 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown__panel[hidden] {
    display: none;
}

@keyframes dropdown-appear {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown__option {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown__option:hover,
.dropdown__option:focus {
    outline: none;
    background: var(--color-cream-warm);
    color: var(--color-emerald-deep);
}

.dropdown__option:focus-visible {
    box-shadow: inset 0 0 0 1px var(--color-gold-soft);
}

.dropdown__option.is-selected {
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-emerald-mid));
    color: var(--color-cream);
    font-weight: 600;
    position: relative;
    padding-left: var(--space-8);
}

.dropdown__option.is-selected::after {
    content: '✓';
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gold-shimmer);
    font-size: var(--text-sm);
}

.dropdown__option.is-selected:hover,
.dropdown__option.is-selected:focus {
    background: linear-gradient(135deg, var(--color-emerald-mid), var(--color-emerald-light));
    color: var(--color-cream);
}

/* شريط تمرير رفيع داخل اللوحة */
.dropdown__panel::-webkit-scrollbar {
    width: 8px;
}

.dropdown__panel::-webkit-scrollbar-track {
    background: var(--color-cream-warm);
    border-radius: var(--radius-full);
}

.dropdown__panel::-webkit-scrollbar-thumb {
    background: var(--color-border-mid);
    border-radius: var(--radius-full);
}

.dropdown__panel::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-soft);
}

@media (prefers-reduced-motion: reduce) {
    .dropdown__panel {
        animation: none;
    }
}

/* =====================================================
   حالة اكتمال السلسلة
   ===================================================== */
.series-status {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    z-index: 3;
}

.series-status--success {
    background: #1f6b47;
    color: #fff;
}

.series-status--warning {
    background: rgba(212, 160, 84, 0.92);
    color: var(--color-ink-deep);
}

.series-status--neutral {
    background: rgba(26, 20, 16, 0.6);
    color: var(--color-cream);
}

/* داخل ترويسة صفحة السلسلة تكون الشارة ضمن السطر لا مطلقة */
.series-status--onDark {
    position: static;
    padding: var(--space-2) var(--space-4);
    backdrop-filter: none;
}

.series-status--onDark svg {
    width: 14px;
    height: 14px;
}


/* ============================================================
   رأس القسم بزرّ جانبي، وشارات البطاقة تحت الغلاف
   ============================================================ */

.section-header--row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
}

/*
 * العنوان والوصف كتلة واحدة تُحاذي الزرّ في الوسط.
 * كان الوصف يحمل هامشاً سفلياً كبيراً داخل صفّ محاذاته للأسفل،
 * فينزل الزرّ عن مستوى العنوان ويبدو معلّقاً بلا رابط.
 */
.section-header--row > div:first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.section-header--row .section-subtitle {
    margin-bottom: 0;
}

.section-header--row > .btn {
    flex: 0 0 auto;
}

/* ----- شارات البطاقة ----- */
.card__labels {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

.card__kind {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-emerald-mid);
    background: rgba(15, 83, 64, 0.08);
    border: 1px solid rgba(15, 83, 64, 0.16);
    border-radius: var(--radius-full);
    padding: 3px var(--space-3);
    white-space: nowrap;
}

.card__kind svg {
    width: 14px;
    height: 14px;
}

/* التصنيف بجانب النوع الآن، فلا يحتاج هامشاً سفلياً مستقلاً */
.card__labels .card__category {
    margin-bottom: 0;
}

.card__labels .series-status {
    margin: 0;
}

@media (max-width: 768px) {
    .section-header--row {
        align-items: flex-start;
    }

    .section-header--row > .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   صفحة الدرس — اللوحة والمشغّل
   ============================================================ */

.lesson-stage {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-8);
    background: linear-gradient(150deg, var(--color-emerald-deep) 0%, #072e22 55%, var(--color-ink-deep) 100%);
    color: var(--color-cream);
    box-shadow: 0 24px 60px rgba(7, 46, 34, 0.28);
    isolation: isolate;
}

/* زخرفة هندسية خفيفة تكسر السطح الداكن بلا أن تزاحم النصّ */
.lesson-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        radial-gradient(circle at 88% 12%, rgba(212, 175, 55, 0.16), transparent 55%),
        repeating-linear-gradient(60deg, transparent, transparent 78px, rgba(201, 169, 97, 0.05) 78px, rgba(201, 169, 97, 0.05) 79px);
    pointer-events: none;
}

.lesson-stage__body {
    position: relative;
    z-index: 1;
    padding: var(--space-10) var(--space-10) var(--space-6);
}

.lesson-stage__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.lesson-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 5px var(--space-4);
    border-radius: var(--radius-full);
    background: rgba(250, 247, 240, 0.08);
    border: 1px solid rgba(250, 247, 240, 0.16);
    color: rgba(250, 247, 240, 0.9);
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.lesson-chip svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* رقاقة السلسلة هي الرابط الوحيد بينها، فتُميَّز بالذهبي */
.lesson-chip--link {
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.38);
    color: var(--color-gold-shimmer);
    text-decoration: none;
    transition: background-color 200ms ease, border-color 200ms ease;
    /*
     * اسم السلسلة قد يطول سطرين («مجالس إنشادية ونفحات روحانية…»)، وكان
     * nowrap يمدّه خارج الشاشة من الجهتين. فيلتفّ داخل الرقاقة بدل ذلك.
     */
    white-space: normal;
    line-height: 1.7;
    border-radius: var(--radius-lg);
}

.lesson-chip--link span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.lesson-chip--link:hover {
    background: rgba(212, 175, 55, 0.26);
    border-color: var(--color-gold-bright);
}

/*
 * صفوف الانتماء فوق عنوان الدرس: السلسلة ورقم الحلقة والتصنيف، كلٌّ في سطرٍ
 * بعرض اللوحة وبأيقونته. والسلسلة رابطٌ ذهبيّ بسهمٍ يدلّ أنها تُفتح.
 */
.lesson-facts {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.lesson-fact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(250, 247, 240, 0.06);
    border: 1px solid rgba(250, 247, 240, 0.14);
    color: rgba(250, 247, 240, 0.9);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.6;
}

.lesson-fact svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-gold-soft);
}

.lesson-fact__text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.lesson-fact--link {
    min-height: 3rem;
    background: rgba(212, 175, 55, 0.12);
    border-color: rgba(212, 175, 55, 0.35);
    color: var(--color-gold-shimmer);
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.lesson-fact--link:hover,
.lesson-fact--link:focus-visible {
    background: rgba(212, 175, 55, 0.22);
    border-color: var(--color-gold-bright);
    color: var(--color-gold-shimmer);
}

.lesson-fact__go {
    display: inline-flex;
    opacity: 0.75;
}

.lesson-stage__title {
    font-family: 'Amiri', var(--font-display), serif;
    font-size: clamp(var(--text-2xl), 2.4vw + 1rem, var(--text-4xl));
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-cream);
    margin: 0 0 var(--space-4);
}

/*
 * بيانات الدرس: الزمن والتاريخ والمشاهدات، كلٌّ في سطر داخل إطارٍ واحد
 * تفصل بينها خطوطٌ رفيعة. كانت سطراً بفواصل نقطية يلتفّ فيتبعثر.
 */
.lesson-stage__meta {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(250, 247, 240, 0.14);
    border-radius: var(--radius-md);
    background: rgba(250, 247, 240, 0.04);
    font-size: var(--text-sm);
    color: rgba(250, 247, 240, 0.9);
}

.lesson-stage__meta > span {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    min-height: 2.75rem;
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
}

.lesson-stage__meta > span + span {
    border-top: 1px solid rgba(250, 247, 240, 0.1);
}

.lesson-stage__meta svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-gold-soft);
}

.lesson-stage__player {
    position: relative;
    z-index: 1;
    padding: 0 var(--space-6) var(--space-6);
}

.lesson-stage__player--external {
    padding: var(--space-4) var(--space-10) var(--space-10);
    text-align: center;
}

.lesson-stage__external-note {
    color: rgba(250, 247, 240, 0.75);
    font-size: var(--text-sm);
    margin-bottom: var(--space-5);
}

.lesson-stage__player .media-player__video {
    width: 100%;
    border-radius: var(--radius-lg);
    aspect-ratio: 16/9;
    background: #000;
}

/* ----- الأقسام تحت اللوحة ----- */
.lesson-panel {
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin-top: var(--space-6);
}

.lesson-panel--flush {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: var(--space-10);
}

.lesson-panel__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-emerald-deep);
    margin-bottom: var(--space-4);
}

/* ============================================================
   مشغّل الصوت
   ============================================================ */

.audio-player__native {
    width: 100%;
}

/* المشغّل الأصلي يختفي حالما تتولّى الواجهة المخصّصة */
.audio-player.is-enhanced .audio-player__native {
    display: none;
}

.audio-player__shell {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: var(--bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

/* ----- صفّ الأزرار والأدوات ----- */
.audio-player__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
}

.audio-player__transport {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.audio-player__tools {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

/* كل أداة تُحاذى وسطياً وارتفاعها واحد، فيستوي الصفّ بصرامة */
.audio-player__tools > * {
    display: flex;
    align-items: center;
    min-height: 34px;
}

.audio-player__play {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-emerald-mid), var(--color-emerald-deep));
    color: var(--color-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(10, 61, 46, 0.32);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.audio-player__play:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(10, 61, 46, 0.4);
}

.audio-player__play:active {
    transform: scale(0.97);
}

.audio-player__play svg {
    width: 22px;
    height: 22px;
}

/*
 * حاويات الأيقونات صناديق مرنة موسَّطة: كانت `span` عادية، فيضيف
 * ارتفاعُ السطر مسافةً تحت الرمز فيبدو مزاحاً عن مركز الزرّ.
 * (قواعد الإخفاء أدناه تأتي بعدها فتغلبها بترتيب الملفّ.)
 */
.audio-player__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.audio-player__icon svg {
    display: block;
}

/* أيقونة واحدة ظاهرة بحسب الحالة — لا استبدال للـ DOM أثناء التشغيل */
.audio-player__icon--pause,
.audio-player.is-playing .audio-player__icon--play {
    display: none;
}

.audio-player.is-playing .audio-player__icon--pause {
    display: flex;
}

/* أيقونة التشغيل مثلّث، فتبدو مزاحة لليسار ما لم تُعدَّل */
.audio-player__icon--play {
    display: flex;
    margin-inline-start: 3px;
}

.audio-player__step {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border-light);
    border-radius: 50%;
    background: transparent;
    color: var(--color-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.audio-player__step:hover {
    border-color: var(--color-gold-soft);
    color: var(--color-emerald-deep);
    background: rgba(201, 169, 97, 0.08);
}

.audio-player__step svg {
    width: 23px;
    height: 23px;
}

.audio-player__step-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding-top: 2px;
    pointer-events: none;
}

/* ----- شريط الموضع ----- */
.audio-player__timeline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* الاتّجاه لاتيني عمداً: التقدّم يمشي يساراً←يميناً كأي مشغّل */
    direction: ltr;
}

.audio-player__time {
    flex: 0 0 auto;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-ink-mist);
    min-width: 46px;
    text-align: center;
}

.audio-player__bar {
    position: relative;
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: var(--color-border-light);
    cursor: pointer;
    touch-action: none;
}

/* مساحة لمس أوسع من الشريط المرئي، وإلّا صعب على الإصبع إصابته */
.audio-player__bar::before {
    content: '';
    position: absolute;
    inset: -14px 0;
}

.audio-player__bar:focus-visible {
    outline: 2px solid var(--color-gold-soft);
    outline-offset: 5px;
}

/* يسمك عند الاقتراب منه فيُدرك الزائر أنه قابل للسحب */
.audio-player__bar,
.audio-player__buffered,
.audio-player__played {
    transition: height 140ms ease;
}

.audio-player__bar:hover,
.audio-player.is-scrubbing .audio-player__bar {
    height: 10px;
}

.audio-player__buffered {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    border-radius: 999px;
    background: var(--color-border-mid);
}

.audio-player__played {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-emerald-mid), var(--color-gold-soft));
}

.audio-player__thumb {
    position: absolute;
    inset-inline-end: -7px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--color-cream-mist);
    border: 2px solid var(--color-emerald-deep);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transition: opacity 150ms ease;
}

.audio-player__bar:hover .audio-player__thumb,
.audio-player__bar:focus-visible .audio-player__thumb,
.audio-player.is-playing .audio-player__thumb {
    opacity: 1;
}

/* ----- الأدوات ----- */
.audio-player__volume {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /*
     * ارتفاع ثابت يساوي ارتفاع زرّ الكتم: بدونه يحدّد أطولُ عنصر
     * ارتفاعَ الصفّ فتتزحزح المحاذاة مع كل تغيير في المقاسات.
     */
    height: 34px;
}

.audio-player__mute {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-ink-soft);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.audio-player__mute:hover {
    color: var(--color-emerald-deep);
}

.audio-player__mute svg {
    width: 20px;
    height: 20px;
}

.audio-player__icon--off,
.audio-player.is-muted .audio-player__icon--on {
    display: none;
}

.audio-player.is-muted .audio-player__icon--off {
    display: flex;
}

.audio-player--onDark .audio-player__mute {
    color: rgba(250, 247, 240, 0.82);
}

.audio-player--onDark .audio-player__mute:hover {
    color: var(--color-gold-shimmer);
}

.audio-player__speed {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.audio-player__speed-label {
    font-size: var(--text-xs);
    color: var(--color-ink-mist);
}

.audio-player__speed-select {
    font-family: inherit;
    font-size: var(--text-sm);
    padding: 4px var(--space-3);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
}

.audio-player__speed-select:hover {
    border-color: var(--color-gold-soft);
}

.audio-player__speed-select:focus-visible {
    outline: 2px solid var(--color-gold-soft);
    outline-offset: 2px;
}

.audio-player__resumed {
    font-size: var(--text-xs);
    color: var(--color-ink-mist);
    margin: 0;
}

.audio-player__resumed button {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--color-emerald-mid);
    text-decoration: underline;
    cursor: pointer;
}

/* ============================================================
   نسخة المشغّل على خلفية داكنة
   ============================================================ */

.audio-player--onDark .audio-player__shell {
    background: rgba(250, 247, 240, 0.06);
    border-color: rgba(250, 247, 240, 0.14);
}

/* على اللمس: أزرار التقديم وكتم الصوت بمساحةٍ يصيبها الإصبع (٤٨) */
@media (pointer: coarse) {
    .audio-player__step,
    .audio-player__mute {
        width: 48px;
        height: 48px;
    }
}

.audio-player__error {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(192, 57, 43, 0.08);
    color: #9b2d21;
    font-size: var(--text-sm);
    line-height: 1.7;
}

.audio-player--onDark .audio-player__error {
    background: rgba(255, 255, 255, 0.1);
    color: #ffd9d2;
}

.audio-player--onDark .audio-player__play {
    background: linear-gradient(135deg, var(--color-gold-bright), var(--color-gold-deep));
    color: var(--color-ink-deep);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.35);
}

.audio-player--onDark .audio-player__step {
    border-color: rgba(250, 247, 240, 0.22);
    color: rgba(250, 247, 240, 0.82);
}

.audio-player--onDark .audio-player__step:hover {
    border-color: var(--color-gold-soft);
    color: var(--color-gold-shimmer);
    background: rgba(212, 175, 55, 0.12);
}

.audio-player--onDark .audio-player__time {
    color: rgba(250, 247, 240, 0.7);
}

.audio-player--onDark .audio-player__bar {
    background: rgba(250, 247, 240, 0.16);
}

.audio-player--onDark .audio-player__buffered {
    background: rgba(250, 247, 240, 0.28);
}

.audio-player--onDark .audio-player__played {
    background: linear-gradient(90deg, var(--color-gold-soft), var(--color-gold-shimmer));
}

.audio-player--onDark .audio-player__thumb {
    background: var(--color-cream);
    border-color: var(--color-gold-bright);
}

.audio-player--onDark .audio-player__speed-label,
.audio-player--onDark .audio-player__resumed {
    color: rgba(250, 247, 240, 0.6);
}

.audio-player--onDark .audio-player__speed-select {
    background: rgba(10, 61, 46, 0.55);
    border-color: rgba(250, 247, 240, 0.22);
    color: var(--color-cream);
}

.audio-player--onDark .audio-player__resumed button {
    color: var(--color-gold-shimmer);
}


/* ============================================================
   منزلق الصوت وزرّ التنزيل
   ============================================================ */

/*
 * المنزلق مرسوم بالكامل: `accent-color` وحده يعطي مساراً سميكاً
 * ومقبضاً كبيراً يختلف شكله بين المتصفّحات ولا يشبه بقيّة المشغّل.
 * النسبة تصل من الجافاسكربت في `--volume-fill` فيُلوَّن المسموع منها.
 */
.audio-player__volume-range {
    -webkit-appearance: none;
    appearance: none;
    /*
     * الحقل نفسه هو المسار المرئي (سُمكه ٦ بكسل)، والمقبض أكبر منه
     * فيفيض على طرفيه بالتساوي — فيتوسّط رأسياً بلا حساب هوامش يختلف
     * من متصفّح لآخر. وهذا سبب انحراف المنزلق عن أيقونته سابقاً.
     */
    width: 84px;
    height: 6px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    vertical-align: middle;
    direction: ltr;
    cursor: pointer;
    --volume-fill: 100%;
    --volume-track: var(--color-border-light);
    --volume-filled: var(--color-emerald-mid);
    --volume-thumb: var(--color-emerald-deep);
    background: linear-gradient(
        to right,
        var(--volume-filled) 0 var(--volume-fill),
        var(--volume-track) var(--volume-fill) 100%
    );
}

/* المسار الأصلي يُخفى ليظهر تدرّج الحقل نفسه */
.audio-player__volume-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: transparent;
    border: none;
}

.audio-player__volume-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4px;        /* توسيط مقبض ١٤ على مسار ٦ */
    border-radius: 50%;
    border: none;
    background: var(--volume-thumb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 140ms ease;
}

.audio-player__volume-range:hover::-webkit-slider-thumb,
.audio-player__volume-range:focus-visible::-webkit-slider-thumb {
    transform: scale(1.2);
}

.audio-player__volume-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: transparent;
}

.audio-player__volume-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: var(--volume-thumb);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.audio-player__volume-range:focus-visible {
    outline: 2px solid var(--color-gold-soft);
    outline-offset: 3px;
    border-radius: 999px;
}

/* على الخلفية الداكنة: مسار فاتح شفّاف وممتلئ ذهبي */
.audio-player--onDark .audio-player__volume-range {
    --volume-track: rgba(250, 247, 240, 0.22);
    --volume-filled: var(--color-gold-soft);
    --volume-thumb: var(--color-gold-shimmer);
}

/* حين يُكتم الصوت يبهت المنزلق فيُقرأ الكتم من شكله لا من الأيقونة وحدها */
.audio-player.is-muted .audio-player__volume-range {
    opacity: 0.45;
}

/* ----- زرّ التنزيل ----- */
.audio-player__download {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px var(--space-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.audio-player__download:hover {
    color: var(--color-emerald-deep);
    border-color: var(--color-gold-soft);
    background: rgba(201, 169, 97, 0.1);
}

.audio-player__download:active {
    transform: translateY(1px);
}

.audio-player__download svg {
    width: 17px;
    height: 17px;
}

.audio-player--onDark .audio-player__download {
    border-color: rgba(250, 247, 240, 0.22);
    color: rgba(250, 247, 240, 0.85);
}

.audio-player--onDark .audio-player__download:hover {
    color: var(--color-ink-deep);
    border-color: var(--color-gold-bright);
    background: var(--color-gold-shimmer);
}

/* ----- الشاشات الصغيرة ----- */
@media (max-width: 768px) {
    .lesson-stage__body {
        padding: var(--space-6) var(--space-5) var(--space-4);
    }

    .lesson-stage__player {
        padding: 0 var(--space-4) var(--space-5);
    }

    .lesson-stage__title {
        line-height: 1.45;
    }

    .audio-player__shell {
        padding: var(--space-5) var(--space-4);
        gap: var(--space-4);
    }

    /*
     * ترتيب الهاتف: الأزرار، فالشريط تحتها مباشرةً، فالأدوات آخراً.
     * وضعُ الشريط بين الأزرار والأدوات يجعل التسلسل مطابقاً لما يفعله
     * السامع: يشغّل، فيتابع موضعه، ثمّ يضبط الإعدادات عند الحاجة.
     * `display: contents` يُذيب الحاوية فتشارك أبناؤها في عمود المشغّل.
     */
    .audio-player__controls {
        display: contents;
    }

    .audio-player__transport {
        order: 1;
        justify-content: center;
        gap: var(--space-6);
    }

    .audio-player__timeline {
        order: 2;
    }

    /*
     * الأدوات ثلاث خاناتٍ بارتفاعٍ واحد وحدودٍ واحدة: السرعة والتنزيل عريضتان
     * وبينهما الكتم. كانت متباعدةً بـ space-between، لكلٍّ منها شكلٌ، فتبدو مبعثرة.
     */
    .audio-player__tools {
        order: 3;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
        align-items: stretch;
        gap: var(--space-2);
        padding-top: var(--space-4);
        border-top: 1px solid rgba(250, 247, 240, 0.12);
    }

    .audio-player:not(.audio-player--onDark) .audio-player__tools {
        border-top-color: var(--color-border-light);
    }

    /*
     * على الهاتف يسقط النصّ ويبقى الرمز، فيتساوى الزرّان في القياس
     * ويصيران هدفَي لمس مريحَين (٤٨ بكسل) بدل حبّة نصّية وأيقونة عارية.
     */
    .audio-player__mute,
    .audio-player__download {
        width: 48px;
        height: 48px;
        padding: 0;
        justify-content: center;
        border-radius: var(--radius-md);
        border: 1px solid var(--color-border-light);
        background: transparent;
    }

    .audio-player--onDark .audio-player__mute,
    .audio-player--onDark .audio-player__download {
        border-color: rgba(250, 247, 240, 0.18);
    }

    .audio-player__mute svg,
    .audio-player__download svg {
        width: 20px;
        height: 20px;
    }

    /* الارتفاع الثابت ٣٤ يقيّد زرّاً قياسه ٤٨ فيزيح مركزه — يُرفع هنا */
    .audio-player__volume,
    .audio-player__tools > * {
        height: auto;
        min-height: 48px;
    }

    /*
     * منزلق الصوت يختفي: أزرار الجهاز تضبط الصوت، وهو يلتهم نصف
     * الصفّ فيزحم السرعة والتنزيل. زرّ الكتم يبقى.
     */
    .audio-player__volume-range {
        display: none;
    }

    .audio-player__download {
        width: auto;
        gap: var(--space-2);
        font-size: var(--text-sm);
    }

    .audio-player__speed {
        justify-content: center;
        gap: var(--space-2);
        padding-inline: var(--space-3);
        border: 1px solid var(--color-border-light);
        border-radius: var(--radius-md);
    }

    .audio-player--onDark .audio-player__speed {
        border-color: rgba(250, 247, 240, 0.18);
    }

    /* القائمة داخل خانتها بلا إطارٍ ثانٍ — الخانة هي الإطار */
    .audio-player .audio-player__speed-select {
        min-height: 44px;
        padding: 0 var(--space-1);
        border: 0;
        background: transparent;
        font-weight: 700;
    }

    .audio-player--onDark .audio-player__speed-select option {
        color: var(--text-primary);
    }

    /* الشريط أسمك قليلاً ليسهل على الإصبع، والأوقات أوضح */
    .audio-player__timeline {
        gap: var(--space-3);
    }

    .audio-player__bar {
        height: 8px;
    }

    .audio-player__time {
        font-size: var(--text-sm);
        min-width: 44px;
    }

    .audio-player--onDark .audio-player__time {
        color: rgba(250, 247, 240, 0.85);
    }

    .audio-player__thumb {
        opacity: 1;   /* لا تحويم على اللمس، فالمقبض يبقى ظاهراً */
        width: 16px;
        height: 16px;
    }
}

/* ٤٠٠ يتيمة — ضُمّت إلى سلّم المشروع */
@media (max-width: 480px) {
    .lesson-stage__body {
        padding: var(--space-5) var(--space-4) var(--space-3);
    }

    .lesson-stage__player {
        padding: 0 var(--space-3) var(--space-4);
    }

    .audio-player__shell {
        padding: var(--space-4) var(--space-3);
    }

    .audio-player__transport {
        gap: var(--space-5);
    }

    .audio-player__time {
        min-width: 40px;
        font-size: var(--text-xs);
    }
}

/* ============================================================
   إصلاحات تباين ووصولية
   ============================================================ */

/*
 * زرّ محدَّد على خلفية داكنة.
 *
 * `.btn-outline:hover` يضع خلفيةً كريمية ونصّاً داكناً — وهو صحيح على
 * الصفحة الفاتحة. لكن على الواجهة الزمرّدية كان النصّ يُثبَّت فاتحاً
 * بنمط سطري يغلب قاعدة التحويم، فتتغيّر الخلفية ولا يتغيّر النصّ
 * فتختفي الكلمة. هنا يبقى الطرفان فاتحين.
 */
.btn-outline--onDark {
    border-color: rgba(212, 175, 55, 0.5);
    color: var(--color-cream);
}

.btn-outline--onDark:hover,
.btn-outline--onDark:focus-visible {
    background: rgba(212, 175, 55, 0.18);
    border-color: var(--color-gold-bright);
    color: var(--color-cream);
}

/*
 * السمة hidden تعني الإخفاء دائماً.
 *
 * ورقة المتصفّح تطبّقها بـ `display: none` بأولوية أدنى من أي صنف، فأي
 * عنصر مخفيّ يحمل صنفاً فيه `display: flex` يبقى ظاهراً. وأثره كان
 * فاضحاً في مشغّل الصوت: من عُطِّل عنده الجافاسكربت يرى مشغّل المتصفّح
 * وفوقه مشغّلاً مخصّصاً ميّتاً لا يستجيب.
 */
[hidden] {
    display: none !important;
}

/*
 * لون التصنيف على البطاقة: حدٌّ أدنى للتباين.
 *
 * كان يُطبَع خاماً من لوحة التحكّم، وقيمته الافتراضية الذهبية تعطي
 * ٢٫١٠:١ على بطاقة بيضاء — غير مقروء في حجم ١٢ بكسل. الظلّ الخفيف
 * يثقّل الحرف فيُقرأ مهما كان اللون الذي يختاره المدير.
 */
.card__category {
    text-shadow: 0 0 1px currentColor;
}

/* ============================================================
   ترويسة الصفحة الزمرّدية
   ============================================================ */

.page-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-10);
    margin-bottom: var(--space-8);
    color: var(--color-cream);
    isolation: isolate;
}

/* ----- أنماط الترويسة: كل صفحة كانت تحمل تدرّجها في نمط سطري ----- */
.page-hero--emerald {
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-ink-deep));
}

.page-hero--gold {
    background: linear-gradient(135deg, var(--color-gold-deep), var(--color-bronze, #8b6914));
}

.page-hero--bronze {
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-bronze, #8b6914));
}

.page-hero--calm {
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-emerald-mid));
}

.page-hero--center {
    text-align: center;
    padding-block: var(--space-16);
}

.page-hero--center .page-hero__body {
    margin-inline: auto;
}

.page-hero__badge--plain {
    background: rgba(250, 247, 240, 0.2);
    border-color: rgba(250, 247, 240, 0.3);
    color: var(--color-cream);
}

.page-hero__badge--gold {
    background: rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--color-gold-shimmer);
}

.page-hero__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 20% 80%, rgba(250, 247, 240, 0.15), transparent 50%);
}

.page-hero__body {
    position: relative;
    z-index: 1;
    /*
     * بعرض اللوحة كاملاً: سقف ٧٠٠ بكسل كان يكسر سطر الوصف على الشاشات
     * الواسعة فتتدلّى منه كلمتان في سطرٍ ثانٍ بلا حاجة. و`100%` لا عرضٌ
     * ثابت كيلا يفيض على الشاشات الضيّقة فيقصّه `overflow: hidden`.
     */
    max-width: 100%;
}

.page-hero__badge {
    margin-bottom: var(--space-4);
}

.page-hero__title {
    font-family: 'Amiri', var(--font-display), serif;
    font-size: clamp(var(--text-2xl), 3.2vw + 0.5rem, var(--text-4xl));
    line-height: 1.45;
    color: var(--color-cream);
    margin-bottom: var(--space-3);
    /* التفاف الكلمات الطويلة بدل فيضها خارج الحاوية */
    overflow-wrap: break-word;
}

.page-hero__lead {
    color: rgba(250, 247, 240, 0.9);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    /* حين يلزم الالتفاف على الهاتف: لا كلمةً يتيمةً وحدها في السطر الأخير */
    text-wrap: pretty;
}

@media (max-width: 768px) {
    .page-hero {
        padding: var(--space-8) var(--space-6);
        border-radius: var(--radius-lg);
    }
}

@media (max-width: 480px) {
    .page-hero {
        padding: var(--space-6) var(--space-4);
    }

    .page-hero__lead {
        font-size: var(--text-sm);
    }
}

/* ============================================================
   ترويسة السلسلة — تشترك في اللوحة وتضيف الغلاف والبيانات
   ============================================================ */

.series-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    margin-bottom: var(--space-8);
    background: linear-gradient(135deg, var(--color-emerald-deep), var(--color-ink-deep));
    color: var(--color-cream);
    isolation: isolate;
}

.series-hero__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 85% 15%, rgba(212, 175, 55, 0.18), transparent 55%);
}

/* الترويسة في وسط البطاقة: الغلاف فالشارات فالعنوان، كلٌّ تحت الآخر */
.series-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    text-align: center;
}

.series-hero__cover {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    flex: 0 0 auto;
}

.series-hero__body {
    flex: 1 1 auto;
    width: 100%;
    /*
     * `min(280px, 100%)` هو الإصلاح: الحدّ الأدنى الثابت ٢٨٠ كان يفيض
     * على شاشة ٣٦٠ بكسل (المتاح ٢٥٦ بعد الحشو)، و`overflow: hidden`
     * يقصّ العنوان والوصف من الحاشية بلا مؤشّر.
     */
    min-width: min(280px, 100%);
}

/*
 * الشارات تملأ عرض الترويسة: متجاورةً بعرضٍ متساوٍ متى اتّسع السطر لها
 * دون أن تنضغط إحداها، وإلّا نزلت كلٌّ إلى سطرٍ بالعرض كاملاً.
 * الأساس صفر مع حدٍّ أدنى بقدر النصّ (fit-content): فالتفاف السطر يُقرَّر
 * بعرض النصّ الحقيقي، ثم تتقاسم الشارات المتبقّي بالتساوي.
 */
.series-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
    margin-bottom: var(--space-4);
}

.series-hero__chips .series-chip {
    flex: 1 1 0;
    min-width: -webkit-fit-content;
    min-width: -moz-fit-content;
    min-width: fit-content;
    justify-content: center;
    min-height: 2.5rem;
    white-space: normal;
    text-align: center;
}

/* شارات الترويسة: شكلٌ واحد ومقاسٌ واحد، واللون يميّز النوع وحده */
.series-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2rem;
    padding: 0.25rem var(--space-3);
    border-radius: var(--radius-full);
    background: rgba(250, 247, 240, 0.1);
    border: 1px solid rgba(250, 247, 240, 0.2);
    color: rgba(250, 247, 240, 0.92);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
}

.series-chip svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.series-chip--gold {
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--color-gold-shimmer);
}

.series-chip--success svg {
    color: #8fdcb3;
}

.series-chip--neutral svg {
    color: var(--color-gold-shimmer);
}

.series-hero__title {
    font-family: 'Amiri', var(--font-display), serif;
    font-size: clamp(var(--text-xl), 2.6vw + 0.5rem, var(--text-3xl));
    line-height: 1.45;
    color: var(--color-cream);
    margin-bottom: var(--space-3);
    overflow-wrap: break-word;
}

.series-hero__author {
    color: var(--color-gold-shimmer);
    font-size: var(--text-sm);
    margin-bottom: var(--space-3);
}

.series-hero__description {
    color: rgba(250, 247, 240, 0.85);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
    .series-hero {
        padding: var(--space-6) var(--space-5);
        border-radius: var(--radius-lg);
    }

    .series-hero__inner {
        gap: var(--space-5);
    }

    .series-hero__cover {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 480px) {
    .series-hero {
        padding: var(--space-5) var(--space-4);
    }

    /* الغلاف فوق النصّ لا بجانبه: بجانبه لا يبقى للنصّ عرض مقروء */
    .series-hero__inner {
        flex-direction: column;
    }

    .series-hero__cover {
        width: 96px;
        height: 96px;
    }
}

/* ===========================================
   الفاصل المتحرّك — بديل الزخرفة النصّية «❖»
   ===========================================
   الخطّان يُرسمان من العقدة إلى الطرفين، والعقدة تتنفّس.
   scaleX لا width: الأوّل على المُركِّب بلا إعادة تخطيط.
   =========================================== */
.rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-block: var(--space-8);
    width: 100%;
}

.rule__line {
    flex: 1 1 0;
    max-width: 12rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold-soft));
    transform: scaleX(1);
    transform-origin: right center;
}

.rule__line:last-child {
    background: linear-gradient(90deg, var(--color-gold-soft), transparent);
    transform-origin: left center;
}

.rule__node {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    rotate: 45deg;
    background: var(--color-gold-soft);
    box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.45);
}

.rule--soft .rule__line {
    background: linear-gradient(90deg, transparent, var(--color-border-mid));
}
.rule--soft .rule__line:last-child {
    background: linear-gradient(90deg, var(--color-border-mid), transparent);
}
.rule--soft .rule__node { background: var(--color-border-mid); }

/* على الداكن يرقّ الذهب قليلاً كيلا يبهر */
.hero .rule__node,
.app-footer .rule__node { background: var(--color-gold-shimmer); }

@media (max-width: 480px) {
    .rule { margin-block: var(--space-6); }
    .rule__line { max-width: 5rem; }
}

/* ===========================================
   صدر الرئيسية بعد إزالة اللقب والاقتباس
   =========================================== */
.hero__title--solo {
    margin-bottom: var(--space-4);
}

/* خطٌّ ذهبيّ يُرسم تحت الاسم — بديلُ اللقب الذهبي الذي أُزيل */
.hero__underline {
    display: block;
    width: min(14rem, 62%);
    height: 2px;
    margin-bottom: var(--space-8);
    border-radius: 2px;
    background: linear-gradient(90deg,
        var(--color-gold-bright), var(--color-gold-shimmer) 55%, transparent);
    transform-origin: right center;
}

.hero__inner--solo .hero__underline { margin-inline: auto; }

@media (max-width: 480px) {
    .hero__underline { width: min(10rem, 70%); margin-bottom: var(--space-6); }
}

/* ===========================================
   صفحة الكتاب — تخطيط الغلاف والتفاصيل
   ===========================================
   كانت شبكةً بنمطٍ سطري في القالب، وكان إصلاحها المتجاوب معلّقاً على
   محدّدٍ يقرأ نصّ ذلك النمط: [style*="grid-template-columns: 240px"].
   فمسافةٌ واحدة تُزاد في القالب تُبطل الإصلاح بلا أن يظهر خطأ.

   وauto-fit هنا تُغني عن استعلام الوسائط أصلاً: العمود ينزل من تلقائه
   متى ضاق المكان عن ٢٤٠ + ٢٠ رِم.
   =========================================== */
.book-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    align-items: start;
}

@media (max-width: 1024px) {
    .book-detail__layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .book-detail__layout > *:first-child {
        max-width: 240px;
        margin-inline: auto;
    }
}

/* ===========================================
   تنبيه الشبكة — ثابتٌ فوق المحتوى فلا يُزحزح التخطيط
   =========================================== */
.net-toast {
    position: fixed;
    inset-inline: 0;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 2100;
    width: max-content;
    max-width: calc(100% - 2rem);
    margin-inline: auto;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    background: #7f2a20;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 12px 32px rgba(26, 20, 16, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    pointer-events: none;
}

.net-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.net-toast--ok {
    background: #0f5340;
}

@media (prefers-reduced-motion: reduce) {
    .net-toast,
    .net-toast.is-visible {
        transition: none;
        transform: none;
    }
}