/* ============================================================
   CivioX — نظام التصميم الموحّد v3.2
   أربعة مظاهر (النظام/فاتح/داكن/رمادي) + هيدر يمين + صفحة إعدادات
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* سمة hidden تسبق أي display في الأصناف.
   بدونها يتفوّق `.x{display:flex}` على قاعدة المتصفح `[hidden]{display:none}`
   بحكم الأولوية، فيظهر العنصر رغم إخفائه من الجافاسكربت. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------
   ألوان الوضعين — الداكن هو الافتراضي
   ------------------------------------------------------------ */
:root,
:root[data-theme="dark"] {
  --primary: #00c4e8;
  --primary-2: #0091b8;
  --primary-bright: #7cf2ff;
  --primary-dim: rgba(0, 196, 232, .1);
  --primary-ink: #03141a;
  --gold: #f0b35a;
  --danger: #f0596b;
  --success: #46c98a;

  --bg: #070a11;
  --bg-2: #0a0e17;
  --panel: #0d121d;
  --card: rgba(255, 255, 255, .033);
  --card-h: rgba(255, 255, 255, .065);
  --border: rgba(255, 255, 255, .085);
  --border-h: rgba(0, 196, 232, .38);
  --text: #e9edf5;
  --muted: #8b96aa;
  --shadow: 0 24px 60px -22px rgba(0, 0, 0, .75);
  --chrome-bg: rgba(9, 12, 20, .88);
  --grid-line: rgba(0, 196, 232, .045);
  --glow-1: rgba(0, 196, 232, .12);
  --glow-2: rgba(0, 145, 184, .09);
  --scrollbar: rgba(255, 255, 255, .14);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --primary: #007ea6;
  --primary-2: #005f80;
  --primary-bright: #0093c2;
  --primary-dim: rgba(0, 126, 166, .09);
  --primary-ink: #ffffff;
  /* الذهبي والأخضر يُستعملان نصّاً لا زخرفةً فقط (شارة «قريباً»، وسم
     «مجاني»، حالة «تم»، نصّ الإشعارات)، وعلى الأبيض كانا 3.79:1 و
     4.08:1 — دون حدّ WCAG AA للنص العادي. غُمِّقا حتى 4.95:1 و5.34:1
     مع الحفاظ على الصبغة، وهو يحسّن أيضاً الأبيضَ فوقهما حين
     يُستعملان خلفيةً. القيم في الداكن والرمادي تتجاوز الحدّ أصلاً. */
  --gold: #96670f;
  --danger: #cf3549;
  --success: #177a4f;

  /* أبيض خالص: كل الأسطح بيضاء والنص وحده هو ما يظهر.
     الحدود شعرة رمادية باهتة للفصل بين البطاقات فقط — بلا ألواح
     رمادية ولا تدرّجات ولا توهّج. */
  --bg: #ffffff;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --card: #ffffff;
  --card-h: #f6f8fa;          /* تظليل خفيف جداً عند التحويم فقط */
  --border: rgba(15, 25, 45, .10);
  --border-h: rgba(0, 126, 166, .40);
  --text: #14181f;
  --muted: #5d6a7f;
  --shadow: 0 16px 40px -30px rgba(15, 25, 45, .22);
  --chrome-bg: #ffffff;
  --grid-line: transparent;
  --glow-1: transparent;
  --glow-2: transparent;
  --scrollbar: rgba(15, 25, 45, .22);
  color-scheme: light;
}

/* الوضع الفاتح — تنظيف ما يكسر «الأبيض الخالص»:
   ظلال ثقيلة وخلفيات شبه شفافة سوداء موروثة من الوضع الداكن. */
:root[data-theme="light"] .bg-scene { background: #ffffff; }
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .bottom-nav,
:root[data-theme="light"] .main-area { background-color: #ffffff; }

/* رمادي محايد — مستوحى من برامج سطح المكتب الاحترافية */
:root[data-theme="gray"] {
  --primary: #7fb0c2;
  --primary-2: #648f9f;
  --primary-bright: #a9d3e2;
  --primary-dim: rgba(127, 176, 194, .1);
  --primary-ink: #10171b;
  --gold: #cfa96b;
  --danger: #d97281;
  --success: #6fbd95;

  --bg: #17191d;
  --bg-2: #1b1e22;
  --panel: #212429;
  --card: rgba(255, 255, 255, .04);
  --card-h: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .09);
  --border-h: rgba(127, 176, 194, .4);
  --text: #e6e8eb;
  --muted: #9aa1ab;
  --shadow: 0 24px 60px -22px rgba(0, 0, 0, .6);
  --chrome-bg: rgba(24, 26, 30, .9);
  --grid-line: rgba(255, 255, 255, .03);
  --glow-1: rgba(127, 176, 194, .06);
  --glow-2: rgba(255, 255, 255, .025);
  --scrollbar: rgba(255, 255, 255, .16);
  color-scheme: dark;
}

:root {
  /* ===== سلّم نصف الأقطار — ست درجات تغطي كل الاستخدامات =====
     كانت الملفات تحمل عشرين قيمة خام (6/7/10/11/13/14/16/18/20…)
     تتجاوز التوكنَين الوحيدين. السلّم أدناه يستوعبها كلها فيصير
     لكل قيمة اسمٌ ودور، ويُضبط الشكل من مكان واحد. */
  --radius-xs: 6px;    /* شارات صغيرة، بلاطات أيقونات مدمجة */
  --radius-sm: 8px;    /* أزرار، حقول، عناصر الصف الواحد */
  --radius: 12px;      /* البطاقة القياسية — الافتراضي */
  --radius-lg: 16px;   /* بطاقات كبيرة ولوحات */
  --radius-xl: 20px;   /* أغلفة الأقسام والنوافذ */
  --radius-pill: 999px;/* الشرائح والحبوب */

  /* ===== نظام الحركة — ثلاث مدد ومنحنيان =====
     كان في الملف ٢٥ مدّة مختلفة وستة منحنيات، ثلاثةٌ منها المنحنى
     نفسه مكتوباً بمسافات مختلفة. الأدوار الآن صريحة. */
  --duration-fast: 150ms;  /* تغيّر لون، hover، ضغط */
  --duration-base: 250ms;  /* ظهور/اختفاء، انزلاق */
  --duration-slow: 400ms;  /* نوافذ، انتقالات صفحات */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* للدخول — يستقرّ بهدوء */
  --ease-in: cubic-bezier(.7, 0, .84, 0);       /* للخروج — يغادر سريعاً */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);  /* للتحوّلات داخل الشاشة */
  /* `--tr` يبقى بالاسم نفسه: مستعمَل في مئات المواضع، وتغيير اسمه
     يكسر كل شيء بلا مقابل. صار يشتقّ من النظام لا من رقم يدوي. */
  /* ★ رمز الانتقال المشترك — يسمّي خصائصه صراحةً.
     كان `var(--duration-base) var(--ease-standard)` بلا اسم خاصية،
     فتُفسَّر `transition: var(--tr)` على أنها `transition: all` —
     أي أن ٢١ موضعاً في المنصّة كانت تُحرّك **كل** خاصية بما فيها
     transform وbox-shadow. لم يظهر ذلك في قراءة الملف؛ كشفه قياس
     transitionProperty في المتصفّح. الآن اللون والحدّ والخلفية فقط. */
  --tr: color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);

  /* ===== الارتفاع (z-index) — طبقات مسمّاة =====
     كانت الأرقام عشوائية ومتصاعدة بلا سقف (99999 / 99998 / 9999 /
     1200 / 500 / 120 / 110 / 90 / 85 / 80 / 70 / 60) فيستحيل معرفة
     ما يعلو ما قبل تجربته. الترتيب أدناه يحفظ التسلسل القائم نفسه
     ويعطيه أسماء. الفجوة بين الطبقات ٢٠ تكفي لإقحام طبقة لاحقاً.

     ملاحظة: أرقام الـ z-index الصغيرة (1..6) داخل المكوّنات
     (‏.set-nav، ‎.acct-topbar، ‎.rp-dot…) سياقُ تكديسٍ محليّ داخل
     العنصر الأب، لا طبقةٌ عامة — فتُترك كما هي عمداً. */
  --z-base: 1;         /* طبقة المحتوى فوق الخلفية */
  --z-sticky: 100;     /* رؤوس لاصقة وأشرطة أدوات */
  --z-nav: 200;        /* الشريط الجانبي، شريط الأسفل، رابط التخطّي */
  --z-dropdown: 300;   /* القوائم المنسدلة */
  --z-scrim: 400;      /* الطبقة المعتمة خلف الألواح */
  --z-sheet: 480;      /* اللوح المنزلق من الأسفل */
  --z-page-overlay: 500;/* صفحة تغطّي الشاشة (الحساب/الإعدادات) */
  --z-modal: 520;      /* النوافذ — تعلو صفحة التغطية */
  --z-toast: 600;      /* الإشعارات — تعلو النوافذ */
  --z-tooltip: 700;    /* التلميحات — تعلو كل شيء */

  /* ===== الارتفاع البصري — مستويان لا أكثر ===== */
  --elev-1: 0 1px 2px rgba(0, 0, 0, .16), 0 4px 12px -6px rgba(0, 0, 0, .28);
  --elev-2: 0 8px 24px -12px rgba(0, 0, 0, .4), 0 24px 60px -32px rgba(0, 0, 0, .55);

  --sidebar-w: 290px;
  --bottomnav-h: 62px;

  /* ===== الخطوط — عائلة واحدة للمنصة كلها =====
     كان هنا خطّان: Inter للاتينية و IBM Plex Sans Arabic للعربية. النتيجة
     ملفّان يُنزَّلان، وفرقٌ في شكل الأرقام والحروف اللاتينية بين عنصر عربي
     وآخر إنجليزي في السطر نفسه. IBM Plex Sans Arabic عائلةٌ مصمَّمة
     للمحرفين معاً، فالتوحيد عليها أخفّ وأكثر اتساقاً.
     الملفات مستضافة محلياً في css/fonts.css — لا نطاق خارجي. */
  /* ★ 'CX Fallback' مباشرة بعد الخطّ الأساسي: عائلةٌ من خطوط النظام
     نفسها لكن بمقاييس مضبوطة على IBM Plex (انظر css/fonts.css)، فلا
     يتبدّل حجم النص ولا ارتفاع سطره لحظةَ وصول ملف الخطّ. */
  --font: 'IBM Plex Sans Arabic', 'CX Fallback', system-ui, -apple-system, 'Segoe UI', 'Rubik', 'Cairo', sans-serif;
  --font-display: var(--font);
  --font-en: var(--font);
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  /* ===== سلّم الطباعة — responsive عبر clamp() ===== */
  --text-display: clamp(2.5rem, 1.55rem + 3.6vw, 3.5rem);   /* 40 → 56 */
  --text-h1:      clamp(2rem, 1.45rem + 2.4vw, 3rem);        /* 32 → 48 */
  --text-h2:      clamp(1.625rem, 1.2rem + 1.85vw, 2.5rem);  /* 26 → 40 */
  --text-h3:      clamp(1.375rem, 1.1rem + 1.15vw, 2rem);    /* 22 → 32 */
  --text-h4:      clamp(1.25rem, 1.05rem + .8vw, 1.75rem);   /* 20 → 28 */
  --text-h5:      1.5rem;     /* 24 */
  --text-h6:      1.25rem;    /* 20 */
  --text-body-lg: 1.125rem;   /* 18 */
  --text-body:    1rem;       /* 16 */
  --text-sm:      .875rem;    /* 14 */
  --text-caption: .75rem;     /* 12 */

  /* ===== تتبّع الحروف (letter-spacing) لكل مستوى ===== */
  --tracking-display: -.032em;
  --tracking-h1: -.025em;
  --tracking-h2: -.021em;
  --tracking-h3: -.018em;
  --tracking-h4: -.015em;
  --tracking-h5: -.012em;
  --tracking-h6: -.01em;
  --tracking-body: -.011em;
  --tracking-tight: -.006em;
  --tracking-caps: .06em;

  /* ===== ارتفاع السطر (line-height) ===== */
  --leading-display: 1.04;
  --leading-heading: 1.16;
  --leading-snug: 1.32;
  --leading-body: 1.6;
  --leading-relaxed: 1.75;

  /* ===== مقياس المسافات الموحّد (4pt) — يُستخدم في كل مكان ===== */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px;

  /* ===== ارتفاعات المكوّنات الموحّدة ===== */
  --h-control: 44px;   /* المدخلات والأزرار الأساسية — 44 = أصغر هدف لمس */
  --h-control-sm: 36px;/* الأزرار الصغيرة والحقول المدمجة */
  --card-pad: 1.25rem;

  /* أصغر هدف لمس مقبول. يُطبَّق كاملاً على الأجهزة اللمسية، وتبقى
     الأهداف أصغر قليلاً على الفأرة حيث الدقّة أعلى والمساحة أثمن. */
  --touch-min: 44px;

  /* طول السطر المقروء: 60–75 حرفاً. `ch` في الخط العربي أعرض من
     اللاتيني فاختيرت 68 لتقع القراءة داخل النطاق في اللغتين. */
  --measure: 68ch;
}

html { scrollbar-gutter: stable; }
/* التمرير الناعم مشروط: `scroll-behavior` لا تُلغيها قاعدة
   `transition-duration` في كتلة تقليل الحركة، فتبقى الصفحة تنزلق
   لمن طلب إيقاف الحركة. الشرط الموجب هو ما يحترم الإعداد فعلاً. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html, body { height: 100%; }

/* ★ لا غِلَظ مصطنع أبداً — /no-fake-bold
   العائلتان (الأساسية والاحتياطية) تملكان وزناً غامقاً حقيقياً، فأي
   «تغليظ» يصنعه المتصفّح بنفسه تشويهٌ للحرف العربي لا تحسين له.
   كان يظهر خصوصاً في اللحظة الأولى بعد كل انتقال بين الصفحات. */
html { font-synthesis-weight: none; font-synthesis-small-caps: none; }

/* هبوط الروابط المرساة (#pricing وغيرها) أسفل الحواف الثابتة */
:target { scroll-margin-top: var(--space-6); }

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* حُذف `text-rendering: optimizeLegibility`: يُجبر المحرّك على حساب
     الكيرننغ والروابط الاختيارية لكل نص الصفحة قبل أول رسم — ثمنٌ
     ثقيل على صفحات كصفحة التقارير (٢٦٠ كيلوبايت). وهو مكرّر أصلاً:
     السطر التالي يُفعّل liga و calt صراحةً. أما تشكيل العربية فإلزاميّ
     في المحرّك ولا علاقة له بهذه الخاصية، فالشكل لا يتغيّر. */
  font-optical-sizing: auto;
  font-feature-settings: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'cv11' 1, 'ss01' 1, 'calt' 1, 'liga' 1;
}

