/* ==========================================================================
   AcademyOS — نظام واجهة المركز
   ملف واحد مشترك تقرؤه كل تخطيطات المستأجر (الإدارة، المدرّب، المتدرّب،
   الواجهة العامة، وشاشات الدخول القائمة بذاتها).

   المبادئ:
   1) العربية أصل لا انعكاس: خصائص منطقية (inline-start/end)، ارتفاع سطر أعلى،
      وتباعد حروف صفر دائماً — أي letter-spacing على نص عربي يفكّ الاتصال.
   2) لا لون ثابت: كل شيء رمز من ThemeRenderer (config/themes.php)، فيتبدّل
      الفاتح/الداكن وشخصية الثيم دون لمس أي صفحة.
   3) لا CDN: الخطوط ملفات woff2 محلّية في /fonts بترخيص OFL.
   4) الحركة تخدم الفهم: 120–280ms للتفاعلات، وكشف عند التمرير للدخول،
      وكلّها تتوقّف تماماً مع prefers-reduced-motion.
   ========================================================================== */


/* ==========================================================================
   1) الخطوط — مستضافة ذاتياً
   المجموعات الفرعية مفصولة بـunicode-range: المتصفّح لا ينزّل اللاتيني إلا
   إن ظهر محرف لاتيني فعلاً، ولا ينزّل خطوط ثيم غير مُفعّل إطلاقاً.
   ========================================================================== */

