@charset "UTF-8";

/* -----------------------------------------------------------------------------
   تحميل الخطوط — يجب أن يبقى @import أول شيء في الملف قبل أي قاعدة CSS.
   Tajawal = خط العناوين (--f-display) · IBM Plex Sans Arabic = خط المتن (--f-body)
   وهما نفس خطَّي صفحة zzz.html بالضبط.
   -------------------------------------------------------------------------- */

/* =============================================================================
   custom-overrides.css  —  ملف التعديلات الموحّد لموقع «معلم الحاسب»
   =============================================================================

   الغرض:
   هذا هو الملف الوحيد الذي تكتب فيه تعديلات CSS. لا تعدّل أي ملف CSS آخر
   داخل assets/css أو assets/vendor — إذا احتجت تغيير شيء، اكتب القاعدة هنا.

   كيف يعمل:
   الملف مُدرَج آخر شيء داخل <head> في كل صفحات الموقع، أي أنه يأتي بعد كل
   ملفات القالب والأنماط الداخلية، فتفوز قواعده تلقائياً عند تساوي الأولوية
   (specificity) دون الحاجة إلى !important في أغلب الحالات.

   ⚠️ تنبيه مهم — ملفات CSS تُحمَّل بعدنا داخل <body>:
   القالب يحمّل هذه الملفات داخل جسم الصفحة، أي بعد ملفنا في ترتيب المستند،
   فتتغلب علينا عند تساوي الأولوية:
        assets/css/sales-gate.css        (24 صفحة، فيه 6 !important)
        assets/css/brand-logo.css        (24 صفحة، فيه 1 !important)
        assets/css/services-menu.css     (24 صفحة، فيه 8 !important)
        assets/css/nav-icons.css         (24 صفحة، فيه 2 !important)
        assets/css/notifications-hub.css (صفحة واحدة، فيه 6 !important)
   إضافة إلى كتلة <style> بعد </head> مباشرة في 22 صفحة تستهدف .section-py.

   الخلاصة: أي تعديل يمسّ الشعار، قائمة الخدمات، أيقونات القائمة، بوابة البيع،
   مركز الإشعارات، أو .section-py ← اكتبه بـ !important مباشرة.
   وما عدا ذلك يكفيه أسلوب عادي.

   قواعد العمل:
   1) اكتب تعديلك تحت القسم المناسب في الأسفل، لا في أعلى الملف.
   2) إذا لم يظهر التعديل، ارفع الأولوية بهذا الترتيب:
        أ) أضف بادئة:            html body .my-class { ... }
        ب) ضاعف اسم الكلاس:      .my-class.my-class { ... }
        ج) وللعناصر المذكورة أعلاه: ... { color: red !important; }
      تحذير: لا تستخدم @layer هنا — الأنماط داخل الطبقات تخسر أمام الأنماط
      غير المُطبَّقة في طبقة، فتضعف ملفنا بدل أن تقوّيه.
   3) الموقع RTL بالكامل (dir="rtl"). استخدم الخصائص المنطقية كي تعمل في
      الاتجاهين: margin-inline-start / padding-inline-end / inset-inline-start
      بدلاً من margin-right / padding-left / right.
   4) لتخصيص صفحة واحدة فقط، استهدفها عبر جسمها أو الحاوية الخاصة بها،
      مثال:  .portfolio-page .card { ... }
      أو أضف كلاساً مخصصاً لعنصر <body> في تلك الصفحة عند الحاجة.
   5) بعد أي تعديل: حدّث رقم الإصدار في وسم <link> داخل الصفحات
      (?v=1 ← ?v=2) لتجاوز ذاكرة المتصفح المؤقتة، أو اضغط Ctrl+Shift+R.

   ملاحظة: الملف حالياً لا يغيّر أي شيء في المظهر — كل الأمثلة معطّلة
   بالتعليقات. فعّل ما تحتاجه فقط.
   ========================================================================== */


/* =============================================================================
   0. اختبار سريع — للتأكد أن الملف مُحمَّل فعلاً
   -----------------------------------------------------------------------------
   أزل التعليق عن السطور الثلاثة التالية، احفظ، ثم افتح أي صفحة واضغط Ctrl+Shift+R.
   المفروض يظهر إطار أحمر حول الصفحة كلها. إذا ظهر ← الملف شغّال، أعد التعليق.
   ========================================================================== */

/* html body {
  border: 6px solid red !important;
} */


/* =============================================================================
   1. المتغيّرات — الألوان والخطوط والمقاسات
   -----------------------------------------------------------------------------
   عرّف قيمك هنا مرة واحدة ثم استخدمها في بقية الملف عبر var(--cmp-...).
   ========================================================================== */

:root {
  /* --- ألوان الهوية --- */
  /* --cmp-primary:        #696cff; */
  /* --cmp-primary-dark:   #5f61e6; */
  /* --cmp-primary-soft:   rgba(105, 108, 255, 0.12); */
  /* --cmp-accent:         #ff6b35; */
  /* --cmp-success:        #71dd37; */
  /* --cmp-danger:         #ff3e1d; */

  /* --- النصوص والخلفيات --- */
  /* --cmp-text:           #384154; */
  /* --cmp-text-muted:     #8592a3; */
  /* --cmp-bg:             #f5f5f9; */
  /* --cmp-surface:        #ffffff; */
  /* --cmp-border:         #e4e6e8; */

  /* --- الخطوط --- */
  /* --cmp-font:           'Rubik', 'Cairo', sans-serif; */
  /* --cmp-font-size:      15px; */
  /* --cmp-line-height:    1.8; */

  /* --- الحواف والظلال --- */
  /* --cmp-radius:         12px; */
  /* --cmp-radius-lg:      20px; */
  /* --cmp-shadow:         0 4px 18px rgba(0, 0, 0, .08); */

  /* --- المسافات --- */
  /* --cmp-section-gap:    72px; */
  /* --cmp-container-max:  1200px; */
}


/* =============================================================================
   2. عام — الجسم والخطوط والعناوين والروابط
   ========================================================================== */

/* html body {
  font-family: var(--cmp-font);
  font-size: var(--cmp-font-size);
  line-height: var(--cmp-line-height);
  color: var(--cmp-text);
} */

/* h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: 0;
} */

/* a {
  color: var(--cmp-primary);
  transition: color .2s ease;
} */


/* =============================================================================
   3. الهيدر والقائمة العلوية (navbar / landing-navbar)
   ========================================================================== */

/* روابط القائمة العلوية لا تنكسر سطرين.
   عائلات الصفحات (h2-body وأخواتها) تبدّل خط ‎.nav-link‎ إلى Tajawal وهو أعرض
   من Cairo، فكانت عناوين الكلمتين («ملف الإنجاز»، «خدمات الموقع») تلتفّ في
   الشاشات العريضة فتبدو القائمة مكسورة (قياس 2026-08-20). عنوانُ قائمةٍ
   سطرٌ واحد دائماً — أياً كان الخط، وفي كل صفحات الواجهة لأن النافبار
   جزئية مشتركة. */
.landing-navbar .navbar-nav .nav-link {
  white-space: nowrap;
}

/* ── نافبار زجاجية ── */
.layout-navbar,
.navbar-detached,
.landing-navbar {
  background: rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
          backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

/* شعار الموقع */
/* .app-brand-logo img,
.navbar-brand img {
  height: 42px;
} */


/* =============================================================================
   4. القائمة الجانبية (layout-menu) — صفحات ملف الإنجاز ولوحة التحكم
   ========================================================================== */

/* #layout-menu .menu-item .menu-link {

} */

/* #layout-menu .menu-item.active > .menu-link {

} */


/* =============================================================================
   5. الأزرار
   ========================================================================== */

/* .btn {
  border-radius: var(--cmp-radius);
  font-weight: 600;
} */

/* .btn-primary {
  background-color: var(--cmp-primary);
  border-color: var(--cmp-primary);
} */

/* .btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cmp-primary-dark);
  border-color: var(--cmp-primary-dark);
} */


/* =============================================================================
   6. البطاقات والصناديق (cards / boxes)
   ========================================================================== */

/* .card {
  border-radius: var(--cmp-radius-lg);
  box-shadow: var(--cmp-shadow);
  border: 1px solid var(--cmp-border);
} */


/* =============================================================================
   7. النماذج والحقول (forms / inputs)
   ========================================================================== */

/* .form-control,
.form-select {
  border-radius: var(--cmp-radius);
} */

/* .form-control:focus,
.form-select:focus {
  border-color: var(--cmp-primary);
  box-shadow: 0 0 0 .2rem var(--cmp-primary-soft);
} */


/* =============================================================================
   7-ب. قاعدة مشتركة — شارة hp-eyebrow دائماً فوق العنوان   ✅ مُفعّلة
   -----------------------------------------------------------------------------
   المشكلة: الشارة كانت تقف بجانب العنوان على السطر نفسه.

   السبب: كلاهما عنصر سطري (inline-level) فيصطفّان أفقياً —
       .hp-eyebrow              → display: inline-flex   (home-premium.css سطر 67)
       .page-static .page-title → display: inline-block  (page-premium.css سطر 15)

   الحل: جعل العنوان عنصراً كتلياً (block) فينزل إلى سطر جديد وتبقى الشارة
   وحدها فوقه. لم نلمس الشارة نفسها كي يبقى شكلها الحبّي (pill) كما هو.
   الشرطة الزخرفية تحت العنوان (::after) تبقى في مكانها لأنها تتوسّط
   بـ margin auto وهو يعمل مع block تماماً كما مع inline-block.

   النطاق: مشترك — يشمل 5.html و6.html و7.html و8.html و22.html و23.html.
   صفحة 2.html تستعمل .svc58-title وهو <h1> كتلي أصلاً فلا يحتاج تعديلاً.
   ========================================================================== */

.page-static .hp-eyebrow + .page-title,
.hp-eyebrow + .page-title,
.hp-eyebrow + h1,
.hp-eyebrow + h2,
.hp-eyebrow + h3 {
  display: block;
  /* تقليل الهامش: page-premium.css يضبطه 1rem علوياً وهو كبير بعد نزول
     العنوان لسطر مستقل */
  margin-block: .35rem .3rem;
}

/* مسافة تنفّس صغيرة تحت الشارة */
.hp-eyebrow {
  margin-block-end: .4rem;
}


/* =============================================================================
   8. الصفحة الرئيسية index.html — نظام الخطّين مثل zzz.html   ✅ مُفعّل
   -----------------------------------------------------------------------------
   الخلفية:
   ملف assets/css/home-v2.css يحتوي أصلاً على نفس نظام zzz.html بالكامل —
   نفس المتغيّرين (سطر 29-30) ونفس توزيع الخطين على العناصر. لكن الصفحة
   كانت تظهر بخط مختلف لسببين:

     1) الخطّان Tajawal و IBM Plex Sans Arabic لم يكونا مُحمَّلين إطلاقاً؛
        index.html يحمّل خط Rubik فقط من Google Fonts، فيسقط المتصفح إلى
        sans-serif الافتراضي. ← حُلّت بـ @import في أعلى هذا الملف.

     2) قواعد الأساس في home-v2.css مكتوبة بالمحدد  body.h2-body  بينما
        الكلاس h2-body في index.html موضوع على <div> لا على <body>، فلم
        تُطبَّق أبداً على الجسم ولا على العناوين h1–h5. ← حُلّت بالقواعد أدناه.

   وفوق ذلك، assets/css/premium-theme.css (سطر 90-94) يفرض خط 'Cairo' على
   h1–h6 و .btn و .nav-link و .card و .form-control و .badge، لذلك نعيد
   تعيينها هنا صراحةً.

   النطاق:  html:has(.h2-body)  ←  الكلاس h2-body موجود في index.html فقط
   دون بقية الصفحات، فالتعديل محصور فيها ولا يمسّ أي صفحة أخرى.
   ========================================================================== */

html:has(.h2-body) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;

  /* يغطّي مكوّنات بوتستراب التي تقرأ من هذا المتغيّر */
  --bs-body-font-family: var(--f-body);
}

/* --- أ) خط المتن على الصفحة كلها (يشمل الهيدر والفوتر خارج .h2-body) --- */
html:has(.h2-body) body {
  font-family: var(--f-body);
}

/* --- ب) خط العناوين: العناوين وواجهة الاستخدام والنصوص العريضة --- */
html:has(.h2-body) h1,
html:has(.h2-body) h2,
html:has(.h2-body) h3,
html:has(.h2-body) h4,
html:has(.h2-body) h5,
html:has(.h2-body) h6,
html:has(.h2-body) .btn,
html:has(.h2-body) .nav-link,
html:has(.h2-body) .badge,
html:has(.h2-body) .dropdown-item,
html:has(.h2-body) .fw-bold,
html:has(.h2-body) .fw-semibold,
html:has(.h2-body) .eyebrow,
html:has(.h2-body) .sec-head,
html:has(.h2-body) .chip,
html:has(.h2-body) .pp-chip,
html:has(.h2-body) .pp-btn,
html:has(.h2-body) .path-go,
html:has(.h2-body) .svcm-name,
html:has(.h2-body) .num {
  font-family: var(--f-display);
}

/* --- ج) الحقول والنماذج بخط المتن (كما في zzz) --- */
html:has(.h2-body) .card,
html:has(.h2-body) .form-control,
html:has(.h2-body) .form-select,
html:has(.h2-body) input,
html:has(.h2-body) textarea,
html:has(.h2-body) select,
html:has(.h2-body) .svcm-body,
html:has(.h2-body) .voice-txt {
  font-family: var(--f-body);
}

/* --- د) الأزرار داخل .h2-body ترث خط المتن افتراضياً في home-v2.css،
       ونحن نريدها بخط العناوين مثل zzz --- */
html:has(.h2-body) button {
  font-family: inherit;
}

/* --- ملاحظة: خطوط الأيقونات (tabler-icons / FontAwesome) محميّة تلقائياً
       لأنها معرّفة بـ !important في ملفاتها، فلن تتأثر بما سبق. --- */

/* اختياري — لضبط تباعد حروف العناوين تماماً كما في zzz (‎-0.015em‎).
   premium-theme.css يصفّرها، فأزل التعليق إن أردت مطابقة zzz حرفياً. */
/*
html:has(.h2-body) h1,
html:has(.h2-body) h2,
html:has(.h2-body) h3,
html:has(.h2-body) h4,
html:has(.h2-body) h5 {
  letter-spacing: -.015em;
}
*/


/* =============================================================================
   8-ب. صفحة 1.html (مركز الخدمات) — نظام الخطّين   ✅ مُفعّل
   -----------------------------------------------------------------------------
   نفس خطَّي zzz.html و index.html، فتتوحّد هوية الموقع:
       Tajawal                → العناوين وواجهة الاستخدام  (--f-display)
       IBM Plex Sans Arabic   → نص الفقرات والحقول          (--f-body)

   الخطّان مُحمَّلان أصلاً عبر @import في أعلى هذا الملف، فلا حاجة لتحميلهما ثانية.

   ما كان يفرض الخط قبل هذا القسم:
     · assets/css/premium-theme.css سطر 74/83  → body بخط 'Cairo'
     · assets/css/premium-theme.css سطر 90-94  → h1–h6 و .btn و .nav-link
       و .card و .form-control و .badge بخط 'Cairo'
     · كتلة <style> داخل <head> في 1.html      → body, html بخط 'Cairo'
       (موضعها قبل ملفنا، فقواعدنا تتغلّب عليها دون !important)
     · assets/css/services-hub.css لا يضبط الخط إطلاقاً → كله كان يرث Cairo

   النطاق: html:has(.svch) ← الكلاس svch موجود في 1.html فقط.
   ========================================================================== */

html:has(.svch) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

/* --- أ) خط المتن على الصفحة كلها (يشمل الهيدر والفوتر) --- */
html:has(.svch) body {
  font-family: var(--f-body);
}

/* --- ب) خط العناوين: العناوين وواجهة الاستخدام والنصوص العريضة --- */
html:has(.svch) h1,
html:has(.svch) h2,
html:has(.svch) h3,
html:has(.svch) h4,
html:has(.svch) h5,
html:has(.svch) h6,
html:has(.svch) .btn,
html:has(.svch) .nav-link,
html:has(.svch) .badge,
html:has(.svch) .dropdown-item,
html:has(.svch) .fw-bold,
html:has(.svch) .fw-semibold,
/* عناصر مركز الخدمات */
html:has(.svch) .svch-title,
html:has(.svch) .svch-eyebrow,
html:has(.svch) .svch-name,
html:has(.svch) .svch-badge,
html:has(.svch) .svch-go,
html:has(.svch) .svch-count,
html:has(.svch) .svch-kbd,
html:has(.svch) .svch-band-item strong,
/* الفوتر الموحّد */
html:has(.svch) .hv3-foot-col h4,
html:has(.svch) .hv3-foot-title {
  font-family: var(--f-display);
}

/* --- ج) خط المتن للنصوص الجارية والحقول --- */
html:has(.svch) .card,
html:has(.svch) .form-control,
html:has(.svch) .form-select,
html:has(.svch) input,
html:has(.svch) textarea,
html:has(.svch) select,
html:has(.svch) .svch-sub,
html:has(.svch) .svch-desc,
html:has(.svch) .svch-search-input,
html:has(.svch) .svch-band-item small,
html:has(.svch) .svch-empty p {
  font-family: var(--f-body);
}

/* --- ملاحظة: خطوط الأيقونات (tabler-icons / FontAwesome) لا تتأثر لأنها
       معرّفة بـ !important داخل ملفاتها. --- */


/* =============================================================================
   8-ج. الطبقة الإبداعية لصفحة 1.html — مركز الخدمات   ✨ مُفعّلة
   -----------------------------------------------------------------------------
   النطاق: الكلاس  .svch  موجود في 1.html فقط دون بقية الصفحات، فكل ما يلي
   محصور فيها. تصميم services-hub.css يبني كل بطاقة حول متغيّر درجة اللون
   ‎--svch-h‎ (لكل خدمة لونها)، وهذه الطبقة تستثمر نفس المتغيّر فتبقى الألوان
   متناغمة تلقائياً مع أي خدمة تُضاف لاحقاً.

   احتياطات رُوعيت قبل الكتابة:
     · ‎.svch-card‎ عليها ‎animation: svchIn ... both‎ للظهور المتتابع؛ ولأن
       الحركات تتغلّب على الإعلانات العادية، استُخدم ‎filter: opacity()‎ بدل
       خاصية ‎opacity‎ في تعتيم البطاقات الشقيقة حتى لا نضطر إلى ‎!important‎.
     · ‎.svch-card:hover‎ يضبط ‎transform‎ أصلاً → لم نلمس transform عليها.
     · ‎transition‎ أُعيد سردها كاملة (كما في الأصل) مع إضافة filter، لأن CSS
       يستبدل القائمة ولا يدمجها.
     · ‎.svch-card-glow‎ يستعمل ‎z-index:-1‎ داخل ‎isolation:isolate‎ → حلقتنا
       وُضعت فوقه بلا تصادم.
     · كل العناصر الزائفة المستعملة هنا فُحصت وكانت حرّة تماماً.
   ========================================================================== */

/* زاوية متحرّكة للحلقة المتدرّجة (تتدهور بلطف في المتصفحات القديمة) */
@property --svch-ring {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* --- 1) الهالات الخلفية تسبح ببطء بدل أن تكون ساكنة --- */
@keyframes cmp-svch-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 4%, 0) scale(1.12); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.svch .svch-orb-1 { animation: cmp-svch-float 30s var(--pt-ease) infinite; }
.svch .svch-orb-2 { animation: cmp-svch-float 38s var(--pt-ease) infinite -12s; }

/* --- 2) نقطة الشارة تنبض كإشارة «مباشر» --- */
@keyframes cmp-svch-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(var(--brand-rgb), .40); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--brand-rgb), 0);   }
  100% { box-shadow: 0 0 0 0   rgba(var(--brand-rgb), 0);   }
}

.svch .svch-eyebrow-dot {
  animation: cmp-svch-pulse 2.4s ease-out infinite;
}

/* --- 3) العنوان: التدرّج يتموّج ببطء بدل أن يكون ثابتاً --- */
@keyframes cmp-svch-shimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

.svch .svch-title-grad {
  background-image: linear-gradient(110deg,
                    var(--brand)   0%,
                    #E9A03C       22%,
                    #F2C078       38%,
                    #E9A03C       55%,
                    var(--brand)  78%,
                    #E9A03C      100%);
  background-size: 200% 100%;
  animation: cmp-svch-shimmer 7s linear infinite;
}

/* --- 4) حلقة متدرّجة تدور حول البطاقة عند المرور، بلون الخدمة نفسها --- */
@keyframes cmp-svch-spin {
  to { --svch-ring: 360deg; }
}

.svch .svch-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(from var(--svch-ring),
              transparent 0 52%,
              hsl(var(--svch-h) 78% 58%) 68%,
              hsl(var(--svch-h) 62% 44%) 76%,
              transparent 88% 100%);
  /* يُفرَغ المركز فلا يبقى إلا إطار رفيع */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms var(--pt-ease);
  pointer-events: none;
}

.svch .svch-card:hover::before,
.svch .svch-card:focus-visible::before {
  opacity: 1;
  animation: cmp-svch-spin 3.6s linear infinite;
}

/* --- 5) تركيز الانتباه: عند المرور على بطاقة تخفت شقيقاتها قليلاً --- */
.svch .svch-card {
  /* أُعيد سرد الانتقالات الأصلية كاملةً + filter */
  transition: transform var(--pt-dur) var(--pt-ease),
              border-color var(--pt-dur) var(--pt-ease),
              box-shadow var(--pt-dur) var(--pt-ease),
              filter 340ms var(--pt-ease);
}

.svch .svch-grid:hover .svch-card:not(:hover) {
  /* filter بدل opacity: خاصية opacity محجوزة لحركة الظهور svchIn */
  filter: saturate(.55) opacity(.68);
}

/* --- 6) الأيقونة: وميض ضوئي يمرّ عليها + ميلان أعمق --- */
.svch .svch-ic {
  position: relative;
  overflow: hidden;
}

.svch .svch-ic::after {
  content: '';
  position: absolute;
  inset-block: -40%;
  inline-size: 55%;
  inset-inline-start: -70%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start 620ms var(--pt-ease);
}

.svch .svch-card:hover .svch-ic::after {
  inset-inline-start: 130%;
}

.svch .svch-card:hover .svch-ic {
  transform: translateY(-3px) rotate(-7deg) scale(1.06);
}

/* --- 7) حقل البحث: حلقة ضوئية ناعمة عند التركيز --- */
.svch .svch-search::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 999px;
  background: radial-gradient(60% 120% at 50% 50%,
              rgba(var(--brand-rgb), .16), transparent 70%);
  opacity: 0;
  transition: opacity 300ms var(--pt-ease);
  pointer-events: none;
  z-index: -1;
}

.svch .svch-search:focus-within::after { opacity: 1; }

/* --- 8) الشريط السفلي: خط متدرّج ينمو + الأيقونة تتقدّم --- */
.svch .svch-band-item {
  position: relative;
  transition: background var(--pt-dur) var(--pt-ease);
}

.svch .svch-band-item::after {
  content: '';
  position: absolute;
  inset-block-end: 6px;
  inset-inline: 50% 50%;
  block-size: 2px;
  border-radius: 100px;
  background: linear-gradient(90deg,
              rgba(var(--brand-rgb), .25), var(--brand),
              rgba(var(--brand-rgb), .25));
  transition: inset-inline 340ms var(--pt-ease);
}

.svch .svch-band-item:hover::after { inset-inline: 12% 12%; }

.svch .svch-band-item > .ti {
  transition: transform 280ms var(--pt-ease);
}

.svch .svch-band-item:hover > .ti {
  transform: translateY(-2px) scale(1.12);
}

/* --- 9) البطاقة المميّزة (منصة الاختبارات): خلفية متدرّجة حيّة --- */
@keyframes cmp-svch-mesh {
  0%   { background-position:   0% 50%,  100% 50%; }
  50%  { background-position: 100% 50%,    0% 50%; }
  100% { background-position:   0% 50%,  100% 50%; }
}

.svch .svch-card.is-spotlight {
  background-image:
    radial-gradient(70% 130% at 15% 0%,
      hsla(var(--svch-h), 72%, 58%, .13), transparent 62%),
    radial-gradient(60% 120% at 95% 100%,
      hsla(var(--svch-h), 62%, 48%, .10), transparent 66%);
  background-size: 190% 190%, 190% 190%;
  animation: cmp-svch-mesh 17s var(--pt-ease) infinite;
}

/* --- 10) احترام تفضيل تقليل الحركة --- */
@media (prefers-reduced-motion: reduce) {
  .svch .svch-orb-1,
  .svch .svch-orb-2,
  .svch .svch-eyebrow-dot,
  .svch .svch-title-grad,
  .svch .svch-card.is-spotlight,
  .svch .svch-card:hover::before,
  .svch .svch-card:focus-visible::before {
    animation: none;
  }
  .svch .svch-ic::after { display: none; }
  .svch .svch-grid:hover .svch-card:not(:hover) { filter: none; }
}


/* =============================================================================
   8-د. صفحة 2.html (خدمات المحتوى) — نظام الخطّين   ✅ مُفعّل
   -----------------------------------------------------------------------------
   النطاق: html:has(.svc58) ← الكلاس svc58 موجود في 2.html فقط.
   الخطّان مُحمَّلان عبر @import في أعلى الملف.
   ========================================================================== */

html:has(.svc58) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.svc58) body {
  font-family: var(--f-body);
}

/* خط العناوين: العناوين وواجهة الاستخدام والأرقام */
html:has(.svc58) h1,
html:has(.svc58) h2,
html:has(.svc58) h3,
html:has(.svc58) h4,
html:has(.svc58) h5,
html:has(.svc58) h6,
html:has(.svc58) .btn,
html:has(.svc58) .nav-link,
html:has(.svc58) .badge,
html:has(.svc58) .fw-bold,
html:has(.svc58) .fw-semibold,
html:has(.svc58) .svc58-title,
html:has(.svc58) .hp-eyebrow,
html:has(.svc58) .svc58-stat strong,
html:has(.svc58) .svc58-h2,
html:has(.svc58) .svc58-pill,
html:has(.svc58) .svc58-chip,
html:has(.svc58) .svc58-counter,
html:has(.svc58) .svc58-n,
html:has(.svc58) .svc58-name,
html:has(.svc58) .svc58-txt,
html:has(.svc58) .svc58-table thead th,
html:has(.svc58) .svc58-cta-text h3,
html:has(.svc58) .svc58-hub strong {
  font-family: var(--f-display);
}

/* خط المتن: النصوص الجارية والحقول */
html:has(.svc58) .svc58-sub,
html:has(.svc58) .svc58-stat small,
html:has(.svc58) .svc58-search-input,
html:has(.svc58) .svc58-table thead th small,
html:has(.svc58) .svc58-cta-text p,
html:has(.svc58) .svc58-hub small,
html:has(.svc58) .svc58-noresult,
html:has(.svc58) input,
html:has(.svc58) textarea,
html:has(.svc58) select,
html:has(.svc58) .form-control {
  font-family: var(--f-body);
}


/* =============================================================================
   8-هـ. صفحة 2.html — إعادة تصميم جذرية «مصفوفة الامتياز»   ✨ مُفعّلة
   -----------------------------------------------------------------------------
   الفكرة: بدل جدول مقارنة مسطّح، تتحول الصفحة إلى:
     · لوح علوي داكن درامي يحمل العنوان والإحصاءات
     · «ممرّ ذهبي» مضيء يسري عمودياً في عمود المعلم المشترك، فيُقرأ الفرق
       بين المجاني والمشترك من نظرة واحدة
     · رأس جدول داكن لاصق + صفوف تُضاء عند المرور
     · علامات ✓ كأقراص متوهّجة، وعلامات ✗ كحلقات باهتة متقطّعة

   ⚠️ قيود صارمة رُوعيت (موثّقة داخل services-premium.css نفسه):
     · ممنوع overflow:hidden على .svc58 أو .svc58-wrap — يُبطل الرأس اللاصق.
       لذلك كل القصّ تمّ عبر border-radius على الخلايا الطرفية فقط.
     · خلفية .svc58-table thead th يجب أن تبقى معتِمة تماماً لأن الصفوف
       تمرّ تحتها أثناء التمرير → استُخدم لون داكن مصمت بلا شفافية.
     · عرض الجوال (≤767.98px) يحوّل الجدول إلى بطاقات عبر td::before؛
       أُضيفت كتلة في آخر القسم تُحيّد «الممرّ» هناك حتى لا يتشوّه.
     · لا transform على <tr> أو <td> — يسبب اضطراب تخطيط الجداول؛
       استُعيض عنه بتحريك الحشو واللون والظل.
   ========================================================================== */

/* ---------- 1) لوحة الألوان الجديدة ---------- */
.svc58 {
  /* الأساس الداكن: أخضر صنوبري متناغم مع --pine في هوية الموقع */
  --m-ink: var(--pal-hero-2);      /* درجة أعمق للتدرّج */
  --m-ink-2: var(--pal-hero);    /* اللون المعتمد */
  --m-gold: #E3922F;
  --m-gold-2: #C9741C;
  --m-glow: rgba(227, 146, 47, .45);
}

/* ---------- 2) هالات خلفية تسبح ببطء ---------- */
@keyframes cmp-svc-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) scale(1.14); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.svc58 .svc58-bg::before,
.svc58 .svc58-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}

.svc58 .svc58-bg::before {
  inset-block-start: -180px;
  inset-inline-end: -140px;
  inline-size: 520px;
  block-size: 520px;
  background: radial-gradient(circle, rgba(227, 146, 47, .22), transparent 70%);
  animation: cmp-svc-drift 32s var(--pt-ease) infinite;
}

.svc58 .svc58-bg::after {
  inset-block-start: 240px;
  inset-inline-start: -170px;
  inline-size: 440px;
  block-size: 440px;
  background: radial-gradient(circle, rgba(99, 102, 241, .16), transparent 72%);
  animation: cmp-svc-drift 40s var(--pt-ease) infinite -14s;
}

/* ---------- 3) الترويسة: لوح داكن درامي ---------- */
.svc58 .svc58-head {
  max-width: 100%;
  margin-block-end: 2.5rem;
  padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.2rem, 4vw, 3rem);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(90% 130% at 82% -10%, rgba(227, 146, 47, .30), transparent 58%),
    radial-gradient(80% 120% at 8% 108%, rgba(99, 102, 241, .22), transparent 62%),
    linear-gradient(158deg, var(--m-ink-2), var(--m-ink) 62%);
  box-shadow: 0 34px 80px -30px rgba(17, 28, 26,.62);
}

.svc58 .svc58-head .hp-eyebrow {
  border-color: rgba(227, 146, 47, .38);
  background: rgba(227, 146, 47, .13);
  color: #F3B76A;
}

.svc58 .svc58-title {
  color: #FFFFFF;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -.02em;
}

.svc58 .svc58-sub {
  color: rgba(255, 255, 255, .74);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  max-inline-size: 620px;
  margin-inline: auto;
}

/* ---------- 4) الإحصاءات: أرقام عملاقة متدرّجة ---------- */
.svc58 .svc58-stats {
  gap: 1rem;
  margin-block-start: 2.2rem;
}

.svc58 .svc58-stat {
  min-inline-size: 158px;
  padding: 1.15rem 1.4rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: transform 280ms var(--pt-ease), border-color 280ms var(--pt-ease);
}

.svc58 .svc58-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(227, 146, 47, .45);
}

.svc58 .svc58-stat strong {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 900;
  line-height: 1;
  background-image: linear-gradient(140deg, #FFD9A3, var(--m-gold) 55%, var(--m-gold-2));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svc58 .svc58-stat small {
  margin-block-start: .45rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .62);
}

/* ---------- 5) شريط الأدوات: زجاجي عائم ---------- */
.svc58 .svc58-toolbar {
  border-radius: 999px;
  border: 1px solid rgba(22, 36, 34,.09);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
          backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 16px 40px -22px rgba(17, 28, 26,.45);
}

.svc58 .svc58-chip {
  border-radius: 999px;
  transition: background 220ms var(--pt-ease), color 220ms var(--pt-ease),
              box-shadow 220ms var(--pt-ease);
}

.svc58 .svc58-chip.is-active {
  background: linear-gradient(135deg, var(--m-gold), var(--m-gold-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -8px var(--m-glow);
}

/* ---------- 6) عناوين الأقسام: شريط لوني + خط عريض ---------- */
.svc58 .svc58-h2 {
  position: relative;
  padding-inline-start: 1rem;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -.01em;
}

.svc58 .svc58-h2::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: .15em .15em;
  inline-size: 5px;
  border-radius: 100px;
  background: linear-gradient(180deg, var(--m-gold), var(--m-gold-2));
}

/* ---------- 7) غلاف الجدول: ارتفاع وعمق (بلا overflow!) ---------- */
.svc58 .svc58-wrap {
  border-radius: 26px;
  border-color: rgba(22, 36, 34,.08);
  box-shadow: 0 30px 70px -34px rgba(17, 28, 26,.40);
}

/* ---------- 8) رأس الجدول اللاصق: داكن ومعتِم تماماً ---------- */
.svc58 .svc58-table thead th {
  padding: 1.05rem .75rem;
  font-size: .93rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .90);
  /* لون مصمت — الصفوف تمرّ تحته أثناء التمرير */
  background-color: var(--pal-hero);
  border-block-end: 0;
}

.svc58 .svc58-table thead th:first-child { border-start-start-radius: 26px; }
.svc58 .svc58-table thead th:last-child  { border-start-end-radius: 26px; }

.svc58 .svc58-table thead th small {
  color: rgba(255, 255, 255, .55);
}

.svc58 .svc58-th-free {
  color: #A5B4FC;
  box-shadow: inset 0 -3px 0 rgba(129, 140, 248, .55);
}

.svc58 .svc58-th-paid {
  color: #FFCE92;
  background-image: linear-gradient(180deg, rgba(227, 146, 47, .26), rgba(227, 146, 47, .14));
  box-shadow: inset 0 -3px 0 var(--m-gold);
}

/* ---------- 9) الممرّ الذهبي: عمود المشترك يضيء عمودياً ---------- */
.svc58 .svc58-cell.is-paid {
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(227, 146, 47, .085),
      rgba(227, 146, 47, .045));
  box-shadow:
    inset  1px 0 0 rgba(227, 146, 47, .22),
    inset -1px 0 0 rgba(227, 146, 47, .22);
}

/* ---------- 10) الصفوف: إضاءة عند المرور ---------- */
.svc58 .svc58-table tbody tr {
  border-block-end: 1px solid rgba(22, 36, 34,.055);
  transition: background 240ms var(--pt-ease), box-shadow 240ms var(--pt-ease);
}

.svc58 .svc58-table tbody tr:hover {
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .11),
              rgba(227, 146, 47, .03) 55%,
              transparent);
  box-shadow: inset 3px 0 0 var(--m-gold);
}

.svc58 .svc58-name {
  font-size: .97rem;
  font-weight: 700;
  padding-inline-start: .2rem;
  transition: padding-inline-start 240ms var(--pt-ease), color 240ms var(--pt-ease);
}

.svc58 .svc58-table tbody tr:hover .svc58-name {
  padding-inline-start: .75rem;
  color: var(--m-gold-2);
}

.svc58 .svc58-n {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: .5;
}

/* ---------- 11) العلامات: ✓ قرص متوهّج · ✗ حلقة باهتة ---------- */
.svc58 .svc58-yes {
  inline-size: 34px;
  block-size: 34px;
  color: #fff;
  background: linear-gradient(140deg, #34D07B, #12924E);
  box-shadow: 0 6px 16px -5px rgba(18, 146, 78, .60),
              0 0 0 4px rgba(22, 163, 74, .12);
}

.svc58 .svc58-cell.is-paid .svc58-yes {
  background: linear-gradient(140deg, #F5B764, var(--m-gold-2));
  box-shadow: 0 6px 18px -5px var(--m-glow),
              0 0 0 4px rgba(227, 146, 47, .14);
}

.svc58 .svc58-no {
  inline-size: 34px;
  block-size: 34px;
  color: #B4BDCC;
  background: transparent;
  border: 1.5px dashed rgba(148, 163, 184, .55);
}

/* ---------- 12) شارات النص ---------- */
.svc58 .svc58-txt {
  padding: .3rem .8rem;
  font-size: .81rem;
  font-weight: 700;
  border-radius: 999px;
}

.svc58 .svc58-cell.is-paid .svc58-txt {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--m-gold), var(--m-gold-2));
  box-shadow: 0 6px 16px -7px var(--m-glow);
}

/* ---------- 13) لوح الدعوة السفلي ---------- */
.svc58 .svc58-cta {
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(80% 140% at 88% -20%, rgba(227, 146, 47, .32), transparent 60%),
    linear-gradient(150deg, var(--m-ink-2), var(--m-ink) 68%);
  box-shadow: 0 30px 70px -34px rgba(17, 28, 26,.60);
}

.svc58 .svc58-cta-text h3 {
  color: #fff;
  font-weight: 900;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
}

.svc58 .svc58-cta-text p {
  color: rgba(255, 255, 255, .70);
}

/* شريط «وهذه ليست كل المنصة» — انتبه: هذا العنصر ابن مباشر لـ .container
   وليس داخل .svc58-cta، فلا يرث خلفيتها الداكنة. لذلك يحمل لوحه الخاص،
   وإلا ظهر نصه الأبيض على خلفية الصفحة الفاتحة فاختفى. */
.svc58 .svc58-hub {
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(70% 180% at 92% 50%, rgba(227, 146, 47, .26), transparent 62%),
    linear-gradient(150deg, var(--m-ink-2), var(--m-ink) 72%);
  box-shadow: 0 22px 54px -30px rgba(17, 28, 26, .58);
  transition: transform 260ms var(--pt-ease),
              border-color 260ms var(--pt-ease),
              box-shadow 260ms var(--pt-ease);
}

.svc58 .svc58-hub:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 146, 47, .42);
  box-shadow: 0 28px 60px -28px rgba(17, 28, 26, .68);
}

.svc58 .svc58-hub-ic {
  color: #fff;
  background: linear-gradient(140deg, var(--m-gold), var(--m-gold-2));
  box-shadow: 0 8px 20px -7px var(--m-glow);
}

.svc58 .svc58-hub strong { color: #fff; }
.svc58 .svc58-hub small  { color: rgba(255, 255, 255, .66); }
.svc58 .svc58-hub-go     { color: #F3B76A; }

/* ---------- 14) الجوال: تحييد «الممرّ» في وضع البطاقات ---------- */
@media (max-width: 767.98px) {
  .svc58 .svc58-head {
    border-radius: 24px;
    padding: 2rem 1.15rem;
  }

  .svc58 .svc58-cell.is-paid {
    box-shadow: none;   /* الحدود الجانبية بلا معنى في وضع البطاقات */
  }

  .svc58 .svc58-table tbody tr:hover {
    box-shadow: none;
  }

  .svc58 .svc58-table tbody tr:hover .svc58-name {
    padding-inline-start: .2rem;
  }

  .svc58 .svc58-toolbar {
    border-radius: 22px;
  }
}

/* ---------- 15) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .svc58 .svc58-bg::before,
  .svc58 .svc58-bg::after {
    animation: none;
  }
  .svc58 .svc58-stat,
  .svc58 .svc58-name,
  .svc58 .svc58-table tbody tr {
    transition: none;
  }
}


/* =============================================================================
   8-و. صفحة 3.html (عينات المحتوى) — نظام الخطّين   ✅ مُفعّل
   -----------------------------------------------------------------------------
   النطاق: html:has(.th-tile-card) ← الكلاس موجود في 3.html فقط (43 بلاطة).
   هذه الصفحة تستخدم قالب التطبيق (قائمة جانبية) لا قالب الهبوط، لذلك
   يشمل التوزيع عناصر القائمة الجانبية والشريط العلوي أيضاً.
   ========================================================================== */

html:has(.th-tile-card) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.th-tile-card) body {
  font-family: var(--f-body);
}

/* خط العناوين */
html:has(.th-tile-card) h1,
html:has(.th-tile-card) h2,
html:has(.th-tile-card) h3,
html:has(.th-tile-card) h4,
html:has(.th-tile-card) h5,
html:has(.th-tile-card) h6,
html:has(.th-tile-card) .btn,
html:has(.th-tile-card) .fw-bold,
html:has(.th-tile-card) .fw-semibold,
html:has(.th-tile-card) .menu-link,
html:has(.th-tile-card) .th-tile-name,
html:has(.th-tile-card) .th-count,
html:has(.th-tile-card) .sp-title,
html:has(.th-tile-card) .sp-name,
html:has(.th-tile-card) .sp-start-val,
html:has(.th-tile-card) .sp-step-price,
html:has(.th-tile-card) .sp-term-price,
html:has(.th-tile-card) .sp-off,
html:has(.th-tile-card) .sp-cta,
html:has(.th-tile-card) .sp-step-num {
  font-family: var(--f-display);
}

/* خط المتن */
html:has(.th-tile-card) .th-search-input,
html:has(.th-tile-card) .sp-sub,
html:has(.th-tile-card) .sp-term-label,
html:has(.th-tile-card) .sp-step-cap,
html:has(.th-tile-card) .sp-note,
html:has(.th-tile-card) .alert,
html:has(.th-tile-card) input,
html:has(.th-tile-card) textarea,
html:has(.th-tile-card) select,
html:has(.th-tile-card) .form-control {
  font-family: var(--f-body);
}


/* =============================================================================
   8-ز. صفحة 3.html — إعادة تصميم جذرية «مكتبة العينات»   ✨ مُفعّلة
   -----------------------------------------------------------------------------
   المشكلة في التصميم القائم: 43 بلاطة متطابقة بنفس الأيقونة البرتقالية
   الباهتة — لوحة رتيبة يصعب المسح البصري فيها.

   الحل: منح كل بلاطة درجة لونية خاصة عبر دورة من 8 ألوان تُوزَّع بـ
   nth-child على أعمدة .div-saleh، فتتحوّل الشبكة إلى طيف ملوّن يسهّل
   التعرّف على الخدمة من لونها لا من قراءة اسمها فقط. كل شيء يشتق من
   متغيّر واحد --th-h فيبقى متناسقاً.

   احتياطات:
     · .th-tile-card فيه backdrop-filter أصلاً (زجاج) — أُبقي عليه.
     · .th-topbar موثّق بأن backdrop-filter ينشئ سياق تراص ويحتاج z-index:30
       وإلا انغمرت قائمة الترتيب تحت البلاطات → لم نلمس z-index.
     · التأثيرات الحركية على .th-tile-card وليس على .th-tile (الرابط) حفاظاً
       على قواعد :focus-visible القائمة للتنقل بلوحة المفاتيح.
     · لوح الأسعار وُحّد مع اللون المعتمد #1C2A28 كما في صفحة 2.html.
   ========================================================================== */

/* ---------- 1) لون موحّد لكل البلاطات ----------
   كل التأثيرات (الأيقونة، الحافّة، الظل، التوهّج) تشتق من --th-h وحده،
   فتغيير هذا الرقم يغيّر لون البلاطات كلها دفعة واحدة:
       22 = النحاسي (هوية الموقع #D46E2A)  ·  158 = أخضر  ·  212 = أزرق  */
html:has(.th-tile-card) .div-saleh { --th-h: 22; }

/* ---------- 2) البلاطة: أكبر وأعمق وبحافّة لونية ---------- */
html:has(.th-tile-card) .th-tile-card {
  position: relative;
  padding: 1.35rem .85rem 1.15rem;
  border-radius: 22px;
  border: 1px solid hsla(var(--th-h), 45%, 62%, .26);
  background:
    radial-gradient(120% 90% at 50% -18%, hsla(var(--th-h), 82%, 62%, .16), transparent 64%),
    linear-gradient(160deg, #FFFFFF, hsla(var(--th-h), 60%, 96%, .85));
  box-shadow: 0 10px 26px -14px hsla(var(--th-h), 50%, 38%, .26);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1),
              box-shadow .28s ease,
              border-color .28s ease;
}

/* حافّة لونية علوية تتمدّد عند المرور */
html:has(.th-tile-card) .th-tile-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 50% 50%;
  block-size: 3px;
  border-radius: 0 0 100px 100px;
  background: linear-gradient(90deg,
              hsl(var(--th-h), 78%, 58%),
              hsl(var(--th-h), 66%, 44%));
  transition: inset-inline .34s cubic-bezier(.4, 0, .2, 1);
}

html:has(.th-tile-card) .th-tile:hover .th-tile-card::before {
  inset-inline: 0 0;
}

html:has(.th-tile-card) .th-tile:hover .th-tile-card {
  transform: translateY(-7px);
  border-color: hsla(var(--th-h), 70%, 52%, .55);
  box-shadow: 0 26px 50px -20px hsla(var(--th-h), 58%, 40%, .40);
}

/* ---------- 3) الأيقونة: قرص متدرّج بلون البلاطة ---------- */
html:has(.th-tile-card) .th-tile-ico {
  position: relative;
  inline-size: 56px;
  block-size: 56px;
  margin-block-end: .7rem;
  border-radius: 18px;
  font-size: 1.55rem;
  color: #fff;
  background: linear-gradient(140deg,
              hsl(var(--th-h), 72%, 58%),
              hsl(var(--th-h), 64%, 44%));
  box-shadow: 0 10px 22px -8px hsla(var(--th-h), 62%, 45%, .55);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1),
              box-shadow .28s ease;
}

/* وميض ضوئي يمرّ فوق الأيقونة */
html:has(.th-tile-card) .th-tile-ico::after {
  content: '';
  position: absolute;
  inset-block: -40%;
  inline-size: 55%;
  inset-inline-start: -75%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .65s cubic-bezier(.4, 0, .2, 1);
}

html:has(.th-tile-card) .th-tile:hover .th-tile-ico::after {
  inset-inline-start: 130%;
}

html:has(.th-tile-card) .th-tile:hover .th-tile-ico {
  transform: translateY(-3px) scale(1.09) rotate(-6deg);
  box-shadow: 0 16px 30px -8px hsla(var(--th-h), 62%, 45%, .68);
}

/* ---------- 4) الاسم ---------- */
html:has(.th-tile-card) .th-tile-name {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.55;
  color: #1B2430;
  transition: color .28s ease;
}

html:has(.th-tile-card) .th-tile:hover .th-tile-name {
  color: hsl(var(--th-h), 62%, 36%);
}

/* الوضع الداكن — استرجاع ما دهسته القاعدتان أعلاه.
   ‎teacher-home.css‎ سطر 1397 فيه ‎html.dark-style .th-tile-name { color:#E4E6F1 }‎
   وهي قاعدة سليمة، لكن قاعدتنا أعلاه غير مقيّدة بوضع وتعلوها وزناً فتفرض
   ‎#1B2430‎ في الوضعين. النتيجة نصٌّ داكن على بطاقة داكنة: قِيس تباينه 1.21،
   أي غير مقروء عملياً — وهو العيب الوحيد الذي أظهره مسح الموقع كله.

   الدرس أعمّ من هذه القاعدة: أي لون يُكتب في هذا الملف بلا قيد وضع يدهس
   نظيره الداكن في ملفات القالب. فإن أضفت لوناً لعنصر يظهر في الوضعين،
   أضِف معه نظيره ‎html.dark-style‎ هنا. */
html.dark-style:has(.th-tile-card) .th-tile-name {
  color: #E4E6F1;
}

html.dark-style:has(.th-tile-card) .th-tile:hover .th-tile-name {
  color: hsl(var(--th-h), 72%, 74%);
}

/* ---------- 5) نجمة المفضّلة ---------- */
html:has(.th-tile-card) .th-fav {
  z-index: 3;
  transition: transform .24s ease, color .24s ease;
}

html:has(.th-tile-card) .th-tile-wrap:hover .th-fav {
  color: hsl(var(--th-h), 66%, 50%);
}

/* ---------- 6) الشريط العلوي: زجاج أقوى وبحث أوسع ---------- */
html:has(.th-tile-card) .th-topbar {
  padding: .5rem .9rem;
  border-radius: 20px;
  box-shadow: 0 18px 44px -22px rgba(17, 28, 26, .32),
              inset 0 1px 0 rgba(255, 255, 255, .9);
}

html:has(.th-tile-card) .th-topbar h5 .fw-bold {
  font-size: 1.12rem;
  font-weight: 900;
}

html:has(.th-tile-card) .th-count {
  background: linear-gradient(135deg, #E3922F, #C9741C);
  color: #fff;
  padding: .12rem .62rem;
  box-shadow: 0 6px 14px -6px rgba(227, 146, 47, .55);
}

html:has(.th-tile-card) .th-search-input {
  font-size: .95rem;
}

/* ---------- 7) لوح الأسعار: داكن فاخر موحّد مع صفحة 2.html ---------- */
html:has(.th-tile-card) .sp-panel {
  --sp-ink: #FFFFFF;
  --sp-muted: rgba(255, 255, 255, .62);
  --sp-line: rgba(255, 255, 255, .10);

  border-radius: 22px;
  border-color: rgba(255, 255, 255, .10);
  background:
    radial-gradient(80% 150% at 92% -20%, rgba(227, 146, 47, .30), transparent 60%),
    linear-gradient(150deg, var(--pal-hero), var(--pal-hero-2) 72%);
  box-shadow: 0 26px 60px -32px rgba(17, 28, 26, .62);
}

html:has(.th-tile-card) .sp-title { color: #fff; font-weight: 900; }
html:has(.th-tile-card) .sp-sub   { color: rgba(255, 255, 255, .62); }

html:has(.th-tile-card) .sp-head-ico {
  background: linear-gradient(140deg, #E3922F, #C9741C);
  color: #fff;
  box-shadow: 0 8px 20px -7px rgba(227, 146, 47, .55);
}

html:has(.th-tile-card) .sp-start {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
}

html:has(.th-tile-card) .sp-start-cap { color: rgba(255, 255, 255, .60); }
html:has(.th-tile-card) .sp-start-val { color: #FFCE92; font-weight: 900; }
html:has(.th-tile-card) .sp-chev      { color: rgba(255, 255, 255, .70); }

html:has(.th-tile-card) .sp-card {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .05);
}

html:has(.th-tile-card) .sp-card.is-double {
  background: linear-gradient(180deg,
              rgba(255, 255, 255, .06),
              rgba(227, 146, 47, .10));
}

html:has(.th-tile-card) .sp-name        { color: #fff; }
html:has(.th-tile-card) .sp-term-label  { color: rgba(255, 255, 255, .62); }
html:has(.th-tile-card) .sp-term-price  { color: rgba(255, 255, 255, .92); }
html:has(.th-tile-card) .sp-term-second .sp-term-price b { color: #FFCE92; }
html:has(.th-tile-card) .sp-note        { color: rgba(255, 255, 255, .62); }
html:has(.th-tile-card) .sp-step        { border-color: rgba(255, 255, 255, .10); }
html:has(.th-tile-card) .sp-step-cap    { color: rgba(255, 255, 255, .62); }
html:has(.th-tile-card) .sp-step-price  { color: #fff; }

html:has(.th-tile-card) .sp-cta {
  background: linear-gradient(135deg, #E3922F, #C9741C);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px -10px rgba(227, 146, 47, .60);
}

/* ---------- 8) شريط التنبيه العلوي ---------- */
html:has(.th-tile-card) .alert {
  border-radius: 18px;
  border-inline-start: 4px solid #E3922F;
}

/* =============================================================================
   القائمة الجانبية — تحويل إبداعي كامل   ✨
   -----------------------------------------------------------------------------
   من قائمة بيضاء مسطّحة إلى لوح داكن فاخر بنفس لون #1C2A28 المعتمد.

   لماذا !important هنا؟ ملف assets/css/teacher-home.css يفرض على القائمة:
       سطر 51      خلفية القائمة            بـ !important
       سطر 132-135 خلفية العنصر النشط وحوافه بـ !important
       سطر 144     لون أيقونة العنصر النشط   بـ !important
   فلا سبيل لتجاوزها إلا بنفس الوزن. وما عدا هذه النقاط، بقية القواعد
   مكتوبة بأولوية عادية دون !important.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   السبيدر — سطحٌ واحد بستّة مقابض، والثيم يمسك المقبض الذي يعنيه
   -----------------------------------------------------------------------------
   المبدأ: **الثيم يقرّر اللون، والوضع يقرّر العمق.**

   بدل أن يكرّر كل ثيم تدرّجاً كاملاً (فيصير تعديل الشكل زيارةً لأربعة مواضع)،
   السطح مكتوب مرّة واحدة من ستّة متغيّرات، وكل ثيم لا يلمس إلا ما يميّزه:

       --th-side-top / --th-side-bottom   لونا التدرّج الرأسي
       --th-side-wash / --th-side-wash-h  الغسلة العلوية وارتفاعها
       --th-side-border                   الحدّ الداخلي
       --th-side-shadow                   الظلّ الطافي

   الوسم data-skin يضعه سكربت front-doc/teacher/partials/head.blade.php من اسم
   ملف الثيم، وفي الوضع الداكن يصير «theme-X-dark» — ولهذا كل المُطابقات هنا
   بـ‎^=‎ (بادئة) لا ‎=‎، فتلتقط الوضعين معاً.

   لماذا يبقى داكناً في الأربعة؟ لأن السبيدر هنا حامل الهوية لا مجرّد سطح،
   وتفتيحه في ثيم واحد يكسر شخصية الصفحة كلها. فالتمييز بالحرارة والحدّ والظل:

     Default   → أخضر داكن + غسلة نحاسية خفيفة + ظلّ طافٍ   (الأصل، بلا تغيير)
     Bordered  → **نفس السطح تماماً**، لكن الفصل بالحدّ لا بالظل
     Semi Dark → كحلي غامق
     نحاسي     → أسود غامق تعلوه غسلة نحاسية صريحة

   وفي الوضع الداكن الكلّي: الأربعة تسقط إلى أسود غامق واحد، وتبقى غسلةُ كل
   ثيم وحدّه وظلّه فوقه — فالهوية تهمس ولا تصرخ. هذا ما يجعل الوضع الداكن
   «داكناً حقاً» دون أن يمحو الثيم: الوضع يملك العمق وحده.

   الأوزان: القاعدة الأساس (0,1,1) وكتل الثيمات (0,2,1) وكتلة الوضع الداكن
   (0,2,1) أيضاً — لكنها لا تتقاطع معها في متغيّر واحد، فلا تنازع أصلاً.
   -------------------------------------------------------------------------- */

html.th-teacher {
  /* السطح */
  --th-side-top:    #1F2E2B;
  --th-side-bottom: #131E1C;
  --th-side-wash:   rgba(227, 146, 47, .16);
  --th-side-wash-h: 42%;
  --th-side-border: rgba(255, 255, 255, .07);
  --th-side-shadow: -10px 0 40px -18px rgba(17, 28, 26, .55);

  /* المقدّمة — تتبع السطح لا الثيم: سطحٌ فاتح يقلبها كلها دفعةً واحدة.
     القيم هنا للسطح الداكن (الأصل)، وكتلة «السبيدر الفاتح» أدناه تقلبها. */
  --th-side-fg:        rgba(255, 255, 255, .74);
  --th-side-fg-hover:  #FFFFFF;
  --th-side-ico:       rgba(255, 255, 255, .68);
  --th-side-ico-bg:    rgba(255, 255, 255, .06);
  --th-side-ico-hover: #FFCE92;
  --th-side-active-fg: #FFFFFF;
  --th-side-header:    #F3B76A;
  --th-side-rule:      rgba(255, 255, 255, .06);
}

html.th-teacher #layout-menu.bg-menu-theme,
html.th-teacher .layout-menu.bg-menu-theme {
  background:
    radial-gradient(120% var(--th-side-wash-h) at 50% 0%, var(--th-side-wash), transparent 60%),
    linear-gradient(180deg, var(--th-side-top) 0%, var(--th-side-bottom) 100%) !important;
  border-inline-end: 1px solid var(--th-side-border) !important;
  box-shadow: var(--th-side-shadow);
}

/* ── السبيدر الفاتح — Default و Bordered في الوضع الفاتح وحدهما ──────────────
   السبيدر بلون البادي كما كان قبل تفعيل هذا الملف: يذوب في الصفحة سطحاً،
   ويفترق عنها بالظل (Default) أو بالحدّ (Bordered).

   قلبُ السطح وحده لا يكفي: كل نصوص القائمة وأيقوناتها كانت بيضاء لأنها كُتبت
   لسطح داكن، فتختفي على الفاتح. ولهذا صارت المقدّمة مقابضَ أيضاً — تُقلب هنا
   دفعةً واحدة، لا قاعدةً قاعدة.

   ملحوظتان مقصودتان:
   • قرص الأيقونة النشط يبقى تدرّجاً نحاسياً مصمتاً بنصّ أبيض — يقرأ على
     السطحين معاً فلا داعي لتوكينه.
   • ‎light-style‎ شرط لازم: في الوضع الداكن يعود Default و Bordered أسودَين
     مع البقية، فالوضع يملك العمق.
   -------------------------------------------------------------------------- */
html.light-style[data-skin^="theme-default"].th-teacher,
html.light-style[data-skin^="theme-bordered"].th-teacher {
  --th-side-top:    #FEFDFC;
  --th-side-bottom: #F7F5F1;
  --th-side-wash:   rgba(227, 146, 47, .08);
  --th-side-border: rgba(31, 46, 43, .10);
  --th-side-shadow: -10px 0 34px -20px rgba(17, 28, 26, .22);

  --th-side-fg:        rgba(31, 46, 43, .74);
  --th-side-fg-hover:  #16211F;
  --th-side-ico:       rgba(31, 46, 43, .60);
  --th-side-ico-bg:    rgba(31, 46, 43, .05);
  --th-side-ico-hover: #B85B21;
  --th-side-ico-hover-bg: rgba(227, 146, 47, .16);
  --th-side-active-fg: #8A4A1C;
  --th-side-header:    #B85B21;
  --th-side-rule:      rgba(31, 46, 43, .09);
}

/* Bordered — نفس سطح Default، والفصل ينتقل من الظل إلى الحدّ.
   هذه دلالة Bordered الأصلية في Vuexy: لا شيء يطفو، وكل شيء مُحدَّد.

   ⚠️ لا تُخفَّف هاتان القيمتان: كانتا ‎.20‎ فبدا الثيم «بلا حدّ» — والسبب رقمٌ
   لا ذوق. الحدّ نصف الشفّاف يُركَّب فوق **خلفية السبيدر نفسها** (‎background-clip‎
   الافتراضي ‎border-box‎)، فيخرج بلونٍ قريب منها. القياس على السطح الفاتح
   ‎#FEFDFC‎: عند ‎.20‎ يصير الخط ‎rgb(209,212,210)‎ وتباينه مقابل السطح ‎1.47‎
   فقط — بينما الافتراضي عند ‎.10‎ يعطي ‎1.21‎. أي أن الفرق بين «مؤطّر»
   و«الافتراضي» كان ‎0.26‎ من التباين، وهو دون عتبة الإدراك.
   والأدهى أن «مؤطّر» يحذف الظلّ أيضاً، فكان يخسر فصل الظلّ ولا يكسب فصل الحدّ.
   عند ‎.42‎ يصير الخط ‎rgb(160,166,164)‎ وتباينه ‎2.43‎ — حدٌّ يُرى ويؤدّي وظيفته.
   وفي الوضع الداكن ‎.30‎ فوق ‎#0A0B0C‎ تعطي ‎~2.5‎. قِيس 2026-08-20. */
html[data-skin^="theme-bordered"].th-teacher {
  --th-side-border: rgba(255, 255, 255, .30);
  --th-side-shadow: none;
}
html.light-style[data-skin^="theme-bordered"].th-teacher {
  --th-side-border: rgba(31, 46, 43, .42);
  --th-side-shadow: none;
}

/* Semi Dark — كحلي غامق، والغسلة تبرد معه كي لا تبقى نقطة دافئة ناشزة */
html[data-skin^="theme-semi-dark"].th-teacher {
  --th-side-top:    #14203A;
  --th-side-bottom: #0A1322;
  --th-side-wash:   rgba(116, 152, 255, .15);
  --th-side-border: rgba(255, 255, 255, .10);
  --th-side-shadow: -10px 0 40px -18px rgba(8, 16, 32, .65);
}

/* نحاسي — أسود غامق، والنحاسي يأتي ضوءاً عليه لا صبغةً فيه.
   غسلة أعلى وأوسع + حدّ نحاسي: الهوية في الإضاءة والحافّة، والسطح أسود صافٍ. */
html[data-skin^="theme-cmp"].th-teacher {
  --th-side-top:    #141110;
  --th-side-bottom: #070606;
  --th-side-wash:   rgba(227, 146, 47, .34);
  --th-side-wash-h: 54%;
  --th-side-border: rgba(227, 146, 47, .22);
  --th-side-shadow: -10px 0 44px -18px rgba(0, 0, 0, .72);
}

/* الوضع الداكن الكلّي — أسود غامق للأربعة.
   لا يلمس إلا العمق (لونَي التدرّج): الحدّ والظل سِمتا الثيم لا سِمتا الوضع،
   فلو أعدنا ضبطهما هنا لابتلع الوضعُ الداكن هويةَ Bordered (بلا ظل) وحدّ
   نحاسي النحاسي — وهو ما حدث فعلاً في أول محاولة وكشفه القياس.
   خلفية الصفحة في الوضع الداكن #101114 تفرضها كتلة <style> داخلية بوزن
   ثلاثي الأصناف، وهي قرار مقصود لا نزاحمه — ويكفي أن السبيدر أدكن منها
   فينفصل عنها بالعمق وحده. */
html.dark-style.th-teacher {
  --th-side-top:    #0A0B0C;
  --th-side-bottom: #050506;
}

/* --- الروابط: حالة السكون ---
   ملاحظة خصوصية: assets/css/docs-theme.css سطر 89 يستهدف
   ‎#layout-menu .menu-inner > .menu-item > .menu-link‎ بوزن (1,3,0)،
   أي أعلى من ‎html:has(…) #layout-menu .menu-link‎ ذي الوزن (1,2,1)
   لأن عدد الأصناف يُرجَّح عند تساوي المعرّفات. لذلك نطابق بنيته
   ونضيف بادئتنا فيصير وزننا (1,4,1) ويفوز بلا !important. */
html.th-teacher #layout-menu .menu-inner > .menu-item > .menu-link {
  position: relative;
  margin: 1px 6px;
  padding: .42rem .8rem;
  border-radius: 12px;
  color: var(--th-side-fg);
  font-weight: 600;
  border-block-end: 0;                 /* يلغي الخط الفاصل الفاتح */
  overflow: hidden;
  transition: color .26s cubic-bezier(.4, 0, .2, 1),
              padding-inline-start .26s cubic-bezier(.4, 0, .2, 1);
}

/* طبقة تدرّج تنزلق من حافة البداية عند المرور */
html.th-teacher #layout-menu .menu-item:not(.active) > .menu-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .20),
              rgba(227, 146, 47, .04) 70%,
              transparent);
  opacity: 0;
  transform: translateX(12%);
  transition: opacity .26s ease, transform .26s cubic-bezier(.4, 0, .2, 1);
}

/* يتجاوز hover الأصلي في docs-theme.css سطر 101 (خلفية فاتحة + إزاحة) */
html.th-teacher #layout-menu .menu-inner > .menu-item:not(.active) > .menu-link:hover {
  color: var(--th-side-fg-hover);
  padding-inline-start: 1.15rem;
  background: transparent;
  transform: none;
}

html.th-teacher #layout-menu .menu-item:not(.active) > .menu-link:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* --- الأيقونات: مربّعات دائرية تضيء --- */
html.th-teacher #layout-menu .menu-link .menu-icon {
  inline-size: 28px;
  block-size: 28px;
  margin-inline-end: .55rem;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  font-size: .95rem;
  color: var(--th-side-ico);
  background: var(--th-side-ico-bg);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1),
              background .26s ease, color .26s ease, box-shadow .26s ease;
}

html.th-teacher #layout-menu .menu-inner > .menu-item:not(.active) > .menu-link:hover .menu-icon {
  transform: scale(1.08) rotate(-6deg);
  color: var(--th-side-ico-hover);
  background: rgba(227, 146, 47, .20);
}

/* --- العنصر النشط: قرص ذهبي متوهّج --- */
html.th-teacher #layout-menu .menu-item.active > .menu-link {
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .34),
              rgba(227, 146, 47, .10) 72%,
              transparent) !important;
  border-radius: 12px !important;
  margin: 1px 6px !important;
  padding-inline: .8rem !important;
  color: var(--th-side-active-fg) !important;
  box-shadow: inset 0 0 0 1px rgba(227, 146, 47, .30);
}

html.th-teacher #layout-menu .menu-item.active > .menu-link .menu-icon {
  color: #FFFFFF !important;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 8px 18px -7px rgba(227, 146, 47, .70);
}

/* شريط الحافّة المضيء */
html.th-teacher #layout-menu .menu-item.active > .menu-link::before {
  inset-block: 26%;
  inline-size: 4px;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFD9A3, #E3922F 55%, #C9741C);
  box-shadow: 0 0 12px rgba(227, 146, 47, .75);
}

/* --- ترويسة المجموعة «الفصل الدراسي…» ---
   docs-theme.css سطر 117 يفرض لونها بـ !important فلا مفرّ من مثله. */
html.th-teacher #layout-menu .menu-header {
  position: relative;
  margin-block: .6rem .3rem;
  padding-inline: 1.2rem;
  color: var(--th-side-header) !important;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: 1;
}

html.th-teacher #layout-menu .menu-header::after {
  content: '';
  position: absolute;
  inset-block-end: -.4rem;
  inset-inline: 1.2rem 1.2rem;
  block-size: 1px;
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .45), transparent 75%);
}

/* --- بطاقة المستخدم أعلى الرَيل ---
   docs-theme.css سطر 64-72 يعطيها حشواً وصورة 72px فتلتهم ربع الرَيل؛
   نضغطها لتفسح للروابط (الـ!important في الصورة لموازنة مثله هناك). */
html.th-teacher #layout-menu .user-avatar-section {
  margin: .6rem .8rem .7rem;
  padding: .75rem .7rem;
  border-radius: 14px;
}
html.th-teacher #layout-menu .user-avatar-section img {
  width: 56px !important;
  height: 56px !important;
}

/* --- الفواصل بين العناصر: تُخفَّف بدل الخط الرمادي الصريح --- */
html.th-teacher #layout-menu .menu-item.border-bottom {
  border-block-end-color: var(--th-side-rule) !important;
}

html.th-teacher #layout-menu .menu-divider {
  border-color: var(--th-side-rule);
}

/* --- زر طيّ القائمة --- */
html.th-teacher #layout-menu .layout-menu-toggle {
  color: var(--th-side-ico);
}

/* --- شريط تمرير القائمة بلون الهوية --- */
html.th-teacher #layout-menu .menu-inner::-webkit-scrollbar {
  inline-size: 7px;
}

html.th-teacher #layout-menu .menu-inner::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: rgba(227, 146, 47, .38);
}

html.th-teacher #layout-menu .menu-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(227, 146, 47, .62);
}

html.th-teacher #layout-menu .menu-inner::-webkit-scrollbar-track {
  background: transparent;
}

/* --- ظهور متتابع لطيف عند فتح الصفحة --- */
@keyframes cmp-menu-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

html.th-teacher #layout-menu .menu-inner > .menu-item {
  animation: cmp-menu-in .42s cubic-bezier(.22, 1, .36, 1) both;
}

html.th-teacher #layout-menu .menu-inner > .menu-item:nth-child(1)  { animation-delay: .02s; }
html.th-teacher #layout-menu .menu-inner > .menu-item:nth-child(2)  { animation-delay: .05s; }
html.th-teacher #layout-menu .menu-inner > .menu-item:nth-child(3)  { animation-delay: .08s; }
html.th-teacher #layout-menu .menu-inner > .menu-item:nth-child(4)  { animation-delay: .11s; }
html.th-teacher #layout-menu .menu-inner > .menu-item:nth-child(5)  { animation-delay: .14s; }
html.th-teacher #layout-menu .menu-inner > .menu-item:nth-child(6)  { animation-delay: .17s; }
html.th-teacher #layout-menu .menu-inner > .menu-item:nth-child(7)  { animation-delay: .20s; }
html.th-teacher #layout-menu .menu-inner > .menu-item:nth-child(8)  { animation-delay: .23s; }
html.th-teacher #layout-menu .menu-inner > .menu-item:nth-child(9)  { animation-delay: .26s; }
html.th-teacher #layout-menu .menu-inner > .menu-item:nth-child(n+10) { animation-delay: .29s; }

/* ---------- 9) الجوال ---------- */
@media (max-width: 575.98px) {
  html.th-teacher .th-tile-card {
    padding: 1rem .6rem .85rem;
    border-radius: 18px;
  }

  html.th-teacher .th-tile-ico {
    inline-size: 46px;
    block-size: 46px;
    font-size: 1.25rem;
    border-radius: 15px;
  }

  html.th-teacher .th-tile-name { font-size: .84rem; }
}

/* ---------- 10) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html.th-teacher .th-tile-card,
  html.th-teacher .th-tile-ico,
  html.th-teacher .th-tile-name,
  html.th-teacher .th-tile-card::before {
    transition: none;
  }
  html.th-teacher .th-tile-ico::after { display: none; }

  html.th-teacher #layout-menu .menu-inner > .menu-item {
    animation: none;
  }
  html.th-teacher #layout-menu .menu-link,
  html.th-teacher #layout-menu .menu-icon,
  html.th-teacher #layout-menu .menu-link::after {
    transition: none;
  }
}


/* =============================================================================
   8-ح. صفحة 4.html (خطط الاشتراك) — نظام الخطّين   ✅ مُفعّل
   -----------------------------------------------------------------------------
   النطاق: html:has(.pl-wrap) ← الكلاس موجود في 4.html فقط.
   ملاحظة: plans-premium.css يفرض 'Cairo' صراحةً على .pl-solo-name (سطر 165)
   و .pl-plan-name (سطر 240) و .pl-hero-title (سطر 57)، فأُعيد تعيينها هنا.
   ========================================================================== */

html:has(.pl-wrap) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.pl-wrap) body {
  font-family: var(--f-body);
}

html:has(.pl-wrap) h1,
html:has(.pl-wrap) h2,
html:has(.pl-wrap) h3,
html:has(.pl-wrap) h4,
html:has(.pl-wrap) h5,
html:has(.pl-wrap) h6,
html:has(.pl-wrap) .btn,
html:has(.pl-wrap) .nav-link,
html:has(.pl-wrap) .badge,
html:has(.pl-wrap) .fw-bold,
html:has(.pl-wrap) .fw-semibold,
html:has(.pl-wrap) .pl-solo-name,
html:has(.pl-wrap) .pl-plan-name,
html:has(.pl-wrap) .pl-hero-title,
html:has(.pl-wrap) .pl-solo-sem,
html:has(.pl-wrap) .pl-price-num,
html:has(.pl-wrap) .pl-price-unit,
html:has(.pl-wrap) .pl-mini-title,
html:has(.pl-wrap) .pl-mini-val,
html:has(.pl-wrap) .pl-mini-off,
html:has(.pl-wrap) .pl-tag,
html:has(.pl-wrap) .pl-portfolio-title,
html:has(.pl-wrap) .pl-portfolio-price {
  font-family: var(--f-display);
}

html:has(.pl-wrap) .pl-solo-desc,
html:has(.pl-wrap) .pl-solo-feats li,
html:has(.pl-wrap) .pl-portfolio-sub,
html:has(.pl-wrap) .pl-hero-text,
html:has(.pl-wrap) .pl-plan-desc,
html:has(.pl-wrap) input,
html:has(.pl-wrap) textarea,
html:has(.pl-wrap) select,
html:has(.pl-wrap) .form-control {
  font-family: var(--f-body);
}


/* =============================================================================
   8-ط. صفحة 4.html — إعادة تصميم جذرية «لوح الاشتراك الفاخر»   ✨ مُفعّلة
   -----------------------------------------------------------------------------
   الفكرة: صفحة التسعير هي صفحة القرار، فتستحق أن تبدو ثمينة. بطاقة الخطة
   تتحول من لوح أبيض عادي إلى لوح داكن فاخر بلون #1C2A28 المعتمد، عليه
   سعر ذهبي ضخم ولوح اشتراك زجاجي، فيتركّز نظر الزائر على القيمة والسعر.

   احتياطات:
     · .pl-wrap خلفيتها مكتوبة بـ !important (سطر 318) → لزم مثلها.
     · أزرار .pl-solo-side مكتوبة بـ !important (سطر 190-206) → لزم مثلها.
     · .pl-wrap::before مستخدم أصلاً → استُعمل ::after للهالات المتحركة.
   ========================================================================== */

/* ---------- 1) هالات تسبح في خلفية الصفحة ---------- */
@keyframes cmp-pl-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-4%, 5%, 0) scale(1.16); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

html:has(.pl-wrap) .pl-wrap::after {
  content: '';
  position: absolute;
  inset-block-start: -120px;
  inset-inline-end: -120px;
  inline-size: 460px;
  block-size: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 146, 47, .22), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: cmp-pl-float 34s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* ---------- 2) بطاقة الخطة: لوح داكن فاخر ---------- */
html:has(.pl-wrap) .pl-solo {
  position: relative;
  max-width: 980px;
  gap: 2.2rem;
  padding: 2.4rem;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(85% 130% at 88% -12%, rgba(227, 146, 47, .30), transparent 58%),
    radial-gradient(70% 120% at 6% 108%, rgba(99, 102, 241, .16), transparent 62%),
    linear-gradient(155deg, var(--pal-hero), var(--pal-hero-2) 68%);
  box-shadow: 0 40px 90px -38px rgba(17, 28, 26, .70);
  overflow: hidden;
}

/* حدّ علوي ذهبي متوهّج */
html:has(.pl-wrap) .pl-solo::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12% 12%;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, #E3922F, transparent);
}

/* ---------- 3) شارة الفصل الدراسي ---------- */
@keyframes cmp-pl-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(227, 146, 47, .40); }
  70%  { box-shadow: 0 0 0 10px rgba(227, 146, 47, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(227, 146, 47, 0);   }
}

html:has(.pl-wrap) .pl-solo-sem {
  padding: .32rem .85rem;
  font-size: .76rem;
  color: #FFCE92;
  background: rgba(227, 146, 47, .16);
  border-color: rgba(227, 146, 47, .38);
  animation: cmp-pl-pulse 2.8s ease-out infinite;
}

/* ---------- 4) اسم الخطة والوصف ---------- */
html:has(.pl-wrap) .pl-solo-name {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #FFFFFF;
}

html:has(.pl-wrap) .pl-solo-desc {
  color: rgba(255, 255, 255, .68);
  font-size: 1.02rem;
}

/* ---------- 5) قائمة المزايا: أقراص ✓ ذهبية ---------- */
html:has(.pl-wrap) .pl-solo-feats {
  margin-block-start: 1.6rem;
}

html:has(.pl-wrap) .pl-solo-feats li {
  position: relative;
  gap: .85rem;
  padding: .72rem .55rem;
  border-radius: 12px;
  border-block-end: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .88);
  font-size: .96rem;
  transition: background .26s ease, padding-inline-start .26s cubic-bezier(.4, 0, .2, 1);
}

html:has(.pl-wrap) .pl-solo-feats li:hover {
  background: rgba(227, 146, 47, .10);
  padding-inline-start: 1rem;
}

html:has(.pl-wrap) .pl-solo-feats li i {
  inline-size: 26px;
  block-size: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  margin-block-start: 0;
  font-size: .88rem;
  color: #fff;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 5px 13px -5px rgba(227, 146, 47, .70);
}

/* ---------- 6) لوح الاشتراك: بطاقة زجاجية داخل اللوح الداكن ---------- */
html:has(.pl-wrap) .pl-solo-side {
  position: relative;
  flex-basis: 330px;
  padding: 1.8rem 1.5rem;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(165deg,
              rgba(255, 255, 255, .10),
              rgba(255, 255, 255, .04));
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
              0 22px 46px -26px rgba(17, 28, 26, .70);
}

/* ---------- 7) السعر: رقم ذهبي ضخم ---------- */
html:has(.pl-wrap) .pl-solo-side .pl-plan-price .pl-price-num {
  font-size: clamp(3rem, 7vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  background-image: linear-gradient(140deg, #FFE0B0, #E3922F 52%, #C9741C);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

html:has(.pl-wrap) .pl-solo-side .pl-price-unit {
  margin-block-start: .5rem;
  color: rgba(255, 255, 255, .62);
  font-size: .88rem;
  font-weight: 600;
}

/* ---------- 8) صندوق تفصيل السعر ---------- */
html:has(.pl-wrap) .pl-mini {
  border-radius: 16px;
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
}

html:has(.pl-wrap) .pl-mini-title  { color: #FFCE92; }
html:has(.pl-wrap) .pl-mini-title i { color: #E3922F; }
html:has(.pl-wrap) .pl-mini-row    { color: rgba(255, 255, 255, .72); }
html:has(.pl-wrap) .pl-mini-row + .pl-mini-row {
  border-block-start-color: rgba(255, 255, 255, .12);
}
html:has(.pl-wrap) .pl-mini-val    { color: rgba(255, 255, 255, .92); }
html:has(.pl-wrap) .pl-mini-val b  { color: #FFCE92; }

html:has(.pl-wrap) .pl-mini-off {
  background: linear-gradient(135deg, #34D07B, #12924E);
  color: #fff;
  border: 0;
  box-shadow: 0 5px 13px -6px rgba(18, 146, 78, .70);
}

/* ---------- 9) الأزرار (بـ !important لأن الأصل يستخدمه) ---------- */
html:has(.pl-wrap) .pl-solo-side .pl-plan-actions .btn {
  padding: .9rem 1rem;
  border-radius: 15px;
  font-size: 1.02rem;
}

html:has(.pl-wrap) .pl-solo-side .pl-plan-actions .btn:first-child {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(135deg, #F0A64A, #C9741C) !important;
  box-shadow: 0 16px 34px -14px rgba(227, 146, 47, .85) !important;
}

/* وميض يعبر الزر الرئيسي عند المرور */
html:has(.pl-wrap) .pl-solo-side .pl-plan-actions .btn:first-child::after {
  content: '';
  position: absolute;
  inset-block: -50%;
  inline-size: 42%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .7s cubic-bezier(.4, 0, .2, 1);
}

html:has(.pl-wrap) .pl-solo-side .pl-plan-actions .btn:first-child:hover::after {
  inset-inline-start: 130%;
}

html:has(.pl-wrap) .pl-solo-side .pl-plan-actions .btn:not(:first-child) {
  background: rgba(255, 255, 255, .07) !important;
  color: #FFCE92 !important;
  border: 1px solid rgba(255, 255, 255, .20) !important;
}

html:has(.pl-wrap) .pl-solo-side .pl-plan-actions .btn:not(:first-child):hover {
  background: rgba(255, 255, 255, .13) !important;
  border-color: rgba(227, 146, 47, .55) !important;
}

/* ---------- 10) البطاقتان السفليتان ---------- */
html:has(.pl-wrap) .pl-portfolio {
  position: relative;
  padding: 1.6rem 1.5rem;
  border-radius: 24px;
  border: 1px solid rgba(17, 28, 26, .08);
  background: linear-gradient(160deg, #FFFFFF, #FBF6F0);
  box-shadow: 0 20px 46px -28px rgba(17, 28, 26, .30);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .3s ease, border-color .3s ease;
}

/* حافّة ذهبية تتمدّد */
html:has(.pl-wrap) .pl-portfolio::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 50% 50%;
  block-size: 3px;
  border-radius: 0 0 100px 100px;
  background: linear-gradient(90deg, #E3922F, #C9741C);
  transition: inset-inline .38s cubic-bezier(.4, 0, .2, 1);
}

html:has(.pl-wrap) .pl-portfolio:hover::before { inset-inline: 0 0; }

html:has(.pl-wrap) .pl-portfolio:hover {
  transform: translateY(-6px);
  border-color: rgba(227, 146, 47, .38);
  box-shadow: 0 32px 60px -28px rgba(227, 146, 47, .40);
}

html:has(.pl-wrap) .pl-portfolio-ic {
  inline-size: 54px;
  block-size: 54px;
  border-radius: 17px;
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 10px 22px -8px rgba(227, 146, 47, .60);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

html:has(.pl-wrap) .pl-portfolio:hover .pl-portfolio-ic {
  transform: scale(1.08) rotate(-7deg);
}

html:has(.pl-wrap) .pl-portfolio-title {
  font-size: 1.18rem;
  font-weight: 900;
}

html:has(.pl-wrap) .pl-portfolio .btn {
  padding: .6rem 1.3rem;
  font-weight: 800;
}

/* ---------- 11) الجوال ---------- */
@media (max-width: 767.98px) {
  html:has(.pl-wrap) .pl-solo {
    padding: 1.6rem 1.2rem;
    border-radius: 24px;
  }
  html:has(.pl-wrap) .pl-solo-side {
    padding: 1.4rem 1.1rem;
    border-radius: 20px;
  }
  html:has(.pl-wrap) .pl-solo-feats li:hover {
    padding-inline-start: .55rem;
  }
}

/* ---------- 12) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.pl-wrap) .pl-wrap::after,
  html:has(.pl-wrap) .pl-solo-sem {
    animation: none;
  }
  html:has(.pl-wrap) .pl-portfolio,
  html:has(.pl-wrap) .pl-portfolio-ic,
  html:has(.pl-wrap) .pl-portfolio::before,
  html:has(.pl-wrap) .pl-solo-feats li {
    transition: none;
  }
  html:has(.pl-wrap) .pl-solo-side .pl-plan-actions .btn:first-child::after {
    display: none;
  }
}

/* ---------- 13) صقل نهائي لصفحة الخطط: عرض ثابت، طبقات أنعم، وجوال أهدأ ---------- */
html:has(.pl-wrap),
html:has(.pl-wrap) body {
  overflow-x: clip;
}

html:has(.pl-wrap) .pl-wrap {
  overflow-x: clip !important;
  isolation: isolate;
}

html:has(.pl-wrap) .pl-container {
  width: min(100%, 1180px);
  max-width: min(1120px, calc(100% - 32px)) !important;
  padding-inline: clamp(.9rem, 2.4vw, 1.5rem);
}

html:has(.pl-wrap) .pl-hero {
  max-width: 980px;
  align-items: center;
  padding: 1rem 1.25rem;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 252, 248, .82));
  border-color: rgba(255, 255, 255, .72);
  box-shadow: 0 22px 50px -34px rgba(17, 28, 26, .35);
}

html.dark-style:has(.pl-wrap) .pl-hero {
  background:
    linear-gradient(135deg, rgba(27, 28, 32, .86), rgba(24, 25, 29, .72));
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 22px 50px -34px rgba(0, 0, 0, .70);
}

html:has(.pl-wrap) .pl-hero-main {
  flex: 1 1 360px;
}

html:has(.pl-wrap) .pl-hero-actions {
  flex: 0 1 310px;
  justify-content: flex-end;
}

html:has(.pl-wrap) .pl-hero .btn,
html:has(.pl-wrap) .pl-plan-actions .btn,
html:has(.pl-wrap) .pl-portfolio .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  white-space: normal;
  min-inline-size: 0;
}

html:has(.pl-wrap) .pl-solo {
  max-width: 1080px;
  gap: 2.25rem;
  padding: 2.35rem;
  border-radius: 26px;
  background:
    radial-gradient(70% 120% at 86% -10%, rgba(227, 146, 47, .25), transparent 56%),
    radial-gradient(62% 105% at 0% 104%, rgba(69, 135, 116, .16), transparent 58%),
    linear-gradient(145deg, #152521 0%, #0E1C19 58%, #17211F 100%);
  box-shadow:
    0 34px 82px -48px rgba(17, 28, 26, .78),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

html:has(.pl-wrap) .pl-solo-main,
html:has(.pl-wrap) .pl-solo-side {
  position: relative;
  z-index: 1;
}

html:has(.pl-wrap) .pl-solo-name {
  font-size: 2.45rem;
  letter-spacing: 0;
}

html:has(.pl-wrap) .pl-solo-desc {
  max-width: 36rem;
  line-height: 1.8;
}

html:has(.pl-wrap) .pl-solo-feats {
  display: grid;
  gap: .15rem;
}

html:has(.pl-wrap) .pl-solo-feats li {
  min-height: 48px;
  align-items: center;
  padding-block: .62rem;
}

html:has(.pl-wrap) .pl-solo-side {
  flex: 0 0 388px;
  align-self: center;
  padding: 1.95rem 1.6rem;
  border-radius: 24px;
}

html:has(.pl-wrap) .pl-solo-side .pl-plan-price .pl-price-num {
  font-size: 4.45rem;
  letter-spacing: 0;
  unicode-bidi: isolate;
}

html:has(.pl-wrap) .pl-solo-side .pl-plan-price {
  margin-block-end: 1.25rem;
}

html:has(.pl-wrap) .pl-mini {
  margin-block-end: 1rem;
  padding: .95rem 1rem;
}

html:has(.pl-wrap) .pl-mini-title {
  font-size: .94rem;
  margin-block-end: .58rem;
}

html:has(.pl-wrap) .pl-mini-row {
  gap: .8rem;
  padding-block: .48rem;
  font-size: .96rem;
  line-height: 1.65;
}

html:has(.pl-wrap) .pl-mini-row > span:first-child {
  font-weight: 700;
}

html:has(.pl-wrap) .pl-mini-val {
  direction: ltr;
  align-items: center;
  gap: .42rem;
  font-size: 1.02rem;
  unicode-bidi: isolate;
}

html:has(.pl-wrap) .pl-mini-val b {
  font-size: 1.28rem;
  line-height: 1;
}

html:has(.pl-wrap) .pl-mini-val s {
  font-size: 1rem;
  line-height: 1;
}

html:has(.pl-wrap) .pl-mini-val svg {
  inline-size: 16px !important;
  block-size: 16px !important;
}

html:has(.pl-wrap) .pl-extras {
  max-width: 1088px;
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

html:has(.pl-wrap) .pl-portfolio {
  min-height: 156px;
  align-items: center;
  gap: 1.1rem;
}

html:has(.pl-wrap) .pl-portfolio-info {
  min-width: 0;
  flex: 1 1 280px;
}

html:has(.pl-wrap) .pl-portfolio-sub {
  line-height: 1.75;
}

html.dark-style:has(.pl-wrap) .pl-portfolio {
  border-color: rgba(255, 255, 255, .08);
  background: linear-gradient(160deg, rgba(27, 28, 32, .92), rgba(21, 23, 27, .86));
  box-shadow: 0 20px 46px -30px rgba(0, 0, 0, .76);
}

@media (max-width: 991.98px) {
  html:has(.pl-wrap) .pl-solo {
    gap: 1.35rem;
    padding: 1.75rem 1.35rem;
  }

  html:has(.pl-wrap) .pl-solo-name {
    font-size: 2rem;
  }

  html:has(.pl-wrap) .pl-solo-side {
    flex: 0 0 340px;
  }

  html:has(.pl-wrap) .pl-extras {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  html:has(.pl-wrap) .pl-container {
    max-width: 100% !important;
    padding-inline: .85rem;
  }

  html:has(.pl-wrap) .pl-hero {
    border-radius: 20px;
    padding: .95rem;
  }

  html:has(.pl-wrap) .pl-hero-main {
    flex-basis: 100%;
  }

  html:has(.pl-wrap) .pl-hero-title {
    font-size: 1rem;
    line-height: 1.55;
  }

  html:has(.pl-wrap) .pl-hero-actions {
    flex-basis: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html:has(.pl-wrap) .pl-hero-actions .btn {
    padding-inline: .7rem;
  }

  html:has(.pl-wrap) .pl-solo {
    padding: 1.45rem 1rem;
    border-radius: 22px;
  }

  html:has(.pl-wrap) .pl-solo-name {
    font-size: 1.82rem;
  }

  html:has(.pl-wrap) .pl-solo-desc {
    font-size: .94rem;
  }

  html:has(.pl-wrap) .pl-solo-feats {
    margin-block-start: 1.1rem;
  }

  html:has(.pl-wrap) .pl-solo-feats li {
    min-height: 44px;
    gap: .65rem;
    padding: .58rem .25rem;
    font-size: .92rem;
  }

  html:has(.pl-wrap) .pl-solo-side {
    inline-size: 100%;
    flex: 0 1 auto;
    padding: 1.35rem 1.05rem;
  }

  html:has(.pl-wrap) .pl-solo-side .pl-plan-price .pl-price-num {
    font-size: 3.45rem;
  }

  html:has(.pl-wrap) .pl-mini-row {
    align-items: flex-start;
    font-size: .9rem;
    line-height: 1.55;
  }

  html:has(.pl-wrap) .pl-mini-title {
    font-size: .88rem;
  }

  html:has(.pl-wrap) .pl-mini-val {
    font-size: .92rem;
  }

  html:has(.pl-wrap) .pl-mini-val b {
    font-size: 1.1rem;
  }

  html:has(.pl-wrap) .pl-mini-val s {
    font-size: .9rem;
  }

  html:has(.pl-wrap) .pl-portfolio {
    min-height: 0;
    padding: 1.1rem 1rem;
    border-radius: 20px;
  }

  html:has(.pl-wrap) .pl-portfolio-info {
    flex-basis: 100%;
  }
}

@media (max-width: 420px) {
  html:has(.pl-wrap) .pl-hero-actions {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   8-ي. صفحة 5.html (الأسئلة الشائعة) — نظام الخطّين   ✅ مُفعّل
   -----------------------------------------------------------------------------
   النطاق: html:has(.hp-faq) ← الكلاس موجود في 5.html فقط.
   ملاحظة: page-premium.css سطر 11 يفرض 'Cairo' على .page-title فأُعيد تعيينه.
   ========================================================================== */

html:has(.hp-faq) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.hp-faq) body {
  font-family: var(--f-body);
}

html:has(.hp-faq) h1,
html:has(.hp-faq) h2,
html:has(.hp-faq) h3,
html:has(.hp-faq) h4,
html:has(.hp-faq) h5,
html:has(.hp-faq) h6,
html:has(.hp-faq) .btn,
html:has(.hp-faq) .nav-link,
html:has(.hp-faq) .badge,
html:has(.hp-faq) .fw-bold,
html:has(.hp-faq) .fw-semibold,
html:has(.hp-faq) .page-title,
html:has(.hp-faq) .hp-eyebrow,
html:has(.hp-faq) .accordion-button {
  font-family: var(--f-display);
}

html:has(.hp-faq) .page-lead,
html:has(.hp-faq) .accordion-body,
html:has(.hp-faq) p,
html:has(.hp-faq) input,
html:has(.hp-faq) textarea,
html:has(.hp-faq) select,
html:has(.hp-faq) .form-control {
  font-family: var(--f-body);
}


/* =============================================================================
   8-ك. صفحة 5.html — إعادة تصميم جذرية «دليل الإجابات»   ✨ مُفعّلة
   -----------------------------------------------------------------------------
   الفكرة: 17 مستطيلاً أبيض متطابقاً يصعب تتبّعها. التحويل يجعلها لوحاً
   داكناً فاخراً (نفس #1C2A28) تُرقَّم أسئلته تلقائياً بعدّاد CSS، ويحمل كل
   سؤال زرّ فتح دائري ذهبي، فيتحوّل من قائمة صمّاء إلى دليل مقروء.

   احتياطات:
     · ‎.accordion:not(.accordion-bordered) > .card:not(:last-of-type)‎ في core.css
       سطر 11726 يفرض ‎border-radius:6px !important‎ و ‎margin-bottom:.5rem‎ بخصوصية
       (0,4,0) — وهي أعلى من ‎.hp-faq .accordion-item‎ (0,2,0) في home-premium.css.
       لذلك أُضيف ‎.card‎ إلى محدداتنا لترتفع إلى (0,4,1) وتتغلّب عليها.
     · ‎.accordion-button::after‎ هو شيفرون بوتستراب (صورة SVG في الخلفية)
       → أُعيد تشكيله كقرص دائري بدل إخفائه، فيبقى مؤشّر الحالة قائماً.
     · ‎.accordion-button::before‎ حرّ (core.css يستعمله فقط تحت
       ‎.accordion-arrow-left‎ وهي غير موجودة هنا) → استُعمل لأرقام الأسئلة.
     · الترقيم عبر counter تلقائي: أي سؤال يُضاف أو يُحذف يُعاد ترقيمه ذاتياً.
   ========================================================================== */

/* ---------- 1) هالات الخلفية تسبح ---------- */
@keyframes cmp-faq-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -4%, 0) scale(1.15); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

html:has(.hp-faq) .hp-orb-1 { animation: cmp-faq-float 30s cubic-bezier(.4, 0, .2, 1) infinite; }
html:has(.hp-faq) .hp-orb-2 { animation: cmp-faq-float 38s cubic-bezier(.4, 0, .2, 1) infinite -13s; }

/* ---------- 2) اللوح الداكن الذي يضمّ العنوان والأسئلة ---------- */
html:has(.hp-faq) .hp-hero .landing-hero > .container {
  position: relative;
  padding: clamp(2.4rem, 5vw, 3.8rem) clamp(1.2rem, 3.5vw, 2.8rem);
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(80% 120% at 85% -12%, rgba(227, 146, 47, .28), transparent 58%),
    radial-gradient(70% 110% at 8% 106%, rgba(99, 102, 241, .18), transparent 62%),
    linear-gradient(155deg, var(--pal-hero), var(--pal-hero-2) 68%);
  box-shadow: 0 40px 90px -38px rgba(17, 28, 26, .68);
}

/* ---------- 3) شارة «مركز المساعدة» ---------- */
@keyframes cmp-faq-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(227, 146, 47, .40); }
  70%  { box-shadow: 0 0 0 10px rgba(227, 146, 47, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(227, 146, 47, 0);   }
}

html:has(.hp-faq) .hp-eyebrow {
  color: #FFCE92;
  background: rgba(227, 146, 47, .16);
  border-color: rgba(227, 146, 47, .38);
  animation: cmp-faq-pulse 2.8s ease-out infinite;
}

/* ---------- 4) العنوان ---------- */
@keyframes cmp-faq-shimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

html:has(.hp-faq) .page-title {
  color: #FFFFFF;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -.02em;
}

html:has(.hp-faq) .page-title .hp-gradient-text {
  background-image: linear-gradient(110deg,
                    #E3922F 0%, #FFD9A3 26%, #F0A64A 48%,
                    #E3922F 72%, #FFD9A3 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cmp-faq-shimmer 7s linear infinite;
}

html:has(.hp-faq) .page-title::after {
  inline-size: 84px;
  block-size: 4px;
  background: linear-gradient(90deg, #E3922F, #FFD9A3);
  box-shadow: 0 0 16px rgba(227, 146, 47, .65);
}

html:has(.hp-faq) .page-lead {
  color: rgba(255, 255, 255, .70);
  font-size: 1.08rem;
}

/* ---------- 5) عدّاد الأسئلة التلقائي ---------- */
html:has(.hp-faq) .hp-faq {
  counter-reset: cmpfaq;
}

html:has(.hp-faq) .hp-faq .accordion-item.card {
  counter-increment: cmpfaq;
  position: relative;
  margin-block-end: .75rem !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  background: rgba(255, 255, 255, .05);
  box-shadow: none !important;
  transition: background .28s ease, border-color .28s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
}

html:has(.hp-faq) .hp-faq .accordion-item.card:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 146, 47, .34) !important;
  background: rgba(255, 255, 255, .08);
}

/* ---------- 6) زر السؤال + رقمه ---------- */
html:has(.hp-faq) .hp-faq .accordion-button {
  gap: .9rem;
  align-items: center;
  padding: 1.15rem 1.35rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  background: transparent;
}

/* الرقم — يُولَّد تلقائياً من العدّاد */
html:has(.hp-faq) .hp-faq .accordion-button::before {
  content: counter(cmpfaq, decimal-leading-zero);
  flex: 0 0 auto;
  min-inline-size: 2.6ch;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
  background-image: linear-gradient(140deg, #FFE0B0, #E3922F 55%, #C9741C);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .75;
  transition: opacity .28s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
}

html:has(.hp-faq) .hp-faq .accordion-item:hover .accordion-button::before,
html:has(.hp-faq) .hp-faq .accordion-button:not(.collapsed)::before {
  opacity: 1;
  transform: scale(1.14);
}

/* ---------- 7) الشيفرون → قرص دائري ---------- */
/* ⚠️ عطلان في السهم، كلاهما من القالب لا من تصميمنا:

   ١) الأكورديون يحمل صنف ‎accordion-without-arrow‎، وcore.css سطر 11709
      يكتب عليه ‎background-image: none !important‎ — أي أن صورة الشيفرون
      **محذوفة أصلاً**. فكان قرصنا الدائري فارغاً بلا سهم في كل الأسئلة.
      الحلّ: لا نصارع الصورة، بل نرسم السهم **حرفاً** من خطّ tabler عبر
      ‎content‎ — فلا شأن لنا بـ‎background-image‎ بعدها.

   ٢) دوران RTL في القالب متضارب: core.css سطر 11765 يدير المطويّ
      ‎rotate(180deg)‎ وسطر 11770 يدير المفتوح ‎rotate(90deg)‎ — مقاسان
      لأيقونة القالب لا لشيفروننا. فنُبطلهما ونضع الدوران الصحيح:
      مطويّ ▾ بلا دوران، ومفتوح ▴ بنصف دورة.

   الخصوصية: قاعدتنا (0,3,2) وقاعدة القالب (0,2,1)؛ وللمفتوح (0,4,2)
   مقابل (0,3,1) — فنتقدّم بلا ‎!important‎. */
html:has(.hp-faq) .hp-faq .accordion-button::after {
  content: "\ea5f";                      /* ti-chevron-down */
  font-family: "tabler-icons";
  font-weight: 400;
  font-size: .95rem;
  line-height: 1;
  flex: 0 0 auto;
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  margin-inline-start: auto;
  border-radius: 50%;
  color: rgba(255, 255, 255, .7);
  background-image: none;
  background-color: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  transform: none;
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), color .28s ease,
              background-color .28s ease, border-color .28s ease;
}

html:has(.hp-faq) .hp-faq .accordion-item:hover .accordion-button.collapsed::after {
  color: #FFCE92;
  background-color: rgba(227, 146, 47, .16);
  border-color: rgba(227, 146, 47, .35);
}

html:has(.hp-faq) .hp-faq .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
  color: #FFFFFF;
  background-color: rgba(227, 146, 47, .28);
  border-color: rgba(227, 146, 47, .55);
}

/* ---------- 8) السؤال المفتوح: قضيب ذهبي + تظليل ---------- */
html:has(.hp-faq) .hp-faq .accordion-item.card:has(.accordion-button:not(.collapsed)) {
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .16),
              rgba(227, 146, 47, .05) 62%,
              rgba(255, 255, 255, .04));
  border-color: rgba(227, 146, 47, .40) !important;
}

html:has(.hp-faq) .hp-faq .accordion-item.card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 30%;
  inline-size: 3px;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFD9A3, #E3922F 55%, #C9741C);
  opacity: 0;
  transition: opacity .3s ease, inset-block .3s ease;
  z-index: 2;
}

html:has(.hp-faq) .hp-faq .accordion-item.card:has(.accordion-button:not(.collapsed))::before {
  opacity: 1;
  inset-block: 12%;
}

html:has(.hp-faq) .hp-faq .accordion-button:not(.collapsed) {
  color: #FFCE92;
  background: transparent;
}

/* ---------- 9) نص الإجابة ---------- */
html:has(.hp-faq) .hp-faq .accordion-body {
  padding: .2rem 1.35rem 1.3rem;
  color: rgba(255, 255, 255, .72);
  font-size: .97rem;
  line-height: 2;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
  margin-block-start: .2rem;
  padding-block-start: 1rem;
}

/* ---------- 10) الجوال ---------- */
@media (max-width: 767.98px) {
  html:has(.hp-faq) .hp-hero .landing-hero > .container {
    padding: 1.9rem 1.05rem;
    border-radius: 24px;
  }
  html:has(.hp-faq) .hp-faq .accordion-button {
    padding: 1rem .95rem;
    font-size: .95rem;
    gap: .6rem;
  }
  html:has(.hp-faq) .hp-faq .accordion-body {
    padding-inline: .95rem;
  }
}

/* ---------- 11) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.hp-faq) .hp-orb-1,
  html:has(.hp-faq) .hp-orb-2,
  html:has(.hp-faq) .hp-eyebrow,
  html:has(.hp-faq) .page-title .hp-gradient-text {
    animation: none;
  }
  html:has(.hp-faq) .hp-faq .accordion-item,
  html:has(.hp-faq) .hp-faq .accordion-button::before,
  html:has(.hp-faq) .hp-faq .accordion-button::after,
  html:has(.hp-faq) .hp-faq .accordion-item::before {
    transition: none;
  }
}


/* =============================================================================
   8-ل. صفحة 6.html (من نحن) — نظام الخطّين   ✅ مُفعّل
   -----------------------------------------------------------------------------
   النطاق: html:has(.MsoNormal) ← الكلاس MsoNormal موجود في 6.html فقط.

   ⚠️ خصوصية هذه الصفحة: محتواها ملصوق من Microsoft Word، وكل <span> فيه
   يحمل نمطاً مضمّناً:  style="font-size:14.0pt; line-height:107%; font-family:RB"
   (17 موضعاً). الأنماط المضمّنة تتغلّب على أي قاعدة من ملف خارجي إلا بـ
   !important، والخط RB غير موجود أصلاً فيسقط المتصفح إلى خط افتراضي.
   لذلك يستخدم هذا القسم !important على الخط والحجم داخل .page-prose وحدها.
   ========================================================================== */

html:has(.MsoNormal) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.MsoNormal) body {
  font-family: var(--f-body);
}

html:has(.MsoNormal) h1,
html:has(.MsoNormal) h2,
html:has(.MsoNormal) h3,
html:has(.MsoNormal) h4,
html:has(.MsoNormal) h5,
html:has(.MsoNormal) h6,
html:has(.MsoNormal) .btn,
html:has(.MsoNormal) .nav-link,
html:has(.MsoNormal) .badge,
html:has(.MsoNormal) .fw-bold,
html:has(.MsoNormal) .fw-semibold,
html:has(.MsoNormal) .page-title,
html:has(.MsoNormal) .hp-eyebrow {
  font-family: var(--f-display);
}

/* إبطال خط Word المضمّن: المتن كله بخط القراءة، والعناوين بخط العرض */
html:has(.MsoNormal) .page-prose,
html:has(.MsoNormal) .page-prose p,
html:has(.MsoNormal) .page-prose span {
  font-family: var(--f-body) !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

html:has(.MsoNormal) .page-prose strong,
html:has(.MsoNormal) .page-prose strong span {
  font-family: var(--f-display) !important;
}


/* =============================================================================
   8-م. صفحة 6.html — إعادة تصميم جذرية «بيان الهوية»   ✨ مُفعّلة
   -----------------------------------------------------------------------------
   المشكلة: الصفحة جدار نصّي ملصوق من Word — أربعة عناوين وأربع فقرات
   تفصلها فقرات فارغة (&nbsp;)، بلا أي بنية بصرية.

   التحويل: تُقرأ البنية من الترميز نفسه دون لمسه، عبر ‎:has()‎
       الفقرة التي تحوي ‎<strong>‎        → عنوان قسم مرقّم
       الفقرة التالية لها                 → نص القسم بقضيب جانبي
       الفقرة التي يليها عنوان            → فاصل فارغ يُخفى
   والترقيم بعدّاد CSS، فلو أُضيف قسم جديد رُقّم تلقائياً.

   ترتيب الفقرات في الصفحة (تحقّقنا منه): عنوان، نص، فاصل ×3 ثم عنوان، نص.
   القاعدة ‎p:has(+ p:has(strong))‎ تطابق الفواصل الثلاثة وحدها بدقة.
   ========================================================================== */

/* ---------- 1) الهالات تسبح ---------- */
@keyframes cmp-abt-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -5%, 0) scale(1.16); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

html:has(.MsoNormal) .hp-orb-1 { animation: cmp-abt-float 32s cubic-bezier(.4, 0, .2, 1) infinite; }
html:has(.MsoNormal) .hp-orb-2 { animation: cmp-abt-float 40s cubic-bezier(.4, 0, .2, 1) infinite -14s; }

/* ---------- 2) ترويسة داكنة درامية ---------- */
@keyframes cmp-abt-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(227, 146, 47, .40); }
  70%  { box-shadow: 0 0 0 10px rgba(227, 146, 47, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(227, 146, 47, 0);   }
}

html:has(.MsoNormal) .hp-hero .landing-hero > .container > .text-center {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  margin-block-end: 2rem;
  padding: clamp(2.4rem, 5vw, 3.8rem) clamp(1.2rem, 3.5vw, 2.6rem);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(80% 130% at 86% -14%, rgba(227, 146, 47, .30), transparent 58%),
    radial-gradient(70% 115% at 8% 108%, rgba(99, 102, 241, .18), transparent 62%),
    linear-gradient(155deg, var(--pal-hero), var(--pal-hero-2) 68%);
  box-shadow: 0 40px 90px -38px rgba(17, 28, 26, .68);
}

html:has(.MsoNormal) .hp-eyebrow {
  color: #FFCE92;
  background: rgba(227, 146, 47, .16);
  border-color: rgba(227, 146, 47, .38);
  animation: cmp-abt-pulse 2.8s ease-out infinite;
}

html:has(.MsoNormal) .page-title {
  color: #FFFFFF;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -.02em;
}

html:has(.MsoNormal) .page-title::after {
  inline-size: 84px;
  block-size: 4px;
  background: linear-gradient(90deg, #E3922F, #FFD9A3);
  box-shadow: 0 0 16px rgba(227, 146, 47, .65);
}

/* ---------- 3) لوح المحتوى ---------- */
html:has(.MsoNormal) .page-prose {
  /* لا عدّاد — استُبدل الترقيم بأيقونات */
  max-width: 880px;
  padding: clamp(1.8rem, 4vw, 3.2rem) clamp(1.4rem, 4vw, 3.2rem);
  border-radius: 28px;
  border: 1px solid rgba(17, 28, 26, .07);
  background: linear-gradient(165deg, #FFFFFF, #FBF7F2);
  box-shadow: 0 28px 64px -34px rgba(17, 28, 26, .30);
  font-size: 1.06rem;
  line-height: 2.05;
}

/* ---------- 4) الفقرات الفاصلة (&nbsp;) تُخفى ---------- */
html:has(.MsoNormal) .page-prose p:has(+ p:has(strong)) {
  display: none;
}

/* ---------- 5) عناوين الأقسام: أيقونة معبّرة لكل قسم ---------- */
html:has(.MsoNormal) .page-prose p:has(strong) {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-block: 1.7rem .55rem;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 900;
  line-height: 1.4;
  color: var(--pal-ink);
}

html:has(.MsoNormal) .page-prose p:has(strong):first-child {
  margin-block-start: 0;
}
/* قرص الأيقونة — رموز من خط tabler-icons المحمّل أصلاً في الصفحة.
   الأيقونة الافتراضية للقسم الأول، ثم تُخصَّص بقية الأقسام بـ nth-of-type
   (فقرات العناوين هي 1 و4 و7 و10 في ترتيب <p> داخل المقال).

   بدائل جاهزة للتبديل السريع — غيّر قيمة content فقط:
     ea51 bulb (idea)  ·  eb43 trending-up  ·  ea38 bolt  ·  eac7 key
     eb22 shield-check ·  ed51 seeding      ·  eb3c thumb-up  ·  eb10 puzzle
     ebf6 building-community · eab0 friends · ec45 rocket · eb2e star   */
html:has(.MsoNormal) .page-prose p:has(strong)::before {
  content: "\fa21";                 /* ti-users-group — من نحن */
  font-family: "tabler-icons";
  flex: 0 0 auto;
  inline-size: 46px;
  block-size: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 10px 22px -9px rgba(227, 146, 47, .70);
}

html:has(.MsoNormal) .page-prose p:nth-of-type(4):has(strong)::before {
  content: "\ea51";                 /* ti-bulb — لماذا نحن مهمون */
}

html:has(.MsoNormal) .page-prose p:nth-of-type(7):has(strong)::before {
  content: "\ea2c";                 /* ti-award — ما يميزنا */
}

html:has(.MsoNormal) .page-prose p:nth-of-type(10):has(strong)::before {
  content: "\f51a";                 /* ti-target-arrow — هدفنا */
}

html:has(.MsoNormal) .page-prose p:has(strong) strong {
  font-weight: 900;
}

/* ---------- 6) نص القسم: قضيب جانبي ذهبي ---------- */
html:has(.MsoNormal) .page-prose p:has(strong) + p {
  position: relative;
  margin: 0 0 .4rem;
  padding-inline-start: 1.35rem;
  margin-inline-start: 1.35rem;
  color: #4A5560;
  font-size: 1.06rem;
  line-height: 2.1;
  border-inline-start: 3px solid rgba(227, 146, 47, .22);
  transition: border-color .3s ease, color .3s ease;
}

html:has(.MsoNormal) .page-prose p:has(strong) + p:hover {
  border-inline-start-color: #E3922F;
  color: #2B3540;
}

/* ---------- 7) ملاحظة: لا حرف استهلالي (drop cap) في العربية ----------
   ::first-letter يعزل أول حرف في صندوق مستقل، وهذا يكسر اتصال الحروف
   في الخط العربي المتّصل — فتظهر «نحن» بنون منفصلة: ن حن.
   لذلك أُزيلت القاعدة نهائياً ولا يجوز إعادتها على نص عربي.            */

/* ---------- 8) الجوال ---------- */
@media (max-width: 767.98px) {
  html:has(.MsoNormal) .hp-hero .landing-hero > .container > .text-center {
    padding: 1.9rem 1.05rem;
    border-radius: 24px;
  }
  html:has(.MsoNormal) .page-prose {
    padding: 1.5rem 1.1rem;
    border-radius: 22px;
  }
  html:has(.MsoNormal) .page-prose p:has(strong) {
    gap: .6rem;
    margin-block: 1.9rem .7rem;
  }
  html:has(.MsoNormal) .page-prose p:has(strong)::before {
    inline-size: 38px;
    block-size: 38px;
    border-radius: 12px;
    font-size: .9rem;
  }
  html:has(.MsoNormal) .page-prose p:has(strong) + p {
    padding-inline-start: 1rem;
    margin-inline-start: .5rem;
  }
}

/* ---------- 9) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.MsoNormal) .hp-orb-1,
  html:has(.MsoNormal) .hp-orb-2,
  html:has(.MsoNormal) .hp-eyebrow {
    animation: none;
  }
  html:has(.MsoNormal) .page-prose p:has(strong) + p {
    transition: none;
  }
}


/* =============================================================================
   8-ن. صفحتا 7.html و8.html (الشروط والأحكام · سياسة الخصوصية)
        نظام الخطّين + تحسين التصميم   ✅ مُفعّل
   -----------------------------------------------------------------------------
   النطاق: html:has(.page-prose .card.shadow-lg)
   الصفحتان شقيقتان ومتطابقتان بنيوياً، ويستحقّان المظهر نفسه، فوُحّدتا في
   قسم واحد بدل تكرار القواعد مرّتين. المحدد ‎.page-prose .card.shadow-lg‎
   موجود في 7 و8 فقط دون بقية صفحات ‎.page-prose‎ (6 و22 و23) — تحقّقنا.

   البنية المشتركة:
       فقرة ترحيب (أول ‎p.text-muted‎ داخل ‎.card-body‎)
       فقرة تمهيد
       6 عناوين ‎<h4>‎ مرقّمة نصّياً
       يتبع كلاً منها ‎<ul><li>‎ أو ‎<p>‎
       فقرة ختام ‎.mt-4‎

   الفروق التي عولجت:
       7.html  فقرة الترحيب تحمل ‎.fw-bolder‎ · بعض أقسامها فقرات لا قوائم
       8.html  تبدأ بعنوان ‎<h2>‎ · تنتهي برابط ‎p.text-center.mt-3‎
   استُهدفت فقرة الترحيب بموضعها (‎:first-of-type‎) لا بكلاسها كي تعمل في
   الصفحتين، وقواعد عناصر 8 لا أثر لها في 7 لأن تلك العناصر غير موجودة فيها.

   ملاحظة: العناوين تحمل أرقامها داخل النص أصلاً («1. الاستخدام»)، فلم نضف
   عدّاد CSS كي لا يتكرّر الرقم مرّتين — واكتُفي بعلامة لونية جانبية.
   ========================================================================== */

html:has(.page-prose .card.shadow-lg) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.page-prose .card.shadow-lg) body {
  font-family: var(--f-body);
}

html:has(.page-prose .card.shadow-lg) h1,
html:has(.page-prose .card.shadow-lg) h2,
html:has(.page-prose .card.shadow-lg) h3,
html:has(.page-prose .card.shadow-lg) h4,
html:has(.page-prose .card.shadow-lg) h5,
html:has(.page-prose .card.shadow-lg) h6,
html:has(.page-prose .card.shadow-lg) .btn,
html:has(.page-prose .card.shadow-lg) .nav-link,
html:has(.page-prose .card.shadow-lg) .badge,
html:has(.page-prose .card.shadow-lg) .fw-bold,
html:has(.page-prose .card.shadow-lg) .fw-semibold,
html:has(.page-prose .card.shadow-lg) .page-title,
html:has(.page-prose .card.shadow-lg) .hp-eyebrow {
  font-family: var(--f-display);
}

html:has(.page-prose .card.shadow-lg) .page-prose p,
html:has(.page-prose .card.shadow-lg) .page-prose li,
html:has(.page-prose .card.shadow-lg) input,
html:has(.page-prose .card.shadow-lg) textarea,
html:has(.page-prose .card.shadow-lg) select,
html:has(.page-prose .card.shadow-lg) .form-control {
  font-family: var(--f-body);
}


/* ---------- 1) الهالات تسبح ---------- */
@keyframes cmp-trm-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -5%, 0) scale(1.16); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

html:has(.page-prose .card.shadow-lg) .hp-orb-1 { animation: cmp-trm-float 32s cubic-bezier(.4, 0, .2, 1) infinite; }
html:has(.page-prose .card.shadow-lg) .hp-orb-2 { animation: cmp-trm-float 40s cubic-bezier(.4, 0, .2, 1) infinite -14s; }

/* ---------- 2) ترويسة داكنة موحّدة مع بقية الصفحات ---------- */
@keyframes cmp-trm-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(227, 146, 47, .40); }
  70%  { box-shadow: 0 0 0 10px rgba(227, 146, 47, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(227, 146, 47, 0);   }
}

html:has(.page-prose .card.shadow-lg) .hp-hero .landing-hero > .container > .text-center {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  margin-block-end: 2rem;
  padding: clamp(2.2rem, 4.5vw, 3.4rem) clamp(1.2rem, 3.5vw, 2.6rem);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(80% 130% at 86% -14%, rgba(227, 146, 47, .30), transparent 58%),
    radial-gradient(70% 115% at 8% 108%, rgba(99, 102, 241, .18), transparent 62%),
    linear-gradient(155deg, var(--pal-hero), var(--pal-hero-2) 68%);
  box-shadow: 0 40px 90px -38px rgba(17, 28, 26, .68);
}

html:has(.page-prose .card.shadow-lg) .hp-eyebrow {
  color: #FFCE92;
  background: rgba(227, 146, 47, .16);
  border-color: rgba(227, 146, 47, .38);
  animation: cmp-trm-pulse 2.8s ease-out infinite;
}

html:has(.page-prose .card.shadow-lg) .page-title {
  color: #FFFFFF;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.02em;
}

html:has(.page-prose .card.shadow-lg) .page-title::after {
  inline-size: 84px;
  block-size: 4px;
  background: linear-gradient(90deg, #E3922F, #FFD9A3);
  box-shadow: 0 0 16px rgba(227, 146, 47, .65);
}

/* ---------- 3) لوح المحتوى ---------- */
html:has(.page-prose .card.shadow-lg) .page-prose {
  max-width: 880px;
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3rem);
  border-radius: 28px;
  border: 1px solid rgba(17, 28, 26, .07);
  background: linear-gradient(165deg, #FFFFFF, #FBF7F2);
  box-shadow: 0 28px 64px -34px rgba(17, 28, 26, .30);
  font-size: 1.04rem;
  line-height: 2.05;
}

/* ---------- 4) فقرة الترحيب: لوح تمهيدي بارز ----------
   في 7.html تحمل .fw-bolder وفي 8.html تحمل .text-muted فقط، والقاسم
   المشترك أنها أول فقرة داخل .card-body — فاستُهدفت بموضعها لا بكلاسها. */
html:has(.page-prose .card.shadow-lg) .page-prose .card-body > p.text-muted:first-of-type {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.3rem;
  border-radius: 18px;
  border: 1px solid rgba(227, 146, 47, .22);
  background: linear-gradient(160deg, rgba(227, 146, 47, .10), rgba(227, 146, 47, .04));
  color: #7A4A16 !important;
  font-family: var(--f-display) !important;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.9;
  text-align: start !important;
}

/* ---------- 5) عناوين الأقسام: علامة لونية جانبية ---------- */
html:has(.page-prose .card.shadow-lg) .page-prose h4 {
  position: relative;
  margin-block: 2rem .7rem;
  padding-inline-start: .95rem;
  font-size: clamp(1.2rem, 2.3vw, 1.5rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--pal-ink);
}

html:has(.page-prose .card.shadow-lg) .page-prose h4::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: .18em .18em;
  inline-size: 5px;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFD9A3, #E3922F 55%, #C9741C);
  box-shadow: 0 0 10px rgba(227, 146, 47, .45);
}

/* أول عنوان لا يحتاج مسافة علوية كبيرة */
html:has(.page-prose .card.shadow-lg) .page-prose h4:first-of-type {
  margin-block-start: 1.2rem;
}

/* ---------- 6) القوائم: علامات ذهبية بدل النقاط ---------- */
html:has(.page-prose .card.shadow-lg) .page-prose ul {
  margin: 0 0 .4rem;
  padding-inline-start: 0;
  list-style: none;
}

html:has(.page-prose .card.shadow-lg) .page-prose ul > li {
  position: relative;
  margin-block-end: .55rem;
  padding-inline-start: 2.1rem;
  color: #4A5560;
  line-height: 2.05;
}

html:has(.page-prose .card.shadow-lg) .page-prose ul > li::before {
  content: "\ea5e";                  /* ti-check من خط tabler-icons */
  font-family: "tabler-icons";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .42em;
  inline-size: 22px;
  block-size: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .78rem;
  color: #fff;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 4px 10px -4px rgba(227, 146, 47, .65);
}

/* ---------- 7) فقرات الأقسام: قضيب جانبي هادئ ---------- */
html:has(.page-prose .card.shadow-lg) .page-prose h4 + p {
  margin: 0 0 .4rem;
  padding-inline-start: 1.2rem;
  margin-inline-start: .95rem;
  color: #4A5560;
  border-inline-start: 3px solid var(--pal-line);
  transition: border-color .3s ease, color .3s ease;
}

html:has(.page-prose .card.shadow-lg) .page-prose h4 + p:hover {
  border-inline-start-color: #E3922F;
  color: #2B3540;
}

/* ---------- 8) فقرة الختام ---------- */
html:has(.page-prose .card.shadow-lg) .page-prose .mt-4 {
  margin-block-start: 2.2rem !important;
  padding: 1.15rem 1.3rem;
  border-radius: 18px;
  border: 1px dashed rgba(17, 28, 26, .16);
  background: rgba(17, 28, 26, .025);
  color: #46525C;
  text-align: center;
}

/* ---------- 11) عناصر تخصّ 8.html وحدها ----------
   صفحة الخصوصية تبدأ بعنوان <h2 class="text-center mb-4">، وتنتهي برابط
   <p class="text-center mt-3"><a>عرض التفاصيل هنا</a></p>.
   صفحة 7.html لا تحوي أياً منهما، فالقاعدتان تسريان عليها بلا أثر.        */

html:has(.page-prose .card.shadow-lg) .page-prose .card-body > h2 {
  margin-block: 0 1.3rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--pal-ink);
  text-align: center;
}

html:has(.page-prose .card.shadow-lg) .page-prose .card-body > h2::after {
  content: '';
  display: block;
  inline-size: 64px;
  block-size: 4px;
  margin: .8rem auto 0;
  border-radius: 100px;
  background: linear-gradient(90deg, #E3922F, #FFD9A3);
  box-shadow: 0 0 12px rgba(227, 146, 47, .5);
}

/* الرابط الختامي → زرّ ذهبي */
html:has(.page-prose .card.shadow-lg) .page-prose p.text-center.mt-3 {
  margin-block-start: 1.4rem !important;
}

html:has(.page-prose .card.shadow-lg) .page-prose p.text-center.mt-3 > a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.5rem;
  border-radius: 999px;
  border: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .98rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #F0A64A, #C9741C);
  box-shadow: 0 14px 30px -14px rgba(227, 146, 47, .80);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .26s ease;
}

html:has(.page-prose .card.shadow-lg) .page-prose p.text-center.mt-3 > a::after {
  content: "\ea19";                  /* ti-arrow-left — RTL: يشير للأمام */
  font-family: "tabler-icons";
  font-size: 1rem;
  font-weight: 400;
}

html:has(.page-prose .card.shadow-lg) .page-prose p.text-center.mt-3 > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px -14px rgba(227, 146, 47, .92);
  color: #fff;
}

/* في 8.html كل الأقسام قوائم، وفي 7.html بعضها فقرات — كلاهما مغطّى. */


/* ---------- 9) الجوال ---------- */
@media (max-width: 767.98px) {
  html:has(.page-prose .card.shadow-lg) .hp-hero .landing-hero > .container > .text-center {
    padding: 1.8rem 1.05rem;
    border-radius: 24px;
  }
  html:has(.page-prose .card.shadow-lg) .page-prose {
    padding: 1.4rem 1.1rem;
    border-radius: 22px;
  }
  html:has(.page-prose .card.shadow-lg) .page-prose h4 {
    margin-block: 1.5rem .55rem;
  }
  html:has(.page-prose .card.shadow-lg) .page-prose h4 + p {
    padding-inline-start: .9rem;
    margin-inline-start: .4rem;
  }
  html:has(.page-prose .card.shadow-lg) .page-prose ul > li {
    padding-inline-start: 1.8rem;
  }
}

/* ---------- 10) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.page-prose .card.shadow-lg) .hp-orb-1,
  html:has(.page-prose .card.shadow-lg) .hp-orb-2,
  html:has(.page-prose .card.shadow-lg) .hp-eyebrow {
    animation: none;
  }
  html:has(.page-prose .card.shadow-lg) .page-prose h4 + p {
    transition: none;
  }
}


/* =============================================================================
   8-س. صفحة 9.html (ملف الإنجاز — الرئيسية)
        نظام الخطّين + إعادة تصميم جذرية «لوح الإنجاز»   ✅ ✨ مُفعّل
   -----------------------------------------------------------------------------
   النطاق: html:has(.ph-benefit)
   الكلاس ph-benefit موجود في 9.html وحدها. لم نستعمل ‎.ph-scope‎ لأنها
   مشتركة مع 13.html، ولا ‎.ph-menu‎ لنفس السبب — تحقّقنا من ذلك.

   بنية الصفحة: هيرو · 8 بطاقات فوائد · 3 خطوات · أكورديون 15 سؤالاً ·
   شريط دعوة ختامي.

   ملاحظة مطمئنة: عناصر الأكورديون هنا مكتوبة ‎class="accordion-item"‎ دون
   ‎.card‎، فلا تنطبق عليها قاعدة core.css سطر 11726 التي عطّلت حواف أكورديون
   صفحة 5.html — لا حاجة هنا لرفع الخصوصية بـ ‎.card‎.
   ========================================================================== */

html:has(.ph-benefit) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.ph-benefit) body {
  font-family: var(--f-body);
}

html:has(.ph-benefit) h1,
html:has(.ph-benefit) h2,
html:has(.ph-benefit) h3,
html:has(.ph-benefit) h4,
html:has(.ph-benefit) h5,
html:has(.ph-benefit) h6,
html:has(.ph-benefit) .btn,
html:has(.ph-benefit) .nav-link,
html:has(.ph-benefit) .menu-link,
html:has(.ph-benefit) .badge,
html:has(.ph-benefit) .fw-bold,
html:has(.ph-benefit) .fw-bolder,
html:has(.ph-benefit) .fw-semibold,
html:has(.ph-benefit) .ph-title,
html:has(.ph-benefit) .ph-eyebrow,
html:has(.ph-benefit) .ph-section-head h4,
html:has(.ph-benefit) .ph-benefit-body strong,
html:has(.ph-benefit) .ph-step-num,
html:has(.ph-benefit) .ph-cta,
html:has(.ph-benefit) .ph-cta-white,
html:has(.ph-benefit) .ph-cta-ghost,
html:has(.ph-benefit) .accordion-button {
  font-family: var(--f-display);
}

html:has(.ph-benefit) .ph-lead,
html:has(.ph-benefit) .ph-sub,
html:has(.ph-benefit) .ph-benefit-body,
html:has(.ph-benefit) .ph-step p,
html:has(.ph-benefit) .accordion-body,
html:has(.ph-benefit) input,
html:has(.ph-benefit) textarea,
html:has(.ph-benefit) select,
html:has(.ph-benefit) .form-control {
  font-family: var(--f-body);
}


/* ---------- 1) الهيرو: لوح داكن درامي ---------- */
@keyframes cmp-ph-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-4%, 5%, 0) scale(1.18); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

html:has(.ph-benefit) .ph-hero {
  position: relative;
  padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.4rem, 4vw, 2.8rem);
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(80% 130% at 86% -14%, rgba(227, 146, 47, .30), transparent 58%),
    radial-gradient(70% 115% at 8% 108%, rgba(99, 102, 241, .16), transparent 62%),
    linear-gradient(155deg, var(--pal-hero), var(--pal-hero-2) 68%);
  box-shadow: 0 40px 90px -38px rgba(17, 28, 26, .68);
}

/* هالة تسبح داخل الهيرو */
html:has(.ph-benefit) .ph-hero::after {
  content: '';
  position: absolute;
  inset-block-start: -140px;
  inset-inline-end: -110px;
  inline-size: 420px;
  block-size: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 146, 47, .26), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  animation: cmp-ph-float 34s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes cmp-ph-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(227, 146, 47, .40); }
  70%  { box-shadow: 0 0 0 10px rgba(227, 146, 47, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(227, 146, 47, 0);   }
}

html:has(.ph-benefit) .ph-eyebrow {
  position: relative;
  z-index: 1;
  padding: .42rem 1rem;
  color: #FFCE92;
  background: rgba(227, 146, 47, .16);
  border: 1px solid rgba(227, 146, 47, .38);
  animation: cmp-ph-pulse 2.8s ease-out infinite;
}

html:has(.ph-benefit) .ph-title {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -.02em;
}

@keyframes cmp-ph-shimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

html:has(.ph-benefit) .ph-title .g {
  background-image: linear-gradient(110deg,
                    #E3922F 0%, #FFD9A3 26%, #F0A64A 48%,
                    #E3922F 72%, #FFD9A3 100%);
  background-size: 200% 100%;
  animation: cmp-ph-shimmer 7s linear infinite;
}

html:has(.ph-benefit) .ph-lead {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .72);
  font-size: 1.04rem;
}

/* أزرار الهيرو فوق الخلفية الداكنة */
html:has(.ph-benefit) .ph-hero .ph-cta {
  position: relative;
  z-index: 1;
}

html:has(.ph-benefit) .ph-hero .ph-cta.ph-cta-soft {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #FFCE92 !important;
}

html:has(.ph-benefit) .ph-hero .ph-cta.ph-cta-soft:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(227, 146, 47, .55);
  color: #FFE0B0 !important;
}

/* ---------- 2) عناوين الأقسام: أكبر وبشرطة متدرّجة ---------- */
html:has(.ph-benefit) .ph-section-head {
  margin-block: 3rem 1.6rem;
}

html:has(.ph-benefit) .ph-section-head h4 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 900;
  letter-spacing: -.015em;
  color: var(--pal-ink);
}

html:has(.ph-benefit) .ph-section-head .ph-sub {
  font-size: 1rem;
}

html:has(.ph-benefit) .ph-section-head::after {
  inline-size: 78px;
  block-size: 4px;
  margin-block-start: .9rem;
  background: linear-gradient(90deg, #E3922F, #FFD9A3);
  box-shadow: 0 0 14px rgba(227, 146, 47, .55);
}

/* ---------- 3) بطاقات الفوائد: أعمق وأوضح ---------- */
html:has(.ph-benefit) .ph-benefit {
  position: relative;
  gap: 1.15rem;
  padding: 1.5rem 1.4rem;
  border-radius: 22px;
  border-color: rgba(17, 28, 26, .08);
  background: linear-gradient(160deg, #FFFFFF, #FCF8F3);
  box-shadow: 0 12px 30px -16px rgba(17, 28, 26, .22);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .3s ease, border-color .3s ease;
}

/* حافّة ذهبية تتمدّد من المنتصف */
html:has(.ph-benefit) .ph-benefit::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 50% 50%;
  block-size: 3px;
  border-radius: 0 0 100px 100px;
  background: linear-gradient(90deg, #E3922F, #C9741C);
  transition: inset-inline .38s cubic-bezier(.4, 0, .2, 1);
}

html:has(.ph-benefit) .ph-benefit:hover::before { inset-inline: 0 0; }

html:has(.ph-benefit) .ph-benefit:hover {
  transform: translateY(-7px);
  border-color: rgba(227, 146, 47, .40);
  box-shadow: 0 30px 56px -24px rgba(227, 146, 47, .38);
}

html:has(.ph-benefit) .ph-benefit-ic {
  inline-size: 60px;
  block-size: 60px;
  border-radius: 19px;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 12px 26px -10px rgba(227, 146, 47, .60);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

html:has(.ph-benefit) .ph-benefit:hover .ph-benefit-ic {
  transform: scale(1.08) rotate(-7deg);
  background: linear-gradient(140deg, #F0A64A, #B3660F);
}

/* الأيقونات صور PNG داكنة — تُقلب للأبيض فوق القرص الذهبي */
html:has(.ph-benefit) .ph-benefit-ic img {
  block-size: 32px;
  inline-size: 32px;
  filter: brightness(0) invert(1);
}

html:has(.ph-benefit) .ph-benefit-body {
  font-size: .97rem;
  line-height: 1.9;
  color: #56616D;
}

html:has(.ph-benefit) .ph-benefit-body strong {
  font-size: 1.06rem;
  font-weight: 900;
  color: var(--pal-ink);
  margin-block-end: .35rem;
}

/* ---------- 4) الخطوات الثلاث ---------- */
html:has(.ph-benefit) .ph-step {
  padding: 1.7rem 1.35rem 1.35rem;
  border-radius: 22px;
  border-color: rgba(17, 28, 26, .08);
  background: linear-gradient(160deg, #FFFFFF, #FCF8F3);
  box-shadow: 0 12px 30px -16px rgba(17, 28, 26, .22);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease;
}

html:has(.ph-benefit) .ph-step:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 56px -24px rgba(227, 146, 47, .34);
}

html:has(.ph-benefit) .ph-step-num {
  inline-size: 54px;
  block-size: 54px;
  border-radius: 17px;
  margin-block-end: 1rem;
  font-size: 1.3rem;
  font-weight: 900;
  background: linear-gradient(140deg, #F0A64A, #C9741C);
  box-shadow: 0 12px 26px -10px rgba(227, 146, 47, .62);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

html:has(.ph-benefit) .ph-step:hover .ph-step-num {
  transform: scale(1.08) rotate(-6deg);
}

html:has(.ph-benefit) .ph-step h6 {
  font-size: 1.12rem;
  font-weight: 900;
  color: var(--pal-ink);
  margin-block-end: .5rem;
}

html:has(.ph-benefit) .ph-step p {
  font-size: .95rem;
  line-height: 1.9;
  color: #56616D;
}

html:has(.ph-benefit) .ph-step-arrow {
  color: rgba(227, 146, 47, .55);
  font-size: 1.6rem;
}

/* ---------- 5) الأكورديون ---------- */
html:has(.ph-benefit) .ph-accordion .accordion-item {
  margin-block-end: .7rem;
  border-radius: 18px !important;
  border-color: rgba(17, 28, 26, .08);
  background: linear-gradient(160deg, #FFFFFF, #FCF9F5);
  box-shadow: 0 10px 26px -18px rgba(17, 28, 26, .24);
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
}

html:has(.ph-benefit) .ph-accordion .accordion-item:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 146, 47, .32);
  box-shadow: 0 18px 34px -20px rgba(227, 146, 47, .34);
}

html:has(.ph-benefit) .ph-accordion .accordion-button {
  padding: 1.15rem 1.3rem;
  font-size: 1.01rem;
  font-weight: 800;
  color: #1B2A27;
  background: transparent;
}

/* الشيفرون → قرص دائري */
html:has(.ph-benefit) .ph-accordion .accordion-button::after {
  flex: 0 0 auto;
  inline-size: 32px;
  block-size: 32px;
  margin-inline-start: auto;
  border-radius: 50%;
  background-color: rgba(227, 146, 47, .10);
  background-position: center;
  background-size: 1rem;
  border: 1px solid rgba(227, 146, 47, .26);
  transition: transform .34s cubic-bezier(.4, 0, .2, 1),
              background-color .28s ease, border-color .28s ease;
}

html:has(.ph-benefit) .ph-accordion .accordion-button:not(.collapsed) {
  color: var(--pal-gold-deep);
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .14),
              rgba(227, 146, 47, .04) 70%,
              transparent);
}

html:has(.ph-benefit) .ph-accordion .accordion-button:not(.collapsed)::after {
  background-color: rgba(227, 146, 47, .30);
  border-color: rgba(227, 146, 47, .55);
}

/* قضيب ذهبي على السؤال المفتوح */
html:has(.ph-benefit) .ph-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(227, 146, 47, .40);
  box-shadow: inset 3px 0 0 #E3922F, 0 18px 34px -20px rgba(227, 146, 47, .34);
}

html:has(.ph-benefit) .ph-accordion .accordion-body {
  padding: .3rem 1.3rem 1.3rem;
  font-size: .97rem;
  line-height: 2;
  color: #56616D;
  border-block-start: 1px solid rgba(17, 28, 26, .07);
  margin-block-start: .2rem;
  padding-block-start: 1rem;
}

/* ---------- 6) شريط الدعوة الختامي ---------- */
html:has(.ph-benefit) .ph-cta-band {
  position: relative;
  border-radius: 28px;
  padding: 2.8rem 2rem;
  background:
    radial-gradient(70% 140% at 88% -18%, rgba(255, 210, 150, .30), transparent 60%),
    linear-gradient(135deg, #F0A64A 0%, #D97F22 48%, var(--pal-gold-deep) 100%);
  box-shadow: 0 34px 70px -30px rgba(201, 116, 28, .60);
  overflow: hidden;
}

/* وميض يعبر الشريط */
@keyframes cmp-ph-sweep {
  0%, 55% { transform: translateX(-160%) skewX(-18deg); }
  100%    { transform: translateX(160%)  skewX(-18deg); }
}

html:has(.ph-benefit) .ph-cta-band::after {
  content: '';
  position: absolute;
  inset-block: -30%;
  inline-size: 38%;
  inset-inline-start: 0;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .28), transparent);
  pointer-events: none;
  animation: cmp-ph-sweep 7s cubic-bezier(.4, 0, .2, 1) infinite;
}

html:has(.ph-benefit) .ph-cta-band h4 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 900;
  letter-spacing: -.015em;
}

html:has(.ph-benefit) .ph-cta-band p {
  position: relative;
  z-index: 1;
  font-size: 1.02rem;
}

html:has(.ph-benefit) .ph-cta-band .ph-cta-btns {
  z-index: 1;
}

html:has(.ph-benefit) .ph-cta-white {
  padding: .85rem 1.7rem;
  border-radius: 15px;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .32);
}

html:has(.ph-benefit) .ph-cta-ghost {
  padding: .85rem 1.7rem;
  border-radius: 15px;
  font-weight: 800;
  font-size: 1rem;
  border-width: 1.5px;
}

/* ---------- 7) الجوال ---------- */
@media (max-width: 767.98px) {
  html:has(.ph-benefit) .ph-hero {
    padding: 1.9rem 1.15rem;
    border-radius: 24px;
  }
  html:has(.ph-benefit) .ph-benefit,
  html:has(.ph-benefit) .ph-step {
    padding: 1.2rem 1.05rem;
    border-radius: 18px;
  }
  html:has(.ph-benefit) .ph-benefit-ic {
    inline-size: 50px;
    block-size: 50px;
    border-radius: 16px;
  }
  html:has(.ph-benefit) .ph-section-head {
    margin-block: 2.2rem 1.2rem;
  }
  html:has(.ph-benefit) .ph-cta-band {
    padding: 2rem 1.15rem;
    border-radius: 22px;
  }
  html:has(.ph-benefit) .ph-accordion .accordion-button {
    padding: 1rem .95rem;
    font-size: .95rem;
  }
}

/* ---------- 8) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.ph-benefit) .ph-hero::after,
  html:has(.ph-benefit) .ph-eyebrow,
  html:has(.ph-benefit) .ph-title .g,
  html:has(.ph-benefit) .ph-cta-band::after {
    animation: none;
  }
  html:has(.ph-benefit) .ph-benefit,
  html:has(.ph-benefit) .ph-benefit::before,
  html:has(.ph-benefit) .ph-benefit-ic,
  html:has(.ph-benefit) .ph-step,
  html:has(.ph-benefit) .ph-step-num,
  html:has(.ph-benefit) .ph-accordion .accordion-item,
  html:has(.ph-benefit) .ph-accordion .accordion-button::after {
    transition: none;
  }
}


/* ---------- 9) إصلاحان في 9.html ----------

   أ) عرض شارة ‎.ph-eyebrow‎:
      الحاوية ‎<div class="ph-hero h-100 d-flex flex-column …">‎ تجعل أبناءها
      عناصر flex، وقيمة ‎align-items‎ الافتراضية ‎stretch‎ — فتتمدّد الشارة
      على عرض الهيرو كاملاً رغم أنها ‎inline-flex‎. الحل ‎align-self:flex-start‎
      فتعود إلى عرض محتواها.

   ب) لون عنوان شريط الدعوة «جاهز لتوثيق إنجازاتك؟»:
      ‎.ph-cta-band‎ يضبط ‎color:#fff‎ لكن ‎core.css‎ سطر 160-165 يضبط
      ‎h4 { color: var(--bs-heading-color) }‎ = ‎#5d596c‎ رمادياً داكناً،
      والإعلان الصريح يتغلّب على الوراثة — فظهر العنوان داكناً على الذهبي.
      نعيده أبيض صراحةً.                                                      */

html:has(.ph-benefit) .ph-eyebrow {
  align-self: flex-start;
  inline-size: fit-content;
  max-inline-size: 100%;
}

html:has(.ph-benefit) .ph-cta-band h4,
html:has(.ph-benefit) .ph-cta-band p {
  color: #FFFFFF;
}


/* =============================================================================
   القائمة الجانبية لصفحات ملف الإنجاز — بهوية قائمة 3.html   ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.ph-menu) ← يشمل كل صفحات ملف الإنجاز الثماني
   (9 · 10 · 11 · 13 · 14 · 15 · 16 · 17). القائمة عنصر تنقّل مشترك، فتركها
   داكنة في صفحتين وفاتحة في البقية يبدو عطلاً لا تصميماً.

   بنفسه في الوضعين Semi-Dark و Dark. فبدل مصارعة قواعده واحدة واحدة،
   نقلب التوكنات نفسها كما يفعل هو — فتتبعه ألوان النصوص والأيقونات كلها
   تلقائياً، ثم نضيف فوقها لمسات الشكل (أقراص الأيقونات، القرص الذهبي
   للعنصر النشط، الظهور المتتابع).

   حساب الخصوصية — القواعد الأصلية ثقيلة ومكتوبة بـ !important:
       #layout-menu.ph-menu                                        (1,1,0)
       #layout-menu.ph-menu .menu-header                           (1,2,0)
       #layout-menu.ph-menu .menu-item.active > .menu-link
                                        :not(.menu-toggle)         (1,5,0)
   لذلك تُكتب محدداتنا بالصيغة الكاملة ‎html:has(.ph-benefit)
   #layout-menu.ph-menu …‎ لترتفع إلى (1,6,1) فتتغلّب عليها.
   ========================================================================== */

/* --- 1) قلب التوكنات + الخلفية الداكنة --- */
/* السطح والمقدّمة يقرآن توكنات ‎--th-side-*‎ العامّة (القسم 16-ج) بدل قيم صريحة.
   كانت القيم هنا نسخةً حرفيةً من أساس تلك التوكنات، فثيم Default يُرسم كما كان
   تماماً — والثلاثة الأخرى صارت تُغيّر السبيدر فعلاً بعد أن كانت لا تفعل شيئاً.

   ‎--phm-brand‎ وحده يبقى صريحاً: النحاسي يُقرأ على السطحين الفاتح والداكن معاً،
   وهو ما ينصّ عليه تعليق ‎portfolio-sidebar.css‎ الأصلي. */
html:has(.ph-menu) #layout-menu.ph-menu {
  --phm-ink:         var(--th-side-fg);
  --phm-ink-2:       var(--th-side-ico);
  --phm-brand:       #E3922F;
  --phm-brand-rgb:   227, 146, 47;
  --phm-brand-hover: var(--th-side-ico-hover);
  --phm-brand-light: #FFD9A3;
  --phm-soft:        var(--th-side-ico-hover-bg);

  background:
    radial-gradient(120% var(--th-side-wash-h) at 50% 0%, var(--th-side-wash), transparent 60%),
    linear-gradient(180deg, var(--th-side-top) 0%, var(--th-side-bottom) 100%) !important;
  /* ‎inline-END‎ لا ‎inline-start‎: في RTL السبيدر على اليمين، فحافّته الداخلية
     المواجهة للمحتوى هي ‎inline-end‎ (يسار فيزيائي) — وهي الفاصل الذي يُرى.
     كانت ‎inline-start‎ أي الحافّة الخارجية الملاصقة لطرف الشاشة، فلا تفصل
     شيئاً؛ ولذلك بدا ثيم «مؤطّر» بلا حدّ على سبيدر ملفّ الإنجاز رغم أن التوكن
     ‎--th-side-border‎ كان يصل إليه صحيحاً (‎rgba(31,46,43,.20)‎). قِيس وأُصلح
     2026-08-20. المرجع: عائلة المعلم سطر 1455 تستعمل ‎inline-end‎ منذ البداية.
     والحافّة الخارجية تبقى لـ‎--glass-border‎ من ‎docs-theme.css‎ كبقية العائلات. */
  border-inline-end: 1px solid var(--th-side-border) !important;
  box-shadow: var(--th-side-shadow);
}

/* --- 2) الروابط: انزلاق وتدرّج عند المرور --- */
html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item {
  margin: 1px .4rem;
}

/* ‎margin-inline: 0‎ — يلغي هامش core الجانبي ‎.875rem‎ على الرابط؛
   الهامش الجانبي مصدره الوحيد هامش البند أعلاه فلا يتراكب الاثنان. */
html:has(.ph-menu) #layout-menu.ph-menu .menu-link {
  border-radius: 12px;
  margin-inline: 0;
  padding-inline: .8rem;
  padding-block: .42rem;
  overflow: hidden;
  transition: color .26s cubic-bezier(.4, 0, .2, 1),
              padding-inline-start .26s cubic-bezier(.4, 0, .2, 1);
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-item:not(.active) > .menu-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .20),
              rgba(227, 146, 47, .04) 70%,
              transparent);
  opacity: 0;
  transform: translateX(12%);
  transition: opacity .26s ease, transform .26s cubic-bezier(.4, 0, .2, 1);
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-item:not(.active) > .menu-link:hover {
  background: transparent;
  color: var(--th-side-fg-hover);
  padding-inline-start: 1.15rem;
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-item:not(.active) > .menu-link:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* --- 3) الأيقونات: مربّعات دائرية تضيء --- */
html:has(.ph-menu) #layout-menu.ph-menu .menu-link .menu-icon {
  inline-size: 28px;
  block-size: 28px;
  margin-inline-end: .55rem;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  font-size: .95rem;
  background: var(--th-side-ico-bg);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1),
              background .26s ease, color .26s ease;
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-item:not(.active) > .menu-link:hover .menu-icon {
  transform: scale(1.08) rotate(-6deg);
  color: var(--th-side-ico-hover);
  background: rgba(227, 146, 47, .20);
}

/* --- 4) العنصر النشط: قرص ذهبي متوهّج --- */
html:has(.ph-menu) #layout-menu.ph-menu .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .34),
              rgba(227, 146, 47, .10) 72%,
              transparent) !important;
  color: var(--th-side-active-fg) !important;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(227, 146, 47, .30);
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-item.active > .menu-link .menu-icon {
  color: #FFFFFF !important;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 8px 18px -7px rgba(227, 146, 47, .70);
}

/* شريط الحافّة المضيء */
html:has(.ph-menu) #layout-menu.ph-menu .menu-item.active > .menu-link:not(.menu-toggle)::before {
  inset-inline-end: -.6rem;
  inline-size: 4px;
  block-size: 52%;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFD9A3, #E3922F 55%, #C9741C);
  box-shadow: 0 0 12px rgba(227, 146, 47, .75);
}

/* --- 5) ترويسة المجموعة --- */
html:has(.ph-menu) #layout-menu.ph-menu .menu-header {
  position: relative;
  margin-block: .6rem .3rem;
  padding-inline: 1.2rem;
  color: var(--th-side-header) !important;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: 1;
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-header::after {
  content: '';
  position: absolute;
  inset-block-end: -.4rem;
  inset-inline: 1.2rem 1.2rem;
  block-size: 1px;
  background: linear-gradient(90deg, rgba(227, 146, 47, .45), transparent 75%);
}

/* --- 6) القائمة الفرعية والشارات --- */
html:has(.ph-menu) #layout-menu.ph-menu .menu-sub .menu-link {
  border-radius: 12px;
  color: var(--th-side-ico);
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-sub .menu-link:hover {
  color: var(--th-side-fg-hover);
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-sub .menu-item.active > .menu-link {
  color: var(--th-side-ico-hover) !important;
}

html:has(.ph-menu) #layout-menu.ph-menu .badge.bg-label-primary {
  background: linear-gradient(135deg, #E3922F, #C9741C) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px -5px rgba(227, 146, 47, .60);
}

/* --- 7) بطاقة صورة المستخدم والفواصل --- */
html:has(.ph-menu) #layout-menu.ph-menu .user-avatar-section {
  border-block-end-color: var(--th-side-rule);
}

html:has(.ph-menu) #layout-menu.ph-menu .user-avatar-section img {
  background: #1B2825;
  border-color: var(--th-side-rule);
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-divider {
  border-color: var(--th-side-rule);
}

/* --- 8) شريط تمرير القائمة --- */
html:has(.ph-menu) #layout-menu.ph-menu .menu-inner::-webkit-scrollbar {
  inline-size: 7px;
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-inner::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: rgba(227, 146, 47, .38);
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(227, 146, 47, .62);
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-inner::-webkit-scrollbar-track {
  background: transparent;
}

/* --- 9) ظهور متتابع لطيف --- */
html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item {
  animation: cmp-menu-in .42s cubic-bezier(.22, 1, .36, 1) both;
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item:nth-child(1) { animation-delay: .02s; }
html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item:nth-child(2) { animation-delay: .05s; }
html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item:nth-child(3) { animation-delay: .08s; }
html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item:nth-child(4) { animation-delay: .11s; }
html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item:nth-child(5) { animation-delay: .14s; }
html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item:nth-child(6) { animation-delay: .17s; }
html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item:nth-child(7) { animation-delay: .20s; }
html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item:nth-child(n+8) { animation-delay: .23s; }

/* --- 10) احترام تفضيل تقليل الحركة --- */
@media (prefers-reduced-motion: reduce) {
  html:has(.ph-menu) #layout-menu.ph-menu .menu-inner > .menu-item {
    animation: none;
  }
}

/* --- 11) سبيدر الأب-والأبناء (spider): خيط رأسي + نقاط دائرية ---------------
   عند فتح أب فيه أبناء، ارسم خيطاً نحاسياً رفيعاً يمرّ بمركز أيقونة الأب
   (20px = 1.25rem من inline-start حسب قياس ‎.ph-menu‎)، وضع نقطة دائرية أمام
   كل ابن تجلس على الخيط بالضبط. النقطة فارغة عادةً، وتمتلئ نحاسياً للابن
   النشط أو عند التحويم. النطاق ‎.ph-menu‎ فقط — لا يُلامس قوائم بقية النطاقات.

   قاعدة Vuexy الأصلية على ‎.menu-sub .menu-link::before‎ تحمل
   ‎content: ""‎ + ‎font-family: tabler-icons‎ بلا خلفية ولا حدود، فلا ترسم
   شيئاً؛ نُعيد استعمالها كوعاء للنقطة عبر رفع محدَّدنا لوزن أعلى. */

html:has(.ph-menu) #layout-menu.ph-menu .menu-item.open > .menu-sub {
  position: relative;
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-item.open > .menu-sub::before {
  content: '' !important;
  position: absolute;
  inset-block: .3rem;
  inset-inline-start: calc(1.25rem - .75px);
  inline-size: 1.5px;
  border: 0 !important;
  border-radius: 100px;
  background: linear-gradient(180deg,
              rgba(227, 146, 47, .55) 0%,
              rgba(227, 146, 47, .22) 100%);
  pointer-events: none;
  opacity: 1 !important;
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-sub > .menu-item > .menu-link {
  position: relative;
  padding-inline-start: 2.5rem;
}

/* النقطة: نستولي على قاعدة Vuexy ونُصفّرها ثم نُعيد بناءها دائرة نظيفة */
html:has(.ph-menu) #layout-menu.ph-menu .menu-sub > .menu-item > .menu-link::before {
  content: '' !important;
  position: absolute;
  inset-inline-start: calc(1.25rem - .3rem);
  inset-block-start: 50%;
  inline-size: .6rem;
  block-size: .6rem;
  margin-block-start: -.3rem;
  border-radius: 50%;
  background: #1B2825;
  border: 1.5px solid rgba(227, 146, 47, .60) !important;
  font-family: inherit !important;
  font-size: 0 !important;
  color: transparent !important;
  transition: background .22s ease, border-color .22s ease,
              transform .22s ease, box-shadow .22s ease;
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-sub > .menu-item > .menu-link:hover::before {
  border-color: #E3922F !important;
  transform: scale(1.15);
  box-shadow: 0 0 6px rgba(227, 146, 47, .45);
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-sub > .menu-item.active > .menu-link::before {
  background: linear-gradient(140deg, #F0A64A, #C9741C) !important;
  border-color: transparent !important;
  box-shadow: 0 0 10px rgba(227, 146, 47, .70);
}

/* الحركة تُستثنى مع تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  html:has(.ph-menu) #layout-menu.ph-menu .menu-sub > .menu-item > .menu-link::before {
    transition: none;
  }
}

/* --- 12) الأب النشط ذو الأبناء: حبّة نحاسية مُخطَّطة (لا مصمتة) --------------
   القاعدة العامّة للأب النشط (سطر ~3977) تحمل ‎:not(.menu-toggle)‎ فتستبعد
   الأب-التبديلي، فيبقى بلا خلفية ولا حدود ولا ظل — أضعف بصرياً من ابن نشط
   عادي. هنا نمنحه علاجاً مميّزاً يتناسب مع دوره كـ«رأس شجرة»: حبّة نحاسية
   بحدّ خارجي (لا فيلَر مصمت) لتوازن الابن المصمت أدناه بلا تكرار طاقته،
   وحلقة نحاسية أسفلها تُغذّي بصرياً نبع الخيط الرأسي (السبيدر).

   نطبّق فقط عندما يكون الأب: (open + active + فيه menu-sub) — أي فعّالاً
   وأبناؤه مفتوحون. لن يُطلَق على أب مغلق. */

html:has(.ph-menu) #layout-menu.ph-menu .menu-item.active.open > .menu-link.menu-toggle {
  position: relative;
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .16),
              rgba(227, 146, 47, .05) 72%,
              transparent) !important;
  color: var(--th-side-active-fg) !important;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(227, 146, 47, .45);
}

html:has(.ph-menu) #layout-menu.ph-menu .menu-item.active.open > .menu-link.menu-toggle::before {
  content: '' !important;
  position: absolute;
  inset-inline-end: -.6rem;
  inset-block: 24%;
  inline-size: 3px;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFD9A3, #E3922F 55%, #C9741C);
  box-shadow: 0 0 10px rgba(227, 146, 47, .60);
  pointer-events: none;
}

/* حلقة الوصل النحاسية أسفل الأب: تسدّ الفراغ بين قاع الأب ورأس الخيط،
   وتُظهر «نبع» الشجرة. تقع تحت الأب بمقدار ~4-6px، بمركز x=20px نفسه. */
html:has(.ph-menu) #layout-menu.ph-menu .menu-item.active.open > .menu-link.menu-toggle::after {
  content: '' !important;
  position: absolute;
  inset-inline-start: calc(1.25rem - .4rem);
  inset-block-end: -.28rem;
  inline-size: .8rem;
  block-size: .8rem;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(227, 146, 47, .55);
  box-shadow: 0 0 8px rgba(227, 146, 47, .35);
  pointer-events: none;
  /* نُلغي أي محتوى تولّده قواعد Vuexy الأخرى لسهم الـcaret */
  transform: none !important;
}

/* عند التحويم على أب فعّال-مفتوح: تعزيز خفيف بلا صخب */
html:has(.ph-menu) #layout-menu.ph-menu .menu-item.active.open > .menu-link.menu-toggle:hover {
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .22),
              rgba(227, 146, 47, .07) 72%,
              transparent) !important;
  box-shadow: inset 0 0 0 1.5px rgba(227, 146, 47, .60);
}


/* =============================================================================
   8-ع. صفحة 10.html (إنشاء ملف الإنجاز) — نظام الخطّين + تحسين التصميم  ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.pf-create-hero) ← موجود في 10.html وحدها
   (صفحة 11.html تشترك معها في .pf-create و .pf-file لكنها بلا .pf-create-hero).

   أبرز فرصة في هذه الصفحة: ملف assets/css/portfolio-file.css يحوي تصميم
   بطاقات اختيار جميلاً باسم ‎.pf-masters .pf-master‎ (سطر 43-73) — لكن
   الصفحة تستعمل ‎.form-check‎ العادي، فلا يُطبَّق ذلك التصميم إطلاقاً وتظهر
   الخيارات الأحد عشر كأزرار راديو عارية.

   الحل: نمنح ‎.form-check‎ هيئة البطاقات القابلة للاختيار عبر ‎:has()‎ —
   الإطار والتظليل وعلامة ✓ تستجيب لحالة ‎:checked‎ دون أي جافاسكربت.
   ========================================================================== */

html:has(.pf-create-hero) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.pf-create-hero) body {
  font-family: var(--f-body);
}

html:has(.pf-create-hero) h1,
html:has(.pf-create-hero) h2,
html:has(.pf-create-hero) h3,
html:has(.pf-create-hero) h4,
html:has(.pf-create-hero) h5,
html:has(.pf-create-hero) h6,
html:has(.pf-create-hero) .btn,
html:has(.pf-create-hero) .nav-link,
html:has(.pf-create-hero) .menu-link,
html:has(.pf-create-hero) .badge,
html:has(.pf-create-hero) .fw-bold,
html:has(.pf-create-hero) .fw-bolder,
html:has(.pf-create-hero) .fw-semibold,
html:has(.pf-create-hero) .form-label,
html:has(.pf-create-hero) .form-check-label {
  font-family: var(--f-display);
}

html:has(.pf-create-hero) .pf-create-hero p,
html:has(.pf-create-hero) input,
html:has(.pf-create-hero) textarea,
html:has(.pf-create-hero) select,
html:has(.pf-create-hero) .form-control {
  font-family: var(--f-body);
}


/* ---------- 1) البطاقة الحاوية ---------- */
html:has(.pf-create-hero) .pf-file .card {
  border-radius: 26px !important;
  box-shadow: 0 30px 66px -34px rgba(17, 28, 26, .30),
              inset 0 1px 0 rgba(255, 255, 255, .65) !important;
}

html:has(.pf-create-hero) .pf-file .card-body {
  padding: clamp(1.6rem, 4vw, 2.6rem);
}

/* ---------- 2) ترويسة النموذج ---------- */
@keyframes cmp-pfc-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(227, 146, 47, .38); }
  70%  { box-shadow: 0 0 0 14px rgba(227, 146, 47, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(227, 146, 47, 0);   }
}

html:has(.pf-create-hero) .pf-create-hero {
  margin-block-end: 2rem;
}

html:has(.pf-create-hero) .pf-create-icon {
  inline-size: 76px;
  block-size: 76px;
  border-radius: 24px;
  margin-block-end: 1.1rem;
  font-size: 2.2rem;
  color: #fff;
  background: linear-gradient(140deg, #F0A64A, #C9741C);
  border: 0;
  box-shadow: 0 16px 34px -12px rgba(227, 146, 47, .62);
  animation: cmp-pfc-pulse 3s ease-out infinite;
}

html:has(.pf-create-hero) .pf-create-hero h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--pal-ink);
}

html:has(.pf-create-hero) .pf-create-hero p {
  font-size: 1.02rem;
  color: var(--pal-ink-2);
}

/* ---------- 3) حقل الاسم ---------- */
html:has(.pf-create-hero) .pf-file .form-label {
  font-size: .98rem;
  font-weight: 800;
  color: var(--pal-ink);
  margin-block-end: .5rem;
}

html:has(.pf-create-hero) .pf-file .form-control {
  padding: .85rem 1.1rem;
  border-radius: 15px;
  border: 1.5px solid rgba(17, 28, 26, .12);
  background: rgba(255, 255, 255, .75);
  font-size: 1rem;
  transition: border-color .26s ease, box-shadow .26s ease, background .26s ease;
}

html:has(.pf-create-hero) .pf-file .form-control:focus {
  border-color: rgba(227, 146, 47, .62);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .14);
}

/* ---------- 4) عنوان مجموعة النماذج ---------- */
html:has(.pf-create-hero) .pf-file h5 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pal-ink);
  margin-block-end: 1rem;
  padding-inline-start: .85rem;
  position: relative;
}

html:has(.pf-create-hero) .pf-file h5::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: .12em .12em;
  inline-size: 4px;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFD9A3, #E3922F 55%, #C9741C);
}

/* ---------- 5) الخيارات → بطاقات اختيار مرقّمة ----------
   الترميز الفعلي لكل خيار (ثلاثة أبناء مباشرين، لا اثنان):

       <div class="form-check mb-2 fw-bolder">
         <input class="form-check-input" type="radio" id="1">
         <label class="form-check-label" for="1"> 1 - </label>   ← التعداد
         <a href="#">نموذج تقييم أداء المعلم</a>                  ← النص
       </div>

   لاحظ أن النص في وسم ‎<a>‎ شقيق للـ label لا داخله، وأن الـ label لا يحمل
   إلا الرقم. لذلك يُرتَّب الصفّ بأربعة مواضع صريحة عبر ‎order‎:
       1) زرّ الاختيار   2) التعداد   3) النص   4) علامة ✓
   ولولا ‎order‎ لقفز ‎<a>‎ إلى المقدّمة لأن قيمته الافتراضية 0.

   الحالة المختارة تُوصف بـ ‎:has(:checked)‎ — بلا جافاسكربت وبلا لمس الترميز. */
html:has(.pf-create-hero) .pf-file .form-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-block-end: .6rem;
  padding: .95rem 1.1rem;
  border-radius: 16px;
  border: 1.5px solid rgba(17, 28, 26, .10);
  background: rgba(255, 255, 255, .70);
  transition: border-color .26s cubic-bezier(.4, 0, .2, 1),
              background .26s ease,
              box-shadow .26s ease,
              transform .26s cubic-bezier(.4, 0, .2, 1);
}

html:has(.pf-create-hero) .pf-file .form-check:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 146, 47, .40);
  background: #fff;
  box-shadow: 0 14px 30px -18px rgba(227, 146, 47, .45);
}

/* 1) زرّ الاختيار */
html:has(.pf-create-hero) .pf-file .form-check .form-check-input {
  order: 1;
  flex: 0 0 auto;
  inline-size: 22px;
  block-size: 22px;
  margin: 0;
  border: 2px solid rgba(17, 28, 26, .22);
  background-color: #fff;
  box-shadow: none;
  cursor: pointer;
  transition: border-color .26s ease, background-color .26s ease;
}

html:has(.pf-create-hero) .pf-file .form-check .form-check-input:checked {
  border-color: #C9741C;
  background-color: #E3922F;
}

html:has(.pf-create-hero) .pf-file .form-check .form-check-input:focus-visible {
  outline: 2.5px solid rgba(227, 146, 47, .55);
  outline-offset: 3px;
}

/* 2) التعداد — عرض ثابت ليصطفّ أحادي الرقم مع ثنائيه */
html:has(.pf-create-hero) .pf-file .form-check .form-check-label {
  order: 2;
  flex: 0 0 auto;
  min-inline-size: 2.6ch;
  margin: 0;
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #C9741C;
  text-align: center;
  cursor: pointer;
  transition: color .26s ease;
}

/* 3) النص — يملأ ما تبقّى */
html:has(.pf-create-hero) .pf-file .form-check > a {
  order: 3;
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.75;
  color: #2B3540;
  text-align: start;
  text-decoration: none;
  border-block-end: 1px dashed transparent;
  transition: color .26s ease, border-color .26s ease;
}

html:has(.pf-create-hero) .pf-file .form-check > a:hover {
  color: var(--pal-gold-deep);
  border-block-end-color: rgba(227, 146, 47, .55);
}

/* الحالة المختارة */
html:has(.pf-create-hero) .pf-file .form-check:has(.form-check-input:checked) {
  border-color: rgba(227, 146, 47, .62);
  background: linear-gradient(160deg,
              rgba(227, 146, 47, .13),
              rgba(227, 146, 47, .05));
  box-shadow: 0 16px 34px -20px rgba(227, 146, 47, .55);
}

html:has(.pf-create-hero) .pf-file .form-check:has(.form-check-input:checked) > a {
  color: var(--pal-ink);
  font-weight: 800;
}

html:has(.pf-create-hero) .pf-file .form-check:has(.form-check-input:checked) .form-check-label {
  color: #8D4E0C;
}

/* 4) علامة ✓ في الطرف الأخير */
html:has(.pf-create-hero) .pf-file .form-check::after {
  order: 4;
  content: "\ea5e";                  /* ti-check */
  font-family: "tabler-icons";
  flex: 0 0 auto;
  inline-size: 26px;
  block-size: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .82rem;
  color: #fff;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 5px 13px -5px rgba(227, 146, 47, .70);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .26s ease, transform .26s cubic-bezier(.34, 1.4, .64, 1);
}

html:has(.pf-create-hero) .pf-file .form-check:has(.form-check-input:checked)::after {
  opacity: 1;
  transform: scale(1);
}

/* ---------- 6) زر التأكيد ---------- */
html:has(.pf-create-hero) .pf-file .btn-add-book {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  margin-block-start: 1.4rem;
  padding: .95rem 1.6rem;
  border: 0;
  border-radius: 16px;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #F0A64A, #C9741C) !important;
  box-shadow: 0 18px 36px -16px rgba(227, 146, 47, .80);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .26s ease;
}

/* وميض يعبر الزر */
html:has(.pf-create-hero) .pf-file .btn-add-book::after {
  content: '';
  position: absolute;
  inset-block: -50%;
  inline-size: 40%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .7s cubic-bezier(.4, 0, .2, 1);
}

html:has(.pf-create-hero) .pf-file .btn-add-book:hover::after {
  inset-inline-start: 130%;
}

html:has(.pf-create-hero) .pf-file .btn-add-book:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -16px rgba(227, 146, 47, .92);
  color: #fff;
}

/* ---------- 7) الجوال ---------- */
@media (max-width: 575.98px) {
  html:has(.pf-create-hero) .pf-file .card {
    border-radius: 20px !important;
  }
  html:has(.pf-create-hero) .pf-create-icon {
    inline-size: 62px;
    block-size: 62px;
    border-radius: 20px;
    font-size: 1.8rem;
  }
  html:has(.pf-create-hero) .pf-file .form-check {
    padding: .8rem .9rem;
    gap: .65rem;
  }
  html:has(.pf-create-hero) .pf-file .form-check > a {
    font-size: .93rem;
    line-height: 1.65;
  }
  html:has(.pf-create-hero) .pf-file .form-check .form-check-label {
    font-size: .88rem;
    min-inline-size: 2.2ch;
  }
}

/* ---------- 8) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.pf-create-hero) .pf-create-icon {
    animation: none;
  }
  html:has(.pf-create-hero) .pf-file .btn-add-book::after {
    display: none;
  }
}


/* =============================================================================
   8-ف. صفحة 11.html (إعدادات ملف الإنجاز) — نظام الخطّين + تحسين التصميم ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.pf-create-card) ← موجود في 11.html وحدها.
   (صفحة 10.html تشترك في .pf-create لكن بلا .pf-create-card، وتستعمل ملف
   portfolio-file.css بينما هذه تستعمل portfolio-create.css.)

   القائمة الجانبية مستثناة — عُمّمت عليها كتلة ‎html:has(.ph-menu)‎ سابقاً.

   البنية: بطاقة زجاجية فيها ترويسة، حقل الاسم، ثماني بطاقات اختيار
   ‎.pf-master‎ (لكل منها أيقونة واسم ورابط «عرض البنود» وعلامة ✓)،
   موافقتان بمربّعَي اختيار، ثم زر التأكيد.

   ملاحظة: بطاقات ‎.pf-master‎ هنا بلا أرقام في الترميز، فأُضيف ترقيم تلقائي
   بعدّاد CSS ليتناسق مع صفحة 10.html — ويُعاد الترقيم ذاتياً لو زادت أو نقصت.
   ========================================================================== */

html:has(.pf-create-card) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.pf-create-card) body {
  font-family: var(--f-body);
}

html:has(.pf-create-card) h1,
html:has(.pf-create-card) h2,
html:has(.pf-create-card) h3,
html:has(.pf-create-card) h4,
html:has(.pf-create-card) h5,
html:has(.pf-create-card) h6,
html:has(.pf-create-card) .btn,
html:has(.pf-create-card) .nav-link,
html:has(.pf-create-card) .menu-link,
html:has(.pf-create-card) .badge,
html:has(.pf-create-card) .fw-bold,
html:has(.pf-create-card) .fw-bolder,
html:has(.pf-create-card) .fw-semibold,
html:has(.pf-create-card) .form-label,
html:has(.pf-create-card) .pf-master-name,
html:has(.pf-create-card) .pf-master-view {
  font-family: var(--f-display);
}

html:has(.pf-create-card) .pf-create .text-center p,
html:has(.pf-create-card) .form-check-label,
html:has(.pf-create-card) input,
html:has(.pf-create-card) textarea,
html:has(.pf-create-card) select,
html:has(.pf-create-card) .form-control {
  font-family: var(--f-body);
}


/* ---------- 1) البطاقة الحاوية ---------- */
html:has(.pf-create-card) .pf-create {
  max-width: 760px;
}

html:has(.pf-create-card) .pf-create .pf-create-card {
  border-radius: 26px !important;
  box-shadow: 0 30px 66px -34px rgba(17, 28, 26, .30),
              inset 0 1px 0 rgba(255, 255, 255, .70) !important;
}

html:has(.pf-create-card) .pf-create .card-body {
  padding: clamp(1.6rem, 4vw, 2.4rem);
}

/* ---------- 2) الترويسة ---------- */
html:has(.pf-create-card) .pf-create .text-center h3 {
  font-size: clamp(1.55rem, 3.2vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--pal-ink);
}

html:has(.pf-create-card) .pf-create .text-center p {
  font-size: 1.02rem;
  color: var(--pal-ink-2);
}

/* ---------- 3) الحقول ---------- */
html:has(.pf-create-card) .pf-create .form-label {
  font-size: .98rem;
  font-weight: 800;
  color: var(--pal-ink);
  margin-block-end: .5rem;
}

html:has(.pf-create-card) .pf-create .form-control {
  padding: .85rem 1.1rem;
  border-radius: 15px;
  border: 1.5px solid rgba(17, 28, 26, .12);
  background: rgba(255, 255, 255, .75);
  font-size: 1rem;
  transition: border-color .26s ease, box-shadow .26s ease, background .26s ease;
}

html:has(.pf-create-card) .pf-create .form-control:focus {
  border-color: rgba(227, 146, 47, .62);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .14);
}

/* ---------- 4) بطاقات النماذج الثماني ---------- */
html:has(.pf-create-card) .pf-masters {
  counter-reset: pfmaster;
  gap: .7rem;
}

html:has(.pf-create-card) .pf-master {
  counter-increment: pfmaster;
  position: relative;
  gap: .9rem;
  padding: 1.05rem 1.15rem;
  border-radius: 18px;
  border: 1.5px solid rgba(17, 28, 26, .10);
  background: rgba(255, 255, 255, .78);
  overflow: hidden;
  transition: border-color .28s cubic-bezier(.4, 0, .2, 1),
              box-shadow .28s ease,
              background .28s ease,
              transform .28s cubic-bezier(.4, 0, .2, 1);
}

/* حافّة ذهبية تتمدّد من المنتصف */
html:has(.pf-create-card) .pf-master::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 50% 50%;
  block-size: 3px;
  border-radius: 0 0 100px 100px;
  background: linear-gradient(90deg, #E3922F, #C9741C);
  transition: inset-inline .38s cubic-bezier(.4, 0, .2, 1);
}

html:has(.pf-create-card) .pf-master:hover::before { inset-inline: 0 0; }

html:has(.pf-create-card) .pf-master:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 146, 47, .45);
  background: #fff;
  box-shadow: 0 18px 36px -20px rgba(227, 146, 47, .48);
}

/* الأيقونة: قرص متدرّج */
html:has(.pf-create-card) .pf-master-ic {
  position: relative;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 16px;
  font-size: 1.45rem;
  color: #fff;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 10px 22px -9px rgba(227, 146, 47, .55);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s ease;
}

html:has(.pf-create-card) .pf-master:hover .pf-master-ic {
  transform: scale(1.07) rotate(-6deg);
}

/* الترقيم التلقائي — شارة صغيرة أعلى الأيقونة */
html:has(.pf-create-card) .pf-master-ic::after {
  content: counter(pfmaster);
  position: absolute;
  inset-block-start: -7px;
  inset-inline-start: -7px;
  inline-size: 22px;
  block-size: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 900;
  color: var(--pal-gold-deep);
  background: #FFFFFF;
  border: 1.5px solid rgba(227, 146, 47, .40);
  box-shadow: 0 3px 8px -3px rgba(17, 28, 26, .30);
}

html:has(.pf-create-card) .pf-master-name {
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.65;
  color: #2B3540;
}

html:has(.pf-create-card) .pf-master-view {
  font-size: .84rem;
  font-weight: 700;
  color: var(--pal-gold-deep);
  border-block-end: 1px dashed transparent;
  transition: color .26s ease, border-color .26s ease;
}

html:has(.pf-create-card) .pf-master-view:hover {
  text-decoration: none;
  border-block-end-color: rgba(227, 146, 47, .55);
}

/* علامة الاختيار — دائرة فارغة قبل الاختيار، تمتلئ نحاسياً عند الاختيار.
   ‎ti-circle-check‎ رمزٌ فيه دائرة+✓، فنُخفيه بـfont-size:0 ونُبقي الحدّ فقط
   ليُقرأ كـ«خانة اختيار مطلوبة» بلا إشارة زائفة بأنّ البطاقة مُختارة. */
html:has(.pf-create-card) .pf-master-check {
  inline-size: 26px;
  block-size: 26px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(17, 28, 26, .16);
  border-radius: 50%;
  font-size: 0;
  color: #fff;
  background: transparent;
  transition: border-color .26s ease, background .26s ease,
              font-size .26s ease, box-shadow .26s ease;
}

html:has(.pf-create-card) .pf-master:hover .pf-master-check {
  border-color: rgba(227, 146, 47, .55);
}

/* الحالة المختارة */
html:has(.pf-create-card) .pf-master:has(.pf-master-radio:checked) {
  border-color: rgba(227, 146, 47, .68);
  background: linear-gradient(160deg,
              rgba(227, 146, 47, .13),
              rgba(227, 146, 47, .04));
  box-shadow: 0 18px 38px -20px rgba(227, 146, 47, .58);
}

html:has(.pf-create-card) .pf-master:has(.pf-master-radio:checked) .pf-master-check {
  border-color: transparent;
  background: linear-gradient(140deg, #F0A64A, #C9741C);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 6px 14px -6px rgba(227, 146, 47, .55);
}

html:has(.pf-create-card) .pf-master:has(.pf-master-radio:checked)::before {
  inset-inline: 0 0;
}

html:has(.pf-create-card) .pf-master:has(.pf-master-radio:checked) .pf-master-name {
  color: var(--pal-ink);
  font-weight: 900;
}

html:has(.pf-create-card) .pf-master:has(.pf-master-radio:checked) .pf-master-ic {
  background: linear-gradient(140deg, #F0A64A, #B3660F);
  box-shadow: 0 12px 26px -9px rgba(227, 146, 47, .70);
}

/* ---------- 5) الموافقتان ---------- */
html:has(.pf-create-card) .pf-create .form-check {
  align-items: center;
  gap: .7rem;
  margin: .5rem 0 !important;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1.5px solid rgba(17, 28, 26, .09);
  background: rgba(255, 255, 255, .62);
  transition: border-color .26s ease, background .26s ease;
}

html:has(.pf-create-card) .pf-create .form-check:has(.form-check-input:checked) {
  border-color: rgba(227, 146, 47, .45);
  background: rgba(227, 146, 47, .07);
}

html:has(.pf-create-card) .pf-create .form-check-input {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  transform: none;
  border: 2px solid rgba(17, 28, 26, .22);
  border-radius: 6px;
  cursor: pointer;
}

html:has(.pf-create-card) .pf-create .form-check-input:checked {
  background-color: #E3922F;
  border-color: #C9741C;
}

html:has(.pf-create-card) .pf-create .form-check-input:focus-visible {
  outline: 2.5px solid rgba(227, 146, 47, .55);
  outline-offset: 3px;
  box-shadow: none;
}

html:has(.pf-create-card) .pf-create .form-check-label {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.8;
  color: #3E4A55;
  cursor: pointer;
}

/* ---------- 6) زر التأكيد ---------- */
html:has(.pf-create-card) .pf-create .btn-add-book {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  margin-block-start: 1.3rem;
  padding: .95rem 1.6rem;
  border: 0;
  border-radius: 16px;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #F0A64A, #C9741C) !important;
  box-shadow: 0 18px 36px -16px rgba(227, 146, 47, .80);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .26s ease;
}

html:has(.pf-create-card) .pf-create .btn-add-book::after {
  content: '';
  position: absolute;
  inset-block: -50%;
  inline-size: 40%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .7s cubic-bezier(.4, 0, .2, 1);
}

html:has(.pf-create-card) .pf-create .btn-add-book:hover::after {
  inset-inline-start: 130%;
}

html:has(.pf-create-card) .pf-create .btn-add-book:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -16px rgba(227, 146, 47, .92);
  color: #fff;
}

/* ---------- 7) الجوال ---------- */
@media (max-width: 575.98px) {
  html:has(.pf-create-card) .pf-create .pf-create-card {
    border-radius: 20px !important;
  }
  html:has(.pf-create-card) .pf-master {
    padding: .85rem .9rem;
    gap: .7rem;
    border-radius: 15px;
  }
  html:has(.pf-create-card) .pf-master-ic {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 13px;
    font-size: 1.2rem;
  }
  html:has(.pf-create-card) .pf-master-name {
    font-size: .94rem;
  }
  html:has(.pf-create-card) .pf-create .form-check-label {
    font-size: .89rem;
  }
}

/* ---------- 8) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.pf-create-card) .pf-create .btn-add-book::after {
    display: none;
  }
  html:has(.pf-create-card) .pf-master,
  html:has(.pf-create-card) .pf-master::before,
  html:has(.pf-create-card) .pf-master-ic {
    transition: none;
  }
}


/* =============================================================================
   8-ص. صفحة 13.html (اشتراكي وملفاتي) — نظام الخطّين + ترويسة الصفحة  ✅
   -----------------------------------------------------------------------------
   ⚠️ ملاحظة مهمّة قبل القراءة:
   محتوى هذه الصفحة الفعلي مفقود من التصدير الثابت. كل ما بقي فيها هو:

       <div class="ph-scope">
         <div class="ph-section-head">
           <h4>اشتراكي وملفاتي</h4>
           <div class="ph-sub">إدارة اشتراك ملف الإنجاز، ملفات سنواتك…</div>
         </div>
       </div>

   أي سطران فقط. أما بطاقة الاشتراك وقائمة الملفات وخطوات الرحلة — وهي
   العناصر التي يحمل لها ملف portfolio-home.css أنماطاً جاهزة باسم
   ‎.pf-journey‎ و ‎.pf-sub-*‎ و ‎.pf-files-*‎ و ‎.pf-file-row‎ — فكانت تُولَّد
   من الخادم (Laravel) ولم تُصدَّر إلى HTML. لذلك لا يوجد ما يُعاد تصميمه.

   ما نفعله هنا واقعياً: توحيد الخطوط، وجعل الترويسة اليتيمة تبدو مقصودة
   لا مبتورة — لوح ترويسة كامل بدل سطرين معلّقين في فراغ.

   النطاق: html:has(.ph-scope):not(:has(.ph-benefit))
   ‎.ph-scope‎ موجودة في 9.html و13.html، و‎.ph-benefit‎ في 9.html وحدها،
   فاستُثنيت لتنحصر القواعد في 13.html.
   ========================================================================== */

html:has(.ph-scope):not(:has(.ph-benefit)) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.ph-scope):not(:has(.ph-benefit)) body {
  font-family: var(--f-body);
}

html:has(.ph-scope):not(:has(.ph-benefit)) h1,
html:has(.ph-scope):not(:has(.ph-benefit)) h2,
html:has(.ph-scope):not(:has(.ph-benefit)) h3,
html:has(.ph-scope):not(:has(.ph-benefit)) h4,
html:has(.ph-scope):not(:has(.ph-benefit)) h5,
html:has(.ph-scope):not(:has(.ph-benefit)) h6,
html:has(.ph-scope):not(:has(.ph-benefit)) .btn,
html:has(.ph-scope):not(:has(.ph-benefit)) .nav-link,
html:has(.ph-scope):not(:has(.ph-benefit)) .menu-link,
html:has(.ph-scope):not(:has(.ph-benefit)) .badge,
html:has(.ph-scope):not(:has(.ph-benefit)) .fw-bold,
html:has(.ph-scope):not(:has(.ph-benefit)) .fw-bolder,
html:has(.ph-scope):not(:has(.ph-benefit)) .fw-semibold {
  font-family: var(--f-display);
}

html:has(.ph-scope):not(:has(.ph-benefit)) .ph-sub,
html:has(.ph-scope):not(:has(.ph-benefit)) input,
html:has(.ph-scope):not(:has(.ph-benefit)) textarea,
html:has(.ph-scope):not(:has(.ph-benefit)) select,
html:has(.ph-scope):not(:has(.ph-benefit)) .form-control {
  font-family: var(--f-body);
}


/* ---------- ترويسة الصفحة: لوح داكن موحّد مع بقية الصفحات ---------- */
@keyframes cmp-sub-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-4%, 5%, 0) scale(1.18); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

html:has(.ph-scope):not(:has(.ph-benefit)) .ph-scope .ph-section-head {
  position: relative;
  overflow: hidden;
  text-align: start;
  margin-block: .5rem 1.5rem !important;
  padding: clamp(2rem, 4.5vw, 3rem) clamp(1.4rem, 4vw, 2.6rem);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .09);
  background:
    radial-gradient(80% 130% at 86% -14%, rgba(227, 146, 47, .30), transparent 58%),
    radial-gradient(70% 115% at 8% 108%, rgba(99, 102, 241, .16), transparent 62%),
    linear-gradient(155deg, var(--pal-hero), var(--pal-hero-2) 68%);
  box-shadow: 0 34px 76px -34px rgba(17, 28, 26, .62);
}

/* هالة ذهبية تسبح داخل اللوح */
html:has(.ph-scope):not(:has(.ph-benefit)) .ph-scope .ph-section-head::before {
  content: '';
  position: absolute;
  inset-block-start: -130px;
  inset-inline-end: -100px;
  inline-size: 380px;
  block-size: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 146, 47, .26), transparent 70%);
  filter: blur(64px);
  pointer-events: none;
  animation: cmp-sub-float 34s cubic-bezier(.4, 0, .2, 1) infinite;
}

html:has(.ph-scope):not(:has(.ph-benefit)) .ph-scope .ph-section-head h4 {
  position: relative;
  z-index: 1;
  margin-block-end: .6rem;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: #FFFFFF;
}

html:has(.ph-scope):not(:has(.ph-benefit)) .ph-scope .ph-sub {
  position: relative;
  z-index: 1;
  font-size: 1.04rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, .72);
  max-inline-size: 62ch;
}

/* الشرطة الزخرفية الأصلية تحت الترويسة: تُنقل للبداية وتُذهَّب */
html:has(.ph-scope):not(:has(.ph-benefit)) .ph-scope .ph-section-head::after {
  position: relative;
  z-index: 1;
  inline-size: 78px;
  block-size: 4px;
  margin: 1.1rem 0 0;
  background: linear-gradient(90deg, #E3922F, #FFD9A3);
  box-shadow: 0 0 14px rgba(227, 146, 47, .55);
}

/* ---------- الجوال ---------- */
@media (max-width: 767.98px) {
  html:has(.ph-scope):not(:has(.ph-benefit)) .ph-scope .ph-section-head {
    padding: 1.7rem 1.1rem;
    border-radius: 22px;
  }
}

/* ---------- احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.ph-scope):not(:has(.ph-benefit)) .ph-scope .ph-section-head::before {
    animation: none;
  }
}


/* =============================================================================
   8-ق. صفحة 14.html (اشتراك ملف الإنجاز) — نظام الخطّين + إعادة التصميم  ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.pp-hero) ← ‎.pp-hero‎ و‎.pp-price‎ و‎.pp-features‎ موجودة
   في 14.html وحدها (تحقّقنا). القائمة الجانبية مغطّاة سلفاً بكتلة ‎.ph-menu‎.

   الاتجاه: بطاقة **ورقية فاتحة** لا لوحاً داكناً. الداكن يظهر هنا في مساحة
   واحدة صغيرة فقط — حزام السعر — ليكون بؤرة النظر بلا أن يثقل الصفحة.
   بقية البطاقة ورق كريمي بلمسات ذهبية.

   خلل بارز في الصفحة قبل التعديل:
   ملف portfolio-pay.css سطر 70-77 يحمل تصميماً ذهبياً متدرّجاً لزر الشراء
   باسم ‎.btn-add-book‎ — لكن الزر في الصفحة مكتوب
       <a href="portfolio-file.html" class="btn btn-secondary w-100">
   أي زر بوتستراب **رمادي**، و‎.btn-add-book‎ غير موجود في الصفحة إطلاقاً
   (صفر مرّة). فالنداء الرئيسي للشراء كان أبهت عنصر في صفحة الدفع.
   نصلحه باستهداف الزر بموضعه داخل ‎.w-50‎.

   ملاحظة: رمز الريال داخل ‎.pp-price‎ وسم ‎<svg>‎ بنمط مضمّن ‎fill:#B85B21‎،
   والمضمّن يتغلّب على أي قاعدة خارجية — فلزم ‎!important‎ لتلوينه.
   ========================================================================== */

html:has(.pp-hero) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);

  /* لوحة الصفحة — نقطة تحكّم واحدة */
  /* أسماء مستعارة للوحة المركزية ‎--pal-*‎ (القسم 16-د) — كانت قيماً صريحة
     مطابقة لأساسها، فثيم Default بلا تغيير والثلاثة الأخرى صارت تعمل. */
  --pay-paper:   var(--pal-paper);
  --pay-paper-2: var(--pal-paper-2);
  --pay-line:    var(--pal-line);
  --pay-ink:     var(--pal-ink);
  --pay-ink-2:   var(--pal-ink-2);
  --pay-gold:    var(--pal-gold);
  --pay-gold-2:  var(--pal-gold-2);
  --pay-gold-deep: var(--pal-gold-deep);
  --pay-dark:    var(--pal-dark);      /* يُستعمل في حزام السعر وحده */
}

html:has(.pp-hero) body {
  font-family: var(--f-body);
}

html:has(.pp-hero) h1,
html:has(.pp-hero) h2,
html:has(.pp-hero) h3,
html:has(.pp-hero) h4,
html:has(.pp-hero) h5,
html:has(.pp-hero) h6,
html:has(.pp-hero) .btn,
html:has(.pp-hero) .nav-link,
html:has(.pp-hero) .menu-link,
html:has(.pp-hero) .badge,
html:has(.pp-hero) .fw-bold,
html:has(.pp-hero) .fw-bolder,
html:has(.pp-hero) .fw-semibold,
html:has(.pp-hero) .pp-amount,
html:has(.pp-hero) .pp-duration {
  font-family: var(--f-display);
}

html:has(.pp-hero) .pp-feature,
html:has(.pp-hero) .pp-per,
html:has(.pp-hero) input,
html:has(.pp-hero) textarea,
html:has(.pp-hero) select,
html:has(.pp-hero) .form-control {
  font-family: var(--f-body);
}


/* ---------- 1) البطاقة الحاوية: ورق كريمي ---------- */
html:has(.pp-hero) .pf-pay {
  position: relative;
  border: 1px solid var(--pay-line) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(78% 120% at 86% -12%, rgba(227, 146, 47, .16), transparent 58%),
    linear-gradient(160deg, var(--pay-paper), var(--pay-paper-2) 72%) !important;
  box-shadow: 0 30px 68px -36px rgba(35, 43, 36, .26) !important;
}

/* ---------- 2) الترويسة ---------- */
@keyframes cmp-pay-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-4%, 5%, 0) scale(1.18); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

html:has(.pp-hero) .pf-pay .pp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4.5vw, 3rem) 1.5rem 1.4rem;
  margin-block-end: 1.2rem;
  border: 0;
  border-radius: 24px;
  background: transparent;
}

html:has(.pp-hero) .pf-pay .pp-hero::before {
  content: '';
  position: absolute;
  inset-block-start: -120px;
  inset-inline-end: -90px;
  inline-size: 340px;
  block-size: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 146, 47, .18), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: cmp-pay-float 32s cubic-bezier(.4, 0, .2, 1) infinite;
}

html:has(.pp-hero) .pf-pay h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--pay-ink);
}

html:has(.pp-hero) .pf-pay .pp-hero .text-center,
html:has(.pp-hero) .pf-pay .text-darken-1 {
  position: relative;
  z-index: 1;
  color: var(--pay-ink-2) !important;
  font-size: 1.02rem;
  line-height: 1.9;
}

/* ---------- 3) حزام السعر — المساحة الداكنة الوحيدة ----------
   بؤرة النظر: قطعة داكنة صغيرة وسط الورق تجعل الرقم لا يُخطأ.        */
html:has(.pp-hero) .pf-pay .pp-price {
  position: relative;
  z-index: 1;
  margin-block: .9rem 1.1rem;
  padding: 1rem 2rem;
  border-radius: 22px;
  border: 1px solid rgba(35, 43, 36, .18);
  background:
    radial-gradient(70% 140% at 88% -20%, rgba(227, 146, 47, .28), transparent 62%),
    linear-gradient(150deg, var(--pay-dark), #18201A 78%);
  box-shadow: 0 20px 42px -22px rgba(35, 43, 36, .55);
}

html:has(.pp-hero) .pf-pay .pp-price .pp-amount {
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1;
  background-image: linear-gradient(140deg, #FFE0B0, #F0A64A 52%, #E3922F);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* رمز الريال: نمط مضمّن fill:#B85B21 → يلزم !important */
html:has(.pp-hero) .pf-pay .pp-price svg {
  fill: #F0A64A !important;
}

html:has(.pp-hero) .pf-pay .pp-price .pp-per {
  color: rgba(255, 255, 255, .66);
  font-size: .95rem;
  font-weight: 600;
}

/* ---------- 4) مدة الاشتراك ---------- */
html:has(.pp-hero) .pf-pay .pp-duration {
  position: relative;
  z-index: 1;
  margin-block-end: 1.6rem;
  padding: .5rem 1.15rem;
  font-size: .95rem;
  color: var(--pay-ink-2);
  background: rgba(227, 146, 47, .09);
  border: 1px dashed rgba(227, 146, 47, .45);
}

html:has(.pp-hero) .pf-pay .pp-duration i { color: var(--pay-gold-2); }
html:has(.pp-hero) .pf-pay .pp-duration strong { color: var(--pay-gold-deep); font-weight: 900; }
html:has(.pp-hero) .pf-pay .pp-duration .pp-duration-sub { color: var(--pay-ink-2); opacity: .85; }

/* ---------- 5) المزايا الأربع ---------- */
html:has(.pp-hero) .pf-pay .pp-features {
  max-inline-size: 680px;
  gap: .7rem;
  margin-block-end: 1.8rem;
}

html:has(.pp-hero) .pf-pay .pp-feature {
  gap: .75rem;
  padding: .95rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(35, 43, 36, .10);
  background: rgba(255, 255, 255, .78);
  color: var(--pay-ink);
  font-size: .96rem;
  font-weight: 600;
  box-shadow: 0 8px 20px -16px rgba(35, 43, 36, .30);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1),
              border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

html:has(.pp-hero) .pf-pay .pp-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 146, 47, .45);
  background: #FFFFFF;
  box-shadow: 0 16px 32px -18px rgba(227, 146, 47, .45);
}

html:has(.pp-hero) .pf-pay .pp-feature i {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 13px;
  font-size: 1.2rem;
  color: #fff;
  background: linear-gradient(140deg, var(--pay-gold), var(--pay-gold-2));
  box-shadow: 0 8px 18px -8px rgba(227, 146, 47, .55);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

html:has(.pp-hero) .pf-pay .pp-feature:hover i {
  transform: scale(1.08) rotate(-6deg);
}

/* ---------- 6) زر الشراء — إصلاح الزر الرمادي ---------- */
html:has(.pp-hero) .pf-pay .w-50 {
  inline-size: min(420px, 100%) !important;
}

html:has(.pp-hero) .pf-pay .w-50 > .btn {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.6rem;
  border: 0 !important;
  border-radius: 17px;
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: #fff !important;
  background: linear-gradient(135deg, #F0A64A, var(--pay-gold-2)) !important;
  box-shadow: 0 20px 40px -16px rgba(227, 146, 47, .70);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1), box-shadow .26s ease;
}

html:has(.pp-hero) .pf-pay .w-50 > .btn::after {
  content: '';
  position: absolute;
  inset-block: -50%;
  inline-size: 40%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .7s cubic-bezier(.4, 0, .2, 1);
}

html:has(.pp-hero) .pf-pay .w-50 > .btn:hover::after {
  inset-inline-start: 130%;
}

html:has(.pp-hero) .pf-pay .w-50 > .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 48px -16px rgba(227, 146, 47, .85);
}

/* ---------- 7) زر التفعيل التجريبي ---------- */
html:has(.pp-hero) .pf-pay .pf-mock .btn {
  padding: .7rem 1.4rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--pay-gold-deep) !important;
  background: rgba(227, 146, 47, .07) !important;
  border: 1.5px dashed rgba(227, 146, 47, .45) !important;
  transition: background .26s ease, border-color .26s ease;
}

html:has(.pp-hero) .pf-pay .pf-mock .btn:hover {
  background: rgba(227, 146, 47, .14) !important;
  border-color: rgba(227, 146, 47, .70) !important;
}

html:has(.pp-hero) .pf-pay .pf-mock .text-muted {
  color: var(--pay-ink-2) !important;
  font-size: .84rem;
  opacity: .85;
}

/* ---------- 8) الجوال ---------- */
@media (max-width: 575.98px) {
  html:has(.pp-hero) .pf-pay {
    border-radius: 22px !important;
  }
  html:has(.pp-hero) .pf-pay .pp-hero {
    padding: 1.7rem 1rem 1.2rem;
  }
  html:has(.pp-hero) .pf-pay .pp-features {
    grid-template-columns: 1fr;
  }
  html:has(.pp-hero) .pf-pay .pp-price {
    padding: .8rem 1.3rem;
    border-radius: 18px;
  }
}

/* ---------- 9) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.pp-hero) .pf-pay .pp-hero::before {
    animation: none;
  }
  html:has(.pp-hero) .pf-pay .w-50 > .btn::after {
    display: none;
  }
  html:has(.pp-hero) .pf-pay .pp-feature,
  html:has(.pp-hero) .pf-pay .pp-feature i {
    transition: none;
  }
}


/* =============================================================================
   8-ك2. صفحة 15.html (شروحات ملف الإنجاز) — نظام الخطّين + تصميم مشغّل  ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.list-group-flush) ← موجود في 15.html وحدها (تحقّقنا).
   القائمة الجانبية مغطّاة سلفاً بكتلة ‎.ph-menu‎.

   ⚠️ عطل وظيفي أُصلح هنا:
   بطاقة الفهرس مكتوبة ‎<div class="card overflow-hidden" style="height:500px">‎
   وتحوي **29 بنداً**. الارتفاع مقيَّد والفائض مقصوص و‎.card-bod‎ (وهو خطأ
   إملائي لـ card-body فلا يحمل أي نمط) بلا تمرير — فالدروس بعد السابع أو
   الثامن كانت **محجوبة ولا سبيل للوصول إليها**. جعلنا البطاقة عمود flex
   والجسم قابلاً للتمرير، ورفعنا الارتفاع ليتناسب مع الشاشة.

   الاتجاه البصري: أساس فاتح ورقي. الداكن في مساحة واحدة صغيرة فقط —
   شريط ترويسة الفهرس — ليثبّت اللوح بصرياً بلا أن يثقل الصفحة.
   ========================================================================== */

html:has(.list-group-flush) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);

  /* أسماء مستعارة للوحة المركزية ‎--pal-*‎ (القسم 16-د) */
  --vid-paper:   var(--pal-paper);
  --vid-paper-2: var(--pal-paper-2);
  --vid-line:    var(--pal-line);
  --vid-ink:     var(--pal-ink);
  --vid-ink-2:   var(--pal-ink-2);
  --vid-gold:    var(--pal-gold);
  --vid-gold-2:  var(--pal-gold-2);
  --vid-gold-deep: var(--pal-gold-deep);
  --vid-dark:    var(--pal-dark);      /* شريط ترويسة الفهرس وحده */
  --vid-ease:    cubic-bezier(.4, 0, .2, 1);
}

html:has(.list-group-flush) body {
  font-family: var(--f-body);
}

html:has(.list-group-flush) h1,
html:has(.list-group-flush) h2,
html:has(.list-group-flush) h3,
html:has(.list-group-flush) h4,
html:has(.list-group-flush) h5,
html:has(.list-group-flush) h6,
html:has(.list-group-flush) .btn,
html:has(.list-group-flush) .nav-link,
html:has(.list-group-flush) .menu-link,
html:has(.list-group-flush) .card-header,
html:has(.list-group-flush) .fw-bold,
html:has(.list-group-flush) .fw-bolder,
html:has(.list-group-flush) .list-group-item {
  font-family: var(--f-display);
}


/* ---------- 1) بطاقة الفهرس: عمود قابل للتمرير (إصلاح العطل) ---------- */
html:has(.list-group-flush) .card:has(.list-group-flush) {
  display: flex;
  flex-direction: column;
  block-size: min(72vh, 640px) !important;   /* كان 500px مضمّناً */
  border: 1px solid var(--vid-line) !important;
  border-radius: 22px !important;
  background: linear-gradient(165deg, var(--vid-paper), var(--vid-paper-2) 78%);
  box-shadow: 0 24px 54px -30px rgba(35, 43, 36, .26);
}

html:has(.list-group-flush) .card-bod {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: .35rem;
}

/* شريط تمرير الفهرس */
html:has(.list-group-flush) .card-bod::-webkit-scrollbar { inline-size: 8px; }
html:has(.list-group-flush) .card-bod::-webkit-scrollbar-track { background: transparent; }
html:has(.list-group-flush) .card-bod::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: rgba(227, 146, 47, .35);
}
html:has(.list-group-flush) .card-bod::-webkit-scrollbar-thumb:hover {
  background: rgba(227, 146, 47, .60);
}

/* ---------- 2) ترويسة الفهرس: المساحة الداكنة الوحيدة ---------- */
html:has(.list-group-flush) .card-header.bg-label-primary {
  position: relative;
  flex: 0 0 auto;
  padding: .9rem 1rem !important;
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: -.01em;
  color: #FFFFFF !important;
  background:
    radial-gradient(70% 160% at 88% -30%, rgba(227, 146, 47, .34), transparent 62%),
    linear-gradient(150deg, var(--vid-dark), #18201A 82%) !important;
  border-block-end: 0;
}

/* خيط ذهبي أسفل الترويسة */
html:has(.list-group-flush) .card-header.bg-label-primary::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--vid-gold), transparent);
}

/* أيقونة قائمة تشغيل قبل العنوان */
html:has(.list-group-flush) .card-header.bg-label-primary::before {
  content: "\eec0";                  /* ti-playlist */
  font-family: "tabler-icons";
  margin-inline-end: .5rem;
  font-size: 1.15rem;
  font-weight: 400;
  color: #F0A64A;
  vertical-align: -2px;
}

/* ---------- 3) بنود الفهرس: صفوف تشغيل ---------- */
html:has(.list-group-flush) .list-group-flush {
  padding: .4rem .5rem;
}

html:has(.list-group-flush) .list-group-flush > .list-group-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-block-end: .3rem;
  padding: .7rem .75rem;
  border: 0;
  border-radius: 13px;
  background: transparent;
  transition: background .24s var(--vid-ease),
              padding-inline-start .24s var(--vid-ease);
}

/* أيقونة تشغيل دائرية لكل درس */
html:has(.list-group-flush) .list-group-flush > .list-group-item::before {
  content: "\ed22";                  /* ti-video — أيقونة الدرس
     بدائل: \eafa movie · \ea8d device-tv · \ec90 brand-youtube
            \eb70 presentation · \f34d chalkboard · \ecf7 school */
  font-family: "tabler-icons";
  flex: 0 0 auto;
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 400;
  color: var(--vid-gold-deep);
  background: rgba(227, 146, 47, .12);
  border: 1px solid rgba(227, 146, 47, .22);
  transition: transform .24s var(--vid-ease),
              background .24s ease, color .24s ease, box-shadow .24s ease;
}

html:has(.list-group-flush) .list-group-flush > .list-group-item > a {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--vid-ink-2);
  text-decoration: none;
  transition: color .24s ease;
}

/* المرور */
html:has(.list-group-flush) .list-group-flush > .list-group-item:hover {
  background: rgba(227, 146, 47, .09);
  padding-inline-start: 1rem;
}

html:has(.list-group-flush) .list-group-flush > .list-group-item:hover::before {
  transform: scale(1.1);
  color: #fff;
  background: linear-gradient(140deg, var(--vid-gold), var(--vid-gold-2));
  box-shadow: 0 6px 14px -5px rgba(227, 146, 47, .60);
}

html:has(.list-group-flush) .list-group-flush > .list-group-item:hover > a {
  color: var(--vid-ink);
}

/* الدرس الجاري */
html:has(.list-group-flush) .list-group-flush > .list-group-item.active {
  background: linear-gradient(270deg,
              var(--pal-line),
              rgba(227, 146, 47, .06) 70%,
              transparent);
  border: 0;
  box-shadow: inset 3px 0 0 var(--vid-gold);
}

html:has(.list-group-flush) .list-group-flush > .list-group-item.active::before {
  content: "\f691";                  /* ti-player-play-filled */
  color: #fff;
  background: linear-gradient(140deg, var(--vid-gold), var(--vid-gold-2));
  border-color: transparent;
  box-shadow: 0 6px 16px -5px rgba(227, 146, 47, .70);
}

/* لون العنصر النشط: core.css سطر 4486 يفرض ‎color:#fff‎ على ‎.list-group-item.active‎
   والخلفية هنا ذهبية فاتحة، فالأبيض يختفي. نفرض حبراً غامقاً على البند
   والرابط معاً بـ !important ضماناً. */
html:has(.list-group-flush) .list-group-flush > .list-group-item.active,
html:has(.list-group-flush) .list-group-flush > .list-group-item.active > a {
  color: #7A4A16 !important;
  font-weight: 900;
}

/* ---------- 4) إطار الفيديو ---------- */
html:has(.list-group-flush) .ratio.ratio-16x9 {
  position: relative;
  border: 0 !important;
  border-radius: 22px !important;
  overflow: hidden;
  background: var(--vid-dark);
  box-shadow: 0 30px 70px -32px rgba(35, 43, 36, .48),
              0 0 0 1px var(--vid-line) !important;
}

html:has(.list-group-flush) .ratio.ratio-16x9 > iframe {
  border-radius: 22px;
}

/* هالة ذهبية ناعمة خلف المشغّل */
@keyframes cmp-vid-glow {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}

html:has(.list-group-flush) .stick-top {
  position: relative;
}

html:has(.list-group-flush) .stick-top::before {
  content: '';
  position: absolute;
  inset: -26px -18px 40%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(60% 100% at 50% 0%,
              rgba(227, 146, 47, .22), transparent 70%);
  filter: blur(34px);
  pointer-events: none;
  animation: cmp-vid-glow 7s ease-in-out infinite;
}

/* ---------- 5) الجوال ---------- */
@media (max-width: 991.98px) {
  html:has(.list-group-flush) .card:has(.list-group-flush) {
    block-size: min(56vh, 460px) !important;
  }
}

@media (max-width: 575.98px) {
  html:has(.list-group-flush) .card:has(.list-group-flush) {
    border-radius: 18px !important;
  }
  html:has(.list-group-flush) .ratio.ratio-16x9,
  html:has(.list-group-flush) .ratio.ratio-16x9 > iframe {
    border-radius: 16px !important;
  }
  html:has(.list-group-flush) .list-group-flush > .list-group-item > a {
    font-size: .88rem;
  }
}

/* ---------- 6) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.list-group-flush) .stick-top::before {
    animation: none;
  }
  html:has(.list-group-flush) .list-group-flush > .list-group-item,
  html:has(.list-group-flush) .list-group-flush > .list-group-item::before,
  html:has(.list-group-flush) .list-group-flush > .list-group-item > a {
    transition: none;
  }
}


/* =============================================================================
   8-ل2. صفحة 16.html (تواصل معنا) — نظام الخطّين + إعادة تصميم   ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.contact-img-box) ← موجود في 16.html وحدها (تحقّقنا).
   القائمة الجانبية مغطّاة سلفاً بكتلة ‎.ph-menu‎.

   البنية: عمودان — يمين بطاقة بيانات التواصل (صورة + ثلاثة صفوف: العنوان،
   البريد، الهاتف)، ويسار بطاقة نموذج الملاحظات (اسم، بريد، جوال، عنوان،
   رسالة، زر إرسال).

   الاتجاه: أساس فاتح ورقي بلمسات ذهبية. الداكن في مساحة واحدة فقط —
   بطاقة بيانات التواصل — لتكون مرساة بصرية مقابل النموذج الورقي الواسع.
   ========================================================================== */

html:has(.contact-img-box) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);

  /* أسماء مستعارة للوحة المركزية ‎--pal-*‎ (القسم 16-د) */
  --ct-paper:   var(--pal-paper);
  --ct-paper-2: var(--pal-paper-2);
  --ct-line:    var(--pal-line);
  --ct-ink:     var(--pal-ink);
  --ct-ink-2:   var(--pal-ink-2);
  --ct-gold:    var(--pal-gold);
  --ct-gold-2:  var(--pal-gold-2);
  --ct-gold-deep: var(--pal-gold-deep);
  --ct-dark:    var(--pal-dark);      /* بطاقة بيانات التواصل وحدها */
  --ct-ease:    cubic-bezier(.4, 0, .2, 1);
}

html:has(.contact-img-box) body {
  font-family: var(--f-body);
}

html:has(.contact-img-box) h1,
html:has(.contact-img-box) h2,
html:has(.contact-img-box) h3,
html:has(.contact-img-box) h4,
html:has(.contact-img-box) h5,
html:has(.contact-img-box) h6,
html:has(.contact-img-box) .btn,
html:has(.contact-img-box) .nav-link,
html:has(.contact-img-box) .menu-link,
html:has(.contact-img-box) .badge,
html:has(.contact-img-box) .fw-bold,
html:has(.contact-img-box) .fw-bolder,
html:has(.contact-img-box) .form-label,
html:has(.contact-img-box) .section-title {
  font-family: var(--f-display);
}

html:has(.contact-img-box) .text-heading,
html:has(.contact-img-box) input,
html:has(.contact-img-box) textarea,
html:has(.contact-img-box) select,
html:has(.contact-img-box) .form-control {
  font-family: var(--f-body);
}


/* ---------- 1) ترويسة القسم ---------- */
@keyframes cmp-ct-shimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

html:has(.contact-img-box) .landing-contact h3 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ct-ink);
}

html:has(.contact-img-box) .section-title {
  position: relative;
  background-image: linear-gradient(110deg,
                    var(--ct-gold-2) 0%, #F0A64A 28%, #FFD9A3 48%,
                    #F0A64A 70%, var(--ct-gold-2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cmp-ct-shimmer 7s linear infinite;
}

html:has(.contact-img-box) .landing-contact > .container > p,
html:has(.contact-img-box) .landing-contact .text-center + p {
  color: var(--ct-ink-2);
  font-size: 1.02rem;
}

/* ---------- 2) بطاقة بيانات التواصل: المساحة الداكنة الوحيدة ---------- */
html:has(.contact-img-box) .contact-img-box {
  overflow: hidden;
  padding: 1rem !important;
  border: 1px solid rgba(35, 43, 36, .18) !important;
  border-radius: 26px;
  background:
    radial-gradient(70% 120% at 88% -14%, rgba(227, 146, 47, .28), transparent 60%),
    linear-gradient(155deg, var(--ct-dark), #18201A 78%);
  box-shadow: 0 30px 66px -34px rgba(35, 43, 36, .55);
}

html:has(.contact-img-box) .contact-img {
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  padding: .6rem;
}

/* صفوف البيانات الثلاثة */
html:has(.contact-img-box) .contact-img-box .row.gy-3 > [class*="col-"] > .d-flex {
  gap: .2rem;
  padding: .75rem .85rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .05);
  transition: background .26s var(--ct-ease),
              border-color .26s ease,
              transform .26s var(--ct-ease);
}

html:has(.contact-img-box) .contact-img-box .row.gy-3 > [class*="col-"] > .d-flex:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 146, 47, .40);
  background: rgba(227, 146, 47, .12);
}

/* أيقونات الصفوف: أقراص ذهبية */
html:has(.contact-img-box) .contact-img-box .badge.bg-label-primary,
html:has(.contact-img-box) .contact-img-box .badge.bg-label-success {
  inline-size: 40px;
  block-size: 40px;
  display: grid !important;
  place-items: center;
  border-radius: 13px !important;
  font-size: 1.15rem;
  color: #fff !important;
  background: linear-gradient(140deg, var(--ct-gold), var(--ct-gold-2)) !important;
  box-shadow: 0 8px 18px -8px rgba(227, 146, 47, .60);
  transition: transform .26s var(--ct-ease);
}

html:has(.contact-img-box) .contact-img-box .badge.bg-label-success {
  background: linear-gradient(140deg, #34D07B, #12924E) !important;
  box-shadow: 0 8px 18px -8px rgba(18, 146, 78, .60);
}

html:has(.contact-img-box) .contact-img-box .d-flex:hover .badge {
  transform: scale(1.07) rotate(-6deg);
}

html:has(.contact-img-box) .contact-img-box h5 {
  color: rgba(255, 255, 255, .55) !important;
  font-size: .8rem;
  font-weight: 700;
  margin-block-end: .1rem !important;
}

html:has(.contact-img-box) .contact-img-box .text-heading {
  color: #FFFFFF !important;
  font-size: .96rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .26s ease;
}

html:has(.contact-img-box) .contact-img-box a.text-heading:hover {
  color: #FFCE92 !important;
}

/* ---------- 3) بطاقة النموذج: ورق كريمي ---------- */
html:has(.contact-img-box) .col-lg-8 > .card {
  border: 1px solid var(--ct-line) !important;
  border-radius: 26px !important;
  background: linear-gradient(160deg, var(--ct-paper), var(--ct-paper-2) 74%) !important;
  box-shadow: 0 28px 62px -34px rgba(35, 43, 36, .26) !important;
}

html:has(.contact-img-box) .col-lg-8 .card-body {
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
}

html:has(.contact-img-box) .col-lg-8 .card-body h4 {
  position: relative;
  padding-inline-start: .9rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 900;
  color: var(--ct-ink);
}

html:has(.contact-img-box) .col-lg-8 .card-body h4::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: .14em .14em;
  inline-size: 4px;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFD9A3, var(--ct-gold) 55%, var(--ct-gold-2));
}

/* ---------- 4) الحقول ---------- */
html:has(.contact-img-box) .feedback-form .form-label {
  font-size: .93rem;
  font-weight: 800;
  color: var(--ct-ink);
  margin-block-end: .45rem;
}

html:has(.contact-img-box) .feedback-form .form-control {
  padding: .82rem 1.05rem;
  border-radius: 14px;
  border: 1.5px solid rgba(35, 43, 36, .12);
  background: rgba(255, 255, 255, .82);
  font-size: .98rem;
  color: var(--ct-ink);
  transition: border-color .26s ease, box-shadow .26s ease, background .26s ease;
}

html:has(.contact-img-box) .feedback-form .form-control::placeholder {
  color: rgba(91, 103, 115, .55);
}

html:has(.contact-img-box) .feedback-form .form-control:focus {
  border-color: rgba(227, 146, 47, .62);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .14);
}

html:has(.contact-img-box) .feedback-form textarea.form-control {
  min-block-size: 130px;
  line-height: 1.9;
}

/* ---------- 5) زر الإرسال ---------- */
html:has(.contact-img-box) .btnSubmitFeedback {
  position: relative;
  overflow: hidden;
  margin-block-start: 1.2rem !important;
  padding: .92rem 2.2rem;
  border: 0 !important;
  border-radius: 16px;
  font-family: var(--f-display);
  font-size: 1.03rem;
  font-weight: 900;
  color: #fff !important;
  background: linear-gradient(135deg, #F0A64A, var(--ct-gold-2)) !important;
  box-shadow: 0 18px 36px -16px rgba(227, 146, 47, .75);
  transition: transform .26s var(--ct-ease), box-shadow .26s ease;
}

html:has(.contact-img-box) .btnSubmitFeedback::after {
  content: '';
  position: absolute;
  inset-block: -50%;
  inline-size: 40%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .7s var(--ct-ease);
}

html:has(.contact-img-box) .btnSubmitFeedback:hover::after {
  inset-inline-start: 130%;
}

html:has(.contact-img-box) .btnSubmitFeedback:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -16px rgba(227, 146, 47, .90);
}

/* ---------- 6) الجوال ---------- */
@media (max-width: 991.98px) {
  html:has(.contact-img-box) .contact-img-box {
    border-radius: 22px;
  }
  html:has(.contact-img-box) .col-lg-8 > .card {
    border-radius: 22px !important;
  }
}

/* ---------- 7) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.contact-img-box) .section-title {
    animation: none;
  }
  html:has(.contact-img-box) .btnSubmitFeedback::after {
    display: none;
  }
  html:has(.contact-img-box) .contact-img-box .row.gy-3 > [class*="col-"] > .d-flex,
  html:has(.contact-img-box) .contact-img-box .badge {
    transition: none;
  }
}


/* =============================================================================
   8-م2. صفحة 17.html (تصدير ملف الإنجاز إلى PDF) — الخطّان + إعادة تصميم ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.card > ol:not([class]))
   الصفحات الأخرى لا تحوي إلا ‎<ol class="breadcrumb">‎ داخل ‎<nav>‎، بينما
   17.html وحدها فيها ‎<ol>‎ بلا كلاس ابناً مباشراً للبطاقة — تحقّقنا.
   القائمة الجانبية مغطّاة سلفاً بكتلة ‎.ph-menu‎.

   ⚠️ عيب بنيوي أُصلح:
   البطاقة بلا ‎.card-body‎ إطلاقاً — العنوان والفقرة والقائمة أبناء مباشرون
   لـ ‎.card‎:
       <div class="card">
         <div class="card-header">…</div>
         <h2>…</h2>  <p>…</p>  <ol>…</ol>      ← بلا أي حشو
   فالنص كان ملتصقاً بحواف البطاقة. أضفنا الحشو للأبناء المباشرين.

   الاتجاه: أساس فاتح ورقي. الداكن في شريط ترويسة البطاقة وحده.
   ========================================================================== */

html:has(.card > ol:not([class])) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);

  /* أسماء مستعارة للوحة المركزية ‎--pal-*‎ (القسم 16-د) */
  --pdf-paper:   var(--pal-paper);
  --pdf-paper-2: var(--pal-paper-2);
  --pdf-line:    var(--pal-line);
  --pdf-ink:     var(--pal-ink);
  --pdf-ink-2:   var(--pal-ink-2);
  --pdf-gold:    var(--pal-gold);
  --pdf-gold-2:  var(--pal-gold-2);
  --pdf-gold-deep: var(--pal-gold-deep);
  --pdf-dark:    var(--pal-dark);      /* شريط الترويسة وحده */
  --pdf-ease:    cubic-bezier(.4, 0, .2, 1);
}

html:has(.card > ol:not([class])) body {
  font-family: var(--f-body);
}

html:has(.card > ol:not([class])) h1,
html:has(.card > ol:not([class])) h2,
html:has(.card > ol:not([class])) h3,
html:has(.card > ol:not([class])) h4,
html:has(.card > ol:not([class])) h5,
html:has(.card > ol:not([class])) h6,
html:has(.card > ol:not([class])) .btn,
html:has(.card > ol:not([class])) .nav-link,
html:has(.card > ol:not([class])) .menu-link,
html:has(.card > ol:not([class])) .card-title,
html:has(.card > ol:not([class])) .dropdown-item,
html:has(.card > ol:not([class])) .fw-bold,
html:has(.card > ol:not([class])) .fw-bolder {
  font-family: var(--f-display);
}

html:has(.card > ol:not([class])) .card > p,
html:has(.card > ol:not([class])) .card > ol li {
  font-family: var(--f-body);
}


/* ---------- 1) البطاقة + إصلاح الحشو المفقود ---------- */
html:has(.card > ol:not([class])) .card:has(> ol:not([class])) {
  overflow: hidden;
  border: 1px solid var(--pdf-line) !important;
  border-radius: 26px !important;
  background: linear-gradient(160deg, var(--pdf-paper), var(--pdf-paper-2) 74%) !important;
  box-shadow: 0 28px 62px -34px rgba(35, 43, 36, .26) !important;
}

/* الأبناء المباشرون كانوا بلا حشو لغياب .card-body */
html:has(.card > ol:not([class])) .card > h2,
html:has(.card > ol:not([class])) .card > p,
html:has(.card > ol:not([class])) .card > ol {
  margin-inline: clamp(1.2rem, 3.5vw, 2.4rem);
}

html:has(.card > ol:not([class])) .card > ol {
  margin-block-end: clamp(1.6rem, 3.5vw, 2.4rem);
}

/* ---------- 2) شريط الترويسة: المساحة الداكنة الوحيدة ---------- */
html:has(.card > ol:not([class])) .card-header {
  align-items: center;
  padding: 1rem 1.3rem !important;
  border-block-end: 0;
  background:
    radial-gradient(70% 170% at 90% -30%, rgba(227, 146, 47, .32), transparent 62%),
    linear-gradient(150deg, var(--pdf-dark), #18201A 82%);
}

html:has(.card > ol:not([class])) .card-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #FFFFFF;
}

html:has(.card > ol:not([class])) .card-header .ti-dots-vertical {
  color: rgba(255, 255, 255, .70) !important;
  transition: color .22s ease;
}

html:has(.card > ol:not([class])) .card-header .btn:hover .ti-dots-vertical {
  color: #FFCE92 !important;
}

html:has(.card > ol:not([class])) .dropdown-menu {
  border: 1px solid var(--pdf-line);
  border-radius: 16px;
  padding: .4rem;
  box-shadow: 0 20px 44px -24px rgba(35, 43, 36, .40);
}

html:has(.card > ol:not([class])) .dropdown-item {
  border-radius: 10px;
  font-weight: 700;
  color: var(--pdf-ink-2);
  transition: background .2s ease, color .2s ease;
}

html:has(.card > ol:not([class])) .dropdown-item:hover {
  background: rgba(227, 146, 47, .12);
  color: var(--pdf-gold-deep);
}

/* ---------- 3) العنوان الرئيسي ---------- */
html:has(.card > ol:not([class])) .card > h2 {
  margin-block: clamp(1.6rem, 3.5vw, 2.2rem) .6rem;
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: -.015em;
  color: var(--pdf-ink);
}

html:has(.card > ol:not([class])) .card > p {
  margin-block-end: 1.6rem;
  font-size: 1.02rem;
  line-height: 1.95;
  color: var(--pdf-ink-2);
}

/* ---------- 4) الخطوات: بطاقات مرقّمة بعدّاد ---------- */
html:has(.card > ol:not([class])) .card > ol {
  counter-reset: pdfstep;
  list-style: none;
  padding: 0;
  display: grid;
  gap: .7rem;
}

html:has(.card > ol:not([class])) .card > ol > li {
  counter-increment: pdfstep;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .95rem;
  padding: 1.05rem 1.2rem;
  border-radius: 18px;
  border: 1px solid rgba(35, 43, 36, .09);
  background: rgba(255, 255, 255, .78);
  font-size: .99rem;
  line-height: 1.95;
  color: var(--pdf-ink-2);
  box-shadow: 0 10px 26px -20px rgba(35, 43, 36, .26);
  overflow: hidden;
  transition: transform .28s var(--pdf-ease),
              border-color .28s ease,
              box-shadow .28s ease,
              background .28s ease;
}

/* قرص الرقم */
html:has(.card > ol:not([class])) .card > ol > li::before {
  content: counter(pdfstep);
  flex: 0 0 auto;
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg, var(--pdf-gold), var(--pdf-gold-2));
  box-shadow: 0 9px 20px -8px rgba(227, 146, 47, .62);
  transition: transform .28s var(--pdf-ease);
}

/* حافّة ذهبية تتمدّد */
html:has(.card > ol:not([class])) .card > ol > li::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 50% 50%;
  block-size: 3px;
  border-radius: 0 0 100px 100px;
  background: linear-gradient(90deg, var(--pdf-gold), var(--pdf-gold-2));
  transition: inset-inline .38s var(--pdf-ease);
}

html:has(.card > ol:not([class])) .card > ol > li:hover::after { inset-inline: 0 0; }

html:has(.card > ol:not([class])) .card > ol > li:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 146, 47, .42);
  background: #FFFFFF;
  box-shadow: 0 20px 40px -22px rgba(227, 146, 47, .45);
}

html:has(.card > ol:not([class])) .card > ol > li:hover::before {
  transform: scale(1.07) rotate(-6deg);
}

/* ---------- 5) النصوص المميّزة داخل الخطوات → شارات مفاتيح ---------- */
html:has(.card > ol:not([class])) .card > ol > li b,
html:has(.card > ol:not([class])) .card > p b {
  display: inline-block;
  margin-inline: .12rem;
  padding: .14rem .5rem;
  border-radius: 8px;
  border: 1px solid rgba(227, 146, 47, .30);
  background: rgba(227, 146, 47, .10);
  font-family: var(--f-display);
  font-size: .93em;
  font-weight: 800;
  line-height: 1.7;
  color: var(--pdf-gold-deep);
  white-space: nowrap;
}

/* ---------- 6) الجوال ---------- */
@media (max-width: 575.98px) {
  html:has(.card > ol:not([class])) .card:has(> ol:not([class])) {
    border-radius: 20px !important;
  }
  html:has(.card > ol:not([class])) .card > ol > li {
    padding: .9rem .95rem;
    gap: .7rem;
    border-radius: 15px;
    font-size: .93rem;
  }
  html:has(.card > ol:not([class])) .card > ol > li::before {
    inline-size: 32px;
    block-size: 32px;
    border-radius: 11px;
    font-size: .9rem;
  }
  html:has(.card > ol:not([class])) .card > ol > li b {
    white-space: normal;
  }
}

/* ---------- 7) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.card > ol:not([class])) .card > ol > li,
  html:has(.card > ol:not([class])) .card > ol > li::before,
  html:has(.card > ol:not([class])) .card > ol > li::after {
    transition: none;
  }
}


/* =============================================================================
   8-ن2. صفحة 18.html (كتاب الرخصة المهنية) — نظام الخطّين فقط   ✅ مُفعّل
   -----------------------------------------------------------------------------
   النطاق: html:has(.lh-hero) ← موجود في 18.html وحدها (تحقّقنا).

   ⚠️ بطلب المستخدم: **لا إعادة تصميم لهذه الصفحة**. تصميمها الأصلي
   (assets/css/license-home.css) يبقى كما هو تماماً — ألوانه وحوافه وظلاله
   وحركاته وجدوله الملوّن. هذا القسم يغيّر **الخط وحده** لا غير.

       Tajawal              → العناوين وواجهة الاستخدام والشارات والأزرار
       IBM Plex Sans Arabic → النصوص الجارية وخلايا الجدول والحقول
   ========================================================================== */

html:has(.lh-hero) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.lh-hero) body {
  font-family: var(--f-body);
}

/* خط العناوين وواجهة الاستخدام */
html:has(.lh-hero) h1,
html:has(.lh-hero) h2,
html:has(.lh-hero) h3,
html:has(.lh-hero) h4,
html:has(.lh-hero) h5,
html:has(.lh-hero) h6,
html:has(.lh-hero) .btn,
html:has(.lh-hero) .nav-link,
html:has(.lh-hero) .badge,
html:has(.lh-hero) .fw-bold,
html:has(.lh-hero) .fw-bolder,
html:has(.lh-hero) .fw-semibold,
html:has(.lh-hero) .card-title,
html:has(.lh-hero) .lh-title,
html:has(.lh-hero) .lh-eyebrow,
html:has(.lh-hero) .lh-sec-title,
html:has(.lh-hero) .lh-card-title,
html:has(.lh-hero) .lh-chip,
html:has(.lh-hero) .lh-btn-gold,
html:has(.lh-hero) .lh-btn-ghost,
html:has(.lh-hero) .table-custom th,
html:has(.lh-hero) .table-custom tfoot td {
  font-family: var(--f-display);
}

/* خط المتن */
html:has(.lh-hero) .lh-lead,
html:has(.lh-hero) .lh-card p,
html:has(.lh-hero) .table-custom tbody td,
html:has(.lh-hero) p,
html:has(.lh-hero) li,
html:has(.lh-hero) input,
html:has(.lh-hero) textarea,
html:has(.lh-hero) select,
html:has(.lh-hero) .form-control {
  font-family: var(--f-body);
}

/* ملاحظة: خطوط الأيقونات (tabler-icons / FontAwesome) لا تتأثر لأنها
   معرّفة بـ !important داخل ملفاتها. */


/* =============================================================================
   8-س2. صفحة 19.html (دورة الرخصة — المعيار الأول)
        الخطّان + إعادة تصميم جذرية «مسار التعلّم»   ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.cp-cinema) ← موجود في 19.html وحدها (تحقّقنا).

   الترميز الفعلي لكل درس (تحقّقنا منه):
       <div class="form-check d-flex align-items-center mb-3">
         <input class="play-list-click-check" type="checkbox" data-completed="false">
         <label class="play-list-click" data-name="…">
           <span class="mb-0 h6">1. تمهيد عن المعيار</span>
           <span class="play-list-sum" data-min="2.45">2.45</span>
         </label>
       </div>                                              × 17 درساً

   الفكرة: تحويل القائمة المسطّحة إلى **مسار تعلّم عمودي** — قضيب رأسي يمرّ
   بالدروس، ومربّع الإتمام يصير عقدة دائرية عليه: حلقة فارغة للدرس القادم،
   وقرص ذهبي بعلامة ✓ للمنجَز. فيُقرأ التقدّم من شكل المسار لا من الأرقام.
   والسمة ‎data-completed‎ تُستثمر كمحدّد CSS مباشر لتمييز المنجَز.

   الاتجاه اللوني: أساس فاتح ورقي. الداكن في **شاشة السينما وحدها** — وهو
   موضعه الوظيفي لا الزخرفي، مع ضوء محيط (ambient) ينزّ منها إلى الصفحة.

   ⚠️ خطّافات JS محفوظة كما يحذّر رأس course-player.css: active-video ·
   textvideo · play-list-* · plyr-video-* · videoframe · stick-top.
   تنسيق بصري فقط، بلا تغيير بنية أو اسم.
   ========================================================================== */

html:has(.cp-cinema) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);

  /* أسماء مستعارة للوحة المركزية ‎--pal-*‎ (القسم 16-د) */
  --cp-paper:   var(--pal-paper);
  --cp-paper-2: var(--pal-paper-2);
  --cp-line:    var(--pal-line);
  --cp-ink:     var(--pal-ink);
  --cp-ink-2:   var(--pal-ink-2);
  --cp-gold:    var(--pal-gold);
  --cp-gold-2:  var(--pal-gold-2);
  --cp-gold-deep: var(--pal-gold-deep);
  --cp-done:    #12924E;
  --cp-dark:    var(--pal-hero);      /* شاشة السينما وقائمة التشغيل */
  --cp-dark-2:  var(--pal-hero-2);
  --cp-ease:    cubic-bezier(.4, 0, .2, 1);
}

html:has(.cp-cinema) body {
  font-family: var(--f-body);
}

html:has(.cp-cinema) h1,
html:has(.cp-cinema) h2,
html:has(.cp-cinema) h3,
html:has(.cp-cinema) h4,
html:has(.cp-cinema) h5,
html:has(.cp-cinema) h6,
html:has(.cp-cinema) .btn,
html:has(.cp-cinema) .nav-link,
html:has(.cp-cinema) .menu-link,
html:has(.cp-cinema) .badge,
html:has(.cp-cinema) .fw-bold,
html:has(.cp-cinema) .fw-bolder,
html:has(.cp-cinema) .cp-title,
html:has(.cp-cinema) .cp-eyebrow,
html:has(.cp-cinema) .cp-progress-label,
html:has(.cp-cinema) .cp-chapter-name,
html:has(.cp-cinema) .cp-nav-btn,
html:has(.cp-cinema) .cp-btn-gold,
html:has(.cp-cinema) .cp-btn-ghost,
html:has(.cp-cinema) .accordion-button,
html:has(.cp-cinema) .play-list-click .h6 {
  font-family: var(--f-display);
}

html:has(.cp-cinema) .cp-desc,
html:has(.cp-cinema) .cp-search-input,
html:has(.cp-cinema) .play-list-sum,
html:has(.cp-cinema) .dropdown-item,
html:has(.cp-cinema) input,
html:has(.cp-cinema) textarea,
html:has(.cp-cinema) select,
html:has(.cp-cinema) .form-control {
  font-family: var(--f-body);
}


/* ---------- 1) اللوح الورقي ---------- */
html:has(.cp-cinema) .content-wrapper .card {
  border: 1px solid var(--cp-line) !important;
  border-radius: 28px !important;
  background: linear-gradient(160deg, var(--cp-paper), var(--cp-paper-2) 76%) !important;
  box-shadow: 0 30px 66px -36px rgba(35, 43, 36, .26) !important;
}

/* ---------- 2) الترويسة ---------- */
@keyframes cmp-cp-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(227, 146, 47, .38); }
  70%  { box-shadow: 0 0 0 11px rgba(227, 146, 47, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(227, 146, 47, 0);   }
}

html:has(.cp-cinema) .cp-eyebrow {
  padding: .42rem 1rem;
  color: var(--cp-gold-deep);
  background: rgba(227, 146, 47, .12);
  border: 1px solid rgba(227, 146, 47, .30);
  animation: cmp-cp-pulse 2.8s ease-out infinite;
}

html:has(.cp-cinema) .cp-title {
  font-size: 2.05rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--cp-ink);
}

html:has(.cp-cinema) .cp-desc {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--cp-ink-2);
}

/* ---------- 3) لوحة التقدّم ---------- */
html:has(.cp-cinema) .cp-progress {
  min-inline-size: 268px;
  padding: 1rem 1.15rem;
  border-radius: 20px;
  border: 1px solid rgba(35, 43, 36, .09);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 30px -22px rgba(35, 43, 36, .30);
}

html:has(.cp-cinema) .cp-progress-label {
  font-size: .85rem;
  font-weight: 800;
  color: var(--cp-ink-2);
  margin-block-end: .55rem;
}

html:has(.cp-cinema) .cp-progress-label .pct {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  background-image: linear-gradient(140deg, #F0A64A, var(--cp-gold-2));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

html:has(.cp-cinema) .cp-progress .progress {
  block-size: 12px;
  border-radius: 999px;
  background: rgba(35, 43, 36, .08);
  overflow: visible;
}

/* خطوط تجري داخل الشريط + رأس متوهّج عند طرفه */
@keyframes cmp-cp-stripe {
  0%   { background-position: 0 0; }
  100% { background-position: 34px 0; }
}

html:has(.cp-cinema) .cp-progress .progress-bar {
  position: relative;
  border-radius: 999px;
  background: var(--cp-gold-2);
  background-size: auto;
  animation: none;
  transition: none;
  box-shadow: none;
  overflow: visible;
}

html:has(.cp-cinema) .cp-progress.is-complete .progress-bar,
html:has(.cp-cinema) .cp-progress .progress-bar.is-complete,
html:has(.cp-cinema) .cp-progress .progress-bar[data-complete="true"],
html:has(.cp-cinema) .cp-progress .progress-bar[aria-valuenow="100"] {
  background: #168354 !important;
  background-image: none !important;
  box-shadow: none;
}

html:has(.cp-cinema) .cp-progress.is-complete .progress,
html:has(.cp-cinema) .cp-progress:has(.progress-bar.is-complete) .progress,
html:has(.cp-cinema) .cp-progress:has(.progress-bar[data-complete="true"]) .progress,
html:has(.cp-cinema) .cp-progress:has(.progress-bar[aria-valuenow="100"]) .progress {
  background: rgba(22, 131, 84, .14);
}

html:has(.cp-cinema) .cp-progress.is-complete .cp-progress-label .pct,
html:has(.cp-cinema) .cp-progress:has(.progress-bar.is-complete) .cp-progress-label .pct,
html:has(.cp-cinema) .cp-progress:has(.progress-bar[data-complete="true"]) .cp-progress-label .pct,
html:has(.cp-cinema) .cp-progress:has(.progress-bar[aria-valuenow="100"]) .cp-progress-label .pct {
  background-image: none;
  color: #168354;
  -webkit-text-fill-color: #168354;
}

html:has(.cp-cinema) .cp-progress .progress-bar::after {
  content: none;
  position: absolute;
  inset-inline-end: -5px;
  inset-block-start: 50%;
  inline-size: 16px;
  block-size: 16px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--cp-gold-2);
  box-shadow: 0 0 12px rgba(227, 146, 47, .85);
}

/* ---------- 4) شاشة السينما + الضوء المحيط ---------- */
@keyframes cmp-cp-ambient {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

html:has(.cp-cinema) .cp-cinema {
  position: relative;
  padding: clamp(.7rem, 1.6vw, 1.1rem);
  border-radius: 28px;
  border: 1px solid rgba(35, 43, 36, .22);
  background:
    radial-gradient(70% 130% at 88% -18%, rgba(227, 146, 47, .22), transparent 62%),
    linear-gradient(155deg, var(--cp-dark), var(--cp-dark-2) 80%);
  box-shadow: 0 40px 88px -38px rgba(35, 43, 36, .62);
}

/* ضوء محيط ينزّ من الشاشة إلى الصفحة */
html:has(.cp-cinema) .cp-cinema::after {
  content: '';
  position: absolute;
  inset: 12% -6% -14%;
  z-index: -1;
  border-radius: 44px;
  background: radial-gradient(60% 100% at 50% 100%,
              rgba(227, 146, 47, .28), transparent 72%);
  filter: blur(40px);
  pointer-events: none;
  animation: cmp-cp-ambient 7s ease-in-out infinite;
}

html:has(.cp-cinema) .cp-cinema iframe,
html:has(.cp-cinema) .cp-cinema .plyr,
html:has(.cp-cinema) .cp-cinema video,
html:has(.cp-cinema) .cp-cinema .plyr-video-iframe {
  border-radius: 20px !important;
}

html:has(.cp-cinema) .cp-cinema iframe {
  aspect-ratio: 16 / 9;
  block-size: auto !important;
  min-block-size: 0 !important;
}

html:has(.cp-cinema) .cp-nowbar {
  margin-block-start: .9rem;
  padding: .85rem 1.05rem;
  border-radius: 17px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .06);
}

html:has(.cp-cinema) .cp-nowbar-ico {
  inline-size: 40px;
  block-size: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(140deg, var(--cp-gold), var(--cp-gold-2));
  box-shadow: 0 9px 20px -8px rgba(227, 146, 47, .70);
}

html:has(.cp-cinema) .cp-nowbar .textvideo {
  color: #FFFFFF;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.02rem;
}

/* ---------- 5) التنقّل ---------- */
html:has(.cp-cinema) .cp-nav-btn {
  padding: .75rem 1.4rem;
  border-radius: 15px;
  font-weight: 800;
  transition: transform .26s var(--cp-ease), box-shadow .26s ease;
}

html:has(.cp-cinema) .cp-nav-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -13px rgba(227, 146, 47, .55);
}

html:has(.cp-cinema) .cp-nav-next {
  background: linear-gradient(135deg, #F0A64A, var(--cp-gold-2)) !important;
  box-shadow: 0 15px 32px -14px rgba(227, 146, 47, .72);
}

html:has(.cp-cinema) .cp-lesson-indicator {
  font-family: var(--f-display);
  font-weight: 900;
  color: var(--cp-ink-2);
}

/* ---------- 6) شريط الترخيص ---------- */
html:has(.cp-cinema) .cp-license {
  padding: 1.4rem;
  border-radius: 24px;
  border: 1px solid var(--cp-line);
  background:
    radial-gradient(70% 140% at 88% -20%, rgba(227, 146, 47, .14), transparent 62%),
    linear-gradient(160deg, var(--cp-paper), var(--cp-paper-2) 78%);
  box-shadow: 0 20px 44px -30px rgba(35, 43, 36, .28);
}

html:has(.cp-cinema) .cp-btn-gold {
  position: relative;
  overflow: hidden;
  padding: .88rem 1.65rem;
  border: 0;
  border-radius: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #F0A64A, var(--cp-gold-2));
  box-shadow: 0 17px 35px -15px rgba(227, 146, 47, .78);
  transition: transform .26s var(--cp-ease), box-shadow .26s ease;
}

html:has(.cp-cinema) .cp-btn-gold::after {
  content: '';
  position: absolute;
  inset-block: -50%;
  inline-size: 40%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .7s var(--cp-ease);
}

html:has(.cp-cinema) .cp-btn-gold:hover::after { inset-inline-start: 130%; }

html:has(.cp-cinema) .cp-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 23px 44px -15px rgba(227, 146, 47, .92);
}

html:has(.cp-cinema) .cp-btn-ghost {
  padding: .88rem 1.55rem;
  border-radius: 16px;
  border: 1.5px solid rgba(227, 146, 47, .38);
  background: rgba(255, 255, 255, .82);
  font-weight: 800;
  color: var(--cp-gold-deep);
  transition: transform .26s var(--cp-ease), background .26s ease, border-color .26s ease;
}

html:has(.cp-cinema) .cp-btn-ghost:hover {
  transform: translateY(-2px);
  background: rgba(227, 146, 47, .10);
  border-color: rgba(227, 146, 47, .66);
}
/* ---------- 7) صندوق البحث ----------
   ‎.cp-search‎ هو الصندوق نفسه: حاوية flex بحدّ وخلفية وحشو، وهي لاصقة
   ‎position:sticky; top:0‎ (course-player.css سطر 255-263). والأيقونة والحقل
   وزرّ المسح **أبناء flex** بداخلها لا عناصر مطلقة. لذلك يُنسَّق الصندوق
   وحده، ويبقى الحقل شفافاً بلا حدّ ولا حشو جانبي — وإلا صار صندوقاً داخل
   صندوق. وهي خارج اللوح الداكن (شقيقة له) فتُنسَّق ورقية فاتحة.        */
html:has(.cp-cinema) .cp-search {
  gap: .45rem;
  margin-block-end: .42rem;
  padding-block: .45rem;
  padding-inline-start: .58rem;
  padding-inline-end: .72rem;
  border-radius: 999px;
  border: 1.5px solid rgba(35, 43, 36, .12);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 28px -20px rgba(35, 43, 36, .34);
  transition: border-color .26s ease, box-shadow .26s ease;
}

html:has(.cp-cinema) .cp-search:focus-within {
  border-color: rgba(227, 146, 47, .62);
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .14),
              0 12px 28px -20px rgba(35, 43, 36, .34);
}

html:has(.cp-cinema) .cp-search-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: .2rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: .96rem;
  color: var(--cp-ink);
}

html:has(.cp-cinema) .cp-search-input:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

html:has(.cp-cinema) .cp-search-input::placeholder {
  color: rgba(91, 103, 115, .60);
}

html:has(.cp-cinema) .cp-search-ico {
  flex: 0 0 auto;
  font-size: 1.1rem;
  color: var(--cp-gold-2);
}

html:has(.cp-cinema) .cp-search-clear {
  flex: 0 0 auto;
  inline-size: 26px;
  block-size: 26px;
  background: rgba(227, 146, 47, .14);
  color: var(--cp-gold-deep);
  transition: background .22s ease, transform .22s var(--cp-ease);
}

html:has(.cp-cinema) .cp-search-clear:hover {
  background: rgba(227, 146, 47, .28);
  transform: scale(1.08);
}

html:has(.cp-cinema) .cp-search-empty {
  color: var(--cp-ink-2);
  font-weight: 700;
}

html:has(.cp-cinema) .cp-playlist {
  padding-block: 2px;
  padding-inline-start: 0;
  padding-inline-end: 4px;
}

/* ---------- 8) ترويسة الفصل ---------- */
html:has(.cp-cinema) .cp-playlist .accordion-item {
  border: 1px solid rgba(35, 43, 36, .09) !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 14px 34px -24px rgba(35, 43, 36, .24);
  overflow: hidden;
  margin-block-end: .48rem;
}

html:has(.cp-cinema) .cp-playlist .accordion-button {
  padding-block: .52rem;
  padding-inline-start: .54rem;
  padding-inline-end: .68rem;
  font-size: .96rem;
  font-weight: 900;
  color: var(--cp-ink);
  background: transparent;
}

html:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed) {
  background: linear-gradient(270deg,
              rgba(227, 146, 47, .13),
              rgba(227, 146, 47, .03) 70%,
              transparent);
}

html:has(.cp-cinema) .cp-playlist .accordion-button::after {
  inline-size: 26px;
  block-size: 26px;
  margin-inline-start: auto;
  border-radius: 50%;
  background-color: rgba(227, 146, 47, .10);
  background-position: center;
  background-size: .95rem;
  border: 1px solid rgba(227, 146, 47, .26);
  transition: transform .32s var(--cp-ease), background-color .26s ease;
}

html:has(.cp-cinema) .cp-chapter-name {
  font-weight: 900;
  color: var(--cp-ink);
  font-size: .95rem;
  line-height: 1.35;
}

html:has(.cp-cinema) .cp-chapter-progress {
  gap: .32rem;
  margin-block: .16rem 0;
}

html:has(.cp-cinema) .cp-chapter-progress .cp-cp-track {
  block-size: 3px;
}

html:has(.cp-cinema) .cp-chapter-progress .cp-cp-fill {
  background: var(--cp-gold-2);
  transition: none;
}

html:has(.cp-cinema) .cp-chapter-progress .cp-cp-text {
  min-inline-size: 28px;
  font-size: .68rem;
  line-height: 1;
}

/* عدّاد الدروس → حبّة ذهبية */
html:has(.cp-cinema) .cp-chapter-meta {
  display: inline-flex;
  align-items: center;
  gap: .24rem;
  padding: .12rem .52rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .76rem;
  font-weight: 900;
  color: var(--cp-gold-deep);
  background: rgba(227, 146, 47, .14);
  border: 1px solid rgba(227, 146, 47, .28);
}

/* ═══════════════════════════════════════════════════════════════════════
   9) قلب التحويل: قائمة الدروس ← مسار تعلّم عمودي
   ═══════════════════════════════════════════════════════════════════════ */

html:has(.cp-cinema) .cp-playlist .accordion-body {
  position: relative;
  padding-block: .52rem .58rem !important;
  padding-inline-start: .38rem !important;
  padding-inline-end: .62rem !important;
  border-block-start: 1px solid rgba(35, 43, 36, .08) !important;
}

/* صفّ الدرس */
html:has(.cp-cinema) .cp-playlist .accordion-body .form-check {
  position: relative;
  gap: .45rem;
  margin-block-end: .14rem !important;
  padding-block: .2rem;
  padding-inline-start: .22rem;
  padding-inline-end: .45rem;
  border-radius: 10px;
  transition: background .26s var(--cp-ease),
              padding-inline-start .26s var(--cp-ease);
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:hover {
  background: rgba(227, 146, 47, .08);
  padding-inline-start: .32rem;
}

/* مربّع الإتمام ← عقدة دائرية على المسار */
html:has(.cp-cinema) .play-list-click-check {
  flex: 0 0 auto;
  inline-size: 26px;
  block-size: 26px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid rgba(227, 146, 47, .45);
  background-color: #FFFFFF;
  background-image: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: background-color .26s ease, border-color .26s ease,
              transform .26s var(--cp-ease), box-shadow .26s ease;
}

html:has(.cp-cinema) .play-list-click-check:hover {
  transform: scale(1.08);
  border-color: var(--cp-gold);
}

html:has(.cp-cinema) .play-list-click-check:focus-visible {
  outline: 2.5px solid rgba(227, 146, 47, .55);
  outline-offset: 3px;
}

/* العقدة المنجَزة: قرص أخضر بعلامة ✓ */
html:has(.cp-cinema) .play-list-click-check:checked,
html:has(.cp-cinema) .play-list-click-check[data-completed="true"] {
  border-color: transparent;
  background-color: var(--cp-done);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M5 10.5 8.5 14 15 7'/%3E%3C/svg%3E");
  background-size: 62%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9),
              0 8px 18px -7px rgba(18, 146, 78, .70);
}

/* عنوان الدرس ومدّته */
html:has(.cp-cinema) .play-list-click {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin-inline-start: 0 !important;
  cursor: pointer;
}

html:has(.cp-cinema) .play-list-click .h6 {
  display: block;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.38;
  color: var(--cp-ink);
  transition: color .26s ease;
}

html:has(.cp-cinema) .form-check:hover .play-list-click .h6 {
  color: var(--cp-gold-deep);
}

/* المدّة ← حبّة زمن */
html:has(.cp-cinema) .play-list-sum {
  display: inline-flex !important;
  align-items: center;
  gap: .22rem;
  margin-block-start: .12rem;
  padding: .06rem .38rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--cp-ink-2) !important;
  background: rgba(35, 43, 36, .06);
  border: 1px solid rgba(35, 43, 36, .08);
}

html:has(.cp-cinema) .play-list-sum::before {
  content: "\ea70";                  /* ti-clock */
  font-family: "tabler-icons";
  font-size: .78rem;
  font-weight: 400;
  color: var(--cp-gold-2);
}

/* الدرس المنجَز: يخفت ليبرز ما تبقّى */
html:has(.cp-cinema) .form-check:has(.play-list-click-check:checked) .play-list-click .h6 {
  color: var(--cp-ink-2);
}

html:has(.cp-cinema) .form-check:has(.play-list-click-check:checked) .play-list-sum {
  color: var(--cp-done) !important;
  background: rgba(18, 146, 78, .09);
  border-color: rgba(18, 146, 78, .18);
}

html:has(.cp-cinema) .form-check:has(.play-list-click-check:checked) .play-list-sum::before {
  color: var(--cp-done);
}

/* ---------- 10) الأدوات ---------- */
html:has(.cp-cinema) .cp-tools {
  gap: .35rem;
  padding: .42rem .55rem .58rem;
}

html:has(.cp-cinema) .cp-tool-files,
html:has(.cp-cinema) .cp-tool-exams {
  padding: .62rem .85rem;
  border-radius: 12px;
  border: 1px solid rgba(35, 43, 36, .10);
  background: rgba(255, 255, 255, .86);
  font-weight: 800;
  color: var(--cp-ink);
  transition: transform .26s var(--cp-ease),
              border-color .26s ease, box-shadow .26s ease;
}

html:has(.cp-cinema) .cp-tool-files:hover,
html:has(.cp-cinema) .cp-tool-exams:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 146, 47, .45);
  box-shadow: 0 17px 34px -20px rgba(227, 146, 47, .48);
}

html:has(.cp-cinema) .cp-tool-files i,
html:has(.cp-cinema) .cp-tool-exams i {
  color: var(--cp-gold-2);
}

html:has(.cp-cinema) .dropdown-menu {
  border: 1px solid var(--cp-line);
  border-radius: 16px;
  padding: .4rem;
  box-shadow: 0 22px 46px -26px rgba(35, 43, 36, .42);
}

html:has(.cp-cinema) .dropdown-item {
  border-radius: 10px;
  font-weight: 700;
  color: var(--cp-ink-2);
  transition: background .2s ease, color .2s ease;
}

html:has(.cp-cinema) .dropdown-item:hover {
  background: rgba(227, 146, 47, .12);
  color: var(--cp-gold-deep);
}
/* ═══════════════════════════════════════════════════════════════════════
   13) قائمة التشغيل داكنة — تؤاخي شاشة السينما
   -----------------------------------------------------------------------
   حُذف الخطّ الزمني الرأسي، وعوضاً عنه تُبنى الجمالية على اللون: لوح
   قائمة التشغيل يصير داكناً بنفس ‎#232B24‎ فيتناغم مع شاشة العرض — وهي
   الهيئة المألوفة في مشغّلات الدورات: شاشة داكنة وإلى جانبها قائمة داكنة،
   والصفحة حولهما ورقية فاتحة.
   ═══════════════════════════════════════════════════════════════════════ */

/* اللوح */
html:has(.cp-cinema) .cp-playlist .accordion-item {
  border: 1px solid rgba(35, 43, 36, .22) !important;
  background:
    radial-gradient(70% 120% at 88% -14%, rgba(227, 146, 47, .18), transparent 62%),
    linear-gradient(155deg, var(--cp-dark), var(--cp-dark-2) 82%) !important;
  box-shadow: 0 30px 66px -34px rgba(35, 43, 36, .55);
}

html:has(.cp-cinema) .cp-playlist .accordion-item:hover {
  transform: none;
  border-color: rgba(227, 146, 47, .30) !important;
}

/* ترويسة الفصل */
html:has(.cp-cinema) .cp-playlist .accordion-button {
  color: #FFFFFF;
}

html:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed) {
  color: #FFFFFF;
  background: linear-gradient(270deg,
              rgba(227, 146, 47, .22),
              rgba(227, 146, 47, .05) 70%,
              transparent);
}

html:has(.cp-cinema) .cp-playlist .accordion-button::after {
  background-color: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
}

html:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed)::after {
  background-color: rgba(227, 146, 47, .30);
  border-color: rgba(227, 146, 47, .52);
}

html:has(.cp-cinema) .cp-chapter-name {
  color: #FFFFFF;
}

html:has(.cp-cinema) .cp-chapter-meta {
  color: #FFCE92;
  background: rgba(227, 146, 47, .18);
  border-color: rgba(227, 146, 47, .34);
}

/* جسم القائمة */
html:has(.cp-cinema) .cp-playlist .accordion-body {
  border-block-start: 1px solid rgba(255, 255, 255, .09) !important;
}

/* صفوف الدروس */
html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:hover {
  background: rgba(255, 255, 255, .07);
}

html:has(.cp-cinema) .play-list-click .h6 {
  color: rgba(255, 255, 255, .92);
}

html:has(.cp-cinema) .form-check:hover .play-list-click .h6 {
  color: #FFCE92;
}

/* عقدة الإتمام على الداكن */
html:has(.cp-cinema) .play-list-click-check {
  border-color: rgba(227, 146, 47, .55);
  background-color: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .04);
}

html:has(.cp-cinema) .play-list-click-check:hover {
  border-color: #F0A64A;
  background-color: rgba(227, 146, 47, .16);
}

html:has(.cp-cinema) .play-list-click-check:checked,
html:has(.cp-cinema) .play-list-click-check[data-completed="true"] {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .05),
              0 8px 20px -7px rgba(18, 146, 78, .80);
}

/* حبّة المدّة */
html:has(.cp-cinema) .play-list-sum {
  color: rgba(255, 255, 255, .60) !important;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .10);
}

html:has(.cp-cinema) .play-list-sum::before {
  color: #F0A64A;
}

/* الدرس المنجَز */
html:has(.cp-cinema) .form-check:has(.play-list-click-check:checked) .play-list-click .h6 {
  color: rgba(255, 255, 255, .52);
}

html:has(.cp-cinema) .form-check:has(.play-list-click-check:checked) .play-list-sum {
  color: #168354 !important;
  background: rgba(22, 131, 84, .16);
  border-color: rgba(22, 131, 84, .32);
}

html:has(.cp-cinema) .form-check:has(.play-list-click-check:checked) .play-list-sum::before {
  color: #168354;
}

/* أزرار الأدوات فوق الداكن */
html:has(.cp-cinema) .cp-tool-files,
html:has(.cp-cinema) .cp-tool-exams {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .90);
}

html:has(.cp-cinema) .cp-tool-files:hover,
html:has(.cp-cinema) .cp-tool-exams:hover {
  border-color: rgba(227, 146, 47, .50);
  background: rgba(227, 146, 47, .16);
  box-shadow: 0 17px 34px -20px rgba(227, 146, 47, .55);
}

html:has(.cp-cinema) .cp-tool-files i,
html:has(.cp-cinema) .cp-tool-exams i {
  color: #F0A64A;
}


/* ---------- 14) تصحيحات ألوان فوق اللوح الداكن ----------
   عناصر ورثت ألواناً محسوبة على خلفية بيضاء فاختفت أو بهتت على الداكن:

     ‎.fw-normal.text-body‎  الفاصل «—» داخل سطر معلومات الفصل. الكلاس
                            ‎.text-body‎ من بوتستراب يعني حبراً داكناً.
     ‎.cp-count‎             عدّاد الدروس (course-player.css سطر 323)
                            ألوانه محسوبة للفاتح.
     شيفرون الطيّ            كنّا نقلبه بـ ‎filter: invert()‎ — والمرشّح يقلب
                            خلفية القرص نفسها أيضاً فيشوّهها. الصواب
                            استبدال صورة الشيفرون بنسخة بيضاء عبر
                            ‎--bs-accordion-btn-icon‎ بلا أي مرشّح.
     ‎.play-list-sum-min‎    عنصر الفصل — نضمن سريان الداكن عليه صراحةً.  */

/* مجموع مدّة المعيار وسطر معلومات الفصل — يتبع حبر السطح لا لوناً ثابتاً.
   كان ‎rgba(255,255,255,.45)‎ محسوباً على لوحٍ داكن دائماً، لكن إعادة تصميم
   «مرآة السايدبار» جعلت اللوح فاتحاً في الافتراضي/المؤطّر، فصار أبيضَ على
   أبيض: مجموع الوقت يختفي. التوكن ‎--th-side-fg-hover‎ يقلبه مع السطح. */
html:has(.cp-cinema) .cp-playlist .cp-chapter-meta .fw-normal.text-body,
html:has(.cp-cinema) .cp-playlist .cp-chapter-meta .text-body {
  color: var(--th-side-fg-hover) !important;
}

/* عدّاد الدروس */
html:has(.cp-cinema) .cp-playlist .cp-count {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  padding: .08rem .48rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .74rem;
  font-weight: 900;
  color: #FFCE92 !important;
  background: rgba(227, 146, 47, .18) !important;
  border: 1px solid rgba(227, 146, 47, .32);
}

html:has(.cp-cinema) .cp-playlist .cp-count i {
  color: #F0A64A;
  font-size: .8rem;
}

/* سطر معلومات الفصل: حاوية شفافة لا حبّة، فالحبّة صارت على .cp-count */
html:has(.cp-cinema) .cp-playlist .cp-chapter-meta {
  display: flex;
  align-items: center;
  gap: .32rem;
  margin-block-start: .12rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: .76rem;
}

/* شيفرون الطيّ: صورة بيضاء بدل قلب الألوان */
html:has(.cp-cinema) .cp-playlist .accordion-button {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 5.5L12.5 10.5L7.5 15.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 5.5L12.5 10.5L7.5 15.5' stroke='%23FFCE92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html:has(.cp-cinema) .cp-playlist .accordion-button::after {
  filter: none;
  background-color: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .18);
}

html:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed)::after {
  background-color: rgba(227, 146, 47, .30);
  border-color: rgba(227, 146, 47, .55);
}

/* اللوح فاتح في الافتراضي/المؤطّر (إعادة تصميم «مرآة السايدبار»): الشيفرون
   الأبيض والقرص الأبيض يختفيان على الورق. نقلب الشيفرون نحاسياً داكناً ونضع
   على القرص لمسةً نحاسية، فيقرأ كزرّ طيّ واضح كحبّة العدّاد بجواره. */
html.light-style[data-skin^="theme-default"]:has(.cp-cinema) .cp-playlist .accordion-button,
html.light-style[data-skin^="theme-bordered"]:has(.cp-cinema) .cp-playlist .accordion-button {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 5.5L12.5 10.5L7.5 15.5' stroke='%23B85B21' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.5 5.5L12.5 10.5L7.5 15.5' stroke='%238A4A1C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.light-style[data-skin^="theme-default"]:has(.cp-cinema) .cp-playlist .accordion-button::after,
html.light-style[data-skin^="theme-bordered"]:has(.cp-cinema) .cp-playlist .accordion-button::after {
  background-color: rgba(184, 91, 33, .10) !important;
  border-color: rgba(184, 91, 33, .30) !important;
}
html.light-style[data-skin^="theme-default"]:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed)::after,
html.light-style[data-skin^="theme-bordered"]:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed)::after {
  background-color: rgba(184, 91, 33, .16) !important;
  border-color: rgba(184, 91, 33, .42) !important;
}

/* عنصر الفصل: تأكيد سريان الداكن */
html:has(.cp-cinema) .cp-playlist .accordion-item.play-list-sum-min {
  border: 1px solid rgba(35, 43, 36, .22) !important;
  background:
    radial-gradient(70% 120% at 88% -14%, rgba(227, 146, 47, .18), transparent 62%),
    linear-gradient(155deg, var(--cp-dark), var(--cp-dark-2) 82%) !important;
  color: rgba(255, 255, 255, .90);
}

/* أي نصّ باهت متبقٍّ داخل اللوح الداكن */
html:has(.cp-cinema) .cp-playlist .text-muted:not(.play-list-sum) {
  color: rgba(255, 255, 255, .52) !important;
}



/* ---------- 15) الزر المطويّ يبقى داكناً ----------
   assets/css/course-player.css سطر 294 يفرض ‎background:#fff !important‎ على
   ‎.cp-playlist .accordion-button‎. قواعدنا كانت أعلى خصوصية لكن بلا
   !important فخسرت أمامه. حين يكون الفصل مفتوحاً يغطّي جسمه الداكن المشهد
   فلا يظهر البياض، وحين يُطوى لا يبقى إلا الزر فتبدو البطاقة كلها بيضاء.
   الحل: نفس الوزن — !important — على الحالتين.                          */

html:has(.cp-cinema) .cp-playlist .accordion-button,
html:has(.cp-cinema) .cp-playlist .accordion-button.collapsed {
  background: transparent !important;
  box-shadow: none !important;
}

html:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed) {
  background: linear-gradient(270deg,
              rgba(227, 146, 47, .22),
              rgba(227, 146, 47, .05) 70%,
              transparent) !important;
}

/* الترويسة نفسها شفافة كي تظهر خلفية العنصر الداكنة */
html:has(.cp-cinema) .cp-playlist .accordion-header {
  background: transparent !important;
}


/* ---------- 11) الجوال ---------- */
@media (max-width: 767.98px) {
  html:has(.cp-cinema) .content-wrapper .card {
    border-radius: 20px !important;
  }
  html:has(.cp-cinema) .cp-title {
    font-size: 1.55rem;
  }
  html:has(.cp-cinema) .cp-cinema {
    border-radius: 20px;
    padding: .6rem;
  }
  html:has(.cp-cinema) .cp-progress {
    inline-size: 100%;
    min-inline-size: 0;
  }
  html:has(.cp-cinema) .cp-btn-gold,
  html:has(.cp-cinema) .cp-btn-ghost {
    inline-size: 100%;
    justify-content: center;
  }
  html:has(.cp-cinema) .play-list-click .h6 {
    font-size: .93rem;
  }
}

/* ---------- 12) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.cp-cinema) .cp-eyebrow,
  html:has(.cp-cinema) .cp-progress .progress-bar,
  html:has(.cp-cinema) .cp-cinema::after {
    animation: none;
  }
  html:has(.cp-cinema) .cp-btn-gold::after { display: none; }
  html:has(.cp-cinema) .cp-nav-btn,
  html:has(.cp-cinema) .cp-btn-gold,
  html:has(.cp-cinema) .cp-btn-ghost,
  html:has(.cp-cinema) .cp-playlist .accordion-body .form-check,
  html:has(.cp-cinema) .play-list-click-check,
  html:has(.cp-cinema) .cp-tool-files,
  html:has(.cp-cinema) .cp-tool-exams {
    transition: none;
  }
}


/* =============================================================================
   8-ع2. صفحة 20.html (اشتراك ملف الرخصة المهنية) — الخطّان + إبداع  ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.lp-hero) ← موجود في 20.html وحدها (تحقّقنا).

   البنية: هيرو (شارة، عنوان، وصف) ثم بطاقة اشتراك واحدة فيها ترويسة بشهادة،
   وسعر، وقائمة مزايا بعلامات ✓، وزر شراء، وملاحظة.

   الاتجاه: أساس فاتح ورقي. الداكن في **ترويسة البطاقة وحدها** — شريط
   يحمل الشهادة واسم المنتج، فيصير تاجاً للبطاقة بلا أن يُثقل الصفحة.
   ========================================================================== */

html:has(.lp-hero) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);

  /* أسماء مستعارة للوحة المركزية ‎--pal-*‎ (القسم 16-د) */
  --lp-paper:   var(--pal-paper);
  --lp-paper-2: var(--pal-paper-2);
  --lp-line:    var(--pal-line);
  --lp-ink:     var(--pal-ink);
  --lp-ink-2:   var(--pal-ink-2);
  --lp-gold:    var(--pal-gold);
  --lp-gold-2:  var(--pal-gold-2);
  --lp-gold-deep: var(--pal-gold-deep);
  --lp-dark:    var(--pal-dark);      /* ترويسة البطاقة وحدها */
  --lp-ease:    cubic-bezier(.4, 0, .2, 1);
}

html:has(.lp-hero) body {
  font-family: var(--f-body);
}

html:has(.lp-hero) h1,
html:has(.lp-hero) h2,
html:has(.lp-hero) h3,
html:has(.lp-hero) h4,
html:has(.lp-hero) h5,
html:has(.lp-hero) h6,
html:has(.lp-hero) .btn,
html:has(.lp-hero) .nav-link,
html:has(.lp-hero) .badge,
html:has(.lp-hero) .fw-bold,
html:has(.lp-hero) .fw-semibold,
html:has(.lp-hero) .lp-title,
html:has(.lp-hero) .lp-eyebrow,
html:has(.lp-hero) .lp-price .num,
html:has(.lp-hero) .lp-btn-buy {
  font-family: var(--f-display);
}

html:has(.lp-hero) .lp-lead,
html:has(.lp-hero) .lp-features li,
html:has(.lp-hero) .lp-note,
html:has(.lp-hero) .lp-price .per,
html:has(.lp-hero) input,
html:has(.lp-hero) textarea,
html:has(.lp-hero) select,
html:has(.lp-hero) .form-control {
  font-family: var(--f-body);
}


/* ---------- 1) الهيرو ---------- */
@keyframes cmp-lp-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-4%, 5%, 0) scale(1.16); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

html:has(.lp-hero) .lp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(78% 120% at 78% -8%, rgba(227, 146, 47, .16), transparent 60%),
    linear-gradient(180deg, var(--lp-paper) 0%, var(--lp-paper-2) 100%);
}

html:has(.lp-hero) .lp-hero::after {
  content: '';
  position: absolute;
  inset-block-start: -160px;
  inset-inline-end: -120px;
  inline-size: 440px;
  block-size: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pal-line), transparent 70%);
  filter: blur(74px);
  pointer-events: none;
  animation: cmp-lp-float 34s var(--lp-ease) infinite;
}

@keyframes cmp-lp-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(227, 146, 47, .38); }
  70%  { box-shadow: 0 0 0 11px rgba(227, 146, 47, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(227, 146, 47, 0);   }
}

html:has(.lp-hero) .lp-eyebrow {
  position: relative;
  z-index: 1;
  padding: .42rem 1rem;
  color: var(--lp-gold-deep);
  background: rgba(227, 146, 47, .12);
  border: 1px solid rgba(227, 146, 47, .30);
  animation: cmp-lp-pulse 2.8s ease-out infinite;
}

html:has(.lp-hero) .lp-title {
  position: relative;
  z-index: 1;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--lp-ink);
}

@keyframes cmp-lp-shimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

html:has(.lp-hero) .lp-title .g {
  background-image: linear-gradient(110deg,
                    var(--lp-gold-2) 0%, #F0A64A 26%, #FFD9A3 48%,
                    #F0A64A 72%, var(--lp-gold-2) 100%);
  background-size: 200% 100%;
  animation: cmp-lp-shimmer 7s linear infinite;
}

html:has(.lp-hero) .lp-lead {
  position: relative;
  z-index: 1;
  font-size: 1.04rem;
  line-height: 1.95;
  color: var(--lp-ink-2);
}

/* ---------- 2) بطاقة الاشتراك ---------- */
html:has(.lp-hero) .lp-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  border-radius: 30px;
  background: linear-gradient(160deg, var(--lp-paper), var(--lp-paper-2) 76%);
  box-shadow: 0 36px 78px -38px rgba(35, 43, 36, .30);
}

/* ---------- 3) ترويسة البطاقة: الداكن الوحيد ---------- */
html:has(.lp-hero) .lp-card-head {
  position: relative;
  padding: 1.5rem 1.6rem;
  background:
    radial-gradient(70% 150% at 88% -24%, rgba(227, 146, 47, .30), transparent 62%),
    linear-gradient(150deg, var(--lp-dark), #18201A 82%);
  border-block-end: 0;
}

html:has(.lp-hero) .lp-card-head::after {
  inset-block-end: 0;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--lp-gold), transparent);
}

html:has(.lp-hero) .lp-card-head h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 900;
  color: #FFFFFF;
}

/* شارة الشهادة */
html:has(.lp-hero) .lp-cert {
  inline-size: 56px;
  block-size: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 1.7rem;
  color: #fff;
  background: linear-gradient(140deg, #F0A64A, var(--lp-gold-2));
  box-shadow: 0 12px 26px -10px rgba(227, 146, 47, .70);
  transition: transform .3s var(--lp-ease);
}

html:has(.lp-hero) .lp-card:hover .lp-cert {
  transform: scale(1.06) rotate(-7deg);
}

/* ---------- 4) السعر ---------- */
html:has(.lp-hero) .lp-card-body {
  padding: clamp(1.6rem, 3.6vw, 2.4rem);
}

html:has(.lp-hero) .lp-price {
  margin-block-end: 1.8rem;
}

html:has(.lp-hero) .lp-price .num {
  font-size: clamp(3rem, 7vw, 4.4rem);
  font-weight: 900;
  line-height: 1;
  background-image: linear-gradient(140deg, #FFE0B0, #E3922F 52%, var(--lp-gold-2));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

html:has(.lp-hero) .lp-price .num svg {
  fill: #F0A64A !important;
}

html:has(.lp-hero) .lp-price .per {
  margin-block-start: .55rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--lp-ink-2);
}

/* ---------- 5) المزايا ---------- */
html:has(.lp-hero) .lp-features {
  margin-block-end: 1.9rem;
}

html:has(.lp-hero) .lp-features li {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem .95rem;
  margin-block-end: .5rem;
  border: 1px solid rgba(35, 43, 36, .09);
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  font-size: .99rem;
  font-weight: 600;
  color: var(--lp-ink);
  box-shadow: 0 8px 20px -18px rgba(35, 43, 36, .30);
  transition: transform .28s var(--lp-ease),
              border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

html:has(.lp-hero) .lp-features li:hover {
  transform: translateY(-3px);
  border-color: rgba(227, 146, 47, .42);
  background: #FFFFFF;
  box-shadow: 0 16px 32px -20px rgba(227, 146, 47, .45);
}

html:has(.lp-hero) .lp-features li i {
  flex: 0 0 auto;
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .95rem;
  color: #fff;
  background: linear-gradient(140deg, var(--lp-gold), var(--lp-gold-2));
  box-shadow: 0 7px 16px -6px rgba(227, 146, 47, .62);
  transition: transform .28s var(--lp-ease);
}

html:has(.lp-hero) .lp-features li:hover i {
  transform: scale(1.08) rotate(-8deg);
}

/* ---------- 6) زر الشراء ---------- */
html:has(.lp-hero) .lp-btn-buy {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  padding: 1rem 1.7rem;
  border: 0;
  border-radius: 17px;
  font-size: 1.08rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #F0A64A, var(--lp-gold-2));
  box-shadow: 0 20px 40px -16px rgba(227, 146, 47, .80);
  transition: transform .26s var(--lp-ease), box-shadow .26s ease;
}

html:has(.lp-hero) .lp-btn-buy::after {
  content: '';
  position: absolute;
  inset-block: -50%;
  inline-size: 40%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .7s var(--lp-ease);
}

html:has(.lp-hero) .lp-btn-buy:hover::after { inset-inline-start: 130%; }

html:has(.lp-hero) .lp-btn-buy:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 48px -16px rgba(227, 146, 47, .95);
  color: #fff;
}

/* ---------- 7) الملاحظة ---------- */
html:has(.lp-hero) .lp-note {
  margin-block-start: 1.1rem;
  padding: .75rem 1rem;
  border-radius: 14px;
  border: 1px dashed rgba(35, 43, 36, .16);
  background: rgba(35, 43, 36, .03);
  font-size: .88rem;
  color: var(--lp-ink-2);
}

/* ---------- 8) الجوال ---------- */
@media (max-width: 575.98px) {
  html:has(.lp-hero) .lp-card {
    border-radius: 22px;
  }
  html:has(.lp-hero) .lp-card-head {
    padding: 1.2rem 1.1rem;
  }
  html:has(.lp-hero) .lp-cert {
    inline-size: 46px;
    block-size: 46px;
    border-radius: 15px;
    font-size: 1.4rem;
  }
  html:has(.lp-hero) .lp-features li {
    padding: .75rem .8rem;
    font-size: .93rem;
  }
}

/* ---------- 9) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.lp-hero) .lp-hero::after,
  html:has(.lp-hero) .lp-eyebrow,
  html:has(.lp-hero) .lp-title .g {
    animation: none;
  }
  html:has(.lp-hero) .lp-btn-buy::after { display: none; }
  html:has(.lp-hero) .lp-features li,
  html:has(.lp-hero) .lp-features li i,
  html:has(.lp-hero) .lp-cert,
  html:has(.lp-hero) .lp-btn-buy {
    transition: none;
  }
}


/* =============================================================================
   8-ف2. صفحة 22.html (شرح التعلم النشط المنظم) — الخطّان + إبداع   ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.video-container) ← موجود في 22.html وحدها (تحقّقنا).

   ملاحظة لافتة: الكلاسان ‎.video-container‎ و‎.note‎ مكتوبان في الترميز لكن
   **لا وجود لهما في أي ملف CSS** — كلاسان معطّلان بلا أثر. نستثمرهما هنا:
   الأول يصير لوح المحتوى، والثاني صندوق تنبيه بارز.

   البنية: ترويسة (شارة + عنوان) ثم لوح فيه:
       h3.text-primary  عنوان الفيديو
       h5 ×2            «ما هو…؟» و«كيف نتبنّاها؟»  (تبدأ برموز 📌🎯)
       h4               «خطوة مهمة قبل الاشتراك»
       p.note           تنبيه المشاهدة
       .ratio.ratio-16x9  إطار الفيديو
       p.mt-3.text-center  سطر المدّة
       a.btn-primary    زر الاشتراك

   الاتجاه: أساس فاتح ورقي. الداكن في **إطار الفيديو وحده** — موضع وظيفي
   كما في صفحة 19، مع ضوء محيط ينزّ منه.
   ========================================================================== */

html:has(.video-container) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);

  /* أسماء مستعارة للوحة المركزية ‎--pal-*‎ (القسم 16-د) */
  --vc-paper:   var(--pal-paper);
  --vc-paper-2: var(--pal-paper-2);
  --vc-line:    var(--pal-line);
  --vc-ink:     var(--pal-ink);
  --vc-ink-2:   var(--pal-ink-2);
  --vc-gold:    var(--pal-gold);
  --vc-gold-2:  var(--pal-gold-2);
  --vc-gold-deep: var(--pal-gold-deep);
  --vc-dark:    var(--pal-dark);      /* إطار الفيديو وحده */
  --vc-ease:    cubic-bezier(.4, 0, .2, 1);
}

html:has(.video-container) body {
  font-family: var(--f-body);
}

html:has(.video-container) h1,
html:has(.video-container) h2,
html:has(.video-container) h3,
html:has(.video-container) h4,
html:has(.video-container) h5,
html:has(.video-container) h6,
html:has(.video-container) .btn,
html:has(.video-container) .nav-link,
html:has(.video-container) .badge,
html:has(.video-container) .fw-bold,
html:has(.video-container) .fw-semibold,
html:has(.video-container) .page-title,
html:has(.video-container) .hp-eyebrow,
html:has(.video-container) .video-container strong {
  font-family: var(--f-display);
}

html:has(.video-container) .page-lead,
html:has(.video-container) .video-container p,
html:has(.video-container) input,
html:has(.video-container) textarea,
html:has(.video-container) select,
html:has(.video-container) .form-control {
  font-family: var(--f-body);
}


/* ---------- 1) الهالات والترويسة ---------- */
@keyframes cmp-vc-float {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -5%, 0) scale(1.16); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

html:has(.video-container) .hp-orb-1 { animation: cmp-vc-float 32s var(--vc-ease) infinite; }
html:has(.video-container) .hp-orb-2 { animation: cmp-vc-float 40s var(--vc-ease) infinite -14s; }

@keyframes cmp-vc-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(227, 146, 47, .38); }
  70%  { box-shadow: 0 0 0 11px rgba(227, 146, 47, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(227, 146, 47, 0);   }
}

html:has(.video-container) .hp-eyebrow {
  color: var(--vc-gold-deep);
  background: rgba(227, 146, 47, .12);
  border-color: rgba(227, 146, 47, .30);
  animation: cmp-vc-pulse 2.8s ease-out infinite;
}

html:has(.video-container) .page-title {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--vc-ink);
}

html:has(.video-container) .page-title::after {
  inline-size: 82px;
  block-size: 4px;
  background: linear-gradient(90deg, var(--vc-gold), #FFD9A3);
  box-shadow: 0 0 15px rgba(227, 146, 47, .55);
}

/* ---------- 2) لوح المحتوى (الكلاس المعطّل .video-container) ---------- */
html:has(.video-container) .page-prose {
  max-width: 940px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

html:has(.video-container) .video-container {
  padding: clamp(1.7rem, 4vw, 3rem);
  border: 1px solid var(--vc-line);
  border-radius: 30px;
  background: linear-gradient(160deg, var(--vc-paper), var(--vc-paper-2) 76%);
  box-shadow: 0 34px 74px -38px rgba(35, 43, 36, .28);
}

html:has(.video-container) .container.mt-5 {
  margin-block-start: 0 !important;
  padding: 0;
}

/* ---------- 3) العناوين ---------- */
@keyframes cmp-vc-shimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

html:has(.video-container) .video-container h3 {
  margin-block-end: 1.8rem;
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  font-weight: 900;
  letter-spacing: -.015em;
  color: transparent !important;
  background-image: linear-gradient(110deg,
                    var(--vc-gold-2) 0%, #F0A64A 26%, #FFD9A3 48%,
                    #F0A64A 72%, var(--vc-gold-2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cmp-vc-shimmer 7s linear infinite;
}

/* عناوين الأقسام: علامة لونية جانبية */
html:has(.video-container) .video-container h4,
html:has(.video-container) .video-container h5 {
  position: relative;
  margin-block: 2rem .7rem;
  padding-inline-start: .95rem;
  font-size: clamp(1.15rem, 2.3vw, 1.45rem);
  font-weight: 900;
  line-height: 1.65;
  color: var(--vc-ink);
}

html:has(.video-container) .video-container h4::before,
html:has(.video-container) .video-container h5::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: .18em .18em;
  inline-size: 5px;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFD9A3, var(--vc-gold) 55%, var(--vc-gold-2));
  box-shadow: 0 0 10px rgba(227, 146, 47, .45);
}

html:has(.video-container) .video-container h5:first-of-type,
html:has(.video-container) .video-container h4:first-of-type {
  margin-block-start: 1.2rem;
}

/* ---------- 4) الفقرات ---------- */
html:has(.video-container) .video-container p {
  margin-block-end: 1.1rem;
  padding-inline-start: 1.25rem;
  margin-inline-start: .95rem;
  font-size: 1.03rem;
  line-height: 2.05;
  color: var(--vc-ink-2);
  border-inline-start: 3px solid rgba(227, 146, 47, .18);
  transition: border-color .3s ease, color .3s ease;
}

html:has(.video-container) .video-container p:hover {
  border-inline-start-color: var(--vc-gold);
  color: #2B3540;
}

/* ---------- 5) صندوق التنبيه (الكلاس المعطّل .note) ---------- */
html:has(.video-container) .video-container p.note {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-block: 1rem 1.6rem;
  margin-inline-start: 0;
  padding: 1.15rem 1.3rem;
  border: 1px solid rgba(227, 146, 47, .30);
  border-inline-start: 4px solid var(--vc-gold);
  border-radius: 18px;
  background: linear-gradient(160deg,
              rgba(227, 146, 47, .12),
              rgba(227, 146, 47, .04));
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.9;
  color: #7A4A16;
}

html:has(.video-container) .video-container p.note::before {
  content: "\ea05";                  /* ti-alert-circle */
  font-family: "tabler-icons";
  flex: 0 0 auto;
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(140deg, var(--vc-gold), var(--vc-gold-2));
  box-shadow: 0 7px 16px -6px rgba(227, 146, 47, .65);
}

html:has(.video-container) .video-container p.note:hover {
  color: #7A4A16;
}

/* ---------- 6) إطار الفيديو: الداكن الوحيد + ضوء محيط ---------- */
@keyframes cmp-vc-ambient {
  0%, 100% { opacity: .5; }
  50%      { opacity: .95; }
}

html:has(.video-container) .video-container .ratio.ratio-16x9 {
  position: relative;
  padding: clamp(.6rem, 1.4vw, .95rem);
  border-radius: 26px;
  border: 1px solid rgba(35, 43, 36, .22);
  background:
    radial-gradient(70% 130% at 88% -18%, rgba(227, 146, 47, .22), transparent 62%),
    linear-gradient(155deg, var(--vc-dark), #18201A 80%);
  box-shadow: 0 34px 74px -34px rgba(35, 43, 36, .58);
}

html:has(.video-container) .video-container .ratio.ratio-16x9::after {
  content: '';
  position: absolute;
  inset: 14% -5% -12%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(60% 100% at 50% 100%,
              rgba(227, 146, 47, .26), transparent 72%);
  filter: blur(38px);
  pointer-events: none;
  animation: cmp-vc-ambient 7s ease-in-out infinite;
}

html:has(.video-container) .video-container .ratio.ratio-16x9 > iframe,
html:has(.video-container) .video-container .ratio.ratio-16x9 > .plyr {
  border-radius: 18px;
  inset: clamp(.6rem, 1.4vw, .95rem);
  inline-size: auto;
  block-size: auto;
}

/* ---------- 7) سطر المدّة ---------- */
html:has(.video-container) .video-container p.mt-3.text-center {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 1.4rem auto 0;
  margin-inline-start: 50%;
  transform: translateX(50%);
  padding: .5rem 1.1rem;
  border: 1px solid rgba(35, 43, 36, .10);
  border-inline-start-width: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  font-size: .9rem;
  font-weight: 600;
  color: var(--vc-ink-2);
}

html:has(.video-container) .video-container p.mt-3.text-center:hover {
  border-color: rgba(35, 43, 36, .10);
  color: var(--vc-ink-2);
}

html:has(.video-container) .video-container p.mt-3 a {
  color: var(--vc-gold-deep);
  font-weight: 800;
  text-decoration: none;
  border-block-end: 1px dashed rgba(227, 146, 47, .45);
}

html:has(.video-container) .video-container p.mt-3 a:hover {
  border-block-end-color: var(--vc-gold);
}

/* ---------- 8) زر الاشتراك ---------- */
html:has(.video-container) .video-container .btn-primary {
  position: relative;
  overflow: hidden;
  margin-block-start: 1.6rem;
  padding: .95rem 2.2rem;
  border: 0 !important;
  border-radius: 17px;
  font-size: 1.06rem;
  font-weight: 900;
  color: #fff !important;
  background: linear-gradient(135deg, #F0A64A, var(--vc-gold-2)) !important;
  box-shadow: 0 20px 40px -16px rgba(227, 146, 47, .78);
  transition: transform .26s var(--vc-ease), box-shadow .26s ease;
}

html:has(.video-container) .video-container .btn-primary::after {
  content: '';
  position: absolute;
  inset-block: -50%;
  inline-size: 40%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent,
              rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start .7s var(--vc-ease);
}

html:has(.video-container) .video-container .btn-primary:hover::after {
  inset-inline-start: 130%;
}

html:has(.video-container) .video-container .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 48px -16px rgba(227, 146, 47, .92);
}

/* ---------- 9) الجوال ---------- */
@media (max-width: 575.98px) {
  html:has(.video-container) .video-container {
    padding: 1.4rem 1.05rem;
    border-radius: 22px;
  }
  html:has(.video-container) .video-container p {
    padding-inline-start: .9rem;
    margin-inline-start: .4rem;
  }
  html:has(.video-container) .video-container .ratio.ratio-16x9 {
    border-radius: 18px;
    padding: .5rem;
  }
  html:has(.video-container) .video-container .btn-primary {
    inline-size: 100%;
  }
}

/* ---------- 10) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.video-container) .hp-orb-1,
  html:has(.video-container) .hp-orb-2,
  html:has(.video-container) .hp-eyebrow,
  html:has(.video-container) .video-container h3,
  html:has(.video-container) .video-container .ratio.ratio-16x9::after {
    animation: none;
  }
  html:has(.video-container) .video-container .btn-primary::after { display: none; }
  html:has(.video-container) .video-container p,
  html:has(.video-container) .video-container .btn-primary {
    transition: none;
  }
}


/* =============================================================================
   8-ق2. صفحة 23.html (خطة إثرائية غير صفية) — الخطّان + تصميم من الصفر ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.week-card) ← موجود في 23.html وحدها (تحقّقنا).

   ⚠️ حالة نادرة: الصفحة تحمل بنية دلالية غنية ومكتملة —
       .header · .intro · .highlight-box · .weeks-container
       .week-card ×3 → .week-header (.week-number · .week-title · .week-subtitle)
                     → .week-content (.mission-box · .requirements · .deliverables
                                      · .timeline-info · .evaluation · .tips-box)
       .footer · .contact-info
   ولا يوجد لأيٍّ من هذه الكلاسات **سطر CSS واحد** في المشروع كله (تحقّقنا
   من كل ملفات assets/css). فالصفحة تُعرض عارية: عناوين ونقاط متلاصقة.
   لذلك هذا القسم لا يتجاوز تصميماً قائماً — بل **ينشئ التصميم من الصفر**.

   الفكرة: كل أسبوع بطاقة مشروع، ومحتواها يُوزَّع على شبكة من أربعة صناديق
   ملوّنة الوظيفة (متطلبات · تسليم · مدة · تقييم) بدل قوائم متتابعة، مع
   صندوق نصائح مميّز أسفلها.

   الاتجاه: أساس فاتح ورقي. الداكن في **ترويسة كل بطاقة أسبوع** — شريط
   يحمل رقم الأسبوع وعنوانه، فيصير فاصلاً بصرياً بين المشاريع الثلاثة.
   ========================================================================== */

html:has(.week-card) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);

  /* أسماء مستعارة للوحة المركزية ‎--pal-*‎ (القسم 16-د) */
  --wk-paper:   var(--pal-paper);
  --wk-paper-2: var(--pal-paper-2);
  --wk-line:    var(--pal-line);
  --wk-ink:     var(--pal-ink);
  --wk-ink-2:   var(--pal-ink-2);
  --wk-gold:    var(--pal-gold);
  --wk-gold-2:  var(--pal-gold-2);
  --wk-gold-deep: var(--pal-gold-deep);
  --wk-dark:    var(--pal-dark);      /* ترويسة بطاقة الأسبوع وحدها */
  --wk-blue:    #2F6DB5;
  --wk-green:   #12924E;
  --wk-violet:  #6D53C7;
  --wk-ease:    cubic-bezier(.4, 0, .2, 1);
}

html:has(.week-card) body {
  font-family: var(--f-body);
}

html:has(.week-card) h1,
html:has(.week-card) h2,
html:has(.week-card) h3,
html:has(.week-card) h4,
html:has(.week-card) h5,
html:has(.week-card) h6,
html:has(.week-card) .btn,
html:has(.week-card) .page-title,
html:has(.week-card) .hp-eyebrow,
html:has(.week-card) .week-number,
html:has(.week-card) .week-title,
html:has(.week-card) .mission-title,
html:has(.week-card) .time {
  font-family: var(--f-display);
}

html:has(.week-card) p,
html:has(.week-card) li,
html:has(.week-card) .subtitle,
html:has(.week-card) .week-subtitle,
html:has(.week-card) .mission-description {
  font-family: var(--f-body);
}


/* ---------- 1) اللوح العام ---------- */
html:has(.week-card) .page-prose {
  max-width: 1080px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

html:has(.week-card) .page-prose .container {
  padding: 0;
  max-width: 100%;
}

/* ---------- 2) ترويسة الصفحة ---------- */
@keyframes cmp-wk-shimmer {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}

html:has(.week-card) .page-prose .header {
  text-align: center;
  margin-block-end: 2rem;
}

html:has(.week-card) .page-prose .header h1 {
  font-size: clamp(1.8rem, 4.2vw, 2.8rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -.02em;
  background-image: linear-gradient(110deg,
                    var(--wk-gold-2) 0%, #F0A64A 26%, #FFD9A3 48%,
                    #F0A64A 72%, var(--wk-gold-2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cmp-wk-shimmer 7s linear infinite;
}

html:has(.week-card) .page-prose .subtitle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-block-start: .6rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--wk-line);
  background: rgba(227, 146, 47, .10);
  font-size: .95rem;
  font-weight: 700;
  color: var(--wk-gold-deep);
}

/* ---------- 3) المقدمة وصندوق الهدف ---------- */
html:has(.week-card) .page-prose .intro {
  padding: clamp(1.5rem, 3.4vw, 2.4rem);
  margin-block-end: 2.2rem;
  border: 1px solid var(--wk-line);
  border-radius: 26px;
  background: linear-gradient(160deg, var(--wk-paper), var(--wk-paper-2) 76%);
  box-shadow: 0 26px 58px -34px rgba(35, 43, 36, .26);
}

html:has(.week-card) .page-prose .intro h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight: 900;
  color: var(--wk-ink);
  margin-block-end: .8rem;
}

html:has(.week-card) .page-prose .intro p {
  font-size: 1.03rem;
  line-height: 2.05;
  color: var(--wk-ink-2);
}

html:has(.week-card) .highlight-box {
  display: block;
  margin-block-start: 1.4rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(227, 146, 47, .30);
  border-inline-start: 4px solid var(--wk-gold);
  border-radius: 18px;
  background: linear-gradient(160deg,
              rgba(227, 146, 47, .12), rgba(227, 146, 47, .04));
}

html:has(.week-card) .highlight-box h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: 900;
  color: #7A4A16;
}

html:has(.week-card) .highlight-box p {
  margin: 0;
  color: #7A4A16;
  font-weight: 600;
  line-height: 1.95;
}

/* ---------- 4) حاوية الأسابيع ---------- */
html:has(.week-card) .weeks-container {
  display: grid;
  gap: 1.6rem;
}

/* ---------- 5) بطاقة الأسبوع ---------- */
html:has(.week-card) .week-card {
  overflow: hidden;
  border: 1px solid var(--wk-line);
  border-radius: 28px;
  background: linear-gradient(160deg, var(--wk-paper), var(--wk-paper-2) 78%);
  box-shadow: 0 30px 66px -36px rgba(35, 43, 36, .28);
  transition: transform .32s var(--wk-ease), box-shadow .32s ease;
}

html:has(.week-card) .week-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 84px -36px rgba(227, 146, 47, .40);
}

/* ترويسة البطاقة: الداكن الوحيد */
html:has(.week-card) .week-header {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .35rem 1.15rem;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background:
    radial-gradient(70% 150% at 90% -26%, rgba(227, 146, 47, .30), transparent 62%),
    linear-gradient(150deg, var(--wk-dark), #18201A 82%);
}

html:has(.week-card) .week-header::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--wk-gold), transparent);
}

/* رقم الأسبوع */
html:has(.week-card) .week-number {
  grid-row: span 2;
  inline-size: 62px;
  block-size: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg, #F0A64A, var(--wk-gold-2));
  box-shadow: 0 12px 26px -10px rgba(227, 146, 47, .70);
  transition: transform .32s var(--wk-ease);
}

html:has(.week-card) .week-card:hover .week-number {
  transform: scale(1.06) rotate(-7deg);
}

html:has(.week-card) .week-title {
  align-self: end;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem);
  font-weight: 900;
  line-height: 1.5;
  color: #FFFFFF;
}

html:has(.week-card) .week-subtitle {
  align-self: start;
  font-size: .95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .68);
}

/* ---------- 6) محتوى البطاقة ---------- */
html:has(.week-card) .week-content {
  padding: clamp(1.3rem, 3vw, 1.9rem);
  display: grid;
  gap: 1rem;
}

/* صندوق وصف المهمة — عرض كامل */
html:has(.week-card) .mission-box {
  padding: 1.25rem 1.35rem;
  border: 1px solid rgba(227, 146, 47, .26);
  border-radius: 20px;
  background: linear-gradient(160deg,
              rgba(227, 146, 47, .11), rgba(227, 146, 47, .03));
}

html:has(.week-card) .mission-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block-end: .55rem;
  font-size: 1.1rem;
  font-weight: 900;
  color: #7A4A16;
}

html:has(.week-card) .mission-icon {
  font-size: 1.3rem;
  line-height: 1;
}

html:has(.week-card) .mission-description {
  font-size: 1rem;
  line-height: 2;
  color: var(--wk-ink-2);
}

/* الصناديق الأربعة: شبكة وظيفية */
html:has(.week-card) .week-content > .requirements,
html:has(.week-card) .week-content > .deliverables,
html:has(.week-card) .week-content > .timeline-info,
html:has(.week-card) .week-content > .evaluation {
  padding: 1.2rem 1.3rem;
  border: 1px solid rgba(35, 43, 36, .09);
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 26px -20px rgba(35, 43, 36, .26);
  transition: transform .28s var(--wk-ease),
              border-color .28s ease, box-shadow .28s ease;
}

html:has(.week-card) .week-content > .requirements:hover,
html:has(.week-card) .week-content > .deliverables:hover,
html:has(.week-card) .week-content > .timeline-info:hover,
html:has(.week-card) .week-content > .evaluation:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -22px rgba(35, 43, 36, .32);
}

/* عناوين الصناديق مع شريط لوني لكل وظيفة */
html:has(.week-card) .week-content > div > h4 {
  position: relative;
  margin: 0 0 .8rem;
  padding-inline-start: .85rem;
  font-size: 1.04rem;
  font-weight: 900;
  color: var(--wk-ink);
}

html:has(.week-card) .week-content > div > h4::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: .16em .16em;
  inline-size: 4px;
  border-radius: 100px;
  background: currentColor;
  opacity: .55;
}

html:has(.week-card) .requirements  > h4 { color: var(--wk-blue); }
html:has(.week-card) .deliverables  > h4 { color: var(--wk-green); }
html:has(.week-card) .timeline-info > h4 { color: var(--wk-gold-deep); }
html:has(.week-card) .evaluation    > h4 { color: var(--wk-violet); }

html:has(.week-card) .requirements:hover  { border-color: rgba(47, 109, 181, .38); }
html:has(.week-card) .deliverables:hover  { border-color: rgba(18, 146, 78, .38); }
html:has(.week-card) .timeline-info:hover { border-color: rgba(227, 146, 47, .42); }
html:has(.week-card) .evaluation:hover    { border-color: rgba(109, 83, 199, .38); }

/* القوائم داخل الصناديق */
html:has(.week-card) .week-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

html:has(.week-card) .week-content li {
  position: relative;
  padding-inline-start: 1.5rem;
  margin-block-end: .55rem;
  font-size: .96rem;
  line-height: 1.95;
  color: var(--wk-ink-2);
}

html:has(.week-card) .week-content li::before {
  content: '';
  position: absolute;
  inset-inline-start: .28rem;
  inset-block-start: .78em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .42;
}

html:has(.week-card) .requirements  li::before { background: var(--wk-blue); opacity: .7; }
html:has(.week-card) .deliverables  li::before { background: var(--wk-green); opacity: .7; }
html:has(.week-card) .evaluation    li::before { background: var(--wk-violet); opacity: .7; }

/* صندوق المدّة */
html:has(.week-card) .timeline-info .time {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-block-end: .5rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg, #F0A64A, var(--wk-gold-2));
  box-shadow: 0 9px 20px -8px rgba(227, 146, 47, .60);
}

html:has(.week-card) .timeline-info p {
  margin: 0;
  font-size: .92rem;
  color: var(--wk-ink-2);
}

/* صندوق النصائح */
html:has(.week-card) .tips-box {
  padding: 1.2rem 1.3rem;
  border: 1px dashed rgba(227, 146, 47, .42);
  border-radius: 20px;
  background: rgba(227, 146, 47, .07);
}

html:has(.week-card) .tips-box h4 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .7rem;
  padding: 0;
  font-size: 1.04rem;
  font-weight: 900;
  color: #7A4A16;
}

html:has(.week-card) .tips-box h4::before { display: none; }

html:has(.week-card) .tip-icon {
  font-size: 1.25rem;
  line-height: 1;
}

html:has(.week-card) .tips-box li::before {
  background: var(--wk-gold);
  opacity: .75;
}

/* ---------- 7) الخاتمة ---------- */
html:has(.week-card) .page-prose .footer,
html:has(.week-card) .page-prose .contact-info {
  margin-block-start: 2rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--wk-line);
  border-radius: 24px;
  background: linear-gradient(160deg, var(--wk-paper), var(--wk-paper-2) 76%);
  box-shadow: 0 20px 46px -30px rgba(35, 43, 36, .26);
  text-align: center;
}

/* ---------- 8) الشاشات الواسعة: الصناديق الأربعة في عمودين ---------- */
@media (min-width: 768px) {
  html:has(.week-card) .week-content {
    grid-template-columns: 1fr 1fr;
  }
  html:has(.week-card) .mission-box,
  html:has(.week-card) .tips-box {
    grid-column: 1 / -1;
  }
}

/* ---------- 9) الجوال ---------- */
@media (max-width: 575.98px) {
  html:has(.week-card) .week-card {
    border-radius: 20px;
  }
  html:has(.week-card) .week-header {
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: 1.2rem 1.05rem;
  }
  html:has(.week-card) .week-number {
    grid-row: auto;
    inline-size: 50px;
    block-size: 50px;
    border-radius: 16px;
    font-size: 1.25rem;
  }
  html:has(.week-card) .intro,
  html:has(.week-card) .week-content {
    padding: 1.15rem 1rem;
  }
}

/* ---------- 10) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.week-card) .page-prose .header h1 {
    animation: none;
  }
  html:has(.week-card) .week-card,
  html:has(.week-card) .week-number,
  html:has(.week-card) .week-content > div {
    transition: none;
  }
}


/* =============================================================================
   8-ر2. صفحة 21.html (السير الذاتية) — الخطّان + إعادة تصميم جذرية  ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.cvt-scope) ← موجود في 21.html وحدها (تحقّقنا).

   الوضع القائم: للصفحة ملفّ تصميم كامل assets/css/cv-templates.css (872 سطراً)
   بهوية نحاسية #D46E2A وحبر أزرق-رمادي #22303f — أي هوية غريبة عن ذهب
   المشروع #E3922F. وهو محمَّل في الرأس (سطر 75) قبل ملفّنا، فنتغلّب عليه
   بالترتيب والخصوصية معاً.

   ⚡ أعلى رافعة في هذه الصفحة: الملف الأصلي مبنيّ كلّه على توكنات --cvt-*
   معرّفة على .cvt-scope. فبدل مطاردة مئة قاعدة، **نعيد تعريف التوكنات
   نفسها** فتنقلب الهوية كلّها دفعةً واحدة، ثم نبني فوقها الطبقة الإبداعية.

   الفكرة: الصفحة معرض تنسيقات — فلتُقرأ كـ«كتالوج ورقي»:
     · كل بطاقة ورقة A4 حقيقية: حافّة ورقية، طيّة زاوية، ورقم فهرسة تسلسلي
       يُولَّد بعدّاد CSS (فيتحدّث تلقائياً عند الفلترة لأن العناصر المخفيّة
       بـ display:none لا تزيد العدّاد).
     · شبكة تُظهر بطاقاتها بتتابع، وعند تصويب المؤشّر على بطاقة تخفت أخواتها.

   الاتجاه: أساس ورقي فاتح. الداكن #232B24 في **شريط الأدوات وحده** — شريط
   تحكّم ملتصق يطفو فوق المعرض (بحث + فلترة + ترتيب + عدّاد)، فيقرأ كأداة لا
   كخلفية، ويجعل الورق حوله يلمع. والقائمة الجانبية داكنة كعنصر تنقّل (chrome).
   ========================================================================== */

/* ---------- 1) الخطّان ---------- */
html:has(.cvt-scope) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);

  /* توكناتنا نحن — على الجذر لا على ‎.cvt-scope‎، لأن القائمة الجانبية
     ‎#layout-menu‎ تقع خارج ‎.cvt-scope‎ وتستعمل ‎--cv-ease‎؛ ومتغيّر غير
     معرَّف يُبطل الإعلان كلّه فتضيع الانتقالات. */
  /* أسماء مستعارة للوحة المركزية ‎--pal-*‎ (القسم 16-د). ‎--cv-dark-2‎ درجة
     أعمق من ‎--cv-dark‎ ولا نظير لها في اللوحة، فتبقى صريحة. */
  --cv-dark:      var(--pal-dark);      /* شريط الأدوات وحده */
  --cv-dark-2:    #1B231D;
  --cv-gold-deep: var(--pal-gold-deep);
  --cv-ease:      cubic-bezier(.4, 0, .2, 1);
}

html:has(.cvt-scope) body {
  font-family: var(--f-body);
}

html:has(.cvt-scope) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--f-display);
}

/* عناصر الصفحة التي يفرض عليها بلوك الإنفاذ (8-ص2) خطّ المتن لأنها
   <p> أو <input> — نرفع الخصوصية إلى (0,3,1) لنستعيد خطّ العناوين. */
html:has(.cvt-scope) .cvt-scope :is(
  .cvt-title, .cvt-card-name, .cvt-quota-title, .cvt-picked-name,
  .cvt-stat, .cvt-count, .cvt-chip, .cvt-act,
  .cvt-btn-primary, .cvt-btn-ghost, .cvt-field label, .modal-title
) {
  font-family: var(--f-display) !important;
}

html:has(.cvt-scope) .cvt-scope :is(
  .cvt-quota-text, .cvt-card-cat, .cvt-picked-hint,
  .cvt-search input, .cvt-field input, .cvt-sort
) {
  font-family: var(--f-body) !important;
}


/* ---------- 2) قلب التوكنات: نحاسي أزرق ← ذهبي المشروع ---------- */
html:has(.cvt-scope) .cvt-scope {
  --cvt-brand:       #E3922F;
  --cvt-brand-rgb:   227, 146, 47;
  --cvt-brand-hover: #C9741C;
  --cvt-brand-light: #F3B76A;
  --cvt-brand-soft:  rgba(227, 146, 47, .12);
  --cvt-ink:         var(--pal-ink);
  --cvt-ink-2:       var(--pal-ink-2);
  --cvt-ink-3:       #8A949C;
  --cvt-border:      rgba(35, 43, 36, .10);
  --cvt-surface:     #FFFFFF;
  --cvt-bg:          #FAF6F0;
  --cvt-radius:      20px;
}

/* ⚠️ حارس الوضع الداكن — لا تحذفه.
   الكتلة أعلاه تعيد تعريف كل توكنات ‎--cvt-*‎ بلا حارس وضع، وخصوصيتها
   (0,2,1) تساوي خصوصية ‎html.dark-style .cvt-scope‎ في cv-templates.css
   لكنها تُحمَّل بعده — فكانت تدهس قسم الداكن كاملاً هناك (35 قاعدة،
   الأسطر 803–869) ويُحلّ ‎--cvt-surface‎ إلى ‎#FFFFFF‎ فتصير البطاقات
   بيضاء ونصّها ‎--pt-text‎ أبيضَ: أبيض على أبيض.
   هنا نستعيد أسطح/أحبار الداكن بخصوصية أعلى (0,3,1) مع إبقاء الهوية
   الذهبية ‎#E3922F‎ التي أدخلتها الكتلة أعلاه. */
html.dark-style:has(.cvt-scope) .cvt-scope {
  --cvt-ink:         #E7EDF3;
  --cvt-ink-2:       #A8B3BF;
  --cvt-ink-3:       #949EAC;   /* رُفع من #7A8593: تباينه على #232333 كان 4.12 (دون AA) */
  --cvt-border:      rgba(255, 255, 255, .08);
  --cvt-surface:     #232333;
  --cvt-bg:          #1A1A26;
  --cvt-brand-soft:  rgba(227, 146, 47, .16);
}

/* ═══ الوضع الداكن لقسم 8-ر2 ═══
   القسم كلّه مصمَّم «كتالوج ورقي» لوضع النهار (أسطح بيضاء صريحة لا توكنات)،
   فالتوكنات وحدها لا تكفي: تبقى الأسطح بيضاء ونصّها ‎--cvt-ink‎ فاتحاً.
   نقلب هنا الأسطح الحاملة للنصّ فقط — أما معاينة المستند (img داخل
   ‎.cvt-card-thumb‎) فتبقى ورقاً أبيض لأنها تمثّل الورقة فعلاً.
   الخصوصية (0,3,1) أعلى من ‎html:has(.cvt-scope)‎ (0,2,1) فتغلبها أينما وردت. */
html.dark-style:has(.cvt-scope) .cvt-hero {
  background:
    radial-gradient(700px 300px at 88% -34%, rgba(227, 146, 47, .20), transparent 68%),
    linear-gradient(180deg, #262636 0%, var(--cvt-bg) 100%);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 34px 68px -38px rgba(0, 0, 0, .6);
}
html.dark-style:has(.cvt-scope) .cvt-hero::before {
  background: repeating-linear-gradient(180deg,
              rgba(255, 255, 255, .045) 0 1px,
              transparent 1px 34px);
}
html.dark-style:has(.cvt-scope) .cvt-stat {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 12px 26px -19px rgba(0, 0, 0, .7);
}
html.dark-style:has(.cvt-scope) .cvt-chip.cvt-cat,
html.dark-style:has(.cvt-scope) .cvt-cat-nav {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: none;
}
html.dark-style:has(.cvt-scope) .cvt-card {
  background: var(--cvt-surface);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 18px 36px -28px rgba(0, 0, 0, .7);
}
/* شارة الزاوية على المعاينة: كانت ورقاً أبيض بنصّ ذهبي داكن */
html.dark-style:has(.cvt-scope) .cvt-card-thumb::before {
  background: rgba(26, 26, 38, .88);
  border-color: rgba(227, 146, 47, .42);
  color: var(--cvt-brand-light, #F3B76A);
}
html.dark-style:has(.cvt-scope) .cvt-dir {
  background: rgba(26, 26, 38, .82);
  border-color: rgba(255, 255, 255, .12);
}

/* لوح الصفحة: ورق دافئ بدل الرمادي البارد */
html:has(.cvt-scope) .content-wrapper {
  background:
    radial-gradient(900px 420px at 86% -8%, rgba(227, 146, 47, .08), transparent 62%),
    linear-gradient(180deg, #FDFBF8 0%, #F7F2EA 100%);
}


/* ---------- 3) الواجهة العلوية: ورقة مسطّرة بعلامة مائية ---------- */
html:has(.cvt-scope) .cvt-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 2.2rem 2.2rem 2rem;
  margin-bottom: 1.1rem;
  background:
    radial-gradient(700px 300px at 88% -34%, rgba(227, 146, 47, .17), transparent 68%),
    linear-gradient(180deg, #FFFFFF 0%, #FCF7F0 100%);
  border: 1px solid var(--pal-line);
  box-shadow: 0 34px 68px -38px rgba(35, 43, 36, .32);
}

/* أ) تسطير ورقي يخفت باتجاه النصّ — النصّ على اليمين فالخطوط لليسار */
html:has(.cvt-scope) .cvt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg,
              rgba(35, 43, 36, .055) 0 1px,
              transparent 1px 34px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .9), transparent 58%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, .9), transparent 58%);
}

/* ب) علامة مائية: أيقونة السيرة الذاتية بحجم ضخم
      (نلغي «الورقة المائلة» الأصلية بإعادة ضبط كل خصائصها) */
html:has(.cvt-scope) .cvt-hero::after {
  content: "\fa5a";                      /* ti-file-cv */
  font-family: "tabler-icons";
  position: absolute;
  /* الجهة المقابلة للنصّ: النصّ يبدأ يميناً فالعلامة يساراً.
     نُلغي ‎inset-inline-start: -60px‎ الأصلية صراحةً. */
  inset-inline-start: auto;
  inset-inline-end: 2.4rem;
  bottom: auto;
  top: 50%;
  inline-size: auto;
  block-size: auto;
  border-radius: 0;
  background: none;
  transform: translateY(-50%) rotate(-9deg);
  font-size: clamp(6rem, 12vw, 11.5rem);
  line-height: 1;
  color: rgba(227, 146, 47, .14);
  pointer-events: none;
}

html:has(.cvt-scope) .cvt-title {
  position: relative;
  z-index: 1;
  max-width: 24ch;
  margin: 0 0 1.15rem;
  font-size: clamp(1.5rem, 3.1vw, 2.35rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -.4px;
  color: var(--cvt-ink);
}

/* الكلمة المميّزة: تدرّج ذهبي يتموّج */
html:has(.cvt-scope) .cvt-title .g {
  background: linear-gradient(270deg, #F3B76A, #E3922F 38%, var(--pal-gold-deep) 72%, #F3B76A);
  background-size: 280% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cvt21-sheen 7s linear infinite;
}

@keyframes cvt21-sheen {
  to { background-position: -280% 0; }
}

/* بلاطات الإحصاء ← أزرار فعل بأقراص ذهبية */
html:has(.cvt-scope) .cvt-stats {
  position: relative;
  z-index: 1;
  gap: .6rem;
}

html:has(.cvt-scope) .cvt-stat {
  gap: .55rem;
  padding: .55rem 1.05rem .55rem .6rem;
  border-radius: 15px;
  font-size: .87rem;
  font-weight: 700;
  color: var(--cvt-ink);
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(35, 43, 36, .09);
  box-shadow: 0 12px 26px -19px rgba(35, 43, 36, .55);
  backdrop-filter: blur(10px);
}

html:has(.cvt-scope) .cvt-stat i {
  inline-size: 32px;
  block-size: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 11px;
  font-size: 1.05rem;
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 9px 18px -10px rgba(227, 146, 47, .95);
  transition: transform .3s var(--cv-ease);
}

html:has(.cvt-scope) .cvt-stat b {
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--cv-gold-deep);
}

html:has(.cvt-scope) .cvt-stat--btn:hover {
  transform: translateY(-3px);
  color: var(--cvt-ink);
  border-color: rgba(227, 146, 47, .42);
  box-shadow: 0 20px 36px -22px rgba(227, 146, 47, .85);
}

html:has(.cvt-scope) .cvt-stat--btn:hover i {
  color: #FFFFFF;
  transform: rotate(-9deg) scale(1.07);
}


/* ---------- 4) شريط الدعوة: بطاقة مُقصّصة ذهبية ---------- */
html:has(.cvt-scope) .cvt-quota {
  gap: .9rem;
  padding: .9rem 1.1rem;
  margin-bottom: 1.05rem;
  border-radius: 18px;
  border: 1px dashed rgba(227, 146, 47, .45);
  background: linear-gradient(270deg,
              rgba(227, 146, 47, .11),
              rgba(227, 146, 47, .03) 58%,
              rgba(255, 255, 255, .55));
}

html:has(.cvt-scope) .cvt-quota .cvt-quota-icon {
  inline-size: 42px;
  block-size: 42px;
  border-radius: 14px;
  font-size: 1.22rem;
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 11px 22px -12px rgba(227, 146, 47, .95);
}

html:has(.cvt-scope) .cvt-quota-title {
  font-size: .97rem;
  font-weight: 800;
  color: var(--cvt-ink);
}

html:has(.cvt-scope) .cvt-quota-text {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--cvt-ink-2);
}


/* ---------- 5) سلايدر التصنيفات: حبّات ذهبية ---------- */
html:has(.cvt-scope) .cvt-cats {
  gap: .5rem;
  margin-bottom: .95rem;
}

html:has(.cvt-scope) .cvt-cat-track {
  gap: .5rem;
  padding: 4px;
}

html:has(.cvt-scope) .cvt-chip.cvt-cat {
  height: 44px;
  padding: 0 1.2rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--cvt-ink-2);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(35, 43, 36, .10);
  transition: transform .24s var(--cv-ease), background .24s ease,
              color .24s ease, border-color .24s ease, box-shadow .24s ease;
}

html:has(.cvt-scope) .cvt-chip.cvt-cat:hover {
  transform: translateY(-2px);
  color: var(--cv-gold-deep);
  background: rgba(227, 146, 47, .09);
  border-color: rgba(227, 146, 47, .45);
}

html:has(.cvt-scope) .cvt-chip.cvt-cat.is-active {
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  border-color: transparent;
  box-shadow: 0 15px 28px -15px rgba(227, 146, 47, .95);
}

html:has(.cvt-scope) .cvt-cat-nav {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(35, 43, 36, .10);
  background: #FFFFFF;
  color: var(--cvt-ink-2);
  box-shadow: 0 9px 18px -13px rgba(35, 43, 36, .6);
  transition: background .24s ease, color .24s ease, border-color .24s ease;
}

html:has(.cvt-scope) .cvt-cat-nav:hover {
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  border-color: transparent;
}


/* ---------- 6) شريط الأدوات: **المنطقة الداكنة الوحيدة** ---------- */
/* شريط تحكّم يطفو فوق المعرض. داكن لأنه أداة لا خلفية — ويجعل الورق حوله
   يلمع. عرضه واحد وارتفاعه صفّ واحد، فالداكن يبقى لمسة لا مساحة.        */
html:has(.cvt-scope) .cvt-toolbar {
  top: .6rem;
  gap: .6rem;
  padding: .7rem .8rem;
  margin-bottom: 1.5rem;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(72% 210% at 92% -46%, rgba(227, 146, 47, .24), transparent 62%),
    linear-gradient(160deg, #2A332B 0%, var(--cv-dark-2) 88%);
  box-shadow: 0 28px 56px -32px rgba(23, 32, 25, .88);
  backdrop-filter: none;
}

html:has(.cvt-scope) .cvt-toolbar.is-stuck {
  box-shadow: 0 32px 62px -28px rgba(23, 32, 25, .95);
}

/* أ) البحث */
html:has(.cvt-scope) .cvt-search {
  flex: 1 1 260px;
}

html:has(.cvt-scope) .cvt-search input {
  height: 46px;
  padding-inline: 2.7rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
  color: #FFFFFF;
  font-size: .92rem;
}

html:has(.cvt-scope) .cvt-search input::placeholder {
  color: rgba(255, 255, 255, .42);
}

html:has(.cvt-scope) .cvt-search input:focus {
  border-color: rgba(227, 146, 47, .62);
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .16);
}

html:has(.cvt-scope) .cvt-search > i {
  inset-inline-start: .95rem;
  color: #F3B76A;
}

html:has(.cvt-scope) .cvt-search-clear {
  color: rgba(255, 255, 255, .55);
}

html:has(.cvt-scope) .cvt-search-clear:hover {
  color: #FFCE92;
}

/* ب) حبّات الخطّة (مجاني · مميّز) */
html:has(.cvt-scope) .cvt-chips--plan .cvt-chip {
  height: 46px;
  padding: 0 1.05rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .84);
  font-weight: 700;
  transition: background .24s ease, color .24s ease,
              border-color .24s ease, box-shadow .24s ease;
}

html:has(.cvt-scope) .cvt-chips--plan .cvt-chip i {
  color: #F3B76A;
  transition: color .24s ease;
}

html:has(.cvt-scope) .cvt-chips--plan .cvt-chip:hover {
  color: #FFFFFF;
  background: rgba(227, 146, 47, .17);
  border-color: rgba(227, 146, 47, .5);
}

html:has(.cvt-scope) .cvt-chips--plan .cvt-chip.is-active {
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  border-color: transparent;
  box-shadow: 0 13px 26px -14px rgba(227, 146, 47, .95);
}

html:has(.cvt-scope) .cvt-chips--plan .cvt-chip.is-active i {
  color: #FFFFFF;
}

/* ج) الترتيب — قائمة النظام تُرسَم بألوان النظام، فنُعيد لخياراتها
      خلفية فاتحة وحبراً داكناً كي لا تختفي على وندوز. */
html:has(.cvt-scope) .cvt-sort {
  height: 46px;
  padding-inline: .9rem 2.1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .88);
  font-weight: 600;
}

html:has(.cvt-scope) .cvt-sort option {
  color: var(--pal-ink);
  background: #FFFFFF;
}

html:has(.cvt-scope) .cvt-sort:focus {
  border-color: rgba(227, 146, 47, .62);
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .16);
}

/* د) العدّاد ← حبّة ذهبية */
html:has(.cvt-scope) .cvt-count {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding-inline: 1rem;
  border-radius: 14px;
  font-size: .85rem;
  font-weight: 800;
  color: #FFCE92;
  background: rgba(227, 146, 47, .15);
  border: 1px solid rgba(227, 146, 47, .3);
}


/* ---------- 7) الشبكة: كتالوج أوراق ---------- */
html:has(.cvt-scope) .cvt-results.row.g-2 {
  --bs-gutter-x: 1.1rem;
  --bs-gutter-y: 1.1rem;
}

/* عدّاد الفهرسة: العناصر المخفيّة بالفلترة لا تزيده، فالترقيم يصحّ دائماً */
html:has(.cvt-scope) .cvt-results {
  counter-reset: cvtnum;
}

html:has(.cvt-scope) .cvt-card {
  counter-increment: cvtnum;
  border-radius: 22px;
  border: 1px solid rgba(35, 43, 36, .09);
  background: #FFFFFF;
  box-shadow: 0 18px 36px -28px rgba(35, 43, 36, .6);
  transition: transform .32s var(--cv-ease), box-shadow .32s ease,
              border-color .32s ease, opacity .3s ease, filter .3s ease;
}

html:has(.cvt-scope) .cvt-card:hover,
html:has(.cvt-scope) .cvt-card:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(227, 146, 47, .45);
  box-shadow: 0 36px 62px -30px rgba(227, 146, 47, .58),
              0 0 0 1px rgba(227, 146, 47, .18);
}

html:has(.cvt-scope) .cvt-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .32),
              0 36px 62px -30px rgba(227, 146, 47, .5);
}

/* أ) المصغّرة ← ورقة داخل البطاقة */
html:has(.cvt-scope) .cvt-card-thumb {
  margin: .5rem .5rem 0;
  border-radius: 15px;
  border: 1px solid rgba(35, 43, 36, .07);
  background: linear-gradient(180deg, #FBF7F1, #F1EBE2);
}

/* ب) رقم الفهرسة — لوحة ورقية صغيرة تختفي عند فتح الطبقة */
html:has(.cvt-scope) .cvt-card-thumb::before {
  content: counter(cvtnum, decimal-leading-zero);
  position: absolute;
  z-index: 2;
  bottom: .5rem;
  inset-inline-end: .5rem;
  padding: .16rem .5rem;
  border-radius: 9px;
  font-family: var(--f-display);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--cv-gold-deep);
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(227, 146, 47, .32);
  box-shadow: 0 6px 14px -9px rgba(35, 43, 36, .6);
  transition: opacity .24s ease;
}

html:has(.cvt-scope) .cvt-card:hover .cvt-card-thumb::before {
  opacity: 0;
}

/* ج) طيّة الزاوية — إشارة «ورقة» بلا صورة، تكبر عند المرور */
html:has(.cvt-scope) .cvt-card-thumb::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  inset-inline-start: 0;
  inline-size: 30px;
  block-size: 30px;
  background: linear-gradient(315deg, rgba(255, 255, 255, .97) 50%, transparent 50%);
  box-shadow: -1px -1px 4px rgba(35, 43, 36, .18);
  pointer-events: none;
  transition: inline-size .32s var(--cv-ease), block-size .32s var(--cv-ease);
}

html:has(.cvt-scope) .cvt-card:hover .cvt-card-thumb::after {
  inline-size: 44px;
  block-size: 44px;
}

html:has(.cvt-scope) .cvt-card-thumb img {
  transition: transform .5s var(--cv-ease);
}

html:has(.cvt-scope) .cvt-card:hover .cvt-card-thumb img {
  transform: scale(1.06);
}

/* د) شارة الاتجاه + شارة المميّز — أُزيحتا لتوافق هامش الورقة */
html:has(.cvt-scope) .cvt-dir {
  top: .95rem;
  inset-inline-end: .95rem;
  padding: .2rem .5rem;
  border-radius: 9px;
  font-family: var(--f-display);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--cv-gold-deep);
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(227, 146, 47, .32);
  box-shadow: 0 6px 14px -9px rgba(35, 43, 36, .55);
}

html:has(.cvt-scope) .cvt-ribbon {
  top: .95rem;
  inset-inline-start: .95rem;
  padding: .24rem .58rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 800;
  background: linear-gradient(140deg, #F3B76A, #C9741C);
  box-shadow: 0 9px 18px -9px rgba(227, 146, 47, .95);
}

/* هـ) جسم البطاقة: الاسم على سطرين ثم حبّة التصنيف */
html:has(.cvt-scope) .cvt-card-body {
  flex-direction: column;
  align-items: flex-start;
  gap: .48rem;
  padding: .78rem .85rem .9rem;
}

html:has(.cvt-scope) .cvt-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: none;
  inline-size: 100%;
  min-block-size: 2.7em;
  white-space: normal;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--cvt-ink);
}

html:has(.cvt-scope) .cvt-card-cat {
  padding: .2rem .62rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--cv-gold-deep);
  background: rgba(227, 146, 47, .11);
  border: 1px solid rgba(227, 146, 47, .24);
}


/* ---------- 8) الطبقة والأفعال ---------- */
html:has(.cvt-scope) .cvt-card-overlay {
  justify-content: flex-end;
  gap: .5rem;
  padding: 1rem .8rem;
  background: linear-gradient(180deg,
              rgba(23, 32, 25, 0) 28%,
              rgba(23, 32, 25, .58) 60%,
              rgba(23, 32, 25, .93) 100%);
}

html:has(.cvt-scope) .cvt-act {
  inline-size: 100%;
  min-width: 0;
  padding: .58rem .9rem;
  border-radius: 13px;
  font-size: .82rem;
  font-weight: 800;
  transform: translateY(14px);
}

html:has(.cvt-scope) .cvt-card:hover .cvt-act,
html:has(.cvt-scope) .cvt-card:focus-within .cvt-act {
  transform: translateY(0);
}

html:has(.cvt-scope) .cvt-card:hover .cvt-act--preview,
html:has(.cvt-scope) .cvt-card:focus-within .cvt-act--preview {
  transition-delay: .05s;
}

html:has(.cvt-scope) .cvt-act--use {
  color: #FFFFFF;
  background: linear-gradient(140deg, #F3B76A 0%, #E3922F 45%, #C9741C 100%);
  box-shadow: 0 15px 28px -13px rgba(227, 146, 47, .95);
}

html:has(.cvt-scope) .cvt-act--preview {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(8px);
}

html:has(.cvt-scope) .cvt-act--preview:hover {
  background: rgba(255, 255, 255, .24);
}

/* ظهور متتابع للبطاقات */
@keyframes cvt21-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

html:has(.cvt-scope) .cvt-results > [class*="col-"] {
  animation: cvt21-rise .5s var(--cv-ease) both;
}

html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(1)  { animation-delay: .02s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(2)  { animation-delay: .05s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(3)  { animation-delay: .08s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(4)  { animation-delay: .11s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(5)  { animation-delay: .14s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(6)  { animation-delay: .17s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(7)  { animation-delay: .20s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(8)  { animation-delay: .23s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(9)  { animation-delay: .26s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(10) { animation-delay: .29s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(11) { animation-delay: .32s; }
html:has(.cvt-scope) .cvt-results > [class*="col-"]:nth-child(n+12) { animation-delay: .35s; }

/* تركيز المعرض: البطاقة المقصودة تبقى ساطعة وأخواتها تخفت قليلاً */
@media (hover: hover) and (pointer: fine) {
  html:has(.cvt-scope) .cvt-results:hover > [class*="col-"]:not(:hover) .cvt-card {
    opacity: .62;
    filter: saturate(.72);
  }
}


/* ---------- 9) الحالة الفارغة + الهيكل ---------- */
html:has(.cvt-scope) .cvt-empty {
  padding: 3.6rem 1rem;
  border-radius: 24px;
  border: 1px dashed rgba(227, 146, 47, .42);
  background: rgba(255, 255, 255, .72);
}

html:has(.cvt-scope) .cvt-empty i {
  opacity: 1;
  color: rgba(227, 146, 47, .62);
}

html:has(.cvt-scope) .cvt-skeleton {
  border-radius: 22px;
}


/* ---------- 10) الترقيم ---------- */
html:has(.cvt-scope) .cvt-pagination .pagination {
  gap: .4rem;
}

html:has(.cvt-scope) .cvt-pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border-radius: 14px !important;
  border: 1px solid rgba(35, 43, 36, .10);
  background: #FFFFFF;
  color: var(--cvt-ink-2);
  font-family: var(--f-display);
  font-weight: 800;
  box-shadow: 0 9px 18px -15px rgba(35, 43, 36, .65);
  transition: transform .22s var(--cv-ease), color .22s ease,
              border-color .22s ease, box-shadow .22s ease;
}

html:has(.cvt-scope) .cvt-pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  transform: translateY(-2px);
  color: var(--cv-gold-deep);
  border-color: rgba(227, 146, 47, .45);
}

/* core.css سطر 9090 يلوّن العنصر النشط بـ #ff9f43 عبر .pagination-warning
   بخصوصية (0,4,0) — محدّدنا (0,5,1) فيتغلّب بلا !important. */
html:has(.cvt-scope) .cvt-pagination .page-item.active .page-link {
  color: #FFFFFF;
  border-color: transparent;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 15px 28px -15px rgba(227, 146, 47, .95);
}

html:has(.cvt-scope) .cvt-pagination .page-item.disabled .page-link {
  opacity: .4;
  box-shadow: none;
}


/* ---------- 11) النوافذ ---------- */
html:has(.cvt-scope) .cvt-modal .modal-content {
  border-radius: 26px;
  box-shadow: 0 40px 90px -34px rgba(35, 43, 36, .55);
}

html:has(.cvt-scope) .cvt-modal .modal-header {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid rgba(227, 146, 47, .22);
  background: linear-gradient(270deg, rgba(227, 146, 47, .12), transparent 65%);
}

html:has(.cvt-scope) .cvt-modal .modal-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--cvt-ink);
}

html:has(.cvt-scope) .cvt-modal .modal-footer {
  border-top: 1px solid rgba(35, 43, 36, .08);
  background: #FDFBF8;
}

html:has(.cvt-scope) .cvt-preview-frame {
  border-radius: 18px;
  border-color: rgba(35, 43, 36, .10);
  background: #F7F2EA;
}

html:has(.cvt-scope) .cvt-picked {
  border-radius: 16px;
  border-color: rgba(227, 146, 47, .24);
  background: rgba(227, 146, 47, .07);
}

html:has(.cvt-scope) .cvt-picked img {
  border-radius: 10px;
  border-color: rgba(227, 146, 47, .28);
}

html:has(.cvt-scope) .cvt-field input {
  height: 48px;
  border-radius: 14px;
  border-color: rgba(35, 43, 36, .12);
}

html:has(.cvt-scope) .cvt-field input:focus {
  border-color: rgba(227, 146, 47, .58);
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .14);
}

html:has(.cvt-scope) .cvt-suggest {
  border-color: rgba(227, 146, 47, .38);
  color: var(--cv-gold-deep);
}

html:has(.cvt-scope) .cvt-btn-primary {
  padding: .72rem 1.5rem;
  border-radius: 14px;
  font-weight: 800;
  background: linear-gradient(140deg, #F3B76A 0%, #E3922F 45%, #C9741C 100%);
  box-shadow: 0 17px 32px -17px rgba(227, 146, 47, .95);
}

html:has(.cvt-scope) .cvt-btn-ghost {
  padding: .72rem 1.25rem;
  border-radius: 14px;
  font-weight: 700;
  border-color: rgba(35, 43, 36, .14);
}

html:has(.cvt-scope) .cvt-btn-ghost:hover {
  color: var(--cv-gold-deep);
  border-color: rgba(227, 146, 47, .45);
}


/* ---------- 12) القائمة الجانبية: عنصر تنقّل داكن بهوية القوائم الأخرى ----------
   theme-default.css يفرض .bg-menu-theme { background-color:#fff !important }
   بخصوصية (0,1,0)+!important، وحالة العنصر النشط
   [dir=rtl] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link
   :not(.menu-toggle) بخصوصية (0,5,0)+!important.
   لذلك نكتب محدّداتنا بالصيغة الكاملة #layout-menu.bg-menu-theme… لترتفع
   إلى (1,7,1) ونضيف !important حيث يستعمله الأصل.                          */

/* السطح يقرأ توكنات ‎--th-side-*‎ العامّة (القسم 16-ج) — كانت هذه القيم نسخةً
   حرفيةً من أساسها، فثيم Default بلا تغيير والثلاثة الأخرى صارت تعمل. */
html:has(.cvt-scope) #layout-menu.bg-menu-theme {
  background:
    radial-gradient(120% var(--th-side-wash-h) at 50% 0%, var(--th-side-wash), transparent 60%),
    linear-gradient(180deg, var(--th-side-top) 0%, var(--th-side-bottom) 100%) !important;
  /* ‎inline-END‎ لا ‎inline-start‎ — نفس تصحيح عائلة ملفّ الإنجاز (سطر ~3892).
     في RTL السبيدر على اليمين، فالحافّة المواجهة للمحتوى هي ‎inline-end‎
     (يسار فيزيائي) وهي الفاصل الذي يُرى؛ و‎inline-start‎ ملاصقة لطرف الشاشة.
     قِيس على ‎/templates/8/file‎ في ثيم «مؤطّر» قبل الإصلاح: الحافّة الداخلية
     ‎0px‎ والخارجية ‎0.8px rgba(31,46,43,.2)‎ — أي أن الحدّ كان يُرسم حيث لا
     يفصل شيئاً. أُصلح 2026-08-20. المرجع: عائلة المعلم سطر 1455. */
  border-inline-end: 1px solid var(--th-side-border) !important;
  box-shadow: var(--th-side-shadow);
  color: var(--th-side-fg);
}

html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-inner > .menu-item {
  margin: 1px .4rem;
}

/* ‎margin-inline: 0‎ — يلغي هامش core/docs-theme الجانبي على الرابط؛
   الهامش الجانبي مصدره الوحيد هامش البند أعلاه فلا يتراكب الاثنان. */
html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-link {
  border-radius: 12px;
  margin-inline: 0;
  padding-inline: .8rem;
  padding-block: .42rem;
  overflow: hidden;
  color: var(--th-side-fg);
  transition: color .26s var(--cv-ease),
              padding-inline-start .26s var(--cv-ease);
}

html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-item:not(.active) > .menu-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .20),
              rgba(227, 146, 47, .04) 70%,
              transparent);
  opacity: 0;
  transform: translateX(12%);
  transition: opacity .26s ease, transform .26s var(--cv-ease);
}

html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-item:not(.active) > .menu-link:hover {
  background: transparent;
  color: var(--th-side-fg-hover);
  padding-inline-start: 1.15rem;
}

html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-item:not(.active) > .menu-link:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* أقراص الأيقونات */
html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-link .menu-icon {
  inline-size: 28px;
  block-size: 28px;
  margin-inline-end: .55rem;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  font-size: .95rem;
  background: var(--th-side-ico-bg);
  transition: transform .26s var(--cv-ease),
              background .26s ease, color .26s ease;
}

html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-item:not(.active) > .menu-link:hover .menu-icon {
  transform: scale(1.08) rotate(-6deg);
  color: var(--th-side-ico-hover);
  background: var(--th-side-ico-hover-bg);
}

/* العنصر النشط */
html:has(.cvt-scope) #layout-menu.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .34),
              rgba(227, 146, 47, .10) 72%,
              transparent) !important;
  color: var(--th-side-active-fg) !important;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(227, 146, 47, .30);
}

html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-item.active > .menu-link .menu-icon {
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 8px 18px -7px rgba(227, 146, 47, .70);
}

/* شريط الحافّة المضيء للعنصر النشط */
html:has(.cvt-scope) .layout-wrapper:not(.layout-horizontal) #layout-menu.bg-menu-theme .menu-inner > .menu-item.active::before {
  inset-inline-end: -.6rem;
  inset-inline-start: auto;
  inline-size: 4px;
  block-size: 52%;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFD9A3, #E3922F 55%, #C9741C);
  box-shadow: 0 0 12px rgba(227, 146, 47, .75);
}

html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-header {
  color: var(--th-side-header);
}

html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-inner::-webkit-scrollbar {
  width: 6px;
}

html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-inner::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: rgba(227, 146, 47, .35);
}

html:has(.cvt-scope) #layout-menu.bg-menu-theme .menu-inner::-webkit-scrollbar-track {
  background: transparent;
}


/* ---------- 13) التجاوب ---------- */
@media (max-width: 991.98px) {
  html:has(.cvt-scope) .cvt-hero { padding: 1.7rem 1.4rem 1.5rem; border-radius: 24px; }
  html:has(.cvt-scope) .cvt-hero::after { font-size: 7rem; opacity: .8; }
  html:has(.cvt-scope) .cvt-title { max-width: none; }
}

@media (max-width: 767.98px) {
  html:has(.cvt-scope) .cvt-toolbar {
    position: static;
    padding: .75rem;
    border-radius: 20px;
  }
  html:has(.cvt-scope) .cvt-count {
    inline-size: 100%;
    justify-content: center;
    margin-inline-start: 0;
  }
  html:has(.cvt-scope) .cvt-chips--plan { inline-size: 100%; }
  html:has(.cvt-scope) .cvt-chips--plan .cvt-chip { flex: 1 1 auto; justify-content: center; }
  html:has(.cvt-scope) .cvt-sort { inline-size: 100%; }

  /* لا تحويم على اللمس: الأفعال ظاهرة، والطيّة والرقم يبقيان مخفيَّين */
  html:has(.cvt-scope) .cvt-card-thumb::before { opacity: 0; }
  html:has(.cvt-scope) .cvt-card-overlay {
    opacity: 1;
    background: linear-gradient(180deg,
                rgba(23, 32, 25, 0) 42%,
                rgba(23, 32, 25, .88) 100%);
  }
  html:has(.cvt-scope) .cvt-act { transform: none; }
}

@media (max-width: 575.98px) {
  html:has(.cvt-scope) .cvt-hero { padding: 1.35rem 1.1rem 1.25rem; }
  html:has(.cvt-scope) .cvt-hero::before { display: none; }
  html:has(.cvt-scope) .cvt-hero::after { font-size: 5.5rem; opacity: .55; }
  html:has(.cvt-scope) .cvt-title { font-size: 1.42rem; line-height: 1.55; }
  html:has(.cvt-scope) .cvt-stats { gap: .45rem; }
  html:has(.cvt-scope) .cvt-stat { inline-size: 100%; }
  html:has(.cvt-scope) .cvt-results.row.g-2 { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
  html:has(.cvt-scope) .cvt-card-name { font-size: .82rem; min-block-size: 2.5em; }
  html:has(.cvt-scope) .cvt-act { min-height: 44px; }
  html:has(.cvt-scope) .cvt-chip.cvt-cat { height: 42px; }
}


/* ---------- 14) تفضيلات الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.cvt-scope) .cvt-title .g { animation: none; }
  html:has(.cvt-scope) .cvt-results > [class*="col-"] { animation: none; }
  html:has(.cvt-scope) .cvt-card,
  html:has(.cvt-scope) .cvt-card-thumb img,
  html:has(.cvt-scope) .cvt-card-thumb::after,
  html:has(.cvt-scope) .cvt-stat i,
  html:has(.cvt-scope) .cvt-chip.cvt-cat,
  html:has(.cvt-scope) .cvt-pagination .page-link {
    transition: none;
  }
  html:has(.cvt-scope) .cvt-card:hover { transform: none; }
}


/* =============================================================================
   8-ت2. صفحة 24.html (الاختبار النهائي 1447هـ) — الخطّان + إعادة تصميم جذرية ✅ ✨
   -----------------------------------------------------------------------------
   النطاق: html:has(.th-doc) ← .th-doc موجود في 24.html وحدها.
   ⚠️ حذر: .th-wrap و.th-topbar و.th-page مشتركة مع 3.html و19.html، لذلك
   كل قاعدة هنا تُكتب داخل النطاق أعلاه ولا شيء خارجه.

   الوضع القائم: ملفّ ضخم assets/css/teacher-home.css (4027 سطراً) بهوية
   نحاسية #D46E2A مصدرها توكنات --brand في docs-theme.css على :root.

   ⚡ الرافعة الأولى: نعيد تعريف --brand وأخواتها على html:has(.th-doc)
   بخصوصية (0,1,1) — فتنقلب مئات القواعد إلى ذهب المشروع دفعةً واحدة.

   ⚠️ اكتشاف: الصفحة تُصدَّر بلا عنصر .th-fcard-ico إطلاقاً (تحقّقنا: صفر
   مرّة في 24.html)، رغم أن teacher-home.css سطر 796 يصمّم له بلاطة نوع
   ملوّنة 44px. أي أن أهم عنصر بصري في البطاقة **مصمَّم ولا يُعرض**.
   نُعيده هنا من CSS خالص: البلاطة تُولَّد على .th-fcard::before ورمزها
   يُختار من السمة data-kind الموجودة أصلاً على البطاقة.

   الفكرة: 25 ملفاً في 7 مجموعات — فلتُقرأ الصفحة كـ«بنك اختبارات مفهرس»:
     · كل مجموعة تصير فصلاً مرقّماً بعدّاد CSS مع خيط ذهبي يمتدّ لآخر السطر.
     · كل بطاقة صفّ مستند: بلاطة نوع ملوّنة يميناً، ثم النصّ، ثم زرّ (⋮) يساراً
       — بدل النصّ الموسّط الحالي الذي لا يمنح البطاقة رأساً ولا ذيلاً.
     · وعند المرور تنقلب بلاطة النوع إلى **سهم تحميل ذهبي** — فيصير الغرض
       من النقر معلوماً قبل النقر.

   الاتجاه: أساس ورقي فاتح. الداكن #232B24 في **الشريط العلوي وحده** — رَيل
   تحكّم يحمل المسار والبحث ومبدّل العرض. والقائمة الجانبية داكنة كـ chrome.
   ========================================================================== */

/* ---------- 1) الخطّان ---------- */
html:has(.th-doc) {
  --f-display: 'Tajawal', 'Rubik', sans-serif;
  --f-body: 'IBM Plex Sans Arabic', 'Rubik', sans-serif;
  --bs-body-font-family: var(--f-body);
}

html:has(.th-doc) body {
  font-family: var(--f-body);
}

html:has(.th-doc) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--f-display);
}

html:has(.th-doc) :is(
  .th-fcard-topic, .th-fcard-nick, .th-fcard-type, .th-count,
  .th-chip-f, .th-stat, .menu-link, .btn, .modal-title
) {
  font-family: var(--f-display);
}

html:has(.th-doc) :is(
  .th-search-input, .th-fcard small, .dropdown-item, .form-control, .form-label
) {
  font-family: var(--f-body);
}


/* ---------- 2) قلب توكنات الهوية: ذهب ‎#E3922F‎ مطابقةً للسايدبار النشط ---------- */
/* اللون هنا هو نفس ذهب الشريط الجانبي النشط (‎#E3922F/#C9741C‎ في شريحته
   وشريطه الجانبي) — طلب المستخدم توحيد الصفحة على لون السايدبار بالضبط.
   المحدّد ‎html.docs-page:has(.th-doc)‎ خصوصيته (0,2,1) ليكسب على
   ‎teacher-home.css:4008‎ (‎html.light-style.docs-page‎ يفرض ‎--brand: #c77840‎
   الباهت) — تعادل خصوصيةٍ يحسمه ترتيب التحميل (ملفّنا بعده). بذلك يتوحّد
   ‎var(--brand)‎ (أيقونة تحميل الوحدة المطويّة، زر العودة للأعلى…) مع الحرفيّات
   بدل أن يبقى نحاسياً باهتاً. */
html.docs-page:has(.th-doc) {
  --brand:        #E3922F;
  --brand-rgb:    227, 146, 47;
  --brand-hover:  #C9741C;
  --brand-light:  #F3B76A;
  --brand-soft:   rgba(227, 146, 47, .11);

  --dt-text:      var(--pal-ink);
  --dt-text-2:    var(--pal-ink-2);
  --dt-line:      rgba(35, 43, 36, .10);

  --glass-card:   rgba(255, 255, 255, .86);
  --glass-border: rgba(35, 43, 36, .08);

  /* توكناتنا — على الجذر ليصل بعضها للقائمة الجانبية خارج .th-doc */
  --th-ink:       var(--pal-ink);
  --th-ink-2:     var(--pal-ink-2);
  --th-ink-3:     #8A949C;
  --th-gold:      #E3922F;
  --th-gold-2:    #C9741C;
  --th-gold-deep: var(--pal-gold-deep);
  --th-dark:      var(--pal-dark);
  --th-dark-2:    #1B231D;
  --th-ease:      cubic-bezier(.4, 0, .2, 1);
}

/* لوح الصفحة: ورق دافئ */
html:has(.th-doc) .content-wrapper {
  background:
    radial-gradient(900px 420px at 86% -8%, rgba(227, 146, 47, .08), transparent 62%),
    linear-gradient(180deg, #FDFBF8 0%, #F7F2EA 100%);
}


/* ---------- 3) الشريط العلوي ← ترويسة ورقية بحبر داكن ---------- */
/* ⚠️ لماذا انقلب من داكن إلى ورقيّ؟
   النسخة الداكنة جعلت **كل** ألوان النصّ بيضاء. فحين سقط إعلان الخلفية
   وحده — والباقي سليم — صار الشريط أبيض على أبيض ولم يُقرأ (كما ظهر في
   لقطة الشاشة). أي أن التصميم كان يعتمد على نجاح إعلان واحد.

   الترتيب هنا معكوس ومحصَّن: **الحبر داكن دائماً**. فلو سقطت كل قواعد
   الخلفية عادت خلفية القالب الزجاجية الفاتحة، وبقي النصّ مقروءاً كما هو.
   ولا ‎var()‎ في أي إعلان لون هنا — متغيّر غير معرَّف يُسقط الإعلان كلّه،
   وهذا بالضبط ما لا نريد تكراره.

   وفوق الإصلاح: الشريط يصير ترويسة صفحة حقيقية —
     · الشرطات ‎/‎ النصّية تُخفى ويحلّ محلّها شيفرون حقيقي.
     · روابط المسار تصير حبّات تتوهّج ذهبياً.
     · العنوان ينزل سطراً مستقلاً بحجم ‎1.4rem‎ ووزن 900 وأمامه شريط ذهبي.
     · العدّاد يرتفع ليختم سطر المسار بحبّة تحمل أيقونة ملفّات.
     · حقل البحث يتلوّن بحالة النتيجة (جافاسكربت يضيف ‎.text-success‎ أو
       ‎.text-danger‎ — 24.html سطر 4038 و4042) ويتبعه الصندوق والأيقونة. */

html:has(.th-doc) .th-topbar {
  padding: .85rem 1rem;
  gap: .8rem !important;
  border-radius: 22px;
  border: 1px solid rgba(227, 146, 47, .24);
  background:
    radial-gradient(560px 220px at 92% -70%, rgba(227, 146, 47, .19), transparent 66%),
    linear-gradient(180deg, #FFFFFF 0%, #FDF8F1 100%);
  box-shadow: 0 22px 46px -34px rgba(35, 43, 36, .5);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

html:has(.th-doc) .th-topbar > h5 {
  flex: 1 1 250px;
  min-width: 0;
  row-gap: .4rem;
  column-gap: .1rem;
  color: var(--pal-ink);
}


/* أ) المسار: شرطات نصّية ← شيفرونات */
/* الشرطة ‎/‎ نصّ شقيق للرابط داخل الـspan، فلا تُخفى وحدها. تصفير حجم خطّ
   الـspan يُخفيها، والرابط يستعيد حجمه بنفسه. ‎:has(a)‎ يحمي span العنوان
   وspan العدّاد فلا يمسّهما التصفير. */
html:has(.th-doc) .th-topbar h5 > span:has(a) {
  display: inline-flex;
  align-items: center;
  font-size: 0;
  line-height: 1;
}

html:has(.th-doc) .th-topbar h5 .text-muted {
  color: #8A949C !important;
}

html:has(.th-doc) .th-topbar h5 > span:has(a) > a {
  padding: .2rem .58rem;
  border-radius: 9px;
  font-family: var(--f-body);
  font-size: .83rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--pal-ink-2);
  text-decoration: none;
  transition: color .22s ease, background .22s ease;
}

html:has(.th-doc) .th-topbar h5 > span:has(a) > a:hover {
  color: var(--pal-gold-deep);
  background: rgba(227, 146, 47, .13);
}

html:has(.th-doc) .th-topbar h5 > span:has(a)::after {
  content: "\ea60";                     /* ti-chevron-left — اتجاه السير في RTL */
  font-family: "tabler-icons";
  font-size: .9rem;
  line-height: 1;
  color: rgba(35, 43, 36, .24);
}

/* آخر رابط في المسار لا فاصل بعده — العنوان يليه في سطر مستقل.
   إن لم يدعم المتصفّح التركيب سقطت القاعدة وبقي الفاصل، لا أكثر. */
html:has(.th-doc) .th-topbar h5 > span:has(a):not(:has(~ span a))::after {
  content: none;
}


/* ب) العنوان يستقلّ بسطره، والعدّاد يختم سطر المسار */
/* الترتيب الطبيعي: ①مسار ②مسار ③عنوان ④عدّاد. نرفع العدّاد قبل العنوان
   ثم نجعل العنوان بعرض السطر — فيصير: [مسار … عدّاد] ثم [العنوان]. */
html:has(.th-doc) .th-topbar > h5 > .th-count {
  order: 1;
  align-self: center;
  margin-inline-start: .45rem;
  padding: .2rem .68rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.7;
  color: var(--pal-gold-deep);
  background: rgba(227, 146, 47, .13);
  border: 1px solid rgba(227, 146, 47, .3);
}

html:has(.th-doc) .th-topbar > h5 > .th-count::before {
  content: "\edef";                     /* ti-files */
  font-family: "tabler-icons";
  font-weight: 400;
  margin-inline-end: .3rem;
  font-size: .86rem;
  vertical-align: -1px;
  color: #C9741C;
}

/* الخصوصية (0,4,2): تتجاوز قصّ العرض في كتلة التجاوب أدناه (0,3,1) */
html:has(.th-doc) .th-topbar > h5 > .fw-bold {
  order: 2;
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: none;
  overflow: visible;
  white-space: normal;
  font-family: var(--f-display);
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -.3px;
  color: var(--pal-ink);
}

/* شريط ذهبي يسبق العنوان */
html:has(.th-doc) .th-topbar > h5 > .fw-bold::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 5px;
  block-size: 1.1em;
  border-radius: 100px;
  background: linear-gradient(180deg, #F3B76A, #E3922F 55%, #C9741C);
  box-shadow: 0 0 12px rgba(227, 146, 47, .55);
}


/* ج) البحث ← بئر ورقيّ غائر بحافّة ذهبية */
/* ⚠️ سبب اخضرار الإطار والأيقونة: جافاسكربت يشغّل التصفية مرّة عند التحميل،
   والحقل فارغ فكل البطاقات ظاهرة ⇐ ‎hasVisibleCards = true‎ ⇐ يضيف
   ‎.text-success‎ (24.html سطر 4038). أي أن «نجاح» هو الحالة الساكنة لا
   حالة بحث. فكانت قواعدنا تصبغ الصندوق أخضر دائماً على صفحة ذهبية.

   الإشارة الصحيحة لبحثٍ جارٍ هي زرّ المسح: document-extras.js سطر 397
   يكتب ‎searchClear.hidden = !this.value‎ — فيظهر حين يكون الحقل غير فارغ
   وحده. لذلك نقيّد ألوان الحالة كلّها بـ
       ‎.th-search:has(.th-search-clear:not([hidden]))‎
   فتبقى الحافّة ذهبية هادئة ما لم يكتب المستخدم شيئاً. */

html:has(.th-doc) .th-topbar .th-search {
  gap: .55rem;
  padding: .45rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(227, 146, 47, .3);
  background: #FBF4E9;
  box-shadow: inset 0 2px 5px -3px rgba(35, 43, 36, .3);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

html:has(.th-doc) .th-topbar .th-search-ico {
  color: #D08A31;
  font-size: 1.08rem;
  transition: color .22s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

html:has(.th-doc) .th-topbar .th-search:focus-within .th-search-ico {
  color: #C9741C;
  transform: scale(1.12) rotate(-8deg);
}

html:has(.th-doc) .th-topbar .th-search-input {
  color: var(--pal-ink);
  font-size: .9rem;
}

html:has(.th-doc) .th-topbar .th-search-input::placeholder {
  color: #A79C90;
}

html:has(.th-doc) .th-topbar .th-search-clear {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #A79C90;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

html:has(.th-doc) .th-topbar .th-search-clear:hover {
  color: #C2323A;
  background: rgba(194, 50, 58, .12);
  transform: rotate(90deg);
}

/* --- حالة الحقل الساكن: لا لون حالة إطلاقاً ---
   لونا بوتستراب مكتوبان بـ!important وبخصوصية (0,1,0)، فنبطلهما هنا
   ونعيدهما فقط داخل شرط «بحثٌ جارٍ» أدناه. */
html:has(.th-doc) .th-topbar .th-search-input.text-success,
html:has(.th-doc) .th-topbar .th-search-input.text-danger {
  color: var(--pal-ink) !important;
}

/* التركيز على حقل فارغ: حلقة ذهبية.
   خصوصيته (0,4,1) وخصوصية قواعد الحالة أدناه (0,6,1) — فهي تتقدّم عليه
   تلقائياً. وهذا مقصود: المستخدم **مركِّز على الحقل أثناء الكتابة**، فلو
   ابتلع التركيزُ لونَ الحالة لما ظهر الأحمر أبداً. التركيز يضيف الحلقة
   فقط، والحالة تملك الحافّة والخلفية. */
html:has(.th-doc) .th-topbar .th-search:focus-within {
  border-color: rgba(227, 146, 47, .68);
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .17);
}

/* --- بحثٌ جارٍ وله نتائج --- */
html:has(.th-doc) .th-topbar .th-search:has(.th-search-clear:not([hidden])):has(.text-success) {
  border-color: rgba(14, 122, 65, .42);
  background: rgba(14, 122, 65, .06);
}

html:has(.th-doc) .th-topbar .th-search:has(.th-search-clear:not([hidden])):has(.text-success) .th-search-ico {
  color: #0E7A41;
}

html:has(.th-doc) .th-topbar .th-search:has(.th-search-clear:not([hidden])) .th-search-input.text-success {
  color: #0E7A41 !important;
}

/* --- بحثٌ جارٍ بلا نتائج --- */
html:has(.th-doc) .th-topbar .th-search:has(.th-search-clear:not([hidden])):has(.text-danger) {
  border-color: rgba(194, 50, 58, .5);
  background: rgba(194, 50, 58, .07);
}

html:has(.th-doc) .th-topbar .th-search:has(.th-search-clear:not([hidden])):has(.text-danger) .th-search-ico {
  color: #C2323A;
}

html:has(.th-doc) .th-topbar .th-search:has(.th-search-clear:not([hidden])) .th-search-input.text-danger {
  color: #C2323A !important;
}

/* حلقة التركيز تتبع الحالة كذلك — (0,7,1) فوق قواعد الحالة (0,6,1) */
html:has(.th-doc) .th-topbar .th-search:has(.th-search-clear:not([hidden])):has(.text-success):focus-within {
  box-shadow: 0 0 0 4px rgba(14, 122, 65, .15);
}

html:has(.th-doc) .th-topbar .th-search:has(.th-search-clear:not([hidden])):has(.text-danger):focus-within {
  box-shadow: 0 0 0 4px rgba(194, 50, 58, .16);
}


/* د) مبدّل العرض ← مفتاح مقطعي ورقيّ */
html:has(.th-doc) .th-topbar .th-view-toggle {
  padding: 4px;
  gap: 3px;
  border-radius: 14px;
  border: 1px solid rgba(227, 146, 47, .3);
  background: #FBF4E9;
  box-shadow: inset 0 2px 5px -3px rgba(35, 43, 36, .3);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

html:has(.th-doc) .th-topbar .th-view-toggle button {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  font-size: 1.05rem;
  color: #A0917F;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

html:has(.th-doc) .th-topbar .th-view-toggle button:hover {
  color: #C9741C;
  background: rgba(227, 146, 47, .16);
}

html:has(.th-doc) .th-topbar .th-view-toggle button:active {
  transform: scale(.94);
}

html:has(.th-doc) .th-topbar .th-view-toggle button.is-active {
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 9px 18px -10px rgba(227, 146, 47, .9);
}

html:has(.th-doc) .th-topbar .th-view-toggle button.is-active:hover {
  background: linear-gradient(140deg, #EE9E3B, #B8681A);
}

/* أيقونة الزرّ النشط بيضاء صراحةً في كل الحالات.
   وراثة اللون من الزرّ كافية نظرياً — لكن التصريح المباشر على العنصر ‎<i>‎
   نفسه يقطع أي تلوين لاحق: قاعدة ‎:hover‎ على الزرّ، أو ملفّ يُحمَّل بعدنا
   داخل ‎<body>‎ (خمسة ملفات تفعل ذلك في هذه الصفحة). */
html:has(.th-doc) .th-topbar .th-view-toggle button.is-active,
html:has(.th-doc) .th-topbar .th-view-toggle button.is-active:hover,
html:has(.th-doc) .th-topbar .th-view-toggle button.is-active:focus,
html:has(.th-doc) .th-topbar .th-view-toggle button.is-active i,
html:has(.th-doc) .th-topbar .th-view-toggle button.is-active:hover i,
html:has(.th-doc) .th-topbar .th-view-toggle button.is-active i.ti {
  color: #FFFFFF !important;
}


/* هـ) تجاوب الترويسة */
@media (max-width: 991.98px) {
  html:has(.th-doc) .th-topbar > h5 > .fw-bold { font-size: 1.24rem; }
}

@media (max-width: 575.98px) {
  html:has(.th-doc) .th-topbar { padding: .75rem .8rem; border-radius: 18px; }
  html:has(.th-doc) .th-topbar > h5 > .fw-bold { font-size: 1.08rem; gap: .45rem; }
  html:has(.th-doc) .th-topbar h5 > span:has(a) > a { font-size: .78rem; padding: .18rem .48rem; }
  html:has(.th-doc) .th-topbar > h5 > .th-count { margin-inline-start: .28rem; }
}


/* ---------- 4) رؤوس المجموعات ← فصول مرقّمة ---------- */
/* كانت شريحة نحاسية مصمتة بعرض النصّ. تصير سطر فصل بعرض الصفّ: قرص رقم
   ذهبي (عدّاد CSS) + العنوان + خيط ذهبي يمتدّ لآخر السطر. والعناصر التي
   تخفيها الفلترة بـ display:none لا تزيد العدّاد فالترقيم يصحّ دائماً.  */
html:has(.th-doc) #thDocGrid {
  counter-reset: thunit;
}

html:has(.th-doc) .th-doc h6.unitOne {
  counter-increment: thunit;
  display: flex;
  inline-size: 100%;
  align-items: center;
  gap: .8rem;
  /* الرأس يحمل ‎.p-0‎ بـ!important فيفقد حشوة الشبكة، فيبدأ عنوانه قبل
     عمود البطاقات بمقدارها. نُعيدها محسوبةً من المتغيّر نفسه فيتحاذيان. */
  padding-block: 0 !important;
  padding-inline: calc(var(--bs-gutter-x) * .5) !important;
  margin: 2.2rem 0 .95rem !important;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--th-ink) !important;
  font-family: var(--f-display);
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  letter-spacing: -.2px;
}

html:has(.th-doc) .th-doc h6.unitOne:first-child {
  margin-block-start: .5rem !important;
}

/* قرص الرقم — يحلّ محلّ أيقونة الكتاب */
html:has(.th-doc) .th-doc h6.unitOne::before {
  content: counter(thunit, decimal-leading-zero);
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .06em;
  opacity: 1;
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 13px 26px -13px rgba(227, 146, 47, .95);
}

/* المقبض الجانبي يصير خيطاً يمتدّ — position:static ليعود عنصر فليكس */
html:has(.th-doc) .th-doc h6.unitOne::after {
  content: "";
  position: static;
  transform: none;
  flex: 1 1 auto;
  width: auto;
  height: 1px;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(270deg,
              rgba(227, 146, 47, .45),
              rgba(227, 146, 47, .08) 68%,
              transparent);
}


/* ---------- 5) بطاقة الملف ← صفّ مستند ---------- */
html:has(.th-doc) #thDocGrid.row.g-1 {
  --bs-gutter-x: .9rem;
  --bs-gutter-y: .9rem;
}

/* ألوان النوع — تُقرأ من data-kind الموجودة أصلاً على البطاقة */
html:has(.th-doc) .th-doc .card-interactive                  { --th-k: #737884; --th-k-bg: rgba(120, 120, 130, .12); --th-k-bd: rgba(120, 120, 130, .22); }
html:has(.th-doc) .th-doc .card-interactive[data-kind="pdf"] { --th-k: #D6414A; --th-k-bg: rgba(214,  65,  74, .12); --th-k-bd: rgba(214,  65,  74, .24); }
html:has(.th-doc) .th-doc .card-interactive[data-kind="doc"] { --th-k: #2F6DB5; --th-k-bg: rgba( 47, 109, 181, .12); --th-k-bd: rgba( 47, 109, 181, .24); }
html:has(.th-doc) .th-doc .card-interactive[data-kind="ppt"] { --th-k: #C9741C; --th-k-bg: rgba(201, 116,  28, .13); --th-k-bd: rgba(201, 116,  28, .26); }
html:has(.th-doc) .th-doc .card-interactive[data-kind="xls"] { --th-k: #12924E; --th-k-bg: rgba( 18, 146,  78, .12); --th-k-bd: rgba( 18, 146,  78, .24); }
html:has(.th-doc) .th-doc .card-interactive[data-kind="img"] { --th-k: #6D53C7; --th-k-bg: rgba(109,  83, 199, .12); --th-k-bd: rgba(109,  83, 199, .24); }
html:has(.th-doc) .th-doc .card-interactive[data-kind="zip"] { --th-k: #6D7580; --th-k-bg: rgba(109, 117, 128, .13); --th-k-bd: rgba(109, 117, 128, .26); }
html:has(.th-doc) .th-doc .card-interactive[data-kind="link"]{ --th-k: #109AA4; --th-k-bg: rgba( 16, 154, 164, .12); --th-k-bd: rgba( 16, 154, 164, .24); }

html:has(.th-doc) .th-doc .card-interactive {
  border-radius: 20px;
  border: 1px solid rgba(35, 43, 36, .08);
  background: #FFFFFF;
  box-shadow: 0 16px 34px -28px rgba(35, 43, 36, .55);
  transition: transform .3s var(--th-ease), box-shadow .3s ease, border-color .3s ease;
}

html:has(.th-doc) .th-doc .card-interactive:hover {
  transform: translateY(-5px);
  border-color: var(--th-k-bd);
  box-shadow: 0 32px 58px -30px rgba(35, 43, 36, .5),
              0 0 0 1px var(--th-k-bd);
}

/* ترتيب الصفّ: البلاطة والنصّ أولاً، وزرّ (⋮) في الطرف المقابل.
   نغيّر ترتيب عنصر واحد فقط — الباقي يبقى على ترتيبه الطبيعي (order:0)
   فتقلّ الأجزاء المتحرّكة وتنعدم فرص التداخل.
   أدوات بوتستراب للهوامش تُكتب بـ!important فنحتاجه هنا. */
html:has(.th-doc) .th-doc .card-interactive > .d-flex {
  align-items: center;
}

html:has(.th-doc) .th-doc .card-interactive > .d-flex > .btn-group {
  order: 3;
  align-self: flex-start;
  margin: .55rem 0 0 .35rem !important;
}

html:has(.th-doc) .th-doc .card-interactive > .d-flex > a {
  min-width: 0;
}


/* ---------- 6) بلاطة النوع — العنصر المصمَّم الذي لم يُعرض قطّ ---------- */
html:has(.th-doc) .th-doc .th-fcard {
  position: relative;
  text-align: start !important;
  padding-block: .95rem !important;
  padding-inline: 3.9rem .55rem !important;
  color: var(--th-ink);
}

html:has(.th-doc) .th-doc .th-fcard::before {
  content: "\f028";                       /* ti-file-description — الافتراضي */
  font-family: "tabler-icons";
  font-weight: 400;
  position: absolute;
  top: 50%;
  inset-inline-start: .6rem;
  transform: translateY(-50%);
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--th-k);
  background: var(--th-k-bg);
  border: 1px solid var(--th-k-bd);
  transition: transform .32s var(--th-ease), background .28s ease,
              color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

html:has(.th-doc) .th-doc .card-interactive[data-kind="pdf"]  .th-fcard::before { content: "\f028"; }
html:has(.th-doc) .th-doc .card-interactive[data-kind="doc"]  .th-fcard::before { content: "\f041"; }
html:has(.th-doc) .th-doc .card-interactive[data-kind="ppt"]  .th-fcard::before { content: "\eb70"; }
html:has(.th-doc) .th-doc .card-interactive[data-kind="xls"]  .th-fcard::before { content: "\f03e"; }
html:has(.th-doc) .th-doc .card-interactive[data-kind="img"]  .th-fcard::before { content: "\eb0a"; }
html:has(.th-doc) .th-doc .card-interactive[data-kind="zip"]  .th-fcard::before { content: "\ed4e"; }
html:has(.th-doc) .th-doc .card-interactive[data-kind="link"] .th-fcard::before { content: "\eade"; }

/* ✦ اللمسة: عند المرور تنقلب البلاطة إلى سهم تحميل ذهبي —
   فيُعرَف الغرض من النقر قبل النقر. */
html:has(.th-doc) .th-doc .card-interactive:hover .th-fcard::before {
  content: "\ea96";                       /* ti-download */
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  border-color: transparent;
  transform: translateY(-50%) scale(1.07);
  box-shadow: 0 15px 28px -13px rgba(227, 146, 47, .95);
}


/* ---------- 7) نصّ البطاقة ---------- */
html:has(.th-doc) .th-doc .th-fcard-topic {
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.55;
  color: var(--th-ink);
}

html:has(.th-doc) .th-doc .th-fcard-sep {
  color: rgba(227, 146, 47, .75);
  font-weight: 900;
  margin: 0 .3rem;
}

html:has(.th-doc) .th-doc .th-fcard-meta {
  justify-content: flex-start;
  gap: .4rem;
  margin-top: .35rem;
}

html:has(.th-doc) .th-doc .th-fcard-nick {
  font-family: var(--f-display);
  font-size: .84rem;
  font-weight: 700;
  color: var(--th-ink-2);
}

html:has(.th-doc) .th-doc .th-fcard-type {
  padding: .16rem .6rem;
  border-radius: 8px;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--th-k);
  background: var(--th-k-bg);
  border: 1px solid var(--th-k-bd);
}

html:has(.th-doc) .th-doc .th-fcard-stats {
  justify-content: flex-start;
  gap: .75rem;
  margin-top: .45rem;
}

html:has(.th-doc) .th-doc .th-stat {
  font-size: .74rem;
  font-weight: 700;
  color: var(--th-ink-3);
}

html:has(.th-doc) .th-doc .th-stat i {
  color: rgba(227, 146, 47, .8);
}

html:has(.th-doc) .th-doc .th-stat-dl b {
  color: var(--th-gold-deep);
  font-weight: 900;
}

/* اسم الملف: كان أحمر تحذيرياً وطويلاً يلتفّ على أربعة أسطر.
   يصير سطراً واحداً هادئاً بقصّ — النصّ ليس خطأً كي يُصبغ بالأحمر. */
html:has(.th-doc) .th-doc .th-fcard small.text-danger {
  display: block;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px dashed rgba(35, 43, 36, .10);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--th-ink-3) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* زرّ القائمة (⋮) */
html:has(.th-doc) .th-doc .th-card-menu {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: var(--th-ink-3);
}

html:has(.th-doc) .th-doc .th-card-menu:hover,
html:has(.th-doc) .th-doc .th-card-menu[aria-expanded="true"] {
  color: var(--th-gold-deep);
  background: rgba(227, 146, 47, .14);
  transform: none;
}

html:has(.th-doc) .th-doc .dropdown-menu {
  border-radius: 16px;
  border: 1px solid rgba(35, 43, 36, .08);
  box-shadow: 0 26px 52px -26px rgba(35, 43, 36, .45);
  padding: .35rem;
}

html:has(.th-doc) .th-doc .dropdown-item {
  border-radius: 11px;
  font-size: .85rem;
  font-weight: 600;
}

html:has(.th-doc) .th-doc .dropdown-item:hover,
html:has(.th-doc) .th-doc .dropdown-item:focus {
  color: var(--th-gold-deep);
  background: rgba(227, 146, 47, .11);
}

/* ظهور متتابع للبطاقات ورؤوس المجموعات */
@keyframes th24-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

html:has(.th-doc) #thDocGrid > * {
  animation: th24-rise .45s var(--th-ease) both;
}

html:has(.th-doc) #thDocGrid > *:nth-child(1)  { animation-delay: .02s; }
html:has(.th-doc) #thDocGrid > *:nth-child(2)  { animation-delay: .05s; }
html:has(.th-doc) #thDocGrid > *:nth-child(3)  { animation-delay: .08s; }
html:has(.th-doc) #thDocGrid > *:nth-child(4)  { animation-delay: .11s; }
html:has(.th-doc) #thDocGrid > *:nth-child(5)  { animation-delay: .14s; }
html:has(.th-doc) #thDocGrid > *:nth-child(6)  { animation-delay: .17s; }
html:has(.th-doc) #thDocGrid > *:nth-child(7)  { animation-delay: .20s; }
html:has(.th-doc) #thDocGrid > *:nth-child(n+8) { animation-delay: .23s; }


/* ---------- 8) شريط الفلاتر ---------- */
html:has(.th-doc) .th-filters {
  gap: .5rem;
  padding: .7rem .85rem;
  border-radius: 18px;
  border: 1px solid rgba(35, 43, 36, .08);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 14px 30px -24px rgba(35, 43, 36, .55);
}

html:has(.th-doc) .th-filters-ico {
  color: var(--th-gold);
}

html:has(.th-doc) .th-chip-f {
  padding: .4rem .95rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .83rem;
  font-weight: 700;
  color: var(--th-gold-deep);
  background: rgba(227, 146, 47, .09);
  border: 1px solid rgba(227, 146, 47, .22);
}

html:has(.th-doc) .th-chip-f:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 146, 47, .5);
  background: rgba(227, 146, 47, .16);
}

html:has(.th-doc) .th-chip-f.is-active {
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  border-color: transparent;
  box-shadow: 0 13px 24px -13px rgba(227, 146, 47, .95);
}

html:has(.th-doc) .th-chip-toggle {
  color: #2F6DB5;
  background: rgba(47, 109, 181, .08);
  border-color: rgba(47, 109, 181, .2);
}

html:has(.th-doc) .th-chip-toggle.is-active {
  color: #FFFFFF;
  background: linear-gradient(140deg, #3F82CF, #245C9C);
  border-color: transparent;
  box-shadow: 0 13px 24px -13px rgba(47, 109, 181, .95);
}

html:has(.th-doc) .th-filters-sep {
  background: rgba(35, 43, 36, .12);
}

/* زرّ العودة للأعلى */
html:has(.th-doc) .th-to-top {
  width: 50px;
  height: 50px;
  border-radius: 17px;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 18px 34px -16px rgba(227, 146, 47, .95);
}

html:has(.th-doc) .th-to-top:hover {
  box-shadow: 0 24px 44px -18px rgba(227, 146, 47, 1);
}


/* ---------- 9) النوافذ ---------- */
html:has(.th-doc) .th-glass-modal .modal-content,
html:has(.th-doc) .th-preview-modal .modal-content {
  border-radius: 24px;
  box-shadow: 0 40px 90px -34px rgba(35, 43, 36, .55);
}

html:has(.th-doc) .th-glass-modal .modal-header {
  padding: 1.05rem 1.35rem;
  border-bottom: 1px solid rgba(227, 146, 47, .2);
  background: linear-gradient(270deg, rgba(227, 146, 47, .12), transparent 65%);
}

html:has(.th-doc) .th-glass-modal .modal-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 1.02rem;
  color: var(--th-ink);
}

html:has(.th-doc) .th-glass-modal .modal-title i {
  color: var(--th-gold);
}

html:has(.th-doc) .th-glass-modal .form-control {
  border-radius: 13px;
  border-color: rgba(35, 43, 36, .12);
}

html:has(.th-doc) .th-glass-modal .form-control:focus {
  border-color: rgba(227, 146, 47, .58);
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .14);
}


/* ---------- 10) القائمة الجانبية: عنصر تنقّل داكن ----------
   docs-theme.css سطر 36 يفرض ‎#layout-menu.menu { background: var(--glass-menu)
   !important }‎ بخصوصية (1,1,0)، وteacher-home.css سطر 47-50 يفرضها ثانيةً
   على ‎html.light-style #layout-menu.bg-menu-theme‎ بخصوصية (0,3,0).
   محدّدنا ‎html:has(.th-doc) #layout-menu.menu.bg-menu-theme‎ = (1,4,1). */

/* السطح والحبر يقرآن توكنات ‎--th-side-*‎ العامّة (القسم 16-ج) — كانت هذه القيم
   نسخةً حرفيةً من أساسها، فثيم Default بلا تغيير والثلاثة الأخرى صارت تعمل. */
html:has(.th-doc) #layout-menu.menu.bg-menu-theme {
  background:
    radial-gradient(120% var(--th-side-wash-h) at 50% 0%, var(--th-side-wash), transparent 60%),
    linear-gradient(180deg, var(--th-side-top) 0%, var(--th-side-bottom) 100%) !important;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  /* الحافّة الخارجية للسبيدر: نتركها للقاعدة الأمّ في ‎docs-theme.css:41‎
     (‎border-inline-start: 1px solid var(--glass-border)‎) كي يتوحّد شكلها
     مع صفحة محتوى المعلم (خيط زجاجي دقيق يفصل السبيدر عن حافة الشاشة).
     المشكلة: القسم 8-ت2 على ‎html.docs-page:has(.th-doc)‎ يُعيد تعريف
     ‎--glass-border‎ إلى داكن لأجل النوافذ والحقول (‎.th-glass-modal .form-control‎…)،
     وقيمته الداكنة تسرَّبت إلى حافة السبيدر فأذابتها. نصحّحها هنا على
     العنصر نفسه فقط، بلا لمس القاعدة الأمّ. */
  --glass-border: rgba(255, 255, 255, .55);
  box-shadow: var(--th-side-shadow);
  --dt-text:   var(--th-side-fg);
  --dt-text-2: var(--th-side-ico);
}

/* الوضع الداكن الكلّي وثيم Semi Dark: خيط أبيض أخفّ يطابق تعريف
   ‎docs-theme.css:24/49‎ للصفحات الأخرى — كي تتّسق الحافة الخارجية للسبيدر
   بين المستند وصفحة المحتوى في كل الأوضاع. */
html.dark-style:has(.th-doc) #layout-menu.menu.bg-menu-theme,
html[data-theme="theme-semi-dark"]:has(.th-doc) #layout-menu.menu.bg-menu-theme {
  --glass-border: rgba(255, 255, 255, .08);
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-inner > .menu-item {
  margin: 1px .4rem;
}

/* ‎margin/border-bottom‎: docs-theme.css سطر 90-92 يعطي الرابط هامشاً وخطاً
   سفلياً — مع هامش العنصر كانا يراكمان تباعداً رأسياً وجانبياً كبيراً؛
   نصفّر هامش الرابط كله فيبقى هامش البند المصدر الوحيد للإزاحة. */
html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-link {
  border-radius: 12px;
  padding-inline: .8rem;
  padding-block: .42rem;
  margin: 0;
  border-bottom: 0;
  overflow: hidden;
  color: var(--th-side-fg);
  transition: color .26s var(--th-ease),
              padding-inline-start .26s var(--th-ease);
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-item:not(.active) > .menu-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .20),
              rgba(227, 146, 47, .04) 70%,
              transparent);
  opacity: 0;
  transform: translateX(12%);
  transition: opacity .26s ease, transform .26s var(--th-ease);
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-item:not(.active) > .menu-link:hover {
  background: transparent;
  color: var(--th-side-fg-hover);
  padding-inline-start: 1.15rem;
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-item:not(.active) > .menu-link:hover::after {
  opacity: 1;
  transform: translateX(0);
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-link .menu-icon {
  inline-size: 28px;
  block-size: 28px;
  margin-inline-end: .55rem;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  font-size: .95rem;
  background: var(--th-side-ico-bg);
  transition: transform .26s var(--th-ease),
              background .26s ease, color .26s ease;
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-item:not(.active) > .menu-link:hover .menu-icon {
  transform: scale(1.08) rotate(-6deg);
  color: var(--th-side-ico-hover);
  background: var(--th-side-ico-hover-bg);
}

/* العنصر النشط — teacher-home.css سطر 130-139 يكتبه بـ!important */
html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-item.active > .menu-link {
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .34),
              rgba(227, 146, 47, .10) 72%,
              transparent) !important;
  color: var(--th-side-active-fg) !important;
  border-radius: 12px;
  /* يقهر ‎margin: 1px 6px !important‎ في قاعدة نشط th-teacher (نفس الوزن،
     وهذه لاحقة في الملف) — وإلّا انزاحت الحبة النشطة عن أخواتها 6px. */
  margin: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(227, 146, 47, .30) !important;
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-item.active > .menu-link .menu-icon {
  color: #FFFFFF !important;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 8px 18px -7px rgba(227, 146, 47, .70);
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-header {
  color: var(--th-side-header) !important;
}

/* زر «إضافة مقرر» — teacher-home.css سطر 152 يعطيه ‎margin: 6px !important‎؛
   هنا البند (‎.menu-item‎) يحمل الهامش الجانبي ‎.4rem‎ بنفسه، فيُصفَّر هامش
   الرابط الجانبي كي يحاذي أشقاءه (نفس الوزن والملف لاحق فيفوز). */
html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-link.text-success {
  margin-inline: 0 !important;
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-inner::-webkit-scrollbar {
  width: 6px;
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-inner::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: rgba(227, 146, 47, .35);
}

html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-inner::-webkit-scrollbar-track {
  background: transparent;
}


/* ---------- 11) التجاوب ---------- */
@media (max-width: 991.98px) {
  html:has(.th-doc) .th-topbar h5 .fw-bold { max-width: 240px; }
  html:has(.th-doc) .th-doc h6.unitOne { font-size: 1.06rem !important; gap: .65rem; }
  html:has(.th-doc) .th-doc h6.unitOne::before { inline-size: 40px; block-size: 40px; border-radius: 13px; }
}

@media (max-width: 575.98px) {
  html:has(.th-doc) .th-topbar { padding: .7rem .75rem; border-radius: 18px; }
  html:has(.th-doc) .th-topbar h5 { font-size: .95rem; }
  html:has(.th-doc) .th-topbar .th-search { inline-size: 100%; }

  html:has(.th-doc) .th-doc h6.unitOne { font-size: 1rem !important; margin-block: 1.5rem .7rem !important; }
  html:has(.th-doc) .th-doc h6.unitOne::before { inline-size: 36px; block-size: 36px; border-radius: 12px; font-size: .85rem; }

  html:has(.th-doc) .th-doc .th-fcard {
    padding-block: .8rem !important;
    padding-inline: 3.4rem .5rem !important;
  }
  html:has(.th-doc) .th-doc .th-fcard::before {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 13px;
    font-size: 1.2rem;
    inset-inline-start: .45rem;
  }
  html:has(.th-doc) .th-doc .th-fcard-topic { font-size: .88rem; }
  html:has(.th-doc) .th-doc .card-interactive > .d-flex > .btn-group { margin: .4rem .15rem 0 0 !important; }
}


/* ---------- 12) تفضيلات الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.th-doc) #thDocGrid > * { animation: none; }
  html:has(.th-doc) .th-doc .card-interactive,
  html:has(.th-doc) .th-doc .th-fcard::before,
  html:has(.th-doc) .th-doc .th-chip-f,
  html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-link,
  html:has(.th-doc) #layout-menu.menu.bg-menu-theme .menu-link .menu-icon {
    transition: none;
  }
  html:has(.th-doc) .th-doc .card-interactive:hover { transform: none; }
  html:has(.th-doc) .th-doc .th-chip-f:hover { transform: none; }
}


/* =============================================================================
   8-ت2 (تكملة). صفحة 24.html — إطار المحتوى   ✨
   -----------------------------------------------------------------------------
   القسم السابق عالج المكوّنات. هذا يعالج **الإطار**: content-wrapper وما
   بداخله، لأنه بقي على هيئة القالب.

   ⚠️ ثغرة: teacher-home.css سطر 7 يعطي ‎.th-wrap‎ خلفية بثلاث إشعاعات —
   نحاسية ‎#D46E2A‎ وزرقاء ‎#4EA8DE‎ وخوخية — فوق تدرّج ينتهي بأزرق ‎#eef3fa‎.
   فلوح المحتوى ظلّ أزرق-نحاسياً يناقض ذهب المشروع.

   ⛔ قيد مقصود بعد تجربة أولى أفسدت وسط الصفحة: **لا هندسة**.
   ممنوع هنا: هوامش سالبة · حشوة على ‎.row‎ · إزاحة ترتيب · تموضع مطلق
   خارج حدود أبيه. كل ما تحت هذا السطر لون وحدّ وظلّ وحشوة داخلية فقط —
   لا شيء يستطيع أن يزيح عنصراً عن مكانه أو يُركّبه فوق آخر.

   الفكرة: ثلاث درجات ورقية صريحة بدل سطحين أبيضين لا يتمايزان
       ① اللوح  (content-wrapper)  ورق دافئ منقّط + شفق ذهبي
       ② الورقة (th-wrap.th-doc)   صفحة تطفو بحواف 34px وتسطير خفيف
       ③ البطاقة                    بيضاء صافية ترتفع فوق الورقة
   ورأس كل مجموعة يصير شريطاً ذهبياً ناعماً بعرض الصفّ يفصل الفصول.
   ========================================================================== */

/* ---------- 13) ① اللوح ---------- */
/* ⚠️ ‎partials/top-stage.blade.php‎ يفرض ‎background: transparent !important‎ على
   ‎.content-wrapper‎ بخصوصية ‎light-style ×3‎ (0,4,1)، فلا يمكن ضبط لون اللوح من هنا.
   الوهج البرتقالي العلوي القوي يأتي من ‎.fc-stage‎ ذاته (طبقة زخرفية بعد <body>)،
   قيمُه ‎--fc-glow‎ تبدأ من ‎rgba(212,110,42,.28)‎ في الزاويتين — ‎$fcSoft=true‎
   يخفّضه إلى ‎opacity: .5‎ لكل لياوت المعلم. للتخفيف الإضافي على صفحة المستند
   وحدها راجع أسفلَ هذه الكتلة. الكتلة الأصلية مُبقاة بلا تعديل. */
html:has(.th-doc) .content-wrapper {
  background-color: #F2EADE;
  background-image:
    radial-gradient(920px 460px at 88% -6%, rgba(227, 146, 47, .17), transparent 62%),
    radial-gradient(rgba(35, 43, 36, .05) 1px, transparent 1px),
    linear-gradient(180deg, #FBF6EE 0%, #F2EADE 100%);
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: auto, 22px 22px, auto;
}

/* تخفيف الوهج العلوي على صفحة المستند وحدها — من ‎opacity: .5‎ الافتراضي
   (‎‎.fc-stage--soft‎‎ للياوت المعلم) إلى قيمة أخفّ، مع تمييز الثيمات الأربعة:
     · الافتراضي — وهج دافئ متوسط (.30)
     · مؤطّر    — الأنظف: الإطار سِمَته، فالوهج يخفت إلى (.16) والحبيبات تُقصى
     · شبه داكن — يُحوَّل نحو البرودة (hue-rotate + خفض) لموازنة السايدبار الكحلي
     · نحاسي   — سِمة الهوية: أدفأ وأقوى (.50) والوهج يصير عنواناً لا زخرفة
   القاعدة الجذعية (‎.28‎) تبقى للحالات التي لا تحمل ‎data-skin‎ محدَّداً. */
html:has(.th-doc) .fc-stage.fc-stage--soft,
html:has(.th-doc) .fc-stage { opacity: .28; }

/* النطاق ‎:is(.th-teacher, :has(.ph-menu), :has(.cvt-scope))‎ (لا ‎:has(.th-doc)‎)
   كي يشمل صفحتَي المحتوى والمستند معاً — فالوهج واحد خلف النافبار في اللياوت كله.

   ═══ لماذا ‎:is()‎ ولماذا هذه النطاقات تحديداً؟ ═══
   ثلاث بوّابات تغطّي كل اللياوتات التي تشترك في كسوة النافبار والوهج (وبعضها
   يشترك أيضاً في عقد ترميز المحتوى: ورقة ‎.th-wrap.th-doc‎، شبكة
   ‎.th-content-grid‎، بطاقة ‎.card-interactive‎، بلاطة ‎.th-tile-card‎):
     · ‎.th-teacher‎ على ‎<html>‎ — أربعة لياوتات: معلم · معلم مجاني · طالب مجاني · عينات.
     · ‎:has(.ph-menu)‎ — ملفّ الإنجاز ‎front-portfolio/portfolio/layouts/app.blade.php‎
       **لا يحمل ‎th-teacher‎**، وبوّابته المعتمدة هي صنف السبيدر ‎.ph-menu‎.
     · ‎:has(.cvt-scope)‎ — قوالب السيرة ‎/templates/{id}/file‎، ولا تحمل الصنفين معاً.
   القاعدة عند إضافة لياوت جديد: ابحث عن بوّابته في هذا الملف وأضفها إلى ‎:is()‎
   بدل تكرار الكتلة — وإلا بقي نافباره ‎#f8f7fa‎ مسطّحاً في الثيمات الأربعة.

   ولمَ لا نضيف ‎th-teacher‎ إلى لياوت ملفّ الإنجاز ببساطة؟ لأن كتلة السبيدر
   ‎html.th-teacher #layout-menu .menu-inner > .menu-item > .menu-link‎ وزنها
   ‎(1,4,1)‎ فتغلب كتلة هوية ملفّ الإنجاز ‎html:has(.ph-menu) #layout-menu.ph-menu
   .menu-link‎ ‎(1,3,1)‎ — فيضيع سبيدره الخاص. لذا نوسّع نطاق **قواعد المحتوى
   وحدها** ونترك السبيدر لكلّ هويّته.

   و‎:is()‎ تأخذ وزن أثقل وسائطها: ‎.th-teacher‎ = ‎(0,1,0)‎ و‎:has(.ph-menu)‎ =
   ‎(0,1,0)‎ ⇒ الوزن لم يتغيّر إطلاقاً عمّا كان، فلا سُلَّم أوزانٍ انقلب.
   ⚠️ قواعد السبيدر (‎--th-side-rule‎ وفواصل «مؤطّر») تبقى على ‎.th-teacher‎ وحدها
   عمداً — وبنود ملفّ الإنجاز لا تحمل ‎.border-bottom‎ أصلاً. */
html:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope))[data-skin^="theme-default"] .fc-stage { opacity: .30; filter: none; }
html:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope))[data-skin^="theme-bordered"] .fc-stage { opacity: .16; filter: saturate(.85); }
html:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope))[data-skin^="theme-semi-dark"] .fc-stage { opacity: .22; filter: hue-rotate(-24deg) saturate(.75); }
/* نحاسي: خُفّف من .50 بطلب المستخدم — يبقى الأدفأ والأقوى بين الأربعة،
   لكن بلا غسلة برتقالية تطغى على الأسطح الفاتحة تحته. */
html:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope))[data-skin^="theme-cmp"] .fc-stage { opacity: .38; filter: saturate(1.08); }


/* ═══ النافبار — سطحٌ يتنفّس مع الثيم بدل ‎#f8f7fa‎ المسطّح الموحّد ═══
   ‎core.css‎ يفرض ‎.bg-body { background: #f8f7fa !important }‎ فيتطابق الشريط
   في الثيمات الأربعة. نقلبه زجاجاً خفيفاً بتوكنات ‎--th-nav-*‎ لكل ثيم:
     · الافتراضي  — عاجي دافئ شبه شفاف بغسلة نحاسية خجولة وظل ناعم.
     · مؤطّر     — أبيض مصمت بلا ظل، والحدّ السفلي الصريح هو الفاصل (سِمَته).
     · شبه داكن  — زجاج بارد بميل كحلي يُجاوب سبيدره الغامق.
     · نحاسي    — زجاج بغسلة نحاسية أوضح وحدّ نحاسي وظل حارّ.
   الوضع الداكن غير مَلموس (الحارس ‎light-style‎) — كسوته الداكنة قائمة. */
html.light-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) {
  --th-nav-bg: rgba(255, 254, 251, .80);
  --th-nav-wash: linear-gradient(180deg, rgba(227, 146, 47, .06), transparent 78%);
  --th-nav-border: rgba(31, 46, 43, .08);
  --th-nav-shadow: 0 10px 26px -18px rgba(17, 28, 26, .22);
}
html.light-style[data-skin^="theme-bordered"]:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) {
  --th-nav-bg: #FFFFFF;
  --th-nav-wash: none;
  --th-nav-border: rgba(31, 46, 43, .18);
  --th-nav-shadow: none;
}
html.light-style[data-skin^="theme-semi-dark"]:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) {
  --th-nav-bg: rgba(250, 251, 254, .86);
  --th-nav-wash: linear-gradient(180deg, rgba(20, 32, 58, .06), transparent 78%);
  --th-nav-border: rgba(20, 32, 58, .14);
  --th-nav-shadow: 0 10px 26px -18px rgba(20, 32, 58, .30);
}
html.light-style[data-skin^="theme-cmp"]:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) {
  --th-nav-bg: rgba(255, 252, 247, .84);
  --th-nav-wash: linear-gradient(180deg, rgba(227, 146, 47, .08), transparent 80%);
  --th-nav-border: rgba(227, 146, 47, .24);
  --th-nav-shadow: 0 12px 28px -16px rgba(120, 60, 20, .26);
}

/* التطبيق: خصوصية (0,4,1) تكسب ‎.bg-body‎ (0,1,0) وقاعدة الحدّ في
   ‎teacher-home.css:47‎ (0,3,1). الشفافية + البلور يُمرّران وهج ‎.fc-stage‎
   خلف الشريط فيتلوّن كل ثيم بهويته من طبقة واحدة. */
html.light-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .layout-navbar.bg-body {
  background: var(--th-nav-bg) !important;
  background-image: var(--th-nav-wash) !important;
  border-bottom: 1px solid var(--th-nav-border) !important;
  box-shadow: var(--th-nav-shadow) !important;
  -webkit-backdrop-filter: blur(14px) saturate(170%);
          backdrop-filter: blur(14px) saturate(170%);
}


/* ═══ بطاقات ملفات المستند — سدّ فجوة الثيم الوحيدة المتبقية ═══
   البلاطات (البيت + المحتوى) مُثيَّمة أصلاً في ‎teacher-home.css:4194-4273‎
   بنفس اللغة (مؤطّر مسطّح ‎#dbdade‎ / شبه داكن إردوازي ‎36,39,69‎ / نحاسي
   ‎199,120,64‎) — لا نكرّرها. بطاقات ملفات المستند (‎.card-interactive‎)
   وترويسات الوحدات وحدها كانت خارج ذلك النظام؛ نُدخلها هنا بنفس الدرجات
   اللونية حرفياً كي تتكلّم الصفحات الثلاث لغةً واحدة.
   سطح/حدّ/ظل فقط — لا مساس بمقاس أو حركة. وحالة ‎is-downloaded‎ تُسوّى
   بالبطاقة العادية أسفلَ الكتلة (الشارة وحدها تدلّ عليها). */
html.light-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) {
  --th-fcard-bg: linear-gradient(135deg, #ffffff, #fffefd);
  --th-fcard-border: rgba(199, 120, 64, .28);
  --th-fcard-shadow: 0 20px 40px -30px rgba(35, 43, 36, .6);
  --th-fcard-border-hover: rgba(199, 120, 64, .44);
  --th-fcard-shadow-hover: 0 18px 42px rgba(16, 24, 40, .14);
}
html.light-style[data-skin^="theme-bordered"]:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) {
  --th-fcard-bg: #FFFFFF;
  --th-fcard-border: #dbdade;
  --th-fcard-shadow: none;
  --th-fcard-border-hover: rgba(212, 110, 42, .55);
  --th-fcard-shadow-hover: none;
}
html.light-style[data-skin^="theme-semi-dark"]:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) {
  --th-fcard-bg: linear-gradient(135deg, #FDFDFE, #F5F7FB);
  --th-fcard-border: rgba(36, 39, 69, .14);
  --th-fcard-shadow: 0 10px 26px rgba(36, 39, 69, .12);
  --th-fcard-border-hover: rgba(36, 39, 69, .34);
  --th-fcard-shadow-hover: 0 16px 34px rgba(36, 39, 69, .18);
}
html.light-style[data-skin^="theme-cmp"]:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) {
  --th-fcard-bg: linear-gradient(135deg, #fffefc, #fffbf5);
  --th-fcard-border: rgba(199, 120, 64, .30);
  --th-fcard-shadow: 0 10px 26px rgba(138, 74, 28, .09);
  --th-fcard-border-hover: rgba(199, 120, 64, .52);
  --th-fcard-shadow-hover: 0 16px 34px rgba(138, 74, 28, .16);
}

/* تخفيف أسطح النحاسي الكريمية — ‎teacher-home.css:4247‎ يعطي البلاطة
   ‎rgba(253,244,236,.52)‎ (بيج ملموس) بينما الافتراضي أبيض صافٍ. نرفعها نحو
   البياض قليلاً فيبقى الدفء إيحاءً لا صبغة. الهوية محفوظة: الحدّ النحاسي
   ‎.22‎ وقرص الأيقونة ‎.14‎ لا يُلمسان — هما حاملا الهوية لا السطح.
   خصوصيتنا (0,4,1) تكسب (0,3,1)، و‎!important‎ لازمة لأن الأصل يحملها. */
html.light-style[data-skin^="theme-cmp"]:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-tile-card,
html.light-style[data-skin^="theme-cmp"]:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-empty {
  background: linear-gradient(135deg, rgba(255, 254, 252, .74), rgba(254, 250, 245, .5)) !important;
}

/* التطبيق: الأساس في ‎teacher-home.css:4139‎ يحمل ‎!important‎ بنفس خصوصيتنا
   (0,4,1) — ترتيب التحميل يحسم لنا. الظلّ ‎!important‎ هنا يقتل ظلّ التحويم
   القديم (بلا وسم) فنعيد تعريفه بالتوكنات تحته. */
html.light-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-doc .card-interactive {
  background: var(--th-fcard-bg) !important;
  border-color: var(--th-fcard-border) !important;
  box-shadow: var(--th-fcard-shadow) !important;
}
html.light-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-doc .card-interactive:hover {
  border-color: var(--th-fcard-border-hover) !important;
  box-shadow: var(--th-fcard-shadow-hover) !important;
}

/* ترويسات الوحدات في المستند تتبع حدّ الثيم نفسه */
html.light-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-unit-head {
  border-color: var(--th-fcard-border);
}


/* ═══ البطاقة المحمَّلة: الشارة وحدها تدلّ عليها ═══
   كانت تُميَّز بأربعة فروق مجتمعة — خلفية خضراء متدرّجة (‎teacher-home.css:2968‎
   للشبكة و‎:2987‎ للقائمة)، وحلقة داخلية خضراء (‎:1574‎)، وحدّ أغمق ‎.34‎، وظلّ
   مختلف — وهو تكرارٌ لمعنًى تحمله شارة الصحّ ✓ وحدها.

   ولها عيبٌ أخطر كشفه القياس: قاعدة ‎teacher-home.css:4144‎ بخصوصية ‎(0,6,1)‎
   تُثبّت البطاقة المحمَّلة على أبيض الثيم الافتراضي في الثيمات الأربعة، فكانت
   تخرج عن الثيم كلّما نزّل المستخدم ملفاً. تسويتُها بالعادية تُصلح الأمرين معاً.

   الوزن: ‎(0,6,1)‎ يعادل ‎:4144‎ ويعلو ‎:2968/:2987‎ ‎(0,4,0)‎ — وترتيب التحميل
   يحسم التعادل لنا. الشارة ‎.div-saleh.is-downloaded::after‎ على العمود لا على
   البطاقة، فلا تمسّها هذه القواعد إطلاقاً. */
html.light-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-doc .div-saleh.is-downloaded .card-interactive,
html.light-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-view-list .div-saleh.is-downloaded .card-interactive {
  background: var(--th-fcard-bg) !important;
  border-color: var(--th-fcard-border) !important;
  box-shadow: var(--th-fcard-shadow) !important;
}
html.light-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-doc .div-saleh.is-downloaded .card-interactive:hover,
html.light-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-view-list .div-saleh.is-downloaded .card-interactive:hover {
  border-color: var(--th-fcard-border-hover) !important;
  box-shadow: var(--th-fcard-shadow-hover) !important;
}

/* الوضع الداكن: نفس التسوية — بتوكنات الداكن المعتمدة (‎--cc-surface‎/‎--cc-line‎)
   لا بقيم ‎teacher-home.css:879‎ القديمة. ذلك التدرّج المزرقّ
   (‎rgba(60,66,92,.66)‎) دهسه لاحقاً توحيدُ أسطح الداكن في القسم 16-ب، وبقيت
   البطاقةُ الخضراء وحدها تقرؤه بـ‎!important‎. فلو نسخناه هنا لصار المحمَّل
   مزرقّاً والعادي محايداً — وهو عين الفرق الذي جئنا نزيله. كشفه القياس. */
html.dark-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-doc .div-saleh.is-downloaded .card-interactive,
html.dark-style:is(.th-teacher,:has(.ph-menu),:has(.cvt-scope)) .th-view-list .div-saleh.is-downloaded .card-interactive {
  /* ‎#16181B/#2A2C31‎ حرفيّتان من كتلة توحيد أسطح الداكن (سطر 11452) — هي ما
     تقرؤه البطاقة العادية فعلاً، إذ تغلب ‎var(--cc-surface/--cc-line)‎ بـ‎!important‎.
     مطابقتها حرفياً هي الطريق الوحيد للتطابق التامّ. */
  background: #16181B !important;
  border-color: #2A2C31 !important;
  box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .6) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   هوية الثيمات الأربعة على صفحة المستند — صقلٌ يمنح كلَّ ثيمٍ سبباً ليُختار
   ─────────────────────────────────────────────────────────────────────────
   • الافتراضي  — نعومة وارتفاع: ظلّ منخفض دافئ، حدّ باهت شفاف.
   • مؤطّر     — كل شيء معرَّف بالخطّ: يذهب الظلّ، ويحضر الحدّ الرقيق،
                 وفواصل السبيدر تتوضّح (لكن الفاصل تحت آخر مقرر يُحذف كي لا
                 يبدو خيطاً معلَّقاً قبل زر إضافة مقرر).
   • شبه داكن  — التباين بالعمق: ظلّ كحلي هادئ يوازن حرارة الصفحة مع سبيدر
                 القمر الغامق فيبدو الجانبان من كوكب واحد لا كوكبين.
   • نحاسي    — سِمَة الهوية: طَوق نحاسي دقيق حول الورقة وظلّ حارّ لتشعّ
                 بذاتها لا بضوءها الشمالي.
   الاتفاق العام: خصائص السطح (الحدّ/الظلّ) للورقة وحدها لا لداخل الأقسام،
   وفواصل السبيدر عبر ‎--th-side-rule‎ كي تبقى الأربعة متزنة عبر الأدوات. */

/* --- الافتراضي: الأصل، لكن نصرّح بقيمه صراحةً كي لا يرث تعديلاً من أخيه.
   ⚠️ ‎!important‎ لازمة: ‎teacher-home.css‎ يفرض ‎border-color: rgba(var(--th-soft-brand-rgb),.055) !important‎
   على ‎html.light-style.docs-page .th-doc.th-wrap‎، فلا سبيل لنا سواه.

   ⚠️⚠️ حارس ‎light-style‎ على الأربعة أدناه **لازم لا تجميلي**: في الوضع الداكن
   تصير ‎data-skin‎ = ‎theme-default-dark‎، و‎^=‎ يطابقها فتنطبق هذه الكتل. ولأنها
   ‎(0,4,1)‎ بـ‎!important‎ فهي تغلب قواعد ‎teacher-home.css‎ الداكنة
   (‎html.dark-style .th-doc.th-wrap‎ عند ‎(0,2,1)‎ بـ‎!important‎، ظلال ‎rgba(0,0,0,.18)‎)
   فيتسرّب ‎inset 0 2px 0 rgba(255,255,255,.9)‎ خطاً أبيض بعرض الورقة على سطح
   أسود. حدث فعلاً وكشفه القياس (2026-08-20) — لا تنزع الحارس. */
html.light-style:has(.th-doc)[data-skin^="theme-default"] .th-page .th-wrap.th-doc {
  border-color: rgba(35, 43, 36, .07) !important;
  box-shadow: 0 44px 92px -52px rgba(35, 43, 36, .55),
              inset 0 2px 0 rgba(255, 255, 255, .9) !important;
}

/* --- مؤطّر: الحدّ سِمَته، فلا ظلّ عائم ولا حبيبات ناعمة ---
   الخصوصية ‎.light-style‎ مضافةٌ لتفوّق قاعدة الجذع في السطر 1489 التي تحمل
   ‎html.light-style[data-skin^="theme-default"|"theme-bordered"]‎ = (0,4,1). */
html.light-style[data-skin^="theme-bordered"].th-teacher {
  --th-side-rule: rgba(31, 46, 43, .16);
}
html.dark-style[data-skin^="theme-bordered"].th-teacher {
  --th-side-rule: rgba(255, 255, 255, .12);
}

/* استعادة الفاصل تحت بنود السبيدر — ‎docs-theme.css:88‎ يفرض
   ‎#layout-menu .menu-item.border-bottom { border-bottom: 0 !important }‎
   وقاعدتنا في ‎th-teacher‎ تفرغ حدّ الرابط أيضاً؛ فنعيد الحدّ للمؤطّر وحده
   بخيط بسمك 1px يستقي لونه من ‎--th-side-rule‎. */
html.light-style[data-skin^="theme-bordered"].th-teacher
  #layout-menu .menu-inner > .menu-item.border-bottom,
html.dark-style[data-skin^="theme-bordered"].th-teacher
  #layout-menu .menu-inner > .menu-item.border-bottom {
  border-bottom: 1px solid var(--th-side-rule) !important;
  padding-bottom: 2px;
}

/* أزل الفاصل من آخر مقرر — حالتان بحسب اللياوت، واللياوتات الأربعة
   (معلم · معلم مجاني · طالب مجاني · عينات) تشترك في ‎items.blade.php‎ الذي
   يضع ‎.border-bottom.border-1‎ على كل مقرر:
     · لياوت المعلم المدفوع: يلي آخرَ مقرر زرُّ «إضافة مقرر» ‎.menu-item.mt-2‎.
     · الثلاثة الأخرى: حلقةُ المقررات آخرُ ما في ‎<ul>‎، فآخر بند ‎:last-child‎.
   بلا الشرطين يتدلّى خيط أفقي في فراغ أسفل القائمة لا صلة له بشيء. */
html[data-skin^="theme-bordered"].th-teacher
  #layout-menu .menu-inner > .menu-item.border-bottom:has(+ .menu-item.mt-2),
html[data-skin^="theme-bordered"].th-teacher
  #layout-menu .menu-inner > .menu-item.border-bottom:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0;
}

html.light-style:has(.th-doc)[data-skin^="theme-bordered"] .th-page .th-wrap.th-doc {
  border-color: rgba(35, 43, 36, .18) !important;
  border-width: 1.5px !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85) !important;
}

/* --- شبه داكن: ظلٌّ كحلي هادئ يجسّر الحرارة والبرودة --- */
html.light-style:has(.th-doc)[data-skin^="theme-semi-dark"] .th-page .th-wrap.th-doc {
  border-color: rgba(20, 32, 58, .10) !important;
  box-shadow: 0 36px 78px -48px rgba(20, 32, 58, .45),
              inset 0 2px 0 rgba(255, 255, 255, .85) !important;
}

/* --- نحاسي: طوق حارّ صريح وظلّ عريق --- */
html.light-style:has(.th-doc)[data-skin^="theme-cmp"] .th-page .th-wrap.th-doc {
  border-color: rgba(227, 146, 47, .22) !important;
  border-width: 1.5px !important;
  box-shadow: 0 40px 84px -46px rgba(120, 60, 20, .55),
              inset 0 2px 0 rgba(255, 246, 232, .95) !important;
}

/* لسان الملفّ ‎::before‎ يتّبع لون الثيم: افتراضي ذهبي، نحاسي أعمق، مؤطّر أهدأ */
html:has(.th-doc)[data-skin^="theme-bordered"] .th-page .th-wrap.th-doc::before {
  background: linear-gradient(140deg, #D5852B, #B96C1E);
  box-shadow: 0 -6px 14px -10px rgba(197, 110, 26, .8);
}
html:has(.th-doc)[data-skin^="theme-cmp"] .th-page .th-wrap.th-doc::before {
  background: linear-gradient(140deg, #F0A03B, #C9741C);
  box-shadow: 0 -10px 22px -10px rgba(240, 160, 59, 1);
}

/* الصفحة container-fluid فتمتدّ بلا حدّ على الشاشات العريضة */
html:has(.th-doc) .th-page {
  max-width: 1280px;
  padding-bottom: 2.6rem;
}

html:has(.th-doc) .th-page > .pt-1.sticky {
  padding-top: .5rem !important;
}


/* ---------- 14) ② الورقة ---------- */
/* التباعد الرأسي حول «الورقة» — كان 2.1rem/1.7rem/2rem قبل الطلب، خُفّض
   بلا لمس داخل الأقسام (‎#thDocGrid‎ وبطاقات ‎.th-fcard‎ وترويسات ‎h6.unitOne‎).
   لسان الملفّ ‎::before‎ يبقى بأمان: هو عند ‎top: -17px‎ فيلزم أن يتجاوز
   ‎margin-top‎ = 17px، ونحن نُبقيه 19.2px. */
html:has(.th-doc) .th-page .th-wrap.th-doc {
  position: relative;
  margin-top: 1.2rem !important;
  padding: 1.05rem 1.15rem 1.4rem !important;
  border-radius: 34px;
  border: 1px solid rgba(35, 43, 36, .07);
  background-color: #FCF8F1;
  background-image:
    linear-gradient(180deg, rgba(227, 146, 47, .10), transparent 190px),
    repeating-linear-gradient(180deg,
      rgba(35, 43, 36, .026) 0 1px,
      transparent 1px 32px);
  box-shadow: 0 44px 92px -52px rgba(35, 43, 36, .55),
              inset 0 2px 0 rgba(255, 255, 255, .9);
}

/* لسان الملفّ على الحافّة العليا — فوق الورقة تماماً فلا يغطّي شيئاً */
html:has(.th-doc) .th-page .th-wrap.th-doc::before {
  content: "";
  position: absolute;
  top: -17px;
  inset-inline-start: 46px;
  inline-size: 138px;
  block-size: 18px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 -8px 18px -10px rgba(227, 146, 47, .95);
  pointer-events: none;
}

/* ③ البطاقة تبيضّ صافيةً فوق الورقة الدافئة */
html:has(.th-doc) .th-doc .card-interactive {
  background: #FFFFFF;
  box-shadow: 0 20px 40px -30px rgba(35, 43, 36, .6);
}


/* ---------- 15) رأس المجموعة ← شريط فاصل ---------- */
/* حشوة وخلفية وحدّ فقط — لا إزاحة. الرأس يبقى في مكانه الطبيعي. */
html:has(.th-doc) .th-doc h6.unitOne {
  padding-block: .5rem !important;
  padding-inline: .75rem !important;
  border-radius: 18px;
  background: linear-gradient(270deg,
              rgba(227, 146, 47, .16),
              rgba(227, 146, 47, .04) 58%,
              transparent);
  box-shadow: inset 0 0 0 1px rgba(227, 146, 47, .16);
}

/* حلقة فاتحة حول قرص الرقم تفصله عن الشريط */
html:has(.th-doc) .th-doc h6.unitOne::before {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .75),
              0 13px 26px -13px rgba(227, 146, 47, .95);
}

/* شريط الفلاتر يبقى داخل إيقاع الورقة */
html:has(.th-doc) .th-page .th-filters.th-filters-bottom {
  margin: .7rem 0 0 !important;
}


/* ---------- 16) تجاوب الإطار ---------- */
@media (max-width: 991.98px) {
  html:has(.th-doc) .th-page .th-wrap.th-doc {
    margin-top: 1.1rem !important;
    padding: .9rem .9rem 1.15rem !important;
    border-radius: 28px;
  }
}

@media (max-width: 575.98px) {
  html:has(.th-doc) .th-page { padding-bottom: 1.4rem; }
  html:has(.th-doc) .th-page > .pt-1.sticky { padding-top: .4rem !important; }
  html:has(.th-doc) .th-page .th-wrap.th-doc {
    margin-top: 1rem !important;
    padding: .75rem .6rem .95rem !important;
    border-radius: 24px;
  }
  html:has(.th-doc) .th-page .th-wrap.th-doc::before {
    top: -14px;
    inset-inline-start: 28px;
    inline-size: 104px;
    block-size: 15px;
  }
  html:has(.th-doc) .th-doc h6.unitOne {
    padding-inline: .6rem !important;
    border-radius: 15px;
  }
}


/* =============================================================================
   8-ت2 (تكملة ٢). صفحة 24.html — رؤوس المجموعات الحقيقية (أكورديون)   ✨
   -----------------------------------------------------------------------------
   ⚠️ اكتشاف غيّر الصورة كلّها — العنصر الذي كنّا نصمّمه **غير موجود** وقت
   التشغيل. ملفّ ‎assets/js/document-extras.js‎ سطر 156 يفعل:

       u.className = 'th-unit-head';      ← يمسح ‎unitOne‎ ومعها p-0/m-0/pt-4
       u.innerHTML = '<span class="th-u-name">…</span>' +
                     '<span class="th-u-side">' +
                       '<span class="th-u-count">4</span>' +
                       '<i class="ti ti-chevron-down th-u-chev"></i>' +
                     '</span>';

   فالرأس يتحوّل إلى **زرّ أكورديون**: اسم يميناً، وعدّاد وسهم يساراً، وفتح
   واحدة يطوي البقية، والبطاقات المطويّة تأخذ ‎.th-unit-hidden‎ (display:none).

   وهذا يفسّر عطل التجربة الأولى تماماً: أعطينا ‎.row‎ حشوة 60px وأعطينا
   ‎h6.unitOne‎ هامشاً سالباً يقابلها — لكن الكلاس يُمسح قبل أن يُطبَّق، فبقيت
   الحشوة بلا مقابلها وانزاح المحتوى كلّه. لم يكن الخطأ في الحساب بل في
   افتراض أن ما في الملفّ هو ما في الصفحة.

   ما في ‎h6.unitOne‎ من القسمين السابقين يبقى كاحتياطٍ لما قبل عمل جافاسكربت
   (ولحال تعطّله)، وكل ما هنا يستهدف ‎.th-unit-head‎ — العنصر الفعلي.

   التصميم: صفّ ورقيّ أبيض يحمل قرص رقم ذهبياً (عدّاد CSS) واسم المجموعة
   وحبّة عدد وسهماً في قرص. وعند الفتح **ينقلب الصفّ كلّه ذهبياً** بنصّ أبيض
   — فالمجموعة المفتوحة تُرى من طرف الصفحة، وهي واحدة لا غير (أكورديون).

   ⛔ القيد قائم: لا هوامش سالبة ولا تموضع مطلق.
   ========================================================================== */

/* ---------- 17) الصفّ ---------- */
html:has(.th-doc) .th-doc .th-unit-head {
  counter-increment: thunit;
  gap: .85rem;
  margin: .7rem calc(var(--bs-gutter-x) * .5) .6rem !important;
  padding: .78rem .95rem !important;
  border-radius: 18px;
  border: 1px solid rgba(35, 43, 36, .08);
  background: #FFFFFF;
  box-shadow: 0 14px 30px -26px rgba(35, 43, 36, .55);
  font-size: 1rem;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  transition: transform .24s var(--th-ease), box-shadow .24s ease,
              border-color .24s ease, background .24s ease;
}

html:has(.th-doc) .th-doc .th-unit-head:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 146, 47, .4);
  box-shadow: 0 24px 44px -26px rgba(227, 146, 47, .6);
}

/* أوّل صفّ لا يحتاج هامشاً علوياً مضاعفاً فوق حشوة الورقة */
html:has(.th-doc) .th-doc .th-unit-head:first-child {
  margin-block-start: .1rem !important;
}


/* ---------- 18) قرص الرقم ---------- */
/* ‎::before‎ محجوز في teacher-home.css سطر 1934 للمعة تمرير شفّافة —
   نعيد استخدامه: من طبقة مطلقة شفّافة إلى عنصر فليكس مرئي.
   الخصوصية: قاعدتنا (0,3,2) وقاعدة اللمعة عند المرور (0,2,1) فلا تعيدها. */
html:has(.th-doc) .th-doc .th-unit-head::before {
  content: counter(thunit, decimal-leading-zero);
  position: static;
  inset: auto;
  opacity: 1;
  flex: 0 0 auto;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-family: var(--f-display);
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: #FFFFFF;
  background: linear-gradient(140deg, #E3922F, #C9741C);
  box-shadow: 0 11px 22px -12px rgba(227, 146, 47, .95);
  transition: transform .3s var(--th-ease), background .24s ease,
              color .24s ease, box-shadow .24s ease;
}

html:has(.th-doc) .th-doc .th-unit-head:hover::before {
  transform: rotate(-6deg) scale(1.06);
}


/* ---------- 19) الاسم · العدّاد · السهم ---------- */
html:has(.th-doc) .th-doc .th-unit-head .th-u-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--th-ink);
  transition: color .24s ease;
}

html:has(.th-doc) .th-doc .th-unit-head .th-u-side {
  gap: .5rem;
}

html:has(.th-doc) .th-doc .th-unit-head .th-u-count {
  min-width: 32px;
  height: 26px;
  padding: 0 .6rem;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .78rem;
  font-weight: 900;
  color: var(--th-gold-deep);
  background: rgba(227, 146, 47, .12);
  border: 1px solid rgba(227, 146, 47, .28);
  transition: color .24s ease, background .24s ease, border-color .24s ease;
}

html:has(.th-doc) .th-doc .th-unit-head .th-u-chev {
  inline-size: 30px;
  block-size: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.02rem;
  color: var(--th-ink-2);
  background: rgba(35, 43, 36, .05);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1),
              color .24s ease, background .24s ease;
}


/* ---------- 20) المجموعة المفتوحة: الصفّ ينقلب ذهبياً ---------- */
/* teacher-home.css سطر 1292 يعطي هذه الحالة ‎animation: th-head-glow both‎،
   والحركة تتقدّم على الإعلانات العادية فتُعيد ظلّه النحاسي فوق ظلّنا.
   نستبدل الحركة بأخرى ذهبية بدل تعطيلها فنحتفظ بنبضة الفتح. */
@keyframes th24-unit-open {
  0%   { box-shadow: 0 0 0 0 rgba(227, 146, 47, .5); }
  100% { box-shadow: 0 22px 40px -20px rgba(227, 146, 47, .85); }
}

html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed) {
  animation: th24-unit-open .5s ease both;
  border-color: transparent;
  background: linear-gradient(270deg, #E3922F 0%, #C9741C 88%);
}

html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed):hover {
  transform: translateY(-2px);
  border-color: transparent;
}

html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed) .th-u-name {
  color: #FFFFFF;
}

html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed)::before {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed) .th-u-count {
  color: var(--pal-gold-deep);
  background: #FFFFFF;
  border-color: transparent;
}

html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed) .th-u-chev {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .2);
}

/* أزرار التحميل/الضغط على الرأس المفتوح (البرتقالي) — تهدئة اللون:
   النسخة الأساس (teacher-home سطر 1218/1229) تُبقي زرّ التحميل بخلفية برتقالية
   باهتة وأيقونة برتقالية، وزرّ الضغط بأزرق — فوق شريط برتقالي مصمت يصير
   الأول «برتقالياً على برتقالي» (تباين منخفض ولون زائد) والثاني يشذّ لوناً.
   نوحّدهما مع العدّاد والسهم: زجاج أبيض شفّاف + أيقونة بيضاء — فيُقرآن بوضوح
   ويهدأ البرتقال. يسري على الثيمات الأربعة والوضع الداكن لأن الرأس المفتوح
   برتقاليّ في كلّها (قاعدة الفتح خصوصيتها 0,4,1 تتقدّم على قلب الوضع الداكن). */
html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed) .th-u-dl,
html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed) .th-u-zip {
  background: rgba(255, 255, 255, .18);
  color: #FFFFFF;
}
html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed) .th-u-dl:hover,
html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed) .th-u-zip:hover {
  background: rgba(255, 255, 255, .30);
  color: #FFFFFF;
}


/* ---------- 20-ب) شريط تنقّل الوحدات — إزالة الحركة والزجاجية (طلب المستخدم) ----------
   1) النقطة النابضة تحت الشريحة النشطة: ‎thUnitDotKF‎ (teacher-home سطر 1890)
      حركة لا نهائية تلفت النظر باستمرار — نوقفها ونُبقي النقطة ساكنةً كمؤشّر.
   2) لمعة الحرير العابرة على الشريحة عند المرور: ‎::after‎ (teacher-home سطر 1875)
      — نخفيها كلياً.
   3) الخلفية الزجاجية عند الالتصاق ‎.is-stuck‎ (teacher-home سطر 3125/3136):
      ‎backdrop-filter: blur‎ + سطح شبه شفّاف — نستبدلها بسطح مصمت هادئ بلا
      ضبابية، واعٍ للثيم (ورقيّ فاتحاً · داكن ليلاً). خصوصيتنا تتقدّم و‎!important‎
      يكسر نظيره في ملف القالب. */
html:has(.th-doc) .th-units-nav .th-unit-chip.is-active::before {
  animation: none;
}
html:has(.th-doc) .th-units-nav .th-unit-chip::after {
  display: none;
}
html:has(.th-doc) .th-units-nav.is-stuck {
  background: #FBF6EE !important;
  border-color: rgba(227, 146, 47, .18) !important;
  box-shadow: 0 6px 16px -8px rgba(35, 43, 36, .28) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
html.dark-style:has(.th-doc) .th-units-nav.is-stuck {
  background: var(--cc-surface) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5) !important;
}


/* ---------- 20-ج) إعادة تصميم شرائح شريط الوحدات (طلب المستخدم) ----------
   النسخة الأساس (teacher-home v11 سطر 2185) شريحة كريميّة وعدّاد «عائم» فوق
   الزاوية بحلقة بيضاء وظلّ — يقرأ كشارة تنبيه لا كعدّاد ملفّات، ويصير ضجيجاً
   بصرياً عند اصطفاف سبع شرائح. نُعيد تصميمها إلى «تبويبة فهرس» هادئة:

     · سطح ورقيّ دافئ بحدّ نحاسي رفيع وخطّ العرض (Tajawal) كبقيّة العناوين.
     · العدّاد يعود عنصراً **داخلياً** في ذيل الشريحة (حبّة نحاسية ناعمة) بدل
       العائم — يُقرأ [مرجعية] [الاسم] [العدد] بلا تراكب ولا حلقة.
     · الحالية (scroll-spy) وحدها تمتلئ بالتدرّج النحاسي — «أنت هنا» واضحة،
       والتمرير يرفع الشريحة رفعاً خفيفاً دون أن يبتلع لون الحالة.
   واعية للثيمات الأربعة والوضع الداكن. خصوصيتنا (0,4,1) تتقدّم على قواعد
   القالب (0,2,0) بلا !important. */

/* المرجعية (bookmark) + الخطّ */
html:has(.th-doc) .th-units-nav .th-unit-chip {
  font-family: var(--f-display);
  gap: .4rem;
  padding: .34rem .5rem .34rem .7rem;
  border-radius: 999px;
  color: #7A4A1E;
  background: linear-gradient(180deg, #FFFFFF, #FFF7EC);
  border: 1px solid rgba(227, 146, 47, .24);
  box-shadow: 0 4px 10px -8px rgba(35, 43, 36, .5);
  transition: transform .2s var(--th-ease), background .2s ease,
              border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
html:has(.th-doc) .th-units-nav .th-unit-chip > i {
  color: #C9741C;
  transition: color .2s ease;
}

/* العدّاد ← حبّة داخلية في الذيل (إلغاء التعويم والحلقة) */
html:has(.th-doc) .th-units-nav .th-unit-chip .th-chip-count {
  position: static;
  inset: auto;
  top: auto;
  inset-inline-start: auto;
  min-width: 20px;
  height: 19px;
  padding: 0 .42rem;
  border-radius: 999px;
  background: rgba(227, 146, 47, .15);
  color: #A2570F;
  border: 1px solid rgba(227, 146, 47, .22);
  box-shadow: none;
  font-family: var(--f-display);
  font-size: .68rem;
  font-weight: 900;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* تمرير (غير الحالية) — دفء ورفعة خفيفة، بلا امتلاء كامل */
html:has(.th-doc) .th-units-nav .th-unit-chip:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #FFFFFF, #FFEED7);
  border-color: rgba(227, 146, 47, .5);
  box-shadow: 0 8px 16px -10px rgba(227, 146, 47, .7);
  color: #7A4A1E;
}
html:has(.th-doc) .th-units-nav .th-unit-chip:hover .th-chip-count {
  background: rgba(227, 146, 47, .22);
}

/* الشريحة الحالية (scroll-spy) — امتلاء نحاسيّ + عدّاد أبيض شفّاف */
html:has(.th-doc) .th-units-nav .th-unit-chip.is-active {
  background: linear-gradient(140deg, #E3922F 0%, #C9741C 92%);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 9px 20px -9px rgba(201, 116, 28, .75);
}
html:has(.th-doc) .th-units-nav .th-unit-chip.is-active > i { color: #FFFFFF; }
html:has(.th-doc) .th-units-nav .th-unit-chip.is-active .th-chip-count {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(255, 255, 255, .35);
  color: #FFFFFF;
}
/* النقطة النابضة القديمة تحت الحالية لم تعُد لازمة بعد الامتلاء */
html:has(.th-doc) .th-units-nav .th-unit-chip.is-active::before { display: none; }

/* ---------- الوضع الداكن للشرائح ---------- */
html.dark-style:has(.th-doc) .th-units-nav .th-unit-chip {
  color: var(--cc-ink-2);
  background: #1C1F23;
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 4px 10px -8px rgba(0, 0, 0, .6);
}
html.dark-style:has(.th-doc) .th-units-nav .th-unit-chip > i { color: #F0A860; }
html.dark-style:has(.th-doc) .th-units-nav .th-unit-chip .th-chip-count {
  background: rgba(240, 168, 96, .16);
  border-color: rgba(240, 168, 96, .28);
  color: #F0A860;
}
html.dark-style:has(.th-doc) .th-units-nav .th-unit-chip:hover {
  background: #24282E;
  border-color: rgba(240, 168, 96, .5);
  box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .8);
  color: var(--cc-ink);
}
/* الحالية داكناً — نفس الامتلاء النحاسي (يُقرأ على الأسود). نُصرّح بالخلفية
   هنا لأن قاعدة الوضع الداكن العادية بنفس الخصوصية (0,4,1) وتليها ترتيباً،
   فتدهس تدرّج الحالة الوارد من قاعدة الوضع الفاتح لو تركناها ضمنيةً. */
html.dark-style:has(.th-doc) .th-units-nav .th-unit-chip.is-active {
  background: linear-gradient(140deg, #E3922F 0%, #C9741C 92%);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 9px 20px -9px rgba(0, 0, 0, .7);
}
html.dark-style:has(.th-doc) .th-units-nav .th-unit-chip.is-active .th-chip-count {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .32);
  color: #FFFFFF;
}


/* ---------- 21) تجاوب ---------- */
@media (max-width: 575.98px) {
  html:has(.th-doc) .th-doc .th-unit-head {
    gap: .6rem;
    padding: .65rem .7rem !important;
    border-radius: 15px;
  }
  html:has(.th-doc) .th-doc .th-unit-head::before {
    inline-size: 34px;
    block-size: 34px;
    border-radius: 12px;
    font-size: .76rem;
  }
  html:has(.th-doc) .th-doc .th-unit-head .th-u-name { font-size: .92rem; }
  html:has(.th-doc) .th-doc .th-unit-head .th-u-chev { inline-size: 26px; block-size: 26px; }
}


/* ---------- 22) تفضيلات الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.th-doc) .th-doc .th-unit-head,
  html:has(.th-doc) .th-doc .th-unit-head::before,
  html:has(.th-doc) .th-doc .th-unit-head .th-u-chev {
    transition: none;
  }
  html:has(.th-doc) .th-doc .th-unit-head:not(.collapsed) { animation: none; }
  html:has(.th-doc) .th-doc .th-unit-head:hover { transform: none; }
  html:has(.th-doc) .th-doc .th-unit-head:hover::before { transform: none; }
}


/* =============================================================================
   8-ص2. إنفاذ الخطّين — كتلة مشتركة أخيرة   ✅ مُفعّلة
   =============================================================================
   لماذا؟ خطّ 'Cairo' مفروض من ثلاثة مواضع في القالب:

       premium-theme.css سطر 74   --bs-body-font-family: 'Cairo', …
       premium-theme.css سطر 90-94  h1–h6 · .btn · .card · .badge · .nav-link
                                    · .form-control · .dropdown-item
       كتلة <style> داخل رأس كل صفحة   body, html { font-family: 'Cairo', … }

   قواعدنا في أقسام الصفحات أعلى خصوصية وتفوز نظرياً، لكن أي مفاجأة في
   الترتيب أو أي ملف يُحمَّل داخل <body> بعدنا قد يقلب النتيجة. هذه الكتلة
   تحسم الأمر في مكان واحد بـ !important، ولا تسري إلا على الصفحات التي
   عرّفنا لها المتغيّرين — فبقية الصفحات لا تتأثر.

   ملاحظة: إن ظهرت العناوين بخط مختلف عن Tajawal رغم هذه الكتلة، فالسبب
   أن الخط لم يُحمَّل (الـ@import في السطر 8 يحتاج اتصالاً بـ Google Fonts)،
   وعندها يسقط المتصفح إلى Rubik ثم sans-serif — لا إلى Cairo.
   ========================================================================== */

html:has(:is(
  .h2-body, .svch, .svc58, .th-tile-card, .pl-wrap, .hp-faq, .MsoNormal,
  .card.shadow-lg, .ph-benefit, .pf-create-hero, .pf-create-card, .ph-scope,
  .pp-hero, .list-group-flush, .contact-img-box, .lh-hero, .cp-cinema,
  .lp-hero, .video-container, .week-card, .cvt-scope, .th-doc
)) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--f-display) !important;
}

html:has(:is(
  .h2-body, .svch, .svc58, .th-tile-card, .pl-wrap, .hp-faq, .MsoNormal,
  .card.shadow-lg, .ph-benefit, .pf-create-hero, .pf-create-card, .ph-scope,
  .pp-hero, .list-group-flush, .contact-img-box, .lh-hero, .cp-cinema,
  .lp-hero, .video-container, .week-card, .cvt-scope, .th-doc
)) :is(
  .page-title, .cp-title, .lh-title, .lp-title, .svc58-title, .svch-title,
  .ph-title, .pf-create-hero h3, .sec-head h2, .lh-sec-title, .cp-chapter-name,
  .card-title, .accordion-button, .btn, .nav-link, .menu-link, .badge,
  .fw-bold, .fw-bolder, .fw-semibold
) {
  font-family: var(--f-display) !important;
}

html:has(:is(
  .h2-body, .svch, .svc58, .th-tile-card, .pl-wrap, .hp-faq, .MsoNormal,
  .card.shadow-lg, .ph-benefit, .pf-create-hero, .pf-create-card, .ph-scope,
  .pp-hero, .list-group-flush, .contact-img-box, .lh-hero, .cp-cinema,
  .lp-hero, .video-container, .week-card, .cvt-scope, .th-doc
)) :is(body, p, li, td, label, input, textarea, select, .form-control) {
  font-family: var(--f-body) !important;
}

/* ملاحظة: خطوط الأيقونات (tabler-icons · FontAwesome) لا تحتاج استثناءً —   ملفاتها تعرّفها بـ !important على ‎.ti‎ و‎.fa‎ فتتغلّب على كل ما سبق. */

/* =============================================================================
   9. قواعد إضافية عند الحاجة
   ========================================================================== */

/* .pricing-plans .card {

} */


/* =============================================================================
   10. ملف الإنجاز (portfolio*.html)
   ========================================================================== */

/* .portfolio-card,
.portfolio-item {

} */


/* =============================================================================
   11. الرخصة المهنية (computer-license*.html)
   ========================================================================== */

/* لا شيء بعد */


/* =============================================================================
   12. الفوتر
   ========================================================================== */

/* .landing-footer,
.footer {

} */


/* =============================================================================
   13. النوافذ والتنبيهات (modal / sweetalert / toastr)
   ========================================================================== */

/* .modal-content {
  border-radius: var(--cmp-radius-lg);
} */

/* .swal2-popup {
  border-radius: var(--cmp-radius-lg);
} */


/* =============================================================================
   14. الوضع الليلي (dark-style)
   -----------------------------------------------------------------------------
   القالب يبدّل الوضع عبر كلاس على <html>: light-style أو dark-style.
   ========================================================================== */

/* html.dark-style body {

} */


/* =============================================================================
   15. الاستجابة (Responsive)
   -----------------------------------------------------------------------------
   نقاط توقّف Bootstrap 5:  576 / 768 / 992 / 1200 / 1400
   ========================================================================== */

/* @media (max-width: 991.98px) {

} */

/* @media (max-width: 575.98px) {

} */


/* =============================================================================
   16. الطباعة (Print)
   ========================================================================== */

/* @media print {

} */


/* =============================================================================
   16-ب. الوضع الداكن — سوادٌ محايد على مستوى الموقع
   -----------------------------------------------------------------------------
   الوضع الداكن الأصلي في Vuexy كحليّ لا أسود: قِيس ‎--bs-body-bg: #25293c‎
   وحدّه ‎#434968‎ ونصّه ‎#b6bee3‎ — كلها تميل للأزرق بمقدار 23–30 درجة على
   محور (B−R). فبدا السبيدر الأسود غريباً وسط صفحة زرقاء.

   هذه الطبقة تنزع الزرقة وتُبقي التدرّج: السبيدر أعمق نقطة، ثم الصفحة، ثم
   الأسطح المرتفعة (بطاقات ونافبار ونوافذ) أفتح درجةً لتُقرأ فوقها.

        السبيدر   #0A0B0C → #050506     (القسم أعلاه)
        الصفحة    #0E0F11
        مرتفع     #16181B
        حدّ        #2A2C31              (كان #434968 كحلياً)

   لماذا هنا لا في premium-theme.css؟ لأن ذاك الملف غير محمَّل على صفحات
   المعلّم والمستندات وملف الإنجاز إطلاقاً، وهذا الملف محمَّل على الجميع —
   فهو الموضع الوحيد الذي يُغطّي «الدارك كله».

   ملاحظة: توكنات Bootstrap تكفي لكل ما يقرأها بـvar()، لكن core-dark.css
   يكتب بعض الأسطح بقيم صريحة (النافبار مثلاً ‎rgb(37,41,60)‎ لا var)، فلا
   مفرّ من ذكرها بالاسم أدناه. القائمة مبنية على قياس فعليّ لا على تخمين.
   ========================================================================== */

html.dark-style {
  /* سلّم الأحبار والأسطح الداكن — مرجع واحد تشير إليه كل الكتل أدناه.
     إضافة نطاق جديد لاحقاً تصير سطراً يشير لهذه القيم، لا لوناً يُخترع. */
  --cc-ink:     #E6E8EC;   /* عناوين ونصّ رئيسي */
  --cc-ink-2:   #C9CCD2;   /* ثانوي */
  --cc-ink-3:   #A8AFBA;   /* متن خافت */
  --cc-ink-4:   #8A9099;   /* تلميحات */
  --cc-gold:    #E3922F;   /* النحاسي المتوسط — يُقرأ على الأسود كما هو */
  --cc-gold-2:  #D98A2B;
  --cc-gold-up: #F0A860;   /* بديل النحاسي الغامق الذي لا يُقرأ داكناً */
  --cc-surface: #16181B;   /* سطح مرتفع مصمت */
  --cc-deep:    #101113;   /* سطح غائر */
  --cc-glass:   rgba(22, 24, 27, .78);
  --cc-line:    rgba(255, 255, 255, .10);

  --bs-body-bg:      #0E0F11;
  --bs-body-bg-rgb:  14, 15, 17;
  --bs-body-color:   #C9CCD2;
  --bs-heading-color: #E8EAEE;
  --bs-border-color: #2A2C31;

  /* توكنات premium-theme (لوحة التحكم والواجهة) — تُنزع زرقتها الطفيفة */
  --pt-bg:      #0E0F11;
  --pt-bg-top:  #121316;
  --pt-card:    #16181B;
  --pt-border:  #2A2C31;
  --glass-bg:   rgba(22, 24, 27, .72);
  --glass-bg-2: rgba(22, 24, 27, .58);
}

/* الأسطح التي يكتبها القالب بقيم صريحة فلا تتبع التوكنات */
html.dark-style body,
html.dark-style .layout-page,
html.dark-style .content-wrapper {
  background-color: #0E0F11 !important;
}

html.dark-style .layout-navbar,
html.dark-style .layout-navbar.bg-body,
html.dark-style .navbar-detached {
  background: rgba(19, 20, 23, .72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
          backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

html.dark-style .card,
html.dark-style .dropdown-menu,
html.dark-style .modal-content,
html.dark-style .offcanvas,
html.dark-style .list-group-item,
html.dark-style .accordion-item,
html.dark-style .nav-tabs .nav-link.active {
  background-color: #16181B !important;
  border-color: #2A2C31 !important;
}

html.dark-style .form-control,
html.dark-style .form-select,
html.dark-style .input-group-text {
  background-color: #121316 !important;
  border-color: #2A2C31 !important;
  color: #D6D9DE;
}

html.dark-style .table {
  --bs-table-bg: transparent;
  --bs-table-border-color: #2A2C31;
}

/* أسطح صفحات المعلّم — teacher-home.css يلوّنها ‎rgba(58,63,88,…)‎ كحلياً */
html.dark-style .th-tile-card,
html.dark-style .th-hero,
html.dark-style .th-cta,
html.dark-style .th-empty,
html.dark-style .th-empty-state,
html.dark-style .th-recent-item {
  background: linear-gradient(135deg, rgba(26, 28, 32, .78), rgba(19, 21, 24, .70)) !important;
  border-color: rgba(255, 255, 255, .07) !important;
}

/* حاوية صفحات المعلّم — أكبر سطح في الصفحة، ويكتبه teacher-home.css سطر 3268
   تدرّجاً كحلياً ‎#262B3D→#222738‎ بـ!important ووزن (0,2,1).
   تكرار الصنف يرفع وزننا إلى (0,3,1) فنفوز بلا اعتماد على ترتيب التحميل. */
html.dark-style .th-wrap.th-wrap,
html.dark-style .th-doc.th-wrap.th-wrap {
  background: linear-gradient(180deg, #131417 0%, #101113 100%) !important;
  border-color: rgba(255, 255, 255, .05) !important;
}

/* إطار معاينة المستند — ‎#262b3d‎ في teacher-home.css سطر 1824 */
html.dark-style .th-preview-frame,
html.dark-style .th-preview-img {
  background: #16181B !important;
}

/* صفحات مستندات المعلّم (‎.th-doc‎) — أوسع نطاق متأثّر: 22 قاعدة لون بلا قيد وضع.
   النطاق يملك كتلة توكنات، فنقلب التوكنات أولاً — تُصلح كل قاعدة تقرأها دفعةً
   واحدة — ثم نذكر بالاسم ما كُتب بقيمة صريحة لا بتوكن، وهو ما رصده القياس:
   شريط الفلاتر أبيض 82% · مربّع البحث كريمي · عنوان الترويسة والنصّ الغليظ
   وموضوع البطاقة بحبر ‎#16221F‎ على سطح ‎#0E0F11‎ (تباين 1.0–1.15). */
html.dark-style:has(.th-doc) {
  --dt-text:      #E6E8EC;
  --dt-text-2:    #A8AFBA;
  --dt-line:      rgba(255, 255, 255, .10);
  --glass-card:   rgba(22, 24, 27, .86);
  --glass-border: rgba(255, 255, 255, .08);
  --th-ink:       #E6E8EC;
  --th-ink-2:     #A8AFBA;
  --th-ink-3:     #8A9099;
  --th-gold-deep: #F0A860;   /* ‎#A2570F‎ نحاسيّ غامق لا يُقرأ على الأسود */
}

html.dark-style:has(.th-doc) .th-topbar > h5,
html.dark-style:has(.th-doc) .th-topbar > h5 > .fw-bold,
html.dark-style:has(.th-doc) .th-topbar .th-search-input,
html.dark-style:has(.th-doc) .th-doc .th-fcard-topic {
  color: #E6E8EC;
}

html.dark-style:has(.th-doc) .th-topbar h5 > span:has(a) > a {
  color: #A8AFBA;
}

html.dark-style:has(.th-doc) .th-filters {
  background: rgba(22, 24, 27, .86) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

html.dark-style:has(.th-doc) .th-topbar .th-search {
  background: #16181B !important;
  border-color: rgba(255, 255, 255, .10) !important;
}

html.dark-style:has(.th-doc) .th-topbar .th-search:focus-within {
  background: #1C1F23 !important;
}

/* مبدّل العرض (شبكة/قائمة) — النسخة الفاتحة (السطر ~9778) تفرض حبّة ورقية
   ‎background:#FBF4E9‎ مع ظلّ داخليّ داكن، بلا قيد وضع. فبقيت الحبّة كريميّة
   ساطعة في الوضع الداكن — الشيء الوحيد الفاتح في ريل تحكّم داكن بالكامل.
   نقلبها إلى سطح ‎--cc-surface‎ نفسه الذي يحمله مربّع البحث المجاور فيتّحدان،
   ونستبدل الظلّ الداخلي الداكن بحدّ ضوئي خفيف يوحي بالغور دون أن يذوب. */
html.dark-style:has(.th-doc) .th-topbar .th-view-toggle {
  background: var(--cc-surface);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* الزرّ غير النشط: الحبر الطيني ‎#A0917F‎ صُمّم للورق؛ نرفعه إلى تلميح داكن
   أهدأ ليتّسق مع سلّم ‎--cc-*‎. الزرّ النشط يبقى بتدرّجه النحاسي كما هو. */
html.dark-style:has(.th-doc) .th-topbar .th-view-toggle button:not(.is-active) {
  color: var(--cc-ink-4);
}

/* صفوف الملفات وترويسات الوحدات — ‎background: #FFFFFF‎ صريح، وهما أكبر سطحين
   في الصفحة. نصوصهما تقرأ توكنات ‎--th-ink‎ المقلوبة أعلاه، فلم يبقَ إلا السطح.

   لماذا فاتا كل عمليات المسح السابقة؟ لأن قائمة الملفات تُحمَّل عبر AJAX،
   واللقطات الساكنة تحوي الهيكل دون الصفوف. الدرس: الماسح يرى ما في DOM لحظةَ
   القياس؛ وما يأتي بعد نداء الشبكة لا يراه أحد إلا على صفحة حيّة. */
html.dark-style:has(.th-doc) .th-doc .card-interactive,
html.dark-style:has(.th-doc) .th-doc .th-unit-head {
  background: var(--cc-surface);
  border-color: var(--cc-line);
}

/* الشيفرون على سطح فاتح كان رمادياً شفّافاً؛ على الأسود يذوب فنقلبه */
html.dark-style:has(.th-doc) .th-doc .th-unit-head .th-u-chev {
  background: rgba(255, 255, 255, .07);
}

/* =============================================================================
   «يحمل ثم يختفي» — إلغاء حركة الدخول في الوضع الداكن
   -----------------------------------------------------------------------------
   ليست مسألة ألوان. ‎content-extras.js‎ سطر 62 يضيف الصنف ‎.th-enter‎ للبطاقات
   **بعد** رسمها، وقاعدته ‎animation: th-card-pop .5s … both‎. وضع الملء ‎both‎
   يُطبّق الحالة الابتدائية ‎opacity: 0‎ رجوعياً طوال مدّة التأخير — فالبطاقة
   تُرسم مرئية ثم تختفي لحظةَ إضافة الصنف. هذا حرفياً ما وُصف.

   ‎teacher-home.css‎ سطر 4184 يعالج ذلك بإلغاء الحركة كلياً — لكنه مقيّد بـ
   ‎html.light-style.docs-page‎ وحده، فلا يصل الوضع الداكن إطلاقاً.

   نعكس الكتلة نفسها للوضع الداكن بالتصريحات ذاتها ووزنها ذاته. لا نجعلها
   عامّة (بلا قيد وضع) عمداً: القاعدة الفاتحة ملك ملف القالب، وتعميمها من هنا
   يخلق مصدرَي حقيقة لسلوك واحد.
   ========================================================================== */
html.dark-style.docs-page #card-saleh > .div-saleh.th-enter,
html.dark-style.docs-page .th-content-grid > .div-saleh.th-enter,
html.dark-style.docs-page .th-content-grid > .div-saleh.th-card-in {
  animation: none !important;
  animation-delay: 0ms !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}

html.dark-style.docs-page #card-saleh > .div-saleh,
html.dark-style.docs-page .th-content-grid > .div-saleh {
  opacity: 1 !important;
  filter: none !important;
}

/* صفحة ملف الإنجاز (‎/portfolio‎) — أحبار داكنة على سطح داكن.
   قواعد ‎html:has(.ph-benefit)‎ أعلاه تفرض ‎#16221F‎ و‎#56616D‎ و‎#1B2A27‎ بلا قيد
   وضع، فتدهس ‎--bs-heading-color‎ في core-dark.css و‎--ph-ink‎ في
   portfolio-home.css. القياس في الوضع الداكن: العناوين والنصّ الغليظ وأزرار
   الأكورديون بتباين 1.15–1.19 — أي غير مقروءة إطلاقاً.

   نقلبها هنا إلى نظائر فاتحة من العائلة نفسها. لا نلمس ‎.ph-title‎ و‎.ph-lead‎
   و‎.ph-eyebrow‎: هي أصلاً بيضاء/نحاسية فوق الهيرو الداكن وتُقرأ في الوضعين. */
html.dark-style:has(.ph-benefit) .ph-section-head h4,
html.dark-style:has(.ph-benefit) .ph-benefit-body strong,
html.dark-style:has(.ph-benefit) .ph-step h6 {
  color: #E6E8EC;
}

html.dark-style:has(.ph-benefit) .ph-benefit-body,
html.dark-style:has(.ph-benefit) .ph-step p,
html.dark-style:has(.ph-benefit) .ph-accordion .accordion-body {
  color: #A8AFBA;
}

html.dark-style:has(.ph-benefit) .ph-accordion .accordion-button {
  color: #D6D9DE;
}

html.dark-style:has(.ph-benefit) .ph-accordion .accordion-button:not(.collapsed) {
  color: #F0A860;
}

/* الأسطح المرفوعة في ‎/portfolio‎ — تُقلب داكناً.
   قواعد light-mode أعلاه (‎html:has(.ph-benefit) .ph-benefit/.ph-step/…‎ في
   الأسطر ~3517–3641) تفرض ‎linear-gradient(160deg, #FFF, #FCF8F3)‎ صريحاً
   بلا قيد وضع. القياس على الوضع الداكن: بطاقات الفوائد والخطوات وعناصر
   الأكورديون تبدو بيضاء ساطعة على صفحة داكنة — التباين معكوس تماماً،
   والصورة تكرَّر في كل الثيمات الأربعة لأن القاعدة عمياء عن ‎data-theme‎.
   نقلبها إلى نظائر ‎--cc-*‎ من عائلة الوضع الداكن نفسها. */
html.dark-style:has(.ph-benefit) .ph-benefit,
html.dark-style:has(.ph-benefit) .ph-step,
html.dark-style:has(.ph-benefit) .ph-accordion .accordion-item,
html.dark-style:has(.ph-benefit) .ph-faq .accordion-item {
  background: linear-gradient(160deg, var(--cc-surface), var(--cc-deep)) !important;
  border-color: var(--cc-line) !important;
  box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .55);
}

html.dark-style:has(.ph-benefit) .ph-benefit:hover,
html.dark-style:has(.ph-benefit) .ph-step:hover,
html.dark-style:has(.ph-benefit) .ph-accordion .accordion-item:hover {
  border-color: rgba(227, 146, 47, .45) !important;
  box-shadow: 0 30px 56px -24px rgba(227, 146, 47, .32);
}

/* الشيفرون على قرص فاتح رمادي يذوب في الوضع الداكن — نقلبه إلى قرص ذهبي هادئ */
html.dark-style:has(.ph-benefit) .ph-accordion .accordion-button::after {
  background-color: rgba(227, 146, 47, .14);
  border-color: rgba(227, 146, 47, .32);
}

html.dark-style:has(.ph-benefit) .ph-accordion .accordion-button:not(.collapsed) {
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .18),
              rgba(227, 146, 47, .05) 70%,
              transparent);
}

html.dark-style:has(.ph-benefit) .ph-accordion .accordion-button:not(.collapsed)::after {
  background-color: rgba(227, 146, 47, .32);
  border-color: rgba(227, 146, 47, .60);
}

/* البند المفتوح: قضيب ذهبي + ظلّ داكن (بدل ظلّ رمادي فاتح غير مرئيّ) */
html.dark-style:has(.ph-benefit) .ph-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: rgba(227, 146, 47, .42) !important;
  box-shadow: inset 3px 0 0 #F0A860, 0 18px 34px -20px rgba(0, 0, 0, .55) !important;
}

/* الخط الفاصل داخل جسم الأكورديون: كان ‎rgba(17,28,26,.07)‎ لا يُرى داكناً */
html.dark-style:has(.ph-benefit) .ph-accordion .accordion-body {
  border-block-start-color: var(--cc-line);
}

/* حدّ بطاقة الفائدة الافتراضي في light كان ‎rgba(17,28,26,.08)‎ — على الأسود
   يذوب فيبدو الحدّ غير موجود؛ نُبقي الحافة العلوية الذهبية كما هي (تُظهر
   عند التحويم بلا مشاكل). */

/* ‎.btn-outline-slack‎ في الوضع الداكن:
   القالب يفرض ‎#4A154B‎ للنصّ والحدّ (بنفسجيّ Slack الغامق) وهو مصمَّم لخلفية
   بيضاء؛ على سطح ‎#16181B‎ نسبة التباين ‎1.27‎ فيسقط الزر إلى حدّ اللاقراءة
   (شاهد على /portfolio/share-record/reorder). نرفعه إلى نظير فاتح من العائلة
   نفسها ‎#B269B3‎ (تباين ‎5.1‎ على ‎#16181B‎) فتُقرأ التسمية وتظلّ الهوية.
   الحوامل: زر «إلغاء» في shareRecord/partials/edit، رابط «ترتيب البنود الفرعية»
   في reorder، شارة «المحتوى مجاني» في home، وزر «إلغاء» في resumecv/setting. */
html.dark-style .btn-outline-slack {
  color: #B269B3;
  border-color: rgba(178, 105, 179, .55);
}
html.dark-style .btn-outline-slack:hover,
html.dark-style .btn-outline-slack:focus,
html.dark-style .btn-check:focus + .btn-outline-slack {
  color: #E0B4E0 !important;
  background-color: rgba(178, 105, 179, .12) !important;
  border-color: rgba(178, 105, 179, .70) !important;
}
html.dark-style .btn-check:checked + .btn-outline-slack,
html.dark-style .btn-check:active + .btn-outline-slack,
html.dark-style .btn-outline-slack:active,
html.dark-style .btn-outline-slack.active {
  color: #F0DFF0 !important;
  background-color: rgba(178, 105, 179, .20) !important;
  border-color: rgba(178, 105, 179, .80) !important;
}
html.dark-style .btn-outline-slack.disabled,
html.dark-style .btn-outline-slack:disabled {
  color: rgba(178, 105, 179, .55) !important;
  border-color: rgba(178, 105, 179, .28) !important;
}

/* الصفحة الرئيسية — رموز هوية فاتحة الأصل تُستعمل نصّاً على سطح داكن.
   home-v2.css يمرّر ‎var(--brand-700)‎ و‎var(--pine)‎ وهما مصمَّمان لخلفية
   بيضاء، فيسقط التباين إلى 2.75 و1.93 على التوالي — والحدّ المقبول 4.5.
   نرفعهما بنظيرين فاتحين من العائلة نفسها فتُحفظ الهوية ويُقرأ النصّ. */
html.dark-style .h2-body .path[aria-selected="true"] .path-txt b {
  color: #F0A860;
}

html.dark-style .h2-body .voice-badge {
  color: #7FD6A0;
}

/* -----------------------------------------------------------------------------
   اللوحة المكرّرة — ثمانية نطاقات بلوحة واحدة وبادئات مختلفة
   -----------------------------------------------------------------------------
   الدفع (pay) · الفيديو (vid) · التواصل (ct) · السينما (cp) · الرخصة (lp)
   · حاوية الفيديو (vc) · الأسبوع (wk) · قوالب السيرة (cv)

   كلها تعرّف القيم التسع نفسها حرفياً:
       paper #FFFFFF · paper-2 #FAF4EC · line rgba(227,146,47,.20)
       ink #16221F · ink-2 #5B6773 · gold #E3922F · gold-2 #C9741C
       gold-deep #A2570F · dark #232B24

   فبدل ملاحقة كل قاعدة تقرأها — وهي عشرات — نقلب التوكنات مرّةً واحدة.
   كل قاعدة تستعمل var() تُصلَح تلقائياً، والقواعد المكتوبة بقيم صريحة
   تُعالَج في الكتل التي تليها.

   ملاحظة على gold-deep: ‎#A2570F‎ نحاسيّ غامق مصمَّم لخلفية بيضاء، تباينه على
   الأسود دون 3. نرفعه إلى ‎#F0A860‎ فتبقى الهوية ويُقرأ النصّ.
   -------------------------------------------------------------------------- */
html.dark-style:has(.pp-hero),
html.dark-style:has(.list-group-flush),
html.dark-style:has(.contact-img-box),
html.dark-style:has(.cp-cinema),
html.dark-style:has(.lp-hero),
html.dark-style:has(.video-container),
html.dark-style:has(.week-card),
html.dark-style:has(.cvt-scope) {
  --pay-paper: var(--cc-surface);  --pay-paper-2: var(--cc-deep);
  --pay-line:  var(--cc-line);     --pay-ink: var(--cc-ink);
  --pay-ink-2: var(--cc-ink-3);    --pay-gold: var(--cc-gold);
  --pay-gold-2: var(--cc-gold-2);  --pay-gold-deep: var(--cc-gold-up);
  --pay-dark:  var(--cc-deep);

  --vid-paper: var(--cc-surface);  --vid-paper-2: var(--cc-deep);
  --vid-line:  var(--cc-line);     --vid-ink: var(--cc-ink);
  --vid-ink-2: var(--cc-ink-3);    --vid-gold: var(--cc-gold);
  --vid-gold-2: var(--cc-gold-2);  --vid-gold-deep: var(--cc-gold-up);
  --vid-dark:  var(--cc-deep);

  --ct-paper: var(--cc-surface);   --ct-paper-2: var(--cc-deep);
  --ct-line:  var(--cc-line);      --ct-ink: var(--cc-ink);
  --ct-ink-2: var(--cc-ink-3);     --ct-gold: var(--cc-gold);
  --ct-gold-2: var(--cc-gold-2);   --ct-gold-deep: var(--cc-gold-up);
  --ct-dark:  var(--cc-deep);

  --cp-paper: var(--cc-surface);   --cp-paper-2: var(--cc-deep);
  --cp-line:  var(--cc-line);      --cp-ink: var(--cc-ink);
  --cp-ink-2: var(--cc-ink-3);     --cp-gold: var(--cc-gold);
  --cp-gold-2: var(--cc-gold-2);   --cp-gold-deep: var(--cc-gold-up);
  --cp-dark:  var(--cc-deep);

  --lp-paper: var(--cc-surface);   --lp-paper-2: var(--cc-deep);
  --lp-line:  var(--cc-line);      --lp-ink: var(--cc-ink);
  --lp-ink-2: var(--cc-ink-3);     --lp-gold: var(--cc-gold);
  --lp-gold-2: var(--cc-gold-2);   --lp-gold-deep: var(--cc-gold-up);
  --lp-dark:  var(--cc-deep);

  --vc-paper: var(--cc-surface);   --vc-paper-2: var(--cc-deep);
  --vc-line:  var(--cc-line);      --vc-ink: var(--cc-ink);
  --vc-ink-2: var(--cc-ink-3);     --vc-gold: var(--cc-gold);
  --vc-gold-2: var(--cc-gold-2);   --vc-gold-deep: var(--cc-gold-up);
  --vc-dark:  var(--cc-deep);

  --wk-paper: var(--cc-surface);   --wk-paper-2: var(--cc-deep);
  --wk-line:  var(--cc-line);      --wk-ink: var(--cc-ink);
  --wk-ink-2: var(--cc-ink-3);     --wk-gold: var(--cc-gold);
  --wk-gold-2: var(--cc-gold-2);   --wk-gold-deep: var(--cc-gold-up);
  --wk-dark:  var(--cc-deep);

  --cv-dark: var(--cc-deep);       --cv-dark-2: #0B0C0D;
  --cv-gold-deep: var(--cc-gold-up);
}

/* -----------------------------------------------------------------------------
   الكتل المكتوبة بقيم صريحة لا بتوكنات
   -----------------------------------------------------------------------------
   المحدّدات هنا تُحاكي نطاق الأصل حرفاً بحرف ثم تزيد ‎.dark-style‎ — ولا يكفي
   نطاقٌ أبسط: ‎:has(.page-prose .card.shadow-lg)‎ يزن ثلاثة أصناف داخل ‎:has‎،
   فمحدّد بنطاق ‎:has(.page-prose)‎ وحده يخسر أمامه مهما بدا أدقّ.
   -------------------------------------------------------------------------- */

/* صفحات النصّ الطويل (page-prose) — بنطاقيها */
html.dark-style:has(.page-prose .card.shadow-lg) .page-prose h4,
html.dark-style:has(.page-prose .card.shadow-lg) .page-prose .card-body > h5,
html.dark-style:has(.MsoNormal) .page-prose p:has(strong) {
  color: var(--cc-ink);
}

html.dark-style:has(.page-prose .card.shadow-lg) .page-prose ul > li,
html.dark-style:has(.page-prose .card.shadow-lg) .page-prose h4 + p,
html.dark-style:has(.page-prose .card.shadow-lg) .page-prose .mt-4,
html.dark-style:has(.MsoNormal) .page-prose p:has(strong) + p {
  color: var(--cc-ink-3);
}

html.dark-style:has(.page-prose .card.shadow-lg) .page-prose h4 + p:hover,
html.dark-style:has(.MsoNormal) .page-prose p:has(strong) + p:hover {
  color: var(--cc-ink-2);
}

html.dark-style:has(.page-prose .card.shadow-lg) .page-prose .card-body > p {
  color: var(--cc-gold-up) !important;   /* الأصل بـ!important */
}

/* إنشاء ملف الإنجاز — النطاقان يتشاركان البنية فيُجمعان */
html.dark-style:has(.pf-create-hero) .pf-create-hero h3,
html.dark-style:has(.pf-create-hero) .pf-file .form-label,
html.dark-style:has(.pf-create-hero) .pf-file h5,
html.dark-style:has(.pf-create-card) .pf-create .text-center h3,
html.dark-style:has(.pf-create-card) .pf-create .form-label,
html.dark-style:has(.pf-create-card) .pf-master:has(.pf-master-radio:checked) .pf-master-name {
  color: var(--cc-ink);
}

html.dark-style:has(.pf-create-hero) .pf-create-hero p,
html.dark-style:has(.pf-create-card) .pf-create .text-center p,
html.dark-style:has(.pf-create-card) .pf-create .form-check-label,
html.dark-style:has(.pf-create-card) .pf-master-name {
  color: var(--cc-ink-3);
}

html.dark-style:has(.pf-create-hero) .pf-file .form-check > a,
html.dark-style:has(.pf-create-hero) .pf-file .form-check > a:hover,
html.dark-style:has(.pf-create-card) .pf-master-view,
html.dark-style:has(.pf-create-card) .pf-master-check,
html.dark-style:has(.pf-create-card) .pf-master-ic::after {
  color: var(--cc-gold-up);
}

/* الأسطح الزجاجية البيضاء في نموذجَي الإنشاء */
html.dark-style:has(.pf-create-hero) .pf-file .form-control,
html.dark-style:has(.pf-create-hero) .pf-file .form-check,
html.dark-style:has(.pf-create-card) .pf-create .form-control,
html.dark-style:has(.pf-create-card) .pf-create .form-check,
html.dark-style:has(.pf-create-card) .pf-master {
  background: var(--cc-glass);
  border-color: var(--cc-line);
  color: var(--cc-ink-2);
}

html.dark-style:has(.pf-create-hero) .pf-file .form-control:focus,
html.dark-style:has(.pf-create-hero) .pf-file .form-check:hover,
html.dark-style:has(.pf-create-card) .pf-create .form-control:focus,
html.dark-style:has(.pf-create-card) .pf-master:hover {
  background: var(--cc-surface);
}

/* حالات الاختيار — محدّداتها أثقل وزناً من قواعد السكون أعلاه، فتحتاج ذكراً
   صريحاً وإلا بقيت بحبرها الداكن وحدها بين إخوتها المُصلَحة. */
html.dark-style:has(.pf-create-hero) .pf-file .form-check:has(.form-check-input:checked) > a {
  color: var(--cc-ink);
}

html.dark-style:has(.pf-create-hero) .pf-file .form-check:has(.form-check-input:checked) .form-check-label {
  color: var(--cc-gold-up);
}

/* حقل بحث المستندات في حالة النجاح — الأصل بـ!important فلا مفرّ من مثله */
html.dark-style:has(.th-doc) .th-topbar .th-search-input.text-success,
html.dark-style:has(.th-doc) .th-topbar .th-search-input.text-danger {
  color: var(--cc-ink) !important;
}

/* أخضر النجاح ‎#0E7A41‎ مصمَّم لخلفية بيضاء؛ على الأسود تباينه دون الحدّ.
   نرفعه إلى أخضر فاتح من العائلة نفسها فتبقى الدلالة ويُقرأ. */
html.dark-style:has(.th-doc) .th-topbar .th-search:has(.th-search-clear:not([hidden])):has(.text-success) .th-search-ico,
html.dark-style:has(.th-doc) .th-topbar .th-search:has(.th-search-clear:not([hidden])) .th-search-input.text-success {
  color: #7FD6A0 !important;
}

/* =============================================================================
   16-ج. تعميم استجابة الثيمات — سبيدر كل اللياوتات   ✅
   -----------------------------------------------------------------------------
   العطل الذي عالجته هذه الكتلة: أداة التخصيص كانت تعمل على ‎/teacher/app‎ وحدها.

   القياس (تبديل الثيمات الأربعة على ‎/portfolio/‎ وقراءة الأنماط المحسوبة):
   كانت القيم الأربع **متطابقة بايتاً ببايت** — لا Default ولا Bordered ولا
   Semi Dark ولا «نحاسي» يغيّر شيئاً. وبحقن عنصر ‎.th-tile-card‎ في الصفحة نفسها
   افترقت الأربع فوراً. فالآلية سليمة، والعطل في النطاق وحده.

   السبب: حرّاس ‎[data-skin^="theme-…"]‎ في هذا الملف كلّه — ٦ مواضع — محصورة
   في نطاق ‎:has(.th-tile-card)‎. وثلاث عائلات سبيدر أخرى نسخت **نفس السطح
   حرفياً** بقيم صريحة بدل التوكنات، فبقيت عمياء عن الثيم:

       html:has(.ph-menu)      ملف الإنجاز (٨ صفحات)
       html:has(.th-doc)       الاختبار النهائي
       html:has(.cvt-scope)    السير الذاتية

   العلاج: نرفع التوكنات الستّة إلى نطاق عام هنا، ثم تقرأها العائلات الثلاث
   (حُوِّلت تصريحاتها الصريحة إلى ‎var()‎ في مواضعها).

   ⚠️ الأوزان مقصودة: كل محدّد هنا **أخفّ بدرجة** من نظيره في كتلة
   ‎.th-tile-card‎، فتلك تفوز دائماً وتبقى صفحات المعلّم كما هي بلا تغيير:

       عامّ (هنا)                                    كتلة .th-tile-card
       html                              (0,0,1)  <  html:has(…)            (0,1,1)
       :where(html)[data-skin^=…]        (0,1,0)  <  html[data-skin^=…]:has(…) (0,2,1)
       :where(html).dark-style           (0,1,0)  <  html.dark-style:has(…)  (0,2,1)

   ‎:where()‎ لا يضيف وزناً، فهو يقيّد المطابقة بـ<html> دون أن يرفع الخصوصية.

   وقيم الأساس هنا هي نفس قيم الأصل المكتوبة صراحةً، فثيم Default يُرسم
   مطابقاً لما كان — التغيير يظهر في الثلاثة الأخرى وحدها.
   ========================================================================== */

/* --- الأساس: السطح الداكن الأصلي (نفس قيم الثلاث العائلات المكتوبة صراحةً) --- */
html {
  --th-side-top:    #1F2E2B;
  --th-side-bottom: #131E1C;
  --th-side-wash:   rgba(227, 146, 47, .16);
  --th-side-wash-h: 42%;
  --th-side-border: rgba(255, 255, 255, .07);
  --th-side-shadow: -10px 0 40px -18px rgba(17, 28, 26, .55);

  --th-side-fg:        rgba(255, 255, 255, .74);
  --th-side-fg-hover:  #FFFFFF;
  --th-side-ico:       rgba(255, 255, 255, .68);
  --th-side-ico-bg:    rgba(255, 255, 255, .06);
  --th-side-ico-hover: #FFCE92;
  --th-side-ico-hover-bg: rgba(227, 146, 47, .16);
  --th-side-active-fg: #FFFFFF;
  --th-side-header:    #F3B76A;
  --th-side-rule:      rgba(255, 255, 255, .06);
}

/* --- Bordered: نفس السطح، والفصل بالحدّ لا بالظل --- */
:where(html)[data-skin^="theme-bordered"] {
  --th-side-border: rgba(255, 255, 255, .30);
  --th-side-shadow: none;
}

/* --- Semi Dark: كحلي غامق، والغسلة تبرد معه --- */
:where(html)[data-skin^="theme-semi-dark"] {
  --th-side-top:    #14203A;
  --th-side-bottom: #0A1322;
  --th-side-wash:   rgba(116, 152, 255, .15);
  --th-side-border: rgba(255, 255, 255, .10);
  --th-side-shadow: -10px 0 40px -18px rgba(8, 16, 32, .65);
}

/* --- نحاسي: أسود صافٍ، والنحاسي ضوءٌ عليه لا صبغةٌ فيه --- */
:where(html)[data-skin^="theme-cmp"] {
  --th-side-top:    #141110;
  --th-side-bottom: #070606;
  --th-side-wash:   rgba(227, 146, 47, .34);
  --th-side-wash-h: 54%;
  --th-side-border: rgba(227, 146, 47, .22);
  --th-side-shadow: -10px 0 44px -18px rgba(0, 0, 0, .72);
}

/* --- السبيدر الفاتح: Default و Bordered في الوضع الفاتح وحدهما ---
   قلبُ السطح وحده لا يكفي — كل المقدّمة كُتبت لسطح داكن فتختفي على الفاتح،
   فتُقلب هنا دفعةً واحدة. (نفس منطق الكتلة الأصلية وقيمها.) */
:where(html).light-style[data-skin^="theme-default"],
:where(html).light-style[data-skin^="theme-bordered"] {
  --th-side-top:    #FEFDFC;
  --th-side-bottom: #F7F5F1;
  --th-side-wash:   rgba(227, 146, 47, .08);
  --th-side-border: rgba(31, 46, 43, .10);
  --th-side-shadow: -10px 0 34px -20px rgba(17, 28, 26, .22);

  --th-side-fg:        rgba(31, 46, 43, .74);
  --th-side-fg-hover:  #16211F;
  --th-side-ico:       rgba(31, 46, 43, .60);
  --th-side-ico-bg:    rgba(31, 46, 43, .05);
  --th-side-ico-hover: #B85B21;
  --th-side-ico-hover-bg: rgba(227, 146, 47, .16);
  --th-side-active-fg: #8A4A1C;
  --th-side-header:    #B85B21;
  --th-side-rule:      rgba(31, 46, 43, .09);
}

:where(html).light-style[data-skin^="theme-bordered"] {
  --th-side-border: rgba(31, 46, 43, .42);
  --th-side-shadow: none;
}

/* --- الوضع الداكن الكلّي: الأربعة تسقط إلى أسود واحد ---
   لا يلمس إلا العمق: الحدّ والظل سِمتا الثيم لا سِمتا الوضع، فإعادةُ ضبطهما
   هنا تبتلع هويةَ Bordered (بلا ظل) وحدَّ «نحاسي» النحاسيَّ. */
:where(html).dark-style {
  --th-side-top:    #0A0B0C;
  --th-side-bottom: #050506;
}


/* =============================================================================
   16-د. اللوحة المركزية ‎--pal-*‎ — استجابة الثيمات في محتوى الصفحات   ✅
   -----------------------------------------------------------------------------
   القسم 16-ج عالج السبيدر. هذا يعالج **محتوى** الصفحات.

   الاكتشاف الذي جعل هذا ممكناً: تسع مساحات أسماء في هذا الملف تُعلن اللوحة
   التسعية **نفسها حرفاً بحرف**، ولا تفترق إلا في البادئة:

       pay (14.html) · vid (15) · ct (16) · pdf (17) · cp (19)
       lp (20) · vc (22) · wk (23) · cv (21، ثلاث قيم منها)

       paper #FFFFFF · paper-2 #FAF4EC · line rgba(227,146,47,.20)
       ink #16221F · ink-2 #5B6773 · gold #E3922F · gold-2 #C9741C
       gold-deep #A2570F · dark #232B24

   فبدل تسع نسخ جامدة، تصير التسع أسماءً مستعارة للوحة واحدة تحمل حرّاس الثيم.
   تغييرُ لونٍ صار موضعاً واحداً بدل تسعة، وإضافةُ ثيم صارت كتلةً واحدة.

   لماذا ‎--pal-‎ لا ‎--cmp-‎؟ لأن ‎--cmp-*‎ محجوزة لـ«لوحة الهوية» التي يولّدها
   ‎SalahApp\Support\CustomCss‎ في كتلة ‎cmp-vars‎ أعلى الملف — والخلط بينهما
   يجعل حفظةً واحدة من صفحة الإعدادات تدهس نظام الثيمات كلّه.

   منطق الثيمات الأربعة (والقيم الافتراضية هي قيم الأصل حرفياً، فـDefault
   يُرسم مطابقاً لما كان — لا انحدار بصريّ):

     Default   → الأصل: ورقٌ دافئ وذهب نحاسي.
     Bordered  → دلالته في Vuexy «لا شيء يطفو وكل شيء مُحدَّد»: الورقة تُسطَّح
                 (بلا تدرّج) والحدّ يصير محايداً صريحاً بدل النحاسي الخافت.
     Semi Dark → في Vuexy يُدكَّن السبيدر **والمحتوى يبقى فاتحاً** — فلا نُدكّنه
                 هنا، بل نُبرّد حياده ليؤاخي كحليّ السبيدر.
     نحاسي     → هوية البيت مدفوعة: ورقة أدفأ وحدّ نحاسي صريح وأسود دافئ.

   الوضع الداكن يشير إلى سلّم ‎--cc-*‎ (القسم 16-ب) فيتّسق مع كتلة الداكن
   المكتوبة هناك لكل مساحة اسم على حدة — النتيجة واحدة من الطريقين.

   الأوزان: كلها ‎:where(html)‎ فلا تضيف خصوصية، وكتلُ الصفحات (0,1,1) وكتلُ
   الداكن (0,2,1) تفوز عليها دائماً — فما ضُبط يدوياً يبقى مضبوطاً.
   ========================================================================== */

html {
  --pal-paper:     #FFFFFF;
  --pal-paper-2:   #FAF4EC;
  --pal-line:      rgba(227, 146, 47, .20);
  --pal-ink:       #16221F;
  --pal-ink-2:     #5B6773;
  --pal-gold:      #E3922F;
  --pal-gold-2:    #C9741C;
  --pal-gold-deep: #A2570F;
  --pal-dark:      #232B24;

  /* لوح الهيرو الداكن — «اللوح الفاخر» المتكرّر في ست صفحات حرفياً:
     ‎linear-gradient(155deg, var(--pal-hero), var(--pal-hero-2) 68%)‎. عائلته هي عائلة السبيدر
     نفسها، فيتبع منطقه: الثيم يقرّر اللون والوضع يقرّر العمق. */
  --pal-hero:   #1C2A28;
  --pal-hero-2: #131E1C;
}

/* Bordered — الورقة تُسطَّح والحدّ يصير محايداً صريحاً */
:where(html).light-style[data-skin^="theme-bordered"] {
  --pal-paper-2: #FFFFFF;
  --pal-line:    rgba(22, 34, 31, .22);
}

/* Semi Dark — المحتوى يبقى فاتحاً، وحياده يبرد ليؤاخي كحليّ السبيدر */
:where(html).light-style[data-skin^="theme-semi-dark"] {
  --pal-paper-2: #F2F5FA;
  --pal-line:    rgba(20, 32, 58, .18);
  --pal-ink:     #14202E;
  --pal-ink-2:   #59667A;
  --pal-dark:    #1B2436;
  --pal-hero:    #14203A;   /* نفس كحليّ السبيدر */
  --pal-hero-2:  #0A1322;
}

/* نحاسي — ورقة أدفأ وحدّ نحاسي صريح وأسود دافئ */
:where(html).light-style[data-skin^="theme-cmp"] {
  --pal-paper-2:   #FBF1E4;
  --pal-line:      rgba(227, 146, 47, .38);
  --pal-gold-deep: #8A4A1C;
  --pal-dark:      #1A1512;
  --pal-hero:      #141110;   /* نفس أسود السبيدر */
  --pal-hero-2:    #070606;
}

/* الوضع الداكن — إشارة إلى سلّم ‎--cc-*‎ فتتّفق الطريقان على قيمة واحدة */
:where(html).dark-style {
  --pal-paper:     var(--cc-surface);
  --pal-paper-2:   var(--cc-deep);
  --pal-line:      var(--cc-line);
  --pal-ink:       var(--cc-ink);
  --pal-ink-2:     var(--cc-ink-3);
  --pal-gold:      var(--cc-gold);
  --pal-gold-2:    var(--cc-gold-2);
  --pal-gold-deep: var(--cc-gold-up);
  --pal-dark:      var(--cc-deep);
  --pal-hero:      #0A0B0C;   /* نفس أعمق نقطة في السبيدر — الوضع يملك العمق */
  --pal-hero-2:    #050506;
}


/* =============================================================================
   17. تعديلات مؤقتة / تحت التجربة
   -----------------------------------------------------------------------------
   ضع هنا ما تجرّبه بسرعة، ثم انقله إلى قسمه الصحيح بعد الاستقرار.
   ========================================================================== */

/* اكتب تعديلاتك هنا */

/* Course player playlist polish: compact hierarchy and cleaner rhythm. */
html:has(.cp-cinema) .cp-playlist {
  padding-block: 0;
  padding-inline-start: 0;
  padding-inline-end: 2px;
  scrollbar-gutter: stable;
}

html:has(.cp-cinema) .cp-search {
  min-block-size: 44px;
  gap: .38rem;
  margin-block-end: .38rem;
  padding-block: .34rem;
  padding-inline-start: .52rem;
  padding-inline-end: .58rem;
  border-radius: 14px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(227, 146, 47, .16);
}

html:has(.cp-cinema) .cp-search-input {
  padding-block: .08rem;
  font-size: .91rem;
  line-height: 1.35;
}

html:has(.cp-cinema) .cp-search-ico {
  font-size: 1rem;
}

html:has(.cp-cinema) .cp-search-clear {
  inline-size: 22px;
  block-size: 22px;
}

html:has(.cp-cinema) .cp-playlist .accordion-item,
html:has(.cp-cinema) .cp-playlist .accordion-item.play-list-sum-min {
  border-radius: 14px !important;
  margin-block-end: .75rem !important;
  box-shadow: 0 16px 38px -28px rgba(35, 43, 36, .62);
}

html:has(.cp-cinema) .cp-playlist .accordion-button,
html:has(.cp-cinema) .cp-playlist .accordion-button.collapsed {
  align-items: stretch !important;
  min-block-size: 52px;
  padding-block: .48rem;
  padding-inline-start: .62rem;
  padding-inline-end: .5rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(227, 146, 47, .22);
}

html:has(.cp-cinema) .cp-playlist .accordion-button > .d-flex {
  min-inline-size: 0;
  gap: .18rem;
}

html:has(.cp-cinema) .cp-playlist .accordion-button::after {
  align-self: center;
  inline-size: 22px;
  block-size: 22px;
  margin-inline-start: .45rem;
  background-size: .78rem;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-name {
  display: block;
  max-inline-size: 100%;
  font-size: .92rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .3rem;
  margin-block: .2rem .04rem;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-track {
  block-size: 3px;
  background: rgba(255, 255, 255, .13);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-text {
  min-inline-size: 25px;
  font-size: .66rem;
  line-height: 1;
  color: rgba(255, 255, 255, .66);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .28rem;
  row-gap: .2rem;
  margin-block-start: .1rem;
  min-inline-size: 0;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-duration,
html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining {
  display: inline-flex !important;
  align-items: center;
  gap: .16rem;
  padding: .06rem .42rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .70) !important;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-duration {
  order: 1;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-duration::before,
html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining::before {
  content: "\ea70";
  font-family: "tabler-icons";
  font-size: .72rem;
  font-weight: 400;
  color: #F0A64A;
}

html:has(.cp-cinema) .cp-playlist .cp-count {
  order: 2;
  gap: .18rem;
  padding: .06rem .42rem;
  font-size: .7rem;
  line-height: 1.2;
}

html:has(.cp-cinema) .cp-playlist .cp-count i {
  font-size: .76rem;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining {
  order: 3;
  color: #FFCE92 !important;
  border-color: rgba(227, 146, 47, .30);
  background: rgba(227, 146, 47, .14);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining.is-complete {
  color: #168354 !important;
  border-color: rgba(22, 131, 84, .34);
  background: rgba(22, 131, 84, .14);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining.is-complete::before {
  content: none;
  display: none;
}

html:has(.cp-cinema) .cp-playlist .accordion-body {
  padding-block: .38rem .44rem !important;
  padding-inline-start: .32rem !important;
  padding-inline-end: .42rem !important;
}

html:has(.cp-cinema) .cp-playlist .row-content {
  padding-top: .38rem !important;
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check {
  align-items: flex-start !important;
  gap: .42rem;
  min-block-size: 44px;
  margin-block-end: .12rem !important;
  padding-block: .36rem;
  padding-inline-start: .18rem;
  padding-inline-end: .34rem;
  border-radius: 9px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(227, 146, 47, .18);
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:hover {
  padding-inline-start: .26rem;
}

html:has(.cp-cinema) .cp-playlist .play-list-click-check {
  inline-size: 24px;
  block-size: 24px;
  margin: .04rem 0 0 !important;
  border-width: 1.5px;
  box-shadow: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(227, 146, 47, .18);
}

html:has(.cp-cinema) .cp-playlist .play-list-click-check:checked,
html:has(.cp-cinema) .cp-playlist .play-list-click-check[data-completed="true"] {
  box-shadow: none;
}

html:has(.cp-cinema) .cp-playlist .play-list-click {
  flex: 1 1 0;
  min-inline-size: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: .46rem;
  row-gap: .08rem;
  align-items: baseline;
  inline-size: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(227, 146, 47, .18);
}

html:has(.cp-cinema) .cp-playlist .play-list-click .h6 {
  min-inline-size: 0;
  font-size: .88rem;
  line-height: 1.32;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
}

html:has(.cp-cinema) .cp-playlist .play-list-sum {
  margin-block-start: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: .7rem;
  line-height: 1.2;
  white-space: nowrap;
}

html:has(.cp-cinema) .cp-playlist .play-list-sum::before {
  font-size: .72rem;
}

html:has(.cp-cinema) .cp-playlist .active-video {
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) {
  border-inline-start: 3px solid var(--cp-gold-2);
  background: rgba(227, 146, 47, .13);
  padding-inline-start: .34rem;
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-click .h6 {
  color: #FFCE92 !important;
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-sum {
  color: #FFCE92 !important;
}

html:has(.cp-cinema) .cp-tools {
  gap: .32rem;
  padding: .36rem .42rem .5rem;
}

html:has(.cp-cinema) .cp-tool-files,
html:has(.cp-cinema) .cp-tool-exams {
  padding: .54rem .65rem;
  border-radius: 10px;
  font-size: .82rem;
}

/* Course player responsive screen modes */
html:has(.cp-cinema) body {
  overflow-x: hidden;
  overflow-x: clip;
}

@media (min-width: 1400px) {
  html:has(.cp-cinema) .content-wrapper .card {
    max-inline-size: 1480px;
    margin-inline: auto;
  }

  html:has(.cp-cinema) .card-body.row.g-3 {
    --bs-gutter-x: 1.35rem;
    --bs-gutter-y: 1.1rem;
  }

  html:has(.cp-cinema) .cp-cinema {
    padding: 1rem 1rem 0;
  }

  html:has(.cp-cinema) .cp-cinema iframe {
    min-height: min(56svh, 560px);
  }

  html:has(.cp-cinema) .stick-top.cp-playlist,
  html:has(.cp-cinema) .stick-top.cp-playlist.course-content-fixed {
    max-height: calc(100svh - 92px);
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  html:has(.cp-cinema) .card-body.row.g-3 {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  }

  html:has(.cp-cinema) .cp-head {
    gap: .85rem !important;
  }

  html:has(.cp-cinema) .cp-title {
    font-size: 1.62rem;
    line-height: 1.32;
  }

  html:has(.cp-cinema) .cp-progress {
    min-inline-size: 184px;
  }

  html:has(.cp-cinema) .cp-cinema {
    padding: .72rem .72rem 0;
  }

  html:has(.cp-cinema) .cp-cinema iframe {
    min-height: min(48svh, 430px);
  }

  html:has(.cp-cinema) .stick-top.cp-playlist,
  html:has(.cp-cinema) .stick-top.cp-playlist.course-content-fixed {
    max-height: calc(100svh - 78px);
    padding-block: .12rem .36rem;
    padding-inline-start: 0;
    padding-inline-end: .24rem;
  }

  html:has(.cp-cinema) .cp-playlist .accordion-item,
  html:has(.cp-cinema) .cp-playlist .accordion-item.play-list-sum-min {
    margin-block-end: .62rem !important;
  }

  html:has(.cp-cinema) .cp-playlist .accordion-button,
  html:has(.cp-cinema) .cp-playlist .accordion-button.collapsed {
    min-block-size: 50px;
    padding-block: .44rem;
  }
}

@media (max-width: 991.98px) {
  html:has(.cp-cinema) .card-body.row.g-3 {
    --bs-gutter-y: 1rem;
  }

  html:has(.cp-cinema) .cp-head {
    gap: .85rem !important;
  }

  html:has(.cp-cinema) .cp-progress {
    inline-size: 100%;
    min-inline-size: 0;
    margin-block-start: .12rem;
  }

  html:has(.cp-cinema) .cp-cinema {
    padding: .62rem .62rem 0;
    border-radius: 18px;
  }

  html:has(.cp-cinema) .cp-cinema iframe {
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  html:has(.cp-cinema) .cp-cinema .plyr-video-iframe,
  html:has(.cp-cinema) .cp-cinema .plyr-video-iframe iframe,
  html:has(.cp-cinema) .cp-cinema .plyr,
  html:has(.cp-cinema) .cp-cinema video {
    border-radius: 12px;
  }

  html:has(.cp-cinema) .stick-top.cp-playlist,
  html:has(.cp-cinema) .stick-top.cp-playlist.course-content-fixed,
  html:has(.cp-cinema) .cp-playlist {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  html:has(.cp-cinema) .cp-search {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + .5rem);
    z-index: 15;
    margin-block: .15rem .65rem;
  }

  html:has(.cp-cinema) .cp-playlist .accordion-button,
  html:has(.cp-cinema) .cp-playlist .accordion-button.collapsed {
    min-block-size: 56px;
  }

  html:has(.cp-cinema) .cp-cinema.cp-mini {
    inline-size: min(46vw, 240px) !important;
    width: auto !important;
    min-inline-size: 168px;
    inset-inline-start: calc(env(safe-area-inset-left, 0px) + .75rem);
    inset-block-end: calc(env(safe-area-inset-bottom, 0px) + .75rem);
    padding: .25rem;
    border-radius: 14px;
  }
}

@media (max-width: 575.98px) {
  html:has(.cp-cinema) .content-wrapper {
    padding-inline: .55rem;
  }

  html:has(.cp-cinema) .content-wrapper .card {
    border-radius: 14px;
  }

  html:has(.cp-cinema) .content-wrapper .card > .card-body {
    padding: .75rem !important;
  }

  html:has(.cp-cinema) .cp-eyebrow {
    margin-block-end: .4rem;
  }

  html:has(.cp-cinema) .cp-title {
    font-size: 1.28rem;
    line-height: 1.32;
  }

  html:has(.cp-cinema) .cp-desc {
    font-size: .88rem;
    line-height: 1.55;
  }

  html:has(.cp-cinema) .cp-progress-label {
    align-items: flex-start;
    gap: .35rem;
  }

  html:has(.cp-cinema) .cp-progress-label span:first-child {
    min-inline-size: 0;
  }

  html:has(.cp-cinema) .cp-progress .progress {
    height: 7px;
  }

  html:has(.cp-cinema) .cp-cinema {
    padding: .45rem .45rem 0;
    border-radius: 14px;
  }

  html:has(.cp-cinema) .cp-cinema .plyr-video-iframe,
  html:has(.cp-cinema) .cp-cinema .plyr-video-iframe iframe,
  html:has(.cp-cinema) .cp-cinema .plyr,
  html:has(.cp-cinema) .cp-cinema video {
    border-radius: 10px;
  }

  html:has(.cp-cinema) .cp-nowbar {
    gap: .45rem;
    padding: .55rem .18rem .62rem;
  }

  html:has(.cp-cinema) .cp-nowbar-ico {
    inline-size: 30px;
    block-size: 30px;
  }

  html:has(.cp-cinema) .cp-nowbar .textvideo {
    font-size: .86rem;
  }

  html:has(.cp-cinema) .cp-lesson-nav {
    position: sticky;
    bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem);
    z-index: 12;
    gap: .35rem;
    margin-block-start: .75rem;
    padding: .42rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  html.dark-style:has(.cp-cinema) .cp-lesson-nav {
    background: rgba(47, 51, 73, .96);
  }

  html:has(.cp-cinema) .cp-nav-btn {
    min-block-size: 44px;
    padding: .5rem .62rem;
    font-size: .84rem;
  }

  html:has(.cp-cinema) .cp-lesson-indicator {
    flex: 0 1 auto;
    max-inline-size: 6.6rem;
    font-size: .72rem;
    line-height: 1.15;
  }

  html:has(.cp-cinema) .cp-search {
    margin-block: .1rem .55rem;
    padding-inline-start: .55rem;
    padding-inline-end: .5rem;
    border-radius: 12px;
  }

  html:has(.cp-cinema) .cp-playlist .accordion-item,
  html:has(.cp-cinema) .cp-playlist .accordion-item.play-list-sum-min {
    margin-block-end: .58rem !important;
    border-radius: 12px !important;
  }

  html:has(.cp-cinema) .cp-playlist .accordion-button,
  html:has(.cp-cinema) .cp-playlist .accordion-button.collapsed {
    min-block-size: 54px;
    padding-block: .5rem;
    padding-inline-start: .54rem;
    padding-inline-end: .42rem;
  }

  html:has(.cp-cinema) .cp-playlist .accordion-button::after {
    inline-size: 20px;
    block-size: 20px;
    margin-inline-start: .32rem;
  }

  html:has(.cp-cinema) .cp-playlist .cp-chapter-name {
    font-size: .88rem;
    line-height: 1.3;
  }

  html:has(.cp-cinema) .cp-playlist .cp-chapter-progress {
    gap: .22rem;
    margin-block: .18rem .02rem;
  }

  html:has(.cp-cinema) .cp-playlist .cp-chapter-meta {
    gap: .22rem;
    row-gap: .18rem;
  }

  html:has(.cp-cinema) .cp-playlist .cp-chapter-duration,
  html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining,
  html:has(.cp-cinema) .cp-playlist .cp-count {
    padding: .05rem .36rem;
    font-size: .66rem;
  }

  html:has(.cp-cinema) .cp-playlist .accordion-body {
    padding-block: .34rem .38rem !important;
    padding-inline-start: .18rem !important;
    padding-inline-end: .22rem !important;
  }

  html:has(.cp-cinema) .cp-playlist .accordion-body .form-check {
    min-block-size: 48px;
    gap: .36rem;
    padding-block: .36rem;
    padding-inline-start: .16rem;
    padding-inline-end: .24rem;
  }

  html:has(.cp-cinema) .cp-playlist .play-list-click {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .16rem;
    align-items: start;
  }

  html:has(.cp-cinema) .cp-playlist .play-list-sum {
    justify-self: start;
  }

  html:has(.cp-cinema) .cp-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: .18rem;
  }

  html:has(.cp-cinema) .cp-tool-files,
  html:has(.cp-cinema) .cp-tool-exams {
    min-block-size: 42px;
  }

  html:has(.cp-cinema) .cp-cinema.cp-mini {
    inline-size: min(64vw, 220px) !important;
    min-inline-size: 152px;
    inset-inline-start: calc(env(safe-area-inset-left, 0px) + .55rem);
    inset-block-end: calc(env(safe-area-inset-bottom, 0px) + .55rem);
  }
}

@media (hover: none) and (pointer: coarse) {
  html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:hover {
    padding-inline-start: .18rem;
  }

  html:has(.cp-cinema) .cp-nav-btn:hover:not(:disabled),
  html:has(.cp-cinema) .cp-btn-gold:hover,
  html:has(.cp-cinema) .cp-btn-ghost:hover {
    transform: none;
  }
}

/* Course player dark mode: keep it tied to the active theme skin. */
html.dark-style:has(.cp-cinema) {
  --cp-paper: #16181B;
  --cp-paper-2: #101113;
  --cp-line: rgba(255, 255, 255, .10);
  --cp-ink: #E8EAEE;
  --cp-ink-2: #A8AFBA;
  --cp-gold: #E3922F;
  --cp-gold-2: #D98A2B;
  --cp-gold-deep: #F0A860;
  --cp-done: #168354;
  --cp-dark: #0A0B0C;
  --cp-dark-2: #050506;
  --cp-soft-panel: rgba(22, 24, 27, .88);
  --cp-soft-panel-2: rgba(16, 17, 19, .92);
  --cp-soft-line: rgba(255, 255, 255, .10);
  --cp-soft-shadow: 0 24px 54px -34px rgba(0, 0, 0, .86);
}

html.dark-style[data-skin^="theme-bordered"]:has(.cp-cinema) {
  --cp-line: rgba(255, 255, 255, .17);
  --cp-soft-line: rgba(255, 255, 255, .17);
  --cp-soft-shadow: none;
}

html.dark-style[data-skin^="theme-semi-dark"]:has(.cp-cinema) {
  --cp-dark: #0A1322;
  --cp-dark-2: #060B14;
  --cp-paper: #151923;
  --cp-paper-2: #0D111B;
  --cp-line: rgba(116, 152, 255, .15);
  --cp-soft-line: rgba(116, 152, 255, .15);
}

html.dark-style[data-skin^="theme-cmp"]:has(.cp-cinema) {
  --cp-paper: #151210;
  --cp-paper-2: #0B0908;
  --cp-line: rgba(227, 146, 47, .18);
  --cp-dark: #070606;
  --cp-dark-2: #030303;
  --cp-soft-panel: rgba(21, 18, 16, .90);
  --cp-soft-panel-2: rgba(11, 9, 8, .94);
  --cp-soft-line: rgba(227, 146, 47, .18);
  --cp-soft-shadow: 0 24px 58px -34px rgba(0, 0, 0, .92);
}

html.dark-style:has(.cp-cinema) body,
html.dark-style:has(.cp-cinema) .layout-page,
html.dark-style:has(.cp-cinema) .content-wrapper,
html.dark-style:has(.cp-cinema) .th-page {
  background: #0E0F11 !important;
  color: var(--cp-ink-2);
}

html.dark-style:has(.cp-cinema) .content-wrapper .card {
  border-color: var(--cp-line) !important;
  background:
    radial-gradient(90% 110% at 88% -16%, rgba(227, 146, 47, .10), transparent 62%),
    linear-gradient(160deg, var(--cp-paper), var(--cp-paper-2) 78%) !important;
  box-shadow: var(--cp-soft-shadow) !important;
}

html.dark-style:has(.cp-cinema) .cp-title,
html.dark-style:has(.cp-cinema) .cp-chapter-name,
html.dark-style:has(.cp-cinema) .play-list-click .h6 {
  color: var(--cp-ink) !important;
}

html.dark-style:has(.cp-cinema) .cp-desc,
html.dark-style:has(.cp-cinema) .cp-progress-label,
html.dark-style:has(.cp-cinema) .cp-lesson-indicator,
html.dark-style:has(.cp-cinema) .play-list-sum,
html.dark-style:has(.cp-cinema) .cp-search-empty,
html.dark-style:has(.cp-cinema) .dropdown-item {
  color: var(--cp-ink-2) !important;
}

html.dark-style:has(.cp-cinema) .cp-eyebrow {
  color: var(--cp-gold-deep);
  background: rgba(227, 146, 47, .16);
  border-color: rgba(227, 146, 47, .34);
}

html.dark-style:has(.cp-cinema) .cp-progress,
html.dark-style:has(.cp-cinema) .cp-lesson-nav,
html.dark-style:has(.cp-cinema) .cp-license {
  border-color: var(--cp-soft-line);
  background: var(--cp-soft-panel);
  box-shadow: var(--cp-soft-shadow);
}

html.dark-style:has(.cp-cinema) .cp-progress .progress {
  background: rgba(255, 255, 255, .10);
}

html.dark-style:has(.cp-cinema) .cp-progress-label .pct {
  background-image: linear-gradient(140deg, #F0A860, var(--cp-gold-2));
}

html.dark-style:has(.cp-cinema) .cp-progress.is-complete .progress-bar,
html.dark-style:has(.cp-cinema) .cp-progress .progress-bar.is-complete,
html.dark-style:has(.cp-cinema) .cp-progress .progress-bar[data-complete="true"],
html.dark-style:has(.cp-cinema) .cp-progress .progress-bar[aria-valuenow="100"] {
  background: var(--cp-done) !important;
  background-image: none !important;
}

html.dark-style:has(.cp-cinema) .cp-progress.is-complete .progress,
html.dark-style:has(.cp-cinema) .cp-progress:has(.progress-bar.is-complete) .progress,
html.dark-style:has(.cp-cinema) .cp-progress:has(.progress-bar[data-complete="true"]) .progress,
html.dark-style:has(.cp-cinema) .cp-progress:has(.progress-bar[aria-valuenow="100"]) .progress {
  background: rgba(40, 167, 111, .18);
}

html.dark-style:has(.cp-cinema) .cp-progress.is-complete .cp-progress-label .pct,
html.dark-style:has(.cp-cinema) .cp-progress:has(.progress-bar.is-complete) .cp-progress-label .pct,
html.dark-style:has(.cp-cinema) .cp-progress:has(.progress-bar[data-complete="true"]) .cp-progress-label .pct,
html.dark-style:has(.cp-cinema) .cp-progress:has(.progress-bar[aria-valuenow="100"]) .cp-progress-label .pct {
  color: #40C982;
  -webkit-text-fill-color: #40C982;
}

html.dark-style:has(.cp-cinema) .cp-cinema {
  border-color: var(--cp-soft-line);
  background:
    radial-gradient(70% 130% at 88% -18%, rgba(227, 146, 47, .18), transparent 62%),
    linear-gradient(155deg, var(--cp-dark), var(--cp-dark-2) 82%);
  box-shadow: 0 40px 92px -42px rgba(0, 0, 0, .94);
}

html.dark-style:has(.cp-cinema) .cp-nowbar {
  border-color: rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .055);
}

html.dark-style:has(.cp-cinema) .cp-search {
  border-color: var(--cp-soft-line);
  background: var(--cp-soft-panel-2);
  box-shadow: 0 18px 34px -28px rgba(0, 0, 0, .88);
}

html.dark-style:has(.cp-cinema) .cp-search:focus-within {
  border-color: rgba(227, 146, 47, .52);
  box-shadow: 0 0 0 4px rgba(227, 146, 47, .12),
              0 18px 34px -28px rgba(0, 0, 0, .88);
}

html.dark-style:has(.cp-cinema) .cp-search-input {
  color: var(--cp-ink) !important;
}

html.dark-style:has(.cp-cinema) .cp-search-input::placeholder {
  color: rgba(168, 175, 186, .68);
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-item,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-item.play-list-sum-min {
  border-color: var(--cp-soft-line) !important;
  background:
    radial-gradient(96% 130% at 100% -16%, rgba(227, 146, 47, .10), transparent 58%),
    linear-gradient(155deg, var(--cp-paper), var(--cp-paper-2) 84%) !important;
  box-shadow: var(--cp-soft-shadow);
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button.collapsed {
  color: var(--cp-ink) !important;
  background: transparent !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed) {
  background: linear-gradient(270deg,
              rgba(227, 146, 47, .20),
              rgba(227, 146, 47, .06) 70%,
              transparent) !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button::after {
  border-color: rgba(227, 146, 47, .30);
  background-color: rgba(227, 146, 47, .13);
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-track {
  background: rgba(255, 255, 255, .13);
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-text {
  color: rgba(232, 234, 238, .66);
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-duration,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-count {
  border-color: rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .065);
  color: rgba(232, 234, 238, .74) !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining {
  color: #FFCE92 !important;
  border-color: rgba(227, 146, 47, .34);
  background: rgba(227, 146, 47, .16);
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining.is-complete {
  color: #40C982 !important;
  border-color: rgba(64, 201, 130, .30);
  background: rgba(22, 131, 84, .18);
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body {
  border-block-start-color: rgba(255, 255, 255, .08) !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:hover {
  background: rgba(227, 146, 47, .09);
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) {
  border-inline-start-color: var(--cp-gold-2);
  background: rgba(227, 146, 47, .15);
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-click .h6,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-sum {
  color: #FFCE92 !important;
}

html.dark-style:has(.cp-cinema) .play-list-click-check {
  border-color: rgba(227, 146, 47, .48);
  background-color: #101113;
  box-shadow: 0 0 0 4px rgba(5, 5, 6, .90);
}

html.dark-style:has(.cp-cinema) .play-list-click-check:checked,
html.dark-style:has(.cp-cinema) .play-list-click-check[data-completed="true"] {
  background-color: var(--cp-done);
  box-shadow: 0 0 0 4px rgba(5, 5, 6, .90),
              0 8px 18px -7px rgba(40, 167, 111, .76);
}

html.dark-style:has(.cp-cinema) .cp-btn-ghost,
html.dark-style:has(.cp-cinema) .cp-tool-files,
html.dark-style:has(.cp-cinema) .cp-tool-exams {
  border-color: var(--cp-soft-line);
  background: rgba(255, 255, 255, .055);
  color: var(--cp-ink) !important;
}

html.dark-style:has(.cp-cinema) .cp-btn-ghost:hover,
html.dark-style:has(.cp-cinema) .cp-tool-files:hover,
html.dark-style:has(.cp-cinema) .cp-tool-exams:hover {
  border-color: rgba(227, 146, 47, .38);
  background: rgba(227, 146, 47, .16);
  color: #FFCE92 !important;
}

html.dark-style:has(.cp-cinema) .dropdown-menu {
  border-color: var(--cp-soft-line);
  background: var(--cp-paper) !important;
  box-shadow: var(--cp-soft-shadow);
}

html.dark-style:has(.cp-cinema) .dropdown-item:hover {
  color: #FFCE92 !important;
  background: rgba(227, 146, 47, .13);
}

@media (max-width: 575.98px) {
  html.dark-style:has(.cp-cinema) .cp-lesson-nav {
    border-color: var(--cp-soft-line);
    background: rgba(22, 24, 27, .96);
  }

  html.dark-style[data-skin^="theme-cmp"]:has(.cp-cinema) .cp-lesson-nav {
    background: rgba(21, 18, 16, .96);
  }
}

/* Course player playlist: mirror the teacher sidebar skin. */
html:has(.cp-cinema) {
  --cp-side-card: rgba(255, 255, 255, .055);
  --cp-side-card-2: rgba(255, 255, 255, .025);
  --cp-side-row: rgba(255, 255, 255, .035);
  --cp-side-row-hover: rgba(227, 146, 47, .14);
  --cp-side-track: rgba(255, 255, 255, .12);
  --cp-side-chip: rgba(255, 255, 255, .065);
  --cp-side-chip-border: rgba(255, 255, 255, .12);
  --cp-side-check-bg: var(--th-side-bottom);
  --cp-side-check-ring: rgba(255, 255, 255, .08);
}

html.light-style[data-skin^="theme-default"]:has(.cp-cinema),
html.light-style[data-skin^="theme-bordered"]:has(.cp-cinema) {
  --cp-side-card: rgba(255, 255, 255, .68);
  --cp-side-card-2: rgba(255, 255, 255, .42);
  --cp-side-row: rgba(31, 46, 43, .035);
  --cp-side-row-hover: rgba(227, 146, 47, .13);
  --cp-side-track: rgba(31, 46, 43, .11);
  --cp-side-chip: rgba(31, 46, 43, .045);
  --cp-side-chip-border: rgba(31, 46, 43, .09);
  --cp-side-check-bg: #FFFFFF;
  --cp-side-check-ring: rgba(255, 255, 255, .72);
}

html:has(.cp-cinema) .stick-top.cp-playlist,
html:has(.cp-cinema) .stick-top.cp-playlist.course-content-fixed,
html:has(.cp-cinema) .cp-playlist {
  padding: .62rem .54rem .7rem !important;
  border: 1px solid var(--th-side-border) !important;
  border-radius: 18px;
  background:
    radial-gradient(120% var(--th-side-wash-h) at 50% 0%, var(--th-side-wash), transparent 60%),
    linear-gradient(180deg, var(--th-side-top) 0%, var(--th-side-bottom) 100%) !important;
  box-shadow: var(--th-side-shadow);
  color: var(--th-side-fg);
  scrollbar-color: var(--th-side-ico-hover) transparent;
}

html:has(.cp-cinema) .cp-search {
  margin-block: 0 .56rem;
  border-color: var(--th-side-rule);
  background: var(--cp-side-card);
  box-shadow: none;
}

html:has(.cp-cinema) .cp-search-input {
  color: var(--th-side-fg-hover) !important;
}

html:has(.cp-cinema) .cp-search-input::placeholder,
html:has(.cp-cinema) .cp-search-ico {
  color: var(--th-side-fg);
}

html:has(.cp-cinema) .cp-search-clear {
  color: var(--th-side-ico-hover);
  background: var(--th-side-ico-bg);
}

html:has(.cp-cinema) .cp-playlist .accordion-item,
html:has(.cp-cinema) .cp-playlist .accordion-item.play-list-sum-min {
  margin-block-end: .46rem !important;
  border-color: var(--th-side-rule) !important;
  background: linear-gradient(180deg, var(--cp-side-card), var(--cp-side-card-2)) !important;
  box-shadow: none;
}

html:has(.cp-cinema) .cp-playlist .accordion-button,
html:has(.cp-cinema) .cp-playlist .accordion-button.collapsed {
  color: var(--th-side-fg-hover) !important;
  background: transparent !important;
}

html:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed) {
  color: var(--th-side-active-fg) !important;
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .30),
              rgba(227, 146, 47, .08) 72%,
              transparent) !important;
  box-shadow: inset 0 0 0 1px rgba(227, 146, 47, .24);
}

html:has(.cp-cinema) .cp-playlist .accordion-button::after {
  border-color: var(--th-side-rule);
  background-color: var(--th-side-ico-bg);
}

html:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed)::after {
  border-color: rgba(227, 146, 47, .30);
  background-color: rgba(227, 146, 47, .16);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-name {
  color: var(--th-side-fg-hover) !important;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-track {
  background: var(--cp-side-track);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-fill {
  background: var(--th-side-ico-hover);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-text {
  color: var(--th-side-fg);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-duration,
html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining,
html:has(.cp-cinema) .cp-playlist .cp-count {
  border-color: var(--cp-side-chip-border);
  background: var(--cp-side-chip);
  color: var(--th-side-fg) !important;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-duration::before,
html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining::before,
html:has(.cp-cinema) .cp-playlist .cp-count i {
  color: var(--th-side-ico-hover);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining {
  color: var(--th-side-ico-hover) !important;
  border-color: rgba(227, 146, 47, .28);
  background: rgba(227, 146, 47, .13);
}

html:has(.cp-cinema) .cp-playlist .accordion-body {
  border-block-start-color: var(--th-side-rule) !important;
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check {
  border: 1px solid transparent;
  color: var(--th-side-fg);
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:hover {
  background: var(--cp-side-row-hover);
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) {
  border-color: rgba(227, 146, 47, .26);
  border-inline-start-color: var(--th-side-ico-hover);
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .27),
              rgba(227, 146, 47, .08) 78%,
              transparent);
  box-shadow: inset 0 0 0 1px rgba(227, 146, 47, .16);
}

html:has(.cp-cinema) .cp-playlist .play-list-click-check {
  border-color: rgba(227, 146, 47, .45);
  background-color: var(--cp-side-check-bg);
  box-shadow: 0 0 0 4px var(--cp-side-check-ring);
}

html:has(.cp-cinema) .cp-playlist .play-list-click .h6 {
  color: var(--th-side-fg-hover) !important;
}

html:has(.cp-cinema) .cp-playlist .play-list-sum {
  border-color: var(--cp-side-chip-border);
  background: var(--cp-side-chip);
  color: var(--th-side-fg) !important;
}

html:has(.cp-cinema) .cp-playlist .play-list-sum::before {
  color: var(--th-side-ico-hover);
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-click .h6,
html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-sum {
  color: var(--th-side-active-fg) !important;
}

html:has(.cp-cinema) .cp-tools {
  padding-inline: .06rem;
}

html:has(.cp-cinema) .cp-tool-files,
html:has(.cp-cinema) .cp-tool-exams {
  border-color: var(--th-side-rule);
  background: var(--cp-side-card);
  color: var(--th-side-fg-hover) !important;
  box-shadow: none;
}

html:has(.cp-cinema) .cp-tool-files i,
html:has(.cp-cinema) .cp-tool-exams i {
  color: var(--th-side-ico-hover);
}

html:has(.cp-cinema) .cp-tool-files:hover,
html:has(.cp-cinema) .cp-tool-exams:hover {
  border-color: rgba(227, 146, 47, .34);
  background: var(--cp-side-row-hover);
  color: var(--th-side-active-fg) !important;
  transform: none;
}

html.dark-style:has(.cp-cinema) .cp-search {
  border-color: var(--th-side-rule) !important;
  background: var(--cp-side-card) !important;
  box-shadow: none !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-item,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-item.play-list-sum-min {
  border-color: var(--th-side-rule) !important;
  background: linear-gradient(180deg, var(--cp-side-card), var(--cp-side-card-2)) !important;
  box-shadow: none !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button.collapsed {
  color: var(--th-side-fg-hover) !important;
  background: transparent !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed) {
  color: var(--th-side-active-fg) !important;
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .30),
              rgba(227, 146, 47, .08) 72%,
              transparent) !important;
  box-shadow: inset 0 0 0 1px rgba(227, 146, 47, .24);
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button::after {
  border-color: var(--th-side-rule);
  background-color: var(--th-side-ico-bg);
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-name {
  color: var(--th-side-fg-hover) !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-track {
  background: var(--cp-side-track);
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-fill {
  background: var(--th-side-ico-hover);
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-text {
  color: var(--th-side-fg);
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-duration,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-count {
  border-color: var(--cp-side-chip-border);
  background: var(--cp-side-chip);
  color: var(--th-side-fg) !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining {
  color: var(--th-side-ico-hover) !important;
  border-color: rgba(227, 146, 47, .28);
  background: rgba(227, 146, 47, .13);
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body {
  border-block-start-color: var(--th-side-rule) !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:hover {
  background: var(--cp-side-row-hover);
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) {
  border-color: rgba(227, 146, 47, .26);
  border-inline-start-color: var(--th-side-ico-hover);
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .27),
              rgba(227, 146, 47, .08) 78%,
              transparent);
  box-shadow: inset 0 0 0 1px rgba(227, 146, 47, .16);
}

html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click-check {
  border-color: rgba(227, 146, 47, .45);
  background-color: var(--cp-side-check-bg);
  box-shadow: 0 0 0 4px var(--cp-side-check-ring);
}

html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click .h6 {
  color: var(--th-side-fg-hover) !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .play-list-sum {
  border-color: var(--cp-side-chip-border);
  background: var(--cp-side-chip);
  color: var(--th-side-fg) !important;
}

html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-click .h6,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-sum {
  color: var(--th-side-active-fg) !important;
}

html.dark-style:has(.cp-cinema) .cp-tool-files,
html.dark-style:has(.cp-cinema) .cp-tool-exams {
  border-color: var(--th-side-rule);
  background: var(--cp-side-card);
  color: var(--th-side-fg-hover) !important;
  box-shadow: none;
}

html.dark-style:has(.cp-cinema) .cp-tool-files:hover,
html.dark-style:has(.cp-cinema) .cp-tool-exams:hover {
  border-color: rgba(227, 146, 47, .34);
  background: var(--cp-side-row-hover);
  color: var(--th-side-active-fg) !important;
}

/* Course playlist polish: compact sidebar-like rows. */
html:has(.cp-cinema) {
  --cp-side-done: #168354;
  --cp-side-done-soft: rgba(22, 131, 84, .13);
  --cp-side-active-fill: rgba(227, 146, 47, .12);
  --cp-side-active-fill-2: rgba(227, 146, 47, .035);
}

html.light-style[data-skin^="theme-default"]:has(.cp-cinema),
html.light-style[data-skin^="theme-bordered"]:has(.cp-cinema) {
  --cp-side-done: #168354;
  --cp-side-done-soft: rgba(22, 131, 84, .14);
  --cp-side-active-fill: rgba(227, 146, 47, .16);
  --cp-side-active-fill-2: rgba(227, 146, 47, .035);
}

html.dark-style:has(.cp-cinema) {
  --cp-side-done: #40C982;
  --cp-side-done-soft: rgba(22, 131, 84, .20);
}

html:has(.cp-cinema) .cp-playlist .accordion-item,
html:has(.cp-cinema) .cp-playlist .accordion-item.play-list-sum-min,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-item,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-item.play-list-sum-min {
  overflow: hidden;
  border-radius: 14px !important;
}

html:has(.cp-cinema) .cp-playlist .accordion-button,
html:has(.cp-cinema) .cp-playlist .accordion-button.collapsed,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button.collapsed {
  min-block-size: 48px;
  padding-block: .46rem;
  padding-inline-start: .58rem;
  padding-inline-end: .46rem;
}

html:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed),
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed) {
  background: linear-gradient(90deg,
              var(--cp-side-active-fill),
              var(--cp-side-active-fill-2) 76%,
              transparent) !important;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-name,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-name {
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: 0;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-progress,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-progress {
  gap: .34rem;
  margin-block: .2rem .08rem;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-track,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-track {
  block-size: 3px;
  border-radius: 999px;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-meta,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-meta {
  gap: .22rem;
  row-gap: .18rem;
  margin-block-start: .16rem;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-duration,
html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining,
html:has(.cp-cinema) .cp-playlist .cp-count,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-duration,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-count {
  padding: .045rem .38rem;
  font-size: .66rem;
  font-weight: 850;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining.is-complete,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining.is-complete {
  color: var(--cp-side-done) !important;
  border-color: rgba(22, 131, 84, .34);
  background: var(--cp-side-done-soft);
}

html:has(.cp-cinema) .cp-playlist .accordion-body,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body {
  padding-block: .32rem .36rem !important;
  padding-inline-start: .26rem !important;
  padding-inline-end: .28rem !important;
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check {
  min-block-size: 40px;
  margin-block-end: .035rem !important;
  padding-block: .28rem;
  padding-inline-start: .26rem;
  padding-inline-end: .34rem;
  border-radius: 11px;
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:hover,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:hover {
  padding-inline-start: .36rem;
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video),
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) {
  border-color: rgba(227, 146, 47, .24);
  border-inline-start-width: 3px;
  background: linear-gradient(90deg,
              var(--cp-side-active-fill),
              var(--cp-side-active-fill-2) 78%,
              transparent);
  box-shadow: none;
  padding-inline-start: .34rem;
}

html:has(.cp-cinema) .cp-playlist .play-list-click-check,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click-check {
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: .06rem !important;
  border-width: 1.5px;
}

html:has(.cp-cinema) .cp-playlist .play-list-click-check:hover,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click-check:hover {
  transform: none;
  border-color: var(--th-side-ico-hover);
}

html:has(.cp-cinema) .cp-playlist .play-list-click,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click {
  column-gap: .42rem;
  align-items: center;
}

html:has(.cp-cinema) .cp-playlist .play-list-click .h6,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click .h6 {
  font-size: .88rem;
  line-height: 1.28;
  font-weight: 850;
}

html:has(.cp-cinema) .cp-playlist .play-list-sum,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-sum {
  justify-self: start;
  min-inline-size: 3.05rem;
  padding: .04rem .32rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1.12;
  color: var(--cp-side-done) !important;
  border-color: rgba(22, 131, 84, .30);
  background: var(--cp-side-done-soft);
}

html:has(.cp-cinema) .cp-playlist .play-list-sum::before,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-sum::before {
  font-size: .68rem;
  color: var(--cp-side-done);
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-sum,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-sum {
  color: var(--th-side-ico-hover) !important;
  border-color: rgba(227, 146, 47, .34);
  background: rgba(227, 146, 47, .14);
}

@media (max-width: 575.98px) {
  html:has(.cp-cinema) .cp-playlist .accordion-body .form-check,
  html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check {
    min-block-size: 44px;
  }
}

/* Course playlist chapter header: hide total duration and refine collapse cue. */
html:has(.cp-cinema) .cp-playlist .accordion-button,
html:has(.cp-cinema) .cp-playlist .accordion-button.collapsed,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button.collapsed {
  column-gap: .34rem;
  padding-inline-end: .44rem;
}

html:has(.cp-cinema) .cp-playlist .accordion-button > .d-flex,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button > .d-flex {
  flex: 1 1 auto;
  min-inline-size: 0;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-duration,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-duration {
  display: none !important;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-duration::before,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-duration::before {
  content: none !important;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining {
  order: 1;
}

html:has(.cp-cinema) .cp-playlist .cp-count,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-count {
  order: 2;
}

html:has(.cp-cinema) .cp-playlist .accordion-button::after,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button::after {
  flex: 0 0 22px;
  inline-size: 22px;
  block-size: 22px;
  margin-inline-start: .18rem;
  margin-inline-end: 0;
  border: 1px solid var(--th-side-rule);
  border-radius: 999px;
  background-color: var(--th-side-ico-bg);
  background-position: center;
  background-size: .7rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  opacity: .86;
  transition: none;
}

html:has(.cp-cinema) .cp-playlist .accordion-button.collapsed::after,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button.collapsed::after {
  transform: rotate(0deg);
}

html:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed)::after,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed)::after {
  border-color: rgba(227, 146, 47, .34);
  background-color: rgba(227, 146, 47, .16);
  opacity: 1;
  transform: rotate(180deg);
}

/* Course playlist color audit: bind accents to the actual sidebar surface. */
html:has(.cp-cinema) {
  --cp-side-accent: var(--th-side-ico-hover);
  --cp-side-accent-soft: rgba(227, 146, 47, .15);
  --cp-side-accent-line: rgba(227, 146, 47, .32);
  --cp-side-active-fill: rgba(227, 146, 47, .18);
  --cp-side-active-fill-2: rgba(227, 146, 47, .055);
  --cp-side-done: #2FB776;
  --cp-side-done-soft: rgba(47, 183, 118, .17);
  --cp-side-done-border: rgba(47, 183, 118, .32);
}

html.light-style[data-skin^="theme-default"]:has(.cp-cinema),
html.light-style[data-skin^="theme-bordered"]:has(.cp-cinema) {
  --cp-side-accent: #B85B21;
  --cp-side-accent-soft: rgba(184, 91, 33, .12);
  --cp-side-accent-line: rgba(184, 91, 33, .26);
  --cp-side-active-fill: rgba(184, 91, 33, .14);
  --cp-side-active-fill-2: rgba(184, 91, 33, .035);
  --cp-side-done: #168354;
  --cp-side-done-soft: rgba(22, 131, 84, .14);
  --cp-side-done-border: rgba(22, 131, 84, .32);
}

html[data-skin^="theme-semi-dark"]:has(.cp-cinema) {
  --cp-side-accent: #F2B36A;
  --cp-side-accent-soft: rgba(242, 179, 106, .13);
  --cp-side-accent-line: rgba(242, 179, 106, .28);
  --cp-side-active-fill: rgba(242, 179, 106, .15);
  --cp-side-active-fill-2: rgba(242, 179, 106, .045);
  --cp-side-done: #2FB776;
  --cp-side-done-soft: rgba(47, 183, 118, .17);
  --cp-side-done-border: rgba(47, 183, 118, .32);
}

html[data-skin^="theme-cmp"]:has(.cp-cinema),
html.dark-style:has(.cp-cinema) {
  --cp-side-accent: #FFCE92;
  --cp-side-accent-soft: rgba(227, 146, 47, .16);
  --cp-side-accent-line: rgba(227, 146, 47, .34);
  --cp-side-active-fill: rgba(227, 146, 47, .19);
  --cp-side-active-fill-2: rgba(227, 146, 47, .055);
  --cp-side-done: #2FB776;
  --cp-side-done-soft: rgba(47, 183, 118, .18);
  --cp-side-done-border: rgba(47, 183, 118, .34);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-fill,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-progress .cp-cp-fill {
  background: var(--cp-side-accent);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining:not(.is-complete),
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining:not(.is-complete) {
  color: var(--cp-side-accent) !important;
  border-color: var(--cp-side-accent-line);
  background: var(--cp-side-accent-soft);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining.is-complete,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining.is-complete {
  color: var(--cp-side-done) !important;
  border-color: var(--cp-side-done-border);
  background: var(--cp-side-done-soft);
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-remaining::before,
html:has(.cp-cinema) .cp-playlist .cp-count i,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-remaining::before,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-count i {
  color: var(--cp-side-accent);
}

html:has(.cp-cinema) .cp-playlist .play-list-click-check,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click-check {
  border-color: var(--cp-side-accent-line);
}

html:has(.cp-cinema) .cp-playlist .play-list-click-check:hover,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click-check:hover {
  border-color: var(--cp-side-accent);
}

html:has(.cp-cinema) .cp-playlist .play-list-sum,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-sum {
  color: var(--cp-side-done) !important;
  border-color: var(--cp-side-done-border);
  background: var(--cp-side-done-soft);
}

html:has(.cp-cinema) .cp-playlist .play-list-sum::before,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-sum::before {
  color: var(--cp-side-done);
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video),
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) {
  border-color: var(--cp-side-accent-line);
  border-inline-start-color: var(--cp-side-accent);
}

html:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-sum,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-body .form-check:has(.active-video) .play-list-sum {
  color: var(--cp-side-accent) !important;
  border-color: var(--cp-side-accent-line);
  background: var(--cp-side-accent-soft);
}

html:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed)::after,
html.dark-style:has(.cp-cinema) .cp-playlist .accordion-button:not(.collapsed)::after {
  border-color: var(--cp-side-accent-line);
  background-color: var(--cp-side-accent-soft);
}

/* ==========================================================================
   عقدة الإتمام — تصحيح بهتانها (feedback المستخدم: الحلقات باهتة)   2026-08-20
   --------------------------------------------------------------------------
   طبقتا «مرآة السايدبار» و«تدقيق الألوان» أعلاه خفّتا حلقة العقدة إلى
   ‎--cp-side-accent-line‎ (‎.26‎ على اللوح الأبيض في الافتراضي/المؤطّر) فكادت
   تختفي، ودهست خلفيةَ القرص الأخضر للدرس المنجَز بأبيض (‎--cp-side-check-bg‎)
   بوزنٍ مساوٍ ووِراثةِ الترتيب — فبقيت علامة ✓ البيضاء على أبيض، غيرَ مرئية.

   الإصلاح: حلقةٌ أوضح للعقدة القادمة (‎--cp-node-ring‎ لكل ثيم)، وإعادةُ القرص
   الأخضر الصريح للمنجَز (‎--cp-side-done‎ الذي عُرّف أصلاً لهذا). يأتي آخرَ
   القسم فيغلب بالترتيب دون ‎!important‎. الخطّافات محفوظة (play-list-click-check).
   ========================================================================== */
html:has(.cp-cinema)                                { --cp-node-ring: rgba(227, 146, 47, .55); }
html.light-style[data-skin^="theme-default"]:has(.cp-cinema),
html.light-style[data-skin^="theme-bordered"]:has(.cp-cinema) { --cp-node-ring: rgba(184, 91, 33, .5); }
html[data-skin^="theme-semi-dark"]:has(.cp-cinema)  { --cp-node-ring: rgba(242, 179, 106, .5); }

/* العقدة القادمة: حلقة صريحة بدل الخافتة */
html:has(.cp-cinema) .cp-playlist .play-list-click-check,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click-check {
  border-width: 2px;
  border-color: var(--cp-node-ring);
  background-color: var(--cp-side-check-bg);
}

html:has(.cp-cinema) .cp-playlist .play-list-click-check:hover,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click-check:hover {
  border-color: var(--cp-side-accent);
  background-color: var(--cp-side-accent-soft);
}

/* الدرس المنجَز: قرص أخضر صريح بعلامة ✓ بيضاء (كان القرص قد فقد خضرته) */
html:has(.cp-cinema) .cp-playlist .play-list-click-check:checked,
html:has(.cp-cinema) .cp-playlist .play-list-click-check[data-completed="true"],
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click-check:checked,
html.dark-style:has(.cp-cinema) .cp-playlist .play-list-click-check[data-completed="true"] {
  border-color: transparent;
  background-color: var(--cp-side-done);
  box-shadow: 0 0 0 3px var(--cp-side-check-ring),
              0 6px 15px -6px rgba(22, 131, 84, .55);
}

/* ==========================================================================
   إعادة «مجموع وقت المعيار» إلى ترويسة الفصل   2026-08-20
   --------------------------------------------------------------------------
   الـJS (course-player.js: refreshChapterDuration) يحسب مجموع مدد الدروس
   ويضعه في ‎.cp-chapter-duration‎، لكن كتلة «تلميع الترويسة» أعلاه أخفته
   بـ‎display:none‎ وأطفأت أيقونته بـ‎content:none‎. المستخدم طلب إعادته.
   نعيده هنا (بعد كتلة الإخفاء فيغلب) بحبّةٍ محايدة وأيقونة ساعة، مرتّباً
   أولاً قبل «الباقي» و«العدد». الخطّاف ‎.cp-chapter-duration‎ محفوظ.
   ========================================================================== */
html:has(.cp-cinema) .cp-playlist .cp-chapter-duration,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-duration {
  display: inline-flex !important;
  align-items: center;
  gap: .2rem;
  order: 0;
}

html:has(.cp-cinema) .cp-playlist .cp-chapter-duration::before,
html.dark-style:has(.cp-cinema) .cp-playlist .cp-chapter-duration::before {
  content: "\ea70" !important;          /* ti-clock */
  font-family: "tabler-icons" !important;
  font-weight: 400;
  color: var(--cp-side-accent);
}

/* ==========================================================================
   24. توحيد «العنصر النشط» في سايدبارات البوابات كلها   2026-08-20
   --------------------------------------------------------------------------
   كان الشكل يختلف من صفحة لأخرى لأن ثلاث طبقات تتنازع عليه والغلبة تتبدل
   حسب الملفات المحملة: teacher-home.css (تدرج فاتح + شريط 3px على الرابط)
   يحمل في بوابات المستندات فقط، وdocs-theme.css (تعبئة صلبة ونص أبيض على
   الرابط وأبنائه) يغلب حيث لا يقهره أحد، وكل كتلة كسوة (th-teacher /
   ph-menu / cvt-scope / th-doc) تعيد تعريفه بقيم متقاربة لا متطابقة.

   هذا القسم هو المرجع الواحد: يأتي آخر الملف بوزن (1,5,1) فيغلب كل ما
   سبق عند التساوي، ويثبت: قرص متدرج ناعم + حلقة نحاسية + أيقونة بيضاء
   على بلاطة نحاسية + شريط توهج واحد على حافة البداية داخل القرص.
   الهوامش تبقى لكل عائلة (الأشقاء يتحاذون بها) فلا تدرج هنا.
   ========================================================================== */

html.th-teacher #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle),
html:has(.ph-menu) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle),
html:has(.cvt-scope) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle),
html:has(.th-doc) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) {
  position: relative;
  background: linear-gradient(90deg,
              rgba(227, 146, 47, .34),
              rgba(227, 146, 47, .10) 72%,
              transparent) !important;
  color: var(--th-side-active-fg, #B85B21) !important;
  border-radius: 12px !important;
  padding-inline: .8rem !important;
  box-shadow: inset 0 0 0 1px rgba(227, 146, 47, .30) !important;
}

/* نص البند يرث لون الرابط — docs-theme.css سطر 113 يفرض عليه #fff فيبهت
   على القرص الناعم في البوابات التي لا يحمل فيها teacher-home.css */
html.th-teacher #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) div,
html:has(.ph-menu) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) div,
html:has(.cvt-scope) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) div,
html:has(.th-doc) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) div {
  color: inherit !important;
}

/* الأيقونة: بيضاء على بلاطة نحاسية متوهجة */
html.th-teacher #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon,
html:has(.ph-menu) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon,
html:has(.cvt-scope) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon,
html:has(.th-doc) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon {
  color: #FFFFFF !important;
  background: linear-gradient(140deg, #E3922F, #C9741C) !important;
  box-shadow: 0 8px 18px -7px rgba(227, 146, 47, .70) !important;
}

/* شريط التوهج: نسخة واحدة على ::before الرابط، داخل القرص عند حافة البداية
   (الرابط overflow: hidden فأي موضع خارجه يقص كما كان يحدث في ph-menu) */
html.th-teacher #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle)::before,
html:has(.ph-menu) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle)::before,
html:has(.cvt-scope) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle)::before,
html:has(.th-doc) #layout-menu .menu-inner .menu-item.active > .menu-link:not(.menu-toggle)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: auto;
  inset-block: 24%;
  top: 24%; bottom: 24%;
  inline-size: 4px;
  border-radius: 100px;
  background: linear-gradient(180deg, #FFD9A3, #E3922F 55%, #C9741C);
  box-shadow: 0 0 12px rgba(227, 146, 47, .75);
}

/* ── قوائم زجاجية ── */
.dropdown-menu {
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .08),
              0 1px 3px rgba(0, 0, 0, .04);
}
html.dark-style .dropdown-menu {
  background: rgba(40, 44, 52, .72) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .32),
              0 1px 3px rgba(0, 0, 0, .18);
}

/* مؤشر Vuexy الأصلي على البند نفسه (وشريط cvt-scope المكرر) يطفأ —
   الشريط الموحد أعلاه هو الوحيد */
html.th-teacher #layout-menu .menu-inner > .menu-item.active::before,
html:has(.ph-menu) #layout-menu .menu-inner > .menu-item.active::before,
html:has(.cvt-scope) #layout-menu .menu-inner > .menu-item.active::before,
html:has(.th-doc) #layout-menu .menu-inner > .menu-item.active::before {
  content: none !important;
}
