/* ============================================================
   Brain Skill — نظام التصميم
   مستخرَج من مواد الهوية المطبوعة للشركة:
   تدرّج أزرق قطري + باترن خطوط ناعمة مائلة إلى اليسار
   + مكعبات زجاجية بزوايا منحنية + شرائط سوداء صافية.
   ============================================================ */

/* ---------- 1. الرموز (Design Tokens) ---------- */
:root {
    /* الأزرق: من الكحلي العميق إلى السماوي المضيء */
    --bs-navy-950: #04102E;
    --bs-navy-900: #08205A;
    --bs-blue-800: #0B3A8F;
    --bs-blue-700: #0E4FB0;
    --bs-blue-600: #1266C8;
    --bs-blue-500: #1685DA;
    --bs-azure-400: #17A2E8;
    --bs-azure-300: #4FC3F7;
    --bs-azure-200: #9BDCFB;

    /* الأسود الصافي — شرائط الهوية */
    --bs-black: #000000;
    --bs-black-soft: #0A0A0C;

    /* الرماديات والأسطح */
    --bs-white: #FFFFFF;
    --bs-gray-50: #F7F9FC;
    --bs-gray-100: #F1F4F9;
    --bs-gray-200: #E3E9F2;
    --bs-gray-300: #CBD5E4;
    --bs-gray-500: #7A899F;
    --bs-gray-700: #3E4A5C;
    --bs-gray-900: #16202F;

    /* ألوان الحالة */
    --bs-success: #16A34A;
    --bs-warning: #D97706;
    --bs-danger: #DC2626;
    --bs-info: var(--bs-azure-400);

    /* القيم القابلة للتجاوز من لوحة التحكم */
    --bs-primary: var(--bs-blue-600);
    --bs-secondary: var(--bs-black);
    --bs-accent: var(--bs-azure-400);
    --bs-surface: var(--bs-gray-100);

    /* تدرّج الهوية الأساسي */
    --bs-brand-gradient: linear-gradient(135deg,
            var(--bs-navy-950) 0%,
            var(--bs-navy-900) 18%,
            var(--bs-blue-700) 45%,
            var(--bs-blue-500) 68%,
            var(--bs-azure-400) 100%);

    /* تدرّج الشعار: غامق ← فاتح (نفس تدرّج كلمة BRAIN) */
    --bs-logo-gradient: linear-gradient(135deg, var(--bs-blue-800) 0%, var(--bs-blue-600) 45%, var(--bs-azure-300) 100%);

    /* باترن الخطوط: رفيعة، مائلة إلى اليسار — بالكثافة نفسها المعتمَدة
       في مواد الشركة المطبوعة (المظاريف واللافتات وبطاقات العمل).
       اقلب الزاوية إلى ‎-45deg‎ لعكس اتجاه الميلان. */
    --bs-stripe-angle: 45deg;
    --bs-stripe-color: rgba(255, 255, 255, 0.08);
    --bs-stripe-gap: 8px;
    --bs-stripes: repeating-linear-gradient(var(--bs-stripe-angle),
            var(--bs-stripe-color) 0 1px,
            transparent 1px var(--bs-stripe-gap));

    /* الأنصاف الأقطار — تتبع انحناء مكعبات الشعار */
    --bs-radius-sm: 8px;
    --bs-radius: 14px;
    --bs-radius-lg: 22px;
    --bs-radius-xl: 32px;

    /* الظلال */
    --bs-shadow-sm: 0 1px 2px rgba(4, 16, 46, .06), 0 2px 8px rgba(4, 16, 46, .05);
    --bs-shadow: 0 4px 12px rgba(4, 16, 46, .08), 0 12px 32px rgba(4, 16, 46, .07);
    --bs-shadow-lg: 0 12px 28px rgba(4, 16, 46, .12), 0 32px 64px rgba(4, 16, 46, .12);
    --bs-shadow-blue: 0 8px 24px rgba(18, 102, 200, .32);

    --bs-header-h: 74px;
    --bs-transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. الأساسيات ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--bs-gray-900);
    background: var(--bs-surface);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

/* الواجهة العامة فقط (صنف .bs-public على body في _Layout.cshtml — لا لوحة
   التحكم، حيث يحتاج الموظفون نسخ البيانات باستمرار): تحديد نصّ عشوائي
   بالضغط المطوّل على عناصر الواجهة (أزرار، شارات، عناوين) يكسر شعور
   "التطبيق المثبَّت" المطلوب. نُعطّل التحديد افتراضياً هنا، ثم نُعيد
   تفعيله صراحةً على المحتوى المقروء الذي يستحقّ نسخه فعلاً — تماماً كسلوك
   فيسبوك: لا تحديد عشوائي لعناصر الواجهة، لكن نصّ المنشور نفسه قابل
   للتحديد والنسخ دائماً. */
.bs-public {
    -webkit-user-select: none;
    user-select: none;
}
.bs-public .app-card__desc,
.bs-public .st-show__desc,
.bs-public .st-banner__sub,
.bs-public .st-statement__body,
.bs-public .st-cap__note {
    -webkit-user-select: text;
    user-select: text;
}

