/* خط عربي تقليدي أصيل لعرض القرآن الكريم (رأس اللوحة العائمة وفهرس
   السور) — يُستخدَم اسمه في عدة قواعد أدناه لكنه لم يكن مُحمَّلاً فعليًا
   من قبل، فكان يتراجع صامتًا إلى Cairo. Amiri Quran مصمَّم خصيصًا لكتابة
   المصحف، وAmiri هو الخط الأساسي الذي يتفرّع منه. */
@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Amiri:wght@400;700&display=swap');

/* -------------------- 1. Design Tokens -------------------- */
:root {
    --bg-core: #15202b;
    --bg-card: #192734;
    --primary: #00a878;
    --primary-subtle: #1f7a5c;
    --accent: #7fae95;
    --cyan: #2dd4a5;
    --text-main: #e7e9ea;
    --text-sec: #8b98a5;
    --glass: rgba(255, 255, 255, 0.04);
    --border-glass: rgba(255, 255, 255, 0.12);

    --danger-gradient-start: #d43f27;
    --danger-gradient-end: #d23957;
    --logout-red: #ff6b6b;
    --logout-red-hover: #ff8787;
    --track-bg: #253341;

    --sun-gold: #f4b93e;
    --moon-silver: #2c4870;

    --icon-btn-bg: rgba(255, 255, 255, 0.07);
    --icon-btn-border: rgba(255, 255, 255, 0.16);

    --pricing-gold: #d99a2b;
    --pricing-gold-light: #f2c14e;
    --pricing-indigo: #5b4fe0;
    --pricing-indigo-light: #8b7cf6;
    --pricing-indigo-muted: #6f6ab3;
    --pricing-indigo-muted-light: #9a95d4;
    --pricing-emerald: #0f9b8e;
    --pricing-emerald-light: #34d3b8;
    --pricing-emerald-muted: #438f86;
    --pricing-emerald-muted-light: #72b6ac;

    --radius-pill: 50px;
    --radius-lg: 30px;
    --radius-md: 20px;
    --radius-sm: 15px;
    --radius-tag: 20px;

    --transition-fast: 0.3s;
    --transition-slow: 0.4s;

    --input-bg: #192734;
    --input-border: #2f3b47;
    --input-radius: 8px;
    --input-text: #e7e9ea;
    --input-focus: #14b891;
    --input-focus-shadow: rgba(20, 184, 145, 0.3);
}

[data-theme="dark"] {
    --bg-core: #15202b;
    --bg-card: #192734;
    --primary: #00a878;
    --primary-subtle: #1f7a5c;
    --accent: #7fae95;
    --cyan: #2dd4a5;
    --text-main: #e7e9ea;
    --text-sec: #8b98a5;
    --glass: rgba(255, 255, 255, 0.04);
    --border-glass: rgba(255, 255, 255, 0.12);
    --track-bg: #253341;
    --moon-silver: #2c4870;

    --icon-btn-bg: rgba(255, 255, 255, 0.07);
    --icon-btn-border: rgba(255, 255, 255, 0.16);

    --input-bg: #192734;
    --input-border: #2f3b47;
    --input-text: #e7e9ea;
    --input-focus: #14b891;
    --input-focus-shadow: rgba(20, 184, 145, 0.3);
}

[data-theme="light"] {
    --bg-core: #fbf6ec;
    --bg-card: #ffffff;
    --primary: #00664d;
    --primary-subtle: #d8efe6;
    --accent: #2f6a56;
    --cyan: #0e5f7a;
    --text-main: #0f172a;
    --text-sec: #334155;
    --glass: rgba(15, 23, 42, 0.06);
    --border-glass: rgba(15, 23, 42, 0.16);
    --track-bg: #e8edf2;
    --sun-gold: #a16207;
    --logout-red: #c81e1e;
    --logout-red-hover: #991b1b;

    --icon-btn-bg: #ffffff;
    --icon-btn-border: rgba(15, 23, 42, 0.18);

    --input-bg: #ffffff;
    --input-border: rgba(15, 23, 42, 0.2);
    --input-text: #0f172a;
    --input-focus: #00664d;
    --input-focus-shadow: rgba(0, 102, 77, 0.22);
}

/* -------------------- 2. Reset & Base -------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', 'Tajawal', sans-serif;
}

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--bg-core);
    color: var(--text-main);
    direction: rtl;
    text-align: right;
    overflow-x: hidden;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input,
select,
textarea {
    font-family: inherit;
    direction: rtl;
    text-align: right;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--input-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-sec);
}

input[type="tel"],
input[type="email"],
input[type="number"],
input[type="url"] {
    direction: rtl;
    text-align: right;
}

::selection {
    background: var(--cyan);
    color: var(--bg-core);
}

/* -------------------- 3. Utilities -------------------- */
.glass {
    background: var(--glass);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(10px);
}

.text-gradient {
    background: linear-gradient(to right, #fff, var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .text-gradient {
    background: linear-gradient(to right, var(--primary), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

:root:not([data-theme="light"]) .text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--text-main);
    color: var(--text-main);
}

/* -------------------- 4. Header icon buttons (shared system) --------------------
   .theme-toggle / .nav-toggle / .student-login-icon all share one
   consistent shape, size and surface so the header reads as a single
   balanced set rather than three competing styles. Accent colour is
   reserved for hover/active — not the resting state. */
.theme-toggle,
.nav-toggle,
.student-login-icon {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-btn-bg);
    border: 1px solid var(--icon-btn-border);
    color: var(--text-main);
    font-size: 1.05rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    transition: transform var(--transition-fast), border-color var(--transition-fast),
        background var(--transition-fast), box-shadow var(--transition-fast);
}

.theme-toggle:hover,
.nav-toggle:hover,
.student-login-icon:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}

.theme-toggle:active,
.nav-toggle:active,
.student-login-icon:active {
    transform: translateY(0) scale(0.94);
}

.theme-toggle:focus-visible,
.nav-toggle:focus-visible,
.student-login-icon:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0) scale(1);
    color: var(--sun-gold);
}

.theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.4);
    color: var(--moon-silver);
}

[data-theme="light"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
}

[data-theme="light"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* ============================================================
   5. Header
   ============================================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(30, 45, 60, 0.88);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: none !important;
    box-shadow: none !important;
    padding-block: 12px;
}

[data-theme="light"] .header {
    background: rgba(251, 246, 236, 0.88);
}

.header .container {
    position: relative;
    flex-wrap: nowrap;
    gap: 20px;
    padding-inline: 28px;
}

/* سطح المكتب (الوضع الافتراضي): الشعار ولوحة مواقيت الصلاة كتلة واحدة
   عند طرف الهيدر — ترتيب Flex عادي، لا تموضع مطلق. order أعلى من لوحة
   مواقيت الصلاة يضع الشعار "يسارها مباشرة" (في RTL: القيمة الأعلى
   تُدفَع أبعد نحو اليسار). التمركز المطلق في المنتصف سلوك خاص بالجوال
   فقط — انظر media query أدناه. */
.logo-group {
    order: 4;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* داخل logo-group نفسها: الشعار يُقدَّم على زر تثبيت التطبيق، فيكون
   طرفها الملاصق للوحة مواقيت الصلاة (خارجها مباشرة) هو الشعار تحديدًا،
   لا الزر — فتتحقق "يسار اللوحة مباشرة" بلا أي فاصل. */
.logo-group .logo-pill {
    order: 1;
}

.logo-group .pwa-install-icon {
    order: 2;
}

.header .prayer-widget-slot {
    order: 3;
    flex: none;
}

.logo-pill {
    box-sizing: border-box;
    flex: none;
    /* Compact circle, smaller than the icon-button row height, with a
       positive margin so it visibly floats clear of the header's own
       top/bottom edges instead of touching them. */
    width: 56px;
    height: 56px;
    margin-block: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--icon-btn-bg);
    border: 1px solid var(--icon-btn-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.logo-img {
    height: 56px;
    width: auto;
    transition: filter var(--transition-fast), height var(--transition-fast);
}

.logo-pill .logo-img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    object-position: center;
}

:root:not([data-theme="light"]) .logo-img {
    filter: brightness(0) invert(1);
}

.nav-links {
    order: 2;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.header-actions {
    order: 1;
    gap: 10px !important;
}

.nav-link-custom {
    position: relative;
    color: var(--text-sec);
    font-weight: 600;
    font-size: 0.95rem;
    padding-block: 4px;
    transition: color var(--transition-fast);
}

.nav-link-custom::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--cyan);
    transition: width var(--transition-fast);
}

.nav-link-custom:hover {
    color: var(--text-main);
}

.nav-link-custom:hover::after {
    width: 100%;
}

.nav-toggle svg,
.student-login-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.mobile-menu {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(300px, 80%);
    background: var(--bg-card);
    border-inline-end: 1px solid var(--border-glass);
    padding: 30px 25px;
    z-index: 1200;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
}

[dir="rtl"] .mobile-menu.is-open {
    transform: translateX(0);
}

.mobile-menu-close {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 20px;
}

.mobile-nav-link {
    color: var(--text-sec);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color var(--transition-fast);
}

.mobile-nav-link i {
    color: var(--cyan);
    width: 20px;
    text-align: center;
}

.mobile-nav-link:hover {
    color: var(--text-main);
}

.mobile-social {
    padding-top: 18px;
    border-top: 1px solid var(--border-glass);
}

.mobile-social-label {
    display: block;
    color: var(--text-sec);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.pwa-install-btn {
    display: none;
    width: 100%;
    text-align: start;
}

.pwa-install-btn.is-visible {
    display: flex;
}

/* Matches the shared header icon-button system above. */
.pwa-install-icon {
    display: none;
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--icon-btn-bg);
    border: 1px solid var(--icon-btn-border);
    color: var(--text-main);
    font-size: 1.05rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    transition: transform var(--transition-fast), border-color var(--transition-fast),
        background var(--transition-fast), box-shadow var(--transition-fast);
}

.pwa-install-icon.is-visible {
    display: flex;
}

.pwa-install-icon:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}

.pwa-install-icon:active {
    transform: translateY(0) scale(0.94);
}

