/* ═══════════════════════════════════════════════════════════════════════
   ربط — طبقة نظام التصميم. تُحمَّل بعد styles.css فتغلبه.

   مصدرها الوحيد: design/README.md (حزمة التسليم من التصميم). القيم هنا
   منقولة حرفياً من جدول الرموز هناك، ولا تُخترع قيمة جديدة في هذا الملف.

   طبقتان بقصد:
     ١. لوحة ربط ‎--r-*‎ — أسماء التصميم كما هي، مصدر الحقيقة.
     ٢. مطابقة على رموز styles.css الموروثة، فتنقلب الواجهة كلها دفعة
        واحدة بدل مطاردة كل مكوّن على حدة.

   قرار المالك (٢٠٢٦-٠٩-٠٥): الأساسي هو ‎#0E7A47‎ لا ‎#17A05F‎. الأبيض على
   الزاهي يعطي 3.37:1 وهو راسب بـWCAG AA، والأغمق يعطي 5.4:1. الزاهي يبقى
   موجوداً باسم ‎--r-primary-vivid‎ للتعبئات غير النصّية وحدها (المفاتيح،
   أشرطة التقدّم، النقاط) حيث لا نص أبيض فوقه.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── لوحة ربط: منقولة من جدول الرموز في التسليم ───────────────── */
  --r-primary:        #0E7A47;   /* الأساسي بعد قرار التباين */
  --r-primary-vivid:  #17A05F;   /* تعبئة غير نصّية فقط */
  --r-primary-deeper: #0B5F37;   /* الضغط، ونهاية التدرّج */
  --r-primary-wash:   #E1FBD6;
  --r-primary-wash-2: #F4FFF0;
  --r-lime:           #75B94E;   /* على الأسطح الغامقة وحدها */

  --r-ink:            #262626;
  --r-ink-2:          #3D403B;
  /* سطح الشريط الجانبي — **ثابت الدكانة في الوضعين**. كان يقرأ ‎--r-ink‎،
     وهي في الوضع الليلي لون النص الفاتح — فانقلب الشريط أبيضَ عليه نصٌّ
     أبيض. اللون هنا لا هناك، لأن الشريط سطحٌ لا حبر. */
  --r-rail:           #262626;
  --r-rail-line:      rgba(255,255,255,.1);
  /* الحبر حين يكون **سطحاً** لا نصاً: لوح العلامة في الدخول، وبطاقة
     التجربة، وخلفية الصور الرمزية الليمونية. يبقى داكناً في الوضعين
     لأن ما فوقه أبيض دائماً. */
  --r-ink-fixed:      #262626;
  --r-ink-3:          #4E5A48;
  --r-muted:          #6B6E69;   /* أخفت رمادي مقروء — لا تنزل تحته لنص */
  --r-muted-2:        #A7ACA5;

  --r-line-faint:     #F7F8F6;
  --r-line:           #EFF0ED;
  --r-line-2:         #E7E4DE;
  --r-line-3:         #DFE1DD;

  --r-surface:        #FFFFFF;
  --r-surface-alt:    #FCFDFB;
  --r-bg:             #F6F5F2;
  --r-bg-2:           #F2F3F1;

  --r-danger:         #C2452F;
  --r-danger-wash:    #FDE8E4;
  --r-warn:           #B8862B;
  --r-warn-text:      #7A5E1E;
  --r-warn-wash:      #FFF9E8;
  --r-warn-line:      #EFDFC2;
  --r-chart-blue:     #3E63C8;

  /* ── الخطوط: العناوين Cairo، الأرقام IBM Plex Mono، الشعار Quicksand،
        والمتن خط النظام العربي. مستضافة محلياً في /fonts. ────────── */
  --font-display: "Cairo", "SF Arabic", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --font-brand:   "Quicksand", system-ui, sans-serif;

  /* ── المطابقة على رموز styles.css ─────────────────────────────── */
  --brand:        var(--r-primary);
  --brand-mid:    var(--r-primary-vivid);
  --brand-deep:   var(--r-primary);
  --brand-ink:    var(--r-primary);
  --brand-soft:   var(--r-primary-wash);
  --brand-tint:   var(--r-primary-wash-2);
  --badge-fill:   var(--r-primary);
  --brand-grad-end: var(--r-primary-deeper);
  --brand-glow:   14,122,71;

  --ok:           var(--r-primary-vivid);
  --ok-ink:       var(--r-primary);
  --danger:       var(--r-danger);
  --danger-ink:   var(--r-danger);
  --tick-read:    var(--r-chart-blue);

  --ink:          var(--r-ink);
  --grey:         var(--r-muted-2);
  --white:        #FFFFFF;

  --bg:           var(--r-bg);
  --surface:      var(--r-surface);
  --surface-2:    var(--r-bg-2);
  --border:       var(--r-line);
  --text:         var(--r-ink);
  --text-soft:    var(--r-muted);

  --radius:       18px;   /* بطاقة الويب في التسليم */
  --radius-sm:    12px;

  --viz-a:        var(--r-primary);
  --viz-b:        var(--r-chart-blue);
  --viz-grid:     var(--r-line);

  /* نظام العلامة يسمّي خط المتن صراحةً: IBM Plex Sans Arabic وزن 400
     وتباعد أسطر 1.9، وCairo للعناوين الكبيرة وحدها. مستضاف محلياً. */
  --font: "IBM Plex Sans Arabic", "SF Arabic", "Segoe UI", system-ui,
          -apple-system, Tahoma, sans-serif;
}

/* ── الوضع الليلي (W29) ──────────────────────────────────────────
   لم يعد مشتقّاً: حزمة التسليم صارت تحمل شاشة W29 بتوكناتها الصريحة،
   وهذه القيم منقولة منها حرفاً بحرف — خلفية ‎#0C0E11‎، سطح ‎#1A1D23‎،
   حدّان ‎#2C313A‎ و‎#39404A‎، نص ‎#F2F3F5‎ وثانويّه ‎#A0A6B0‎، والأخضر
   يفتح إلى ‎#3DD68C‎ والأحمر إلى ‎#FF6B5E‎ ليبقى التباين مقبولاً على
   الأسطح الداكنة.

   «ثلاث درجات أسطح فقط» شرط في التسليم لا ذوق: خلفية، سطح، وحدود.
   فما نضيف درجة رابعة هنا مهما احتاجها مكوّن — يستعمل الحدّ الأفتح
   ‎--r-line-2‎ بدلها. ───────────────────────────────────────────── */
:root[data-theme="dark"], html.dark, body.dark {
  --r-bg:          #0C0E11;
  --r-bg-2:        #1A1D23;
  --r-surface:     #1A1D23;
  --r-surface-alt: #1A1D23;
  --r-line:        #2C313A;
  --r-line-2:      #39404A;
  --r-line-3:      #39404A;
  --r-line-faint:  #2C313A;

  --r-ink:         #F2F3F5;
  --r-ink-2:       #F2F3F5;
  --r-muted:       #A0A6B0;
  --r-muted-2:     #A0A6B0;

  /* الشريط في الليل يذوب في الخلفية بحدٍّ رفيع — ثلاث درجات أسطح فقط. */
  --r-rail:        #0C0E11;
  --r-rail-line:   #2C313A;

  --r-primary-vivid: #3DD68C;
  --r-danger:      #FF6B5E;
  --r-danger-wash: #2A1714;

  --brand-ink:    #3DD68C;
  --brand-mid:    #3DD68C;
  --brand-soft:   #123322;
  --brand-tint:   #0F2A1C;
  --brand-glow:   61,214,140;

  --ok:           #3DD68C;
  --ok-ink:       #3DD68C;
  --danger:       #FF6B5E;
  --danger-ink:   #FF6B5E;

  /* الأسطح تُعاد هنا صراحةً: ‎--bg: var(--r-bg)‎ في ‎:root‎ لا يكفي، لأن
     ‎:root[data-theme="dark"]‎ في styles.css أقوى تخصيصاً فيغلبه — فكان
     الوضع الليلي يعرض أسطح تجوال الزرقاء الرمادية تحت علامة ربط. */
  --bg:           var(--r-bg);
  --surface:      var(--r-surface);
  --surface-2:    var(--r-bg-2);
  --border:       var(--r-line);

  --ink:          #F2F3F5;
  --text:         #F2F3F5;
  --text-soft:    #A0A6B0;
  --grey:         #A0A6B0;

  --warn:         #E0B75A;
  --warn-text:    #E0B75A;
  --warn-wash:    #2A2416;
  --warn-line:    #4A3F22;

  --viz-a:        #3DD68C;
  --viz-b:        #6E90E0;
  --viz-grid:     #2C313A;

  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.35);
}

