/* =====================================================================
   TEACHER HOME — لوحة المعلم (front-doc/*/page/home-start)
   يعتمد توكنات docs-theme.css (--brand / --dt-*). RTL، فاتح + زجاج + داكن.
   ===================================================================== */

/* خلفية شبكية حيّة — لازمة ليظهر أثر الزجاج المصنفر خلف البطاقات */
.th-wrap {
  padding: .9rem .7rem 1.8rem; border-radius: 24px;
  background:
    radial-gradient(620px 480px at 92% -4%, rgba(212, 110, 42, .30), transparent 55%),
    radial-gradient(560px 520px at -2% 18%, rgba(78, 168, 222, .24), transparent 55%),
    radial-gradient(720px 620px at 50% 112%, rgba(242, 181, 140, .26), transparent 55%),
    linear-gradient(180deg, #fdf8f3 0%, #eef3fa 100%);
}
html.dark-style .th-wrap {
  background:
    radial-gradient(620px 480px at 92% -4%, rgba(212, 110, 42, .26), transparent 55%),
    radial-gradient(560px 520px at -2% 18%, rgba(78, 168, 222, .20), transparent 55%),
    radial-gradient(720px 620px at 50% 112%, rgba(212, 110, 42, .18), transparent 55%),
    linear-gradient(180deg, #232838 0%, #1b2030 100%);
}

/* خلفية th-page المعمّمة أُزيلت — صفحات القالب تعتمد خلفية القالب الافتراضية،
   والرئيسية وحدها تحتفظ بتدرّج th-wrap أعلاه */

/* الخلفية الرئيسية لصفحات المعلم — أبيض مكسور (سمني/كريمي) بدل رمادي القالب */
html.light-style.docs-page body {
  background-color: #fbf8f1;
}

/* =====================================================================
   FROSTED CHROME — زجاج مصنفر متعدّد الطبقات للشريط الجانبي والناف بار
   يوحّد شخصية بطاقات th-tile / th-topbar مع كامل الإطار.
   يتجاوز premium-theme.css بنفس تخصيصه (ID + .class) لأن ملفنا يُحمَّل بعده.
   ===================================================================== */
/* الخلفيات تُترك لثيم Vuexy الأصلي: Default/Bordered → قائمة/نافبار بيضاء،
   Semi Dark → قائمة داكنة #242745 تلقائياً. لا نفرض خلفية زجاجية بعد الآن؛
   نكتفي بحدّ رفيع + ظل خفيف جداً للفصل (كسر التصاق الأسطح البيضاء). */
html.light-style { --th-chrome-border: rgba(16,24,40,.07); }
html.dark-style  { --th-chrome-border: rgba(255,255,255,.06); }

html.light-style #layout-menu.bg-menu-theme,
html.dark-style  #layout-menu.bg-menu-theme {
  border-inline-end: 1px solid var(--th-chrome-border) !important;
  box-shadow: -4px 0 16px rgba(16,24,40,.03);
}
html.light-style .layout-navbar,
html.light-style .layout-navbar.bg-body,
html.dark-style  .layout-navbar,
html.dark-style  .layout-navbar.bg-body {
  border-bottom: 1px solid var(--th-chrome-border) !important;
}

/* كسر اللون الأبيض: خلفية جسم رمادية ناعمة على كل صفحات المعلّم مهما كان الثيم،
   فلا يبدو Bordered سطحاً أبيض واحداً — الأسطح البيضاء (البطاقات/القائمة) تتمايز
   عنها كما في Default. */
html.light-style.docs-page body,
html.light-style.docs-page .layout-page {
  background-color: #f4f5f7 !important;
}

/* زر إغلاق القائمة الجانبية — يظهر فقط في وضع offcanvas على الشاشات الصغيرة */
.th-menu-close {
  position: absolute; top: .55rem; inset-inline-end: .55rem; z-index: 5;
  width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(212,110,42,.1); color: var(--brand, #D46E2A);
  border: 1px solid rgba(212,110,42,.2);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.th-menu-close:hover { background: var(--brand, #D46E2A); color: #fff; border-color: var(--brand, #D46E2A); transform: rotate(90deg); }
.th-menu-close:focus-visible { outline: 2px solid rgba(212,110,42,.5); outline-offset: 2px; }
html.dark-style .th-menu-close { background: rgba(212,110,42,.16); color: #F2B58C; border-color: rgba(212,110,42,.28); }
html.dark-style .th-menu-close:hover { background: var(--brand, #D46E2A); color: #fff; }

/* بانر التنبيه أعلى الصفحة — زجاج دافئ يماشي هوية الشريط */
.th-page .pt-1.sticky > .alert-warning,
.th-page > .pt-1 > .alert-warning {
  background: linear-gradient(135deg, rgba(255,246,235,.88), rgba(253,238,220,.72)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(212,110,42,.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(212,110,42,.08);
}
.th-page .pt-1.sticky > .alert-warning .alert-dismiss {
  width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: rgba(212,110,42,.1) !important; color: var(--brand-hover, #B85B21) !important;
  font-size: 1.15rem !important; line-height: 1 !important;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.th-page .pt-1.sticky > .alert-warning .alert-dismiss:hover {
  background: var(--brand, #D46E2A) !important; color: #fff !important; transform: rotate(90deg);
}
html.dark-style .th-page .pt-1.sticky > .alert-warning {
  background: linear-gradient(135deg, rgba(66,52,36,.72), rgba(52,42,30,.6)) !important;
  border-color: rgba(212,110,42,.32) !important;
}

/* شرائح «آخر ما فتح» — لمسة دافئة موحّدة مع هوية الصفحة */
.th-page .th-recent-item {
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(253,248,243,.62)) !important;
  border-color: rgba(212,110,42,.16) !important;
}
.th-page .th-recent-item:hover {
  border-color: rgba(212,110,42,.45) !important;
  box-shadow: 0 6px 14px rgba(212,110,42,.1);
}
html.dark-style .th-page .th-recent-item {
  background: linear-gradient(135deg, rgba(58,63,88,.62), rgba(45,50,70,.5)) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* =====================================================================
   SIDEBAR — العنصر النشط انتقل بكامله إلى قسم التوحيد «24» آخر
   custom-overrides.css (المرجع الوحيد لكل البوابات). النسخة التي كانت
   هنا صارت مقهورة بالكامل فحُذفت كي لا تضلّل من يعدّلها بلا أثر.
   في وضع الطوارئ ?nocustomcss=1 يسقط النشط لمظهر Vuexy الافتراضي — مقبول.
   ===================================================================== */

/* إضافة مقرر — بطاقة زجاجية منقّطة خضراء (مثل th-tile-add في /teacher/app) */
html.light-style #layout-menu .menu-link.text-success,
html.dark-style #layout-menu .menu-link.text-success {
  background: rgba(40,167,111,.1) !important;
  color: #28A76F !important;
  border: 1.5px dashed rgba(40,167,111,.45) !important;
  border-radius: 12px !important;
  margin: 6px !important;
  padding-inline: .85rem !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
html.light-style #layout-menu .menu-link.text-success:hover,
html.dark-style #layout-menu .menu-link.text-success:hover {
  background: rgba(40,167,111,.18) !important;
  border-color: #28A76F !important;
  transform: translateY(-1px);
}
#layout-menu .menu-link.text-success,
#layout-menu .menu-link.text-success .menu-icon,
#layout-menu .menu-link.text-success .fw-bold,
#layout-menu .menu-link.text-success > div { color: #28A76F !important; }
html.dark-style #layout-menu .menu-link.text-success {
  background: rgba(40,167,111,.14) !important;
  border-color: rgba(40,167,111,.5) !important;
}
html.dark-style #layout-menu .menu-link.text-success:hover {
  background: rgba(40,167,111,.22) !important;
}

/* =====================================================================
   COMPACT — تباعد رأسي مضغوط معمَّم لكل صفحات قالب المعلم
   يشمل: المحتوى (grid + list) وصفحات المستند (doc + units nav + filters)
   ===================================================================== */
.th-page .container-p-y.th-wrap { padding-top: .4rem !important; margin-top: 0 !important; }
.th-page .th-topbar { padding-top: 4px; padding-bottom: 4px; }
.th-page .th-content-grid { --bs-gutter-y: .5rem; }
.th-page .th-doc.th-wrap { margin-top: .4rem !important; padding-top: .5rem !important; }
.th-page .th-units-nav { margin: .25rem 0 .35rem !important; }
.th-page .th-filters.th-filters-bottom { margin: .55rem 0 .2rem !important; }
@media (max-width: 640px) {
  .th-page .th-doc.th-wrap { margin-top: .3rem !important; padding-top: .4rem !important; }
}

/* بلاطات صفحة محتوى المعلم أصغر وأقلّ ارتفاعاً — نطاقٌ للصفحة وحدها كي لا
   يمسّ صفحة بيت المعلم (home-start) التي تستخدم .th-tile خارج .th-content-grid.
   نُقلّص كسوة البطاقة والأيقونة والخط، ونُطبّق نفس التصغير في نطاق اللمس (<576px)
   لأنّ ثمّة قاعدة لاحقة في نفس الملف تعيد تكبيرها للجوّال. */
.th-page .th-content-grid .th-tile-card { padding: .55rem .65rem; border-radius: 14px; }
.th-page .th-content-grid .th-tile-ico   { width: 40px; height: 40px; font-size: 1.15rem; margin-bottom: .35rem; border-radius: 11px; }
.th-page .th-content-grid .th-tile-name  { font-size: .82rem; line-height: 1.32; }
.th-page .th-content-grid .th-tile-badge { font-size: .68rem; margin-top: .25rem; }
@media (max-width: 575.98px) {
  .th-page .th-content-grid .th-tile-card { padding: .6rem .55rem; border-radius: 13px; }
  .th-page .th-content-grid .th-tile-ico  { width: 42px; height: 42px; font-size: 1.2rem; margin-bottom: .35rem; }
  .th-page .th-content-grid .th-tile-name { font-size: .78rem; }
}

/* ---------------------------------------------------------------------
   1) بطاقة الترحيب (Hero)
   --------------------------------------------------------------------- */
.th-hero {
  position: relative; overflow: hidden; border-radius: 22px;
  padding: 1.6rem 1.8rem; margin-bottom: 1.3rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.4));
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 16px 44px rgba(16,24,40,.1), inset 0 1px 0 rgba(255,255,255,.7);
}
.th-hero::before { /* توهّج نحاسي */
  content: ""; position: absolute; inset-inline-end: -70px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,110,42,.16), transparent 70%); pointer-events: none;
}
.th-hero::after { /* توهّج أزرق */
  content: ""; position: absolute; inset-inline-start: -60px; bottom: -90px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(78,168,222,.12), transparent 70%); pointer-events: none;
}
.th-hero-avatar {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 84px; height: 84px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  box-shadow: 0 10px 24px rgba(212,110,42,.3);
}
.th-hero-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #fff; }
/* شارة أيقونة بديلة للأفتار (صفحات بلا مستخدم) */
.th-hero-badge {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 78px; height: 78px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; font-size: 2.1rem; color: #fff;
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21));
  box-shadow: 0 12px 26px rgba(212, 110, 42, .35);
}
/* زر ثانوي (شبح) */
.th-btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.3rem; border-radius: 12px;
  font-weight: 700; text-decoration: none; background: #fff; color: var(--brand-hover, #B85B21) !important;
  border: 1.5px solid rgba(212, 110, 42, .4); transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.th-btn-ghost:hover { background: var(--brand-soft, rgba(212,110,42,.1)); border-color: var(--brand, #D46E2A); color: var(--brand-hover, #B85B21) !important; transform: translateY(-1px); }
html.dark-style .th-btn-ghost { background: rgba(255,255,255,.04); color: #F2B58C !important; }

.th-hero-body { position: relative; z-index: 1; flex: 1; min-width: 220px; }
.th-hello { font-weight: 800; color: var(--dt-text, #1F2937); font-size: 1.5rem; margin: 0 0 .2rem; letter-spacing: -.2px; }
.th-hello .wave { display: inline-block; animation: th-wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }
@keyframes th-wave { 0%,60%,100%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(14deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} }
.th-quote { color: var(--brand-hover, #B85B21); font-weight: 600; margin: 0 0 .6rem; }
.th-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.th-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--brand-soft, rgba(212,110,42,.1)); border: 1px solid rgba(212,110,42,.18);
  color: var(--brand-hover, #B85B21); border-radius: 999px; padding: .3rem .8rem; font-size: .82rem; font-weight: 700;
}
.th-chip.is-slate { background: rgba(39,76,119,.08); border-color: rgba(39,76,119,.2); color: #274C77; }

/* ---------------------------------------------------------------------
   2) دعوة بنك الاختبارات (CTA)
   --------------------------------------------------------------------- */
/* CTA زجاجي فاتح — البرتقالي ينتقل إلى الزر فقط */
.th-cta {
  position: relative; overflow: hidden; border-radius: 18px; margin-bottom: 1.3rem;
  padding: 1.3rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  border-inline-start: 5px solid var(--brand, #D46E2A);
  box-shadow: 0 12px 30px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.th-cta::after { content:""; position:absolute; inset-inline-end:-50px; top:-60px; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle, rgba(212,110,42,.14), transparent 70%); pointer-events:none; }
.th-cta-text { position: relative; z-index: 1; }
.th-cta-text h5 { font-weight: 800; margin: 0 0 .2rem; color: var(--dt-text, #1F2937); }
.th-cta-text h5 i { color: var(--brand, #D46E2A); }
.th-cta-text p { margin: 0; color: var(--dt-text-2, #6B7280); font-size: .9rem; }
.th-cta-btn {
  position: relative; z-index: 1; overflow: hidden;
  display: inline-flex; align-items: center; gap: .55rem;
  background: linear-gradient(135deg, var(--brand, #D46E2A) 0%, var(--brand-hover, #B85B21) 100%);
  color: #fff !important; font-weight: 700; letter-spacing: .01em;
  padding: .65rem 1.35rem .65rem 1.15rem;
  border-radius: 999px; text-decoration: none; border: 0; cursor: pointer;
  box-shadow: 0 6px 16px rgba(212,110,42,.28), inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;
}
.th-cta-btn i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.18);
  font-size: 1rem; transition: transform .22s ease, background .22s ease;
}
.th-cta-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-100%); transition: transform .55s ease;
  pointer-events: none;
}
[dir="rtl"] .th-cta-btn::before { transform: translateX(100%); }
.th-cta-btn:hover {
  transform: translateY(-2px);
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(212,110,42,.4), inset 0 1px 0 rgba(255,255,255,.28);
}
.th-cta-btn:hover::before { transform: translateX(100%); }
[dir="rtl"] .th-cta-btn:hover::before { transform: translateX(-100%); }
.th-cta-btn:hover i { background: rgba(255,255,255,.3); transform: rotate(-8deg) scale(1.08); }
.th-cta-btn:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(212,110,42,.35); }
.th-cta-btn:focus-visible { outline: 3px solid rgba(212,110,42,.35); outline-offset: 3px; }

html.dark-style .th-cta { background: linear-gradient(135deg, rgba(58,63,88,.62), rgba(45,50,70,.5)); border-color: rgba(255,255,255,.1); }
html.dark-style .th-cta-text h5 { color: #E4E6F1; }
html.dark-style .th-cta-text p { color: rgba(228,230,241,.65); }

/* ---------------------------------------------------------------------
   3) عنوان قسم
   --------------------------------------------------------------------- */
.th-sec-title {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; color: var(--dt-text, #1F2937);
  margin: .3rem 0 .9rem;
  position: relative; padding-inline-start: .1rem;
}
.th-sec-title i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(212,110,42,.16), rgba(212,110,42,.06));
  color: var(--brand, #D46E2A); font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(212,110,42,.12);
}
.th-sec-title::after {
  content: ""; flex: 0 0 40px; height: 2px; margin-inline-start: .5rem;
  background: linear-gradient(90deg, rgba(212,110,42,.4), transparent);
  border-radius: 2px;
}
html.dark-style .th-sec-title i {
  background: linear-gradient(135deg, rgba(212,110,42,.22), rgba(212,110,42,.1));
  color: #F2B58C;
  box-shadow: inset 0 0 0 1px rgba(212,110,42,.2);
}
html.dark-style .th-sec-title::after {
  background: linear-gradient(90deg, rgba(242,181,140,.4), transparent);
}

/* ---------------------------------------------------------------------
   4) اختيار الفصل — أقراص (يحافظ على plan-option/plan-radio)
   --------------------------------------------------------------------- */
.th-semesters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.3rem; }
.th-semesters .plan-option {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  padding: 0; border-radius: 12px; cursor: pointer; margin: 0;
}
.th-semesters .plan-option .custom-control-input,
.th-semesters .plan-option .plan-radio { position: absolute; opacity: 0; pointer-events: none; }
.th-semesters .plan-option .custom-control-label {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; margin: 0;
  padding: .6rem 1.1rem; border-radius: 12px; font-weight: 700; color: var(--dt-text-2, #6B7280);
  border: 1.5px solid var(--dt-line, #E7EAF0);
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.th-semesters .plan-option .custom-control-label i { color: var(--brand, #D46E2A); font-size: 1.05rem; }
.th-semesters .plan-option.active .custom-control-label {
  color: var(--brand-hover, #B85B21);
  border-color: rgba(212,110,42,.35);
  background: linear-gradient(90deg, rgba(212,110,42,.18), rgba(212,110,42,.04));
  box-shadow: 0 4px 12px rgba(212,110,42,.12);
  font-weight: 700;
  position: relative;
}
.th-semesters .plan-option.active .custom-control-label::before {
  content: ""; position: absolute;
  inset-inline-start: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21));
}
.th-semesters .plan-option.active .custom-control-label i { color: var(--brand, #D46E2A); }
.th-semesters .plan-option.active { transform: none; }
html.dark-style .th-semesters .plan-option.active .custom-control-label {
  color: #F2B58C;
  background: linear-gradient(90deg, rgba(212,110,42,.28), rgba(212,110,42,.08));
  border-color: rgba(212,110,42,.4);
}

/* ---------------------------------------------------------------------
   5) بلاطات المقررات
   --------------------------------------------------------------------- */
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.4rem; }
.th-tile { display: block; text-decoration: none; height: 100%; }
.th-tile-card {
  height: 100%; border-radius: 16px; padding: .7rem .8rem; text-align: center;
  background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.4));
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 8px 22px rgba(16,24,40,.07);
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.th-tile:hover .th-tile-card { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16,24,40,.12); border-color: rgba(212,110,42,.4); }
.th-tile-ico {
  width: 44px; height: 44px; margin: 0 auto .45rem; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand, #D46E2A);
  transition: transform .22s ease;
}
.th-tile:hover .th-tile-ico { transform: scale(1.1) rotate(-4deg); }
/* تنقل لوحة المفاتيح (الأسهم بعد البحث) — حلقة تركيز واضحة */
.th-tile:focus-visible { outline: none; }
.th-tile:focus-visible .th-tile-card {
  border-color: rgba(212,110,42,.55);
  box-shadow: 0 0 0 3px rgba(212,110,42,.22), 0 10px 24px rgba(16,24,40,.1);
}
.th-tile-name { font-weight: 700; color: var(--dt-text, #1F2937); font-size: .9rem; margin: 0; line-height: 1.4; }
.th-tile-badge { display: inline-block; margin-top: .35rem; font-size: .72rem; font-weight: 700; color: #E5484D; }
/* بلاطة الإضافة */
.th-tile-add .th-tile-card { border-style: dashed; border-color: rgba(40,167,111,.4); background: rgba(40,167,111,.04); }
.th-tile-add .th-tile-ico { background: rgba(40,167,111,.12); color: #28A76F; }
.th-tile-add:hover .th-tile-card { border-color: #28A76F; }
.th-tile-add .th-tile-name { color: #28A76F; }
/* بلاطة الرخصة — لمسة مميّزة */
.th-tile-license .th-tile-ico { background: rgba(39,76,119,.1); color: #274C77; }

/* دخول متتابع لبطاقات الشبكة (يُفعّل بإضافة .th-enter عبر JS) */
.th-enter { animation: th-card-pop .5s cubic-bezier(.18,.89,.32,1.18) both; }
@media (prefers-reduced-motion: reduce) { .th-enter { animation: none; } }

/* حالة فارغة زجاجية — بديل تنبيه بوتستراب الباهت */
.th-empty {
  grid-column: 1 / -1; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; text-align: center; padding: 2.6rem 1.2rem; margin: .5rem 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.38));
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px dashed rgba(212,110,42,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.th-empty-ico {
  width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--brand, #D46E2A);
  background: var(--brand-soft, rgba(212,110,42,.1)); box-shadow: 0 6px 16px rgba(212,110,42,.12);
}
.th-empty-title { font-weight: 800; color: var(--dt-text, #1F2937); font-size: 1.02rem; }
.th-empty-sub { font-size: .86rem; color: var(--dt-text-2, #6B7280); max-width: 460px; line-height: 1.6; }
html.dark-style .th-empty { background: linear-gradient(135deg, rgba(58,63,88,.55), rgba(45,50,70,.42)); border-color: rgba(212,110,42,.3); }
html.dark-style .th-empty-title { color: #E4E6F1; }
html.dark-style .th-empty-sub { color: rgba(228,230,241,.7); }

/* صقل لمس الجوال — بطاقات أكبر مسافةً وأسهل نقراً */
@media (max-width: 575.98px) {
  .th-tile-card { padding: .9rem .6rem; border-radius: 14px; }
  .th-tile-ico { width: 46px; height: 46px; font-size: 1.3rem; margin-bottom: .5rem; }
  .th-tile-name { font-size: .82rem; }
  .th-tile:active .th-tile-card { transform: scale(.97); }
}

/* ---------------------------------------------------------------------
   6) ميزة جديدة: تثبيت المحتوى المفضّل + شارة جديد + عدّاد
   --------------------------------------------------------------------- */
.th-count { color: var(--dt-text-2, #6B7280); font-weight: 700; font-size: .9rem; }
.th-tile-wrap { position: relative; height: 100%; }
.th-fav {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .8); color: #b8bcc7; font-size: .95rem;
  box-shadow: 0 3px 8px rgba(16, 24, 40, .12);
  opacity: 0; transition: opacity .2s ease, color .2s ease, transform .2s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.th-tile-wrap:hover .th-fav,
.div-saleh.is-fav .th-fav { opacity: 1; }
.th-fav:hover { transform: scale(1.14); color: var(--brand, #D46E2A); }
.div-saleh.is-fav .th-fav { color: #f6cd82; }
.div-saleh.is-fav .th-tile-card { border-color: rgba(245, 166, 35, .5); box-shadow: 0 10px 24px rgba(245, 166, 35, .18); }
.th-new {
  position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3;
  background: #E5484D; color: #fff; font-size: .66rem; font-weight: 800;
  padding: .12rem .5rem; border-radius: 999px; box-shadow: 0 3px 8px rgba(229, 72, 77, .35);
}
html.dark-style .th-fav { background: rgba(47, 51, 73, .85); color: #6b7280; }
/* شاشات اللمس بلا تحويم — النجمة ظاهرة دائماً وبهدف نقر أكبر */
@media (pointer: coarse), (max-width: 991.98px) {
  .th-content-grid .th-fav { opacity: 1; width: 36px; height: 36px; font-size: 1.05rem; }
}
/* نبضة عند التبديل — على الأيقونة كي لا تتعارض مع transform التموضع */
@keyframes thFavPopKF { 40% { transform: scale(1.35); } }
.th-fav.th-fav-pop i { animation: thFavPopKF .4s cubic-bezier(.18,.89,.32,1.4); }

/* آخر ما فتحت + تظليل البحث */
.th-recent { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .7rem; margin-bottom: .6rem; }
.th-recent .th-sec-title { white-space: nowrap; }
.th-recent-row { display: flex; flex-wrap: wrap; gap: .45rem; flex: 1 1 auto; min-width: 0; }
.th-recent-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; border: 0; padding: 0;
  background: transparent; color: #9aa0b5; cursor: pointer; flex: 0 0 auto;
  transition: color .2s ease, background .2s ease;
}
.th-recent-clear:hover { color: #E5484D; background: rgba(229,72,77,.1); }
.th-recent-item {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: .78rem;
  color: var(--dt-text, #1F2937);
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.65); box-shadow: 0 4px 12px rgba(16,24,40,.05);
  transition: transform .2s ease, border-color .2s ease;
}
.th-recent-item:hover { transform: translateY(-2px); border-color: rgba(212,110,42,.45); color: var(--dt-text, #1F2937); }
.th-recent-item i { color: var(--brand, #D46E2A); font-size: .9rem; }
.th-hl { background: rgba(212,110,42,.18); color: var(--brand-hover, #B85B21); border-radius: 3px; padding: 0 1px; font-weight: 800; }
html.dark-style .th-recent-item { background: linear-gradient(135deg, rgba(58,63,88,.6), rgba(45,50,70,.5)); border-color: rgba(255,255,255,.08); color: #E4E6F1; }
html.dark-style .th-recent-item:hover { color: #E4E6F1; }
html.dark-style .th-recent-clear { color: #7d84a0; }
html.dark-style .th-recent-clear:hover { color: #E5484D; background: rgba(229,72,77,.14); }
html.dark-style .th-hl { background: rgba(212,110,42,.28); color: #F2B58C; }

/* شريط تعريفي زجاجي منخفض — عيّنات المحتوى */
.th-sample-note {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .9rem; margin-bottom: 1rem; border-radius: 12px;
  background: linear-gradient(135deg, rgba(212,110,42,.1), rgba(255,255,255,.35));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(212,110,42,.22);
  box-shadow: 0 6px 18px rgba(212,110,42,.08), inset 0 1px 0 rgba(255,255,255,.6);
  font-size: .85rem; color: var(--dt-text, #1F2937); line-height: 1.5;
}
.th-sample-note-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; font-size: 1.05rem; color: #fff;
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21));
  box-shadow: 0 4px 10px rgba(212,110,42,.3);
}
.th-sample-note-txt b { color: var(--brand-hover, #B85B21); font-weight: 800; }
html.dark-style .th-sample-note {
  background: linear-gradient(135deg, rgba(212,110,42,.18), rgba(58,63,88,.4));
  border-color: rgba(212,110,42,.3); color: #E4E6F1;
}
html.dark-style .th-sample-note-txt b { color: #F2B58C; }
@media (max-width: 575.98px) {
  .th-sample-note { font-size: .8rem; padding: .45rem .7rem; }
}

/* مربع بحث المحتوى — بجوار العدّاد */
.th-search {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .8rem; border-radius: 999px; min-width: 220px; max-width: 520px; flex: 1 1 260px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.65); box-shadow: 0 4px 12px rgba(16,24,40,.05);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.th-search:focus-within { border-color: rgba(212,110,42,.5); box-shadow: 0 6px 16px rgba(212,110,42,.12); }
.th-search-ico { color: var(--brand, #D46E2A); font-size: 1.05rem; flex-shrink: 0; }
.th-search-input { flex: 1; border: 0; outline: 0; background: transparent; font-size: .9rem; color: var(--dt-text, #1F2937); min-width: 0; }
.th-search-input::placeholder { color: var(--dt-text-2, #6B7280); }
html.dark-style .th-search { background: linear-gradient(135deg, rgba(58,63,88,.6), rgba(45,50,70,.5)); border-color: rgba(255,255,255,.08); }
html.dark-style .th-search-input { color: #E4E6F1; }
/* توزيع الشريط: العنوان يمين ثم يتبعه شريط الأدوات ممتدّاً ليملأ المسافة */
.th-topbar > .d-flex { flex: 1 1 auto; justify-content: flex-end; gap: .5rem; min-width: 0; }
.th-topbar > h5 { flex: 0 1 auto; }

/* الشريط العلوي الموحّد — زجاج قوي (بلا قوائم منسدلة داخله فآمن) */
.th-topbar {
  /* backdrop-filter ينشئ سياق تراص — بلا z-index تنغمر قائمة الترتيب تحت البلاطات */
  position: relative; z-index: 30;
  width: 100%; padding: .25rem .7rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
  -webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 12px 32px rgba(16,24,40,.1), inset 0 1px 0 rgba(255,255,255,.85);
}
.th-topbar h5 { font-size: 1.02rem; display: flex; align-items: center; flex-wrap: wrap; }
.th-topbar h5 a { color: var(--dt-text-2, #6B7280); text-decoration: none; transition: color .2s ease; }
.th-topbar h5 a:hover { color: var(--brand, #D46E2A); }
.th-topbar h5 .fw-bold { color: var(--dt-text, #1F2937); }
.th-topbar .th-count {
  display: inline-flex; align-items: center; justify-content: center; margin-inline-start: .4rem;
  background: var(--brand-soft, rgba(212,110,42,.12)); color: var(--brand-hover, #B85B21);
  border-radius: 999px; padding: .06rem .55rem; font-size: .76rem; font-weight: 800;
}
html.dark-style .th-topbar { background: linear-gradient(135deg, rgba(58,63,88,.58), rgba(45,50,70,.42)); border-color: rgba(255,255,255,.09); }
html.dark-style .th-topbar h5 .fw-bold { color: #E4E6F1; }
html.dark-style .th-topbar h5 a { color: rgba(228,230,241,.7); }

/* قصّ النصوص الطويلة — اسم المقرر في المسار وأسماء «آخر ما فتحت» */
.th-topbar h5 { min-width: 0; }
.th-topbar h5 .fw-bold { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-recent-item span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* تجاوب الشريط العلوي — الوضع العرضي للجوال والشاشات المتوسطة */
@media (max-width: 991.98px) {
  .th-topbar h5 .fw-bold { max-width: 200px; }
  .th-topbar .th-search { min-width: 180px; }
}

/* الوضع الطولي للجوال — توزيع عمودي مرتّب */
@media (max-width: 575.98px) {
  .th-topbar { padding: .6rem .75rem; border-radius: 14px; }
  .th-topbar h5 { font-size: .95rem; }
  .th-topbar h5 .fw-bold { max-width: 48vw; }
  /* البحث (ومعه أزرار الأدوات) ينزل سطراً كاملاً ويتمدد */
  .th-topbar > .d-flex { flex: 1 1 100%; }
  .th-topbar .th-search { flex: 1 1 auto; max-width: none; min-width: 0; }

  /* «آخر ما فتحت»: العنوان + الحذف بسطر، والعناصر شريط أفقي يُمرَّر بالإصبع */
  .th-recent .th-sec-title { order: 0; }
  .th-recent-clear { order: 1; margin-inline-start: auto; }
  .th-recent-row {
    order: 2; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .th-recent-row::-webkit-scrollbar { display: none; }
  .th-recent-item { flex: 0 0 auto; }
  .th-recent-item span { max-width: 120px; }
}

/* زر مسح البحث */
.th-search-clear {
  border: 0; background: transparent; cursor: pointer; color: #9aa0ae; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease;
}
.th-search-clear:hover { background: rgba(229,72,77,.12); color: #E5484D; }
.th-search-clear[hidden] { display: none; }

/* محاذاة لوحة المحتوى (Wide) مع حدود الحاوية تمامًا مثل الشريط العلوي
   — إلغاء الحشوة الأفقية للوحة th-wrap على صفحة المستندات فقط، ليتطابق
   عرض المحتوى مع أعلى عنصر في الصفحة عند كل مستويات التكبير/التصغير */
.th-doc.th-wrap { padding-inline: 0; padding-top: .45rem; padding-bottom: 1.1rem; }
/* صفحة العيّنات العامة (col-12 container-p-y th-wrap): محاذاة مماثلة */
.th-wrap.container-p-y { padding-inline: 0; }

/* عارض المستند — شارة «جديد» على الملف (48 ساعة) */
.th-doc .div-saleh { position: relative; }
.th-new-file { top: 10px; inset-inline-end: 10px; }

/* مفتاح تبديل شبكة/قائمة — زرّان زجاجيان */
.th-view-toggle {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  border: 1px solid rgba(255,255,255,.65); box-shadow: 0 4px 12px rgba(16,24,40,.05);
}
.th-view-toggle button,
.th-view-toggle a {
  border: 0; background: transparent; cursor: pointer; text-decoration: none; position: relative;
  width: 32px; height: 32px; border-radius: 50%; font-size: 1.05rem; color: #9aa0ae;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.th-view-toggle button:hover,
.th-view-toggle a:hover { color: var(--brand, #D46E2A); }
.th-dot-badge {
  position: absolute; top: 4px; inset-inline-end: 4px;
  width: 7px; height: 7px; border-radius: 50%; background: #E5484D;
  box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}
html.dark-style .th-dot-badge { box-shadow: 0 0 0 2px rgba(45,50,70,.8); }
/* أيقونة ترتيب + قائمة صغيرة */
.th-sort-wrap { position: relative; }
.th-sort-menu {
    position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60;
    min-width: 176px; padding: .35rem; border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,.75); box-shadow: 0 12px 28px rgba(16,24,40,.14);
    display: flex; flex-direction: column; gap: 2px;
    animation: thSortInKF .18s ease both;
}
@keyframes thSortInKF { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* بمعرّف #thSortMenu لتجاوز قواعد .th-view-toggle button العامة (دائرة 32px + تدرّج is-active) */
#thSortMenu button {
    width: 100%; height: auto; min-width: 0; min-height: 0;
    display: flex; align-items: center; justify-content: flex-start; gap: .5rem;
    padding: .5rem .7rem; border: 0; background: transparent; border-radius: 8px;
    color: #4b5563; font-weight: 700; font-size: .88rem; text-align: start; cursor: pointer;
    box-shadow: none; animation: none;
    transition: background .15s ease, color .15s ease;
}
#thSortMenu button i { font-size: 1.02rem; color: #9aa0ae; transform: none; }
#thSortMenu button:hover { background: rgba(212,110,42,.08); color: var(--brand-hover, #B85B21); }
#thSortMenu button:hover i { color: var(--brand, #D46E2A); }
#thSortMenu button.is-active { background: rgba(212,110,42,.14); color: var(--brand-hover, #B85B21); box-shadow: none; animation: none; }
#thSortMenu button.is-active i { color: var(--brand, #D46E2A); transform: none; }
html.dark-style .th-sort-menu {
    background: linear-gradient(135deg, rgba(58,63,88,.92), rgba(45,50,70,.86));
    border-color: rgba(255,255,255,.08);
}
html.dark-style #thSortMenu button { color: #d4d7e2; }
html.dark-style #thSortMenu button:hover { background: rgba(212,110,42,.18); color: #F2B58C; }
html.dark-style #thSortMenu button.is-active { background: rgba(212,110,42,.22); color: #F2B58C; }
.th-sort-sep { height: 1px; margin: .25rem .4rem; background: rgba(16,24,40,.08); }
html.dark-style .th-sort-sep { background: rgba(255,255,255,.08); }
#thSortMenu #thSortPin { color: var(--brand-hover, #B85B21); }
#thSortMenu #thSortPin i { color: var(--brand, #D46E2A); }
#thSortMenu #thSortPin:disabled { opacity: .55; cursor: wait; }
html.dark-style #thSortMenu #thSortPin { color: #F2B58C; }
/* وضع «ترتيبي الخاص» — مقبض سحب على كل بلاطة وحفظ تلقائي */
.th-drag-handle {
    position: absolute; top: 8px; inset-inline-end: 8px; z-index: 6;
    width: 30px; height: 30px; border-radius: 9px;
    display: none; align-items: center; justify-content: center;
    background: rgba(255,255,255,.92); color: var(--brand, #D46E2A);
    box-shadow: 0 3px 8px rgba(16,24,40,.16);
    cursor: grab; touch-action: none;
}
.th-arrange-on .th-drag-handle { display: inline-flex; }
.th-drag-handle:active { cursor: grabbing; }
/* أثناء الترتيب: أخفِ النجمة وشارة جديد كي لا تزاحم المقبض */
.th-arrange-on .th-fav, .th-arrange-on .th-new { display: none !important; }
.th-arrange-on .div-saleh[data-content-id] .th-tile-card { border-style: dashed; border-color: rgba(212,110,42,.45); }
.th-sort-ph { border: 2px dashed rgba(212,110,42,.5); border-radius: 16px; background: rgba(212,110,42,.06); }
.ui-sortable-helper { opacity: .92; z-index: 120; }
html.dark-style .th-drag-handle { background: rgba(47,51,73,.92); color: #F2B58C; }
.th-view-toggle button.is-active {
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21));
  color: #fff; box-shadow: 0 4px 10px rgba(212,110,42,.3);
}
html.dark-style .th-view-toggle { background: linear-gradient(135deg, rgba(58,63,88,.6), rgba(45,50,70,.5)); border-color: rgba(255,255,255,.08); }

/* عرض القائمة المضغوط — كل بطاقة صفّ كامل مندمج */
.th-view-list .div-saleh { width: 100%; max-width: 100%; flex: 0 0 100%; }
.th-view-list .card-interactive { border-radius: 12px; }
.th-view-list .card-interactive:hover { transform: none; }
.th-view-list .card-interactive > .d-flex { align-items: center; }
.th-view-list .th-fcard {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .25rem .6rem; padding: .45rem .6rem !important; text-align: start;
}
.th-view-list .th-fcard-topic { margin: 0; font-size: .85rem; }
.th-view-list .th-fcard-meta { margin: 0; }
.th-view-list .th-fcard-nick { font-size: .85rem; }
.th-view-list .th-fcard-title { margin: 0 !important; font-size: .85rem; }
.th-view-list .th-new-file { top: 50%; transform: translateY(-50%); }
.th-view-list .div-saleh.is-downloaded .card-interactive::after { bottom: auto; top: 50%; transform: translateY(-50%); }

/* عرض القائمة لبلاطات المحتوى (صفحة teacher/contents) */
.th-view-list.th-content-grid { --bs-gutter-y: .45rem; }
.th-view-list.th-content-grid .div-saleh { width: 100%; max-width: 100%; flex: 0 0 100%; }
.th-view-list.th-content-grid .th-tile-wrap { width: 100%; }
.th-view-list.th-content-grid .th-tile { display: block; width: 100%; }
.th-view-list.th-content-grid .th-tile-card {
    display: flex; align-items: center; gap: .75rem;
    padding: .4rem .8rem; text-align: start;
    min-height: 0;
}
.th-view-list.th-content-grid .th-tile-ico {
    width: 34px; height: 34px; min-width: 34px;
    font-size: 1.1rem; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.th-view-list.th-content-grid .th-tile-name {
    margin: 0; font-size: .95rem; font-weight: 700; text-align: start;
}
.th-view-list.th-content-grid .th-tile-wrap { position: relative; }
.th-view-list.th-content-grid .th-fav {
    position: absolute; top: 50%; transform: translateY(-50%);
    inset-inline-start: auto; inset-inline-end: 8px;
    opacity: 1; width: 32px; height: 32px;
    z-index: 10; pointer-events: auto;
    background: rgba(255,255,255,.85);
}
.th-view-list.th-content-grid .div-saleh.is-fav .th-fav { color: #f6cd82; }
.th-view-list.th-content-grid .th-tile-card { padding-inline-end: 46px; }
.th-view-list.th-content-grid .th-new {
    top: 50%; transform: translateY(-50%);
    inset-inline-end: auto; inset-inline-start: 8px;
}
.th-view-list.th-content-grid .th-new ~ .th-fav,
.th-view-list.th-content-grid .div-saleh:has(.th-new) .th-tile-card { padding-inline-start: 56px; }

/* عرض شبكة لصفحة ترتيب المحتوى (contents-setting) */
.th-reorder.th-reorder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .6rem;
    padding: 0;
}
.th-reorder.th-reorder-grid .th-reorder-item {
    flex-direction: column; align-items: stretch; text-align: center;
    padding: .75rem .6rem; border-radius: 14px;
}
.th-reorder.th-reorder-grid .th-reorder-item > div:first-child {
    flex-direction: column; justify-content: center; gap: .35rem;
}
.th-reorder.th-reorder-grid .th-reorder-item > div:last-child {
    justify-content: center; margin-top: .4rem;
}
.th-reorder.th-reorder-grid .th-reorder-ico { font-size: 1.6rem; }
.th-reorder.th-reorder-grid .th-reorder-name { white-space: normal; font-weight: 700; }
.th-reorder.th-reorder-grid .th-drag { align-self: center; }

/* ---------------------------------------------------------------------
   تحسين بصري لبطاقة الملف — أيقونة نوع ملوّنة + شارة نوع
   --------------------------------------------------------------------- */
.card-interactive { transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s ease, border-color .2s ease; }
.card-interactive:hover { transform: translateY(-3px); border-color: rgba(212,110,42,.35); }
.th-fcard { color: var(--dt-text, #1F2937); }
.th-fcard-ico {
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
  width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: rgba(16,24,40,.06); color: #6B7280;
  transition: transform .22s ease;
}
.card-interactive:hover .th-fcard-ico { transform: scale(1.08) rotate(-3deg); }
.th-fcard-topic { font-weight: 700; font-size: .9rem; line-height: 1.55; }
.th-fcard-sep { color: var(--brand, #D46E2A); font-weight: 800; margin: 0 .2rem; }
.th-fcard-meta { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .45rem; flex-wrap: wrap; }
.th-fcard-nick { font-weight: 700; font-size: .9rem; color: var(--dt-text, #1F2937); }
.th-fcard-type {
  display: inline-flex; align-items: center; font-size: .7rem; font-weight: 800; letter-spacing: .4px;
  padding: .14rem .55rem; border-radius: 999px; background: rgba(16,24,40,.07); color: #6B7280;
}
.th-fcard-title { font-weight: 700; font-size: .9rem; }
/* ميتا الملف: الحجم + عدد التحميلات */
.th-fcard-stats { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .45rem; flex-wrap: wrap; }
.th-stat { display: inline-flex; align-items: center; gap: .22rem; font-size: .72rem; font-weight: 700; color: var(--dt-text-2, #6B7280); }
.th-stat i { font-size: .95em; color: #9aa0ae; }
.th-stat-dl b { color: var(--brand-hover, #B85B21); font-weight: 800; }
.th-stat-dl.is-zero { display: none; } /* عدّاد شخصي — يظهر فقط إن حمّلته */
.th-stat-dl.th-bump { animation: th-dlc-pop .5s cubic-bezier(.18,.89,.32,1.4); }
html.dark-style .th-stat { color: #9aa0ae; }
html.dark-style .th-stat-dl b { color: #F2B58C; }

/* لوحة تحميلاتي — بطاقات السجل */
.th-hist { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; height: 100%; }
.th-hist-type { align-self: flex-start; }
.th-hist-name { font-weight: 800; color: var(--dt-text, #1F2937); line-height: 1.5; }
.th-hist-meta { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .76rem; font-weight: 700; color: var(--dt-text-2, #6B7280); margin-top: auto; padding-top: .3rem; }
.th-hist-meta i { color: #9aa0ae; font-size: .95em; }
.th-hist-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: .35rem; padding: .5rem; border-radius: 11px; font-weight: 800; text-decoration: none;
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21)); color: #fff !important;
  box-shadow: 0 6px 14px rgba(212,110,42,.28); transition: transform .2s ease, box-shadow .2s ease;
}
.th-hist-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(212,110,42,.4); color: #fff !important; }
.th-hist-empty { text-align: center; padding: 3rem 1rem; color: var(--dt-text-2, #6B7280); font-weight: 700; }
.th-hist-empty i { font-size: 2.6rem; color: #c4c8d2; display: block; margin-bottom: .6rem; }
html.dark-style .th-hist-name { color: #E4E6F1; }

/* رابط «كل تحميلاتي» في رأس مركز التحميلات */
.th-dlc-history { color: #9aa0ae; text-decoration: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; transition: background .2s ease, color .2s ease; }
.th-dlc-history:hover { background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand, #D46E2A); }

/* زر قائمة البطاقة (⋮) — دائري ناعم، يتلوّن بالهوية عند المرور/الفتح */
.th-card-menu {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9aa0ae; font-size: 1.15rem; line-height: 1;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.th-card-menu:hover,
.th-card-menu[aria-expanded="true"] {
  background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand, #D46E2A); transform: scale(1.06);
}
.th-card-menu::after { display: none; } /* إخفاء سهم الـdropdown الافتراضي */
html.dark-style .th-card-menu { color: #8a90a0; }
html.dark-style .th-card-menu:hover,
html.dark-style .th-card-menu[aria-expanded="true"] { background: rgba(212,110,42,.18); color: #F2B58C; }

/* ألوان دلالية حسب النوع — للأيقونة والشارة معاً */
.th-fkind-pdf.th-fcard-ico,  .th-fkind-pdf.th-fcard-type  { background: rgba(229,72,77,.13);  color: #E5484D; }
.th-fkind-doc.th-fcard-ico,  .th-fkind-doc.th-fcard-type  { background: rgba(41,112,225,.13);  color: #2970E1; }
.th-fkind-ppt.th-fcard-ico,  .th-fkind-ppt.th-fcard-type  { background: rgba(212,110,42,.15);  color: #C6551E; }
.th-fkind-xls.th-fcard-ico,  .th-fkind-xls.th-fcard-type  { background: rgba(40,167,111,.15);  color: #1E9E63; }
.th-fkind-img.th-fcard-ico,  .th-fkind-img.th-fcard-type  { background: rgba(138,92,214,.15);  color: #7A4FD0; }
.th-fkind-zip.th-fcard-ico,  .th-fkind-zip.th-fcard-type  { background: rgba(120,120,130,.16); color: #737884; }
.th-fkind-link.th-fcard-ico, .th-fkind-link.th-fcard-type { background: rgba(16,154,164,.15);  color: #109AA4; }
.th-fkind-file.th-fcard-ico, .th-fkind-file.th-fcard-type { background: rgba(120,120,130,.16); color: #737884; }

/* داكن — النصوص فقط (خلفيات النوع الملوّنة تعمل في الوضعين) */
html.dark-style .th-fcard,
html.dark-style .th-fcard-topic,
html.dark-style .th-fcard-nick,
html.dark-style .th-fcard-title { color: #E4E6F1; }

/* بطاقة ملف — زجاج فاخر طبقي (بلا backdrop-filter حفاظاً على الأداء مع عشرات البطاقات) */
.th-doc .card-interactive {
  position: relative; overflow: visible; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.52) 55%, rgba(255,255,255,.66));
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 10px 30px rgba(16,24,40,.09),
    0 2px 6px rgba(16,24,40,.05),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.th-doc .card-interactive:hover {
  transform: translateY(-3px); border-color: rgba(212,110,42,.4);
  box-shadow:
    0 18px 42px rgba(16,24,40,.14),
    0 4px 10px rgba(212,110,42,.1),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.th-doc .div-saleh { position: relative; }
.th-doc .div-saleh:hover { z-index: 3; }
html.dark-style .th-doc .card-interactive {
  background: linear-gradient(135deg, rgba(60,66,92,.66), rgba(42,47,66,.5) 55%, rgba(52,58,80,.58));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 12px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}

/* القائمة المنسدلة المنقولة لـ body — زجاج مصنفر فاخر، فوق كل شيء */
.th-portal-menu {
  z-index: 2147483000 !important;
  min-width: 216px; border-radius: 14px; padding: .4rem;
  border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.76));
  -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
  box-shadow: 0 24px 60px rgba(16,24,40,.28), 0 6px 16px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.85);
}
.th-portal-menu .dropdown-item { border-radius: 9px; font-weight: 600; padding: .5rem .8rem; transition: background .15s ease, color .15s ease; }
.th-portal-menu .dropdown-item:hover { background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand-hover, #B85B21); }
.th-portal-menu .dropdown-item i { color: var(--brand, #D46E2A); }
.th-portal-menu .dropdown-divider { margin: .3rem .2rem; border-color: rgba(16,24,40,.08); }
html.dark-style .th-portal-menu {
  border-color: rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(46,51,72,.92), rgba(35,40,58,.82));
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
html.dark-style .th-portal-menu .dropdown-item { color: #E4E6F1; }
html.dark-style .th-portal-menu .dropdown-divider { border-color: rgba(255,255,255,.08); }

/* ---------------------------------------------------------------------
   مودالات الصفحة — زجاج فاخر موحّد (معاينة + إبلاغ)
   --------------------------------------------------------------------- */
.th-glass-modal .modal-content {
  border: 1px solid rgba(255,255,255,.7); border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.8));
  -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%);
  box-shadow: 0 40px 90px rgba(16,24,40,.32), inset 0 1px 0 rgba(255,255,255,.85);
}
.th-glass-modal .modal-header {
  border-bottom: 1px solid rgba(16,24,40,.07); padding: .95rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.55), transparent);
}
.th-glass-modal .modal-title { font-weight: 800; color: var(--dt-text, #1F2937); display: flex; align-items: center; }
.th-glass-modal .modal-title i { color: var(--brand, #D46E2A); }
.th-glass-modal .btn-close { transition: transform .2s ease, opacity .2s ease; opacity: .6; }
.th-glass-modal .btn-close:hover { transform: rotate(90deg) scale(1.12); opacity: 1; }
/* حقول نموذج الإبلاغ */
.th-glass-modal .form-control {
  border-radius: 12px; border: 1px solid rgba(16,24,40,.12);
  background: rgba(255,255,255,.7); transition: border-color .2s ease, box-shadow .2s ease;
}
.th-glass-modal .form-control:focus {
  border-color: rgba(212,110,42,.5); box-shadow: 0 0 0 .18rem rgba(212,110,42,.14); background: #fff;
}
.th-glass-modal .form-label { font-weight: 700; color: var(--dt-text-2, #6B7280); }
.th-glass-modal .btnSubmitError { border-radius: 12px; font-weight: 800; padding: .55rem 1.5rem; }

/* خلفية المودال — تعتيم أنعم مع تمويه خفيف */
.modal-backdrop.show { background: rgba(16,24,40,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 1; }

/* داكن */
html.dark-style .th-glass-modal .modal-content {
  border-color: rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(46,51,72,.94), rgba(35,40,58,.86));
  box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
html.dark-style .th-glass-modal .modal-header { border-bottom-color: rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); }
html.dark-style .th-glass-modal .modal-title { color: #E4E6F1; }
html.dark-style .th-glass-modal .form-control { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #E4E6F1; }
html.dark-style .th-glass-modal .form-control:focus { background: rgba(255,255,255,.1); }

/* ---------------------------------------------------------------------
   مركز التحميلات — زر عائم بحلقة تقدّم + لوحة زجاجية (أسفل النهاية)
   --------------------------------------------------------------------- */
.th-dlc-dock {
  position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 2147483000;
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.8));
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 14px 34px rgba(16,24,40,.22), inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: th-dl-in .3s cubic-bezier(.18,.89,.32,1.18) both;
}
.th-dlc-dock:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(16,24,40,.28); }
.th-dlc-dock > i { color: var(--brand, #D46E2A); font-size: 1.35rem; position: relative; z-index: 1; }
.th-dlc-dock svg { position: absolute; inset: 3px; transform: rotate(-90deg); }
.th-dlc-ring-bg { fill: none; stroke: rgba(212,110,42,.14); stroke-width: 3; }
.th-dlc-ring { fill: none; stroke: var(--brand, #D46E2A); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .25s ease; }
.th-dlc-ring.is-indet { stroke-dashoffset: 94 !important; animation: th-dlc-spin 1s linear infinite; transform-origin: center; }
@keyframes th-dlc-spin { to { transform: rotate(360deg); } }
.th-dlc-badge {
  position: absolute; top: -4px; inset-inline-start: -4px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: #E5484D; color: #fff; font-size: .68rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(229,72,77,.4);
}
.th-dlc-pop { animation: th-dlc-pop .5s cubic-bezier(.18,.89,.32,1.4); }
@keyframes th-dlc-pop { 40% { transform: scale(1.18); } }
@keyframes th-dl-in { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

.th-dlc-panel {
  position: fixed; bottom: 90px; inset-inline-end: 24px; z-index: 2147483000;
  width: min(360px, 92vw); max-height: min(430px, 62vh);
  display: none; flex-direction: column; overflow: hidden;
  border-radius: 18px; border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(135deg, rgba(255,255,255,.93), rgba(255,255,255,.82));
  -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
  box-shadow: 0 28px 70px rgba(16,24,40,.3), inset 0 1px 0 rgba(255,255,255,.85);
}
.th-dlc-panel.is-open { display: flex; animation: th-dl-in .25s ease both; }
.th-dlc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem .95rem; border-bottom: 1px solid rgba(16,24,40,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.55), transparent);
}
.th-dlc-title { font-weight: 800; color: var(--dt-text, #1F2937); display: inline-flex; align-items: center; gap: .4rem; }
.th-dlc-title i { color: var(--brand, #D46E2A); }
.th-dlc-actions { display: inline-flex; gap: .25rem; }
.th-dlc-actions button {
  border: 0; background: transparent; cursor: pointer; color: #9aa0ae;
  width: 30px; height: 30px; border-radius: 50%; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.th-dlc-actions button:hover { background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand, #D46E2A); }
.th-dlc-list { overflow-y: auto; padding: .55rem .7rem; display: flex; flex-direction: column; gap: .55rem; }
.th-dlc-empty { padding: 1.4rem; text-align: center; color: var(--dt-text-2, #6B7280); font-weight: 700; font-size: .85rem; }
.th-dlc-empty[hidden] { display: none; }

.th-dlc-item {
  border-radius: 13px; padding: .6rem .75rem;
  background: rgba(255,255,255,.6); border: 1px solid rgba(16,24,40,.06);
}
.th-dlc-row { display: flex; align-items: center; gap: .45rem; }
.th-dlc-ico { color: var(--brand, #D46E2A); font-size: 1.1rem; flex-shrink: 0; }
.th-dlc-name { flex: 1; min-width: 0; font-weight: 700; font-size: .83rem; color: var(--dt-text, #1F2937); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-dlc-btns { display: inline-flex; gap: .15rem; flex-shrink: 0; }
.th-dlc-btns button {
  border: 0; background: transparent; cursor: pointer; color: #9aa0ae;
  width: 26px; height: 26px; border-radius: 50%; font-size: .95rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.th-dlc-btns .th-dlc-cancel:hover { background: rgba(229,72,77,.1); color: #E5484D; }
.th-dlc-btns .th-dlc-retry:hover { background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand, #D46E2A); }
.th-dlc-bar { height: 5px; border-radius: 999px; background: rgba(16,24,40,.1); overflow: hidden; margin: .5rem 0 .3rem; }
.th-dlc-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21)); transition: width .2s ease; }
.th-dlc-fill.is-indet { width: 40%; animation: th-pp-indet 1.1s ease-in-out infinite; }
.th-dlc-meta { font-size: .72rem; font-weight: 700; color: var(--dt-text-2, #6B7280); }
.th-dlc-item.is-done .th-dlc-fill { background: linear-gradient(135deg, #34C77B, #1E9E63); }
.th-dlc-item.is-done .th-dlc-ico { color: #1E9E63; }
.th-dlc-item.is-error .th-dlc-ico { color: #E5484D; }

/* علامة «محمّل» الدائمة على البطاقة */
.th-doc .div-saleh.is-downloaded .card-interactive::after {
  content: "✓"; position: absolute; bottom: 8px; inset-inline-start: 10px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30,158,99,.14); color: #1E9E63; font-size: .72rem; font-weight: 900;
}
.th-doc .div-saleh.th-mark-in .card-interactive::after { animation: th-dlc-pop .5s cubic-bezier(.18,.89,.32,1.4); }

/* داكن */
html.dark-style .th-dlc-dock,
html.dark-style .th-dlc-panel { background: linear-gradient(135deg, rgba(46,51,72,.95), rgba(35,40,58,.88)); border-color: rgba(255,255,255,.1); }
html.dark-style .th-dlc-head { border-bottom-color: rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); }
html.dark-style .th-dlc-title { color: #E4E6F1; }
html.dark-style .th-dlc-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
html.dark-style .th-dlc-name { color: #E4E6F1; }
html.dark-style .th-dlc-bar { background: rgba(255,255,255,.12); }

/* عارض المستند — شريط الفلاتر والفرز */
.th-filters {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 1rem; padding: .55rem .7rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.58));
  border: 1px solid rgba(255,255,255,.65); box-shadow: 0 6px 18px rgba(16,24,40,.06);
}
.th-filters[hidden] { display: none; }
.th-chip-n { background: rgba(16,24,40,.12); border-radius: 999px; padding: 0 .38rem; font-size: .68rem; font-weight: 800; margin-inline-start: .2rem; }
.th-chip-f.is-active .th-chip-n { background: rgba(255,255,255,.32); }
html.dark-style .th-chip-n { background: rgba(255,255,255,.14); }
.th-filters-bottom { margin: 1.3rem 0 .3rem; } /* تحت آخر عنصر في الصفحة */
.th-filters-top { margin: .2rem 0 .9rem; } /* أعلى الشبكة — doc_filters_position=top */
.th-filters-ico { color: var(--brand, #D46E2A); font-size: 1.1rem; display: inline-flex; }
.th-filter-types { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.th-chip-f {
  border: 1px solid rgba(212,110,42,.2); cursor: pointer;
  background: var(--brand-soft, rgba(212,110,42,.08)); color: var(--brand-hover, #B85B21);
  border-radius: 999px; padding: .32rem .8rem; font-size: .82rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.th-chip-f:hover { transform: translateY(-1px); border-color: rgba(212,110,42,.5); }
.th-chip-f.is-active {
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21));
  color: #fff; border-color: transparent; box-shadow: 0 5px 12px rgba(212,110,42,.28);
}
.th-chip-toggle { background: rgba(39,76,119,.06); border-color: rgba(39,76,119,.18); color: #274C77; }
.th-chip-toggle.is-active { background: linear-gradient(135deg, #274C77, #1d3a5c); color: #fff; border-color: transparent; }
.th-filters-sep { width: 1px; height: 20px; background: rgba(16,24,40,.12); }
.th-sort { display: inline-flex; align-items: center; gap: .35rem; color: var(--dt-text-2, #6B7280); font-size: .82rem; font-weight: 700; }
.th-sort i { color: var(--brand, #D46E2A); }
.th-sort-sel {
  border: 1px solid rgba(16,24,40,.14); border-radius: 10px; padding: .3rem .6rem; font-size: .82rem; font-weight: 700;
  background: rgba(255,255,255,.7); color: var(--dt-text, #1F2937); cursor: pointer; outline: 0;
}
.th-sort-sel:focus { border-color: rgba(212,110,42,.5); }
.th-filters-reset {
  margin-inline-start: auto; border: 0; cursor: pointer; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(229,72,77,.1); color: #E5484D; display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .15s ease;
}
.th-filters-reset:hover { background: rgba(229,72,77,.2); transform: rotate(90deg); }
.th-filters-reset[hidden] { display: none; }

/* إخفاء الملفات المُفلترة + الوحدات الفارغة + شرائحها */
.th-hide-x { display: none !important; }
.th-unit-empty { display: none !important; }
.th-chip-hidden { display: none !important; }
html.dark-style .th-filters { background: linear-gradient(135deg, rgba(58,63,88,.62), rgba(45,50,70,.5)); border-color: rgba(255,255,255,.08); }
html.dark-style .th-filters-sep { background: rgba(255,255,255,.14); }
html.dark-style .th-sort-sel { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #E4E6F1; }

/* مجموعة أزرار «الكل» — أيقونة + عدّاد فقط (بنمط أزرار الوحدة .th-u-dl/.th-u-zip) */
.th-bulk-group {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: .3rem;
}
.th-bulk-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  border: 0; cursor: pointer;
  height: 32px; padding: 0 .55rem; border-radius: 10px;
  font-weight: 800; font-size: .78rem; line-height: 1;
  transition: transform .16s ease, box-shadow .2s ease, filter .18s ease, background .22s ease, color .18s ease;
}
.th-bulk-btn i { font-size: 1.05rem; transition: transform .28s ease; }
.th-bulk-btn:hover:not([disabled]) { transform: scale(1.06); }
.th-bulk-btn:active { transform: scale(.94); }
.th-bulk-btn:focus-visible { outline: 2px solid rgba(212,110,42,.55); outline-offset: 2px; }

.th-dl-all  { background: rgba(212,110,42,.12); color: var(--brand, #D46E2A); }
.th-dl-all:hover:not([disabled])  { background: linear-gradient(135deg, #D46E2A, #B85B21); color: #fff; }
.th-dl-all:hover:not([disabled]) i { transform: translateY(2px); }
.th-zip-all { background: rgba(39,76,119,.12); color: #274C77; }
.th-zip-all:hover:not([disabled]) { background: linear-gradient(135deg, #274C77, #1d3a5c); color: #fff; }
.th-zip-all:hover:not([disabled]) i { transform: rotate(-8deg); }

html.dark-style .th-dl-all  { background: rgba(212,110,42,.22); color: #F2B58C; }
html.dark-style .th-zip-all { background: rgba(122,165,210,.18); color: #9FC2E8; }

.th-bulk-n {
  min-width: 18px; height: 18px; padding: 0 .3rem; border-radius: 999px;
  background: currentColor; color: transparent; /* حيلة: النص يأخذ لون الخلفية العكسية */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 900;
}
.th-bulk-btn .th-bulk-n { position: relative; }
.th-bulk-btn .th-bulk-n::after {
  content: attr(data-n, "");
}
/* بدل الحيلة أعلاه — استخدم نصّاً مباشراً بلون مناسب للحالتين (hover/idle) */
.th-bulk-n { background: rgba(0,0,0,.08); color: inherit; }
.th-bulk-btn:hover:not([disabled]) .th-bulk-n { background: rgba(255,255,255,.28); color: #fff; }
html.dark-style .th-bulk-n { background: rgba(255,255,255,.14); }
@keyframes thBulkBumpKF {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); background: rgba(255,255,255,.42); }
  100% { transform: scale(1); }
}
.th-bulk-bump { animation: thBulkBumpKF .38s ease; }

.th-bulk-btn.is-empty,
.th-bulk-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; filter: grayscale(.25); }
.th-bulk-btn.is-loading { pointer-events: none; }
.th-bulk-btn.is-loading i { animation: thBulkSpinKF 1s linear infinite; }
@keyframes thBulkSpinKF { to { transform: rotate(360deg); } }

/* موجة نقر */
.th-bulk-ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(0); pointer-events: none;
  animation: thBulkRippleKF .6s ease-out forwards;
}
@keyframes thBulkRippleKF { to { transform: scale(2.4); opacity: 0; } }

/* على الشاشات الضيقة: أخفِ النص وأبقِ الأيقونة والعدد */
@media (max-width: 640px) {
  .th-bulk-txt { display: none; }
  .th-bulk-btn { padding: 0 .65rem; }
}

html.dark-style .th-dl-all  { box-shadow: 0 6px 14px rgba(212,110,42,.44); }
html.dark-style .th-zip-all { box-shadow: 0 6px 14px rgba(62,123,250,.44); }

/* عارض المستند — شريط تنقّل الوحدات + العودة للأعلى */
.th-units-nav {
  position: sticky; top: var(--th-sticky-top, .6rem); z-index: 20;
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; padding: .38rem .55rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.6));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.65); box-shadow: 0 6px 18px rgba(16,24,40,.07);
}
.th-unit-chip {
  display: inline-flex; align-items: center; gap: .35rem; text-decoration: none;
  padding: .42rem .9rem; border-radius: 999px; font-weight: 700; font-size: .84rem;
  color: var(--brand-hover, #B85B21); background: var(--brand-soft, rgba(212,110,42,.1));
  border: 1px solid rgba(212,110,42,.2); transition: background .2s ease, color .2s ease, transform .2s ease;
}
.th-unit-chip i { font-size: .95rem; }
.th-unit-chip:hover { background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21)); color: #fff; transform: translateY(-1px); }
.th-unit-chip .th-chip-count { background: rgba(212,110,42,.18); border-radius: 999px; padding: 0 .45rem; font-size: .72rem; font-weight: 800; }
.th-unit-chip:hover .th-chip-count { background: rgba(255,255,255,.28); }
/* الوحدة النشطة أثناء التمرير (scroll-spy) — تمييز دائم بالهوية */
.th-unit-chip.is-active {
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21));
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(212,110,42,.32);
}
.th-unit-chip.is-active .th-chip-count { background: rgba(255,255,255,.28); }
/* حالة الالتصاق — ظلّ أعمق عند تثبيت الشريط أعلى الشاشة */
.th-units-nav.is-stuck { box-shadow: 0 10px 26px rgba(16,24,40,.14); border-color: rgba(212,110,42,.28); }
html.dark-style .th-units-nav.is-stuck { border-color: rgba(212,110,42,.35); }
/* عند القفز لوحدة: لا تختبئ ترويستها تحت الترويسة الثابتة + الشريط اللاصق */
.th-unit-head { scroll-margin-top: var(--th-scroll-margin, 96px); }

/* رأس الوحدة القابل للطيّ — العنوان يمين، العدّاد+السهم يسار */
.th-unit-head {
  display: flex !important; align-items: center; justify-content: space-between; gap: .7rem;
  cursor: pointer; user-select: none;
  /* داخل .row: نستخدم flex-basis بدل width لتفادي قصّ الزوايا بهوامش الصف */
  width: auto; flex: 1 1 100%;
  margin: .5rem .25rem .45rem !important; padding: .65rem 1.1rem !important;
  border-radius: 14px; color: var(--dt-text, #1F2937) !important; font-size: .98rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .55));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(212, 110, 42, .18);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .06), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: box-shadow .2s ease, transform .12s ease, background .2s ease;
}
.th-unit-head:hover { box-shadow: 0 10px 26px rgba(212, 110, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .7); }
.th-unit-head .th-u-name { font-weight: 800; color: var(--dt-text, #1F2937); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-unit-head .th-u-side { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.th-unit-head .th-u-count {
  background: var(--brand, #D46E2A); color: #fff; border-radius: 999px;
  min-width: 28px; height: 22px; padding: 0 .55rem; font-size: .75rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.th-unit-head .th-u-chev { font-size: 1.05rem; color: var(--dt-text-2, #6B7280); transition: transform .2s ease; }
/* زر تحميل الوحدة كاملة */
.th-u-dl {
  border: 0; cursor: pointer; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 9px; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(212,110,42,.12); color: var(--brand, #D46E2A);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.th-u-dl:hover { background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21)); color: #fff; transform: scale(1.08); }
.th-u-dl.is-added { animation: th-dlc-pop .5s cubic-bezier(.18,.89,.32,1.4); }
html.dark-style .th-u-dl { background: rgba(212,110,42,.22); color: #F2B58C; }
/* زر تحميل الوحدة مضغوطة (ZIP) */
.th-u-zip {
  border: 0; cursor: pointer; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 9px; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(39,76,119,.12); color: #274C77;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.th-u-zip:hover { background: linear-gradient(135deg, #274C77, #1d3a5c); color: #fff; transform: scale(1.08); }
.th-u-zip.is-added { animation: th-dlc-pop .5s cubic-bezier(.18,.89,.32,1.4); }
html.dark-style .th-u-zip { background: rgba(122,165,210,.18); color: #9FC2E8; }
.th-unit-head.collapsed .th-u-chev { transform: rotate(-90deg); }
/* الوحدة المفتوحة — تمييز بالهوية */
.th-unit-head:not(.collapsed) {
  background: linear-gradient(135deg, rgba(212, 110, 42, .14), rgba(255, 255, 255, .55));
  border-color: rgba(212, 110, 42, .32);
  box-shadow: 0 8px 22px rgba(212, 110, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.th-unit-head:not(.collapsed) .th-u-name { color: var(--brand-hover, #B85B21); }
.th-unit-head:not(.collapsed) .th-u-chev { color: var(--brand, #D46E2A); }
.th-unit-hidden { display: none !important; }

/* أنيميشن فتح الوحدة — تدفّق تتابعي «واو»: البطاقات تنبثق بالتناوب */
.th-card-in {
  animation: th-card-pop .55s cubic-bezier(.18, .89, .32, 1.18) both;
}
@keyframes th-card-pop {
  0%   { opacity: 0; transform: translateY(22px) scale(.94); filter: blur(3px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* نبضة خفيفة لرأس الوحدة عند فتحها */
.th-unit-head:not(.collapsed) { animation: th-head-glow .5s ease both; }
@keyframes th-head-glow {
  0%   { box-shadow: 0 0 0 0 rgba(212, 110, 42, .35); }
  100% { box-shadow: 0 8px 22px rgba(212, 110, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .7); }
}
@media (prefers-reduced-motion: reduce) {
  .th-card-in, .th-unit-head:not(.collapsed) { animation: none; }
}
html.dark-style .th-unit-head { color: #E4E6F1 !important; background: linear-gradient(135deg, rgba(58,63,88,.6), rgba(45,50,70,.5)); border-color: rgba(255,255,255,.08); }
html.dark-style .th-unit-head .th-u-name { color: #E4E6F1; }
html.dark-style .th-unit-head:not(.collapsed) .th-u-name { color: #F2B58C; }
.th-to-top {
  position: fixed; bottom: 24px; inset-inline-start: 24px; z-index: 1000;
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21)); color: #fff; font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(212,110,42,.4);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.th-to-top:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(212,110,42,.52); }
html.dark-style .th-units-nav { background: linear-gradient(135deg, rgba(58,63,88,.65), rgba(45,50,70,.5)); border-color: rgba(255,255,255,.08); }

/* معاينة سريعة (Quick-look) — موديل PDF/صور */
.th-preview-modal .modal-content { border-radius: 16px; overflow: hidden; }
.th-preview-modal .modal-header { gap: .6rem; }
.th-preview-modal .modal-title { display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-preview-modal .modal-title i { color: var(--brand, #D46E2A); }
.th-preview-body { position: relative; min-height: 62vh; background: #f4f6fb; }
html.dark-style .th-preview-body { background: #1b2030; }
.th-preview-frame { width: 100%; height: 78vh; border: 0; display: block; }
.th-preview-img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; }
.th-preview-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.th-preview-error { padding: 2.4rem 1.2rem; text-align: center; color: #E5484D; font-weight: 700; }
.th-preview-error i { font-size: 1.4rem; vertical-align: -3px; margin-inline-end: .3rem; }
/* شاشة تقدّم تحميل الـPDF قبل عرضه من الذاكرة */
.th-preview-progress {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .85rem; padding: 1.5rem; text-align: center;
}
.th-pp-ico {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #E5484D; background: rgba(229, 72, 77, .1);
}
.th-pp-label { font-weight: 800; color: var(--dt-text, #1F2937); }
html.dark-style .th-pp-label { color: #E4E6F1; }
.th-pp-bar { width: min(340px, 80%); height: 8px; border-radius: 999px; background: rgba(16, 24, 40, .1); overflow: hidden; }
html.dark-style .th-pp-bar { background: rgba(255, 255, 255, .12); }
.th-pp-fill {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21));
  transition: width .2s ease;
}
.th-pp-fill.is-indet { width: 40%; animation: th-pp-indet 1.1s ease-in-out infinite; }
@keyframes th-pp-indet { 0% { margin-inline-start: -40%; } 100% { margin-inline-start: 100%; } }
.th-pp-meta { font-size: .82rem; color: var(--dt-text-2, #6B7280); font-weight: 700; }
.th-pp-alt { font-size: .82rem; color: var(--brand-hover, #B85B21); text-decoration: underline; }
.th-pp-alt:hover { color: var(--brand, #D46E2A); }
/* عرض صفحات الـPDF (PDF.js) — حاوية قابلة للتمرير + كنفس لكل صفحة */
.th-pdf-pages {
  height: 80vh; overflow: auto; padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: #eceff5;
}
html.dark-style .th-pdf-pages { background: #161b28; }
.th-pdf-page {
  display: block; max-width: 100%; height: auto; border-radius: 4px; background: #fff;
  box-shadow: 0 6px 22px rgba(16, 24, 40, .16);
}

/* ---------------------------------------------------------------------
   7) صفحة الترتيب/الإظهار — صفوف زجاجية + نجمة
   --------------------------------------------------------------------- */
.th-reorder { border: 0 !important; }
.th-reorder .th-reorder-item {
  border: 1px solid rgba(255,255,255,.65) !important; border-radius: 14px !important;
  margin-bottom: .7rem; padding: .8rem 1rem;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.5)) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 6px 16px rgba(16,24,40,.05);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.th-reorder .th-reorder-item:hover { box-shadow: 0 10px 24px rgba(16,24,40,.1); }
.th-reorder .th-reorder-item.ui-sortable-helper { box-shadow: 0 18px 40px rgba(16,24,40,.18); transform: scale(1.01); }
.th-drag { color: var(--dt-text-2, #6B7280); font-size: 1.2rem; }
.th-reorder-ico {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
  background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand, #D46E2A);
}
.th-reorder-name { font-weight: 700; color: var(--dt-text, #1F2937); }
.th-fav-btn {
  border: 0; background: transparent; cursor: pointer; font-size: 1.2rem;
  color: #c4c8d2; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .2s ease, transform .2s ease, background .2s ease;
}
.th-fav-btn:hover { color: var(--brand, #D46E2A); background: rgba(212,110,42,.1); transform: scale(1.1); }
.th-reorder-item.is-fav .th-fav-btn { color: #f6cd82; }
.th-reorder-item.is-fav { border-color: rgba(245,166,35,.5) !important; box-shadow: 0 8px 22px rgba(245,166,35,.14); }
html.dark-style .th-reorder .th-reorder-item {
  background: linear-gradient(135deg, rgba(58,63,88,.6), rgba(45,50,70,.5)) !important; border-color: rgba(255,255,255,.08) !important;
}
html.dark-style .th-reorder-name { color: #E4E6F1; }

/* ---------------------------------------------------------------------
   الوضع الداكن
   --------------------------------------------------------------------- */
html.dark-style .th-hero { background: linear-gradient(135deg, rgba(58,63,88,.62), rgba(45,50,70,.5)); border-color: rgba(255,255,255,.08); }
html.dark-style .th-hello { color: #E4E6F1; }
html.dark-style .th-chip { background: rgba(212,110,42,.16); color: #F2B58C; border-color: rgba(212,110,42,.3); }
html.dark-style .th-chip.is-slate { background: rgba(122,165,210,.14); color: #9FC2E8; border-color: rgba(122,165,210,.3); }
html.dark-style .th-sec-title { color: #E4E6F1; }
html.dark-style .th-semesters .plan-option .custom-control-label { background: #2F3349; border-color: rgba(255,255,255,.1); color: rgba(228,230,241,.7); }
html.dark-style .th-tile-card { background: linear-gradient(135deg, rgba(58,63,88,.6), rgba(45,50,70,.5)); border-color: rgba(255,255,255,.08); }
html.dark-style .th-tile-name { color: #E4E6F1; }

/* =====================================================================
   POLISH v2 — صقل عام لصفحة عرض المحتوى (teacher/contents/document/*)
   - ظهور متدرّج للبطاقات (stagger)
   - رؤوس الوحدات كشرائط أنيقة بدل h6 عادي
   - عدّاد الترويسة كحلقة نحاسية
   - ومضة خفيفة على شرائح الفلترة عند hover
   - احترام prefers-reduced-motion
   ===================================================================== */

/* 1) ظهور البطاقات — طفوّ لطيف مع تدرّج مؤجَّل بحسب الترتيب */
@keyframes thCardEnterKF {
  from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}
.th-doc .div-saleh {
  animation: thCardEnterKF .48s cubic-bezier(.22,.61,.36,1) both;
}
/* stagger بحسب الترتيب الظاهر — أول 24 بطاقة تكفي بصريّاً */
.th-doc .div-saleh:nth-child(1)  { animation-delay: .02s; }
.th-doc .div-saleh:nth-child(2)  { animation-delay: .06s; }
.th-doc .div-saleh:nth-child(3)  { animation-delay: .10s; }
.th-doc .div-saleh:nth-child(4)  { animation-delay: .14s; }
.th-doc .div-saleh:nth-child(5)  { animation-delay: .18s; }
.th-doc .div-saleh:nth-child(6)  { animation-delay: .22s; }
.th-doc .div-saleh:nth-child(7)  { animation-delay: .26s; }
.th-doc .div-saleh:nth-child(8)  { animation-delay: .30s; }
.th-doc .div-saleh:nth-child(9)  { animation-delay: .32s; }
.th-doc .div-saleh:nth-child(10),
.th-doc .div-saleh:nth-child(11),
.th-doc .div-saleh:nth-child(12) { animation-delay: .34s; }
.th-doc .div-saleh:nth-child(n+13) { animation-delay: .36s; }

/* 2) رؤوس الوحدات — شريحة نحاسية أنيقة مع مقبض */
.th-doc h6.unitOne {
  position: relative;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1.15rem .55rem 1.35rem;
  margin: 1.6rem 0 .8rem !important;
  font-size: 1rem !important; font-weight: 800 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #D46E2A, #B85B21);
  border-radius: 14px 6px 14px 14px;
  box-shadow: 0 10px 22px rgba(212,110,42,.24), inset 0 1px 0 rgba(255,255,255,.35);
  isolation: isolate;
}
.th-doc h6.unitOne::before {
  content: "\ea3d"; /* ti-book-2 */
  font-family: "tabler-icons"; font-weight: 400;
  font-size: 1.05rem; opacity: .95;
}
.th-doc h6.unitOne::after {
  content: ""; position: absolute; z-index: -1;
  inset-inline-start: -6px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 60%; border-radius: 999px;
  background: linear-gradient(180deg, #F2B58C, #D46E2A);
  box-shadow: 0 0 10px rgba(242,181,140,.6);
}
html.dark-style .th-doc h6.unitOne {
  box-shadow: 0 10px 22px rgba(212,110,42,.35), inset 0 1px 0 rgba(255,255,255,.18);
}

/* 3) عدّاد المسار في الترويسة — كبسولة نحاسية دقيقة */
.th-topbar h5 .th-count {
  display: inline-flex; align-items: center;
  margin-inline-start: .5rem;
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 800;
  color: var(--brand, #D46E2A);
  background: rgba(212,110,42,.12);
  border: 1px solid rgba(212,110,42,.18);
}
html.dark-style .th-topbar h5 .th-count {
  color: #F2B58C; background: rgba(212,110,42,.16); border-color: rgba(212,110,42,.28);
}

/* 4) شرائح الفلترة — إحساس ضغط ناعم + ومضة عند hover */
.th-filters .th-chip-f {
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.th-filters .th-chip-f:not(.is-active):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16,24,40,.08);
}
.th-filters .th-chip-f.is-active {
  box-shadow: 0 4px 12px rgba(212,110,42,.28);
}
.th-filters .th-chip-f:active { transform: translateY(0) scale(.97); }

/* 5) حقل البحث — نمو خفيف عند التركيز، وأيقونة تلتفت */
.th-topbar .th-search { transition: width .25s ease, box-shadow .2s ease, border-color .2s ease; }
.th-topbar .th-search:focus-within .th-search-ico {
  transform: rotate(-12deg) scale(1.08);
  transition: transform .25s ease;
}

/* 6) زر «العودة للأعلى» — نبضة برتقالية دقيقة عند الظهور */
@keyframes thToTopPulseKF {
  0%   { box-shadow: 0 0 0 0 rgba(212,110,42,.45); }
  100% { box-shadow: 0 0 0 14px rgba(212,110,42,0); }
}
.th-to-top:not([hidden]) { animation: thToTopPulseKF 1.6s ease-out 1; }

/* 7) بطاقة «محمّل» — علامة صحيحة بحركة رشيقة */
@keyframes thMarkInKF {
  0%   { transform: scale(.6);  opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
.th-doc .div-saleh.th-mark-in::after {
  content: ""; position: absolute; inset-block-start: 8px; inset-inline-end: 8px;
  animation: thMarkInKF .5s ease both;
}

/* 8) احترام تفضيلات تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .th-doc .div-saleh,
  .th-to-top:not([hidden]),
  .th-doc .div-saleh.th-mark-in::after,
  .th-bulk-btn.is-loading i { animation: none !important; }
  .th-bulk-btn:hover { transform: none; }
}

/* =====================================================================
   POLISH v3 — بطاقة الملف (.card-interactive / .th-fcard)
   لمسات دقيقة تكمل التصميم القائم بلا تعديله.
   ===================================================================== */

/* بطاقة تفاعلية — طبقة لمعان خفيفة تنجرف من اليمين لليسار عند hover */
.card-interactive {
  position: relative; overflow: hidden;
  --th-sheen: linear-gradient(115deg,
    transparent 0%, transparent 42%,
    rgba(255,255,255,.35) 50%,
    transparent 58%, transparent 100%);
}
.card-interactive::before {
  content: ""; position: absolute; inset: 0;
  background: var(--th-sheen);
  transform: translateX(-120%); pointer-events: none;
  transition: transform .75s cubic-bezier(.22,.61,.36,1);
  z-index: 1;
}
.card-interactive:hover::before { transform: translateX(120%); }
html.dark-style .card-interactive {
  --th-sheen: linear-gradient(115deg,
    transparent 0%, transparent 42%,
    rgba(255,255,255,.10) 50%,
    transparent 58%, transparent 100%);
}
/* لا يظهر اللمعان في وضع القائمة */
.th-view-list .card-interactive::before { display: none; }

/* شارة النوع — إحساس حبيبيّ + توهّج بلون النوع عند hover */
.th-fcard-type {
  position: relative;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
.card-interactive:hover .th-fcard-type {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
  filter: saturate(1.1);
}

/* إحصائيات الملف — تفصل بينها فاصلة نقطية دقيقة */
.th-fcard-stats .th-stat + .th-stat::before {
  content: "•"; margin-inline-end: .3rem;
  color: rgba(107,114,128,.55); font-weight: 700;
}
.th-fcard-stats .th-stat { transition: color .2s ease; }
.card-interactive:hover .th-fcard-stats .th-stat { color: var(--dt-text, #1F2937); }
html.dark-style .card-interactive:hover .th-fcard-stats .th-stat { color: #E4E6F1; }

/* شارة «جديد» — نبضة ناعمة لجذب النظر (مرة واحدة) */
@keyframes thNewPulseKF {
  0%   { box-shadow: 0 0 0 0    rgba(212,110,42,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(212,110,42,0); }
  100% { box-shadow: 0 0 0 0    rgba(212,110,42,0); }
}
.th-new-file {
  animation: thNewPulseKF 1.6s ease-out .3s 2;
}

/* بطاقة «محمّلة» — إطار داخلي أخضر خافت + علامة صحّ فوقها */
.th-doc .div-saleh.is-downloaded .card-interactive {
  border-color: rgba(34,197,94,.35) !important;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,.18);
}
.th-doc .div-saleh.is-downloaded .card-interactive::after {
  content: "\ea5e"; /* ti-check */
  font-family: "tabler-icons"; font-weight: 400; font-size: .72rem;
  /* أسفل يمين (RTL) — بعيد عن زر النقاط الثلاث أعلى اليمين */
  position: absolute; inset-block-end: 8px; inset-inline-start: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff; box-shadow: 0 4px 10px rgba(34,197,94,.35);
  z-index: 2; pointer-events: none;
}
/* في وضع القائمة الأفقي، ابقِ العلامة على اليسار وسط الصف */
.th-view-list .div-saleh.is-downloaded .card-interactive::after {
  inset-block-end: auto; top: 50%; transform: translateY(-50%);
  inset-inline-start: 8px;
}

/* زر النقاط الثلاث — يلتفت عند فتح القائمة */
.th-card-menu { transition: background .18s ease, color .18s ease, transform .25s ease; }
.th-card-menu[aria-expanded="true"] { transform: rotate(90deg); }

/* حلقة تركيز واضحة لبطاقات الروابط (لوحة المفاتيح) */
.card-interactive a:focus-visible {
  outline: 2px solid rgba(212,110,42,.55);
  outline-offset: -3px; border-radius: 12px;
}

/* (سابقاً: نقطة نحاسية زخرفية قبل رأس الفئة — أُزيلت لأنها بلا معنى وظيفي) */
.th-fcard-topic { position: relative; }

/* شارة «جديد» فوق ركن البطاقة تلامس أول سطر حين يطول النص — احجز مكانها
   (p-2 على .th-fcard بقيمة !important فلا بدّ من مثلها، كنمط قاعدة is-downloaded) */
.th-doc .div-saleh:has(> .th-new-file) .th-fcard { padding-inline-end: 3.4rem !important; }

/* تكامل مع تخفيف الحركة */
@media (prefers-reduced-motion: reduce) {
  .card-interactive::before,
  .th-new-file,
  .th-card-menu[aria-expanded="true"] { animation: none !important; transition: none !important; transform: none !important; }
}

/* =====================================================================
   POLISH v4 — مركز التحميلات (.th-dlc-*)
   يكمّل التصميم القائم: تنفّس هادئ، شمّرات، ظلّ عند hover، حالة فارغة أرشد.
   ===================================================================== */

/* الزر العائم — بلا تنفّس مكلف؛ حالة النشاط تتبيّن عبر لون الحلقة/الحدود لاحقاً (v16) */
.th-dlc-dock.is-idle > i { color: var(--brand, #D46E2A); opacity: .82; }
.th-dlc-dock.is-idle { animation: none !important; }

/* اللوحة — دخول ألين من ركن الزر */
.th-dlc-panel.is-open { transform-origin: bottom right; animation: thDlcPanelInKF .32s cubic-bezier(.22,.61,.36,1) both; }
[dir="rtl"] .th-dlc-panel.is-open,
html[dir="rtl"] .th-dlc-panel.is-open { transform-origin: bottom left; }
@keyframes thDlcPanelInKF {
  from { opacity: 0; transform: translateY(18px) scale(.92); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

/* الترويسة — عنوان أنيق مع سطر معلومات مصغّر */
.th-dlc-title { letter-spacing: .1px; }
.th-dlc-title i { filter: drop-shadow(0 2px 4px rgba(212,110,42,.35)); }

/* عنصر التحميل — رفعة خفيفة عند hover + إطار برتقالي شفاف */
.th-dlc-item { transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease; }
.th-dlc-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(16,24,40,.08);
  border-color: rgba(212,110,42,.28);
}
.th-dlc-item .th-dlc-btns button:hover { transform: scale(1.08); }
.th-dlc-item .th-dlc-btns button { transition: background .2s ease, color .2s ease, transform .18s ease; }

/* شريط التقدم — شمّرة زجاجية تتحرّك أثناء النشاط */
.th-dlc-fill { position: relative; overflow: hidden; }
.th-dlc-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
      transparent 0%, rgba(255,255,255,.35) 45%,
      rgba(255,255,255,.55) 50%, rgba(255,255,255,.35) 55%,
      transparent 100%);
  transform: translateX(-100%);
  animation: thDlcShimmerKF 1.6s linear infinite;
}
.th-dlc-item.is-done .th-dlc-fill::after,
.th-dlc-item.is-error .th-dlc-fill::after { animation: none; opacity: 0; }
@keyframes thDlcShimmerKF { to { transform: translateX(100%); } }

/* نجاح — وميض أخضر مرة واحدة */
@keyframes thDlcSuccessKF {
  0%   { background-color: rgba(52,199,123,.16); }
  100% { background-color: rgba(255,255,255,.6); }
}
.th-dlc-item.is-done { animation: thDlcSuccessKF 1.1s ease-out both; }
html.dark-style .th-dlc-item.is-done {
  animation-name: thDlcSuccessDarkKF;
}
@keyframes thDlcSuccessDarkKF {
  0%   { background-color: rgba(52,199,123,.22); }
  100% { background-color: rgba(255,255,255,.05); }
}

/* خطأ — اهتزاز خفيف */
@keyframes thDlcShakeKF {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  50%     { transform: translateX(4px); }
  75%     { transform: translateX(-2px); }
}
.th-dlc-item.is-error { animation: thDlcShakeKF .35s ease; }

/* حالة فارغة — أيقونة سحابة تنفّس + نصّان */
.th-dlc-empty {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.8rem 1rem !important;
}
.th-dlc-empty::before {
  content: "\eb50"; /* ti-cloud-download */
  font-family: "tabler-icons"; font-weight: 400;
  font-size: 2.2rem; color: var(--brand, #D46E2A); opacity: .7;
  animation: thDlcEmptyBobKF 2.6s ease-in-out infinite;
}
@keyframes thDlcEmptyBobKF {
  0%,100% { transform: translateY(0); opacity: .7; }
  50%     { transform: translateY(-3px); opacity: 1; }
}
.th-dlc-empty::after {
  content: "اضغط «تحميل» على أي ملف — يظهر هنا مع تقدّمه";
  font-size: .72rem; color: var(--dt-text-2, #6B7280); font-weight: 500;
}

/* شارة العدّ — نبضة عند التحديث */
.th-dlc-badge { transition: transform .2s ease; }
.th-dlc-pop .th-dlc-badge { transform: scale(1.15); }

/* أزرار الترويسة — دوران رقيق للأيقونة عند hover */
.th-dlc-actions button i { transition: transform .3s ease; }
.th-dlc-actions button:hover i { transform: rotate(-10deg) scale(1.08); }
.th-dlc-actions .th-dlc-clear:hover i { transform: rotate(180deg); }

/* Scrollbar داخل القائمة — رفيع نحاسي */
.th-dlc-list::-webkit-scrollbar { width: 6px; }
.th-dlc-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D46E2A, #B85B21); border-radius: 999px;
}
.th-dlc-list::-webkit-scrollbar-track { background: transparent; }
.th-dlc-list { scrollbar-width: thin; scrollbar-color: #D46E2A transparent; }

/* دعم prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .th-dlc-dock.is-idle,
  .th-dlc-dock:not(.is-idle) > i,
  .th-dlc-empty::before,
  .th-dlc-fill::after,
  .th-dlc-item.is-done,
  .th-dlc-item.is-error { animation: none !important; }
}

/* =====================================================================
   POLISH v5 — موديل المعاينة السريعة (.th-preview-modal)
   ===================================================================== */

/* دخول أنعم — تكبير خفيف من المركز بدل الانزلاق */
.th-preview-modal.fade .modal-dialog { transform: scale(.94) translateY(10px); transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity .3s ease; opacity: 0; }
.th-preview-modal.show .modal-dialog { transform: none; opacity: 1; }

/* المحتوى — زجاج أعمق + إطار داخلي دافئ */
.th-preview-modal .modal-content {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
  box-shadow: 0 42px 96px rgba(16,24,40,.36), inset 0 1px 0 rgba(255,255,255,.85);
}
html.dark-style .th-preview-modal .modal-content {
  border-color: rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(46,51,72,.94), rgba(35,40,58,.88));
  box-shadow: 0 42px 96px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}

/* الترويسة — عنوان أكثر بروزاً + مسافات مريحة */
.th-preview-modal .modal-header {
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,.62), transparent);
  border-bottom: 1px solid rgba(16,24,40,.08);
}
.th-preview-modal .modal-title {
  font-weight: 800; font-size: 1rem; letter-spacing: .1px;
  gap: .55rem; max-width: 70%;
}
.th-preview-modal .modal-title i {
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(212,110,42,.14), rgba(212,110,42,.08));
  color: var(--brand, #D46E2A); font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px rgba(212,110,42,.18);
}

/* زر تحميل الترويسة — كبسولة نحاسية بارزة */
.th-preview-modal #thPreviewDownload {
  border: 0; border-radius: 999px; padding: .48rem 1.1rem; font-weight: 800; font-size: .82rem;
  background: linear-gradient(135deg, #D46E2A, #B85B21); color: #fff;
  box-shadow: 0 8px 18px rgba(212,110,42,.35);
  transition: transform .18s ease, box-shadow .22s ease, filter .2s ease;
}
.th-preview-modal #thPreviewDownload:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 24px rgba(212,110,42,.45); }
.th-preview-modal #thPreviewDownload:active { transform: translateY(0) scale(.97); }
.th-preview-modal #thPreviewDownload i { transition: transform .3s ease; }
.th-preview-modal #thPreviewDownload:hover i { transform: translateY(2px); }

/* زر الإغلاق — دوران رقيق */
.th-preview-modal .btn-close { opacity: .55; transition: transform .25s ease, opacity .2s ease; }
.th-preview-modal .btn-close:hover { opacity: 1; transform: rotate(90deg) scale(1.1); }

/* جسم المعاينة — أرضية بمنسوج شبكي رقيق ودفء لون */
.th-preview-body {
  background:
    radial-gradient(600px 400px at 15% 0%, rgba(212,110,42,.06), transparent 60%),
    radial-gradient(600px 400px at 85% 100%, rgba(78,168,222,.06), transparent 60%),
    #f4f6fb;
  box-shadow: inset 0 6px 16px -8px rgba(16,24,40,.18);
}
html.dark-style .th-preview-body {
  background:
    radial-gradient(600px 400px at 15% 0%, rgba(212,110,42,.09), transparent 60%),
    radial-gradient(600px 400px at 85% 100%, rgba(78,168,222,.08), transparent 60%),
    #1b2030;
  box-shadow: inset 0 6px 16px -8px rgba(0,0,0,.5);
}

/* إطار الـiframe والصورة — بطاقة داخلية بحواف مستديرة وظل ناعم */
.th-preview-frame,
.th-preview-img {
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(16,24,40,.16);
  background: #fff;
}
html.dark-style .th-preview-frame,
html.dark-style .th-preview-img { background: #262b3d; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.th-preview-img { padding: .6rem; }

/* شاشة تقدّم PDF — أيقونة تنبض + شمّرة بشريط التقدم */
.th-pp-ico {
  animation: thPvIcoPulseKF 1.8s ease-in-out infinite;
  box-shadow: 0 8px 22px rgba(229,72,77,.28);
}
@keyframes thPvIcoPulseKF {
  0%,100% { transform: scale(1);    box-shadow: 0 8px 22px rgba(229,72,77,.28); }
  50%     { transform: scale(1.06); box-shadow: 0 12px 28px rgba(229,72,77,.42); }
}
.th-pp-fill { position: relative; overflow: hidden; }
.th-pp-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
      transparent 0%, rgba(255,255,255,.4) 45%,
      rgba(255,255,255,.65) 50%, rgba(255,255,255,.4) 55%,
      transparent 100%);
  transform: translateX(-100%);
  animation: thPvFillShimmerKF 1.5s linear infinite;
}
@keyframes thPvFillShimmerKF { to { transform: translateX(100%); } }

/* حالة الخطأ — بطاقة أنيقة بدلاً من نص عاري */
.th-preview-error {
  padding: 2.6rem 1.4rem !important;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.th-preview-error::before {
  content: "\eb15"; /* ti-alert-triangle */
  font-family: "tabler-icons"; font-weight: 400; font-size: 2.4rem;
  width: 76px; height: 76px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  color: #E5484D; background: rgba(229,72,77,.12);
  box-shadow: inset 0 0 0 1px rgba(229,72,77,.22);
  animation: thPvErrShakeKF .55s ease;
}
@keyframes thPvErrShakeKF {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px) rotate(-3deg); }
  40%     { transform: translateX(6px)  rotate(3deg); }
  60%     { transform: translateX(-4px) rotate(-2deg); }
  80%     { transform: translateX(4px)  rotate(2deg); }
}
.th-preview-error i { display: none; } /* الأيقونة النصية الأصلية — نستبدلها بشارة ::before */

/* تخفيف الحركة */
@media (prefers-reduced-motion: reduce) {
  .th-preview-modal .modal-dialog,
  .th-pp-ico,
  .th-pp-fill::after,
  .th-preview-error::before { animation: none !important; transition: none !important; }
}

/* =====================================================================
   POLISH v6 — شريط تنقّل الوحدات (.th-units-nav) ورؤوس الوحدات
   ===================================================================== */

/* شريط الوحدات — على الشاشات الضيقة يصبح تمريراً أفقياً بدل الالتفاف */
@media (max-width: 720px) {
  .th-units-nav {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
  .th-units-nav::-webkit-scrollbar { display: none; }
  .th-unit-chip { scroll-snap-align: start; flex-shrink: 0; }
}

/* لمعة عابرة على شريحة الوحدة عند hover — إحساس حرير */
.th-unit-chip { position: relative; overflow: hidden; }
.th-unit-chip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .55s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.th-unit-chip:hover::after { transform: translateX(120%); }
.th-unit-chip:active { transform: translateY(0) scale(.97); }

/* الشريحة النشطة — نبضة تحت النص كمؤشر تركيز */
.th-unit-chip.is-active { position: relative; }
.th-unit-chip.is-active::before {
  content: ""; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand, #D46E2A); box-shadow: 0 0 8px rgba(212,110,42,.7);
  animation: thUnitDotKF 1.8s ease-in-out infinite;
}
@keyframes thUnitDotKF { 0%,100% { opacity: .55; } 50% { opacity: 1; transform: translateX(-50%) scale(1.25); } }

/* شارة عدد الشرائح — نبضة عند التغيّر (يستدعيها JS في v7) */
@keyframes thChipCntBumpKF {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.th-unit-chip .th-chip-count.th-cnt-bump { animation: thChipCntBumpKF .35s ease; }

/* رأس الوحدة — مؤشر السهم بمنحنى مرن (spring) */
.th-unit-head .th-u-chev { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }

/* رأس الوحدة عند hover — لمعة علوية دقيقة */
.th-unit-head::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent 40%);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.th-unit-head { position: relative; overflow: hidden; }
.th-unit-head:hover::before { opacity: .6; }

/* عدّاد رأس الوحدة — يبرز عند تغيّره */
.th-unit-head .th-u-count.th-cnt-bump { animation: thChipCntBumpKF .35s ease; }

/* أزرار تحميل/ضغط الوحدة — إحساس ضغط ودوران أيقونة */
.th-u-dl i, .th-u-zip i { transition: transform .3s ease; }
.th-u-dl:hover i { transform: translateY(2px); }      /* أيقونة السهم النازل */
.th-u-zip:hover i { transform: rotate(-8deg); }        /* أيقونة الضغط */
.th-u-dl:active, .th-u-zip:active { transform: scale(.94); }

/* تكامل مع تخفيف الحركة */
@media (prefers-reduced-motion: reduce) {
  .th-unit-chip::after,
  .th-unit-chip.is-active::before,
  .th-unit-head::before,
  .th-unit-head .th-u-chev { transition: none !important; animation: none !important; }
}

/* =====================================================================
   POLISH v7 — تحسينات تفاعلية (اختصارات، تمييز بحث، تقدّم القراءة، أداء)
   ===================================================================== */

/* شريط تقدّم القراءة العلوي — 2px نحاسي */
.th-read-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2147483001;
  background: linear-gradient(90deg, #D46E2A, #F2B58C, #B85B21);
  transform-origin: 0 0; transform: scaleX(0);
  transition: transform .1s linear;
  pointer-events: none;
  box-shadow: 0 1px 6px rgba(212,110,42,.35);
}
[dir="rtl"] .th-read-bar,
html[dir="rtl"] .th-read-bar { transform-origin: 100% 0; }
@media (prefers-reduced-motion: reduce) { .th-read-bar { transition: none; } }

/* تمييز نتيجة البحث داخل النصوص */
.th-hl {
  background: linear-gradient(120deg, #FEEBC8, #FFD9B0);
  color: #7A3A0F; padding: 0 .18em; border-radius: 4px;
  font-weight: 800; box-decoration-break: clone;
}
html.dark-style .th-hl {
  background: linear-gradient(120deg, rgba(212,110,42,.45), rgba(242,181,140,.45));
  color: #FFECD5;
}

/* أداء: تقصير كلفة رسم البطاقات خارج الشاشة عند وجود عدد كبير */
body.th-cv-on .th-doc .div-saleh {
  content-visibility: auto;
  contain-intrinsic-size: 220px 220px;
}
/* ⚠️ content-visibility يفرض paint containment يقصّ حدّ البطاقة العلوي عند
   رفعها بالتحويم ويقصّ ظلّها على حدود العمود — نعطّله عن العمود المُحام
   عليه فقط (ظاهر على الشاشة أصلاً فلا كلفة أداء) */
body.th-cv-on .th-doc .div-saleh:hover { content-visibility: visible; }

/* لوحة الاختصارات (? لتفعيلها) */
.th-kbd-help {
  position: fixed; z-index: 2147483002;
  bottom: 24px; inset-inline-start: 80px;
  min-width: 240px; padding: .8rem .9rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.85));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 20px 44px rgba(16,24,40,.22), inset 0 1px 0 rgba(255,255,255,.85);
  color: var(--dt-text, #1F2937); font-size: .82rem;
  animation: thKbdInKF .28s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes thKbdInKF { from { opacity: 0; transform: translateY(10px) scale(.95); } to { opacity: 1; transform: none; } }
.th-kbd-title {
  font-weight: 800; margin-bottom: .55rem; display: flex; align-items: center; gap: .4rem;
  padding-bottom: .45rem; border-bottom: 1px solid rgba(16,24,40,.08);
}
.th-kbd-title i { color: var(--brand, #D46E2A); }
.th-kbd-row { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; }
.th-kbd-row kbd {
  min-width: 26px; padding: .1rem .4rem; border-radius: 6px; text-align: center;
  background: linear-gradient(180deg, #fff, #eef1f7); color: #1F2937;
  border: 1px solid rgba(16,24,40,.15); border-bottom-width: 2px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .78rem; font-weight: 800;
}
html.dark-style .th-kbd-help {
  background: linear-gradient(135deg, rgba(46,51,72,.95), rgba(35,40,58,.88));
  border-color: rgba(255,255,255,.1); color: #E4E6F1;
  box-shadow: 0 20px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
html.dark-style .th-kbd-title { border-bottom-color: rgba(255,255,255,.08); }
html.dark-style .th-kbd-row kbd {
  background: linear-gradient(180deg, #3a4058, #2d3244); color: #E4E6F1;
  border-color: rgba(255,255,255,.14);
}

/* =====================================================================
   POLISH v8 — أزرار تنقّل ←/→ داخل موديل المعاينة
   ===================================================================== */
.th-pv-nav {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .18rem .3rem; border-radius: 999px;
  background: rgba(212,110,42,.08);
  border: 1px solid rgba(212,110,42,.16);
}
.th-pv-nav.is-hidden { display: none; }
.th-pv-arrow {
  border: 0; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--brand, #D46E2A); font-size: 1.05rem;
  transition: background .18s ease, transform .15s ease, color .18s ease;
}
.th-pv-arrow:hover:not([disabled]) {
  background: linear-gradient(135deg, #D46E2A, #B85B21);
  color: #fff; transform: scale(1.08);
}
.th-pv-arrow[disabled] { opacity: .35; cursor: not-allowed; }
.th-pv-count {
  min-width: 44px; text-align: center; font-weight: 800; font-size: .78rem;
  color: var(--brand-hover, #B85B21); letter-spacing: .3px;
}
html.dark-style .th-pv-nav { background: rgba(212,110,42,.16); border-color: rgba(212,110,42,.28); }
html.dark-style .th-pv-count { color: #F2B58C; }
@media (prefers-reduced-motion: reduce) {
  .th-pv-arrow { transition: none; }
  .th-pv-arrow:hover { transform: none; }
}

/* =====================================================================
   PERF — تخفيف تكلفة التركيب/الرسم على الصفحات كبيرة الحجم
   يبطل الحركات الدائمة ويقلّل blur المكلف عند التمرير.
   ===================================================================== */

/* أوقف الحركات الدائمة (perpetual) الأغلى — تكفي رفعة/hover لجذب النظر
   (الإبطال الأعمى للأيقونة أُزيل في v16 — النبضة الخفيفة للحلقة تعوّض التنفس) */
.th-unit-chip.is-active::before { animation: none !important; }
.th-dlc-empty::before { animation: none !important; }

/* رأس الوحدة — القدر الأخف من blur (كان 14px × N heads يعيد التركيب مع التمرير) */
.th-unit-head {
  -webkit-backdrop-filter: blur(6px) saturate(140%);
          backdrop-filter: blur(6px) saturate(140%);
  contain: layout paint;
}
.th-units-nav {
  -webkit-backdrop-filter: blur(8px) saturate(150%);
          backdrop-filter: blur(8px) saturate(150%);
  contain: layout paint;
}

/* أرشد content-visibility — نُشغّله من 20 بطاقة فأكثر (بدل 40) */
body.th-cv-on .th-doc .div-saleh { contain-intrinsic-size: 200px 200px; }

/* لمعة كارت hover كانت تعمل حتى للبطاقات المخفية — قيّدها بتكلفة أقل */
.card-interactive::before { contain: paint; }
.th-doc .div-saleh.th-hide-x .card-interactive::before { display: none; }

/* =====================================================================
   POLISH v9 — مراجعة شريط الفلترة كاملاً (.th-filters)
   ===================================================================== */
.th-filters {
  gap: .45rem;            /* أضيق قليلاً لصف أنظف */
  padding: .5rem .65rem;
  align-items: center;
}
.th-filters-ico {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(212,110,42,.1);
  color: var(--brand, #D46E2A);
}
.th-filters-sep { margin: 0 .1rem; }
.th-filter-types { gap: .28rem; }

/* شريحة الفرز — كبسولة موحّدة (لتنسجم بصرياً مع الشرائح) */
.th-sort {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .18rem .5rem .18rem .35rem;
  border-radius: 999px;
  background: rgba(212,110,42,.08);
  border: 1px solid rgba(212,110,42,.18);
  color: var(--brand-hover, #B85B21);
  font-weight: 700; font-size: .78rem;
  transition: background .18s ease, border-color .18s ease;
}
.th-sort:hover { background: rgba(212,110,42,.14); border-color: rgba(212,110,42,.3); }
.th-sort .th-sort-sel {
  border: 0; background: transparent; outline: none; color: inherit;
  font-weight: 700; font-size: .78rem; padding: .18rem .1rem; cursor: pointer;
  min-width: 110px;
}
html.dark-style .th-sort { background: rgba(212,110,42,.16); border-color: rgba(212,110,42,.28); color: #F2B58C; }
html.dark-style .th-sort .th-sort-sel { color: #F2B58C; }

/* زر إعادة الضبط — يبقى بجانب الفرز بدل أن يتلاعب بترتيب الفلكس */
.th-filters-reset { margin-inline-start: 0; }

/* مجموعة أزرار «الكل» — تُدفع إلى الطرف الآخر */
.th-bulk-group { margin-inline-start: auto; }

/* على الشاشات الضيقة — الشريط يلتف ويحافظ على قراءة الأزرار */
@media (max-width: 720px) {
  .th-filters { gap: .35rem; padding: .45rem .55rem; }
  .th-filters-ico { display: none; }              /* أيقونة الفلتر ثانوية على الجوّال */
  .th-sort .th-sort-sel { min-width: 90px; }
  .th-bulk-group { gap: .25rem; }
}

/* =====================================================================
   POLISH v10 — البحث + محوّل العرض (grid/list) + شارة العدد في الترويسة
   ===================================================================== */

/* حقل البحث — مؤثّرات دقيقة */
.th-search { transition: box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.th-search:focus-within {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
  box-shadow: 0 8px 22px rgba(212,110,42,.16);
}
.th-search-ico { transition: transform .28s ease, color .2s ease; }
.th-search:focus-within .th-search-ico {
  color: var(--brand-hover, #B85B21);
  transform: rotate(-14deg) scale(1.1);
}
.th-search-input::placeholder { transition: color .2s ease, transform .3s ease; }
.th-search:focus-within .th-search-input::placeholder { opacity: .5; }

/* زر مسح البحث — نبضة عند الظهور، دوران خفيف عند hover */
@keyframes thClearInKF {
  from { opacity: 0; transform: scale(.6) rotate(-90deg); }
  to   { opacity: 1; transform: none; }
}
.th-search-clear:not([hidden]) { animation: thClearInKF .22s cubic-bezier(.22,.61,.36,1) both; }
.th-search-clear i { transition: transform .25s ease; }
.th-search-clear:hover i { transform: rotate(90deg); }

/* محوّل العرض — تحسينات: ظل داخلي للزر النشط + hover لزر غير النشط */
.th-view-toggle button:not(.is-active):hover {
  background: rgba(212,110,42,.1);
}
.th-view-toggle button.is-active {
  box-shadow: 0 4px 10px rgba(212,110,42,.3), inset 0 1px 0 rgba(255,255,255,.35);
  animation: thViewSwapKF .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes thViewSwapKF {
  0%   { transform: scale(.75); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.th-view-toggle button i { transition: transform .28s ease; }
.th-view-toggle button.is-active i { transform: scale(1.08); }
.th-view-toggle { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; }
.th-view-toggle button, .th-view-toggle a { flex: 0 0 auto; }

/* شارة عدد النتائج في الترويسة (.th-count) — نبضة عند تحديثها */
@keyframes thCntPopKF { 40% { transform: scale(1.14); } }
.th-topbar h5 .th-count.th-cnt-pop { animation: thCntPopKF .35s ease; }

/* عند صفر نتائج — الشارة تتلوّن بحمرة تحذيرية دقيقة */
.th-topbar h5 .th-count.is-zero {
  color: #E5484D; background: rgba(229,72,77,.1); border-color: rgba(229,72,77,.22);
}
html.dark-style .th-topbar h5 .th-count.is-zero {
  color: #FDA4A5; background: rgba(229,72,77,.16); border-color: rgba(229,72,77,.3);
}

/* أزرار الترويسة (view toggle + search) — مسافة تنفس */
.th-topbar > .d-flex.align-items-center.gap-2 { gap: .5rem !important; }

/* =====================================================================
   POLISH v11 — تصغير شرائح شريط الوحدات + عدّاد عائم + قصّ ذكي
   ===================================================================== */
.th-units-nav { gap: .3rem; padding: .32rem .5rem; }

/* شريحة الوحدة — أصغر وأخف، مع مساحة للعدّاد العائم */
.th-unit-chip {
  padding: .3rem .65rem .3rem .55rem;   /* أضيق عمودياً وأفقياً */
  font-size: .78rem; font-weight: 700;
  gap: .3rem;
  position: relative; overflow: visible;   /* حتى لا يُقصّ العدّاد العائم */
}
.th-unit-chip i { font-size: .88rem; }

/* اسم الوحدة — قصّ ذكي بحدود عرض داخل الشريحة */
.th-unit-chip .th-chip-txt {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-block; vertical-align: middle;
}

/* العدّاد — يصير شارة عائمة أعلى-يسار (RTL) بدل الإلحاق الداخلي */
.th-unit-chip .th-chip-count {
  position: absolute;
  top: -6px; inset-inline-start: -6px;
  min-width: 18px; height: 18px; padding: 0 .32rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #B85B21, #8A3F13); color: #fff;
  font-size: .64rem; font-weight: 900; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(184,91,33,.35), 0 0 0 2px rgba(255,255,255,.9);
  transition: transform .2s ease, background .25s ease;
  pointer-events: none;
}
.th-unit-chip.is-active .th-chip-count {
  background: linear-gradient(135deg, #fff, #FFECD5);
  color: var(--brand-hover, #B85B21);
  box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 0 0 2px rgba(212,110,42,.4);
}
html.dark-style .th-unit-chip .th-chip-count {
  box-shadow: 0 3px 8px rgba(184,91,33,.5), 0 0 0 2px rgba(35,40,58,.9);
}

/* على الشاشات الضيقة — قلّ العرض الأقصى لتتلاءم */
@media (max-width: 720px) {
  .th-unit-chip .th-chip-txt { max-width: 110px; }
}

/* =====================================================================
   FIX — علامة «محمّل» مع نمطي العرض (شبكة/قائمة)
   المشكلة: الشارة كانت ::after على .card-interactive الذي صار overflow:hidden
   (لأجل لمعة hover) فكانت تُقصّ عند الحواف. الحل: ننقلها إلى العمود الأب.
   ===================================================================== */

/* عطّل كل شارات ::after القديمة على البطاقة */
.th-doc .div-saleh.is-downloaded .card-interactive::after,
.th-view-list .div-saleh.is-downloaded .card-interactive::after {
  content: none !important;
}

/* الشارة على العمود — لا تتأثر بـ overflow البطاقة */
.th-doc .div-saleh { position: relative; }
.th-doc .div-saleh.is-downloaded::after {
  content: "\ea5e"; /* ti-check */
  font-family: "tabler-icons"; font-weight: 400; font-size: .72rem;
  position: absolute; z-index: 3; pointer-events: none;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff; box-shadow: 0 4px 10px rgba(34,197,94,.35), 0 0 0 2px rgba(255,255,255,.85);
  /* الشبكة: أسفل-يسار (RTL: inline-end = يسار) داخل حدود البطاقة */
  inset-block-end: 10px; inset-inline-end: 10px;
}
html.dark-style .th-doc .div-saleh.is-downloaded::after {
  box-shadow: 0 4px 10px rgba(34,197,94,.45), 0 0 0 2px rgba(35,40,58,.9);
}

/* القائمة: وسط عمودي على الطرف اليسار (RTL: inline-end) */
.th-view-list .div-saleh.is-downloaded::after {
  inset-block-end: auto; top: 50%; transform: translateY(-50%);
  inset-inline-end: 12px;
}
/* في القائمة أفسح مكاناً للنص كي لا يمرّ تحت الشارة */
.th-view-list .div-saleh.is-downloaded .th-fcard { padding-inline-end: 2.1rem !important; }

/* نبضة الوسم الحيّ تعمل على العمود الآن */
.th-doc .div-saleh.th-mark-in::after { animation: th-dlc-pop .5s cubic-bezier(.18,.89,.32,1.4); }

/* FIX — تصادم علامة «محمّل» مع شارة «جديد» في نمط القائمة:
   عند اجتماعهما تنزاح «جديد» إلى الداخل فيتجاوران بلا تراكب */
.th-view-list .div-saleh.is-downloaded .th-new-file {
  inset-inline-end: 42px;
}

/* نمط القائمة — محاذاة محتوى البطاقة إلى اليمين بدل التوسيط
   (البطاقة flex فالمحاذاة تكون على justify-content لا text-align) */
.th-view-list .th-fcard { justify-content: flex-start !important; text-align: start !important; }
.th-view-list .th-fcard-meta,
.th-view-list .th-fcard-stats { justify-content: flex-start; }
/* الرابط الملتفّ حول البطاقة w-100 مع text-center — حيّده أيضاً */
.th-view-list .card-interactive a.text-center { text-align: start !important; }

/* =====================================================================
   POLISH v12 — كثافة أهدأ: تصغير طفيف موحّد + لمسات تجربة
   طبقة override خالصة في ذيل الملف — لا تعدّل القواعد الأصلية.
   ===================================================================== */

/* --- 1) بطاقة الملف (شبكة) — خط ومسافات أضيق قليلاً --- */
.th-fcard-topic { font-size: .84rem; line-height: 1.5; }
.th-fcard-nick,
.th-fcard-title { font-size: .84rem; }
.th-fcard-type  { font-size: .66rem; padding: .12rem .5rem; }
.th-fcard-meta  { gap: .4rem; margin-top: .35rem; }
.th-fcard-stats { gap: .45rem; margin-top: .35rem; }
.th-stat        { font-size: .68rem; }
.th-doc .th-fcard { padding: .55rem .6rem !important; }

/* زر قائمة البطاقة (⋮) أصغر بلا فقدان مساحة نقر عملية */
.th-card-menu { width: 28px; height: 28px; font-size: 1.05rem; }

/* شارة «جديد» أصغر (إن كانت نصية) */
.th-new-file { font-size: .64rem; padding: .12rem .5rem; }

/* --- 2) رأس الوحدة — أنحف --- */
.th-unit-head {
  padding: .5rem .9rem !important;
  font-size: .9rem;
  border-radius: 12px;
  margin: .4rem .25rem .35rem !important;
}
.th-unit-head .th-u-count { min-width: 24px; height: 19px; font-size: .68rem; padding: 0 .45rem; }
.th-unit-head .th-u-chev  { font-size: .95rem; }
.th-u-dl, .th-u-zip { width: 26px; height: 26px; border-radius: 8px; font-size: .95rem; }

/* --- 3) شريط الفلاتر — شرائح أصغر --- */
.th-chip-f { padding: .26rem .68rem; font-size: .78rem; }
.th-chip-n { font-size: .64rem; padding: 0 .32rem; }
.th-filters { padding: .45rem .6rem; gap: .4rem; }
.th-filters-ico { width: 24px; height: 24px; font-size: 1rem; }
.th-sort { font-size: .75rem; }
.th-sort .th-sort-sel { font-size: .75rem; min-width: 100px; }
.th-filters-reset { width: 26px; height: 26px; }
.th-bulk-btn { height: 28px; padding: 0 .5rem; border-radius: 9px; }
.th-bulk-btn i { font-size: .98rem; }
.th-bulk-n { min-width: 16px; height: 16px; font-size: .62rem; }

/* --- 4) الترويسة العلوية — أهدأ --- */
.th-topbar { padding: .5rem .8rem; }
.th-topbar h5 { font-size: .95rem; }
.th-topbar .th-count { font-size: .72rem; padding: .1rem .5rem; }
.th-search { min-width: 190px; }
.th-search-input { font-size: .84rem; }
.th-view-toggle button, .th-view-toggle a { width: 28px; height: 28px; font-size: .98rem; }

/* أقل من 16px يجعل iOS يقرّب الصفحة عند التركيز على حقل البحث */
@media (max-width: 575.98px) {
  .th-topbar .th-search-input { font-size: 1rem; }
}

/* --- 5) شريط تنقّل الوحدات — أنحف درجة إضافية --- */
.th-units-nav { padding: .28rem .45rem; gap: .28rem; }
.th-unit-chip { padding: .26rem .6rem .26rem .5rem; font-size: .75rem; }
.th-unit-chip i { font-size: .82rem; }
.th-unit-chip .th-chip-count { min-width: 16px; height: 16px; font-size: .6rem; top: -5px; inset-inline-start: -5px; }

/* --- 6) نمط القائمة — صفوف أنحف وأنظف --- */
.th-view-list .th-fcard { padding: .35rem .55rem !important; gap: .2rem .55rem; }
.th-view-list .th-fcard-topic,
.th-view-list .th-fcard-nick,
.th-view-list .th-fcard-title { font-size: .8rem; }
.th-view-list .card-interactive { border-radius: 10px; }

/* --- 7) لمسات تجربة --- */
/* فاصل البطاقة العمودي في الشبكة يلتقط العين أقل */
.th-fcard-sep { opacity: .75; }
/* مؤشّر يد على رأس الوحدة كان موجوداً؛ أضف تلميح تركيز */
.th-unit-head:focus-visible { outline: 2px solid rgba(212,110,42,.5); outline-offset: 2px; }
/* شارة العدّ في الترويسة لا تُقفز السطر */
.th-topbar h5 { row-gap: .15rem; }
/* أزرار المجموعة تبقى بمساحة نقر كافية على اللمس */
@media (pointer: coarse) {
  .th-bulk-btn, .th-u-dl, .th-u-zip, .th-card-menu,
  .th-view-toggle button { min-width: 34px; min-height: 34px; }
}

/* =====================================================================
   POLISH v13 — حالة فراغ عند 0 نتائج + Toast اكتمال ZIP
   ===================================================================== */

/* ---- حالة الفراغ ---- */
.th-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; max-width: 520px;
  margin: 1.2rem auto;
  padding: 2rem 1.4rem;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.6));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px dashed rgba(212,110,42,.32);
  color: var(--dt-text, #1F2937);
  animation: thEmptyInKF .32s cubic-bezier(.22,.61,.36,1) both;
}
.th-empty-state[hidden] { display: none !important; }
.th-empty-state > * { flex: 0 0 auto; max-width: 100%; }
.th-empty-state .th-empty-title,
.th-empty-state .th-empty-sub { width: 100%; text-align: center; }
@keyframes thEmptyInKF { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.th-empty-ic {
  width: 72px; height: 72px; border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto .75rem;
  background: rgba(212,110,42,.12); color: var(--brand, #D46E2A);
  font-size: 2rem;
  box-shadow: inset 0 0 0 1px rgba(212,110,42,.22);
}
.th-empty-title { font-weight: 800; font-size: 1rem; margin-bottom: .3rem; }
.th-empty-sub { color: var(--dt-text-2, #6B7280); font-size: .85rem; margin-bottom: .95rem; }
.th-empty-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 0; cursor: pointer;
  height: 32px; padding: 0 1rem; border-radius: 999px;
  background: linear-gradient(135deg, #D46E2A, #B85B21); color: #fff;
  font-weight: 800; font-size: .82rem;
  box-shadow: 0 6px 14px rgba(212,110,42,.32);
  transition: transform .16s ease, box-shadow .22s ease, filter .2s ease;
}
.th-empty-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 22px rgba(212,110,42,.4); }
.th-empty-btn:active { transform: translateY(0) scale(.96); }
html.dark-style .th-empty-state {
  background: linear-gradient(135deg, rgba(58,63,88,.6), rgba(45,50,70,.5));
  border-color: rgba(212,110,42,.4);
  color: #E4E6F1;
}
html.dark-style .th-empty-sub { color: rgba(228,230,241,.7); }

/* ---- Toast اكتمال الأرشيف ---- */
.th-toast-host {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;   /* بعيد عن مركز التحميلات (يمين RTL) */
  z-index: 2147483003;
  display: flex; flex-direction: column-reverse; gap: .5rem;
  pointer-events: none;
}
.th-toast {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: .55rem;
  min-width: 260px; max-width: min(420px, 80vw);
  padding: .6rem .85rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(34,197,94,.35);
  box-shadow: 0 18px 40px rgba(16,24,40,.24), 0 0 0 1px rgba(34,197,94,.1) inset;
  color: var(--dt-text, #1F2937); font-weight: 700; font-size: .84rem;
  animation: thToastInKF .3s cubic-bezier(.22,.61,.36,1) both;
}
.th-toast > i { color: #16A34A; font-size: 1.15rem; flex-shrink: 0; }
.th-toast > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-toast-x {
  border: 0; background: transparent; cursor: pointer;
  color: #9aa0ae; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem; transition: background .18s ease, color .18s ease;
}
.th-toast-x:hover { background: rgba(229,72,77,.12); color: #E5484D; }
.th-toast.is-out { animation: thToastOutKF .28s ease both; }
@keyframes thToastInKF  { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes thToastOutKF { to   { opacity: 0; transform: translateY(10px) scale(.96); } }
html.dark-style .th-toast {
  background: linear-gradient(135deg, rgba(46,51,72,.96), rgba(35,40,58,.9));
  color: #E4E6F1; border-color: rgba(34,197,94,.45);
  box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(34,197,94,.14) inset;
}

@media (prefers-reduced-motion: reduce) {
  .th-empty-state, .th-toast, .th-toast.is-out { animation: none !important; }
}

/* =====================================================================
   RESPONSIVE AUDIT — تنسيق الشاشات المتوسطة والصغيرة (v14)
   يعالج تراكب/زيادة عرض/تكديس عناصر الترويسة والشريط والمودالات.
   ===================================================================== */

/* ------ لوحة (Tablet ≤ 992px) ------ */
@media (max-width: 991.98px) {
  /* المودالات — إعطاء نفس أكثر لعناصر ترويسة المعاينة */
  .th-preview-modal .modal-title { font-size: .9rem; max-width: 55%; }
  .th-preview-modal .modal-title i { width: 28px; height: 28px; font-size: .95rem; }
  .th-pv-count { min-width: 40px; font-size: .72rem; }

  /* شريط الفلاتر — سماح للأزرار «الكل» بالنزول لسطر جديد بشكل نظيف */
  .th-bulk-group { margin-inline-start: 0; }
  .th-filters { row-gap: .5rem; }
  .th-bulk-group::before {
    content: ""; flex-basis: 100%; height: 0; order: -1;
  }
}

/* ------ جوّال (≤ 640px) ------ */
@media (max-width: 640px) {
  /* الترويسة — القيمة الأصلية مُعرّفة في 575.98px، هذه لمسات صقل إضافية */
  .th-topbar h5 .th-count { font-size: .68rem; padding: .06rem .4rem; }

  /* لوحة الاختصارات — تلائم عرض الشاشة */
  .th-kbd-help {
    inset-inline-start: 12px; inset-inline-end: 12px;
    bottom: 78px; min-width: auto; max-width: none; width: auto;
    font-size: .8rem;
  }

  /* Toast — يمتد بعرض الشاشة مع هامش */
  .th-toast-host { inset-inline-start: 12px; inset-inline-end: 90px; bottom: 90px; }
  .th-toast { min-width: 0; max-width: none; width: 100%; font-size: .78rem; }

  /* حالة الفراغ — أضغط */
  .th-empty-state { padding: 1.6rem 1rem; border-radius: 14px; }
  .th-empty-ic { width: 56px; height: 56px; border-radius: 16px; font-size: 1.5rem; }
  .th-empty-title { font-size: .92rem; }
  .th-empty-sub { font-size: .78rem; }

  /* موديل المعاينة — يملأ الشاشة تقريباً بلا هوامش داخلية زائدة */
  .th-preview-modal .modal-dialog { margin: .5rem; max-width: none; }
  .th-preview-modal .modal-content { border-radius: 14px; }
  .th-preview-modal .modal-header { padding: .7rem .8rem; gap: .35rem; }
  .th-preview-modal #thPreviewDownload { padding: .38rem .7rem; font-size: .74rem; }
  .th-preview-modal .modal-title { max-width: 40%; font-size: .82rem; }
  .th-preview-modal .modal-title i { width: 24px; height: 24px; font-size: .82rem; }
  .th-preview-body { min-height: 55vh; }
  .th-preview-frame { height: 68vh; }
  .th-preview-img { max-height: 68vh; }
  .th-pv-nav { padding: .12rem .22rem; gap: .25rem; }
  .th-pv-arrow { width: 24px; height: 24px; font-size: .95rem; }
  .th-pv-count { min-width: 36px; font-size: .68rem; }

  /* لوحة مركز التحميلات — تلائم الشاشة */
  .th-dlc-panel {
    inset-inline-start: 12px; inset-inline-end: 12px; width: auto;
    max-height: min(60vh, 480px);
  }
  .th-dlc-dock { bottom: 16px; inset-inline-end: 16px; width: 48px; height: 48px; }
  .th-to-top   { bottom: 16px; inset-inline-start: 16px; width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ------ جوّال صغير (≤ 380px) ------ */
@media (max-width: 380px) {
  .th-preview-modal .modal-title span { display: none; }   /* اسم الملف يكفيه الأيقونة */
  .th-preview-modal .modal-title { max-width: 30%; }
  .th-topbar h5 .fw-bold { max-width: 40vw; }
  .th-bulk-btn { height: 26px; padding: 0 .38rem; }
  .th-bulk-btn i { font-size: .9rem; }
  .th-bulk-n { min-width: 14px; height: 14px; font-size: .58rem; }
}

/* ------ منع overflow-x عام على الصفحة ------ */
body { overflow-x: hidden; }
.th-wrap, .th-doc { max-width: 100%; overflow-x: clip; }

/* ------ الشاشات العريضة (≥ 1400px) — استغلال أفضل للفضاء ------ */
@media (min-width: 1400px) {
  .th-empty-state { max-width: 580px; }
  .th-preview-modal .modal-dialog { max-width: 1200px; }
  .th-preview-frame { height: 82vh; }
}

/* =====================================================================
   v15 — تنفيذ ورشة مراجعة الجوّال (10 تعديلات مدمجة)
   ===================================================================== */

/* 1) كسر سطر بنيوي لأزرار «الكل» — سطر مستقل نظيف بدل حيلة ::before */
@media (max-width: 991.98px){
  .th-fbreak{ flex-basis:100%; height:0; }
  .th-bulk-group{ flex-basis:100%; justify-content:flex-end; margin-inline-start:0; padding-top:.25rem; margin-top:.15rem; border-top:1px dashed rgba(212,110,42,.18); }
  .th-bulk-group::before{ content:none !important; }
  .th-filters{ row-gap:.5rem; }
}

/* 2) شرائح الأنواع + شارة «الكل» + عدّاد الترويسة — تنقية جوّال */
@media (max-width:640px){
  .th-filter-types{ gap:.2rem; }
  .th-filters .th-chip-f{ border:0; padding:.24rem .55rem; font-size:.72rem; background:rgba(212,110,42,.06); }
  .th-filters .th-chip-f.is-active{ box-shadow:none; background:linear-gradient(135deg,var(--brand,#D46E2A),var(--brand-hover,#B85B21)); }
  .th-filters .th-chip-toggle{ background:transparent; border-color:rgba(16,24,40,.14); color:var(--dt-text-2,#6B7280); padding:.22rem .5rem; font-size:.72rem; }
  .th-filters .th-chip-toggle.is-active{ background:rgba(39,76,119,.14); color:#274C77; box-shadow:none; }
  .th-filters .th-chip-toggle i{ font-size:.85rem; }
  .th-filter-types .th-chip-f[data-type="all"]{ display:none; }
  .th-topbar h5 .th-count{ display:none; }
  .th-filters-sep{ display:none; }
}

/* 3) أهداف لمس — لا شيء تحت 34×34 على أجهزة اللمس */
@media (pointer: coarse){
  .th-pv-arrow, .th-search-clear, .th-filters-reset,
  .th-dlc-actions button, .th-dlc-btns button, .th-toast-x,
  .th-unit-chip{ min-width:34px; min-height:34px; }
  .th-unit-chip{ padding-block:.4rem; }
}
@media (max-width:640px){
  .th-pv-arrow{ width:36px; height:36px; font-size:1rem; }
  .th-search-clear{ width:28px; height:28px; }
  .th-search .th-search-input{ padding-inline-end:calc(.5rem + 8px); }
  .th-dlc-btns{ gap:.35rem; }
  .th-dlc-actions{ gap:.35rem; }
  .th-toast{ padding-inline-end:.6rem; }
}

/* 4) focus-visible موحّد — الوصول بلوحة المفاتيح لكل التفاعليات الجديدة */
.th-u-dl:focus-visible, .th-u-zip:focus-visible,
.th-chip-f:focus-visible, .th-chip-toggle:focus-visible,
.th-filters-reset:focus-visible, .th-search-clear:focus-visible,
.th-view-toggle button:focus-visible, .th-pv-arrow:focus-visible,
.th-dlc-dock:focus-visible, .th-dlc-actions button:focus-visible,
.th-dlc-btns button:focus-visible, .th-empty-btn:focus-visible,
.th-to-top:focus-visible, .th-toast-x:focus-visible,
.th-unit-chip:focus-visible{
  outline: 2px solid rgba(212,110,42,.6);
  outline-offset: 2px;
  border-radius: inherit;
}

/* 5) رأس الوحدة — تحييد لوني لأزرار dl/zip فيبقى اسم الوحدة نجم الصف */
@media (max-width:640px){
  .th-unit-head{ padding:.45rem .7rem !important; gap:.4rem; }
  .th-unit-head .th-u-side{ gap:.3rem; }
  .th-u-dl, .th-u-zip{ width:28px; height:28px; background:transparent; color:var(--dt-text-2,#6B7280); border:1px solid rgba(16,24,40,.1); box-shadow:none; }
  .th-u-dl:hover, .th-u-zip:hover{ background:var(--brand-soft,rgba(212,110,42,.12)); color:var(--brand,#D46E2A); border-color:rgba(212,110,42,.32); }
  html.dark-style .th-u-dl, html.dark-style .th-u-zip{ background:transparent; color:rgba(228,230,241,.7); border-color:rgba(255,255,255,.14); }
  .th-unit-head .th-u-count{ min-width:22px; height:18px; font-size:.65rem; padding:0 .38rem; }
  .th-unit-head .th-u-chev{ margin-inline-start:.15rem; }
}
@media (max-width:380px){
  .th-u-dl, .th-u-zip{ width:24px; height:24px; font-size:.88rem; }
  .th-unit-head .th-u-count{ min-width:22px; height:18px; font-size:.62rem; padding:0 .35rem; }
  .th-unit-head .th-u-chev{ font-size:.9rem; }
}

/* 6) الترويسة الرئيسية — سطر واحد ذكي بدل تكسّر لأربعة */
@media (max-width:575.98px){
  .th-topbar h5{ display:flex; align-items:center; gap:.35rem; min-width:0; width:100%; }
  .th-topbar h5 > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  .th-topbar h5 .text-muted{ flex:0 0 auto; max-width:24vw; }
  .th-topbar h5 > span:nth-of-type(1){ max-width:30vw; }
  .th-topbar h5 .fw-bold{ flex:1 1 auto; max-width:none; }
  .th-topbar h5 .th-count{ flex:0 0 auto; margin-inline-start:auto; }
}

/* 7) Toast — لا يزاحم زر «العودة للأعلى» على الجوّال */
@media (max-width:640px){
  .th-toast-host{ inset-inline-start:12px; inset-inline-end:12px; bottom:calc(16px + 40px + 12px); }
  .th-toast{ min-width:0 !important; width:auto; max-width:min(360px, calc(100vw - 24px)); margin-inline-start:auto; }
}

/* 8) toTop — يختفي عند فتح لوحة التحميلات، ويحترم safe-area للجوّالات ذات الحواف */
@media (max-width:640px){
  body:has(.th-dlc-panel.is-open) .th-to-top{ opacity:0; pointer-events:none; transform:translateY(6px); }
  .th-to-top{ transition: opacity .18s ease, transform .18s ease; z-index: 2147482999; --safe-bottom: max(16px, env(safe-area-inset-bottom)); bottom: var(--safe-bottom); }
}

/* 9) لوحة اختصارات المفاتيح — بلا معنى على الجوّال */
@media (max-width:640px){
  .th-kbd-help{ display:none !important; }
}

/* 10) معالجة overflow البنيوي في .row.g-1 (بدل الإخفاء بـ overflow-x:hidden على .th-wrap) */
.th-doc .row.g-1{ --bs-gutter-x: 0; margin-inline: 0; }
.th-doc .row.g-1 > [class*="col-"]{ padding-inline: .25rem; }

/* =====================================================================
   v16 — تنفيذ ورشة صقل مركز التحميلات (8 تعديلات مدمجة CSS)
   ===================================================================== */

/* (1) Toast لا يغطي لوحة التحميلات على الجوّال */
@media (max-width:640px){
  body:has(.th-dlc-panel.is-open) .th-toast-host{
    bottom: calc(90px + min(60vh, 480px) - 12px) !important;
  }
}

/* (2) overflow-x: clip بدل hidden (hidden يعطّل sticky في Safari) */
body { overflow-x: clip; }
.th-wrap, .th-doc { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

/* (3) شارة العدّاد — لا تعترض النقر + مقاس أنسب على الجوّال */
.th-dlc-badge { pointer-events: none; }
@media (max-width:640px){
  .th-dlc-dock .th-dlc-badge{
    min-width:17px; height:17px; font-size:.6rem; padding:0 4px;
    top:-3px; inset-inline-start:-3px;
    box-shadow: 0 2px 5px rgba(229,72,77,.35);
  }
}

/* (5) حالات الزر البصرية الجديدة: has-error / has-done + نبضة على الزر بدل الشارة المخفية */
.th-dlc-dock.has-error{ border-color: rgba(229,72,77,.55); }
.th-dlc-dock.has-error > i{ color:#E5484D; }
.th-dlc-dock.has-error .th-dlc-ring{ stroke:#E5484D; }
.th-dlc-dock.has-done{ border-color: rgba(30,158,99,.5); }
.th-dlc-dock.has-done > i{ color:#1E9E63; }
.th-dlc-dock.has-done .th-dlc-ring{ stroke:#1E9E63; }

/* أعد تعريف .th-dlc-pop لتنبض الزر نفسه (كانت تنبض شارة قد تكون مخفية) */
.th-dlc-pop{ animation: thDlcDockPopKF .55s cubic-bezier(.18,.89,.32,1.4); }
@keyframes thDlcDockPopKF{ 40%{ transform: scale(1.1); } }

/* وميض السطر المكرّر (عند محاولة تحميل ملف قيد التحميل) */
.th-dlc-item.is-flash{ animation: thDlcFlashKF .9s ease; }
@keyframes thDlcFlashKF{
  0%   { background-color: rgba(212,110,42,.28); box-shadow: 0 0 0 3px rgba(212,110,42,.22); }
  100% { background-color: rgba(255,255,255,.6); box-shadow: none; }
}

/* الحلقة الخلفية — أوضح على الفاتح + مغايرة على الداكن (كانت 14% فتذوب) */
.th-dlc-ring-bg{ stroke: rgba(212,110,42,.22); stroke-width: 3.4; vector-effect: non-scaling-stroke; }
html.dark-style .th-dlc-ring-bg{ stroke: rgba(242,181,140,.28); }
html.dark-style .th-dlc-ring{ stroke: #F2B58C; }

/* (7-أ) نبضة رخيصة على الحلقة أثناء النشاط (opacity فقط — صديقة 60fps) */
@keyframes thDlcRingPulseKF { 0%,100%{opacity:.55} 50%{opacity:1} }
.th-dlc-dock:not(.is-idle) .th-dlc-ring{ animation: thDlcRingPulseKF 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .th-dlc-dock:not(.is-idle) .th-dlc-ring{ animation:none; opacity:1; }
}

/* (7-ب) هوفر أوضح — يقول «قابل للنقر» بلغة اللون + الحدود، لا الظل وحده */
.th-dlc-dock > i { transition: color .2s ease, transform .2s ease; }
.th-dlc-dock:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(16,24,40,.22);
  border-color: rgba(212,110,42,.5);
  background: linear-gradient(135deg, rgba(255,248,242,.98), rgba(255,238,224,.86));
}
.th-dlc-dock:hover > i{ color: var(--brand-hover, #B85B21); transform: translateY(-1px); }
html.dark-style .th-dlc-dock:hover{
  background: linear-gradient(135deg, rgba(58,63,88,.98), rgba(46,51,72,.94));
  border-color: rgba(242,181,140,.5);
}

/* (7-ج) تخفيف backdrop-filter الداكن (بلا فائدة عند 88%+ عتامة) + will-change */
.th-dlc-dock { will-change: transform; }
html.dark-style .th-dlc-dock,
html.dark-style .th-dlc-panel{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (max-width:640px){
  .th-dlc-dock, .th-dlc-panel{
    -webkit-backdrop-filter: blur(10px) saturate(160%);
            backdrop-filter: blur(10px) saturate(160%);
  }
}

/* (7-د) SVG spin — transform-box + احذف !important القديم */
.th-dlc-ring.is-indet{
  stroke-dashoffset: 94;
  animation: th-dlc-spin 1s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* (7-هـ) focus-visible للـdock — لون مغاير لا يذوب في الحلقة النحاسية */
.th-dlc-dock:focus-visible{
  outline: 2px solid #274C77;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(39,76,119,.18), 0 14px 34px rgba(16,24,40,.22);
}
html.dark-style .th-dlc-dock:focus-visible{
  outline-color:#8EC3FF;
  box-shadow: 0 0 0 4px rgba(142,195,255,.22);
}

/* =====================================================================
   v17 — تنظيف التباعد الخارجي (سطر الوحدات المُلتصق بحواف الحاوية)
   ===================================================================== */

/* الحاوية الخارجية — بلا حشو أفقي غير مبرَّر (كان .7rem + row.g-1 يضيف .125rem) */
.th-doc.th-wrap { padding-inline: .4rem; padding-top: .4rem; padding-bottom: 1rem; }

/* الصف الأم — بلا margin سالب ولا هوامش عالية */
.th-doc .row.g-1 { margin: 0 !important; }
.th-doc .row.g-1 > [class*="col-"] { padding-inline: .35rem; }

/* رأس الوحدة — يمتد بعرض الصف بلا هامش أفقي داخلي */
.th-doc .th-unit-head { margin-inline: 0 !important; margin-top: .5rem !important; margin-bottom: .35rem !important; }

/* شريط الوحدات العلوي — التصق بالحواف مثل بقية العناصر */
.th-units-nav { margin: .3rem 0 .55rem !important; }

/* شريط الفلاتر السفلي — تباعد متزن مع آخر بطاقة */
.th-filters.th-filters-bottom { margin: 1rem 0 .25rem !important; }

/* على الجوّال — أكثر إحكاماً */
@media (max-width:640px){
  .th-doc.th-wrap { padding-inline: .3rem; padding-top: .3rem; padding-bottom: .8rem; }
  .th-doc .row.g-1 > [class*="col-"] { padding-inline: .25rem; }
  .th-doc .th-unit-head { margin-top: .4rem !important; margin-bottom: .3rem !important; }
  .th-units-nav { margin: .25rem 0 .45rem !important; }
  .th-filters.th-filters-bottom { margin: .8rem 0 .25rem !important; }
}

/* =====================================================================
   v18 — تجربة ورقّة للعين: خفض التشبع، تدفّئة المحايد، رفع السطر، تخفيف الظل
   طبقة override هادئة — تُطبَّق على الصفحة كلها بلا تعديل بنية.
   ===================================================================== */

/* 1) خلفية الحاوية — أخفت من التوهّجات النحاسية القوية */
.th-wrap {
  background:
    radial-gradient(620px 480px at 92% -4%, rgba(212, 110, 42, .12), transparent 55%),
    radial-gradient(560px 520px at -2% 18%, rgba(78, 168, 222, .10), transparent 55%),
    radial-gradient(720px 620px at 50% 112%, rgba(242, 181, 140, .10), transparent 55%),
    linear-gradient(180deg, #FBF8F4 0%, #F1F3F8 100%);
}
html.dark-style .th-wrap {
  background:
    radial-gradient(620px 480px at 92% -4%, rgba(212, 110, 42, .14), transparent 55%),
    radial-gradient(560px 520px at -2% 18%, rgba(78, 168, 222, .10), transparent 55%),
    radial-gradient(720px 620px at 50% 112%, rgba(212, 110, 42, .08), transparent 55%),
    linear-gradient(180deg, #232838 0%, #1D2231 100%);
}

/* 2) نصوص أكثر راحة — رمادي دافئ + line-height ألين + وزن أخفّ */
.th-doc, .th-fcard, .th-fcard-topic, .th-fcard-nick, .th-fcard-title, .th-empty-title, .th-topbar h5 {
  color: #2B3244;              /* بدل #1F2937 الرصاصي البارد */
}
html.dark-style .th-doc,
html.dark-style .th-fcard,
html.dark-style .th-fcard-topic,
html.dark-style .th-fcard-nick,
html.dark-style .th-fcard-title,
html.dark-style .th-empty-title,
html.dark-style .th-topbar h5 { color: #DDE0EA; }

.th-fcard { line-height: 1.65; }
.th-fcard-topic { line-height: 1.7; font-weight: 600; }   /* كان 700 */
.th-fcard-nick,
.th-fcard-title { font-weight: 700; }                     /* كان 800 */
.th-empty-title { font-weight: 700; }
.th-topbar h5 .fw-bold { font-weight: 700 !important; }

/* 3) الشرائح — تباين ألطف (كان الوزن 700+ثقيلاً على الشاشة) */
.th-chip-f { font-weight: 600; letter-spacing: .1px; }
.th-chip-f.is-active { color: #fff; font-weight: 700; }
.th-chip-n { font-weight: 700; }

/* 4) رؤوس الوحدات — أخف تشبعاً + وزن أنعم */
.th-unit-head {
  background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .48));
  border: 1px solid rgba(212, 110, 42, .12);
  box-shadow: 0 3px 12px rgba(16, 24, 40, .04), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.th-unit-head .th-u-name { font-weight: 700; }             /* كان 800 */
.th-unit-head:not(.collapsed) {
  background: linear-gradient(135deg, rgba(212, 110, 42, .08), rgba(255, 255, 255, .5));
  border-color: rgba(212, 110, 42, .22);
  box-shadow: 0 4px 14px rgba(212, 110, 42, .06), inset 0 1px 0 rgba(255, 255, 255, .55);
}
html.dark-style .th-unit-head {
  background: linear-gradient(135deg, rgba(58,63,88,.5), rgba(45,50,70,.42));
}

/* 5) الترويسة السفلية والشريط — ظلال أهدأ */
.th-filters {
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.5));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 3px 10px rgba(16,24,40,.04);
}
.th-topbar {
  box-shadow: 0 4px 14px rgba(16,24,40,.05);
  border: 1px solid rgba(255,255,255,.55);
}

/* 6) البطاقة — hover أنعم (كانت translateY(-3px) قافزة) */
.card-interactive:hover { transform: translateY(-2px); border-color: rgba(212,110,42,.22); box-shadow: 0 6px 16px rgba(16,24,40,.06); }
/* أوقف اللمعة العابرة عبر البطاقة عند hover — كانت تشدّ العين */
.card-interactive::before { display: none !important; }

/* 7) الأيقونات النحاسية الصغيرة — لون أقل صراخاً */
.th-fcard-sep { color: rgba(212,110,42,.6); font-weight: 600; }
.th-search-ico { color: rgba(212,110,42,.85); }

/* 8) خطّ العلامة «جديد» — بلا نبضة + لون هادئ */
.th-new-file { animation: none !important; background: rgba(212,110,42,.14); color: #B85B21; border: 1px solid rgba(212,110,42,.22); }
html.dark-style .th-new-file { background: rgba(242,181,140,.16); color: #F2B58C; border-color: rgba(242,181,140,.3); }

/* 9) شارة النوع (PDF/DOCX) — تشبع أقل بحدود شفافة */
.th-fcard-type { font-weight: 700; opacity: .92; }

/* 10) الفواصل الأفقية والحدود — 6% ألفا بدل 12% */
.th-filters-sep { background: rgba(16,24,40,.06); }
hr, .dropdown-divider { border-color: rgba(16,24,40,.06) !important; }

/* 11) الحلقة على الزر العائم — بلا نبضة دائمة (كانت تنقذف العين) */
.th-dlc-dock:not(.is-idle) .th-dlc-ring { animation: none; opacity: 1; }

/* 12) عناصر الترويسة (breadcrumb) — لون خافت لطيف */
.th-topbar h5 a { color: #6B7280; font-weight: 500; }
.th-topbar h5 .fw-bold { color: #2B3244; }

/* 13) اختصار — احترام تفضيل تقليل الحركة (تكرار وقائي) */
@media (prefers-reduced-motion: reduce) {
  .th-unit-head:not(.collapsed), .th-card-in { animation: none !important; }
}

/* =====================================================================
   v19 — لمسات إضافية على تجربة العين + توحيد موديل «الإبلاغ عن خطأ»
   ===================================================================== */

/* موديل الإبلاغ — زر الإرسال بتدرّج نحاسي هادئ (بلا صراخ) */
.th-glass-modal .btnSubmitError {
  background: linear-gradient(135deg, #D46E2A, #B85B21);
  border: 0; color: #fff;
  box-shadow: 0 6px 14px rgba(212,110,42,.22);
  transition: transform .16s ease, box-shadow .22s ease, filter .2s ease;
}
.th-glass-modal .btnSubmitError:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 20px rgba(212,110,42,.3);
}
.th-glass-modal .btnSubmitError:active { transform: translateY(0) scale(.97); }
.th-glass-modal .btnSubmitError i { transition: transform .3s ease; }
.th-glass-modal .btnSubmitError:hover i { transform: translateX(-3px); }

/* اسم الملف داخل الموديل — كبسولة هادئة */
.th-glass-modal #nameFile:not(:empty) {
  display: block;
  padding: .5rem .75rem;
  margin-bottom: .8rem;
  border-radius: 10px;
  background: rgba(212,110,42,.07);
  border: 1px solid rgba(212,110,42,.14);
  color: #6B4A2F;
  font-size: .82rem;
  font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.dark-style .th-glass-modal #nameFile:not(:empty) {
  background: rgba(212,110,42,.16); border-color: rgba(242,181,140,.28); color: #F2B58C;
}

/* منطقة النص داخل الموديل — تجربة كتابة أهدأ */
.th-glass-modal #errorMessage {
  font-size: .9rem; line-height: 1.7;
  resize: vertical;
}
.th-glass-modal .form-label { font-size: .82rem; }

/* توسيط عمودي لموديل المعاينة أيضاً — قد يفقد المستخدم النقطة عند تمرير طويل */
.th-preview-modal .modal-dialog { display: flex; align-items: center; min-height: calc(100% - 1rem); }

/* رفع تباين نص الحالة الفارغة قليلاً (كان .7rem خافت) */
.th-empty-sub { color: rgba(107,114,128,.9); }
html.dark-style .th-empty-sub { color: rgba(228,230,241,.75); }

/* تخفيف الظل السميك على مركز التحميلات — تجربة تحت العين */
.th-dlc-dock { box-shadow: 0 6px 18px rgba(16,24,40,.14), inset 0 1px 0 rgba(255,255,255,.85); }
.th-dlc-panel { box-shadow: 0 18px 44px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.75); }

/* عناصر البطاقة — spacing بين الميتا والإحصائيات ألين */
.th-fcard-meta  { margin-top: .3rem; }
.th-fcard-stats { margin-top: .3rem; }

/* Toast الأخضر ألين على العين — تشبع أقل */
.th-toast { border-color: rgba(34,197,94,.22); }
.th-toast > i { color: #22A96B; }
html.dark-style .th-toast > i { color: #86EFAC; }

/* =====================================================================
   v20 — بطاقة «محمّلة»: خلفية متدرّجة خضراء لطيفة + دائرية حدود متسّقة
   ===================================================================== */

.th-doc .div-saleh.is-downloaded .card-interactive {
  /* دائرية موحّدة — لا يبقى قسم مستقيم عند تقاطع border + inset shadow */
  border-radius: 14px !important;
  border-color: rgba(34,197,94,.32) !important;
  /* تدرّج خفيف أخضر من زاوية العلامة (يمين-أسفل في RTL) نحو الشفافية */
  background: linear-gradient(305deg, rgba(34,197,94,.10) 0%, rgba(34,197,94,.03) 30%, #fff 65%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(34,197,94,.14),
    0 3px 10px rgba(34,197,94,.06);
}
html.dark-style .th-doc .div-saleh.is-downloaded .card-interactive {
  background: linear-gradient(305deg, rgba(34,197,94,.14) 0%, rgba(34,197,94,.05) 30%, rgba(46,51,72,.9) 65%) !important;
  border-color: rgba(34,197,94,.4) !important;
  box-shadow:
    inset 0 0 0 1px rgba(34,197,94,.18),
    0 4px 12px rgba(0,0,0,.25);
}

/* نمط القائمة — تدرّج أفقي من الجهة التي فيها العلامة */
.th-view-list .div-saleh.is-downloaded .card-interactive {
  background: linear-gradient(270deg, rgba(34,197,94,.10) 0%, rgba(34,197,94,.03) 30%, #fff 65%) !important;
}
html.dark-style .th-view-list .div-saleh.is-downloaded .card-interactive {
  background: linear-gradient(270deg, rgba(34,197,94,.14) 0%, rgba(34,197,94,.05) 30%, rgba(46,51,72,.9) 65%) !important;
}

/* شارة الصح — أرفع z-index لضمان جلوسها فوق أي زاوية للبطاقة */
.th-doc .div-saleh.is-downloaded::after { z-index: 4 !important; }

/* =====================================================================
   v21 — كيرف وتباعد: توحيد استدارة البطاقات وتباعدها الرأسي
   (تنفيذ ورشة card-curve-spacing — 6 تعديلات مدمجة)
   ===================================================================== */

:root { --th-card-radius: 14px; --th-card-radius-sm: 13px; }

/* (1) توحيد استدارة نمط القائمة — مصدر حقيقة واحد */
.th-view-list .card-interactive,
.th-view-list .th-doc .card-interactive,
.th-view-list .div-saleh.is-downloaded .card-interactive,
.th-view-list.th-content-grid .th-tile-card {
  border-radius: var(--th-card-radius) !important;
}
@media (max-width: 575.98px){
  .th-view-list .card-interactive,
  .th-view-list .div-saleh.is-downloaded .card-interactive {
    border-radius: var(--th-card-radius-sm) !important;
  }
}

/* (2) رفع القصّ عن الغلاف (اللمعة معطّلة أصلاً) — يزيل خط الزاوية المستقيم ويُعيد الظل الخارجي */
.card-interactive { overflow: visible !important; }
.card-interactive::before { content: none !important; }
.th-view-list .card-interactive > a,
.th-view-list .card-interactive > .d-flex,
.th-view-list .card-interactive .th-fcard { border-radius: inherit; }
.card-interactive > .th-fcard-media,
.card-interactive .th-fcard-thumb { border-radius: inherit; overflow: hidden; }

/* (3) بطاقة محمّلة — حدّ واحد نظيف بلا inset مزدوج */
.th-doc .div-saleh.is-downloaded .card-interactive {
  border: 1px solid rgba(34,197,94,.42) !important;
  box-shadow: 0 4px 12px rgba(34,197,94,.10) !important;
  border-radius: var(--th-card-radius) !important;
}
html.dark-style .th-doc .div-saleh.is-downloaded .card-interactive {
  border-color: rgba(34,197,94,.5) !important;
  box-shadow: 0 4px 14px rgba(34,197,94,.18) !important;
}

/* (4) تباعد رأسي منتظم بين بطاقات نمط القائمة */
.th-doc .th-view-list.row.g-1 { --bs-gutter-y: .55rem; }
.th-view-list > .div-saleh + .div-saleh { margin-top: .55rem; }
.th-view-list > .div-saleh:first-child { margin-top: 0; }
@media (max-width: 640px){
  .th-doc .th-view-list.row.g-1 { --bs-gutter-y: .5rem; }
  .th-view-list > .div-saleh + .div-saleh { margin-top: .5rem; }
}

/* (5) تنفّس رأسي حول رأس الوحدة وشريط الفلاتر السفلي */
.th-doc .th-unit-head { margin-top: .65rem !important; margin-bottom: .55rem !important; }
.th-doc .th-view-list + .th-unit-head { margin-top: .85rem !important; }
.th-doc.th-wrap { padding-bottom: 1.35rem; }
.th-doc .th-view-list > .div-saleh:last-child { margin-bottom: .35rem; }
@media (max-width: 640px){
  .th-doc .th-unit-head { margin-top: .55rem !important; margin-bottom: .5rem !important; }
  .th-doc .th-view-list + .th-unit-head { margin-top: .75rem !important; }
  .th-doc.th-wrap { padding-bottom: 1.1rem; }
  .th-doc .th-filters.th-filters-bottom { margin: 1rem 0 .3rem !important; }
}

/* (6) حلقة تركيز تتّبع استدارة البطاقة الفعلية */
.card-interactive a:focus-visible {
  outline: 2px solid rgba(212,110,42,.55);
  outline-offset: -3px;
  border-radius: inherit;
}

/* v22 — تقليل التباعد الرأسي (طلب المستخدم: أدنى قليلاً من v21) */
.th-doc .th-view-list.row.g-1 { --bs-gutter-y: .3rem; }
.th-view-list > .div-saleh + .div-saleh { margin-top: .3rem; }
.th-doc .th-unit-head { margin-top: .4rem !important; margin-bottom: .3rem !important; }
.th-doc .th-view-list + .th-unit-head { margin-top: .5rem !important; }
.th-doc.th-wrap { padding-bottom: .9rem; }
.th-doc .th-view-list > .div-saleh:last-child { margin-bottom: .2rem; }
@media (max-width: 640px){
  .th-doc .th-view-list.row.g-1 { --bs-gutter-y: .25rem; }
  .th-view-list > .div-saleh + .div-saleh { margin-top: .25rem; }
  .th-doc .th-unit-head { margin-top: .35rem !important; margin-bottom: .28rem !important; }
  .th-doc .th-view-list + .th-unit-head { margin-top: .45rem !important; }
  .th-doc.th-wrap { padding-bottom: .75rem; }
  .th-doc .th-filters.th-filters-bottom { margin: .7rem 0 .25rem !important; }
}

/* v23 — الحاوية الجذرية للمحتوى (.th-wrap.th-doc): خلفية أهدأ وحدّ رفيع
   يُعرّف «صحيفة المحتوى» بصرياً بدل خلفية لونية بلا حواف. */
.th-doc.th-wrap {
  background:
    radial-gradient(520px 380px at 92% -4%, rgba(212, 110, 42, .07), transparent 60%),
    radial-gradient(480px 420px at -2% 18%, rgba(78, 168, 222, .05), transparent 60%),
    linear-gradient(180deg, rgba(255,251,246,.9) 0%, rgba(247,249,253,.9) 100%);
  border: 1px solid rgba(212, 110, 42, .1);
  box-shadow: 0 3px 14px rgba(16, 24, 40, .04);
  border-radius: 18px;
}
html.dark-style .th-doc.th-wrap {
  background:
    radial-gradient(520px 380px at 92% -4%, rgba(212, 110, 42, .1), transparent 60%),
    radial-gradient(480px 420px at -2% 18%, rgba(78, 168, 222, .06), transparent 60%),
    linear-gradient(180deg, rgba(45,50,72,.85) 0%, rgba(35,40,58,.85) 100%);
  border-color: rgba(255, 255, 255, .06);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .2);
}

/* v24 — تباعد من الأعلى للحاوية الجذرية (طلب المستخدم) */
.th-doc.th-wrap { margin-top: 1.1rem; padding-top: 1rem; }
@media (max-width: 640px){
  .th-doc.th-wrap { margin-top: .75rem; padding-top: .75rem; }
}

/* v25 — تقليل الحشو الداخلي للحاوية الجذرية (طلب المستخدم) */
.th-doc.th-wrap { padding: .3rem .3rem .55rem .3rem; }
@media (max-width: 640px){
  .th-doc.th-wrap { padding: .25rem .2rem .5rem .2rem; }
}

/* v26 — شريط تنقّل الوحدات بلا خلفية (طلب المستخدم) */
.th-units-nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  padding: 0 !important;
}
.th-units-nav.is-stuck { box-shadow: none !important; border: 0 !important; }
html.dark-style .th-units-nav { background: transparent !important; }

/* v27 — العدّاد العائم على شرائح الوحدات: كان يُقصّ بـoverflow-x:clip على .th-wrap
   الحل: تجويف صغير للنافل + إبقاء البادج داخل حدود الرؤية */
.th-units-nav { padding-inline: .35rem !important; padding-block: .35rem !important; }
.th-unit-chip .th-chip-count {
  /* أزح البادج قليلاً للداخل بدل -6px الخارجية — يبقى الشكل عائماً بلا قصّ */
  top: -4px !important;
  inset-inline-start: -4px !important;
}
/* الحاوية الجذرية: سمح بهامش قصّ صغير على الخط الأفقي لتفادي قصّ البادج والظلال */
.th-doc.th-wrap { overflow-clip-margin: 8px; }

/* v28 — عند النزول (لصْق الشريط بالأعلى): تظهر خلفية زجاجية فقط
   الحالة الافتراضية (v26) تبقى شفافة */
.th-units-nav.is-stuck {
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.72)) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
          backdrop-filter: blur(12px) saturate(160%) !important;
  border: 1px solid rgba(212,110,42,.14) !important;
  box-shadow: 0 6px 16px rgba(16,24,40,.06) !important;
  padding-inline: .5rem !important;
  padding-block: .35rem !important;
  border-radius: 12px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, padding .2s ease;
}
html.dark-style .th-units-nav.is-stuck {
  background: linear-gradient(135deg, rgba(46,51,72,.9), rgba(35,40,58,.75)) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.28) !important;
}

/* v29 — تفتيح خلفية «الصحيفة» وشريط الترويسة إلى أخفّ درجة ممكنة
   (في وضعَي الفاتح والداكن) */
.th-doc.th-wrap {
  background:
    radial-gradient(520px 380px at 92% -4%, rgba(212, 110, 42, .03), transparent 60%),
    radial-gradient(480px 420px at -2% 18%, rgba(78, 168, 222, .02), transparent 60%),
    linear-gradient(180deg, rgba(255,253,251,.55) 0%, rgba(250,251,254,.55) 100%);
  border-color: rgba(212, 110, 42, .06);
}
html.dark-style .th-doc.th-wrap {
  background:
    radial-gradient(520px 380px at 92% -4%, rgba(212, 110, 42, .05), transparent 60%),
    linear-gradient(180deg, rgba(45,50,72,.4) 0%, rgba(35,40,58,.4) 100%);
  border-color: rgba(255, 255, 255, .04);
}

.th-topbar {
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.35)) !important;
  border-color: rgba(255,255,255,.4) !important;
  box-shadow: 0 2px 8px rgba(16,24,40,.03) !important;
}
html.dark-style .th-topbar {
  background: linear-gradient(135deg, rgba(58,63,88,.35), rgba(45,50,70,.28)) !important;
  border-color: rgba(255,255,255,.05) !important;
}

/* v30 — الحاوية الجذرية: تباعد علوي أكبر + تخفيف إضافي للخلفية */
.th-doc.th-wrap {
  margin-top: 2rem;
  background:
    linear-gradient(180deg, rgba(255,254,252,.35) 0%, rgba(250,251,254,.35) 100%);
  border-color: rgba(212, 110, 42, .04);
}
html.dark-style .th-doc.th-wrap {
  background: linear-gradient(180deg, rgba(45,50,72,.22) 0%, rgba(35,40,58,.22) 100%);
  border-color: rgba(255, 255, 255, .03);
}
@media (max-width: 640px){
  .th-doc.th-wrap { margin-top: 1.35rem; }
}

/* v31 — إلغاء كل خلفيات الحاوية الجذرية والترويسة (يعتمد على Vuexy panel theme:
   Default / Bordered / Semi-Dark). طبقة override نهائية تُبطل v18/v23/v24/v25/v29/v30. */
.th-wrap,
.th-doc.th-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  overflow-clip-margin: 0 !important;
}
html.dark-style .th-wrap,
html.dark-style .th-doc.th-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.th-topbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.dark-style .th-topbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* v32 — إعادة خلفية للحاوية بلون أعمق ملحوظ (يُبطِل شفافية v31)
   لون كريمي دافئ يبرز عن الخلفية الأم بلا صراخ */
.th-wrap,
.th-doc.th-wrap {
  background: linear-gradient(180deg, #FBF3E8 0%, #F4EBDD 100%) !important;
  border: 1px solid rgba(212, 110, 42, .14) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 14px rgba(16, 24, 40, .05) !important;
  padding: .8rem .7rem 1.2rem !important;
  margin-top: 1.25rem !important;
}
html.dark-style .th-wrap,
html.dark-style .th-doc.th-wrap {
  background: linear-gradient(180deg, #2E3348 0%, #262B3D 100%) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3) !important;
}
@media (max-width: 640px){
  .th-wrap, .th-doc.th-wrap {
    padding: .55rem .5rem .9rem !important;
    margin-top: .85rem !important;
    border-radius: 14px !important;
  }
}

/* v33 — تخفيف خلفية الحاوية إلى أخف درجة ممكنة (يُبطل تشبع v32) */
.th-wrap,
.th-doc.th-wrap {
  background: linear-gradient(180deg, #FEFCF9 0%, #FBF7F2 100%) !important;
  border-color: rgba(212, 110, 42, .06) !important;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .025) !important;
}
html.dark-style .th-wrap,
html.dark-style .th-doc.th-wrap {
  background: linear-gradient(180deg, #262B3D 0%, #222738 100%) !important;
  border-color: rgba(255, 255, 255, .04) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important;
}


/* =========================================================
   SSO HANDOFF � Frosted Luxury
   Scoped: #ssoHandoffModal
   Depends on brand tokens already established in teacher-home.css
   ========================================================= */

/* ---------- 1. BACKDROP: brand-tinted aurora blur ---------- */
.modal-backdrop.ssoHandoff-backdrop,
body.ssoHandoff-open .modal-backdrop.show{
    background:
        radial-gradient(1200px 600px at 20% 10%, rgba(212,110,42,.22), transparent 60%),
        radial-gradient(900px 500px at 80% 90%, rgba(212,110,42,.16), transparent 55%),
        rgba(46, 26, 12, .58);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    opacity: 1 !important;
}

/* ---------- 2. FRAME ---------- */
#ssoHandoffModal .modal-dialog{
    max-width: 720px;
    width: 95%;
}
#ssoHandoffModal .modal-content{
    position: relative;
    border: 1px solid rgba(212,110,42,.18);
    border-radius: 22px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,248,240,.86) 100%);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    box-shadow:
        0 30px 80px -20px rgba(74, 33, 8, .45),
        0 8px 24px -6px rgba(212, 110, 42, .18),
        inset 0 1px 0 rgba(255,255,255,.9);
    animation: ssoRise .42s cubic-bezier(.2,.9,.28,1);
}
#ssoHandoffModal .modal-content::before{
    /* subtle aurora glow inside the frame */
    content:'';
    position:absolute; inset:0;
    background:
        radial-gradient(500px 260px at 100% -20%, rgba(212,110,42,.14), transparent 60%),
        radial-gradient(420px 220px at 0% 110%, rgba(212,110,42,.10), transparent 60%);
    pointer-events:none; z-index:0;
}
#ssoHandoffModal .modal-content > *{ position:relative; z-index:1; }

@keyframes ssoRise{
    from{ transform: translateY(14px) scale(.985); opacity:0; }
    to  { transform: none; opacity:1; }
}

/* ---------- 3. HEADER: gradient stripe + rocket chip ---------- */
#ssoHandoffModal .modal-header{
    padding: 20px 26px 18px;
    border: 0;
    background:
        linear-gradient(135deg, rgba(212,110,42,.10) 0%, rgba(212,110,42,.02) 55%, transparent 100%);
    border-bottom: 1px solid rgba(212,110,42,.10);
    align-items: center;
    gap: 14px;
    position: relative;
}
#ssoHandoffModal .modal-header .modal-title { flex: 1 1 auto; min-width: 0; }
/* زر الإغلاق مثبّت في زاوية الرأس بدل الاعتماد على تدفّق flex */
#ssoHandoffModal .modal-header .btn-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    align-self: auto;
}
#ssoHandoffModal .modal-title{
    display:flex; align-items:center; gap:14px;
    font-weight: 800; font-size: 1.08rem; color:#2a1706;
    margin:0;
}
#ssoHandoffModal .modal-title .ti-rocket{
    display:inline-flex; align-items:center; justify-content:center;
    width: 44px; height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #D46E2A 0%, #B85B21 100%);
    color:#fff !important;
    font-size: 22px;
    box-shadow:
        0 10px 22px -6px rgba(212,110,42,.55),
        inset 0 1px 0 rgba(255,255,255,.35);
    margin: 0 !important;
    position:relative; overflow:hidden;
}
#ssoHandoffModal .modal-title .ti-rocket::after{
    /* soft sheen */
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 55%);
}
/* تنفّس ناعم للصاروخ — يوحي بالحيوية بلا إزعاج */
#ssoHandoffModal .modal-title .ti-rocket { animation: ssoRocketFloat 3.2s ease-in-out infinite; }
@keyframes ssoRocketFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    #ssoHandoffModal .modal-title .ti-rocket { animation: none; }
}

/* توهّج حي حول أرقام الخطوات (متتابع) */
#ssoHandoffModal .sso-step-num { position: relative; }
#ssoHandoffModal .sso-step-num::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,110,42,.28), transparent 60%);
    z-index: -1; opacity: 0;
    animation: ssoStepPulse 2.4s ease-in-out infinite;
}
#ssoHandoffModal .sso-step:nth-child(1) .sso-step-num::after { animation-delay: 0s; }
#ssoHandoffModal .sso-step:nth-child(2) .sso-step-num::after { animation-delay: .8s; }
#ssoHandoffModal .sso-step:nth-child(3) .sso-step-num::after { animation-delay: 1.6s; }
@keyframes ssoStepPulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50%      { opacity: .8; transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
    #ssoHandoffModal .sso-step-num::after { animation: none; }
}

/* الحقول المُعبّأة — الأيقونة تتلوّن كامل بلون العلامة */
#ssoHandoffModal .sso-input-wrap:has(input:not(:placeholder-shown)) > .ti,
#ssoHandoffModal .sso-input-wrap:has(input:not(:placeholder-shown):not([value=""])) > .ti {
    color: var(--brand, #D46E2A); opacity: 1;
}

#ssoHandoffModal .modal-title .sso-title-wrap{
    display:flex; flex-direction:column; line-height:1.25;
}
#ssoHandoffModal .modal-title .sso-title-sub{
    font-size:.75rem; font-weight:600; color:#8a5a2e;
    display:flex; align-items:center; gap:6px; margin-top:2px;
    letter-spacing:.02em;
}
#ssoHandoffModal .modal-title .sso-title-sub .dot{
    width:5px; height:5px; border-radius:50%; background:#D46E2A; opacity:.55;
}
#ssoHandoffModal .btn-close{
    width: 38px !important; height: 38px !important;
    min-width: 38px; min-height: 38px;
    box-sizing: border-box !important; padding: 0 !important;
    background: linear-gradient(135deg, rgba(212,110,42,.14), rgba(212,110,42,.06)) !important;
    border: 1.5px solid rgba(212,110,42,.28) !important;
    border-radius: 999px !important; opacity: 1 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    position: relative;
    transition: background .2s ease, border-color .2s ease, transform .25s ease, box-shadow .2s ease;
    margin: 0 !important;
    background-image: none;
    flex: 0 0 38px;
    color: var(--brand-hover, #B85B21) !important;
    box-shadow: 0 2px 6px rgba(212,110,42,.12);
}
#ssoHandoffModal .btn-close > .ti {
    font-size: 20px; line-height: 1; font-weight: 700;
    color: inherit;
}
#ssoHandoffModal .btn-close:hover{
    background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21)) !important;
    border-color: var(--brand, #D46E2A) !important;
    color: #fff !important;
    transform: rotate(90deg);
    box-shadow: 0 6px 14px rgba(212,110,42,.35);
}
#ssoHandoffModal .btn-close:focus-visible {
    outline: 3px solid rgba(212,110,42,.35); outline-offset: 3px;
}

/* ---------- 4. BODY ---------- */
#ssoHandoffModal .modal-body{
    padding: 22px 26px 8px;
}

/* 4a. STEPS strip (replaces the .alert-primary bullets) */
#ssoHandoffModal .sso-steps{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
    position:relative;
}
#ssoHandoffModal .sso-steps::before{
    /* connecting rail behind circles */
    content:''; position:absolute;
    top: 18px; right: 16%; left: 16%;
    height: 2px;
    background: repeating-linear-gradient(90deg,
        rgba(212,110,42,.28) 0 6px, transparent 6px 12px);
    z-index:0;
}
#ssoHandoffModal .sso-step{
    position:relative; z-index:1;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(212,110,42,.14);
    border-radius: 14px;
    padding: 12px 10px 12px;
    text-align:center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#ssoHandoffModal .sso-step:hover{
    transform: translateY(-2px);
    border-color: rgba(212,110,42,.32);
    box-shadow: 0 10px 24px -14px rgba(212,110,42,.4);
}
#ssoHandoffModal .sso-step-num{
    width: 36px; height: 36px;
    border-radius: 50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight: 800; font-size: 14px;
    color:#fff;
    background: linear-gradient(135deg, #D46E2A, #B85B21);
    box-shadow:
        0 6px 16px -4px rgba(212,110,42,.5),
        inset 0 1px 0 rgba(255,255,255,.3),
        0 0 0 3px #fff;
    margin-bottom: 8px;
}
#ssoHandoffModal .sso-step-title{
    font-size:.82rem; font-weight:700; color:#2a1706; line-height:1.3;
    margin-bottom:2px;
}
#ssoHandoffModal .sso-step-desc{
    font-size:.7rem; color:#7a5330; line-height:1.4; margin:0;
}

/* 4b. Icon-prefixed inputs */
#ssoHandoffModal .sso-field{
    margin-bottom: 14px;
}
#ssoHandoffModal .sso-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px;
}
#ssoHandoffModal .sso-row .sso-field { margin-bottom: 14px; }
@media (max-width: 575.98px) {
    #ssoHandoffModal .sso-row { grid-template-columns: 1fr; gap: 0; }
}
#ssoHandoffModal .sso-field label.form-label{
    font-size:.78rem; font-weight:700; color:#5a3a1a;
    margin-bottom: 6px;
    display:flex; align-items:center; gap:6px;
}
#ssoHandoffModal .sso-field label.form-label .ti{
    color:#B85B21; font-size:15px;
}
#ssoHandoffModal .sso-input-wrap{
    position:relative;
    display:flex; align-items:stretch;
}
#ssoHandoffModal .sso-input-wrap > .ti{
    position:absolute;
    top:50%; transform: translateY(-50%);
    inset-inline-start: 14px;
    font-size:17px; color:#B85B21; opacity:.7;
    pointer-events:none;
    transition: color .18s ease, opacity .18s ease;
    z-index:2;
}
#ssoHandoffModal .sso-input-wrap input.form-control{
    height: 46px;
    padding-inline-start: 42px;
    padding-inline-end: 14px;
    background: rgba(255,255,255,.85);
    border: 1.5px solid rgba(212,110,42,.16);
    border-radius: 12px;
    font-weight: 600; color:#2a1706;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#ssoHandoffModal .sso-input-wrap input.form-control[dir="ltr"]{
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: .01em;
}
#ssoHandoffModal .sso-input-wrap input.form-control::placeholder{
    color: #b58962; font-weight:500;
}
#ssoHandoffModal .sso-input-wrap input.form-control:hover{
    border-color: rgba(212,110,42,.32);
    background:#fff;
}
#ssoHandoffModal .sso-input-wrap input.form-control:focus{
    outline: 0;
    border-color: #D46E2A;
    background:#fff;
    box-shadow:
        0 0 0 4px rgba(212,110,42,.14),
        inset 0 1px 0 rgba(255,255,255,.6);
}
#ssoHandoffModal .sso-input-wrap:focus-within > .ti{
    color:#D46E2A; opacity:1;
}
#ssoHandoffModal .form-text{
    font-size:.72rem; color:#8a5a2e; margin-top:5px;
    padding-inline-start: 4px;
}

/* 4c. Password field: reveal + strength bar */
#ssoHandoffModal .sso-pw-wrap{ position:relative; }
#ssoHandoffModal .sso-pw-toggle{
    position:absolute;
    top: 50%; transform: translateY(-50%);
    inset-inline-end: 8px;
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1px solid rgba(212,110,42,.16);
    background: rgba(255,255,255,.9);
    color:#B85B21;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:3;
    transition: all .18s ease;
}
#ssoHandoffModal .sso-pw-toggle:hover{
    background:#fff;
    border-color: rgba(212,110,42,.35);
    color:#D46E2A;
    transform: translateY(-50%) scale(1.05);
}
#ssoHandoffModal .sso-pw-wrap input.form-control{
    padding-inline-end: 50px;
}
#ssoHandoffModal .sso-strength{
    display:flex; gap:4px; margin-top:8px;
}
#ssoHandoffModal .sso-strength .bar{
    flex:1; height:4px; border-radius:999px;
    background: rgba(212,110,42,.12);
    overflow:hidden; position:relative;
    transition: background .2s ease;
}
#ssoHandoffModal .sso-strength .bar.on{
    background: linear-gradient(90deg, #D46E2A, #E88A4A);
    box-shadow: 0 2px 6px -1px rgba(212,110,42,.4);
}
#ssoHandoffModal .sso-strength .bar.on.strong{
    background: linear-gradient(90deg, #10b981, #34d399);
    box-shadow: 0 2px 6px -1px rgba(16,185,129,.35);
}
#ssoHandoffModal .sso-strength-label{
    font-size:.7rem; color:#8a5a2e; margin-top:4px; font-weight:600;
}

/* 4d. Error alert */
#ssoHandoffModal #ssoHandoffAlert{
    border-radius: 12px;
    border: 1px solid rgba(220,38,38,.24);
    background: linear-gradient(180deg, rgba(254,226,226,.7), rgba(254,226,226,.4));
    color:#7f1d1d;
    padding: 10px 14px;
    font-size:.85rem;
    font-weight:600;
    margin-bottom: 14px;
}

/* 4e. Shield footnote */
#ssoHandoffModal .sso-note{
    display:flex; align-items:flex-start; gap:10px;
    background: rgba(16,185,129,.06);
    border: 1px solid rgba(16,185,129,.18);
    border-radius: 12px;
    padding: 10px 12px;
    margin-top: 6px;
    font-size:.75rem; color:#3f5c48; line-height:1.55;
}
#ssoHandoffModal .sso-note-chip{
    flex:0 0 auto;
    width: 28px; height: 28px; border-radius:8px;
    background: linear-gradient(135deg, #10b981, #059669);
    color:#fff; font-size:15px;
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow: 0 4px 10px -2px rgba(16,185,129,.4);
}

/* ---------- 5. FOOTER ---------- */
#ssoHandoffModal .modal-footer{
    padding: 16px 26px 22px;
    border-top: 1px solid rgba(212,110,42,.10);
    background: linear-gradient(180deg, transparent, rgba(255,248,240,.5));
    gap: 10px;
}
#ssoHandoffModal .modal-footer .btn{ margin:0; }

/* Ghost cancel */
#ssoHandoffModal .btn-sso-cancel{
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid rgba(212,110,42,.22);
    color:#8a5a2e;
    font-weight: 700; font-size:.88rem;
    transition: all .2s ease;
}
#ssoHandoffModal .btn-sso-cancel:hover{
    background: rgba(212,110,42,.06);
    color:#B85B21;
    border-color: rgba(212,110,42,.4);
}

/* Primary CTA � reuses .th-cta-btn DNA */
#ssoHandoffModal .btn-sso-submit{
    flex: 1;
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #D46E2A 0%, #B85B21 100%);
    color:#fff;
    font-weight: 800; font-size:.92rem;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    position:relative; overflow:hidden;
    box-shadow:
        0 12px 26px -8px rgba(212,110,42,.55),
        inset 0 1px 0 rgba(255,255,255,.28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
#ssoHandoffModal .btn-sso-submit::before{
    content:''; position:absolute; inset:0;
    background: linear-gradient(120deg,
        transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
    transform: translateX(120%);
    transition: transform .7s ease;
}
#ssoHandoffModal .btn-sso-submit:hover{
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow:
        0 16px 34px -10px rgba(212,110,42,.65),
        inset 0 1px 0 rgba(255,255,255,.32);
}
#ssoHandoffModal .btn-sso-submit:hover::before{ transform: translateX(-120%); }
#ssoHandoffModal .btn-sso-submit:active{ transform: translateY(0); }
#ssoHandoffModal .btn-sso-submit:disabled,
#ssoHandoffModal .btn-sso-submit.is-loading{
    opacity: .78; cursor: not-allowed;
    transform:none;
}
#ssoHandoffModal .btn-sso-submit .sso-icon-chip{
    width: 28px; height: 28px; border-radius:50%;
    background: rgba(255,255,255,.22);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---------- 6. MOBILE ---------- */
@media (max-width: 575.98px){
    #ssoHandoffModal .modal-dialog{ margin: 8px; }
    #ssoHandoffModal .modal-header,
    #ssoHandoffModal .modal-body,
    #ssoHandoffModal .modal-footer{ padding-inline: 18px; }
    #ssoHandoffModal .sso-steps{ grid-template-columns: 1fr; gap: 8px; }
    #ssoHandoffModal .sso-steps::before{ display:none; }
    #ssoHandoffModal .sso-step{
        display:flex; align-items:center; gap:12px; text-align:start; padding: 10px 12px;
    }
    #ssoHandoffModal .sso-step-num{ margin-bottom:0; flex-shrink:0; }
    #ssoHandoffModal .sso-step-title{ margin-bottom:1px; }
    #ssoHandoffModal .modal-footer{ flex-direction: column-reverse; }
    #ssoHandoffModal .modal-footer .btn{ width:100%; }
}

/* ---------- 7. DARK MODE ---------- */
html.dark-style #ssoHandoffModal .modal-content{
    background:
        linear-gradient(180deg, rgba(38,26,14,.92) 0%, rgba(30,20,10,.86) 100%);
    border-color: rgba(212,110,42,.24);
    box-shadow:
        0 30px 80px -20px rgba(0,0,0,.7),
        0 8px 24px -6px rgba(212,110,42,.22),
        inset 0 1px 0 rgba(255,255,255,.05);
}
html.dark-style #ssoHandoffModal .modal-header{
    background: linear-gradient(135deg, rgba(212,110,42,.16), transparent);
    border-bottom-color: rgba(212,110,42,.16);
}
html.dark-style #ssoHandoffModal .modal-title{ color:#f5ead8; }
html.dark-style #ssoHandoffModal .modal-title .sso-title-sub{ color:#c99b6f; }
html.dark-style #ssoHandoffModal .btn-close{
    background: linear-gradient(135deg, rgba(212,110,42,.22), rgba(212,110,42,.1)) !important;
    border-color: rgba(212,110,42,.4) !important;
    color: #F2B58C !important;
}
html.dark-style #ssoHandoffModal .btn-close:hover {
    background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21)) !important;
    color: #fff !important;
}
html.dark-style #ssoHandoffModal .sso-step{
    background: rgba(255,255,255,.04);
    border-color: rgba(212,110,42,.2);
}
html.dark-style #ssoHandoffModal .sso-step-title{ color:#f5ead8; }
html.dark-style #ssoHandoffModal .sso-step-desc{ color:#b89273; }
html.dark-style #ssoHandoffModal .sso-field label.form-label{ color:#e2c9a4; }
html.dark-style #ssoHandoffModal .sso-input-wrap input.form-control{
    background: rgba(255,255,255,.04);
    border-color: rgba(212,110,42,.22);
    color:#f5ead8;
}
html.dark-style #ssoHandoffModal .sso-input-wrap input.form-control::placeholder{ color:#8a6a48; }
html.dark-style #ssoHandoffModal .sso-input-wrap input.form-control:hover{
    background: rgba(255,255,255,.06);
    border-color: rgba(212,110,42,.4);
}
html.dark-style #ssoHandoffModal .sso-input-wrap input.form-control:focus{
    background: rgba(255,255,255,.08);
    border-color:#E88A4A;
    box-shadow: 0 0 0 4px rgba(212,110,42,.22);
}
html.dark-style #ssoHandoffModal .form-text{ color:#c99b6f; }
html.dark-style #ssoHandoffModal .sso-pw-toggle{
    background: rgba(255,255,255,.05);
    border-color: rgba(212,110,42,.22);
    color:#E88A4A;
}
html.dark-style #ssoHandoffModal .sso-pw-toggle:hover{
    background: rgba(255,255,255,.1);
    color:#F5A56A;
}
html.dark-style #ssoHandoffModal .sso-strength .bar{ background: rgba(212,110,42,.16); }
html.dark-style #ssoHandoffModal .sso-strength-label{ color:#c99b6f; }
html.dark-style #ssoHandoffModal .sso-note{
    background: rgba(16,185,129,.08);
    border-color: rgba(16,185,129,.24);
    color:#a7d4bb;
}
html.dark-style #ssoHandoffModal .modal-footer{
    background: linear-gradient(180deg, transparent, rgba(30,20,10,.4));
    border-top-color: rgba(212,110,42,.16);
}
html.dark-style #ssoHandoffModal .btn-sso-cancel{
    color:#c99b6f;
    border-color: rgba(212,110,42,.28);
}
html.dark-style #ssoHandoffModal .btn-sso-cancel:hover{
    background: rgba(212,110,42,.1);
    color:#F5A56A;
    border-color: rgba(212,110,42,.5);
}
html.dark-style #ssoHandoffModal #ssoHandoffAlert{
    background: rgba(220,38,38,.12);
    border-color: rgba(220,38,38,.32);
    color:#fecaca;
}

/* ---------- 8. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
    #ssoHandoffModal .modal-content,
    #ssoHandoffModal .btn-sso-submit,
    #ssoHandoffModal .btn-sso-submit::before,
    #ssoHandoffModal .sso-step,
    #ssoHandoffModal .btn-close{
        animation:none !important; transition:none !important;
    }
}

/* =====================================================================
   v24 — طلب المستخدم: تخفيف الأخضر «محمّل» + تباعد رأسي أوسع قليلاً
   (طبقة ذيل خالصة — تغلب القيم السابقة بالترتيب لا بزيادة التخصيص)
   ===================================================================== */

/* (أ) بطاقة «محمّلة»: أخضر أهدأ — خلفية وحدّ وظلّ أخف (شبكة + قائمة) */
.th-doc .div-saleh.is-downloaded .card-interactive {
  border-color: rgba(34,197,94,.24) !important;
  background: linear-gradient(305deg, rgba(34,197,94,.055) 0%, rgba(34,197,94,.02) 30%, #fff 62%) !important;
  box-shadow: 0 3px 9px rgba(34,197,94,.055) !important;
}
.th-view-list .div-saleh.is-downloaded .card-interactive {
  background: linear-gradient(270deg, rgba(34,197,94,.055) 0%, rgba(34,197,94,.02) 30%, #fff 62%) !important;
}
html.dark-style .th-doc .div-saleh.is-downloaded .card-interactive {
  border-color: rgba(34,197,94,.32) !important;
  background: linear-gradient(305deg, rgba(34,197,94,.09) 0%, rgba(34,197,94,.035) 30%, rgba(46,51,72,.9) 62%) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.22) !important;
}
html.dark-style .th-view-list .div-saleh.is-downloaded .card-interactive {
  background: linear-gradient(270deg, rgba(34,197,94,.09) 0%, rgba(34,197,94,.035) 30%, rgba(46,51,72,.9) 62%) !important;
}

/* (ب) شارة «الصح»: أخضر أفتح وظلّ أنعم */
.th-doc .div-saleh.is-downloaded::after {
  background: linear-gradient(135deg, #6EE7A0, #34C77B) !important;
  box-shadow: 0 3px 8px rgba(34,197,94,.22), 0 0 0 2px rgba(255,255,255,.9) !important;
}
html.dark-style .th-doc .div-saleh.is-downloaded::after {
  box-shadow: 0 3px 8px rgba(34,197,94,.28), 0 0 0 2px rgba(35,40,58,.9) !important;
}

/* (ج) تباعد رأسي أوسع قليلاً بين بطاقات نمط القائمة */
.th-doc .th-view-list.row.g-1 { --bs-gutter-y: .5rem; }
.th-view-list > .div-saleh + .div-saleh { margin-top: .5rem; }
@media (max-width: 640px){
  .th-doc .th-view-list.row.g-1 { --bs-gutter-y: .4rem; }
  .th-view-list > .div-saleh + .div-saleh { margin-top: .4rem; }
}

/* =====================================================================
   تهدئة شاملة للألوان — انسجام مع الخلفية الكريمية (أبيض مكسور)
   تخفيف تشبّع البرتقالي في التدرّجات والأزرار والحدود دون فقد الهوية.
   يُحمَّل أخيراً فيغلب القواعد أعلاه بنفس التخصيص أو أعلى (html.light-style).
   ===================================================================== */

/* (1) اللوح خلف البطاقات (th-wrap) — أُزيل تماماً فتجلس البطاقات مباشرة
   على الخلفية الكريمية للجسم بلا تدرّج ولا إطار */
html.light-style .th-wrap {
  background: none;
  box-shadow: none;
  border: 0;
}

/* (2) زر محوّل العرض النشط — تِنت برتقالي هادئ بدل تعبئة صريحة */
html.light-style .th-view-toggle button.is-active {
  background: rgba(212,110,42,.12);
  color: var(--brand-hover, #B85B21);
  box-shadow: inset 0 0 0 1px rgba(212,110,42,.22);
}
html.light-style .th-view-toggle button.is-active i { color: var(--brand-hover, #B85B21); }

/* (3) حدود بطاقات المفضّلة/التحويم — أنعم بكثير */
html.light-style .div-saleh.is-fav .th-tile-card {
  border-color: rgba(212,110,42,.22);
  box-shadow: 0 8px 20px rgba(16,24,40,.06);
}
html.light-style .th-tile:hover .th-tile-card,
html.light-style .th-recent-item:hover { border-color: rgba(212,110,42,.26); }

/* (4) أيقونة البلاطة — رقاقة برتقالية أخفّ لتنسجم مع الخلفية */
html.light-style .th-tile-ico { background: rgba(212,110,42,.08); }

/* (5) نجمة المفضّلة الممتلئة — ذهبي أهدأ */
html.light-style .div-saleh.is-fav .th-fav { color: #eabf7a; }

/* (6) شريط التحكم (th-topbar) — بلا خلفية: يُزال اللوح الزجاجي والحدّ والظل.
   نُبقي position/z-index حتى تبقى قائمة الترتيب فوق البلاطات */
html.light-style .th-topbar {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* (7) كسر كل أبيض صريح إلى سمني فاتح — الأسطح لا تعود ناصعة البياض */
html.light-style .th-tile-card {
  background: linear-gradient(135deg, #fefcf8, #faf6ee);
  border-color: rgba(212,110,42,.10);
}
html.light-style .th-recent-item,
html.light-style .th-search,
html.light-style .th-view-toggle {
  background: linear-gradient(135deg, rgba(253,250,244,.9), rgba(249,244,234,.72));
  border-color: rgba(212,110,42,.12);
}
html.light-style .th-fav { background: rgba(253,250,244,.92); }
html.light-style .th-sort-menu,
html.light-style .th-empty {
  background: linear-gradient(135deg, rgba(254,252,248,.97), rgba(250,245,236,.92));
}

/* (8) تفاعل أدفأ عند التحويم — رقاقة الأيقونة تمتلئ بلون العلامة */
html.light-style .th-tile:hover .th-tile-ico {
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21));
  color: #fff;
  box-shadow: 0 6px 16px rgba(212,110,42,.28);
}
html.light-style .th-tile:hover .th-tile-card {
  border-color: rgba(212,110,42,.30);
  box-shadow: 0 16px 32px rgba(16,24,40,.10), 0 6px 14px rgba(212,110,42,.10);
}
html.light-style .th-tile:hover .th-tile-name { color: var(--brand-hover, #B85B21); }

/* (9) الشريط العلوي (navbar) والقائمة الجانبية اليمنى (sidebar) — زجاج كريمي
   هادئ مميّز عن الخلفية: أفتح منها درجة بلا بياض صارخ، مع blur وحدّ خفيف */
html.light-style {
  --th-chrome-bg-1: rgba(255,254,251,.92);
  --th-chrome-bg-2: rgba(253,250,245,.8);
  --th-chrome-border: rgba(212,110,42,.12);
}

/* (10) صفحة المستندات — بطاقة «محمّلة»: تُزال الغسلة الخضراء على الجانب
   الأيمن ويُكسر الأبيض بدلها (سمني كسائر البطاقات)، والاكتفاء بإشارة
   تحميل صغيرة هادئة مكان شارة الصح الخضراء */
html.light-style .th-doc .div-saleh.is-downloaded .card-interactive,
html.light-style .th-view-list .div-saleh.is-downloaded .card-interactive {
  background: linear-gradient(135deg, #fefcf8, #faf6ee) !important;
  border-color: rgba(212,110,42,.34) !important;
  box-shadow: 0 8px 22px rgba(16,24,40,.05) !important;
}
html.light-style .th-doc .div-saleh.is-downloaded .card-interactive:hover {
  border-color: rgba(212,110,42,.5) !important;
}
html.light-style .th-doc .div-saleh.is-downloaded::after {
  content: "\ea96" !important; /* ti-download بدل ti-check */
  background: rgba(253,250,244,.95) !important;
  color: var(--brand-hover, #B85B21) !important;
  box-shadow: 0 3px 8px rgba(16,24,40,.10), 0 0 0 1px rgba(212,110,42,.20) !important;
}

/* (11) صفحة المستندات — كسر الأبيض في العناصر الداخلية + تخفيف التوهج */

/* بطاقات الملفات — كلها بنمط واحد (نمط «المحمّلة»): سمني + حدّ واضح.
   !important لتجاوز border-light في الماركب؛ الفارق الوحيد أيقونة التحميل */
html.light-style .th-doc .card-interactive {
  background: linear-gradient(135deg, #fefcf8, #faf6ee) !important;
  border-color: rgba(212,110,42,.34) !important;
  box-shadow: 0 4px 14px rgba(16,24,40,.05), inset 0 1px 0 rgba(255,255,255,.55);
}
/* تباعد بين بطاقات الملفات الداخلية فقط — أعمدة .div-saleh في نمط الشبكة،
   دون المساس بـ gutter الصف فلا تتأثر رؤوس المجموعات */
html.light-style .th-doc #thDocGrid:not(.th-view-list) > .div-saleh {
  padding-inline: .4rem;
  margin-top: .55rem;
}
html.light-style .th-doc .card-interactive:hover {
  border-color: rgba(212,110,42,.5) !important;
  box-shadow: 0 10px 24px rgba(16,24,40,.09), inset 0 1px 0 rgba(255,255,255,.6);
}

/* رؤوس المجموعات (th-unit-head) — سمني خفيف وحدّ واضح وظلّ هادئ */
html.light-style .th-unit-head {
  background: linear-gradient(135deg, rgba(255,253,249,.75), rgba(252,248,240,.55));
  border-color: rgba(212,110,42,.30);
  box-shadow: 0 3px 10px rgba(16,24,40,.04), inset 0 1px 0 rgba(255,255,255,.5);
}
html.light-style .th-unit-head:hover {
  box-shadow: 0 6px 16px rgba(212,110,42,.08), inset 0 1px 0 rgba(255,255,255,.5);
}
html.light-style .th-unit-head:not(.collapsed) {
  background: linear-gradient(135deg, rgba(212,110,42,.06), rgba(253,249,242,.55));
  border-color: rgba(212,110,42,.20);
  box-shadow: 0 5px 14px rgba(212,110,42,.06), inset 0 1px 0 rgba(255,255,255,.5);
}

/* شريط الفلاتر وحقل الترتيب — سمني بدل الأبيض */
html.light-style .th-filters {
  background: linear-gradient(135deg, rgba(253,250,244,.88), rgba(249,244,234,.68));
  border-color: rgba(212,110,42,.12);
  box-shadow: 0 3px 10px rgba(16,24,40,.04);
}
html.light-style .th-sort-sel { background: rgba(253,250,244,.85); }

/* تخفيف التوهجات البرتقالية القوية */
html.light-style .th-to-top { box-shadow: 0 6px 16px rgba(212,110,42,.26); }
html.light-style .th-to-top:hover { box-shadow: 0 8px 20px rgba(212,110,42,.32); }
html.light-style .th-units-nav.is-stuck { box-shadow: 0 6px 16px rgba(16,24,40,.08); }
html.light-style .th-chip-f.is-active { box-shadow: 0 3px 8px rgba(212,110,42,.16); }
html.light-style .th-unit-chip.is-active { box-shadow: 0 3px 8px rgba(212,110,42,.16); }

/* Softer teacher content palette */
html.light-style.docs-page {
  --brand: #c77840;
  --brand-hover: #a76033;
  --bs-primary: #c77840;
  --bs-link-color: #a76033;
  --th-soft-brand-rgb: 199, 120, 64;
  --th-luxury-ink: #252b36;
  --th-luxury-muted: #766f68;
}

html.light-style.docs-page body {
  background-color: #fffefd;
}

html.light-style.docs-page .th-tile-card {
  background: linear-gradient(135deg, #ffffff, #fffefd);
  border-color: rgba(var(--th-soft-brand-rgb), .09);
  box-shadow: 0 10px 28px rgba(31,35,41,.052), inset 0 1px 0 rgba(255,255,255,.86);
}

html.light-style.docs-page .div-saleh.is-fav .th-tile-card {
  border-color: rgba(var(--th-soft-brand-rgb), .15);
  box-shadow: 0 11px 30px rgba(31,35,41,.055), inset 0 1px 0 rgba(255,255,255,.86);
}

html.light-style.docs-page .th-tile-ico {
  background: rgba(var(--th-soft-brand-rgb), .07);
  color: #c77840;
}

html.light-style.docs-page .th-tile,
html.light-style.docs-page .th-tile i {
  color: #c77840;
}

html.light-style.docs-page .th-tile-name {
  color: var(--th-luxury-ink);
}

html.light-style.docs-page .th-fav {
  background: rgba(255,254,252,.92);
  border-color: rgba(var(--th-soft-brand-rgb), .14);
  box-shadow: 0 5px 14px rgba(31,35,41,.07);
}

html.light-style.docs-page .div-saleh.is-fav .th-fav {
  color: #d7b56f;
}

html.light-style.docs-page .th-view-toggle button.is-active {
  background: rgba(var(--th-soft-brand-rgb), .075);
  color: #a76033;
  box-shadow: inset 0 0 0 1px rgba(var(--th-soft-brand-rgb), .13);
}

html.light-style.docs-page .th-view-toggle button.is-active i {
  color: #a76033;
}

html.light-style.docs-page .th-search-input.text-success,
html.light-style.docs-page .th-search-input {
  color: var(--th-luxury-muted) !important;
  caret-color: #a76033;
}

html.light-style.docs-page .th-search-ico {
  color: #c77840;
}

html.light-style.docs-page .th-recent-item,
html.light-style.docs-page .th-search,
html.light-style.docs-page .th-view-toggle {
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,254,252,.7));
  border-color: rgba(var(--th-soft-brand-rgb), .075);
  box-shadow: 0 7px 18px rgba(31,35,41,.04);
}

html.light-style.docs-page .th-tile:hover .th-tile-ico {
  background: rgba(var(--th-soft-brand-rgb), .115);
  color: #a76033;
  box-shadow: 0 5px 12px rgba(var(--th-soft-brand-rgb), .12);
  transform: translateY(-1px) scale(1.035);
}

html.light-style.docs-page .th-tile:hover .th-tile-card {
  transform: translateY(-2px);
  border-color: rgba(var(--th-soft-brand-rgb), .18);
  box-shadow: 0 16px 34px rgba(31,35,41,.075), 0 4px 12px rgba(var(--th-soft-brand-rgb), .035);
}

html.light-style.docs-page .th-tile:hover .th-tile-name {
  color: #35302c;
}

html.light-style.docs-page .th-tile-license .th-tile-ico {
  background: rgba(var(--th-soft-brand-rgb), .07);
  color: #c77840;
}

html.light-style.docs-page .th-tile-license .th-tile-name {
  color: var(--th-luxury-ink);
}

html.light-style.docs-page .th-tile-license:hover .th-tile-ico {
  background: rgba(var(--th-soft-brand-rgb), .115);
  color: #a76033;
}

html.light-style.docs-page .th-tile-license:hover .th-tile-name {
  color: #35302c;
}

html.light-style.docs-page #layout-menu .menu-item.active > .menu-link {
  background: linear-gradient(90deg, rgba(var(--th-soft-brand-rgb), .09), rgba(var(--th-soft-brand-rgb), .024)) !important;
  color: #a76033 !important;
  box-shadow: 0 8px 18px rgba(var(--th-soft-brand-rgb), .1) !important;
}

html.light-style.docs-page .th-doc .card-interactive {
  background: linear-gradient(135deg, #ffffff, #fffefd) !important;
  border-color: rgba(var(--th-soft-brand-rgb), .28) !important;
}

html.light-style.docs-page .th-doc .div-saleh.is-downloaded .card-interactive,
html.light-style.docs-page .th-view-list .div-saleh.is-downloaded .card-interactive {
  background: linear-gradient(135deg, #ffffff, #fffefd) !important;
  border-color: rgba(var(--th-soft-brand-rgb), .34) !important;
}

html.light-style.docs-page .th-doc .card-interactive:hover,
html.light-style.docs-page .th-doc .div-saleh.is-downloaded .card-interactive:hover {
  border-color: rgba(var(--th-soft-brand-rgb), .44) !important;
}

html.light-style.docs-page .th-unit-head {
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,254,252,.72));
  border-color: rgba(var(--th-soft-brand-rgb), .22);
}

html.light-style.docs-page .th-unit-head:not(.collapsed) {
  background: linear-gradient(135deg, rgba(var(--th-soft-brand-rgb), .04), rgba(255,255,255,.78));
  border-color: rgba(var(--th-soft-brand-rgb), .28);
}

html.light-style.docs-page .th-wrap,
html.light-style.docs-page .th-doc.th-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #fffefd 100%) !important;
  border-color: rgba(var(--th-soft-brand-rgb), .055) !important;
}

html.light-style.docs-page {
  --th-chrome-bg-1: rgba(255,255,255,.45);
  --th-chrome-bg-2: rgba(255,254,252,.30);
  --th-chrome-border: rgba(var(--th-soft-brand-rgb), .05);
}

html.light-style.docs-page #card-saleh > .div-saleh.th-enter,
html.light-style.docs-page .th-content-grid > .div-saleh.th-enter,
html.light-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.light-style.docs-page #card-saleh > .div-saleh,
html.light-style.docs-page .th-content-grid > .div-saleh {
  opacity: 1 !important;
  filter: none !important;
}

/* =====================================================================
   إحساس الثيم على الأسطح المخصّصة (data-skin من الـ head):
   صفحات المعلّم مبنية بمكوّنات th-* لا .card، والأهم أنها لا تُحمّل
   premium-theme.css أصلاً — وهو الملف الذي تُعرَّف فيه الثيمات الأربعة لبقية
   الموقع. فبلا هذه الكتلة تبدو الأربعة متطابقة هنا تماماً، ويبدو نحاسيُّ
   الصفحة نفسه (‎--brand: #c77840‎ أدناه) غالباً على أي ثيم تختاره.

   فنعكس دلالة كل ثيم يدوياً على أسطح th-* وحدها:
   • Default   → سطح زجاجي بظلّ ناعم (طافٍ).
   • Bordered  → أبيض مصمت بإطار واضح بلا ظل ولا تمويه (مسطّح/مُحدَّد).
   • Semi Dark → زجاج أبرد بحدّ إردوازي وظلّ أعمق — صدى للهيكل الداكن.
   • نحاسي     → زجاج عاجي بحدّ نحاسي وظلّ بنّي، والأيقونة أوضح هويةً.

   نطاق التعديل محصور في هذه الأسطح فقط، فلا يمسّ بقية الصفحة.
   ===================================================================== */
html.light-style[data-skin^="theme-bordered"] .th-tile-card,
html.light-style[data-skin^="theme-bordered"] .th-empty {
  background: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid #dbdade !important;
  box-shadow: none !important;
}
/* في Bordered: التمرير يُبرز الإطار بلون الهوية بدل الظل الطافي. */
html.light-style[data-skin^="theme-bordered"] .th-tile:hover .th-tile-card {
  box-shadow: none !important;
  border-color: rgba(212,110,42,.55) !important;
  transform: translateY(-2px);
}
/* رابط «إضافة مقرر» يبقى بإطاره الأخضر المتقطّع في كل الثيمات. */
html.light-style[data-skin^="theme-bordered"] .th-tile-add .th-tile-card {
  border-style: dashed !important;
  border-color: rgba(40,167,111,.45) !important;
  background: rgba(40,167,111,.04) !important;
}

/* ── Semi Dark: زجاج أبرد وحدّ إردوازي وظلّ أعمق ── */
html.light-style[data-skin^="theme-semi-dark"] .th-tile-card,
html.light-style[data-skin^="theme-semi-dark"] .th-empty {
  background: linear-gradient(135deg, rgba(244,246,251,.72), rgba(236,239,247,.52)) !important;
  border: 1px solid rgba(36,39,69,.14) !important;
  box-shadow: 0 10px 26px rgba(36,39,69,.12) !important;
}
html.light-style[data-skin^="theme-semi-dark"] .th-tile:hover .th-tile-card {
  border-color: rgba(36,39,69,.34) !important;
  box-shadow: 0 16px 34px rgba(36,39,69,.18) !important;
}
/* لوحة الأيقونة تتبع الحدّ الإردوازي كي لا تبقى النقطة النحاسية وحدها ناشزة */
html.light-style[data-skin^="theme-semi-dark"] .th-tile-ico {
  background: rgba(36,39,69,.08) !important;
  color: #3B3F63 !important;
}

/* ── نحاسي: زجاج عاجي وحدّ نحاسي وظلّ بنّي ── */
html.light-style[data-skin^="theme-cmp"] .th-tile-card,
html.light-style[data-skin^="theme-cmp"] .th-empty {
  background: linear-gradient(135deg, rgba(255,252,248,.70), rgba(253,244,236,.52)) !important;
  border: 1px solid rgba(199,120,64,.22) !important;
  box-shadow: 0 10px 26px rgba(138,74,28,.09) !important;
}
html.light-style[data-skin^="theme-cmp"] .th-tile:hover .th-tile-card {
  border-color: rgba(199,120,64,.52) !important;
  box-shadow: 0 16px 34px rgba(138,74,28,.16) !important;
}
html.light-style[data-skin^="theme-cmp"] .th-tile-ico {
  background: rgba(199,120,64,.14) !important;
}

/* «إضافة مقرر» يبقى بإطاره الأخضر المتقطّع في الثيمين أيضاً — فهو دلالة
   إجراء لا زخرفة ثيم، وتلوينه بالثيم يُفقده معناه. */
html.light-style[data-skin^="theme-semi-dark"] .th-tile-add .th-tile-card,
html.light-style[data-skin^="theme-cmp"] .th-tile-add .th-tile-card {
  border-style: dashed !important;
  border-color: rgba(40,167,111,.45) !important;
  background: rgba(40,167,111,.04) !important;
}
html.light-style[data-skin^="theme-semi-dark"] .th-tile-add .th-tile-ico,
html.light-style[data-skin^="theme-cmp"] .th-tile-add .th-tile-ico {
  background: rgba(40,167,111,.12) !important;
  color: #28A76F !important;
}

/* ═ تثبيت شريط التنقّل على الجوال — صفحات المعلم والعينات ═
   تخطيط layout-navbar-full يمرّر الشريط مع المحتوى، وعلى الجوال يختفي
   فيفقد المستخدم القائمة والأدوات. sticky يبقيه أعلى الشاشة دون حاجة
   لتعويض ارتفاعه (يبقى في التدفق) — على الديسكتوب السلوك الأصلي. */
@media (max-width: 991.98px){
  .layout-wrapper.layout-navbar-full #layout-navbar{
    position: sticky;
    top: 0;
    z-index: 1080;
  }
}

/* =====================================================================
   وضع الشاشات الضيقة — رئيسية المعلم (الترحيب + الدعوة + شبكة المقررات)
   ===================================================================== */
@media (max-width: 575.98px) {
  /* الترحيب: جسم البطاقة (min-width:220px) كان يهبط سطراً تحت الأفتار
     فيتضخم الارتفاع — تصغير الأفتار وإلغاء الالتفاف يبقيهما متجاورين */
  .th-hero { flex-wrap: nowrap; padding: 1.1rem 1rem; gap: .8rem; border-radius: 18px; }
  .th-hero-body { min-width: 0; }
  .th-hero-avatar { width: 60px; height: 60px; }
  .th-hero-badge { width: 54px; height: 54px; border-radius: 15px; font-size: 1.55rem; }
  .th-hello { font-size: 1.15rem; }
  .th-hero::before, .th-hero::after { width: 170px; height: 170px; }

  /* الدعوة (بنك الاختبارات/الاشتراك): حواف أضيق وزر ممتد يسهل نقره */
  .th-cta { padding: 1rem 1.1rem; border-radius: 16px; }
  .th-cta-btn { flex: 1 1 auto; justify-content: center; }
  .th-cta > .d-flex { flex: 1 1 100%; }

  /* شبكة المقررات: عمودان بدل عمود واحد ممتد — يقصّر الصفحة للنصف */
  .th-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
}

/* الحالة الفارغة «لا توجد مقررات» تفرش كامل الشبكة بدل انحشارها في خلية */
.th-grid .th-empty { grid-column: 1 / -1; }

/* شارة بطاقة الرخصة — تمييزها عن شارة «انتظار الدفع» البرتقالية */
.th-tile-badge.is-license {
  background: rgba(16, 138, 96, .12);
  color: #0e7a55;
  border: 1px solid rgba(16, 138, 96, .25);
}
html.dark-layout .th-tile-badge.is-license,
html[data-bs-theme="dark"] .th-tile-badge.is-license {
  background: rgba(32, 190, 135, .16);
  color: #4fd1a0;
  border-color: rgba(32, 190, 135, .3);
}

/* ── بطاقة طلب اشتراك جديد ── */
.th-renew {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.5rem 1.6rem; border-radius: 16px; margin-bottom: 1.2rem;
  background: linear-gradient(135deg, rgba(212,110,42,.12) 0%, rgba(212,110,42,.04) 100%);
  border: 1.5px solid rgba(212,110,42,.25);
}
.th-renew-ico {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.5rem;
  background: rgba(212,110,42,.15); color: var(--brand, #d46e2a);
}
.th-renew-title { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 700; color: var(--brand, #d46e2a); }
.th-renew-desc  { margin: 0; font-size: .92rem; opacity: .82; }

html.dark-layout .th-renew,
html[data-bs-theme="dark"] .th-renew {
  background: linear-gradient(135deg, rgba(212,110,42,.18) 0%, rgba(212,110,42,.06) 100%);
  border-color: rgba(212,110,42,.35);
}
html.dark-layout .th-renew-ico,
html[data-bs-theme="dark"] .th-renew-ico { background: rgba(212,110,42,.22); }