.pwa-install-icon:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .pwa-install-icon,
    .pwa-install-icon.is-visible {
        display: none;
    }

    /* الجوال فقط: تخطيط شبكي بثلاثة أعمدة (يمين — وسط — يسار) بدل
       الاعتماد على justify-content: space-between (تقريبي فقط، يتفاوت
       بحسب عرض العنصرين الجانبيين) أو تموضع مطلق للشعار (كان يسمح
       بتلامس لوحة مواقيت الصلاة مع الشعار عند تفاوت الأحجام). عمودا
       الطرفين بعرض 1fr متساويين تمامًا، فيُترك دومًا هامش نظيف
       ومتناسب بين لوحة مواقيت الصلاة والشعار المتوسِّط، مهما تغيّر
       عرض الشاشة أو محتوى العناصر المجاورة. */
    /* !important ضروري هنا: عنصر الحاوية في index.html يحمل صنف
       Bootstrap المساعد d-flex (الذي يفرض display:flex !important من
       Bootstrap نفسه) — بدونه تبقى الحاوية display:flex فعليًا مهما
       كتبنا هنا، فيتعطّل التخطيط الشبكي كاملاً بصمت (وهو بالضبط ما
       كان يحدث: كل تعديلات هذا القسم السابقة لم تُطبَّق إطلاقًا). */
    .header .container {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .header .header-actions {
        justify-self: start;
    }

    .header .logo-group {
        justify-self: center;
    }

    /* justify-self: stretch يجعل عرض هذا العمود مساويًا فعليًا لعرض
       خلية الشبكة (1fr) دومًا — قيمة محدَّدة صلبة، لا "بحجم المحتوى"،
       وهو ما كان يسمح للعنصر سابقًا بتجاوز عرض عموده فعليًا كلما كان
       محتواه أعرض من المتاح (خصوصًا بخط Tajawal الحقيقي)، ويتكفّل
       overflow:hidden على .prayer-widget بقصّ أي محتوى فائض داخل
       الشكل الدائري نفسه احتياطًا بدل خروجه عن حافة الشاشة. */
    .header .prayer-widget-slot {
        order: 5;
        justify-self: stretch;
    }

    /* اللوحة نفسها تمتد لتملأ العمود بالكامل (بدل الانكماش على حجم
       محتواها ثم الالتصاق بالحافة الخارجية فقط) — فتُغلق الفراغ
       الفارغ بينها وبين الشعار بامتداد نظيف نحو اليمين، بهامش من حافة
       الشاشة اليسرى مطابق تمامًا لهامش الحاوية نفسه (نفس padding-inline
       المستخدَم لهامش أيقونات الهيدر من الحافة اليمنى). محتواها الداخلي
       (الأيقونة + اسم الصلاة + العدّاد) يبقى مُمركزًا تمامًا بفضل
       justify-content: center الأصلية على .prayer-widget، بلا أي تشوّه. */
    .header .prayer-widget {
        width: 100%;
        flex: 1 1 auto;
    }
}

@media (max-width: 576px) {
    .header {
        padding-block: 10px;
    }

    .header .container {
        gap: 12px;
        padding-inline: 16px;
    }

    .header-actions {
        gap: 8px !important;
    }

    .logo-img {
        height: 48px;
    }

    .logo-pill {
        width: 50px;
        height: 50px;
        margin-block: 4px;
    }

    .logo-pill .logo-img {
        width: 41px;
        height: 41px;
    }
}

@media (max-width: 380px) {
    .nav-toggle,
    .theme-toggle,
    .student-login-icon {
        width: 38px;
        height: 38px;
        font-size: 0.95rem;
    }

    .logo-pill {
        width: 44px;
        height: 44px;
        margin-block: 4px;
    }

    .logo-pill .logo-img {
        width: 36px;
        height: 36px;
    }

    .logo-img {
        height: 40px;
    }

    .nav-toggle svg,
    .student-login-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================
   5b. Prayer Times & Countdown Widget
   Matches the shared header icon-button surface (same bg/border/
   shadow/hover tokens as .theme-toggle etc.) but as an auto-width
   pill. Single-row RTL layout: prayer name + icon (right) —
   countdown (middle) — separator + short date (left). Clicking
   toggles the ornate prayer-times dropdown modal.
   ============================================================ */
.prayer-widget-slot {
    display: flex;
    align-items: center;
    flex: none;
    min-width: 0;
    /* عند التموضع كعنصر Grid (رأس الصفحة بالجوال، انظر .header
       .prayer-widget-slot أدناه): تُحسَب النسبة المئوية هنا من عرض
       خلية الشبكة نفسها (1fr) بصرف النظر عن justify-self: end — فتضمن
       ألّا يتجاوز العنصر عرض عموده مهما كان عرض محتواه الفعلي (مثلًا
       بخط Tajawal الحقيقي)، ويتكفّل overflow:hidden على .prayer-widget
       بقصّ أي فائض داخل الشكل الدائري نفسه بدل خروجه عن حافة الشاشة. */
    max-width: 100%;
}

/* في لوحات التحكم: أيقونة دائرية مضغوطة بين الشعار ومفتاح الوضع
   الليلي في الشريط الجانبي — بنفس مقاس زر الوضع الليلي تمامًا، بلا
   نص التوقيت/العدّاد/التاريخ الظاهر دائمًا (توفيرًا للمساحة)، لكن
   بنفس السلوك بالضبط: نقرة تفتح نافذة مواقيت الصلاة الكاملة كما هي. */
.dash-sidebar .prayer-widget-slot {
    justify-content: center;
}

.dash-sidebar .prayer-widget {
    width: 42px;
    height: 42px;
    min-height: 0;
    padding: 0;
    gap: 0;
    border-radius: 50%;
}

.dash-sidebar .prayer-widget-icon {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--text-main);
    font-size: 1.05rem;
}

.dash-sidebar .prayer-widget-prayer,
.dash-sidebar .prayer-widget-countdown-time,
.dash-sidebar .prayer-widget-sep,
.dash-sidebar .prayer-widget-date {
    display: none;
}

.prayer-widget {
    position: relative;
    box-sizing: border-box;
    direction: rtl;
    flex: none;
    max-width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    background: var(--icon-btn-bg);
    border: 1px solid var(--icon-btn-border);
    color: var(--text-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    overflow: hidden;
    line-height: 1;
    transition: transform var(--transition-fast), border-color var(--transition-fast),
        background var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.prayer-widget:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}

.prayer-widget:active {
    transform: translateY(0) scale(0.96);
}

.prayer-widget:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.prayer-widget.is-hidden {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
}

/* نافذة تنبيه الأذان: 5 دقائق قبل الوقت و5 دقائق بعده (10 دقائق
   إجمالاً) — توهّج ذهبي نابض يميّز الزر بوضوح عن حالته الهادئة
   المعتادة، ثم يعود إليها بانتقال سلس تلقائيًا عند خروج الوقت من
   هذه النافذة (get_transition الأساسي على .prayer-widget نفسه يتكفّل
   بنعومة العودة، فلا حاجة لأي كود إضافي عند الإزالة). */
@keyframes prayerWidgetAlertPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(244, 185, 62, 0.5), 0 1px 2px rgba(0, 0, 0, 0.16);
    }
    50% {
        box-shadow: 0 0 16px 5px rgba(244, 185, 62, 0.55), 0 1px 2px rgba(0, 0, 0, 0.16);
    }
}

.prayer-widget.is-alert {
    background: rgba(244, 185, 62, 0.16);
    border-color: var(--sun-gold);
    color: var(--sun-gold);
    animation: prayerWidgetAlertPulse 1.6s ease-in-out infinite;
}

.prayer-widget.is-alert .prayer-widget-icon {
    background: rgba(244, 185, 62, 0.22);
    color: var(--sun-gold);
}

.prayer-widget.is-alert .prayer-widget-prayer {
    color: var(--sun-gold);
}

.prayer-widget.is-alert .prayer-widget-countdown-time {
    color: var(--sun-gold);
}

.prayer-widget-prayer-group {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
    white-space: nowrap;
}

.prayer-widget-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: rgba(0, 168, 120, 0.14);
    color: var(--primary);
    font-size: 0.72rem;
    line-height: 1;
}

[data-theme="light"] .prayer-widget-icon {
    background: rgba(0, 125, 95, 0.12);
}

.prayer-widget-icon i {
    display: block;
    line-height: 1;
}

.prayer-widget-prayer {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(1px);
}

.prayer-widget-countdown-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 8ch;
    font-family: 'Tajawal', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-main);
    letter-spacing: 0.5px;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    transform: translateY(1px);
}

.prayer-widget-sep {
    flex: none;
    align-self: center;
    width: 1px;
    height: 18px;
    background: var(--border-glass);
}

.prayer-widget-date {
    display: inline-flex;
    align-items: center;
    flex: none;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-sec);
    white-space: nowrap;
    transform: translateY(1px);
}

@media (max-width: 991.98px) {
    .prayer-widget {
        gap: 9px;
        padding: 0.45rem 1rem;
    }

    .prayer-widget-countdown-time {
        font-size: 0.8rem;
    }

    .prayer-widget-date {
        display: none;
    }

    .prayer-widget-sep {
        display: none;
    }
}

@media (max-width: 576px) {
    .prayer-widget {
        gap: 6px;
        padding: 0.35rem 0.7rem;
        min-height: 38px;
    }

    .prayer-widget-icon {
        width: 20px;
        height: 20px;
        font-size: 0.62rem;
    }

    /* اسم الصلاة نص إضافي (المعلومة الأهم هي العدّاد نفسه، والتفاصيل
       الكاملة متاحة بفتح اللوحة) — إخفاؤه هنا (بدل ≤380px سابقًا)
       يوفّر مساحة كافية لتفادي فيض العنصر خارج عموده في الشبكة على
       عروض الجوال الشائعة (~360–430px)، بغضّ النظر عن اختلاف عرض
       الأحرف الفعلي لخط Tajawal الحقيقي عن أي خط بديل. */
    .prayer-widget-prayer {
        display: none;
    }

    .prayer-widget-countdown-time {
        font-size: 0.74rem;
        min-width: 7ch;
    }
}

/* ---- Prayer times dropdown modal ---- */
.prayer-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 25, 0.55);
    backdrop-filter: blur(3px);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.prayer-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.prayer-modal {
    position: relative;
    direction: rtl;
    width: min(310px, calc(100vw - 40px));
    margin-inline: auto;
    max-height: min(640px, 94vh);
    /* overflow-x:hidden هنا هو صمّام الأمان الحقيقي لمشكلة "خرق" أي
       عنصر داخلي (الساعة، شارة عدّاد الأذكار) لحدود اللوحة المستديرة:
       overflow-y وحدها (بلا overflow-x) كانت تترك الفيض الأفقي "مرئيًا"
       بلا قصّ، وهو ما يفسّر أيضًا انزياح اللوحة بالكامل نحو حافة الشاشة
       على بعض الأجهزة (فيض أفقي داخل عنصر بموضع fixed ضمن وثيقة RTL). */
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.55);
    padding: 20px 20px 16px;
    transform: translateY(14px) scale(0.97);
    transition: transform var(--transition-fast);
}

.prayer-modal-overlay.is-open .prayer-modal {
    transform: translateY(0) scale(1);
}

.prayer-modal::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(0, 168, 120, 0.22);
    border-radius: calc(var(--radius-lg) - 8px);
    pointer-events: none;
}

[data-theme="light"] .prayer-modal::before {
    border-color: rgba(0, 125, 95, 0.18);
}

