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

   مصدرها: DESIGN.md بجذر الريبو (نظام التصميم المعتمد مع المالك
   2026-10-01)، وأصله design/README.md (حزمة التسليم من التصميم). لا تُخترع
   هنا قيمة غير موجودة هناك.

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

   لوحة العلامة — «قاعدة الختم» (قرار المالك 2026-10-01، يعكس قراءة 09-11):
     ‎#0E7A47‎  أي تعبئة خضراء تحمل نصاً أو رمزاً يُقرأ (زر، صفّ نشط، شارة،
               فقاعة صادرة، صورة رمزية بحروف) — الأبيض عليه 5.39:1. وهو
               وحده الأخضر النصّي على الفاتح. التمرير والضغط ‎#0B5F37‎.
     ‎#17A05F‎  التعبئة الصامتة وحدها (نقطة، شريط تقدّم، رسم، مفتاح، مربّع
               الشعار) — الأبيض عليه 3.37:1، راسب بـAA، فلا نصّ فوقه أبداً.
     ‎#E1FBD6‎  خلفية الرقاقة والتحديد
     ‎#262626‎  النص والعناوين · ‎#F6F5F2‎ خلفية الصفحة
     ‎#6B6E69‎  النص الثانوي · ‎#EFF0ED‎ الحدود · ‎#C2452F‎ الخطر
   فالتعبئة الحاملة لنص تقرأ ‎--r-seal‎ (ثابتة بالوضعين: تعبئةٌ تحمل أبيض
   لا تنفتح ليلاً)، والصامتة ‎--r-primary‎، والنص ‎--r-primary-ink‎
   (‎--brand-ink‎). ولا تدرّج ولا ظلّ لما هو مستقرّ: الظلّ لما يطفو فقط.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── لوحة ربط: منقولة من جدول الرموز في التسليم ───────────────── */
  --r-primary:        #17A05F;   /* الفعل والحالة — للتعبئة وحدها */
  --r-primary-vivid:  #17A05F;   /* الاسم القديم للتعبئة نفسها */
  --r-primary-deeper: #0E7A47;   /* حالة الضغط */
  --r-primary-ink:    #0E7A47;   /* الأخضر النصّي على الفاتح — دائماً */
  /* الختم: تعبئةٌ تحمل نصاً أو رمزاً. لا تُعاد بالكتلة الليلية عمداً —
     الأبيض فوقها، فلو انفتحت ليلاً لسقط تباينه (كان الصفّ النشط بالشريط
     أبيضَ على ‎#3DD68C‎ = 1.88:1). */
  --r-seal:           #0E7A47;
  --r-seal-deep:      #0B5F37;   /* تمرير الختم وضغطه — الأبيض عليه 7.76:1 */
  --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;
  /* الأحمر تعبئةً تحمل أبيض (شارة، toast) — ثابت بالوضعين، 5.02:1.
     و‎--r-danger‎ نفسه ينفتح ليلاً لأنه هناك حبر لا تعبئة. */
  --r-danger-fill:    #C2452F;
  /* النص الأحمر الصغير: ‎#C2452F‎ على غسلته 4.26:1 (راسب)، وهذا 5.37:1 —
     من جدول التسليم («النص الصغير ‎#A93A26‎»). */
  --r-danger-ink:     #A93A26;
  --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-ink);
  --brand-soft:   var(--r-primary-wash);
  --brand-tint:   var(--r-primary-wash-2);
  --badge-fill:   var(--r-seal);        /* الشارة تحمل رقماً — ختم */
  --brand-grad-end: var(--r-primary);   /* لا تدرّج: نهايته بلون بدايته */
  --brand-glow:   23,160,95;

  --ok:           var(--r-primary-vivid);
  --ok-ink:       var(--r-primary-ink);
  --danger:       var(--r-danger);
  --danger-ink:   var(--r-danger-ink);
  /* كان يُقرأ بثلاثة أماكن (بانر القناة المتوقفة، الرسالة الفاشلة،
     ‎.tag-bad‎) ولا يُعرَّف بأيّ ملف — فكانت الغسلة شفّافة والحدّ الأحمر
     يحيط بلا شيء. ليلاً يتبع ‎--r-danger-wash‎ الغامق وحده. */
  --danger-wash:  var(--r-danger-wash);
  --tick-read:    var(--r-chart-blue);

  /* مسطّح عند السكون (قرار المالك 2026-10-01): البطاقة تُعرَّف بحدّ 1px،
     والظلّ للطبقة العائمة وحدها (لوح منبثق، toast، قائمة). المستعملون
     الوحيدون لهذه الرموز بطاقاتٌ مستقرّة (‎.card‎، بطاقات الرئيسية والتقارير)،
     أما العائم فيحمل ظلّه صريحاً — فتصفيرها هنا لا يمسّ طبقةً تطفو. */
  --shadow:       none;
  --sh-1:         none;
  --sh-2:         none;
  --sh-3:         none;

  --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-primary-ink:   #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;
  /* عائلة ‎--r-warn-*‎ كانت بلا نسخة ليلية، فبقيت الملاحظة الداخلية وتنبيه
     الباقة رقعةً كريمية فاتحة على سطح غامق. ‎--r-warn‎ نفسه لا يُعاد: هو
     تعبئة زر الإرسال بوضع الملاحظة وفوقه أيقونة بيضاء — التعبئة لا تنفتح. */
  --r-warn-text:  #E0B75A;   /* 8.14:1 على غسلته */
  --r-warn-wash:  #2A2416;
  --r-warn-line:  #4A3F22;
  --r-danger-ink: #FF6B5E;   /* النص الأحمر ليلاً حبرٌ فاتح؛ التعبئة تبقى */

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

  /* مسطّح ليلاً أيضاً: الحدّ هو الذي يفصل الطبقات الثلاث. */
  --shadow: none;
}

/* ── الأزرار كما في دليل الواجهة («كل مكوّن بكل حالاته»): تعبئة واحدة
      بلا ظل ولا تدرّج وحوافّ كبسولة. التعبئة ختمٌ ‎#0E7A47‎ لأن عليها نصاً،
      والتمرير والضغط ‎#0B5F37‎، والمعطّل ‎#E7E8E5‎ بنص ‎#A7ACA5‎ — لا
      شفافية تبهت الزر كله. ────── */
:root { --r-disabled: #E7E8E5; }
:root[data-theme="dark"], html.dark, body.dark { --r-disabled: #2C313A; }
.btn-primary { background: var(--r-seal); box-shadow: none; border-radius: 999px; }
.btn-primary:hover:not(:disabled) { background: var(--r-seal-deep); filter: none; }
.btn-primary:active:not(:disabled) { background: var(--r-seal-deep); }
.btn-primary:disabled { background: var(--r-disabled); color: var(--r-muted-2); opacity: 1; }
/* الثانوي: حدّ 1px ‎#E3E4E0‎ بلا تعبئة، والتمرير حدّ ‎#C9CBC6‎ على خلفية الصفحة. */
:root { --r-ghost-line: #E3E4E0; --r-ghost-line-hover: #C9CBC6; }
:root[data-theme="dark"], html.dark, body.dark { --r-ghost-line: #39404A; --r-ghost-line-hover: #4A525E; }
.btn-ghost { background: transparent; border: 1px solid var(--r-ghost-line); border-radius: 999px; }
.btn-ghost:hover:not(:disabled) { background: var(--r-bg); border-color: var(--r-ghost-line-hover); }
/* «ممنوع: ظل على الأيقونة» — نصّ الدليل. */
.brand-logo { box-shadow: none; }
/* رصيد الإذن الزمني المستهلك: يبقى معروضاً (يتجدّد كل شهر، وغيابه يُقرأ
   «ما عندي هذا الحق»)، لكن بلون الانتهاء — رقمٌ صفر بالأخضر يُقرأ رصيداً. */
#leave-balance.spent .hl-bal-top b { color: var(--r-muted); }
#leave-balance.spent .foot { color: var(--r-warn-text); font-weight: 600; }

/* ── قواعد خاصة بالتطبيق ─────────────────────────────────────────── */
/* «بانتظار الموافقة» و«متأخر» حالتا انتباه لا نجاح — كانتا خضراوين مثل
   «مُعتمد»، لأن عنبر تجوال (لون الانتباه هناك) صار أخضر هنا. الصوت الدافئ
   الوحيد بالنظام عائلة التحذير. */
.badge.confirm, .badge.late { background: var(--r-warn-wash); color: var(--r-warn-text); }

/* الأرقام والأوقات والعملات والمعرّفات: مونو ولاتيني الاتجاه دائماً.
   التسليم يعدّها شرطاً لا تحسيناً — رقم عربي داخل نص 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(--brand-ink); background: var(--r-primary-wash);
  border-radius: 999px; padding: 4px 12px; margin: 0 auto 14px; width: max-content;
}
:root[data-lang="en"] body.demo #screen-login .login-card::before { content: "Demo copy · sample data"; }

.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-ink); }
/* الحدّ الوردي مكتوبٌ صراحةً فبقي فاتحاً ليلاً حول رقعة غامقة. */
:root[data-theme="dark"] .plan-warn.hot { border-color: rgba(255,107,94,.35); }
.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(--brand-ink); 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(--brand-ink); 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; }

  /* الفاصل هامش وحدّ، لا حشوة إضافية: كانت الحشوة تُكتب مرتين فيتضخّم كل
     عنوان قسم وتُدفع آخر الصفحات خلف بطاقة المستخدم الملتصقة. */
  /* عنوان القسم .5 لا .38: الأخير 3.43:1 على ‎#262626‎ لنصٍّ بحجم 11px
     (راسب)، و‎.5‎ = 4.86:1 ويبقى أخفت من البنود (.62). */
  .rail-sec { color: rgba(255,255,255,.5); 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; }
  /* الصفّ النشط ختمٌ لأن عليه نصاً. كان ‎--r-primary-vivid‎، وهو ليلاً
     ‎#3DD68C‎ — أبيض على أخضر فاتح = 1.88:1. */
  .tabbar .tab.active { background: var(--r-seal); color: #fff; font-weight: 600; }
  /* الوضع الليلي: `‎:root[data-theme="dark"] .tab.active‎` في styles.css
     يفرض `color: var(--brand-ink)‎` وتخصيصه أعلى، فصار نصّ الصفّ النشط
     بنفس أخضر خلفيته — صفٌّ أخضر فارغ بلا كلمة ولا أيقونة (رآه المالك
     على «البوابة»). نغلبه هنا صراحةً بتخصيص أعلى، والأيقونة ترث اللون. */
  :root[data-theme="dark"] .tabbar .tab.active { color: #fff; }
  /* شارة العدّ: حمراء لأنها تقول «متأخر» لا «جديد» — من التسليم. تعبئةٌ
     ثابتة: ‎--r-danger‎ ينفتح ليلاً إلى ‎#FF6B5E‎ فيسقط الأبيض فوقه. */
  .tabbar .tab .tab-badge { background: var(--r-danger-fill); 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 ملف. يظهر على العريض وحده.

   «العريض» يُقاس بعرض لوحة المحادثة نفسها لا بعرض النافذة: الشرط كان
   `min-width: 1200px` على النافذة، والنافذة تشمل الشريط الجانبي (232)
   وهوامش الصفحة — فعلى نافذة 1250 كانت اللوحة 954px تقسّم على طابور 310
   وملف 306، وتبقى المحادثة نفسها 300px: اسم العميل ينقطع «يحيى حسين …»
   والرقم ينقص أوّله وحقل الكتابة ينضغط لمربع (شكوى المالك 24 أيلول).
   فالملف يظهر حين تتّسع اللوحة لثلاثتها مع محادثة لا تقلّ عن ~480px،
   وتحت ذلك بيانات العميل من زرّ (i) برأس المحادثة كما على الهاتف.
   واللوحة `flex` لا `grid` (قاعدة لاحقة في styles.css تغلب)، فالعرض
   يُعطى للملف بـ`flex-basis` لا بأعمدة الشبكة. */
.chat-profile { display: none; }
/* الحاوية على العريض وحده: `container-type` يحبس ما بداخله كما يحبس
   `contain: layout`، فيصير الإطار مرجعاً لكل `position: fixed` داخله —
   وعلى الهاتف المحادثة نفسها طبقةٌ ثابتة فوق الشاشة كلها. */
@media (min-width: 1024px) {
  .page[data-page="chat"] { container-type: inline-size; container-name: chatpage; }
}
@container chatpage (min-width: 1100px) {
  .chat-profile:not([hidden]) {
    display: block; flex: 0 0 308px; min-width: 0; align-self: stretch;
    overflow-y: auto; padding: 18px;
    border-inline-start: 1px solid var(--border); background: var(--surface);
  }
}

/* الشريط العلوي على العريض: قاعدة «تنقية الترويسة» في styles.css
   (`.topbar { padding-inline: var(--s4) }`) تأتي بعد قاعدة الإزاحة
   وتغلبها بكل العروض — فصار أول الشريط (اسم الموظف وعنوان الصفحة)
   تحت الشريط الجانبي الثابت: «المحادثات» يظهر منها حرف «ت». والإزاحة
   بعرض شريط ربط الحقيقي 232 لا 248 الموروث من تجوال. */
@media (min-width: 1024px) {
  body { --sidebar: 232px; }
  .topbar { padding-inline-start: calc(var(--sidebar) + 24px); }
}

.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(--brand-ink); }

/* التفصيل يبقى، مطويّاً: هو ما يشرح لماذا صار الرقم هذا الرقم. */
.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(--brand-ink); 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);
  border-color: rgba(23,160,95,.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-seal); 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(--brand-ink); font-weight: 600; }
.su-hint { color: var(--muted); line-height: 1.65; }
.su-ok { flex: none; color: var(--brand-ink); 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);
  --ch-wa_calls:    var(--ch-whatsapp); --ch-wa_calls-bg:    var(--ch-whatsapp-bg);
  --ch-ig_comments: var(--ch-instagram); --ch-ig_comments-bg: var(--ch-instagram-bg);
}
.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[data-ch="wa_calls"]    { background: var(--ch-wa_calls-bg);    color: var(--ch-wa_calls); }
.prov-logo[data-ch="ig_comments"] { background: var(--ch-ig_comments-bg); color: var(--ch-ig_comments); }
.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-tab:focus-visible { outline-offset: -3px; border-radius: 10px 10px 0 0; }

.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(--r-danger-fill); color: #fff;
}
.chan-banner-t { flex: 1 1 240px; min-width: 0; }
.chan-banner-t b { display: block; font-size: 14px; font-weight: 700; }
/* سطر الخطوة التالية بالحبر الثانوي لا الرمادي: ‎#6B6E69‎ على الغسلة
   الحمراء 4.39:1 (راسب)، و‎--r-ink-2‎ = 8.94:1 ويفتح ليلاً وحده. */
.chan-banner-t small {
  display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.7;
  color: var(--r-ink-2);
}
.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: 112px minmax(0, 1fr) 128px; }
.log-tr small { display: block; font-size: 11.5px; color: var(--text-soft); }
.log-what b { font-size: 13.5px; font-weight: 600; }
.log-when { color: var(--text-soft); font-size: 12.5px; text-align: end; }
.log-card .chan-table-head { justify-content: space-between; }
.log-card .log-filters { margin-inline-start: 0; }
.chan-foot { padding: 12px 18px 14px; margin: 0; }
/* أرقام الأوقات مصطفّة **بخط النص نفسه**. `.mono` يقلب الخط والاتجاه
   معاً، فـ«قبل 12 دقيقة» بخطٍ أحادي لاتيني تتقطّع حروفها العربية. */
