/* ═══════════════════════════════════════════════════════════════════════════
   contribute.css — شاشة «مساهمات الكتالوج»

   ⚠️ ملفّ ساكن يُربط في App.razor ولا يمرّ ببناء Tailwind — على نمط delivery.css.
      الأصناف كلّها ببادئة ctb- أو داخل .ctb فلا تصطدم بشيء في اللوحة.

   التصميم منقول من النموذج المعتمد (claude.ai/artifact/5bYWDPAYjVLrPyeWX681EU):
   أسطح ناعمة بلا حدود، وزوايا كبيرة، وظلّ واحد خفيف، وألوان حالة من عائلة واحدة —
   التشبّع والإضاءة ثابتان والصبغة وحدها تتغيّر.

   الرموز الأساسية مأخوذة من رموز اللوحة (app.css) فيتبع الوضع الليليّ تلقائياً؛
   وألوان الحالة وحدها تُعاد تعريفها في الليليّ أسفل الملفّ.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ الرموز على body لا على .ctb: التنبيه والشريط العائم position: fixed، ورمزٌ
   معرَّف على .ctb يصلهما — لكن لافتة إعادة الاتصال شقيقةٌ لا ابنة، فعُرِّفت هنا.

   ⭐ القيم حرفيّاً من النموذج المعتمد لا من رموز اللوحة: رُبطت أوّلاً بـ--primary و--muted
   فقاس فحص المطابقة 98 فرقاً (الأزرق 0,105,224 بدل 31,92,224، والرماديّات كلّها أغمق). */
body:has(.ctb) {
    --ctb-bg: #f4f6fb;
    --ctb-surface: #ffffff;
    --ctb-tonal: #eef2f9;
    --ctb-tonal-2: #e4e9f4;
    --ctb-line: #e5e9f1;
    --ctb-line-2: #cfd6e3;
    --ctb-ink: #121a2f;
    --ctb-ink-2: #3f4a63;
    --ctb-ink-3: #6b7590;

    --ctb-brand: hsl(221 76% 50%);
    --ctb-brand-hover: hsl(221 76% 43%);
    --ctb-brand-tint: hsl(221 76% 95%);
    --ctb-brand-tint-2: hsl(221 76% 90%);
    --ctb-brand-line: hsl(221 60% 80%);
    --ctb-on-brand: #ffffff;

    --ctb-ok: hsl(152 55% 30%);
    --ctb-ok-tint: hsl(152 55% 94%);
    --ctb-ok-tint-2: hsl(152 50% 86%);
    --ctb-warn: hsl(38 70% 30%);
    --ctb-warn-tint: hsl(38 80% 93%);
    --ctb-bad: hsl(4 60% 38%);
    --ctb-bad-tint: hsl(4 70% 95%);
    --ctb-bad-tint-2: hsl(4 65% 88%);
    --ctb-info: hsl(200 60% 32%);
    --ctb-info-tint: hsl(200 70% 95%);
    --ctb-hot: hsl(14 70% 38%);
    --ctb-hot-tint: hsl(14 80% 95%);
    --ctb-mark: hsl(48 95% 80%);
    --ctb-dock-bg: rgba(255, 255, 255, .86);
    --ctb-nav-bg: rgba(255, 255, 255, .94);

    --ctb-r-xl: 22px;
    --ctb-r-l: 16px;
    --ctb-r-m: 12px;
    --ctb-r-s: 9px;
    --ctb-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --ctb-sh-1: 0 1px 2px rgba(18, 26, 47, .05), 0 1px 1px rgba(18, 26, 47, .03);
    --ctb-sh-2: 0 2px 6px rgba(18, 26, 47, .06), 0 12px 32px -14px rgba(18, 26, 47, .22);
    --ctb-sh-3: 0 -4px 24px rgba(18, 26, 47, .08), 0 8px 40px -10px rgba(18, 26, 47, .35);
}

/* خلفية الصفحة نفسها بلون النموذج في غلاف الموظّف: اللوحة ترسم --background (98%) خلف
   البطاقات، والنموذج #f4f6fb. يُعاد تعريف الرمز لهذه الصفحة وحدها وفي الفاتح وحده. */
html:not(.dark) body:has(.ctb--staff) { --background: 223 47% 97%; }

/* ═══════════════ الجسم ═══════════════ */

.ctb {
    color: var(--ctb-ink);
    font-size: 14px;
    line-height: 1.55;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    max-width: 1120px;
    margin-inline: auto;
    padding-bottom: 104px;        /* لا يغطّي الشريطُ العائم آخرَ صفّ */
}
.ctb > * { min-width: 0; }

/* app.css تفرض text-align: right على الصفحة؛ النموذج start. في RTL سواء، ويفترقان في كل
   كتلةٍ يساريّة (الأرقام): start هناك يسار. قاسه فحص المطابقة في 55 عنصراً. */
.ctb, .ctb-shell, .ctb-toast,
.ctb input, .ctb td, .ctb-badge, .ctb-kv-v { text-align: start; }
.ctb, .ctb-shell, .ctb-toast { letter-spacing: normal; }
.ctb h1, .ctb h2 { margin: 0; font-weight: 600; text-wrap: balance; }
.ctb ul { list-style: none; margin: 0; padding: 0; }

/* ⚠️ app.css تفرض min-height: 44px على كل button وinput و[role=button] (مساحة لمس عامّة).
   قِيس أثرها هنا: زرّ التصويت 36×44 بيضاويّ، وحقل البحث 44 بدل 32. المحدّد العامّ عنصريّ
   الوزن فيغلبه صنفٌ واحد — والارتفاعات الفعلية معرّفة على كل عنصر أدناه. */
.ctb button, .ctb input, .ctb [role="button"], .ctb-shell button { min-height: 0; }

.ctb-num {
    font-family: var(--ctb-mono);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
    letter-spacing: .01em;
}
.ctb-muted { color: var(--ctb-ink-3); }

/* ─── الرأس: الاسم، والتبويبات، والنقاط ─── */
.ctb-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.ctb-brand { display: flex; align-items: center; gap: 10px; }
/* في غلاف الموظّف يسمّي شريطُ لوحة التحكّم العلويّ الصفحةَ أصلاً، فالاسم هنا يتكرّر */
.ctb--staff .ctb-brand { display: none; }
.ctb-logo {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--ctb-brand);
    color: #fff;
    box-shadow: var(--ctb-sh-1);
}
.ctb-logo svg { width: 20px; height: 20px; }
.ctb-brand h1 { font-size: 17px; line-height: 1.2; }
.ctb-cap { font-size: 12px; color: var(--ctb-ink-3); line-height: 1.3; }

.ctb-score {
    position: relative;
    margin-inline-start: auto;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    background: var(--ctb-brand-tint);
    color: var(--ctb-brand);
    white-space: nowrap;
}
.ctb-score-star svg { width: 18px; height: 18px; display: block; }
.ctb-score-pts { font-weight: 700; font-size: 17px; min-width: 22px; text-align: center; transition: transform .25s; }
.ctb-score.is-bump .ctb-score-pts { transform: scale(1.22); }
.ctb-score-lbl { font-size: 11.5px; line-height: 1.15; }
.ctb-score-lbl small { display: block; font-size: 11px; color: var(--ctb-ink-3); }
.ctb-score-rank { font-size: 12px; color: var(--ctb-ink-2); border-inline-start: 1px solid var(--ctb-brand-tint-2); padding-inline-start: 10px; }
.ctb-score-flash {
    position: absolute;
    inset-inline-end: 10px;
    top: -6px;
    font-weight: 700;
    font-size: 14px;
    color: var(--ctb-ok);
    pointer-events: none;
    animation: ctb-float .9s ease-out forwards;
}
.ctb-score-flash.is-neg { color: var(--ctb-bad); }
@keyframes ctb-float { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-26px); } }

/* TeslaSegmented عامّ ويأخذ رموز اللوحة؛ داخل هذه الشاشة يلبس ألوان النموذج */
.ctb .tsl-seg { background: var(--ctb-tonal); }
.ctb .tsl-seg-btn { color: var(--ctb-ink-2); font-weight: 500; font-size: 14px; }
.ctb .tsl-seg-btn.is-active { background: var(--ctb-surface); color: var(--ctb-ink); font-weight: 600; box-shadow: var(--ctb-sh-1); }
.ctb .tsl-seg-count { background: var(--ctb-tonal-2); color: var(--ctb-ink-2); }
.ctb .tsl-seg-btn.is-active .tsl-seg-count { background: var(--ctb-brand-tint); color: var(--ctb-brand); }

/* app.css تفرض font-size: 16px !important على كل input لمنع تكبير iOS عند اللمس — تبقى على
   الأجهزة اللمسية، ويطابق حقل البحث النموذج (12px) على أجهزة الماوس وحدها */
@media (hover: hover) and (pointer: fine) {
    .ctb .ctb-psearch { font-size: 12px !important; }
}

/* ─── شارة البيانات التجريبية ─── */
.ctb-sample {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: var(--ctb-r-m);
    background: var(--ctb-warn-tint);
    color: var(--ctb-warn);
    font-size: 12.5px;
    font-weight: 500;
}
.ctb-sample-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ctb-warn); flex: none; }

/* ─── البطاقة والأزرار ─── */
.ctb-card {
    background: var(--ctb-surface);
    border-radius: var(--ctb-r-xl);
    box-shadow: var(--ctb-sh-1);
}
.ctb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding-inline: 16px;
    border: 0; border-radius: var(--ctb-r-m);
    font-weight: 600; font-size: 13.5px; white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, transform .1s;
}
.ctb-btn:active { transform: scale(.98); }
.ctb-btn svg { width: 16px; height: 16px; }
.ctb-btn--primary { background: var(--ctb-brand); color: var(--ctb-on-brand); }
.ctb-btn--primary:hover { background: var(--ctb-brand-hover); }
.ctb-btn--primary:disabled { opacity: .6; cursor: default; }
.ctb-btn--tonal { background: var(--ctb-tonal); color: var(--ctb-ink-2); }
.ctb-btn--tonal:hover { background: var(--ctb-tonal-2); }
.ctb-link { justify-self: start; border: 0; background: none; padding: 0; color: var(--ctb-brand); font-size: 12.5px; font-weight: 500; cursor: pointer; }