.prayer-modal-close {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-btn-bg);
    border: 1px solid var(--icon-btn-border);
    color: var(--text-sec);
    font-size: 0.85rem;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.prayer-modal-close:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.prayer-modal-crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: rgba(0, 168, 120, 0.12);
    color: var(--primary);
    font-size: 0.95rem;
}

[data-theme="light"] .prayer-modal-crest {
    background: rgba(0, 125, 95, 0.1);
}

/* ============================================================
   القسم الأول: الوقت والتاريخ — نصفان متساويان يفصل بينهما خط رفيع.
   يمين اللوحة (أول عنصر في DOM، يظهر يمينًا تلقائيًا مع dir=rtl):
   ساعة رقمية أنيقة بخط رفيع عصري (وزن 300) تعرض الساعة:الدقيقة:الثانية.
   يسار اللوحة: التاريخان الهجري والميلادي مرتّبين رأسيًا.
   ============================================================ */
.prayer-modal-datetime {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 6px;
}

.prayer-modal-clock-col {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.prayer-modal-datetime-sep {
    flex: none;
    align-self: stretch;
    width: 1px;
    background: var(--border-glass);
}

.prayer-modal-dates-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.prayer-modal-clock {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    max-width: 100%;
    font-family: 'Tajawal', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 300;
    font-size: 1.5rem;
    letter-spacing: 0.3px;
    color: var(--primary);
    direction: ltr;
    unicode-bidi: isolate;
    line-height: 1;
    white-space: nowrap;
}

.prayer-modal-clock-period {
    order: -1;
    margin-inline-end: 4px;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: normal;
    color: var(--text-sec);
}

.prayer-modal-clock-sep {
    opacity: 0.4;
    font-weight: 200;
    margin-inline: 1px;
}

/* عند أضيق العروض (شاشات صغيرة جدًا)، تُقلَّص الساعة أكثر حتى تبقى
   داخل نصف عرض قسم الوقت/التاريخ بارتياح، بلا أي لف أو فيض. */
@media (max-width: 340px) {
    .prayer-modal-clock {
        font-size: 1.28rem;
    }

    .prayer-modal-clock-period {
        font-size: 0.62rem;
    }
}

.prayer-modal-hijri {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-main);
}

.prayer-modal-greg {
    font-size: 0.76rem;
    color: var(--text-sec);
}

.prayer-modal-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 10px;
    color: var(--primary);
    opacity: 0.55;
}

.prayer-modal-divider::before,
.prayer-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
}

.prayer-modal-divider i {
    font-size: 0.7rem;
    transform: rotate(45deg);
}

/* ============================================================
   القسم الثاني: شبكة الصلوات — عمودان × 3 صفوف. ترتيب TABLE_ORDER في
   الجافاسكربت (فجر، شروق، ظهر، عصر، مغرب، عشاء) يتوافق تلقائيًا مع
   هذا الترتيب البصري: مع dir=rtl تضع الشبكة أول عنصر في DOM يمينًا
   والثاني يسارًا في كل صف — فجر يمين/شروق يسار، ظهر يمين/عصر يسار،
   مغرب يمين/عشاء يسار — بلا أي حاجة لإعادة ترتيب في الكود. */
.prayer-modal-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.prayer-modal-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: var(--radius-md);
    background: var(--glass);
    border: 1px solid var(--border-glass);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.prayer-modal-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--bg-core);
    color: var(--text-sec);
    font-size: 0.66rem;
}

.prayer-modal-row-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.76rem;
}

.prayer-modal-row-time {
    font-family: 'Tajawal', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--text-sec);
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

.prayer-modal-row.is-active {
    background: rgba(0, 168, 120, 0.12);
    border-color: rgba(0, 168, 120, 0.3);
}

[data-theme="light"] .prayer-modal-row.is-active {
    background: rgba(0, 125, 95, 0.1);
    border-color: rgba(0, 125, 95, 0.26);
}

.prayer-modal-row.is-active .prayer-modal-row-icon {
    background: var(--primary);
    color: #fff;
}

.prayer-modal-row.is-active .prayer-modal-row-name,
.prayer-modal-row.is-active .prayer-modal-row-time {
    color: var(--primary);
}

.prayer-modal-row-badge {
    position: absolute;
    top: -8px;
    inset-inline-end: 8px;
    font-size: 0.58rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.prayer-modal-footer {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-glass);
    text-align: center;
}

.prayer-modal-dua {
    font-family: 'Amiri Quran', 'Cairo', serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary);
    line-height: 1.4;
}

.prayer-modal-dua-ref {
    display: block;
    margin-top: 2px;
    font-size: 0.66rem;
    color: var(--text-sec);
}

.prayer-modal-azkar {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-glass);
}

.prayer-modal-azkar summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-sec);
}

.prayer-modal-azkar summary::-webkit-details-marker {
    display: none;
}

.prayer-modal-azkar summary i {
    flex: none;
    font-size: 0.65rem;
    color: var(--primary);
    transition: transform var(--transition-fast);
}

.prayer-modal-azkar[open] summary i {
    transform: rotate(180deg);
}

/* بلا أي ارتفاع أقصى أو تمرير داخلي خاص بها — القائمة تتمدّد بحرّية
   مع فتح القائمة المنسدلة، وتترك أي تمرير (نادرًا ما يلزم) لنافذة
   اللوحة نفسها ككل (.prayer-modal) بدل شريطي تمرير متداخلين. */
.prayer-modal-azkar-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prayer-modal-azkar-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 8px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: var(--glass);
    border: 1px solid var(--border-glass);
    max-width: 100%;
}

.prayer-modal-azkar-count {
    flex: none;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 168, 120, 0.14);
    color: var(--primary);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}

[data-theme="light"] .prayer-modal-azkar-count {
    background: rgba(0, 125, 95, 0.12);
}

.prayer-modal-azkar-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.6;
    color: var(--text-main);
    overflow-wrap: break-word;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.mobile-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   6. Buttons
   ============================================================ */
.btn-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 25px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: var(--radius-pill);
    box-shadow: 0 0 15px rgba(0, 125, 95, 0.5);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
}

.btn-glow:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 125, 95, 0.7);
}

:root:not([data-theme="light"]) .btn-glow {
    background: var(--primary);
}

.icon-rtl-flip {
    display: inline-block;
    transform: scaleX(-1);
}

.btn-outline-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 25px;
    color: var(--text-main);
    font-weight: 700;
    background: transparent;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-pill);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.btn-outline-glow:hover {
    color: var(--cyan);
    border-color: var(--cyan);
}

/* ============================================================
   7. Section head (shared)
   ============================================================ */
.section-head {
    margin-bottom: 40px;
}

.section-tag {
    display: inline-block;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.section-head h2 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--text-main);
}

.section-head h2.oneline-headline {
    font-size: clamp(0.92rem, 5vw, 2.5rem);
    white-space: nowrap;
}

/* ============================================================
   8. Hero
   ============================================================ */
.hero {
    position: relative;
    padding-block: 56px;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    top: -100px;
    inset-inline-end: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    filter: blur(150px);
    opacity: 0.25;
    animation: pulse 10s infinite alternate;
    pointer-events: none;
}

[data-theme="light"] .hero-glow {
    opacity: 0.12;
}

@keyframes pulse {
    from { opacity: 0.15; }
    to { opacity: 0.35; }
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: block;
}

.hero-text {
    max-width: 700px;
    margin-inline: auto;
    text-align: center;
}

.hero-text h1 {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 18px;
}

.hero-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-sec);
    max-width: 34rem;
    margin-inline: auto;
}

.subjects-visual {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 260px;
}

.hero-card-floating {
    position: relative;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 24px;
}

.subject-card {
    animation: float-alt 6s ease-in-out infinite;
}

.subject-card:nth-child(2) {
    animation-delay: 0.4s;
}

.subject-card:nth-child(3) {
    animation-delay: 0.8s;
}

@keyframes float-alt {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.subject-icon {
    position: absolute;
    top: 20px;
    inset-inline-end: 18px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--cyan), var(--primary));
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 0 18px rgba(45, 212, 165, 0.6), 0 8px 18px -8px rgba(0, 0, 0, 0.5);
    animation: subject-icon-float 3.5s ease-in-out infinite;
}

:root:not([data-theme="light"]) .subject-icon {
    background: var(--primary-subtle);
}

.subject-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid var(--cyan);
    opacity: 0.55;
    animation: subject-icon-pulse 2.4s ease-out infinite;
}

@keyframes subject-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes subject-icon-pulse {
    0% { transform: scale(0.9); opacity: 0.55; }
    75%, 100% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-card-floating,
    .hero-glow,
    .subject-icon,
    .subject-icon::before {
        animation: none;
    }
}

.floating-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--cyan);
    margin-bottom: 14px;
}

.floating-badge {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.85rem;
}

.hero-card-floating h3 {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 4px;
}

.floating-teacher {
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 12px;
}

.floating-time {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-sec);
    font-size: 0.95rem;
}

.subject-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-glass);
    color: var(--cyan);
    font-weight: 700;
    font-size: 0.85rem;
}

.floating-session-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-glass);
}

.floating-session-teacher {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-sec);
    min-width: 0;
}

.floating-session-teacher i {
    color: var(--cyan);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.floating-session-teacher strong {
    color: var(--text-main);
    font-weight: 700;
}

.rating-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rating-label {
    font-size: 0.68rem;
    color: var(--text-sec);
    white-space: nowrap;
}

.rating-stars {
    display: flex;
    gap: 2px;
}

.rating-star {
    font-size: 0.85rem;
    color: var(--text-sec);
    opacity: 0.4;
}

.rating-star.is-filled {
    color: var(--sun-gold);
    opacity: 1;
}

.features-section {
    padding-block: 52px;
}

.feature-box {
    position: relative;
    background: var(--glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 28px;
    min-width: 260px;
    overflow: hidden;
    transition: transform var(--transition-slow), background var(--transition-slow);
}

.feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary), var(--cyan));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-slow);
}

:root:not([data-theme="light"]) .feature-box::before {
    background: var(--primary-subtle);
}

.feature-box:hover {
    transform: translateY(-10px);
    background: var(--bg-card);
}

.feature-box:hover::before {
    transform: scaleX(1);
}

.feature-box-deco {
    position: absolute;
    inset-inline-end: -10px;
    bottom: -14px;
    font-size: 5rem;
    color: var(--primary);
    opacity: 0.1;
    transform: rotate(-12deg);
    pointer-events: none;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.feature-box:hover .feature-box-deco {
    opacity: 0.18;
    transform: rotate(-6deg) scale(1.05);
}

.feature-box-deco.deco-cyan {
    color: var(--cyan);
}

.feature-box-deco.deco-accent {
    color: var(--accent);
}

.f-icon {
    position: relative;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(45deg, var(--cyan), var(--primary));
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 18px;
    box-shadow: 0 10px 24px -8px rgba(45, 212, 165, 0.55);
}

:root:not([data-theme="light"]) .f-icon {
    background: var(--primary-subtle);
}

.feature-box h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-box p {
    color: var(--text-sec);
    line-height: 1.7;
}

.features-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr 0.85fr;
    align-items: start;
    gap: 24px;
}

