/*
 * جسر بين غلاف إنيرشا وتصميم المنصة.
 *
 * `app.css` مكتوب على أن تخطيط الصفحة ابن مباشر لـ`body`، وإنيرشا يضع `#app`
 * بينهما. القاعدتان هنا ترفعانه من الحساب: في اللوحة يصير هو الغلاف نفسه،
 * وفي شاشات الدخول يُلغى أثره تمامًا.
 */
#app { display: flex; height: 100dvh; overflow: hidden; }

/* بقايا صنف `auth` على شاشة فيها البار تسطّح الغلاف فينكمش البار إلى طول محتواه. */
body.auth #app:not(:has(> .sb)) { display: contents; }

/*
 * الأزرار الرئيسية بلون البار لا بالأسود، ويُعمَّم على المنصة.
 */
.auth-sub, .b1 { background: var(--slate); }
@media (hover: hover) {
.auth-sub:hover, .b1:hover { background: var(--slate-d); opacity: 1; } }

/*
 * روابط إنيرشا تُرسم `<a>` حيث كانت المنصة تستعمل `<button>`، فيظهر خط سفلي
 * لم يكن في التصميم. يُنزع عن عناصر البار والقوائم — لا عن نصّ المحتوى.
 */
.sb-new, .sb-item, .sb-user, .umenu a, .umenu button, .auth-alt a { text-decoration: none; }
/* بلا هذا يأخذ سفاري الضغطتين على اسم المحادثة تكبيراً ولا يرسل الثانية. */
.sb-row .sb-item { touch-action: manipulation; }

/*
 * قائمة المستخدم أسفل البار: تفتح **منسدلة** لا تنقل لصفحة.
 */
.umenu {
    position: absolute;
    inset-inline: 10px;
    bottom: 66px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: grid;
    gap: 2px;
    z-index: 30;
}

/*
 * العناصر **رابطًا كانت أو زرًّا**.
 *
 * «تسجيل الخروج» صار زرًّا (الخروج طلب POST لا رابط)، فسقط خارج قواعد
 * `.umenu a` كلها: بلا قياس للأيقونة تظهر بحجمها الطبيعي فتملأ القائمة،
 * وبلا اللون تفقد دلالتها.
 */
.umenu a,
.umenu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    background: transparent;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    text-align: start;
    color: var(--ink);
    cursor: pointer;
}

@media (hover: hover) {

.umenu a:hover,
.umenu button:hover { background: var(--canvas); } }
/* الكلمة العربية تبدو أعلى من أيقونتها وهي في وسط صندوقها: جسم الحروف تحت منتصف السطر والألف واللام فوقه. تنزل 1px فتتوسّط بالعين */
.umenu a > span,
.umenu button > span { position: relative; top: 1px; }

.umenu a svg,
.umenu button svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    flex: 0 0 17px;
}

.umenu .danger { color: var(--bad-ink); }
@media (hover: hover) {
.umenu .danger:hover { background: var(--bad-soft); } }

/*
 * البار المطويّ: العلامة وحدها لا الشعار الكامل.
 *
 * الشعار الأفقي يفيض خارج البار المطويّ ويُقصّ نصفه، والعلامة مربّعة فتقرأ
 * في أي عرض.
 */
.sb-brand .brand-mark { display: none; width: 34px; height: 34px; border-radius: 10px; }

body.sb-collapsed .sb-brand .brand-full { display: none; }
body.sb-collapsed .sb-brand .brand-mark { display: block; }

/*
 * نصف قطر الأزرار: **نفس نصف قطر الحقل** لا حبّة كاملة.
 *
 * الحبّة الكاملة تصنع لغتين في الشاشة الواحدة — حقل بزوايا 10 وزر بزوايا 999.
 * التوحيد يجعل النموذج كتلة واحدة.
 */
:root { --r-btn: var(--r-m); }

/*
 * وكل زرّ في المنصة يقرأ `--r-btn` — لا زرّ يكتب نصف قطره بنفسه.
 * أزرار نافذة الحذف كانت 999 (حبّة كاملة) بينما زرّ التسجيل 14، فتقرأ
 * الشاشتان كأنهما من منتجين. مصدر واحد يعني أن تغييره سطر واحد.
 */
.auth-sub, .b1, .b2, .bc, .okb,
.mdl .b1, .mdl .b2, .mdl-act .b1, .mdl-act .b2,
.cfm-act .b1, .cfm-act .b2, .wa-act .b1, .wa-act .b2 { border-radius: var(--r-btn); }

/*
 * ══ مقاسات شاشات الضيف — رقم واحد لكل مقاس ══
 *
 * الدخول والتسجيل ونسيت كلمة المرور وتعيينها والتحقق: خمس شاشات كانت كل
 * واحدة تأخذ ارتفاعها من قاعدة مختلفة، فيطلع حقل 48 جنب قائمة 110. المقاس
 * يُعرَّف هنا مرّة، وكل قاعدة تحته تقرأه — وتغييره يتم في سطر واحد.
 */
:root {
    /* الحركة: مدتان ومنحنيان لكل المنصة، لا رقم في كل عنصر */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 180ms;
    --dur-mid: 320ms;
    --auth-h: 46px;        /* الحقول والقوائم وزر كشف كلمة المرور */
    --auth-btn-h: 46px;    /* الزر الرئيسي في النموذج: بارتفاع الحقول */
    --auth-gap: 10px;      /* بين مجموعات النموذج، صفًّا وعمودًا */
    --auth-logo-h: 48px;
    --auth-logo-mb: 12px;
    --auth-lift: 15px;     /* رفع رأس البطاقة: الشعار أعلى بمقداره */
    --auth-logo-lift: 42px; /* رفع الشعار **وحده** فوق العنوان */
    --auth-card-h: 453px;   /* ارتفاع بطاقة الضيف: مقيس من شاشة الدخول */
}

/*
 * الشعار أعلى في كل شاشات الضيف — مكان واحد لا خمسة.
 *
 * `auth-head` هو أول ما في البطاقة في الشاشات الخمس، فرفعه يرفع الشعار
 * (أو أيقونة التحقق) ومعه العنوان بلا لمس أي صفحة.
 */
body.auth .auth-head { margin-top: calc(var(--auth-lift) * -1); }
/*
 * الشعار وحده يرتفع، والعنوان يبقى مكانه.
 *
 * رفع الرأس كله يقرّبه من حافة البطاقة ويشدّ العنوان معه. فالسالب أعلى
 * الشعار يرفعه، ومثله يُضاف تحته فيرجع ما بعده إلى موضعه بالضبط.
 */
.auth-head .auth-logo {
    height: var(--auth-logo-h);
    margin-bottom: var(--auth-logo-mb);
    /*
     * الإزاحة بالموضع لا بالهامش: الهامش السالب أعلى أول عنصر **ينطوي** مع
     * هامش أبيه فيُبتلع، والموجب تحته يدفع العنوان لأسفل بدل ما يرفع الشعار.
     * والإزاحة هنا لا تغيّر ارتفاع الرأس، فالبطاقة تبقى في مركزها.
     */
    position: relative;
    top: calc(var(--auth-logo-lift) * -1);
}
/* بلا جملة تمهيد: العنوان يلتصق بالشعار والحقول تبدأ أعلى */
.auth-head h1 { margin-bottom: 4px; font-weight: 700; letter-spacing: -.02em; }

/*
 * قائمة الاختيار — بديل `<select>`.
 */
.dd { position: relative; }

.dd-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--line);
    background: var(--control);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.dd-btn.dd-ph { color: var(--faint); }
.dd-btn.bad { border-color: var(--bad-ink); }
/* التركيز لا يمحو الخطأ: أول حقل ناقص يأخذ المؤشر بعد «متابعة» فيبقى أحمر حتى يُختار */
.dd-btn.bad:focus { border-color: var(--bad-ink); box-shadow: 0 0 0 3px rgba(233, 108, 108, .2); }
.dd-btn svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 18px; }

.dd-menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 6px);
    max-height: 220px;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: grid;
    gap: 2px;
    z-index: 40;
}

.dd-menu button {
    text-align: start;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}

@media (hover: hover) {

.dd-menu button:hover { background: var(--canvas); } }
.dd-menu button.on { background: var(--mint-soft); color: var(--slate-d); }
/* فتح القائمة المنسدلة: ظهور وانزلاق 4px، والإغلاق أسرع. المنقلبة لأعلى تنزلق من تحت. */
.dd-pop-enter-active { transition: opacity 140ms ease-out, transform 140ms ease-out; }
.dd-pop-leave-active { transition: opacity 90ms ease-in, transform 90ms ease-in; }
.dd-pop-enter-from, .dd-pop-leave-to { opacity: 0; transform: translateY(-4px); }
.dd-up.dd-pop-enter-from, .dd-up.dd-pop-leave-to { transform: translateY(4px); }
@keyframes dd-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* لوحة الفلترة (v-show) وقوائم الجدول بنفس الحركة عند الظهور. */
.dt-filters { animation: dd-drop 140ms ease-out; }
/* قائمة الصف تكبر قليلاً من زاوية زرّها وهي تنزل */
.dt-menu { animation: dt-menu-in var(--dur-fast) var(--ease-out); transform-origin: top center; }
@keyframes dt-menu-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .dt-filters, .dt-menu { animation: none; }
  .dd-pop-enter-active, .dd-pop-leave-active { transition: none; }
  .dd-pop-enter-from, .dd-pop-leave-to, .dd-up.dd-pop-enter-from, .dd-up.dd-pop-leave-to { transform: none; }
}

/*
 * تقييم الرد — إبهامان تحت رد المحاسب، و«لا» تفتح سببًا.
 */
.rate { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

.rate :is(button, a) {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    color: var(--faint);
    cursor: pointer;
    transition: .15s;
}

@media (hover: hover) {

.rate :is(button, a):hover { color: var(--muted); background: var(--canvas); } }
.rate :is(button, a) svg { width: 17px; height: 17px; }
.rate button.on { color: var(--mint-d); border-color: var(--mint-line); background: var(--mint-soft); }
.rate .tiny { color: var(--faint); }

.why { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.why button {
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--control);
    font: inherit;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
}

@media (hover: hover) {

.why button:hover { border-color: var(--slate-l); color: var(--ink); } }

/*
 * شريط الخطوات: دائرة أكبر قليلًا — **مربعة القياس** فتبقى دائرة.
 *
 * الحشوة تكسر التساوي وتحوّلها بيضة، فالإزاحة تكون على الرقم نفسه لا على
 * الدائرة: نصف بكسل يصحّح جلوس الرقم بلا أن يُرى.
 */
.stp .n {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    line-height: 1;
    font-size: 12.5px;
    display: grid;
    place-items: center;
}

.stp .n > * { transform: translateY(0.5px); }
.stp .t { font-size: 13px; }

/*
 * مؤشر العمل في البار: يضيء عند وجود عمليات، ويهدأ عند غيابها.
 */
.sb-item .work.idle { background: transparent; }
.sb-item .work.idle .star { fill: var(--sb-ico, #8FA3A8); }
/* في صفحتها النجمة بلون نص البند المختار مثل بقية الأيقونات، وحين تعمل مهام تبقى خضراء تدور */
.sb-item.on .work.idle .star { fill: currentColor; }

.sb-item .cnt {
    margin-inline-start: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--mint);
    color: var(--on-mint);
    font-size: 11px;
    font-weight: 600;
}

/*
 * قائمة الإشعارات: أوسع، وحالتها الفارغة تقول ما الذي سيصل هنا.
 */
.pop { min-width: 320px; }

/*
 * الزرّ ليس رابطًا نصّيًا — لا خط تحته حيثما استُعمل كزرّ.
 */
a.b1, a.b2, a.bc, .empty a, .empty a * { text-decoration: none; }

/*
 * البار: خطوط الأيقونات أثخن قليلًا لتُقرأ على الأرضية الداكنة، وأيقونة
 * الطيّ أكبر.
 */
.sb-item .ni { stroke-width: 2; width: 18px; height: 18px; }
.sb-toggle svg { width: 18px; height: 18px; stroke-width: 1.8; }

/* أيقونة القائمة أكبر: هي مقبض الجوال الوحيد للشريط الجانبي. */
.burger svg { width: 24px; height: 24px; stroke-width: 1.6; }

/*
 * العلامة في وسط الشريط العلوي — على الجوال وحده.
 * `absolute` لا `flex`: التوسيط بينهما يزيح مع طول ما حولهما.
 */
.top-mark { display: none; }

@media (max-width: 980px) {
    .top { position: relative; }
    /* الأيقونة وحدها بلا إطار: العلامة نفسها مربّع بزواياه، فإطار حولها إطاران */
    .top-mark {
        display: grid; place-items: center;
        position: absolute; inset-inline-start: 50%; top: 50%;
        transform: translate(50%, -50%);
        width: 34px; height: 34px;
        background: none; border: 0;
    }
    .top-mark img { width: 34px; height: 34px; display: block; border-radius: 9px; }
}
.sb-new svg { stroke-width: 2.2; }

/*
 * **النجمة لا تدور إلا إذا كان هناك عمل فعلي.**
 *
 * دوران دائم يعني «يشتغل دائمًا» وهو غير صحيح، ويجعل المؤشر بلا معنى.
 */
.sb-item .work .star { animation: none; }
.sb-item .work:not(.idle) .star { animation: spin 4s linear infinite; }

/*
 * مسافة بين الشعار وأول عنصر — البار كان يبدأ ملتصقًا بالعلامة.
 */
.sb-head { padding-block-end: 6px; }

/*
 * الدرج على الجوال: حجاب يُغلق بالنقر، وزر إغلاق داخله.
 *
 * الدرج كان يفتح بلا مخرج ظاهر ولا يستجيب للنقر خارجه — وهو أول ما يجرّبه
 * المستخدم.
 */
.sb-veil { display: none; }
.sb-close { display: none; }

@media (max-width: 900px) {
    .sb-veil {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(17, 17, 17, .38);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s;
        z-index: 40;
    }

    body.sb-open .sb-veil { opacity: 1; pointer-events: auto; }
    body.sb-open .sb { z-index: 50; }

    .sb-close {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 10px;
        background: rgba(255, 255, 255, .08);
        color: #fff;
        cursor: pointer;
    }

    .sb-close svg { width: 18px; height: 18px; }
}

/* ── مبلغ: الرقم إنجليزي ورمز الريال بعده، وما ينكسر السطر بينهما ── */
/*
 * الرمز **يسار الرقم دائمًا**.
 *
 * الحاوية كانت ترث اتجاه الصفحة، فترتيب الشجرة يُقلب: الرمز أولًا في الشجرة
 * يقع يمين الرقم فيُقرأ جزءًا منه. عزل اتجاه الحاوية وحدها يثبّته يسارًا،
 * والرقم داخله `dir=ltr` أصلًا.
 */
.mny { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; direction: ltr; }
.mny > svg.sar { margin: 0; }

/* ── رأس بطاقة الرسالة: العنوان ووسم حالتها على سطر واحد ── */
.mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mc-top h4 { margin-bottom: 0; }
.card .cs { margin-top: 6px; }
.card .fe { margin-top: 10px; }
.card .tiny { margin-top: 10px; }

/* ── الدفع: صفحة قائمة بذاتها بلا بار ولا شريط علوي ── */
/*
 * صفحة رابط التذكير — **بشكل نافذة الاشتراك حرفًا بحرف**.
 *
 * كانت بطاقة `auth-card` بحقول `select`، ونافذة الاشتراك بمربّعات `pc-pick`.
 * دفعة واحدة بشكلين تقرأ منتجين. الآن الصفحة تستعمل أصناف `pc-` نفسها من
 * `resources/css/pay-card.css`، وهذي الكتلة تضبط ترتيبها عموديًّا:
 * الشعار ثم بطاقة المنشأة ثم بطاقة الدفع.
 */
.pay-page {
    /*
     * عرض صريح.
     *
     * الصفحة عنصر في جسم مرن، فبلا عرض تأخذ عرض محتواها، ومحتواها يطلب
     * `100%` من عرضها: دور مغلق ينتهي بالبطاقة عند 414 بدل 640.
     */
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
    background: var(--canvas);
}

.pay-logo { height: 42px; width: auto; display: block; margin-bottom: 4px; }

/*
 * البطاقتان بعرض واحد.
 *
 * `.pc` في النافذة يأخذ عرضه من قياس المودال، وهنا لا مودال حوله: بلا سقف
 * صريح يتمدّد على عرض الشاشة كاملًا فتصير بطاقة الدفع شريطًا.
 */
/* أعرض من النافذة: الصفحة ليست مودالًا فوق لوحة، وعندها كل الشاشة */
.pay-page .pc {
    width: min(640px, 100%);
    max-height: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 22px 22px 18px;
    text-align: start;
}

.pay-page .pc.pay-card { padding-bottom: 20px; }

/* بطاقة المنشأة: بيانات تُقرأ لا تُملأ، فلا أيقونة رأس ولا قاع ثابت */
.pay-page .pay-who { padding: 18px 22px; margin: 0; display: block; }
.pay-page .pay-who .pc-row b { font-weight: 600; }

/* رأس بطاقة الدفع: الأيقونة والعنوان في الوسط كما في النافذة */
.pay-page .pay-card .mdl-ic { margin: 0 auto 12px; }
.pay-page .pay-card h3 { font-size: 17px; font-weight: 700; text-align: center; letter-spacing: -.02em; }

/* الجسم لا يُمرَّر هنا: الصفحة نفسها هي ما يُمرَّر */
.pay-page .pc-body { overflow: visible; max-height: none; padding-inline: 0; }

/*
 * القاع ثابت — الزرّ مرئي مهما طالت البطاقة.
 *
 * الصفحة تطول بحقول ميسّر، فزرّ في آخرها يعني تمريرًا للأسفل ليدفع.
 * `sticky` يبقيه على الحافّة، وخلفيته تمنع النص من المرور تحته.
 */
.pay-page .pc-foot {
    position: sticky;
    bottom: 0;
    /*
     * فوق كل ما في النموذج.
     *
     * ميسّر يضع شعارات البطاقات في طبقة داخل حقل الرقم، وبوزن 2 كانت تُرسم
     * **فوق الزرّ** فتبدو ملصقة عليه. الرقم هنا يعلو كل ما تحقنه ورقتهم.
     */
    z-index: 20;
    /*
     * الزرّ بعرض الحقول (588) لا أضيق: الحشوة الأفقية كانت 22 فتقصّه إلى
     * 550 ويبدو أنحف من الحقل فوقه بلا سبب ظاهر.
     */
    margin: 14px -22px -18px;
    padding: 14px 4px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, var(--paper) 22%);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}

/* القاع الثابت يغطي آخر الشاشة، فالإيصال حين يُمرَّر إليه يقف فوقه لا تحته. */
.pay-page .pc-rcpt { scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom)) }

/* الزرّ بعرض الحقول تمامًا لا أضيق: القاع بحشوة البطاقة نفسها */
.pay-page .pc-foot .b1,
.pay-page .pc-foot > button { width: 100%; justify-content: center; height: 50px; font-size: 14px; }

.pay-hint {
    width: min(640px, 100%);
    text-align: center;
    font-size: 12px;
    line-height: 1.8;
    color: var(--faint);
    margin: 2px 0 0;
}

@media (max-width: 560px) {
    .pay-page { padding-inline: 14px; gap: 12px; }
    .pay-page .pc { padding: 18px 16px 16px; }
    .pay-logo { height: 34px; }
}

/* ── أيقونات داخل الأزرار: `auth-sub` و`b2` ما لهما مقاس في التصميم الأصلي،
      فأيقونة بلا مقاس تطلع بحجم الزر كله ── */
.auth-sub { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; }
.auth-sub svg, .b2 svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }

/* ── الوضع المجرّد `?bare=1`: بلا بار ولا شريط علوي، للتضمين في الموقع ── */
body.bare .sb, body.bare .top, body.bare .sb-veil { display: none; }
body.bare .main { width: 100%; }

/* ── أدوات الخيط: بحث داخل المحادثة وفواصل زمنية وزر النزول لآخر رسالة ── */
/* شريط الخيط: الأيقونة في اليسار — `flex-end` في RTL هو اليسار. */
.thr-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 18px; }
.thr-search { display: flex; align-items: center; gap: 8px; }
.thr-search .inp { height: 34px; width: 230px; font-size: 13px; }
.thr-find {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--control); color: var(--muted); cursor: pointer; transition: .15s;
}
@media (hover: hover) {
.thr-find:hover { border-color: var(--mint); color: var(--mint-ink); } }
.thr-search.on .thr-find { border-color: var(--mint); color: var(--mint-ink); }
.thr-find svg { width: 15px; height: 15px; }

.to-bottom { position: sticky; bottom: 96px; margin-inline-start: auto; margin-inline-end: 24px;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg); color: var(--ink-2);
  cursor: pointer; z-index: 5; }
.to-bottom svg { width: 17px; height: 17px; }

/* ── رمز التحقق: ستّ خانات واسعة ومتباعدة ── */

/* ── رمز الاستجابة على الفاتورة ── */
.qr { width: 112px; height: 112px; border: 1px solid var(--line); border-radius: 10px; }

/*
 * ── الوسوم: النصّ في وسطها لا في قاعها ──
 *
 * خطّ الواجهة العربي يجلس منخفضًا في صندوق ضيّق، فيبدو «معتمدة» و«فرق مطابقة»
 * ملتصقين بالحافة السفلى. الحشوة تُزاح بكسلين لأعلى بلا تغيّر في الارتفاع.
 */
.pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--tag-h); padding-block: 3px 5px; line-height: 1.25;
}
.tag {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: var(--tag-h); padding-block: 3px 5px; line-height: 1.25;
    border: 1px solid currentColor;
}
.okb { padding-block: 0 4px; }

/* اسم الملف بلا خطّ تحته: الخطّ يقول «رابط لصفحة» وهو مرفق يُفتح */
a.att-file .nm { text-decoration: none; }
@media (hover: hover) {
a.att-file:hover .nm { text-decoration: none; } }

/*
 * ── بطاقة المحادثة: كل الأزرار والوسوم بمقاس واحد ──
 *
 * كانت أطوالًا مختلفة في صفّ واحد — زرّ 32 ووسم 20 ووسم آخر بحشوة ثالثة —
 * والنصّ يجلس في قاع كلٍّ منها. المقاس يُوحَّد، والمحتوى يتوسّط أفقيًّا
 * ورأسيًّا، والحشوة السفلية بكسلان لأن الخطّ العربي يجلس منخفضًا.
 * الزر الثانوي يُصغَّر داخل بطاقة المحادثة وحدها: شريط أزرار صفحات النماذج يحمل
 * الصنف نفسه، وزر الإلغاء فيه بمقاس زر الحفظ كما في معرض العناصر.
 */
.card .mc-top .tag,
.card-act .okb,
.card-act .tag,
.card-act .bc,
.card .card-act .b2 {
    height: 34px;
    min-height: 34px;
    padding: 0 14px 2px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* وسم الحالة أخضر فاتح — اللون الثانوي في النظام */
.card .mc-top .tag.g,
.card-act .okb {
    background: var(--mint-soft);
    border: 1px solid var(--mint-line);
    color: var(--mint-ink);
}
.card-act .okb.no { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad-ink); }
.card-act .okb svg { width: 14px; height: 14px; }

/* زرّ الرفض بمربّعه لا بحرف طائر */

/*
 * زرّ الفعل في بطاقة المحادثة **بلون زرّ التأكيد**: «اعتمد» و«طابِق» يكتبان
 * في الدفتر، فيلبسان لون الفعل الأساسي لا لون زرّ ثانوي محايد.
 */
.card-act .bc {
    background: var(--slate);
    border-color: var(--slate);
    color: var(--on-slate);
    font-weight: 600;
}
@media (hover: hover) {
.card-act .bc:hover { background: var(--slate-d); border-color: var(--slate-d); } }
.card-act .bc svg { color: var(--on-slate); }

/*
 * ── السايد بار: المحادثات وحدها تُمرَّر ──
 *
 * كانت القائمة كلها تُمرَّر، فمساحة العمل تنزل تحت عشرين محادثة ولا تُرى إلا
 * بعد تمرير طويل. الأقسام الثابتة تبقى، والمحادثات تأخذ ما بقي وتُمرَّر فيه.
 */
.sb-body { display: flex; flex-direction: column; overflow: hidden; }
.sb-body > .sb-new,
.sb-body > .sb-sep { flex: none; }

/* مساحة العمل ثابتة بلا تمرير، والمحادثات وحدها تتقلّص وتُمرَّر */
.sb-body > .sb-sec:not(.sb-convs) { flex: none; overflow: visible; }

.sb-convs {
    /*
     * لا تتمدّد على الفراغ.
     *
     * كانت `flex: 1 1 auto` بأساس 300 بكسل، فتبتلع كل الفراغ ولو كانت
     * محادثة واحدة وتدفع مساحة العمل إلى القاع بفجوة فارغة فوقها.
     * الآن تأخذ حجم محتواها، ومساحة العمل تطلع خلفها مباشرة.
     * ومعامل التقلّص 100 يجعلها هي التي تُمرَّر أولًا حين تكثر المحادثات،
     * فتبقى مساحة العمل كاملة بلا قصّ.
     */
    flex: 0 100 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #3A5158 transparent;
}
.sb-convs::-webkit-scrollbar { width: 6px; }
.sb-convs::-webkit-scrollbar-thumb { background: #3A5158; border-radius: 9px; }

/* عنوان القسم يبقى فوق ما يُمرَّر تحته */
.sb-convs .sb-lbl { position: sticky; top: 0; z-index: 1; background: var(--sb-bg); }
.sb-convs .sb-row + .sb-lbl { margin-top: 12px; }
.sb-morec { width: 100%; background: none; border: 0; font: inherit; cursor: pointer; opacity: .75; }
.sb-morec:disabled { cursor: default; }

/* زرّ الفاتورة في الجدول بزوايا الأزرار لا بزوايا الحبّة */
.tbl .bc { border-radius: var(--ctl-r-sm); }

/*
 * وسم «مدفوعة» يعود إلى وسطه: رفع الوسوم بكسلين يناسب الوسم النصّي وحده،
 * أمّا ما فيه أيقونة فيصير نصّه أعلى من علامته.
 */
.tbl .pill.ok,
.tbl .pill.bad,
.tbl .pill.warn { padding-block: 4px 4px; }

/*
 * ── ترقيم الجداول: شريط واحد في اللوحة والسوبر ──
 *
 * إلى طرف الجدول (يسارًا في الاتجاه العربي) لا في وسطه: العين ترجع من آخر
 * صفّ إلى الشريط بحركة قصيرة. وفراغ فوقه وتحته يفصله عن الصفوف.
 */
/*
 * إلى **طرف الجدول الأيسر**: الحاوية عربية الاتجاه، و`flex-start` فيها هو
 * اليمين — فكان الشريط يقف تحت أول عمود لا تحت آخره.
 */
.tpg { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 16px 16px 30px; position: relative; z-index: 60; }
.tpg-b {
    min-width: var(--ctl-h-sm); height: var(--ctl-h-sm); padding: 0 9px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--ctl-r-sm);
    background: var(--control); color: var(--ink-2);
    font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer;
}
/* الصفحة الحالية لا يتغيّر لونها بالمرور: كان نصّها يصير داكناً على خلفيتها الداكنة */
@media (hover: hover) {
.tpg-b:hover:not(:disabled):not(.on) { border-color: var(--mint); color: var(--ink); } }
.tpg-b.on { background: var(--slate-d); border-color: var(--slate-d); color: var(--on-slate); }
.tpg-b:disabled { opacity: .45; cursor: default; }
.tpg-b.gap { border-color: transparent; background: none; pointer-events: none; }
.tpg-b svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.tpg-b.rev svg { transform: scaleX(-1); }

/* مبدّل حجم الصفحة: 15 · 50 · 100 */
.tpg-size { position: relative; margin-inline-end: 10px; z-index: 70; }
.tpg-pick { gap: 6px; }
.tpg-pick .dn { transform: rotate(90deg); }
.tpg-size.on .tpg-pick { border-color: var(--mint); }
/* الجوال: سبعة أرقام مع السابق والتالي والمقاس أعرض من الشاشة فكانت تخرج عنها ولا تُلمس — تلتف لسطر ثانٍ. */
@media (max-width: 640px) { .tpg { flex-wrap: wrap; row-gap: 8px; padding-inline: 0; } }
/* القائمة تفتح لأعلى: أقرب إلى الجدول الذي تغيّر مقاسه */
.tpg-menu {
    position: absolute; bottom: calc(100% + 6px); inset-inline-start: 0;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 18px 34px -16px rgba(28, 57, 65, .5);
    padding: 5px; display: flex; flex-direction: column; gap: 2px; z-index: 80;
}
.tpg-menu button {
    min-width: 62px; height: 30px; padding: 0 10px;
    border: 0; border-radius: 8px; background: none; color: var(--ink-2);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center;
}
@media (hover: hover) {
.tpg-menu button:hover { background: var(--canvas); } }
.tpg-menu button.on { background: var(--mint-soft); color: var(--mint-ink); }

/* دوّارة الجدول أثناء تبديل المقاس */