/* ------------------------------------------------------------
   تبديل المظهر — تحوّل واحد متزامن
   ------------------------------------------------------------
   كانت الخلفية والقائمة الجانبية وشريط الأسفل تتلاشى ألوانها في
   .35s بينما تُبدَّل البطاقات والحدود فوراً، فيبدو نصف الواجهة
   فاتحاً ونصفها داكناً أثناء الانتقال. الآن: تُسكَت كل الانتقالات
   لحظة التبديل فيتغيّر كل شيء في اللقطة نفسها، ثم تُمزَج الصفحة
   كاملةً كصورة واحدة عبر View Transition. */
html.cvx-theme-flip,
html.cvx-theme-flip *,
html.cvx-theme-flip *::before,
html.cvx-theme-flip *::after {
  transition: none !important;
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
}
/* ------------------------------------------------------------
   انتقال المظهر — ذوبانٌ فوق طبقة معتمة، لا تلاشٍ متقابل.
   ------------------------------------------------------------
   كانت الطبقتان تتحرّكان معاً: القديمة 1→0 والجديدة 0→1. في منتصف
   المدّة تكون كلتاهما عند ٥٠٪ فوق بعضهما، فمجموع العتامة ٧٥٪ لا ١٠٠٪
   — ينتج إطارٌ مغسول يهبط فيه التباين، ويُرى انتقالُ الداكن إلى
   الفاتح كومضة رمادية في المنتصف.

   الآن: اللقطة الجديدة معتمة من الإطار الأوّل وتقبع تحت، والقديمة
   وحدها تتلاشى فوقها. مجموع العتامة يبقى ١٠٠٪ طوال الانتقال، فيبدو
   ذوباناً نظيفاً بلا هبوط ولا ومضة.
   ------------------------------------------------------------ */
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
}
/* الجديدة: بلا حركة — تظهر كاملةً وتنتظر انكشافها */
::view-transition-new(root) {
  animation: none;
  z-index: 0;
}
/* القديمة فوقها، تتلاشى وحدها فتكشف ما تحتها */
::view-transition-old(root) {
  animation: cvx-theme-out .26s cubic-bezier(.4, 0, .2, 1) both;
  z-index: 1;
}
@keyframes cvx-theme-out { to { opacity: 0 } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

::selection { background: var(--primary); color: var(--primary-ink); }

/* ============================================================
   نظام الطباعة — سلّم موحّد بمستوى Linear / Vercel / Inter / Stripe
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); font-weight: 700; line-height: var(--leading-heading); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--text-h2); font-weight: 700; line-height: var(--leading-heading); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug);    letter-spacing: var(--tracking-h3); }
h4 { font-size: var(--text-h4); font-weight: 600; line-height: var(--leading-snug);    letter-spacing: var(--tracking-h4); }
h5 { font-size: var(--text-h5); font-weight: 600; line-height: var(--leading-snug);    letter-spacing: var(--tracking-h5); }
h6 { font-size: var(--text-h6); font-weight: 600; line-height: var(--leading-snug);    letter-spacing: var(--tracking-h6); }
p  { line-height: var(--leading-body); }

/* فئات السلّم — للاستخدام الصريح عند الحاجة */
.t-display  { font-family: var(--font-display); font-size: var(--text-display); font-weight: 700; line-height: var(--leading-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.t-h1       { font-size: var(--text-h1); font-weight: 700; line-height: var(--leading-heading); letter-spacing: var(--tracking-h1); }
.t-h2       { font-size: var(--text-h2); font-weight: 700; line-height: var(--leading-heading); letter-spacing: var(--tracking-h2); }
.t-h3       { font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-h3); }
.t-body-lg  { font-size: var(--text-body-lg); font-weight: 500; line-height: var(--leading-relaxed); letter-spacing: var(--tracking-body); }
.t-body     { font-size: var(--text-body); font-weight: 400; line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.t-small    { font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-snug); }
.t-caption  { font-size: var(--text-caption); font-weight: 400; line-height: 1.4; color: var(--muted); }
.t-label    { font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-tight); }
.t-eyebrow  { font-size: var(--text-caption); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--muted); }

/* الأرقام المجدولة للإحصاءات ولوحات المعلومات */
.tabular, .price-card .pc-price, .rb-cell .n, .rc-score, .stat-num, .quota-pill {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv11' 1;
}

/* الكود بخط أحادي واضح */
code, pre, kbd, samp { font-family: var(--font-mono); font-feature-settings: normal; }

/* خلفية هادئة — شبكة هندسية خفيفة بلا فيديو */
/* خلفية نظيفة بسيطة (بنمط ChatGPT/Notion): لون صلب يتبع الثيم — بلا شبكة/تدرّجات/أنماط */
.bg-scene {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg);
  /* بلا انتقال: هذه الطبقة تغطّي الشاشة كلها، وكان تلاشيها في .35s
     يجعلها آخر ما يتبدّل فيظهر نصف الواجهة بلون قديم. والأخطر أن
     مقاطعة الانتقال أثناء تبديل المظهر كانت تُجمّده على اللون السابق
     فتبقى الخلفية داكنة في الوضع الفاتح حتى إعادة التحميل. */
}

/* ============================================================
   الهيكل — الهيدر من جهة اليمين
   ============================================================ */
.layout { position: relative; z-index: 1; display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: fixed; top: 0; bottom: 0; right: 0;
  display: flex; flex-direction: column;
  background: var(--chrome-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-left: 1px solid var(--border);
  padding: 1.9rem 1rem 1.1rem;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* بلا انتقال لوني: يبدّله المظهر دفعة واحدة مع بقية الواجهة.
     يبقى انتقال العرض/الحشو لأنه حركة الطيّ لا حركة الثيم. */
  transition: width .26s cubic-bezier(.22, .7, .28, 1), padding .26s cubic-bezier(.22, .7, .28, 1);
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }

.sb-logo {
  display: flex; align-items: baseline; justify-content: center; gap: .55rem;
  padding: .5rem .6rem 1.5rem;
  text-decoration: none;
}
.sb-logo .logo-text {
  font-family: var(--font-en);
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--text);
}
.sb-logo .xx { color: var(--primary-bright); }
.sb-logo .logo-sub { font-size: .56rem; color: var(--muted); font-weight: 700; letter-spacing: .1em; }

.sb-nav { display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.sb-link {
  display: flex; align-items: center; gap: .8rem;
  padding: .62rem .8rem;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: .9375rem; font-weight: 500;
  letter-spacing: var(--tracking-tight);
  border: 1px solid transparent;
  transition: var(--tr);
}
.sb-link i.fa-solid { width: 22px; text-align: center; font-size: 1.02rem; }

/* ============================================================
   أيقونات CivioX — SVG خطّية على هوية العلامة
   الحدّ 2px ثابت بصرياً عبر vector-effect، واللون يتبع النص،
   وخطوط الإنشاء (cx-i-dim) أرفع وأبهت كما في الشيت المرجعي.
   ============================================================ */
.cx-i {
  width: 22px; height: 22px; flex-shrink: 0; display: block;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
}
.cx-i .cx-i-dim { stroke-width: 1; opacity: .38; }
.cx-i .cx-i-node { stroke-width: 1.4; fill: var(--bg); }
.cx-i-lg { width: 28px; height: 28px; }

/* أيقونات المنصّات — أشكال مصمتة تحلّ محلّ خطّ fa-brands (115KB).
   بلا width/height في الوسم: المقاس من CSS وحده فتتبع كل سياق. */
.cx-b {
  width: 1em; height: 1em; flex-shrink: 0; display: inline-block;
  vertical-align: -.125em;
  fill: currentColor; stroke: none;
}

/* علامة قسم الذكاء — نص "AI" بدل الأيقونة */
.ai-mark { font-family: var(--font-en); font-weight: 700; letter-spacing: .03em; line-height: 1; }
.sb-link .ai-mark { width: 22px; text-align: center; font-size: .8rem; flex-shrink: 0; }
.bn-item .ai-mark { font-size: .88rem; }
.more-cell .ai-mark { font-size: .95rem; color: var(--primary); }
.h-icon .ai-mark { font-size: .8rem; }
.sb-link:hover { color: var(--text); background: var(--card-h); }
.sb-link.active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 20%, transparent);
  font-weight: 600;
}
.sb-link .lock-ic { margin-right: auto; font-size: .6rem; opacity: .75; }
.sb-link.active .lock-ic, .sb-link.unlocked .lock-ic { color: var(--success); }

.sb-divider { height: 1px; background: var(--border); margin: 1rem .35rem .65rem; opacity: .7; }

/* صف المظهر */
.sb-theme {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .75rem; margin-bottom: .5rem;
  border-radius: 11px;
  font-size: .74rem; font-weight: 800; color: var(--muted);
}

/* ★ عنصر مقسّم مضغوط — أربعة مظاهر
   المؤشّر طبقة واحدة تنزلق بين الخيارات بدل إضاءة كل زر على حدة:
   الحركة تخبر العين أين انتقل الاختيار، وهي أرخص من إعادة طلاء أربعة
   أزرار. العرض ثابت لكل خيار فيكفي إزاحة المؤشّر بمقدار الفهرس. */
.theme-seg {
  position: relative; isolation: isolate;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; padding: 3px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
}
.theme-seg::before {
  content: ""; position: absolute; z-index: -1;
  inset: 3px auto 3px 3px;
  width: var(--seg-w, 36px);
  transform: translateX(calc(var(--seg-i, 0) * var(--seg-w, 36px) * -1));
  border-radius: 9px;
  background: var(--primary-dim);
  box-shadow: inset 0 0 0 1px var(--border-h);
  transition: transform .22s cubic-bezier(.32, .72, .3, 1);
}
html[dir="ltr"] .theme-seg::before { inset: 3px 3px 3px auto; transform: translateX(calc(var(--seg-i, 0) * var(--seg-w, 36px))); }
.theme-seg button {
  width: var(--seg-w, 36px); height: 32px; border-radius: 9px;
  border: none; background: transparent;
  color: var(--muted); cursor: pointer; font-size: .72rem;
  display: grid; place-items: center;
  transition: color .12s ease;
}
.theme-seg button:hover { color: var(--text); }
/* لا تصغير عند الضغط — التغذية الراجعة من تبدّل اللون */
.theme-seg button.active { color: var(--primary); }
/* حلقة تركيز ظاهرة — التنقّل بلوحة المفاتيح مدعوم فعلياً هنا */
.theme-seg button:focus-visible,
.app-opt:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
/* على الأجهزة اللمسية يكبر الهدف إلى 44px. الفأرة أدقّ فتبقى مضغوطة. */
@media (pointer: coarse) {
  .theme-seg { --seg-w: var(--touch-min); }
  .theme-seg button { width: var(--touch-min); height: var(--touch-min); }
}
@media (prefers-reduced-motion: reduce) { .theme-seg::before { transition: none; } }
:root[data-perf="low"] .theme-seg::before { transition: none; }

/* ★ بطاقات اختيار المظهر — الإعدادات ونافذة الموبايل
   معاينة مصغّرة لكل مظهر بدل أيقونة مجرّدة: الاسم وحده لا يقول كيف
   ستبدو الواجهة، والمعاينة تفعل ذلك في نصف سطر. */
.appearance-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
}
.app-opt {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .9rem .5rem .8rem;
  min-height: var(--touch-min, 44px);
  border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  font-family: inherit; text-align: center;
  transition: border-color .12s ease, background .12s ease;
}
.app-opt i { font-size: 1.05rem; transition: color .12s ease; }
.app-opt .ao-name { font-size: .76rem; font-weight: 800; color: var(--text); }
.app-opt .ao-desc { font-size: .6rem; font-weight: 700; color: var(--muted); line-height: 1.5; }
.app-opt:hover { border-color: var(--border-h); background: var(--card-h); }

.app-opt.active { border-color: var(--primary); background: var(--primary-dim); }
.app-opt.active i, .app-opt.active .ao-name { color: var(--primary); }
/* علامة الاختيار — تأكيد بصري لا يعتمد على اللون وحده (وصولية) */
.app-opt.active::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; inset-block-start: 6px; inset-inline-end: 8px;
  font-size: .6rem; color: var(--primary);
}
@media (prefers-reduced-motion: reduce) { .app-opt { transition: none; } }
@media (max-width: 560px) { .appearance-grid { grid-template-columns: 1fr 1fr; } }

.sb-settings {
  display: flex; align-items: center; gap: .65rem;
  padding: .62rem .7rem;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text); font-size: .84rem; font-weight: 700;
  cursor: pointer; width: 100%;
  font-family: inherit;
  transition: var(--tr);
}
.sb-settings:hover { border-color: var(--border-h); background: var(--card-h); }
.avatar-mini {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary);
  display: grid; place-items: center;
  color: var(--primary-ink); font-size: .78rem; font-weight: 800;
  overflow: hidden; flex-shrink: 0;
}
.avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.sb-settings .set-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; overflow: hidden; }
.sb-settings .set-meta small { font-size: .6rem; color: var(--muted); font-weight: 600; max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Mini Sidebar — طيّ الشريط الجانبي (أيقونات فقط + Tooltip)
   عنصر واحد مشترك لكل الصفحات. الحالة على <html.sb-collapsed>.
   لا يغيّر أي شيء في الوضع الموسّع (الافتراضي).
   ============================================================ */
:root { --sidebar-w-collapsed: 74px; }

/* الوضع المطويّ يبدّل العرض/الهامش بقيمة صريحة (لا نغيّر --sidebar-w نفسه،
   حتى يعمل انتقال width/margin بثبات في كل المتصفحات).
   محصور في الشاشات التي يظهر فيها الشريط الجانبي فقط (فوق 900px) — على
   الموبايل يبقى الشريط السفلي كما هو دون أي إزاحة. */
@media (min-width: 901px) {
  html.sb-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
  html.sb-collapsed .main-area { margin-right: var(--sidebar-w-collapsed); }
  html[dir="ltr"].sb-collapsed .main-area { margin-right: 0; margin-left: var(--sidebar-w-collapsed); }
}

/* زر الطيّ داخل الشريط (الوضع الموسّع) */
.sb-logo .logo-mini { display: none; font-family: var(--font-en); font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.sb-logo .logo-mini .xx { color: var(--primary-bright); }
.sb-collapse {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .58rem .8rem; margin-top: .3rem;
  border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--muted);
  font-family: inherit; font-size: .8rem; font-weight: 700;
  cursor: pointer; transition: var(--tr);
}
.sb-collapse:hover { color: var(--text); background: var(--card-h); }
.sb-collapse i { width: 22px; text-align: center; font-size: .92rem; transition: transform .26s cubic-bezier(.22, .7, .28, 1); }

/* ===== الوضع المطويّ ===== */
html.sb-collapsed .sidebar { overflow: visible; padding-inline: .55rem; }

/* الشعار مصغّر ومتناسق */
html.sb-collapsed .sb-logo { justify-content: center; gap: 0; padding-inline: 0; }
html.sb-collapsed .sb-logo .logo-text,
html.sb-collapsed .sb-logo .logo-sub { display: none; }
html.sb-collapsed .sb-logo .logo-mini { display: inline-block; }

/* الروابط — أيقونة فقط في المنتصف، مع إبقاء العنصر النشط واضحاً */
html.sb-collapsed .sb-link { justify-content: center; gap: 0; padding-inline: 0; }
html.sb-collapsed .sb-link > span:not(.ai-mark),
html.sb-collapsed .sb-link .lock-ic { display: none; }
html.sb-collapsed .sb-link i.fa-solid,
html.sb-collapsed .sb-link .ai-mark,
html.sb-collapsed .sb-link .cx-i { margin-inline: auto; }

/* زر الطيّ + الإعدادات في الوضع المطويّ */
html.sb-collapsed .sb-collapse { justify-content: center; gap: 0; padding-inline: 0; }
html.sb-collapsed .sb-collapse .sbc-label { display: none; }
html.sb-collapsed .sb-collapse i { transform: scaleX(-1); }
html.sb-collapsed .sb-theme { display: none; }
html.sb-collapsed .sb-settings { justify-content: center; gap: 0; padding-inline: 0; }
html.sb-collapsed .sb-settings .set-meta,
html.sb-collapsed .sb-settings > i.fa-gear { display: none; }

/* Tooltip — اسم الصفحة عند المرور، في الوضع المطويّ فقط */
html.sb-collapsed .sb-link,
html.sb-collapsed .sb-collapse,
html.sb-collapsed .sb-settings { position: relative; }
html.sb-collapsed [data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: 50%; inset-inline-end: 100%;
  margin-inline-end: 12px;
  /* translateY(-50%) تمركز رأسي لا حركة — يبقى. الجزء المتحرّك كان
     scale(.96)→scale(1) وقد أُسقط. */
  transform: translateY(-50%);
  background: var(--card); color: var(--text);
  border: 1px solid var(--border-h);
  padding: .34rem .62rem; border-radius: 8px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .12s linear;
  z-index: 80;
}
html.sb-collapsed [data-tip]:hover::after,
html.sb-collapsed [data-tip]:focus-visible::after { opacity: 1; }

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  html, .sidebar, .sb-collapse i, html.sb-collapsed [data-tip]::after { transition: none; }
}