/* ---- IBM Plex Sans Arabic (OFL) — ثيم framer ---- */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/plex-arabic-400-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/plex-arabic-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/plex-arabic-500-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/plex-arabic-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/plex-arabic-600-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(/fonts/plex-arabic-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/plex-arabic-700-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/plex-arabic-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Noto Sans Arabic (OFL) — ثيم minimal — ملف متغيّر يغطّي 100–900 ---- */
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/noto-arabic-var-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(/fonts/noto-arabic-var-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tajawal (OFL) — نص ثيم elegant ---- */
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/tajawal-400-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/tajawal-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/tajawal-500-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(/fonts/tajawal-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/tajawal-700-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/tajawal-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Amiri (OFL) — عناوين ثيم elegant فقط ---- */
@font-face {
    font-family: 'Amiri';
    size-adjust: 112%;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/amiri-400-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Amiri';
    size-adjust: 112%;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/amiri-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Amiri';
    size-adjust: 112%;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/amiri-700-arabic.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'Amiri';
    size-adjust: 112%;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/amiri-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   2) رموز مشتركة لا تخصّ ثيماً بعينه
   الألوان الدلالية (نجاح/تحذير/خطر) تُبنى بمزج مع لون اللوح، فتتبع الوضع
   الفاتح والداكن تلقائياً بدل ألوان باستيل ثابتة تنفجر في الداكن.
   ========================================================================== */

:root {
    /* المقياس الطباعي — العربية تحتاج جسماً أكبر وسطراً أعلى من اللاتينية */
    --fs-xs: .75rem;      /* 12px — وسوم وحواشٍ */
    --fs-sm: .8125rem;    /* 13px — تسميات وأزرار */
    --fs-md: .875rem;     /* 14px — جداول */
    --fs-base: .9375rem;  /* 15px — نص الواجهة */
    --fs-lg: 1.0625rem;   /* 17px — عناوين ألواح */
    --fs-xl: 1.375rem;    /* 22px — عناوين أقسام */
    --fs-2xl: 1.75rem;    /* 28px */

    --lh-tight: 1.45;     /* عناوين */
    --lh-snug: 1.7;       /* أسطر قصيرة */
    --lh-body: 1.9;       /* نص متّصل بالعربية */

    /* سُلَّم التباعد — مضاعفات 4 لا أرقام متفرقة */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 22px;
    --sp-6: 32px;
    --sp-7: 48px;

    /* ألوان دلالية (الوضع الفاتح).
       غامقة عمداً: اللون نفسه يخدم النص والحدّ والخلفية الممزوجة، فلو أخذناه
       بدرجة متوسطة هبط تباين النص على خلفيته إلى ~4.2 (قِيس، لا يُقدَّر). */
    --ok: #166534;
    --warn: #92400e;
    --danger: #b91c1c;
    --info: #075985;

    /* لون العلامة حين يكون نصّاً أو حلقة تركيز فوق سطح.
       لا نستعمل --brand-primary مباشرةً للنص: مراكز كثيرة تختار لوناً غامقاً
       (بنفسجي، كحلي، عنّابي) يقرأ ممتازاً على أبيض ويسقط إلى 2:1 على سطح
       داكن. هنا يُفتَح اللون في الوضع الداكن ويبقى كما هو في الفاتح. */
    --brand-ink: var(--brand-primary);

    --ring: 2px;          /* سماكة حلقة التركيز */
}

/* الوضع الداكن المفروض من مدير المركز */
[data-mode="dark"] {
    --ok: #4ade80;
    --warn: #fbbf24;
    --danger: #fca5a5;
    --info: #7dd3fc;
    --brand-ink: color-mix(in srgb, var(--brand-primary) 42%, #ffffff);
}

/* الوضع التلقائي: يتبع تفضيل الجهاز — يطابق منطق ThemeRenderer تماماً */
@media (prefers-color-scheme: dark) {
    [data-mode="auto"] {
        --ok: #4ade80;
        --warn: #fbbf24;
        --danger: #fca5a5;
        --info: #7dd3fc;
        --brand-ink: color-mix(in srgb, var(--brand-primary) 42%, #ffffff);
    }
}


/* ==========================================================================
   3) الأساس
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    /* صفر دائماً: أي تباعد حروف على نص عربي يفكّ اتصال الحروف بصرياً */
    letter-spacing: 0;
    background: var(--surface);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--heading-weight, 700);
    line-height: var(--lh-tight);
    letter-spacing: 0;
    color: var(--heading);
}
/* سُلَّم صريح: بدونه يرث كل عنوان حجماً من المتصفّح يتغيّر بعمق التداخل،
   فيخرج h3 أكبر من h1 داخل <section> — وهذا بعينه الإحساس «غير المتين». */
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }
h5, h6 { font-size: var(--fs-sm); }

a { color: inherit; }

img, svg, video { max-width: 100%; height: auto; }

/* الأرقام والمعرّفات اللاتينية داخل نص عربي: عزل ثنائي الاتجاه إلزامي،
   وإلا انقلب ترتيب المقاطع (تواريخ، مبالغ، بريد، روابط، أرقام هواتف). */
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}
.num {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

::selection { background: var(--brand-primary); color: #fff; }

/* تركيز مرئي موحّد لكل ما يُركَّز عليه بلوحة المفاتيح */
:focus-visible {
    outline: var(--ring) solid var(--brand-ink);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}


/* ==========================================================================
   4) الهيكل: الشريط العلوي والغلاف والتذييل
   ========================================================================== */

.wrap {
    max-width: 1040px;
    margin: var(--sp-5) auto;
    padding: 0 var(--sp-4) var(--sp-7);
    width: 100%;
}
.wrap.narrow { max-width: 760px; }

/* الشريط العلوي — صفّ واحد (المدرّب/المتدرّب) */
.topbar {
    background: var(--topbar-bg);
    color: var(--topbar-text);
    padding: var(--sp-3) var(--sp-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar h1 {
    font-size: var(--fs-base);
    font-weight: 600;
    color: inherit;
    line-height: var(--lh-snug);
}
.topbar h1 .sep { opacity: .5; margin: 0 6px; }
.topbar h1 .page { font-weight: 400; opacity: .9; }

.topbar .nav { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }

/* أزرار الشريط: نفس شكل الأزرار العادية لكن على خلفية ملوّنة */
.topbar .nav a,
.topbar .nav button,
.topbar .logout {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    background: rgba(255, 255, 255, .14);
    color: var(--topbar-text);
    border: var(--border-w) solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.topbar .nav a:hover,
.topbar .nav button:hover,
.topbar .logout:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .22); }
.topbar .nav a.active { background: rgba(255, 255, 255, .3); font-weight: 600; }
.topbar .logout { background: rgba(0, 0, 0, .18); }
.topbar .logout:hover { background: rgba(0, 0, 0, .3); }

/* أيقونات الشريط: مرافقة للنصّ لا بديلة عنه — كل زرّ يبقى معنوناً بلفظه. */
.topbar .nav a,
.topbar .nav button,
.topbar .logout { gap: 7px; }
.topbar .nav svg { width: 16px; height: 16px; flex: none; }
/* الاتجاهية وحدها تنعكس: سهم الخروج نعم، البيت والكتاب لا. */
[dir="rtl"] .topbar .nav .icon-dir { transform: scaleX(-1); }

/* حالة «امتحان جارٍ»: تحلّ محلّ وجهتي التنقّل في شاشة المحاولة، فتقول
   للمتدرّب لماذا اختفتا بدل أن يظنّ الشريط معطوباً. */
.topbar .nav .pill.live-exam {
    gap: 6px;
    min-height: 38px;
    color: var(--topbar-text);
    background: rgba(0, 0, 0, .22);
    border-color: rgba(255, 255, 255, .18);
    font-size: var(--fs-sm);
}

/* الشريط العلوي — سطران وتبويبات (لوحة الإدارة).
   التبويب النشط مثبَّت بحافّة سفلية: موضع الأزرار لا يتحرّك بين الصفحات. */
.topbar.stacked {
    display: block;
    padding: var(--sp-3) var(--sp-5) 0;
    box-shadow: var(--shadow-sm);
}
.topbar.stacked .brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.topbar.stacked .nav {
    display: flex;
    align-items: stretch;
    gap: 2px;
    overflow-x: auto;
    flex-wrap: nowrap;
    /* شريط تمرير رفيع مرئي: هذا هو الدليل البصري الأول على وجود فائض.
       كان `scrollbar-width: none` هنا فيبتلع الشريط آخر تبويباته بلا أثر
       (مقيس: 979px من 1260px خارج الرؤية على عرض 320px). */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--topbar-text) 55%, transparent) transparent;
    scroll-behavior: smooth;
}
.topbar.stacked .nav::-webkit-scrollbar { height: 6px; }
.topbar.stacked .nav::-webkit-scrollbar-track { background: transparent; }
.topbar.stacked .nav::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--topbar-text) 55%, transparent);
    border-radius: 999px;
}
.topbar.stacked .nav a {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    min-height: 40px;
    /* كان هنا `opacity: .82` يخفت التبويب غير النشط. حُذف بالقياس: نصّ الشريط
       على لون العلامة يقيس 3.76:1 أصلاً (تحت 4.5)، والتخفيت يهبط به أكثر —
       ثمنٌ لا يشتري شيئاً، فتمييز التبويب النشط قائم بالخلفية والحافّة السفلية
       ووزن الخط. أصلُ المشكلة في رموز الثيم لا هنا (انظر التقرير). */
    transition: background var(--dur-fast) var(--ease);
}
.topbar.stacked .nav a:hover { background: rgba(255, 255, 255, .14); }
.topbar.stacked .nav a.active {
    background: rgba(255, 255, 255, .18);
    border-bottom-color: currentColor;
    font-weight: 600;
}