/* ─── الحالات: تحميل، فارغ، خطأ، مرحلة لاحقة ─── */
.ctb-state, .ctb-soon {
    display: grid; justify-items: center; gap: 8px;
    padding: 40px 20px;
    text-align: center;
    color: var(--ctb-ink-3);
    font-size: 13px;
}
.ctb-state b, .ctb-soon b { color: var(--ctb-ink-2); font-size: 14px; }
.ctb-soon-ic, .ctb-empty-ic {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 16px;
    background: var(--ctb-tonal);
    color: var(--ctb-ink-3);
}
.ctb-soon-ic svg, .ctb-empty-ic svg { width: 24px; height: 24px; }
.ctb-skel { display: block; width: 70%; height: 14px; border-radius: 7px; background: var(--ctb-tonal); animation: ctb-pulse 1.2s ease-in-out infinite; }
.ctb-skel--title { width: 40%; height: 26px; }
.ctb-skel--short { width: 45%; }
@keyframes ctb-pulse { 50% { opacity: .55; } }

/* ═══════════════ الطابور ورأس القطعة ═══════════════ */

.ctb-queue { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ctb-ink-2); }
.ctb-queue b { color: var(--ctb-ink); }
.ctb-ring { width: 34px; height: 34px; flex: none; }
.ctb-ring circle { fill: none; stroke-width: 3.5; }
.ctb-ring-bg { stroke: var(--ctb-tonal-2); }
.ctb-ring-fg { stroke: var(--ctb-brand); stroke-linecap: round; transition: stroke-dashoffset .5s; }

.ctb-part { padding: 20px 22px 16px; display: grid; gap: 12px; }
.ctb-part-row1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ctb-part-pn { justify-self: start; text-align: right; font-size: 30px; font-weight: 600; line-height: 1.05; }

.ctb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ctb-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ctb-tonal);
    color: var(--ctb-ink-2);
    font-size: 12px; font-weight: 500;
    white-space: nowrap;
}
.ctb-chip.is-brand { background: var(--ctb-brand-tint); color: var(--ctb-brand); }
.ctb-chip.is-hot { background: var(--ctb-hot-tint); color: var(--ctb-hot); font-weight: 600; }
.ctb-chip.is-miss { background: var(--ctb-warn-tint); color: var(--ctb-warn); }
.ctb-chip.is-hot::before, .ctb-chip.is-miss::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.ctb-descs { display: grid; gap: 5px; max-width: 86ch; }
/* العمود الثاني بعرض نصّه لا بعرض السطر: وصفٌ يبدأ بلاتينيّ («PLUG ASSY - SPARK بواجي…») سطره يساريّ
   (unicode-bidi: plaintext)، ففي عمودٍ بعرض السطر يصطفّ أقصى اليسار بعيداً عن نقطته 435 بكسل (بلاغ 29 سبتمبر 2026) */
.ctb-desc-line { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 10px; align-items: baseline; color: var(--ctb-ink-2); font-size: 13.5px; line-height: 1.6; }
.ctb-desc-line::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ctb-line-2); transform: translateY(-3px); }
.ctb-desc-line span { unicode-bidi: plaintext; }
.ctb-desc-line.is-en { font-family: var(--ctb-mono); font-size: 12.5px; color: var(--ctb-ink-3); }
.ctb-desc-src { font-size: 11.5px; color: var(--ctb-ink-3); }
.ctb-more-phone, .ctb-link.is-phone-only { display: none; }

/* ═══════════════ اللوحات ═══════════════ */

/* الحاسب كما في النموذج: البدائل والتوافق والصفات أعمدةٌ ثلاثة بارتفاعٍ واحد، والكلمات تحت
   البدائل. كان هنا عمودان (البدائل طويلة والبقية مكدّسة) — كشفه قياس المواضع لا قياس الأنماط. */
.ctb-pnav { display: none; }
.ctb-panels {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.05fr) minmax(0, .85fr);
    gap: 14px;
}

.ctb-panel {
    min-width: 0;
    display: flex; flex-direction: column;
    background: var(--ctb-surface);
    border-radius: var(--ctb-r-xl);
    box-shadow: var(--ctb-sh-1);
    overflow: hidden;
}
/* ⚠️ قائمة TeslaPicker مطلقة داخل البطاقة وأعرض من حقلها (280 بكسل وحقل السنة 90)، فقصّتها البطاقة: ظهر من
   «من سنة» آخر رقم وحده، و«إلى سنة» صفوفها فارغة، ونوع البديل بلا آخر خيارين (بلاغ 28 سبتمبر 2026، قيس 77 و172
   و86 بكسل). ما دامت قائمةٌ مفتوحة لا تقصّ البطاقة — ولا z-index هنا: يحبس القائمة تحت الشريط العائم */
.ctb-panel:has(.tsl-pick-pop) { overflow: visible; }
.ctb-panel-h { display: flex; align-items: center; gap: 8px; padding: 14px 18px 10px; }
.ctb-panel-h h2 { font-size: 14.5px; }
.ctb-panel-cnt { color: var(--ctb-ink-3); font-size: 12px; }
.ctb-panel-h .relative { margin-inline-start: auto; }
.ctb-psearch {
    height: 30px; width: 140px;
    border: 0; border-radius: 999px;
    padding-inline: 12px;
    background: var(--ctb-tonal);
    color: var(--ctb-ink);
    font: inherit; font-size: 12px;
}
.ctb-psearch:focus { outline: 0; box-shadow: 0 0 0 2px var(--ctb-brand-line); }
.ctb-panel-body { display: flex; flex-direction: column; padding-bottom: 14px; }

.ctb-tip { padding: 0 18px 8px; font-size: 12px; color: var(--ctb-ink-3); }
.ctb-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 18px; text-align: center; color: var(--ctb-ink-3); font-size: 13px; }
.ctb-empty b { color: var(--ctb-ink-2); font-weight: 600; }

/* ─── الصفّ ─── */
.ctb-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
    padding: 11px 18px;
    border-top: 1px solid var(--ctb-line);
    transition: background-color .2s;
}
.ctb-row.is-confirmed { background: var(--ctb-ok-tint); }
.ctb-row.is-rejected { background: var(--ctb-bad-tint); }
.ctb-row.is-rejected .ctb-pn, .ctb-row.is-rejected .ctb-desc { text-decoration: line-through; color: var(--ctb-ink-3); }
.ctb-row.is-added { background: var(--ctb-brand-tint); }

/* ─── السحب للتصويت: غلافٌ ثابت بخلفيةٍ تظهر، والصفّ يتحرّك فوقها (components.js: tslSwipe) ─── */
.ctb-swipe { position: relative; overflow: hidden; border-top: 1px solid var(--ctb-line); }
.ctb-swipe > .ctb-row { position: relative; border-top: 0; touch-action: pan-y; }
.ctb-swipe > .ctb-row:not([class*="is-"]) { background: var(--ctb-surface); }
.ctb-swipe.is-dragging > .ctb-row { transition: none; }
.ctb-swipe-bg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding-inline: 22px;
    font-size: 13px; font-weight: 600;
    opacity: 0;
    transition: opacity .15s;
}
.ctb-swipe-bg span { display: flex; align-items: center; gap: 6px; }
.ctb-swipe-bg svg { width: 16px; height: 16px; }
.ctb-swipe-bg .is-y { color: var(--ctb-ok); }
.ctb-swipe-bg .is-n { color: var(--ctb-bad); }
.ctb-swipe.is-drag .ctb-swipe-bg { opacity: 1; }
.ctb-swipe.is-to-y .ctb-swipe-bg { background: var(--ctb-ok-tint-2); }
.ctb-swipe.is-to-n .ctb-swipe-bg { background: var(--ctb-bad-tint-2); }
.ctb-swipe-tip { display: none; }

