/* ══════════════════════════════════════════════════════════════════════════
   Nest English — Premium Canvas  (Batch UX · القرار «ب»)

   القرار: canvas فاتح نظيف · الأخضر للأفعال والعناصر التفاعلية فقط.

   🔴 ما كان: تدرّج أخضر مشبع يغطي الشاشة كاملةً
       (radial ×4 + linear من #d2e6cd إلى #e2e7d1، background-attachment:fixed)
       فوقه بطاقات زجاجية بشفافية 52%. النتيجة:
         • كل سطح على الصفحة بنفس الوزن البصري — الـFAQ يساوي الـCTA
         • تباين البطاقات مع خلفيتها منخفض ⟹ لا عمق ولا تسلسل
         • الأخضر يفقد معناه: حين يكون كل شيء أخضر، الأخضر لا يعني «افعل هذا»

   ✅ القاعدة الجديدة — لون البراند عملة، لا طلاء:
       الخلفية       → رمادي دافئ شبه أبيض، ثابت وهادئ
       الأسطح        → أبيض صريح + حدّ رفيع + ظل خفيف = عمق حقيقي
       الأخضر        → CTA · تركيز · حالة نشطة · مؤشرات تقدّم — **فقط**
       التسلسل       → بالحجم والوزن والمسافة، لا بالتلوين

   ⚠️ لم يُمَسّ: نظام RTL · حلقات التركيز · ألوان حالات الاختبار
       (صحيح/خطأ) · تباين WCAG المرفوع في B1.1 · الوضع الليلي.

   يُحمَّل **بعد** nest-styles.css فيغلبه بترتيب الورقة لا بـ!important
   إلا حيث تكون القاعدة الأصلية نفسها !important.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --nest-canvas:        #f7f8f6;
  --nest-canvas-2:      #f1f4f0;
  --nest-surface:       #ffffff;
  --nest-line:          rgba(15, 23, 42, .085);
  --nest-line-strong:   rgba(15, 23, 42, .14);
  --nest-shadow-sm:     0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --nest-shadow-md:     0 2px 4px rgba(16, 24, 40, .03), 0 8px 20px -6px rgba(16, 24, 40, .08);
  --nest-shadow-lg:     0 4px 8px rgba(16, 24, 40, .03), 0 18px 40px -12px rgba(16, 24, 40, .12);
}

/* ── ① الخلفية: هادئة وثابتة ─────────────────────────────────────────────
   لمسة خضراء واحدة خافتة جدًا أعلى اليسار تحفظ الهوية بلا أن تغرق الصفحة.
   الأصل كان خمس طبقات تدرّج مشبعة. */
html:not(.dark) body {
  background:
    radial-gradient(58% 42% at 6% 0%, rgba(0, 131, 90, .045), transparent 62%),
    linear-gradient(180deg, var(--nest-canvas) 0%, var(--nest-canvas-2) 100%) !important;
  background-attachment: fixed !important;
}

/* الطبقات الزخرفية المتراكمة: أُسكتت في الوضع الفاتح.
   كانت أربع تدرّجات إضافية + ضجيج فوق الخلفية أصلًا. */
html:not(.dark) body::before { background: none !important; }
html:not(.dark) #nest-aurora { display: none !important; }

/* الأوراق المتساقطة: مؤثّر لطيف لكن على canvas نظيف يصير ضجيجًا.
   لم تُحذف — خُفّضت بشدة، وتختفي تمامًا على الشاشات الصغيرة حيث
   المساحة أثمن والأداء أهم. */
html:not(.dark) .nest-leaves { opacity: .22 !important; }
@media (max-width: 1023.98px) {
  html:not(.dark) .nest-leaves { display: none !important; }
}

/* ── ② الأسطح: أبيض صريح بحدّ وظل بدل الزجاج ───────────────────────────
   الزجاج على canvas فاتح لا يقرأ كزجاج — يقرأ كبطاقة باهتة. */
html:not(.dark) .glass-panel {
  background-color: var(--nest-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--nest-line);
  box-shadow: var(--nest-shadow-sm) !important;
}
html:not(.dark) .interactive-card,
html:not(.dark) .glass-panel.interactive-card { box-shadow: var(--nest-shadow-md) !important; }
html:not(.dark) .interactive-card:hover { box-shadow: var(--nest-shadow-lg) !important; }