/* ── قواعد خاصة بالتطبيق ─────────────────────────────────────────── */
.badge.confirm, .badge.late { background: var(--brand-soft); }

/* الأرقام والأوقات والعملات والمعرّفات: مونو ولاتيني الاتجاه دائماً.
   التسليم يعدّها شرطاً لا تحسيناً — رقم عربي داخل نص RTL بلا هذا
   الغلاف ينعكس ترتيبه على الشاشة. */
.mono, .num, [data-mono] {
  font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

#screen-login .login-card .brand h1 {
  font-family: var(--font-display); letter-spacing: -.01em;
}

body.demo #screen-login .login-card::before {
  content: "نسخة تجريبية · بيانات وهمية";
  display: block; text-align: center; font-size: 12px; font-weight: 600;
  color: var(--r-primary); background: var(--r-primary-wash);
  border-radius: 999px; padding: 4px 12px; margin: 0 auto 14px; width: max-content;
}
.demo-creds {
  margin-top: 14px; font-size: 13px; color: var(--text-soft);
  background: var(--surface-2); border-radius: 12px; padding: 10px 12px; line-height: 1.8;
}
.demo-creds b { color: var(--text); font-family: var(--font-mono); direction: ltr;
  unicode-bidi: isolate; }

/* ── بداية الطريق لشركة جديدة ─────────────────────────── */
.hub-start {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.hub-start-head { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; }
.hub-start-head small { color: var(--text-soft); font-size: 12px; }
/* الخطوات نفسها انتقلت لصفحة «الإعداد الأول»؛ ما بقى هنا إلا رابطها
   وشريط تقدّمها. */
a.hub-start-head { color: inherit; text-decoration: none; }

/* ── تحذير الاشتراك ─────────────────────────────────────── */
.plan-warn {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: var(--r-warn-wash); border: 1px solid var(--r-warn-line);
  color: var(--r-warn-text); border-radius: 14px; padding: 12px 16px;
  margin-bottom: 14px; font-size: 14px; font-weight: 500;
}
.plan-warn.hot { background: var(--r-danger-wash); border-color: #F3C4BA;
  color: var(--r-danger); }
.plan-warn .btn { padding: 7px 16px; font-size: 13px; }

/* ═══ شاشات الدخول — W11 · W11b من التسليم ═══════════════════════════
   تقسيمة: لوحة علامة غامقة 520px + منطقة نموذج عرضها 404px في الوسط.
   اللوحة ثابتة ونسخة واحدة تظهر مع أي شاشة .login، فلا تتكرّر أربع مرات.
   ولا تدرّج ولا صورة في أي مكان: التسليم ينصّ أن التصميم مبنيّ على
   الأسطح والخطّ وحدهما، والخلفية الخضراء المتدرّجة السابقة كانت من تجوال. */
.login { background: var(--r-bg); padding-block: 40px; }

.lg-brand { display: none; }
/* تظهر متى كانت أي شاشة دخول نشطة — بلا JS. وعلى الهاتف لا تظهر أصلاً:
   عمود ثابت بعرض 520px فوق شاشة 375px يغطّيها كاملة ويقصّ عنوانه. */
@media (min-width: 900px) {
  body:has(.screen.login.active) .lg-brand {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset-block: 0; inset-inline-start: 0;
    width: 520px; padding: 44px; background: var(--r-ink-fixed); z-index: 2;
  }
  body:has(.screen.login.active) .login { padding-inline-start: 520px; }
}

.lg-lock { display: flex; align-items: center; gap: 8.5px; }  /* ربع ضلع المربّع */
.lg-lock img { border-radius: 11px; }
/* الشعار النصّي واحد: «rabet» لاتينياً بخط العلامة، بكل شاشة وبكل لغة.
   الاسم العربي «ربط» يبقى بالنصّ الجاري لا بالعلامة، حتى لا يظهر
   الاسم مرّتين بلغتين جنب بعض على نفس الشاشة. */
.wordmark { font-family: var(--font-brand); font-weight: 700;
  direction: ltr; unicode-bidi: isolate; text-transform: lowercase;
  letter-spacing: -.3px; }

.lg-word { font-size: 24px; color: #fff; }

.lg-pitch h2 { font-family: var(--font-display); font-size: 38px; font-weight: 700;
  line-height: 1.3; letter-spacing: -1.2px; color: #fff; margin-bottom: 26px; }
.lg-pitch ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.lg-pitch li { display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.72); }
.lg-pitch li::before { content: "✓"; flex: none; color: var(--r-lime); font-weight: 700; }

.lg-avs { display: flex; margin-bottom: 9px; }
.lg-avs span { width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--r-lime); color: var(--r-ink-fixed);
  border: 2px solid var(--r-ink-fixed); }
.lg-avs span + span { margin-inline-start: -10px; }
.lg-social p { font-size: 12.5px; color: rgba(255,255,255,.5); }

/* منطقة النموذج: 404px بلا بطاقة عائمة على الشاشة العريضة — التسليم يعرّف
   البطاقة بحدّ 1px لا بظل. */
.login-card { max-width: 404px; }
@media (min-width: 900px) {
  .login-card { box-shadow: none; background: none; padding: 0; }
  .login .brand { text-align: start; margin-bottom: 22px; }
  .login .brand-logo { display: none; }   /* اللوحة تحمله */
  .login .brand h1 { font-family: var(--font-display); font-size: 23px;
    letter-spacing: -.7px; }
  .login .brand p { font-size: 13px; line-height: 1.9; }
}
@media (max-width: 899px) {
  .login-card { border: 1px solid var(--border); box-shadow: none; }
}

/* حقل نشط: حدّ بلون العلامة الزاهي واستدارة 14px — من التسليم حرفياً. */
.login .field input { border-radius: 14px; }
.login .field input:focus { border-color: var(--r-primary-vivid);
  border-width: 1.5px; outline: none; }

/* خانات الرمز: مربّعة تماماً، والفراغة تحمل نقطة رمادية لا فراغاً. */
.otp-boxes { gap: 9px; }
.otp-cell { height: auto; aspect-ratio: 1; font-family: var(--font-mono);
  font-size: 24px; font-weight: 600; border-radius: 14px; }
.otp-cell:not(.on)::before { content: "·"; color: var(--r-line-3); }
.otp-cell.cur { border-color: var(--r-primary-vivid); box-shadow: none; }

/* زر معطّل: لا شفافية — لون صريح يقول «مو جاهز» بدل زر باهت يبدو معطوباً. */
.login .btn-primary:disabled { background: var(--r-bg-2); color: var(--r-muted-2);
  opacity: 1; }

.lg-link { font: inherit; color: var(--r-primary); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline; }
.lg-note { margin-top: 12px; font-size: 12.5px; line-height: 1.8;
  color: var(--r-warn-text); background: var(--r-warn-wash);
  border: 1px solid var(--r-warn-line); border-radius: 14px; padding: 10px 13px; }
.lg-count { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate;
  color: var(--r-primary); font-weight: 600; }

/* الحقل الموروث تعبئته ‎--surface-2‎ وحدّه ‎--border‎ — بعد لوحة ربط صار
   الاثنان رماديين متقاربين (#F2F3F1 على #EFF0ED) فاختفى الحدّ وبدا الحقل
   لطخة بلا إطار. التسليم يعرّف الحقل بحدّ على أبيض. مقصور على الدخول:
   باقي الشاشات لم تُعَد بعد، وتغيير الحقل عالمياً يسبق تصميمها. */
.login .field input {
  background: var(--r-surface); border: 1px solid var(--r-line-3);
  padding: 14px 16px;
}
.login .field input::placeholder { color: var(--r-muted-2); }
/* الإيميل والرقم بيانات لاتينية: مونو واتجاه ثابت مهما كان النص حوله. */
#in-phone { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate;
  text-align: start; }