.feature-box-main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 32px;
    min-width: 300px;
}

.feature-main-image {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin-inline: auto;
    margin-bottom: 24px;
    border-radius: var(--radius-sm);
}

.feature-box-main h3 {
    font-size: 1.6rem;
    margin-bottom: 14px;
}

.feature-box-main p {
    font-size: 1.05rem;
    margin-bottom: 14px;
}

.feature-box-main p:last-of-type {
    margin-bottom: 20px;
}

.feature-main-highlights {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.feature-main-highlights li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.95rem;
}

.feature-main-highlights i {
    color: var(--cyan);
}

.features-side {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.subjects-section {
    padding-block: 52px;
}

.subjects-groups {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.subject-group {
    background: var(--glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.subject-group:hover {
    border-color: rgba(45, 212, 165, 0.5);
    box-shadow: 0 14px 28px -20px rgba(45, 212, 165, 0.55);
}

.subject-group-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-glass);
}

.subject-group-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(45deg, var(--cyan), var(--primary));
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 6px 14px -6px rgba(45, 212, 165, 0.55);
}

:root:not([data-theme="light"]) .subject-group-icon {
    background: var(--primary-subtle);
}

.subject-group-head h3 {
    font-size: 1rem;
    font-weight: 700;
}

.subject-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subject-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: var(--radius-tag);
    color: var(--text-sec);
    font-weight: 500;
    font-size: 0.88rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.subject-item i {
    width: 18px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--cyan);
}

.subject-item:hover {
    background: var(--bg-card);
    color: var(--text-main);
}

/* ============================================================
   11. Stages
   ============================================================ */
.stages-section {
    padding-block: 52px;
}

.stages-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.stage-card {
    position: relative;
    flex: 1 1 280px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 40px 28px 32px;
    text-align: center;
    overflow: hidden;
    transition: border-color var(--transition-slow), box-shadow var(--transition-slow);
}

.stage-card > i {
    font-size: 3rem;
    color: var(--accent);
    opacity: 0.5;
    transition: transform var(--transition-slow), opacity var(--transition-slow), color var(--transition-slow);
    display: block;
    margin-bottom: 18px;
}

.stage-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    position: relative;
    margin-bottom: 12px;
}

.stage-card p {
    flex-grow: 1;
    color: var(--text-sec);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 24px;
}

.stage-card .btn-outline-glow {
    margin-top: auto;
}

.stage-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 25px rgba(0, 125, 95, 0.35);
}

.stage-card:hover > i {
    transform: scale(1.1);
    opacity: 0.85;
    color: var(--cyan);
}

.stage-whatsapp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.9rem;
    background: transparent;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-pill);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.stage-whatsapp i {
    color: #25d366;
    font-size: 1rem;
}

.stage-whatsapp:hover {
    color: #fff;
    background: #25d366;
    border-color: #25d366;
}

.stage-whatsapp:hover i {
    color: #fff;
}

/* ============================================================
   12. Pricing
   ============================================================ */
.pricing-section {
    position: relative;
    padding-block: 60px 70px;
    overflow: hidden;
}

.pricing-section--top {
    padding-block: 18px 60px;
}

.pricing-offer-card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    margin-bottom: 22px;
    background: linear-gradient(165deg, rgba(217, 154, 43, 0.1), var(--bg-card) 55%);
    border: 1px solid rgba(217, 154, 43, 0.35);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px -26px rgba(217, 154, 43, 0.45);
    overflow: hidden;
}

.pricing-offer-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--pricing-gold), var(--pricing-gold-light));
}

.pricing-offer-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pricing-offer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--pricing-gold), var(--pricing-gold-light));
    color: var(--bg-core);
    font-size: 0.95rem;
}

.pricing-offer-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pricing-offer-text strong {
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 800;
}

.pricing-offer-discount {
    color: var(--pricing-gold-light);
    font-size: 0.78rem;
    font-weight: 700;
}

.pricing-offer-divider {
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(217, 154, 43, 0.5), transparent);
}

.pricing-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pricing-countdown-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    padding: 5px 8px;
    background: rgba(217, 154, 43, 0.1);
    border: 1px solid rgba(217, 154, 43, 0.4);
    border-radius: var(--input-radius);
    line-height: 1.1;
}

.pricing-countdown-box span {
    color: var(--pricing-gold-light);
    font-size: 0.95rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.pricing-countdown-box small {
    color: var(--text-sec);
    font-size: 0.58rem;
    font-weight: 600;
}

.pricing-countdown-sep {
    color: var(--pricing-gold);
    font-weight: 900;
}

.pricing-glow {
    position: absolute;
    top: -160px;
    inset-inline-end: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, var(--primary), transparent 70%);
    filter: blur(120px);
    opacity: 0.22;
    pointer-events: none;
}

#pricing .section-head {
    margin-bottom: 20px;
}

.pricing-season-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, rgba(0, 125, 95, 0.16), rgba(97, 149, 127, 0.16));
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-pill);
    color: var(--cyan);
    font-size: 0.82rem;
    font-weight: 700;
}

.section-head h2.pricing-headline {
    font-size: clamp(0.95rem, 5.3vw, 2.3rem);
    white-space: nowrap;
}

.pricing-section-sub {
    max-width: 560px;
    margin-inline: auto;
    color: var(--text-sec);
    font-size: 0.98rem;
    line-height: 1.6;
    margin-top: 8px;
}

.pricing-highlights {
    max-width: 578px;
    margin: 20px auto 0;
}

.pricing-highlight-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-block: 12px;
    padding-inline: 14px;
    background: linear-gradient(155deg, rgba(217, 154, 43, 0.16), var(--bg-card) 72%);
    border: 1px solid rgba(217, 154, 43, 0.38);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 24px -18px rgba(217, 154, 43, 0.55);
    color: var(--text-main);
    font-size: clamp(0.5rem, 2.6vw, 0.92rem);
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
}

.pricing-highlight-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.pricing-highlight-item::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--pricing-gold), var(--pricing-gold-light));
    opacity: 0.85;
}

.pricing-highlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--pricing-gold), var(--pricing-gold-light));
    color: var(--bg-core);
    font-size: 0.78rem;
    box-shadow: 0 0 0 3px rgba(217, 154, 43, 0.16);
}

.pricing-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 578px;
    margin: 28px auto 0;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 20px 20px 22px;
    overflow: hidden;
    transition: transform var(--transition-slow), border-color var(--transition-slow);
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 4px;
    opacity: 0.9;
}

.pricing-card--standard {
    background: linear-gradient(165deg, rgba(15, 155, 142, 0.12), var(--bg-card) 55%);
    border-color: var(--pricing-emerald);
    box-shadow: 0 14px 32px -22px rgba(15, 155, 142, 0.5);
}

.pricing-card--standard::before {
    background: linear-gradient(90deg, var(--pricing-emerald), var(--pricing-emerald-light));
}

.pricing-card--featured {
    background: linear-gradient(165deg, rgba(91, 79, 224, 0.14), var(--bg-card) 55%);
    border: 2px solid var(--pricing-indigo);
    box-shadow: 0 22px 48px -20px rgba(91, 79, 224, 0.55);
}

.pricing-card--featured::before {
    display: none;
}

.pricing-popular-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: -20px -20px 16px;
    padding: 7px 14px;
    background: linear-gradient(90deg, var(--pricing-indigo), var(--pricing-indigo-light));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

.pricing-popular-badge i {
    font-size: 0.68rem;
}

.pricing-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}

.pricing-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 0.95rem;
}

.pricing-card--featured .pricing-card-icon {
    background: linear-gradient(45deg, var(--pricing-indigo-muted), var(--pricing-indigo-muted-light));
}

.pricing-card--standard .pricing-card-icon {
    background: linear-gradient(45deg, var(--pricing-emerald-muted), var(--pricing-emerald-muted-light));
}

.pricing-card-header h3 {
    flex: 0 1 auto;
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: right;
}

.pricing-price-block {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-glass);
}

.pricing-discount-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 -20px 14px;
    padding-block: 8px;
    padding-inline: 20px;
    color: var(--text-main);
    font-size: 0.96rem;
    font-weight: 700;
}

.pricing-card--featured .pricing-discount-banner {
    background: rgba(91, 79, 224, 0.12);
    border-block: 1px solid rgba(91, 79, 224, 0.3);
}

.pricing-card--standard .pricing-discount-banner {
    background: rgba(15, 155, 142, 0.12);
    border-block: 1px solid rgba(15, 155, 142, 0.3);
}

.pricing-discount-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 0.79rem;
}

.pricing-card--featured .pricing-discount-banner-icon {
    background: rgba(91, 79, 224, 0.3);
    color: var(--pricing-indigo-light);
}

.pricing-card--standard .pricing-discount-banner-icon {
    background: rgba(15, 155, 142, 0.3);
    color: var(--pricing-emerald-light);
}

.pricing-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.pricing-price-was-value {
    flex-shrink: 0;
    color: var(--text-sec);
    font-size: 1.08rem;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: var(--text-sec);
    text-decoration-thickness: 1.5px;
    white-space: nowrap;
}

.pricing-price-main {
    font-size: 2.28rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-main);
}