/* شريط التنقّل: ثابت وواضح، لا يذوب في المحتوى تحته. */
html:not(.dark) nav.glass-panel {
  background-color: rgba(255, 255, 255, .92) !important;
  backdrop-filter: saturate(180%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(10px) !important;
  border-bottom: 1px solid var(--nest-line);
  box-shadow: none !important;
}

/* ── ③ درج الموبايل — إصلاح عيب قراءة مؤكَّد ────────────────────────────
   🔴 كان: html.is-touch .glass-panel → شفافية 90% و backdrop-filter:none
      والدرج position:absolute بلا أي طبقة تعتيم خلفه.
      النتيجة المرصودة في لقطة شاشة حقيقية: نصّ الـHero يُقرأ **من خلف**
      بنود القائمة. هذا ليس ذوقًا — هو فشل قراءة.
   ✅ سطح معتم بالكامل + ظل + طبقة تعتيم للمحتوى خلفه. */
#mobile-menu-panel {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .18) !important;
  border-top: 1px solid var(--nest-line);
  padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
}
html.dark #mobile-menu-panel { background-color: #0f172a !important; }

#mobile-menu-panel::after {
  content: "";
  position: fixed;
  inset: 0;
  top: 100%;
  z-index: -1;
  background: rgba(15, 23, 42, .38);
  pointer-events: none;
}

/* بنود الدرج: نصّ أوضح، أهداف لمس أكبر، فواصل بين المجموعات.
   🔴 كان: text-sm بلون slate-700 على سطح شبه شفاف = باهت ورفيع. */
