/* ==========================================================================
   site.css — طبقة التخطيط والقياس العامة (تُحمَّل بعد tailwind وreskin)
   --------------------------------------------------------------------------
   لماذا وحدة مستقلة؟ لأن `tailwind.css` ملف **مبني مسبقاً** (271KB، بُني 11/10)
   من `src/input.css`، و`reskin.css` طبقة تُلغي مظهر Tailwind الافتراضي. أي تعديل
   هنا يعمل بلا إعادة بناء، ويأتي في آخر السلسلة (نفس التخصيص ← الفوز مضمون).

   ما تصلحه هذه الطبقة (كلها مقيسة في متصفح حقيقي قبل التعديل):

   1) **الصفحة لا تملأ الشاشة.** `base.html` كان يضع `min-h-screen` على `<main>`
      مع `flex-grow`: ارتفاع المتصفح الكامل **يُضاف** فوق ارتفاع الشريط العلوي
      والتذييل. صفحة 404 محتواها 530px كانت 1752px: 314px فراغاً داخل main + 80px
      فجوة قبل التذييل. الآن: `main` يتمدّد (`flex:1`) بلا ارتفاع مفروض، فالتذييل
      يلتصق بالقاع على الصفحات القصيرة ويلتصق بالمحتوى على الطويلة.

   2) **الموقع لا يستخدم عرض الشاشة.** `.container` كان محدوداً بـ1536px، و
      `reskin.css` كان يضع `main > * { max-width: 1440px }` فوق 1536px، والشريط
      العلوي `max-w-7xl` = 1280px (أضيق من المحتوى!) — على شاشة 1920 يبقى 192px
      فارغاً على كل جانب. الآن هيكل واحد متسق بعرض سائل.

   3) **إطار العرض يمنع التكبير** (`maximum-scale=1.0`) — أُزيل في القالب.

   4) **درج الجوال كان يغطي الشاشة وهو مغلق**: قاعدتان متعارضتان (إحداهما في
      `tailwind.css` والأخرى في `<style>` داخل القالب) — إحداهما تحرّك `left/right`
      والأخرى تحرّك `transform`، فمجموعهما يترك ~256px من 390px مرئية ومغطاة
      لصفحة الموقع كلها على الجوال. القالب الآن يملك **مظهر** الدرج فقط، وموضعه
      وحركته من `src/input.css` (اتجاه صحيح في RTL وLTR)، مع `visibility`
      كشبكة أمان: الدرج المغلق لا يغطي ولا يستقبل نقرات مهما حدث للتحويل.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. هيكل الصفحة — عرض كامل، والتذييل في القاع
   -------------------------------------------------------------------------- */
.site-main {
  flex: 1 0 auto;
  /* 100% مع حشو سائل: لا فراغ جانبي ميت على الشاشات الكبيرة */
  width: 100%;
  max-width: min(var(--nx-shell-max, 1680px), 100%);
  margin-inline: auto;
  padding-block: clamp(1rem, 2.2vw, 2.25rem) clamp(2rem, 4vw, 3.5rem);
  padding-inline: var(--nx-gutter, clamp(0.9rem, 3vw, 2.5rem));
}

/* reskin.css كان يحشو كل ابن مباشر لـmain بـ1rem إضافية فوق حشو الحاوية، فتتضاعف
   الهوامش وتظهر الصفحة أضيق مما ينبغي. الهيكل نفسه يوفّر الحشو الآن. */
.site-main > * {
  padding-inline: 0;
}

/* reskin.css كان يحدّ كل قسم بـ1440px فوق 1536px: على 1920 تبقى أشرطة فارغة
   192px يميناً ويساراً. نرفع الحد ليعمل بعرض الهيكل، وكل صفحة تقيّد نصها الطويل
   بنفسها (`max-w-*`) فتبقى أسطر القراءة مريحة. */
@media (min-width: 1536px) {
  .site-main > * {
    max-width: none;
  }
}

/* كل حاويات التخطيط بلا حدّها الضيق — عدا ما يقيد نفسه صراحةً (`max-w-*`) */
.container:not([class*="max-w-"]) {
  max-width: min(var(--nx-shell-max, 1680px), 100%);
}

/* الشريط العلوي كان 1280px بينما المحتوى 1536px ⇒ عتبات غير متطابقة */
.site-nav {
  max-width: min(var(--nx-shell-max, 1680px), calc(100% - 1.5rem));
}