/* الأرقام تبقى لاتينية داخل النص العربي لسهولة القراءة التقنية */
.num,
time,
code,
.mono {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    direction: ltr;
    unicode-bidi: embed;
}

h1, h2, h3, h4, h5 {
    margin: 0 0 .6rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; }

a {
    color: var(--bs-blue-600);
    text-decoration: none;
    transition: color var(--bs-transition);
}

a:hover { color: var(--bs-azure-400); }

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

:focus-visible {
    outline: 3px solid var(--bs-azure-400);
    outline-offset: 2px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 3. أسطح الهوية ---------- */

/* السطح الأزرق: تدرّج + باترن الخطوط المائلة */
.bs-surface-brand {
    position: relative;
    background: var(--bs-brand-gradient);
    color: var(--bs-white);
    isolation: isolate;
    overflow: hidden;
}

.bs-surface-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bs-stripes);
    z-index: -1;
    pointer-events: none;
}

/* الشريط الأسود الصافي الذي يقطع التصميم */
.bs-band-black {
    position: relative;
    background: var(--bs-black);
    color: var(--bs-white);
    overflow: hidden;
}

/* مكعبات باهتة داخل الشريط الأسود — كما في مواد الهوية */
.bs-band-black::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 3%;
    width: 320px;
    background-image:
        linear-gradient(0deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)),
        linear-gradient(0deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .028)),
        linear-gradient(0deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .02));
    background-repeat: no-repeat;
    background-size: 96px 96px, 62px 62px, 44px 44px;
    background-position: 120px 22%, 40px 58%, 210px 70%;
    border-radius: var(--bs-radius-lg);
    pointer-events: none;
}