/* ---- سكّة التبويبات: لا إجراء يختفي بلا أثر ----------------------------
   المشكلة المقيسة: الشريط يمرّر أفقياً، فما تجاوز الحافّة يبدو محذوفاً لا
   مؤجَّلاً. العلاج ثلاث طبقات مستقلّة، كلٌّ تكفي وحدها:
   1) شريط تمرير رفيع مرئي (أعلاه) — يعمل بلا جافاسكربت إطلاقاً.
   2) تلاشٍ على الحافّة التي وراءها بقيّة (يُشغَّل بصنف من navrail.js).
   3) زرّا تمرير للفأرة — يُخفيان على المؤشّر الخشن لأن السحب باللمس أصل
      لا بديل، ولأن زرّاً بارتفاع 40px داخل سكّة بهذا الارتفاع لا يبلغ 44px.
   الاتجاه منطقيّ: التلاشي والأسهم ينعكسان مع اتجاه المستند. */
.navrail { position: relative; }

.navrail::before,
.navrail::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease);
    z-index: 1;
}
.navrail::before { inset-inline-start: 0; background: linear-gradient(to right, var(--topbar-bg), transparent); }
.navrail::after { inset-inline-end: 0; background: linear-gradient(to left, var(--topbar-bg), transparent); }
[dir="rtl"] .navrail::before { background: linear-gradient(to left, var(--topbar-bg), transparent); }
[dir="rtl"] .navrail::after { background: linear-gradient(to right, var(--topbar-bg), transparent); }