.ctb-row-main { min-width: 0; display: grid; gap: 3px; }
.ctb-row-main[role="button"] { cursor: pointer; }
.ctb-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctb-pn { font-weight: 600; font-size: 14px; }
.ctb-desc { font-size: 12.5px; color: var(--ctb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctb-plus { letter-spacing: normal; margin-inline-end: 6px; padding: 0 6px; border-radius: 999px; background: var(--ctb-tonal); font-size: 11px; color: var(--ctb-ink-3); }
.ctb-acts { display: flex; align-items: center; gap: 6px; }
.ctb-full { grid-column: 1 / -1; display: grid; gap: 4px; padding: 8px 0 4px; border-top: 1px dashed var(--ctb-line); }
.ctb-full-d { font-size: 12.5px; color: var(--ctb-ink-2); line-height: 1.6; }
.ctb-full-d.is-en { font-family: var(--ctb-mono); font-size: 12px; color: var(--ctb-ink-3); direction: ltr; text-align: start; unicode-bidi: isolate; }

.ctb-more { width: 100%; padding: 10px; border: 0; border-top: 1px solid var(--ctb-line); background: none; color: var(--ctb-brand); font-size: 13px; font-weight: 500; cursor: pointer; }
.ctb-note { padding: 4px 18px 0; font-size: 11.5px; color: var(--ctb-ink-3); }
.ctb-addbtn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px;
    margin: 12px 14px 0;
    border: 0; border-radius: var(--ctb-r-m);
    background: var(--ctb-brand-tint);
    color: var(--ctb-brand);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s;
}
.ctb-addbtn:hover { background: var(--ctb-brand-tint-2); }
.ctb-addbtn svg { width: 18px; height: 18px; }

/* ─── شارة الثقة ─── */
.ctb-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ctb-tonal);
    color: var(--ctb-ink-2);
    font-size: 11.5px; font-weight: 500;
    white-space: nowrap;
}
.ctb-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.ctb-badge.is-pending { background: var(--ctb-warn-tint); color: var(--ctb-warn); }
.ctb-badge.is-init { background: var(--ctb-info-tint); color: var(--ctb-info); }
.ctb-badge.is-ok { background: var(--ctb-ok-tint); color: var(--ctb-ok); }
.ctb-badge.is-trust { background: var(--ctb-ok); color: #fff; }
.ctb-badge.is-bad { background: var(--ctb-bad-tint); color: var(--ctb-bad); }
.ctb-badge.is-mine { background: var(--ctb-brand-tint); color: var(--ctb-brand); }
.ctb-badge-x { font-weight: 700; opacity: .85; margin-inline-start: 1px; }

/* ─── زرّا التصويت ─── */
.ctb-yn { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--ctb-tonal); }
.ctb-ib {
    width: 36px; height: 36px;
    display: inline-grid; place-items: center;
    flex: none;
    border: 0; border-radius: 50%;
    background: var(--ctb-tonal);
    color: var(--ctb-ink-2);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.ctb-yn .ctb-ib { background: transparent; }
.ctb-ib:hover, .ctb-yn .ctb-ib:hover { background: var(--ctb-surface); }
.ctb-ib svg { width: 17px; height: 17px; }
.ctb-ib.is-yes.is-on { background: var(--ctb-ok); color: #fff; }
.ctb-ib.is-no.is-on { background: var(--ctb-bad); color: #fff; }
.ctb-ib.is-pen { color: var(--ctb-ink-3); }
.ctb-ib.is-pen svg { width: 15px; height: 15px; }

/* ─── التوافق: ثلاث خلايا بأعمدة ثابتة فتتحاذى بين الصفوف ─── */
.ctb-cells { display: grid; grid-template-columns: 5.5em 7em auto; gap: 0 14px; align-items: baseline; }
.ctb-cells small { display: block; font-size: 10.5px; color: var(--ctb-ink-3); }
.ctb-cells b { font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.ctb-cells b.is-gen { color: var(--ctb-warn); }

/* ⚠️ لوحة التوافق ثلث الشاشة (قيس 345 بكسل): الخلايا الثلاث والقلم وزوج التصويت في سطرٍ واحد
   فأكل الزرّان عمود السنوات، فظهر «2» بدل «2016–2020» (بلاغ 25 سبتمبر). في اللوحة الضيّقة
   تنزل الأزرار سطراً تحت الخلايا، والسنوات لا تُقصّ أبداً — والموديل الطويل وحده يُختصر */
.ctb-panel { container: ctbpanel / inline-size; }
@container ctbpanel (max-width: 420px) {
    .ctb-p-fits .ctb-row { grid-template-columns: minmax(0, 1fr); }
    .ctb-p-fits .ctb-acts { justify-self: end; }
    .ctb-p-fits .ctb-cells { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; }
    .ctb-p-fits .ctb-cells span:nth-child(2) b { display: block; overflow: hidden; text-overflow: ellipsis; }
}
.ctb-hint-inline { font-size: 11.5px; color: var(--ctb-ink-3); }

/* ─── الصفات ─── */
.ctb-sug { display: grid; gap: 8px; margin: 0 14px 8px; padding: 10px 12px; border-radius: var(--ctb-r-m); background: var(--ctb-brand-tint); }
.ctb-sug-t { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ctb-brand); }
.ctb-sug-t svg { width: 15px; height: 15px; flex: none; }
.ctb-sug-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ctb-sug-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 6px;
    border: 0; border-radius: 999px;
    background: var(--ctb-surface);
    color: var(--ctb-ink);
    font-size: 12.5px;
    box-shadow: var(--ctb-sh-1);
    cursor: pointer;
}
.ctb-sug-pill small { color: var(--ctb-ink-3); }
.ctb-sug-pill b { font-weight: 600; }
.ctb-sug-plus { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--ctb-brand); color: #fff; font-size: 14px; line-height: 1; }
.ctb-a-name { font-size: 11.5px; color: var(--ctb-ink-3); }
.ctb-a-val { font-size: 15px; font-weight: 600; }
.ctb-a-unit { margin-inline-start: 4px; font-size: 12px; font-weight: 400; color: var(--ctb-ink-3); }

/* ─── الكلمات ─── */
.ctb-kw-wrap { display: flex; flex-wrap: wrap; gap: 6px; min-height: 44px; padding: 4px 18px 6px; }
.ctb-kw-empty { align-self: center; font-size: 13px; color: var(--ctb-ink-3); line-height: 1.6; }
.ctb-kw { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 12px; border-radius: 999px; background: var(--ctb-brand-tint); color: var(--ctb-brand); font-size: 13px; font-weight: 500; }
.ctb-kw button { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .7; cursor: pointer; }
.ctb-kw button:hover { opacity: 1; background: rgba(0, 0, 0, .08); }
.ctb-kw button svg { width: 10px; height: 10px; }
.ctb-hint { padding: 0 18px 10px; font-size: 12px; color: var(--ctb-ink-3); line-height: 1.6; }
.ctb-hint b { color: var(--ctb-ink-2); font-weight: 500; }
.ctb-kw-add { display: flex; gap: 8px; padding: 0 14px; }
.ctb-kw-add > .relative { flex: 1; min-width: 0; }
.ctb-field {
    width: 100%; height: 40px;
    border: 0; border-radius: var(--ctb-r-s);
    padding-inline: 12px;
    background: var(--ctb-surface);
    color: var(--ctb-ink);
    box-shadow: inset 0 0 0 1px var(--ctb-line-2);
    font: inherit;
}
.ctb-field:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ctb-brand); }

/* ═══════════════ الشريط العائم والتنبيه ═══════════════ */

.ctb-dock-wrap {
    position: fixed;
    inset-inline: 0;
    bottom: 16px;
    z-index: 40;
    display: flex; justify-content: center;
    padding-inline: 16px;
    pointer-events: none;
}
.ctb-dock {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px 8px 18px;
    border-radius: 999px;
    background: var(--ctb-dock-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--ctb-sh-2);
    border: 1px solid rgba(255, 255, 255, .7);
}
.ctb-earn { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ctb-ink-2); white-space: nowrap; }
.ctb-earn b { color: var(--ctb-ok); font-size: 16px; }
.ctb-earn.is-zero b { color: var(--ctb-ink-3); }
.ctb-skip { padding-inline: 6px; border: 0; background: none; color: var(--ctb-ink-3); font-size: 13px; cursor: pointer; }
.ctb-next { height: 44px; padding-inline: 22px; border-radius: 999px; font-size: 14px; }

/* التوسيط بالهوامش لا بـtranslateX: في RTL يعني inset-inline-start اليمين، فكان
   الجمع بينه وبين translateX(-50%) يدفع التنبيه خارج الحافّة. وقع في النموذج. */
.ctb-toast {
    position: fixed;
    bottom: 92px;
    inset-inline: 16px;
    z-index: 60;
    width: max-content;
    max-width: calc(100vw - 32px);
    margin-inline: auto;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--ctb-ink);
    color: var(--ctb-surface);
    /* أبرز ممّا كانت (13 بكسل بوزن 400): مراجع التصميم طلب رسائل «بخط اكثر بروز» وبلا تشكيل (ContributeUi.Plain) */
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    box-shadow: var(--ctb-sh-2);
    pointer-events: none;
    animation: ctb-toast-in .2s ease-out;
}
.ctb-toast.is-warn { background: var(--ctb-warn); color: #fff; }
@keyframes ctb-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ═══════════════ غلاف المساهم المخصَّص ═══════════════ */

/* على نمط .dlv: غلافٌ ثابت يملأ الشاشة، والمحتوى هو حاوية التمرير */
.ctb-shell {
    position: fixed;
    inset: 0;
    color: var(--ctb-ink);
    font-size: 14px;
    line-height: 1.55;
    display: flex; flex-direction: column;
    background: var(--ctb-bg);
    direction: rtl;
}
.ctb-shell-main { flex: 1; overflow-y: auto; padding: 16px 16px 0; }
.ctb-shell-main .ctb { padding-bottom: 170px; }
.ctb-shell-main .ctb-dock-wrap { bottom: 82px; }
.ctb-shell-main .ctb-toast { bottom: 156px; }

.ctb-shell-nav {
    position: fixed; inset-inline: 0; bottom: 0;
    z-index: 45;
    display: flex;
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
    background: var(--ctb-nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--ctb-line);
}
.ctb-shell-tab {
    flex: 1;
    display: grid; justify-items: center; gap: 3px;
    padding: 6px 2px;
    border: 0; background: none;
    color: var(--ctb-ink-3);
    font: inherit; font-size: 11.5px; font-weight: 500;
    cursor: pointer;
}
.ctb-shell-pill { width: 46px; height: 28px; display: grid; place-items: center; border-radius: 999px; transition: background-color .15s; }
.ctb-shell-pill svg { width: 20px; height: 20px; }
.ctb-shell-tab.is-active { color: var(--ctb-brand); }
.ctb-shell-tab.is-active .ctb-shell-pill { background: var(--ctb-brand-tint); }

/* حلقة التركيز في app.css (:focus-visible) ظلٌّ على حدود العنصر، والتبويب بلا زوايا — فظهر
   مربّعٌ أزرق حادّ حول الخلية كلّها. تنتقل الحلقة إلى الكبسولة المستديرة، وتبقى للوحة المفاتيح. */
.ctb-shell-tab:focus-visible { box-shadow: none; }
.ctb-shell-tab:focus-visible .ctb-shell-pill { box-shadow: 0 0 0 2px var(--ctb-brand); }
.ctb-rowbtn:focus-visible, .ctb-row-main:focus-visible, .ctb-b-main:focus-visible { box-shadow: inset 0 0 0 2px var(--ctb-brand); }

/* ═══════════════ النوافذ والقوائم (TeslaSheet و TeslaPicker) ═══════════════
   المكوّنان عامّان في components.css ويأخذان ألوانهما من --tsl-*؛ هنا تُعطى ألوان النموذج */

.ctb, .ctb-shell {
    --tsl-surface: var(--ctb-surface);
    --tsl-tonal: var(--ctb-tonal);
    --tsl-tonal-2: var(--ctb-tonal-2);
    --tsl-line: var(--ctb-line);
    --tsl-line-2: var(--ctb-line-2);
    --tsl-ink: var(--ctb-ink);
    --tsl-ink-2: var(--ctb-ink-2);
    --tsl-ink-3: var(--ctb-ink-3);
    --tsl-brand: var(--ctb-brand);
    --tsl-brand-tint: var(--ctb-brand-tint);
    --tsl-brand-line: var(--ctb-brand-line);
    --tsl-warn: var(--ctb-warn);
    --tsl-warn-tint: var(--ctb-warn-tint);
    --tsl-mono: var(--ctb-mono);
    --tsl-r-xl: var(--ctb-r-xl);
    --tsl-r-m: var(--ctb-r-m);
    --tsl-r-s: var(--ctb-r-s);
    --tsl-sh-2: var(--ctb-sh-2);
    --tsl-sh-3: var(--ctb-sh-3);
}

.ctb-fld {
    width: 100%; min-width: 0; height: 46px;
    border: 0; border-radius: var(--ctb-r-s);
    padding-inline: 12px;
    background: var(--ctb-surface);
    color: var(--ctb-ink);
    box-shadow: inset 0 0 0 1px var(--ctb-line-2);
    font: inherit; font-size: 15px;
}
.ctb-fld:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ctb-brand); }

/* ─── حقول ورقة «قطعة جديدة»: تسميةٌ فوق الحقل، وسطر شرحٍ تحته ─── */
.ctb-lbl { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--ctb-ink-2); }
.ctb-lbl:first-child { margin-top: 0; }
.ctb-fld-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--ctb-ink-3); }