/* ---------- 4. المكعبات الزجاجية ---------- */
.bs-cubes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.bs-cube {
    position: absolute;
    border-radius: var(--bs-radius-lg);
    background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* لمعة زجاجية علوية كما في مكعبات الشعار */
.bs-cube::after {
    content: '';
    position: absolute;
    inset: 6% 6% 52% 6%;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
}

.bs-cube--solid {
    background: linear-gradient(140deg, var(--bs-blue-800), var(--bs-blue-600));
    border-color: rgba(255, 255, 255, .1);
}

.bs-cube--xl { width: 190px; height: 190px; border-radius: var(--bs-radius-xl); }
.bs-cube--lg { width: 128px; height: 128px; }
.bs-cube--md { width: 84px;  height: 84px;  border-radius: var(--bs-radius); }
.bs-cube--sm { width: 52px;  height: 52px;  border-radius: var(--bs-radius); }

/* ---------- 5. الشعار ----------
   الكلمة المرسومة الرسمية: BRAIN فوق SKILL، وبجانب SKILL كلمة COMPANY
   صغيرة على خطّ الأساس. كل سطر يأخذ تدرّجاً من الأزرق الغامق إلى الفاتح. */
.bs-logo {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    direction: ltr;
}

.bs-logo img,
.bs-logo svg {
    height: 42px;
    width: auto;
    display: block;
    flex: 0 0 auto;
}

.bs-logo__word {
    display: flex;
    flex-direction: column;
    line-height: .92;
    font-weight: 800;
    letter-spacing: .005em;
}

.bs-logo__brain,
.bs-logo__skill {
    font-size: 1.3rem;
    background: linear-gradient(90deg, var(--bs-blue-800) 0%, var(--bs-blue-500) 55%, var(--bs-azure-300) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.bs-logo__skill {
    display: flex;
    align-items: baseline;
    gap: .06em;
}

/* COMPANY تلتصق بنهاية SKILL بحجم أصغر كثيراً — كما في الشعار المطبوع */
.bs-logo__co {
    font-size: .4em;
    letter-spacing: .02em;
}

/* على الأسطح الداكنة يُرفع طرفا التدرّج درجة حتى تبقى الكلمة مقروءة */
.bs-band-black .bs-logo__brain,
.bs-band-black .bs-logo__skill,
.bs-surface-brand .bs-logo__brain,
.bs-surface-brand .bs-logo__skill,
.site-header .bs-logo__brain,
.site-header .bs-logo__skill,
.admin-sidebar .bs-logo__brain,
.admin-sidebar .bs-logo__skill,
.admin-topbar .bs-logo__brain,
.admin-topbar .bs-logo__skill {
    background: linear-gradient(90deg, var(--bs-blue-500) 0%, var(--bs-azure-300) 60%, var(--bs-azure-200) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* سطر وصفي اختياري تحت الكلمة (يُستخدم في لوحة التحكم) */
.bs-logo__sub {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--bs-gray-500);
    margin-top: .18rem;
}

.bs-band-black .bs-logo__sub,
.bs-surface-brand .bs-logo__sub,
.site-header .bs-logo__sub,
.admin-sidebar .bs-logo__sub,
.admin-topbar .bs-logo__sub {
    color: rgba(255, 255, 255, .6);
}

/* ---------- 6. الأزرار ----------
   بأمر صريح: الأزرار تأخذ تدرّج الشعار نفسه، من الأزرق الغامق إلى الفاتح. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .62rem 1.35rem;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--bs-radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--bs-transition), box-shadow var(--bs-transition), filter var(--bs-transition);
}

.btn:disabled,
.btn.disabled {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn:active { transform: translateY(1px); }

/* الزر الأساسي: تدرّج غامق ← فاتح */
.btn-primary {
    color: var(--bs-white);
    background: var(--bs-logo-gradient);
    box-shadow: var(--bs-shadow-blue);
    position: relative;
    overflow: hidden;
}

/* لمعة زجاجية علوية تحاكي مكعبات الشعار */
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0 0 55% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.btn-primary:hover {
    color: var(--bs-white);
    filter: brightness(1.08);
    box-shadow: 0 10px 30px rgba(18, 102, 200, .42);
}

/* الزر المعكوس: فاتح ← غامق */
.btn-accent {
    color: var(--bs-white);
    background: linear-gradient(135deg, var(--bs-azure-300), var(--bs-blue-600) 60%, var(--bs-blue-800));
    box-shadow: var(--bs-shadow-blue);
}

.btn-accent:hover { color: var(--bs-white); filter: brightness(1.06); }

/* زر محدَّد بإطار أزرق */
.btn-outline {
    color: var(--bs-blue-700);
    background: transparent;
    border-color: var(--bs-blue-600);
}

.btn-outline:hover {
    color: var(--bs-white);
    background: var(--bs-logo-gradient);
    border-color: transparent;
}

/* زر أسود — لمطابقة شرائط الهوية */
.btn-dark {
    color: var(--bs-white);
    background: var(--bs-black);
    border-color: var(--bs-black);
}

.btn-dark:hover { color: var(--bs-azure-300); background: var(--bs-black-soft); }

/* زر شفاف فوق الأسطح الزرقاء */
.btn-glass {
    color: var(--bs-white);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.btn-glass:hover { color: var(--bs-white); background: rgba(255, 255, 255, .2); }

.btn-ghost {
    color: var(--bs-gray-700);
    background: transparent;
    border-color: var(--bs-gray-300);
}

.btn-ghost:hover { color: var(--bs-blue-700); border-color: var(--bs-blue-600); background: var(--bs-gray-50); }

.btn-danger {
    color: var(--bs-white);
    background: linear-gradient(135deg, #9F1239, var(--bs-danger));
}

.btn-danger:hover { color: var(--bs-white); filter: brightness(1.08); }

.btn-success {
    color: var(--bs-white);
    background: linear-gradient(135deg, #065F46, var(--bs-success));
}

.btn-success:hover { color: var(--bs-white); filter: brightness(1.08); }

.btn-sm { padding: .34rem .82rem; font-size: .84rem; border-radius: var(--bs-radius-sm); }
.btn-lg { padding: .85rem 2rem; font-size: 1.06rem; border-radius: var(--bs-radius-lg); }
.btn-block { width: 100%; }

/* ---------- 7. البطاقات ---------- */
.card {
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-200);
    border-radius: var(--bs-radius-lg);
    box-shadow: var(--bs-shadow-sm);
    overflow: hidden;
    transition: transform var(--bs-transition), box-shadow var(--bs-transition);
}

.card__body { padding: 1.4rem; }
.card__header {
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--bs-gray-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.card__footer {
    padding: .9rem 1.4rem;
    border-top: 1px solid var(--bs-gray-200);
    background: var(--bs-gray-50);
}

/* ---------- بطاقة التطبيق في الواجهة العامة ----------
   البطاقة نفسها قطعة تصميم لا صندوق بيانات: لوحة هوية بتدرّج الشركة وباترن
   خطوطها المطبوعة ومكعّبات علامتها الخمسة، تفصلها عن المحتوى شعرة بتدرّج
   الكلمة المرسومة، ويُقرأ سطر المواصفات كبطاقة تعريف في دليل هوية. */
.app-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-200);
    border-radius: var(--bs-radius-lg);
    box-shadow: var(--bs-shadow-sm);
    overflow: hidden;
    transition: transform var(--bs-transition), box-shadow var(--bs-transition), border-color var(--bs-transition);
}

.app-card:hover {
    transform: translateY(-6px);
    border-color: rgba(18, 102, 200, .35);
    box-shadow: var(--bs-shadow-lg);
}

/* ---- اللوحة العلوية ---- */
.app-card__board {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--bs-brand-gradient);
    overflow: hidden;
    isolation: isolate;
}

/* باترن الخطوط المائلة — كثافة مواد الشركة المطبوعة نفسها. */
.app-card__board::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bs-stripes);
    z-index: 3;
    pointer-events: none;
}

.app-card__board--photo::after {
    /* فوق الصورة يخفّ الباترن ويُضاف تعتيم سفلي حتى تبقى الشارة مقروءة. */
    background:
        linear-gradient(0deg, rgba(4, 16, 46, .55), rgba(4, 16, 46, 0) 55%),
        var(--bs-stripes);
    opacity: .9;
}

.app-card__board img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 600ms cubic-bezier(.2, .7, .3, 1);
    /* غلاف مفقود يرسم نصّه البديل فوق اللوحة ويشوّهها. إخفاؤه باللون وحده
       يُبقي السمة ‎alt‎ سليمة لقارئ الشاشة — بخلاف حذفها أو إخفاء العنصر. */
    color: transparent;
}

.app-card:hover .app-card__board img { transform: scale(1.05); }

/* ---- مكعّبات العلامة: خمسة بترتيب متتابع قطرياً ---- */
.app-card__cubes {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.app-card__cube {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 26%;
    aspect-ratio: 1;
    border-radius: 22%;
    background: linear-gradient(140deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05) 55%, rgba(255, 255, 255, 0));
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
    transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}

/* التتابع القطري: كل مكعّب يزيح عن سابقه بالمقدار نفسه. */
.app-card__cube:nth-child(1) { transform: translate(-190%, -170%); }
.app-card__cube:nth-child(2) { transform: translate(-120%, -100%); }
.app-card__cube:nth-child(3) { transform: translate(-50%, -30%); }
.app-card__cube:nth-child(4) { transform: translate(20%, 40%); }
.app-card__cube:nth-child(5) { transform: translate(90%, 110%); }

/* عند المرور تنساب المكعّبات قليلاً على المحور القطري نفسه. */
.app-card:hover .app-card__cube:nth-child(1) { transform: translate(-205%, -185%); }
.app-card:hover .app-card__cube:nth-child(2) { transform: translate(-131%, -111%); }
.app-card:hover .app-card__cube:nth-child(3) { transform: translate(-57%, -37%); }
.app-card:hover .app-card__cube:nth-child(4) { transform: translate(17%, 37%); }
.app-card:hover .app-card__cube:nth-child(5) { transform: translate(91%, 111%); }

/* ---- العلامة الحرفية ---- */
.app-card__mark {
    position: absolute;
    inset-block-end: -.18em;
    inset-inline-start: .34em;
    z-index: 2;
    font-size: clamp(4.4rem, 11vw, 6.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .96);
    text-shadow: 0 6px 30px rgba(4, 16, 46, .35);
}

/* ---- شارة التصنيف فوق اللوحة ---- */
.app-card__cat {
    position: absolute;
    z-index: 4;
    inset-block-start: .8rem;
    inset-inline-start: .8rem;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--bs-navy-950);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(4, 16, 46, .18);
}