.navrail.can-start::before,
.navrail.can-end::after { opacity: 1; }

.navrail__btn {
    position: absolute;
    top: 0;
    height: 40px;
    width: 34px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* حجابٌ داكن لا فاتح: تفتيح الخلفية بلون النصّ نفسه
       (`color-mix(topbar-bg 88%, topbar-text)`) قاس 4.18:1 على الثيم
       الافتراضي — تحت العتبة. التعتيم يرفعها إلى 8.31:1، وهي نفس لغة
       زرّ الخروج في هذا الملف. */
    background: rgba(0, 0, 0, .28);
    color: var(--topbar-text);
    border: var(--border-w) solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-xs);
    cursor: pointer;
    z-index: 2;
    transition: background var(--dur-fast) var(--ease);
}
.navrail__btn:hover { background: rgba(0, 0, 0, .42); }
.navrail__btn svg { width: 16px; height: 16px; }
.navrail__btn--start { inset-inline-start: 0; }
.navrail__btn--end { inset-inline-end: 0; }
/* الأسهم اتجاهية: تنعكس مع اتجاه المستند بخلاف الأيقونات الرمزية. */
[dir="rtl"] .navrail__btn svg { transform: scaleX(-1); }

.navrail.can-start .navrail__btn--start,
.navrail.can-end .navrail__btn--end { display: inline-flex; }

@media (pointer: coarse) {
    /* اللمس يسحب السكّة مباشرةً، والتلاشي يبقى دليله. */
    .navrail__btn { display: none !important; }
    .topbar.stacked .nav a { min-height: 44px; }
}

/* لا حاجة لكتلة prefers-reduced-motion هنا: المفتاح العامّ في هذا الملف
   (ابحث عن prefers-reduced-motion أدناه) يُلغي كل انتقال و`scroll-behavior`
   بـ!important. لكنّه لا يبلغ `behavior:'smooth'` المُمرَّر من الجافاسكربت —
   ولذلك يفحص navrail.js التفضيل بنفسه. */


/* ==========================================================================
   5) الألواح والبطاقات
   ========================================================================== */

.panel {
    background: var(--panel);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-4);
}
.panel h2 {
    font-size: var(--fs-lg);
    color: var(--brand-ink);
    margin-bottom: var(--sp-1);
}
.panel .hint {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-3);
}
.panel .empty,
.empty {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    padding: var(--sp-3) 0;
}


/* ==========================================================================
   6) الأزرار — لغة شكلية واحدة، وحالات حقيقية لا مجرّد تبدّل ظل
   ========================================================================== */

.btn {
    --btn-bg: var(--brand-primary);
    --btn-fg: #ffffff;
    --btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;              /* هدف لمس مريح */
    padding: 0 20px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: var(--border-w) solid var(--btn-bd);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--btn-shadow, none);
    transition:
        background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        box-shadow var(--dur-fast) var(--ease),
        transform var(--dur-fast) var(--ease);
}
.btn:hover {
    background: var(--btn-bg);                                /* احتياط لمتصفّح بلا color-mix */
    background: color-mix(in srgb, var(--btn-bg) 86%, #000);
    transform: translateY(var(--lift));
    box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none));
}
.btn:active { transform: translateY(0); box-shadow: var(--btn-shadow, none); }
.btn:focus-visible { outline: var(--ring) solid var(--brand-ink); outline-offset: 3px; }

.btn[disabled],
.btn.is-disabled,
.btn[aria-disabled="true"] {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--panel-border);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
    pointer-events: none;
}

.btn.small {
    min-height: 36px;
    padding: 0 14px;
    font-size: var(--fs-xs);
    border-radius: var(--radius-xs);
}
/* على شاشة لمس يعود الهدف إلى 44px — القياس لا الحدس */
@media (pointer: coarse) {
    .btn.small { min-height: 44px; padding: 0 16px; }
}

.btn.block { width: 100%; }

/* ثانوي: يحمل حدّاً حقيقياً بدل أن يكون مساحة رمادية بلا تعريف */
.btn.ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-bd: var(--input-border);
}
.btn.ghost:hover {
    background: var(--surface-2);
    border-color: var(--brand-ink);
    color: var(--brand-ink);
}