.main-area {
  flex: 1;
  margin-right: var(--sidebar-w);
  padding: 2rem clamp(1rem, 3.5vw, 3rem) 4rem;
  min-width: 0;
  transition: margin .26s cubic-bezier(.22, .7, .28, 1);
}

/* ------------------------------------------------------------
   انتقال الصفحات — تلاشٍ بحت، بلا انزلاق.
   ------------------------------------------------------------
   كان المحتوى يدخل من translateY(8px) ويخرج إلى ‎-6px. الانزلاق عند
   كل تنقّل يجعل الصفحة تبدو «تتحرّك تحت اليد»، ولا يضيف معلومة:
   المستخدم يعرف أنه انتقل لأن المحتوى تبدّل. أُبقي التلاشي وحده
   ليمنع الوميض الأبيض بين صفحتين (وهو سبب وجوده الأصلي).

   ★ حُذف `pageIn ... both` تحديداً: صنف الملء `both` كان يترك
   `.main-area` على opacity:0 في تبويب مخفيّ (لا تعمل حركات CSS فيه)،
   فتبدو الصفحة فارغة. الآن لا حركة تُملأ أصلاً.
   ------------------------------------------------------------ */
html.page-leave .main-area {
  animation: none;
  opacity: 0;
  transition: opacity .13s ease;
}

.main-area.spa-leaving {
  opacity: 0;
  transition: opacity .12s ease;
  will-change: opacity;
}

.spa-sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
@media (max-width: 900px) { .spa-sk-grid { grid-template-columns: 1fr 1fr; } }

/* واجهة خطأ التنقّل — داخل منطقة المحتوى فقط */
.spa-error {
  max-width: 460px; margin: clamp(2rem, 10vh, 6rem) auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.spa-error .se-ic {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--gold); font-size: 1.5rem; margin-bottom: .4rem;
}
.spa-error h2 { font-size: var(--text-h4); font-weight: 700; }
.spa-error p { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.spa-error .se-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }

/* ============================================================
   حالة الخطأ الموحّدة (CVX.ErrorState)
   ------------------------------------------------------------
   مكوّن واحد يُستعمل في كل مكان: منطقة المحتوى بعد فشل تنقّل،
   داخل بطاقة في الإعدادات، أو داخل قسم صغير من صفحة.
   ★ الحالة لا تُميَّز باللون وحده: لكل نوع أيقونته وعنوانه، فمن لا
     يميّز الألوان يقرأ الحالة نفسها.
   ============================================================ */
.cx-err {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .45rem; padding: clamp(1.5rem, 4vw, 2.4rem) 1.2rem; margin: 0 auto;
  max-width: 30rem;
}
.cx-err.compact { padding: 1.2rem .8rem; gap: .35rem; }
.cx-err-ic {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.45rem; margin-bottom: .45rem;
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--gold);
}
.cx-err.compact .cx-err-ic { width: 46px; height: 46px; font-size: 1.1rem; }
.cx-err[data-err-kind="offline"] .cx-err-ic,
.cx-err[data-err-kind="network"] .cx-err-ic,
.cx-err[data-err-kind="server"] .cx-err-ic {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
  color: var(--danger);
}
.cx-err[data-err-kind="unauthorized"] .cx-err-ic,
.cx-err[data-err-kind="notfound"] .cx-err-ic {
  background: var(--primary-dim);
  border-color: var(--border-h);
  color: var(--primary);
}
.cx-err h3 { font-size: var(--text-h5, 1.05rem); font-weight: 700; letter-spacing: -.01em; }
.cx-err p { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin: 0; }
.cx-err-acts { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: 1.05rem; }
.cx-err-acts .btn { min-width: 8.5rem; justify-content: center; }

/* التفاصيل التقنية مطويّة: للدعم لا للمستخدم */
.cx-err-detail { margin-top: 1.1rem; max-width: 34rem; text-align: start; }
.cx-err-detail summary {
  cursor: pointer; font-size: .72rem; color: var(--muted);
  padding: .35rem .1rem; user-select: none;
}
.cx-err-detail summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.cx-err-detail code {
  display: block; margin-top: .4rem; padding: .6rem .7rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--muted);
  font-size: .7rem; direction: ltr; text-align: left; word-break: break-word;
  white-space: pre-wrap;
}
@media (max-width: 480px) {
  .cx-err-acts { width: 100%; }
  .cx-err-acts .btn { flex: 1 1 100%; }
}

/* ============================================================
   الشريط السفلي — الموبايل كتطبيق
   ============================================================ */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--chrome-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  z-index: 70;
  /* بلا انتقال لوني — يتبدّل مع الواجهة كلها في لقطة واحدة */
}
.bottom-nav .bn-inner { display: flex; height: var(--bottomnav-h); }
.bn-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .16rem;
  color: var(--muted); text-decoration: none;
  font-size: .57rem; font-weight: 700;
  background: none; border: none; font-family: inherit; cursor: pointer;
  transition: color .12s;
}
.bn-item i { font-size: 1.02rem; }
.bn-item .cx-i { width: 21px; height: 21px; }
.bn-item.active, .bn-item:hover { color: var(--primary); }

.more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  transform: translateY(105%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  background: var(--panel);
  border-top: 1px solid var(--border-h);
  border-radius: 20px 20px 0 0;
  z-index: 90;
  padding: .9rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
  max-height: 74vh; overflow-y: auto;
  overscroll-behavior: contain;
}
.more-sheet.open { transform: translateY(0); }
.more-sheet h3 {
  font-size: .92rem; font-weight: 800; margin-bottom: .85rem;
  display: flex; align-items: center; gap: .5rem; color: var(--text);
}
.more-sheet h3 i { color: var(--primary); }
.more-sheet .sheet-grab {
  width: 40px; height: 4px; background: var(--border);
  border-radius: 4px; margin: 0 auto .75rem;
}
.more-sec-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: .15rem .1rem .5rem; display: flex; align-items: center; gap: .4rem;
}
.more-sec-label + .more-grid { margin-bottom: .9rem; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.more-cell {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .85rem .4rem;
  border-radius: 13px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  font-size: .66rem; font-weight: 700; text-align: center;
  transition: var(--tr); cursor: pointer; font-family: inherit;
}
.more-cell i { font-size: 1.1rem; color: var(--primary); }
.more-cell .cx-i { width: 24px; height: 24px; color: var(--primary); }
.more-cell:hover { border-color: var(--border-h); background: var(--card-h); }
/* الصفحة الحالية داخل ورقة «المزيد» — كانت الورقة الوحيدة بلا أي
   إشارة إلى موضع المستخدم، فيفتحها ولا يعرف أين هو. */
.more-cell.active {
  border-color: var(--border-h);
  background: var(--primary-dim);
  color: var(--primary);
}
.more-cell .lock-ic { font-size: .52rem; color: var(--muted); }
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(5, 8, 14, .55);
  opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 85;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

/* ============================================================
   قفل السكرول + المودالات
   ============================================================ */
html.cvx-modal-open body {
  position: fixed;
  left: 0; right: 0; width: 100%;
  overflow: hidden;
}

.cvx-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(5, 8, 14, .66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.6rem, 2.5vw, 2rem);
  opacity: 0; transition: opacity .12s;
}
.cvx-overlay.show { opacity: 1; }

.cvx-modal {
  width: 100%; max-width: 540px;
  max-height: min(88vh, 88dvh);
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateY(14px) scale(.985);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);   /* بلا تجاوز/ارتداد */
}
.cvx-overlay.show .cvx-modal { transform: translateY(0) scale(1); }
.cvx-modal.wide { max-width: 720px; }

.cvx-m-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .7rem;
  padding: .95rem 1.2rem;
  border-bottom: 1px solid var(--border);
}
.cvx-m-head h3 { font-size: var(--text-body-lg); font-weight: 600; letter-spacing: var(--tracking-tight); flex: 1; display: flex; align-items: center; gap: .55rem; }
.cvx-m-head h3 i { color: var(--primary); }
.cvx-m-close {
  width: 33px; height: 33px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font-size: .82rem;
  display: grid; place-items: center;
  transition: var(--tr); flex-shrink: 0;
}
.cvx-m-close:hover { color: var(--danger); border-color: var(--danger); }

.cvx-m-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.2rem;
}
.cvx-m-body::-webkit-scrollbar { width: 6px; }
.cvx-m-body::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; }

/* ============================================================
   نافذة «تدفّق» — تمرير واحد طبيعي.

   المشكلة التي تُصلحها: النافذة الافتراضية `position:fixed` وارتفاعها
   مسقوف (max-height:88vh)، والمحتوى وحده داخل `.cvx-m-body` الذي يحمل
   `overflow-y:auto`. فالرأس يبقى مسمّراً بينما الجسم يتحرّك — طبقتا
   تمرير غير متناسقتين، وهو بالضبط ما يظهر في شاشة «أكمل حسابك» بعد
   العودة من جوجل (نموذج طويل: اسم + رمز + خمسة شروط + تأكيد + زرّان).

   الحلّ: في هذا النمط تصير **الطبقة الخارجية** هي التي تُمرَّر، ويُلغى
   السقف والتمرير الداخلي. الرأس يتحرّك مع المحتوى كما لو كان جزءاً من
   الصفحة — لا شيء مسمّر إلا بقصد.
   ============================================================ */
.cvx-overlay.flow {
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(.75rem, 4vh, 2.5rem) clamp(.6rem, 2.5vw, 2rem);
}
.cvx-overlay.flow .cvx-modal {
  max-height: none;          /* لا سقف ⇒ لا حاجة لتمرير داخلي */
  margin: auto;
  overflow: visible;
}
/* عرض قراءة مريح فوق الجوال: نقطة الانقطاع العامة تجعل النافذة
   بعرض 100% حتى 900px، فيصير حقل النموذج ~667px على اللوحي — ممتدّ
   لا متوازن. النموذج عمود واحد، فيكفيه عرض بطاقة. */
@media (min-width: 481px) {
  .cvx-overlay.flow .cvx-modal { max-width: 560px; }
}
.cvx-overlay.flow .cvx-m-body {
  flex: 0 0 auto;
  overflow: visible;         /* ★ إلغاء الحاوية الثانية */
  overscroll-behavior: auto;
}
.cvx-overlay.flow .cvx-m-head {
  position: static;          /* صراحةً: الرأس ليس لاصقاً */
}
@media (max-width: 480px) {
  /* على الجوال يبقى النمط تدفّقاً كاملاً لا ورقة سفلية عالقة */
  .cvx-overlay.flow { align-items: flex-start; padding: 0; }
  .cvx-overlay.flow .cvx-modal {
    max-height: none;
    border-radius: 0;
    border: 0;
    min-height: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cvx-overlay.flow .cvx-modal { transition: none; transform: none; }
}

/* ── «أكمل حسابك»: هرم بصري أوضح وأهداف لمس مريحة ───────────── */

/* ★ تحييد تخطيط شاشة البوّابة داخل النافذة.
   `.cvx-gate` مصمَّمة كشاشة كاملة: `display:flex` صفّية تُوسِّط بطاقة.
   وحين يُعاد استعمال الصنف داخل نافذة، يصير النموذج عنصراً مرناً في
   صفّ فينكمش إلى عرض محتواه — قِيس فعلياً: 87px من أصل 320px، أي
   حقول شبه معدومة العرض على الجوال. إعادته إلى block تجعل النموذج
   يملأ العرض المتاح كما هو مقصود. */
.cvx-gate.cvx-cp { display: block; width: 100%; max-width: 100%; }
.cvx-cp form { width: 100%; }
.cvx-cp .pw-wrap { width: 100%; }

.cvx-cp .cp-lead {
  font-size: .8rem; line-height: 1.9; color: var(--muted);
  margin: 0 0 1.15rem; padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--border);
}
.cvx-cp .field { margin-bottom: 1.15rem; }
.cvx-cp .field > label {
  display: block; font-size: .82rem; font-weight: 600;
  margin-bottom: .45rem; letter-spacing: var(--tracking-tight);
}
.cvx-cp input[type="text"],
.cvx-cp input[type="password"] { min-height: 48px; width: 100%; }
.cvx-cp .hint { font-size: .72rem; line-height: 1.75; color: var(--muted); margin-top: .4rem; }

/* شروط الرمز: شبكة مضغوطة بدل قائمة طويلة تدفع الزرّ خارج الشاشة */
.cvx-cp .pw-reqs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem .7rem; margin: .6rem 0 0; padding: 0; list-style: none;
}
.cvx-cp .pw-reqs li {
  font-size: .71rem; line-height: 1.6; color: var(--muted);
  display: flex; align-items: center; gap: .4rem; min-width: 0;
}
.cvx-cp .pw-reqs li i { font-size: .42rem; flex: none; }
@media (max-width: 360px) { .cvx-cp .pw-reqs { grid-template-columns: 1fr; } }

/* «توليد رمز قوي» عنصر ثانوي — لا ينافس زرّ الحفظ بصرياً */
.cvx-cp .pw-gen {
  margin-top: .7rem; min-height: 40px;
  font-size: .74rem; font-weight: 600;
  background: transparent; border: 1px dashed var(--border);
  color: var(--muted); width: auto;
}
.cvx-cp .pw-gen:hover { color: var(--primary); border-color: var(--primary); border-style: solid; }