.ctb-swrow {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px;
    border-radius: var(--ctb-r-m);
    background: var(--ctb-tonal);
    color: var(--ctb-ink-2);
    font-size: 13.5px;
    cursor: pointer;
}
/* هامش خانة الاختيار الافتراضيّ في المتصفّح (3 3 3 4) — النموذج يبقيه، وأسقطه preflight اللوحة */
.ctb-swrow input { width: 18px; height: 18px; margin: 3px 3px 3px 4px; accent-color: var(--ctb-brand); cursor: pointer; }
.ctb-swrow small { margin-inline-start: auto; font-size: 11.5px; color: var(--ctb-ink-3); }

.ctb-sh-list { display: grid; border-radius: var(--ctb-r-m); overflow: hidden; background: var(--ctb-tonal); }
/* ⚠️ النافذة تقف عند 86% من ارتفاع الشاشة وجسمها لا يمرَّر (حتى تخرج منه قوائم TeslaPicker)، فثماني نتائج كانت
   تنزل تحت حافّتها: نتيجتان خارجها على شاشة 700 بكسل، و121 بكسل تحت حافّة الشاشة على 620 (بلاغ 29 سبتمبر 2026).
   الجسم عمودٌ مرن والقائمة وحدها تنكمش وتمرَّر. max-content: صفوفها أزرار بـmin-height: 0 فتنضغط بلا تمرير */
.tsl-sheet-b:has(> .ctb-sh-list) { display: flex; flex-direction: column; min-height: 0; }
.tsl-sheet-b:has(> .ctb-sh-list) > * { flex: none; }
.tsl-sheet-b:has(> .ctb-sh-list) > .ctb-sh-list {
    flex: 0 1 auto; min-height: 120px;
    overflow: auto; overscroll-behavior: contain;
    grid-auto-rows: max-content; align-content: start;
}
@media (max-width: 640px) {
    /* الكيبورد مفتوح أثناء البحث — القائمة تمرَّر داخل ما بقي فوقه لا تحته */
    .ctb-sh-list { max-height: max(160px, calc(var(--tsl-vvh, 100vh) - 280px)); overflow: auto; overscroll-behavior: contain; }
}
.ctb-opt {
    display: grid; gap: 1px;
    width: 100%;
    padding: 10px 14px;
    border: 0; border-bottom: 1px solid var(--ctb-line);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.ctb-opt:last-child { border-bottom: 0; }
.ctb-opt:hover, .ctb-opt:focus-visible { background: var(--ctb-brand-tint); outline: 0; }
.ctb-opt .ctb-pn { font-size: 13.5px; }
.ctb-opt .ctb-desc { font-size: 12px; }
.ctb-opt .ctb-desc.is-warn { color: var(--ctb-warn); }
.ctb-none { padding: 12px 14px; color: var(--ctb-ink-3); font-size: 13px; line-height: 1.55; }

.ctb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctb-btn--wide { width: 100%; }
.ctb-btn--tall { height: 46px; }
.ctb-btn--s { height: 32px; padding-inline: 12px; border-radius: var(--ctb-r-s); font-size: 12.5px; }
.ctb-btn--danger { background: var(--ctb-bad-tint); color: var(--ctb-bad); }
.ctb-btn--s svg { width: 14px; height: 14px; }

.ctb-ttl { font-size: 12.5px; color: var(--ctb-ink-3); }
.ctb-ttl b { color: var(--ctb-ink); }
.ctb-ttl .ctb-btn { margin-inline-start: 8px; }
.ctb-ttl--gap { margin-top: 4px; }
.ctb-vlist { display: flex; flex-wrap: wrap; gap: 6px; }
.ctb-vpick {
    padding: 8px 14px;
    border: 0; border-radius: 999px;
    background: var(--ctb-tonal);
    color: var(--ctb-ink-2);
    font: inherit; font-size: 13.5px; font-weight: 500;
    cursor: pointer;
}
.ctb-vpick:hover { background: var(--ctb-tonal-2); }
.ctb-vpick[aria-pressed="true"] { background: var(--ctb-brand); color: #fff; }
.ctb-vpick:disabled { opacity: .5; cursor: default; }
.ctb-vpick small { margin-inline-start: 4px; font-size: 11px; opacity: .7; }
.ctb-dupwarn {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px;
    border-radius: var(--ctb-r-m);
    background: var(--ctb-warn-tint);
    color: var(--ctb-warn);
    font-size: 12.5px; line-height: 1.55;
}
.ctb-dupwarn b { font-weight: 600; }
.ctb-dupwarn.is-new { background: var(--ctb-tonal); color: var(--ctb-ink-2); }

/* ─── التصحيح داخل الصفّ ─── */
.ctb-ed { display: grid; gap: 8px; padding: 12px 18px; background: var(--ctb-tonal); border-top: 1px solid var(--ctb-line); }
.ctb-ed-ttl { font-size: 12.5px; font-weight: 500; color: var(--ctb-ink-2); }
.ctb-ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ctb-ed-grid3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; }
.ctb-ed-btns { display: flex; gap: 8px; }
.ctb-ed-hint { font-size: 11.5px; color: var(--ctb-ink-3); }

/* قبل أن تصير الصفحة تفاعلية: الضغطة لا تصل — فالأزرار معتَّمة ولا تستقبلها */
.ctb.is-booting button, .ctb.is-booting input, .ctb.is-booting a { pointer-events: none; }
.ctb.is-booting .ctb-panels, .ctb.is-booting .ctb-dock-wrap { opacity: .55; transition: opacity .2s; }
.ctb.is-booting { cursor: progress; }

/* فعلٌ قيد الحفظ: اللوحات لا تستقبل ضغطة ثانية، وشارةٌ مكان الرسالة تقول ما يحدث */
.ctb-panels.is-acting { pointer-events: none; opacity: .7; transition: opacity .15s; }
.ctb-toast.is-busy { display: inline-flex; align-items: center; gap: 8px; background: var(--ctb-ink-2); }
.ctb-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: ctb-spin .7s linear infinite; }
.ctb-btn .ctb-spin { width: 13px; height: 13px; }
@keyframes ctb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ctb-spin { animation-duration: 2s; } }

/* اقتراح تصحيحٍ معلّق تحت بنده — لون الانتظار نفسه الذي تحمله شارة «معلّق» */
.ctb-pend { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px;
            border-radius: var(--ctb-r-s); background: var(--ctb-warn-tint); }
.ctb-pend-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ctb-pend-lbl { font-size: 11.5px; font-weight: 600; color: var(--ctb-warn); }
.ctb-pend-sum { font-size: 12.5px; color: var(--ctb-ink); }
.ctb-pend-hint { flex-basis: 100%; font-size: 11px; color: var(--ctb-ink-3); }
.ctb-tag { padding: 1px 6px; border-radius: 6px; background: var(--ctb-tonal); color: var(--ctb-ink-3); font-size: 11px; }

/* شارة بلا حالة (عدد البدائل، ولم تُقيَّم) نقطتها رمادية كما في النموذج */
.ctb-badge:not([class*="is-"])::before { background: var(--ctb-line-2); opacity: 1; }
.ctb-badge.is-hot { background: var(--ctb-hot-tint); color: var(--ctb-hot); }

/* ═══════════════ التبويبات الأخرى ═══════════════ */

.ctb-sec-h { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 20px 10px; }
.ctb-sec-h h2 { font-size: 15px; }
.ctb-sec-h--sub { border-top: 1px solid var(--ctb-line); }
.ctb-sec-h--sub h3 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ctb-ink-2); }
.ctb-sec-h .ctb-mine-seg { margin-inline-start: auto; }
/* رقم القطعة في جدول «كل أفعالي» يفتحها — رابطٌ بشكل الرقم لا زرّ */
.ctb-link { padding: 0; min-height: 0; border: 0; background: none; color: var(--ctb-brand); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ctb-badge.is-ok { background: var(--ctb-ok-tint); color: var(--ctb-ok); }
.ctb-badge.is-bad { background: var(--ctb-bad-tint); color: var(--ctb-bad); }
.ctb-sub { font-size: 12.5px; color: var(--ctb-ink-3); }
.ctb-foot { padding: 10px 20px 14px; font-size: 12.5px; line-height: 1.6; color: var(--ctb-ink-3); }
.ctb-small { font-size: 12px; }

/* ─── الكتالوج ─── */
.ctb-browse-bar { display: grid; gap: 10px; }
.ctb-search { position: relative; min-width: 0; }
.ctb-search > svg { position: absolute; inset-inline-start: 14px; top: 12px; z-index: 1; width: 16px; height: 16px; color: var(--ctb-ink-3); pointer-events: none; }
.ctb-search input {
    width: 100%; height: 40px;
    border: 0; border-radius: 999px;
    padding-inline: 40px 16px;
    background: var(--ctb-surface);
    color: var(--ctb-ink);
    box-shadow: var(--ctb-sh-1);
    font: inherit;
}
.ctb-search input:focus { outline: 0; box-shadow: 0 0 0 2px var(--ctb-brand-line); }
@media (hover: hover) and (pointer: fine) {
    .ctb .ctb-search input { font-size: 14px !important; }
    .ctb .ctb-fld { font-size: 15px !important; }
    .ctb .ctb-ed .ctb-field { font-size: 14px !important; }
}

.ctb-mchips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ctb-mchips::-webkit-scrollbar { display: none; }
.ctb-mchip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border: 0; border-radius: 999px;
    background: var(--ctb-surface);
    color: var(--ctb-ink-2);
    box-shadow: var(--ctb-sh-1);
    font: inherit; font-size: 13px; font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.ctb-mchip-c { font-family: var(--ctb-mono); font-size: 11px; color: var(--ctb-ink-3); }
.ctb-mchip[aria-pressed="true"] { background: var(--ctb-brand); color: #fff; }
.ctb-mchip[aria-pressed="true"] .ctb-mchip-c { color: rgba(255, 255, 255, .75); }

.ctb-b-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 12px 18px; border-top: 1px solid var(--ctb-line); }
.ctb-b-row:first-child { border-top: 0; }
.ctb-b-main { min-width: 0; display: grid; gap: 3px; cursor: pointer; }
.ctb-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.ctb-mk { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--ctb-tonal); color: var(--ctb-ink-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.ctb-mk::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ctb-ink-3); }
.ctb-mk.is-t { background: hsl(0 65% 96%); color: hsl(0 55% 38%); } .ctb-mk.is-t::before { background: hsl(0 55% 45%); }
.ctb-mk.is-h { background: hsl(210 65% 95%); color: hsl(210 60% 36%); } .ctb-mk.is-h::before { background: hsl(210 60% 44%); }
.ctb-mk.is-l { background: hsl(265 45% 96%); color: hsl(265 40% 40%); } .ctb-mk.is-l::before { background: hsl(265 40% 48%); }
.ctb-mk.is-k { background: hsl(340 55% 96%); color: hsl(340 50% 40%); } .ctb-mk.is-k::before { background: hsl(340 50% 46%); }
.ctb-mk.is-n { background: hsl(30 60% 95%); color: hsl(30 60% 34%); } .ctb-mk.is-n::before { background: hsl(30 60% 42%); }