/* ---- الشعرة الفاصلة بتدرّج الكلمة المرسومة ---- */
.app-card__rule {
    display: block;
    height: 3px;
    background: var(--bs-logo-gradient);
}

/* ---- المحتوى ---- */
.app-card__body {
    padding: 1.15rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-card__spec {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
    font-size: .74rem;
    color: var(--bs-gray-500);
    min-width: 0;
}

.app-card__spec-key {
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 800;
    color: var(--bs-blue-600);
    flex: none;
}

.app-card__spec-val { font-weight: 700; color: var(--bs-gray-700); flex: none; }

/* آخر قيمة (المعرّف) قد تطول، فتُقصّ بثلاث نقاط بدل أن تكسر السطر. */
.app-card__spec-val:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.app-card__spec-sep {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--bs-gray-300);
}

.app-card__title { font-size: 1.16rem; margin-bottom: .4rem; overflow-wrap: anywhere; }

.app-card__desc {
    color: var(--bs-gray-500);
    font-size: .92rem;
    margin-bottom: 1.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.app-card__actions { margin-top: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- 7-ب. السلايدر ----------
   مبني على scroll-snap لا على مكتبة خارجية: يعمل بلا جافاسكربت (تمرير باللمس
   أو بعجلة الفأرة)، وجافاسكربت تضيف الأسهم والنقاط والتشغيل التلقائي فقط. */
.bs-slider { position: relative; }

.bs-slider__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    /* مساحة للظلّ المرتفع عند المرور حتى لا يُقصّ. */
    padding-block: .5rem 1.4rem;
    margin-block-end: -.6rem;
    scrollbar-width: none;
}

.bs-slider__viewport::-webkit-scrollbar { display: none; }

.bs-slider__viewport:focus-visible {
    outline: 3px solid var(--bs-azure-400);
    outline-offset: 4px;
    border-radius: var(--bs-radius);
}

.bs-slider__track {
    display: flex;
    gap: 1.4rem;
    align-items: stretch;
}

.bs-slider__slide {
    flex: 0 0 calc((100% - 2 * 1.4rem) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

@media (max-width: 992px) {
    .bs-slider__slide { flex-basis: calc((100% - 1.4rem) / 2); }
}

@media (max-width: 640px) {
    .bs-slider__track { gap: 1rem; }
    .bs-slider__slide { flex-basis: 88%; }
}

/* ---- الأسهم ---- */
.bs-slider__nav {
    position: absolute;
    inset-block-start: calc(50% - 2rem);
    z-index: 5;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--bs-gray-200);
    border-radius: 50%;
    background: var(--bs-white);
    color: var(--bs-blue-700);
    box-shadow: var(--bs-shadow);
    cursor: pointer;
    transition: background var(--bs-transition), color var(--bs-transition), opacity var(--bs-transition);
}

.bs-slider__nav:hover:not(:disabled) { background: var(--bs-blue-600); color: var(--bs-white); }

.bs-slider__nav:disabled { opacity: 0; pointer-events: none; }

.bs-slider__nav--prev { inset-inline-start: -18px; }
.bs-slider__nav--next { inset-inline-end: -18px; }

/* على الشاشات الضيّقة لا مكان للأسهم خارج الإطار: تُخفى ويبقى السحب باللمس. */
@media (max-width: 1180px) {
    .bs-slider__nav { display: none; }
}

/* ---- النقاط ---- */
.bs-slider__dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1.1rem;
}

.bs-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--bs-gray-300);
    cursor: pointer;
    transition: width var(--bs-transition), background var(--bs-transition);
}