.btn.danger {
    --btn-bg: transparent;
    --btn-fg: var(--danger);
    --btn-bd: color-mix(in srgb, var(--danger) 45%, transparent);
}
.btn.danger:hover {
    background: color-mix(in srgb, var(--danger) 12%, var(--panel));
    border-color: var(--danger);
    color: var(--danger);
}

.row-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }


/* ==========================================================================
   7) الحقول
   ========================================================================== */

label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
    margin: var(--sp-3) 0 6px;
}

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=tel], input[type=search], input[type=date],
input[type=datetime-local], input[type=time], input[type=file],
select, textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    background: var(--input-bg);
    color: var(--text);
    border: var(--border-w) solid var(--input-border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    /* 16px تماماً: أي أقل يُفعّل تكبير iOS التلقائي عند التركيز */
    font-size: 1rem;
    line-height: 1.6;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea { min-height: 120px; line-height: var(--lh-body); resize: vertical; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--brand-ink) 45%, var(--input-border));
}
input:focus, select:focus, textarea:focus {
    outline: var(--ring) solid var(--brand-ink);
    outline-offset: 1px;
    border-color: var(--brand-ink);
}
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: not-allowed;
}
::placeholder { color: var(--text-muted); opacity: .75; }

.checkline {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
    font-size: var(--fs-base);
    color: var(--text);
}
.checkline input { width: auto; min-height: 0; }
.checkline label { margin: 0; font-weight: 400; }

input[type=checkbox], input[type=radio] {
    width: 18px;
    height: 18px;
    min-height: 0;
    accent-color: var(--brand-primary);
    cursor: pointer;
}


/* ==========================================================================
   8) الجداول — دائماً داخل حاوية أفقية قابلة للتمرير
   ========================================================================== */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--sp-2) * -1);
    padding-inline: var(--sp-2);
}

/* شبكة أمان: أي لوح يحوي جدولاً يصبح حاوية تمرير أفقي من نفسه، حتى الشاشات
   التي لا نملكها ولم تُلفّ جداولها يدوياً. التجاوز الأفقي أكثر أعطال الجوال. */
.panel:has(table) { overflow-x: auto; }

/* على الجوال: أرضية عرض للجدول ليتمرّر أفقياً بدل أن تُسحق أعمدته فيلتفّ كل
   اسم على ثلاثة أسطر. التمرير مقروء، والانسحاق ليس كذلك. */
@media (max-width: 640px) {
    .panel:has(table) table,
    .table-scroll table { min-width: 560px; }
}

table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th, td {
    text-align: start;
    padding: 12px 10px;
    border-bottom: var(--border-w) solid var(--panel-border);
    vertical-align: middle;
}
th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--fs-xs);
    white-space: nowrap;
}
tbody tr { transition: background var(--dur-fast) var(--ease); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: 0; }
td .ltr { display: inline-block; }


/* ==========================================================================
   9) الحالات: وسوم، تنبيهات، ملاحظات
   ========================================================================== */

/* .badge اسم بديل لـ.pill: شاشات الفوترة تستعمله ولم يكن معرَّفاً في منطقة
   المركز إطلاقاً، فكانت حالة الفاتورة تظهر نصّاً عارياً بلا وسم. */
.pill, .badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.6;
    border: var(--border-w) solid transparent;
}
.pill.ok, .badge.ok {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 12%, var(--panel));
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}
/* wait = بانتظار إجراء (فاتورة غير مدفوعة) — نفس لغة التحذير */
.pill.warn, .badge.warn,
.pill.wait, .badge.wait, .badge.pending {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 12%, var(--panel));
    border-color: color-mix(in srgb, var(--warn) 30%, transparent);
}
.pill.expired, .badge.expired,
.pill.danger, .badge.danger, .badge.fail {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, var(--panel));
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.pill.off, .badge.off {
    color: var(--text-muted);
    background: var(--surface-2);
    border-color: var(--panel-border);
}

/* لافتة استئناف: حالة قائمة تنتظر المستخدم (محاولة امتحان مفتوحة ووقتها
   يُعدّ). لغة التحذير لا الخطأ: شيءٌ يفوته إن تجاهله، لا شيءٌ أخطأ فيه. */