/* نافذة الحدّ: أعلى من كل نافذة، وضغط الخلفية لا يغلقها */
.cap-mask.on { z-index: 120; }
.cap-mask .mdl-ic.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.cap-mask .mdl-ic.warn svg { color: #C98A2E; }

/* ── حلقة التركيز خضراء لا داكنة ──
   التصميم الأصلي ثبّتها على `--slate` في الشاشات المتأخرة، فصار حقل مركَّز
   يبدو كأنه معطّل. الأخضر هو لون التأكيد في المنصة، ونفسه في وسم «مربوط». */
.auth-f input:focus,
.auth-f select:focus,
.auth-f textarea:focus,
.inp:focus,
.dd.on > .dd-btn,
.dd-btn:focus {
    outline: none;
    border-color: var(--mint);
    box-shadow: 0 0 0 3px rgba(105, 224, 152, .18);
}

/* حقل كلمة المرور: الحلقة على الغلاف لا على الحقل وحده حتى تحيط زر العين */
.pw-wrap:focus-within .inp,
.pw-wrap:focus-within input {
    border-color: var(--mint);
    box-shadow: 0 0 0 3px rgba(105, 224, 152, .18);
}

/* والخطأ يبقى أحمر: التركيز ما يخفي حقلًا غلط */
.auth-f input.bad:focus,
.inp.bad:focus,
.pw-wrap:focus-within input.bad {
    border-color: var(--bad);
    box-shadow: 0 0 0 3px rgba(217, 83, 79, .16);
}

/* ── حقل كلمة المرور: مقياس قوّة وشروط تُشطب وهو يكتب ── */
.pw-meter { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.pw-bar { flex: 1; height: 5px; border-radius: 9px; background: var(--line); overflow: hidden; }
.pw-bar i { display: block; height: 100%; border-radius: 9px; transition: width .25s, background .25s; }
.pw-meter b { font-size: 11.5px; font-weight: 600; min-width: 44px; text-align: start; }
.pw-meter.weak .pw-bar i { background: var(--bad); }
.pw-meter.weak b { color: var(--bad); }
.pw-meter.fair .pw-bar i { background: #C98A2E; }
.pw-meter.fair b { color: var(--warn-ink); }
.pw-meter.strong .pw-bar i { background: var(--mint-d); }
.pw-meter.strong b { color: var(--mint-ink); }

/* رابط الشروط تحت زر التسجيل — بلا خط سفلي، وبأخضر الهوية */
.legal-note { margin-top: 18px; font-size: 12px; color: var(--faint); line-height: 2.15; text-align: center; }
.legal-note a { color: var(--mint-d); font-weight: 600; text-decoration: none; border: 0; }
@media (hover: hover) {
.legal-note a:hover { color: var(--mint); } }

/* شروط كلمة المرور: سطر واحد يظهر عند الكتابة وحدها */
.pw-rules-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: 11px; color: var(--faint); }
.pw-rules-line span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pw-rules-line span.ok { color: var(--mint-ink); }
.pw-rules-line span::before { color: currentColor; }

/* ── الحقول تبدأ من اليمين — والرقمية واللاتينية معها ──
   كان `[dir=ltr]` يُحاذي لليسار فـ«عدد الاستعمالات» والبريد يبدآن من الطرف
   الآخر لتسميتهما. الكتابة تبقى LTR (ترتيب الأحرف والمؤشّر) والمحاذاة يمين
   مثل كل حقل. خانات الرمز تبقى في الوسط. */
html[dir="rtl"] .inp:not(.code-box),
html[dir="rtl"] input:is([type="text"], [type="number"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="password"], :not([type])):not(.code-box) { text-align: right; }

/* ── زر أثناء التنفيذ: دوّارة مكان النص بلا ما يتغيّر عرض الزر ── */
.btn-load { position: absolute; width: 16px; height: 16px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
button.busy, a.busy { position: relative; pointer-events: none; }
.btn-tx.hid { visibility: hidden; }
button[aria-busy="true"] { opacity: 1; }

/* ── خانات رمز التحقق ── */
.code-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; direction: ltr; margin: 8px 0 2px; }
/* `.auth-f input` في التصميم الأصلي عرضه 100% — الخانة تحتاج تخصيصًا أعلى
   منه وإلا تمدّدت على السطر كله */
.auth-f .code-boxes .code-box, .code-box { width: 100%; height: 74px; border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--control); font: inherit; font-size: 24.5px; font-weight: 800; text-align: center;
  color: var(--ink); transition: .16s; }
.code-box:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(105, 224, 152, .18); }
.code-boxes.bad .code-box { border-color: var(--bad); }
@media (max-width: 420px) {
    .auth-f .code-boxes .code-box, .code-box { height: 64px; font-size: 21.5px; }
}

/* ── الرجوع: زر واضح في أعلى البطاقة من جهة البداية، لا نص عائم جنب الشعار ── */
/* الرجوع خارج التدفّق: الشعار يبقى في منتصف البطاقة وفوق الزر، والزر في الزاوية */
.auth-card { position: relative; }
.auth-back { position: absolute; top: 0; inset-inline-start: 0;
  display: inline-grid; place-items: center; width: 38px; height: 38px; z-index: 2; cursor: pointer; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--control);
  color: var(--muted); text-decoration: none; transition: .16s; }
@media (hover: hover) {
.auth-back:hover { border-color: var(--mint); color: var(--mint-ink); } }
.auth-back svg { width: 17px; height: 17px; }

/* سطر خطأ الرمز محجوز الارتفاع: يظهر ويختفي بلا ما يقفز التخطيط */
.code-fe { display: block; min-height: 19px; text-align: center; margin-top: 7px; }
.code-fe:empty { display: block; }

/* العدّاد نص لا شريحة: خلفية رمادية تحته توحي إنه زر يُضغط وهو ليس كذلك */
.resend { display: flex; justify-content: center; margin-top: 6px; font-size: 12.5px; color: var(--faint); }
.resend .num { font-weight: 600; color: var(--muted); direction: ltr; display: inline-block; }
.resend .sug { cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; }

/* ══ خط الإنجليزية والأرقام: Jakarta من الموقع ══
   يُعرَّف بمدى محارف لاتيني، ويُوضع **قبل** حويّة في السلسلة. المتصفح يختار
   الخط لكل محرف على حدة، فالعربي يبقى حويّة والإنجليزي والأرقام Jakarta
   بلا صنف على كل عنصر — وأي نص جديد يطلع صح من نفسه. */
@font-face {
    font-family: Jakarta;
    src: url(/assets/fonts/pjs-var.woff2) format("woff2-variations");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    /* مقاييس الخط فوق السطر 1.038 وتحته 0.222 من حجمه: النص يجلس منخفضاً بنحو بكسلين في كل حقل وزر. الموازنة ترفعه إلى
       وسطه، ومجموع المقياسين كما هو فلا يتغيّر ارتفاع سطر */
    ascent-override: 90%;
    descent-override: 36%;
    unicode-range: U+0000-00FF, U+0100-024F, U+0300-036F, U+2000-206F, U+2070-209F, U+20A0-20BF, U+2100-214F, U+2190-21BB, U+2212;
}

body, .comp textarea, .inp, input, textarea, select, button, .num, .tbl, .code-box {
    font-family: Jakarta, Huwiya, system-ui, -apple-system, sans-serif;
}

/* ══ شاشة التحقق: مقاسات وفراغات مضبوطة ══
   بلا شعار، فالزر يأخذ سطره الأول ثم العنوان تحته — وضعه المطلق كان
   يتقاطع مع سطر العنوان لأن العنوان صار أول عنصر. */
.auth-card.verify .auth-back { position: static; margin-bottom: 30px; }
.auth-card.verify .auth-head { margin-top: 0; margin-bottom: 30px; }
.auth-card.verify .auth-head h1 { font-size: 22.5px; margin-bottom: 10px; }
.auth-card.verify .auth-head .lead { margin-top: 0; font-size: 13.5px; line-height: 1.85; }
.auth-card.verify .auth-f { gap: 0; }
.auth-card.verify .code-boxes { margin: 0; }
.auth-card.verify .code-fe { margin-top: 10px; }
.auth-card.verify .resend { margin-top: 12px; }
.auth-card.verify .auth-sub { margin-top: 26px; }

/* أيقونة فوق العنوان: تقول نوع الخطوة قبل ما يُقرأ العنوان */
.verify-ic { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center;
  margin: 0 auto 18px; background: var(--paper); border: 1px solid var(--line); }
.verify-ic svg { width: 34px; height: 34px; fill: none; stroke: var(--muted); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }

/* ══ ضبط طول نموذجَي الدخول والتسجيل ══
   خمسة حقول تجعل الصفحة أطول من الشاشة على لابتوب صغير فيختفي الزر تحت
   الطيّة. التضييق هنا في الفراغات لا في مقاس الحقل نفسه. */
.auth-head { margin-bottom: 2px; }
.auth-f, .auth-f.two { margin-top: 16px; gap: var(--auth-gap); }
.auth-f label { margin-bottom: 5px; }
.auth-f input, .auth-f select, .auth-f .dd-btn, .auth-card .dd-btn, .auth-card .inp { height: var(--auth-h); }
.auth-sub { height: var(--auth-btn-h); }
.auth-sub { min-height: var(--auth-btn-h); font-size: 15px; }
.auth-alt { margin-top: 14px; }

/* نص الحقل الفارغ بنفس الوزن واللون في العربي واللاتيني — Jakarta أعلى
   ارتفاعًا سينيًّا من حويّة، فبنفس المقاس يبان أكبر ما لم يُضبط */
.auth-f input::placeholder, .inp::placeholder { color: var(--faint); font-weight: 400; }
.auth-f input[dir="ltr"]::placeholder, .inp[dir="ltr"]::placeholder { font-size: 13px; }

/* شروط كلمة المرور بلا نقاط: العلامة تكفي، والنقطة تزحم سطرًا ضيقًا */
.pw-rules-line span::before { content: none; }
.pw-rules-line span.ok::before { content: "✓"; font-size: 11px; }