/* التسليم: «البطاقة بلا ظل — تُعرّف بحدّ 1px». والهالة كانت إرثاً من تجوال. */
.login .btn-primary { box-shadow: none; border-radius: 999px; padding: 15px; }

/* بالوضع الليلي تقترب اللوحة (#262626) من خلفية النموذج فيضيع الفاصل الذي
   تقوم عليه التقسيمة كلها. حدّ صريح بدل الاعتماد على فرق لونين غامقين.
   بالوضع الفاتح لا يلزم: غامق على فاتح يفصل نفسه. */
:root[data-theme="dark"] .lg-brand, html.dark .lg-brand, body.dark .lg-brand {
  border-inline-end: 1px solid var(--r-line);
}

/* ═══ الشريط الجانبي — مواصفات التسليم ══════════════════════════════
   232px على ‎#262626‎، والعناصر 11×14 باستدارة 12 وحجم 13.5. الخامل
   rgba(255,255,255,.62) والنشط تعبئة خضراء ونص أبيض بوزن 600.
   يُطبَّق على الشاشة العريضة وحدها: على الهاتف الشريط سفلي وأبيض كما هو. */
@media (min-width: 1024px) {
  .tabbar { width: 232px; background: var(--r-rail);
    border: 0; border-inline-end: 1px solid var(--r-rail-line);
    padding: 20px 0; }

  .rail-logo { display: flex; align-items: center; gap: 8.5px; padding: 0 20px 22px; }
  .rail-logo img { border-radius: 11px; }
  .rail-logo .wordmark { font-size: 24px; color: #fff; }

  /* الفاصل هامش وحدّ، لا حشوة إضافية: كانت الحشوة تُكتب مرتين فيتضخّم كل
     عنوان قسم وتُدفع آخر الصفحات خلف بطاقة المستخدم الملتصقة. */
  .rail-sec { color: rgba(255,255,255,.38); font-size: 11px; font-weight: 700;
    padding: 6px 20px 5px; margin-top: 12px; }
  .rail-sec:not(:first-of-type) { border-top: 1px solid var(--r-rail-line);
    margin-inline: 14px; padding-inline: 6px; padding-top: 11px; }

  .tabbar .tab { padding: 11px 14px; border-radius: 12px; font-size: 13.5px;
    color: rgba(255,255,255,.62); margin-inline: 14px; width: auto; }
  .tabbar .tab i { color: inherit; }
  .tabbar .tab:hover { background: rgba(255,255,255,.06); color: #fff; }
  .tabbar .tab.active { background: var(--r-primary-vivid); color: #fff; font-weight: 600; }
  /* شارة العدّ: حمراء لأنها تقول «متأخر» لا «جديد» — من التسليم. */
  .tabbar .tab .tab-badge { background: var(--r-danger); color: #fff;
    font-family: var(--font-mono); font-size: 11px; border-radius: 999px;
    padding: 1px 6px; min-width: 0; }

  /* حبّة الأيقونة الخضراء الفاتحة مصمّمة للشريط السفلي الأبيض؛ على صفّ
     أخضر غامق تصير لطخة حول الأيقونة. تُنزع هنا وحدها. */
  .tabbar .tab.active i { background: none; }

  /* ‎margin-top:auto‎ كما ينصّ التسليم، بلا التصاق. جُرّب الالتصاق أولاً
     فغطّى آخر صفحة في الشريط متى طال عن الشاشة — بند تنقّل مخفيّ تحت
     بطاقة ثابتة أسوأ من بند يُمرَّر إليه. الآن يثبت في القاع متى اتّسع
     الشريط، ويأتي بعد آخر بند متى لم يتّسع. */
  .rail-foot { border-top: 1px solid rgba(255,255,255,.1); margin-inline: 14px;
    padding-top: 12px; }
  .rail-me { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
  .rail-av { flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; background: var(--r-lime);
    color: var(--r-ink-fixed); font-weight: 700; font-size: 14px; }
  .rail-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .rail-who b { color: #fff; font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-who small { color: rgba(255,255,255,.5); font-size: 11px; }
  .rail-out { flex: none; background: none; border: 0; cursor: pointer;
    color: rgba(255,255,255,.5); padding: 6px; border-radius: 8px; display: grid;
    place-items: center; }
  .rail-out:hover { color: var(--r-danger); background: rgba(255,255,255,.06); }
}

/* ═══ الملاحظة الداخلية ══════════════════════════════════════════════
   لا فقاعة ولا اتجاه: الملاحظة ليست رسالة، فلا تأخذ شكل رسالة. اللون
   الدافئ من التسليم (ملاحظات داخلية · تنبيه تجربة)، والعنوان مكتوب لا
   مُلمَّح — «لا يراها العميل» يجب أن تُقرأ لا أن تُستنتج من لون. */
.chat-note {
  align-self: stretch; max-width: 100%;
  background: var(--r-warn-wash); border: 1px solid var(--r-warn-line);
  border-radius: 14px; padding: 10px 13px; margin: 2px 0;
  color: var(--r-warn-text);
}
.chat-note-h {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; margin-bottom: 5px; opacity: .85;
}
.chat-note .chat-txt { color: var(--text); font-size: 13.5px; line-height: 1.8; }
.chat-note .chat-meta { color: var(--r-warn-text); opacity: .8; }

/* المرسِل في وضع الملاحظة: الشريط كله يتلوّن، لا الزر وحده — الكاتب
   ينظر إلى ما يكتب لا إلى أيقونة في الطرف. */
.chat-composer.noting {
  background: var(--r-warn-wash);
  box-shadow: inset 0 0 0 1.5px var(--r-warn-line);
}
.chat-composer.noting #chat-note { color: var(--r-warn-text); }
.chat-composer.noting .chat-sendbtn { background: var(--r-warn); }

/* ═══ ملف العميل — W1، العمود الثالث ════════════════════════════════
   التسليم: 232 شريط + 340 طابور + مرن + 308 ملف. يظهر على العريض وحده. */
.chat-profile { display: none; }
@media (min-width: 1200px) {
  .page[data-page="chat"] .chat-pane {
    grid-template-columns: 340px minmax(0, 1fr) 308px;
  }
  .chat-profile:not([hidden]) {
    display: block; overflow-y: auto; padding: 18px;
    border-inline-start: 1px solid var(--border); background: var(--surface);
  }
}

.cp-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cp-av { width: 46px; height: 46px; border-radius: 50%; display: grid;
  place-items: center; background: var(--brand-soft); color: var(--brand-ink);
  font-weight: 700; font-size: 18px; }
.cp-head b { font-size: 15.5px; }
.cp-phone { font-size: 12.5px; color: var(--text-soft); }
.cp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.cp-tag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft); }
.cp-tag.on { background: var(--brand-soft); color: var(--brand-ink); }

/* الأرقام مونو لاتينية الاتجاه — شرط التسليم لكل رقم ووقت. */
.cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 14px 0; border-bottom: 1px solid var(--border); }
.cp-stat { display: flex; flex-direction: column; gap: 2px; }
.cp-stat b { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate;
  font-size: 19px; font-weight: 600; }
.cp-stat b i { font-style: normal; font-size: 12px; color: var(--text-soft); }
.cp-stat small { font-size: 11px; color: var(--text-soft); }

.cp-sec { padding: 14px 0; border-bottom: 1px solid var(--border); }
.cp-sec:last-child { border-bottom: 0; }
.cp-sec h4 { font-size: 11.5px; font-weight: 700; color: var(--text-soft);
  margin-bottom: 8px; }
.cp-sec > p { font-size: 13px; }
.cp-note { background: var(--r-warn-wash); border: 1px solid var(--r-warn-line);
  border-radius: 12px; padding: 9px 11px; margin-bottom: 7px; }
.cp-note span { display: block; font-size: 13px; line-height: 1.75; color: var(--text); }
.cp-note small { display: block; margin-top: 4px; font-size: 11px;
  color: var(--r-warn-text); }
.cp-empty { font-size: 12.5px; color: var(--text-soft); line-height: 1.8; }

/* أقسام الإدارة صارت بنوداً في الشريط الجانبي، فشريط الشرائح فوق الصفحة
   تكرارٌ لها — يختفي على الشاشة العريضة ويبقى على الهاتف حيث لا شريط
   جانبي أصلاً. */
@media (min-width: 1024px) {
  #admin-segs { display: none; }
}

/* ═══ W2 — بطاقات الرواتب الأربع ═════════════════════════════════════
   التسليم يضع أربعة أرقام فوق الجدول: المستحق، والخصومات، والمكافآت،
   والسلف. كانت بطاقةً واحدة بأحد عشر سطراً — صحيحة لكنها تُقرأ لا
   تُمسح، والمدير يفتح الشهر ليعرف رقماً واحداً أولاً. */
.pay-stats { display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pay-stat { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 16px; display: flex;
  flex-direction: column; gap: 3px; }
.pay-stat small { font-size: 11.5px; font-weight: 600; color: var(--text-soft); }
.pay-stat b { font-size: 25px; font-weight: 600; letter-spacing: -.01em;
  direction: ltr; unicode-bidi: isolate; }
.pay-stat span { font-size: 11.5px; color: var(--text-soft); line-height: 1.7; }
.pay-stat.bad b  { color: var(--r-danger); }
.pay-stat.good b { color: var(--r-primary); }

/* التفصيل يبقى، مطويّاً: هو ما يشرح لماذا صار الرقم هذا الرقم. */
.money-fold { margin-bottom: 14px; }
.money-fold > summary { cursor: pointer; list-style: none; display: inline-flex;
  align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--text-soft); padding: 7px 13px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); }
.money-fold > summary::-webkit-details-marker { display: none; }
.money-fold > summary::after { content: "⌄"; font-size: 14px; line-height: 1; }
.money-fold[open] > summary { margin-bottom: 10px; }
.money-fold[open] > summary::after { content: "⌃"; }

/* ‎#pay-totals‎ كان شبكةً بعمودين ليقف صندوق المجاميع (المحدود بـ480px)
   جنب بقية الكشف بدل شريط فارغ. لكن المجاميع صارت أربع بطاقات بعرض
   الصفحة، فبقاء الشبكة يحشرها في 480 فتلتفّ 2×2 ويبقى نصف العرض فارغاً.
   يعود كتلةً، والحدّ ينتقل إلى البطاقة المفصّلة نفسها — وهي علّة الحدّ
   الأصلية: تسميةٌ تبعد عن رقمها بعرض الصفحة. */
@media (min-width: 1024px) {
  #pay-totals { display: block; }
  .money-fold .money-card { max-width: 480px; }
}

/* ═══ الردود التلقائية (W4) ═══════════════════════════════════════ */
.bot-card { max-width: 620px; display: flex; flex-direction: column; gap: 16px; }
.bot-toggle { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }
.bot-toggle input { width: auto; margin-top: 3px; flex: none; }
.bot-toggle b { display: block; font-size: 14.5px; }
.bot-toggle small { display: block; font-size: 12.5px; color: var(--text-soft);
  line-height: 1.8; margin-top: 2px; }
.bot-h { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.bot-day { display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--border); }
.bot-day:first-child { border-top: 0; }
.bot-on { display: flex; align-items: center; gap: 9px; cursor: pointer;
  min-width: 120px; }
.bot-on input { width: auto; flex: none; }
.bot-on b { font-size: 13.5px; font-weight: 600; }
.bot-span { display: flex; align-items: center; gap: 8px; }
.bot-span input { width: auto; font-family: var(--font-mono); direction: ltr;
  padding: 8px 10px; font-size: 13.5px; }
.bot-span em { font-style: normal; color: var(--text-soft); }
.bot-day.off .bot-span { opacity: .45; }
.bot-closed { font-size: 11.5px; font-weight: 600; color: var(--r-warn-text);
  background: var(--r-warn-wash); border-radius: 999px; padding: 3px 10px; }
.bot-note { font-size: 12.5px; color: var(--text-soft); line-height: 1.9; }

/* ═══ التقارير والأداء (W5) ═══════════════════════════════════════ */
.srv-card { margin-top: 14px; }
.srv-ch { display: grid; grid-template-columns: 92px 1fr auto; align-items: center;
  gap: 12px; padding: 8px 0; }
.srv-ch-n { font-size: 13px; font-weight: 600; }
.srv-bar { height: 8px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; }
.srv-bar i { display: block; height: 100%; background: var(--r-primary);
  border-radius: 999px; }
.srv-ch-v { font-size: 12px; color: var(--text-soft); direction: ltr;
  unicode-bidi: isolate; }

.srv-table { display: flex; flex-direction: column; }
.srv-row { display: grid; grid-template-columns: minmax(120px, 1fr) 78px 78px 92px;
  gap: 10px; align-items: center; padding: 11px 0;
  border-top: 1px solid var(--border); font-size: 13.5px; }
.srv-row.head { border-top: 0; font-size: 11.5px; font-weight: 700;
  color: var(--text-soft); padding-bottom: 7px; }
.srv-row.me { font-weight: 600; }
.srv-row .mono { direction: ltr; unicode-bidi: isolate; }

/* ═══ تنبيهات الخزنة (W6) ═════════════════════════════════════════ */
.va-card { margin-bottom: 14px; }
.va-row { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0;
  border-top: 1px solid var(--border); }
.va-row:first-of-type { border-top: 0; }
.va-row > i { flex: none; display: grid; place-items: center; width: 28px;
  height: 28px; border-radius: 9px; background: var(--surface-2);
  color: var(--text-soft); }
.va-row.warn > i { background: var(--r-warn-wash); color: var(--r-warn-text); }
.va-t { display: block; font-size: 13.5px; line-height: 1.7; }
.va-row small { display: block; font-size: 12px; color: var(--text-soft);
  margin-top: 1px; }
.va-note { margin-top: 10px; font-size: 12px; color: var(--text-soft);
  line-height: 1.9; }

/* ═══ مرجع الصلاحيات (W7) ═════════════════════════════════════════ */
.pm-card { margin-top: 14px; }
.pm-desc { font-size: 12.5px; color: var(--text-soft); margin-bottom: 10px; }
.pm-levels { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pm-level { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.pm-level b { font-size: 13px; font-weight: 600; }
.pm-level .mono { font-size: 16px; font-weight: 600; direction: ltr;
  unicode-bidi: isolate; }
.pm-h { font-size: 11.5px; font-weight: 700; color: var(--text-soft);
  margin: 14px 0 6px; }
.pm-flags { display: flex; flex-direction: column; }
.pm-flag { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; }
.pm-flag:first-child { border-top: 0; }
.pm-flag .mono { color: var(--text-soft); direction: ltr; unicode-bidi: isolate; }
.pm-def { font-style: normal; font-size: 11px; color: var(--text-soft); }
.pm-note { margin-top: 14px; font-size: 12.5px; color: var(--text-soft);
  line-height: 1.9; }

/* ═══ العملاء والمكالمات (W8) ═════════════════════════════════════ */
/* أربع بطاقات لا ثلاث: «متوسط المدة» ينضاف يوم تصير مكالمة مردودة
   ويختفي بيوم بلا وحدة. `repeat(3,1fr)` العامّة كانت تكسر الرابعة
   لسطر لحالها بنص الشاشة. */
#calls-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* شريطا الشرائح فوق بعض: القناة والمقطع سؤالان مختلفان عن نفس الدليل،
   فيبقيان صفّين لا صفّاً واحداً مزدحماً يلتفّ بلا معنى. */
#cust-stages { margin-top: 8px; }

.ph-actions { display: flex; align-items: center; gap: 12px; }

/* ═══ الإعداد الأول (W9) ══════════════════════════════════════════ */
.su-wrap { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) {
  .su-wrap { grid-template-columns: 1fr 280px; align-items: start; }
}

.su-bar { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; }
.su-bar-t { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; }
.su-bar-t b { font-size: 15px; }
.su-bar-t span { font-family: var(--font-mono); font-size: 13px;
  color: var(--r-primary); font-weight: 700; }
.su-track { height: 7px; border-radius: 99px; background: var(--r-line);
  overflow: hidden; }
.su-track i { display: block; height: 100%; border-radius: 99px;
  /* التعبئة لا نصّ، فتاخذ الأخضر الحيّ */
  background: var(--r-primary-vivid); transition: width .35s ease; }

.su-step { display: flex; align-items: flex-start; gap: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px 17px; margin-bottom: 9px; }
.su-step.done { background: var(--r-primary-wash, rgba(14,122,71,.05));
  border-color: rgba(14,122,71,.22); }
.su-n { flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--r-line); color: var(--muted); }
.su-step.done .su-n { background: var(--r-primary); color: #fff; }
.su-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.su-b b { font-size: 14.5px; }
.su-detail { color: var(--r-primary); font-weight: 600; }
.su-hint { color: var(--muted); line-height: 1.65; }
.su-ok { flex: none; color: var(--r-primary); font-weight: 700; font-size: 13px;
  font-style: normal; align-self: center; }
.su-step .btn { flex: none; align-self: center; }

.su-trial { background: var(--r-ink-fixed); color: #fff; border-radius: var(--radius);
  padding: 18px; margin-bottom: 12px; text-align: center; }
.su-trial small { color: rgba(255,255,255,.62); display: block; }
.su-trial b { display: block; font-size: 40px; line-height: 1.15;
  font-family: var(--font-mono); color: var(--r-lime); }
.su-trial.hot b { color: #FFB4A2; }
.su-trial span { color: rgba(255,255,255,.72); font-size: 13px; }
.su-trial p { color: rgba(255,255,255,.62); font-size: 12.5px; line-height: 1.7;
  margin: 11px 0; }

.su-note { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; }
.su-note b { display: block; margin-bottom: 7px; }
.su-note p { color: var(--muted); font-size: 12.5px; line-height: 1.8;
  margin-bottom: 8px; }
.su-note p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════════
   الربط والقنوات — W12 · W13 · W16 · W18 · W20…W23

   القيم منقولة من التسليم لا مقرَّبة: نصف القطر ٨ / ١٢ / ١٦ / ٢٠ / ٩٩٩،
   والمسافات مضاعفات ٤، وخلفية مربّع القناة لون المنصّة بشفافية ١٢–١٣٪.
   ═══════════════════════════════════════════════════════════════════ */

/* قنوات التسليم التي لم تكن في اللوحة القديمة. الشفافية هي نفسها
   (١٢–١٣٪) لأن التسليم ينصّ عليها رقماً. */
:root {
  --ch-whatsapp_qr: var(--ch-whatsapp); --ch-whatsapp_qr-bg: var(--ch-whatsapp-bg);
  --ch-fb_comments: var(--ch-facebook); --ch-fb_comments-bg: var(--ch-facebook-bg);
  --ch-webchat:     var(--r-primary);   --ch-webchat-bg:     var(--r-primary-wash);
  --ch-calls:       var(--r-primary);   --ch-calls-bg:       var(--r-primary-wash);
}
.prov-logo[data-ch="whatsapp_qr"] { background: var(--ch-whatsapp_qr-bg); color: var(--ch-whatsapp_qr); }
.prov-logo[data-ch="fb_comments"] { background: var(--ch-fb_comments-bg); color: var(--ch-fb_comments); }
.prov-logo[data-ch="webchat"]     { background: var(--ch-webchat-bg);     color: var(--ch-webchat); }
.prov-logo[data-ch="calls"]       { background: var(--ch-calls-bg);       color: var(--ch-calls); }
.prov-logo.sm { width: 30px; height: 30px; border-radius: 9px; }

.prov-pill.prov-off,
.prov-pill.prov-idle { color: var(--text-soft); background: var(--surface-2); }
.prov-off .chan-dot  { background: var(--r-muted-2); }
.prov-idle .chan-dot { background: var(--r-line-3); }

/* ── القشرة ────────────────────────────────────────────────────── */
.chan-wrap { display: flex; flex-direction: column; gap: 16px; }
.chan-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.chan-head-t { flex: 1 1 260px; min-width: 0; }
.chan-head-t h4 {
  font-family: var(--font-display); font-size: 23px; font-weight: 700;
  letter-spacing: -.7px; margin: 0 0 2px;
}
.chan-head-a { display: flex; gap: 8px; flex: 0 0 auto; }

/* التبويبات الأربعة — خط سفلي أخضر للمفتوح، لا كبسولة ممتلئة: الكبسولة
   الممتلئة محجوزة للأزرار، وتبويبٌ يشبه زراً يُضغط بالغلط. */
.chan-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.chan-tabs::-webkit-scrollbar { display: none; }
.chan-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 10px 14px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-soft); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.chan-tab:hover { color: var(--text); }
.chan-tab.on { color: var(--brand-ink); border-bottom-color: var(--r-primary); }

.chan-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .chan-cols { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}
.chan-main, .chan-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chan-side .card { padding: 14px 16px; }
.chan-side h5, .chan-main h5 {
  font-size: 15px; font-weight: 700; margin: 0 0 8px;
  display: flex; align-items: baseline; gap: 8px;
}
.chan-side h5 .set-note, .chan-main h5 .set-note { font-weight: 400; }

/* ── بطاقات الإحصاء الأربع ─────────────────────────────────────── */
.chan-tally {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.tally {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.tally-w {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--text-soft);
}
.tally b { font-size: 26px; font-weight: 600; line-height: 1; }
.tally-ok    .chan-dot { background: var(--ok); }
.tally-warn  .chan-dot { background: var(--warn); }
.tally-ready .chan-dot { background: var(--r-line-3); }
.tally-off   .chan-dot { background: var(--danger); }
.tally-off   b { color: var(--danger-ink); }

/* ── البانر: سبب ← خطوة ← زر واحد ─────────────────────────────── */
.chan-banner {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 16px;
  background: var(--danger-wash); border: 1px solid var(--danger);
}
.chan-bang {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--danger); color: #fff;
}
.chan-banner-t { flex: 1 1 240px; min-width: 0; }
.chan-banner-t b { display: block; font-size: 14px; font-weight: 700; }
.chan-banner-t small {
  display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.7;
  color: var(--text-soft);
}
.chan-banner-a { display: flex; gap: 8px; flex: 0 0 auto; }

/* ── جدول القنوات ─────────────────────────────────────────────── */
.chan-table-card { padding: 0; overflow: hidden; }
.chan-table-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.chan-table-head h5 { margin: 0; }
.chan-table-head .toolbar { margin-inline-start: auto; }
.chan-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.chan-table { display: flex; flex-direction: column; }
.chan-tr {
  display: grid; align-items: center; gap: 12px; padding: 13px 18px;
  grid-template-columns: minmax(0, 2.4fr) 1.1fr .8fr 1fr auto;
  border-bottom: 1px solid var(--r-line-faint);
}
.chan-tr:last-child { border-bottom: 0; }
.chan-th {
  background: var(--r-surface-alt); font-size: 11.5px; font-weight: 600;
  color: var(--text-soft);
}
.chan-td-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chan-td-name b { display: block; font-size: 13.5px; font-weight: 600; }
.chan-td-name small {
  display: block; font-size: 11.5px; color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chan-td-act { text-align: end; }
.chan-tr .prov-pill { margin-inline-start: 0; }
.key-tr { grid-template-columns: minmax(0, 2fr) 1.2fr 1fr auto; }
.log-tr { grid-template-columns: minmax(0, 2.6fr) 1.1fr auto; }
.log-tr small { display: block; font-size: 11.5px; color: var(--text-soft); }
.chan-foot { padding: 12px 18px 14px; margin: 0; }
@media (max-width: 720px) {
  .chan-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .chan-th, .chan-td-last { display: none; }
}

/* ── اللوح الجانبي ────────────────────────────────────────────── */
.how-row { display: flex; gap: 10px; padding: 8px 0; }
.how-row + .how-row { border-top: 1px solid var(--r-line-faint); }
.how-n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 8px;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  background: var(--brand-soft); color: var(--brand-ink);
}
.how-row b { display: block; font-size: 13px; font-weight: 600; }
.how-row small { display: block; font-size: 11.5px; color: var(--text-soft); line-height: 1.7; }

.ready-row, .recv-row, .num-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
}
.ready-row + .ready-row, .recv-row + .recv-row, .num-row + .num-row {
  border-top: 1px solid var(--r-line-faint);
}
.ready-row > div, .num-row > div { flex: 1 1 auto; min-width: 0; }
.ready-row b, .num-row b { display: block; font-size: 13px; font-weight: 600; }
.ready-row small, .num-row small {
  display: block; font-size: 11.5px; color: var(--text-soft);
}
.recv-row .rail-av { width: 26px; height: 26px; font-size: 11px; }

.chan-url {
  display: block; padding: 9px 12px; border-radius: 12px; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  overflow-x: auto; white-space: nowrap;
}
.chan-url.wide { margin-bottom: 10px; }

.recent-row { display: flex; gap: 8px; padding: 8px 0; }
.recent-row + .recent-row { border-top: 1px solid var(--r-line-faint); }
.recent-row b { display: block; font-size: 12.5px; font-weight: 600; }
.recent-row small { font-size: 11px; color: var(--text-soft); }
.recent-error .chan-dot { background: var(--danger); }
.recent-link  .chan-dot { background: var(--ok); }
.recent-keys  .chan-dot { background: var(--warn); }
.recent-unlink .chan-dot { background: var(--r-muted-2); }

.chan-warn { border-color: var(--warn-line); background: var(--warn-wash); }
.chan-warn h5 { color: var(--warn-text); }

.linkish {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--brand-ink);
  margin-inline-start: auto;
}
.btn.danger, .btn-ghost.danger { color: var(--danger-ink); }
.btn.wide + .btn.wide { margin-top: 8px; }

/* ── حساب Meta ────────────────────────────────────────────────── */
.meta-id { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; }
.meta-av {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  background: var(--ch-facebook-bg); color: var(--ch-facebook);
}
.meta-id > div { flex: 1 1 auto; min-width: 0; }
.meta-id b { display: block; font-size: 15px; font-weight: 700; }
.meta-id small { display: block; font-size: 11.5px; color: var(--text-soft); }

/* ── إدارة قناة ───────────────────────────────────────────────── */
.chan-back { align-self: flex-start; margin-bottom: 2px; }
.chan-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.chan-stats > div {
  padding: 12px 14px; border-radius: 14px; background: var(--surface-2);
}
.chan-stats small { display: block; font-size: 11.5px; color: var(--text-soft); }
.chan-stats b { font-size: 18px; font-weight: 700; }

/* ── الكتالوج (W16): قائمة طولية واحدة مجمّعة، لا شبكة بطاقات ──── */
.cat-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.cat-q {
  flex: 1 1 180px; min-width: 0; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--r-line-2); background: var(--surface);
  color: var(--text); font: inherit; font-size: 13px;
}
.cat-q:focus { outline: 0; border-color: var(--r-primary-vivid); }
.cat-body { display: flex; flex-direction: column; gap: 18px; }
.cat-sec > h5 {
  display: flex; align-items: baseline; gap: 8px; font-size: 13px;
  font-weight: 700; color: var(--text-soft); margin: 0 0 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.cat-card {
  display: grid; align-items: center; gap: 12px; padding: 14px 0;
  grid-template-columns: auto minmax(0, 1fr) 150px auto;
}
.cat-card + .cat-card { border-top: 1px solid var(--r-line-faint); }
.cat-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cat-name b { font-size: 14px; font-weight: 700; }
.cat-name small { font-size: 11.5px; color: var(--text-soft); }
.cat-about {
  margin: 4px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--text-soft);
}
.cat-need small { display: block; font-size: 10.5px; color: var(--text-soft); }
.cat-need b { font-size: 12px; font-weight: 600; }
.prov-badge.on { background: var(--surface-2); color: var(--text-soft); }
@media (max-width: 760px) {
  .cat-card { grid-template-columns: auto minmax(0, 1fr); }
  .cat-need { grid-column: 2; }
  .cat-cta  { grid-column: 2; }
}