.resume-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    background: color-mix(in srgb, var(--warn) 12%, var(--panel));
    border: var(--border-w) solid color-mix(in srgb, var(--warn) 34%, transparent);
    border-inline-start-width: 3px;
    border-radius: var(--radius);
}
.resume-banner > svg { width: 22px; height: 22px; flex: none; color: var(--warn); margin-top: 1px; }
.resume-banner strong { display: block; font-size: var(--fs-base); color: var(--text); }
/* نصّ اللافتة بلون النصّ الأساسي لا الثانوي: على الخلفية الممزوجة بالتحذير
   قاس الثانويُّ 4.48:1 على ثيم minimal الفاتح — تحت العتبة بقليل، وهو بالضبط
   الصنف الذي يمرّ بلا قياس. الأساسيّ يقيس 8.59:1 على الخلفية نفسها. */
.resume-banner p { margin-top: 4px; font-size: var(--fs-sm); color: var(--text); line-height: var(--lh-snug); }
.resume-banner__clock strong { display: inline; color: var(--warn); font-weight: 700; }

/* التنبيهات: حدّ جانبي يحمل المعنى + خلفية ممزوجة تتبع الوضع */
.flash-ok, .flash-err, .note, .err {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: var(--border-w) solid transparent;
    border-inline-start-width: 3px;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-3);
}
.flash-ok {
    color: var(--ok);
    background: color-mix(in srgb, var(--ok) 10%, var(--panel));
    border-color: color-mix(in srgb, var(--ok) 28%, transparent);
    border-inline-start-color: var(--ok);
}
.flash-err, .err {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, var(--panel));
    border-color: color-mix(in srgb, var(--danger) 28%, transparent);
    border-inline-start-color: var(--danger);
}
.note {
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 10%, var(--panel));
    border-color: color-mix(in srgb, var(--warn) 28%, transparent);
    border-inline-start-color: var(--warn);
}
.flash-err div, .err div { margin-bottom: 2px; }

.progress-track {
    background: var(--surface-2);
    border-radius: var(--radius-pill);
    height: 9px;
    overflow: hidden;
}
.progress-fill {
    background: var(--brand-primary);
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width var(--dur) var(--ease);
}


/* ==========================================================================
   10) شخصية كل ثيم — الفرق يجب أن يُقرأ فوراً
   ========================================================================== */

/* framer: ارتفاع محسوس وظلّ يتبع الحركة */
[data-theme="framer"] .panel { box-shadow: var(--shadow); }
[data-theme="framer"] .btn {
    --btn-shadow: 0 1px 2px rgba(2, 6, 23, .12);
    --btn-shadow-hover: 0 6px 18px color-mix(in srgb, var(--brand-primary) 38%, transparent);
}
[data-theme="framer"] .topbar { box-shadow: 0 1px 0 rgba(255, 255, 255, .12), var(--shadow-sm); }

/* minimal: بلا ارتفاع ولا ظلّ — الحدود وحدها تفصل، والتفاعل تغيّر لون فقط */
[data-theme="minimal"] .panel { box-shadow: none; }
[data-theme="minimal"] .btn { --btn-shadow: none; --btn-shadow-hover: none; }
[data-theme="minimal"] .btn:hover { transform: none; }
[data-theme="minimal"] .topbar { box-shadow: none; border-bottom: var(--border-w) solid rgba(0, 0, 0, .12); }

/* elegant: ظلّ دافئ خفيف وعناوين نسخية */
[data-theme="elegant"] .panel { box-shadow: var(--shadow-sm); }
[data-theme="elegant"] .btn {
    --btn-shadow: none;
    --btn-shadow-hover: 0 4px 14px color-mix(in srgb, var(--brand-secondary) 30%, transparent);
}
/* Amiri أقصر جسماً من Tajawal. القياس مضبوط في الخط نفسه (size-adjust في
   @font-face) لا بتكبير كل عنوان — وإلا انهار سُلَّم الأحجام. يبقى هنا سطر
   أوسع فقط، لأن النسخ يمتدّ فوق خط الأساس وتحته أكثر من خط هندسي. */
[data-theme="elegant"] h1,
[data-theme="elegant"] h2,
[data-theme="elegant"] h3 { line-height: 1.6; }


/* ==========================================================================
   11) الحركة — كشف عند التمرير، ودخول أوّلي
   الإخفاء مشروط بصنف .js-reveal يضيفه السكربت: لو تعطّل الجافاسكربت يبقى
   المحتوى ظاهراً بدل أن يختفي إلى الأبد. والمساحة محجوزة دائماً (لا CLS):
   نحرّك opacity وtransform فقط، ولا نغيّر أي بُعد تخطيطي.
   ========================================================================== */