/* رابط نسيت كلمة المرور تحت الحقل من جهة النهاية */
.pw-forgot { display: block; margin-top: -4px; padding-block: 12px; min-height: 44px; box-sizing: border-box; text-align: end; font-size: 12.5px;
  color: var(--mint-ink, #1E6B42); font-weight: 500; text-decoration: none; }
/* مساحة لمس 44 بكسل للروابط الصغيرة بلا تحريك النص · والأخضر الفاتح كان تباينه 1.99 */
.auth-alt a { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* ══ توسيط بطاقة الدخول بلا قصّ ══
   `margin:auto` داخل شبكة يقصّ الأعلى إذا صار المحتوى أطول من الشاشة —
   الهوامش التلقائية ما تحترم حدّ التمرير. البديل: `safe center` وهامش
   عادي، فالبطاقة تتوسّط وهي أقصر وتنزل بالتمرير وهي أطول. */
/* على سطح المكتب يبقى الصف ممتدًّا حتى تملأ اللوحة الجانبية الشاشة —
   `align-content` على الشبكة يقلّص الصف كله فتظهر شرائط بيضاء فوقها وتحتها.
   التوسيط الآمن يكون على البطاقة وحدها. */
body.auth .auth-card { align-self: safe center; margin: 0 auto; }

@media (max-width: 900px) {
    /* بلا لوحة جانبية على الجوال، فالتوسيط الآمن ينتقل إلى الشبكة نفسها */
    body.auth { align-items: safe center; }
    body.auth .auth-split { min-height: 100dvh; padding-block: 28px; align-content: safe center; }
    body.auth .auth-card { padding: 0; }

    /* iOS يكبّر الصفحة تلقائيًا عند التركيز على حقل أصغر من 16px.
       التكبير يخفي بقية النموذج ولا يرجع وحده — فالحدّ الأدنى 16px. */
    /* الجوال أطول من محتواه، فالفراغ فوق الشعار أوسع ويحتمل رفعًا أكبر. */
    :root { --auth-h: 46px; --auth-btn-h: 46px; --auth-gap: 10px; --auth-logo-lift: 64px; --auth-card-h: auto; --auth-logo-h: 56px; }

    .auth-f input, .auth-f select, .inp:not(.cp-fld), .dd-btn, .comp textarea, .code-box {
        font-size: 16px;
    }
    /* أي class يعطي حقلاً خطاً أصغر يغلب قاعدة عامة (حقل البحث كان 14px)، فالحد إلزامي لكل حقل.
       مربعات الرمز أكبر منه أصلاً فتبقى بمقاسها */
    input:not(.code-box), textarea, select { font-size: 16px !important; }
    .auth-f input[dir="ltr"]::placeholder, .inp[dir="ltr"]::placeholder { font-size: 14px; }
    .auth-card h1 { font-size: 20px; }
    .verify-ic { width: 66px; height: 66px; border-radius: 20px; margin-bottom: 14px; }
    .verify-ic svg { width: 30px; height: 30px; }
}

/* ══ صفحتا الشروط والخصوصية — منقولتان من الموقع التعريفي ══
   نفس المقاسات والألوان: `w` بعرض 1200 وحشوة 32، و`doc` بعرض قراءة 78ch. */
/* `#app` غلاف اللوحة (flex بارتفاع الشاشة)، فالصفحة النصّية لازم تتمدّد
   داخله وتُمرّر بنفسها — بدونها يظهر لون البار خلفها من الجانب. */
.site { flex: 1 1 auto; width: 100%; overflow-y: auto; background: var(--canvas); min-height: 100dvh; color: var(--ink); }
.site .w { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

.site-bar { padding: 22px 0; border-bottom: 1px solid var(--line); }
/* الشعار في جهة البداية — يمين في RTL */
.site-bar .w { display: flex; align-items: center; justify-content: flex-start; }
.site-logo { height: 30px; display: block; }

.site .s { padding: 96px 0; }
.site .kicker { display: inline-flex; align-items: center; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.site .h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 14px 0 26px; font-weight: 600; color: var(--ink); }

.site .doc { max-width: 78ch; }
.site .doc h3 { font-size: 17px; margin: 34px 0 10px; color: var(--ink); font-weight: 600; }
.site .doc h3:first-child { margin-top: 8px; }
.site .doc p { color: var(--ink-2); font-size: 14.5px; line-height: 2; margin-bottom: 12px; font-weight: 500; }
.site .doc h4 { font-size: 15.5px; margin: 22px 0 8px; color: var(--ink); font-weight: 600; }
.site .doc ul, .site .doc ol { margin: 0 0 12px; padding-inline-start: 22px; color: var(--ink-2); font-size: 14.5px; line-height: 2; }
.site .doc ul { list-style: disc; }
.site .doc ol { list-style: decimal; }
.site .doc a { color: var(--link); text-decoration: underline; }

.site-foot { padding: 26px 0 40px; border-top: 1px solid var(--line);
  font-size: 12px; color: #8A8A8A; line-height: 2; }
.site-foot a { color: var(--ink-2); text-decoration: none; margin-inline-start: 10px; }

@media (max-width: 640px) {
    .site .w { padding: 0 20px; }
    .site .s { padding: 48px 0 64px; }
}

/* ── قائمة الإشعارات: رأس بسطرين ورابط «شوفها كلها» ── */
.pop h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pop-all { font-size: 11.5px; color: var(--mint-d); font-weight: 600; text-decoration: none; }

/*
 * لا إشعارات: سطر وحده على ارتفاع 54 يقرأ كخطأ في التحميل.
 * جرس باهت في مربّعه فوق النصّ يقول إن الصندوق سليم وفارغ.
 */
.pop .empty-s {
    min-height: 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 10px;
}

/* أيقونة الحالة الفارغة معرَّفة في النظام: تُستعمل كما هي، والفراغ من gap. */
.pop .empty-s .empty-ic { margin: 0; }
@media (hover: hover) {
.pop-all:hover { color: var(--mint); } }
.pop .it { text-decoration: none; color: inherit; }

/* ── عرض المحتوى: شاشات اللوحة أوسع، والمحادثة تبقى بعرض القراءة ── */
.scr.wide .wrap { max-width: 1100px; }

/*
 * عمود المحادثة — **رقم واحد للخيط ولحقل الكتابة**.
 *
 * عرضان مختلفان يجعلان الرسائل تبدو خارج العمود الذي يكتب فيه التاجر.
 * والمتغيّر يمنع الرقمين من الافتراق مع أول تعديل.
 */
/*
 * الحاشية جزء من الحساب: `.wrap` عندها `padding: 0 24px`، فالمحتوى داخلها
 * أضيق من العمود بضعف الحاشية. المؤلِّف يطرحها ليبدأ وينتهي مع الرسائل.
 */
:root { --chat-col: 712px; --chat-gutter: 24px; }
.scr:not(.wide) .wrap { max-width: var(--chat-col); }
.compose-fixed .comp { max-width: calc(var(--chat-col) - var(--chat-gutter) * 2); }

@media (max-width: 450px) {
    :root { --chat-gutter: 18px; }
}

/* الشرائح كما في اللوحة القائمة: تلتف وتتوسّط بلا قصّ من الطرفين. */

/*
 * الإشعارات: **بلا خلفية**، وخطّ فاصل بين إشعار وآخر.
 *
 * مربّع ملوّن لكل سطر يجعل القائمة كتلًا متراصّة يصعب مسحها بالعين. الخطّ
 * يفصل بلا أن يزاحم، والمرور وحده يلوّن.
 */
.pop { padding: 6px; }
/*
 * الفاصل خطّ مستقيم والتمرير بحافة مدوّرة: الحافة على الصفّ
 * كانت تقوّس طرفَي الفاصل، فصار الفاصل خطًّا مستقلًّا فوق كل صفّ يلي صفًّا.
 */
.pop .it {
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 12px;
    margin: 0;
    transition: background .15s;
}
.pop .it + .it::before {
    content: ""; position: absolute; top: 0; inset-inline: 0;
    height: 1px; background: var(--line-2); pointer-events: none;
}
/* الصفّ الممرَّر عليه وما يليه بلا فاصل: الخلفية المدوّرة لا يقطعها خط */
.pop .it:hover::before, .pop .it:hover + .it::before { opacity: 0; }
@media (hover: hover) {
.pop .it:hover { background: var(--canvas); } }

/* ══ الجوال: لا تمرير أفقي في أي صفحة ══
   الجدول يمرّر داخل حاويته، والباقي لا يتجاوز العرض. صفحة تتحرّك يمينًا
   ويسارًا تخفي نصف المحتوى ولا يعرف المستخدم أنه هناك. */
html, body { max-width: 100%; overflow-x: hidden; }
/*
 * `.wrap` **خارج هذي القاعدة عمدًا**.
 *
 * `max-width:100%` هنا كان يلغي عرض العمود القادم من المنصة، فينفرد خيط
 * المحادثة على كامل الشاشة بينما حقل الكتابة تحته أضيق — والفرق يبدو خطأً.
 * و`.wrap` أصلًا `box-sizing: border-box` بهامش تلقائي، فما يتجاوز حاويته.
 */
.wrap { min-width: 0; }
.wz, .panel, .card, .plans, .kpis { max-width: 100%; min-width: 0; }
/* شريط برقمين يقتسم العرض — ثلاثة أعمدة ثابتة تترك مربعًا فارغًا. */
@media (min-width: 861px) { .kpis:has(> .kpi:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } }
.tbl-wrap { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }
.mny, .num { white-space: nowrap; }

@media (max-width: 640px) {
    .grid2 { grid-template-columns: 1fr; }
    .plans { grid-template-columns: 1fr; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scr.wide .wrap { max-width: 100%; }
    .sub-now { flex-wrap: wrap; gap: 8px; }
    .card-act { flex-wrap: wrap; }
    .terms { flex-wrap: wrap; }
}

/*
 * زرّ «ربط» — **الشكل الوحيد في المنصة، ويُسحب من هنا**.
 *
 * كان له شكلان: أخضر منفصل في خطوة القنوات وأساسيّ مصغَّر في صفحة القنوات،
 * فيبدو الفعل الواحد فعلين. صنف واحد الآن، وكل شاشة تكتب `b1 btn-link`
 * ولا تكتب مقاسًا خاصًّا بها.
 *
 * وزواياه أصغر من `--r-m`: نصف قطر 14 على ارتفاع 32 يصير شبه دائرة، والزرّ
 * الأساسي في المنصة مستطيل بزوايا هادئة.
 */
.b1.btn-link {
    height: var(--ctl-h);
    padding: 0 22px;
    font-size: 13px;
    border-radius: var(--ctl-r);
}

/* شريط إعلانات التشغيل فوق اللوحة */
.ops-banner { position: fixed; inset-inline: 0; top: 0; z-index: 80; padding: 9px 16px;
  background: var(--slate); color: var(--on-slate); font-size: 12.5px; font-weight: 500; text-align: center; }
body:has(.ops-banner) .sb, body:has(.ops-banner) .main { padding-top: 34px; }

/* «حمّل الأقدم» فوق الخيط — موسّط وخفيف فما يزاحم أول رسالة. */
.thr-older{display:flex;justify-content:center;align-items:center;min-height:22px;padding:4px 0 14px}

/* دوّارة الأقدم: علامة صغيرة محايدة، تظهر أثناء الجلب وتختفي بعده */
.thr-spin {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--muted);
    animation: thr-spin .7s linear infinite;
}
@keyframes thr-spin { to { transform: rotate(360deg) } }

/* ملاحظة تشغيلية: تقول لماذا لا يعمل شيء بدل ما يبدو معطّلًا. */
.ops-note{padding:12px 14px;border:1px solid var(--line);border-inline-start:3px solid var(--slate);
  border-radius:10px;background:var(--paper);font-size:13px;line-height:1.7;color:var(--ink-2)}
.tab .cnt{margin-inline-start:6px;font-size:11px;opacity:.7}

/*
 * نقاط النائب في حقل كلمة المرور تُكتب **باهتة ومتباعدة**.
 *
 * بنفس لون النصّ وتقاربه تبدو كلمة مرور مكتوبة فعلًا، فيقرأ التاجر «أضف كلمة
 * المرور» تحت حقل يظنّه ممتلئًا.
 */
input[type="password"]::placeholder,
.pw::placeholder { color: var(--faint); opacity: .55; letter-spacing: .18em; }

/*
 * عناوين المحادثات في البار **بلا ثلاث نقاط**.
 *
 * العنوان يُقصّ عند حدّ الكلمة في الخادم فيسع البار كاملًا، و`clip` هنا
 * حارس أخير: كلمة واحدة طويلة تُقطع بلا أن يمتلئ البار بـ«…».
 */
.sb-convs .sb-item .nm { text-overflow: clip; white-space: nowrap; }

/* ══ الرسالة تبدأ وتنتهي مع حقل الكتابة ══
   الصورة كانت تأكل عمودًا بجانب الفقاعة فتنزاح الرسالة عن العمود. تصير
   فوق الفقاعة، والفقاعة تأخذ العرض كاملًا. */
/*
 * الصورة بجانب الفقاعة كما في اللوحة القائمة.
 *
 * كانت مكدّسة فوقها بعمود، فيبتعد الاسم عن كلامه ويصير لكل رسالة سطران
 * زائدان. الصفّ الواحد يقرأ أسرع ويشبه كل محادثة يعرفها التاجر.
 */
.thread .msg { align-items: flex-start; }
.thread .msg .bub { flex: 1; min-width: 0; }

/* ══ تنسيق رد المحاسب — نفس منسّق اللوحة القائمة ══ */
.agent-md p { margin: 0; }
.agent-md p + p,
.agent-md ul + p,
.agent-md p + ul,
.agent-md h5 + * { margin-top: 11px; }
.agent-md h5 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.agent-md b { font-weight: 600; color: var(--ink); }
/* سؤال الختام المقترح: آخر سطر في الرد، أكبر من النص وأوضح، ليراه التاجر ويردّ عليه */
.agent-md .ask { font-size: 15.5px; line-height: 1.7; }
.agent-md > h5.src { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.agent-md ul.src { gap: 3px; font-size: 12.5px; color: var(--muted); }
.agent-md ul.src li { line-height: 1.6; }
/* اسم الجهة رابط بأخضر الأزرار (درجته المقروءة على الأبيض) بلا خط تحته */
.agent-md :is(h5.src, ul.src) a { color: var(--mint-d); text-decoration: none; font-weight: 600; }
.agent-md .ask b { font-weight: 700; }
.agent-md ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 5px; }
.agent-md li { line-height: 1.75; }
.agent-md ol { margin: 0; padding-inline-start: 22px; display: grid; gap: 5px; }
/* إيقاع واحد بين كل كتلتين في الرد: فقرة · قائمة · تنبيه · جدول · فاصل، وحول الفاصل أوسع قليلاً */
.agent-md > :not(:first-child) { margin-top: 11px; }
.agent-md > hr:not(:first-child), .agent-md > hr + :not(:first-child) { margin-top: 14px; }
/* اقتباس كتنبيه في ردود كلود: شريط جانبي وخلفية هادئة */
.agent-md hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
/* جدول الماركداون بشكل جدول البطاقة: رأس هادئ وأرقام بأعمدة */
.agent-md .md-t { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.agent-md .md-t th { text-align: start; font-weight: 700; color: var(--ink-2); background: var(--head-bg); border-bottom: 1px solid var(--line); padding: 8px 12px; }   /* رأس الجدول كجداول المنصة (.tbl) */
.agent-md .md-t td { padding: 8px 12px; border-top: 1px solid var(--line-2); }
.agent-md .md-t td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* زر الملف تحت رد المحاسب أبيض فوق خلفية الصفحة */
.msg .bub .att-file { background: var(--paper); }

/*
 * الرقم داخل الجملة: **بلا إطار ولا أرضية**.
 *
 * المربّع كان يقطع السطر ويشتّت القراءة، والبطاقة تحت الرد هي مكان الأرقام
 * المعروضة. ما يبقى هنا هو ما يلزم وحده: وزن أثقل واتجاه لاتيني حتى لا
 * تنقلب الفاصلة العشرية داخل نصّ عربي.
 */
.agent-md code {
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 1em;
    color: inherit;
    direction: ltr;
    unicode-bidi: isolate;
}

/*
 * قيمة حساسة (مفتاح · رمز · كلمة مرور · بطاقة): نجوم وعين تكشفها في المتصفح وحده
 * (`lib/secrets.js` · `Partials/Secret.vue`). القيمة لاتينية الاتجاه فلا تنقلب داخل النص العربي.
 */
.secret {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--canvas);
    direction: ltr;
    unicode-bidi: isolate;
    vertical-align: baseline;
    max-width: 100%;
}
.secret-v { font-weight: 600; color: var(--ink); letter-spacing: .5px; overflow-wrap: anywhere; }
.secret:not(.is-open) .secret-v { color: var(--muted); letter-spacing: 2px; }
.secret-eye { width: 26px; height: 26px; border: 0; background: none; cursor: pointer; color: var(--faint); display: grid; place-items: center; flex: none; }
.secret-eye svg { width: 16px; height: 16px; }
@media (hover: hover) {
.secret-eye:hover { color: var(--muted); } }

.agent-md .card { margin-top: 12px; }
.agent-md .big { display: flex; align-items: center; }
/* عنوان البطاقة وأيقونته أعلى من الرقم الكبير بمسافة أوضح */
.agent-md .card .card-t + .big { margin-top: 8px; }
/* عنوان البطاقة أول عنصر فيها: بلا هامش علوي، فيتساوى الفراغ فوق المحتوى وتحته */
.agent-md .card > .card-t:first-child { margin-top: 0; }

/* ══ الإشعارات: سطر مضغوط ══ */
.pop .it { padding: 11px 10px; }
.pop .it b { font-size: 13px; }
.pop .it i { font-size: 11.5px; margin-top: 3px; line-height: 1.55; }
.pop .it em { font-size: 11px; margin-top: 4px; }

/*
 * صفّ المحادثة في البار.
 *
 * زرّ الخيارات يظهر عند المرور على الصف وحده، فلا تزدحم القائمة بنقاط على كل
 * سطر. ويبقى ظاهرًا وقائمته مفتوحة، ومع التركيز بلوحة المفاتيح، وعلى اللمس
 * دائمًا لأن الإصبع لا يمرّ قبل أن يضغط. وألوانه ألوان البار نفسها.
 */
.sb-row { position: relative; display: flex; align-items: center; }
.sb-row .sb-item { flex: 1; min-width: 0; padding-inline-end: 36px; }
.sb-rename {
    flex: 1; min-width: 0;
    margin: -3px 0; padding: 2px 6px;
    border: 1px solid rgba(255,255,255,.25); border-radius: 6px;
    background: rgba(0,0,0,.2); color: #fff;
    font: inherit; outline: none;
}
.sb-rename:focus { border-color: var(--mint); }
.sb-more {
    position: absolute;
    inset-inline-end: 6px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border: 0; border-radius: 8px;
    background: transparent; color: #8FA3AA;
    cursor: pointer; transition: .15s;
    opacity: 0;
}
.sb-row:hover .sb-more, .sb-more:focus-visible, .sb-more.open { opacity: 1; }
@media (hover: none) { .sb-more { opacity: 1; } }
.sb-more svg { width: 15px; height: 15px; }
.sb-pin { width: 13px; height: 13px; flex: none; margin-inline-start: auto; color: #8FA3AA; }
@media (hover: hover) {
.sb-more:hover { background: rgba(255,255,255,.06); color: #fff; } }
.sb-more.open { background: rgba(255,255,255,.1); color: #fff; }

.cmenu {
    /* ثابتة ومكانها من الزر: قائمة المحادثات تقصّ ما يخرج منها */
    position: fixed;
    /* فوق درج الجوال (95) وتحت النوافذ (100) */
    z-index: 96;
    min-width: 150px;
    padding: 6px;
    display: grid; gap: 2px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}
.cmenu button {
    width: 100%; padding: 8px 10px;
    border: 0; background: transparent; border-radius: 8px;
    font: inherit; font-size: 13px; text-align: start;
    color: var(--ink); cursor: pointer;
}
@media (hover: hover) {
.cmenu button:hover { background: var(--canvas); } }
.cmenu button.danger { color: var(--bad-ink); }
@media (hover: hover) {
.cmenu button.danger:hover { background: var(--bad-soft); } }

/*
 * الحالة الفارغة: خلفية أكبر وأيقونة فوق النصّ.
 *
 * صندوق صغير بسطرين يبدو خطأً في الصفحة لا حالةً مقصودة. والأيقونة تقول
 * أي شيء ينقص قبل أن يُقرأ النصّ.
 */
.empty { padding: 54px 28px; border-radius: var(--r-l); }
/* البطاقة الفارغة تحت وصف الصفحة بمسافة البانل نفسها: كانت تلتصق بالنص فوقها. والسوبر مسافاته موحّدة بقاعدته (--wz-gap) */
body:not(.super) .wz > :is(h2, .lead) + .empty { margin-top: 24px; }
.empty b { font-size: 15.5px; font-weight: 600; }
.empty p { max-width: 460px; margin-inline: auto; margin-top: 9px; }
/* وصف يُقرأ في سطر واحد على الشاشة العريضة، ويلتف على الجوال. */
.empty p.one-line { max-width: none; }

.empty-ic {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    border-radius: 18px;
    background: var(--mint-soft);
    border: 1px solid var(--mint-line);
}
.empty-ic svg {
    width: 24px; height: 24px;
    stroke: var(--mint-d); fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.empty-ic svg use { fill: none; }

/* ══ دائرة الرصيد — كم بقي هذا الشهر ══ */
.qr-wrap { position: relative; display: inline-flex; }
.qr-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--control); cursor: pointer; transition: .15s;
}
/* بلا هوفر: إطار أخضر على تمرير الفأرة يقرأ حالة لا حركة. */
.qr-btn svg { width: 24px; height: 24px; transform: rotate(-90deg); }
.qr-track { fill: none; stroke: var(--line-2); stroke-width: 3.4; }
.qr-fill { fill: none; stroke: var(--mint-d); stroke-width: 3.4; stroke-linecap: round; transition: stroke-dasharray .3s; }
.qr-btn.warn .qr-fill { stroke: #C98A2E; }
.qr-btn.out .qr-fill { stroke: var(--bad-ink); }
.qr-btn.out { border-color: var(--bad-line); }

.qr-pop { min-width: 320px; padding: 10px; }

/* رأس المنسدلة: أيقونة في مربّع خفيف، والباقة تحت العنوان لا بجانبه */
.qr-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px;
    border-bottom: 1px solid var(--line-2); }
.qr-ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center;
    background: var(--mint-soft); border: 1px solid var(--mint-line); }
.qr-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--mint-d); stroke-width: 1.7; }
.qr-ic.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.qr-ic.warn svg { stroke: #C98A2E; }
.qr-ic.out { background: var(--bad-soft); border-color: var(--bad-line); }
.qr-ic.out svg { stroke: var(--bad-ink); }

/* زرّ الترقية في منسدلة الرصيد: بعرض المنسدلة وبلون الفعل الأساسي */
.qr-up {
    width: 100%;
    height: 40px;
    justify-content: center;
    border-radius: var(--r-m);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.qr-ttl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qr-ttl b { font-size: 13px; font-weight: 700; color: var(--ink); }
.qr-ttl em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted); }

.qr-row { display: block; padding: 11px 4px 4px; font-size: 12.5px; }
.qr-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.qr-line.sub { margin-top: 5px; }
.qr-row .nm { color: var(--ink); font-weight: 600; }
.qr-row .bar { display: block; height: 6px; border-radius: 9px; background: var(--line-2); overflow: hidden; margin-top: 7px; }
.qr-row .bar i { display: block; height: 100%; border-radius: 9px; background: var(--mint-d); transition: width .3s; }
.qr-row .bar i.warn { background: #C98A2E; }
.qr-row .bar i.out { background: var(--bad-ink); }
.qr-row .vl { color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.qr-line.sub { font-size: 11.5px; font-weight: 600; }
.qr-line.sub .num { font-size: 11.5px; font-weight: 600; }
.qr-line.sub .ok { color: var(--mint-d); }
.qr-line.sub .warn { color: #C98A2E; }
.qr-line.sub .out { color: var(--bad-ink); font-weight: 700; }

.qr-act { display: flex; align-items: center; justify-content: flex-start;
    margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-2); }

/* «عرض المزيد» نصّ لا زرّ: الشراء يبدأ من صفحة الأسعار لا من عدّاد */
.qr-more { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px;
    font-size: 12px; font-weight: 500; color: var(--mint-d); text-decoration: none; }
@media (hover: hover) {
.qr-more:hover { color: var(--mint-ink); } }
/* السهم يشير إلى جهة القراءة: في RTL إلى اليسار لا إلى اليمين. */
.qr-more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; transform: scaleX(-1); }

/* ══ شريط الاشتراك: سطر مرتّب لا عناصر متناثرة ══ */
.sub-now { justify-content: flex-start; }
.sub-now b { flex: none; }
.sub-now .pill.days { flex: none; }

.sub-now .b2 { flex: none; }

/*
 * استثناءان يبقى فيهما الظلّ كما في اللوحة القائمة:
 * حقل الكتابة — يعوم فوق الخيط فيحتاج ما يفصله عنه.
 * وبطاقة الأرقام داخل الرد — هي المخرَج لا سطح الصفحة.
 */
.comp:focus-within { box-shadow: 0 0 0 3px rgba(105, 224, 152, .18); }

/* ══ الإشعارات: العنوان أسود لا لون رابط مُزار ══ */
.sc-row, .sc-row:visited, .sc-row b, .sc-row:visited b { color: var(--ink); }
.sc-row i, .sc-row em { color: var(--muted); }

/* ══ المهام التلقائية: قائمة الساعة بعرض ثابت · وسم «القرار لك» · سطر البيانات ══ */

/* ══ نقطة المحادثة الجارية تنبض ══ */
.sb-dot.live { animation: sb-pulse 1.9s ease-in-out infinite; }

@keyframes sb-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(105, 224, 152, .18); opacity: 1; }
    50% { box-shadow: 0 0 0 6px rgba(105, 224, 152, .06); opacity: .55; }
}

/* ══ ترويسة الرسالة: الصورة والاسم في سطر ══ */
/* اسم المحاسب أول سطر داخل الفقاعة — كما في اللوحة القائمة */

/* ══ حزم شحن الرصيد: ثلاث بطاقات تُختار بضغطة، والمختارة واضحة ══ */

/* ══ صفحة الدفع: هوية من يدفع فوق، ثم اختيار الباقة والمدة ══ */
.pay-who { display: grid; gap: 2px; margin-bottom: 14px; padding: 14px 16px; }
.pay-who b { font-size: 14px; }
.pay-who i { font-style: normal; font-size: 12.5px; color: var(--muted); }

/* ══ ملاحظات الصيانة: صفّ لكل ملاحظة بخطورتها ومقترحها ══ */

/* ══ سجل الوكلاء: اسم ودور، ثم أرقامه، ثم حالته ══ */

/* ══ شريط الاشتراك: أبيض كبطاقة الباقة لا أخضر باهتًا ══ */
.sub-now { background: var(--paper); border-color: var(--line); }

/*
 * «تحت المراجعة» برتقالية لأنها ليست نجاحًا ولا فشلًا: صفّ ينتظر موظفًا.
 * و«نوع العملية» وسم `typeTone` نفسه عند التاجر والسوبر.
 */

.pill.warn {
    background: var(--warn-soft);
    border: 1px solid currentColor;
    color: #B4791E;
    font-weight: 600;
}

/* رؤوس الجداول أثقل: العنوان يُفرز عن صفوفه بالوزن لا بالحجم وحده. */
.tbl th { font-weight: 700 !important; color: var(--ink-2) !important; }

/*
 * البطاقة التي لا تحمل غير جدول **هي الجدول**: حشوتها تُزال ويُقصّ الفائض،
 * فيبدأ شريط العناوين من حافّتها العليا بدل إطار داخل إطار.
 */
/*
 * اللوحة **لا تقصّ**: قائمة حجم الصفحة تنزل خارج حدّها فكانت تُبتر. زوايا
 * الجدول تُقصّ في غلافه هو، فلا حاجة لقصّها في اللوحة.
 */
.panel:has(> .tbl-wrap:first-child) { padding: 0; overflow: visible; }
.panel > .tbl-wrap:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; overflow: hidden; }
.panel > .tbl-wrap:first-child { border: 0; border-radius: 0; }
.panel > .tbl-wrap:first-child > .tbl { margin-top: 0; }
.panel > .tbl-wrap:first-child .tbl thead th { border-radius: 0; }

.pill.days, .pill.v {
    background: var(--violet-soft);
    color: var(--violet);
    border: 1px solid var(--violet-line);
    font-weight: 600;
    font-size: 12.5px;
    padding: 3px 12px 7px;
}

/* ══ التبويبات: قطعة واحدة متصلة وأكبر ══ */
.tabs {
    display: inline-flex;
    gap: 0;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin: 18px 0 16px;
}

.tab {
    height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: .15s;
}

/* تبويبات نافذة: على قدّ نصّها وفي الوسط، بعرض متساوٍ (نافذة التطبيق · بوابة الدفع) */
.tabs.tabs-fit { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; margin: 22px auto 0; }
.tabs-fit .tab { justify-content: center; font-size: 13px; padding-inline: 16px; min-height: 34px; }

@media (hover: hover) {

.tab:hover { color: var(--ink); } }
.tab.on { background: var(--paper); color: var(--ink); }

/* حقل بطريقتين: الليبل في أوله وتبويبات صغيرة في آخره، والحقل تحتهما بمسافة (البريد والواتساب في نموذج المحاسب) */
.fld-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fld .fld-head > label { margin: 0; padding-bottom: 10px; }
.tabs.tabs-sm { margin: 0; padding: 3px; border-radius: 10px; }
/* التبويب ملتصق بحافة الحقل العليا كأنه طالع منه: بلا حد بينهما، وزاوية الحقل تحته مستقيمة */
.fld-head .tabs-sm { margin-inline-start: auto; border-bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; }
/* الزاوية تحت التبويبين باتجاه الصفحة لا الحقل: حقل البريد ltr فكانت الزاوية المنطقية تنقلب إلى الجهة الأخرى */
:root[dir="rtl"] :is(.fld-head + .inp, .fld-head + .walink, .fld-head + .wa-acc) { border-top-left-radius: 0; }
:root[dir="ltr"] :is(.fld-head + .inp, .fld-head + .walink, .fld-head + .wa-acc) { border-top-right-radius: 0; }
.tabs-sm .tab { height: 30px; padding: 0 14px; font-size: 12.5px; border-radius: 8px; }

/* ══ رصيد التوكنز فوق الباقات ══ */

.tok-bar-line { flex: 1; min-width: 140px; height: 6px; border-radius: 999px; background: var(--canvas); overflow: hidden; }
.tok-bar-line i { display: block; height: 100%; background: var(--mint); }
.tok-bar-line i.warn { background: var(--warn); }
.tok-bar-line i.out { background: var(--bad-ink); }

/* ══ جدول سجل الاشتراكات: بلا تظليل عند المرور ══ */
@media (hover: hover) {
.tbl-flat tbody tr:hover { background: transparent; } }
.tbl-flat thead th { background: var(--canvas); font-weight: 600; }
.tbl-flat td { vertical-align: middle; }

.tbl-flat .bc { display: inline-flex; align-items: center; gap: 6px; }
.tbl-flat .bc svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tbl-flat .pill .okic { width: 14px; height: 14px; margin-inline-end: 4px; vertical-align: -2px; }

/*
 * ══ دخول الرسائل: حركة خفيفة تُشعر أن الرد وصل الآن ══
 *
 * الرسالة تطلع من تحت قليلًا مع ظهور تدريجي — نفس إحساس اللوحة القائمة.
 * والحركة **على الرسالة لا على الخيط**: تحريك الخيط كله عند كل رد يقفز
 * بالشاشة تحت إصبع القارئ.
 */
.thread .msg { animation: in .45s cubic-bezier(.2, .7, .3, 1) both; }

/* البطاقة تلحق النصّ بلحظة، فتُقرأ الجملة قبل أن يقفز الرقم */
.thread .msg .card { animation: in .45s cubic-bezier(.2, .7, .3, 1) .08s both; }

/* الاقتراحات آخر ما يظهر: هي دعوة لا جواب */
.thread .msg .sugs { animation: in .4s cubic-bezier(.2, .7, .3, 1) .16s both; }

@media (prefers-reduced-motion: reduce) {
    .thread .msg,
    .thread .msg .card,
    .thread .msg .sugs { animation: none; }
}

/* زر النسخ يأخذ لون التأكيد لحظة النسخ ثم يرجع */
.rate button.on svg { color: var(--mint-d); }

/* اللون البنفسجي في جدول الاشتراكات القديم يأخذ الحدّ نفسه */

/* ══ الواتساب داخل النموذج: الحقل والأزرار تحت بعض ══ */
.walink .inp { margin-top: 12px; }
.walink .wa-act { margin-top: 12px; }

/*
 * قبل المسح ما في حالة تُعرض، فيبقى صفّها فارغًا ويدفع الزرّ إلى أسفل اللوح.
 * يُطوى الصفّ الفارغ فيستقرّ الزرّ في منتصف اللوح علوًّا وسفلًا.
 */
.walink .wa-state:empty { display: none; }
.walink .wa-state:empty ~ .wa-act { margin-top: 0; }

/*
 * أزرار المعالج الأربعة بمقاس واحد **تحديدًا**.
 *
 * كانت الخطوة الأولى تترك زرّها بعرض نصّه (88)، وبقيتها 132، والأخير 168 —
 * ثلاثة مقاسات لفعل واحد يتكرّر. العرض ثابت لا أدنى: 148 يسع أطول نصّ
 * («ابدأ المحادثة») فتخرج الأزرار كلها متطابقة لا متقاربة.
 */
.wz-foot .b1,
.wz-foot .b2,
.wz-act .b1 {
    width: 148px;
    min-width: 148px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* صورة المحاسب في بطاقته */

/* ══ اقتراحات الترحيب: سطر واحد بخطّ أصغر قليلًا ══ */
/*
 * صفّ الاقتراحات بعرض حقل السؤال نفسه.
 *
 * كان يقف عند عرض محتواه (610) والحقل 640، فيقرأ الصفّ أضيق من الحقل
 * فوقه بلا سبب. القصاصات تتمدّد لتملأ العرض ولا تنكمش، فلا يُقصّ نصّ:
 * على الشاشة الضيّقة تحتفظ بحجمها ويمرّر الصفّ أفقيًّا كما كان.
 */
@media (max-width: 640px) {
    /* المعالج على الجوال: «رجوع» و«متابعة» نصفان متساويان بالفجوة القياسية وبارتفاع واحد. */
    .wz-foot:has(> .b2) > .b1,
    .wz-foot:has(> .b2) > .b2 { flex: 1 1 0; width: auto; min-width: 0; height: 44px; }
    .wz-foot:has(> .b2) > .tiny { flex: 1 1 100%; }
}

/*
 * ══ التلاشي فوق حقل الكتابة ══
 *
 * التدرّج في `app.css` يبلغ تمامه عند 32% من ارتفاع الكتلة، وكتلتنا بلا
 * شريط التجربة الذي في العرض التوضيحي، فلم يبقَ فوق الحقل غير 14 بكسل من
 * الحشوة — فيُقرأ قطعًا حادًّا لا تلاشيًا. حشوةٌ أعلى تعيد للتدرّج مداه:
 * 32% من (60 + 110 + 20) ≈ 60 بكسل، وهي المسافة نفسها في اللوحة القائمة.
 */
.compose-fixed { padding-top: 60px; }

@media (max-width: 640px) {
    .compose-fixed { padding-top: 44px; }
}

/* ══ بيانات الحساب البنكي: صفّ لكل حقل بزرّ نسخه ══ */
.bank-rows { display: grid; gap: 2px; margin-top: 14px; text-align: start; }

.bank-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    background: var(--canvas);
}

.bank-row .nm { font-size: 12.5px; color: var(--muted); }
.bank-row .vl { font-weight: 600; font-size: 13px; justify-self: end; word-break: break-all; }

/* ══ شعارات وسائل الدفع ══ */
.pay-marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    /*
     * الشعارات مساعِدة لا بطلة: خفوت بسيط يبقيها مقروءة ولا يسحب العين من
     * الزرّ الذي فوقها.
     */
    opacity: .82;
}

.pay-marks img { height: 26px; width: auto; display: block; }

/* ══ شريط الاشتراك والرصيد: صندوق واحد ══ */

/*
 * التبويبات: أرضية بيضاء بحدّها تجمع الأزرار، والمختار فضي.
 * بلا أرضية تبدو الأزرار ملقاة على الصفحة لا مجموعة واحدة.
 */
.tabs { background: var(--paper); border-color: var(--line); }
.tab.on { background: var(--soft); }
.tab.on { box-shadow: 0 1px 3px rgba(17, 24, 22, .1); }

/* ══ الباقات: خطّ أكبر وعلامات أوضح ══ */
.plan .pn { font-size: 18px; text-align: center; }
.plan .pp { text-align: center; }

/*
 * البطاقات الثلاث بارتفاع واحد وأزرارها على خطّ واحد.
 *
 * `align-items:start` كانت تترك كل بطاقة بطولها، فيقف زرّ «اطلب عرض سعر»
 * أعلى من «اشترك الآن» ويبقى تحت الأولى والأخيرة فراغ لا معنى له. الآن
 * تتمدّد البطاقات لأطولها، وقائمة المزايا تأخذ ما بقي، والزرّ آخر شيء
 * فيها — فيستقرّ الزرّان على خطّ واحد مهما اختلف عدد الأسطر فوقهما.
 */

.plans { align-items: stretch; }
.plan { display: flex; flex-direction: column; }
/* هامش تلقائي يبتلع الفراغ فيستقرّ آخر عنصر في قاع بطاقته أيًّا كان طولها. */
.plan .pbtn { margin-top: auto; }

/*
 * نموذج عرض السعر: حقلان في السطر، والنصّ الطويل يأخذ السطر كلّه.
 */
.mdl.qt .qt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.mdl.qt .qt-grid .qt-wide { grid-column: 1 / -1; }

@media (max-width: 620px) {
    .mdl.qt .qt-grid { grid-template-columns: 1fr; }
}

/* زر ربط الواتساب أخضر: الفعل الوحيد في اللوح، فيُرى */
/* زرّ الربط بلون الأزرار الأساسية: كان أخضر فاتحًا وحده بين أزرار الشاشة. */
.wa-link { background: var(--slate); }
@media (hover: hover) {
.wa-link:hover { background: var(--slate-d); opacity: 1; } }

/* صورة المحاسب في المحادثة تملأ مربّعها كما تملؤه النجمة */

/* ══ نافذة الإعدادات: شريط جانبي ومحتواه ══ */

/* ══════════════════════════════════════════════════════════════════
   الحقل الخاطئ
   ══════════════════════════════════════════════════════════════════
   الإطار الأحمر يوضع من `app.js` على كل حقل رجع باسمه خطأ من الخادم،
   ويُنزع مع أول حرف يكتبه التاجر. القاعدة هنا لا في `app.css`: ذاك
   تصميم المنصة منقولًا حرفيًّا ولا يُعدَّل.                                */
.inp-err,
[data-inp-err],
input.inp-err,
select.inp-err,
textarea.inp-err {
    border-color: var(--bad) !important;
    /* حلقة خفيفة حوله: الإطار وحده يضيع بين حقول متجاورة */
    box-shadow: 0 0 0 3px rgba(233, 108, 108, .13) !important;
}

.inp-err:focus,
[data-inp-err]:focus,
input.inp-err:focus,
select.inp-err:focus,
textarea.inp-err:focus {
    border-color: var(--bad) !important;
    box-shadow: 0 0 0 3px rgba(233, 108, 108, .2) !important;
}

/* ══════════════════════════════════════════════════════════════════
   نافذة التأكيد
   ══════════════════════════════════════════════════════════════════
   الفعل الخطر أحمر مصمت وأبرز ما في البطاقة، و«تراجع» أبيض بجانبه
   بنفس العرض تقريبًا: الخروج سهل بقدر ما الدخول واضح.                  */
.mdl.cfm { padding: 30px 26px 26px; }

/* لون الأيقونة بالخاصية color: الرمز يرسم بلون النص ولا يرث stroke من الخارج */
.mdl.cfm .cfm-ic.ok { color: var(--ok); }
.mdl.cfm .cfm-ic.ok.notice { color: #C98A1B; }
.mdl.cfm .cfm-ic {
    width: 64px;
    height: 64px;
    display: block;
    margin: 2px auto 18px;
    color: #E14B4B;
}

.mdl.cfm h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.mdl.cfm .ms { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.65; }

.mdl.cfm .cfm-act { margin-top: 24px; gap: 10px; }
.mdl.cfm .cfm-act .b1,
.mdl.cfm .cfm-act .b2 { flex: 1 1 0; height: 46px; font-size: 13.5px; }

.b1.danger { background: #E14B4B; color: #fff; }
@media (hover: hover) {
.b1.danger:hover { background: #C93F3F; } }
.b1.danger:disabled { background: #E9B7B7; box-shadow: none; transform: none; }

.mdl.cfm .cfm-act .b2 { border-color: var(--line-2); color: var(--ink); }
@media (hover: hover) {
.mdl.cfm .cfm-act .b2:hover { background: var(--canvas); border-color: var(--muted); } }

/* ══ اللوحة البصرية في صفحتي الدخول والتسجيل: بطاقة عائمة ══
   كانت تلتصق بحواف النافذة من الجهات الأربع فتقرأ كنصف شاشة لا كعنصر.
   الآن هامش متساوٍ 16px من الجهات الأربع وزوايا 28px (--r-xl) — نفس
   نصف قطر البطاقات الكبيرة في اللوحة. الأرضية تحتها لون الصفحة نفسه.
   `overflow:hidden` قائم في app.css فالتوهّج ينقصّ عند الزوايا الدائرية. */
@media (min-width: 901px) {
    body.auth .auth-split { background: var(--canvas); }
    body.auth .auth-art {
        margin: 16px;
        border-radius: var(--r-xl);
        border-inline-start: 0;
        /* صفحة التسجيل أطول من الشاشة، فالصف يتمدّد وتضيع الحافة السفلى.
           البطاقة تلتصق أعلى الصف بارتفاع الشاشة ناقص الهامشين — فيبقى
           الهامش 16px من الجهات الأربع مهما طال النموذج المقابل. */
        align-self: start;
        position: sticky;
        top: 16px;
        height: calc(100dvh - 32px);
    }
}
/* الشاشات القصيرة: البطاقة تفقد 32px من ارتفاعها بالهامش، فالحشوة
   والفراغات تتقلّص معها حتى لا يُقصّ طرفا المحتوى (التوسيط يقصّ الطرفين). */
@media (min-width: 901px) and (max-height: 760px) {
    body.auth .auth-art { padding-block: 26px; gap: 18px; }
}
@media (min-width: 901px) and (max-height: 660px) {
    body.auth .auth-art { padding-block: 18px; gap: 12px; }
    body.auth .auth-art .art-cap p { display: none; }
}

/* ══ التسجيل: خطوة واحدة وتأكيد بريدها ══ */
.reg-sent { margin: 0 0 4px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.reg-sent b { color: var(--ink); font-weight: 600; }

/* رمز التحقق في التسجيل: **حقل عادي** بمقاس بقية الحقول لا خانات.
   الخانات الأربع في `/verify` تملأ شاشة مكرّسة للرمز وحده، وهنا الرمز حقل
   في نموذج من خطوتين — فمقاسه مقاس البريد الذي فوقه. و`text-indent` يعوّض
   الفراغ الذي يتركه `letter-spacing` بعد آخر رقم، وإلا مال النص لليسار. */

/* زرّ يقرأ كرابط: «تغيير» و«أرسله مرة ثانية» أفعال لا وجهات، فهي أزرار
   حتى يقرأها القارئ الصوتي فعلًا، وشكلها شكل الرابط. */
.lnk {
    border: 0;
    background: none;
    padding: 0;
    margin-inline-start: 6px;
    font: inherit;
    color: var(--mint-d, #0F8A5F);
    cursor: pointer;
}

@media (hover: hover) {

.lnk:hover { text-decoration: underline; } }
.lnk:disabled { opacity: .5; cursor: default; text-decoration: none; }

/* القطاع كان يخرج صندوقًا عاليًا ونصّه ملفوف على سطرين بينما الجوال بجانبه
   سطر واحد: عنصر الفليكس لا ينكمش تحت عرض محتواه بلا `min-width:0`. */
.dd-btn { min-width: 0; }
.dd-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ أيقونة الإشعار — مربّع خفيف أول السطر في اتجاه القراءة ══ */
.nt-ic {
    border-radius: 10px; display: grid; place-items: center;
    background: var(--mint-soft); border: 1px solid var(--mint-line);
}
.nt-ic svg { fill: none; stroke: var(--mint-d); stroke-width: 1.7; }
.nt-ic svg use { fill: none; }
.nt-ic.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.nt-ic.warn svg { stroke: #C98A2E; }
.nt-ic.mute { background: var(--canvas); border-color: var(--line); }
.nt-ic.mute svg { stroke: var(--muted); }

/* المنسدلة: الأيقونة والنصّ صفًّا واحدًا، والنصّ وحده هو ما يلتفّ */
.pop .it { display: flex; align-items: flex-start; gap: 10px; }
.pop .it .nt-ic { margin-top: 1px; }
.nt-tx { flex: 1; min-width: 0; }

/* الصفحة: نفس الصفّ، والأيقونة لا تنكمش مع طول العنوان */
.nt-row .nt-ic { align-self: flex-start; margin-top: 2px; }
/* الجرس وحده أنزل بكسلين في مربعه: رسمه ثقيل من فوق. وبقية الأيقونات في الوسط تماماً */
.nt-row .nt-ic.mute svg { transform: translateY(2px); }

/*
 * مقاس نصّ الإشعار: كان 13.5/12.5 فيُقرأ حاشيةً لا رسالة. الإشعار هو
 * الطريق الوحيد الذي يصل التاجر خارج الشاشة، فيُقرأ بمقاس الجُمل لا الوسوم.
 */
.nt-row .tx b, .pop .it .nt-tx b { font-size: 13.5px; font-weight: 600; }
.nt-row .tx i, .pop .it .nt-tx i { font-size: 13px; line-height: 1.75; font-style: normal; }
.nt-row .ro .tiny, .pop .it .nt-tx em { font-size: 11.5px; font-style: normal; }
/* منسدلة الإشعارات في التاجر والسوبر: العنوان والوصف سطر واحد لكلٍّ، والوصف خفيف */
.pop .it .nt-tx b,
.pop .it .nt-tx i { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop .it .nt-tx i { color: var(--muted); font-weight: 500; }
.nt-ic { width: 34px; height: 34px; flex: 0 0 34px; }
.nt-ic svg { width: 17px; height: 17px; }

/* ══ بطاقة المرفق فوق حقل الكتابة ══ */
/*
 * فراغ فوق البطاقة: كانت ملاصقة لحافة الحقل العليا فتبدو ملصقة عليه لا
 * بداخله. 14px فوقها و18px من الجانبين — نفس حشوة النصّ تحتها، فيقرأ
 * المرفق والنصّ على عمود واحد.
 */
.att-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 14px 18px 0; }
.att-card {
    display: flex; align-items: center; gap: 9px;
    padding-block: 6px; padding-inline: 6px 10px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    max-width: 260px;
}
.att-thumb {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 8px; overflow: hidden;
    display: grid; place-items: center;
    background: var(--canvas); border: 1px solid var(--line-2);
}
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-thumb svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.6; }
.att-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.att-meta b { font-size: 12px; font-weight: 500; color: var(--ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-meta bdi { font-size: 11px; color: var(--faint); }
.att-x {
    width: 22px; height: 22px; flex: 0 0 22px;
    display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 7px; background: none; color: var(--faint); cursor: pointer; transition: .15s;
}
.att-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (hover: hover) {
.att-x:hover { background: var(--bad-soft); color: var(--bad-ink); } }

/* نقاط الشرائح كانت ملاصقة لأسفل البطاقة فتُقرأ جزءًا منها لا مؤشّرًا لها. */
.auth-art .sec-dots { margin-top: 18px; }

/* ══ ارتفاع أدنى واحد لبطاقات الضيف ══
   يحفظ للبطاقة القصيرة مساحتها فلا تبدو قصاصة، والمحتوى يتدفّق من أعلى
   طبيعيًّا: دفع الحقول لأسفل كان يترك فجوة بين العنوان وأول حقل. */
body.auth .auth-card { min-height: var(--auth-card-h); }

/* عدّاد إعادة الإرسال: رقم ثابت العرض حتى لا يرتجف السطر مع كل ثانية. */
.resend-left { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }

/* خانات الرمز داخل التسجيل: أقصر من شاشة `/verify` المكرّسة له وحده. */
.auth-f .code-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.auth-f .code-boxes .code-box { height: 58px; font-size: 20px; font-weight: 800; }

/* انتقال خفيف بين خطوات التسجيل: إزاحة صغيرة وتلاشٍ، بلا حركة تشدّ العين
   ولا تأخير محسوس. ومن يطلب تقليل الحركة لا يراها أصلًا. */
.step-in { animation: step-in .22s cubic-bezier(.2, .7, .3, 1) both; }

/*
 * ظهور بطاقة الدخول والتسجيل — **نفس حركة المنسدلات**.
 *
 * الصندوق أولًا ثم بنوده متوالية بفارق أربعين ملّي: العين تمرّ على الحقول
 * بالترتيب الذي ستملؤها به بدل أن تُلصق البطاقة كاملة دفعة واحدة. والفارق
 * يقف عند البند الخامس حتى لا يطول انتظار نموذج طويل.
 *
 * وفي التسجيل تُعاد الحركة عند كل خطوة: النموذج يُبنى من جديد بمفتاحه،
 * فتقرأ العين الخطوة الجديدة كما قرأت الأولى.
 */
.auth-card {
    transform-origin: top center;
    animation: pop-in .18s cubic-bezier(.2, .7, .3, 1) both;
}

.auth-head,
.auth-f > *,
.auth-alt {
    animation: item-in .22s cubic-bezier(.2, .7, .3, 1) both;
}

.auth-head { animation-delay: .05s; }
.auth-f > :nth-child(1) { animation-delay: .09s; }
.auth-f > :nth-child(2) { animation-delay: .13s; }
.auth-f > :nth-child(3) { animation-delay: .17s; }
.auth-f > :nth-child(4) { animation-delay: .21s; }
.auth-f > :nth-child(n+5) { animation-delay: .25s; }
.auth-alt { animation-delay: .29s; }

/*
 * ⚠️ **الحركة تصنع سياق تكديس.**
 *
 * `animation` بملء `both` يبقى مطبَّقًا بعد انتهائه، فيصير كل حقل سياقًا
 * مستقلًّا و`z-index` المنسدلة داخله محبوس فيه — فتُرسم قائمة النشاط **تحت
 * زرّ إنشاء الحساب** الذي بعدها. الترتيب يُعكس صراحةً: الحقل الأول يعلو ما
 * بعده، فتنفتح كل منسدلة فوق ما تحتها.
 */
.auth-f > *,
.wz .panel > * { position: relative; }

/*
 * والنموذج نفسه سياق مستقل بحركته `step-in`، فترتيب أبنائه محبوس داخله
 * ويُقارَن **النموذج كلّه** بما بعده. بلا هذا يُرسم سطر «عندك حساب ؟» فوق
 * قائمة النشاط لأنه يليه في الشجرة.
 */
.auth-card > .auth-f { position: relative; z-index: 2; }
.auth-card > .auth-alt { position: relative; z-index: 1; }

.auth-f > :nth-child(1), .wz .panel > :nth-child(1) { z-index: 9; }
.auth-f > :nth-child(2), .wz .panel > :nth-child(2) { z-index: 8; }
.auth-f > :nth-child(3), .wz .panel > :nth-child(3) { z-index: 7; }
.auth-f > :nth-child(4), .wz .panel > :nth-child(4) { z-index: 6; }
.auth-f > :nth-child(5), .wz .panel > :nth-child(5) { z-index: 5; }
.auth-f > :nth-child(n+6), .wz .panel > :nth-child(n+6) { z-index: 4; }

/*
 * وشريط الترقيم فوق الجدول الذي يخصّه.
 *
 * الترتيب أعلاه يعطي أبناء اللوحة أرقامًا تنازلية بحسب موضعهم، فالجدول
 * (الأول) يعلو الشريط (الثاني) — وقائمة حجم الصفحة تفتح لأعلى فتُدفن تحت
 * الصفوف. الشريط يُستثنى صراحةً لأن ما ينبثق منه يعلو كل ما حوله.
 */
.wz .panel > .tpg { z-index: 20; }
/* الترقيم داخل المربع الأبيض كترقيم الجدول: حشوة اللوحة تكفيه */
.panel > .tpg { padding: 14px 0 0; }

/*
 * ونفس التوالي في مواضع أخرى يُقرأ فيها المحتوى بالترتيب:
 * صدر المحادثة (العلامة فالعنوان فحقل السؤال فالقصاصات)، ونموذج تعيين
 * الموظف بحقوله. الصندوق أولًا ثم بنوده، كما في المنسدلات.
 */
.hero > *,
.wz .panel > * {
    animation: item-in .22s cubic-bezier(.2, .7, .3, 1) both;
}

.hero > :nth-child(1), .wz .panel > :nth-child(1) { animation-delay: .05s; }
.hero > :nth-child(2), .wz .panel > :nth-child(2) { animation-delay: .09s; }
.hero > :nth-child(3), .wz .panel > :nth-child(3) { animation-delay: .13s; }
.hero > :nth-child(4), .wz .panel > :nth-child(4) { animation-delay: .17s; }
.hero > :nth-child(n+5), .wz .panel > :nth-child(n+5) { animation-delay: .21s; }

/* خانات الرمز تتوالى كذلك: أربع خانات تظهر معًا تقرأ صندوقًا لا حقولًا. */
.code-boxes > * {
    animation: item-in .22s cubic-bezier(.2, .7, .3, 1) both;
}

.code-boxes > :nth-child(1) { animation-delay: .13s; }
.code-boxes > :nth-child(2) { animation-delay: .17s; }
.code-boxes > :nth-child(3) { animation-delay: .21s; }
.code-boxes > :nth-child(4) { animation-delay: .25s; }

@keyframes step-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .step-in,
    .auth-card,
    .auth-head,
    .auth-f > *,
    .auth-alt,
    .code-boxes > *,
    .hero > *,
    .wz .panel > * { animation: none; }
}

/* ══ رأس البطاقة على خطّ واحد مهما طال النموذج ══
   التوسيط يرفع البطاقة الأطول كلها لأعلى، فيطلع شعار التسجيل فوق شعار
   الدخول بفارق يُرى. التوسيط هنا يقع على **الارتفاع الأدنى** لا على
   الارتفاع الفعلي: النموذج الأطول ينمو لأسفل وحده، والرأس لا يتحرّك. */
@media (min-width: 901px) {
    body.auth .auth-card {
        align-self: start;
        margin-top: max(24px, calc((100dvh - var(--auth-card-h)) / 2));
    }
}

/* ══ التسجيل: بطاقة أطول لها توسيطها ══
   بقية الشاشات تُوسَّط على الارتفاع الأدنى فتتساوى رؤوسها. والتسجيل أطول
   منها بحقوله الأربعة، فتوسيطه على الأدنى يدفعه لأسفل ويترك فراغًا فوقه.
   هنا يُوسَّط على ارتفاعه هو، و`safe` تمنع قصّ أعلاه على الشاشات القصيرة
   فيبقى قابلًا للتمرير بدل ما يختفي رأسه. */
@media (min-width: 901px) {
    body.auth .auth-card.reg {
        align-self: safe center;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    /* الشاشة القصيرة تقصّ البطاقة الطويلة: `overflow:hidden` على الجسم كان
       يمنع التمرير أصلًا، فيختفي الزرّ بلا طريق إليه. واللوحة الجانبية
       لاصقة فتبقى مكانها بينما يتمرّر العمود. */
    body.auth { overflow-y: auto; align-items: flex-start; }

    /* الصف كان مشدودًا إلى ارتفاع الشاشة، فالبطاقة الأطول منه تفيض بلا
       طريق إليها. `height:auto` تجعله ينمو بمحتواه و`min-height` تبقيه
       ملء الشاشة حين يكون المحتوى أقصر. */
    body.auth .auth-split { height: auto; min-height: 100dvh; }
}

/* شعار التسجيل أنزل قليلًا: بطاقته أطول فيبدو رفعه أكبر مما هو. */
body.auth .auth-card.reg { --auth-logo-lift: 14px; }

/* نجمة الحقل الإجباري: تُقرأ قبل الكتابة لا بعد رجوع الخطأ. */
.req { color: var(--bad-ink); margin-inline-start: 4px; font-style: normal; font-weight: 700; }

/*
 * بطاقة المستخدم في أسفل الشريط صارت **رابطًا** لا زرًّا بعد حذف نافذة
 * الإعدادات، فورثت لون الرابط وخطّه الأزرق. اللون من الشريط نفسه.
 */
.sb-user, .sb-user:visited { color: inherit; text-decoration: none; }
@media (hover: hover) {
.sb-user:hover { color: inherit; text-decoration: none; } }
.sb-user b, .sb-user i { text-decoration: none; }
/* اسم المنشأة الطويل يُختصر بنقاط كاسم المستخدم فوقه لا يُقص في منتصف حرف */
.sb-user .tx i { overflow: hidden; text-overflow: ellipsis; }
/* الاسم والمنشأة يبدآن من طرف الصفحة لا من طرف لغتهما: اسم عربي في لوحة إنجليزية يبدأ يساراً كالسطر تحته */
html[dir="ltr"] .sb-user .tx > * { text-align: left; }
html[dir="rtl"] .sb-user .tx > * { text-align: right; }

/* دوّارة الانتظار في **منتصف الزرّ** لا عند بداية نصّه: كانت مطلقة الموضع
   بلا `inset` فتستقر حيث انتهى المحتوى قبلها. */
.btn-load { inset: 0; margin: auto; }

/*
 * بطاقة المستخدم أسفل البار **زرّ يفتح منسدلة** لا رابطًا ينقل لصفحة.
 * زرّ المتصفح يأتي بخطّه وحشوته ومحاذاته، فيُنزع كله ليبقى صفّ البطاقة.
 */
button.sb-user {
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
    text-decoration: none;
}

button.sb-user .chev { transition: transform .18s; }
button.sb-user.open .chev { transform: rotate(-90deg); }

/* زرّ طيّ الشريط أعلى قليلًا: كان في منتصف الرأس فيبدو منخفضًا عن الشعار. */
.sb-toggle { position: relative; top: -5px; }

/* عنوان الشاشة في الشريط العلوي حُذف: اسم الشاشة مكتوب في القائمة الجانبية
   وفي لسان المتصفح، وتكراره ثالثة يأخذ سطرًا بلا معلومة. */

/*
 * وسم «لم تتم لسا» على شاشات موجة العقل.
 *
 * الشاشات موجودة وتُفتح، لكن ما خلفها لم يُبنَ بعد. الوسم يقول ذلك في
 * القائمة قبل ما يفتحها التاجر ويظنّ العطل عطله. ويختفي مع طيّ الشريط
 * لأن المساحة وقتها لأيقونة وحدها.
 */
.sb-item .soon {
    margin-inline-start: auto;
    flex: none;
    /* بمعالجة مربّع أيقونة بطاقة الموظف نفسها: خلفية 7٪ وحدّ 10٪ ونصّ أخضر */
    height: 22px;
    min-height: 22px;
    padding: 0 9px 1px;
    border-radius: var(--tag-r);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1) !important;
    color: var(--mint);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
    white-space: nowrap;
}

body.sb-collapsed .sb-item .soon { display: none; }

/*
 * أيقونة رأس النافذة — **نفس بصمة نافذة الترحيب** بمقاس أصغر.
 *
 * النافذة بلا أيقونة تبدأ بنصّ فتُقرأ كتحذير أو كخبر بلا فرق. الأيقونة
 * تقول نوعها قبل الكلمة، وموضعها ومقاسها واحد في كل النوافذ فلا تتعلّم
 * العين مكانًا جديدًا في كل مرة.
 */
.mdl-ic {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    background: var(--mint-soft);
    border: 1px solid var(--mint-line);
}

.mdl-ic svg { width: 30px; height: 30px; color: var(--ok); fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ===== عائلة أيقونات واحدة: كل أيقونة واجهة خطّية =====
   العلامات مستثناة عمدًا: s-star (علامة المنتج) · i-sar (رمز العملة) · i-wa (شعار واتساب).
   تغطية على القواعد التي كانت تفرض التعبئة في app.css. */
.send svg { fill: none; stroke: currentColor; }
.b1 svg { fill: none; stroke: currentColor; stroke-width: 1.7; }

/* رمز الريال **مُصمَت لا خطّي**: قاعدة الأزرار أعلاه كانت تفرّغه فيظهر
   شبحًا رفيعًا على الزرّ الداكن. والعلامات الثلاث مستثناة من العائلة الخطّية. */
.b1 svg.sar, .b2 svg.sar, .send svg.sar{
    fill: currentColor;
    stroke: none;
    width: .78em;
    height: .78em;
}
/* الأيقونات التي تلوّنها الـCSS بالحدّ صارت تحمل stroke=currentColor، فاللون يأتي من color */
.empty-ic svg { color: var(--mint-d); }
.att-file svg, .att-thumb svg { color: var(--muted); }
.nt-ic svg { color: var(--mint-d); }
.qr-ic svg { color: var(--mint-d); }

/*
 * ⚠️ **درجة الأيقونة تُكتب على `color` لا على `stroke`.**
 *
 * رموز الشريط تحمل `stroke="currentColor"` سمةً في الرسم، والسمة تغلب القيمة
 * **الموروثة** من الـCSS. فقاعدة `.nt-ic.warn svg { stroke: … }` كانت تُهزم
 * وتبقى كل أيقونة خضراء مهما كان نوعها: «نفد رصيدك» بلون «تمّ بنجاح».
 */
.nt-ic.warn svg, .qr-ic.warn svg { color: #C98A2E; }
.nt-ic.out svg, .qr-ic.out svg { color: var(--bad-ink); }
.nt-ic.mute svg { color: var(--muted); }

.nt-ic.out { background: var(--bad-soft); border-color: var(--bad-line); }

.verify-ic svg { color: var(--muted); }

/* وسم «اختياري» بجانب اسم الحقل — يقرأ قبل الكتابة لا بعد الإرسال. */
.fld label .opt, .auth-f label .opt {
    margin-inline-start: 6px;
    color: var(--faint);
    font-size: 11px;
    font-weight: 500;
}

/* أيقونة بند قائمة المحادثة: تقول الفعل قبل قراءة كلمته. */
.cmenu button { display: flex; align-items: center; gap: 9px; }
.cmenu button svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; }

/* السهم يتبع اتجاه القراءة: الشيفرون مرسوم لليمين، والعربية تقرأ لليسار.
   وملاصق للكلمة: الفجوة الواسعة تفصله عنها فيُقرأ رمزًا مستقلًّا. */
/*
    «من هنا» — رابط بسهم يفتح نافذة (في بطاقة المحاسب وصفحته). أخضر فاتح بسهم، ونصّ التلميح قبله قصير:
    السطر الطويل تحت الحقل يُقرأ متأخّرًا أو لا يُقرأ.
*/
.go {
    display: inline-flex;
    align-items: center;
    /* السهم ملاصق للكلمة: الفجوة الواسعة تفصله فيُقرأ رمزًا مستقلًّا. */
    gap: 1px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    /* الأخضر الفاتح: الرابط يُقرأ فعلًا لا تكملةً للسطر الرمادي. */
    color: var(--mint);
    cursor: pointer;
    /* يُستعمل زرًّا ورابطًا: الرابط يأخذ خط المتصفح الافتراضي تحته، واللون والسهم يكفيان */
    text-decoration: none;
}

@media (hover: hover) {

.go:hover { color: var(--mint-d); } }
/* فراغ قبل الرابط: القالب يطوي المسافة بين النص والزر فيلتصق «أضف» بالبريد */
.hint .go { margin-inline-start: 6px; }
.go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.go.on-dark { color: var(--mint); }
@media (hover: hover) {
.go.on-dark:hover { color: #fff; } }
.go svg { transform: scaleX(-1); }

/* جدول السجلّات: قيمة لاتينية وأيقونة نسخ بجانبها، بلا عمود إجراء ولا زرّ.
   ولا تمرير أفقي: النافذة تعرض جدولها كاملًا، والقيمة الطويلة تلتفّ. */
/*
 * جدول واحد لا إطار داخل إطار.
 *
 * `.tbl` تحمل هامشًا علويًّا عامًّا (14) يفيد حين تقف وحدها، لكنها هنا داخل
 * إطار: فيدفعها الهامش لأسفل ويظهر شريط أبيض فوق خلفية العناوين. يُصفَّر،
 * ويُقصّ الفائض فتملأ خلفية العناوين زوايا الإطار العليا.
 */

/* `min-width:840px` على `.tbl` كان يفرض التمرير مهما ضاقت النافذة. */

.cp {
    border: 0;
    background: none;
    padding: 0;
    margin-inline-start: 8px;
    color: var(--faint);
    cursor: pointer;
    vertical-align: middle;
}
@media (hover: hover) {
.cp:hover { color: var(--ink-2); } }
.cp svg { width: 15px; height: 15px; fill: none; stroke: currentColor; display: block; }

/*
 * إغلاق النافذة: علامة × في زاويتها العليا اليسرى.
 *
 * زرّ «إغلاق» بعرض النافذة يقرأ كفعل أساسي وهو ليس كذلك، ويأخذ سطرًا كاملًا
 * تحت المحتوى. والعلامة في الزاوية مكانها المتوقّع في كل نافذة.
 */
.mdl { position: relative; }

.mdl-x {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    /* رمادي لا أخضر: الإغلاق ليس فعلًا رئيسيًّا فلا يأخذ لون المنصة. */
    background: var(--canvas);
    color: var(--muted);
    cursor: pointer;
    padding: 0;
}

@media (hover: hover) {

.mdl-x:hover { background: var(--soft); color: var(--ink); } }
.mdl-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/*
 * ══ معالج الانضمام ══
 *
 * فرقان بين خطوة وخطوة، وكلها من الحاوية لا من الشريط:
 *
 * ١ · علامة الصح كانت 11 بكسل داخل دائرة 28 — نقطة لا علامة. مقاسها الآن
 *     من الدائرة نفسها، وسماكتها تُرى.
 * ٢ · زرّ نهاية المعالج أخضر غامق: فعل واحد يُميَّز عن رمادي «رجوع».
 */
.stp .n svg.stp-ok {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
}

/* `.b1.green` كان أخضر أفتح من الزر الرئيسي: الزر الرئيسي لون واحد `--slate` في كل اللوحتين. */

/*
 * فتح المنسدلات — حركة خفيفة واحدة لثلاثتها.
 *
 * الظهور المفاجئ يقرأ كقفزة، والحركة الطويلة تؤخّر القراءة. إزاحة 6 بكسل
 * وتصغير طفيف من زاويتها العليا في 0.16 ثانية: تكفي العين لتتبع من أين
 * جاءت. ومن يطلب تقليل الحركة لا يراها.
 */
.umenu, .cmenu, .dd-menu, .pop.on {
    transform-origin: top center;
    animation: pop-in .16s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/*
 * البنود تتوالى بعد فتح المنسدلة.
 *
 * ظهورها كلها مع الصندوق يقرأ كصورة تُلصق. والتوالي بفارق 35 ملّي يجعل
 * العين تمرّ عليها بالترتيب الذي ستقرأها به. الفارق يقف عند البند السادس
 * حتى لا يطول انتظار قائمة طويلة.
 */
.umenu > *, .cmenu > *, .dd-menu > *, .pop.on > *, .pop.on .it {
    animation: item-in .2s cubic-bezier(.2, .7, .3, 1) both;
}

.umenu > :nth-child(1), .cmenu > :nth-child(1), .dd-menu > :nth-child(1),
.pop.on > :nth-child(1), .pop.on .it:nth-child(1) { animation-delay: .05s; }

.umenu > :nth-child(2), .cmenu > :nth-child(2), .dd-menu > :nth-child(2),
.pop.on > :nth-child(2), .pop.on .it:nth-child(2) { animation-delay: .09s; }

.umenu > :nth-child(3), .cmenu > :nth-child(3), .dd-menu > :nth-child(3),
.pop.on > :nth-child(3), .pop.on .it:nth-child(3) { animation-delay: .13s; }

.umenu > :nth-child(4), .dd-menu > :nth-child(4),
.pop.on > :nth-child(4), .pop.on .it:nth-child(4) { animation-delay: .17s; }

.umenu > :nth-child(n+5), .dd-menu > :nth-child(n+5),
.pop.on > :nth-child(n+5), .pop.on .it:nth-child(n+5) { animation-delay: .21s; }

@keyframes item-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .umenu, .cmenu, .dd-menu, .pop.on,
    .umenu > *, .cmenu > *, .dd-menu > *, .pop.on > *, .pop.on .it { animation: none; }
}

/*
 * الشريط العلوي أعلى قليلًا.
 *
 * 56 بكسل كانت تضغط الجرس والعدّاد والحبّة على خطّ واحد بلا هواء حولها.
 * 64 تعطيها فراغها، والشاشات التي تحسب طولها من طول النافذة تطرح العدد
 * نفسه فلا يظهر شريط تمرير.
 */
/*
 * دخول الشاشة **بلا `transform`** — وهذا إصلاح بنيوي لا تجميل.
 *
 * `@keyframes in` في `app.css` تحرّك `translateY`، و**أي عنصر عليه تحويل
 * يصير الحاوية المرجعية لكل `position: fixed` داخله**. فكل نافذة في اللوحة
 * كانت تُقاس على طول الصفحة لا على طول النافذة: تنزل تحت حافّة الشاشة
 * ويُقصّ زرّها، ويبقى تحتها فراغ بطول الصفحة. الحركة تبقى تلاشيًا وحدها.
 */
.scr.on { animation-name: scr-fade; }
/* شاشة تُفتح على نافذة مفتوحة (اشتراك · شحن من رابط) بلا تلاشٍ: الشفافية أثناءه تحبس النافذة في طبقة الشاشة
   تحت الشريط العلوي، فيظهر الشريط فوقها حتى ينتهي التلاشي. النافذة تظهر مباشرة فوق كل شيء */
.scr.on:has(.mask.on) { animation: none; }
/* وأبناء الشاشة يصعدون قليلاً مع التلاشي في كل صفحة: الحركة على الأبناء لا على الشاشة فتبقى النوافذ مقيسة على الشاشة،
   والتحويل يزول بانتهاء الحركة (backwards لا both)، والنوافذ نفسها مستثناة كما في `.rise` */
.scr.on > :not(.mask) { animation: step-in .45s cubic-bezier(.2, .7, .3, 1) backwards; }

@keyframes scr-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

:root { --top-h: 64px; }
.top { height: var(--top-h); flex: 0 0 var(--top-h); }
.hero { min-height: calc(100dvh - var(--top-h)); }
/* الجوال: الشعار والترحيب أعلى، فتبقى الخانة ولوحة المفاتيح في متناول النظر */
@media (max-width: 560px) { .hero { padding-top: clamp(24px, 5vh, 48px); } }

/* ══════ بداية: تصميم بطاقات الباقات ══════
   كتلة واحدة قائمة بذاتها — تُحذف كما هي فترجع البطاقات إلى شكلها السابق.
   المرجع شكل صفحة أسعار ريبلت: بطاقات متساوية، رأس هادئ، قائمة مزايا
   بمسافات مريحة، وزرّ واحد في قاع كل بطاقة على خطّ واحد. المحتوى كما هو. */
#s-billing .plans {
    gap: 18px;
    margin-top: 26px;
    align-items: stretch;
}

#s-billing .plan {
    padding: 26px 24px 24px;
    border-radius: 20px;
    border: 1px solid var(--line);
    box-shadow: none;
    background: var(--paper);
}

/* بلا تمييز لونيّ: البطاقات الثلاث بحدّ واحد وخلفية واحدة */
#s-billing .plan.one {
    border-color: var(--line);
    background: var(--paper);
    box-shadow: none;
}
/* الباقة المدفوعة بإطار النعناعي: القاعدة فوقها تمحو `.plan.on` العامة */
#s-billing .plan.on {
    border-color: var(--mint);
    box-shadow: 0 0 0 3px var(--mint-soft);
}

#s-billing .plan .pn {
    font-size: 21.5px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.3;
}

#s-billing .plan .pp {
    margin: 6px 0 0;
    align-items: baseline;
    gap: 7px;
}
#s-billing .plan .pp b { font-size: 27px; letter-spacing: -.03em; }
#s-billing .plan .pp small { font-size: 13px; }

/* رسوم التأسيس وسمًا لا سطرًا: سطر رمادي تحت السعر يُقرأ شرطًا خفيًّا */
#s-billing .plan .psetup {
    display: inline-block;
    margin: 14px 0 0;
    padding: 8px 13px 10px;
    border-radius: 14px;
    background: var(--canvas);
    border: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--ink-2);
}

#s-billing .plan .pfirst {
    margin: 12px 0 0;
    padding: 11px 13px;
    border-radius: 14px;
    background: var(--canvas);
    border: 1px solid var(--line-2);
    font-size: 12.5px;
}

#s-billing .plan .pgrp { margin-top: 18px; }
#s-billing .plan .pgrp:first-child { margin-top: 0; }

#s-billing .plan ul { gap: 10px; }
#s-billing .plan li {
    font-size: 13px;
    line-height: 1.7;
    gap: 10px;
    color: var(--ink-2);
}
#s-billing .plan li svg.okic {
    width: 16px; height: 16px; flex: 0 0 16px;
    margin-top: 4px;
    stroke: var(--mint-d);
    stroke-width: 2;
}

/* الأزرار على خطّ واحد في البطاقات الثلاث */
#s-billing .plan .pbtn {
    height: 46px;
    border-radius: var(--r-btn);
    font-size: 13.5px;
    font-weight: 600;
}
#s-billing .plan .pbtn { margin-top: auto; }

@media (max-width: 980px) {
    #s-billing .plans { grid-template-columns: 1fr; }
}
/* ══════ نهاية: تصميم بطاقات الباقات ══════ */

/*
 * ══════ بداية: لون اللوحة على لون بطاقة الموقع التعريفي ══════
 *
 * الشريط الجانبي والبطاقة كانا `--slate-d` (‏#1C3941) وبطاقة الموقع
 * `--slate` (‏#284D57). وحّدناهما على لون البطاقة. المتغيّر نفسه لا يُمسّ
 * لأن `--slate-d` هو حال المرور على الأزرار: تغييره يكسر المرور كلّه.
 */
/*
 * الشريط الجانبي خلفية لا محتوى، فيتراجع خطوة عن اللوحة. وحين ساويناه
 * بلون البطاقة فقدت البطاقة كونها جسمًا مرفوعًا على الصفحة.
 * `--slate` للأجسام (الأزرار والبطاقة) و`--slate-d` للهيكل.
 */

/*
 * ستارة درج الجوال — قيم `.mask` نفسها في app.css سطرًا بسطر.
 * لا تظهر إلا على مقاس الجوال وحين يكون الدرج مفتوحًا.
 */
.sb-scrim { display: none; }
@media (max-width: 860px) {
    body.sb-open .sb-scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--mask);
        backdrop-filter: blur(3px);
        /* دون الدرج وفوق كل ما عداه */
        z-index: 90;
        animation: fade .25s;
    }
    /* الظلّ كان يقوم مقام الستارة، والستارة أولى به */
    body.sb-open .sb { box-shadow: calc(var(--flip) * -8px) 0 40px rgba(0, 0, 0, .18); z-index: 95; }
}
/* ══════ نهاية: لون اللوحة على لون بطاقة الموقع التعريفي ══════ */