/* ── لوح الربط (W13) ──────────────────────────────────────────── */
.wiz-steps {
  display: flex; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0;
  flex-wrap: wrap;
}
.wiz-steps li {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 600; color: var(--text-soft);
}
.wiz-steps li span {
  width: 20px; height: 20px; border-radius: 999px; display: grid;
  place-items: center; font-size: 11px; background: var(--surface-2);
}
.wiz-steps li.on { color: var(--text); }
.wiz-steps li.on span { background: var(--r-primary); color: #fff; }

#wiz-ways { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.wiz-way {
  appearance: none; cursor: pointer; text-align: start; font: inherit;
  display: flex; flex-direction: column; gap: 5px; padding: 14px 16px;
  border-radius: 16px; border: 1px solid var(--r-line-2);
  background: var(--surface); color: var(--text);
}
.wiz-way.on { border-color: var(--r-primary-vivid); background: var(--brand-tint); }
.wiz-way-h { display: flex; align-items: center; gap: 7px; }
.wiz-way-h b { font-size: 14px; font-weight: 700; }
.wiz-way small { font-size: 12.5px; line-height: 1.75; color: var(--text-soft); }
.wiz-need { font-size: 11.5px; font-weight: 600; color: var(--brand-ink); }
.wiz-before { padding: 14px 16px; }
.wiz-req {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 0;
  font-size: 12.5px; line-height: 1.7; color: var(--text-soft);
}
.wiz-tick, .wiz-dot {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; margin-top: 2px;
}
.wiz-tick { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.wiz-dot  { background: var(--r-line-3); }
.wiz-foot { justify-content: flex-end; margin-top: 14px; }

/* ── QR (W18) ─────────────────────────────────────────────────── */
.qr-cols { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .qr-cols { grid-template-columns: 232px minmax(0, 1fr); } }
.qr-box {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--border);
}
.qr-art {
  width: 200px; height: 200px; display: grid; place-items: center;
  color: var(--r-ink-fixed); background: #fff; border-radius: 12px; padding: 6px;
}
.qr-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.qr-list { margin: 12px 0 0; padding-inline-start: 18px; }
.qr-list li { padding: 5px 0; font-size: 13px; }
.qr-list small { display: block; font-size: 11.5px; color: var(--text-soft); line-height: 1.7; }