.bs-slider__dot.is-active {
    width: 26px;
    background: var(--bs-blue-600);
}

.bs-slider__dots:empty { display: none; }

/* ---------- 8. الشارات ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .65rem;
    font-size: .76rem;
    font-weight: 700;
    border-radius: 999px;
    line-height: 1.7;
    white-space: nowrap;
}

.badge--blue    { color: var(--bs-blue-800); background: #E4EFFC; }
.badge--success { color: #14532D;            background: #DCFCE7; }
.badge--warning { color: #7C2D12;            background: #FEF3C7; }
.badge--danger  { color: #7F1D1D;            background: #FEE2E2; }
.badge--gray    { color: var(--bs-gray-700); background: var(--bs-gray-200); }
.badge--dark    { color: var(--bs-white);    background: var(--bs-black); }

.badge__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* ---------- 9. النماذج ---------- */
.form-group { margin-bottom: 1.15rem; }

.form-label {
    display: block;
    margin-bottom: .38rem;
    font-weight: 700;
    font-size: .92rem;
    color: var(--bs-gray-700);
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: .6rem .9rem;
    font-family: inherit;
    font-size: .95rem;
    color: var(--bs-gray-900);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    border-radius: var(--bs-radius-sm);
    transition: border-color var(--bs-transition), box-shadow var(--bs-transition);
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--bs-blue-600);
    box-shadow: 0 0 0 3px rgba(18, 102, 200, .16);
}

.form-control[type="color"] { padding: .25rem; height: 44px; cursor: pointer; }

textarea.form-control { min-height: 120px; resize: vertical; }

.form-hint { display: block; margin-top: .3rem; font-size: .83rem; color: var(--bs-gray-500); }

.form-check { display: flex; align-items: center; gap: .55rem; }
.form-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bs-blue-600); cursor: pointer; }

.field-validation-error,
.validation-summary-errors {
    color: var(--bs-danger);
    font-size: .86rem;
    font-weight: 600;
}

.validation-summary-errors ul { margin: 0; padding-inline-start: 1.2rem; }
.input-validation-error { border-color: var(--bs-danger) !important; }

/* رمز الدعوة: خانة أحادية المسافة بمحاذاة لاتينية */
.token-input {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 1.15rem;
    letter-spacing: .18em;
    text-align: center;
    direction: ltr;
    text-transform: uppercase;
}

/* ---------- 10. التنبيهات ---------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1.1rem;
    border-radius: var(--bs-radius);
    border: 1px solid transparent;
    border-inline-start-width: 4px;
    margin-bottom: 1.15rem;
    font-size: .93rem;
}

.alert--info    { color: #0C4A6E; background: #E0F2FE; border-color: #7DD3FC; }
.alert--success { color: #14532D; background: #DCFCE7; border-color: #86EFAC; }
.alert--warning { color: #78350F; background: #FEF3C7; border-color: #FCD34D; }
.alert--danger  { color: #7F1D1D; background: #FEE2E2; border-color: #FCA5A5; }

/* .alert{display:flex} كان يُبطل خاصية hidden على أي تنبيه يُظهره/يُخفيه
   جافاسكربت ديناميكياً (مثل تنبيه هامش الربح المنخفض) — لأن [hidden] من نمط
   المتصفّح الافتراضي (User-Agent) يخسر دائماً أمام أي قاعدة من نمط الموقع
   نفسه (Author) بصرف النظر عن الخصوصية. هذه القاعدة الصريحة تُعيد له تأثيره. */
.alert[hidden] { display: none; }

/* ---------- 11. الجداول ---------- */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--bs-gray-200);
    border-radius: var(--bs-radius-lg);
    background: var(--bs-white);
}

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }

.table th {
    text-align: start;
    padding: .8rem 1rem;
    font-weight: 800;
    color: var(--bs-gray-700);
    background: var(--bs-gray-50);
    border-bottom: 2px solid var(--bs-gray-200);
    white-space: nowrap;
}

.table td { padding: .8rem 1rem; border-bottom: 1px solid var(--bs-gray-200); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--bs-gray-50); }