/* ══════ بداية: اللوحة على الآيفون ══════
 *
 * قياسات هذي الكتلة كلها من متصفّح على 393×852 (آيفون 15/16) و375×667
 * (آيفون SE). تُحذف كما هي إن أُريد الرجوع.
 */

/*
 * ١ · إحساس التطبيق لا الصفحة.
 *
 * وميض أزرق عند كل لمسة، وتأخّر 300 مللي ينتظر نقرة ثانية، وارتداد
 * مطّاطي في طرفي الصفحة — ثلاثتها تقول للمستخدم «هذا موقع».
 */
* { -webkit-tap-highlight-color: transparent; }
button, a, label, summary, [role="button"], .sb-item, .pill, .tab {
    touch-action: manipulation;
}
html, body { overscroll-behavior: none; }

/*
 * ٢ · نصّ الهيكل لا يُحدَّد باللمس المطوّل.
 *
 * الضغط المطوّل على زرّ أو بند قائمة كان يفتح مقبض التحديد ويظلّل النص.
 * محتوى المحادثة والجداول يبقى قابلًا للنسخ — هو المحتوى.
 */
@media (max-width: 860px) {
    .sb, .top, .b1, .b2, .sb-item, .tab, .pill, .soon, .sb-lbl {
        -webkit-user-select: none;
        user-select: none;
    }
    .bub, .msg, .tbl, .emp-tx, input, textarea { -webkit-user-select: text; user-select: text; }
}

/*
 * ٣ · المناطق الآمنة في الآيفون.
 *
 * `viewport-fit=cover` مكتوب في القالب منذ البداية، لكن **لا أحد يستهلك
 * `env()`**: فالشريط العلوي يدخل تحت النَّتش، ومؤشّر الهوم يغطّي صندوق
 * الكتابة وزرّ الدفع في القاع.
 */
@media (max-width: 860px) {
    .top { padding-top: env(safe-area-inset-top); height: auto; min-height: 64px; }
    .compose-fixed { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    .stage { scroll-padding-bottom: env(safe-area-inset-bottom); }
    .sb-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
    .mask { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .wrap { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/*
 * ٤ · مساحة اللمس أربعون بكسلًا فأكثر.
 *
 * ثلاث نقاط المحادثة كانت **26×26** وزرّ إغلاق الدرج 34، ونافذة الدفع 30.
 * الإصبع لا يصيبها، فيفتح المستخدم المحادثة بدل قائمتها.
 */
@media (max-width: 860px) {
    .sb-more { width: 40px; height: 40px; }
    .sb-close { width: 40px; height: 40px; }
    .mdl-x, .pc .mdl-x { width: 40px; height: 40px; }
    .sb-item { min-height: 44px; }
    :root { --tap-min: 36px; }
    .tbl .bc { min-height: var(--tap-min); }
}

/*
 * ٥ · الاستفادة من العرض بدل عمود واحد ممدود.
 *
 * شبكة المؤشّرات بثلاث خانات تنزل عمودًا واحدًا تحت 560، فتطول الصفحة
 * بلا داعٍ. خانتان، والخانة الفردية الأخيرة تمتدّ على العرض كلّه بدل
 * أن يجاورها مربّع فارغ — وهو ما كان يحدث في «القنوات».
 */
@media (max-width: 560px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpis > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ══════ نهاية: اللوحة على الآيفون ══════ */

/* ══════ بداية: هيكل السوبر على الجوال ══════
 *
 * لوحة التشغيل تشارك التاجر أصنافه كلها، فأكثر صقل الجوال وصلها مصادفةً:
 * المناطق الآمنة و`user-select` و`.sb-item` بأربع وأربعين — قِيست ووصلت.
 * وما لم يصل ثلاثة، وهي هنا. القياسات من 393×852 و375×667.
 */

/*
 * ١ · البرغر والجرس دون الأربعين.
 *
 * البرغر **32×32** وهو مقبض الدرج الوحيد على الجوال، والجرس **38×38**.
 * وبقيّة الشريط أُصلحت في الكتلة السابقة فبقيا وحدهما.
 */
@media (max-width: 860px) {
    .burger { width: 40px; height: 40px; }
    .bell { width: 40px; height: 40px; }

    /* منسدلة الحساب في قاع الدرج: بنودها كانت على ارتفاع النص وحده */
    .umenu a, .umenu button { min-height: 44px; }
    .sb-user { min-height: 44px; }
}

/*
 * ٢ · زرّ الطيّ على الشاشات اللمسية الواسعة.
 *
 * مخفيّ تحت 900، لكن اللوح فوقها إصبع لا فأرة، و**30×30** لا تُصاب.
 */
@media (pointer: coarse) {
    .sb-toggle { width: 40px; height: 40px; }
}

/* ══════ نهاية: هيكل السوبر على الجوال ══════ */

/* حالة «غير مفعَّل» داخل بطاقة الدفع — تقول ولا تُوهم بزرّ قادم */

/* ══════ بداية: مكوّنات الجداول والشارت ══════
 * DataTable · StatTile · Chart — ثلاثة مكوّنات تُبنى مرة وتُستهلك في كل
 * شاشات السوبر. لا صنف هنا خاصّ بشاشة، وكل قيمة من رموز `app.css`.
 * ══════════════════════════════════════════════════════════════════ */

.dt-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

/* ── ترويسة الجدول ── */
.dt-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    /* الفجوة تحتها في القسم ١٢ — `--dt-gap` مصدرًا واحدًا */
}
.dt-title { font-size: 14.5px; font-weight: 600; color: var(--ink); margin: 0; }
.dt-count { color: var(--faint); font-weight: 500; margin-inline-start: 5px; }
.dt-tools { display: flex; align-items: center; flex-wrap: wrap; }

.dt-mb { display: inline-flex; align-items: center; gap: 7px; min-height: var(--ctl-h); }
.dt-badge {
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--slate); color: var(--on-slate); font-size: 11px; line-height: 20px; text-align: center;
}
.dt-caret { width: 14px; height: 14px; flex: none; transition: transform .16s; }
.dt-caret.up { transform: rotate(180deg); }
.dt-caret.on { color: var(--slate); }

/* ── الجسم ── */
.dt-wrap { position: relative; overscroll-behavior-x: contain; }
.dt-wrap.busy { opacity: .5; pointer-events: none; }
.dt-tbl tbody tr.on { background: var(--mint-soft); }
.dt-tbl tbody tr.busy { opacity: .55; }
.dt-end { text-align: end; }
.dt-none { color: var(--faint); font-size: 12.5px; text-align: center; padding: 18px 12px; }
.dt-empty { margin-top: 4px; }

.dt-sort {
    display: inline-flex; align-items: center; gap: 5px; border: 0; background: none;
    font: inherit; color: inherit; cursor: pointer;
}
@media (hover: hover) {
.dt-sort:hover { color: var(--ink); } }

/* ── مربّعات التحديد ── */
.dt-pick { width: 44px; }
.dt-box {
    display: inline-flex; align-items: center;
    width: 40px; height: 40px; margin: -8px; cursor: pointer;
}
.dt-box input {
    appearance: none; -webkit-appearance: none; margin: 0;
    width: 18px; height: 18px; border: 1.5px solid var(--line); border-radius: 5px;
    background: var(--control); cursor: pointer; position: relative; transition: background .14s, border-color .14s;
}
@media (hover: hover) {
.dt-box input:hover { border-color: var(--slate-l); } }
.dt-box input:checked, .dt-box input:indeterminate { background: var(--slate); border-color: var(--slate); }
.dt-box input:checked::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 5px; height: 9px; border: solid var(--on-slate); border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
}
.dt-box input:indeterminate::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 9px; height: 2px; background: var(--on-slate); border-radius: 1px;
    transform: translate(-50%, -50%);
}
.dt-box input:focus-visible { outline: 2px solid var(--mint-d); outline-offset: 2px; }

/* ── زرّ النقاط وقائمة الصف ── */
.dt-dots {
    display: inline-flex; align-items: center; justify-content: center; height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); border: 1px solid var(--line); border-radius: var(--ctl-r-sm);
    background: var(--canvas); color: var(--muted); cursor: pointer; transition: background .14s, color .14s, border-color .14s;
}
@media (hover: hover) {
.dt-dots:hover { background: var(--paper); border-color: var(--slate-l); color: var(--ink); } }
.dt-dots svg { width: 17px; height: 17px; fill: currentColor; transform: rotate(90deg); }