/* ── حالة فارغة داخل بطاقة ────────────────────────────────────── */
.es-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 22px 20px;
}
.es-card b { font-size: 15px; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   التعليقات — W19 · S25

   ثلاثة أعمدة: المنشورات · التعليقات · لوح الرد. وعلى الهاتف عمودٌ
   واحد يتدرّج (S25): شريط منشور واحد فوق، والتعليقات تحته.
   ═══════════════════════════════════════════════════════════════════ */
.cmt-cols { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px)  { .cmt-cols { grid-template-columns: 260px minmax(0, 1fr); } }
@media (min-width: 1280px) { .cmt-cols { grid-template-columns: 260px minmax(0, 1fr) 300px; } }

.cmt-posts, .cmt-main, .cmt-reply {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
@media (max-width: 1279px) { .cmt-reply { grid-column: 1 / -1; } }

.cmt-search input {
  width: 100%; padding: 10px 14px; border-radius: 14px; font: inherit;
  font-size: 13px; border: 1px solid var(--r-line-2);
  background: var(--surface); color: var(--text);
}
.cmt-search input:focus { outline: 0; border-color: var(--r-primary-vivid); }
.cmt-filters { margin-inline-start: 0; }

.cmt-post-list {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
}
.cmt-post {
  appearance: none; border: 0; cursor: pointer; font: inherit; text-align: start;
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--r-line-faint);
}
.cmt-post:last-child { border-bottom: 0; }
.cmt-post.on { background: var(--brand-tint); }
.cmt-post-t { flex: 1 1 auto; min-width: 0; }
.cmt-post-t b {
  display: block; font-size: 12.5px; font-weight: 600; line-height: 1.5;
}
.cmt-post-t small {
  display: block; margin-top: 3px; font-size: 11px; color: var(--text-soft);
}
.cmt-thumb, .cmt-prev {
  flex: 0 0 auto; display: grid; place-items: center; position: relative;
  background: var(--surface-2); color: var(--text-soft); overflow: hidden;
}
.cmt-thumb { width: 36px; height: 36px; border-radius: 10px; }
.cmt-prev  { width: 62px; height: 62px; border-radius: 16px; }
.cmt-thumb img, .cmt-prev img { width: 100%; height: 100%; object-fit: cover; }
.cmt-prev-ch {
  position: absolute; inset-inline-end: -1px; inset-block-end: -1px;
  width: 20px; height: 20px; border-radius: 50%; display: grid;
  place-items: center; background: var(--surface); color: var(--text-soft);
  border: 1px solid var(--border);
}
.cmt-badge {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; background: var(--danger); color: #fff;
}
.cmt-kind {
  font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft);
}