/* ---------- 12. التخطيط والشبكات ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid--apps  { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.stack   { display: flex; flex-direction: column; gap: 1rem; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-muted { color: var(--bs-gray-500); }
.text-center { text-align: center; }

/* ---------- 13. الرأس ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bs-black);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    min-height: var(--bs-header-h);
}

.site-nav { display: flex; align-items: center; gap: .35rem; }

.site-nav a {
    padding: .5rem .95rem;
    border-radius: var(--bs-radius-sm);
    color: rgba(255, 255, 255, .8);
    font-weight: 600;
    font-size: .95rem;
    transition: color var(--bs-transition), background var(--bs-transition);
}

.site-nav a:hover { color: var(--bs-white); background: rgba(255, 255, 255, .08); }

.site-nav a.active {
    color: var(--bs-white);
    background: linear-gradient(135deg, rgba(11, 58, 143, .9), rgba(79, 195, 247, .35));
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--bs-radius-sm);
    color: var(--bs-white);
    padding: .4rem .7rem;
    cursor: pointer;
    font-size: 1.2rem;
}

/* الأيقونة تنقلب إلى ✕ عند فتح القائمة، فيعرف المستخدم كيف يغلقها. */
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* ---------- 14. البطل (Hero) ---------- */
.hero {
    position: relative;
    padding-block: clamp(3.5rem, 9vw, 7rem);
    color: var(--bs-white);
}

.hero__inner { position: relative; z-index: 1; max-width: 720px; }
.hero h1 { color: var(--bs-white); text-shadow: 0 2px 18px rgba(4, 16, 46, .35); }
.hero p  { color: rgba(255, 255, 255, .88); font-size: 1.08rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* حين توجد صورة، تنزاح كتلة النصّ إلى جهة القراءة وتضيق، فتنكشف الصورة أكثر.
   حاوية البطل وحدها أوسع من الافتراضية (‎1240px‎) حتى يقترب النصّ من حافة
   الشاشة بدل أن يبقى مرتكزاً قرب المنتصف. باقي أقسام الصفحة لا تتأثّر. */
.hero--has-media > .container { max-width: 1560px; }

/* المُحدِّد بالشقيق لا بصنف القسم، فيشمل كل شريط فيه صورة — لا الرئيسية وحدها.
   بدونه يبقى ‎.container‎ متوسّطاً بمحاذاة ‎margin-inline: auto‎ فينزلق عمود
   النصّ يساراً فوق الصورة، وهو ما كان يحدث في صفحة «عن الشركة». */
.hero__media ~ .hero__inner {
    max-width: 560px;
    /* كتلة أضيق من حاويتها تلتصق ببداية السطر — اليمين في العربية. */
    margin-inline-start: 0;
    margin-inline-end: auto;
}

/* مساحة النصّ ضاقت، فتتّسع الصورة ويتأخّر بدء التلاشي. */
.hero--has-media .hero__media { width: min(76%, 1240px); }

/* ---- صورة الواجهة الرئيسية ----
   تُوضع في الجهة المقابلة للنصّ (يساراً في العربية) وتتلاشى تدريجياً نحوه
   بقناع تدرّج، فلا تزاحم العنوان ولا الأزرار ولا تحتاج تعتيماً يطفئ ألوانها. */
.hero__media {
    position: absolute;
    inset-block: 0;
    /* inline-end في RTL هو الحافة اليسرى — أي الجهة البعيدة عن النصّ. */
    inset-inline-end: 0;
    width: min(68%, 1000px);
    z-index: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* أسود = ظاهر، شفّاف = مخفيّ. التدرّج يبدأ ظاهراً عند الحافة البعيدة
       وينتهي شفّافاً عند حافة النصّ. */
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 38%, transparent 88%);
    mask-image: linear-gradient(to right, #000 0%, #000 38%, transparent 88%);
}

/* في الواجهات اللاتينية ينعكس كل شيء: النصّ يساراً والصورة يميناً. */
[dir="ltr"] .hero__media {
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 38%, transparent 88%);
    mask-image: linear-gradient(to left, #000 0%, #000 38%, transparent 88%);
}

/* المكعّبات الزخرفية تُطفأ حين توجد صورة: الصورة تحمل مكعّباتها،
   وتراكبهما يجعل الخلفية مزدحمة. المُحدِّد بالشقيق التالي يعمل في كل شريط
   عُلوي بلا حاجة إلى صنف على القسم — لذلك تُوضع الصورة قبل المكعّبات. */
.hero__media ~ .bs-cubes { display: none; }

/* على الشاشات الضيّقة يأخذ النصّ العرض كاملاً، فلا مكان لصورة جانبية:
   تصبح خلفية كاملة العرض خافتة مع تلاشٍ رأسي يحفظ وضوح النصّ. */
@media (max-width: 820px) {
    .hero__media {
        width: 100%;
        opacity: .38;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
    }

    [dir="ltr"] .hero__media {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
    }
}

/* ---------- 15. التذييل ---------- */
.site-footer { margin-top: auto; }

.footer-band {
    background: var(--bs-black);
    color: rgba(255, 255, 255, .75);
    padding-block: 2.2rem;
}

.footer-band a { color: rgba(255, 255, 255, .8); }
.footer-band a:hover { color: var(--bs-azure-300); }

.footer-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: start;
}

.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-contact li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }

.footer-contact .icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    color: var(--bs-azure-300);
}

.footer-strip {
    background: var(--bs-brand-gradient);
    position: relative;
    padding-block: .9rem;
    color: rgba(255, 255, 255, .9);
    font-size: .86rem;
    text-align: center;
    overflow: hidden;
}

.footer-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bs-stripes);
}