.dt-tbl .dt-nw { white-space: nowrap; }
/* جدول كثير الأعمدة بلا تمرير أفقي: يملأ حاويته بعروض أعمدته المعلنة، والنص الأطول من عموده يُقصّ بثلاث نقاط */
@media (min-width: 861px) {
    .dt-tbl.dt-fixed { table-layout: fixed; width: 100%; }
    .dt-tbl.dt-fixed td { overflow: hidden; text-overflow: ellipsis; }
    .dt-tbl.dt-fixed th.act { width: 92px; }
}

.dt-menu { z-index: 90; min-width: 190px; padding: 5px; max-height: min(60vh, 340px); overflow-y: auto; }

.dt-menu button { min-height: 40px; font-size: 13.5px; color: var(--ink-2); }
.dt-menu button.danger,
.dt-menu button.danger .dt-mi svg { color: var(--t-red); opacity: 1; }
.dt-menu .dt-sep { margin: 4px 6px; border: 0; border-top: 1px solid var(--line-2); }
.dt-menu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }

.dt-sw { min-width: 42px; }
.dt-sw i { display: none; }
.dt-sw:disabled { opacity: .5; cursor: default; }

.dt-spin {
    display: inline-block; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--slate); animation: dt-turn .7s linear infinite;
}
@keyframes dt-turn { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
    .dt-head { align-items: stretch; flex-direction: column; }
}

/* ══════ StatTile ══════ */
.stt {
    display: flex; align-items: flex-start; gap: 12px; text-decoration: none;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m);
    padding: 16px 16px 15px; color: var(--ink);
    min-height: 92px; transition: border-color .16s, transform .16s;
}
@media (hover: hover) {
.stt.link:hover { transform: translateY(-1px); } }
.st-ic {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: 11px; background: var(--mint-soft); color: var(--slate);
}
.st-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.st-ic.mint { background: var(--mint-soft); color: var(--ok); }
.st-ic.slate { background: var(--soft); color: var(--slate); }
.st-ic.warn { background: var(--warn-soft); color: #A9702A; }
.st-ic.danger { background: var(--bad-soft); color: var(--bad-ink); }
.st-ic.muted { background: var(--canvas); color: var(--muted); }

.st-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.st-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.st-value { font-size: 23.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.st-label { font-size: 12.5px; color: var(--muted); }
.st-note { font-size: 11.5px; color: var(--faint); margin-top: 2px; }

.st-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600; }
.st-delta svg { width: 12px; height: 12px; stroke-width: 2; }
.st-delta.up { color: var(--ok); }
.st-delta.down { color: var(--bad-ink); }
.st-delta.flat { color: var(--faint); }

.st-sk { display: block; border-radius: 7px; background: var(--line-2); animation: st-pulse 1.3s ease-in-out infinite; }
.st-sk.big { width: 96px; height: 24px; margin-bottom: 8px; }
.st-sk.small { width: 64px; height: 11px; }
@keyframes st-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ══════ Chart ══════ */
.cht {
    --ch-1: var(--slate);
    --ch-2: var(--mint-d);
    --ch-3: var(--warn);
    --ch-4: var(--slate-l);
    --ch-5: var(--mint);
    --ch-6: #9FB0AA;
    position: relative; width: 100%; contain: layout;
}
/* الحاوية تحجز الارتفاع والـSVG مطلق داخلها: لو ساهم بعرضه الذاتي في حساب
 * `min-content` لصار هو من يفرض عرض العمود بدل أن يتبعه، فيطلع خارج البطاقة. */
.ch-plot { position: relative; width: 100%; min-width: 0; }
.ch-svg { position: absolute; inset-block-start: 0; inset-inline: 0; display: block; overflow: visible; touch-action: pan-y; }
.ch-grid { stroke: var(--line-2); stroke-width: 1; }
.ch-grid.dash { stroke: var(--line); stroke-dasharray: 4 5; }
.ch-axis { fill: var(--faint); font-size: 11px; }
.ch-cursor { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }

.ch-set.ch-1 { color: var(--ch-1); }
.ch-set.ch-2 { color: var(--ch-2); }
.ch-set.ch-3 { color: var(--ch-3); }
.ch-set.ch-4 { color: var(--ch-4); }
.ch-set.ch-5 { color: var(--ch-5); }
.ch-set.ch-6 { color: var(--ch-6); }

.ch-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot-p { fill: var(--paper); stroke: currentColor; stroke-width: 2; opacity: 0; transition: opacity .14s; }
.ch-dot-p.on { opacity: 1; }
.ch-bar { fill: currentColor; opacity: .82; transition: opacity .14s; }
.ch-bar.on { opacity: 1; }

.ch-slice.ch-1 { fill: var(--ch-1); }
.ch-slice.ch-2 { fill: var(--ch-2); }
.ch-slice.ch-3 { fill: var(--ch-3); }
.ch-slice.ch-4 { fill: var(--ch-4); }
.ch-slice.ch-5 { fill: var(--ch-5); }
.ch-slice.ch-6 { fill: var(--ch-6); }
.ch-slice { transition: opacity .14s; cursor: default; }
.ch-slice.dim { opacity: .38; }
.ch-mid-v { fill: var(--ink); font-size: 17px; font-weight: 600; }
.ch-mid-l { fill: var(--faint); font-size: 11px; }

.ch-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.ch-legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-height: 26px; }
.ch-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
/* ألوان بمعنى: رضي أخضر · لم يرضَ أحمر هادئ — لا لونان من اللوحة بلا دلالة. */
.ch-set.ch-ok { color: #4CC38A; }
.ch-set.ch-bad { color: #E0735F; }
.ch-dot.ch-ok { background: #4CC38A; }
.ch-dot.ch-bad { background: #E0735F; }
.ch-key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 0; font-size: 12px; color: var(--muted); }
.ch-key li { display: inline-flex; align-items: center; gap: 7px; }
.ch-dot.ch-1 { background: var(--ch-1); }
.ch-dot.ch-2 { background: var(--ch-2); }
.ch-dot.ch-3 { background: var(--ch-3); }
.ch-dot.ch-4 { background: var(--ch-4); }
.ch-dot.ch-5 { background: var(--ch-5); }
.ch-dot.ch-6 { background: var(--ch-6); }
.ch-leg-l { color: var(--ink-2); flex: 1; min-width: 0; }
.ch-leg-v { color: var(--ink); font-weight: 600; direction: ltr; }
.ch-leg-p { color: var(--faint); direction: ltr; min-width: 34px; text-align: end; }

/* الموضع هندسة فيزيائية آتية من إحداثيات SVG، فيُمرَّر بمتغيّر لا بخاصية في المكوّن. */
.ch-tip {
    position: absolute; left: var(--tx); top: var(--ty);
    transform: translate(-50%, calc(-100% - 10px));
    background: var(--slate-d); color: var(--on-slate); border-radius: 9px;
    padding: 7px 10px; font-size: 11.5px; line-height: 1.5;
    pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-lg);
    display: grid; gap: 1px;
}
.ch-tip b { font-weight: 600; }
.ch-tip-r { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.ch-tip-r em { font-style: normal; opacity: .75; }
.ch-tip .num { direction: ltr; font-weight: 600; }

.ch-none { position: relative; display: flex; align-items: center; justify-content: center; }
.ch-none svg { position: absolute; inset: 0; }
.ch-none-tx { position: relative; color: var(--faint); font-size: 12.5px; }

/* ══════ نهاية: مكوّنات الجداول والشارت ══════ */

/* ═══ شاشات الأدوار والصلاحيات — سالم ═══════════════════════════════
   محرّر الصلاحيات صناديق بمجموعاتها، وبطاقات الإعدادات تحت عناوين.
   لا لون جديد ولا مقاس جديد: كلّه من رموز التصميم القائمة. */

/*
 * بطاقات الإعدادات — صفّ واحد لكل باب: أيقونة واسم ووصف وسهم.
 * الشكل نفسه في كل مكان، فالعين تمسح اثني عشر باباً بلا قراءة.
 */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px }

.set-card {
    display: flex; align-items: center; gap: 13px; width: 100%; text-align: start;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
    padding: 16px 17px; cursor: pointer; transition: .18s;
    /* البطاقات التي تفتح صفحة هي روابط: بلا هذا ترث لون الرابط وخطّه. */
    color: var(--ink); text-decoration: none;
}
@media (hover: hover) {
.set-card:hover { border-color: var(--mint-line); transform: translateY(-1px) } }

.set-ic {
    flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
    background: var(--canvas); border: 1px solid var(--line);
}
.set-ic svg { width: 20px; height: 20px; stroke: var(--muted); color: var(--muted); fill: none; stroke-width: 1.7 }

.set-tx { flex: 1; min-width: 0 }
.set-tx b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink) }
.set-tx i { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.6 }

.set-go { flex: none; width: 16px; height: 16px; color: var(--faint) }

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

.set-sec { margin-top: 22px }
.set-h {
    font-size: 12px; font-weight: 600; color: var(--muted);
    margin: 0 0 2px; padding: 0 2px; letter-spacing: .2px;
}
.set-sec .set-grid { margin-top: 10px }

/* ── بطاقة الإعداد تتنفّس ──
 * الاسم وسطر وصفه كانا يقفان على 81px: الحشو الرأسي بقدر أيقونته فقط.
 * يُرفع هنا لا في الشاشة، فالمقاس واحد أينما استُعملت البطاقة. والصفّ
 * يبقى متساويًا لأن `min-height` أرضيّة والشبكة تمدّ الأطول على إخوته. */
.set-grid > .set-card.set-card {
    min-height: 95px /* أعلى 5 بكسل */;
    padding-block: 19px;
}
.set-grid > .set-card.set-card .set-tx i { margin-top: 4px; }

.rl-add { display: inline-flex; align-items: center; gap: 7px; text-decoration: none }

.rl-view { display: grid; gap: 12px; margin-top: 14px; text-align: start }
.rl-vgrp { border: 1px solid var(--line); border-radius: var(--r-m, 12px); padding: 11px 12px }
.rl-vgrp b { display: block; font-size: 12px; font-weight: 600; margin-bottom: 7px }
.rl-vgrp .tag { margin: 0 0 5px 5px }

.rl-active { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; cursor: pointer }
.rl-active > .dt-box { flex: none; width: 18px; height: 18px; margin: 0 }

.rl-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-top: 20px; outline: none;
}
.rl-count { font-size: 13px; font-weight: 600; color: var(--ink) }
.rl-bar-act { display: inline-flex; gap: 8px }
.rl-err { display: block; margin-top: 8px }

.rl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px }

.rl-box {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-l);
    padding: 13px 14px;}
.rl-box-h {
    display: flex; align-items: center; gap: 9px;
    padding-bottom: 9px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.rl-box-h b { flex: 1; font-size: 13px; font-weight: 600 }
.rl-box-h i { font-style: normal; font-size: 11px; color: var(--faint) }

.rl-item {
    display: flex; align-items: center; gap: 9px; padding: 6px 2px;
    font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.rl-item.off { cursor: default; color: var(--muted) }
@media (hover: hover) {
.rl-item:hover:not(.off) { color: var(--ink) } }

.rl-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px }

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

/* صفّ عرض في المعرض: مربّعات ورسوم جنبًا إلى جنب بلا شبكة خاصة بكل شاشة. */
.ui-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 12px }

/* ─── سالم · رئيسية السوبر وجداول المال ─────────────────────────────
   لا صنف هنا يعيد تعريف شيء من مكتبة المكوّنات — كلها أغلفة تخطيط لشاشاتي. */

.sv-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.sv-charts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.sv-charts > .panel:last-child { grid-column: 1 / -1 }

.sv-ch-h {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 10px;
}

.sv-h { font-size: 14.5px; font-weight: 600 }

/* حقل البحث في ترويسة الجدول — يُرسل للخادم، فلا يُقصّ في المتصفّح. */
.sv-find { position: relative; display: inline-flex; align-items: center }
.sv-find svg { position: absolute; inset-inline-start: 10px; width: 16px; height: 16px; opacity: .55; pointer-events: none }
.sv-find .inp { height: 38px; min-width: 260px; padding-inline-start: 32px }

.sv-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    align-items: end;
}
.sv-clear { align-self: end; height: 38px }

/* الإيصال بحجم يُقرأ منه المبلغ لا صورة مصغّرة تُخمَّن. */

.sv-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; cursor: pointer }
.sv-check > .dt-box { flex: none; width: 18px; height: 18px; margin: 2px 0 0 }
.sv-check b { display: block; font-size: 13px; font-weight: 600; color: var(--ink) }
.sv-check i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 3px }

.sv-req { color: var(--bad-ink) }

@media (max-width: 900px) {
    .sv-charts { grid-template-columns: 1fr }
    .sv-find .inp { min-width: 0; width: 100% }
}

/* ═══ توحيد السوبر على لوحة التاجر ═══════════════════════════
   المرجع الملزم: جدول «سجل الاشتراكات» عند التاجر وزرّ الفاتورة فيه.
   لا لون جديد ولا مقاس جديد — كلّه من رموز اللوحة القائمة. */

/* ── 1) البطاقة الرابط: حدّها يتلوّن عند المرور، بلا ظل ── */
@media (hover: hover) {
.stt.link:hover { border-color: var(--mint-line); } }

/* ── 2) لا خطّ تحت أي اسم في أي جدول ── */
.tbl a,
.dt-tbl a,
.tb-lnk {
    color: var(--ink);
    text-decoration: none;
}
@media (hover: hover) {
.tbl a:hover,
.dt-tbl a:hover,
.tb-lnk:hover { color: var(--slate); } }

/* ── 3) زرّ الإجراء الموحّد: شكل زرّ الفاتورة، بحواف أقلّ ── */
.tbl .bc,
.dt-tbl .bc {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px; padding: 0 11px; border-radius: 8px;
    font-size: 12px; font-weight: 500;
    border: 1px solid var(--line); background: var(--control); color: var(--ink-2);
    text-decoration: none; white-space: nowrap;
}
@media (hover: hover) {
.tbl .bc:hover,
.dt-tbl .bc:hover { border-color: var(--slate); background: var(--canvas); color: var(--ink); } }
.tbl .bc svg,
.dt-tbl .bc svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }

/* ── 4) وسم الباقة: حواف أقلّ، نصّ موسّط، ولون يفرّق المدفوعة ── */
.pill.plan,
.pill.role {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 92px; border-radius: var(--tag-r); padding: 0 11px 2px;
    font-weight: 600; text-align: center;
}
.pill.plan.free { border: 1px solid var(--line); }
.pill.plan.paid { background: var(--mint-soft); color: var(--mint-ink); border: 1px solid var(--mint-line); }
.pill.role { background: var(--canvas); color: var(--muted); border: 1px solid var(--line); }

/* ── 5) الفلترة صفّ تحت الترويسة: الحقول جنبًا إلى جنب لا عمودًا ── */
.dt-fb.on { border-color: var(--mint); color: var(--ink); }
.dt-fic { width: 15px; height: 15px; flex: none; }

.dt-filters {
    display: block;
    /* الهامش والحشوة في القسم ١٢ — لوحة بارتفاع محتواها */
    border: 1px solid var(--line);
    border-radius: var(--r-m, 12px);
}

/* صفّ الفلترة شبكة لا فليكس بأساس ثابت — تعريفه كاملًا في القسم ١٢ */

/* عدّاد الترقيم مطفأ افتراضيًّا، وحين يُطلب يقف أول الشريط بلا زحمة */
.tpg-of { margin-inline-end: auto; font-size: 12px; color: var(--muted); }

/* ── 6) منتقي التاريخ — مكوّن المكتبة، بلا مكتبة خارجية ── */
.dtp { position: relative; }

.dtp-in {
    display: flex; align-items: center; gap: 8px;
    width: 100%; height: 38px; text-align: start; cursor: pointer;
}
.dtp.on .dtp-in { border-color: var(--mint); }
.dtp-chev { width: 18px; height: 18px; flex: 0 0 18px; margin-inline-start: auto; color: var(--muted); }
.dtp-cal { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--muted); }
.dtp-v { color: var(--ink); }
.dtp-ph { color: var(--faint); font-size: 12px; }

.dtp-pop {
    position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 80;
    width: 262px; padding: 12px; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r-m, 12px);
    box-shadow: var(--shadow-lg);
}

.dtp-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dtp-h { border: 0; background: none; padding: 4px 8px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); }
@media (hover: hover) {
.dtp-h:hover { background: var(--canvas); } }
.dtp-arrow {
    width: 28px; height: 28px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; color: var(--ink-2);
}
@media (hover: hover) {
.dtp-arrow:hover { border-color: var(--slate); background: var(--canvas); } }
.dtp-arrow svg { width: 15px; height: 15px; }

.dtp-week,
.dtp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dtp-week { margin-top: 10px; }
.dtp-week span { text-align: center; font-size: 11px; color: var(--faint); padding-bottom: 4px; }

.dtp-d {
    height: 30px; border: 0; background: none; border-radius: 8px; cursor: pointer;
    font-size: 12px; color: var(--ink-2); direction: ltr;
}
@media (hover: hover) {
.dtp-d:hover:not(:disabled) { background: var(--canvas); color: var(--ink); } }
.dtp-d:disabled { color: var(--faint); opacity: .45; cursor: default; }
.dtp-d.now { background: var(--slate); color: var(--on-slate); }
@media (hover: hover) {
.dtp-d.now:hover:not(:disabled) { background: var(--slate); color: var(--on-slate); } }
.dtp-d.on { background: var(--slate-d); color: var(--on-slate); font-weight: 600; box-shadow: none; }
.dtp-gap { height: 30px; }

.dtp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dtp-lnk { border: 0; background: none; cursor: pointer; font-size: 11.5px; color: var(--slate); padding: 2px 4px; }
@media (hover: hover) {
.dtp-lnk:hover { color: var(--ink); } }

@media (max-width: 560px) {
    .sv-filters .fld { flex: 1 1 100%; }
    .dtp-pop { width: 100%; min-width: 248px; }
}

/*
 * ── التنبيه الموحّد ──
 *
 * سطر واحد يقول ما صار أو ما ينقص، بأربع نبرات لا أكثر. كان كل شاشة تكتب
 * تنبيهها بيدها فيصير في المنصة خمسة أشكال لنفس الجملة.
 */
.alrt {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 11px 13px; border-radius: 12px; margin: 0 0 12px;
    border: 1px solid var(--line); background: var(--canvas); color: var(--ink);
    font-size: 13px; line-height: 1.6;
}
.alrt svg { width: 17px; height: 17px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.alrt.ok { background: var(--mint-soft); border-color: var(--mint-line); color: var(--mint-ink); }
.alrt.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.alrt.bad { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad-ink); }

/* ─── لفّة السوبر: الظلّ والتبويبات وأزرار الإضافة ─────────────────── */

/*
 * **لا مربّع في النظام له ظلّ**.
 *
 * الظلّ يرفع الشيء عن الورقة، والمربّع الذي لا يُنقر ولا يطفو لا يُرفع.
 * ويبقى للطافي وحده: المنسدلة والنافذة والتنبيه — وهي فوق الصفحة فعلًا.
 */
.rl-box, .tab.on { box-shadow: none; }

/* تبويبات الشاشات: في المنتصف وبلا خطّ تحتها */
.tabs { justify-content: center; border-bottom: 0; }

/* الشريط الجانبي: تنفّس أعلى القائمة */
.sb-body { padding-block-start: 22px; }

/*
 * زرّ الإضافة **أخضر في اليسار**: فعل واحد موجب في رأس الجدول، ولونه
 * يفرّقه عن أزرار الحالة من حوله. ومقاسه مقاس `.b1` نفسه في لوحة التاجر.
 */
.b1.green { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.b1.green svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }

/* صفحة التاجر: عنوان المربّع وصفّ إجراءاته */
.mc-h { font-size: 14.5px; font-weight: 600; margin-bottom: 10px; }
/* أرقام التاجر أربعة بلا مربع فارغ: أربعة أعمدة على الكمبيوتر، واثنان على الجوال من قاعدة .kpis */
.mc-kh { margin: 18px 0 0; }
.mc-kh + .kpis { margin-top: 10px; }
@media (min-width: 861px) { .kpis.mc-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* كل اسم في بيانات المتجر تليه نقطتان: «النشاط: التجارة الإلكترونية» */
.mc-data .nm::after { content: ' :'; }
/* الجوال بترتيب ثابت من اليسار: «تم النسخ» ثم الأيقونة ثم الرقم، لا يقلبه اتجاه الكلمة العربية */
.mc-phone { display: inline-flex; align-items: center; gap: 6px; direction: ltr; }
/* الجوال: الرقم بوحدته يكفي، والشريط يضيّقه حتى ينكسر سطرين */
@media (max-width: 860px) { .mc-use .bar { display: none; } .mc-use .vl { white-space: nowrap; } }
/* شارة «تم التحقق» تلي البريد على نفس السطر، والأيقونة في وسطها. */
/* `.pill.mc-vfd` لا `.mc-vfd`: قاعدة `.tag, .pill` بعدها في الورقة وتفرض مقاس الوسم. */
.pill.mc-vfd { margin-inline-end: 8px; gap: 3px; display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 11px; height: 20px; min-height: 20px; padding: 0 7px; }

/*
 * الضعيف **يستوقف العين**.
 *
 * الترتيب وحده لا يكفي: التاجر ينزل القائمة ويضغط «اعتمد» بالعادة، فيمرّ
 * القيد الضعيف مع القوي. شريط على حافة البداية وأرضية فاتحة يكسران العادة.
 */

/* ── مرفقات الرسالة: شريط تقدّم لكل ملف ── */
.att-card { position: relative; overflow: hidden; }
.att-note { margin: 6px 18px 0; font-size: 11px; color: var(--bad-ink); }
/* السحب والإفلات: إطار يقول إن المكان يقبل الملف */
.comp.over { outline: 2px dashed var(--mint, #2FA37C); outline-offset: 2px; }

/*
 * بطاقة الدخول كالعميل في لوحة التاجر (`PanelShell`): عائمة في الزاوية اليسرى فوق الصفحة.
 * ولا تغطي شيئاً: الصفحة تترك تحتها مكانها، وصندوق الكتابة في المحادثة يرتفع فوقها.
 */
.imp-bar {
    position: fixed;
    inset-inline-end: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    min-height: 68px;
    padding: 12px 14px 12px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--paper);
    box-shadow: var(--shadow-lg);
}
.main:has(> .imp-bar) { --imp-room: 100px; }
.main:has(> .imp-bar) .scr.on:not(:has(.compose-fixed)) { padding-bottom: var(--imp-room); }
.main:has(> .imp-bar) .compose-fixed { padding-bottom: calc(var(--imp-room) + env(safe-area-inset-bottom)); }
.imp-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--line-2);
    border: 1px solid var(--line);
    color: var(--muted);
}
.imp-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.imp-txt { display: flex; flex-direction: column; min-width: 0; margin-inline-end: 10px; line-height: 1.45; }
.imp-txt small { font-size: 12.5px; color: var(--muted); }
.imp-txt b { overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }

/* حشوة ما خرج من نافذة الرسم: ارتفاع وحده، بلا محتوى ولا حدود */
.thr-pad { flex: 0 0 auto; pointer-events: none; }

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

:root {
    --ctl-h: 38px;          /* الزرّ الأساسي والثانوي والحقل */
    --ctl-r: 11px;
    --fld-h: 42px;          /* حقل النموذج والقائمة المنسدلة داخله */
    --ctl-h-sm: 34px;       /* الزرّ الصغير داخل جدول أو شريط ترقيم */       /* الزرّ بعرض النافذة في أسفلها، مثل «اربط وافق» و«ابدأ» */
    --ctl-r-sm: 10px;
    --ctl-h-icon: 30px;     /* زرّ الأيقونة وحدها، مثل حذف الإشعار */
    --row-h: 56px;          /* ارتفاع صفّ الجدول — واحد لا ستة */
    --head-h: 42px;         /* ارتفاع رأس الجدول — واحد لا اثنان */
    --tag-h: 28px;          /* الوسم: عائلة واحدة */
    --tag-r: 8px;           /* زوايا معتدلة لا كبسولة */
    --tag-fs: 12.5px;
    --mint-ink: #1E6B42;    /* اللون الأخضر الوحيد للنصّ */
    --t-blue: #4F7FE8; --t-purple: #6A5AE0; --t-orange: #F0A04B;   /* نبرات الوسم: مصدرها هنا لا في كل قاعدة */
    --t-teal: #4E9BB9; --t-gray: #6B7A89; --t-red: #C2412D;
    --t-g: var(--mint);
    --off-a: .45;           /* شفافية المعطّل — واحدة */
}

/* ── 1 · الوسم: عائلة واحدة وحدّه يتبع نصّه ──
 * كان الحدّ `--mint-line` أخضرَ مهما كان اللون، فالوسم الأحمر بحدّ أخضر.
 * الحدّ الآن مشتقّ من لون النصّ نفسه: كل نبرة بحدّها.
 * وليبل التاريخ `.nx` و«قريبًا» `.soon` من نفس العائلة بمقاس `/ui`. */
.tag,
.pill,
.nx,
.soon {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: var(--tag-h); min-height: var(--tag-h);
    padding: 0 11px 2px;
    border-radius: var(--tag-r);
    font-size: var(--tag-fs); font-weight: 500; line-height: 1;
    white-space: nowrap;
    border: 1px solid;
    border-color: currentColor;
}
.pill.days,
.tbl .pill,
.dt-tbl .pill,
.tbl .pill.ok,
.tbl .pill.bad,
.tbl .pill.warn { height: var(--tag-h); font-size: var(--tag-fs); padding: 0 11px 2px; }

/* الأخضر لون واحد: `#2C8A57` كان يعيش في الشاشات بلا وجود في `/ui`. */
.pill.ok,
.st-ic.mint,
.st-delta.up { color: var(--mint-ink); }

/* ── 2 · رأس واحد لكل جدول ──
 * `.tbl` كان 41 و`.dt-tbl` 63 لأن زرّ الفرز يحمل ارتفاع لمس 40 داخل خليّة
 * لها حشوة. اللمس يبقى بالحشوة الأفقية، والارتفاع من الخليّة وحدها. */
.tbl th,
.dt-tbl th { height: var(--head-h); padding-block: 0; font-size: 11.5px; line-height: 1.25; }
.dt-sort { min-height: 0; padding: 0; }

/* ── 3 · مقاس صفّ واحد ──
 * ستة مقاسات (46 · 52 · 53 · 61 · 63 · 87) سببها محتوًى يلتفّ وأزرارٌ
 * أطول من نصّها. الارتفاع من الصفّ، والمحتوى الطويل يُقصّ بثلاث نقاط. */
.tbl td,
.dt-tbl td { height: var(--row-h); padding-block: 0; white-space: nowrap; }
.tbl td .tiny,
.dt-tbl td .tiny,
.tbl td .sub,
.dt-tbl td .sub {
    display: block; max-width: 320px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tbl .bc,
.dt-tbl .bc { min-height: var(--ctl-h-sm); }

/* ── 4 · ثلاثة أدوار للأزرار لا تسعة عشر توقيعًا ── */
.b1, .b2,
.mdl .b1, .mdl .b2, .mdl-act .b1, .mdl-act .b2,
.dt-mb, .dt-fb {
    height: var(--ctl-h); min-height: var(--ctl-h);
    border-radius: var(--ctl-r);
}
.tbl .bc, .dt-tbl .bc,
.tbl .b1, .tbl .b2, .dt-tbl .b1, .dt-tbl .b2,
.dt-dots, .tpg-b, .tpg-menu button {
    height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); min-width: var(--ctl-h-sm);
    border-radius: var(--ctl-r-sm); font-size: 12.5px;
}
.dt-dots { width: var(--ctl-h-sm); }

