/*
   ─────────────────────────────────────────────────────────────
   ١٠ · وضع التطبيق — الموبايل والتابلت
   ─────────────────────────────────────────────────────────────
   الطلاب بيذاكروا من الموبايل والتابلت، فالمنصة على الأجهزة دي لازم
   تحس إنها تطبيق مش موقع متصغّر:

     • شريط تبويبات تحت صباع الطالب بدل قائمة ورا زرار ☰ فوق
     • شريط علوي رفيع زي أي تطبيق
     • أزرار كبيرة (٤٨ بكسل) واضحة، وبتتضغط فعلًا لما تلمسها
     • كروت ناعمة الزوايا، وقوائم أفقية بتتسحب بالصباع
     • الإجراء المهم (احجز / كمّل / سلّم) ثابت تحت دايمًا

   ─── إمتى يشتغل «وضع التطبيق»؟ ───
   أي شاشة لحد ٩٩١ بكسل، أو أي جهاز لمس لحد ١٣٦٦ بكسل — عشان الآيباد
   في الوضع الأفقي (١٠٢٤–١٣٦٦) ياخد نفس تجربة التطبيق مش تجربة الديسكتوب.
   الشرط ده متكرر حرفيًا في كل @media هنا وفي ui.js (initCatalogFilters)،
   لأن CSS مايقبلش متغيّر جوه @media.

   الملف ده بيتحمّل آخر حاجة، فبيحسم فوق responsive.css.
*/

/* ══════════════════════════════════════════
   عناصر التطبيق مخفية على الديسكتوب
   ══════════════════════════════════════════ */

.app-tabbar,
.app-cta,
.menu__item--app { display: none; }

/* خروج صفحة «حسابي» ظاهر في كل المقاسات — في التطبيق بيتفرد بعرض الشاشة */
.app-signout { margin-top: var(--s-6); }