/* --------------------------------------------------------------------------
   2. الشريط العلوي — زجاج حقيقي بدل نصف شفاف بلا تمويه
   reskin ألغى `backdrop-blur-*` عالمياً، فصار الشريط العائم شبه الشفاف بلا تمويه
   يقرأ كنص فوق نص. أعِد التمويه لهذه السطح العائم وحده (`nx-float` فكرة الطبقة
   نفسها: التمويه مطلب وظيفي للعناصر الطائرة لا زينة عامة).
   -------------------------------------------------------------------------- */
.site-nav {
  background: color-mix(in srgb, #0b1020 78%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* عند التمرير يصير الشريط أكثر صلابة (وضوح أعلى للقراءة) */
body.nx-scrolled .site-nav {
  background: color-mix(in srgb, #0b1020 92%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
}

/* --------------------------------------------------------------------------
   3. درج الجوال — مظهر فقط؛ الموضع والحركة من src/input.css
   -------------------------------------------------------------------------- */
/* الموضع والاتجاه (لها الأولوية على tailwind.css لأن هذا الملف يُحمَّل بعده)
   -------------------------------------------------------------------------
   `src/input.css` يضع `inset-inline-start:0` (في RTL = الحافة **اليمنى**)،
   وزر الهمبرغر في LTR يمين وفي RTL يسار — فكان الدرج يفتح على الجهة المعاكسة
   للزر. والأسوأ: قاعدة `html[dir=rtl] .mobile-nav-drawer{transform:translateX(100%)}`
   تخصيصها (0,2,1) **أعلى** من `.mobile-nav-drawer.active` (0,2,0)، فتبقى مُطبّقة
   حتى عند الفتح ⇒ في العربية يظهر التعتيم والبلاور ولا يظهر الدرج إطلاقاً.

   هنا: نربط الدرج بحافة الهمبرغر (`inset-inline-end`)، ونخفي بالإزاحة الصحيحة
   لكل اتجاه، ونضع قاعدة الحالة المفتوحة بتخصيص (0,3,1) تهزم قاعدة RTL. */
.mobile-nav-drawer {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translateX(100%);
  width: min(20rem, 86vw);
  height: 100dvh;
  background: #0d1322;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* شبكة أمان: حتى لو أخطأ أي تحويل لاحقاً، الدرج المغلق لا يغطي ولا ينقر */
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
}

.mobile-nav-drawer.active,
html[dir="rtl"] .mobile-nav-drawer.active {
  visibility: visible;
  transform: translateX(0);
}

html[dir="rtl"] .mobile-nav-drawer {
  transform: translateX(-100%);
}

.mobile-nav-overlay {
  z-index: 100;
}

.mobile-nav-drawer {
  z-index: 101;
}

/* --------------------------------------------------------------------------
   4. التذييل — أقل ارتفاعاً على الجوال، وفجوة سائلة عن المحتوى
   كان التذييل 750px على 390px (شاشتان من الروابط) وفوقه 80px فراغاً ثابتاً.
   -------------------------------------------------------------------------- */
.site-footer {
  margin-block-start: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2rem, 4vw, 3rem) clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 640px) {
  .site-footer {
    text-align: center;
  }
  .site-footer .footer-brand {
    grid-column: span 2;
  }
  .site-footer ul {
    align-items: center;
  }
}

/* نقطة الحالة الحيّة: reskin أوقف كل `animate-pulse` كزينة، وهذه واحدة معناها
   وظيفي (النظام يعمل الآن)، فتُعاد هنا وحدها. */
.site-footer .animate-pulse {
  animation: nx-live-pulse 2.4s ease-in-out infinite;
}

@keyframes nx-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

/* --------------------------------------------------------------------------
   5. مَيْل ثلاثي الأبعاد — أداة كانت مكتوبة في الوسم وغير موجودة في اللأنماط
   المرشح كان يحمل `perspective-1000` و`hover:rotate-y-6` و`hover:-rotate-x-2`،
   وكلها أدوات بقيم لم يرها بناء Tailwind فليست في الملف المبني ⇒ لا أثر إطلاقاً
   (كلاس ميت بلا خطأ). أُعطيت أسماء حقيقية هنا لتعمل فعلاً، وتُعطَّل مع
   `prefers-reduced-motion`.
   -------------------------------------------------------------------------- */
.tilt-3d {
  perspective: 1000px;
}

.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.45s var(--nx-ease, cubic-bezier(0.4, 0, 0.2, 1)),
              box-shadow 0.45s ease;
}

@media (hover: hover) {
  .tilt-card:hover {
    transform: rotateY(5deg) rotateX(-3deg) translateY(-3px);
    box-shadow: 0 34px 70px -34px rgba(99, 102, 241, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tilt-card,
  .tilt-card:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   6. واجهة الصفحة الرئيسية — ارتفاعات وعروض مُقاسة بالبكسل
   ⚠️ قاعدة الملف المبني: `min-h-[100svh]` و`lg:max-w-xl` و`lg:h-[360px]` ليست
   فيه (البناء لم يرها) ⇒ **كلاس ميت بلا أثر ولا خطأ**. لذلك كل مقاس جديد هنا
   باسم صنف حقيقي، لا أداة بقيمة اعتباطية.
   -------------------------------------------------------------------------- */

/* ارتفاع أول شاشة بـ`svh` لا `vh`: على الجوال `100vh` يشمل أشرطة المتصفح
   المتحركة فيقفز المقاس عند ظهورها.
   (والعكس صحيح أيضاً: يضمن أن القسم يملأ الشاشة الأولى بالضبط.) */
.hero-screen {
  min-height: 100vh;
  min-height: 100svh;
}

/* بطاقة المحطة في الواجهة: 512px على شاشة 1920 كانت تبدو صغيرة وتائهة في
   فراغ؛ تتّسع مع الشاشة حتى 42rem. */
.hero-card-max {
  max-width: 32rem;
}

@media (min-width: 1024px) {
  .hero-card-max { max-width: 36rem; }
}

@media (min-width: 1440px) {
  .hero-card-max { max-width: 42rem; }
}

/* جسم المحطة: مساحة مريحة للقراءة بلا أن يمتد القسم أكثر من اللازم */
.term-body {
  height: 300px;
}

@media (min-width: 1024px) {
  .term-body { height: 360px; }
}

/* --------------------------------------------------------------------------
   7. لمسات تناسق عامة
   -------------------------------------------------------------------------- */
html {
  /* لا تمرير أفقي عرضي من تحويلات AOS (`translateX(±100px)`) قبل الكشف */
  overflow-x: clip;
  scroll-padding-top: 6rem;
}

/* عناوين الأقسام تتنفّس مع حجم الشاشة */
h1 { font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem); }

/* الجداول العريضة: تمرير داخل البطاقة بدل كسر الصفحة */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* شبكات الأقسام: أعمدة تلقائية لا تنكسر على الشاشات المتوسطة */
@media (max-width: 900px) {
  .xl\:grid-cols-5,
  .xl\:grid-cols-6,
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-drawer,
  .site-nav,
  .site-footer .animate-pulse {
    transition: none;
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   8. الصفحات المستقلة (التي لا تمتدّ base.html) — نفس هيكل الصفحة
   --------------------------------------------------------------------------
   `add_funds` · `admin` · `admin_payments` · `profile_dashboard` ·
   `support_staff` · `support_ticket` كانت **تطبيقات منفصلة**: لا `site.css`، ولا
   `reskin.css`، ولا `base.html`، كل واحدة `min-h-screen` على `body` ومحتوى
   متمركز في الفراغ — فلا هي تملأ الشاشة ولا تشبه بقية الموقع.

   `body.solo-page` يعطيها نفس هيكل القالب الأساسي: عمود يمتدّ لارتفاع الشاشة،
   والمحتوى يتمدّد (flex:1) فيلتصق أي تذييل بالقاع وتملأ الخلفية الشاشة كاملة
   على أي ارتفاع — بلا أن نعيد بناء أي صفحة. */
:root {
  --nx-shell-max: 1680px;
  --nx-gutter: clamp(0.9rem, 3vw, 2.5rem);
  --nx-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

body.solo-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* المحتوى يملأ ما بين الشريط والتذييل، ويكون بعرض الشاشة فعلاً */
body.solo-page > main,
body.solo-page > .solo-main {
  flex: 1 0 auto;
  width: 100%;
}

/* لوحة/وحدة تحكم بارتفاع الشاشة نفسه (تمرير داخلي مقصود — لا تمرير للنافذة).
   `min-height` على `body` لا تُقيّد الأبناء، فلا يعمل أي `overflow-y-auto`
   داخلي أبداً؛ هنا يصير الارتفاع محدّداً بـ`100dvh`، وهو ما تتوقّعه قوائم
   التذاكر والمحادثة في `support_staff`. */
body.solo-page.solo-app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.solo-app > main,
body.solo-app > .solo-main {
  min-height: 0;
}

/* غلاف بعرض الهيكل الموحّد مع حشو سائل (للصفحات التي لا تستعمل `container`) */
.solo-wrap {
  width: min(var(--nx-shell-max), 100%);
  margin-inline: auto;
  padding-inline: var(--nx-gutter);
}

/* قياس قراءة مريح داخل صفحة مستقلة بلا فقدان عرض الشاشة على الجوال */
.solo-measure {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}

/* بوابة/حالة تريد ملء الشاشة **داخل** `base.html`: ارتفاع الشاشة ناقص الشريط
   والتذييل. `min-h-screen` هناك كان يضيف 100vh فوقهما فيتضاعف الطول. */
.nx-fill {
  min-height: calc(100vh - 14rem);
  min-height: calc(100dvh - 14rem);
}

/* --------------------------------------------------------------------------
   9. رموز التصميم الناقصة من الملف المبني
   `tailwind.config.js` يعرّف `secondary` و`gold`، لكن `tailwind.css` المبني
   لم يولّد أدواتها (والدليل: `reskin.css` أضاف `.to-secondary` يدوياً).
   أي صفحة تستعملها كانت تفقد لونها بلا خطأ — وهي مستعملة فعلاً في
   `admin.html` (gold) و`profile_dashboard.html` (secondary/darker).
   -------------------------------------------------------------------------- */
.bg-secondary { background-color: #7c8aff; }
.bg-secondary\/10 { background-color: rgba(124, 138, 255, 0.10); }
.bg-secondary\/20 { background-color: rgba(124, 138, 255, 0.20); }
.hover\:bg-secondary\/80:hover { background-color: rgba(124, 138, 255, 0.80); }
.border-secondary { border-color: #7c8aff; }
.focus\:border-secondary:focus { border-color: #7c8aff; }
.text-secondary { color: #7c8aff; }
.text-gold-400 { color: #f5c451; }
.bg-darkest { background-color: #202225; }
.bg-darker { background-color: #2f3136; }
.bg-darker\/50 { background-color: rgba(47, 49, 54, 0.50); }

/* --------------------------------------------------------------------------
   10. عناصر كانت بلا أي نمط (أسماء يبحث عنها القالب وليست في أي ملف أنماط)
   `form-control` · `label-text` · `toggle` · `active-btn` · `dir-ltr` مربوطة في
   قوالب مستقلة ولا أثر لها في أي طبقة ⇒ حقول ومفاتيح وتبويب نشط تبدو مكسورة.
   -------------------------------------------------------------------------- */
.form-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0;
}

.label-text {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}

.toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 1.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background-color 0.2s var(--nx-ease), border-color 0.2s var(--nx-ease);
}

.toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 2px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: #fff;
  transform: translateY(-50%);
  transition: inset-inline-start 0.2s var(--nx-ease);
}

.toggle-primary:checked { background: #5865f2; border-color: #5865f2; }
.toggle-secondary:checked { background: #7c8aff; border-color: #7c8aff; }
.toggle:checked::after { inset-inline-start: calc(100% - 1.05rem - 2px); }
.toggle:disabled { opacity: 0.55; cursor: not-allowed; }

/* تبويب/مرشّح نشط — `admin.html` يبدّل هذا الصنف بالـJS ولا قاعدة له */
.active-btn {
  background: rgba(99, 102, 241, 0.18) !important;
  border-color: rgba(124, 138, 255, 0.55) !important;
  color: #fff !important;
}

/* ارتفاعات/عروض سقفية طلبتها قوالب وما وُلدت في الملف المبني، فبقيت بلا أثر:
   قوائم صور/أسئلة بلا حدّ أعلى تنمو وتُطيل الصفحة بلا داع.
   (مقيسة في فحص [7]: max-h-[28rem] · max-w-[16rem] · max-h-[26rem] · max-h-64 ·
   text-[12px] · py-4.5) */
.max-h-64 { max-height: 16rem; }
.max-h-\[26rem\] { max-height: 26rem; }
.max-h-\[28rem\] { max-height: 28rem; }
.max-w-\[16rem\] { max-width: 16rem; }
.text-\[12px\] { font-size: 12px; }
.py-4\.5 { padding-block: 1.125rem; }

/* كتل الرموز/المعرّفات: تُعرض LTR داخل صفحة RTL */
.dir-ltr { direction: ltr; }
.dir-ltr code, .dir-ltr pre { direction: ltr; text-align: left; }

/* حقول الإدخال في الصفحات المستقلة: نفس مظهر حقول اللوحة */
body.solo-page input:not([type="checkbox"]):not([type="radio"]):not(.toggle),
body.solo-page select,
body.solo-page textarea {
  max-width: 100%;
}

/* الشريط العلوي المثبّت يغطي بداية المحتوى: نفس الإزاحة في كل صفحة مستقلة */
body.solo-page > main { scroll-margin-top: 6rem; }

/* --------------------------------------------------------------------------
   11. صفحات اللوحة تاخذ الصفحة بالكامل (عرض وارتفاع)
   --------------------------------------------------------------------------
   مقياس ما قبل: على 1920px كان الهيكل محدوداً بـ1680px فيبقى 120px فارغاً على
   كل جانب، والأسوأ أن أغلب صفحات اللوحة تقيّد محتواها بعد ذلك بحاوية ضيقة
   (`container … max-w-5xl` = 1024px) فتُهدر ثلث الشاشة في صفحة إعدادات من
   عمودين، وتنتهي الصفحة عند نصف الشاشة فيبدو كل شيء «معلّقاً في فراغ».

   العلامة `dash-sidebar` (في `sidebar.html`) تعرّف صفحة اللوحة دون تعديل 46
   قالباً: أي عمود يحتوي الشريط الجانبي هو هيكل اللوحة.

   `:has()` مدعومة في كل المتصفحات الحالية؛ وحيث لا تتوفر تبقى القواعد القديمة
   كما هي (لا نص مقطوع، لا تخطيط مكسور). */
.site-main:has(.dash-sidebar) {
  /* عرض الشاشة كاملاً: الهوامش السائلة تبقى هي المسافة المريحة، لا حدّ ثابت */
  max-width: none;
}

/* هيكل الصفحة: عمود على الجوال، وصفّ بعرض كامل على الشاشات الكبيرة
   مع `min-height` يضمن أن تملأ الصفحة (شريط جانب مرتفع + محتوى) الشاشة
   ولا تترك نصفها فارغاً. */
.site-main > *:has(.dash-sidebar) {
  width: 100%;
  min-height: calc(100vh - 12rem);
  min-height: calc(100dvh - 12rem);
}

@media (min-width: 1024px) {
  .site-main > *:has(.dash-sidebar) {
    align-items: stretch;
  }
}

/* المحتوى يتمدّد دائماً بعرض ما بقي بعد الشريط الجانبي */
.site-main > *:has(.dash-sidebar) > main,
.site-main > *:has(.dash-sidebar) > .dash-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* الحاويات الضيقة المتمركزة داخل اللوحة (max-w-5xl/4xl/3xl) كانت أهم سبب
   «الفراغ الجانبي». نصّ القراءة الطويل يقيّد نفسه بنفسه (`max-w-2xl`) فيبقى
   مقروءاً، أما أغلفة الصفحة فتأخذ العرض كاملاً. */
.site-main:has(.dash-sidebar) .container[class*="max-w-"],
.site-main:has(.dash-sidebar) main > .container,
.site-main:has(.dash-sidebar) main > div > .container {
  max-width: none;
}

/* --------------------------------------------------------------------------
   12. لوحة القياس: بطاقات، رؤى، ورسوم `nx-charts.js`
   --------------------------------------------------------------------------
   كلها أصناف حقيقية معرّفة هنا (لا أدوات بقيم اعتباطية: درس الملف المبني:
   `max-w-[…]` و`grid-cols-[…]` غير المولَّدة = بلا أثر وبلا خطأ). */
/* خمس بطاقات: `auto-fit` مع حد أدنى ١٩٠px يختار ٤ أعمدة عند عرض ١٠٢٩px
   (٥×١٩٠+٦٤=١٠١٤ تمرّ حسابياً لكن التقريب يقطعها) فيبقى «المعدل اليومي» يتيمّاً
   في صفٍّ ثانٍ وحده. أعمدة معلَمة صراحةً: ٥ عند السعة الكاملة، ٣ في الوسط
   (٣+٢ متوازن)، ٢ على الجوال. */
.nx-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 760px) {
  .nx-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .nx-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.nx-kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.05rem 1.15rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.55), rgba(2, 6, 23, 0.72));
  overflow: hidden;
}

.nx-kpi::after {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -20%;
  width: 9rem;
  height: 9rem;
  border-radius: 999px;
  background: var(--nx-accent, #38bdf8);
  opacity: 0.1;
  filter: blur(28px);
  pointer-events: none;
}

.nx-kpi-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(203, 213, 225, 0.92);
}

.nx-kpi-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  font-size: 0.9rem;
  color: #e0f2fe;
  background: rgba(56, 189, 248, 0.16);
  flex: 0 0 auto;
}

.nx-kpi-value {
  font-size: clamp(1.45rem, 1.05rem + 0.9vw, 2rem);
  font-weight: 900;
  line-height: 1.1;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  text-align: start;
}

.nx-kpi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.72rem;
  color: rgba(148, 163, 184, 0.95);
}

.nx-kpi-spark {
  width: 100%;
  height: 2.4rem;
  margin-block-start: auto;
}

.nx-delta {
  font-weight: 800;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

.nx-delta.up { color: #4ade80; }
.nx-delta.down { color: #fb7185; }
.nx-delta.flat { color: #94a3b8; }

/* بطاقات الرسم الكبيرة */
.nx-panel {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: rgba(2, 6, 23, 0.55);
  padding: 1.1rem 1.2rem 1.2rem;
}

.nx-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-end: 0.9rem;
}

.nx-panel-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  font-weight: 800;
  color: #f1f5f9;
}

.nx-panel-title i { color: #38bdf8; }

.nx-chart { position: relative; width: 100%; direction: ltr; }
.nx-chart svg { display: block; width: 100%; }

.nx-chart-tip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.6rem;
  background: rgba(2, 6, 23, 0.95);
  color: #e2e8f0;
  font-size: 0.72rem;
  line-height: 1.5;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  direction: ltr;
  text-align: start;
  white-space: nowrap;
}

.nx-tip-label {
  margin-block-end: 0.2rem;
  font-weight: 800;
  color: rgba(148, 163, 184, 0.95);
}

.nx-tip-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-inline-end: 0.3rem;
}

.nx-tip-name { margin-inline-end: 0.35rem; }

.nx-chart-marker {
  position: absolute;
  width: 1px;
  background: rgba(148, 163, 184, 0.45);
  pointer-events: none;
}

.nx-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 9rem;
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 0.85rem;
  color: rgba(148, 163, 184, 0.9);
  font-size: 0.85rem;
  text-align: center;
}

.nx-chart-empty-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  font-size: 1.05rem;
  color: #bae6fd;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.18);
}

.nx-chart-empty-text { max-width: 22rem; line-height: 1.5; }

/* سمة `hidden` تُغلَب هنا: `.nx-chip` تضبط `display:inline-flex` كخاصية صنف
   وتتغلّب على قاعدة `[hidden]` الافتراضية في المتصفح، فيبقى شريحة فارغة
   (مثل `#range-note`) ظاهرة كحبّة بيضاء بلا نص. */
[hidden] { display: none !important; }

/* مفتاح الرسم (لون + اسم السلسلة) */
.nx-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.nx-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: rgba(203, 213, 225, 0.92);
}
.nx-legend-swatch { width: 0.65rem; height: 0.65rem; border-radius: 999px; }

/* صفوف الرؤى (تحليل الجملة + رقم) */
.nx-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.75rem; }
.nx-insight {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.55);
}
.nx-insight-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  font-size: 0.85rem;
  background: rgba(148, 163, 184, 0.14);
}
.nx-insight.up .nx-insight-glyph { background: rgba(74, 222, 128, 0.16); color: #4ade80; }
.nx-insight.down .nx-insight-glyph { background: rgba(251, 113, 133, 0.16); color: #fb7185; }
.nx-insight.flat .nx-insight-glyph { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
.nx-insight-text { font-size: 0.8rem; line-height: 1.6; color: rgba(226, 232, 240, 0.95); }
.nx-insight-value { font-weight: 900; color: #f8fafc; direction: ltr; }

/* شرائح اختيار المدى (7/14/30 يوماً) — أزرار حقيقية لا عناصر بلا نمط */
.nx-range {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.6);
}
.nx-range button {
  border: 0;
  background: transparent;
  color: rgba(203, 213, 225, 0.85);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s var(--nx-ease), color 0.2s var(--nx-ease);
}
.nx-range button:hover { color: #fff; background: rgba(148, 163, 184, 0.16); }
.nx-range button[aria-pressed="true"] { background: #0ea5e9; color: #04121f; }

/* هيكل صفحة القياس: عمودان على الشاشات الكبيرة */
.nx-analytics-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1280px) {
  .nx-analytics-grid { grid-template-columns: 2fr 1fr; }
  .nx-analytics-grid > .nx-span-2 { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-range button { transition: none; }
}

/* --------------------------------------------------------------------------
   13. ترويسة صفحات القياس
   --------------------------------------------------------------------------
   لماذا عمداً CSS محلي بأصناف حقيقية لا أدوات Tailwind: الملف المبني مجمّد، وأي
   أداة بقيمة اعتباطية فيه لا وجود لها (صنف ميت بلا خطأ) — درس v11. */
.nx-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.1rem;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(2, 6, 23, 0.72) 55%);
}

.nx-hero-glow {
  position: absolute;
  inset-block-start: -55%;
  inset-inline-start: -8%;
  width: 24rem;
  height: 24rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 65%);
  pointer-events: none;
}

.nx-hero-title {
  margin: 0.35rem 0 0.3rem;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem);
  font-weight: 900;
  line-height: 1.15;
  color: #f8fafc;
}

.nx-hero-desc {
  max-width: 46rem;
  color: rgba(203, 213, 225, 0.92);
  font-size: 0.95rem;
  line-height: 1.7;
}

.nx-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  font-size: 0.72rem;
  font-weight: 800;
}

.nx-chip.muted {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.12);
  color: rgba(203, 213, 225, 0.92);
}

.nx-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-start: 0.9rem;
}