.pricing-card--featured .pricing-price-main {
    background: linear-gradient(90deg, var(--text-main), var(--pricing-indigo-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pricing-card--standard .pricing-price-main {
    background: linear-gradient(90deg, var(--text-main), var(--pricing-emerald-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.pricing-price-main span {
    font-size: 1.2rem;
    font-weight: 700;
    -webkit-text-fill-color: var(--text-main);
}

.pricing-price-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-sec);
    font-size: 0.94rem;
    margin-top: 2px;
}

.pricing-price-sep {
    color: var(--cyan);
    font-size: 0.72rem;
}

.pricing-card--featured .pricing-price-sep {
    color: var(--pricing-indigo-light);
}

.pricing-card--standard .pricing-price-sep {
    color: var(--pricing-emerald-light);
}

.pricing-bullets {
    display: flex;
    flex-direction: column;
    margin: 0 0 14px;
    padding-inline-start: 0;
}

.pricing-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding-block: 5px;
    border-bottom: 1px solid var(--border-glass);
    color: var(--text-sec);
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: right;
}

.pricing-bullets li:first-child {
    padding-top: 0;
}

.pricing-bullets li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.pricing-bullets li i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--cyan);
    font-size: 0.72rem;
}

.pricing-cta {
    margin-top: auto;
    width: 100%;
    padding: 9px 18px;
    font-size: 0.85rem;
}

.pricing-cta--whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(90deg, #1fae57, #25d366);
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 10px -4px rgba(37, 211, 102, 0.3);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.pricing-cta--whatsapp:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px rgba(37, 211, 102, 0.4);
}

.pricing-trial-cta {
    display: flex;
    direction: ltr;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 18px;
    max-width: 680px;
    margin: 28px auto 0;
    padding: 10px 16px;
    background: var(--glass);
    border: 1px dashed var(--border-glass);
    border-radius: var(--radius-md);
}

.pricing-trial-cta p {
    order: 2;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    direction: rtl;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: var(--text-sec);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}

.pricing-trial-cta p i {
    color: var(--cyan);
}

.pricing-trial-btn {
    order: 1;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 9px 20px;
}

.pricing-note {
    max-width: 560px;
    margin: 14px auto 0;
    color: var(--text-sec);
    font-size: clamp(0.68rem, 3vw, 0.78rem);
    text-align: center;
    line-height: 1.6;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .pricing-section--top {
        padding-block: 12px 44px;
    }

    .pricing-offer-card {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 6px;
        padding: 10px 12px;
        margin-bottom: 16px;
    }

    #pricing .section-head {
        margin-bottom: 16px;
    }

    .pricing-season-badge {
        margin-bottom: 8px;
    }

    .pricing-section-sub {
        margin-top: 6px;
    }

    .pricing-offer-divider {
        position: static;
        display: block;
        align-self: stretch;
        top: auto;
        bottom: auto;
        left: auto;
        width: 2px;
        flex-shrink: 0;
        margin-inline: 4px;
        background: var(--pricing-gold);
        opacity: 0.55;
        border-radius: 2px;
    }

    .pricing-offer-info {
        flex: 1 1 auto;
        min-width: 0;
        gap: 7px;
    }

    .pricing-offer-icon {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    .pricing-offer-text {
        min-width: 0;
    }

    .pricing-offer-text strong {
        display: block;
        font-size: 0.68rem;
        line-height: 1.25;
    }

    .pricing-offer-discount {
        display: block;
        font-size: 0.6rem;
        line-height: 1.25;
    }

    .pricing-countdown {
        flex-shrink: 0;
        gap: 4px;
    }

    .pricing-countdown-box {
        min-width: 27px;
        padding: 2px 4px;
    }

    .pricing-countdown-box span {
        font-size: 0.7rem;
    }

    .pricing-countdown-box small {
        font-size: 0.44rem;
    }

    .pricing-highlights {
        margin-top: 14px;
    }

    .pricing-highlight-item {
        padding-block: 9px;
        padding-inline: 8px;
        gap: 5px;
    }

    .pricing-highlight-icon {
        width: 18px;
        height: 18px;
        font-size: 0.56rem;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        max-width: 100%;
    }

    .pricing-card {
        padding: 16px 14px 18px;
    }

    .pricing-card-header {
        gap: 8px;
        margin-bottom: 10px;
    }

    .pricing-card-icon {
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
    }

    .pricing-card-header h3 {
        font-size: 0.86rem;
    }

    .pricing-price-was-value {
        font-size: 0.79rem;
    }

    .pricing-discount-banner {
        margin: 0 -14px 10px;
        padding-block: 6px;
        padding-inline: 14px;
        gap: 5px;
        font-size: 0.74rem;
    }

    .pricing-discount-banner-icon {
        width: 18px;
        height: 18px;
        font-size: 0.6rem;
    }

    .pricing-price-row {
        gap: 6px;
        margin-bottom: 4px;
    }

    .pricing-price-main {
        font-size: 1.8rem;
    }

    .pricing-price-sub {
        font-size: 0.72rem;
        flex-wrap: wrap;
        gap: 4px;
    }

    .pricing-bullets {
        margin-bottom: 10px;
    }

    .pricing-bullets li {
        padding-block: 4px;
        font-size: 0.64rem;
        line-height: 1.35;
    }

    .pricing-cta {
        padding: 8px 6px;
        font-size: 0.62rem;
        gap: 4px;
    }

    .pricing-popular-badge {
        font-size: 0.65rem;
        padding: 6px 10px;
        margin: -16px -14px 12px;
    }

    .pricing-trial-cta {
        flex-direction: column;
        text-align: center;
        padding: 10px 12px;
        margin-top: 22px;
        gap: 6px;
    }

    .pricing-note {
        margin-top: 10px;
    }

    .pricing-trial-cta p {
        order: 0;
        justify-content: center;
        text-align: center;
        font-size: 0.76rem;
    }

    .pricing-trial-btn {
        order: 0;
        width: 100%;
    }
}

.trust-bar {
    padding-block: 22px;
    background: linear-gradient(90deg, rgba(0, 125, 95, 0.12), rgba(97, 149, 127, 0.12));
    border-block: 1px solid var(--border-glass);
}

.trust-bar-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 24px;
}

.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-sec);
    font-weight: 500;
    font-size: 0.95rem;
    white-space: normal;
    text-align: center;
}

.trust-item i {
    color: var(--cyan);
    font-size: 1.15rem;
}

.testimonials-section {
    position: relative;
    padding-block: 52px;
    overflow: hidden;
}

.testimonials-glow {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 560px;
    height: 380px;
    background: linear-gradient(120deg, var(--sun-gold), var(--cyan));
    filter: blur(160px);
    opacity: 0.12;
    pointer-events: none;
}

[data-theme="light"] .testimonials-glow {
    opacity: 0.08;
}

.marquee {
    direction: ltr;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: marquee-scroll 46s linear infinite;
    animation: marquee-scroll 46s linear infinite;
}

.testimonials-set {
    direction: rtl;
    display: flex;
    gap: 24px;
    padding-inline: 12px;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

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

.testimonial-card {
    position: relative;
    flex-shrink: 0;
    width: 320px;
    background: var(--glass);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 28px;
    overflow: hidden;
    transition: transform var(--transition-slow), background var(--transition-slow);
}

.testimonial-card:hover {
    transform: translateY(-6px);
    background: var(--bg-card);
}

.testimonial-quote-icon {
    position: absolute;
    top: 20px;
    inset-inline-end: 24px;
    font-size: 2.2rem;
    color: var(--primary);
    opacity: 0.15;
}

.testimonial-stars {
    color: var(--sun-gold);
    font-size: 0.85rem;
    margin-bottom: 14px;
    letter-spacing: 3px;
}

.testimonial-text {
    color: var(--text-sec);
    line-height: 1.8;
    margin-bottom: 22px;
    min-height: 6.5rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, var(--cyan), var(--primary));
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

:root:not([data-theme="light"]) .testimonial-avatar {
    background: var(--primary-subtle);
}

.testimonial-author h4 {
    font-size: 1rem;
    font-weight: 700;
}

.testimonial-author span {
    color: var(--text-sec);
    font-size: 0.85rem;
}

.faq-section {
    padding-block: 52px;
}

.faq-list {
    max-width: 780px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    background: var(--glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.faq-item.is-open {
    border-color: var(--primary);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    color: var(--text-main);
    font-weight: 700;
    font-size: 1rem;
    text-align: start;
}

.faq-question i {
    flex-shrink: 0;
    color: var(--cyan);
    transition: transform var(--transition-fast);
}

.faq-item.is-open .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition-slow);
}

.faq-item.is-open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer p {
    overflow: hidden;
    color: var(--text-sec);
    line-height: 1.8;
    padding-inline: 22px;
}

.faq-item.is-open .faq-answer p {
    padding-bottom: 20px;
}

/* ============================================================
   13. Footer
   ============================================================ */
.footer {
    padding-block: 60px 30px;
    border-top: 1px solid var(--border-glass);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 30px;
}

.footer-about p {
    color: var(--text-sec);
    line-height: 1.8;
    margin-top: 14px;
    max-width: 320px;
}

.footer-col h4 {
    color: var(--accent);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 18px;
}

.footer-col-card {
    background: var(--glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 24px;
}

.footer-col-card h4 {
    margin-bottom: 16px;
}

.footer-col-card ul li:last-child {
    margin-bottom: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
    color: var(--text-sec);
}

.footer-col ul li a {
    color: var(--text-sec);
    transition: color var(--transition-fast);
}

.footer-col ul li a:hover {
    color: var(--cyan);
}

.footer-social {
    display: flex;
    gap: 12px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--border-glass);
    color: var(--text-main);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.footer-social a:hover {
    background: var(--primary);
    color: #fff;
}

.footer-social a.social-whatsapp:hover {
    background: #25d366;
}

.footer-bottom {
    border-top: 1px solid var(--border-glass);
    padding-top: 20px;
    text-align: center;
    color: var(--text-sec);
    font-size: 0.9rem;
}

.footer-admin-access {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-inline-start: 10px;
    border-radius: 50%;
    background: var(--text-sec);
    opacity: 0.15;
    vertical-align: middle;
    transition: opacity var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.footer-admin-access:hover,
.footer-admin-access:focus-visible {
    opacity: 0.7;
    background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan);
}

.auth-main {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-block: 60px;
}

.auth-glow {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    filter: blur(150px);
    opacity: 0.25;
    pointer-events: none;
}

[data-theme="light"] .auth-glow {
    opacity: 0.12;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 43px 30px;
    /* بلا أي ظل — مظهر مسطّح ونظيف بلا أي box-shadow خارجي. */
    box-shadow: none;
    overflow: hidden;
}

@media (max-width: 480px) {
    .auth-main {
        min-height: auto;
        padding-block: 16px;
    }

    /* بطاقة أصغر (تصغير ~10% عن الحجم الأساسي) وموضوعة بثبات تام في
       منتصف الشاشة على الجوال — لا تتحرك ولا تُمرَّر هي نفسها أبدًا،
       بهامش حقيقي مضمون من حافتَي الشاشة (لا تلتصق بهما) بصرف النظر
       عن حشو .container نفسها — فتُقرأ بصريًا كبطاقة مستقلة مضغوطة لا
       كلوحة تمتد على كامل العرض. */
    .auth-card {
        width: calc(100% - 40px);
        max-width: 324px;
        margin-inline: auto;
        padding: 27px 16px;
    }

    .auth-logo-img {
        height: 64px;
        margin-bottom: 14px;
    }

    .auth-head {
        margin-bottom: 20px;
    }

    .auth-head h1 {
        font-size: 1.2rem;
    }

    .auth-head p {
        font-size: 0.8rem;
    }

    .form-field {
        margin-bottom: 12px;
    }

    .form-field label {
        margin-bottom: 5px;
        font-size: 0.85rem;
    }

    .input-wrap input,
    .input-wrap select {
        padding-block: 9px;
        font-size: 0.92rem;
    }

    .auth-back {
        margin-top: 20px;
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}

.auth-head {
    text-align: center;
    margin-bottom: 36px;
}

.auth-logo-img {
    height: 104px;
    width: auto;
    margin: 0 auto 24px;
    transition: filter var(--transition-fast);
}

:root:not([data-theme="light"]) .auth-logo-img {
    filter: brightness(0) invert(1);
}

.auth-head h1 {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 8px;
}

.auth-head p {
    color: var(--text-sec);
    font-size: 0.95rem;
}

.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.95rem;
}

.input-wrap {
    position: relative;
}

.input-wrap i {
    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-sec);
}

.input-wrap input {
    width: 100%;
    padding-block: 12px;
    padding-inline-start: 44px;
    padding-inline-end: 16px;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--input-text);
    font-size: 1rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-wrap input::placeholder {
    color: var(--text-sec);
}

.input-wrap input:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.input-wrap select {
    width: 100%;
    padding-block: 12px;
    padding-inline-start: 44px;
    padding-inline-end: 40px;
    background-color: var(--input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 16px center;
    background-size: 14px;
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    color: var(--input-text);
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-wrap select::-ms-expand {
    display: none;
}

.input-wrap select:focus {
    outline: none;
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-shadow);
}

.auth-submit {
    width: 100%;
    border: none;
    margin-top: 8px;
}

.auth-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 32px auto 0;
    padding: 10px 20px;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-pill);
    background: var(--bg-core);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.88rem;
    transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.auth-back i {
    font-size: 0.95rem;
    color: var(--primary);
}

.auth-back:hover {
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* ============================================================
   15. Responsive
   ============================================================ */
@media (max-width: 1100px) {
    .features-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .hero-text h1 {
        font-size: 2.9rem;
    }

    .subjects-groups {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .subject-group {
        padding: 14px;
    }

    .subject-group-head {
        gap: 8px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .subject-group-icon {
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
    }

    .subject-group-head h3 {
        font-size: 0.86rem;
    }

    .subject-item {
        gap: 6px;
        padding: 6px 7px;
        font-size: 0.78rem;
    }

    .subject-item i {
        width: 15px;
        font-size: 0.72rem;
    }

    .testimonial-card {
        width: 260px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 2.4rem;
    }

    .section-head h2 {
        font-size: 1.9rem;
    }

    .stage-card {
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .hero-text h1 {
        font-size: 1.85rem;
    }

    .features-section,
    .subjects-section,
    .stages-section,
    .testimonials-section,
    .faq-section {
        padding-block: 40px;
    }

    .feature-main-image {
        max-width: 260px;
    }

    .subjects-groups {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-col {
        text-align: center;
    }

    .footer-about {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-about p {
        margin-inline: auto;
    }

    .footer-social {
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .hero-text h1 {
        font-size: 1.6rem;
    }
}

/* ============================================================
   16. PWA Install Modal
   ============================================================ */
.pwa-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    z-index: 1400;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pwa-modal-overlay.is-visible {
    display: flex;
}

.pwa-modal {
    position: relative;
    width: 100%;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 32px 28px 28px;
    text-align: center;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
    animation: pwaModalIn 0.35s ease;
}

@keyframes pwaModalIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pwa-modal-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--border-glass);
    color: var(--text-sec);
    font-size: 0.9rem;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pwa-modal-close:hover {
    color: var(--cyan);
    border-color: var(--cyan);
}

.pwa-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 0 24px -6px rgba(0, 125, 95, 0.6);
    color: #fff;
    font-size: 1.5rem;
}

:root:not([data-theme="light"]) .pwa-modal-icon {
    background: var(--primary-subtle);
}

.pwa-modal-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text-main);
    margin-bottom: 10px;
}

.pwa-modal-text {
    color: var(--text-sec);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

.pwa-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pwa-modal-actions .btn-glow,
.pwa-modal-actions .btn-outline-glow {
    width: 100%;
}

.dash-topbar-welcome {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* بطاقة الترحيب (الصورة الرمزية + الاسم) مضغوطة أفقيًا الآن — حجم
   أصغر للصورة الرمزية وحشو أقل على .dash-topbar نفسها (بالأسفل) هما
   ما يخفّضان الارتفاع الكلي فعليًا، لا هذه الخاصية وحدها. */
.dash-topbar-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--cyan));
}

:root:not([data-theme="light"]) .dash-topbar-avatar {
    background: var(--primary-subtle);
}

.dash-topbar-text {
    min-width: 0;
}

.dash-topbar-text h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.15rem; /* desktop default */
}

.dash-topbar-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-inline-start: 18px;
    border-inline-start: 1px solid var(--border-glass);
}

@media (max-width: 560px) {
    .dash-topbar {
        padding: 8px 14px;
        gap: 10px;
    }

    .dash-topbar-avatar {
        display: none;
    }

    .dash-topbar-actions {
        padding-inline-start: 10px;
    }

    .dash-topbar-text h1 {
        font-size: 0.9rem;
    }

    .dash-topbar-text p {
        font-size: 0.72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 360px) {
    .dash-topbar-text p {
        font-size: 0.7rem;
    }
}

.notif-bell-wrap {
    position: relative;
}

.notif-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--border-glass);
    color: var(--text-main);
    font-size: 1.05rem;
    cursor: pointer;
    transition: border-color var(--transition-fast, 0.3s), color var(--transition-fast, 0.3s);
}