.footer-strip > * { position: relative; }

/* ---------- 16. لوحة التحكم ---------- */
.admin-shell {
    display: grid;
    grid-template-columns: 264px 1fr;
    gap: 0;
    flex: 1;
    align-items: stretch;
}

.admin-sidebar {
    background: var(--bs-black);
    color: rgba(255, 255, 255, .8);
    padding: 1.4rem 1rem;
    position: relative;
    overflow: hidden;
}

.admin-sidebar__brand { padding: 0 .5rem 1.2rem; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 1rem; }

.admin-nav { display: flex; flex-direction: column; gap: .18rem; }

.admin-nav__group {
    padding: 1rem .8rem .35rem;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .4);
    text-transform: uppercase;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .8rem;
    border-radius: var(--bs-radius-sm);
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
    font-size: .93rem;
    transition: background var(--bs-transition), color var(--bs-transition);
}

.admin-nav a:hover { color: var(--bs-white); background: rgba(255, 255, 255, .07); }

.admin-nav a.active {
    color: var(--bs-white);
    background: var(--bs-logo-gradient);
    box-shadow: var(--bs-shadow-blue);
}

.admin-nav .count {
    margin-inline-start: auto;
    background: rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .76rem;
}

.admin-main { padding: 1.8rem clamp(1rem, 3vw, 2.2rem) 3rem; background: var(--bs-surface); min-width: 0; }

.admin-header { margin-bottom: 1.6rem; }
.admin-header h1 { font-size: 1.75rem; margin-bottom: .2rem; }

/* بطاقة إحصاء */
.stat {
    position: relative;
    padding: 1.25rem 1.35rem;
    border-radius: var(--bs-radius-lg);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-200);
    box-shadow: var(--bs-shadow-sm);
    overflow: hidden;
}

.stat::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background: var(--bs-logo-gradient);
}