/* زرّ الحفظ هو الـCTA الأساسي */
.cvx-cp .cp-save { min-height: 52px; font-size: .92rem; font-weight: 700; margin-top: .3rem; }
.cvx-cp .cp-save:disabled { opacity: .6; cursor: not-allowed; }

/* حالة التطابق الفورية لتأكيد الرمز */
.cvx-cp .cp-match { font-size: .72rem; margin-top: .4rem; min-height: 1.05rem; font-weight: 600; }
.cvx-cp .cp-match.ok { color: var(--success, #16a34a); }
.cvx-cp .cp-match.no { color: var(--danger, #dc2626); }

/* ★ هدف لمس 44px لزرّ إظهار الرمز داخل هذه الشاشة أيضاً */
.cvx-cp .pw-wrap { position: relative; }
.cvx-cp .pw-eye::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 12px;
}

/* ── الشريط العلوي: هدف لمس مقبول لزرّ الإخفاء ─────────────── */
.cvx-lockbar .lb-x::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 12px;
}
.cvx-lockbar .lb-cta { min-height: 36px; }

.cvx-m-foot {
  flex: 0 0 auto;
  display: flex; gap: .6rem;
  padding: .85rem 1.2rem;
  border-top: 1px solid var(--border);
}

/* ============================================================
   عناصر عامة
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--h-control);
  padding: 0 1.35rem;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: var(--text-body); font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: var(--tr);
}
/* تفاعل الضغط الدقيق — الزر "ينضغط" فعلياً */
/* الأزرار لا تتقلّص عند الضغط — الحالة تُقرأ من اللون */
.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 4px 14px -6px var(--primary);
}
.btn-primary:hover { background: var(--primary-2); }
.btn-ghost { background: var(--card); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--border-h); color: var(--primary); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn-sm { min-height: var(--h-control-sm); padding: 0 1rem; font-size: var(--text-sm); font-weight: 600; }
.btn-block { width: 100%; }

/* زر جوجل */
.btn-google {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border);
  font-weight: 800;
}
.btn-google:hover { border-color: var(--border-h); }
.btn-google .g-mark {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-block;
}

.field { margin-bottom: .9rem; }
.field label { display: block; font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-tight); color: var(--muted); margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--h-control);
  padding: .6rem .9rem;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font); font-size: var(--text-body); font-weight: 400;
  letter-spacing: var(--tracking-body);
  outline: none;
  transition: border-color .12s;
}
.field textarea { min-height: 90px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--border-h);
  box-shadow: 0 0 0 3px var(--primary-dim);
}
.field .f-hint { font-size: .65rem; color: var(--muted); margin-top: .3rem; }
.field-err { font-size: .7rem; color: var(--danger); margin-top: .3rem; min-height: .9rem; }

/* حقل مع أزرار داخلية (عين / نسخ / توليد) */
.input-row { display: flex; gap: .5rem; align-items: stretch; }
.input-row input { flex: 1; }
.icon-btn {
  width: var(--h-control); min-height: var(--h-control);
  border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--card); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font-size: .82rem;
  display: grid; place-items: center;
  transition: var(--tr);
}
.icon-btn:hover { color: var(--primary); border-color: var(--border-h); }

.page-head { margin-bottom: 1.7rem; }
.page-head h1 { font-size: var(--text-h2); font-weight: 700; line-height: var(--leading-heading); letter-spacing: var(--tracking-h2); }
.page-head p { color: var(--muted); font-size: var(--text-body-lg); font-weight: 400; margin-top: .55rem; max-width: 640px; line-height: var(--leading-relaxed); letter-spacing: var(--tracking-body); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  transition: var(--tr);
}
.card:hover { border-color: var(--border-h); background: var(--card-h); }

.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6rem; font-weight: 800;
  padding: .2rem .58rem; border-radius: 999px;
  border: 1px solid transparent;
}
.tag-gold  { color: var(--gold);    background: color-mix(in srgb, var(--gold) 10%, transparent);    border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.tag-cyan  { color: var(--primary); background: var(--primary-dim); border-color: var(--border-h); }
.tag-green { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); border-color: color-mix(in srgb, var(--success) 32%, transparent); }
.tag-red   { color: var(--danger);  background: color-mix(in srgb, var(--danger) 8%, transparent);   border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

#cvx-toasts {
  position: fixed; bottom: calc(var(--bottomnav-h) + 14px); right: 14px; z-index: 500;
  display: flex; flex-direction: column; gap: .5rem; max-width: 320px;
}
@media (min-width: 901px) { #cvx-toasts { bottom: 18px; } }
.cvx-toast {
  padding: .72rem 1rem; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border-h);
  font-size: .77rem; font-weight: 700; color: var(--text);
  box-shadow: var(--shadow);
  animation: toastIn .3s ease;
  display: flex; align-items: center; gap: .55rem;
}
.cvx-toast.err { border-color: var(--danger); color: var(--danger); }
.cvx-toast.ok { border-color: var(--success); color: var(--success); }
@keyframes toastIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   بوابة القفل
   ============================================================ */
.gate-wall {
  position: relative; z-index: 2;
  min-height: 60vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 1rem;
  padding: 2rem 1rem;
}
.gate-wall .gate-ic {
  width: 70px; height: 70px; border-radius: 20px;
  display: grid; place-items: center;
  background: var(--primary-dim);
  border: 1px solid var(--border-h);
  color: var(--primary); font-size: 1.55rem;
}
.gate-wall h2 { font-size: 1.2rem; font-weight: 900; }
.gate-wall p { color: var(--muted); font-size: .84rem; max-width: 430px; line-height: 1.9; }
.gate-wall .gate-actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; }

.sub-note {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1.05rem; border-radius: 13px;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  color: var(--gold); font-size: .77rem; font-weight: 700;
  margin-bottom: 1.2rem;
}
.sub-note a { color: var(--gold); }
/* زرّ «اشترك الآن» داخل رسالة الترقية — يُدفع إلى طرف السطر ولا ينكمش */
.sub-note .btn { margin-inline-start: auto; flex: 0 0 auto; }
@media (max-width: 560px) { .sub-note { flex-wrap: wrap; } .sub-note .btn { margin-inline-start: 0; } }

/* ============================================================
   صفحة الإعدادات الكاملة (تملأ الشاشة)
   ============================================================ */
.acct-page {
  position: fixed; inset: 0; z-index: 110;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;                 /* التمرير داخل عمود المحتوى — لا في الصفحة */
  opacity: 0;
  transition: opacity .12s ease;
}
.acct-page.show { opacity: 1; }

/* ---------- الشريط العلوي: رجوع · العنوان · بحث ---------- */
.acct-topbar {
  flex-shrink: 0; z-index: 6;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) clamp(var(--space-4), 3vw, var(--space-6));
  background: var(--chrome-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.acct-topbar h2 {
  font-size: var(--text-body-lg); font-weight: 600;
  letter-spacing: var(--tracking-tight);
  display: flex; align-items: center; gap: var(--space-2);
  white-space: nowrap;
}
.acct-topbar h2 i { color: var(--primary); font-size: var(--text-body); }
.acct-topbar .tb-spacer { flex: 1; }

/* زر إظهار القائمة (موبايل فقط) */
.set-burger { display: none; }

/* ============================================================
   ورشة الإعدادات — شريط جانبي ثابت وقابل للطي + محتوى
   ============================================================ */
.set-shell {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  transition: grid-template-columns .24s cubic-bezier(.22, .7, .28, 1);
}
.set-shell.collapsed { grid-template-columns: 68px minmax(0, 1fr); }

.set-nav {
  min-width: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  border-inline-end: 1px solid var(--border);   /* حدّ واحد فقط — بلا بطاقة ولا ظل */
}
.set-nav::-webkit-scrollbar { width: 6px; }
.set-nav::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; }

.set-nav button {
  position: relative;
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--h-control);
  padding: 0 var(--space-3);
  border: none; border-radius: var(--radius-sm);
  background: none; color: var(--muted);
  font-family: inherit; font-size: var(--text-sm); font-weight: 500;
  letter-spacing: var(--tracking-tight);
  cursor: pointer; text-align: start; white-space: nowrap;
  transition: color var(--duration-fast), background-color var(--duration-fast);
}
.set-nav button i { width: 20px; text-align: center; font-size: var(--text-sm); flex-shrink: 0; }
.set-nav button span { overflow: hidden; text-overflow: ellipsis; }
.set-nav button:hover { color: var(--text); background: var(--card); }
.set-nav button.active { color: var(--primary); background: var(--primary-dim); font-weight: 600; }
/* مؤشر نشط بسيط — شريط رفيع لا حدود ولا ظل */
.set-nav button.active::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--primary);
}
html[dir="ltr"] .set-nav button.active::before { border-radius: 3px 0 0 3px; }

/* زر الطي */
.set-collapse {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--h-control-sm); margin-top: auto;
  padding: 0 var(--space-3);
  border: none; border-radius: var(--radius-sm);
  background: none; color: var(--muted);
  font-family: inherit; font-size: var(--text-caption); font-weight: 500;
  cursor: pointer; transition: var(--tr);
}
.set-collapse:hover { color: var(--primary); background: var(--card); }
.set-collapse i { width: 20px; text-align: center; transition: transform .24s ease; }
html[dir="rtl"] .set-shell.collapsed .set-collapse i { transform: rotate(180deg); }
html[dir="ltr"] .set-shell:not(.collapsed) .set-collapse i { transform: rotate(180deg); }

/* في الوضع المطوي: الأيقونات فقط */
.set-shell.collapsed .set-nav button span,
.set-shell.collapsed .set-collapse span { display: none; }
.set-shell.collapsed .set-nav button,
.set-shell.collapsed .set-collapse { justify-content: center; padding: 0; }

/* ---------- عمود المحتوى ---------- */
.set-body {
  min-width: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-5) clamp(var(--space-4), 3vw, var(--space-6)) var(--space-9);
}
.set-body::-webkit-scrollbar { width: 8px; }
.set-body::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; }
.set-inner { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }


/* فتات الطريق */
.set-crumb {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-caption); color: var(--muted);
}
.set-crumb i { font-size: .6rem; opacity: .6; }
.set-crumb b { color: var(--text); font-weight: 500; }

/* عنوان الصفحة + وصف قصير */
.set-title h3 {
  font-size: var(--text-h6); font-weight: 600;
  letter-spacing: var(--tracking-h6); line-height: var(--leading-heading);
}
.set-title p {
  font-size: var(--text-sm); color: var(--muted);
  margin-top: var(--space-1); line-height: var(--leading-body);
}

/* ---------- درج الموبايل ---------- */
.set-scrim {
  position: fixed; inset: 0; z-index: 4;
  background: rgba(0, 0, 0, .5);
  opacity: 0; pointer-events: none;
  transition: opacity .12s ease;
}
.set-scrim.show { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .set-burger {
    display: grid; place-items: center; flex-shrink: 0;
    width: var(--h-control-sm); height: var(--h-control-sm);
    border-radius: var(--radius-sm);
    background: var(--card); border: 1px solid var(--border);
    color: var(--text); cursor: pointer; transition: var(--tr);
  }
  .set-burger:hover { color: var(--primary); border-color: var(--border-h); }

  /* الشريط الجانبي يصبح درجاً — بلا أي تمرير أفقي */
  .set-shell, .set-shell.collapsed { grid-template-columns: minmax(0, 1fr); }
  .set-nav {
    position: fixed; z-index: 5; top: 0; bottom: 0;
    inset-inline-start: 0;
    width: min(280px, 84vw);
    padding: var(--space-4) var(--space-3);
    background: var(--panel);
    border-inline-end: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.22, .7, .28, 1);
  }
  html[dir="ltr"] .set-nav { transform: translateX(-100%); }
  /* ★ السطر الثاني ليس تكراراً — بدونه لا يُفتح الدرج في الإنجليزية أبداً.
     ‏`.set-nav.open` وزنها ‎(0,2,0)‎ بينما ‎`html[dir="ltr"] .set-nav`‎ أعلى
     ‏‎(0,2,1)‎ (عنصر + سمة + صنف)، فتغلب حالةُ الإغلاق حالةَ الفتح ويبقى
     ‏‎translateX(-100%)‎ مطبَّقاً: الصنف `open` يُضاف والحاجب يظهر والدرج
     خارج الشاشة عند x=-280 — شاشة سوداء بلا قائمة. في العربية لا قاعدة
     اتجاه تنافس فتعمل، ولهذا قُرئ العطل كأن «الإنجليزية تكسر الأزرار».
     نسخة موازية بوزن ‎(0,3,1)‎ تحسم الترتيب في الاتجاهين. */
  .set-nav.open,
  html[dir="ltr"] .set-nav.open { transform: none; }
  .set-collapse { display: none; }
  .set-body { padding-bottom: 7rem; }
}

/* بطاقات فسيحة «تتنفّس» — إحساس تطبيق سطح مكتب */
.set-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--space-5);
}
.set-card > h4 {
  font-size: var(--text-sm); font-weight: 700; color: var(--primary);
  letter-spacing: var(--tracking-tight);
  margin-bottom: .85rem;
  display: flex; align-items: center; gap: .5rem;
}
.set-card.danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.set-card.danger > h4 { color: var(--danger); }

.set-row {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.set-row:last-child { border-bottom: none; }
.set-row .sr-txt { flex: 1; min-width: 0; }
.set-row .sr-txt b { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-tight); }
.set-row .sr-txt small { display: block; font-size: var(--text-caption); color: var(--muted); font-weight: 400; margin-top: .18rem; line-height: 1.5; }

.set-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
/* على سلّم الطباعة الموحّد — لا مقاسات ولا أوزان خارج النظام */
.set-hint { font-size: var(--text-caption); color: var(--muted); font-weight: 400; line-height: var(--leading-body); margin-top: var(--space-3); }
.set-select {
  height: var(--h-control-sm);
  padding-inline: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--border);
  color: var(--text); font-family: inherit;
  font-size: var(--text-sm); font-weight: 500;
  outline: none; cursor: pointer; transition: border-color var(--duration-fast);
}
.set-select:hover { border-color: var(--border-h); }
.set-select:focus { border-color: var(--border-h); box-shadow: 0 0 0 3px var(--primary-dim); }
.set-select option { background: var(--panel); color: var(--text); }

/* ---------- رأس الهوية: صورة · اسم · مستخدم · بريد · نوع · عضو منذ ---------- */
.set-head {
  display: flex; align-items: center; gap: var(--space-4);
  flex-wrap: wrap; min-width: 0;
  padding: var(--space-4);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.set-head .acct-avatar {
  width: 64px; height: 64px; font-size: var(--text-h6);
  border: 1px solid var(--border-h); box-shadow: none;
  flex-shrink: 0;
}
.set-head .sh-meta { flex: 1; min-width: 180px; }
.set-head .sh-name {
  font-size: var(--text-body-lg); font-weight: 600;
  letter-spacing: var(--tracking-tight); line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}
.set-head .sh-sub {
  font-size: var(--text-sm); color: var(--muted);
  margin-top: var(--space-1); overflow-wrap: anywhere;
}
.set-head .sh-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.set-head .sh-act { flex-shrink: 0; }

/* مفتاح تبديل */
.sw {
  position: relative; width: 40px; height: 22px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--card-h);
  border: 1px solid var(--border);
  cursor: pointer; transition: var(--tr);
}
.sw::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--muted);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), background .12s;
}
.sw:hover { border-color: var(--border-h); }
.sw[aria-checked="true"] { background: var(--primary-dim); border-color: var(--border-h); }
.sw[aria-checked="true"]::after { transform: translateX(-18px); background: var(--primary); }