.notif-bell-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.notif-bell-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--logout-red, #ff6b6b);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
}

.notif-bell-panel {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    width: 320px;
    max-width: 88vw;
    max-height: 380px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.55);
    padding: 14px;
    z-index: 60;
    display: none;
}

.notif-bell-panel.is-open {
    display: block;
}

.notif-bell-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-glass);
    font-weight: 700;
    font-size: 0.88rem;
}

.notif-enable-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid var(--border-glass);
    color: var(--text-sec);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap;
}

.notif-enable-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.notif-enable-btn.is-active {
    color: var(--cyan);
    border-color: var(--cyan);
}

.notif-bell-empty {
    color: var(--text-sec);
    font-size: 0.85rem;
    text-align: center;
    padding: 24px 0;
}

.notif-bell-item {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: var(--glass);
    text-decoration: none;
    color: inherit;
}

.notif-bell-item:last-child {
    margin-bottom: 0;
}

.notif-bell-item.is-unread {
    border-inline-start: 3px solid var(--cyan);
}

.notif-bell-item-title {
    display: block;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-main);
}

.notif-bell-item-body {
    display: block;
    font-size: 0.76rem;
    color: var(--text-sec);
    margin-top: 2px;
}

.notif-bell-item-time {
    display: block;
    font-size: 0.66rem;
    color: var(--text-sec);
    margin-top: 4px;
    opacity: 0.7;
}

.sa-notif-toast {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 340px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s, transform 0.4s;
    z-index: 9999;
}

.sa-notif-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sa-notif-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--cyan), var(--primary));
    color: #fff;
    font-size: 0.9rem;
}

:root:not([data-theme="light"]) .sa-notif-toast-icon {
    background: var(--primary-subtle);
}

.sa-notif-toast-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.82rem;
}

.sa-notif-toast-text strong {
    color: var(--text-main);
    font-size: 0.86rem;
}

.sa-notif-toast-text span {
    color: var(--text-sec);
}

@media (max-width: 560px) {
    .notif-bell-panel {
        width: 88vw;
    }

    .sa-notif-toast {
        inset-inline: 12px;
        max-width: none;
        bottom: 12px;
    }
}

/* ============================================================
   المصحف التفاعلي العائم (Floating Quran FAB)
   ============================================================ */
/* الزر العائم: سطح زجاجي هادئ (نفس رموز .theme-toggle/.prayer-widget)
   بدل خلفية داكنة/كريمية حادة — الشعار نفسه هو من يحمل الطابع البصري،
   فلا داعي لخلفية منافِسة. width/height/border-radius/inset-inline-end
   كلها في transition حتى يكون التحوّل إلى "الرسو" (is-docked) ناعمًا. */
.quran-fab {
    position: fixed;
    inset-inline-end: 20px;
    top: auto;
    bottom: 20px;
    z-index: 1400;
    width: 58px;
    height: 58px;
    padding: 6px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-btn-bg);
    border: 1px solid var(--icon-btn-border);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.4);
    cursor: grab;
    touch-action: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast),
        background var(--transition-fast), border-color var(--transition-fast),
        width var(--transition-slow), height var(--transition-slow),
        padding var(--transition-slow), border-radius var(--transition-slow),
        inset-inline-end var(--transition-slow), top var(--transition-fast);
}

.quran-fab:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -8px rgba(0, 0, 0, 0.45);
}

.quran-fab.is-dragging {
    transition: none;
    cursor: grabbing;
    box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.5);
}

/* الحالة "الراسية" (الغطس الجانبي): بعد توقّف قصير عن التفاعل، ينكمش
   الزر إلى شريحة مضغوطة ملاصقة لحافة الشاشة — الزاويتان الملاصقتان
   للحافة تُسطَّحان فتبدو اللوحة "راسية" فيها، مع بقاء الشعار كاملاً
   ظاهرًا (بحجم أصغر فقط، لا قصّ). نقرة عليها تفتح المصحف فورًا كالمعتاد. */
.quran-fab.is-docked {
    width: 40px;
    height: 40px;
    padding: 4px;
    inset-inline-end: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    box-shadow: -3px 3px 12px -6px rgba(0, 0, 0, 0.35);
}

/* شعار "القرآن الكريم" المرفق: يُعاد تلوينه بالكامل عبر فلتر CSS بدل
   ألوانه الأصلية البنفسجية الجاهزة، ليتماشى مع الأخضر الزمردي الهادئ
   لهوية المنصّة، ويتبدّل فورًا مع تبديل الثيم دون أي تحميل مضاعف
   للصورة. hue-rotate(-137deg) هو مقدار الدوران الدقيق اللازم لتحويل
   الأرجواني الأصلي (~300°) إلى نفس درجة الأخضر الأساسي للمنصّة (~163°). */
.quran-fab-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    filter: hue-rotate(-137deg) saturate(0.75) brightness(1.05) contrast(0.96);
    transition: filter var(--transition-fast);
}

[data-theme="light"] .quran-fab-icon-img {
    filter: hue-rotate(-137deg) saturate(0.7) brightness(0.94) contrast(1.02);
}


.quran-fab-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.quran-fab-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* تغطية كامل نافذة العرض (viewport) بثبات تام — بدل بطاقة عائمة بأبعاد
   محسوبة، أصبحت اللوحة تملأ الشاشة كليًا على كل الأجهزة (آيفون برو ماكس،
   سامسونج ألترا...) بنفس الطريقة تمامًا، فلا اختلاف أبدًا في السلوك أو
   الفيضان (overflow) بين جهاز وآخر. */
.quran-fab-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    overflow: hidden;
    font-family: 'Amiri', 'Cairo', serif;
}

.quran-fab-panel.is-open {
    opacity: 1;
    pointer-events: auto;
}