.stat__label { font-size: .86rem; color: var(--bs-gray-500); font-weight: 600; }
.stat__value { font-size: 2rem; font-weight: 800; line-height: 1.2; color: var(--bs-gray-900); }
.stat--danger::after  { background: linear-gradient(180deg, #9F1239, var(--bs-danger)); }
.stat--warning::after { background: linear-gradient(180deg, #B45309, var(--bs-warning)); }

/* ---------- 13. مؤشر الفأرة المخصّص (الموقع العام فقط) ---------- */
/* مكعّب زجاجي يتبع مؤشر الفأرة بتأخّر خفيف (نفس لغة .app-card__cube)،
   والسهم الفعلي يبقى سهماً عادياً لكن بلون الهوية التقني (--st-cyan). كلاهما
   مُعطَّل تلقائياً على الأجهزة اللمسية (لا مؤشر دقيق) وعند تفضيل تقليل
   الحركة (بلا تتبّع بتأخّر — يلتصق مباشرة بموضع الفأرة الحقيقي). */
@media (pointer: fine) {
    body.bs-public {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 2 L4 20 L9 15 L12 22 L15 21 L12 14 L19 14 Z' fill='%234FC3F7' stroke='%2302060F' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto;
    }

    body.bs-public a,
    body.bs-public button,
    body.bs-public summary,
    body.bs-public [role="button"] {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 2 L4 20 L9 15 L12 22 L15 21 L12 14 L19 14 Z' fill='%234FC3F7' stroke='%2302060F' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, pointer;
    }

    .st-cube-cursor {
        position: fixed;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        border-radius: 22%;
        background: linear-gradient(140deg, rgba(79, 195, 247, .30), rgba(79, 195, 247, .04) 62%);
        border: 1px solid rgba(79, 195, 247, .5);
        box-shadow: 0 0 22px rgba(79, 195, 247, .30), inset 0 1px 0 rgba(255, 255, 255, .22);
        pointer-events: none;
        z-index: 2147483000;
        opacity: 0;
        transition: opacity 200ms ease;
        will-change: transform;
    }

    .st-cube-cursor.is-visible { opacity: 1; }
}

@media (pointer: fine) and (prefers-reduced-motion: reduce) {
    .st-cube-cursor { transition: none; }
}
.stat--success::after { background: linear-gradient(180deg, #065F46, var(--bs-success)); }

/* مفتاح الإيقاف من السيرفر */
.kill-switch { display: inline-flex; align-items: center; gap: .55rem; }

.switch { position: relative; display: inline-block; width: 52px; height: 28px; flex: 0 0 52px; }
.switch input { opacity: 0; width: 0; height: 0; }

.switch__track {
    position: absolute;
    inset: 0;
    background: var(--bs-gray-300);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--bs-transition);
}

.switch__track::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    background: var(--bs-white);
    border-radius: 50%;
    box-shadow: var(--bs-shadow-sm);
    transition: transform var(--bs-transition);
}

.switch input:checked + .switch__track { background: linear-gradient(135deg, #9F1239, var(--bs-danger)); }
.switch input:checked + .switch__track::before { transform: translateX(-24px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--bs-azure-400); outline-offset: 2px; }

/* الاتجاه المعاكس في الواجهات اللاتينية */
[dir="ltr"] .switch input:checked + .switch__track::before { transform: translateX(24px); }

/* ---------- 17. التصفّح المتجاوب ---------- */
@media (max-width: 992px) {
    .admin-shell { grid-template-columns: 1fr; }

    /* لا ‎transform‎ متحرّك هنا عمداً: نفس آلية قائمة الصفحة الرئيسية
       (‎.site-nav‎) تماماً — تبديل ‎display‎ فقط. ذاك الشريط يعمل بثبات
       تام على سفاري iOS لأنه لا يحرّك أي طبقة بصرياً، بينما إصدارات سابقة
       من هذا الدرج اعتمدت ‎position:fixed + transform + visibility‎
       فوقعت في علّة إعادة رسم معروفة في WebKit: يبقى الدرج قابلاً للنقر
       (تصل الأحداث إلى الروابط) لكن المتصفّح يرفض رسمه على الشاشة. تبديل
       ‎display‎ يزيل العنصر من الرسم والفهرسة وترتيب Tab معاً بخطوة واحدة،
       فيغني حتى عن ‎visibility:hidden‎ التي كانت تؤدّي الغرض نفسه سابقاً. */
    .admin-sidebar {
        display: none;
        position: fixed;
        inset-block: 0;
        inset-inline-end: 0;
        width: 268px;
        /* على هاتف ضيّق كان الدرج يبتلع الشاشة كاملة فلا يظهر شيء من الخلفية
           يدلّ على أنه طبقة فوق الصفحة. يترك الآن شريطاً من الخلفية دائماً. */
        max-width: 86vw;
        z-index: 90;
        box-shadow: 0 0 40px rgba(4, 16, 46, .55);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* التمرير داخل الدرج لا يُمرَّر إلى الصفحة تحته عند بلوغ نهايته. */
        overscroll-behavior: contain;
        padding-block-end: calc(1.4rem + env(safe-area-inset-bottom));
    }

    .admin-sidebar.is-open { display: block; }
}

/* تجميد تمرير الصفحة ما دام الدرج مفتوحاً: كان المحتوى خلف الطبقة السوداء
   يتمرّر مع الإصبع، فتُفقَد موضع القراءة عند إغلاق الدرج. */
body.has-open-drawer { overflow: hidden; }

@media (max-width: 768px) {
    .nav-toggle { display: inline-flex; align-items: center; }

    .site-nav {
        position: absolute;
        inset-inline: 0;
        top: var(--bs-header-h);
        z-index: 70;
        flex-direction: column;
        align-items: stretch;
        gap: .35rem;
        background: var(--bs-black);
        padding: .8rem 1rem calc(1rem + env(safe-area-inset-bottom));
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 18px 40px rgba(4, 16, 46, .45);
        /* قائمة أطول من الشاشة تتمرّر داخل نفسها بدل أن تُقصّ. */
        max-height: calc(100vh - var(--bs-header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        display: none;
    }

    .site-nav.is-open { display: flex; }

    /* كل عنصر صفّ كامل العرض بحدّ ظاهر وسهم اتجاه وهدف لمس ‎48px‎.
       كانت العناصر نصّاً مجرّداً على أسود بلا حدود ولا فواصل، فتبدو
       القائمة فارغة ولا يبدو فيها شيء قابل للنقر إلا الزرّ الوحيد أسفلها. */
    .site-nav a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        min-height: 48px;
        padding: .7rem 1rem;
        border-radius: var(--bs-radius);
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1);
        color: var(--bs-white);
        font-size: 1rem;
    }

    /* سهم يشير إلى اتجاه القراءة (يساراً في العربية). */
    .site-nav a::after {
        content: '';
        flex: none;
        width: 8px;
        height: 8px;
        border-top: 2px solid rgba(255, 255, 255, .42);
        border-right: 2px solid rgba(255, 255, 255, .42);
        transform: rotate(-135deg);
    }

    [dir="ltr"] .site-nav a::after { transform: rotate(45deg); }

    .site-nav a:hover,
    .site-nav a:active { background: rgba(255, 255, 255, .12); }

    .site-nav a.active {
        background: linear-gradient(135deg, rgba(11, 58, 143, .95), rgba(79, 195, 247, .4));
        border-color: rgba(79, 195, 247, .5);
    }

    /* إجراء الحساب يأخذ السطر كاملاً ويُفصَل عمّا فوقه بخطّ رفيع. */
    .site-nav .site-nav__form {
        display: block;
        margin: .5rem 0 0;
        padding-top: .75rem;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .site-nav .site-nav__form .btn { width: 100%; min-height: 48px; }

    .site-header { position: relative; }

    /* طبقة تعتيم خلف القائمة — أقلّ من الرأس (60) فتغطّي الصفحة وحدها. */
    .site-nav-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(4, 16, 46, .5);
        backdrop-filter: blur(2px);
    }
}

/* مخفيّة تماماً على سطح المكتب مهما كانت حالة السمة hidden. */
.site-nav-backdrop { display: none; }

/* ---------- 18. تفضيلات المستخدم ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header,
    .admin-sidebar,
    .admin-topbar,
    .admin-backdrop,
    .site-footer,
    .btn { display: none !important; }

    body { background: #fff; color: #000; }
}