/* شريط الحفظ اللاصق — يظهر فقط عند وجود تغييرات غير محفوظة */
.set-savebar {
  position: sticky; bottom: var(--space-4); z-index: 5;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--border-h);
  box-shadow: var(--shadow);
  font-size: var(--text-sm); font-weight: 500;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .12s ease;
}
.set-savebar.show { opacity: 1; transform: none; pointer-events: auto; }
.set-savebar > span { flex: 1; min-width: 0; }

/* مؤشر «غير محفوظ» بجانب عنوان الصفحة */
.set-dirty {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-caption); font-weight: 500; color: var(--gold);
}
.set-dirty::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}

/* مقياس الاستهلاك — التوكن اليومي/الشهري والتخزين */
.set-meter + .set-meter { margin-top: var(--space-4); }
.set-meter .m-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-2);
}
.set-meter .m-lbl { font-size: var(--text-sm); font-weight: 500; }
.set-meter .m-val { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.set-meter .m-foot { font-size: var(--text-caption); color: var(--muted); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }
.set-meter .progress-line > div.warn { background: var(--gold); }
.set-meter .progress-line > div.danger { background: var(--danger); }

/* التخزين وحول */
.set-storage p { font-size: var(--text-sm); color: var(--muted); margin-top: var(--space-2); }
.set-about { text-align: center; padding: var(--space-2) 0; }
.set-about .sa-logo { font-family: var(--font-en); font-size: var(--text-h5); font-weight: 700; letter-spacing: var(--tracking-h5); }
.set-about .sa-logo .xx { color: var(--primary-bright); }
.set-about p { font-size: var(--text-sm); color: var(--muted); margin: var(--space-2) 0 var(--space-3); line-height: var(--leading-body); }

@media (max-width: 900px) {
  .set-grid2 { grid-template-columns: 1fr; }
}

/* ============================================================
   تفضيلات العرض — حجم الخط / الكثافة / الحركة
   ============================================================ */
:root[data-fontsize="sm"] { font-size: 14.5px; }
:root[data-fontsize="lg"] { font-size: 17.5px; }

:root[data-density="compact"] .main-area { padding-top: 1.2rem; padding-bottom: 2.4rem; }
:root[data-density="compact"] .card,
:root[data-density="compact"] .set-card,
:root[data-density="compact"] .acct-section { padding: .9rem 1rem; }
:root[data-density="compact"] .sb-link { padding: .45rem .75rem; }
:root[data-density="compact"] .page-head { margin-bottom: 1.1rem; }
:root[data-density="compact"] .set-row { padding: .45rem 0; }

:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: .01ms !important;
  transition-duration: .01ms !important;
}

.acct-wrap {
  max-width: 860px; margin: 0 auto;
  padding: 1.6rem clamp(1rem, 4vw, 2.4rem) 4rem;
  display: flex; flex-direction: column; gap: 1rem;
}

.acct-hero {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.5rem;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
}
.acct-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--primary);
  display: grid; place-items: center;
  font-size: 1.7rem; font-weight: 800; color: var(--primary-ink);
  overflow: hidden; flex-shrink: 0;
  position: relative; cursor: pointer;
  border: 2px solid var(--border-h);
}
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-avatar .av-edit {
  position: absolute; inset: auto 0 0 0; height: 26px;
  background: rgba(5, 8, 14, .68); color: #7cf2ff;
  display: grid; place-items: center; font-size: .66rem;
}
.acct-hero .ah-id h3 { font-size: 1.1rem; font-weight: 900; }
.acct-hero .ah-id p { font-size: .74rem; color: var(--muted); margin-top: .2rem; }

/* حقل محجوب بعين */
.masked-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem .95rem; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
}
.masked-row .mr-label {
  font-size: .68rem; color: var(--muted); font-weight: 800;
  min-width: 92px; display: flex; align-items: center; gap: .45rem;
}
.masked-row .mr-label i { color: var(--primary); width: 14px; }
.masked-row .mr-value {
  flex: 1; font-size: .84rem; font-weight: 700;
  direction: ltr; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  letter-spacing: .02em;
}
.masked-row .mr-value.masked { letter-spacing: .18em; color: var(--muted); }
.masked-row .eye-btn {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font-size: .8rem;
  display: grid; place-items: center; transition: var(--tr);
}
.masked-row .eye-btn:hover { color: var(--primary); border-color: var(--border-h); }

.acct-section {
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1.35rem 1.5rem;
}
.acct-section > h4 {
  font-size: .82rem; font-weight: 900; color: var(--primary);
  margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem;
}
.acct-rows { display: flex; flex-direction: column; gap: .6rem; }

.sub-rows { display: flex; flex-direction: column; gap: .5rem; }
.sub-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .68rem .95rem; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  font-size: .77rem; font-weight: 700;
}
.sub-row .sr-name { display: flex; align-items: center; gap: .55rem; }
.sub-row .sr-name i { color: var(--primary); width: 18px; text-align: center; }

.plan-features { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.plan-features li {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .76rem; color: var(--muted); font-weight: 600; line-height: 1.75;
}
.plan-features li i { color: var(--success); margin-top: .3rem; font-size: .6rem; }
.plan-features li.soon i { color: var(--gold); }
.plan-features li.soon .soon-chip {
  font-size: .56rem; font-weight: 800; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 999px; padding: .08rem .5rem; margin-right: .35rem;
  white-space: nowrap;
}

/* ============================================================
   استجابة الموبايل
   ============================================================ */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .main-area { margin-right: 0; padding: 1.2rem 1rem calc(var(--bottomnav-h) + 2.2rem); }
  .bottom-nav { display: block; }
  .cvx-overlay { padding: 0; align-items: flex-end; }
  .cvx-modal {
    max-width: 100%;
    max-height: min(92vh, 92dvh);
    border-radius: 20px 20px 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  .masked-row { flex-wrap: wrap; }
  .masked-row .mr-label { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto !important; }
  /* استثناء المؤشّرات الدوّارة: ضغط دورتها إلى .01ms يحوّلها إلى وميض
     سريع — وهو الضرر نفسه الذي طُلب تفاديه. تُبطَّأ بدل أن تُخنَق،
     لأنها التغذية الراجعة الوحيدة التي تخبر المستخدم أن العمل جارٍ. */
  .spinner, .eq-spin, .cx-load::before, .btn.is-loading::after,
  html[data-auth="init"] body::after { animation-duration: 1.6s !important; }
}

/* حلقة التركيز الموحّدة — لوحة المفاتيح فقط.
   حُذف `border-radius` منها: كان يُعيد تشكيل العنصر لحظة التركيز،
   فتتحوّل الأزرار الحبّية (999px) والبطاقات (12px) إلى 8px أمام
   المستخدم. الحدّ الخارجي يتبع زاوية العنصر نفسه بلا تدخّل.
   وأُضيفت العناصر الناقصة: select و textarea و summary وأي عنصر
   يحمل tabindex أو دور زر — كانت تُركّز بلا أي مؤشّر مرئي. */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* في وضع التباين القسري يُستبدل لون العلامة بلون النظام */
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
    outline: 2px solid Highlight;
  }
}

/* ------------------------------------------------------------
   رابط تخطّي التنقّل — WCAG 2.4.1
   ------------------------------------------------------------
   التنقّل الجانبي يسبق المحتوى في ترتيب الـ DOM، فمستخدم لوحة
   المفاتيح كان يمرّ على تسعة روابط وزرّين قبل أن يبلغ الصفحة —
   في كل صفحة. الرابط مخفيّ بصرياً حتى يُركَّز عليه.
   ------------------------------------------------------------ */
.skip-link {
  position: fixed; top: var(--space-2); inset-inline-start: var(--space-2);
  z-index: var(--z-nav);
  min-height: var(--h-control);
  display: inline-flex; align-items: center;
  padding: 0 1rem; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--primary-ink);
  font-size: var(--text-sm); font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--duration-fast) var(--ease-standard);
}
/* `:focus` لا `:focus-visible`: الثانية لا تُطابَق عند نقل التركيز
   برمجياً أو من تقنيات مساعدة، فيبقى الرابط مخفياً وهو مُركَّز عليه —
   أسوأ من غيابه. وهذا الرابط لا يُبلَغ إلا بلوحة المفاتيح أصلاً. */
.skip-link:focus { transform: none; outline-offset: 3px; }
/* الهدف يستقبل التركيز برمجياً فقط — بلا حلقة تركيز حوله */
.main-area:focus { outline: none; }

/* ------------------------------------------------------------
   نصّ لقارئ الشاشة وحده
   ------------------------------------------------------------
   لبعض الأقسام عنوانٌ يفهمه المبصر من التخطيط وحده (شبكة
   الاختصارات مثلاً) فلا يحتاج عنواناً مرئياً، لكن غيابه من الشجرة
   يترك قفزة h1→h3 ويحرم مستخدم قارئ الشاشة من نقطة تنقّل.
   `clip-path` لا `display:none`: الأخيرة تُخرج العنصر من الشجرة
   فلا يُقرأ أصلاً.
   ------------------------------------------------------------ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* يظهر عند التركيز عليه إن كان عنصراً تفاعلياً */
.sr-only-focusable:focus {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip-path: none; white-space: normal;
}

/* ============================================================
   المصادقة غير المحسومة (data-auth="init")
   ============================================================
   الحالة الثالثة التي لم تكن موجودة: «لم نعرف بعد». في أثنائها لا
   يُعرض محتوى محمي ولا شاشة تسجيل — شاشة انتظار فقط. السمة تُكتب
   تزامنياً في <head> قبل أي رسم (سكربت صغير في كل صفحة محمية)،
   وتُبدَّل من core.js فور حسم الحالة إلى in/out.

   ★ هذه ليست إخفاءً للمشكلة بل تمثيلٌ لحالة حقيقية في دورة الحياة:
     المشكلة نفسها (عرض التسجيل لمستخدم مسجَّل) مُصلحة في core.js
     بآلة الحالة وإعادة المحاولة، وهذه الأنماط تعرض الحالة الوسطى.
   ============================================================ */
html[data-auth="init"] body > *:not(#cvx-offline) { visibility: hidden; }
html[data-auth="init"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 9998;
  background: var(--bg);
}
html[data-auth="init"] body::after {
  content: ""; position: fixed; top: 50%; left: 50%; z-index: 9999;
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}

/* ============================================================
   حالات الواجهة — تحميل / فراغ / خطأ
   ============================================================ */
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
.spinner.lg { width: 30px; height: 30px; border-width: 3px; }
/* ★ الدوران المشترك: تستعمله كل مؤشّرات المنصّة بلا استثناء —
   .spinner و.cx-load و.btn.is-loading و.eq-spin وحلقة إقلاع
   التقارير وحلقة تهيئة الجلسة. حركة واحدة معرَّفة مرّة واحدة. */
@keyframes spin { to { transform: rotate(360deg); } }

/* المؤشّر داخل زرّ: يرث لون الزرّ ويصغر ليطابق سطر النصّ، فلا يبدو
   دخيلاً ولا يزيد ارتفاع الزرّ. */
.btn .spinner {
  width: 15px; height: 15px; border-width: 2px;
  border-color: color-mix(in srgb, currentColor 26%, transparent);
  border-top-color: currentColor;
  vertical-align: -2px;
}

/* هيكل ثابت — لا موجة لامعة تمرّ عليه.
   الـshimmer حركةٌ دائمة في محيط البصر لا تحمل معلومة: لا تقول كم بقي
   ولا أنّ شيئاً تقدّم. لونٌ صامت يؤدّي الغرض نفسه (هنا سيأتي محتوى)
   بلا إزعاج، وهو ما يفعله كل منتج SaaS جادّ. */
.skeleton {
  background: var(--card-h);
  border-radius: var(--radius-sm);
  min-height: 14px;
}

/* ============================================================
   ★ مؤشّر التحميل الموحّد — CX Loader
   ------------------------------------------------------------
   مؤشّر واحد لكل انتظار في المنصّة: تنزيل ملف · تبديل اللغة ·
   تبديل المظهر · إقلاع التطبيق · أي عملية طويلة.

   لماذا CSS خالص لا Lottie: المؤشّر يجب أن يظهر في الإطار الأول
   من الانتظار. تحميل مكتبة رسوم خارجية أولاً يعني أن أبطأ اللحظات
   هي بالضبط التي لا مؤشّر فيها — وهو عكس الغرض. هذا يرسم فوراً،
   بلا شبكة وبلا طلب، ويعمل حتى مع انقطاع الاتصال.

   البنية: حلقتان متعاكستان مقصوصتان بـmask (لا حدود مصمتة)، مع
   نواة نابضة. الحلقة الخارجية تدور والداخلية تعكس، فيُقرأ العنصر
   حركةً مستمرة لا وميضاً متقطّعاً.
   ============================================================ */
.cx-load {
  --cx-ld-size: 34px;
  --cx-ld-ring: 3px;
  position: relative;
  width: var(--cx-ld-size); height: var(--cx-ld-size);
  flex-shrink: 0;
  display: inline-grid; place-items: center;
}
/* حركة واحدة لا غير: حلقة رفيعة تدور. لا حلقة معاكسة ولا نواة نابضة
   ولا تدرّج مخروطي — ثلاث حركات متزامنة كانت تجذب العين أكثر ممّا
   تُطمئنها، وهي نفس اللغة البصرية التي يستعملها .spinner في بقية
   المنصّة. مؤشّر واحد في كل مكان أهدأ من ثلاثة مختلفة. */
.cx-load::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  border: var(--cx-ld-ring) solid var(--border);
  border-top-color: var(--primary);
  animation: spin .7s linear infinite;
}
/* النواة بقيت في الترميز الذي يبنيه CVX.Loader — تُحيَّد هنا بلا لمس JS */
.cx-load > span { display: none; }

/* المقاسات — sm داخل الأزرار، lg للطبقة الكاملة */
.cx-load.sm { --cx-ld-size: 17px; --cx-ld-ring: 2px; }
.cx-load.lg { --cx-ld-size: 62px; --cx-ld-ring: 4px; }

/* ------------------------------------------------------------
   الطبقة الكاملة — تبديل اللغة/المظهر، وأي عملية تحجب الصفحة
   ------------------------------------------------------------ */