.quran-fab-header {
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-inline-start: calc(14px + env(safe-area-inset-left));
    padding-inline-end: calc(14px + env(safe-area-inset-right));
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-glass);
    flex-shrink: 0;
}

.quran-fab-header-tools {
    order: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.quran-fab-close {
    order: 2;
}

.quran-fab-btn.is-active {
    color: var(--primary);
    border-color: var(--primary);
    background: rgba(0, 168, 120, 0.14);
}

.quran-fab-bookmark-jump {
    color: var(--primary);
    border-color: rgba(0, 168, 120, 0.35);
}

/* شريط تحكم واحد فقط ثابت أسفل اللوحة (تنقّل الصفحات) — لا يوجد أي
   شريط تحكم مواز أعلى اللوحة، فلا يتغيّر مكان أدوات التنقل بين الجوال
   وسطح المكتب. */
.quran-fab-footer {
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 64px;
    padding: 12px 14px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-inline-start: calc(14px + env(safe-area-inset-left));
    padding-inline-end: calc(14px + env(safe-area-inset-right));
    box-sizing: border-box;
    border-top: 2px solid var(--border-glass);
    flex-shrink: 0;
}

.quran-fab-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass);
    border: 1px solid var(--border-glass);
    color: var(--text-main);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.quran-fab-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.quran-fab-footer .quran-fab-btn {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

/* شارة رقم الصفحة: عنصر واحد قابل للنقر يفتح نافذة الانتقال السريع
   الداخلية بدل حقل إدخال دائم الظهور في التذييل — واجهة أنظف وأقل
   إزعاجًا أثناء القراءة. */
.quran-fab-page-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    gap: 5px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-glass);
    background: var(--glass);
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Cairo', serif;
    /* direction: rtl (بدل ltr) يضع رقم الصفحة الحالية يمينًا وإجمالي
       الصفحات (604) يسارًا — أول عنصر في DOM (الحالية) يظهر عند حافة
       البداية (اليمين في RTL)، بما يطابق تمامًا اتجاه تصفّح المصحف
       من اليمين إلى اليسار في بقية الواجهة. */
    direction: rtl;
    unicode-bidi: isolate;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.quran-fab-page-badge:hover,
.quran-fab-page-badge:focus-visible {
    border-color: var(--primary);
    background: rgba(0, 168, 120, 0.14);
}

.quran-fab-page-badge-sep {
    color: var(--text-sec);
    font-weight: 400;
}

/* نافذة الانتقال السريع لرقم صفحة: مصغّرة، منبثقة فوق لوحة المصحف
   نفسها فقط (position: absolute نسبةً إلى .quran-fab-panel المثبّتة)،
   لا فوق الشاشة كاملة — فلا تتداخل مع أي عنصر آخر في المنصّة (حصص
   مباشرة، تسجيلات، مؤقتات...) يعمل خارج لوحة المصحف. */
.quran-fab-jump-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: 20;
}

.quran-fab-jump-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.quran-fab-jump-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    width: min(300px, 86%);
    box-sizing: border-box;
    padding: 22px 20px 20px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: 21;
    text-align: center;
    font-family: 'Cairo', serif;
}

.quran-fab-jump-modal.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.quran-fab-jump-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 16px;
}

.quran-fab-jump-modal-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* عرض مضبوط بدقة على 3 أرقام (أقصى رقم صفحة 604) بدل الامتداد الحر —
   وإخفاء أسهم العدّاد الافتراضية للمتصفح، فلا يبدو الحقل متمددًا أو
   منتفخًا بلا داع. */
.quran-fab-jump-input {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    padding: 10px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    direction: ltr;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

.quran-fab-jump-input::-webkit-inner-spin-button,
.quran-fab-jump-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    display: none;
}

.quran-fab-jump-go {
    flex-shrink: 0;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    transition: filter var(--transition-fast);
}

.quran-fab-jump-go:hover {
    filter: brightness(1.08);
}

.quran-fab-jump-close {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-sec);
    transition: color var(--transition-fast);
}

.quran-fab-jump-close:hover {
    color: var(--logout-red);
}

/* تكييف ألوان نافذة الانتقال السريع مع أوضاع القراءة السيبيا والأسود
   الخاصة بالمصحف، بدل بقائها دائمًا بألوان ثيم المنصّة العامة. */
.quran-fab-panel[data-reading-mode="sepia"] .quran-fab-jump-modal {
    background: #f3e6c8;
    border-color: rgba(58, 44, 20, 0.25);
}

.quran-fab-panel[data-reading-mode="sepia"] .quran-fab-jump-modal-title {
    color: #3a2c14;
}

.quran-fab-panel[data-reading-mode="sepia"] .quran-fab-jump-input {
    background: #fffaf0;
    border-color: rgba(58, 44, 20, 0.3);
    color: #3a2c14;
}

.quran-fab-panel[data-reading-mode="sepia"] .quran-fab-jump-close {
    color: rgba(58, 44, 20, 0.65);
}

.quran-fab-panel[data-reading-mode="black"] .quran-fab-jump-modal {
    background: #141414;
    border-color: rgba(255, 255, 255, 0.14);
}

.quran-fab-panel[data-reading-mode="black"] .quran-fab-jump-input {
    background: #0a0a0a;
    border-color: rgba(255, 255, 255, 0.18);
}

.quran-fab-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-sec);
    transition: color var(--transition-fast);
}

.quran-fab-close:hover {
    color: var(--logout-red);
}

/* ترويسة جارية على غرار المصحف المطبوع: اسم الجزء يمينًا واسم السورة
   يسارًا، ثابتان بموضعيهما الفيزيائيين (right/left صريحين + order) بدل
   الاعتماد على ترتيب DOM أو الوراثة الاتجاهية فقط — فلا يختلف الموضع
   إطلاقًا بين الجوال وسطح المكتب أو بين المتصفحات. */
.quran-fab-running-header {
    display: flex;
    flex-direction: row;
    direction: rtl;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 16px;
    border-bottom: 1px solid var(--border-glass);
    flex-shrink: 0;
    font-family: 'Cairo', serif;
}

.quran-fab-juz,
.quran-fab-running-surah {
    flex: 0 1 48%;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quran-fab-juz {
    order: 1;
    text-align: right;
    color: var(--text-sec);
}

.quran-fab-running-surah {
    order: 2;
    text-align: left;
}

/* منطقة عرض صفحة المصحف: تأخذ كل المساحة المتبقية من اللوحة (بعد
   الرأس والرأس الجاري والتذييل) وتُوسِّط الصورة داخلها. object-fit:
   contain مع max-width/max-height:100% يضمن ظهور الصفحة كاملة بأبعادها
   الطبيعية دون أي تمدد أو قصّ أو فيضان، أيًا كان مقاس الشاشة. */
.quran-fab-body {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f7f3e9;
    transition: background var(--transition-fast);
}

:root:not([data-theme="light"]) .quran-fab-body {
    background: #1a1511;
}

.quran-fab-page-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    transition: filter var(--transition-fast);
}

/* الوضع الليلي: عكس ألوان الصفحة (حبر فاتح على خلفية بنية داكنة دافئة)
   بدل الأبيض الساطع المتعب للعين، مع إبقاء تباين مريح للقراءة الليلية.
   هذا هو السلوك الافتراضي المرتبط بثيم المنصّة العام (data-reading-mode
   = "normal")؛ وضعا السيبيا والأسود الحقيقي أدناه يفوزان عليه عند
   اختيار القارئ لهما صراحة من زر وضع القراءة، بصرف النظر عن ثيم الموقع. */
:root:not([data-theme="light"]) .quran-fab-page-image {
    filter: invert(0.93) hue-rotate(180deg) sepia(0.28) saturate(1.35) brightness(0.92) contrast(0.92);
}

/* أوضاع القراءة الليلية الإضافية الخاصة بالمصحف — مستقلة عن ثيم
   المنصّة، يختارها القارئ صراحة عبر زر التبديل في رأس اللوحة. */
.quran-fab-panel[data-reading-mode="sepia"] .quran-fab-body {
    background: #ecdec2;
}

.quran-fab-panel[data-reading-mode="sepia"] .quran-fab-page-image {
    filter: sepia(0.5) saturate(1.1) brightness(0.98) contrast(0.95);
}

.quran-fab-panel[data-reading-mode="black"] .quran-fab-body {
    background: #000;
}

.quran-fab-panel[data-reading-mode="black"] .quran-fab-page-image {
    filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(1.1);
}

.quran-fab-loading,
.quran-fab-error {
    text-align: center;
    color: var(--text-sec);
    padding: 40px 0;
}

.quran-fab-index-toggle {
    flex-shrink: 0;
}

.quran-fab-index {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 14px 18px;
    gap: 10px;
}

.quran-fab-index.is-open {
    display: flex;
}

.quran-fab-panel:has(.quran-fab-index.is-open) .quran-fab-body,
.quran-fab-panel:has(.quran-fab-index.is-open) .quran-fab-running-header,
.quran-fab-panel:has(.quran-fab-index.is-open) .quran-fab-footer {
    display: none;
}

.quran-fab-index-search-wrap {
    position: relative;
    flex-shrink: 0;
}

.quran-fab-index-search-wrap i {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-sec);
    font-size: 0.85rem;
    pointer-events: none;
}

.quran-fab-index-search {
    width: 100%;
    box-sizing: border-box;
    padding-block: 10px;
    padding-inline-start: 40px;
    padding-inline-end: 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 0.9rem;
    text-align: start;
}

.quran-fab-index-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* قائمة مزخرفة على طراز فهرس المصحف التقليدي: فواصل رفيعة بين
   السور بدل بطاقات منفصلة، وخط عربي تقليدي لاسم السورة. */
.quran-fab-index-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    padding: 10px 6px;
    border: none;
    border-bottom: 1px dashed var(--border-glass);
    background: transparent;
    color: var(--text-main);
    text-align: start;
    transition: background var(--transition-fast);
}

.quran-fab-index-item:last-child {
    border-bottom: none;
}

.quran-fab-index-item:hover {
    background: rgba(0, 168, 120, 0.07);
}

[data-theme="light"] .quran-fab-index-item:hover {
    background: rgba(0, 125, 95, 0.06);
}

.quran-fab-index-item-order {
    flex: none;
    width: 22px;
    text-align: center;
    color: var(--text-sec);
    font-size: 0.7rem;
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
}

.quran-fab-index-item-name {
    flex: 1;
    font-family: 'Amiri Quran', 'Amiri', 'Traditional Arabic', 'Cairo', serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary);
}

.quran-fab-index-item-page {
    flex: none;
    font-size: 0.76rem;
    direction: ltr;
    unicode-bidi: isolate;
    color: var(--text-sec);
}