/* ترويسة المنشور المحدد */
.cmt-head-card { padding: 14px 16px; }
.cmt-head-row { display: flex; align-items: flex-start; gap: 12px; }
.cmt-head-t { flex: 1 1 auto; min-width: 0; }
.cmt-head-t b { display: block; font-size: 14px; font-weight: 700; line-height: 1.6; }
.cmt-head-t small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-soft); }
.cmt-head-m { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--text-soft); }
.cmt-un { color: var(--danger-ink); font-weight: 600; }
.cmt-metrics {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--r-line-faint); font-size: 11.5px; color: var(--text-soft);
}
.cmt-metrics b { font-size: 13px; color: var(--text); }

/* التعليق نفسه */
.cmt-list { display: flex; flex-direction: column; gap: 10px; }
.cmt {
  display: flex; gap: 10px; padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px;
}
.cmt-new { border-inline-start: 3px solid var(--r-primary); }
.cmt-av {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--brand-soft); color: var(--brand-ink);
}
.cmt-body { flex: 1 1 auto; min-width: 0; }
.cmt-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cmt-meta b { font-size: 13px; font-weight: 600; }
.cmt-when, .cmt-src { font-size: 11px; color: var(--text-soft); }
.cmt-tag {
  font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
}
.tag-price { background: var(--brand-soft); color: var(--brand-ink); }
.tag-bad   { background: var(--danger-wash); color: var(--danger-ink); }
.tag-cust  { background: var(--warn-wash); color: var(--warn-text); }
.cmt-text { margin: 6px 0 0; font-size: 13px; line-height: 1.75; }
.cmt-answer {
  margin-top: 8px; padding: 9px 12px; border-radius: 14px;
  background: var(--brand-tint); border: 1px solid var(--brand-soft);
}
.cmt-answer b { display: block; font-size: 11px; font-weight: 600; color: var(--brand-ink); }
.cmt-answer span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.7; }
.cmt-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; align-items: center; }
.cmt-acts .linkish { margin-inline-start: 0; }