.cx-ld-overlay {
  position: fixed; inset: 0; z-index: 99997;
  display: grid; place-items: center;
  /* بلا blur/saturate: تأثير زجاجي زخرفي ومكلف على الأجهزة الضعيفة،
     وحجب الخلفية يكفيه لون صريح. */
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  animation: cx-ld-in .18s ease-out both;
}
.cx-ld-overlay.out { animation: cx-ld-out .22s ease-in both; }
@keyframes cx-ld-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes cx-ld-out { to   { opacity: 0 } }

.cx-ld-box {
  display: grid; justify-items: center; gap: .95rem;
  padding: 1.7rem 2.1rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  /* الصندوق لا يرتفع ولا يتمدّد — الطبقة تتلاشى وهذا كافٍ */
}
.cx-ld-t {
  font-size: .84rem; font-weight: 600; color: var(--text);
  letter-spacing: .01em;
}
.cx-ld-sub { font-size: .72rem; color: var(--muted); margin-top: -.55rem; }

/* ------------------------------------------------------------
   داخل زرّ — التنزيل وما شابهه. الزرّ يحتفظ بعرضه فلا يقفز التخطيط.
   ------------------------------------------------------------ */
/* ★ `.icon-btn` مشمول: أزرار الأيقونة في لوحة Workspace تمرّ بنفس
   Loader.button، وكانت الحالة تُطبَّق عليها منطقياً (تعطيل + aria-busy)
   بلا أي أثر مرئي لأن القواعد كانت مقصورة على `.btn`. */
.btn.is-loading, .icon-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > *, .icon-btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after, .icon-btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  color: var(--primary-ink);
  visibility: visible;
  animation: spin .7s linear infinite;
}
.btn.btn-ghost.is-loading::after, .btn.btn-soft.is-loading::after,
.icon-btn.is-loading::after { color: var(--primary); }

/* ------------------------------------------------------------
   خاتمة العملية داخل الزرّ — «تمّ» و«تعذّر»
   ------------------------------------------------------------
   لماذا: كانت دورة التنزيل تنتهي بإخفاء الدوّارة وعودة الزرّ كما كان،
   والإقرار الوحيد فقاعةُ toast في زاوية الشاشة. من نظر إلى الزرّ —
   وهو الموضع الذي ضغطه — لم يرَ أثراً للنجاح، فيضغط ثانية.
   الآن يحمل الزرّ نفسه خاتمة العملية لحظة ونصف ثم يعود.

   القاعدة التي لا تُخرَق: هذان الصنفان لا يُضافان إلا بعد تأكيد
   حقيقي من الخادم — لا عند بدء العملية ولا عند مجرّد النقر.
   العرض مثبّت من Loader.button فلا يقفز التخطيط عند التبديل.
   ------------------------------------------------------------ */
.btn.is-done, .btn.is-fail,
.icon-btn.is-done, .icon-btn.is-fail { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-done > *, .btn.is-fail > *,
.icon-btn.is-done > *, .icon-btn.is-fail > * { visibility: hidden; }
.btn.is-done::after, .btn.is-fail::after,
.icon-btn.is-done::after, .icon-btn.is-fail::after {
  position: absolute; inset: 0; margin: auto;
  width: 1.2em; height: 1.2em; line-height: 1.2em; text-align: center;
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 1rem; visibility: visible;
  animation: cx-btn-pop .22s ease-out;
}
/* ★ الخاتمة تفرض لونَ خلفيتها بنفسها بدل أن ترث لون كل نوع زرّ.
   ------------------------------------------------------------
   المحاولة الأولى كانت تلوّن العلامة وحدها وتترك خلفية الزرّ كما هي،
   مع استثناء لـ`.btn-primary` يجعلها بلون الحبر الداكن. وهذا ينكسر
   حيث يُعيد نمطُ الصفحة تعريفَ مظهر الزرّ: زرّ التنزيل في بطاقة
   القالب أساسه `.btn-primary` لكن صفحة الملفات تجعله حبّة زجاجية
   شفّافة نصّها أبيض — فتصير العلامة حبراً داكناً (rgb(3,20,26)) على
   خلفية شبه سوداء، أي غير مرئية عملياً. قِيس بـ getComputedStyle.

   الآن الحالة تحمل تلوينها كاملاً — خلفية وحدّاً وعلامة — فتقرأ
   بوضوح فوق أي نوع زرّ وفي كل الثيمات، وتُقرأ أيضاً كتغيّر حالة لا
   كأيقونة طافية. `!important` مقبول هنا: الحالة عابرة (١٫٤ ثانية)
   ومحصورة في صنف لا يُضاف إلا بعد تأكيد الخادم. */
.btn.is-done, .icon-btn.is-done {
  background: color-mix(in srgb, var(--success) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--success) 45%, transparent) !important;
}
.btn.is-fail, .icon-btn.is-fail {
  background: color-mix(in srgb, var(--danger) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--danger) 45%, transparent) !important;
}
.btn.is-done::after, .icon-btn.is-done::after { content: '\f00c'; color: var(--success); }   /* fa-check */
.btn.is-fail::after, .icon-btn.is-fail::after { content: '\f071'; color: var(--danger); }    /* fa-triangle-exclamation */
@keyframes cx-btn-pop { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-done::after, .btn.is-fail::after,
  .icon-btn.is-done::after, .icon-btn.is-fail::after { animation: none; }
}

/* ------------------------------------------------------------
   تفضيلات الحركة — تُبطَّأ ولا تُخنَق.
   خنق الدورة إلى .01ms يحوّلها وميضاً سريعاً، وهو الضرر نفسه الذي
   يُتفادى. والنواة النابضة زخرفة بحتة فتُثبَّت.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cx-load::before       { animation-duration: 2.2s !important; }
  .cx-ld-overlay         { animation: none !important; }
  .btn.is-loading::after { animation-duration: 1.8s !important; }
}
/* ------------------------------------------------------------
   تبديل المظهر — تأكيد على الزرّ نفسه، لا طبقة حاجبة.
   التبديل محلّي وفوري (متغيّرات CSS بلا شبكة)، فالمطلوب إشعارٌ بأن
   النقرة وصلت لا إيهامٌ بانتظار. حلقة رفيعة تدور حول الزرّ مرّة.
   ------------------------------------------------------------ */
/* شارة «قريباً» في التنقّل — تُدفع إلى نهاية السطر وتبقى صغيرة
   فلا تزاحم اسم القسم. الشريط المطويّ يخفيها مع النصّ. */
.nav-soon {
  margin-inline-start: auto;
  padding: .1rem .38rem;
  border-radius: 999px;
  font-size: .58rem; font-weight: 800; letter-spacing: .02em;
  color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  white-space: nowrap; flex-shrink: 0;
}
.sb-collapsed .nav-soon { display: none; }

[data-theme-set].is-theming { position: relative; }
[data-theme-set].is-theming::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--primary) 88%, transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: spin .42s linear 1;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme-set].is-theming::after { animation: none; opacity: .6; }
}

:root[data-perf="low"] .cx-ld-overlay { background: var(--bg); }

.empty-state, .error-state {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  text-align: center; padding: 2.6rem 1.2rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
}
.empty-state i, .error-state i { font-size: 1.5rem; color: var(--primary); }
.error-state i { color: var(--danger); }
.empty-state p, .error-state p { font-size: .8rem; line-height: 1.9; max-width: 380px; }

/* شريط تقدم رفيع */
.progress-line {
  height: 4px; border-radius: 4px; overflow: hidden;
  background: var(--card-h); border: 1px solid var(--border);
}
.progress-line > div {
  height: 100%; width: 0;
  background: var(--primary);
  transition: width .3s ease;
}

/* علامة نجاح تظهر بعد الحفظ */
.save-check {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--success); color: #fff; font-size: .6rem;
  
}

/* ============================================================
   v3.4 — تعطيل مقبض تكبير textarea عالمياً + حركات وتصميم أعصر
   ============================================================ */

/* (1) مقبض السحب لكل textarea معطّل نهائياً — يتوافق مع النمو التلقائي */
textarea {
  resize: none !important;
  field-sizing: content;           /* نمو تلقائي حديث حين يُدعم */
}
/* لا نفرض ارتفاعاً ثابتاً حتى تبقى سكربتات auto-grow تعمل */

/* (2) لا حركات دخول: العناصر تظهر في مكانها النهائي مباشرةً.
   `.reveal` و`.r1..r6` كانت تُخفي العنصر (opacity:0) وتكشفه بحركة
   متدرّجة. أُبقي الصنف ليبقى الترميز في الصفحات صالحاً، وأُلغي
   الإخفاء — فلا شيء ينتظر حركةً كي يُرى. */
.reveal { opacity: 1; }

/* البطاقات تتغيّر لوناً وحدّاً عند التحويم — ولا تتحرّك.
   الانتقال يشمل اللون والحدّ فقط: transform وbox-shadow خرجا من
   القائمة، فلم يعد لأي بطاقة مسارُ حركةٍ أصلاً. وwill-change أُسقط
   لأنه كان يحجز طبقة رسم لحركة لم تعد موجودة. */
.hub-cell, .price-card, .card, .set-card, .more-cell, .step, .file-card, .course-card, .q-card {
  transition: border-color .12s linear, background-color .12s linear;
}
.set-card:hover { border-color: var(--border-h); }

/* أيقونات الشريط الجانبي ثابتة — كان لها انزلاق 3px عند التحويم */
.sb-link i.fa-solid, .sb-link .ai-mark, .sb-link .cx-i { transition: color .12s linear; }
.sb-link.active { box-shadow: inset 2px 0 0 0 var(--primary); }

/* مؤشر القسم النشط مُعرَّف مرة واحدة مع الشريط الجانبي أعلاه — لا تكرار هنا */

/* (3) أنيميشن فتح الأقفال عند تفعيل الاشتراك */
/* حالتا القفل بعد التفعيل — النتيجة النهائية بلا الحركة التي كانت
   توصل إليها (اهتزاز ثم تلاشٍ). */
.lock-ic.cvx-unlocking { color: var(--success); }
.lock-ic.cvx-vanish { opacity: 0; }

/* بطاقة احتفال الفتح الكامل */
.unlock-burst {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(5, 8, 14, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.unlock-burst .ub-card {
  text-align: center; padding: 2.4rem 2rem; max-width: 380px;
  
}
.unlock-burst .ub-ic {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1.2rem;
  display: grid; place-items: center; font-size: 2.6rem; color: var(--success);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border: 2px solid color-mix(in srgb, var(--success) 45%, transparent);
  
}
.unlock-burst h3 { font-size: 1.3rem; font-weight: 900; margin-bottom: .5rem; }
.unlock-burst p { font-size: .82rem; color: var(--muted); font-weight: 700; line-height: 1.9; }
/* الجسيمات المتطايرة أُزيلت كلياً — زخرفة بحتة بلا معنى وظيفي */
.unlock-burst .spark { display: none; }

/* (4) حالة تفكير الذكاء الاصطناعي — أوربة نابضة وجسيمات */
.ai-thinking {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem; border-radius: 14px;
  background: var(--card); border: 1px solid var(--border);
  
}
.ai-orb {
  position: relative; width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, var(--primary-bright), var(--primary) 55%, var(--primary-2) 100%);
  box-shadow: 0 0 14px -2px var(--primary);
  
}
.ai-orb::before, .ai-orb::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--primary) 45%, transparent);
  
}
.ai-orb::after { animation-delay: .9s; }
.ai-thinking .tt { font-size: .78rem; font-weight: 800; color: var(--muted); }
.ai-dots { display: inline-flex; gap: 4px; }
.ai-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
  animation: dotBounce 1.2s ease-in-out infinite;
}
.ai-dots span:nth-child(2) { animation-delay: .18s; }
.ai-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes dotBounce {
  0%,60%,100% { transform: translateY(0); opacity: .4; }
  30%         { transform: translateY(-6px); opacity: 1; }
}
/* ظهور رد الذكاء بتلاشٍ وارتفاع لطيف */

/* ============================================================
   لوحة «المعالجة / Reasoning Progress» — enterprise glassmorphism
   ============================================================ */
.reasoning-panel {
  border-radius: 14px; margin-bottom: .7rem; overflow: hidden;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 34px -20px rgba(0,0,0,.55);
  
}
.reasoning-panel .rp-head {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .7rem .9rem; cursor: pointer; text-align: start;
  background: none; border: none; border-bottom: 1px solid var(--border);
  color: var(--text); font-family: inherit;
}
.rp-orb {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, var(--primary-bright), var(--primary) 60%, var(--primary-2));
  box-shadow: 0 0 12px -1px var(--primary); 
}
.rp-orb.ok { background: var(--success); box-shadow: 0 0 12px -1px var(--success); animation: none; }
.rp-title { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-tight); }
.rp-status { margin-inline-start: auto; font-size: var(--text-caption); font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.rp-complete .rp-status { color: var(--success); }
.rp-failed .rp-status { color: var(--danger); }
.rp-chev { color: var(--muted); font-size: .7rem; transition: transform .25s; }
.reasoning-panel.collapsed .rp-chev { transform: rotate(180deg); }
.reasoning-panel.collapsed .rp-body { display: none; }
.rp-typing { display: inline-flex; gap: 3px; }
.rp-typing span { width: 4px; height: 4px; border-radius: 50%; background: var(--primary); animation: dotBounce 1.2s infinite; }
.rp-typing span:nth-child(2) { animation-delay: .18s; }
.rp-typing span:nth-child(3) { animation-delay: .36s; }
.rp-complete .rp-typing, .rp-failed .rp-typing { display: none; }

.rp-body { padding: .7rem .95rem .85rem; }
.rp-timeline { list-style: none; display: flex; flex-direction: column; }
.rp-stage { position: relative; display: flex; align-items: center; gap: .7rem; padding: .42rem .1rem; }
.rp-stage::before {
  content: ''; position: absolute; inset-inline-start: 12px; top: 1.9rem; bottom: -.3rem;
  width: 2px; background: var(--border);
}
.rp-stage:last-child::before { display: none; }
.rp-stage.done::before { background: color-mix(in srgb, var(--success) 45%, transparent); }
.rp-dot {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  display: grid; place-items: center; font-size: .62rem;
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  transition: var(--tr);
}
.rp-stage.active .rp-dot { color: var(--primary); border-color: var(--border-h); background: var(--primary-dim); animation: rpPulse 1.4s ease-out infinite; }
/* المرحلة الجارية تُعلَن بخفوت/إضاءة لا بهالة تتمدّد للخارج */
@keyframes rpPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.rp-stage.done .rp-dot { color: #fff; background: var(--success); border-color: var(--success); }
.rp-stage.done .rp-dot i::before { content: '\f00c'; }
.rp-label { flex: 1; font-size: var(--text-sm); font-weight: 500; color: var(--muted); transition: color .12s; }
.rp-stage.done .rp-label { color: var(--text); }
.rp-stage.active .rp-label {
  font-weight: 600;
  background: linear-gradient(90deg, var(--muted) 30%, var(--text) 50%, var(--muted) 70%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; 
}
.rp-time { font-size: .62rem; color: var(--muted); font-variant-numeric: tabular-nums; opacity: 0; }
.rp-stage.done .rp-time { opacity: .75;  }

/* ============================================================
   منسّق الردود — يحوّل رد الذكاء إلى مستند احترافي
   (يُستخدم في CX-Core .md و CX-Nexus .answer-body)
   ============================================================ */
.md, .answer-body { font-size: var(--text-body); line-height: var(--leading-relaxed); }
.md > :first-child, .answer-body > :first-child { margin-top: 0; }
.md > :last-child, .answer-body > :last-child { margin-bottom: 0; }

/* بطاقات التنبيه (Callouts): Note / Tip / Warning / Important */
.cx-callout {
  display: flex; gap: .7rem; padding: .85rem 1rem; margin: 1rem 0;
  border-radius: 12px; border: 1px solid var(--border);
  border-inline-start: 3px solid var(--muted);
  background: var(--card); font-size: var(--text-sm); line-height: var(--leading-body);
}
.cx-callout .cxc-ic { flex-shrink: 0; font-size: 1rem; margin-top: .12rem; }
.cx-callout .cxc-body { flex: 1; min-width: 0; }
.cx-callout .cxc-title { display: block; font-weight: 700; font-size: var(--text-sm); margin-bottom: .25rem; letter-spacing: var(--tracking-tight); }
.cx-callout .cxc-body > :last-child { margin-bottom: 0; }
.cx-callout.note      { border-inline-start-color: var(--primary); background: var(--primary-dim); }
.cx-callout.note .cxc-ic, .cx-callout.note .cxc-title { color: var(--primary); }
.cx-callout.tip       { border-inline-start-color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }
.cx-callout.tip .cxc-ic, .cx-callout.tip .cxc-title { color: var(--success); }
.cx-callout.warning   { border-inline-start-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.cx-callout.warning .cxc-ic, .cx-callout.warning .cxc-title { color: var(--gold); }
.cx-callout.important { border-inline-start-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); }
.cx-callout.important .cxc-ic, .cx-callout.important .cxc-title { color: var(--danger); }

/* الجداول */
.md table, .answer-body table {
  width: 100%; max-width: 100%; border-collapse: collapse; margin: 1rem 0;
  font-size: var(--text-sm); border: 1px solid var(--border); border-radius: 10px;
}
.md thead th, .answer-body thead th { background: var(--card-h); font-weight: 700; }
.md th, .answer-body th { text-align: start; }
.md th, .md td, .answer-body th, .answer-body td { padding: .55rem .85rem; border: 1px solid var(--border); }
.md tbody tr:nth-child(even) td, .answer-body tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--card) 60%, transparent); }