@media (max-width: 991.98px), (pointer: coarse) and (max-width: 1366px) {

    /* ══════════════════════════════════════════
       الأساس: إحساس اللمس
       ══════════════════════════════════════════ */

    :root {
        --control-h: 3rem;        /* 48 — هدف لمس مريح للصباع */
        --control-h-sm: 2.625rem; /* 42 */
        --control-h-lg: 3.5rem;   /* 56 */
        --header-h: var(--appbar-h);
        --gutter: var(--s-5);
    }

    html {
        -webkit-tap-highlight-color: transparent;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* بيلغي تأخير الضغطة المزدوجة للتكبير — الزرار يستجيب فورًا */
    a, button, summary, label, .btn, .chip { touch-action: manipulation; }

    .shell {
        padding-inline-start: max(var(--gutter), env(safe-area-inset-left, 0px));
        padding-inline-end: max(var(--gutter), env(safe-area-inset-right, 0px));
    }

    .page { padding-block: var(--s-5) var(--s-8); }

    /* ══════════════════════════════════════════
       الأزرار والحقول
       ══════════════════════════════════════════ */

    .btn {
        font-size: var(--t-md);
        padding-inline: var(--s-5);
        transition: background-color var(--dur) var(--ease),
                    border-color var(--dur) var(--ease),
                    color var(--dur) var(--ease),
                    transform var(--dur-fast) var(--ease);
    }

    .btn-sm { font-size: var(--t-ui); padding-inline: var(--s-4); }
    .btn-lg { font-size: var(--t-lg); border-radius: var(--r); }
    .btn-link { min-height: auto; }

    /* الضغطة تتحس: الزرار بينزل سنة تحت الصباع */
    .btn:active:not(:disabled):not(.disabled) { transform: scale(.97); }

    .btn-primary { box-shadow: 0 6px 16px -8px rgba(59, 130, 246, .7); }
    .btn-success { box-shadow: 0 6px 16px -8px rgba(22, 163, 74, .6); }
    .btn-whatsapp { box-shadow: 0 6px 16px -8px rgba(31, 143, 86, .7); }

    /* أزرار الشريط العلوي صغيرة — الظل عليها بيبان تقيل */
    .site-header .btn { box-shadow: none; }

    /* ١٦ بكسل بالظبط: أي حاجة أصغر بتخلّي آيفون يعمل زووم للصفحة لما الطالب يكتب */
    .form-control,
    .form-select,
    textarea.form-control {
        min-height: var(--control-h);
        font-size: 16px;
    }

    .form-check-input { width: 1.35em; height: 1.35em; }
    .form-label { font-size: var(--t-ui); }

    /* ══════════════════════════════════════════
       الشريط العلوي (App Bar)
       ══════════════════════════════════════════ */

    .site-header__inner {
        min-height: var(--appbar-h);
        flex-wrap: nowrap;
        gap: var(--s-2);
    }

    /* التنقّل كله راح لشريط التبويبات تحت — فوق يفضل الشعار والأدوات بس.
       محصور في ترويسة الموقع: زرار ☰ في لوحة الإدارة (console-toggle) بيحمل
       نفس الكلاس، ولو اتخفى الدرج الجانبي بيبقى من غير أي طريقة يتفتح بيها. */
    .site-header .nav-toggle,
    .site-nav { display: none !important; }

    .site-header__collapse {
        display: flex !important;
        align-items: center;
        flex: 0 0 auto;
        flex-basis: auto;
        order: 0;
        margin-inline-start: auto;
        padding: 0;
        border: 0;
    }

    .site-header__collapse .site-header__actions {
        flex-wrap: nowrap;
        gap: var(--s-1);
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* زرار «إنشاء حساب» مكانه صفحة الدخول مش الشريط الضيق */
    .site-header__actions > .btn { display: none; }

    .site-header__auth { order: 20; margin-inline-start: var(--s-1); }

    /* الخروج جوه قائمة الأفاتار (وفي صفحة حسابي) — مش زرار جنب صباعك تدوس عليه غلط */
    .site-header__auth form { display: none; }

    .site-header__auth-label { display: none; }

    .site-header__auth-btn {
        width: var(--control-h-sm);
        padding-inline: 0;
        border-radius: 50%;
    }

    /* ٤٠px على الأقل: الأفاتار لوحده (٣٠px) كان أصغر من صباع — بيتداس غلط أو مايتداسش */
    .user-menu__trigger {
        min-width: 2.5rem;
        min-height: 2.5rem;
        padding: 4px;
        justify-content: center;
        border-radius: 50%;
    }

    html[dir='rtl'] .user-menu__trigger { padding: 4px; }

    .user-menu__name,
    .user-menu__trigger > .icon { display: none; }

    .theme-switch__trigger,
    .lang-switch__button { min-height: var(--control-h-sm); border-radius: 50%; }

    .menu__item--app { display: block; }

    /* القوائم المنسدلة بتبان زي «ورقة» تطبيق: عريضة ومريحة للصباع */
    .menu {
        min-width: 14rem;
        padding: var(--s-2);
        border-radius: var(--r-lg);
        box-shadow: var(--sh-4);
    }

    .menu__link { min-height: 3rem; border-radius: var(--r); font-size: var(--t-md); }

    /* ══════════════════════════════════════════
       شريط التبويبات السفلي
       ══════════════════════════════════════════ */

    .app-tabbar {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: var(--z-header);

        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        justify-content: center;

        height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
        padding-block-end: env(safe-area-inset-bottom, 0px);
        padding-inline: max(var(--s-2), env(safe-area-inset-left, 0px));

        /* شبه مصمت: الشفافية الزيادة بتخلّي كلام الفوتر يبان ورا التسميات */
        background: color-mix(in srgb, var(--surface) 95%, transparent);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 24px -18px rgba(15, 23, 42, .35);
    }

    .app-tabbar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .15rem;
        min-width: 0;
        color: var(--text-muted);
        font-size: var(--t-2xs);
        font-weight: var(--fw-semibold);
        text-decoration: none;
        user-select: none;
    }

    .app-tabbar__item:hover { color: var(--text); text-decoration: none; }

    /* «المزيد» في شريط اللوحة زرار مش رابط — يتصفّر شكله عشان يطابق باقي التبويبات */
    .app-tabbar__more {
        padding: 0;
        background: none;
        border: 0;
        font-family: inherit;
        cursor: pointer;
    }

    .app-tabbar__more[aria-expanded="true"] { color: var(--p-700); }
    .app-tabbar__more[aria-expanded="true"] .app-tabbar__icon { background: var(--p-100); color: var(--p-700); }

    /* المؤشّر كبسولة ورا الأيقونة — نفس لغة تطبيقات أندرويد الحديثة */
    .app-tabbar__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        /* ٧ تبويبات على موبايل ٣٦٠ = ~٤٩px للخانة — الكبسولة تصغر معاها بدل ما تطلع برّه */
        width: min(3.5rem, calc(100% - 4px));
        height: 2rem;
        border-radius: var(--r-pill);
        transition: background-color var(--dur) var(--ease),
                    color var(--dur) var(--ease),
                    transform var(--dur-fast) var(--ease);
    }

    .app-tabbar__icon .icon { width: 1.4rem; height: 1.4rem; }

    .app-tabbar__label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-tabbar__item.is-active { color: var(--p-700); }
    .app-tabbar__item.is-active .app-tabbar__icon { background: var(--p-100); color: var(--p-700); }
    .app-tabbar__item:active .app-tabbar__icon { transform: scale(.9); }

    body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

    /* العائمات تطلع فوق الشريط بدل ما تستخبّى وراه */
    .has-tabbar .whatsapp-float,
    .has-tabbar .install-bar.is-visible ~ .whatsapp-float {
        inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-3));
        inset-inline-end: var(--s-4);
        width: 3.25rem;
        height: 3.25rem;
    }

    .has-tabbar .install-bar {
        inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-3));
    }

    .has-tabbar .install-bar.is-visible ~ .whatsapp-float { display: none; }

    /* ══════════════════════════════════════════
       شريط الإجراء السفلي (احجز / كمّل)
       ══════════════════════════════════════════ */

    .app-cta {
        position: fixed;
        inset-inline: 0;
        inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
        z-index: calc(var(--z-header) - 1);

        display: flex;
        align-items: center;
        gap: var(--s-4);
        padding: var(--s-3) max(var(--gutter), env(safe-area-inset-right, 0px));

        background: var(--surface);
        border-top: 1px solid var(--line);
        box-shadow: 0 -10px 24px -18px rgba(15, 23, 42, .35);
    }

    .app-cta__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
    .app-cta__label { font-size: var(--t-xs); color: var(--text-muted); }

    .app-cta__value {
        font-size: var(--t-xl);
        font-weight: var(--fw-black);
        color: var(--text);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .app-cta__value small { font-size: var(--t-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
    .app-cta__value--free { color: var(--ok-600); }
    .app-cta__btn { flex: 1; }

    body:has(.app-cta) { padding-bottom: calc(var(--tabbar-h) + 5rem + env(safe-area-inset-bottom, 0px)); }

    /* الزرار الأخضر تحت أصلًا بيفتح واتساب — العائم يبقى تكرار بيغطّي عليه */
    body:has(.app-cta) .whatsapp-float { display: none; }

    /* ══════════════════════════════════════════
       التذييل: مختصر — التنقّل بقى في الشريط
       ══════════════════════════════════════════ */

    .site-footer { padding-block: var(--s-6) var(--s-4); font-size: var(--t-sm); }
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }

    .site-footer__col--nav,
    .site-footer__tagline,
    .site-footer__heading { display: none; }

    .site-footer__brand-col { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
    .site-footer .brand { margin: 0; }
    .site-footer__social { margin: 0; }

    .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
    .site-footer__links li { margin: 0; }
    .site-footer__bottom { margin-top: var(--s-4); padding-top: var(--s-3); justify-content: center; }

    /* ══════════════════════════════════════════
       عناوين الصفحات
       ══════════════════════════════════════════ */

    .page-head { margin-bottom: var(--s-5); gap: var(--s-4); }
    .page-head__title { font-size: var(--t-2xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
    .page-head__subtitle { font-size: var(--t-ui); }
    .page-head__actions { width: 100%; }
    .page-head__actions > .btn,
    .page-head__actions > form { flex: 1 1 auto; }
    .page-head__actions > form .btn { width: 100%; }

    .section-head { margin-bottom: var(--s-4); }
    .section-head__title { font-size: var(--t-lg); font-weight: var(--fw-black); }

    /* فتات الخبز سطر واحد بيتسحب — تلات سطور فوق العنوان بتاكل الشاشة */
    .breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
        font-size: var(--t-xs);
        margin-bottom: var(--s-2);
    }

    .breadcrumb::-webkit-scrollbar { display: none; }

    .breadcrumb-item {
        flex: none;
        max-width: 14rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ══════════════════════════════════════════
       الكروت: ناعمة، وبتتضغط
       ══════════════════════════════════════════ */

    .course-card,
    .module-card,
    .lesson-card,
    .enrolled-card,
    .tracks__item {
        border-radius: var(--r-lg);
        border-color: var(--line-soft);
        box-shadow: 0 4px 18px -12px rgba(15, 23, 42, .28);
        transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
    }

    /* مفيش hover على اللمس — الكارت بيستجيب للضغطة نفسها */
    .course-card:hover,
    .module-card:hover,
    .lesson-card:not(.is-locked):hover,
    .tracks__item:hover { transform: none; }

    .course-card:active,
    .module-card:active,
    .lesson-card:not(.is-locked):active,
    .enrolled-card:active,
    .tracks__item:active { transform: scale(.98); }

    .panel,
    .buy-card,
    .result-card,
    .filters,
    .curriculum-map,
    .course-nav,
    .auth-card { border-radius: var(--r-lg); }

    .alert { border-radius: var(--r); }
    .pill { padding-inline: .65em; }

    .card-grid,
    .card-grid--wide { gap: var(--s-4); }

    /* ══════════════════════════════════════════
       الرئيسية
       ══════════════════════════════════════════ */

    .how-ribbon__inner { padding-block: var(--s-3); }
    .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }

    /* ══════════════════════════════════════════
       الكتالوج: الفلاتر رقائق بتتسحب أفقيًا
       ══════════════════════════════════════════ */

    .filters__summary { min-height: 3.25rem; font-size: var(--t-md); }

    /* مش لازقة: شاشة التابلت الأفقي قصيرة، واللوحة اللازقة أطول منها فآخرها
       (أقسام الكورسات) كان بيفضل تحت الشريط السفلي ومايتوصلّوش أبدًا */
    .filters { position: static; }

    .chip-set {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        margin-inline: calc(var(--s-4) * -1);
        padding: 2px var(--s-4);
    }

    .chip-set::-webkit-scrollbar { display: none; }

    .chip {
        flex: none;
        min-height: 2.625rem;
        padding-inline: var(--s-4);
        border-radius: var(--r-pill);
        font-size: var(--t-ui);
        scroll-snap-align: start;
    }

    .chip:active { transform: scale(.96); }

    /* ══════════════════════════════════════════
       صفحة الكورس
       ══════════════════════════════════════════ */

    .course-hero { padding-block: var(--s-5) var(--s-6); }
    .course-hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
    .course-hero__title { font-size: var(--t-2xl); line-height: var(--lh-tight); }
    .buy-card { max-width: none; }

    .curriculum-map__head { min-height: 3.5rem; }
    .curriculum-map__lesson { padding-block: var(--s-3); }
    .curriculum-map__lesson a { display: block; padding-block: .15rem; }

    /* ══════════════════════════════════════════
       القاعة المركّزة: الدرس والامتحان
       ══════════════════════════════════════════ */

    .focus-topbar {
        min-height: var(--appbar-h);
        padding-top: env(safe-area-inset-top, 0px);
        padding-inline: max(var(--s-3), env(safe-area-inset-left, 0px));
        gap: var(--s-2);
    }

    .focus-topbar__back { min-height: var(--control-h-sm); padding-inline: var(--s-2); border-radius: var(--r-pill); }

    .focus-topbar__context {
        flex: 1;
        font-size: var(--t-ui);
        font-weight: var(--fw-semibold);
        color: var(--d-text);
    }

    .focus-topbar__end { gap: var(--s-2); }

    .player__content { padding: var(--s-4) var(--gutter) var(--s-6); }
    .player__title { font-size: var(--t-xl); line-height: var(--lh-tight); }

    /* التابات الأربعة ظاهرين من غير سحب: الأيقونة فوق والكلمة تحتها زي التطبيقات */
    .player-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--s-2);
        margin-top: var(--s-5);
        padding-top: 0;
        border-top: 0;
    }

    .player-tabs__btn {
        flex-direction: column;
        justify-content: flex-start;
        gap: .4rem;
        min-height: 5.5rem;
        padding: var(--s-3) .2rem var(--s-2);
        font-size: var(--t-2xs);
        line-height: 1.25;
        text-align: center;
    }

    .player-tabs__icon { width: 2.5rem; height: 2.5rem; }
    .player-tabs__icon .icon { width: 1.35rem; height: 1.35rem; }

    .player-tabs__count {
        inset-block-start: .3rem;
        inset-inline-end: .3rem;
        border-width: 0;
    }

    .player__eyebrow { color: var(--p-600); font-weight: var(--fw-semibold); }

    .player-tabpanel { margin-top: var(--s-5); }

    .quiz-cta {
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-3);
        padding: var(--s-4);
        border-radius: var(--r-lg);
    }

    .quiz-cta > div:last-child { width: 100%; margin-inline-start: 0 !important; }
    .quiz-cta > div:last-child .btn { flex: 1 1 100%; }

    .lesson-comments__form,
    .lesson-qa__form { flex-direction: column; align-items: stretch; }

    .lesson-comments__form textarea,
    .lesson-qa__form textarea { min-width: 0; }

    .lesson-comments__item,
    .lesson-qa__item { border-radius: var(--r); }

    .player__sidebar { padding: var(--s-5) var(--gutter); }
    .player-lesson { min-height: 3rem; align-items: center; border-radius: var(--r); }
    .player-lesson .icon { margin-top: 0; }

    /* ─── التنقّل بين الدروس: شريط ثابت تحت زي أزرار تطبيق ─── */

    .player__course-nav {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: var(--z-header);
        margin: 0;
        padding: var(--s-2) max(var(--s-3), env(safe-area-inset-right, 0px)) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
        background: var(--surface-veil);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid var(--d-line);
    }

    .focus-body:has(.player__course-nav) { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); }

    /* الكيبورد مفتوح (بيكتب سؤال أو تعليق): الشريط يختفي عشان مايغطّيش على اللي بيكتبه */
    .focus-body:has(textarea:focus, input[type='text']:focus) .player__course-nav { display: none; }

    .player__course-nav .course-nav__bar {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
        gap: var(--s-2);
    }

    /* المؤشّر بقى خط رفيع فوق الزرارين — العدّاد النصّي مكانه صفحة الكورس */
    .player__course-nav .course-nav__center {
        grid-column: 1 / -1;
        grid-row: 1;
        padding: 0;
        gap: 0;
    }

    .player__course-nav .course-nav__counter,
    .player__course-nav .course-nav__current { display: none; }

    .player__course-nav .course-nav__track { height: 4px; }

    /* جوه الشريط الثابت: الزرار أخف (من غير ظل رافع) عشان الشريط نفسه هو السطح */
    .player__course-nav .course-nav__side {
        min-height: 3.25rem;
        padding: var(--s-1) var(--s-2);
        border-radius: var(--r);
    }

    .player__course-nav .course-nav__side.is-disabled { box-shadow: none; }
    .player__course-nav .course-nav__side.is-empty { display: flex; }
    .player__course-nav .course-nav { --nav-bubble: 2.25rem; }
    .player__course-nav .course-nav__side-title { -webkit-line-clamp: 1; line-clamp: 1; font-size: var(--t-sm); }

    /* سبب القفل أهم معلومة في الزرار المقفول ("عدّي امتحان الدرس اللي قبله") — سطرين
       بخط أصغر بدل ما يتقطع في نص الجملة */
    .player__course-nav .course-nav__side.is-disabled .course-nav__side-title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: var(--t-xs);
        line-height: 1.35;
    }
    .player__course-nav .course-nav__side--next { grid-column: 2; }

    /* ─── الامتحان ─── */

    .exam { padding-inline: var(--gutter); }
    .exam__title { font-size: var(--t-xl); }

    .exam-question { padding: var(--s-4); border-radius: var(--r-lg); }

    .exam-option {
        align-items: center;
        min-height: 3.5rem;
        padding: var(--s-3) var(--s-4);
        border-width: 2px;
        border-radius: var(--r);
        transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
    }

    .exam-option:active { transform: scale(.98); }
    .exam-option .form-check-input { flex: none; margin: 0; width: 1.4em; height: 1.4em; }
    .exam-fill .form-control { max-width: none; }

    /* زرار التسليم لازق تحت طول ما الطالب بيحل */
    .exam__actions {
        position: sticky;
        inset-block-end: 0;
        z-index: var(--z-sticky);
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-2);
        margin-inline: calc(var(--gutter) * -1);
        padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
        background: var(--surface-veil);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
    }

    .exam__actions .btn { width: 100%; margin-inline-start: 0; }
    .exam__unanswered { text-align: center; }

    /* ══════════════════════════════════════════
       الريلز: الفيد يسيب مكان للشريط
       ══════════════════════════════════════════ */

    .has-tabbar .reels-feed {
        height: calc(100dvh - var(--appbar-h) - var(--tabbar-h) - env(safe-area-inset-bottom, 0px));
    }

    /* ══════════════════════════════════════════
       الحساب والدخول
       ══════════════════════════════════════════ */

    .auth { padding-block: var(--s-5); }

    .settings-nav__item { min-height: 3rem; border-radius: var(--r-pill); }

    .app-signout .btn { width: 100%; }

    /* ══════════════════════════════════════════
       لوحة الإدارة: نفس مقاسات اللمس
       ══════════════════════════════════════════ */

    .console-topbar { min-height: var(--appbar-h); }
    .console-link { min-height: 3rem; border-radius: var(--r); }

    /* الدرج بطول الشاشة الظاهر فعلًا — 100vh على الموبايل أطول من المساحة
       المرئية، فكان ذيل الدرج (الحساب والخروج) بيستخبى ورا شريط المتصفح */
    .console-sidebar { height: 100dvh; }
    .console-sidebar__foot { padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }

    /* العنوان موجود في الشريط العلوي — تكراره أول الصفحة بياكل نص الشاشة الأولى */
    .console-body > .page-head .page-head__title { font-size: var(--t-xl); }
}