.js-reveal .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity var(--dur-slow) var(--ease),
        transform var(--dur-slow) var(--ease);
}
.js-reveal .reveal.in { opacity: 1; transform: none; }

.enter {
    opacity: 0;
    transform: translateY(14px);
    animation: enterIn var(--dur-slow) var(--ease) forwards;
}
.enter.d1 { animation-delay: 70ms; }
.enter.d2 { animation-delay: 150ms; }
.enter.d3 { animation-delay: 240ms; }

@keyframes enterIn { to { opacity: 1; transform: none; } }


/* ==========================================================================
   12) احترام تقليل الحركة — تعطيل كامل لا إبطاء
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .enter { opacity: 1 !important; transform: none !important; }
    .btn:hover, .btn:active { transform: none !important; }
}


/* ==========================================================================
   13) القياسات الصغيرة — 320 / 375
   ========================================================================== */

@media (max-width: 480px) {
    :root { --fs-2xl: 1.5rem; --fs-xl: 1.2rem; }
    .wrap { margin-top: var(--sp-3); padding: 0 var(--sp-3) var(--sp-6); }
    .topbar { padding: var(--sp-3); }
    .topbar.stacked { padding: var(--sp-3) var(--sp-3) 0; }
    .panel { padding: var(--sp-4); border-radius: var(--radius); }
    /* لا نفرض عرضاً كاملاً على كل زر — شاشات لا نملكها (الامتحانات) تعتمد
       أزراراً متجاورة. من يريد زراً ممتدّاً يطلبه صراحةً بـ.btn.block. */
}


/* ==========================================================================
   14) محتوى الدرس المنسّق (نص غنيّ يُحرِّره المدرّب)
   ========================================================================== */

.lesson-content { color: var(--text); line-height: var(--lh-body); }
.lesson-content h2 { font-size: var(--fs-xl); margin: var(--sp-4) 0 var(--sp-2); }
.lesson-content h3 { font-size: var(--fs-lg); margin: var(--sp-3) 0 var(--sp-2); }
.lesson-content h4 { font-size: var(--fs-base); margin: var(--sp-3) 0 6px; }
.lesson-content p { margin: 0 0 var(--sp-3); }
.lesson-content ul, .lesson-content ol { margin: 0 24px var(--sp-3); }
.lesson-content li { margin-bottom: var(--sp-1); }
.lesson-content blockquote {
    margin: var(--sp-3) 0;
    padding: var(--sp-2) var(--sp-4);
    border-inline-start: 3px solid var(--brand-ink);
    background: var(--surface-2);
    color: var(--text-muted);
    border-radius: var(--radius-xs);
}
.lesson-content img { border-radius: var(--radius-sm); margin: var(--sp-2) 0; }
.lesson-content a { color: var(--brand-ink); }
.lesson-content pre {
    background: var(--surface-2);
    color: var(--text);
    border: var(--border-w) solid var(--panel-border);
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}
.lesson-content table { margin: var(--sp-2) 0; }
.lesson-content th, .lesson-content td {
    border: var(--border-w) solid var(--panel-border);
    padding: 6px 10px;
}


/* ==========================================================================
   15) الشاشات القائمة بذاتها
   الدخول، التسجيل، استعادة كلمة المرور، قبول الدعوة، ورسائل الإيقاف والتجميد
   وترقية الباقة. لا ترث تخطيطاً — بعضها يصله المدير والمدرّب معاً — فكانت كل
   واحدة تبني ألوانها وخطّها بيدها بقيم فاتحة ثابتة، فتبقى بيضاء ناصعة ولو
   اختار المركز الوضع الداكن، وبخط لا يطابق بقيّة المنصّة. الهيكل هنا مرّة
   واحدة، والصفحة لا تحمل إلا محتواها.
   ========================================================================== */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    position: relative;
    overflow-x: hidden;
}
/* توهّجان من لون المركز خلف سطح الثيم: حضور بلا صورة تُحمَّل ولا تكلفة رسم.
   في الفاتح نستعمل اللون الأساسي وحده وبكثافة أقل — اللون الثانوي عند أغلب
   المراكز كحليّ غامق، ومزجه في الشفاف فوق سطح فاتح يعطي ضبابة رمادية تبدو
   وسخاً لا تصميماً (رُصدت بالعين على شاشة الترقية في الوضع الفاتح). */