/* ─── الأرقام والجداول ─── */
.ctb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ctb-stat { display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--ctb-r-l); background: var(--ctb-surface); box-shadow: var(--ctb-sh-1); }
.ctb-stat-v { font-size: 26px; font-weight: 600; line-height: 1.1; text-align: right; }
.ctb-stat-l { font-size: 12px; color: var(--ctb-ink-3); }
.ctb-stat.is-hl { background: var(--ctb-brand); color: #fff; }
.ctb-stat.is-hl .ctb-stat-l { color: rgba(255, 255, 255, .8); }

.ctb-tbl-wrap { overflow-x: auto; }
.ctb-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ctb-tbl th { padding: 10px 16px; background: var(--ctb-tonal); color: var(--ctb-ink-3); font-size: 12px; font-weight: 500; text-align: start; white-space: nowrap; }
.ctb-tbl td { padding: 11px 16px; border-bottom: 1px solid var(--ctb-line); vertical-align: middle; }
.ctb-tbl tr:last-child td { border-bottom: 0; }
.ctb-tbl td.ctb-num { text-align: right; }
.ctb-td-strong { font-weight: 600; }
.ctb-td-name { font-weight: 500; }
.ctb .ctb-pts { font-family: var(--ctb-mono); font-weight: 600; color: var(--ctb-ok); text-align: right; direction: ltr; }
.ctb .ctb-pts.is-neg { color: var(--ctb-bad); }
.ctb-merge-to { min-width: 150px; }
.ctb-sec-h .ctb-modsel { width: 260px; max-width: 100%; margin-inline-start: auto; }

/* ─── المتصدّرون وقواعد النقاط ─── */
.ctb .ctb-lb { padding: 0 8px 8px; }
.ctb-lb li { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--ctb-r-m); }
.ctb-lb-rk { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ctb-tonal); font-weight: 600; font-variant-numeric: tabular-nums; }
.ctb-lb li.is-top .ctb-lb-rk { background: var(--ctb-warn-tint); color: var(--ctb-warn); }
.ctb-lb li.is-me { background: var(--ctb-brand-tint); }
.ctb-lb-nm { font-weight: 500; }
.ctb-lb-nm small { display: block; font-size: 12px; font-weight: 400; color: var(--ctb-ink-3); }
.ctb-lb-p { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ctb-lb-p small { display: block; font-family: inherit; font-size: 11px; font-weight: 400; color: var(--ctb-ink-3); text-align: end; }
.ctb-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 6px 20px 20px; }
.ctb-rule { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--ctb-r-m); background: var(--ctb-tonal); }
/* «+5» يساريّة وإلا صارت «5+» في سطرٍ عربيّ؛ والخطّ عاديّ لا ثابت العرض كما في النموذج */
.ctb-rule-v { font-size: 20px; font-weight: 700; color: var(--ctb-brand); font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.ctb-rule-l { font-size: 12.5px; color: var(--ctb-ink-2); }

/* ─── الحساب ─── */
.ctb-acc-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 14px; }
.ctb-acc-ava { width: 56px; height: 56px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--ctb-brand); color: #fff; font-size: 22px; font-weight: 600; }
.ctb-acc-nm { font-size: 18px; font-weight: 600; }
.ctb-acc-rl { font-size: 13px; color: var(--ctb-ink-3); }
.ctb-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 20px 16px; }
.ctb-mini > div { display: grid; gap: 2px; padding: 12px; border-radius: var(--ctb-r-m); background: var(--ctb-tonal); text-align: center; }
.ctb-mini-v { font-size: 20px; font-weight: 600; }
.ctb-mini-l { font-size: 11.5px; color: var(--ctb-ink-3); }
.ctb-kv { display: flex; align-items: flex-start; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--ctb-line); }
.ctb-kv-k { flex: none; min-width: 86px; padding-top: 1px; font-size: 13px; color: var(--ctb-ink-3); }
.ctb-kv-v { flex: 1; min-width: 0; font-weight: 500; line-height: 1.6; }
.ctb-callout { display: flex; align-items: flex-start; gap: 12px; margin: 14px 20px; padding: 12px 14px; border-radius: var(--ctb-r-m); background: var(--ctb-warn-tint); color: var(--ctb-warn); font-size: 13px; line-height: 1.6; }
.ctb-callout-t { margin-bottom: 2px; font-weight: 600; }
.ctb-rowbtn {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 13px 20px;
    border: 0; border-top: 1px solid var(--ctb-line);
    background: none;
    color: var(--ctb-ink);
    font: inherit; font-size: 14px;
    text-align: start;
    cursor: pointer;
}
.ctb-rowbtn-st { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; font-size: 12.5px; color: var(--ctb-ink-3); }
.ctb-rowbtn-st svg { width: 16px; height: 16px; }
.ctb-sw { position: relative; width: 42px; height: 24px; flex: none; border-radius: 999px; background: var(--ctb-line-2); transition: background-color .15s; }
.ctb-sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ctb-rowbtn.is-on .ctb-sw { background: var(--ctb-brand); }
.ctb-rowbtn.is-on .ctb-sw::after { transform: translateX(-18px); }
.ctb-logout { display: block; margin: 16px 20px 6px; padding: 13px; border-radius: var(--ctb-r-m); background: var(--ctb-bad-tint); color: var(--ctb-bad); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; }
.ctb-ver { padding-bottom: 16px; text-align: center; font-size: 11.5px; color: var(--ctb-ink-3); }

@media (max-width: 980px) {
    .ctb-stats, .ctb-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ctb-b-row { padding: 12px 14px; }
    .ctb-b-row .ctb-btn { padding-inline: 12px; }
    .ctb-tbl th:nth-child(1), .ctb-tbl td:nth-child(1) { display: none; }
    .ctb-sec-h .ctb-modsel { width: 100%; margin: 0; }
    .ctb-ed-grid3 { grid-template-columns: 1fr 1fr; }
    .ctb-ed-grid3 > :first-child { grid-column: 1 / -1; }
    /* قلم التوافق يبقى على الجوّال — لا تصحيح للموديل والسنوات بدونه */
    .ctb-fit .ctb-row .ctb-ib.is-pen { display: inline-grid; }
}

.dark .ctb-mk[class*="is-"] { background: var(--ctb-tonal); color: var(--ctb-ink-2); }

/* ═══════════════ المقاسات ═══════════════ */

/* ─── غلاف الموظّف على الجوّال: لوحة التحكّم ترسم شريطها السفليّ ───
   .mobile-bottom-nav (mobile-first.css) يظهر تحت 1024px بارتفاع 64 وطبقة 40، فكان يغطّي
   الشريط العائم: قِيس أنّ النقرة في وسط «التالي» تصل إلى تبويبٍ في شريط اللوحة لا إلى الزرّ.
   غلاف المساهم المخصَّص لا يرسم ذلك الشريط، فلا يمسّه هذا. */
@media (max-width: 1023.98px) {
    .ctb--staff { padding-bottom: 176px; }
    .ctb--staff .ctb-dock-wrap { bottom: calc(64px + 12px + env(safe-area-inset-bottom)); z-index: 41; }
    .ctb--staff .ctb-toast { bottom: calc(64px + 86px + env(safe-area-inset-bottom)); }
}