/* اقتباس + فاصل */
.md blockquote, .answer-body blockquote {
  margin: 1rem 0; padding: .55rem 1rem; color: var(--muted);
  border-inline-start: 3px solid var(--border-h);
  background: var(--card); border-radius: 0 10px 10px 0;
}
.md blockquote > :last-child, .answer-body blockquote > :last-child { margin-bottom: 0; }
.md hr, .answer-body hr { border: none; height: 1px; background: var(--border); margin: 1.4rem 0; }

/* (5) دعم الإنجليزية LTR — قلب الشريط الجانبي والهوامش */
html[dir="ltr"] { direction: ltr; }
html[dir="ltr"] .sidebar { right: auto; left: 0; border-left: none; border-right: 1px solid var(--border); }
html[dir="ltr"] .main-area { margin-right: 0; margin-left: var(--sidebar-w); }

html[dir="ltr"] .sb-link.active { box-shadow: inset -2px 0 0 0 var(--primary); }
html[dir="ltr"] #cvx-toasts { right: auto; left: 14px; }
html[dir="ltr"] .masked-row .mr-value { direction: ltr; text-align: left; }
html[dir="ltr"] .set-nav button { text-align: left; }
/* الصفحة الإنجليزية تستعمل العائلة نفسها: 'Space Grotesk' لم يكن مُحمَّلاً
   أصلاً فكانت تسقط إلى خطّ النظام — أي شكلٌ مختلف عن بقيّة المنصة بلا سبب. */
html[dir="ltr"] body { font-family: var(--font); }
@media (max-width: 900px) {
  html[dir="ltr"] .main-area { margin-left: 0; }
}

/* خيارات القوائم المنسدلة مرئية في كل المظاهر (يشمل «عدد الصفحات») */
select { color: var(--text); }
select option, select optgroup {
  background: var(--panel);
  color: var(--text);
}
#numPages { font-weight: 800; color: var(--primary); }

/* منتقي عدد الصفحات (CX-Report) بلون واضح لا أبيض */
.page-count-opt, .seg-opt {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
}
.page-count-opt.active, .seg-opt.active {
  background: var(--primary-dim); border-color: var(--border-h); color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--border-h);
}

/* نص الخصوصية / من نحن — فقرات وقوائم مقروءة */
.privacy-copy p { font-size: .8rem; line-height: 1.95; color: var(--muted); font-weight: 600; margin-bottom: .7rem; }
.privacy-copy ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.privacy-copy li {
  font-size: .78rem; line-height: 1.85; color: var(--muted); font-weight: 600;
  padding-inline-start: 1.1rem; position: relative;
}
.privacy-copy li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}
.privacy-copy li b { color: var(--text); font-weight: 800; }

/* بطاقات أسلوب النماذج (تفضيلات AI) */
.ai-tone-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 620px) { .ai-tone-grid { grid-template-columns: 1fr; } }
.ai-tone-opt {
  display: flex; flex-direction: column; gap: .35rem; text-align: start;
  padding: .85rem .9rem; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); color: var(--muted);
  font-family: inherit; transition: var(--tr);
}
.ai-tone-opt .tone-head { font-size: .82rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: .45rem; }
.ai-tone-opt .tone-head i { color: var(--primary); }
.ai-tone-opt small { font-size: .66rem; line-height: 1.7; font-weight: 600; }
.ai-tone-opt:hover { border-color: var(--border-h); background: var(--card-h); }
.ai-tone-opt.active { border-color: var(--border-h); background: var(--primary-dim); }
.ai-tone-opt.active .tone-head { color: var(--primary); }

/* شريط نماذج الذكاء الاصطناعي العلوي */
.cx-models-bar {
  display: flex; align-items: stretch; gap: .5rem;
  padding: .4rem; margin-bottom: 1.4rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; overflow-x: auto; scrollbar-width: none;
  
}
.cx-models-bar::-webkit-scrollbar { display: none; }
.cx-mb-tab {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .5rem .95rem; border-radius: 10px;
  text-decoration: none; color: var(--muted);
  border: 1px solid transparent; transition: var(--tr); white-space: nowrap;
}
.cx-mb-tab b { font-family: var(--font-en); font-size: .82rem; font-weight: 700; color: var(--text); }
.cx-mb-tab small { font-size: .6rem; font-weight: 700; }
.cx-mb-tab:hover { background: var(--card-h); border-color: var(--border-h); }
.cx-mb-tab.active { background: var(--primary-dim); border-color: var(--border-h); }
.cx-mb-tab.active b { color: var(--primary); }
.cx-mb-tab.active small { color: var(--primary); }
.cx-mb-brand {
  margin-inline-start: auto; align-self: center;
  display: grid; place-items: center; min-width: 42px; padding: 0 .9rem; height: 100%;
  border-radius: 10px; text-decoration: none;
  font-family: var(--font-en); font-weight: 700; font-size: .9rem; letter-spacing: .03em;
  color: var(--primary); background: var(--primary-dim);
  border: 1px solid var(--border-h); transition: var(--tr);
}
.cx-mb-brand:hover { background: var(--card-h); }
.cx-mb-brand.active { box-shadow: inset 0 0 0 1px var(--border-h); }
/* مبدّل النماذج كزر داخل مساحة العمل (تبديل في المكان) */
button.cx-mb-tab { background: none; font-family: inherit; cursor: pointer; text-align: start; }

/* أزرار الرسالة — نسخ · إعادة توليد (تظهر عند التحويم) */
.m-actions { display: flex; gap: .35rem; padding: .1rem .2rem; opacity: 0; transition: opacity .12s ease; }
.msg:hover .m-actions, .m-actions:focus-within { opacity: 1; }
.m-actions button {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .24rem .6rem; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--muted); font-family: inherit;
  font-size: var(--text-caption); font-weight: 600; cursor: pointer;
  transition: var(--tr);
}
.m-actions button:hover { color: var(--primary); border-color: var(--border-h); background: var(--card-h); }


/* قائمة الأقسام المفعّلة (الاشتراك) */
.unlocked-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.unlocked-list li {
  display: flex; align-items: center; gap: .55rem;
  font-size: .77rem; font-weight: 700; color: var(--text);
}
.unlocked-list li i { width: 16px; text-align: center; }
.unlocked-list li.on i { color: var(--success); }
.unlocked-list li.off { color: var(--muted); }
.unlocked-list li.off i { color: var(--muted); }


/* نافذة بلا ترويسة — للتفعيل: زر الإغلاق فقط يطفو أعلى المحتوى */
.cvx-modal.bare .cvx-m-head{position:absolute;top:0;inset-inline:0;z-index:2;border:0;background:none;padding:12px}
.cvx-modal.bare .cvx-m-head h3{display:none}
.cvx-modal.bare .cvx-m-body{padding:40px 32px 32px}
@media(max-width:480px){.cvx-modal.bare .cvx-m-body{padding:40px 20px 24px}}
.cvx-modal.bare{position:relative}



/* ============================================================
   الخطط — خطتان جنباً إلى جنب
   ============================================================ */
.pl-free{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:16px;
  border-radius:12px;font-size:.8rem;line-height:1.7;color:var(--muted);
  background:color-mix(in srgb,var(--success) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--success) 22%,transparent)}
.pl-free i{color:var(--success);flex-shrink:0}
.pl-free b{color:var(--text)}

.pl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
@media(max-width:620px){.pl-grid{grid-template-columns:1fr}}

.pl-card{position:relative;display:flex;flex-direction:column;
  padding:20px 18px;border-radius:16px;background:var(--card);
  border:1px solid var(--border);transition:border-color .12s ease}
.pl-card:hover{border-color:var(--border-h);
  }
.pl-card.best{border-color:color-mix(in srgb,var(--primary) 40%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 6%,var(--card)),var(--card))}
.pl-card.owned{border-color:color-mix(in srgb,var(--success) 42%,transparent)}
.pl-tag{display:inline-block;align-self:flex-start;margin-bottom:10px;
  font-size:.62rem;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;
  color:var(--primary);background:var(--primary-dim);white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--primary) 22%,transparent)}
.pl-card.owned .pl-tag{color:var(--success);background:color-mix(in srgb,var(--success) 12%,transparent);
  border-color:color-mix(in srgb,var(--success) 26%,transparent)}
.pl-name{font-size:.95rem;font-weight:700;color:var(--text);margin:0 0 10px}
.pl-price{display:flex;align-items:baseline;gap:6px;margin-bottom:10px;font-family:var(--font-en)}
.pl-price b{font-size:1.9rem;font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1}
.pl-price span{font-size:.72rem;color:var(--muted)}
.pl-desc{font-size:.76rem;line-height:1.75;color:var(--muted);margin:0 0 14px;min-height:40px}
.pl-feats{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0 0 18px;padding:0;flex:1}
.pl-feats li{display:flex;align-items:flex-start;gap:8px;font-size:.76rem;line-height:1.6;color:var(--text)}
.pl-feats i{color:var(--success);font-size:.66rem;margin-top:.35em;flex-shrink:0}
.pl-cta{width:100%;justify-content:center}
.pl-cta:disabled{opacity:.75;cursor:default}
.pl-foot{margin:16px 0 0;font-size:.74rem;color:var(--muted);text-align:center;line-height:1.7}
.pl-foot a{color:var(--primary);text-decoration:none;font-weight:600}
.pl-foot a:hover{text-decoration:underline}
.sb-plans{margin-top:16px}

/* ============================================================
   طول السطر المقروء — /measure
   ============================================================
   النص الطويل الممتدّ على عرض الشاشة كاملاً يُفقد العينَ بدايةَ
   السطر التالي. الحدّ 60–75 حرفاً. `page-head p` كان محدوداً بـ
   640px وحده؛ هذه القاعدة تعمّم الحدّ على نصوص المتن الطويلة بلا
   المساس بالجداول والبطاقات والشبكات.
   ============================================================ */
.prose,
.main-area > section > p,
.page-head p,
.sect .sub { max-width: var(--measure); }

/* ============================================================
   إيقاع النصّ العربي — /type-arabic
   ============================================================
   الحروف العربية ذات صعود ونزول أكثر من اللاتينية (الهمزات
   والتشكيل والنقاط تحت الياء والباء)، فالسطر 1.6 يضيّق المسافة
   بين الأسطر ويجعل الكتلة داكنة. المتن يرتفع إلى 1.75.
   وتباعد الحروف السالب يكسر وصل الحروف العربية فيُلغى للنص
   العربي مهما ورث من قيمة.
   ============================================================ */
:lang(ar) p,
:lang(ar) li,
[dir="rtl"] .prose { line-height: var(--leading-relaxed); }
/* العربية موصولة: أي letter-spacing يفصل الحروف ويشوّه الكلمة.
   يبقى التتبّع للعناوين اللاتينية وللأرقام. */
:lang(ar) { letter-spacing: normal; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3,
:lang(ar) h4, :lang(ar) h5, :lang(ar) h6 { letter-spacing: normal; }

/* الأرقام في الجداول والأسعار والعدّادات لا تهتزّ أعمدتها — /numerals */
table, .pc-price, .pl-price, [data-count], .kpi-num,
.rb-cell .n, output, progress + span { font-variant-numeric: tabular-nums; }

/* ============================================================
   نظام الحركة الموحّد — /motion /easing /duration /stagger
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* الدخول: يبدأ من حيث سيستقرّ، ولا يتحرّك إلا opacity وtransform */
  /* التتابع: خمسة عناصر بحدّ أقصى ثم يظهر الباقي جماعةً، وإلا صار
     الانتظار أطول من الفائدة. */
  .cvx-stagger > *:nth-child(1) { animation-delay: 0ms; }
  .cvx-stagger > *:nth-child(2) { animation-delay: 50ms; }
  .cvx-stagger > *:nth-child(3) { animation-delay: 100ms; }
  .cvx-stagger > *:nth-child(4) { animation-delay: 150ms; }
  .cvx-stagger > *:nth-child(n+5) { animation-delay: 200ms; }
}

/* ============================================================
   ورقة الطباعة — /print
   ============================================================
   الصفحات تُطبع فعلاً (أسئلة وزارية، تقارير، قوائم مقررات).
   بلا هذه الورقة يخرج الشريط الجانبي وشريط الأسفل والخلفية
   الداكنة على الورق: حبرٌ مهدور وصفحة غير مقروءة.
   ============================================================ */