/* لوح الرد */
.cmt-reply-card textarea {
  width: 100%; margin: 10px 0; padding: 12px 14px; border-radius: 16px;
  font: inherit; font-size: 13px; line-height: 1.8; resize: vertical;
  border: 1px solid var(--r-line-2); background: var(--surface); color: var(--text);
}
.cmt-reply-card textarea:focus { outline: 0; border-color: var(--r-primary-vivid); }
.cmt-reply-card textarea:disabled { background: var(--surface-2); color: var(--text-soft); }
.cmt-mode {
  display: flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: var(--surface-2);
}
.cmt-mode-b {
  appearance: none; border: 0; cursor: pointer; font: inherit; flex: 1 1 0;
  padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: transparent; color: var(--text-soft);
}
.cmt-mode-b.on { background: var(--r-primary); color: #fff; }
.cmt-tpl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.cmt-rule { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--r-line-faint); }

/* أربع باقات في شبكة الاشتراك، ومعها سعرها — القائمة نفسها في كل شاشة. */
.plan-pick { flex-wrap: wrap; }
.plan-pick .theme-opt { flex: 1 1 130px; flex-direction: column; gap: 2px; }
.plan-pick .theme-opt small { font-size: 11.5px; color: var(--text-soft); }

/* ═══════════════════════════════════════════════════════════════════
   مبدّل مساحة العمل — W15 · S24
   ═══════════════════════════════════════════════════════════════════ */