/* شريط الترقيم: **المعبّأ الوحيد هو رقم الصفحة الحالية** — لا فعل يزاحمه. */
.tpg-b:not(.on) { background: var(--control); }
.tpg-size.on .tpg-pick { background: var(--paper); color: var(--ink); }

/* شفافية معطّل واحدة — كانت .45 للترقيم و.6 و.5 لغيره. */
.tpg-b:disabled,
.dt-sw:disabled,
.dt-dots:disabled,
.tbl .bc:disabled,
.dt-tbl .bc:disabled,
.tbl .b2:disabled,
.dt-tbl .b2:disabled { opacity: var(--off-a); }

/* ── 5 · الحقول: مقاس واحد وسطر مستوٍ ──
 * حقل البحث كان 38 وحقل النموذج 46، والليبل الطويل يلتفّ فيرفع جاره.
 * كان `align-items: end` فالحقل الذي تحته تلميح أو خطأ يرفع ليبله فوق جاره.
 * الآن أعلى الخليّة هو المرجع، والليبل سطر واحد لا يلتفّ، فالليبلات على خطّ
 * والحقول على خطّ مهما اختلف ما تحتها. */
.inp,
.fld input, .fld select { height: var(--fld-h); border-radius: var(--ctl-r); }
textarea.inp, .fld textarea { height: auto; min-height: 84px; }
.grid2 { align-items: start; }
.fld > label, .fld > .lbl { min-height: 19px; }
.grid2 > .fld > label {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── المخطّط لا يتجاوز حاويته ──
 * `svg` بعرض 643 داخل 393: الرسم يُقاس من الحاوية، والقصّ يحرس الحدّ. */
.cht { min-width: 0; max-width: 100%; }
.cht svg { max-width: 100%; }

/* ── الصفحة لا تُزاح عن حافّتها ──
 * `.set-card` كان يبدأ عند −3 ويقف عند 375: شبكة بلا `min-width: 0`
 * تتمدّد بعرض أطول محتوًى فيها فتدفع نفسها خارج الحافّة. */
.set-grid, .grid2, .sv-charts { min-width: 0; }
.set-grid > *, .grid2 > * { min-width: 0; }

/* النصّ المخفيّ للقارئ الصوتي — مخفيّ فعلًا لا مقصوص */
.dt-hidden { border: 0; padding: 0; margin: -1px; }

/* ══ الجوال: الجدول يصير بطاقات ══
 * 720–1120 داخل حاوية 296: لا تمرير أفقي ولا أعمدة مخفيّة بصمت — كل صفّ
 * بطاقة، واسم العمود يقف مقابل قيمته. الجدول يبقى جدولًا دلاليًّا. */
/* عمود الإجراءات أقصى اليسار: هواء أبيض بينه وبين حافة الجدول — على الشاشات
 * العريضة وحدها، والبطاقات على الجوال لها حشوها. */
@media (min-width: 641px) {
    .dt-tbl th:last-child, .dt-tbl td:last-child { padding-inline-end: 28px; }
}
/* عمود الإجراءات خليّة جدول لا صندوق مرن — على العريض وحده: الزرّ يقف
   تحت عنوانه لا مقابله. وعلى الجوال يبقى مرنًا كبقيّة الصفوف فيتوسّط
   الليبل مع الزرّ ويقف الزرّ عند حافّة القيمة كبقيّة الأعمدة. */
@media (min-width: 641px) {
    .dt-tbl td.act { display: table-cell; }
}
@media (max-width: 640px) {
    .dt-wrap { overflow: visible; border: 0; }
    .dt-tbl { min-width: 0 !important; width: 100%; display: block; background: transparent; }
    .dt-tbl thead { display: none; }
    .dt-tbl tbody, .dt-tbl tr, .dt-tbl td { display: block; width: auto; }
    .dt-tbl tbody tr {
        background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-m);
        padding: 6px 12px; margin-bottom: 10px;
    }
    @media (hover: hover) {
    .dt-tbl tbody tr:hover { background: var(--paper); } }
    .dt-tbl td {
        height: auto; min-height: 40px; padding: 7px 0; white-space: normal;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        border-bottom: 1px solid var(--line-2); text-align: start;
    }
    .dt-tbl tr td:last-child { border-bottom: 0; }
    .dt-tbl td::before {
        content: attr(data-label); flex: none;
        font-size: 11.5px; font-weight: 600; color: var(--muted);
    }
    .dt-tbl td:empty { display: none; }
    .dt-tbl td.dt-end, .dt-tbl td.act { text-align: start; }
    .dt-tbl td .tiny, .dt-tbl td .sub { max-width: 190px; }
    .dt-tbl td.dt-pick { justify-content: flex-start; }
    .dt-tbl td.dt-pick::before { content: "تحديد"; }
    .tbl-wrap { overflow-x: visible; }

    /*
     * صفّ الإجراء بطاقة كبقيّة الصفوف لا خليّة جدول: `.tbl .act` القديمة
     * — لعرض السوبر العريض — أعلى تخصيصًا من مرونة الصفّ هنا فتبقى الخليّة
     * جدولية والزرّ يتيه عن الليبل بلا محاذاة. المحدِّد أعلى تخصيصًا منها
     * فيعيد الصفّ مرنًا: الليبل يمين والزرّ عند حافّة القيمة كبقيّة الأعمدة.
     */
    .dt-wrap .dt-tbl td.act {
        display: flex;
        justify-content: space-between;
    }
}

/* ── ذيل التوحيد: التوقيعات الشاردة تُردّ إلى العائلة ──
 * هذه أصناف كانت تخترع مقاسها قبل أن يوجد الرمز. تُردّ هنا لا في ملف
 * الشاشة، فيبقى المصدر واحدًا. */
.card .mc-top .tag,
.card-act .tag,
.pill.v,
.pill.days,
.pill.plan {
    height: var(--tag-h); min-height: var(--tag-h);
    border-radius: var(--tag-r);
    font-size: var(--tag-fs);
    padding: 0 11px 2px;
}

.b1.btn-link.btn-link,
.mdl.cfm .cfm-act .b1,
.mdl.cfm .cfm-act .b2 {
    height: var(--ctl-h); min-height: var(--ctl-h);
    border-radius: var(--ctl-r);
    font-size: 13px;
}

.okb,
.card-act.card-act .okb,
.card-act.card-act .bc,
.card .card-act.card-act .b2 {
    height: var(--ctl-h-sm); min-height: var(--ctl-h-sm);
    border-radius: var(--ctl-r-sm);
}

/* ═══ الأساس المشترك ═══════════════════════════
   كل قاعدة هنا تُصلح **أصلًا** يسري على كل شاشة، لا شاشة بعينها.
   من احتاج استثناءً لشاشته يطلبه، ولا يكتب قاعدة موازية عندها.   */

:root {
    /* رأس الجدول: يتميّز عن أرضية الصفحة وعن بياض البطاقة، بلا أن يصير شريطًا ثقيلًا. */
    --head-bg: #EFF2F0;
    /* الحقل داخل لوحة بيضاء: لا يُميَّز إن كان أبيض مثلها. */
    --field-soft: #EEF1EF;
    /* كل نصّ يُضغط: لون واحد يقول «هذا رابط» بلا خطّ تحته. */
    --link: #1D62D6;
    --link-d: #164BA6;
}

/* ── 1) عرض المحتوى: **السوبر وحده** يتمدّد إلى حدود الشاشة ──
 * لوحة التاجر خارج هذا عمدًا: لا تُعمَّم عليها. */
.scr.wide.sup .wrap { max-width: 100%; padding-inline: 28px; }

@media (max-width: 700px) {
    .scr.wide.sup .wrap { padding-inline: 16px; }
}

/* ── 2) رأس الجدول: صفّ يُرى، ومحتوى موسَّط تحت عنوانه ── */
.tbl thead th,
.tbl-flat thead th,
.dt-tbl thead th {
    background: var(--head-bg);
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}

.tbl th, .tbl td { text-align: center; }
.tbl th.dt-end, .tbl td.dt-end { text-align: end; }
.tbl th.act, .tbl td.act,
.dt-tbl th.act, .dt-tbl td.act { text-align: center; }

.tbl .act { justify-content: center; }
.dt-sort { width: 100%; justify-content: center; }
/* فراغ بعرض السهم قبل العنوان: بدونه يزيح السهم العنوان نصف عرضه عن وسط العمود فلا يقع فوق قيمه. */
.dt-sort::before { content: ""; width: 14px; flex: none; }
.dt-pick, .dt-tbl th.dt-pick { text-align: center; }
.dt-box { justify-content: center; }

/* سهم الفرز باهت حتى يُستعمل: يقول «هذا العمود يُفرز» بلا أن يزاحم العنوان. */
.dt-sort .dt-caret { opacity: .4; }
.dt-sort:hover .dt-caret,
.dt-sort .dt-caret.on { opacity: 1; }

/* ── 3) الترقيم داخل خلفية الجدول — بشريط سجلّ الاشتراكات نفسه ── */
.tbl-wrap:has(+ .tpg) {
    border-bottom: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.tbl-wrap + .tpg {
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-top: 0;
    border-end-start-radius: var(--r-m);
    border-end-end-radius: var(--r-m);
    padding: 12px 14px;
}

/* داخل لوحة بلا حدود يبقى الشريط بلا حدود: اللوحة هي الإطار. */
.panel > .tbl-wrap:first-child + .tpg { border: 0; border-radius: 0; }

/* ── 4) الفلترة: لوحة بيضاء وحقول فضّية تُميَّز عنها ── */
.dt-filters { background: var(--paper); border-color: var(--line); }

.dt-filters .inp,
.dt-filters input,
.dt-filters select,
.dt-filters textarea,
.dt-filters .dd-btn,
.dt-filters .dtp-in { background: var(--field-soft); }

/* القوائم داخل لوحة الفلترة بلون زرّ «امسح الفلترة» بجوارها: أبيض بحدّ الخطّ. */
.dt-filters select,
.dt-filters .dd-btn,
.sv-filters select,
.sv-filters .dd-btn { background: var(--control); border-color: var(--line); }

.dt-filters .inp:focus,
.dt-filters input:focus,
.dt-filters select:focus,
.dt-filters textarea:focus { background: var(--control); }

/* ── 5) لودر داخل الجدول عند كل فلترة أو انتقال صفحة ──
 * الصفوف تبهت ودوّارة فوقها: المقاس لا يتغيّر فلا يقفز ما تحته. */
.dt-wrap.busy, .tkl.busy, .ops-card.busy { position: relative; opacity: 1; pointer-events: none; }
.dt-wrap.busy > *, .tkl.busy > *, .ops-card.busy > * { opacity: .3; }

/*
 * الموضع رأسيًّا يُحسب في جافاسكربت — يتوسّط منطقة الصفوف تحت الرأس، وفي
 * جدول أطول من الشاشة يتوسّط جزأه الظاهر وحده، ويصله عبر `--dt-spin-top`
 * على الغلاف نفسه. أفقيًّا يكفي `50%` بخاصية منطقية فيبقى في المنتصف
 * مهما اتجهت الصفحة. والدوّارة `::after` لا عنصرًا مستقلًّا — لا تُقصّ
 * ولا تزيح ترقيم الوصول لعناصر الصفوف.
 */
.dt-wrap.busy::after,
.tkl.busy::after,
.ops-card.busy::after {
    content: '';
    position: absolute; inset-inline-start: 50%; top: var(--dt-spin-top, 50%);
    width: 22px; height: 22px; margin-inline-start: -11px; margin-block-start: -11px;
    border: 2.5px solid var(--line-2); border-top-color: var(--slate);
    border-radius: 50%; animation: dt-turn .7s linear infinite;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .dt-wrap.busy::after, .tkl.busy::after, .ops-card.busy::after { animation-duration: 1.6s; }
}

/* ── 6) الحقل الرقمي بلا سهمَي زيادة ونقصان ──
 * السهمان يبتلعان الحافّة في RTL، ونقرة واحدة بالخطأ تغيّر مبلغًا. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* ── 7) كل نصّ قابل للضغط أزرق — لا اسم التاجر وحده ── */
.tbl a,
.dt-tbl a,
.tb-lnk,
.dtp-lnk,
.lnk,
.panel a:not([class]),
.wz a:not([class]) { color: var(--link); }

@media (hover: hover) {

.tbl a:hover,
.dt-tbl a:hover,
.tb-lnk:hover,
.lnk:hover { color: var(--link-d); } }

/* ── 8) تلميح المخطّط فوق كل شيء ──
 * كان داخل حاوية `overflow: hidden` بـ`z-index: 5`، فيُقصّ ويختفي خلف جاره. */
.cht { overflow: visible; }
.ch-tip { z-index: 60; }

/* ── 9) رئيسية السوبر: مسافة واحدة بين كل شيء ── */
.sv-tiles, .sv-charts { gap: 12px; margin-top: 12px; }
.sv-h { margin: 12px 0 10px; }

/* ── 10) رأس الجدول حافّة البطاقة العليا لا شريط عائم فيها ──
 * `.tbl` ورث `margin-top:14px` من قاعدة قديمة، فانفتح شريط أبيض فوق الرأس
 * داخل كل `.tbl-wrap`. الرأس يلاصق الحافّة ويأخذ زواياها المدوّرة. */
.tbl-wrap > .tbl,
.dt-wrap > .tbl { margin-top: 0; }

/* البطاقة لا تقصّ (‏overflow: visible‏ متعمَّد للقوائم المنسدلة)،
 * فالحافّة تُدوَّر على الغلاف نفسه بنصف قطر البطاقة. */
.panel > .tbl-wrap:first-child {
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
}

/* ═══ الأصل قبل الفرع ═══════════════════════ */

/* ── 11) هامش صفحة السوبر ──
 * جُرّبت محاذاة المحتوى بجرس الإشعارات (هامش ١٨ ناقص عرض شريط التمرير)
 * ثم رُجع إلى الهامش الأول: ٢٨ على المكتب و١٦ على
 * الجوال، وهما معرَّفان في القسم الذي يوسّع عرض السوبر أعلاه. */

/* ── 12) رئيسية السوبر: مسافة واحدة فوق كل شيء وبين كل شيء ──
 * `.wz` تحمل ٣٠ فوق و٦٠ تحت من المنصة، فتنفتح فجوة فوق المربّعات وتحت
 * الجدول لا تشبه المسافة بين العناصر نفسها. الرقم واحد: ١٢. */
.wz.sv-home { padding-block: 12px 24px; }
.wz.sv-home > * { margin-top: 12px; }
.wz.sv-home > :first-child { margin-top: 0; }
/* معدِّل عنوان أصغر من عنوان الصفحة المشترك — لعنوان ملخّص لا عنوان شاشة. */
/* عنوان الصفحة واحد في اللوحتين: 18 بوزن 700 وسطر 1.3، كرئيسية السوبر. */
.wz h2 { font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }

/* ── 13) أزرار النماذج والبطاقات في الطرف الأيسر ──
 * يسري على صفحات النظام كلها: الصف في أقصى اليسار،
 * والحفظ أو الإضافة يسارًا والرجوع أو الإلغاء يمينه. الأساسي يبقى أول القالب
 * (ترتيب الوصول بلوحة المفاتيح)، والعكس بالعرض. */
.card-act, .rl-foot { flex-direction: row-reverse; justify-content: flex-start; }

/* ══════════════════════════════════════════════════════════════════
 * ١٢ · شريط الأدوات ولوحة الفلترة — إيقاع واحد ومقاس واحد
 *
 * ثلاثة أعطال كانت مجتمعة فوق كل جدول في النظام:
 *
 * **أ) فجوتان لا واحدة.** الترويسة تترك ١٢ تحتها، واللوحة تترك ٢ تحتها،
 *     فالجدول يقفز حين تُفتح الفلترة ويلتصق بها حين تُغلق. الإيقاع رقم
 *     واحد — `--dt-gap` — فوق اللوحة وتحتها وداخلها.
 *
 * **ب) اللوحة صندوق شاسع فيه حقل صغير.** `flex: 0 1 190px` يعطي الحقل
 *     ١٩٠ بكسل مهما اتّسع الصفّ، فحقل واحد في صفّ ألف بكسل يترك ثمانمئة
 *     فراغًا. الصفّ **شبكة تتوزّع**: عمود واحد يملأ الصفّ، وخمسة تقتسمه
 *     بالتساوي، والحدّ الأدنى ٢٠٠ فينزل عمودًا على الجوال بلا تمرير أفقي.
 *
 * **ج) ثلاثة ارتفاعات في صفّ واحد.** `.dd-btn` كان يرث ٤٦ من نموذج
 *     الدخول (قاعدة غير مقيَّدة بـ`.auth`)، و`.dtp-in` ٣٨، والحقل ٤٢ —
 *     فتُحاذى القيعان وتتفرّق الليبلات في ثلاثة مستويات، ويبدو الليبل
 *     بعيدًا عن حقله. داخل اللوحة والشريط: `--ctl-h` لا غير.
 * ══════════════════════════════════════════════════════════════════ */

:root { --dt-gap: 12px; }

.dt-head { margin: 0 0 var(--dt-gap); }

.dt-filters {
    height: auto; min-height: 0;
    margin: 0 0 var(--dt-gap);
    padding: var(--dt-gap);
}

/* الصفّ شبكة: الحقول تتوزّع من أول الصفّ وتملأ عرضه مهما كان عددها. */
.dt-filters .sv-filters,
.sv-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--dt-gap);
    align-items: end;
}

.sv-filters > .fld,
.sv-filters .fld { flex: none; min-width: 0; margin: 0; }

.sv-filters .fld > span {
    display: block; min-height: 0;
    font-size: 11.5px; line-height: 1.4; font-weight: 500;
    color: var(--muted); margin-bottom: 6px;
}

/* مقاس واحد داخل اللوحة — لا ٤٦ ولا ٤٢ ولا ٣٨ في صفّ واحد. */
.dt-filters .inp,
.dt-filters input,
.dt-filters select,
.dt-filters .dd-btn,
.dt-filters .dtp-in,
.sv-filters .inp,
.sv-filters .dd-btn,
.sv-filters .dtp-in {
    width: 100%;
    height: var(--ctl-h); min-height: var(--ctl-h);
    border-radius: var(--ctl-r);
    font-size: 13px;
}

/* زرّ المسح خليّة كالحقول، قاعه على قاع الحقل لا تحته. */
.sv-filters .sv-clear {
    flex: none; align-self: end; justify-self: start;
    height: var(--ctl-h); min-height: var(--ctl-h);
    border-radius: var(--ctl-r);
}

/* والقائمة المنسدلة خارج اللوحة تساوي الحقل الذي بجانبها لا تزيد أربعة. */
.dd-btn { height: var(--fld-h); border-radius: var(--ctl-r); font-size: 13px; }
.auth-f .dd-btn, .auth-card .dd-btn { border-radius: var(--r-m); font-size: 14px; }

/* الجوال: الأدوات تبدأ من أول الشريط، والبحث يأخذ العرض كاملًا. */
@media (max-width: 860px) {
    .dt-tools { justify-content: flex-start; }
    .dt-tools > .sv-find { flex: 1 1 100%; }
}

/* دون 640: صفّ البحث فوق كامل العرض، وتحته «فلترة» والتاريخ نصفين
   متساويين بنفس ارتفاع الأزرار وبفجوة بطاقات الجدول نفسها — لا زرّان
   بعرض محتواهما يقفان في طرف والبحث يهبط عريضًا وحده تحتهما. */
@media (max-width: 640px) {
    .dt-tools {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
    }
    .dt-tools > .sv-find {
        order: -1;
        grid-column: 1 / -1;
        width: 100%;
    }
    .dt-tools > :not(.sv-find) { width: 100%; min-width: 0; }
    .dt-tools .dt-mb { justify-content: center; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
 * ١٣ · اثنا عشر بندًا بصريًّا — الإيقاع الواحد والبطاقة الواحدة
 *
 * أصل البنود كلها واحد: **رقم المسافة كان يُكتب في الشاشة لا في النظام**،
 * فصار في كل شاشة إيقاعها: ستّ مسافات مختلفة بين الودجتات، وسبع بين
 * حقول النماذج، وجدول بعنوان خارج بطاقته وآخر بعنوان داخلها. الرقم هنا
 * **واحد ومعرَّف**: ١٢. والمرجع رئيسية السوبر.
 * ══════════════════════════════════════════════════════════════════ */

:root {
    /* بين كل ودجت وآخر في الصفحة */
    --wz-gap: 12px;
    /* بين حقل وآخر، وبين آخر حقل وصفّ الأزرار، وبين النموذج والجدول */
    --fm-gap: 12px;
    /* بين الليبل وحقله — نصف الإيقاع، وهو نفسه ليبل لوحة الفلترة */
    --fm-lbl: 6px;
}

/* ── ٣) مسافة واحدة بين كل ودجت وآخر في كل شاشات السوبر ──
 * المرجع المربّعات الأربعة في الرئيسية: ١٢ فوقها و١٢ تحتها و١٢ بين كل
 * ودجتين بعدها. وكانت الشاشات تكتبها بأيديها: ٦ و٨ و١٠ و١٢ و١٤ و١٦ و١٨
 * و٢٢ — ثمانية أرقام في نظام واحد. والفجوة فوق عنوان الصفحة `h2` وتحته
 * من هذا الرقم كذلك، فما عاد شريط الأدوات ملاصقًا للعنوان. */
body.super .wz { padding-block: var(--wz-gap) 24px; }
body.super .wz > * { margin-top: var(--wz-gap); }
body.super .wz > :first-child { margin-top: 0; }

/* ── ١٠) إيقاع النموذج: ثلاث علاقات لا ثلاثون رقمًا ──
 * الليبل فوق حقله بـ٦، والحقل عن الحقل بـ١٢، وصفّ الأزرار عن آخر حقل
 * بـ١٢، والنموذج عن الجدول تحته بـ١٢ (من قاعدة الودجتات فوق). */
.fld { margin-bottom: var(--fm-gap); }
.fld > label, .fld > .lbl { margin-bottom: var(--fm-lbl); }
.sv-filters .fld > span, .dt-filters .fld > span { margin-bottom: var(--fm-lbl); }
.card-act { margin-top: var(--fm-gap); }

.panel > .fld,
.panel > .card-act { margin-top: var(--fm-gap); }
.panel > :first-child { margin-top: 0; }

/* ── ١٢) الجدول بطاقة واحدة: عنوانه داخلها ورأسه ملاصق لحافّتها ──
 * كان العنوان فوق البطاقة في الهواء لأن نزع غلاف `panel` هو الذي ألصق
 * الرأس بالحافّة. البطاقة ترجع على `.dtb` نفسها — الغلاف الذي يضمّ
 * العنوان والفلترة والجدول والترقيم — فيدخل العنوان داخلها **ويبقى**
 * الرأس ملاصقًا: الجدول بلا حدّ ولا زوايا، والحدّ على البطاقة وحدها. */
.dtb {
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: var(--r-l);
    overflow: hidden;
}
/*
 * ترويسة الجدول تتنفّس: رموز خاصة بها لا `--dt-gap`، لأن `--dt-gap` نفسه
 * يحشو غلاف الجدول على الجوال فتغييره يغيّر عرض الصفوف.
 */
:root { --dt-head-py: 16px; --dt-head-px: 20px; --dt-tools-gap: 10px; }
.dtb > .dt-head { margin: 0; padding: var(--dt-head-py) var(--dt-head-px); }
.dt-tools { gap: var(--dt-tools-gap); }
@media (max-width: 640px) {
    :root { --dt-head-py: 14px; --dt-head-px: 16px; }
}

.dtb > .dt-filters {
    margin: 0 var(--dt-gap) var(--dt-gap);
    border-radius: var(--r-m);
}
.dtb > .dt-empty { margin: 0; border: 0; border-radius: 0; }
.dtb > .dt-wrap,
.dtb > .dt-wrap > .tbl,
.dtb > .tbl-wrap { border: 0; border-radius: 0; }
.dtb > .tbl-wrap + .tpg { border: 0; border-radius: 0; background: transparent; }
.dtb .dt-tbl tbody tr:last-child td { border-bottom: 0; }

/* الجوال: الصفوف بطاقات داخل البطاقة، فتحتاج هامشًا جانبيًّا لا حافّة. */
@media (max-width: 860px) {
    .dtb > .dt-wrap { padding: 0 var(--dt-gap); }
    .dtb > .dt-head { padding-bottom: var(--dt-gap); }
}

/* ── ٧) الاقتصاد: محتوى العمود في منتصفه ──
 * عمود يُوسَّط يُوسَّط رأسه معه، وإلا وقف الرأس على حافّة وأرقامه في
 * المنتصف. وزرّ الفرز عنصر مرن داخل الخليّة فيُوسَّط بمحاذاته لا بالنصّ. */
.dt-mid { text-align: center; }
.dt-mid .dt-sort { justify-content: center; width: 100%; }
.dt-tbl td.dt-mid .num { direction: ltr; display: inline-block; }

/* ── ١١) القطاعات: الوسم والزرّ لا يتلاصقان ── */
.sc-row .ro {
    display: inline-flex; align-items: center; gap: 10px;
    margin-inline-start: auto; flex: none;
}

/* ── مقاسات الزرّ الثلاثة: `<Btn size>` ──
 * `sm` بمقاس زرّ الجدول · `md` هو `.b1`/`.b2` كما هما · `lg` أسفل النافذة.
 * و`block` يملأ حاويته: عمود بعرض ثابت = أزرار متساوية مهما طال نصّها. */
:root { --ctl-h-lg: 46px; }
.b1.btn-sm, .b2.btn-sm {
    height: var(--ctl-h-sm); min-height: var(--ctl-h-sm);
    padding: 0 12px; border-radius: var(--ctl-r-sm); font-size: 12.5px;
}

.btn-block { display: inline-flex; align-items: center; justify-content: center; width: 100%; }
/* زر «ابدأ» بعرض نافذة المهمة الجاهزة أطول من زوج الأزرار المتساوية تحت (--ctl-h)؛ وبقية الأزرار بعرض حاويتها بارتفاعها العادي */
.mdl .mdl-act.rd-act > .btn-block { height: var(--ctl-h-lg); min-height: var(--ctl-h-lg); }

/* ── ٦) إجراءات التاجر: قائمة عمودية كبطاقة إعدادات ──
 * صفّ لكل إجراء: أيقونة واسم في البداية، وزرّ واحد في عمود عرضه ثابت
 * فالأزرار متساوية ومتوسّطة في صفوفها، وخطّ رفيع بين الصفوف. */
.mc-acts { --mc-act-w: 104px; }
.mc-acts .row {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) var(--mc-act-w);
    align-items: center;
    column-gap: 10px;
    min-height: 54px;
    padding: 10px 0;
}
.mc-acts .row > svg { color: var(--ink-2); }
.mc-acts .row .nm { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.mc-acts .row .vl { margin: 0; direction: rtl; display: flex; }
.mc-acts .mc-bad { color: var(--bad); }

.mc-acts .row:last-child { border-bottom: 0; }

/* ── ٥) بطاقتا التاجر: عرض واحد وارتفاع واحد ومحاذاة من الأعلى ──
 * `align-items` الموروثة كانت تترك كل بطاقة على ارتفاع محتواها. */
.mc-two { align-items: stretch; }
.mc-two > .panel { margin-top: 0; height: 100%; }

/* ── ١) التقويم يُعلَّق على الجسم ويُقاس بعد الرسم ──
 * نفس علاج قائمة الصفّ: `position: fixed` خارج كل حاوية تقصّ، والموضع
 * من الزرّ لحظة الرسم — ينقلب للجهة المقابلة إن ضاق ما أمامه، وللأعلى
 * إن ضاق ما تحته. وقبل القياس يُخفى فلا يُرى وهو يقفز إلى مكانه. */
.dtp-fx {
    position: fixed; z-index: 1200;
    margin: 0; inset-inline-start: auto;
}
.dtp-fx:not(.ready) { opacity: 0; pointer-events: none; }

@media (max-width: 560px) {
    /* التقويم معلَّق على الجسم: «كل العرض» تعني عرض الشاشة لا عرض الحقل. */
    .dtp-fx { width: 262px; }
}

/*
 * مربّع كود واتساب **وهو يُجهَّز**: نفس مقاس الكود النهائي (190) وحدّه،
 * فارغًا بدوّارة في وسطه، فلا يقفز اللوح حين يصل الكود ويفهم التاجر أنه قادم.
 */
.wa-qr.is-loading {
    width: 190px; height: 190px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
    display: grid; place-items: center;
}
.wa-qr-spin {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2.5px solid var(--line); border-top-color: var(--slate);
    animation: thr-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .wa-qr-spin { animation-duration: 2s; } }

/* ═══ السوبر ═══════════════════ */

/* ── أ) قائمة «عمليات» وقائمة الصف: خانة أيقونة محجوزة لكل بند ──
 * الأيقونة يمين النص (أول الصفّ في RTL) بمقاس ومسافة واحدة، والبند بلا
 * أيقونة يحجز الخانة نفسها فلا تنزاح نصوص القائمة. */
.dt-menu button { gap: 10px; }
.dt-mi { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; }
.dt-menu .dt-mi svg { width: 16px; height: 16px; opacity: .8; }

/* ── ب) تلميح الرسم: الرقم ووحدته ── */
.ch-tip-v { display: inline-flex; align-items: center; gap: 4px; }
.ch-tip-u { font-weight: 500; opacity: .85; }

/* ── ج) مربّع الرقم: المحتوى في وسطه عموديًّا ──
 * المربّعات في صفّ واحد تتمدّد لأطولها، والمحتوى كان يلتصق بالأعلى فتتّسع
 * الفجوة تحته. السطر الواحد يتوسّط والأيقونة تبقى على مستوى الرقم. */
.stt { flex-wrap: wrap; align-content: center; }
.st-body { flex-basis: 0; }

/* ── د) مسافة واحدة بين البطاقات ──
 * `.panel` تحمل `margin-top:24px` من المنصة، وداخل الشبكة يُضاف الهامش
 * فوق `gap` فتصير الفجوة 36 بدل 12. عنصر الشبكة بلا هامش، والفجوة `gap`
 * وحده من الرمز نفسه. */
:is(.sv-tiles, .sv-charts, .set-grid, .mc-two, .ui-row) > * { margin-top: 0; }
.sv-tiles, .sv-charts, .mc-two { gap: var(--wz-gap); }
.mc-two > .panel { align-self: stretch; }

/* ── نبرات الوسم: خمس بشكل `.tag` نفسه وحدّ من لون النص ── */
.tag.blue   { color: var(--t-blue); background: var(--t-blue-bg); }
.tag.purple { color: var(--t-purple); background: var(--violet-soft); }
.tag.orange { color: var(--t-orange); background: var(--t-orange-bg); }
.tag.teal   { color: var(--t-teal); background: var(--t-teal-bg); }
.tag.gray   { color: var(--t-gray); background: var(--t-gray-bg); }
.tag.red    { color: var(--t-red); background: var(--t-red-bg); }
/* أشرطة بطاقة الرد بنبرات الوسم نفسها */
.bar.t-g i { background: var(--t-g); }
.bar.t-blue i { background: var(--t-blue); }
.bar.t-purple i { background: var(--t-purple); }
.bar.t-orange i { background: var(--t-orange); }
.bar.t-teal i { background: var(--t-teal); }
.bar.t-gray i { background: var(--t-gray); }
.bar.t-red i { background: var(--t-red); }
/* ما يُطرح (خصم · مردود · سالب) رقمه بالأحمر في صفوف البطاقة، كشريطه */
.agent-md .card .row .vl.neg { color: var(--t-red); }
/* ليبل حالة صغير بجانب عنوان */
.tag.sm { height: 24px; min-height: 24px; padding: 0 9px 1px; font-size: 11.5px; vertical-align: 2px; }

/* ── أزرار النافذة متساوية: الثانوي بعرض الرئيسي وارتفاعه في كل نافذة ── */
.mdl .card-act > .b1, .mdl .card-act > .b2,
.mdl .mdl-act > .b1, .mdl .mdl-act > .b2 {
    flex: 1 1 0; justify-content: center; display: inline-flex; align-items: center;
    height: var(--ctl-h); min-height: var(--ctl-h); font-size: 13.5px;
    padding-inline: 16px; min-width: 0; box-sizing: border-box;
}

/* ── الحالة غير المفعّلة حمراء ──
   `off` كان رماديًّا باهتًا (#F1F4F2 على faint) فـ«غير مفعّل» يُقرأ فراغًا لا حالة.
   النبرة `off` معناها غير فعّال في كل جدول، فتأخذ عائلة `bad` نفسها: نفس الشكل
   والمقاس والحشوة والوزن مثل `ok`، والحدّ مشتقّ من النص كما هو. */
.pill.off,
.pill.bad { background: var(--bad-soft); color: var(--bad-ink); }

/* ── القائمة المنقولة إلى body ──
   موضعها ثابت من مستطيل الزر (يُكتب في style)، فوق النوافذ (100 و120)
   وتحت التنبيه (200). */
.dd-menu.dd-float { position: fixed; inset: auto; z-index: 150; }

/* ── دائرة الرصيد بمقاس الجرس على الجوال ──
   كانت 34 والجرس 40 في صفّ واحد. نفس الارتفاع والحدّ ونصف القطر. */
@media (max-width: 860px) {
    .qr-btn { width: 40px; height: 40px; border-radius: 12px; }
}

/* ── زر أيقونة بلا حدّ ولا خلفية ──
   للإجراء الصغير داخل صفّ نصّي (نسخ · فتح). مساحة لمس 32 على الأقل،
   تلوين خفيف عند المرور، وحلقة التركيز باقية للوحة المفاتيح. */
.icon-btn {
    appearance: none; border: 0; background: transparent; padding: 0; margin: 0;
    display: inline-grid; place-items: center; vertical-align: middle;
    min-width: 32px; min-height: 32px; border-radius: 8px;
    color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s;
}
@media (hover: hover) {
.icon-btn:hover { background: var(--canvas); color: var(--ink-2); } }
.icon-btn:focus-visible { outline: 2px solid var(--mint-d); outline-offset: 2px; }
.icon-btn:disabled { color: var(--faint); background: transparent; cursor: default; }
.icon-btn svg { width: 16px; height: 16px; }

/* ══ جدول: عمود نصّ طويل يُقصّ لا يُمرَّر أفقيًا ══
 * اسم منشأة طويل كان يدفع الجدول عرضًا فتُمرَّر الصفحة كلّها أفقيًا.
 * القصّ بنقاط والاسم كاملًا في `title`، والجوال يبقى يلفّ كعادته. */
.dt-truncate {
    display: inline-block; max-width: 220px; vertical-align: bottom;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
    .dt-truncate { display: inline; max-width: none; overflow: visible; white-space: normal; text-overflow: clip; }
}

/* ══ FilePreview: مصغّرة حقيقية وعارض ملء الشاشة ══
 * كانت صورة الإيصال تتمدّد بعرض حاويتها بلا حدّ ارتفاع فتتشوّه، وفتحها
 * يكبّرها في مكانها بلا تدوير ولا تنزيل ولا عارض PDF. */
.fp { margin-top: 16px; }
.fp-card {
    display: inline-flex; flex-direction: column; gap: 10px; max-width: 100%; padding: 12px;
    border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--paper);
}
.fp-thumb { display: grid; place-items: center; min-width: 180px; min-height: 160px; max-width: 100%; padding: 0; border: 0; border-radius: 8px; background: var(--canvas); cursor: zoom-in; }
.fp-thumb img { display: block; width: auto; height: auto; max-width: 100%; max-height: 340px; object-fit: contain; border-radius: inherit; }
.fp-thumb:focus-visible { outline: 2px solid var(--mint-d); outline-offset: 2px; }
/* المصغّر مكان أيقونة الصف: الصورة نفسها أو أيقونة نوعها، والضغط يفتح العارض */
.fp.fp-compact { flex: none; }
.fp-mini { width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); color: var(--muted); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.fp-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-mini svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.fp-mini.file { border: 0; background: var(--line-2); color: var(--muted); }
.fp-mini.file svg { width: 17px; height: 17px; }
.fp-mini:focus-visible { outline: 2px solid var(--mint-d); outline-offset: 2px; }
.fp-acts { display: flex; gap: 16px; }
.fp-view {
    display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
    font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; cursor: pointer;
}
.fp-view svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.fp-view:focus-visible { color: var(--mint-d); }
@media (hover: hover) {
.fp-view:hover { color: var(--mint-d); } }

.fp-tile {
    display: flex; align-items: center; gap: 8px; max-width: 260px; padding: 0;
    border: 0; background: none; cursor: pointer; color: inherit; font: inherit; text-align: start;
}
.fp-tile svg { width: 20px; height: 20px; stroke: var(--muted); fill: none; stroke-width: 1.6; flex: none; }
.fp-tile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }

/* العارض ملء الشاشة — خلفية داكنة لا بطاقة بيضاء: `.mask` توفّر الحارس
   والإغلاق بالنقر خارجًا وEscape، وهنا نلغي شكل `.mdl` الأبيض الصغير. */
.fp-mask { z-index: 200; padding: 0; }
.fp-modal { width: 100%; height: 100%; max-width: none; background: transparent; box-shadow: none; border-radius: 0; display: flex; flex-direction: column; }
/* الاسم يسارًا والأدوات يمينًا وزر الإغلاق على الحافة */
.fp-bar { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; color: #fff; }
.fp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.fp-tools { display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; flex: none; }
.fp-tools .icon-btn { color: #fff; min-width: 42px; min-height: 42px; border-radius: 12px; }
.fp-tools .icon-btn svg { width: 22px; height: 22px; }
@media (hover: hover) {
.fp-tools .icon-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; } }
.fp-tools .icon-btn:disabled { color: rgba(255, 255, 255, .35); }
.fp-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.fp-img { max-width: 90%; max-height: 85vh; user-select: none; -webkit-user-drag: none; transition: transform .15s ease; }
.fp-frame { width: min(920px, 92vw); height: 88vh; border: 0; border-radius: var(--r-m); background: var(--paper); }
@media (prefers-reduced-motion: reduce) {
    .fp-img { transition: none; }
}
@media (max-width: 640px) {
    .fp-bar { padding: 10px 12px; }
    .fp-name { font-size: 12px; }
}

/* الليبلات في كل النظام بلا إطار وخطها أثقل قليلًا — آخر الملف ليغلب كل الأنواع. */
.pill, .tag, .nx, .soon { border: 0 !important; font-weight: 600 !important; }

/* خيار معطّل في القائمة المنسدلة — يُرى بسببه ولا يُختار. */
.dd-menu button:disabled { opacity: .55; cursor: not-allowed; background: transparent; }

/* ══ قائمة المهام — بقياس صفحة المهام في app.mohasebai.com/tasks ══ */
.tkl { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tk { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--line-2); background: none; font: inherit; text-align: start; color: inherit; text-decoration: none; }
.tk:last-child { border-bottom: 0; }
button.tk { cursor: pointer; transition: background .15s; }
@media (hover: hover) {
button.tk:hover { background: var(--canvas); } }
.tk-go { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--dim); stroke-width: 1.8; transform: scaleX(-1); }
@media (hover: hover) {
button.tk:hover .tk-go { stroke: var(--muted); } }
button.tk:focus-visible { outline: 2px solid var(--mint); outline-offset: -2px; }
.tk-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--mint-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--mint-ink); }
.tk-ic svg { width: 20px; height: 20px; }
.tk-ic svg[viewBox="0 0 100 100"] { fill: currentColor; }
/* ما يعمل الآن نجمته تلف كنجمة البار */
.tk-ic.run svg { animation: spin 4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .tk-ic.run svg { animation: none; } }
/* علامة صح وحدها بلا مربع، أكبر وبلون الأزرار */
.tk-ic.ok { background: var(--mint); color: var(--brand); }
.tk-ic.ok svg { width: 24px; height: 24px; }
.tk-ic.off { background: var(--line-2); color: var(--faint); }
.tk-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-b b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.tk-b i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; line-height: 1.6; }
.tk.done .tk-b i { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-prog { display: flex; align-items: center; gap: 10px; max-width: 360px; margin-top: 6px; }
.tk-bar { display: block; flex: 1; height: 4px; border-radius: 9px; background: var(--line-2); overflow: hidden; }
.tk-pct { flex: none; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tk-bar i { display: block; height: 100%; border-radius: 9px; background: var(--mint); }
.tk-t { flex: none; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.mdl.tkd { width: min(720px, 100%); text-align: start; }
.mdl.tkd .tk-ic { margin-bottom: 12px; }
/* التاريخ بوقته لا يتسع لثلاثة أعمدة: عمودان والقيمة تلتف داخل مربعها */
.tkd-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 16px 0 0; }
.tkd-meta div { background: var(--canvas); border-radius: 10px; padding: 10px 12px; }
.tkd-meta dt { font-size: 12px; color: var(--faint); }
.tkd-meta dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.tkd-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 18px; }
/* أسئلة المهمة وأجوبة التاجر، محفوظة في تفاصيلها بعد أن تنتهي */
.tkd-qa { margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.tkd-qa h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.tkd-qa dl { display: grid; gap: 8px; margin: 0; }
.tkd-qa dt { font-size: 12.5px; color: var(--muted); }
.tkd-qa dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.tkd-body { margin-top: 16px; max-height: 50vh; overflow-y: auto; font-size: 13px; line-height: 1.8; color: var(--ink-2); border-top: 1px solid var(--line-2); padding-top: 14px; }
/* التاريخ والوقت نصّ بلا خلفية وبأسود خفيف في كل قائمة. */
.nx { height: auto; min-height: 0; padding: 0; color: var(--ink-2); background: none; font-weight: 500 !important; }
@media (max-width: 640px) {
    .tk { flex-wrap: wrap; }
    .tk-t { width: 100%; justify-content: flex-start; padding-inline-start: 43px; }
}

/*
 * ══ صفحة الاعتماد /ops ══
 *
 * صف واحد لكل شيء فيها: أيقونة · نص · إجراءات يسارًا. نفس مقاسات صفوف المهام
 * (عنوان 16/600 · وصف 13.5) لكي تُقرأ الصفحتان بعين واحدة.
 */
.b1.sm, .b2.sm { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.tab { display: inline-flex; align-items: center; gap: 7px; }
.tab-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ops-head { margin: 0 0 14px; }
.ops-card { margin-top: 0; padding: 4px 18px 8px; }
.ops-card + .ops-card { margin-top: 14px; }
.ops-row { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.ops-row:last-of-type { border-bottom: 0; }
.ops-row.on { background: var(--mint-soft); border-radius: 14px; margin-inline: -12px; padding-inline: 12px; }
.ops-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ops-row .tx b { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ops-row .tx i { font-style: normal; font-size: 12.5px; color: var(--faint); }
/* اسم الملف ومستند العملية يفتحان العارض كالمصغّرة */
.ops-name { all: unset; cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; text-align: start; }
@media (hover: hover) {
.ops-name:hover { color: var(--slate); } }
.ops-name:focus-visible { outline: 2px solid var(--mint-d); outline-offset: 2px; border-radius: 4px; }
.ops-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--line-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.ops-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ops-ic.ok { background: var(--mint-soft); color: var(--mint-ink); }
/* الأيقونة ومصغّرة الامتداد 34 في خانة 42 كالصور، ففراغ متساوٍ يمينًا ويسارًا والنص يصطف */
.ops-row .ops-ic, .ops-row .fp-mini.file { width: 34px; height: 34px; margin-inline: 4px; border-radius: 10px; }
.ops-ic.warn { background: var(--warn-soft); color: var(--warn-ink); }
.ops-act { flex: none; display: flex; align-items: center; gap: 8px; }
.ops-row > .dt-box { margin: -8px -11px; }
@media (max-width: 640px) {
    .ops-row { flex-wrap: wrap; }
    .ops-act { width: 100%; justify-content: flex-end; }
    /* الجوال: النص يأخذ ما بقي بجانب المصغّرة، والمبلغ والليبل سطر تحته فوق الأزرار */
    .ops-row .tx { flex: 1 1 calc(100% - 100px); }
    .tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: 100%; scrollbar-width: none; }
    /* كل تبويب يتسع حتى يملأ الشريط بلا فراغ جانبه، والكثيرة تتمرّر كما هي */
    .tab { padding: 0 12px; flex: 1 0 auto; justify-content: center; }
}

/* السويتش مثل آبل بالإنجليزية في كل النظام: مطفأ الدائرة يسارًا، ومشغَّل الدائرة يمينًا بالأخضر. */
.sw::after { inset-inline-start: auto; left: 3px; }
.sw.on::after { transform: translateX(18px); }
.sw:disabled { opacity: .45; cursor: default; }
/* اللمس: مساحة ضغط 44px حول المفتاح وأسماء العمليات والمستندات بلا تغيير في الشكل. */
@media (pointer: coarse) {
    .sw::before { content: ''; position: absolute; inset: -10px -4px; }
    .ops-name { padding-block: 13px; margin-block: -13px; }
    .sn-more, .go { position: relative; }
    .sn-more::before, .go::before { content: ''; position: absolute; inset: -12px -6px; }
}

/* الأيقونات الزخرفية فضية مثل أيقونة الإشعار المحايد `.nt-ic.mute`: رمادي فاتح بحد رمادي وأيقونة رمادية.
   الأخضر يبقى لما يعني حالة جيدة (مهمة منجزة · سويتش مشغَّل · زر أساسي)، والتحذير والخطأ بألوانهما. */
.empty-ic,
.mdl-ic:not(.warn),
.nt-ic:not(.warn):not(.out):not(.mute),
.qr-ic:not(.warn):not(.out),
.st-ic.mint { background: var(--canvas); border-color: var(--line); color: var(--muted); }
.st-ic.mint { box-shadow: inset 0 0 0 1px var(--line); }
/* نجمة مهام المحاسب وحدها خضراء على نعناعي فاتح كما في صفحة المهام الأولى */
.tk-ic:not(.ok):not(.off) { background: var(--mint-soft); color: #3DBE74; }
/* نجمة مهام المحاسب مفرغة في «لا توجد مهمة تعمل الآن»: رسمها بمقياس 100 فيحتاج حدًّا أعرض ليُرى بسُمك باقي الأيقونات. */
.empty-ic svg.es-star,
.b1 svg.es-star { stroke-width: 7; }
.empty-ic svg,
.mdl-ic:not(.warn) svg,
.nt-ic:not(.warn):not(.out):not(.mute) svg,
.qr-ic:not(.warn):not(.out) svg { color: var(--muted); stroke: var(--muted); }
/* العدّاد الدائري بلون العدّاد الطويل: أخضر ثم برتقالي عند 80٪ ثم أحمر عند 100٪ */

/* رقم الجوال يُكتب ويُقرأ من اليسار في كل حقل — قاعدة RTL أعلاه تجعله يمينًا. */
html[dir="rtl"] input[name="phone"][dir="ltr"]:not(.code-box),
html[dir="rtl"] input[name="contact_phone"][dir="ltr"]:not(.code-box) { text-align: left; }

/* عدد التبويب — مقروء في الحالتين: الأخضر الفاتح على الأبيض والرمادي على الرمادي كانا يختفيان.
   المختار بلون الأزرار الأساسية، وغيره أبيض بحد. واحد للمهام التلقائية والاعتماد. */
/* عدّاد التبويب بمقاس واحد داخل التبويب المختار وخارجه ولرقم أو رقمين: تعبئة بلا حدّ، واللون وحده يتغيّر */
.sc-n { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 6px; margin-inline-start: 8px; border-radius: 999px; background: var(--off); color: var(--ink-2); font-size: 11px; font-weight: 700; line-height: 1; }
.tab.on .sc-n { background: var(--slate); color: var(--on-slate); }

/* عنوان صفحة الباقات بحجم عناوين كل الصفحات: `#s-billing h2` في app.css كان يكبّره إلى 38. */
#s-billing .wz > h2 { font-size: 16px; }

/* الحالة الفارغة تحت رأس جدول: تتوسّط البطاقة كلها لا ما تحت الرأس — الرأس 56 فيُنقل نصفه من الأعلى إلى الأسفل. */
.dtb > .dt-head + .dt-empty { padding-top: 26px; padding-bottom: 82px; }

/* ليبل «تجربة» في جداول السوبر بلون مميّز لا رمادي يشبه الخلفية: أزرق المعلومات. */
.pill.plan.free { color: var(--violet); background: var(--violet-soft); border-color: var(--violet-line); } /* بنفسجية كـ«الباقة» في صفحة التاجر */

/*
 * التسجيل أنزل قليلًا: العنوان والخط والخطوة معًا والحقول تتبعها.
 * وجملة اللوحة الجانبية بالموضع لا بالهامش: اللوحة موسَّطة، والهامش يرفع الأيقونات بنصفه.
 */
body.auth .auth-art .art-cap { position: relative; top: 22px; }
/* لا هامش: ينطوي مع هامش الشعار فلا ينزل شيء. والبطاقة موسَّطة فتطول 12 وترتفع 6، والـ6 تُرجع الشعار مكانه */
body.auth .auth-card.reg .auth-head h1 { padding-top: 12px; }
body.auth .auth-card.reg { position: relative; top: 6px; }

/*
 * مسافة أوسع قليلًا بين الكلمات في كل النظام.
 * ذيل «ر» و«و» و«ز» في خط هُوِيّة يمتدّ تحت المسافة فتبدو «التاجر لأن» كلمة واحدة.
 * قيست على 16 شاشة تاجر وسوبر بالجوال والمكتب: لا فيضان ولا تمرير أفقي، والتفاف أسطر طويلة فقط.
 */
body { word-spacing: .08em; }
/* المتصفح يعيد الأزرار والحقول إلى word-spacing: normal، فتلتصق «جارٍ مزامنة» في مربع المزامنة وهو زر: ترث المسافة كالنص */
button, input, select, textarea { word-spacing: inherit; }

/* ── زرّ الحذف في التاجر والسوبر، في القوائم المنسدلة والصفحات ──
 * حدّه أفتح، والتمرير أحمر فاتح بدرجة أغمق قليلًا لا رمادي. وزرّ الأيقونة وحدها أصغر. */
.b2.danger { border-color: var(--bad-line); }
@media (hover: hover) {
.b2.danger:hover { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); } }
.b2.danger:has(> svg:only-child) { width: var(--ctl-h-icon); height: var(--ctl-h-icon); min-height: var(--ctl-h-icon); padding: 0; border-radius: var(--ctl-r-sm); justify-content: center; }
.b2.danger:has(> svg:only-child) svg { width: 14px; height: 14px; }

/* مساحة شريط التمرير محجوزة دائمًا: التنقل بين تبويب قصير وطويل كان يزيح الصفحة 9px حين يظهر الشريط. */
.stage { scrollbar-gutter: stable; }

/*
 * دخول الصفحة متتالياً (الموجة 6): كل ابن يصعد قليلاً ويظهر بعد سابقه بفارق 40 ملّي،
 * بحركة نوافذ الدخول نفسها (`step-in`). النوافذ (`.mask`) مستثناة من الحركة **ومن التأخير**: تأخير ترتيبها
 * كان يؤخّر ظهورها التدريجي فتظهر ثم تختفي ثم تظهر (وميض مرتين).
 */
.rise > :not(.mask) { animation: step-in .45s cubic-bezier(.2, .7, .3, 1) both; }
.rise > :nth-child(2):not(.mask) { animation-delay: .04s; }
.rise > :nth-child(3):not(.mask) { animation-delay: .08s; }
.rise > :nth-child(4):not(.mask) { animation-delay: .12s; }
.rise > :nth-child(5):not(.mask) { animation-delay: .16s; }
.rise > :nth-child(n+6):not(.mask) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
    .rise > *, .scr.on > *, .set-pane > *, .set-pane > * > * { animation: none; }
}

/* ── «المزيد» في الشريط: زرّ ينسدل تحته بنوده بلا صفحة ── */
.sb-drop { background: none; border: 0; font-family: inherit; cursor: pointer; }
/* قوائم الشريط زجاجية: الشريط الداكن يظهر خلفها مغبّشاً، والبياض 78% يبقي النص الداكن
   مقروءاً وإن امتدت فوق الصفحة. بلا إطار وبظل داكن خفيف. وقوائم الصفحة بيضاء صلبة: الزجاج فوق الأبيض لا يُرى */
.umenu, .cmenu {
    background: var(--glass);
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    backdrop-filter: blur(28px) saturate(1.8);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(17,17,17,.14);
}
.umenu a, .umenu button, .cmenu button { font-size: 14px; font-weight: 500; padding-block: 10px; }
@media (hover: hover) {
.umenu a:hover, .umenu button:hover, .cmenu button:hover { background: var(--veil); } }
@media (hover: hover) {
.umenu .danger:hover, .cmenu .danger:hover { background: var(--bad-soft); } }
/* «المزيد» على حدّ الشريط وموضعها ثابت يُحسب من الزر، والصفحة المفتوحة معلَّمة */
.umenu.more-menu { position: fixed; inset-inline: auto; bottom: auto; z-index: 100; } /* فوق درج الجوال (95) */
/* قائمة الحساب فوق زرّها مباشرة وبعرضه كقوائم Claude Code، في اللوحة والسوبر. والشريط المطويّ أيقونات فقط فلها أدنى عرض */
.sb-foot .umenu { inset-inline: 10px; bottom: calc(100% - 4px); } /* حشوة الذيل 10: على حافتي الزر و6 فوقه */
@media (min-width: 861px) { body.sb-collapsed .sb-foot .umenu { inset-inline: auto; inset-inline-start: 0; width: 200px; } }
.umenu.more-menu a.on { background: var(--veil); font-weight: 600; }

/* حقل المحادثة: الإرفاق بجانب زرّ الإرسال. وحقل البداية سطر واحد يطول بالكتابة كحقل كلود */
.comp-bar .cbtn { margin-inline-start: auto; }
.comp-bar .cbtn + .send { margin-inline-start: 0; }
/* المايك بجانب المشبك، وشريط الكلام يملأ ما بينهما وزرّ الإرسال: الهامش التلقائي لأول زر وحده */
.comp-bar .cbtn + .cbtn, .comp-bar .cbtn + .voice, .comp-bar .voice .cbtn { margin-inline-start: 0; }
.hero .comp textarea { font-size: 15px; }

/* شعار البنك قبل اسم حسابه في بطاقة الرد */
.bank-ic { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-inline-end: 7px; border-radius: 6px; }
/* حد خفيف حول الشعار: شعار بخلفية بيضاء لا يذوب في البطاقة البيضاء. ظل بلا مقاس فلا يتحرك السطر */
img.bank-ic { box-shadow: 0 0 0 1px rgba(17, 17, 17, .1); }
/* الجوال: اسم البند في سطره، والشريط يملأ ما بقي بجانب المبلغ تحته */
@media (max-width: 860px) {
    .agent-md .card .row { flex-wrap: wrap; row-gap: 7px; }
    .agent-md .card .row .nm { flex: 0 0 100%; }
    .agent-md .card .row .bar { flex: 1; width: auto; }
}
.card-t { display: flex; align-items: center; gap: 6px; }
.card-t svg { width: 15px; height: 15px; flex: none; }
/* رقم المستند في جدول الرد رابطاً لملفه: أزرق بأيقونة فاتورة الفوترة نفسها، بلا تغيّر عند المرور */
.doc-a { display: inline-flex; align-items: center; gap: 5px; color: var(--t-blue); font-weight: 600; text-decoration: none; }
.doc-a svg { width: 14px; height: 14px; flex: none; }
/* المهمة الجارية داخل رد المحاسب: صفّ مهام المحاسب نفسه في إطاره */
.msg-task { margin-top: 12px; }
/* شريط التقدّم في الرد يمتدّ إلى آخر البطاقة لا إلى عرض صفّ صفحة المهام */
.msg-task .tk-b { flex: 1; min-width: 0; }
.msg-task .tk-prog { max-width: none; }

/* جدول بطاقة الرد يمرّر داخلها لا خارجها (جدول المطابقة بسبعة أعمدة على جوال 375) */
.card .ct-scroll { overflow-x: auto; max-width: 100%; }
.card .ct-scroll .ct { min-width: 100%; }

/* مرفق المحادثة: الاسم يفتحه والسهم بجانبه ينزّله */

/* صف مهمة اختفى (حُذفت أو تنتظر اكتمال مرفقاتها): لا يبقى إطاره الفارغ في المحادثة */
.msg-task:empty { display: none; }

/* رسالة نفاد الرصيد: زرها تحت النص */

/* «يفكر…» تحت النص المكتوب لا فوقه */
.bub .thinking { margin-top: 8px; }
/* ما تمّ، كما في Claude: السطر كله زرّ، وسهم صغير لأسفل بعد النص ينقلب لأعلى حين يُفتح، والقائمة معلّقة بخط رفيع */
.thinking .st-tg { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.thinking .st-chev { width: 13px; height: 13px; color: var(--faint); transition: transform .15s; }
.thinking .st-chev.open { transform: rotate(180deg); }
@media (hover: hover) {
.thinking .st-tg:hover .st-chev { color: var(--muted); } }
.thinking.done .th-tx em { color: var(--faint); font-style: normal; }
/* سطر الحالة سطر واحد دائماً: ما زاد عن نصف العرض يُقصّ، وعدّاده يبقى بجانبه لا تحته */
.thinking { max-width: 100%; }
.thinking .th-tx { min-width: 0; }
.thinking .th-tx em { display: block; max-width: min(56ch, 52vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thinking .secs { flex: none; white-space: nowrap; }
.mind-offer { margin: 6px 0 14px; }
.bub .steps { list-style: none; margin: 6px 0 0; padding: 2px 0; padding-inline-start: 12px; margin-inline-start: 6px; border-inline-start: 1.5px solid var(--line); display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.bub .steps li { display: flex; align-items: center; gap: 6px; }
.bub .steps li svg { width: 15px; height: 15px; color: var(--mint-d); flex: none; }
/* الخطوة الجارية: دوّارة بحجم علامة الصح وبلون الأزرار */
.bub .steps li .thr-spin { width: 12px; height: 12px; margin: 0 1.5px; border-width: 1.5px; border-top-color: var(--slate); flex: none; }
/* الخطوة المفصّلة: زمنها آخر سطرها، وما عملته سطوراً تحتها. والقائمة كلها في بطاقة */
.bub .steps.card { border-inline-start: 1px solid var(--line); margin-inline-start: 0; padding: 12px 14px; gap: 10px; }
.bub .steps li { flex-wrap: wrap; }
.bub .steps li > .secs { margin-inline-start: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
/* في البطاقة: اسم الوحدة عنوان غامق وزمنها بلونه، وما عملته تحتها بخط عادي */
.bub .steps.card > li { font-weight: 700; color: var(--ink); }
.bub .steps.card > li > .secs { color: var(--ink); font-size: 13px; }
.bub .steps.card .st-lines { font-weight: 500; color: var(--muted); }
.bub .steps .st-lines { flex-basis: 100%; list-style: none; margin: 0; padding: 0; padding-inline-start: 19px; display: grid; gap: 3px; }
.bub .steps .st-lines li { display: block; }
/* محادثة العقل التجريبية: قائمة الإصدارات واختيار النموذج لكل وحدة في الرأس، واسم المتجر بجانبهما */
.mind-top { display: flex; align-items: center; gap: 10px; position: relative; }
.mind-top .dd-btn { width: auto; min-width: 0; gap: 6px; }
.mind-versions { inset-inline: 0 auto; min-width: 150px; max-height: none; }
/* الإصدارات القادمة بلون أخف بكثير، لا بشفافية: حركة ظهور القائمة تثبّت الشفافية على 1 */
.mind-versions button:disabled { opacity: 1; color: color-mix(in srgb, var(--faint) 40%, transparent); }
.mind-pick { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 30; margin: 0; padding: 12px 14px; display: grid; gap: 8px; min-width: 520px; box-shadow: 0 12px 32px rgba(17, 24, 22, .12); }
/* مخطط طبقات الإصدار بألوان خطة Mind نفسها، على سطحها الفاتح في الوضعين */
.mdl.mind-plan { width: min(860px, calc(100vw - 32px)); padding: 22px; }
.mdl.mind-plan h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.mind-ly { --surface: #F5F5F5; --line: #DCDCDC; --ink: #111; --muted: #6B6B6B; --green: #3FCB88; --on-green: #111; --layer-bg: #111; --layer-fg: #fff; --layer-sub: #BDBDBD; --off: #B8B8B8; --bg: #fff; margin-top: 12px; }
.mind-ly .diagram { background: var(--surface); border-radius: 16px; padding: 16px; overflow-x: auto; }
/* تباعد الكلمات الموروث من الصفحة يجعل بعض المتصفحات ترسم كلمات نص SVG العربي قطعاً من اليسار: «رسالة التاجر» تنقلب وتلتصق */
.mind-ly .diagram text { word-spacing: normal; }
.mind-ly svg { display: block; width: 100%; min-width: 560px; height: auto; }
.mind-ly .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 10px; }
.mind-ly .legend i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: middle; }
.mind-ly .legend .base { background: #111; }
.mind-ly .legend .new { border: 1.8px solid #3FCB88; }
.mind-ly .legend .later { border: 1px dashed #B8B8B8; }
.mind-row { display: grid; grid-template-columns: minmax(64px, 116px) 1fr 1fr 0.8fr; align-items: center; gap: 8px; }   /* اسم الطبقة يلتف في عموده: «التفكير والقواعد والأنظمة» */
/* قوائم اختيار النموذج تملأ خانتها، فتصطفّ أعمدة الصفوف مهما اختلف طول الاسم (في الرأس القائمة بعرض نصّها) */
.mind-pick .dd-btn { width: 100%; }
label.mind-row { display: flex; gap: 6px; cursor: pointer; }
/* جواب المقارنة تحت رد العقل: تابع له من فوق، ومفصول عن الرسالة التالية بمسافة الرسائل نفسها */
.mind-under { margin: 2px 0 12px; }   /* الرسالة بعده تبدأ بعشرة فوقها، فالمجموع مسافة الرسائل نفسها */
.mind-under > .tiny { margin: 0 0 8px; }
.mind-under > .card { margin: 0; }
.mind-under > summary { cursor: pointer; }
@media (max-width: 640px) {
    .mind-top { gap: 6px; }
    .mind-top > .tiny { display: none; }   /* اسم المتجر لا يتّسع بجانب الأزرار الثلاثة */
    .mind-top .dd-btn { padding-inline: 10px; }
    .mind-pick { position: fixed; inset-inline: 12px; top: 64px; min-width: 0; }
    .mind-row { grid-template-columns: 1fr 1fr 1fr; }
    .mind-row > .tiny { grid-column: 1 / -1; }
}
/* الرد الذي لم يبدأ نصّه: سطر «يقرأ…» على مستوى صورة المحاسب (بالقياس في المتصفح) */
.bub .ava.side + .thinking { margin-top: 0; min-height: 26px; }

/* حقل وزرّ في طرفه (توليد كود الكوبون): الزرّ داخل الحقل فلا يقفز عند الطيّ */
.inp-gen { position: relative; display: block; }
.inp-gen .inp { width: 100%; padding-inline-end: 72px; }
.inp-gen button { position: absolute; inset-inline-end: 6px; top: 50%; }

/* كود وبجانبه زرّ نسخ (CopyCode) */
.cp-code { display: inline-flex; align-items: center; gap: 6px; }
.cp-code-b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.cp-code-b.on { background: var(--mint-soft); color: var(--mint-d); }
@media (hover: hover) {
.cp-code-b:hover { background: var(--mint-soft); color: var(--mint-d); } }
.cp-code-b svg { width: 15px; height: 15px; }

/* «الحالة» ومفتاحها بجانبها في نماذج الإضافة والتعديل */
.sw-fld { display: flex; align-items: center; gap: 12px; font-weight: 600; }

/* حقل بعرض النموذج كله داخل شبكة العمودين (تاريخ انتهاء الكوبون) */
.grid2 > .span2 { grid-column: 1 / -1; }
/* نافذة الكوبون: مسافة بين صفوف الحقول فلا تبدو متلاصقة */
.mdl .grid2 { row-gap: 14px; }
/* زرّ داخل الحقل ثابت لا يتحرك عند المرور (توليد الكود) */
.inp-gen button { transform: translateY(-50%); background: var(--slate); }
@media (hover: hover) {
.inp-gen button:hover { transform: translateY(-50%); background: var(--slate); } }

/* ── نوافذ السوبر: الحفظ يساراً والإلغاء يميناً ──
 * الزر الأساسي أولاً في الكود كما هو، والعكس بالعرض وحده في السوبر؛ لوحة التاجر كما هي.
 * و`.card-act` معكوس أصلاً في كل مكان. */
body.super .mask .mdl-act { flex-direction: row-reverse; }

/* ── المحادثة ──
 * رد المحاسب بصورته واسمه ونصّه الحرّ بلا خلفية، ورسالة التاجر فقاعة رمادية كفقاعة كلود:
 * أغمق من رأس الجدول بقدر ما الأرضية أغمق من البطاقة البيضاء، فيبدوان درجة واحدة.
 * أدوات الرسالة (الوقت · النسخ · التقييم) تظهر بمرور الفأرة، وفي آخر رسالة دائماً، وعلى اللمس دائماً. */
.msg .ava { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px; background: var(--mint); overflow: hidden; }
.msg .ava .ava-face { display: block; width: 100%; height: 100%; border-radius: inherit; }
.msg.ai .bub { position: relative; }
.msg .ava.side { position: absolute; inset-inline-start: -40px; top: 2px; }
/* الصورة الجانبية تخرج 40px عن عمود المحادثة، فتحتاج هامشاً حوله. حيث لا يتسع (الجوال، والآيباد طولياً، والآيباد عرضياً
 * والقائمة الجانبية مثبّتة تأخذ 280px) تصعد فوق الرد، وإلا قصّتها حافة الشاشة أو غطّتها القائمة. */
@media (max-width: 800px), (min-width: 901px) and (max-width: 1100px) { .msg .ava.side { position: static; display: grid; margin-bottom: 6px; } }
/* رسالة التاجر الطويلة كفقاعة Claude Code: مطويّة على ستة أسطر يخفت آخرها في لون الفقاعة، و«عرض المزيد» نصّاً داخلها */
/* أسطر التاجر كما كتبها: قائمة بأسطر أو كود ملصوق لا يصير سطراً واحداً، والسطر الطويل بلا مسافات لا يخرج من الفقاعة */
.thread .msg.me .me-tx p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.thread .msg.me .me-tx p.clamp { position: relative; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.thread .msg.me .me-tx p.fold::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3.2em; background: linear-gradient(to bottom, transparent, var(--bubble) 85%); pointer-events: none; }
.me-more { display: block; margin-top: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; }
@media (hover: hover) {
.me-more:hover { color: var(--ink); } }
.thread .msg { gap: 12px; margin-bottom: 22px; }
/* كل شيء في اليمين كمحادثة كلود بالعربية: فقاعة التاجر، وصورة المحاسب واسمه ونصّه وأدواته */
.thread .msg.me .bub { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; }
.thread .msg.me .me-tx { max-width: min(80%, 560px); margin: 0; padding: 10px 16px; border-radius: 16px; background: var(--bubble); color: var(--ink); }
.msg.me .me-tx a { color: var(--t-blue); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.agent-md a.md-a { color: var(--t-blue); text-decoration: underline; text-underline-offset: 3px; }

.thread .rate { gap: 2px; margin-top: 4px; min-height: 30px; opacity: 0; transition: opacity .15s; }
.thread .msg:hover .rate, .thread .msg:focus-within .rate, .thread .msg.last .rate { opacity: 1; }
@media (hover: none) { .thread .rate { opacity: 1; } }
.thread .rate :is(button, a) { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); }
@media (hover: hover) {
.thread .rate :is(button, a):hover { background: var(--canvas); color: var(--ink); } }
.thread .rate :is(button, a) svg { width: 16px; height: 16px; }
.thread .rate button.on { background: none; border: 0; }
.thread .rate time { padding-inline: 6px; font-size: 12px; color: var(--faint); white-space: nowrap; }
.thread .msg.ai .rate time { order: 9; }

/* بطاقة حالة كبطاقة كلود (رد لم يكتمل · نفد الرصيد): عنوان على خلفية رمادية ثم السبب وزرّه */
.st-card { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.st-h { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--head-bg); font-weight: 600; color: var(--ink); }
.st-h svg { width: 18px; height: 18px; flex: none; color: var(--ink); }
.st-b { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
.st-b p { margin: 0; color: var(--ink-2); }

/* المرفقات كمرفقات كلود: صورة مصغّرة، وبطاقة ملف بنوعه وزرّ تنزيل. مرفقات التاجر فوق فقاعته */
.thread .msg.me .bub > :is(.mf-imgs, .mf-docs) { order: -1; margin: 0 0 8px; }
.mf-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mf-img { display: block; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--canvas); cursor: zoom-in; }
.mf-img img { display: block; width: auto; max-width: 240px; height: auto; max-height: 240px; object-fit: contain; }
.mf-fp { display: none; }
.mf-docs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.msg.me .mf-docs { align-items: flex-start; }
/* بطاقات الرد كلها بعرض واحد: ملف المحاسب كبطاقة الرقم والمستند والحالة. ومرفق التاجر يبقى على قدّه */
.msg.ai .mf-doc { width: 100%; }
.mf-doc { display: flex; align-items: center; gap: 10px; width: min(100%, 380px); padding-inline-end: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.mf-open { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.mf-open:disabled { cursor: default; }
.mf-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 9px; background: var(--mint-soft); color: var(--mint-ink); }
.mf-ic svg { width: 20px; height: 20px; }
.mf-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mf-tx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mf-tx i { font-size: 12px; font-style: normal; color: var(--faint); }
.mf-dl { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none; }
@media (hover: hover) {
.mf-dl:hover { background: var(--canvas); } }
.mf-dl svg { width: 15px; height: 15px; }

/* جداول الرد برأس الجدول العادي في المنصة: خلفية الرأس ونص داكن عريض */
.agent-md .md-t th,
.agent-md .card .ct th { background: var(--head-bg); color: var(--ink-2); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.agent-md .card .ct td { padding: 9px 12px; }
/* أرقام الجدول تتوسّط عمودها بعرض خانات ثابت، فتصطف المبالغ والأعداد تحت عناوينها */
.agent-md .card .ct td.num,
.agent-md .card .ct th.num { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* رأس جدول البطاقة شريط بحواف دائرية وحده، بلا خط تحته */
.agent-md .card .ct { border-collapse: separate; border-spacing: 0; }
.agent-md .card .ct thead th { border-bottom: 0; }
.agent-md .card .ct thead th:first-child { border-start-start-radius: var(--r-m, 10px); }
.agent-md .card .ct thead th:last-child { border-start-end-radius: var(--r-m, 10px); }
.agent-md :is(.md-t, .ct) :is(th, td).num { text-align: center; }

/* بطاقة الأرصدة: حساب بأيقونته ومبلغه، بلا أشرطة */
/* ما بعد الستة صفوف مطويّ تحت «عرض الباقي»: يُفتح في مكانه */
.agent-md .card .rows-more summary { cursor: pointer; list-style: none; font-size: 12.5px; color: var(--muted); padding: 6px 0 2px; }
.agent-md .card .rows-more summary::-webkit-details-marker { display: none; }
.agent-md .card .rows-more[open] summary { display: none; }
.agent-md .card .rows.bal .row { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
.agent-md .card .rows.bal .row .vl { margin: 0; }
.agent-md .card .rows.bal .row .nm { flex: 0 1 auto; min-width: 0; }
.agent-md .card .rows.bal svg.bank-ic { padding: 2px; color: var(--muted); }

/* بطاقة المستند في الرد: التفاصيل في عمودين (عنوانها فوق قيمتها) فتقصر البطاقة، والإجمالي سطر واحد بارز.
 * والمقترح سؤال كبير وزرّاه واضحان في بداية السطر */
.card.mc { padding: 14px 16px; }
.card.mc .mc-top h4 { display: flex; align-items: center; gap: 8px; }
.card.mc .mc-ic { flex: none; width: 18px; height: 18px; color: var(--muted); }
.card.mc .mc-q { font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.card.mc .mc-st { flex: none; gap: 6px; }
.card.mc .mc-st > svg { width: 13px; height: 13px; }
.card.mc .mc-st .tick { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--mint); }
.card.mc .mc-st .tick svg { width: 10px; height: 10px; }
.card.mc .rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; margin-top: 10px; border-top: 0; }
.card.mc .row { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 0; border-bottom: 0; font-size: 13px; }
.card.mc .row .nm { font-size: 12px; color: var(--faint); }
.card.mc .row .vl { margin: 0; font-weight: 600; color: var(--ink); }
.card.mc .sum-line { margin-top: 10px; padding-top: 10px; font-size: 13px; }
.card.mc .sum-line .g { margin: 0; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--canvas); }
.mc-ask { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mc-ask :is(.b1, .b2) { height: 42px; min-width: 96px; padding: 0 22px; font-size: 14.5px; justify-content: center; }

/* الكلمة المبحوث عنها في المحادثة: أصفر كبحث المتصفح، والنص بلونه */
::highlight(thr-find), ::highlight(thr-jump) { background-color: var(--hl); color: inherit; }

/* تفاصيل المهمة المنتهية: المطلوب · النتيجة · الإجراءات بطاقات بإطار، وأيقونة حالة لكل إجراء */
.tkd-sec { margin-top: 14px; border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; }
.tkd-sec h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tkd-sec h4 svg { width: 18px; height: 18px; }
.tkd-sec.ok h4 svg { color: var(--mint-ink); }
.tkd-sec p { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); overflow-wrap: anywhere; }
.tkd-sec p + .mf-docs, .tkd-sec p + .mf-imgs { margin-top: 10px; }
/* حاوية لقائمة الملفات في التفاصيل: MsgFiles يصغّر زر التنزيل إلى أيقونته حين تضيق (@container)، ولا يمس ملفات المحادثة */
.tkd-sec .mf-docs { container-type: inline-size; }
.tkd-sec ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
.tkd-steps { list-style: none; padding: 0 !important; gap: 0 !important; }
.tkd-steps li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.tkd-steps li:first-child { border-top: 0; padding-top: 0; }
.tkd-st { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--soft); color: var(--muted); margin-top: 2px; }
.tkd-st svg { width: 13px; height: 13px; }
.tkd-steps li.done .tkd-st { background: var(--mint-soft); color: var(--mint-ink); }
.tkd-steps li.rejected .tkd-st { background: var(--bad-soft); color: var(--bad-ink); }
.tkd-tx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tkd-tx em { font-style: normal; color: var(--faint); font-size: 12px; }
.tkd-ref, .tkd-at { flex: none; font-size: 12px; color: var(--faint); margin-top: 3px; }
@media (max-width: 640px) {
    .tkd-steps li { flex-wrap: wrap; }
    .tkd-ref, .tkd-at { flex-basis: 100%; padding-inline-start: 30px; margin-top: 0; }
}

/* حقل يتبع اتجاه ما يُكتب فيه (`dir="auto"`) يُحسب فارغاً من اليسار، فيظهر نص المثال يساراً: وهو فارغ يبقى من اليمين كبقية الحقول. */
html[dir="rtl"] input[dir="auto"]:placeholder-shown, html[dir="rtl"] textarea[dir="auto"]:placeholder-shown { direction: rtl; }

/* نص لقارئ الشاشة وحده. الهامش السالب يبقيه داخل حاويته: بدونه يزيد آخرها 1px فيظهر شريط تمرير */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* زر اللغة في الدخول والتسجيل: نص أخضر بأيقونة بلا إطار ولا خلفية في رأس البطاقة، في يسارها فوق الشعار. وفي قائمة المستخدم بند عادي. */
.lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mint-ink);
    cursor: pointer;
}

.lang-pill svg { width: 16px; height: 16px; }
/*
 * زر اللغة في رأس الصفحة لا في البطاقة: مكانه واحد في الدخول والتسجيل ونسيت كلمة المرور مهما اختلف طول البطاقة.
 * الارتفاع من توسيط بطاقة الدخول القياسية، والجانب عند حافة عمود النموذج البعيدة عن اللوحة: نصف الصفحة ونيّف، والهامش 50px.
 */
.auth-split { position: relative; }
.auth-split > .lang-pill { position: absolute; top: 14px; inset-inline-end: 20px; }
@media (min-width: 901px) {
    .auth-split > .lang-pill { top: max(16px, calc((100dvh - var(--auth-card-h)) / 2 - 70px)); inset-inline-end: calc(49.2% + 50px); }
}

/* حقل بلغتين: زرّ اللغة داخل الحقل في طرفه الأخير، ومنسدلته من قائمة المنصة نفسها. */
.lf { position: relative; }
/* فراغ الزرّ في طرف الحقل بحسب اتجاه الصفحة لا اتجاه اللغة المختارة: الإنجليزي في صفحة عربية
   يُحاذى يميناً كبقية الحقول، فيبدأ من طرف الحقل كالعربي ولا يدفعه فراغ الزرّ للوسط */
html[dir="rtl"] .lf .inp { padding-left: 74px; padding-right: 14px; }
html[dir="ltr"] .lf .inp { padding-right: 74px; padding-left: 14px; }
.lf.ml .inp { height: auto; min-height: 96px; padding-block: 12px; resize: vertical; line-height: 1.7; }
.lf-pick { position: absolute; inset-inline-end: 6px; top: 6px; }
.lf-chip {
    display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--control);
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.lf-chip svg { width: 15px; height: 15px; color: var(--muted); }
.lf-chip[aria-expanded="true"] { background: var(--mint-soft); border-color: var(--mint-line); }
@media (hover: hover) {
.lf-chip:hover { background: var(--mint-soft); border-color: var(--mint-line); } }
.lf-chip.bad { border-color: var(--bad-ink); }
.lf-chip:disabled { opacity: .5; cursor: default; }
.lf-menu button { display: flex; align-items: center; gap: 10px; }
.lf-menu img { border-radius: 3px; box-shadow: 0 0 0 1px var(--line); flex: none; }
.lf-menu span { flex: 1; }
.lf-menu .lf-tick { width: 16px; height: 16px; color: var(--slate-d); flex: none; }

/* نافذة الإعدادات: شريط أقسام أبيض بعنوانه وبحثه، والمحتوى على أرضية رمادية ببطاقات بيضاء.
   القسم المختار بخلفية الأرضية كالمرور، وأيقونته فضية كأيقونات اللوحة الزخرفية، وعلى الجوال تصير الأقسام شريطاً أفقياً فوق المحتوى. */
.mdl.set { width: min(1040px, 100%); height: min(720px, calc(100dvh - 48px)); padding: 0; border-radius: var(--r-l); display: grid; grid-template-columns: 280px 1fr; overflow: hidden; text-align: start; }
.set-nav { display: flex; flex-direction: column; padding: 28px 0 16px; border-inline-end: 1px solid var(--line); background: var(--paper); overflow-y: auto; }
.set-title { font-size: 20px; font-weight: 700; color: var(--ink); padding: 0 24px; margin: 0 0 18px; }
.set-find { position: relative; display: block; margin: 0 20px 20px; }
.set-find svg { position: absolute; inset-inline-start: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); fill: none; pointer-events: none; }
.set-find input { width: 100%; height: 46px; padding: 0 14px; padding-inline-start: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font: inherit; font-size: 14px; color: var(--ink); }
.set-find input:focus { outline: none; border-color: var(--mint-d); box-shadow: 0 0 0 3px var(--mint-soft); }
.set-list { border-top: 1px solid var(--line); padding-top: 18px; }
.set-group { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 24px 8px; margin: 0; }
.set-none { font-size: 13px; color: var(--muted); padding: 8px 24px; margin: 0; }
.set-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 24px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); cursor: pointer; text-align: start; }
.set-nav-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; }
.set-nav-ic img { width: 100%; height: 100%; object-fit: cover; }
.set-nav-ic:has(svg) { background: var(--canvas); border: 1px solid var(--line); }
.set-nav-ic svg { width: 18px; height: 18px; color: var(--muted); fill: none; }
@media (hover: hover) {
.set-item:hover { background: var(--canvas); } }
.set-item.on { background: var(--canvas); font-weight: 600; }
/* حلقة التركيز للوحة المفاتيح وحدها: النقر بالفأرة لا يرسم إطاراً أخضر حول القسم */
.set-item:focus { outline: none; }
.set-item:focus-visible { box-shadow: inset 0 0 0 2px var(--mint-line); }
.set-body { padding: 28px; background: var(--canvas); overflow-y: auto; overscroll-behavior: contain; }
.set-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.set-head h3 { font-size: 20px; font-weight: 700; margin: 0; }
/* بطاقات القسم تصعد متتالية عند الفتح وعند كل تبديل، بحركة دخول الصفحات نفسها */
.set-pane > * > *, .set-pane > .panel { animation: step-in .4s cubic-bezier(.2, .7, .3, 1) backwards; }
.set-pane > :nth-child(2), .set-pane > * > :nth-child(2) { animation-delay: .05s; }
.set-pane > :nth-child(3), .set-pane > * > :nth-child(3) { animation-delay: .1s; }
.set-x { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); cursor: pointer; }
.set-x svg { width: 16px; height: 16px; }
@media (hover: hover) {
.set-x:hover { background: var(--line-2); } }
.set-body .panel { margin: 0 0 16px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: none; }
.set-body .panel:last-child { margin-bottom: 0; }
.set-body .panel h3 { font-size: 15px !important; margin-bottom: 14px !important; }
.set-body .panel > .sc-row:first-child { padding-top: 0; }
.set-body .panel > .sc-row:last-child { padding-bottom: 0; }
.set-body .sc-row { padding: 18px 0; gap: 20px; }
.set-body .sc-row .tx b { font-size: 15px; }
.set-body .sc-row .tx i { font-size: 13px; margin-top: 4px; }
.set-body .tabs { margin: 0; padding: 3px; border-radius: 11px; }
.set-body .tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 8px; }
.set-body .tab svg { width: 16px; height: 16px; }
.set-body .tab img { width: 20px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.set-body .grid2 { margin-top: 0; row-gap: 14px; }
.set-body .grid2 .fld { margin-bottom: 0; }
.set-body .fld label { margin-bottom: 6px; }
.set-body .inp { height: 44px; }
.set-body .panel-act { margin-top: 16px; }

/* رأس الملف الشخصي كما في كلود داخل بطاقة البيانات: الصورة زر يظهر قلمه بالمرور، وقائمته رفع أو شخصية أو حذف.
   ورقم المنشأة سطر في العام مع نسخه */
.acc-head { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.acc-me { display: flex; align-items: center; gap: 16px; }
.acc-me .tx { min-width: 0; }
.acc-me .tx b { display: block; font-size: 17px; font-weight: 700; }
.acc-me .tx i { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 4px; text-align: start; }
.acc-pic { position: relative; flex: none; }
.acc-av { position: relative; display: block; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--soft); cursor: pointer; }
.acc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-av.busy { opacity: .55; pointer-events: none; }
.acc-pen { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 45%, transparent); color: var(--paper); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.acc-pen svg { width: 20px; height: 20px; fill: none; }
.acc-av:hover .acc-pen, .acc-av:focus-visible .acc-pen { opacity: 1; }
/* قائمة المكتبة مثبّتة للشاشة في الجداول؛ هنا تُعلَّق تحت الصورة */
.acc-pic .menu { position: absolute; top: calc(100% + 8px); left: auto; right: auto; inset-inline-start: 0; }
.acc-pick { display: flex; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.acc-preview { width: 88px; height: 88px; flex: none; border-radius: 50%; }
.acc-pick-opts { flex: 1; min-width: 0; display: grid; gap: 10px; align-content: start; }
.acc-pick-opts b { font-size: 13px; font-weight: 600; color: var(--muted); }
.acc-people, .acc-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.acc-people button { width: 52px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 50%; overflow: hidden; background: none; cursor: pointer; }
.acc-people button.on { border-color: var(--mint-d); }
.acc-people img { width: 100%; height: 100%; display: block; }
.acc-colors button { width: 28px; height: 28px; padding: 0; border: 2px solid var(--paper); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.acc-colors button.on { box-shadow: 0 0 0 2px var(--mint-d); }
.av-mint { background: var(--av-mint); } .av-teal { background: var(--av-teal); } .av-sky { background: var(--av-sky); } .av-lilac { background: var(--av-lilac); }
.av-rose { background: var(--av-rose); } .av-peach { background: var(--av-peach); } .av-sand { background: var(--av-sand); } .av-gray { background: var(--av-gray); }
.acc-pick-act { display: flex; gap: 8px; margin-top: 4px; }

/* الأجهزة كجدول كلود: الجهاز والعنوان والدخول وآخر نشاط، والخروج في طرف كل صف */
.acc-sess-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.acc-sess-head .b2 svg { width: 15px; height: 15px; margin-inline-end: 6px; fill: none; }
.acc-sess-head h3 { margin: 0 !important; }
.acc-sess-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
/* الصفوف منفصلة بفراغ صغير، فلا يلتصق صف الجهاز الحالي المظلَّل بخط رأس الجدول وتظهر استدارته كاملة */
.acc-sess-t { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 13.5px; }
.acc-sess-t th { padding: 10px 8px; border-bottom: 1px solid var(--line-2); font-weight: 500; color: var(--muted); text-align: start; white-space: nowrap; }
.acc-sess-t td { padding: 14px 8px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
/* الجهاز والنقاط في سطر، والتاريخ ينكسر حين يضيق العرض فلا يخرج الجدول من بطاقته */
.acc-sess-t td:is(:first-child, :last-child) { white-space: nowrap; }
.acc-sess-t td:not(:first-child) { color: var(--muted); }
.acc-sess-t tr.now td { background: var(--canvas); border-bottom-color: transparent; }
.acc-sess-t tr.now td:first-child { padding-inline-start: 14px; border-start-start-radius: 12px; border-end-start-radius: 12px; }
.acc-sess-t tr.now td:last-child { border-start-end-radius: 12px; border-end-end-radius: 12px; }
.acc-dev { display: inline-flex; align-items: center; gap: 10px; }
.acc-dots { position: relative; display: inline-block; }
/* قائمة المكتبة مثبّتة للشاشة في الجداول؛ هنا تُعلَّق تحت زرها بفراغ */
.acc-dots .menu { position: absolute; top: calc(100% + 8px); left: auto; right: auto; inset-inline-end: 0; }
.acc-sess-t :is(th, td):first-child { padding-inline-start: 0; }
/* النقاط بمسافة عن حافة الصف المظلَّل، والقائمة بفراغ تحت زرها */
.acc-sess-t :is(th, td):last-child { padding-inline-end: 8px; text-align: end; }
.acc-sess-t tr:last-child td { border-bottom: 0; }
.acc-sess-t td.acc-sess-none { padding: 28px 0; text-align: center; color: var(--muted); }

@media (max-width: 720px) {
    .mask:has(.mdl.set) { padding: 0; }
    .mdl.set { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100dvh; max-height: none; border-radius: 0; padding-top: env(safe-area-inset-top); }
    /* الجوال: الأقسام شريط اختيار بعرض الشاشة، والعنوان والبحث يختفيان، وكل اختيار (اللغة · المظهر) بعرض سطره */
    .set-nav { padding: 10px 12px; border-inline-end: 0; border-bottom: 1px solid var(--line); overflow: visible; }
    .set-title, .set-find, .set-group { display: none; }
    .set-list { display: flex; gap: 4px; border-top: 0; padding-top: 0; }
    .set-item { flex: 1; justify-content: center; padding: 10px 12px; border-radius: 10px; white-space: nowrap; }
    .set-body { padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
    .set-body .panel { padding: 16px; }
    .set-body .sc-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .set-body .sc-row .ro { margin-inline-start: 0; max-width: 100%; }
    .set-body .sc-row .tabs { display: flex; width: 100%; }
    .set-body .sc-row .tab { flex: 1; justify-content: center; padding: 0 8px; }
    .acc-pick { flex-direction: column; align-items: center; }
    .acc-sess-t :is(th, td):nth-child(2), .acc-sess-t :is(th, td):nth-child(3) { display: none; }
}
/* شعار المنصة في مربّع الأيقونة نفسه (رقما واتساب المنصة) */
.sc-ic img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

/* شريط تعريف أعلى القسم بلون العلامة وعلامتها الكبيرة الخفيفة (مصادر الملفات في التطبيقات) */
.band {
    position: relative; overflow: hidden; display: flex; gap: 18px; align-items: center; min-height: 150px; padding: 32px 30px;
    border-radius: 18px; border: 1px solid var(--mint-line);
    background: linear-gradient(to right, var(--band-from), var(--band-to));
}
/* الفاتح من جهة النص والأغمق من جهة العلامة */
[dir=rtl] .band { background: linear-gradient(to left, var(--band-from), var(--band-to)) }
.band-star { position: absolute; inset-inline-end: 4%; top: 50%; width: 230px; height: 230px; transform: translateY(-50%); fill: var(--band-mark); opacity: .16; pointer-events: none }
/* العلامة ثابتة كنقش، والشريط وحده يدخل مع الصفحة */
.band { animation: band-in .7s cubic-bezier(.2, .8, .2, 1) .1s both }
@keyframes band-in { from { opacity: 0; transform: translateY(18px) scale(.97) } }
.band > :not(.band-star) { position: relative }
.band-tx { flex: 1; display: grid; gap: 6px; min-width: 0; max-width: 620px }
.band-tx b { font-size: 21px; font-weight: 800; line-height: 1.4; color: var(--band-ink) }
.band-tx i { font-style: normal; font-size: 14px; line-height: 1.8; color: var(--band-ink) }
@media (max-width: 640px) {
    .band { align-items: flex-start; gap: 14px; padding: 22px 18px }
    .band-tx b { font-size: 18px }
    .band-star { width: 150px; height: 150px; inset-inline-end: -24px }
}