.nav-drawer-item,
.nav-drawer-group > summary {
  min-height: 48px;
  font-size: .9375rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: .78rem .85rem !important;
}
html.dark .nav-drawer-item,
html.dark .nav-drawer-group > summary { color: #e2e8f0 !important; }
#mobile-menu-panel > .nav-drawer-group + .nav-drawer-item,
#mobile-menu-panel > .nav-drawer-item + .nav-drawer-group,
#mobile-menu-panel > .nav-drawer-group + .nav-drawer-group {
  border-top: 1px solid var(--nest-line);
  margin-top: .25rem;
  padding-top: .25rem;
}
.nav-drawer-group[open] > summary { color: #00714d !important; }

/* أيقونات الدرج: مقاس واحد، لون واحد، وزن واحد.
   🔴 كان: بعض البنود بأيقونة وبعضها بلا، وألوان عشوائية (وردي/أخضر/رمادي)
      لا تنتمي لنظام لوني — وهو ما يجعلها تبدو غير احترافية. */
#mobile-menu-panel .nav-drawer-item > i,
#mobile-menu-panel .nav-drawer-group > summary i {
  width: 1.15rem !important;
  height: 1.15rem !important;
  font-size: .95rem !important;
  color: #64748b !important;
  opacity: 1 !important;
  flex: none;
}
html.dark #mobile-menu-panel .nav-drawer-item > i,
html.dark #mobile-menu-panel .nav-drawer-group > summary i { color: #94a3b8 !important; }
.nav-drawer-group[open] > summary i { color: #00714d !important; }

/* ── ④ الأخضر يعود ليعني «افعل هذا» ─────────────────────────────────── */
html:not(.dark) .gradient-text {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #00714d !important;
}

/* بطاقات الإحصاءات: كانت أرقامها بحجم الـH1 تقريبًا فتنافسها على الانتباه.
   الرقم يبقى بارزًا لكن أدنى من العنوان في السلّم. */
html:not(.dark) #landing-section .text-4xl,
html:not(.dark) #landing-section .text-5xl { color: #0f172a; }

/* الحوافّ: 28px على كل شيء يقرأ «قالب». سلّم واضح بدلها. */
html:not(.dark) .glass-panel { border-radius: 1rem; }
html:not(.dark) #landing-section > section > .glass-panel,
html:not(.dark) .interactive-card { border-radius: 1.15rem; }

/* ── ⑤ الفوتر: هادئ ومرتّب، ليس صفًّا من الأقراص المتساوية ───────────── */
html:not(.dark) footer { background: transparent; }
html:not(.dark) footer a,
html:not(.dark) footer button {
  border-color: var(--nest-line) !important;
  background: var(--nest-surface) !important;
  color: #475569 !important;
}
html:not(.dark) footer a:hover,
html:not(.dark) footer button:hover {
  border-color: var(--nest-line-strong) !important;
  color: #00714d !important;
}

/* ── ⑥ تهدئة الحركة الزخرفية على canvas نظيف ────────────────────────── */
html:not(.dark) .hero-glow { opacity: .5; }
html:not(.dark) .calm-breathe::before { opacity: .35; }
html:not(.dark) .nest-divider::after { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   الوضع الليلي — تصحيح تنافر لوني وتباين  (Batch UX2)

   🔴 ما رصده مالك المشروع: «ألوان كتير مش ظاهرة».
     السبب مركّب، وجزء منه من صنعي:

     ① **أسطح كحلية داخل ثيم أخضر.** خلفية الوضع الليلي مبنية على أخضر
        داكن (‎#032e24 / #0f2a1f‎)، بينما ‎.glass-panel‎ الليلية
        ‎rgba(20,32,46,.72)‎ زرقاء-كحلية. فالبطاقات تبدو «غريبة» عن الصفحة
        لا جزءًا منها — وهو ما يظهر بوضوح في زرّ «Preview Sample Report».
        وأنا زدت الطين بلّة في UX حين استخدمت ‎#101b27‎ الكحلي للدرج.

     ② **نصوص ثانوية منخفضة التباين.** فقرة الهيرو وأوصاف البطاقات
        كانت ‎slate-400/500‎ على خلفية داكنة مشبعة — تقرأ رماديًا باهتًا.

   ✅ القاعدة: **الأسطح تشترك في عائلة لون الصفحة.** أخضر داكن محايد
     للأسطح، وحدود بلمسة خضراء، ونصوص ثانوية أفتح لتتجاوز عتبة القراءة.
   ══════════════════════════════════════════════════════════════════════════ */

html.dark .glass-panel {
  background-color: #1e293b !important;
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 14px 32px -14px rgba(0, 0, 0, .55) !important;
}
html.dark .glass-panel-dark {
  background-color: #0f172a !important;
  border: 1px solid rgba(148, 163, 184, .14);
}
html.dark nav.glass-panel {
  background-color: rgba(15, 23, 42, .94) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14);
}

/* نصوص ثانوية: ترفع التباين على الخلفية الداكنة المشبعة. */
html.dark .text-slate-400 { color: #94a3b8 !important; }
html.dark .text-slate-500 { color: #64748b !important; }
html.dark .text-slate-300 { color: #cbd5e1 !important; }
html.dark .dark\:text-slate-400 { color: #94a3b8 !important; }
html.dark .dark\:text-slate-300 { color: #cbd5e1 !important; }

/* الأزرار الثانوية: كانت كحلية داكنة على أخضر — الآن من نفس العائلة
   وبحدّ مرئي بدل حافّة تكاد تختفي. */
html.dark .border-slate-700 { border-color: rgba(148, 163, 184, .22) !important; }
html.dark .border-slate-800 { border-color: rgba(148, 163, 184, .16) !important; }
html.dark .bg-slate-800 { background-color: #1e293b !important; }
html.dark .bg-slate-900 { background-color: #0f172a !important; }

/* الفوتر في الوضع الليلي: أسطح slate نظيفة + أخضر فقط على الـ hover (هوية البراند). */
html.dark footer a,
html.dark footer button {
  background-color: #1e293b !important;
  border-color: rgba(148, 163, 184, .18) !important;
  color: #e2e8f0 !important;
}
html.dark footer a:hover,
html.dark footer button:hover {
  color: #34d399 !important;
  border-color: rgba(52, 211, 153, .35) !important;
  background-color: #0f172a !important;
}


/* ══ Batch UX5 · M4 — تكافؤ الانضباط الحركي بين الوضعين ═══════════════════
   🔴 الرصد: Batch UX هدّأت الحركة الزخرفية في الوضع الفاتح وحده
     (aurora مخفي · الأوراق .22 · hero-glow .5 · shimmer معطّل)، فبقي
     الوضع الليلي على ~9 حركات لا نهائية متزامنة مقابل ~2 في الفاتح.
     النتيجة: وضعان بمستويَي انضباط مختلفين — والعين تحسّ بالتناقض
     حتى لو لم تسمّه.
   ✅ تُطفأ الطبقات الضوئية العامّة الثلاث في الليلي. **الأوراق تبقى** —
     فهي الهوية النباتية للعلامة، لا زخرفة عامة. */
html.dark #night-fireflies,
html.dark #sky-stars { display: none !important; }
html.dark body::after { animation: none !important; opacity: .28 !important; }
html.dark .nest-divider::after { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   v240 · FINAL HOMEPAGE DESIGN PASS
   Goal: premium assessment product, not generic glassmorphism SaaS.
   Scope: landing page only. No app logic/features changed.
   ══════════════════════════════════════════════════════════════════════════ */
#landing-section{--home-ink:#0f172a;--home-muted:#64748b;--home-brand:#059669;--home-brand-2:#10b981}
#landing-section h1{max-width:12ch;letter-spacing:-.045em;line-height:.98!important}
/* 🔴 حارس RTL — تمريرة v240 ضبطت العنوان على مقاسات لاتينية:
     • letter-spacing سالب يفكّ وصل الحروف العربية (والـ#id يغلب قاعدة
       html[dir=rtl] h1{letter-spacing:normal} في nest-styles.css).
     • line-height:.98 يقصّ نزول الحروف والتشكيل في العربية.
   الصفحة العربية هي السوق المستهدف — تُستثنى صراحةً. */
html[dir="rtl"] #landing-section h1{letter-spacing:normal!important;line-height:1.28!important;max-width:16ch}
@media (max-width:767.98px){html[dir="rtl"] #landing-section h1{max-width:14ch}}
#landing-section .gradient-text{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--home-brand)!important}
#landing-section .hero-text-wrap{}
html:not(.dark) #landing-section .hero-glow{opacity:.32}
#landing-section .hero-cta-row{align-items:stretch}
#landing-section #hero-cta-btn{background:var(--home-brand)!important;box-shadow:0 14px 30px -16px rgba(8,122,85,.5)!important;border-radius:1rem!important;padding-inline:1.45rem!important}
#landing-section #hero-cta-btn:hover{background:#047857!important;transform:translateY(-2px)}
#landing-section #hero-cta-btn:focus-visible{outline:3px solid rgba(8,122,85,.24)!important}
#landing-section .hero-cta-row > button:nth-child(2){border-width:1px!important;border-color:rgba(15,36,27,.14)!important;background:transparent!important;border-radius:1rem!important;color:#274339!important;box-shadow:none!important}
#landing-section .hero-cta-row > button:nth-child(2):hover{border-color:rgba(8,122,85,.35)!important;background:rgba(8,122,85,.045)!important;color:#07583f!important}
html.dark #landing-section .hero-cta-row > button:nth-child(2){border-color:rgba(167,224,194,.2)!important;background:rgba(255,255,255,.02)!important;color:#d7e8df!important}
html.dark #landing-section .hero-cta-row > button:nth-child(2):hover{background:rgba(127,211,172,.08)!important;border-color:rgba(127,211,172,.35)!important;color:#fff!important}
#landing-section .hero-card-entrance{max-width:30rem!important;padding:1.35rem!important;border-radius:1.4rem!important;transform-origin:center}
html:not(.dark) #landing-section .hero-card-entrance{background:#fff!important;border-color:rgba(15,36,27,.09)!important;box-shadow:0 24px 55px -28px rgba(20,55,43,.28),0 4px 14px rgba(20,55,43,.05)!important}
html.dark #landing-section .hero-card-entrance{background:#1e293b!important;border-color:rgba(148,163,184,.16)!important;box-shadow:0 28px 60px -30px rgba(0,0,0,.7)!important}
#landing-section .hero-card-entrance .mb-5{margin-bottom:1.15rem}
#landing-section .hero-card-entrance h3{color:#163228!important;border-bottom-color:rgba(15,36,27,.08)!important}
html.dark #landing-section .hero-card-entrance h3{color:#eef8f2!important;border-bottom-color:rgba(167,224,194,.1)!important}
#landing-section .hero-card-entrance .bg-slate-50{background:#f7faf8!important;border-color:rgba(15,36,27,.06)!important}
html.dark #landing-section .hero-card-entrance .bg-slate-50{background:#0f172a!important;border-color:rgba(148,163,184,.12)!important}
#landing-section .hero-fineprint{margin-top:.2rem}
#landing-section .hero-fineprint > p:last-of-type{max-width:34rem}
#landing-section > section:nth-of-type(1) .glass-panel{border-radius:1.25rem!important}
#landing-section .home-path-card{background:transparent!important;border-color:rgba(15,36,27,.1)!important;color:#274339!important}
#landing-section .home-path-card:hover{background:rgba(8,122,85,.045)!important;border-color:rgba(8,122,85,.24)!important;box-shadow:0 10px 24px -18px rgba(8,122,85,.35)!important}
html.dark #landing-section .home-path-card{border-color:rgba(167,224,194,.13)!important;color:#dcece4!important}
html.dark #landing-section .home-path-card:hover{background:rgba(127,211,172,.07)!important;border-color:rgba(127,211,172,.28)!important}
#landing-section .home-path-card .home-path-icon{background:rgba(8,122,85,.08)!important;color:#087a55!important}
html.dark #landing-section .home-path-card .home-path-icon{background:rgba(127,211,172,.1)!important;color:#a7e0c2!important}
#landing-section .reveal-grid > .glass-panel{background:transparent!important;border-color:rgba(15,36,27,.08)!important;box-shadow:none!important;border-radius:1rem!important}
html.dark #landing-section .reveal-grid > .glass-panel{background:transparent!important;border-color:rgba(167,224,194,.1)!important}
#landing-section .reveal-grid > .glass-panel p:first-child{color:#087a55!important}
html.dark #landing-section .reveal-grid > .glass-panel p:first-child{color:#a7e0c2!important}
#landing-section #home-proof-grid{}
#landing-section .home-proof-grid{background:transparent!important;border-color:rgba(15,36,27,.09)!important;backdrop-filter:none!important}
html.dark #landing-section .home-proof-grid{background:transparent!important;border-color:rgba(167,224,194,.12)!important}
#landing-section .home-proof-icon{background:rgba(8,122,85,.08)!important;color:#087a55!important}
html.dark #landing-section .home-proof-icon{background:rgba(127,211,172,.1)!important;color:#a7e0c2!important}
#landing-section .home-proof-item h3{font-size:.8rem}
#landing-section .home-proof-item p{font-size:.75rem;max-width:34rem}
#landing-section #faq-section{margin-top:.2rem}
#landing-section #faq-section .home-details{border-radius:1.25rem!important;background:rgba(255,255,255,.72)!important}
html.dark #landing-section #faq-section .home-details{background:rgba(30,41,59,.85)!important}
#landing-section > section.max-w-4xl{margin-top:.5rem}
#landing-section > section.max-w-4xl > div{background:linear-gradient(135deg,#059669,#047857)!important;border-radius:1.35rem!important;box-shadow:0 24px 50px -28px rgba(5,150,105,.40)!important}
#landing-section > section.max-w-4xl .text-indigo-100{color:#d1fae5!important}
#landing-section > section.max-w-4xl button{color:#065f46!important}
html.dark #landing-section > section.max-w-4xl > div{background:linear-gradient(135deg,#047857,#065f46)!important}
@media (min-width:1024px){
  #landing-section header{padding-top:5.5rem;padding-bottom:4.25rem}
  #landing-section header{grid-template-columns:minmax(0,1.05fr) minmax(360px,.8fr);gap:5rem}
  #landing-section .hero-card-entrance{margin-inline-end:0}
}
@media (max-width:767.98px){
  #landing-section header{padding-top:3.1rem;padding-bottom:2.2rem;gap:2.4rem}
  #landing-section h1{font-size:clamp(2.65rem,12vw,3.55rem)!important;max-width:11ch}
  #landing-section .hero-card-entrance{margin-top:.15rem}
  #landing-section .hero-fineprint{margin-top:.15rem}
  #landing-section .hero-fineprint > p{line-height:1.55}
}
@media (max-width:420px){
  #landing-section .hero-cta-row{gap:.7rem}
  #landing-section #hero-cta-btn,#landing-section .hero-cta-row > button:nth-child(2){width:100%;justify-content:center}
  #landing-section .hero-card-entrance{padding:1.05rem!important}
  #landing-section .home-proof-item{padding:.95rem}
}


/* ══════════════════════════════════════════════════════════════════════════
   v242 · SITE-WIDE BETA BADGE — premium, no checkbox
   ══════════════════════════════════════════════════════════════════════════ */
.brand-lockup{
  display:inline-flex !important;
  flex-direction:row !important;
  flex-wrap:wrap;
  align-items:center !important;
  justify-content:flex-start;
  gap:0.4rem;
  min-width:0;
  line-height:1.15;
}
.nest-beta-badge{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:0.16rem 0.5rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(15,23,42,.045);
  color:#64748b;
  font-family:var(--nest-sans),system-ui,sans-serif;
  font-size:0.625rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
  box-shadow:none;
}
html.dark .nest-beta-badge{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#94a3b8;
}
/* Kill legacy checkbox mark completely */
.nest-beta-box,
.nest-beta-label,
.nest-beta-badge .nest-beta-box,
.nest-beta-badge::before,
.nest-beta-badge::after{
  display:none !important;
  content:none !important;
  width:0 !important;
  height:0 !important;
  border:none !important;
  background:none !important;
}

@media (max-width:379.98px){
  .nest-beta-badge{font-size:0.58rem;padding:0.14rem 0.42rem;letter-spacing:.08em}
}
@media (max-width:320px){
  nav .brand-lockup{max-width:min(48vw,11rem)}
}


/* ══════════════════════════════════════════════════════════════════════════
   P4 · Custom Selects — هوية Nest بدل قائمة النظام (أندرويد/كروم)
   ══════════════════════════════════════════════════════════════════════════ */
.nest-cs {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  max-width: 100%;
}
.nest-cs-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.nest-cs-trigger {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .45rem .85rem;
  border-radius: .9rem;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #ffffff;
  color: #334155;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  max-width: min(100%, 280px);
}
html.dark .nest-cs-trigger {
  background: #1e293b;
  border-color: rgba(148, 163, 184, .2);
  color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.nest-cs-trigger:hover {
  border-color: rgba(5, 150, 105, .35);
}
html.dark .nest-cs-trigger:hover {
  border-color: rgba(52, 211, 153, .35);
}
.nest-cs-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .28);
}
.nest-cs.is-open .nest-cs-trigger {
  border-color: rgba(5, 150, 105, .45);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, .18);
}
.nest-cs-label {
  flex: 1;
  min-width: 0;
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nest-cs-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: #64748b;
  transition: transform .18s ease;
}
html.dark .nest-cs-chevron { color: #94a3b8; }
.nest-cs.is-open .nest-cs-chevron { transform: rotate(180deg); }

.nest-cs-list {
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(280px, 50vh);
  overflow-y: auto;
  margin: 0;
  padding: .4rem;
  list-style: none;
  border-radius: 1rem;
  border: 1px solid rgba(15, 23, 42, .1);
  background: #ffffff;
  box-shadow:
    0 4px 6px -1px rgba(15, 23, 42, .06),
    0 16px 32px -8px rgba(15, 23, 42, .14);
}
html.dark .nest-cs-list {
  background: #0f172a;
  border-color: rgba(148, 163, 184, .18);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, .35),
    0 18px 36px -10px rgba(0, 0, 0, .55);
}
.nest-cs-option {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: .55rem .75rem;
  border-radius: .7rem;
  font-size: .8125rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  outline: none;
}
html.dark .nest-cs-option { color: #e2e8f0; }
.nest-cs-option:hover,
.nest-cs-option:focus {
  background: rgba(5, 150, 105, .08);
  color: #047857;
}
html.dark .nest-cs-option:hover,
html.dark .nest-cs-option:focus {
  background: rgba(52, 211, 153, .12);
  color: #6ee7b7;
}
.nest-cs-option.is-selected {
  background: rgba(5, 150, 105, .12);
  color: #047857;
}
html.dark .nest-cs-option.is-selected {
  background: rgba(52, 211, 153, .16);
  color: #6ee7b7;
}
.nest-cs-option.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* تحسين بسيط لأي select لم يُحوَّل بعد (نماذج التواصل وغيرها) */
select:not(.nest-cs-native) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-inline-end: 1.85rem;
}
html.dark select:not(.nest-cs-native) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}