.ws-pill {
  appearance: none; cursor: pointer; font: inherit; text-align: start;
  display: flex; align-items: center; gap: 9px; width: calc(100% - 20px);
  margin: 0 10px 10px; padding: 7px 8px 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
}
.ws-pill:hover { background: rgba(255, 255, 255, .12); }
.ws-av {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--r-primary); color: #fff;
}
.ws-t { flex: 1 1 auto; min-width: 0; }
.ws-t b {
  display: block; font-size: 13px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ws-t small { display: block; font-size: 10.5px; opacity: .62; }
.ws-swap {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: rgba(255, 255, 255, .12); color: #fff;
}

/* على الهاتف الشريط سفلي: الكبسولة تصعد إلى الترويسة بدلاً منه. */
@media (max-width: 1023px) {
  .tabbar-items .ws-pill { display: none; }
}

/* داخل الورقة: صفوف الشركات */
.ws-search { position: relative; margin-bottom: 12px; }
.ws-search input {
  width: 100%; padding: 11px 14px; border-radius: 14px; font: inherit;
  font-size: 13px; border: 1px solid var(--r-line-2);
  background: var(--surface); color: var(--text);
}
.ws-search input:focus { outline: 0; border-color: var(--r-primary-vivid); }
.ws-search kbd {
  position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; color: var(--text-soft); background: var(--surface-2);
  border-radius: 6px; padding: 2px 6px;
}
.ws-list { display: flex; flex-direction: column; gap: 6px; }
.ws-row {
  appearance: none; cursor: pointer; font: inherit; text-align: start;
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.ws-row.on { background: var(--brand-tint); border-color: var(--brand-soft); }
.ws-row:disabled { cursor: default; }
.ws-row .ws-t b { font-size: 13.5px; font-weight: 600; }
.ws-row .ws-t small { color: var(--text-soft); opacity: 1; }
.ws-check { color: var(--brand-ink); }
.ws-go { color: var(--r-muted-2); }
.ws-add {
  display: block; margin-top: 10px; padding: 11px 12px; border-radius: 16px;
  border: 1px dashed var(--r-line-3); text-align: center; font-size: 13px;
  font-weight: 600; color: var(--brand-ink);
}
.ws-note { margin-top: 12px; }
.ws-warn { color: var(--warn-text); }
.ws-rules { margin-top: 12px; }
.ws-rules summary {
  cursor: pointer; font-size: 13px; font-weight: 700; padding: 8px 0;
}

/* أين تسكن الكبسولة: الترويسة على الهاتف، ورأس القائمة على الشاشة
   العريضة — واحدة تظهر دائماً، ومكانها لا يتغيّر بين شاشة وأخرى. */
.ws-mount-top { display: block; min-width: 0; max-width: 260px; }
.ws-mount-top .ws-pill {
  width: 100%; margin: 0; background: var(--surface-2); color: var(--text);
  border-color: var(--border);
}
.ws-mount-top .ws-pill:hover { background: var(--brand-tint); }
.ws-mount-top .ws-swap { background: var(--brand-soft); color: var(--brand-ink); }
.ws-mount-top .ws-t small { opacity: 1; color: var(--text-soft); }
@media (min-width: 1024px) { .ws-mount-top { display: none; } }
@media (max-width: 520px) { .ws-mount-top .ws-t { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   التعليقات الداخلية — W26

   بانرٌ دافئ يقول القاعدة أولاً: «لا تظهر للعميل أبداً». ثم المثبّتة،
   ثم الباقي. الترتيب هو الرسالة — من يفتح اللوح يريد أن يطمئن قبل أن
   يقرأ.
   ═══════════════════════════════════════════════════════════════════ */
.nt-banner {
  display: flex; gap: 9px; align-items: flex-start; padding: 12px 14px;
  border-radius: 16px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.8;
  background: var(--warn-wash); border: 1px solid var(--warn-line);
  color: var(--warn-text);
}
.nt-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px;
  background: var(--warn);
}
.nt-pins { margin-bottom: 12px; }
.nt-pin {
  font-size: 12.5px; padding: 7px 11px; border-radius: 12px; margin-top: 6px;
  background: var(--brand-tint); color: var(--text);
}
.nt-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.nt {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
}
.nt.on { border-color: var(--warn-line); background: var(--warn-wash); }
.nt-body { flex: 1 1 auto; min-width: 0; }
.nt-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.nt-meta b { font-size: 13px; font-weight: 600; }
.nt-badge {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--warn); color: #fff;
}
.nt-when { font-size: 11px; color: var(--text-soft); }
.nt-text { margin: 5px 0 0; font-size: 13px; line-height: 1.75; }
.nt-at { display: block; margin-top: 4px; font-size: 11px; color: var(--text-soft); }
.nt .linkish { margin-inline-start: 0; margin-top: 6px; }
.nt-new textarea {
  width: 100%; padding: 11px 13px; border-radius: 14px; font: inherit;
  font-size: 13px; line-height: 1.8; resize: vertical; margin-bottom: 9px;
  border: 1px solid var(--r-line-2); background: var(--surface); color: var(--text);
}
.nt-new textarea:focus { outline: 0; border-color: var(--r-primary-vivid); }
.nt-pinbox {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  font-weight: 600; color: var(--text-soft);
}
.cp-at {
  background: var(--brand-soft); color: var(--brand-ink); border-radius: 5px;
  padding: 1px 5px; font-weight: 600;
}
.cp-pinned { margin-bottom: 8px; }
.cp-pinned small { display: block; font-size: 10.5px; color: var(--text-soft); }
.cp-pin {
  display: block; margin-top: 4px; font-size: 12px; padding: 5px 9px;
  border-radius: 10px; background: var(--warn-wash); color: var(--warn-text);
}
.cp-note.on { border-inline-start: 2px solid var(--warn); padding-inline-start: 8px; }

/* ═══════════════════════════════════════════════════════════════════
   فقاعات المحادثة — قيم التسليم حرفياً

   الواردة بيضاء بحدّ ‎#EFF0ED‎ و‎16 16 16 5‎، والصادرة خضراء ممتلئة
   بنصٍّ أبيض و‎16 16 5 16‎. الوقت داخل الصادرة يخفت إلى ‎rgba(255,255,255,.75)‎.

   واسم من ردّ **فوق** الفقاعة خارجها: هو ما يقوم مقام الإسناد في هذا
   المنتج، فلو سكن داخلها لصار سطراً في رسالة بدل أن يكون توقيعاً عليها.
   ═══════════════════════════════════════════════════════════════════ */
.chat-line { display: flex; flex-direction: column; max-width: 82%; }
.chat-line.in  { align-self: flex-start; align-items: flex-start; }
.chat-line.out { align-self: flex-end;   align-items: flex-end; }
.chat-line .chat-b { max-width: 100%; }

/* مقيَّد بـ‎.chat-line‎ عمداً: ‎.chat-who‎ اسمٌ تستعمله شريحة «آخر ردّ»
   في الرأس أيضاً، وقاعدةٌ عارية تجعل الشريحة ترث قياس هذا السطر. */
.chat-line > .chat-who {
  display: block; font-size: 10.5px; font-weight: 600; color: var(--brand-ink);
  margin-bottom: 4px; margin-inline-end: 2px;
}
.chat-line.out:has(.chat-b.bad) > .chat-who { color: var(--danger-ink); }

.chat-b {
  padding: 9px 13px; font-size: 13px; line-height: 1.75;
}
.chat-b.in {
  border-radius: 16px 16px 16px 5px;
  background: var(--surface); border: 1px solid var(--border);
}
.chat-b.out {
  border-radius: 16px 16px 5px 16px;
  background: var(--r-primary-vivid); border: 1px solid var(--r-primary-vivid);
  color: #fff;
}
.chat-b.out .chat-meta,
.chat-b.out .chat-tick { color: rgba(255, 255, 255, .75); }
.chat-b.out .chat-tick.read { color: #fff; }
.chat-b.out .chat-file,
.chat-b.out .chat-gone { color: rgba(255, 255, 255, .88); }
.chat-b.bad {
  background: var(--danger-wash); border-color: var(--danger);
  color: var(--text);
}
.chat-b.bad .chat-meta { color: var(--danger-ink); }

/* رمز QR الحقيقي يصل مرسوماً SVG من الجسر — الحاوية تعطيه مقاسه وحسب. */
.qr-art svg { width: 100%; height: 100%; display: block; }
.qr-art svg rect:first-child { fill: #fff; }