/* generated-from-size: 534069 */
/* ملف مولد آليا من custom-overrides.css — حزمة نطاق «auth»
   لا تحرره يدويا؛ عدل الأصل ثم أعد التوليد:
   php storage/app/css-tools/split-custom-overrides.php --write */

@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-م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;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   هوية الثيمات الأربعة على صفحة المستند — صقل يمنح كل ثيم سببا ليختار
   ─────────────────────────────────────────────────────────────────────────
   • الافتراضي  — نعومة وارتفاع: ظل منخفض دافئ، حد باهت شفاف.
   • مؤطر     — كل شيء معرف بالخط: يذهب الظل، ويحضر الحد الرقيق،
                 وفواصل السبيدر تتوضح (لكن الفاصل تحت آخر مقرر يحذف كي لا
                 يبدو خيطا معلقا قبل زر إضافة مقرر).
   • شبه داكن  — التباين بالعمق: ظل كحلي هادئ يوازن حرارة الصفحة مع سبيدر
                 القمر الغامق فيبدو الجانبان من كوكب واحد لا كوكبين.
   • نحاسي    — سمة الهوية: طوق نحاسي دقيق حول الورقة وظل حار لتشع
                 بذاتها لا بضوءها الشمالي.
   الاتفاق العام: خصائص السطح (الحد/الظل) للورقة وحدها لا لداخل الأقسام،
   وفواصل السبيدر عبر ‎--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. إنفاذ الخطين — كتلة مشتركة أخيرة   ✅ مفعلة
   =============================================================================
   لماذا؟ خط '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);
}

/* ==========================================================================
   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;
}