.quran-fab-index-empty {
    text-align: center;
    color: var(--text-sec);
    padding: 30px 0;
    font-size: 0.85rem;
}

@media (max-width: 576px) {
    .quran-fab {
        width: 50px;
        height: 50px;
        inset-inline-end: 14px;
        bottom: 14px;
    }

    .quran-fab-header {
        padding-top: calc(6px + env(safe-area-inset-top));
        padding-bottom: 6px;
        padding-inline-start: calc(10px + env(safe-area-inset-left));
        padding-inline-end: calc(10px + env(safe-area-inset-right));
    }

    .quran-fab-running-header {
        padding: 4px 10px;
    }

    .quran-fab-juz,
    .quran-fab-running-surah {
        font-size: 0.7rem;
    }

    .quran-fab-footer {
        min-height: 58px;
        padding-top: 8px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
        padding-inline-start: calc(10px + env(safe-area-inset-left));
        padding-inline-end: calc(10px + env(safe-area-inset-right));
        gap: 12px;
    }

    .quran-fab-body {
        padding: 4px;
    }
}

/* ============================================================
   لوحات التحكم: تبويبات العرض المستقل + الشريط السفلي للجوال
   ============================================================ */
.dash-view {
    display: none;
}

.dash-view.is-active {
    display: block;
    animation: dash-view-fade 0.25s ease;
}

@keyframes dash-view-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.dash-bottom-nav {
    display: none;
}

@media (max-width: 900px) {
    .dash-main {
        padding-bottom: 96px;
    }

    .dash-bottom-nav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1300;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        background: var(--bg-card);
        border-top: 1px solid var(--border-glass);
        box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.35);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .dash-bottom-nav-item {
        position: relative;
        z-index: 1;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        padding: 10px 4px 8px;
        background: transparent;
        border: none;
        color: var(--text-sec);
        font-size: 0.72rem;
        font-weight: 600;
        transition: color 0.3s ease;
    }

    .dash-bottom-nav-item i,
    .dash-bottom-nav-item svg {
        font-size: 1.15rem;
        width: 20px;
        height: 20px;
    }

    .dash-bottom-nav-item.is-active {
        color: var(--primary);
    }

    /* ============================================================
       مؤشر سائل (Liquid Morphing Indicator): فقاعة واحدة مشتركة
       تنزلق أفقيًا بسلاسة لتستقر خلف التبويب النشط فقط — بدل تكرار
       الخلفية على كل تبويب. عنصران متداخلان:
       - الخارجي (indicator) موضعه المطلق يُحرَّك بالبكسل عبر JS
         (translateX دقيق يعتمد على القياس الفعلي، يعمل بلا مشاكل
         اتجاه في RTL لأنه يُحسب من إحداثيات العنصر الحقيقية).
       - الداخلي (indicator-blob) هو الشكل المرئي فقط؛ يتمدد أفقيًا
         للحظة أثناء الانزلاق (صنف is-liquid يضيفه الـJS) ليعطي إحساس
         "السائل"، ثم يعود دائريًا تمامًا لحظة الوصول — دون أي تأثير
         على تخطيط الصفحة لأن كل هذا داخل عنصر position:absolute
         منفصل عن تدفّق المحتوى.
       ============================================================ */
    .dash-bottom-nav-indicator {
        position: absolute;
        top: 6px;
        left: 0;
        width: 42px;
        height: 42px;
        z-index: 0;
        pointer-events: none;
        transition: transform 0.48s cubic-bezier(0.65, 0, 0.35, 1);
        will-change: transform;
    }

    .dash-bottom-nav-indicator-blob {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 8px 16px -4px rgba(0, 125, 95, 0.5);
        transition: transform 0.24s cubic-bezier(0.45, 0, 0.55, 1), border-radius 0.24s ease;
    }

    .dash-bottom-nav-indicator.is-liquid .dash-bottom-nav-indicator-blob {
        transform: scaleX(1.5);
        border-radius: 40%;
    }

    .dash-bottom-nav-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
    }

    .dash-bottom-nav-icon i {
        font-size: 1.05rem;
        transition: color 0.3s ease;
    }

    .dash-bottom-nav-item span:last-child {
        transition: opacity 0.3s ease, font-weight 0.3s ease;
    }

    .dash-bottom-nav-item.is-active .dash-bottom-nav-icon i {
        color: #fff;
    }

    .dash-bottom-nav-item.is-active span:last-child {
        font-weight: 800;
    }

    .dash-bottom-nav-item:not(.is-active) .dash-bottom-nav-icon i {
        color: var(--text-sec);
    }
}

/* ============================================================
   لوحة الطالب: تسجيل التلاوة الصوتية
   ============================================================ */
.recorder-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 48px 40px;
    background: var(--bg-core);
    border: 1px dashed var(--border-glass);
    border-radius: var(--radius-lg);
}

.recorder-logo {
    height: 64px;
    width: auto;
    margin-bottom: 4px;
    transition: filter var(--transition-fast);
}

:root:not([data-theme="light"]) .recorder-logo {
    filter: brightness(0) invert(1);
}

@media (max-width: 560px) {
    .recorder-box {
        padding: 32px 20px;
    }

    .recorder-logo {
        height: 52px;
    }
}

.recorder-timer {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.recorder-controls,
.recorder-submit-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.recorder-box audio {
    width: 100%;
    max-width: 360px;
}

#recorder-start-btn.is-recording {
    background: linear-gradient(90deg, var(--danger-gradient-start), var(--danger-gradient-end));
    animation: recorder-pulse 1.4s ease-in-out infinite;
}

@keyframes recorder-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 63, 39, 0.45); }
    50% { box-shadow: 0 0 0 10px rgba(212, 63, 39, 0); }
}

.recitation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: var(--glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}

.recitation-item audio {
    height: 34px;
    max-width: 220px;
}

.recitation-status {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.recitation-status.is-pending {
    background: rgba(217, 154, 43, 0.15);
    color: var(--pricing-gold);
}

.recitation-status.is-reviewed {
    background: rgba(0, 168, 120, 0.15);
    color: var(--primary);
}

.recitation-notes {
    flex-basis: 100%;
    color: var(--text-sec);
    font-size: 0.85rem;
}

/* رفع زر المصحف العائم فوق الشريط السفلي في لوحات التحكم لتفادي التداخل */
@media (max-width: 900px) {
    body:has(.dash-bottom-nav) .quran-fab {
        bottom: 88px;
    }
}

@media (max-width: 576px) {
    body:has(.dash-bottom-nav) .quran-fab {
        bottom: 82px;
    }
}

/* ============================================================
   قاعة الصوت المضمَّنة — ملء الشاشة أو شريط ثابت فوق التنقل
   ============================================================ */
body.hqs-live-open .dash-main { overflow: hidden; }

.hqs-live-overlay {
    position: fixed;
    inset-inline: 0;
    top: 0;
    bottom: var(--hqs-bottom-nav-h, 0px);
    z-index: 1200;
    background: var(--bg-core);
    display: none;
}
.hqs-live-overlay.is-open {
    display: block;
}
.hqs-live-overlay.is-docked {
    display: block;
    top: auto;
    bottom: var(--hqs-bottom-nav-h, 0px);
    height: 44px;
    z-index: 1295;
    background: transparent;
    border-top: 1px solid var(--border-glass);
}
.hqs-live-overlay.has-hand-alert.is-docked {
    box-shadow: 0 -6px 18px -8px rgba(255, 107, 107, 0.65);
    border-top-color: #ff6b6b;
}

.hqs-live-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

body.hqs-live-open .quran-fab,
body.hqs-live-open .quran-fab-overlay {
    display: none !important;
}

body.hqs-live-docked .dash-main {
    padding-bottom: calc(44px + 16px);
}

@media (min-width: 901px) {
    body.hqs-live-docked .dash-sidebar {
        padding-bottom: calc(44px + 16px);
    }
}

@media (max-width: 900px) {
    .hqs-live-overlay.is-open,
    .hqs-live-overlay.is-docked {
        bottom: var(--hqs-bottom-nav-h, calc(58px + env(safe-area-inset-bottom, 0)));
        z-index: 1290;
    }
    .hqs-live-overlay.is-docked {
        height: 44px;
        z-index: 1310;
    }
    body.hqs-live-open .dash-main,
    body.hqs-live-docked .dash-main {
        padding-bottom: calc(44px + var(--hqs-bottom-nav-h, calc(58px + env(safe-area-inset-bottom, 0))) + 16px);
    }
    body.hqs-live-docked .quran-fab {
        bottom: calc(44px + var(--hqs-bottom-nav-h, 88px) + 12px);
    }
    body.lesson-reader-open.hqs-live-docked .hqs-live-overlay.is-docked {
        bottom: 0;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        z-index: 1280;
    }
    body.lesson-reader-open.hqs-live-open .hqs-live-overlay.is-open {
        bottom: 0;
        z-index: 1400;
    }
}

.hqs-live-minimize,
.hqs-live-mini {
    display: none !important;
}

/* ============================================================
   Light theme: internal platform contrast
   توكنات أوضح + قواعد للمكوّنات التي كانت تعتمد على توهج الوضع الداكن
   ============================================================ */
[data-theme="light"] .rating-star {
    color: #64748b;
    opacity: 1;
}

[data-theme="light"] .rating-star.is-filled {
    color: var(--sun-gold);
    opacity: 1;
}

[data-theme="light"] .live-status-pill.is-live {
    background: rgba(185, 28, 28, 0.12);
    color: #b91c1c;
}

[data-theme="light"] .live-status-pill.is-upcoming {
    color: #92400e;
}

[data-theme="light"] .attendance-absent-badge {
    background: rgba(185, 28, 28, 0.1);
    border-color: #b91c1c;
    color: #991b1b;
}

[data-theme="light"] .dash-topbar-avatar,
[data-theme="light"] .live-top-card-avatar,
[data-theme="light"] .lh-avatar {
    color: #fff;
}

[data-theme="light"] .dash-sidebar-nav-item.is-active,
[data-theme="light"] .dash-bottom-nav-item.is-active {
    background: rgba(0, 102, 77, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 102, 77, 0.28);
}

[data-theme="light"] .notif-bell-btn {
    background: #fff;
    border-color: var(--border-glass);
    color: var(--text-main);
}

[data-theme="light"] .dash-bottom-nav {
    box-shadow: 0 -6px 16px -14px rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .quran-fab {
    box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .quran-fab:hover,
[data-theme="light"] .quran-fab.is-dragging {
    box-shadow: 0 10px 20px -12px rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .quran-fab.is-docked {
    box-shadow: -2px 2px 10px -8px rgba(15, 23, 42, 0.16);
}

[data-theme="light"] #teacher-error-toast,
[data-theme="light"] #sv-error-toast,
[data-theme="light"] .sa-notif-toast {
    box-shadow: 0 10px 24px -16px rgba(15, 23, 42, 0.22);
}