/* شريط تبويبات اللوحة مالوش لازمة لما الشريط الجانبي ظاهر دايمًا (من ٩٩٢ وطالع) */
@media (min-width: 992px) {
    .app-tabbar.console-tabbar { display: none !important; }
    body.has-tabbar.console-page { padding-bottom: 0; }
}

/* ══════════════════════════════════════════
   الموبايل (أقل من ٦٠٠)
   ══════════════════════════════════════════ */

@media (max-width: 599.98px) {
    :root { --gutter: var(--s-4); }

    /* ─── أرقام لوحة التحكم: عمودين بدل كارت لكل رقم بعرض الشاشة ─── */
    .console-body .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
    .console-body .stat { padding: var(--s-3) var(--s-4); }
    .console-body .stat__label { font-size: var(--t-xs); margin-bottom: var(--s-2); align-items: flex-start; }
    .console-body .stat__value { font-size: var(--t-2xl); }
    .console-body .stat__hint { font-size: var(--t-xs); }

    .console-body .chart-bars { gap: var(--s-2); height: 9rem; }

    .card-grid,
    .card-grid--wide,
    .card-grid.card-grid--units { grid-template-columns: minmax(0, 1fr); }

    /* ─── قائمة أفقية بتتسحب بالصباع (الرئيسية) ─── */
    .card-grid--rail,
    .tracks {
        display: flex;
        gap: var(--s-3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
        margin-inline: calc(var(--gutter) * -1);
        padding: var(--s-1) var(--gutter) var(--s-3);
    }

    .card-grid--rail::-webkit-scrollbar,
    .tracks::-webkit-scrollbar { display: none; }

    .card-grid--rail > *,
    .tracks > li {
        flex: 0 0 min(82%, 20rem);
        /* من غيرها العنصر مابيصغرش عن أطول سطر جواه (اسم كورس طويل nowrap)،
           فالكارت بيطلع أعرض من الشاشة ويتسحب يمين وشمال لوحده */
        min-width: 0;
        scroll-snap-align: start;
    }

    .tracks__item { height: 100%; }

    /* ─── الدرس صف أفقي زي قوائم التطبيقات: صورة جنب العنوان ─── */
    .lesson-card,
    .lesson-card__link { flex-direction: row; }

    .lesson-card__link { width: 100%; }

    .lesson-card__media {
        flex: 0 0 40%;
        aspect-ratio: auto;
        min-height: 6.5rem;
    }

    .lesson-card__body { justify-content: center; padding: var(--s-3) var(--s-4); gap: var(--s-1); }
    .lesson-card__title { font-size: var(--t-ui); }
    .lesson-card__lock-reason { font-size: var(--t-xs); }
    .lesson-card__badge { inset-block-start: var(--s-2); inset-inline-start: var(--s-2); font-size: var(--t-2xs); }
    .lesson-card__play .icon { width: 2rem; height: 2rem; }
    .lesson-card .cover-fallback { padding: var(--s-2); }

    /* ─── الفيديو لازق فوق وانت بتقرا التعليقات — زي يوتيوب ─── */
    .player__video {
        position: sticky;
        inset-block-start: calc(var(--appbar-h) + env(safe-area-inset-top, 0px));
        z-index: calc(var(--z-sticky) - 1);
    }

    /* لكن لو بيكتب، الكيبورد واخد نص الشاشة — الفيديو يسيب مكانه */
    .player:has(textarea:focus) .player__video { position: relative; inset-block-start: auto; }

    /* الشريط العلوي: سهم الرجوع لوحده زي أي تطبيق (زرار الرجوع في القايمة الجانبية يفضل بكلامه) */
    .focus-topbar > .focus-topbar__back > span { display: none; }

    .app-cta { gap: var(--s-3); }
    .app-cta__value { font-size: var(--t-lg); }
}

/* ══════════════════════════════════════════
   التابلت في وضع التطبيق (٦٠٠ فأكثر)
   ══════════════════════════════════════════ */

@media (min-width: 600px) and (max-width: 991.98px),
       (min-width: 600px) and (pointer: coarse) and (max-width: 1366px) {

    .card-grid,
    .card-grid--wide,
    .card-grid.card-grid--units { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* الشريط على التابلت ماينفعش يتفرش على عرض الشاشة كله — الأيقونات تتبعتر */
    .app-tabbar { grid-auto-columns: minmax(0, 7.5rem); }

    .app-cta {
        inset-inline: var(--s-5);
        inset-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--s-3));
        max-width: 40rem;
        margin-inline: auto;
        border: 1px solid var(--line);
        border-radius: var(--r-xl);
        box-shadow: var(--sh-4);
    }

    .player__course-nav .course-nav { max-width: 44rem; margin-inline: auto; }
    .exam__actions .btn { max-width: 28rem; margin-inline: auto; }
}

@media (min-width: 900px) and (max-width: 991.98px),
       (min-width: 900px) and (pointer: coarse) and (max-width: 1366px) {

    .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* الآيباد الأفقي: الدرس والمحتوى جنب بعض زي تطبيق التابلت */
    .player { grid-template-columns: minmax(0, 1fr) 19rem; }
    .player__sidebar {
        position: sticky;
        inset-block-start: var(--appbar-h);
        max-height: calc(100dvh - var(--appbar-h));
        border-top: 0;
        border-inline-start: 1px solid var(--d-line);
        padding-bottom: 6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn:active, .chip:active, .course-card:active, .module-card:active,
    .lesson-card:active, .enrolled-card:active, .tracks__item:active,
    .exam-option:active, .app-tabbar__item:active .app-tabbar__icon { transform: none !important; }
}

@media print {
    .app-tabbar, .app-cta, .player__course-nav { display: none !important; }
    body.has-tabbar { padding-bottom: 0; }
}