/* جدول الرموز الصغيرة (أنواع النظام + عددها) */
.nx-bars-mini { display: grid; gap: 0.55rem; }
.nx-bars-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: rgba(203, 213, 225, 0.92); }
.nx-bars-name { min-width: 5.5rem; }
.nx-bars-track { flex: 1 1 auto; height: 0.45rem; border-radius: 999px; background: rgba(148, 163, 184, 0.18); overflow: hidden; }
.nx-bars-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #38bdf8, #6366f1); }
.nx-bars-value { font-weight: 800; color: #f1f5f9; direction: ltr; }

/* بطاقة بنّية داخل الشبكة (شكل موحّد لكل الأقسام) */
.nx-card {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 1rem;
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.72), rgba(2, 6, 23, 0.6));
  padding: 1.1rem 1.2rem;
}

.nx-commands { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.85rem; }
.nx-command {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.85rem;
  background: rgba(2, 6, 23, 0.55);
  padding: 0.75rem 0.85rem;
}
.nx-command code { display: block; direction: ltr; text-align: start; color: #7dd3fc; font-weight: 700; }
.nx-command span { display: block; margin-block-start: 0.35rem; font-size: 0.78rem; color: rgba(148, 163, 184, 0.95); }

/* --------------------------------------------------------------------------
   14. لمسات البقية من الموقع
   --------------------------------------------------------------------------
   الأسطح: `.glass` مُعرَّفة **مرّة واحدة** في `tailwind.css` (سطح ثابت بلا تدرّج)،
   ومئات البطاقات في 46 قالباً تستعملها. تحديث هذا التعريف الواحد يرفع كل صفحة
   دفعة واحدة — وهو أقصر طريق لتحسين باقي الصفحات بلا 46 تعديلاً يدوياً يُنسى
   نصفه. القيم هنا اختيارية (طبقة بعد tailwind) ولا تنازع أي أداة أحادية.
   -------------------------------------------------------------------------- */
.glass {
  background:
    linear-gradient(165deg, rgba(51, 65, 92, 0.42), rgba(8, 12, 24, 0.86) 60%),
    var(--nx-surface, #101218);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* انتقال موحّد لأي سطح تفاعلي (العناصر الأخرى لا تتحرّك بلا سبب) */
.site-main :where(.glass, .nx-card, .nx-panel, .nx-kpi, .nx-insight, .nx-command) {
  transition: border-color 0.25s var(--nx-ease), box-shadow 0.25s var(--nx-ease),
              background-color 0.25s var(--nx-ease);
}

@media (hover: hover) {
  .site-main :where(.glass, .nx-card, .nx-panel):hover {
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 26px 60px -40px rgba(0, 0, 0, 0.9);
  }
}

/* العناوين داخل اللوحة: تباعد حروف أضيق لتناسب الخطوط العربية والإنجليزية معاً */
.site-main :where(h1, h2, h3, h4) {
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* الجداول كانت مكدّمات بلا فواصل أفقية يقرأها العين في سطر واحد */
.site-main table {
  border-collapse: separate;
  border-spacing: 0;
}
.site-main table :where(tbody tr) {
  border-block-start: 1px solid rgba(148, 163, 184, 0.1);
}
@media (hover: hover) {
  .site-main table :where(tbody tr):hover {
    background: rgba(148, 163, 184, 0.06);
  }
}
.site-main table :where(th) {
  font-weight: 800;
  color: rgba(226, 232, 240, 0.92);
  padding-block: 0.6rem;
  border-block-end: 1px solid rgba(148, 163, 184, 0.18);
}
.site-main table :where(td) {
  padding-block: 0.55rem;
  color: rgba(203, 213, 225, 0.9);
}

/* حقول الإدخال: أصوات واحدة خفيفة فقط (الأدوات الأحادية تبقى هي الأعلى)
   `:where()` تخصيصها (0) فلا تنتصر أبداً على `bg-black/30` أو `border-white/10`. */
:where(.site-main input, .site-main select, .site-main textarea, .solo-page input,
       .solo-page select, .solo-page textarea) {
  transition: border-color 0.2s var(--nx-ease), background-color 0.2s var(--nx-ease),
              box-shadow 0.2s var(--nx-ease);
}

/* التركيز مرئي للوحة المفاتيح في كل الموقع (ملاحظة وصولية ناقصة في كل القوالب) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.75);
  outline-offset: 2px;
}

/* شريط تمرير بلون الموقع (بلا حشو أبيض على سطح داكن) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.6); background-clip: padding-box; }

/* نصّ مفيد العرض على الشاشات الضيقة (لا يكسر الكلمة الطويلة ولا يفلّت النص) */
.site-main :where(p, li, dd) { text-wrap: pretty; }

/* الشريط الجانبي: `nav-section` كان صنفاً **ميتاً** بلا أي قاعدة — والـJS
   يُظهر/يخفي اللوحة عبر سمة `hidden`، فلا نُضيف آلية ثانية هنا. ما ينقصه
   هو تباعد بين الأقسام فقط، وإلا التصق عناوين المجموعات ببعضها. */
.nav-section + .nav-section {
  margin-block-start: 0.4rem;
}

/* بطاقات مصغّرة داخل السطور (أيقونة + عنوان + وصف) بلا تباعد متهالك */
.nx-row-card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 0.8rem;
  background: rgba(15, 23, 42, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .site-main :where(.glass, .nx-card, .nx-panel, .nx-kpi, .nx-insight, .nx-command) {
    transition: none;
  }
}

/* ── طبقة الضجيج (الحبيبات) ─────────────────────────────────────────────
   كانت كلاس Tailwind بقيمة اعتباطية تشير إلى ملف خارجي
   (`bg-[url('https://grainy-gradients.vercel.app/noise.svg')]`) وردّ ذلك
   المضيف 402 فصار الطلب فاشلاً دائماً. القاعدة هنا محلية بنفس اسم الكلاس
   الجديد الذي تستعمله القوالب، فتعمل بلا أي طلب شبكي خارجي.
   (الملف: static/img/noise.svg — SVG مكتوب في المستودع، لا نسخة CDN.) */
.bg-\[url\(\'\/static\/img\/noise\.svg\'\)\] {
  background-image: url(/static/img/noise.svg);
  background-repeat: repeat;
}