.tnum { font-variant-numeric: tabular-nums; }
@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-t .ci-caps { margin-top: 8px; }
.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-seal); 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-seal); 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-seal); 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);
}
/* الصادرة ختمٌ لأن عليها نصاً (5.39:1)، وبنفس القيمة ليلاً. */
.chat-b.out {
  border-radius: 16px 16px 5px 16px;
  background: var(--r-seal); border: 1px solid var(--r-seal);
  color: #fff;
}
/* ليلاً كان ‎styles.css‎ يفرض بنّي تجوال (‎#3A2C12‎ بحدٍّ عنبري) بتخصيصٍ
   أعلى من القاعدة أعلاه. نفس المحدِّد هنا يغلبه لأنه يُحمَّل بعده —
   والفاشلة تبقى حمراء ليلاً كما نهاراً. */
:root[data-theme="dark"] .chat-b.out { background: var(--r-seal); border-color: var(--r-seal); }
:root[data-theme="dark"] .chat-b.out.bad { background: var(--danger-wash); border-color: var(--danger); }
/* الوقت والعلامتان .88 لا .75: على الختم ‎.75‎ = 3.77:1 لنصٍّ بحجم 11px
   (راسب)، و‎.88‎ = 4.56:1. */
.chat-b.out .chat-meta,
.chat-b.out .chat-tick { color: rgba(255, 255, 255, .88); }
.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; }

/* ── بطاقات الباقات (شاشة الاشتراك) ─────────────────────────────────
   السعر بالدولار وحده، والمواصفات تحته سطراً سطراً: الزبون يقارن الأربع
   بعينه بدل ما يفتح صفحة أسعار ثانية ويرجع. ودورة الفوترة تُبدَّل فوق
   البطاقات فيرى فرق السنوي على الأرقام نفسها. */
.cycle-pick { display: inline-flex; gap: 4px; padding: 4px; margin: 10px 0 14px;
  background: var(--surface-2); border-radius: 999px; }