@media (max-width: 980px) {
    .ctb-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ctb-p-attrs { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .ctb { gap: 12px; }
    .ctb-head { gap: 8px 10px; }
    .ctb-logo { width: 34px; height: 34px; border-radius: 10px; }
    .ctb-brand h1 { font-size: 15.5px; }
    .ctb-cap { display: none; }
    .ctb-tabs { order: 3; width: 100%; }
    .ctb-score { padding: 5px 11px 5px 6px; gap: 6px; }
    .ctb-score-pts { font-size: 15px; }
    .ctb-score-rank, .ctb-score-lbl small { display: none; }

    .ctb-queue .ctb-muted { display: none; }
    .ctb-part { padding: 16px 16px 12px; gap: 8px; }
    .ctb-descs:not(.is-open) .ctb-desc-line:nth-child(3) { display: none; }
    .ctb-more-desk { display: none; }
    .ctb-more-phone { display: inline; }
    .ctb-link.is-phone-only { display: inline-block; }
    .ctb-part-pn { font-size: 26px; }
    .ctb-chip { padding: 3px 10px; font-size: 11.5px; }
    .ctb-desc-line { font-size: 13px; }

    /* الجوّال: شريط مقسّم يعرض لوحةً واحدة */
    .ctb-pnav { display: flex; position: sticky; top: 0; z-index: 5; box-shadow: 0 6px 16px -10px hsl(222 47% 10% / .25); }
    .ctb-panels { display: block; }   /* لا شبكة: تبقى اللوحة الظاهرة بعرض الشاشة كاملاً */
    .ctb-panel:not(.is-active) { display: none; }
    .ctb-panel-h { display: none; }
    .ctb-panel-body { padding-top: 10px; }
    .ctb-row { padding: 12px 14px; }
    .ctb-swipe-tip { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--ctb-tonal); color: var(--ctb-ink-3); font-size: 12px; }
    .ctb-swipe-tip svg { width: 16px; height: 16px; flex: none; }
    .ctb-row .ctb-ib.is-pen { display: none; }
    .ctb-ib { width: 34px; height: 34px; }
    .ctb-cells { grid-template-columns: 1fr 1fr 1fr; gap: 0 8px; }

    .ctb-dock-wrap { bottom: 12px; padding-inline: 12px; }
    .ctb-dock { width: 100%; padding: 8px 8px 8px 16px; }
    .ctb-skip { display: none; }
    .ctb-next { flex: 1; height: 48px; }
    .ctb-toast { bottom: 86px; }
    .ctb-shell-main { padding-inline: 12px; }
    .ctb-shell-main .ctb-dock-wrap { bottom: 78px; }
    .ctb-shell-main .ctb-toast { bottom: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    .ctb *, .ctb-toast { animation: none !important; transition: none !important; }
}

/* ═══════════════ الوضع الليليّ ═══════════════
   النموذج فاتحٌ وحده؛ والليليّ هنا مشتقّ من رموز اللوحة الليلية بالأدوار نفسها. */

.dark body:has(.ctb),
body:has(.ctb).dark {
    --ctb-bg: hsl(222 47% 6%);
    --ctb-surface: hsl(222 47% 10%);
    --ctb-tonal: hsl(217 33% 15%);
    --ctb-tonal-2: hsl(217 33% 20%);
    --ctb-line: hsl(217 33% 18%);
    --ctb-line-2: hsl(217 33% 25%);
    --ctb-ink: hsl(0 0% 98%);
    --ctb-ink-2: hsl(215 20% 80%);
    --ctb-ink-3: hsl(215 20% 64%);
    --ctb-brand: hsl(221 80% 62%);
    --ctb-brand-hover: hsl(221 80% 68%);
    --ctb-brand-tint: hsl(221 50% 18%);
    --ctb-brand-tint-2: hsl(221 50% 24%);
    --ctb-brand-line: hsl(221 50% 40%);
    --ctb-on-brand: hsl(222 47% 8%);
    --ctb-ok: hsl(152 50% 55%);
    --ctb-ok-tint: hsl(152 40% 16%);
    --ctb-ok-tint-2: hsl(152 40% 22%);
    --ctb-warn: hsl(38 75% 62%);
    --ctb-warn-tint: hsl(38 50% 16%);
    --ctb-bad: hsl(4 70% 66%);
    --ctb-bad-tint: hsl(4 45% 17%);
    --ctb-bad-tint-2: hsl(4 45% 23%);
    --ctb-info: hsl(200 70% 65%);
    --ctb-info-tint: hsl(200 45% 16%);
    --ctb-hot: hsl(14 80% 66%);
    --ctb-hot-tint: hsl(14 50% 17%);
    --ctb-mark: hsl(45 65% 26%);
    --ctb-dock-bg: hsl(222 47% 10% / .88);
    --ctb-nav-bg: hsl(222 47% 10% / .94);
}
/* ═══════════════ نافذة «إضافة سيارات» والكتالوج بلوحة المفاتيح — كل المقاسات ═══════════════ */

/* ما اختاره المساهم من سيارات ينتظر الحفظ: سطرٌ لكل سيارة باسمها وسنواتها هي */
.ctb-cars-t { font-size: 12.5px; line-height: 1.6; color: var(--ctb-ink-3); }
.ctb-cars { display: grid; gap: 6px; }
.ctb-car {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 34px;
    align-items: center; gap: 10px;
    padding-block: 7px; padding-inline: 12px 7px;
    border-radius: var(--ctb-r-s);
    background: var(--ctb-tonal);
}
.ctb-car-n { min-width: 0; display: grid; line-height: 1.3; }
.ctb-car-n b { font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ctb-car-n small { font-size: 11.5px; color: var(--ctb-ink-3); }
.ctb-car-y { font-size: 13.5px; font-weight: 600; }
.ctb-car .ctb-ib { width: 34px; height: 34px; background: var(--ctb-surface); }
.ctb-car .ctb-ib svg { width: 13px; height: 13px; }
.ctb-fld-hint.is-warn { margin-top: 0; color: var(--ctb-warn); font-weight: 500; }

/* النتيجة التي يفتحها Enter — تُظلَّل حيث لوحة مفاتيح وفأرة؛ على اللمس لا Enter فلا تظليل */
@media (hover: hover) and (pointer: fine) {
    .ctb-b-row.is-act { border-radius: var(--ctb-r-m); background: var(--ctb-brand-tint); box-shadow: inset 0 0 0 2px var(--ctb-brand); }
}

/* ═══════════════ تصميم الحاسب ═══════════════
   الوسم واحدٌ للمقاسات كلّها، وهذه العناصر تُرسم دائماً وتظهر في كتلة الحاسب أدناه وحدها:
   لوحة الأوصاف، وعنوان الشركة فوق سياراتها، وخطّ السنوات، وعدّ الأوصاف، وأزرار الإضافة في رؤوس اللوحات،
   وموضع الطابور في سطر القطعة، وحقل فتح القطعة، وأيقونات الرؤوس، وأحرف الاختصارات، وتبويبات المساهم. */
.ctb-p-src, .ctb-grp, .ctb-tl, .ctb-tl-legend, .ctb-ev, .ctb-hadd, .ctb-qpos, .ctb-jump, .ctb-panel-ic,
.ctb kbd, .ctb--contrib .ctb-tabs { display: none; }
.ctb-keys, .ctb-part-end { display: contents; }
.ctb-keys > span { display: none; }

/* من عرض 1180: الشاشة كانت تصميم جوّال معروضاً على الحاسب — شريط التنقّل أسفل الشاشة، و«التالي» عائمٌ فوق
   الصفوف، وكل سيارة بطاقة من ثلاثة أسطر (134 بكسل)، فاثنتا عشرة سيارة شاشتان (مراجع التصميم، 28 سبتمبر 2026).
   هنا: التنقّل و«التالي» في الأعلى، وثلاثة أعمدة يمرَّر كلٌّ منها داخله، والصفّ سطرٌ واحد (44 بكسل). */
@media (min-width: 1180px) {

    /* ─── الغلاف ─── */
    .ctb-shell-nav { display: none; }
    /* المزلاق يظهر في تبويبٍ طويل (الكتالوج) ويغيب في المراجعة، فكان رأس الشاشة يُزاح بعرضه عند التنقّل بينهما:
       مكانه محجوزٌ في الجهتين */
    .ctb-shell-main { padding: 12px 12px 0; scrollbar-gutter: stable both-edges; scrollbar-width: thin; scrollbar-color: var(--ctb-line-2) transparent; }
    .ctb, .ctb-shell-main .ctb, .ctb--staff { padding-bottom: 0; }
    .ctb { max-width: 1720px; gap: 12px; }

    /* الصفحة بارتفاع الشاشة، واللوحات تأخذ ما بقي منها وتمرَّر داخلها — عمودٌ مرن لا ارتفاعٌ محسوب، فسطر القطعة
       يأخذ سطراً أو سطرين ولا يختلّ شيء.
       المساهم المخصَّص: غلافه ‎(.ctb-shell-main)‎ بارتفاع الشاشة، فالصفحة ثابتة تماماً.
       موظّف المنصّة داخل لوحة التحكّم: فوق الشاشة شريط اللوحة (71) وحشو صفحتها (30 أعلى و30 أسفل) — قيس 131 */
    .ctb { display: flex; flex-direction: column; }
    .ctb > * { flex: none; }
    .ctb > .ctb-panels { flex: 1 1 0; }
    .ctb--contrib { min-height: 100%; }
    .ctb--contrib:has(> .ctb-panels) { height: 100%; }
    .ctb--contrib > .ctb-panels { min-height: 0; }
    .ctb--staff { min-height: calc(100dvh - 131px); }
    .ctb--staff > .ctb-panels { min-height: 440px; }
    .ctb--staff > .ctb-keys { margin-top: auto; }
    /* السطر الأخير يبقى في مرمى النظر على تبويبٍ طويل (الكتالوج، سجلّي): فيه رسالة ما حدث */
    .ctb--contrib > .ctb-keys { margin-top: auto; position: sticky; bottom: 0; z-index: 3; padding-bottom: 8px; background: var(--ctb-bg); }

    /* التبويبات الأخرى لا تتمدّد بعرض الشاشة كلّه: قائمة نتائج بعرض 1700 سطورها لا تُقرأ */
    .ctb > .ctb-card:not(.ctb-part), .ctb > .ctb-browse-bar, .ctb > .ctb-stats, .ctb > .ctb-sample {
        width: 100%; max-width: 1120px; margin-inline: auto;
    }

    .ctb kbd {
        display: inline-grid; place-items: center;
        min-width: 22px; height: 22px; padding-inline: 5px;
        border-radius: 6px;
        background: var(--ctb-tonal-2); color: var(--ctb-ink-2);
        box-shadow: inset 0 -1px 0 var(--ctb-line-2);
        font-family: var(--ctb-mono); font-size: 11px; font-weight: 600; line-height: 1;
        direction: ltr;
    }

    /* ─── الرأس: الاسم، والتبويبات، وفتح قطعة، والنقاط ─── */
    .ctb-head { flex-wrap: nowrap; gap: 14px; }
    .ctb--contrib .ctb-tabs { display: inline-flex; flex: none; }
    .ctb-score { flex: none; margin-inline-start: 0; }
    .ctb-jump { display: block; position: relative; flex: 1 1 200px; min-width: 160px; max-width: 420px; margin-inline-start: auto; }
    .ctb-jump > svg { position: absolute; inset-inline-start: 13px; top: 11px; z-index: 1; width: 16px; height: 16px; color: var(--ctb-ink-3); pointer-events: none; }
    .ctb-jump input {
        width: 100%; height: 38px;
        border: 0; border-radius: 999px;
        padding-inline: 38px 44px;
        background: var(--ctb-surface); color: var(--ctb-ink);
        box-shadow: inset 0 0 0 1px var(--ctb-line-2);
        font: inherit;
    }
    .ctb-jump input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--ctb-brand); }
    .ctb-jump > kbd { position: absolute; inset-inline-end: 10px; top: 8px; }
    .ctb-jump-pop {
        position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 70;
        max-height: 340px; overflow: auto; overscroll-behavior: contain;
        padding: 4px;
        border: 1px solid var(--ctb-line); border-radius: var(--ctb-r-m);
        background: var(--ctb-surface);
        box-shadow: var(--ctb-sh-2);
    }
    .ctb-jump-row {
        display: grid; gap: 1px;
        width: 100%; padding: 7px 10px;
        border: 0; border-radius: 8px;
        background: none; color: inherit;
        font: inherit; text-align: start;
        cursor: pointer;
    }
    .ctb-jump-row b { justify-self: start; font-size: 13px; font-weight: 600; }
    .ctb-jump-row span { font-size: 12px; color: var(--ctb-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ctb-jump-row.is-act, .ctb-jump-row:hover { background: var(--ctb-brand-tint); }

    /* ─── سطر القطعة: الرقم والشرائح، وموضعها في الطابور، و«التالي» — لا شريط يطفو فوق الصفوف ─── */
    .ctb-queue { display: none; }
    .ctb-part { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 10px 18px; border-radius: var(--ctb-r-l); }
    .ctb-part-row1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; flex: 1 1 420px; min-width: 0; }
    .ctb-part-pn { font-size: 25px; line-height: 1.1; }
    .ctb-part > .ctb-descs, .ctb-part > .ctb-more-descs { display: none; }
    .ctb-part-end { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
    .ctb-qpos { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ctb-ink-3); white-space: nowrap; }
    .ctb-qpos b { color: var(--ctb-ink); }
    .ctb-dock-wrap, .ctb-shell-main .ctb-dock-wrap { position: static; z-index: auto; display: block; padding: 0; pointer-events: auto; }
    .ctb-dock { gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .ctb-skip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 16px; border-radius: 999px; background: var(--ctb-tonal); color: var(--ctb-ink-2); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
    .ctb-skip:hover { background: var(--ctb-tonal-2); }
    .ctb-next { height: 40px; padding-inline: 18px; gap: 8px; font-size: 13.5px; }
    .ctb-next kbd { background: rgba(255, 255, 255, .22); color: inherit; box-shadow: none; }

    /* ─── الأعمدة الثلاثة: الأوصاف، ثم التوافق، ثم البدائل وتحتها الصفات والكلمات ─── */
    .ctb-panels {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .68fr) minmax(0, .58fr);
        grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr);
        grid-template-areas: "src fit alt alt" "src fit attr kw";
    }
    .ctb-p-src { display: grid; grid-area: src; }
    .ctb-p-fits { grid-area: fit; }
    .ctb-p-alts { grid-area: alt; }
    .ctb-p-attrs { grid-area: attr; }
    .ctb-p-kws { grid-area: kw; }

    /* اللوحة: رأسٌ ثابت وجسمٌ يمرَّر. قوائم TeslaPicker داخل جسمٍ يمرَّر تُرسم position: fixed
       (--tsl-pop، components.js) فلا يقصّها الجسم — ولذلك لا يُرفع القصّ هنا ولا تبقى اللوحة حاوية استعلام:
       الحاوية في محرّكاتٍ أقدم تحبس position: fixed داخلها */
    .ctb-panel, .ctb-panel:has(.tsl-pick-pop) { overflow: hidden; }
    .ctb-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-radius: var(--ctb-r-l); container-type: normal; }
    .ctb-panel-h { min-height: 52px; gap: 9px; padding: 10px 14px; }
    .ctb-panel-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--ctb-tonal); color: var(--ctb-ink-2); }
    .ctb-panel-ic svg { width: 16px; height: 16px; }
    .ctb-panel-cnt { white-space: nowrap; }
    .ctb-panel-h > .ctb-psearch { width: 120px; margin-inline-start: auto; }
    .ctb-panel-h > .ctb-hadd { margin-inline-start: auto; }
    .ctb-panel-h > .ctb-psearch + .ctb-hadd { margin-inline-start: 0; }
    .ctb-panel-body { display: block; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ctb-line-2) transparent; padding-bottom: 8px; --tsl-pop: fixed; }
    .ctb-panel-body > .ctb-addbtn { display: none; }
    .ctb-hadd {
        display: inline-flex; align-items: center; gap: 6px; flex: none;
        height: 32px; padding-inline: 11px;
        border: 0; border-radius: var(--ctb-r-s);
        background: var(--ctb-surface); color: var(--ctb-ink-2);
        box-shadow: inset 0 0 0 1px var(--ctb-line-2);
        font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
        cursor: pointer;
    }
    .ctb-hadd:hover { color: var(--ctb-brand); box-shadow: inset 0 0 0 1px var(--ctb-brand); }
    .ctb-hadd svg { width: 14px; height: 14px; }
    .ctb-hadd kbd { min-width: 20px; height: 20px; }

    /* لون اللوحة: صبغةٌ لكلٍّ منها والتشبّع والإضاءة ثابتان (data-tint على .ctb: head | card | none) */
    .ctb-p-fits { --ctb-h: 190; }
    .ctb-p-alts { --ctb-h: 262; }
    .ctb-p-attrs, .ctb-p-kws { --ctb-h: 318; }
    .ctb[data-tint="head"] .ctb-panel:not(.ctb-p-src) .ctb-panel-h { background: hsl(var(--ctb-h) 55% 95.5%); }
    .ctb[data-tint="card"] .ctb-panel:not(.ctb-p-src) { background: hsl(var(--ctb-h) 55% 96.5%); }
    .ctb:is([data-tint="head"], [data-tint="card"]) .ctb-panel:not(.ctb-p-src) .ctb-panel-ic { background: hsl(var(--ctb-h) 46% 32%); color: #fff; }
    .ctb:is([data-tint="head"], [data-tint="card"]) .ctb-panel:not(.ctb-p-src) .ctb-panel-h h2 { color: hsl(var(--ctb-h) 46% 26%); }
    .ctb[data-tint="card"] .ctb-panel .ctb-row, .ctb[data-tint="card"] .ctb-grp { background: var(--ctb-surface); }

    /* ─── الصفّ سطرٌ واحد ─── */
    .ctb-row { min-height: 44px; column-gap: 10px; row-gap: 0; align-content: center; padding-block: 3px; padding-inline: 14px 10px; }
    .ctb-swipe > .ctb-row { transition: none; }
    .ctb-ib { width: 30px; height: 30px; }
    .ctb-ib svg, .ctb-ib.is-pen svg { width: 15px; height: 15px; }
    .ctb-ib.is-pen, .ctb-ib.is-undo { background: transparent; }
    .ctb-yn { gap: 2px; padding: 2px; background: var(--ctb-tonal-2); }
    .ctb-acts { gap: 5px; justify-content: flex-end; }

    /* الشارة نقطةٌ بلونها، واسم الدرجة في تلميحها (VoteBadge) */
    .ctb-panels .ctb-row > .ctb-row-main .ctb-badge { width: 10px; height: 10px; padding: 0; gap: 0; background: none; font-size: 0; justify-content: center; }
    .ctb-panels .ctb-row > .ctb-row-main .ctb-badge::before { width: 9px; height: 9px; opacity: 1; }
    .ctb-panels .ctb-row > .ctb-row-main .ctb-badge.is-pending::before { background: transparent; box-shadow: inset 0 0 0 2px var(--ctb-warn); }
    .ctb-panels .ctb-row > .ctb-row-main .ctb-badge.is-trust { color: var(--ctb-ok); }
    .ctb-panels .ctb-row > .ctb-row-main .ctb-badge.is-trust::before { box-shadow: 0 0 0 2px var(--ctb-ok-tint-2); }

    /* الصفّ الذي يقف عليه المساهم: بالنقر، أو بالأسهم (ctbKeys)، أو بزرٍّ فيه */
    .ctb-rows > li[data-ctb-row] { outline: 0; box-shadow: none; }
    .ctb-rows > li[data-ctb-row]:hover > .ctb-row:not([class*="is-"]), .ctb-rows > li.ctb-row[data-ctb-row]:not([class*="is-"]):hover { background: var(--ctb-tonal); }
    .ctb-rows > li[data-ctb-row]:hover .ctb-yn { background: var(--ctb-surface); }
    .ctb-rows > li[data-ctb-row]:focus-within > .ctb-row,
    .ctb-rows > li.ctb-row[data-ctb-row]:focus-within { border-radius: 10px; box-shadow: inset 0 0 0 2px var(--ctb-brand); }
    .ctb-rows > li[data-ctb-row]:focus-within > .ctb-row:not([class*="is-"]),
    .ctb-rows > li.ctb-row[data-ctb-row]:not([class*="is-"]):focus-within { background: var(--ctb-brand-tint); }
    .ctb-rows > li[data-ctb-row]:focus-within .ctb-yn { background: var(--ctb-surface); }

    /* التوافق: نقطة، موديل، سنوات، خطّ السنوات، عدّ الأوصاف، أزرار. الأعمدة ثابتة فتتحاذى بين الصفوف
       ومع عنوان الشركة فوقها */
    .ctb-fit .ctb-row, .ctb-grp {
        grid-template-columns: 10px minmax(64px, 1fr) 86px 112px 40px 102px;
        grid-template-areas: "dot model years tl ev acts" "dot sub years tl ev acts";
    }
    .ctb-fit .ctb-row { grid-template-rows: auto auto; }
    .ctb-fit .ctb-row-main, .ctb-fit .ctb-cells, .ctb-fit .ctb-l1 { display: contents; }
    .ctb-fit .ctb-cells small, .ctb-fit .ctb-c-make { display: none; }
    .ctb-fit .ctb-badge { grid-area: dot; align-self: center; }
    .ctb-fit .ctb-c-model { grid-column: model; grid-row: 1 / span 2; align-self: center; min-width: 0; }
    .ctb-fit .has-sub .ctb-c-model { grid-row: 1; align-self: end; }
    .ctb-fit .ctb-c-model b { display: block; overflow: hidden; text-overflow: ellipsis; }
    .ctb-fit .ctb-c-years { grid-column: years; grid-row: 1 / span 2; align-self: center; }
    .ctb-fit .ctb-c-years b { font-size: 12.5px; }
    .ctb-fit .ctb-hint-inline.is-sub { grid-area: sub; align-self: start; min-width: 0; font-size: 10.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ctb-fit .ctb-acts { grid-column: acts; grid-row: 1 / span 2; align-self: center; }
    .ctb-fit .ctb-pend { grid-row: 3; grid-column: 1 / -1; }
    /* السجلّ العامّ بلا موديل ولا سنوات: دعوة تحديده مكان السنوات وخطّها */
    .ctb-fit .ctb-row--gen .ctb-c-years { display: none; }
    .ctb-fit .ctb-row--gen .ctb-hint-inline.is-gen { grid-column: years-start / ev-end; grid-row: 1 / span 2; align-self: center; min-width: 0; color: var(--ctb-warn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* خطّ السنوات: يسارُه أقدم سنة ويمينه أحدثها، والمظلَّل ما ورد في الأوصاف */
    .ctb-fit .ctb-tl { display: block; grid-column: tl; grid-row: 1 / span 2; align-self: center; position: relative; height: 18px; overflow: hidden; border-radius: 5px; background: var(--ctb-tonal); direction: ltr; }
    .ctb-tl-band { position: absolute; inset-block: 0; border-inline: 1px dashed var(--ctb-line-2); background: repeating-linear-gradient(135deg, var(--ctb-tonal-2) 0 4px, transparent 4px 8px); }
    .ctb-tl-bar { position: absolute; inset-block: 4px; min-width: 5px; border-radius: 4px; background: var(--ctb-ink-3); }
    .ctb-row.is-confirmed .ctb-tl-bar { background: var(--ctb-ok); }
    .ctb-row.is-rejected .ctb-tl-bar { background: var(--ctb-bad-tint-2); }
    .ctb-row.is-added .ctb-tl-bar { background: var(--ctb-brand); }
    .ctb-tl-legend { display: flex; align-items: center; gap: 7px; padding: 8px 14px 6px; font-size: 11.5px; color: var(--ctb-ink-3); }
    .ctb-tl-sw { flex: none; width: 16px; height: 10px; border: 1px dashed var(--ctb-line-2); border-radius: 2px; background: repeating-linear-gradient(135deg, var(--ctb-tonal-2) 0 3px, transparent 3px 6px); }

    /* عدّ الأوصاف التي تذكر السيارة */
    .ctb-fit .ctb-ev { display: inline-grid; place-items: center; grid-column: ev; grid-row: 1 / span 2; align-self: center; justify-self: center; min-width: 30px; height: 22px; padding-inline: 7px; border-radius: 999px; background: var(--ctb-tonal); color: var(--ctb-ink-2); font-family: var(--ctb-mono); font-size: 11.5px; font-weight: 600; }
    .ctb-fit .ctb-ev.is-zero { background: none; color: var(--ctb-ink-3); }
    .ctb-fit li[data-ctb-row]:focus-within .ctb-ev:not(.is-zero) { background: var(--ctb-mark); color: var(--ctb-ink); }

    /* عنوان الشركة فوق سياراتها: يلتصق أعلى القائمة، وأعمدته أعمدة الصفّ فيقع مقياس السنوات فوق خطّها */
    .ctb-grp { display: grid; align-items: center; column-gap: 10px; position: sticky; top: 0; z-index: 1; padding-block: 6px; padding-inline: 14px 10px; border-top: 1px solid var(--ctb-line); background: var(--ctb-surface); font-size: 12px; color: var(--ctb-ink-3); }
    .ctb-grp-n { grid-column: 1 / years-end; grid-row: 1; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
    .ctb-grp-n b { font-weight: 600; color: var(--ctb-ink-2); }
    .ctb-tl-scale { grid-column: tl; grid-row: 1; display: flex; justify-content: space-between; direction: ltr; font-family: var(--ctb-mono); font-size: 10.5px; }
    .ctb-tl-scale i { font-style: normal; }
    .ctb-grp-ev { grid-column: ev; grid-row: 1; justify-self: center; font-size: 11px; }

    /* البدائل: نقطة، رقم، أوّل الأوصاف، النوع والملاحظة، أزرار */
    .ctb-p-alts .ctb-row { grid-template-columns: 10px minmax(96px, auto) minmax(40px, 1fr) auto 102px; }
    .ctb-p-alts .ctb-row-main, .ctb-p-alts .ctb-l1 { display: contents; }
    .ctb-p-alts .ctb-badge { grid-area: 1 / 1; }
    .ctb-p-alts .ctb-pn { grid-area: 1 / 2; font-size: 13px; }
    .ctb-p-alts .ctb-row-main > .ctb-desc { grid-area: 1 / 3; min-width: 0; }
    .ctb-p-alts .ctb-tag { grid-area: 1 / 4; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ctb-p-alts .ctb-acts { grid-area: 1 / 5; }
    .ctb-p-alts .ctb-full, .ctb-p-alts .ctb-pend { grid-column: 1 / -1; }

    /* الصفات: اللوحة ضيّقة، فالاسم فوق القيمة والنقطة والأزرار بجانبهما */
    .ctb-attrs .ctb-row { grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-rows: auto auto; padding-block: 5px; }
    .ctb-attrs .ctb-row-main, .ctb-attrs .ctb-l1 { display: contents; }
    .ctb-attrs .ctb-badge { grid-area: 1 / 1 / span 2 / 2; align-self: center; }
    .ctb-attrs .ctb-a-name { grid-area: 1 / 2; align-self: end; line-height: 1.3; }
    .ctb-attrs .ctb-a-val { grid-area: 2 / 2; align-self: start; font-size: 13.5px; line-height: 1.35; }
    .ctb-attrs .ctb-hint-inline { display: none; }
    .ctb-attrs .ctb-acts { grid-area: 1 / 3 / span 2 / 4; align-self: center; }
    .ctb-attrs .ctb-hadd span { display: none; }
    .ctb-sug { margin: 8px 12px; }
    .ctb-kws .ctb-kw-add { flex-wrap: wrap; }
    .ctb-kws .ctb-hint { font-size: 11.5px; }

    /* ─── لوحة الأوصاف ─── */
    .ctb-src-top { position: sticky; top: 0; z-index: 1; padding: 0 12px 6px; background: var(--ctb-surface); }
    .ctb-src-note { padding: 8px 12px; border-radius: var(--ctb-r-s); background: var(--ctb-tonal); color: var(--ctb-ink-2); font-size: 12.5px; line-height: 1.6; }
    .ctb-src-note.is-on { background: var(--ctb-mark); color: var(--ctb-ink); }
    .ctb-src-note.is-none { background: var(--ctb-warn-tint); color: var(--ctb-warn); }
    .ctb-src-ttl { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px 2px; font-size: 12px; font-weight: 600; color: var(--ctb-ink-3); }
    .ctb-src-ttl span { font-weight: 400; }
    .ctb-src-list { display: grid; gap: 4px; padding: 6px 16px 12px; }
    .ctb-src-list li { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 9px; color: var(--ctb-ink-2); font-size: 13px; line-height: 1.65; transition: opacity .12s; }
    .ctb-src-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ctb-line-2); transform: translateY(-3px); }
    .ctb-src-list li span { unicode-bidi: plaintext; overflow-wrap: anywhere; }
    .ctb-src-list li.is-en { font-family: var(--ctb-mono); font-size: 12px; color: var(--ctb-ink-3); }
    .ctb-src-list.is-linked li:not(.is-hit) { opacity: .4; }
    .ctb-src-list li.is-hit::before { background: var(--ctb-ink-2); }
    .ctb mark { padding: 0 2px; border-radius: 4px; background: var(--ctb-mark); color: var(--ctb-ink); }

    /* ─── السطر الأخير: الاختصارات في طرف، وما حدث في الطرف الآخر — لا رسالة تطفو فوق الصفوف ─── */
    .ctb-keys { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; min-height: 34px; font-size: 12px; color: var(--ctb-ink-3); }
    .ctb-keys > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
    .ctb--contrib .ctb-keys > .ctb-toast {
        position: static; inset-inline: auto; bottom: auto;
        width: auto; max-width: 62%; margin-inline: auto 0;
        padding: 6px 18px;
        box-shadow: none;
        text-align: start;
    }
    /* داخل لوحة التحكّم الصفحة هي التي تمرَّر ولا سطر يلتصق بأسفلها (‎.main-content‎ حاوية تمرير لا تمرَّر)،
       فتبقى الرسالة عائمة — وبلا شريط «التالي» العائم تنزل إلى أسفل الشاشة */
    .ctb--staff .ctb-toast { bottom: 24px; }
    .ctb-toast.is-busy, .ctb-shell-main .ctb-toast.is-busy { bottom: 10px; }
}

/* موظّف المنصّة والشريط الجانبيّ للوحة مفتوح (نحو 320 بكسل من العرض): لا متّسع للأوصاف عموداً ثالثاً حتى 1440 —
   تبقى في سطر القطعة مطويّةً، واللوحات عمودان */
@media (min-width: 1180px) and (max-width: 1439.98px) {
    .ctb--staff .ctb-p-src { display: none; }
    .ctb--staff .ctb-panels {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, .55fr) minmax(0, .5fr);
        grid-template-areas: "fit alt alt" "fit attr kw";
    }
    .ctb--staff .ctb-part > .ctb-descs { display: grid; flex: 1 1 100%; order: 3; }
    .ctb--staff .ctb-part > .ctb-more-descs { display: inline-block; order: 4; }
}

/* خطّ السنوات يحتاج لوحة توافقٍ أعرض من 530 بكسل، وإلا لم يبقَ لاسم الموديل إلا 64 (قيس على 1366): للمساهم من
   عرض 1500، ولموظّف المنصّة من 1800. ودونه سطر القطعة يختصر ليبقى سطراً واحداً */
@media (min-width: 1180px) and (max-width: 1499.98px) {
    .ctb-next kbd, .ctb-qpos-tail { display: none; }
    .ctb--contrib .ctb-fit .ctb-row, .ctb--contrib .ctb-grp {
        grid-template-columns: 10px minmax(64px, 1fr) 86px 40px 102px;
        grid-template-areas: "dot model years ev acts" "dot sub years ev acts";
    }
    .ctb--contrib .ctb-fit .ctb-tl, .ctb--contrib .ctb-tl-scale, .ctb--contrib .ctb-tl-legend { display: none; }
}
@media (min-width: 1180px) and (max-width: 1799.98px) {
    .ctb--staff .ctb-next kbd, .ctb--staff .ctb-qpos-tail { display: none; }
    .ctb--staff .ctb-fit .ctb-row, .ctb--staff .ctb-grp {
        grid-template-columns: 10px minmax(64px, 1fr) 86px 40px 102px;
        grid-template-areas: "dot model years ev acts" "dot sub years ev acts";
    }
    .ctb--staff .ctb-fit .ctb-tl, .ctb--staff .ctb-tl-scale, .ctb--staff .ctb-tl-legend { display: none; }
}

@media (min-width: 1180px) and (hover: hover) and (pointer: fine) {
    .ctb .ctb-jump input { font-size: 13.5px !important; }
}

/* تصميم الحاسب في الوضع الليليّ: الصبغة نفسها بإضاءةٍ داكنة */
@media (min-width: 1180px) {
    .dark .ctb[data-tint="head"] .ctb-panel:not(.ctb-p-src) .ctb-panel-h { background: hsl(var(--ctb-h) 32% 15%); }
    .dark .ctb[data-tint="card"] .ctb-panel:not(.ctb-p-src) { background: hsl(var(--ctb-h) 32% 12%); }
    .dark .ctb:is([data-tint="head"], [data-tint="card"]) .ctb-panel:not(.ctb-p-src) .ctb-panel-ic { background: hsl(var(--ctb-h) 40% 38%); }
    .dark .ctb:is([data-tint="head"], [data-tint="card"]) .ctb-panel:not(.ctb-p-src) .ctb-panel-h h2 { color: hsl(var(--ctb-h) 55% 80%); }
    .dark .ctb-next kbd { background: rgba(0, 0, 0, .18); }
}