.auth-shell::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60vw 50vh at 85% -10%, color-mix(in srgb, var(--brand-primary) 16%, transparent), transparent 70%),
        radial-gradient(50vw 46vh at 5% 108%, color-mix(in srgb, var(--brand-primary) 9%, transparent), transparent 70%);
}
/* في الداكن يتحمّل السطح كثافة أعلى، ويضيف اللون الثانوي عمقاً */
[data-mode="dark"] .auth-shell::before {
    background:
        radial-gradient(60vw 50vh at 85% -10%, color-mix(in srgb, var(--brand-primary) 26%, transparent), transparent 70%),
        radial-gradient(50vw 46vh at 5% 108%, color-mix(in srgb, var(--brand-secondary) 22%, transparent), transparent 70%);
}
@media (prefers-color-scheme: dark) {
    [data-mode="auto"] .auth-shell::before {
        background:
            radial-gradient(60vw 50vh at 85% -10%, color-mix(in srgb, var(--brand-primary) 26%, transparent), transparent 70%),
            radial-gradient(50vw 46vh at 5% 108%, color-mix(in srgb, var(--brand-secondary) 22%, transparent), transparent 70%);
    }
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--panel);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.auth-card.wide { max-width: 460px; }

.auth-card .top {
    background: var(--topbar-bg);
    color: var(--topbar-text);
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
}
.auth-card .top h1 { font-size: var(--fs-xl); color: inherit; margin-bottom: var(--sp-1); }
.auth-card .top p,
.auth-card .top span {
    display: block;
    opacity: .88;
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.auth-card form { padding: var(--sp-5); }
.auth-card form > .btn { width: 100%; margin-top: var(--sp-4); }
.auth-card .lead {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    margin-bottom: var(--sp-2);
}
/* سطر تعريفي خارج النموذج (شاشة الدخول): يحتاج حشوه الأفقي بنفسه. */
.auth-card > .lead { padding: var(--sp-4) var(--sp-5) 0; margin-bottom: 0; }

.auth-card .foot,
.auth-card .links {
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: 0 var(--sp-5) var(--sp-5);
}
/* مدخلان تحت النموذج (نسيت كلمتي · فتح حساب) — سطران لا سطر مزدحم:
   «ليس لديّ حساب — فتح حساب جديد» وحدها تكسر السطر على عرض 320px. */
.auth-card .links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
/* فتح الحساب دعوةٌ لا حاشية: إطارٌ يميّزها عن رابط «نسيت كلمة المرور؟». */
.auth-card .links .signup {
    margin-top: var(--sp-2);
    padding: 0 var(--sp-4);
    min-height: 44px;
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-sm);
}
.auth-card .links .signup:hover {
    text-decoration: none;
    background: var(--surface-2);
    border-color: var(--brand-ink);
}
.auth-card form + .links { padding-top: 0; }
.auth-card .foot a,
.auth-card .links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--sp-2);
    color: var(--brand-ink);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-xs);
}
.auth-card .foot a:hover,
.auth-card .links a:hover { text-decoration: underline; }
.auth-card .dev-hint {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    padding: 0 var(--sp-5) var(--sp-5);
    line-height: var(--lh-snug);
}

/* بطاقة رسالة: حالة توقُّف أو منع، بلا نموذج — نصّ ودعوة واحدة */
.notice-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--panel);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--sp-6) var(--sp-5);
    text-align: center;
}
.notice-card h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-3); }
.notice-card p { color: var(--text-muted); line-height: var(--lh-body); margin: var(--sp-2) 0; }
.notice-card .mark {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--sp-4);
    border-radius: var(--radius);
    background: var(--surface-2);
    border: var(--border-w) solid var(--panel-border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
}
.notice-card .meta {
    margin-top: var(--sp-4);
    background: var(--surface-2);
    border: var(--border-w) solid var(--panel-border);
    border-radius: var(--radius-sm);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: var(--lh-snug);
}
.notice-card .actions {
    margin-top: var(--sp-5);
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
    flex-wrap: wrap;
}
.notice-card.danger h1 { color: var(--danger); }