.cycle-pick button { border: 0; background: none; color: var(--text-soft);
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 16px;
  border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.cycle-pick button small { font-size: 11px; font-weight: 500; opacity: .8; }
.cycle-pick button.on { background: var(--r-seal); color: #fff; }

.plan-cards { display: grid; gap: 10px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.plan-card { display: flex; flex-direction: column; gap: 6px; text-align: start;
  padding: 14px; border-radius: 16px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
/* مسطّح: الحدّ الأخضر وحده يقول «اضغط»، بلا توهّج ولا رفع. */
.plan-card:hover:not(:disabled) { border-color: var(--r-primary); }
.plan-card:disabled { cursor: default; }
.plan-card.current { border-color: var(--r-primary); background: var(--brand-tint); }
.pc-name { font-size: 15px; }
.pc-price { font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  direction: ltr; text-align: start; color: var(--text); }
.pc-price small { font-size: 12px; font-weight: 500; color: var(--text-soft);
  font-family: var(--font-body, inherit); }
.pc-desc { color: var(--text-soft); font-size: 12.5px; }
.pc-feat { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.pc-feat li { font-size: 12.5px; color: var(--text-soft); padding-inline-start: 16px;
  position: relative; }
.pc-feat li::before { content: "✓"; position: absolute; inset-inline-start: 0;
  color: var(--brand-ink); font-weight: 700; }
.pc-tag, .pc-go { margin-top: 8px; align-self: flex-start; font-size: 11.5px;
  font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.pc-tag { background: var(--brand-soft); color: var(--brand-ink); }
.pc-go { background: var(--r-seal); color: #fff; }

/* ── شاشة القنوات (من تصميم «الشاشة نفسها، مرتّبة») ─────────────────
   عمودان: قائمة 330 فيها بحث وثلاثة فلاتر ومجموعتان، ولوح تفاصيل يملأ
   الباقي. القاعدة التي بُني عليها التصميم: الفراغ يصير محتوى — لوح
   التفاصيل يجاوب «شنو هذي القناة وشلون أربطها» بدل نصف شاشة أبيض. */
.chan-split { display: grid; gap: 14px; align-items: start;
  grid-template-columns: 330px minmax(0, 1fr); }
@media (max-width: 980px) { .chan-split { grid-template-columns: 1fr; } }

.chan-list { background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; position: sticky; top: 8px;
  display: flex; flex-direction: column; max-height: calc(100dvh - 210px); }
@media (max-width: 980px) { .chan-list { position: static; max-height: none; } }
.cl-tools { padding: 14px 14px 10px; display: grid; gap: 10px;
  border-bottom: 1px solid var(--border); }
.cl-search { width: 100%; font: inherit; font-size: 12.5px; padding: 9px 14px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); }
.cl-search:focus { outline: none; border-color: var(--r-primary); }
.cl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-chip { border: 0; font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); color: var(--text); }
.cl-chip.on { background: var(--text); color: var(--surface); }

.cl-scroll { overflow: auto; padding: 10px 10px 12px; display: flex;
  flex-direction: column; gap: 2px; }
/* الأقسام الثلاثة (المحادثات · الاتصالات · التعليقات) عناوين تُقرأ لا
   تسميات باهتة: كانت 10.5px رمادية فلا يُرى أن القائمة مقسومة أصلاً. */
.cl-sec { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 12px; font-weight: 700; color: var(--text);
  padding: 14px 8px 6px; }
.cl-sec:first-child { padding-top: 4px; }
.cl-sec .tnum { font-size: 11px; font-weight: 600; color: var(--text-soft);
  background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
.cl-row { display: flex; align-items: center; gap: 11px; width: 100%; border: 0;
  background: none; font: inherit; color: var(--text); text-align: start;
  padding: 7px 10px; border-radius: 12px; cursor: pointer; }
.cl-row:hover { background: var(--surface-2); }
.cl-row.on { background: var(--brand-tint); }
.cl-row .prov-logo { width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: grid; place-items: center; background: var(--surface-2); }
.cl-t { flex: 1; min-width: 0; display: grid; line-height: 1.4; }
.cl-t b { font-size: 13px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cl-t small { font-size: 11px; color: var(--text-soft); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* الحالة تُقال بلون الكلمة نفسها لا بأيقونة تُفسَّر. */
.cl-t small.cl-ok { color: var(--brand-ink); font-weight: 600; }
.cl-t small.cl-warn { color: #B08900; font-weight: 600; }
.cl-t small.cl-down { color: var(--r-danger); font-weight: 600; }
.cl-dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--text-soft); opacity: .55; }
.cl-dot.cl-ok { background: var(--r-primary-vivid); opacity: 1; }
.cl-dot.cl-warn { background: #E0A63D; opacity: 1; }
.cl-dot.cl-down { background: var(--r-danger); opacity: 1; }
.cl-tick { width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--r-seal); color: #fff; font-size: 10px;
  font-weight: 700; display: grid; place-items: center; }

/* ترويسة الشاشة: عدد متصل · آخر فحص · شارة ما يحتاج انتباهاً */
#chan-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chan-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }
.chan-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  font-weight: 700; border-radius: 999px; padding: 3px 10px;
  background: var(--r-danger-wash, #FFF1EF); color: var(--r-danger-ink); }
.chan-flag .chan-dot { background: var(--r-danger); }

/* لوح التفاصيل */
.chan-detail { min-width: 0; display: grid; gap: 14px; align-content: start;
  container-type: inline-size; }
/* لوح التفاصيل أضيق من الصفحة (القائمة 330 بجانبه)، فعموداه يُحكم عليهما
   بعرضه هو لا بعرض النافذة: عمودٌ جانبي ثابت 300 بجانب رئيسيٍّ في لوح
   عرضه 500 كان يترك للرئيسي كلمةً في السطر («كيف / يتصل / تطبيقك»). */
@container (max-width: 860px) {
  .chan-detail .chan-cols { grid-template-columns: minmax(0, 1fr); }
}
.ci-head-card { display: grid; gap: 16px; }
.ci-head { display: flex; align-items: flex-start; gap: 14px; }
.prov-logo.lg { width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; background: var(--surface-2); flex: none; }
.ci-t { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ci-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ci-name b { font-size: 19px; }
.ci-pill { font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 3px 10px; background: var(--surface-2); color: var(--text-soft); }
.ci-t small { font-size: 12.5px; color: var(--text-soft); }
.ci-act { flex: none; display: flex; gap: 8px; }
.ci-about { font-size: 13.5px; line-height: 1.9; color: var(--text); }
/* الإمكانيات: ما تسويه القناة فعلاً، شرائح قصيرة من سجل القنوات. */
.ci-caps { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-cap { font-size: 11.5px; font-weight: 600; line-height: 1.6;
  border-radius: 999px; padding: 3px 10px;
  background: var(--brand-tint); color: var(--brand-ink); }
.ci-tiles { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ci-tile { background: var(--surface-2); border-radius: 12px; padding: 13px 15px;
  display: grid; gap: 4px; }
.ci-tile small { font-size: 11px; font-weight: 600; color: var(--text-soft); }
.ci-tile b { font-size: 13px; font-weight: 600; }

.ci-cols { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 290px; }
/* العمودان داخل اللوح لا ينفعان إلا على شاشة عريضة فعلاً: دونها يصير
   عمود «خطوات الربط» 230px فتنكسر كل خطوة على أربعة أسطر. */
@media (max-width: 1400px) { .ci-cols { grid-template-columns: 1fr; } }
.ci-steps, .ci-after { display: grid; gap: 12px; align-content: start; }
.ci-step { display: flex; gap: 13px; }
.ci-n { width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--text-soft); }
.ci-n.on { background: var(--brand-soft); color: var(--brand-ink); }
.ci-step div { display: grid; gap: 3px; }
.ci-step b { font-size: 13.5px; font-weight: 600; }
.ci-step small { font-size: 12px; line-height: 1.8; color: var(--text-soft); }
.ci-line { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px;
  line-height: 1.8; }
.ci-line .cl-dot { margin-top: 7px; }
.ci-note { font-size: 11.5px; line-height: 1.75; border-radius: 12px;
  padding: 11px 13px; background: var(--r-warn-wash, #FFF9E8); color: var(--text); }
:root[data-theme="dark"] .ci-note { background: #2A2313; }

/* صفحة الإعدادات محدودة بـ940 لأن أكثرها نماذج تُقرأ بسطر قصير. لكن
   شاشة القنوات ليست نموذجاً: التصميم يعطيها العرض الباقي بعد الشريط
   وقائمة الإعدادات. بالحدّ القديم كان لوح التفاصيل يطلع 330px ونصف
   الشاشة أبيض — وهي أول ملاحظة في التصميم. */
@media (min-width: 1024px) {
  .page[data-page="settings"]:has(.chan-wrap) { --page-max: 1440px; }
}

/* ── ربط Telegram ─────────────────────────────────────────────────
   خطوات ‎@BotFather‎ تُقرأ سطراً بعد سطر لا شارات في صفّ واحد: هي
   تعليماتٌ تُنفَّذ بالترتيب، لا مؤشّر تقدّمٍ داخل الورقة. */
.wiz-steps.col { flex-direction: column; align-items: stretch; gap: 10px; }
.wiz-steps.col li { align-items: flex-start; font-weight: 500; line-height: 1.7;
  font-size: 13px; color: var(--text); }
.wiz-steps.col li span { flex: none; margin-top: 1px;
  background: var(--brand-tint); color: var(--brand-ink); }
.sep { border: 0; border-top: 1px solid var(--r-line-faint, var(--r-line-2));
  margin: 16px 0; }

/* سقف الباقة جنب رقم الموظفين في شريط الأرقام: «2 / 40». السقف أخفت من
   الرقم لأن المقروء هو المستهلك، ويحمرّان معاً حين يمتلئ (طلب المالك
   ١٢ أيلول) — كان الرقم وحده، فلا يُعرف الامتلاء إلا عند رفض الإضافة. */
.summary .sum-cap { font-size: .62em; font-weight: 600; color: var(--text-soft); }
.summary b.sum-full, .summary b.sum-full .sum-cap { color: var(--danger); }

/* ── الفريق (النظام) ──────────────────────────────────────────────
   الرصيدان صفٌّ واحد فوق: سقف الحسابات وسقف ملفّات الموظفين رقمان
   مستقلان بالباقة. كل بطاقة «1 من 15» وشريطٌ يمتلئ وما بقي (بلاغ المالك
   ١١ أيلول: «يذكر شكد عندك بالباقة») — كانت رقماً وحده بلا سقف. */
.tm-plan { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--text-soft); }
.tm-plan b { color: var(--text); }
.tm-quotas { display: grid; gap: 12px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tm-quota { display: grid; gap: 6px; padding: 16px 18px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--r-line-2); }
.tm-q-label { font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.tm-quota b { display: block; font-size: 28px; font-weight: 700; line-height: 1.2; }
.tm-quota b span { font-size: 14px; font-weight: 500; color: var(--text-soft); }
.tm-bar { height: 6px; border-radius: 999px; background: var(--surface-2);
  overflow: hidden; }
.tm-bar span { display: block; height: 100%; border-radius: inherit;
  background: var(--r-primary); }
.tm-q-note { font-size: 12px; color: var(--text-soft); }
.tm-quota.near .tm-bar span { background: var(--r-warn, #C98A12); }
.tm-quota.full b { color: var(--danger); }
.tm-quota.full .tm-bar span { background: var(--danger); }

/* الأشخاص · الصلاحيات — تبويبان داخل الفريق (طلب المالك ١١ أيلول). */
.tm-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--r-line-2);
  margin-bottom: 16px; }
.tm-tab { appearance: none; border: 0; background: none; font: inherit;
  font-size: 14px; font-weight: 600; color: var(--text-soft); cursor: pointer;
  padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px; }
.tm-tab .tnum { font-size: 11.5px; font-weight: 600; border-radius: 999px;
  padding: 1px 8px; background: var(--surface-2); color: var(--text-soft); }
.tm-tab.on { color: var(--text); border-bottom-color: var(--r-primary); }
.tm-tab.on .tnum { background: var(--brand-tint); color: var(--brand-ink); }
.tm-tab:focus-visible { outline: 2px solid var(--r-primary); outline-offset: 2px;
  border-radius: 8px; }

.tm-toolbar { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-chips .tnum { opacity: .7; }

/* ── جدول الفريق: الشخص، وملفُّه، وصلاحياته ────────────────────────
   صفٌّ واحد لكل إنسان وخليّتان تقولان ما له وما ينقصه. و«ملفّات بلا
   حساب» و«دعوات بانتظار القبول» صفوفٌ في الجدول نفسه لا قوائم أخرى
   تحته — فالناقص يُقرأ بنظرة: خليّةٌ ممتلئة وأخرى منقّطة. */
.tm-table { display: flex; flex-direction: column; gap: 8px; }
.tm-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding: 12px 16px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--r-line-2); }
.tm-row.off { opacity: .55; }
.tm-person { display: flex; align-items: center; gap: 12px; min-width: 0;
  flex: 1 1 100%; }
.tm-av { flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--brand-tint); color: var(--brand-ink); }
.tm-inv .tm-av { background: var(--surface-2); color: var(--text-soft); }
.tm-who { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tm-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-l1 b { font-size: 14.5px; }
.tm-l2 { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 12.5px;
  color: var(--text-soft); min-width: 0; }
.tm-l2 span { overflow-wrap: anywhere; }
/* النوع كلمةٌ ملوّنة لا أيقونة: «موظف» و«مستخدم» فرقٌ يُقرأ لا يُخمَّن. */
.tm-kind { font-size: 11.5px; font-weight: 600; border-radius: 999px;
  padding: 2px 9px; }
.tm-kind.emp { background: var(--brand-tint); color: var(--brand-ink); }
.tm-kind.usr { background: var(--surface-2); color: var(--text-soft); }
.tm-kind.own { background: var(--r-seal); color: #fff; }

/* على الضيّق لا أعمدة: الخليّتان تنزلان تحت الاسم بمحاذاته — 50px هي
   عرض الصورة وفجوتها، فيبدأ المحتوى حيث يبدأ الاسم لا حيث تبدأ الصورة. */
.tm-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-width: 0; margin-inline-start: 50px; }
.tm-cell small { font-size: 12px; color: var(--text-soft); }
.tm-dash { font-size: 12px; color: var(--r-muted-2); }

/* بابُ الموارد البشرية: يُقرأ حالةً ويُضغط انتقالاً إلى ملفّه هناك. */
.tm-open { appearance: none; border: 0; background: none; font: inherit;
  color: inherit; cursor: pointer; text-align: start; padding: 0;
  position: relative; min-width: 0; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }
.tm-open small { font-size: 12px; color: var(--text-soft); }
.tm-open::after { content: "\203A"; font-size: 17px; line-height: 1;
  color: var(--r-muted-2); }
.tm-open:hover::after, .tm-open:hover small { color: var(--r-primary-ink); }
.tm-open:focus-visible { outline: 2px solid var(--r-primary); outline-offset: 3px;
  border-radius: 8px; }

/* مجموعة الصلاحيات بجانب كل شخص — ضغطتها تفتح «الصلاحيات». */
.tm-grp { flex: none; appearance: none; font: inherit; font-size: 12px;
  font-weight: 600; cursor: pointer; border-radius: 999px; padding: 4px 11px;
  border: 1px dashed var(--r-line-2); background: none; color: var(--text-soft);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-grp.on { border-style: solid; border-color: transparent;
  background: var(--brand-tint); color: var(--brand-ink); }
.tm-grp:disabled { cursor: default; }

/* عنوان قسمٍ داخل الجدول نفسه. */
.tm-sec { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 20px 0 2px; font-size: 14.5px; font-weight: 700; }
.tm-sec .tnum { font-size: 11.5px; font-weight: 600; border-radius: 999px;
  padding: 1px 8px; background: var(--surface-2); color: var(--text-soft); }
.tm-sec small { font-weight: 500; font-size: 12.5px; color: var(--text-soft); }

/* الرأس لا يوجد حيث لا أعمدة، والبطاقتان لا تُضاعفان الرقم حيث يوجد. */
.tm-thead { display: none; }

/* ≥1024 هو عرض اللوحة: دونه الصفحة عمودٌ عرضه 640 لا يتّسع لثلاثة. */
@media (min-width: 1024px) {
  .tm-table { --tm-cols: minmax(0, 1fr) minmax(150px, 200px) minmax(140px, 190px); }
  .tm-quotas.narrow-only { display: none; }
  .tm-thead { display: grid; grid-template-columns: var(--tm-cols); gap: 12px;
    align-items: end; padding: 0 17px 12px; margin-bottom: 2px;
    border-bottom: 1px solid var(--r-line-2);
    /* يلتصق تحت الشريط العلوي: قائمةٌ بستّين موظفاً تمرّ، فتبقى أسماء
       الأعمدة فوقها — وإلا صارت الخلايا أرقاماً بلا عناوين. */
    position: sticky; top: calc(68px + var(--safe-top, 0px)); z-index: 3;
    background: var(--bg); }
  .tm-row { display: grid; grid-template-columns: var(--tm-cols); gap: 12px;
    align-items: center; }
  .tm-person { flex: none; }
  .tm-cell { display: grid; gap: 5px; justify-items: start; align-content: center;
    margin-inline-start: 0; min-height: 40px;
    border-inline-start: 1px solid var(--r-line); padding-inline-start: 14px; }
  .tm-cell small { font-size: 11.5px; max-width: 100%; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  .tm-open { display: grid; gap: 5px; justify-items: start; width: 100%;
    padding-inline-end: 16px; }
  .tm-open::after { position: absolute; inset-inline-end: 0; top: 50%;
    transform: translateY(-50%); }
  .tm-sec { margin: 22px 0 4px; }
  .th-lbl { font-size: 12px; font-weight: 700; color: var(--text-soft); }
  .th-q { display: grid; gap: 5px; align-content: end; padding-inline-start: 14px; }
  .th-q b { font-size: 20px; font-weight: 700; line-height: 1; }
  .th-q b span { font-size: 12.5px; font-weight: 500; color: var(--text-soft); }
  .th-q .tm-bar { height: 5px; }
  .th-note { font-size: 11.5px; color: var(--text-soft); }
  .th-q.near .tm-bar span { background: var(--r-warn); }
  .th-q.full b, .th-q.full .th-note { color: var(--danger); }
  .th-q.full .tm-bar span { background: var(--danger); }
}

/* ── مجموعات الصلاحيات (الإعدادات · الفريق) ─────────────────────────
   كتبتُ `pgroups.js` بلا سطر CSS واحد: صفوف المجموعات أزرارٌ خام بحجم
   نصّها، ومستويات المحرّر أزرار راديو مكشوفة. هنا شكلها — نفس بطاقات
   الفريق، والمستوى شريحةٌ تُختار لا دائرة. */
.pg-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.pg-head .set-note { margin: 0; max-width: 62ch; }
.pg-row { appearance: none; font: inherit; color: var(--text); text-align: start;
  cursor: pointer; width: 100%; display: grid; align-items: center; gap: 14px;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) auto;
  padding: 14px 16px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--r-line-2); }
.pg-row + .pg-row { margin-top: 8px; }
.pg-row:hover { border-color: var(--r-primary-vivid); }
.pg-row:focus-visible { outline: 2px solid var(--r-primary); outline-offset: 2px; }
.pg-t { display: grid; gap: 3px; min-width: 0; }
.pg-t b { font-size: 14.5px; }
.pg-t small { font-size: 12px; color: var(--text-soft); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pg-sum { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pg-n { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--brand-tint); color: var(--brand-ink); }
.pg-empty { padding: 18px; border-radius: 16px; border: 1px dashed var(--r-line-2);
  display: grid; gap: 6px; }
@media (max-width: 640px) {
  .pg-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pg-sum { grid-column: 1 / -1; order: 3; }
}
.pg-sec { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
  font-weight: 700; margin: 18px 0 8px; }
.pg-mod { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--r-line-2); }
.pg-mod + .pg-mod { margin-top: 8px; }
.pg-mod-h { display: grid; gap: 2px; }
.pg-mod-h b { font-size: 14px; }
.pg-mod-h small { font-size: 12px; color: var(--text-soft); }
.pg-levels { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-level { position: relative; cursor: pointer; }
.pg-level input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pg-level span { display: inline-block; padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; border: 1px solid var(--r-line-2);
  background: var(--surface); color: var(--text-soft); }
.pg-level input:checked + span { background: var(--brand-tint);
  border-color: var(--r-primary-vivid); color: var(--brand-ink); }
.pg-level input:focus-visible + span { outline: 2px solid var(--r-primary);
  outline-offset: 2px; }
.pg-level input:disabled + span { opacity: .6; }
.pg-flags { display: grid; gap: 2px; padding-top: 8px;
  border-top: 1px dashed var(--r-line-2); }
.pg-flag { font-size: 13px; }
.pg-members { display: grid; gap: 6px; }
.pg-member { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2);
  font-size: 13.5px; }
.pg-member small { margin-inline-start: 6px; font-size: 11.5px; color: var(--text-soft); }
.pg-add { display: flex; gap: 8px; margin-top: 8px; }
.pg-add select { flex: 1; min-width: 0; }

/* نماذج المجموعات: تبدأ منها ولا تُحفظ قبل «احفظ». */
.tm-presets { display: grid; gap: 8px; margin-bottom: 16px; padding: 14px 16px;
  border-radius: 16px; background: var(--r-surface-alt, var(--surface-2)); }
.tm-presets[hidden] { display: none; }
.tm-presets > small { font-size: 12.5px; color: var(--text-soft); }
.tm-preset-row { display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tm-preset { appearance: none; text-align: start; font: inherit; cursor: pointer;
  display: grid; gap: 3px; padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--r-line-2); background: var(--surface); color: var(--text); }
.tm-preset:hover { border-color: var(--r-primary-vivid, var(--r-primary)); }
.tm-preset b { font-size: 13.5px; color: var(--brand-ink); }
.tm-preset small { font-size: 12px; color: var(--text-soft); line-height: 1.6; }
.tm-kinds { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.tm-pick { appearance: none; cursor: pointer; text-align: start; font: inherit;
  display: flex; flex-direction: column; gap: 4px; padding: 13px 16px;
  border-radius: 16px; border: 1px solid var(--r-line-2);
  background: var(--surface); color: var(--text); }
.tm-pick.on { border-color: var(--r-primary-vivid); background: var(--brand-tint); }
.tm-pick small { color: var(--text-soft); font-size: 12.5px; }


/* ── لوح التكامل (شات الموقع · دعم داخل التطبيق) ───────────────────── */
.int-docs h6 { font-size: 13.5px; font-weight: 700; margin: 18px 0 6px; }
.int-docs h6:first-of-type { margin-top: 10px; }
.int-code {
  position: relative; margin: 8px 0 4px; border-radius: 12px;
  background: var(--r-surface-alt); border: 1px solid var(--border);
}
.int-code pre {
  margin: 0; padding: 12px 14px 12px 76px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  white-space: pre; text-align: left;
}
.int-code .btn { position: absolute; top: 8px; left: 8px; }
.int-opts, .int-eps { display: grid; gap: 6px; margin: 6px 0 10px; min-width: 0; }
/* نقطة نهاية = شريحة: الطريقة والمسار وجسمٌ مثال (قصير، فلا يخرج من
   البطاقة)، ووصفها بالعربي تحتها — لا جنبها فيتداخل الاتجاهان. */
.int-ep { display: grid; justify-items: start; gap: 5px; min-width: 0;
  padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.7; color: var(--text-soft); }
.int-ep > code { font-family: var(--font-mono); font-size: 12px; color: var(--text);
  background: var(--r-surface-alt); border-radius: 6px; padding: 3px 8px;
  overflow-wrap: anywhere; max-width: 100%; }
.int-ep > code b { color: var(--brand-ink); font-weight: 700; }
.int-ep > code i { font-style: normal; color: var(--text-soft); }
.int-opts code { overflow-wrap: anywhere; }
.int-docs, .int-code { min-width: 0; }
.int-opts > div {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-soft);
}
.int-opts code {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text);
  background: var(--r-surface-alt); border-radius: 6px; padding: 2px 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   مواءمة DESIGN.md (قرار المالك 2026-10-01) — لما يملكه styles.css

   الموروث لا يُمسّ في ملفه: كل تصحيح هنا بنفس المحدِّد أو أعلى منه،
   فيغلب لأن هذا الملف يُحمَّل بعده. أربع قواعد من DESIGN.md:
   الختم (تعبئة تحمل نصاً = ‎#0E7A47‎)، التعبئة لا تنفتح ليلاً، الانتباه
   دافئ لا أخضر، ومسطّح عند السكون.
   ═══════════════════════════════════════════════════════════════════ */

/* ١ — قاعدة الختم: كل تعبئة خضراء عليها حروف أو رمز يُقرأ. كانت تدرّجاً
   بين ‎--brand‎ و‎--brand-deep‎، وكلاهما ‎#17A05F‎ هنا، فالأبيض فوقها
   3.37:1. والتدرّج نفسه ممنوع: تعبئة واحدة. */
.brand-mark, .avatar, .punch, .mv-ev.on, .shift-btn.on, .chipbtn.active,
.picker-actions button.primary, .days-picker label:has(input:checked),
.toast.ok, .sheet-tabs button.active, .chat-av, .call-av, .cust-av, .ah-av,
.callmini, .callmini-yes, .callmini.ringing .callmini-yes,
.call-round.yes .call-round-ic, .chat-sendbtn, .call-act, .ra-pill.on,
.hn-main .punch, .hn-main .punch.is-in {
  background: var(--r-seal);
}
/* زر البصمة: كبسولة بلا توهّج مثل كل ما يُضغط. والمستدير القديم بحالة
   «داخل» كان تدرّجاً إلى ‎--ink‎ — وهو ليلاً فاتح، فيصير الأبيض فوق فاتح. */
.punch, .hn-main .punch, .hn-main .punch.is-in, .brand-mark { box-shadow: none; }
.hn-main .punch { border-radius: 999px; }
.punch.is-in { background: var(--r-ink-fixed); box-shadow: none; }

/* ٢ — التعبئة لا تنفتح ليلاً. ‎styles.css‎ كان يصلح الشارات بأحمر تجوال
   ‎#D92D20‎ وtoast النجاح بـ‎--brand‎ (أبيض على ‎#17A05F‎). */
:root[data-theme="dark"] .toast.ok { background: var(--r-seal); }
:root[data-theme="dark"] .bell-badge,
:root[data-theme="dark"] .hub-badge,
:root[data-theme="dark"] .toast.err { background: var(--r-danger-fill); }
/* شارة الشريط السفلي تعدّ غير المقروء — ختمٌ بالوضعين، لا حمراء ليلاً
   وخضراء نهاراً. وعلى العريض تعود حمراء لأنها هناك «متأخر». */
:root[data-theme="dark"] .tab .tab-badge { background: var(--badge-fill); }
@media (min-width: 1024px) {
  :root[data-theme="dark"] .tabbar .tab .tab-badge { background: var(--r-danger-fill); }
}

/* ٣ — الانتباه دافئ. عنبر تجوال كان لون «انتبه»، فلمّا صار ‎--brand‎ أخضر
   هنا صارت «قيد المراجعة» و«ينتظر من مدة» و«تنبيه» و«الموقع غير متاح»
   بلون «تمام» نفسه. */
.geo-engine.warn, .hm-cause-m.warn, .chat-wait.warm, .aq-ic.warm {
  background: var(--r-warn-wash); color: var(--r-warn-text);
}
.chan-warn .chan-dot, .prov-warn .chan-dot, .gps.bad .dot { background: var(--r-warn); }

/* النص الأحمر الصغير على غسلته: ‎--danger-ink‎ (5.37:1) بدل ‎--danger‎
   (4.26:1). ومبلغ الخصم كان أحمر تجوال مكتوباً صراحةً. */
.error, .badge.refuse, .badge.cancel, .site-note.bad, .badge.absent,
.badge.leave_unpaid, .chip.warn, .move-leg.out .leg-label, .chat-pill.warn,
.chat-win.shut, .chat-state.st-unread, .call-row.missed .call-icon,
.chat-wait.hot, .call-icon.miss, .aq-ic.hot,
.led-sum.take b, .led-row.take .led-amt { color: var(--danger-ink); }

/* ٤ — مسطّح عند السكون. الرموز ‎--shadow‎/‎--sh-*‎ صُفّرت في ‎:root‎؛ هنا ما
   كان يكتب ظلّه صراحةً. القطعة المختارة في المقسَّم كان يميّزها ظلّ خفيف
   على صينية رمادية؛ صار حدّاً 1px — نفس لغة البطاقات. */
.seg.active, .tb-seg button.on { box-shadow: 0 0 0 1px var(--r-line-2); }
.hub-card:hover { border-color: var(--r-ghost-line-hover); }

/* ٥ — الشكل والخط: كل ما يُضغط أو يُوسم كبسولة، وعناوين الصفحات بـCairo
   (الخط للحجم: 22px فما فوق). */
.chip { border-radius: 999px; }
.ph-text h2, .page-head h2 { font-family: var(--font-display); letter-spacing: -.7px; }

/* ٦ — أسطح المتصفّح من اللوحة لا من افتراضاته: التحديد والمؤشّر وشريط
   التمرير. ‎--brand-soft‎ و‎--brand-ink‎ ينقلبان ليلاً وحدهما. */
::selection { background: var(--brand-soft); color: var(--text); }
input, textarea { caret-color: var(--brand-ink); }
html { scrollbar-color: var(--r-line-3) transparent; }

/* ═══════════════════════════════════════════════════════════════════
   صندوق الوارد بعد نقده (٢ تشرين الأول ٢٠٢٦)

   ثلاثة أهداف: ثماني محادثات على شاشة الهاتف لا أربع (PRODUCT.md)،
   ورأس محادثة لا يخرج عن الشاشة، وردود جاهزة لكل شركة. لا ميزة تُحذف:
   ما غاب عن الصف يظهر للصف المفتوح، وصفّ القنوات خلف زرّه.
   ═══════════════════════════════════════════════════════════════════ */

/* عنوان القسم مكرّر — الشريط العلوي يحمل اسم الصفحة — وصار سطراً فارغاً
   بعد أن خرج منه زرّ «محادثة جديدة» إلى سطر الأدوات. */
.page[data-page="chat"] .chat-side > .page-head { display: none; }

/* ── سطر الأدوات: البحث يأخذ الباقي، والأزرار كبسولات ثابتة ─────── */
.chat-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.chat-tools .chat-search { flex: 1 1 auto; min-width: 0; margin: 0; height: 40px;
  padding-block: 0; }
.chat-search:focus-within { border-color: var(--r-primary);
  box-shadow: 0 0 0 3px rgba(23,160,95,.22); }
.chat-tool { flex: none; height: 40px; min-width: 40px; border-radius: 999px;
  border: 1px solid var(--r-ghost-line); background: var(--surface);
  color: var(--text-soft); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.chat-tool:hover { background: var(--r-bg); border-color: var(--r-ghost-line-hover); color: var(--text); }
.chat-sort { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px;
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.chat-sort svg { flex: none; }
/* فلتر قناةٍ فعّال: الزر يقول ذلك ولو طُوي الصف، فلا يختفي سبب قائمةٍ أقصر. */
#chat-chan-btn.on { color: var(--brand-ink); border-color: var(--r-primary);
  background: var(--brand-soft); }
@media (pointer: coarse) {
  .chat-tool, .chat-tools .chat-search { height: 44px; min-width: 44px; }
}

/* عدّاد الشريحة النشطة: كان أبيض على أخضرٍ مُبيَّض (3.18:1)؛ التظليل للداكن
   يرفعه فوق 4.5. */
.chipbtn.active .chan-n { background: rgba(0,0,0,.2); color: #fff; }

/* رقم الـQR بلون WhatsApp كأخيه، على الصورة الرمزية وفي شريحته. */
.chat-ch.whatsapp_qr { background: #25D366; }
#chat-channels [data-chatchannel="whatsapp_qr"]::before { background: #25D366; }

/* ── الصف سطران: من ومتى، ثم ماذا قال وكم ينتظر ─────────────────── */
.chat-row { padding: 8px 4px; gap: 10px; align-items: center; }   /* 62px: ثمانية تحت الشريط */
.chat-av { width: 40px; height: 40px; }
.chat-top { align-items: center; }
.chat-top b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.chat-top time { margin-inline-start: auto; }
.chat-line2 { display: flex; align-items: center; gap: 6px; margin-top: 2px; min-width: 0; }
.chat-line2 .chat-prev { flex: 1 1 auto; min-width: 0; margin: 0; }
.chat-line2 .chat-unread, .chat-line2 .chat-wait { flex: none; }
.chat-by { flex: none; max-width: 8em; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11.5px; color: var(--text-soft); }
/* «مسودة:» دافئة لا خضراء: ردٌّ لم يُرسل حالة انتباه، لا نجاح. */
.chat-draft { font-style: normal; font-weight: 700; color: var(--r-warn-text); }
/* رقم العملية والبيع والإعلان ومن ردّ: للصف المفتوح وحده. */
.chat-row:not(.on) .chat-tags { display: none; }
.chat-row.on .chat-tags:has(*) { margin-top: 6px; }
/* الصف المفتوح يُرى بالوضعين: كان ‎#1A1D23‎ على لوحٍ ‎#1A1D23‎ ليلاً (1.00:1).
   غسلة التحديد من DESIGN.md (Leaf Wash) لا شريطٌ ملوّن على حافته.
   الغسلة وحدها خفيفة (1.08:1 على الأبيض)، فيحيطها خطٌّ بكسلٍ واحد بأخضر
   الوصل (3.37:1 نهاراً، فوق 3:1 ليلاً) — إطارٌ للصف كله لا شريطٌ على حافته. */
.chat-row.on { background: var(--brand-soft); border-radius: 10px;
  border-bottom-color: transparent; box-shadow: inset 0 0 0 1px var(--r-primary); }
.chat-row.on .chat-ch { border-color: var(--brand-soft); }
.chat-sec { padding: 8px 4px 4px; }
.chat-sec.calm { padding-top: 12px; }

/* ── ارتفاع الطابور والمحادثة: ما تبقّى من النافذة، يحسبه ‎fitPane()‎ ── */
@media (min-width: 1024px) {
  .page[data-page="chat"] .chat-side,
  .page[data-page="chat"] .chat-thread { height: var(--chat-h, 74dvh); }
  .page[data-page="chat"] .chat-profile:not([hidden]) { max-height: var(--chat-h, 74dvh); }
}

/* ── رأس المحادثة على الهاتف: سطران لا سطرٌ يخرج عن الشاشة ──────────
   كان ٤٣٩–٤٦٧px داخل ٣٧٥: زرّ «بيانات المحادثة» خارجها كلياً وزرّ الحالة
   مقصوص. السطر الأول من وكيف تعود، والثاني النافذة ومن ردّ والحالة —
   فيبقى «آخر ردّ» مقروءاً كاملاً بدل أن يُخفى. */
@media (max-width: 719px) {
  .chat-head { flex-wrap: wrap; row-gap: 8px; }
  .chat-head > #chat-back { order: 1; }
  .chat-head > .chat-id { order: 2; flex: 1 1 0; min-width: 0; }
  .chat-head > #chat-info { order: 3; }
  .chat-head::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .chat-head > #chat-window { order: 5; max-width: none; }
  .chat-head > #chat-assign { order: 6; min-width: 0; flex: 0 1 auto; }
  .chat-head > #chat-state { order: 7; margin-inline-start: auto; min-height: 40px; }
}

/* على الهاتف خمسة أزرار حول المربع تتركه بعرض ٨٠px. زرّ «ردود جاهزة» يُخفى
   هنا وحده: الردود في متناول الإبهام من شريطها فوق المربع («كل الردود»)
   ومن «/»، والمربع يرجع لعرضه. */
@media (max-width: 719px) {
  .chat-composer #chat-canned { display: none; }
}

/* مربع الكتابة ١٦px على اللمس: تحته يكبّر iOS الشاشة عند التركيز. */
@media (max-width: 1023px), (pointer: coarse) {
  .chat-composer textarea { font-size: 16px; }
}

/* ── «/» وورقة الردود الجاهزة ──────────────────────────────────── */
.quick-row:has(.quick-sub) b { flex: none; max-width: 45%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.quick-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12.5px; color: var(--text-soft); }
.reply-list { display: flex; flex-direction: column; margin-bottom: 14px;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.reply-row { display: flex; align-items: center; gap: 4px; }
.reply-row + .reply-row { border-top: 1px solid var(--border); }
.reply-use { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 2px; padding: 11px 14px; text-align: start;
  font: inherit; color: var(--text); background: none; border: 0; cursor: pointer; }
.reply-use:hover:not(:disabled) { background: var(--surface-2); }
.reply-use:disabled { cursor: default; }
.reply-use b { font-size: 14px; font-weight: 700; }
.reply-use span { font-size: 13px; line-height: 1.7; color: var(--text-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-line; }
.reply-row .icon-btn { flex: none; margin-inline-end: 6px; }
.reply-form { margin-top: 4px; }
.reply-form h4 { margin: 0 0 10px; }
.reply-form textarea { resize: vertical; min-height: 96px; }
.reply-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.reply-actions .btn.danger { margin-inline-start: auto; }

/* ═══ «الآن» و«المزيد» — هيكلٌ يفهمه من لم يتعلّمه (٢ تشرين الأول ٢٠٢٦) ═══
   قرار المالك: «حتى المطي يعرف يستخدمه». الصفحة الأولى قائمةٌ مرتّبة بما
   ينتظرك، والشريط على الهاتف ثلاث خانات، والقائمة الجانبية صفحات كل يوم
   وحدها، وكل ما سواها في «المزيد» بنفس أقسامه. */

/* بعرض القراءة: سطر مهمة على 1180px يتشتّت فيه البصر بين طرفيه. */
.page[data-page="more"] { max-width: 720px; margin-inline: auto; }
/* «الآن» بعرض الصفحة لمن له بطاقات الأقسام، وبعرض القراءة لمن ليس له إلا
   قائمته — سطر مهمة على 1180px يتشتّت فيه البصر بين طرفيه. */
.page[data-page="hub"] { max-width: 1180px; margin-inline: auto; }
.page[data-page="hub"]:not(.as-areas) .now-head,
.page[data-page="hub"]:not(.as-areas) .now-main { max-width: 720px; margin-inline: auto; }

.now-head { margin: 4px 2px 16px; }
.now-head h2 { font-family: var(--font-display); font-size: 23px; font-weight: 700;
  letter-spacing: -.7px; line-height: 1.3; color: var(--text); }
.now-head p { margin-top: 2px; font-size: 13.5px; color: var(--text-soft); }

/* قائمةٌ واحدة بيضاء وخطوطٌ بين سطورها — لا بطاقة لكل سطر. */
.now-list { list-style: none; margin: 0; padding: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.now-row { display: flex; align-items: center; border-top: 1px solid var(--border); }
.now-row:first-child { border-top: 0; }
.now-hit { flex: 1; min-width: 0; min-height: 68px; display: flex; align-items: center;
  gap: 12px; padding: 13px 16px; background: none; border: 0; font: inherit;
  color: inherit; text-align: start; text-decoration: none; }
button.now-hit, a.now-hit { cursor: pointer; transition: background .15s ease; }
button.now-hit:hover, a.now-hit:hover { background: var(--surface-2); }
button.now-hit:focus-visible, a.now-hit:focus-visible {
  outline: 2px solid var(--r-primary); outline-offset: -2px; }

.now-ic { flex: none; width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center; }
.now-ic.tone-seal   { background: var(--brand-soft); color: var(--brand-ink); }
.now-ic.tone-warn   { background: var(--r-warn-wash); color: var(--r-warn-text); }
.now-ic.tone-danger { background: var(--danger-wash); color: var(--danger-ink); }
.now-ic.tone-calm   { background: var(--surface-2); color: var(--text-soft); }

.now-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.now-t b { font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--text); }
.now-t small { font-size: 13px; line-height: 1.6; color: var(--text-soft); }
.now-t .num, .more-badge { font-family: var(--font-mono); font-weight: 600;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
/* التقدّم بلا نص: أخضر الوصل — والختم لما يحمل كلمة. */
.now-track { display: block; height: 4px; max-width: 240px; margin-top: 7px;
  border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.now-track i { display: block; height: 100%; border-radius: inherit; background: var(--r-primary); }
.now-go { flex: none; display: grid; color: var(--r-muted-2); }
.now-act { flex: none; min-height: 44px; margin-inline-end: 16px; padding: 10px 18px;
  font-size: 14px; }

/* ما بعد المهام حالٌ لا عمل: نفس السطر بوزنٍ أخفّ. */
.now-row.quiet .now-t b { font-weight: 600; }
.now-row.quiet .now-hit { min-height: 62px; }

/* ── المزيد ── */
.more-me { margin: 4px 0 18px; }
.more-me .ws-pill { width: 100%; margin: 0; background: var(--surface); color: var(--text);
  border-color: var(--border); }
.more-me .ws-pill:hover { background: var(--brand-tint); }
.more-me .ws-swap { background: var(--brand-soft); color: var(--brand-ink); }
.more-me .ws-t small { opacity: 1; color: var(--text-soft); }

.more-group { margin-bottom: 18px; }
.more-group h3 { margin: 0 6px 8px; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.more-rows { background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  overflow: hidden; }
.more-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px;
  padding: 11px 16px; background: none; border: 0; border-top: 1px solid var(--border);
  font: inherit; color: var(--text); text-align: start; text-decoration: none; cursor: pointer;
  transition: background .15s ease; }
.more-row:first-child { border-top: 0; }
.more-row:hover { background: var(--surface-2); }
.more-row:focus-visible { outline: 2px solid var(--r-primary); outline-offset: -2px; }
.more-ic { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid;
  place-items: center; background: var(--surface-2); color: var(--text-soft); }
.more-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.more-t b { font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.more-t small { font-size: 12.5px; color: var(--text-soft); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-badge { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: grid; place-items: center; background: var(--badge-fill); color: #fff; font-size: 12px; }
.more-badge[hidden] { display: none; }
.more-go { flex: none; display: grid; color: var(--r-muted-2); }
/* الخروج كلمةٌ حمراء لا كبسولةٌ حمراء (DESIGN.md: الفعل الهدّام). */
.more-row.out { color: var(--danger-ink); }
.more-row.out .more-ic { background: var(--danger-wash); color: var(--danger-ink); }

/* الهاتف: المبدّل ينتقل من الترويسة إلى «المزيد» — كان يضغط اسم صاحب
   الحساب إلى 41px. */
@media (max-width: 1023px) {
  .ws-mount-top { display: none; }
  .now-hit { min-height: 64px; }
}
/* الشاشة العريضة: من أنت وأي شركة يحملهما رأس القائمة وقاعها. */
@media (min-width: 1024px) {
  .more-me { display: none; }
  .tabbar .rail-gap { flex: none; height: 1px; margin: 10px 14px 8px;
    background: var(--r-rail-line); }
}
@media (max-width: 1023px) { .tabbar .rail-gap { display: none; } }
@media (min-width: 1024px) {
  /* «الآن» عمودٌ واحد: شبكة العمودين كانت لبطاقات البوابة. */
  .page.active[data-page="hub"] { display: block; }
  /* بنود القائمة بارتفاع 40px: حبّة الأيقونة مصمّمة للشريط السفلي، وهنا
     كانت تمدّ كل بند إلى 54px فيسقط قاع القائمة (من أنت والخروج) تحت الشاشة. */
  .tabbar .tab { padding-block: 9px; }
  .tabbar .tab i { padding: 0; }
}

/* ═══ الطابور: الاستعجال والأسماء (٢ تشرين الأول ٢٠٢٦، الجولة الثالثة) ═══ */
/* الحالتان النادرتان تظهران مع زرّ التصفية أو حين تُختاران. */
#chat-filters:not(.more) .chipbtn.extra:not(.active) { display: none; }
/* الانتظار بأربع درجات حول هدف الرد (٢٠ دقيقة)، والشارة تمتلئ لمن ينتظر من
   يومٍ أو أكثر وحده — كان كل شيء فوق ٢٠ دقيقة بنفس الأحمر فلا يُعرف أيّها أسوأ. */
.chat-wait.late { background: var(--r-danger-fill); color: #fff; }
.dot.late { background: var(--r-danger-fill); }
/* نافذة الرد: هادئة، ثم تنبيه دافئ تحت ثلاث ساعات، ثم خطر تحت الساعة. */
.chat-win.ok   { background: var(--surface-2); color: var(--text-soft); }
.chat-win.soon { background: var(--r-warn-wash); color: var(--r-warn-text); }
.chat-win.late, .chat-win.shut { background: var(--danger-wash); color: var(--danger-ink); }
.chat-win-warn { color: var(--r-warn-text); }
.chat-win-warn.late, .chat-win-warn.shut { color: var(--danger-ink); }
/* الأحمر الخفيف غسلةُ الخطر نفسها، لا أحمر تجوال القديم (rgba(217,45,32,.12)). */
.chat-wait.hot { background: var(--danger-wash); }
/* الصور الرمزية محايدة: الأخضر لما لم يُقرأ وحده (شارة العدّ)، لا لكل وجه
   في القائمة — سبع عشرة تعبئة خضراء معاً كانت تطغى على الشارة نفسها. */
.chat-av, .cust-av { background: var(--surface-2); color: var(--text); }
/* ليلاً ‎--surface-2‎ هو لون القائمة نفسه، فتذوب الدائرة ويبقى الحرف وحده. */
:root[data-theme="dark"] .chat-av, :root[data-theme="dark"] .cust-av { background: var(--r-line); }
/* شريط الردود السريعة ينسحب حين تبدأ الكتابة: بالشفافية وحدها والطيّ فوري —
   تحريك ‎max-height‎ والحشوة كان يعيد حساب التخطيط في كل إطار. */
.chat-quickbar { transition: opacity .18s ease; }

/* ═══ بعد المراجعة المستقلة (٢ تشرين الأول ٢٠٢٦) ═══ */
/* شرائح الطابور على الشاشة العريضة تلتفّ سطرين: عمود الطابور نحو 285px
   فكانت «تمت» تُقصّ و«الكل» خارجه بلا أي إشارة أن الصف يُمرَّر. على
   الهاتف يبقى صفّاً يُمرَّر — السطر الثاني يكلّف محادثة من الثماني. */
@media (min-width: 720px) {
  #chat-filters { flex-wrap: wrap; overflow: visible; row-gap: 6px; }
}
/* الشريط العلوي على الشاشة العريضة: الاسم والصورة يحملهما قاع القائمة
   الجانبية، فلا يتكرّران هنا. وعلى «الآن» تسقط شارة «خارج الدوام»: سطر
   البصمة تحتها يقول الشيء نفسه. */
@media (min-width: 1024px) {
  .topbar .who { display: none; }
  body.on-now #tb-punch { display: none; }
}
/* شارة الانتظار صارت كلمة («4 ساعات»): لا تنكسر سطرين، وتُقرأ من اليمين.
   كان ‎direction: ltr‎ في styles.css لحماية «38د»، فلمّا صارت جملة عربية رسم
   الرقم يسار الكلمة فقُرئت «ساعات 4». العزل يبقى، والاتجاه عربي. */
.chat-wait { white-space: nowrap; direction: rtl; unicode-bidi: isolate; }

/* عنوان قائمة «ما ينتظرك»، والصورة الرمزية الصغيرة في أسماء «في الدوام الآن». */
.now-sec { margin: 0 2px 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.in-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 13px; }
:root[data-theme="dark"] .in-av { background: var(--r-line); }
/* رسم الاتصالات يُرسم على عرض 300 ويتمدّد مع بطاقته: على الشاشة العريضة صارت
   أرقام محوره نحو 20px. سقفٌ لعرضه يبقيها قريبة من حجمها المكتوب (10.5px). */
.tb-card svg.tb-viz:not(.tb-spark) { max-width: 380px; margin-inline: auto; }

/* ═══ «الآن» للمدير: حسب القسم، بقواعد الترتيب من موقع «ناس» (٢ تشرين الأول) ═══
   اختيار المالك «ج»، ثم «قواعده على النظام»: شبكةٌ واحدة، وفراغٌ بين الأقسام
   أكبر منه داخلها، وبطاقاتٌ تنفصل بلونها لا بخطوطها، ورقمٌ كبير تحته اسمه،
   ورابطٌ نصّي واحد لكل بطاقة. لا صور ولا عناوين ضخمة: هذا مكان عمل يومي. */
#now-areas { display: none; }
.page[data-page="hub"].as-areas #now-areas { display: block; }
.page[data-page="hub"].as-areas .now-main { display: none; }
.page[data-page="hub"].as-areas .now-head h2 { font-size: 28px; }

/* البطاقات والقوائم بلا إطار: الأبيض على ورق الصفحة يكفي ليفصلها. */
.now-list, .more-rows { border: 0; }
.page[data-page="hub"] .hub-reports .tb-card { border-color: transparent; }

.area-bar { margin-bottom: 4px; }
.area-title { margin: 32px 2px 12px; font-size: 18px; font-weight: 700; color: var(--text); }
.area-bar + .area-title { margin-top: 28px; }
.area-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px)  { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.area-card { display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: var(--surface); border-radius: 18px; }
.area-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.area-h b { font-size: 15px; font-weight: 700; }
.area-link { background: none; border: 0; padding: 10px 0; margin: -10px 0; min-height: 44px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-ink); cursor: pointer; }
.area-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.area-link:focus-visible { outline: 2px solid var(--r-primary); outline-offset: 2px; border-radius: 6px; }

/* الرقم الكبير واسمه تحته — مثل «+300 موظف» هناك. */
.area-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.area-n { font-family: var(--font-mono); font-size: 44px; font-weight: 600; line-height: 1.05;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; color: var(--text); }
.area-of { font-size: 15px; font-weight: 600; color: var(--text-soft); }
.area-l { flex-basis: 100%; display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--text); }
.area-calm { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text-soft); }
.area-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.area-dot.warn { background: var(--r-warn); }
.area-dot.seal { background: var(--r-primary); }
.area-sub { margin: -8px 0 0; font-size: 13px; color: var(--text-soft); }

/* الأرقام الصغيرة: ثلاثة على سطر، يفصلها عن الرقم الكبير خطٌّ واحد رفيع. */
.area-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0;
  padding-top: 14px; border-top: 1px solid var(--border); }
.area-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.area-stats dt { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.area-stats dd { margin: 0; font-size: 22px; line-height: 1.3; }
.area-stats dd .num { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; }
.area-stats dd .word { font-size: 15px; font-weight: 700; }

.area-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.area-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.area-list .in-av { grid-row: 1 / span 2; }
.area-list b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-list small { font-size: 12px; color: var(--text-soft); }

/* صفوف «يحتاج قرارك» تمتد لحافتي البطاقة، ومحتواها على خطّ محتوى البطاقة. */
.area-rows { margin: -4px -20px -20px; border-radius: 0 0 18px 18px; }
.area-rows .now-hit { min-height: 60px; padding-inline: 20px; }

/* هيكل رمادي مكان رقمٍ لم يصل بعد — لا قفزة حين يصل. */
.sk { display: inline-block; height: .9em; border-radius: 6px; background: var(--surface-2);
  vertical-align: middle; }
:root[data-theme="dark"] .sk { background: var(--r-line); }

.page[data-page="hub"] > .hub-reports { margin-top: 32px; }
/* عنوان لوحة الفريق بمقاس عناوين الأقسام فوقه («اليوم في شركتك»). */
.page[data-page="hub"] .hub-reports .tb-head h3 { font-size: 18px; font-weight: 700; }

/* ═══ إحساس موقع «ناس» بألوان ربط (٢ تشرين الأول ٢٠٢٦) ═══
   اختيار المالك بعد ni.iq: عناوين أكبر وأهدأ، ورسمة هندسية من خطّ الشعار،
   وألوان أهدأ — الأخضر للأزرار وللحيّ وحده — وأرقام أكبر وفراغ أوسع بين
   الأقسام. صفحات الشغل الكثيف تأخذ الهدوء والترتيب وتبقى كثيفة. */
.now-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.now-hello { min-width: 0; }
.now-art { display: none; }
@media (min-width: 1024px) {
  .page[data-page="hub"].as-areas .now-art { display: block; flex: none; width: 340px; }
  .page[data-page="hub"].as-areas .now-head { margin-bottom: 8px; }
}
.art { display: block; width: 100%; height: auto; }
.art-grid line { stroke: var(--r-line-2); stroke-width: 1; }
.art-step { fill: var(--brand-soft); }
.art-live { fill: var(--r-primary); }
.art-stroke { fill: none; stroke: var(--r-seal); stroke-width: 26; stroke-linecap: round; }
.art-dot { fill: var(--r-ink); }

/* عناوين أكبر وأهدأ: التحية بمقاس العرض (Cairo 38px)، وعناوين الأقسام 24px. */
.page[data-page="hub"].as-areas .now-head h2 { font-size: 38px; letter-spacing: -1.2px; line-height: 1.3; }
.area-title, .page[data-page="hub"] .hub-reports .tb-head h3 {
  font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
@media (min-width: 1024px) {
  .area-title { margin-top: 48px; }
  .page[data-page="hub"] > .hub-reports { margin-top: 48px; }
}
.area-n { font-size: 52px; }

/* ألوان أهدأ: بلاطة المهمة محايدة، والأخضر لا يلوّنها لمجرد أنها عمل؛ التنبيه
   يلوّن أيقونته وحدها، والخطر وحده يحتفظ بغسلته لأنه يوقف الشركة. */
.now-ic.tone-seal, .now-ic.tone-calm { background: var(--surface-2); color: var(--text-soft); }
.now-ic.tone-warn { background: var(--surface-2); color: var(--r-warn-text); }
:root[data-theme="dark"] .now-ic.tone-seal, :root[data-theme="dark"] .now-ic.tone-calm,
:root[data-theme="dark"] .now-ic.tone-warn { background: var(--r-line); }

/* لا شيء ينتظرك: الرسمة الصغيرة وجملتان، لا سطرٌ رمادي بين السطور. */
.now-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 20px 24px;
  text-align: center; }
.now-empty .art-sm { width: 200px; margin-bottom: 10px; }
.now-empty b { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.now-empty small { font-size: 13.5px; color: var(--text-soft); }

/* ── «ذكّرني بهذا العميل» ─────────────────────────────────────────────
   شريطٌ رفيع فوق الرسائل: القادم رماديٌّ هادئ، وما حان بغسلة التنبيه — هو سبب
   رجوع المحادثة فتقع العين عليه أولاً. والإجراء كلمةٌ لا زرٌّ ممتلئ. */
.chat-remind { display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  font-size: 13px; color: var(--text-soft); background: var(--surface-2);
  border-bottom: 1px solid var(--r-line); }
.chat-remind[hidden] { display: none; }
.chat-remind > svg { flex: none; }
.chat-remind .rm-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.chat-remind .rm-txt b { font-weight: 600; color: var(--text); }
.chat-remind.due { background: var(--r-warn-wash); color: var(--r-warn-text); }
.chat-remind.due { border-bottom-color: var(--r-warn-line); }
.chat-remind.due .rm-txt b { color: var(--r-warn-text); }
:root[data-theme="dark"] .chat-remind.due {
  background: color-mix(in srgb, var(--warn) 15%, var(--surface)); color: var(--warn-text); }
:root[data-theme="dark"] .chat-remind.due { border-bottom-color: color-mix(in srgb, var(--warn) 30%, var(--surface)); }
:root[data-theme="dark"] .chat-remind.due .rm-txt b { color: var(--warn-text); }
.rm-act { flex: none; font: inherit; font-weight: 600; color: var(--brand-ink); background: none;
  border: 0; padding: 6px 8px; min-width: 44px; min-height: 40px; cursor: pointer; }
/* جرس القائمة: بجانب الوقت، رماديٌّ لما هو قادم وبلون التنبيه لما حان. */
.chat-rem-ic { display: inline-grid; place-items: center; color: var(--r-muted); }
.chat-rem-ic.due { color: var(--r-warn-text); }
:root[data-theme="dark"] .chat-rem-ic.due { color: var(--warn-text); }

/* في قائمة الحالة: الموعد القائم سطرٌ بإلغائه، ثم ملاحظةٌ اختيارية، ثم المواعيد
   كبسولاتٍ بإبهام (40px)، و«وقت آخر…» بحدٍّ متقطّع لأنه يفتح ولا يختار. */
.rm-current { display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; }
.rm-current span { flex: 1; min-width: 0; }
.rm-other { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12.5px;
  color: var(--text-soft); }
.rm-note-in { width: 100%; margin-top: 8px; }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rm-chip { font: inherit; font-size: 13px; font-weight: 600; padding: 9px 14px; min-height: 40px;
  border-radius: 999px; border: 1px solid var(--r-line-2); background: var(--surface);
  color: var(--text); cursor: pointer; }
.rm-chip:hover { background: var(--surface-2); }
.rm-chip.ghost { border-style: dashed; color: var(--text-soft); }
.rm-custom { display: flex; gap: 8px; margin-top: 8px; }
.rm-custom[hidden] { display: none; }
.rm-custom input { flex: 1; min-width: 0; }
.rm-hint { display: block; margin-top: 8px; font-size: 12px; color: var(--text-soft); }

/* ── مراحل البيع ───────────────────────────────────────────────────────
   أعمدةٌ بلون الورق الغائر وبطاقاتٌ بيضاء بلا خطّ ولا ظلّ (مسطّح عند السكون،
   والفصل بالدرجة كما في «الآن»). العدد مونو، ولون المرحلة نقطةٌ لا تعبئة.
   على الهاتف تبويباتٌ نصّية بخطّ أخضر تحت المفتوح وعمودٌ واحد. */
.pl-tabs { display: none; }
.pl-cols { display: grid; grid-template-columns: repeat(5, minmax(208px, 1fr)); gap: 12px;
  align-items: start; overflow-x: auto; padding-bottom: 8px; }
.pl-col { background: var(--surface-2); border-radius: 18px; padding: 10px; min-width: 0;
  display: flex; flex-direction: column; gap: 8px; transition: background .15s; }
.pl-col.over { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--r-primary); }
/* ليلاً الورق الغائر والسطح لونٌ واحد (#1A1D23)، فتذوب البطاقة في عمودها:
   العمود يصير خطّاً على الصفحة، والبطاقة سطحاً عليها. */
:root[data-theme="dark"] .pl-col { background: transparent; box-shadow: inset 0 0 0 1px var(--r-line); }
:root[data-theme="dark"] .pl-col.over { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--r-primary); }
.pl-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 2px; flex-wrap: wrap; }
.pl-head b { font-size: 14px; font-weight: 700; }
.pl-head .num, .pl-tab .num { font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--text-soft); direction: ltr; unicode-bidi: isolate; }
.pl-head .num { margin-inline-start: auto; }
.pl-head small { flex-basis: 100%; font-size: 11.5px; color: var(--text-soft); }
.pl-list { display: flex; flex-direction: column; gap: 8px; min-height: 56px; }
.pl-card { background: var(--surface); border-radius: 14px; padding: 10px 10px 4px; cursor: grab; }
.pl-card.lift { opacity: .45; }
.pl-open { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0;
  padding: 0; text-align: start; cursor: pointer; font: inherit; color: inherit; }
.pl-card .chat-av { width: 34px; height: 34px; flex: none; font-size: 14px; }
.pl-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pl-txt b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-txt small { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.pl-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px;
  color: var(--text-soft); min-width: 0; }
.pl-age { font-weight: 600; direction: rtl; unicode-bidi: isolate; white-space: nowrap; }
.pl-tag { padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink);
  font-weight: 600; white-space: nowrap; }
.pl-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-move { margin-inline-start: auto; flex: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--brand-ink); background: none; border: 0; padding: 8px 4px; min-height: 36px; cursor: pointer; }
.pl-empty, .pl-more { font-size: 12.5px; color: var(--text-soft); text-align: center; padding: 12px 4px; margin: 0; }
@media (max-width: 1023px) {
  .pl-tabs { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--r-line); margin-bottom: 12px; }
  .pl-tabs.more { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 36px);
    mask-image: linear-gradient(to left, transparent 0, #000 36px); }
  .pl-tabs::-webkit-scrollbar { display: none; }
  .pl-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px;
    font-weight: 600; color: var(--text-soft); background: none; border: 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 2px; min-height: 44px;
    cursor: pointer; white-space: nowrap; }
  .pl-tab.on { color: var(--brand-ink); border-bottom-color: var(--r-primary); }
  .pl-cols { display: block; overflow: visible; padding: 0; }
  .pl-col { display: none; background: none; padding: 0; }
  .pl-col.on { display: flex; }
  .pl-col .pl-head { display: none; }
  .pl-card { cursor: default; padding: 12px 12px 4px; }
}

/* ── رمز «راسلنا» للمحل ────────────────────────────────────────────────
   بطاقةٌ لكل ورقة معلّقة: الرمز نفسه على بياضٍ دائم (القارئ يحتاج حافةً
   فاتحة حتى ليلاً)، ثم اسم المكان والرابط القصير، وثلاثة أرقام: مسحات ←
   محادثات ← بيع. الأفعال: «اطبع» وحدها ممتلئة، والباقي شبحيّ أو كلمة. */
.qp-bar { display: flex; margin-bottom: 14px; }
.qp-bar .btn, .qp-acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.qp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 14px; }
.qp-card { display: flex; gap: 16px; padding: 16px; background: var(--surface); border-radius: 18px;
  align-items: flex-start; min-width: 0; }
.qp-art { flex: none; width: 132px; height: 132px; border-radius: 12px; overflow: hidden; background: #fff; }
.qp-art svg { width: 100%; height: 100%; display: block; }
.qp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qp-info > b { font-size: 16px; font-weight: 700; }
.qp-url { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-soft);
  direction: ltr; unicode-bidi: isolate; text-align: end; overflow-wrap: anywhere; }
.qp-stats { display: flex; gap: 22px; margin: 4px 0 2px; }
.qp-stats div { display: flex; flex-direction: column; gap: 2px; }
.qp-stats dt { font-size: 11.5px; color: var(--text-soft); }
.qp-stats dd { margin: 0; font-family: var(--font-mono); font-size: 20px; font-weight: 600;
  direction: ltr; unicode-bidi: isolate; text-align: start; }
.qp-msg { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-soft); overflow-wrap: anywhere; }
.qp-msg q { color: var(--text); quotes: "«" "»"; }
.qp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.qp-text { font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-ink); background: none;
  border: 0; padding: 10px 6px; min-height: 44px; cursor: pointer; }
.qp-text.danger { color: var(--danger-ink); }
.qp-nums { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.qp-num { font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 12px; min-height: 36px;
  border-radius: 999px; border: 1px solid var(--r-line-2); background: var(--surface); cursor: pointer; }
.qp-empty { max-width: 520px; margin: 32px auto; padding: 28px 22px; text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: 10px; background: var(--surface); border-radius: 18px; }
.qp-empty-art { width: 88px; height: 88px; color: var(--text-soft); opacity: .35; margin-bottom: 4px; }
.qp-empty-art svg { width: 100%; height: 100%; }
.qp-empty b { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.qp-empty p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-soft); }
.qp-empty small { font-size: 12.5px; color: var(--text-soft); }
@media (max-width: 560px) {
  .qp-card { flex-direction: column; align-items: stretch; }
  .qp-art { width: 168px; height: 168px; align-self: center; }
}

/* الطباعة: الورقة وحدها بمقاس A5 — كل ما سواها يُخفى ما دام الصنف على الجسم. */
#qp-print { display: none; }
@media print {
  @page { size: A5 portrait; margin: 12mm; }
  body.qp-printing > *:not(#qp-print) { display: none !important; }
  body.qp-printing #qp-print { display: block !important; }
  /* الورقة في وسط الصفحة لا في أعلاها: A5 ناقص الهوامش ≈ 186mm. */
  .qp-poster { min-height: 180mm; display: flex; flex-direction: column; justify-content: center; }
}
.qp-poster { text-align: center; color: #141414; }
.qp-poster .qp-co { font-size: 16pt; font-weight: 700; margin: 0 0 4mm; }
.qp-poster h1 { font-family: var(--font-display); font-size: 24pt; line-height: 1.3; margin: 0 0 8mm; }
.qp-poster .qp-code { width: 90mm; height: 90mm; margin: 0 auto 6mm; }
.qp-poster .qp-code svg { width: 100%; height: 100%; display: block; }
.qp-poster .qp-how { font-size: 13pt; margin: 0 0 3mm; }
.qp-poster .qp-link { font-family: var(--font-mono); font-size: 11pt; color: #555; margin: 0; }

/* ── «بالدوام الآن» أعلى الصندوق ─────────────────────────────────────
   سطرٌ هادئ لا شريط: من المتاح باسمه الأول، والنقطة الخضراء لمن الصندوق
   مفتوحٌ أمامه الآن. وحين لا أحد يصير السطر بلون التنبيه — لا أحمر: لا شيء
   تعطّل، الدوام فارغٌ فقط. */
.chat-team { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 2px 16px 8px; font-size: 12.5px; color: var(--text-soft); }
.chat-team[hidden] { display: none; }
.chat-team > b { font-weight: 600; }
.ct-who { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 600; }
.ct-who i { width: 7px; height: 7px; border-radius: 50%; background: var(--r-line-3); flex: none; }
.ct-who i.on { background: var(--r-primary); }
.chat-team.none { gap: 6px; color: var(--r-warn-text); }
.chat-team.none svg { flex: none; }
:root[data-theme="dark"] .chat-team.none { color: var(--warn-text); }

/* ── قائمة الأسعار ──────────────────────────────────────────────────────
   قائمةٌ بيضاء واحدة بلا خطّ خارجي، والسعر مونو عند نهاية السطر؛ ثم «هكذا
   تصل العميل» نصّاً كما سيُرسل — المعاينة هي الوثيقة. */
.pr-bar { display: flex; margin-bottom: 14px; }
.pr-bar .btn, .pr-empty .btn { display: inline-flex; align-items: center; gap: 6px; }
.pr-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: 18px;
  max-width: 760px; }
.pr-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 60px;
  border-bottom: 1px solid var(--r-line); }
.pr-row:last-child { border-bottom: 0; }
.pr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-main b { font-size: 14.5px; font-weight: 600; }
.pr-main small { font-size: 12.5px; color: var(--text-soft); }
.pr-price { font-family: var(--font-mono); font-size: 14px; font-weight: 600; white-space: nowrap;
  unicode-bidi: isolate; }
.pr-acts { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.pr-acts [data-up] svg { transform: rotate(90deg); }
.pr-text { font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-ink); background: none;
  border: 0; padding: 10px 6px; min-height: 44px; cursor: pointer; }
.pr-text.danger { color: var(--danger-ink); }
.pr-text.wide { width: 100%; margin-top: 4px; }
.pr-preview { max-width: 760px; margin-top: 22px; }
.pr-preview h3 { font-size: 14px; font-weight: 700; margin: 0 0 8px; }
.pr-preview pre { margin: 0; padding: 14px 16px; background: var(--surface-2); border-radius: 14px;
  font: inherit; font-size: 13.5px; line-height: 1.8; white-space: pre-wrap; }
.pr-preview small { display: block; margin-top: 8px; font-size: 12.5px; color: var(--text-soft); }
.pr-empty { max-width: 520px; margin: 32px auto; padding: 28px 22px; text-align: center; display: flex;
  flex-direction: column; align-items: center; gap: 10px; background: var(--surface); border-radius: 18px; }
.pr-empty b { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.pr-empty p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--text-soft); }
.pr-empty small { font-size: 12.5px; color: var(--text-soft); }

/* ── طلبا الموظف: تعديل البصمة وتبديل الدوام ────────────────────────────
   لوحٌ أبيض واحد لكل قسم: عنوانٌ وزرٌّ شبحي، ثم الطلبات سطراً سطراً بحالتها
   كلمةً على كبسولة. وما ينتظر جواباً (طلب زميل، أو قرار مدير) بطاقةٌ بفعلين:
   «أوافق» ممتلئة وحدها. */
.hrq { background: var(--surface); border-radius: 18px; padding: 14px 16px; margin: 0 0 14px; }
.hrq[hidden] { display: none; }
.hrq > .sub { margin: 4px 0 10px; }
.hrq-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; }
.hrq-head b { font-size: 15px; font-weight: 700; }
.hrq-list { list-style: none; margin: 0; padding: 0; }
.hrq-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; min-height: 52px;
  border-top: 1px solid var(--r-line); }
.hrq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hrq-main b { font-size: 14px; font-weight: 600; }
.hrq-main small { font-size: 12.5px; color: var(--text-soft); }
.hrq-chip { flex: none; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft); white-space: nowrap; }
.hrq-chip.ok { background: var(--brand-soft); color: var(--brand-ink); }
.hrq-chip.warn { background: var(--r-warn-wash); color: var(--r-warn-text); }
.hrq-chip.bad { background: var(--r-danger-wash); color: var(--danger-ink); }
:root[data-theme="dark"] .hrq-chip.warn { background: color-mix(in srgb, var(--warn) 15%, var(--surface));
  color: var(--warn-text); }
.hrq-ask { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  margin: 8px 0; border-radius: 14px; background: var(--surface-2); }
.hrq-ask p { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.7; }
.hrq-ask small { display: block; font-size: 12.5px; color: var(--text-soft); }
.hrq-acts { display: inline-flex; gap: 8px; flex: none; }
.hrq-text { font: inherit; font-size: 13px; font-weight: 600; color: var(--danger-ink); background: none;
  border: 0; padding: 8px 4px; min-height: 40px; cursor: pointer; flex: none; }
.hrq-empty { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-soft); }
.hn-fix { display: block; margin: 10px auto 0; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--brand-ink); background: none; border: 0; padding: 10px 6px; min-height: 44px; cursor: pointer; }
.hn-fix[hidden] { display: none; }
#sw-kinds { margin: 4px 0 14px; }

/* ═══ «المزيد» يكبّر القائمة الجانبية نفسها (٣ تشرين الأول ٢٠٢٦) ═══
   كل صفحة باقية تنضاف بمكانها في قسمها؛ السهم يدور للأعلى مفتوحاً. الحركة
   لحظةٌ واحدة على البنود المضافة عند الفتح وحده — لا تعاد مع كل تنقّل. */
@media (min-width: 1024px) {
  .tabbar .rail-more .rail-chev { margin-inline-start: auto; display: grid;
    color: rgba(255,255,255,.5); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
  .tabbar .rail-more.open .rail-chev { transform: rotate(90deg); }
  .tabbar .rail-more.active .rail-chev { color: inherit; }
  .tabbar .rail-more:focus-visible { outline: 2px solid var(--r-lime); outline-offset: -2px; }
  .tabbar .tab.rail-add { animation: rail-open .26s cubic-bezier(.2,.8,.2,1); }
}
@keyframes rail-open { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .tabbar .tab.rail-add { animation: none; }
  .tabbar .rail-more .rail-chev { transition: none; }
}