@media print {
  /* الطباعة على ورق أبيض: تُفرَض لوحة فاتحة مهما كان المظهر المختار */
  :root, :root[data-theme="dark"], :root[data-theme="gray"], :root[data-theme="light"] {
    --bg: #fff; --bg-2: #fff; --panel: #fff; --card: #fff; --card-h: #fff;
    --text: #000; --muted: #333;
    --border: #bbb; --border-h: #888;
    --primary: #005b78; --primary-dim: transparent;
    --shadow: none; --elev-1: none; --elev-2: none;
    --grid-line: transparent; --glow-1: transparent; --glow-2: transparent;
  }
  body { background: #fff !important; color: #000 !important; }

  /* لا تنقّل ولا زخرفة ولا أدوات على الورق */
  .sidebar, .bottom-nav, .more-sheet, .sheet-backdrop, .skip-link,
  .bg-scene, .cvx-toast, .theme-seg, .sb-collapse,
  [data-print="hide"], .no-print { display: none !important; }

  /* المحتوى يستعيد عرض الصفحة كاملاً بعد اختفاء الشريط الجانبي */
  .layout { display: block !important; }
  .main-area {
    margin: 0 !important; padding: 0 !important;
    max-width: none !important; width: auto !important;
    background: #fff !important;
  }

  /* الظلال والتدرجات لا معنى لها مطبوعة، وتستهلك الحبر */
  * { box-shadow: none !important; text-shadow: none !important; }

  /* فواصل منطقية: لا عنوان في آخر الصفحة، ولا بطاقة مقطوعة نصفين */
  h1, h2, h3, h4, h5, h6 { break-after: avoid-page; page-break-after: avoid; }
  .card, figure, table, .price-card, .step, blockquote {
    break-inside: avoid; page-break-inside: avoid;
  }
  p, li { orphans: 3; widows: 3; }

  /* وجهة الرابط تُطبع بعده — الورق لا يُنقر عليه.
     تُستثنى الروابط الداخلية والوهمية فلا فائدة من طباعتها. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .78em; color: #555; word-break: break-all; }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }

  @page { margin: 1.6cm; }
}

/* ============================================================
   تجربة الرمز السري + صفحة الذكاء «قريباً»  (7.104)
   ألوان من متغيّرات الثيم فقط، فتعمل في الفاتح والداكن بلا استثناء.
   ============================================================ */
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-inline-end:2.8rem}
.pw-eye{position:absolute;inset-inline-end:.5rem;top:50%;transform:translateY(-50%);
  background:none;border:0;color:var(--muted,#8b93a7);cursor:pointer;padding:.35rem;
  line-height:1;border-radius:6px}
.pw-eye:hover{color:var(--text,#e9edf5)}
.pw-meter{height:4px;border-radius:99px;background:var(--border,#2a3040);
  margin:.5rem 0 .35rem;overflow:hidden}
.pw-meter span{display:block;height:100%;width:0;border-radius:99px;
  transition:width .18s ease, background-color .12s ease;background:#e5484d}
.pw-meter span[data-level="3"]{background:#f5a524}
.pw-meter span[data-level="4"]{background:#3e9dd6}
.pw-meter span[data-level="5"]{background:#2fa66b}
.pw-strength{font-size:.7rem;color:var(--muted,#8b93a7);margin-bottom:.45rem}
.pw-reqs{list-style:none;margin:0 0 .55rem;padding:0;display:grid;gap:.22rem}
.pw-reqs li{font-size:.7rem;color:var(--muted,#8b93a7);display:flex;align-items:center;gap:.4rem}
.pw-reqs li i{font-size:.5rem;width:.9rem;text-align:center}
.pw-reqs li.ok{color:#2fa66b}
.pw-reqs li.ok i{font-size:.72rem}
.pw-gen{width:100%}

.ai-soon{position:relative;z-index:2;min-height:60vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:2rem 1.2rem;gap:.75rem}
.ai-soon-ic{font-size:2.1rem;color:var(--primary,#4f7cff);opacity:.9}
.ai-soon-title{font-size:clamp(1.05rem,3.6vw,1.7rem);font-weight:800;line-height:1.9;
  color:var(--text,#e9edf5);max-width:34rem;margin:0}
.ai-soon-sub{font-size:.85rem;line-height:2;color:var(--muted,#8b93a7);max-width:30rem;margin:0}

/* الزرّ الدائري للمظهر (بديل شريط الأزرار) — ثابت، بلا دوران (7.105) */
.theme-dot{width:30px;height:30px;flex:0 0 30px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--border,#2a3040);background:var(--card,#11151f);
  display:grid;place-items:center;padding:0;
  transition:border-color .15s ease, background-color .15s ease}
.theme-dot:hover{border-color:var(--primary,#4f7cff)}
.theme-dot:focus-visible{outline:2px solid var(--primary,#4f7cff);outline-offset:2px}
.theme-dot-in{width:15px;height:15px;border-radius:50%;
  background:linear-gradient(90deg,var(--text,#e9edf5) 0 50%,transparent 50% 100%);
  box-shadow:inset 0 0 0 1.5px var(--text,#e9edf5)}
.theme-dot.is-light .theme-dot-in{
  background:linear-gradient(90deg,transparent 0 50%,var(--text,#14161d) 50% 100%)}
@media (prefers-reduced-motion:reduce){.theme-dot{transition:none}}

/* ============================================================
   ★ تكيّف الأجهزة الضعيفة — يُفعَّل فقط تحت [data-perf="low"]
   ------------------------------------------------------------
   السمة تضعها CVX.Device في core.js بعد قياس الذاكرة والأنوية
   ونوع الشبكة و«توفير البيانات». الجهاز القوي لا يمرّ من هنا
   إطلاقاً: لا قاعدة واحدة تنطبق عليه، فتجربته كما هي حرفياً.

   ما يُخفَّف: الضبابية (backdrop-filter وfilter:blur) وهي أغلى
   ما يُرسم على GPU ضعيف، والظلال العميقة، ومدد الانتقالات.
   ما لا يُمسّ: الألوان والتباين والتخطيط — التخفيف للأداء لا
   لتشويه الواجهة.
   ============================================================ */
:root[data-perf="low"] *,
:root[data-perf="low"] *::before,
:root[data-perf="low"] *::after{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
:root[data-perf="low"] .bg-scene,
:root[data-perf="low"] .bg-scene *{filter:none !important;opacity:.5}
:root[data-perf="low"] *{
  box-shadow:none !important;
  transition-duration:.12s !important;
  animation-duration:.2s !important;
}
/* عناصر تعتمد الظلّ للفصل البصري لا للزينة: يُستبدل بحدّ خفيف
   بدل إلغائه، وإلا ذابت البطاقة في الخلفية على الأجهزة الضعيفة. */
:root[data-perf="low"] .card,
:root[data-perf="low"] .pf-card,
:root[data-perf="low"] .cvx-modal,
:root[data-perf="low"] .sidebar,
:root[data-perf="low"] .bottom-nav{
  border:1px solid var(--border,rgba(128,138,160,.28)) !important;
}
/* الحركات الزخرفية تتوقّف تماماً — لا قيمة لها مقابل كلفتها هنا */
:root[data-perf="low"] .skeleton{animation:none !important;opacity:.55}
:root[data-perf="low"] [data-decorative],
:root[data-perf="low"] .au-vid{display:none !important}

/* ============================================================
   ★ صفحة القوالب — تخفيف يشمل الأجهزة «المتوسطة» ولمسية الشاشة
   ------------------------------------------------------------
   لماذا لا تكفي قواعد [data-perf="low"] أعلاه:
   الطبقة تُحسب من deviceMemory وhardwareConcurrency، وكلاهما يكذب
   على الهواتف الرخيصة — كثير منها لا يُعلن deviceMemory إطلاقاً
   ويُعلن ٨ أنوية. فيخرج التصنيف «متوسط» أو «قوي» لجهاز يختنق
   فعلاً، ولا تنطبق عليه ولا قاعدة من قواعد التخفيف.

   وكلفة هذه الصفحة بالذات ليست في الفيديو وحده: كل بطاقة تحمل
   أربع مساحات backdrop-filter (الشارة، الإتاحة، عدّاد التنزيل،
   زرّ التحميل) وطبقتَي repeating-linear-gradient. مع ١٢ بطاقة
   تصير ٤٨ مساحة ضبابية تُعاد تركيبتها مع كل إطار تمرير — وهذا
   وحده يكفي لتقطيع التمرير على معالج رسوميات ضعيف.

   القاعدة: الضبابية زينة فوق صورة مزدحمة أصلاً — إسقاطها لا يكاد
   يُرى، والخلفية والحدّ يبقيان فيبقى التباين كما هو.
   ============================================================ */

/* لا ضبابية إلا على جهاز قويّ بمؤشّر دقيق (سطح مكتب فعلياً) */
@media (hover: none), (pointer: coarse) {
  .pf-type, .pf-tier, .pf-dls, .pf-card [data-dl] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
:root[data-perf="mid"] .pf-type,
:root[data-perf="mid"] .pf-tier,
:root[data-perf="mid"] .pf-dls,
:root[data-perf="mid"] .pf-card [data-dl] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* الشارات كانت تتّكل على الضبابية لفصلها عمّا تحتها؛ بلا ضبابية
   تحتاج خلفية أعتم قليلاً كي يبقى النصّ مقروءاً فوق أي إطار فيديو. */
@media (hover: none), (pointer: coarse) {
  .pf-type { background: rgba(14, 18, 26, .58); }
  .pf-dls  { background: rgba(14, 18, 26, .55); }
  .pf-card [data-dl] { background: rgba(14, 18, 26, .55); }
}
:root[data-perf="mid"] .pf-type { background: rgba(14, 18, 26, .58); }
:root[data-perf="mid"] .pf-dls  { background: rgba(14, 18, 26, .55); }
:root[data-perf="mid"] .pf-card [data-dl] { background: rgba(14, 18, 26, .55); }

/* ★ أكبر مكسب في الصفحة: البطاقة خارج الشاشة لا تُرسم إطلاقاً.
   content-visibility تُسقط تخطيطها ورسمها معاً، وcontain-intrinsic-size
   يحجز ارتفاعها فلا يقفز شريط التمرير ولا يتغيّر طول الصفحة.
   لا أثر بصري: ما إن تقترب البطاقة حتى تُرسم كاملة. */
.pf-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 230px;
}

/* الشبكة الزرقاء خلف الفيديو: طبقتان repeating-linear-gradient تُرسمان
   لكل بطاقة. الفيديو أو الـposter يغطّيهما خلال جزء من الثانية، فلا
   يراهما أحد على جهاز بطيء إلا وميضاً. تُستبدل بلون مسطّح هناك. */
:root[data-perf="low"] .pf-card,
:root[data-perf="mid"] .pf-card {
  background: linear-gradient(160deg, #0b1017 0%, #10151d 100%) !important;
}

/* «تقليل الحركة» قرار وصولٍ لا أداء: يُحترم على كل الأجهزة */
:root[data-motion="reduced"] *{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

/* بطاقة قالب بلا مقطع نشط — الحالة الافتراضية الآن على كل الأجهزة.
   إطار ساكن خفيف يشغل مكان المقطع فلا تقفز البطاقة عند تحضيره. */
.pf-card video{background:var(--surface-2,rgba(120,130,160,.10))}
.pf-card video[data-state="idle"]{opacity:0}
.pf-card video[data-state="ready"]{opacity:1;transition:opacity .12s ease}
:root[data-perf="low"] .pf-card video[data-state="ready"]{transition:none}
/* زر «شغّل المعاينة».
   البطاقة الظاهرة تشتغل وحدها على الأجهزة القادرة، فلا حاجة للزر
   هناك. يظهر حيث لا تشغيل تلقائي: الأجهزة الضعيفة، وأجهزة اللمس
   التي لا تحويم فيها. */
.pf-card .pf-play{
  position:absolute;inset:auto auto 8px 8px;z-index:2;
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
  display:none;place-items:center;
  background:rgba(16,18,26,.62);color:#fff;font-size:12px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .12s ease, opacity .12s ease}
:root[data-perf="low"] .pf-card .pf-play{display:grid}
@media (hover:none){.pf-card .pf-play{display:grid}}
.pf-card .pf-play:hover{background:rgba(16,18,26,.82)}
/* أثناء التشغيل يخفت الزر فلا يزاحم الصورة (الصنف يضعه الـJS) */
.pf-card.playing .pf-play{opacity:.35}
.pf-card .pf-play:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* ============================================================
   أدوات كلمة المرور في الإعدادات — إظهار · توليد · نسخ · قوّة
   الغاية: أن يرى المستخدم ما يكتبه وينسخه ويحتفظ به. المنصة بلا
   استعادة بالبريد، فإخفاء الحقل عنه يزيد فرصة ضياع حسابه لا أمانه.
   ============================================================ */
.pw-row{display:flex;align-items:stretch;gap:.4rem}
.pw-row input{flex:1;min-width:0}
.pw-ic{
  flex:none;width:40px;border-radius:var(--radius-sm);
  display:grid;place-items:center;cursor:pointer;
  background:var(--card);border:1px solid var(--border);
  color:var(--muted);font-size:.85rem;transition:var(--tr)}
.pw-ic:hover{color:var(--primary);border-color:var(--border-h);background:var(--card-h)}
.pw-ic:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pw-ic[aria-pressed="true"]{color:var(--primary);border-color:var(--border-h)}

.pw-meter{height:4px;border-radius:999px;background:var(--card-h);overflow:hidden;margin:.55rem 0 .2rem}
.pw-meter>span{display:block;height:100%;width:0;border-radius:999px;transition:width .25s ease, background .12s ease;background:var(--danger)}
.pw-meter[data-level="2"]>span{background:var(--gold)}
.pw-meter[data-level="3"]>span{background:var(--primary)}
.pw-meter[data-level="4"]>span{background:var(--success)}

/* ============================================================
   طابور رفع الملفات — حتى ثلاثة ملفات، ولكلٍّ تفاصيله
   البطاقة المحدَّدة هي التي تعرض الحقول أسفلها، فالتمييز البصري
   بينها وبين البقية هو ما يجعل «واحداً تلو الآخر» مفهوماً بلا شرح.
   ============================================================ */
.up-queue{display:flex;flex-direction:column;gap:.45rem;margin-top:.6rem}
.up-item{
  display:flex;align-items:center;gap:.6rem;width:100%;
  padding:.6rem .75rem;border-radius:var(--radius-sm);
  background:var(--card);border:1px solid var(--border);
  color:var(--text);font-size:var(--text-sm);text-align:start;
  cursor:pointer;transition:border-color .12s ease, background .12s ease}
.up-item:hover{border-color:var(--border-h);background:var(--card-h)}
.up-item.on{border-color:var(--primary);background:var(--primary-dim)}
.up-item.on .ui-t{color:var(--primary);font-weight:700}
.up-item>i{flex:none;color:var(--muted);font-size:.95rem}
.up-item.on>i{color:var(--primary)}
.up-item .ui-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-item small{flex:none;color:var(--muted);font-size:.68rem;font-variant-numeric:tabular-nums}
.up-item .ui-x{
  flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  color:var(--muted);font-size:.72rem;transition:var(--tr)}
.up-item .ui-x:hover{background:var(--danger);color:#fff}
.up-item:focus-visible,.up-item .ui-x:focus-visible{outline:2px solid var(--primary);outline-offset:2px}