/* car-register — پوستهٔ لمسی. هیچ ارجاعِ بیرونی ندارد: نه CDN، نه اسکریپت.
 *
 * ── هویتِ بصری (CAR-WO-013 · بازنگریِ CAR-WO-015) ──────────────────────────
 * کاربرِ اصلی **دمِ در، ایستاده، زیرِ نورِ روز، احتمالاً با دستکش** است. پس
 * هر تصمیمِ این پالت از خوانایی می‌آید نه از سلیقه:
 *   · کنتراستِ هر جفتِ متن/زمینه ≥ ۴٫۵ — و `--muted` هم مستثنا نیست، چون
 *     نصفِ اطلاعاتِ تابلو (چقدر اینجاست، مالک، برچسب) همان‌جاست.
 *   · زمینهٔ کاغذیِ گرم به‌جای سفیدِ خالص: زیرِ آفتاب کمتر خیره می‌کند.
 *   · لهجهٔ سبز، چون تنها رنگِ «اقدام» است و باید از برچسب‌ها جدا بماند.
 * ⚠️ **هیچ رنگی بیرون از این بلوک نوشته نمی‌شود** — نه در بقیهٔ CSS، نه در
 * HTML، نه در JS. سنجهٔ ui_contract نگهبانش است، و همین چیزی است که پاسِ
 * بصریِ بعدی را ارزان نگه می‌دارد.
 */

/* ── فونت — وزیرمتن، محلی و متغیر ─────────────────────────────────────────
 * ⚠️ **ارجاعِ بیرونی نیست:** فایل‌ها کنارِ خودِ اپ‌اند (`fonts/`)، پس روی تبلتی
 * که اینترنتش لق است هم می‌آیند و روی هاستِ کارفرما هم به چیزی وصل نمی‌شوند.
 * فایلِ **متغیر** است (وزنِ ۱۰۰ تا ۹۰۰ در یک فایل)، پس برای سه وزنی که
 * استفاده می‌کنیم سه دانلود لازم نیست.
 * و **دو تکه** با `unicode-range`: مرورگر تکهٔ لاتین (۳۴KB) را فقط وقتی
 * می‌گیرد که واقعاً حرفِ لاتین ببیند — پلاکِ فارسی آن را لازم ندارد.
 * `font-display: swap` یعنی متن **بلافاصله** با فونتِ سیستم دیده می‌شود و بعد
 * جا می‌افتد؛ صفحهٔ سفیدِ منتظرِ فونت روی تبلتِ دمِ در قابلِ قبول نیست.
 */
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/vazirmatn-arabic.woff2') format('woff2-variations'),
       url('fonts/vazirmatn-arabic.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D, U+2010-2011;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/vazirmatn-latin.woff2') format('woff2-variations'),
       url('fonts/vazirmatn-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  /* ── سطح‌ها ──────────────────────────────────────────────────────────── */
  --bg: #f1eee7; --card: #ffffff; --sunken: #f7f5f1;
  /* ⚠️ سرِ شفافِ همان `--card` — محوشدگی به **دو سرِ یک رنگ** نیاز دارد و
     نوشتنِ مستقیمِ rgba بیرون از اینجا گاردِ «صفر رنگِ سفت» را می‌شکند
     (و همان گارد همین را گرفت). `transparent` جایش را نمی‌گیرد: در
     درون‌یابی از سیاهِ شفاف رد می‌شود و لبه را خاکستری نشان می‌دهد. */
  --card-0: rgba(255, 255, 255, 0);
  --ink: #16161a; --muted: #57554f;
  --line: #ded9cf; --line-soft: #ebe7df;

  /* ── لهجه ────────────────────────────────────────────────────────────── */
  --accent: #0f5c46; --accent-deep: #0a4534; --accent-soft: #e4efea;
  --on-accent: #ffffff;
  /* آبیِ نوارِ پلاک — تنها رنگی که از خودِ پلاکِ واقعی می‌آید. */
  --plate-blue: #14459b;
  --warn: #8a4409; --bad: #93211f;

  /* ── سایه‌ها: عمق به‌جای خطِ دورِ همه‌چیز ──────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(22, 22, 26, .06);
  --shadow: 0 2px 8px rgba(22, 22, 26, .07), 0 1px 2px rgba(22, 22, 26, .04);
  --shadow-lg: 0 6px 20px rgba(22, 22, 26, .10), 0 2px 6px rgba(22, 22, 26, .05);
  --focus: rgba(15, 92, 70, .35);
  /* پردهٔ پشتِ تور — رنگ است، پس مثلِ هر رنگِ دیگری اینجا زندگی می‌کند. */
  --veil: rgba(22, 22, 26, .55);

  /* نوارهای پیام — سه جفتِ زمینه/حاشیه/متن، هر سه با همان قیدِ کنتراست. */
  --bad-bg: #fbe9e9;  --bad-line: #edb0ae;  --bad-ink: #7a1a18;
  --warn-bg: #faefdf; --warn-line: #e4be86; --warn-ink: #6f3607;
  --ok-bg: #e4f1ea;   --ok-line: #a4d3bd;   --ok-ink: #0f5340;

  --r-sm: 10px; --r: 14px; --r-lg: 18px;
  --tap: 56px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink); direction: rtl;
  font-family: Vazirmatn, Tahoma, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.72; -webkit-text-size-adjust: 100%;
  /* وزیرمتن ارقامِ فارسی را دارد؛ این دو فقط کیفیتِ رندر را بالا می‌برند. */
  font-feature-settings: "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* 🔴 CAR-F-03 — بدونِ این، مرورگر پس از هر لمس ~۳۰۰ میلی‌ثانیه صبر می‌کند تا
     ببیند «ضربهٔ دوم» می‌آید یا نه (بزرگ‌نماییِ دوضربه‌ای). کاربرِ این اپ
     **ایستاده، دمِ در، در لحظه** کار می‌کند و فرمِ پذیرش ده‌ها لمس دارد —
     همین یک‌سومِ ثانیه است که حسِ «کند است» را می‌سازد.
     `manipulation` فقط بزرگ‌نماییِ دوضربه‌ای را برمی‌دارد؛ اسکرول و پینچ
     سرِ جایشان می‌مانند. و چون رفتارِ لمس از **زنجیرهٔ نیاکان** حساب می‌شود،
     نشاندنش روی `body` همهٔ فرزندها را می‌گیرد.
     ⚠️ هیچ سنجه‌ای سرعت را نمی‌سنجید؛ این از اجرای اسکیلِ `web-design-guidelines`
     در دورِ بازرسی درآمد (۱۴۰۵/۰۵/۲۵). */
  touch-action: manipulation;
}
/* و صریح روی خودِ هدف‌های لمس. روی `body` برای رفتار کافی است (زنجیرهٔ نیاکان)،
   ولی اندازه‌گیریِ یک دکمه همچنان `auto` می‌داد — و بازرسِ بعدی همان را
   می‌سنجد و دوباره گزارش می‌دهد. نیت باید در خودِ عنصر خوانده شود. */
button, a, input, select, textarea, label, [data-action] { touch-action: manipulation; }
.wrap { max-width: 780px; margin: 0 auto; padding: 18px 16px 40px; }

/* ── سرصفحه: نشانه + نامِ اپ + عنوانِ صفحه ─────────────────────────────────
   پیش از این هر صفحه فقط یک عنوان داشت و هیچ‌جا معلوم نبود کاربر در کدام
   محصول است — روی دموی کارفرما این یعنی «یک صفحهٔ وب»، نه «یک سامانه».
   ⚠️ چسبنده است: نگهبان تابلوی بلند را اسکرول می‌کند و نباید نام و دکمهٔ
   خروج را گم کند. */
header.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--card);
  border-bottom: 1px solid var(--line-soft); box-shadow: var(--shadow-sm);
}
header.bar .brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
header.bar .brand svg {
  width: 40px; height: 40px; color: var(--on-accent); flex: none;
  background: var(--accent); border-radius: var(--r-sm); padding: 4px;
  box-shadow: var(--shadow-sm);
}
/* ── لوگوی مجموعه (`CAR-DEC-068`) ─────────────────────────────────────────
   🔴 **تضمینِ چیدمان اینجاست، نه در فایلِ ذخیره‌شده.** کوچک‌کردنِ خودِ تصویر
   روی سرور یک بهینه‌سازیِ پهنای باند است و به `GD` بند است — که روی هاستِ
   اشتراکی تضمین‌شده نیست. این سه خط روی **هر** لوگویی کار می‌کند.
   ⚠️ `object-fit: contain` یعنی لوگوی پهن **کوتاه‌تر** می‌شود، نه کشیده. */
header.bar .brand .clogo {
  height: 40px; max-width: 104px; width: auto; flex: none;
  object-fit: contain; object-position: center; display: block;
}
/* جداکنندهٔ باریک — تا دو نشان به هم نچسبند و «یک لوگوی عجیب» دیده نشوند. */
header.bar .brand .brand-sep { width: 1px; height: 26px; background: var(--line); flex: none; }
header.bar .brand .names { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
header.bar .brand .app { font-size: 12px; font-weight: 500; color: var(--muted); }
header.bar .brand .page { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
header.bar .spacer { flex: 1 1 auto; }
header.bar .who { color: var(--muted); font-size: 14px; }
header.bar button { min-height: 44px; padding: 8px 14px; font-size: 15px; }
h1 { font-size: 23px; margin: 6px 0 16px; font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: 18px; margin: 24px 0 10px; font-weight: 700; letter-spacing: -.01em; }
.card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px;
  box-shadow: var(--shadow);
}
label { display: block; margin: 14px 0 6px; color: var(--muted); font-size: 15px; font-weight: 500; }
input[type=text], input[type=number], input[type=tel],
input[type=email], input[type=password], textarea, select {
  width: 100%; min-height: var(--tap); padding: 10px 14px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--sunken); color: var(--ink);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
input:focus, textarea:focus, select:focus {
  outline: none; background: var(--card);
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus);
}
textarea { min-height: 96px; }
button {
  min-height: var(--tap); min-width: var(--tap); padding: 12px 20px; font: inherit; font-weight: 500;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink);
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .08s, box-shadow .12s, background .12s, border-color .12s;
}
button:hover { border-color: var(--accent); }
/* بازخوردِ لمس: انگشت روی شیشه ردی نمی‌گذارد، پس دکمه باید خودش بگوید خورد. */
button:active { transform: translateY(1px); box-shadow: none; }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
/* 🔴 **لینکی که دکمه است، باید دکمه به‌نظر برسد.** «ورودِ پرسنل» روی صفحهٔ
   کد یک `<a>` است نه `<button>` — چون واقعاً ناوبری است و باید کلیکِ راست و
   «بازکردن در زبانهٔ جدید» را هم بدهد. ولی بدونِ این قاعده یک لینکِ کوچکِ
   آبی می‌شد که کسی نمی‌زندش.
   ⚠️ `--tap` عیناً رعایت می‌شود، مثلِ هر هدفِ لمسِ دیگر. */
a.btn {
  display: block; text-align: center; text-decoration: none;
  min-height: var(--tap); padding: 15px 18px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-weight: 600; box-shadow: var(--shadow-sm);
}
a.btn:hover { border-color: var(--accent); }
a.btn.primary {
  background: var(--accent); border-color: var(--accent-deep);
  color: var(--on-accent); box-shadow: var(--shadow);
}
a.btn.primary:hover { background: var(--accent-deep); }

button.primary {
  background: var(--accent); border-color: var(--accent-deep); color: var(--on-accent);
  font-weight: 700; box-shadow: var(--shadow);
}
button.primary:hover { background: var(--accent-deep); }
button.wide { width: 100%; margin-top: 14px; }
/* حالتِ انتخاب‌شده: پُر می‌شود، نه فقط خط‌دار — از دو قدم فاصله هم دیده شود. */
button[aria-pressed=true] {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent);
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair button { height: 88px; font-size: 18px; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 330px; margin: 0 auto; }
.pad button { height: 70px; font-size: 26px; font-weight: 600; }
.dots { text-align: center; font-size: 30px; letter-spacing: 14px; min-height: 44px; color: var(--accent); }
.plate { display: grid; grid-template-columns: 1.1fr 1fr 1.4fr 1.2fr; gap: 8px; direction: ltr; }
.plate input, .plate select { text-align: center; padding: 10px 4px; }
/* هر خانه راهنمای خودش را زیرش دارد — «ایران» همان جایی که کاربر گیر می‌کرد. */
.pcell { display: flex; flex-direction: column; gap: 4px; }
.pcell > span { font-size: 12px; color: var(--muted); text-align: center; }
.pcell.iran > span { color: var(--accent); font-weight: 700; }
.pcell.iran input { border-color: var(--accent); }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.items button { text-align: right; font-size: 16px; padding: 10px 12px; }
.msg { padding: 13px 15px; border-radius: var(--r); margin: 12px 0; font-size: 15px; box-shadow: var(--shadow-sm); }
.msg.bad  { background: var(--bad-bg);  border: 1px solid var(--bad-line);  color: var(--bad-ink); }
.msg.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.msg.ok   { background: var(--ok-bg);   border: 1px solid var(--ok-line);   color: var(--ok-ink); }
.miss { color: var(--warn); font-size: 15px; }
.muted { color: var(--muted); font-size: 14px; }
/* ── صفحهٔ پذیرش: یک صفحه، بخش‌های شماره‌دار (حکمِ lead ۱۴۰۵/۰۶/۰۳) ────────
 * ⚠️ **بخش، نه گام.** نوارِ پیشرفتِ `.steps` از این صفحه رفت چون چیزی برای
 * پیشرفت نیست — همه‌چیز هم‌زمان روی صفحه است. شماره‌ها فقط ترتیبِ چشم را
 * می‌گویند و کاربر می‌تواند بالا و پایین برود.
 * ⚠️ هیچ رنگی اینجا نوشته نمی‌شود؛ همه از توکن‌های بالای فایل می‌آیند.
 */
.intake { max-width: 640px; }
.page-title { font-size: 27px; margin: 10px 0 4px; }
.lede { color: var(--muted); font-size: 15px; margin: 0 0 26px; }

/* فاصلهٔ سخاوتمندانه بینِ بخش‌ها — همان چیزی که «شلوغ» را به «آرام» تبدیل
   می‌کند، و ارزان‌ترین کاری است که می‌شود برای خوانایی کرد. */
.sec { margin-bottom: 30px; }
.sec > h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; font-size: 17px;
}
/* شمارهٔ بخش — دایرهٔ کوچکِ آرام، نه نشانِ بزرگ. */
.sec .num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 15px; font-weight: 700;
}
/* خطِ آرامِ «پرونده ساخته شد» — خبر است، نه هشدار. */
.saved {
  margin: 10px 2px 0; font-size: 14px; color: var(--accent-deep);
  background: var(--accent-soft); border-radius: var(--r-sm);
  padding: 9px 13px;
}
/* سه‌گزینه‌ایِ وسایل — همان `.pair` با یک ستونِ بیشتر. روی صفحهٔ باریک
   می‌شکند و تک‌ستونی می‌شود، چون سه دکمهٔ ۱۱۰ نقطه‌ای کنارِ هم روی گوشی
   نمی‌گنجند. */
.pair.three { grid-template-columns: repeat(3, 1fr); }
.pair.three button { height: 76px; font-size: 16px; }
@media (max-width: 520px) {
  .pair.three { grid-template-columns: 1fr; }
  .pair.three button { height: var(--tap); }
}
/* ناحیهٔ پایانی — دکمهٔ اصلی از بقیهٔ صفحه فاصله می‌گیرد تا «تمامِ کار» به‌نظر
   برسد، نه یک دکمهٔ دیگر بینِ دکمه‌ها. */
/* ── چاپِ برچسب‌ها (حکمِ lead ۱۴۰۵/۰۶/۰۵) ─────────────────────────────────
 * 🔴 **بدونِ قاعدهٔ اندازه، مرورگر A4 چاپ می‌کند** — یعنی برچسبِ سوئیچ یک
 * صفحهٔ کامل می‌شود و کسی نمی‌تواند بچسباندش. برچسب باید کوچک و چسباندنی
 * باشد؛ رسید همان A4 می‌ماند چون سندِ امانت است و دستِ مشتری می‌رود.
 * ⚠️ هر برچسب **صفحهٔ خودش** را می‌گیرد (`break-after`)، وگرنه سه‌تایی روی یک
 * کاغذ می‌افتند و بریدنشان دستی می‌شود.
 */
.labels { page-break-after: always; break-after: page; }
@media print {
  /* کوچک و مربع‌وار — اندازهٔ یک برچسبِ چسبِ معمولی. */
  .labels { padding: 6mm; text-align: center; }
  .labels h2 { font-size: 12pt; margin: 0 0 4mm; }
  .labels .ph-qr svg { width: 38mm; height: 38mm; }
  .labels .bigcode { font-size: 20pt; letter-spacing: .12em; margin: 3mm 0 0; }
  /* راهنمای زیرِ برچسبِ شیشه روی کاغذِ کوچک جا نمی‌شود و لازم هم نیست. */
  .labels .muted { display: none; }
}

/* ══ زبانِ سند — یک الگو برای هر سه سندِ رو‌به‌مشتری (حکمِ lead ۱۴۰۵/۰۶/۰۶) ══
 *
 * 🔴 **سه سند بودند و سه پوسته داشتند.** رسیدِ آنلاین، رسیدِ چاپی، و مجوزِ
 * خروج هرکدام جای دیگری شکل گرفته بودند — یکی `<pre>`ی متنِ خام، یکی کارتِ
 * اپ. کارفرما این‌ها را **جلوی مشتری** می‌گذارد؛ سه لحن یعنی «سیستم ندارند».
 * ⚠️ **یک الگو، سه کاربرد** — نه سه شکلِ شبیهِ هم. شکلِ شبیه، فردا واگرا
 * می‌شود؛ الگوی مشترک نمی‌شود.
 *
 * ⚠️ و هیچ رنگی اینجا نوشته نمی‌شود؛ همه از توکن‌های بالای فایل می‌آیند.
 */
.doc {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 28px 22px;
  margin: 0 auto 18px;
  max-width: 780px;
  box-shadow: var(--shadow);
}

/* ── سربرگ: نشانه و نامِ مجموعه، بعد عنوانِ سند و شناسه‌اش ─────────────────
   ترتیب عمدی است: چشم اول می‌پرسد «از طرفِ کی؟» و بعد «چه سندی؟». */
/* 🔴 **سربرگ روی عرضِ باریک می‌شکند، نه سرریز** (باگِ چیدمانِ ۱۴۰۵/۰۶/۰۸،
   اندازه‌گیری‌شده: ۳۱۲ نقطه در ۲۸۶). دو ستونِ ثابت روی گوشیِ ۳۷۵ جا نمی‌شوند
   و `flex: none` روی هر دو یعنی هیچ‌کدام کوتاه نمی‌آید.
   ⚠️ رفع **شکستن** است نه کوچک‌کردن: سندِ رسمی نباید ریزتر شود تا جا برود. */
.doc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 2px solid var(--ink);
}
/* نامِ مجموعه هم می‌شکند؛ روی کاغذ همیشه یک خط می‌ماند چون عرض هست. */
.doc-org { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.doc-org .name { min-width: 0; overflow-wrap: anywhere; }
.doc-org svg { width: 40px; height: 40px; color: var(--accent); flex: none; }
/* لوگوی مجموعه روی سند — **همان قاعدهٔ سربرگ** (`CAR-DEC-068`): ارتفاعِ ثابت،
   سقفِ عرض، و `contain` تا لوگوی پهن کوتاه شود نه کشیده. */
.doc-org .doc-clogo { height: 40px; max-width: 104px; width: auto; flex: none;
  object-fit: contain; object-position: center; display: block; }
.doc-org .doc-sep { width: 1px; height: 26px; background: var(--line); flex: none; }
.doc-org b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; display: block; }
.doc-org span { font-size: 12px; color: var(--muted); display: block; margin-top: 1px; }
/* ⚠️ `direction: ltr` اینجا **برداشته شد**: متنِ داخلش فارسی است («شمارهٔ
   پرونده: …») و جهتِ چپ‌به‌راست همان چیزی بود که دونقطه و عدد را جابه‌جا
   می‌کرد. جزیرهٔ دوطرفه کافی است و جهت را به متن واگذار می‌کند. */
/* ⚠️ `flex: none` برداشته شد — همان چیزی بود که سربرگ را وادار می‌کرد سرریز
   کند به‌جای اینکه بشکند. روی کاغذ عرض هست و چیزی عوض نمی‌شود. */
.doc-meta { text-align: left; font-size: 12px; color: var(--muted); line-height: 1.9;
            unicode-bidi: isolate; flex: 0 1 auto; min-width: 0; }
.doc-meta b { display: block; color: var(--ink); font-size: 13px; font-weight: 700;
              unicode-bidi: isolate; }

/* ── عنوانِ سند ────────────────────────────────────────────────────────── */
/* ⚠️ `text-wrap: balance` روی عنوان: تیترِ دوخطی که خطِ دومش یک واژه باشد،
   روی کاغذ شکسته به‌نظر می‌رسد. */
.doc-title { margin: 18px 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.01em;
             text-wrap: balance; }
.doc-sub   { margin: 0 0 18px; font-size: 13px; color: var(--muted); max-width: 62ch; }

/* ── جدولِ مشخصات — دو ستون، خط‌های نازک، بی‌رنگ ───────────────────────────
   ⚠️ `kv`ی اپ اینجا استفاده نمی‌شود: آن برای صفحهٔ لمسی است (درشت و فاصله‌دار)
   و روی کاغذ ولخرجیِ فضاست. سند فشرده و متین است. */
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 0 0 18px; }
/* 🔴 **ریشهٔ بهم‌ریختگیِ چیدمان** (حکمِ lead ۱۴۰۵/۰۶/۰۷): در یک خطِ راست‌به‌چپ،
   مقدارِ **لاتین** (`EG47VE`, `2018`, `09120000000`) با برچسبِ فارسی قاطی
   می‌شد و مرورگر ترتیبِ دوطرفه را جای دیگری می‌شکست — پرانتز و خط‌تیره
   می‌پریدند و عدد آخرِ خط می‌افتاد.
   ⚠️ رفع **در سطحِ خودِ خانه** است نه با فاصله‌گذاری: هر مقدار جزیرهٔ
   دوطرفهٔ خودش می‌شود (`isolate`) تا هرچه داخلش باشد بیرون را به‌هم نریزد. */
.doc-grid .row { display: flex; justify-content: space-between; align-items: baseline;
                 gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line-soft);
                 font-size: 14px; }
.doc-grid .row b { color: var(--muted); font-weight: 500; white-space: nowrap; flex: none; }
.doc-grid .row span {
  font-weight: 600; text-align: left;
  unicode-bidi: isolate;              /* جزیرهٔ دوطرفه — بیرون را به‌هم نمی‌ریزد */
  overflow-wrap: anywhere;            /* مقدارِ بلند می‌شکند، از کادر بیرون نمی‌زند */
}
@media (max-width: 560px) { .doc-grid { grid-template-columns: 1fr; } }

/* ── بندِ حقوقی — ریز، ولی خوانا. سندی که شرطش را ننویسد سند نیست. */
/* ⚠️ **بندِ حقوقی هم‌تراز می‌شود، نه دوطرفه‌چین**: `justify` در فارسی فاصله‌های
   بینِ واژه را کش می‌دهد و «رودخانه»های سفید می‌سازد — همان چیزی که متن را
   بهم‌ریخته نشان می‌داد. و `max-width` روی حروف است نه پیکسل: خطِ بلندتر از
   حدودِ ۷۵ نویسه چشم را گم می‌کند. */
.doc-terms { font-size: 12px; line-height: 2; color: var(--muted);
             background: var(--sunken); border-radius: var(--r-sm);
             padding: 12px 14px; margin: 0 0 20px;
             text-align: right; max-width: 76ch; }

/* ── جای مهر و امضا (حکمِ lead) ────────────────────────────────────────────
   🔴 بدونِ این، برگه یک **رسیدِ چاپی** است نه یک **سند**. دو خانه: امضای
   تحویل‌گیرنده و مهرِ مجموعه. */
/* 🔴 **یک خانهٔ امضا در هر نسخه** (حکمِ lead ۱۴۰۵/۰۶/۰۷): هر نسخه امضای
   **طرفِ مقابل** را می‌گیرد، نه هر دو را. دو خانهٔ خالی در هر دو نسخه یعنی
   هیچ‌کدام تعهدی را ثابت نمی‌کند. */
.doc-sign { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
.doc-sign.one { max-width: 60%; margin-inline-start: auto; }
.doc-sign > div { border: 1px dashed var(--line); border-radius: var(--r-sm);
                  min-height: 88px; padding: 8px 12px; }
.doc-sign b { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ── پاورقیِ نسخه (حکمِ lead: دو نسخه برای اسنادِ امانت) ───────────────────── */
.doc-copy { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line-soft);
            display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }

/* ── QRِ کنارِ سربرگ ──────────────────────────────────────────────────────── */
.doc-qr { flex: none; text-align: center; }
.doc-qr svg { display: block; }
.doc-qr small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; direction: ltr; }

/* ── چاپ ──────────────────────────────────────────────────────────────────
 * ⚠️ **هر نسخه صفحهٔ خودش را می‌گیرد.** دو نسخه روی یک کاغذ یعنی کسی باید
 *    قیچی بردارد — و برنمی‌دارد. */
@media print {
  .doc { border: 0; border-radius: 0; box-shadow: none;
         padding: 0 0 8mm; margin: 0; max-width: none; font-size: 11pt; }
  .doc + .doc { page-break-before: always; break-before: page; }
  /* روی کاغذ عرض هست، پس سربرگ یک خط می‌ماند — شکستن فقط برای صفحهٔ باریک است. */
  .doc-head { padding-bottom: 4mm; flex-wrap: nowrap; }
  .doc-title { margin: 6mm 0 1mm; font-size: 15pt; }
  .doc-grid .row { padding: 1.6mm 0; font-size: 10.5pt; }
  .doc-terms { background: transparent; border: 1px solid var(--line);
               padding: 3mm; font-size: 9pt; }
  .doc-sign { margin-top: 8mm; }
  .doc-sign > div { min-height: 24mm; }
}

/* ══ کارتِ خودرو: یک دکمهٔ اصلی + ⋮ (حکمِ lead ۱۴۰۵/۰۶/۰۷) ══════════════════
 * 🔴 پیش از این پنج دکمه کنارِ هم بودند و روی موبایل **دیوارِ دکمه** می‌شد.
 * و بدتر از شلوغی: وقتی همه هم‌وزن باشند، هیچ‌کدام مهم به‌نظر نمی‌رسد.
 */
.acts { display: flex; align-items: center; gap: 10px; }
.acts > button.primary { flex: 1; }        /* کارِ اصلی فضا می‌گیرد */

/* ⋮ — هدفِ لمس کامل، ولی بی‌سروصدا. */
.menu { position: relative; flex: none; }
.dots-btn { width: var(--tap); min-height: var(--tap); font-size: 22px; line-height: 1;
            padding: 0; color: var(--muted); }
.menu-list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 224px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  /* اگر از هر دو طرف بلندتر بود، خودش اسکرول می‌شود — گزینه بی‌صدا بریده نمی‌شود. */
  overflow-y: auto; overscroll-behavior: contain;
}
/* 🔴 **بازشدن به بالا** وقتی زیرِ دکمه جا نیست. ارتفاعِ نهایی را JS می‌گذارد،
   چون فقط او جای واقعیِ دکمه را در لحظهٔ بازشدن می‌داند. */
.menu-list.up { top: auto; bottom: calc(100% + 6px); }

/* 🔴 **تایل‌های منو دیده می‌شوند** (باگِ چیدمانِ ۱۴۰۵/۰۶/۰۸): پیش از این
   حاشیه‌شان **شفاف** بود و زمینه‌شان سفیدِ روی سفید — یعنی فهرستی از متن، نه
   دکمه، و کاربر نمی‌دانست کجا را باید بزند.
   ⚠️ و ارتفاعشان `48px` بود در حالی که توکن `--tap: 56px` است — همان
   نقضِ توکن که یک‌بار روی کارت گرفتیم. */
.menu-list button {
  text-align: right; box-shadow: none;
  min-height: var(--tap); font-size: 15px; font-weight: 500;
  background: var(--sunken); border-color: var(--line-soft);
  /* برچسبِ بلند («ببر به پارکینگ P4») می‌شکند، از تایل بیرون نمی‌زند. */
  white-space: normal; line-height: 1.5; padding: 8px 14px;
}
.menu-list button:hover  { background: var(--accent-soft); border-color: var(--accent); }
.menu-list button:active { background: var(--accent-soft); }

/* کارتِ قابلِ لمس — بازخوردِ لمس دارد، چون دکمه است حتی اگر شبیهش نباشد. */
.row.tappable { cursor: pointer; }
.row.tappable:active { transform: translateY(1px); }
.row.tappable:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }

/* ⚠️ روی صفحهٔ باریک، دکمهٔ اصلی کلِ عرض را می‌گیرد و ⋮ کنارش می‌ماند —
   نه زیرش، وگرنه کارت دو ردیفه می‌شود و همان شلوغی برمی‌گردد. */
@media (max-width: 420px) {
  .menu-list { min-width: 200px; }
}

/* کادرِ آزادسازی با رسید — راهِ رایج، پس بالای صفحه و برجسته. */
.release { border: 1px solid var(--accent); background: var(--accent-soft); }
.release h2 { margin-top: 0; }
.release input { background: var(--card); letter-spacing: .06em; }

.finish { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.finish .miss { margin: 0 2px 12px; }
/* 🔴 **دکمهٔ پایانی پررنگ‌تر** (پولیشِ lead). این تنها دکمهٔ صفحه است که کار را
   تمام می‌کند، پس باید از هر دکمهٔ دیگری سنگین‌تر دیده شود — نه با رنگِ تازه
   (هیچ رنگی بیرونِ توکن‌ها نوشته نمی‌شود)، بلکه با **سیرترین سبزِ همان پالت**
   و سایهٔ بلندتر. */
button.big { height: 64px; font-size: 19px; }
button.primary.big {
  background: var(--accent-deep); border-color: var(--accent-deep);
  box-shadow: var(--shadow-lg);
}
button.primary.big:hover { background: var(--accent); }

.steps { display: flex; gap: 8px; margin-bottom: 16px; }
.steps span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); transition: background .2s; }
.steps span.on { background: var(--accent); }
/* 🔴 `!important` اینجا **لازم** است، نه تنبلی. `.hide` یک کلاسِ ابزاری است و
   تکِ‌کلاسی؛ هر قاعدهٔ تکِ‌کلاسیِ دیگری که پایین‌تر `display` بدهد (و ده‌ها
   تای‌شان هست: `.tabs`، `.counts`، `.brands`، `.items`، `.pair` …) آن را
   می‌بَرد. نتیجه‌اش عنصری است که **دیده نمی‌شود ولی جا می‌گیرد** — روی نوارِ
   جمع‌شوندهٔ «مدیریت» دقیقاً همین شد و ۱۲۰ نقطه از صفحهٔ تبلت را خورد، بی‌آنکه
   چیزی نشان دهد (۱۴۰۵/۰۵/۲۳، در مرورگر دیده شد).
   سنجهٔ ui_contract نگهبانش است. */
.hide { display: none !important; }
.list button { width: 100%; text-align: right; margin-bottom: 10px; font-size: 18px; font-weight: 600; }
.list .role { color: var(--muted); font-size: 14px; font-weight: 400; }

/* ── تابلو (CAR-WO-004) ─────────────────────────────────────────────────────
   پرنگاه‌ترین سطحِ اپ. نگهبان اینجا می‌ایستد و چشمش سه چیز را می‌خواهد:
   پلاک، چقدر اینجاست، و چه کاری مانده. بقیه باید عقب بنشیند. */
button.big {
  font-size: 19px; min-height: 76px; margin-bottom: 16px; font-weight: 700;
  border-radius: var(--r-lg);
}
.counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 16px; }
.counts div {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 12px 8px; text-align: center; box-shadow: var(--shadow-sm);
}
.counts b { display: block; font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.counts span { color: var(--muted); font-size: 13px; }
.row {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 11px; box-shadow: var(--shadow);
  /* نوارِ وضعیت روی لبه می‌نشیند، نه رنگِ کلِ قاب — قاب باید آرام بماند. */
  border-right: 4px solid var(--line);
}
.row.out  { border-right-color: var(--warn); }
.row.rush { border-right-color: var(--accent); }
.row .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* ── پلاک ─────────────────────────────────────────────────────────────────
   شکلِ پلاکِ واقعی، و مهم‌تر: **ترتیبش دیگر حدسِ مرورگر نیست.** هر جزء
   `isolate` است، پس رقم و حرف و «ایران» روی هم اثر نمی‌گذارند. */
.plate-txt {
  /* ⚠️ ظرف عمداً `ltr` است: چیدمان از **خودِ پلاک** می‌آید نه از جهتِ متن،
     و با rtl ترتیب آینه می‌شد. */
  display: inline-flex; align-items: stretch; direction: ltr;
  border: 2px solid var(--ink); border-radius: 7px; overflow: hidden;
  background: var(--card); font-size: 19px; font-weight: 700; line-height: 1;
  box-shadow: var(--shadow-sm); vertical-align: middle;
}
/* نوارِ آبیِ سمتِ چپ — همان چیزی که روی پلاکِ واقعی هست. */
.plate-txt .seg.strip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--plate-blue); color: var(--on-accent);
  padding: 3px 4px; gap: 1px; border-left: 0;
}
.plate-txt .seg.strip i { font-style: normal; font-size: 7px; font-weight: 700; letter-spacing: .02em; }
.plate-txt .seg {
  padding: 7px 8px; unicode-bidi: isolate;
  border-left: 1px solid var(--line);
}
.plate-txt .seg:last-child { border-left: 0; }
.plate-txt .seg.ltr { direction: ltr; }
/* نوارِ «ایران» — همان تکه‌ای که روی پلاکِ واقعی کنارِ کدِ استان است. */
.plate-txt .seg.iran {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 3px 7px; background: var(--accent-soft);
}
.plate-txt .seg.iran i { font-style: normal; font-size: 9px; font-weight: 500; color: var(--accent); }
.plate-txt .seg.iran b { font-size: 15px; }
/* پلاکی که با الگو نخواند: بدونِ ادعای ساختار، فقط ایزوله تا به‌هم نریزد. */
.plate-txt.plain {
  display: inline; border: 0; background: none; box-shadow: none;
  font-size: 21px; unicode-bidi: isolate; direction: rtl;
}
.row .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
/* برچسب‌ها هم می‌شکنند: «در شوروم، در معرضِ دید» روی گوشیِ باریک از کارت
   بیرون می‌زد. سومین جای همان مشکل. */
.tag {
  font-size: 13px; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--sunken);
  max-width: 100%; overflow-wrap: anywhere;
}
.tag.rush { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tag.out  { border-color: var(--warn);   color: var(--warn); }
.tag.bad  { border-color: var(--bad);    color: var(--bad); }
/* 🔴 **`48px` و `flex-wrap` هر دو رفتند** (حکمِ lead ۱۴۰۵/۰۶/۰۷): هر دو برای
   روزی بودند که پنج دکمه کنارِ هم می‌نشستند — کوچکشان می‌کردیم تا جا شوند و
   می‌گذاشتیم بشکنند تا سرریز نکنند. حالا دو دکمه بیشتر نیست، پس هدفِ لمس
   می‌تواند **همان توکنِ ۵۶** باشد و شکستنِ خط لازم نیست.
   ⚠️ قاعدهٔ خاصه‌ای که یک توکن را نقض کند، توکن را بی‌معنا می‌کند: تا امروز
   `--tap: 56px` نوشته بود و کارتِ تابلو ۴۸ می‌داد. */
.row .acts { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.row .acts button { font-size: 15px; padding: 8px 15px; }
.empty { text-align: center; color: var(--muted); padding: 36px 12px; }

/* ── عکس و امضا (CAR-WO-005) ────────────────────────────────────────────── */
input[type=file] { width: 100%; min-height: var(--tap); padding: 12px; font: inherit;
  border: 1px dashed var(--line); border-radius: 12px; background: var(--card); }
canvas.sign { width: 100%; height: 220px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--card); touch-action: none; display: block; }

/* ── انتخابگرِ برند (CAR-WO-006) ─────────────────────────────────────────── */
/* انتخابگرِ برند به الگوی باما (بازخوردِ کارفرما ⑤): کاشی‌های درشت، یک لمس. */
.brands .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
/* 🔴 **تخت، بدونِ سایه** (پولیشِ lead ۱۴۰۵/۰۶/۰۴). سایه روی ۱۲ کاشیِ کنارِ هم
   دوازده لبهٔ شناور می‌سازد و شبکه را شلوغ نشان می‌دهد؛ روی **یک** دکمه عمق
   می‌دهد، روی یک **شبکه** نویز. مرزِ کاشی‌ها را خطِ نازک نگه می‌دارد، نه سایه. */
.brands .tile { min-height: var(--tap); font-size: 17px; font-weight: 600; padding: 10px 6px;
                border-radius: 14px; box-shadow: none; }
.brands .tile:active { box-shadow: none; }
.brands .tile.more { font-weight: 500; color: var(--muted); border-style: dashed; }

/* نشانِ برند روی کاشی. ⚠️ اگر فایلِ نشان نباشد، JS خودِ تصویر را برمی‌دارد و
   فقط متن می‌ماند — پس این قاعده‌ها هرگز جای خالی نمی‌سازند. */
.brands .tile .logo { display: block; width: 28px; height: 28px; margin: 0 auto 4px;
  object-fit: contain; }
.brands .tile span { display: block; line-height: 1.3; }

/* مدل — همان چیدمانِ برند، تا نگهبان دو زبانِ بصری یاد نگیرد. */
#models .tiles, .modelpick .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
#models .tile, .modelpick .tile { min-height: var(--tap); font-size: 17px; font-weight: 600; padding: 10px 6px; }
#models .tile.more, .modelpick .tile.more { font-weight: 500; color: var(--muted); border-style: dashed; }
#models .tile[aria-pressed="true"], .modelpick .tile[aria-pressed="true"],
.modelpick .chips button[aria-pressed="true"],
#years  button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
#years .chips { margin-bottom: 8px; }
.brands .tile[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.brands { display: flex; flex-direction: column; gap: 10px; }
/* بازکردنِ مرحلهٔ عکس — روی صفحهٔ پرونده (بازخوردِ کارفرما ③) */
.reopen { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.reopen input { flex: 1 1 220px; }
.tag.ok { background: var(--accent-soft); color: var(--accent); }
.brands .grp { border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; background: var(--card); }
.brands .grp > b { display: block; font-size: 14px; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.brands .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.brands button { min-height: 48px; padding: 8px 14px; font-size: 16px; }

/* ── ایستگاه تولید محتوا (CAR-WO-007) ───────────────────────────────────── */
.row .gate { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.row .gate button { min-height: 48px; font-size: 16px; padding: 8px 16px; }
.row .brandline { color: var(--muted); font-size: 15px; margin-top: 2px; }

/* ── سمت‌ها (CAR-WO-008) ─────────────────────────────────────────────────── */
.capbox { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.capbox button { min-height: 44px; font-size: 15px; padding: 6px 12px; text-align: right; }
.capbox .crit { color: var(--warn); }

/* ── ورودِ شخصی و مدیریت (CAR-WO-009) ────────────────────────────────────── */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs a {
  display: inline-block; padding: 10px 16px; min-height: var(--tap); line-height: 34px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  color: var(--ink); text-decoration: none;
}
/* صفحهٔ جاری: دیده شود که «اینجایی»، و کلیک‌پذیر نباشد. */
.tabs a.here {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  font-weight: 600; cursor: default;
}
/* دکمهٔ «مدیریت» — کارهای ماهانه پشتش‌اند. عمداً شبیهِ زبانه است نه دکمهٔ
   اقدام: هم‌خانوادهٔ همان‌هاست، فقط باز و بسته می‌شود. */
.tabs button.more {
  padding: 10px 16px; min-height: var(--tap); line-height: 34px; font: inherit;
  background: var(--card); border: 1px dashed var(--line); border-radius: 14px; color: var(--ink);
  box-shadow: none;
}
.tabs button.more::after { content: ' ▾'; color: var(--muted); }
.tabs button.more[aria-expanded="true"]::after { content: ' ▴'; }
.tabs button.more.here {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600;
}
.tabs button.more.here::after { color: var(--on-accent); }
/* ردیفِ دوم: تورفتگیِ کوچک، تا معلوم باشد زیرمجموعهٔ «مدیریت» است نه هم‌ردیفش. */
.tabs.sub { margin-top: -6px; padding-inline-start: 14px; }
.tabs.sub a { background: var(--sunken); }
.urow { display: flex; justify-content: space-between; align-items: center; gap: 10px;
        flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 12px 0; }
.urow:last-child { border-bottom: 0; }
.urow .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.urow .acts button { min-height: 48px; font-size: 16px; padding: 8px 14px; }
.urow .off { color: var(--muted); }
/* رمزِ اولیه باید بلند و لاتین دیده شود — ادمین آن را تلفنی می‌خواند. */
.secret { font-size: 22px; font-weight: 600; direction: ltr; display: block;
          margin-top: 6px; letter-spacing: 1px; }

/* ── کارتِ پارکینگ‌ها (وایرفریمِ تأییدشده · ۱۴۰۵/۰۶/۱۴) ────────────────────── */
/* 🔴 **شماره کنارِ نام** — صفحهٔ راه‌اندازی این عدد را می‌خواست و هیچ‌جای رابط
   دیده نمی‌شد. حالا حذفش کردیم، ولی عدد می‌ماند چون هنوز نشانیِ پرونده‌هاست. */
.pkhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pkid { font-variant-numeric: tabular-nums; direction: ltr; color: var(--muted);
        border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; font-size: 13px; }
.pknm { font-weight: 600; }
/* پارکینگِ خاموش **کم‌رنگ** می‌شود، ولی خط نمی‌خورد: پاک نشده، خاموش است. */
.pknm.off { color: var(--muted); font-weight: 500; }
/* کد تمامِ عرضِ ردیف را می‌گیرد و زیرِ آن می‌نشیند — نه کنارِ دکمه‌ها. */
.pkcode { flex-basis: 100%; }

/* ── خروج و برگهٔ ترخیص (CAR-WO-010) ─────────────────────────────────────── */
.slip { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
/* متن با textContent می‌نشیند و شکستِ خط‌ها را خودِ قالب می‌آورد؛ pre-wrap تنها
   راهی است که هم شکستِ خط حفظ شود هم روی صفحهٔ باریک بپیچد.
   🔴 **این قاعده `\.slip pre` بود و به هیچ عنصری نمی‌خورد** — یعنی `font: inherit`
   که دقیقاً برای همین نوشته شده بود، هرگز اجرا نمی‌شد. وقتی مجوزِ خروج
   دو‌نسخه‌ای شد (۱۴۰۵/۰۶/۰۶)، `<pre>` از دلِ `.slip` بیرون آمد و کنارِ `#docs`
   نشست؛ انتخابگر همان‌جا ماند و **بی‌صدا مرد**. مونواسپیسِ پیش‌فرضِ مرورگر
   برگشت و فارسی را نچسبانده چاپ کرد.
   ⚠️ درس: انتخابگری که به ساختارِ **دیروز** اشاره می‌کند، خطا نمی‌دهد — فقط
   کار نمی‌کند. حالا لنگر خودِ کلاسِ عنصر است، نه جای نشستنش در درخت. */
.slip-text {
  margin: 0; font: inherit; white-space: pre-wrap; word-break: break-word;
  line-height: 2; text-align: right;
}
#dests button, #assigns button, #outcomes button { text-align: right; }
#assigns { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.gate select, .gate input[type=number] { flex: 1; min-width: 120px; }

/* ── پشتیبان (CAR-WO-011) ────────────────────────────────────────────────── */
#bk_state > div { margin-top: 6px; }
a.dl {
  display: inline-block; margin-top: 12px; padding: 12px 20px; min-height: var(--tap);
  line-height: 32px; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 14px; color: var(--on-accent); font-weight: 600; text-decoration: none;
}

/* ── گزارش (CAR-WO-012) ──────────────────────────────────────────────────── */
b.stat { font-size: 21px; font-weight: 600; white-space: nowrap; }
#days .urow, #ex .urow, #rs .urow, #bn .urow { padding: 10px 0; }
.pair > div { display: flex; flex-direction: column; }
input[type=date] { width: 100%; min-height: var(--tap); padding: 10px 14px; font: inherit;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }

/* ── پروندهٔ خودرو (CAR-WO-016) ──────────────────────────────────────────── */
/* 🔴 **تایل‌های اطلاعات می‌شکنند، بیرون نمی‌ریزند** (حکمِ lead ۱۴۰۵/۰۶/۰۹).
   رفعِ قبلی فقط سربرگِ سند و تایل‌های منو را گرفت و **این‌ها جا ماندند** —
   همان کلاسِ «فهرستِ دستی»، این بار روی CSS: سه جا یک مشکل داشتند و دو تا
   درست شد.
   ⚠️ در چیدمانِ فلکس، `min-width: 0` **لازم است**: پیش‌فرضِ آیتمِ فلکس
   `min-width: auto` است، یعنی از اندازهٔ محتوایش کوچک‌تر نمی‌شود و هرچه
   `overflow-wrap` بنویسی بی‌اثر می‌ماند. این دو با هم کار می‌کنند، نه جدا. */
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0;
      border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); font-size: 14px; flex: none; }
.kv .v { font-weight: 600; text-align: left;
         min-width: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }
#head .plate-txt { margin-bottom: 10px; }
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shots figure { margin: 0; }
.shots img { width: 100%; height: 130px; object-fit: cover; border-radius: var(--r-sm);
             border: 1px solid var(--line); background: var(--sunken); display: block; }
.shots figcaption { font-size: 13px; color: var(--muted); margin-top: 5px; text-align: center; }

/* خطِ زمانی — ستونِ زمان ثابت، تا چشم بتواند عمودی بخواندش. */
.ev { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.ev:last-child { border-bottom: 0; }
.ev .when { flex: none; width: 108px; color: var(--muted); font-size: 13px; padding-top: 2px; }
.ev .what { flex: 1 1 auto; min-width: 0; }
/* رویدادی که سیستم خودش زده، عمداً کم‌رنگ‌تر است: چشم باید کارِ **آدم‌ها** را
   اول ببیند، ولی کارِ سیستم هم نباید پنهان شود. */
.ev.sys .what > div:first-child { color: var(--muted); font-style: italic; }

/* ── کارتابلِ شخصی (CAR-DEC-035) ─────────────────────────────────────────
   کاربر گفت پنل «ساده است ولی گم‌شدن می‌آورد». این کارت **اولین چیزی** است
   که می‌بیند، پس از بقیهٔ کارت‌ها جدا دیده می‌شود — ولی بلند و پرنقش نیست:
   جوابِ یک سؤال است، نه یک داشبورد.
   ⚠️ زمینهٔ کم‌رنگِ لهجه به‌جای کارتِ سفید، تا از دو قدم فاصله هم «اینجا مالِ
   من است» خوانده شود؛ همان چیزی که کاربر گفت کم دارد (۱۴۰۵/۰۵/۲۳). */
.inbox {
  border: 1px solid var(--accent-soft);
  border-inline-start: 5px solid var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-lg);
}
.inbox-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.inbox-head h2 { margin: 0; font-size: 20px; }
/* شمارِ کارهای باز — عدد است، پس گرد و پر، نه یک برچسبِ متنی. */
.inbox-head .badge {
  min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: 15px; line-height: 30px; text-align: center;
}
/* ردیف‌ها روی زمینهٔ رنگی می‌نشینند، پس جداکننده‌شان باید تیره‌تر از کارتِ سفید باشد. */
.inbox .urow { border-bottom-color: var(--line); }
.inbox .urow:first-of-type { padding-top: 4px; }
.inbox .stat.miss { color: var(--bad); }
/* دکمه‌های داخلِ کارتابل روی زمینهٔ رنگی هم باید خودشان را نشان دهند. */
.inbox .urow button { background: var(--card); }
.inbox .urow button.primary { background: var(--accent); }
.inbox .urow button.primary:hover { background: var(--accent-deep); }

/* میان‌برهای بازهٔ گزارش — کوتاه‌تر از دکمهٔ معمولی، چون کنارِ هم می‌نشینند. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.chips button { min-height: 46px; padding: 8px 14px; font-size: 15px; }

/* ── تورِ اولین ورود (CAR-WO-017) ────────────────────────────────────────── */
/* روی تبلتِ دمِ در، کارت باید **وسطِ** صفحه باشد و دکمه‌هایش به همان اندازهٔ
   بقیهٔ اپ لمس‌پذیر — راهنمایی که برای بستنش باید دقت کنی، خودش مانع است. */
.tour-back {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--veil);
}
.tour-card {
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 22px; max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto;
}
.tour-card h2 { margin: 0 0 8px; font-size: 21px; }
.tour-card p  { margin: 0 0 18px; color: var(--ink); }
.tour-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tour-foot .spacer { flex: 1 1 auto; }
.tour-foot button { min-height: var(--tap); }

/* ── مکثِ پیش از کارِ بی‌بازگشت (حکمِ ۱۴۰۵/۰۶/۱۰ ⓶ · تأییدِ کاربر روی وایرفریم) ─ */
/* 🔴 **از پایین بالا می‌آید، نه وسطِ صفحه.** کارِ بی‌بازگشتِ این اپ روی تبلتِ
   دمِ در و با یک دست انجام می‌شود؛ کارتِ وسطِ صفحه یعنی انگشت باید از پایین
   بالا برود. `tour-card` عمداً وسط است چون یک‌بار در عمرِ کاربر دیده می‌شود؛
   این یکی روزی چند بار. */
.ask-back {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: flex-end; justify-content: center; background: var(--veil);
}
.ask-sheet {
  background: var(--card); width: 100%; max-width: 460px;
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-lg);
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.ask-q { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.7; }
/* مشخصاتِ خودرو در کادرِ فرورفته: **پلاک دوباره دیده می‌شود** — تنها چیزی که
   جلوی «اشتباهی روی خودروی بغلی زدم» را می‌گیرد. */
.ask-detail {
  margin: 0; background: var(--sunken); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 15px; line-height: 2;
}
.ask-detail div { display: flex; gap: 8px; }
.ask-detail .k { color: var(--muted); flex: 0 0 5.5em; }
.ask-detail .v { font-weight: 700; min-width: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }
.ask-btns { display: flex; gap: 10px; }
.ask-btns button { flex: 1; min-height: var(--tap); }
/* ⚠️ دکمهٔ کارِ بی‌بازگشت **قرمز** است و دکمهٔ انصراف معمولی — و ترتیبشان در
   `app.js` ثابت است، نه اینجا: انصراف اول می‌نشیند (سمتِ راست در RTL) تا
   انگشتِ عجول رویش بیفتد، نه روی کارِ بی‌بازگشت. */
.ask-btns .danger {
  /* ⚠️ رنگِ متن **توکن** است نه `#fff` — و این را ادعای «صفر رنگِ سفت بیرون از
     :root» همان لحظه قرمز کرد. `--on-accent` همان سفیدِ روی زمینهٔ تیره است و
     اگر روزی پوسته عوض شود، این دکمه هم با بقیه عوض می‌شود. */
  background: var(--bad); border-color: var(--bad); color: var(--on-accent);
}
.ask-btns .danger:hover { filter: brightness(1.08); }

/* ── نوارِ اعلانِ نسخه (`CAR-DEC-069`) ────────────────────────────────────── */
/* ⚠️ **زیرِ سربرگ می‌نشیند، نه رویش**: سربرگ چسبان است و نوار نباید جای
   دکمهٔ خروج را بگیرد. و `noprint` است — روی کاغذ معنایی ندارد. */
.verbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-line); color: var(--warn-ink);
}
.verbar .vt { font-size: 15px; }
.verbar .spacer { flex: 1 1 auto; }
/* ⚠️ **۴۴ نقطه، نه ۴۰** — ادعای هدفِ لمس همان لحظه گرفتش. نوار روی تبلتِ
   دمِ در هم می‌آید و «کوچک چون فرعی است» همان استدلالی است که قاعده را
   بی‌معنا می‌کند (درسِ ۱۴۰۵/۰۶/۰۸). */
.verbar button { min-height: 44px; padding: 8px 12px; font-size: 14px; }
@media print { .verbar { display: none; } }

/* فهرستِ «چه چیزی عوض شد» — داخلِ همان ورقهٔ پرسش می‌نشیند. */
.rel-list { display: flex; flex-direction: column; gap: 14px; }
.rel-item .rel-h { font-weight: 700; margin-bottom: 4px; }
.rel-item ul { margin: 0; padding-inline-start: 18px; color: var(--muted); font-size: 15px; line-height: 1.9; }

/* ── «قدرت‌گرفته از» — روی سطوحِ رو‌به‌مشتری و پای اسناد ────────────────────── */
/* ⚠️ کوچک و کم‌رنگ و **فقط جایی که مشتری می‌بیند**؛ وسطِ کارِ پرسنل نه. */
.powered {
  margin-top: 18px; text-align: center; color: var(--muted); font-size: 12px;
}
.powered a { color: inherit; }
@media print { .powered { margin-top: 10px; font-size: 10px; } }

/* صفحهٔ ورودیِ ریشه — عملاً چند صدم ثانیه دیده می‌شود، ولی اگر جاوااسکریپت و
   `meta refresh` هر دو خاموش باشند تنها چیزی است که کاربر می‌بیند. */
body.landing { display: grid; place-items: center; min-height: 70vh; }
body.landing a { font-size: 18px; }

/* ── برگهٔ چاپیِ مجوز و کدِ خودرو (CAR-DEC-046 · 037) ─────────────────────── */
.slip-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 12px; }
.brand-print { display: flex; align-items: center; gap: 8px; font-size: 20px; color: var(--accent); }
.brand-print svg { width: 34px; height: 34px; }
.ph { display: flex; align-items: flex-start; gap: 12px; }
.ph-id { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ph-id b { font-size: 16px; }
.ph-code { font-weight: 700; letter-spacing: 1px; }
.ph-qr svg { width: 96px; height: 96px; display: block; }

/* کدِ خودرو، درشت — روی صفحهٔ برچسب و رسید.
   ⚠️ فاصلهٔ حروف عمدی است: این کد را آدم **با دست تایپ می‌کند** وقتی دوربین
   کار نکند، و حروفِ چسبیده غلطِ تایپ می‌سازند. */
.bigcode { text-align: center; margin: 10px 0 16px; }
.bigcode span { display: inline-block; font-size: 34px; font-weight: 800; letter-spacing: 6px;
  padding: 10px 18px; border: 2px dashed var(--line); border-radius: var(--r); direction: ltr; }
/* همان قاعده برای گریدِ صفحهٔ رسید — `1fr` هم بدونِ `minmax(0, …)` از
   محتوایش کوچک‌تر نمی‌شود و ستون را پهن می‌کند. */
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 12px 0; }
.kv b { color: var(--muted); font-weight: 500; }
.kv span { min-width: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }

@media print {
  .noprint, header.bar, .tour-back { display: none; }
  body { background: var(--card); font-size: 15px; }
  .wrap { padding: 0; }
  .slip { border: 0; border-radius: 0; padding: 0; }
  /* ⚠️ سربرگ در چاپ **می‌ماند** — کلِ نکتهٔ CAR-DEC-046 همین است. */
  .slip-head { border-bottom: 2px solid var(--ink); }
  .brand-print { color: var(--ink); }
}

/* کارتِ لوگو در تنظیمات — پیش‌نمایشِ فعلی کنارِ دکمهٔ برداشتن. */
.logo-now { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.logo-now img {
  height: 40px; max-width: 104px; width: auto; object-fit: contain;
  background: var(--sunken); border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 4px;
}

/* ── صفحهٔ عمومیِ ورودی (`CAR-DEC-071`) ───────────────────────────────────── */
/* کادرِ پیگیری تنها چیزِ برجستهٔ صفحه است — کارِ اصلی، نه یکی از چند کار. */
.card.hero { border-color: var(--accent); border-width: 2px; }
.card.hero h2 { margin-top: 0; }
#track_code {
  font-size: 22px; letter-spacing: 3px; text-align: center;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
}
/* ⚠️ خودِ کادر چپ‌به‌راست است ولی برچسب و پیام راست‌به‌چپ می‌مانند: کد لاتین
   است و در خطِ فارسی جای ارقامش جابه‌جا دیده می‌شود. */
#track_code { direction: ltr; unicode-bidi: isolate; }

/* سه قدم — شماره‌گذاری اطلاعات است، نه تزئین.
   🔴 نامش از `steps` به `howto` عوض شد (`CAR-F-23`): `.steps` از قبل
   **نوارِ پیشرفتِ صفحهٔ پذیرش** بود، و `.steps span { height:6px }`ِ آن روی
   `<span>`های توضیحِ همین فهرست هم می‌افتاد و متن را در نوارِ ۶پیکسلیِ
   خاکستری له می‌کرد. نوارِ پیشرفت دست نخورد — قدیمی‌تر است و در پذیرشِ
   تولیدی استفاده می‌شود. **دو چیزِ متفاوت یک اسم نمی‌گیرند.** */
ol.howto { list-style: none; margin: 0; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 12px; }
ol.howto li { counter-increment: s; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; }
ol.howto li::before {
  content: counter(s); grid-row: 1 / span 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sunken); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted);
}
ol.howto li b { font-weight: 700; }
ol.howto li span { color: var(--muted); }

/* ── کاشیِ «قدرت‌گرفته از» — دو هدفِ جدا ──────────────────────────────────── */
/* 🔴 **دو هدف، چون یک کلیک نمی‌تواند هم باز کند هم برود.** و هر دو دستِ‌کم
   ۴۴ نقطه ارتفاع دارند: دو هدفِ کوچکِ چسبیده یعنی کاربر اشتباهی آن‌یکی را
   می‌زند — و اینجا «اشتباهی» یعنی مشتری صفحهٔ پیگیری‌اش را از دست می‌دهد. */
.powered-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  margin-top: 16px; display: grid; grid-template-columns: 1fr auto; align-items: stretch;
}
.powered-tile .pt-link {
  min-height: 44px; display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; color: var(--muted); font-size: 14px; text-decoration: none;
}
.powered-tile .pt-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.powered-tile .pt-toggle {
  min-height: 44px; min-width: 48px; padding: 0 14px;
  background: none; border: 0; border-inline-start: 1px solid var(--line-soft);
  color: var(--muted); border-radius: 0;
}
.powered-tile .pt-toggle:hover { background: var(--sunken); }
.powered-tile .pt-caret { display: inline-block; font-size: 12px; transition: transform .15s ease; }
.powered-tile .pt-toggle.open .pt-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .powered-tile .pt-caret { transition: none; } }
.powered-tile .pt-body {
  grid-column: 1 / -1; margin: 0; padding: 0 14px 12px;
  color: var(--muted); font-size: 14px; line-height: 1.9;
}
.ltr { direction: ltr; unicode-bidi: isolate; }

/* ورودِ پرسنل — کوچک و کم‌رنگ، پایینِ صفحه. */
.home-staff { margin-top: 22px; text-align: center; }
.home-staff a {
  color: var(--muted); font-size: 14px;
  display: inline-block; min-height: 44px; line-height: 44px; padding: 0 12px;
}

/* دفترِ ارسالِ پیامک (`CAR-DEC-044`). ⚠️ رنگ **تنها** حاملِ معنا نیست —
   متنِ فارسیِ نتیجه همیشه کنارش هست (کوررنگی، و چاپِ سیاه‌وسفید).
   🔴 و هیچ رنگِ تازه‌ای اینجا ساخته نمی‌شود: همان سه جفتِ نوارِ پیام که
   کلِ اپ از آن‌ها می‌خواند. سنجهٔ قراردادِ رابط همین را گرفت — رنگِ سفتِ
   بیرون از `:root` یعنی روزی پوسته عوض شود و این گوشه عوض نشود. */
.sms-row{padding:8px 0;border-bottom:1px solid var(--line-soft);display:flex;
         flex-wrap:wrap;gap:8px;align-items:baseline;font-size:14px}
.sms-row:last-child{border-bottom:0}
.sms-res{font-weight:600;border-radius:var(--r-sm);padding:1px 8px;font-size:13px;
         border:1px solid transparent}
.sms-res.sent{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-ink)}
.sms-res.failed{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-ink)}
.sms-res.skipped{background:var(--sunken);border-color:var(--line);color:var(--muted)}
.sms-res.unknown{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.sms-res.on,.sms-res.off{background:var(--accent-soft);color:var(--accent-deep)}
ul.plain{margin:8px 0;padding-inline-start:18px}
ul.plain li{margin:3px 0;font-size:14px}

/* ── پیش‌پذیرش، نمای پرسنل ───────────────────────────────────────────────── */
/* 🔑 چیدمان عمداً **می‌شکند، نه می‌بُرد**: قیدِ صریحِ کاربر روی وایرفریمِ ۳ —
   «ساعت و نام بدون سرریز باشه». نامِ سه‌بخشیِ فارسی روی عرضِ ۳۲۰ کاملاً عادی
   است، و `nowrap` دقیقاً همان‌جا متن را می‌بُرد. سنجه‌اش `dev/pre_fit_test.mjs`. */
.pre-card .pre-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pre-code { font-weight: 700; color: var(--accent); letter-spacing: .06em; }
.pre-name { overflow-wrap: anywhere; min-width: 0; }
.pre-when { margin-inline-start: auto; font-size: 12px; color: var(--muted); }
.pre-line { margin: 4px 0 0; overflow-wrap: anywhere; }
.pre-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
/* نشانِ «کی برداشتش» — نشان است نه قفل، پس رنگِ هشدار ندارد و فقط خبر می‌دهد. */
.tag.who-took { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pre-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 8px; margin: 10px 0; }
.pre-cell { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
/* پنجرهٔ حالتِ آزمایشی — عمداً رنگِ هشدار دارد: کسی که این را می‌بیند باید
   بداند سامانهٔ پیامک وصل نیست، نه اینکه فکر کند بخشی از محصول است. */
.pre-mock { border-right-color: var(--warn); }
.pre-mock b { font-family: "IBM Plex Mono", monospace; letter-spacing: .12em; color: var(--warn); }

/* فهرستِ مدل در **فرمِ مشتری** — همان چیدمانِ پرسنل، فقط قاب.
   ⚠️ چون رندر مشترک شد، این قاعده‌ها به کلاس بسته‌اند نه به id؛ id مالِ یک
   صفحه بود و صفحهٔ دوم بی‌صدا بی‌قالب می‌ماند. */
.modelpick { display: flex; flex-direction: column; gap: 8px; }
.modelpick .mall { display: flex; flex-direction: column; gap: 8px; }
.modelpick .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.modelpick .chips button { min-height: 48px; padding: 8px 14px; font-size: 16px; }
.modelpick input { width: 100%; min-height: var(--tap); }
.brandpick .ball { display: flex; flex-direction: column; gap: 10px; }

/* ── کارتِ مشخصاتِ پیش‌پذیرش (ایرادِ ④ کاربر · وایرفریمِ تأییدشده) ───────────
   🔴 **تک‌ستونه، بی‌جمع‌شونده — و دلیلش کیفیتِ تصمیم است نه ارگونومی:** این
      کارت جایی است که پذیرشگر «قبول یا رد» را رویش می‌سازد، و پرخطرترین بخش
      برای بسته‌ماندن دقیقاً «وضعیت» است — همان چیزی که تصمیم به آن بند است.
      پنهان‌کردنِ ورودیِ یک تصمیم، تصمیم را بدتر می‌کند نه فقط کندتر. */
.pre-grp { margin: 14px 0 0; }
.pre-grp > .cap { font-size: 12.5px; font-weight: 700; color: var(--accent); letter-spacing: .02em;
  margin: 0 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.pre-dl { display: grid; grid-template-columns: 6.4rem 1fr; column-gap: 12px; margin: 0; }
.pre-dl > dt { font-size: 13.5px; color: var(--muted); padding: 7px 0;
  border-bottom: 1px solid var(--line-soft); }
.pre-dl > dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line-soft);
  min-width: 0; overflow-wrap: anywhere; }
.pre-dl > dt:last-of-type, .pre-dl > dd:last-of-type { border-bottom: 0; }
.pre-dl .wide { grid-column: 1 / -1; padding-top: 0; }
.pre-dl .wide .t { font-size: 13.5px; color: var(--muted); display: block; }

/* ── تصحیحِ فیلد پیش از ساختِ پرونده ────────────────────────────────────────
   🔑 کادر باید **کادر به‌نظر برسد**: نسخهٔ بی‌قاب، از یک متنِ خواندنی قابلِ
      تفکیک نبود و پرسنل نمی‌فهمید می‌شود عوضش کرد. */
.pre-dl > dd.edit { padding: 5px 0; }
.pre-dl > dd.edit input { width: 100%; box-sizing: border-box; font: inherit;
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: inherit; }
/* نشانِ «دست‌خورده» — رنگ **به‌تنهایی** حاملِ معنا نیست: متنِ «مشتری نوشته
   بود…» همان لحظه زیرش می‌آید، پس کسی که رنگ را نمی‌بیند هم می‌فهمد. */
.pre-dl > dd.edit input.corrected { border-color: var(--warn-line);
  box-shadow: 0 0 0 2px var(--warn-bg); }
.pre-dl > dd.edit .orig { display: block; margin-top: 4px; font-size: 12px;
  color: var(--muted); overflow-wrap: anywhere; }

/* متنِ آزادِ بلند: **بریده می‌شود، پنهان نه.** `.open` برش را برمی‌دارد. */
.pre-dl .clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.pre-dl .clamp.open { display: block; overflow: visible; }
.pre-dl .more { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 13px;
  color: var(--accent); font-weight: 600; min-height: 0; box-shadow: none; }

/* ردیفِ کار، چسبیده به پایینِ قابِ دید — تا هر جای کارت که باشی «ساختِ
   پرونده» در دسترس باشد. محوشدگی می‌گوید زیرش محتوا ادامه دارد.
   🔴 **دامنه‌دار، و این از یک رگرسیونِ واقعیِ خودم درآمد:** `.acts` از قبل
      کلاسِ **مشترک** بود — تابلوی اصلی (`drawRow`) و پنل‌های مدیریت هم از آن
      استفاده می‌کنند. نسخهٔ اولِ این قاعده بی‌دامنه نوشته شد و **هر ردیفِ کار
      در کلِ اپ را چسبنده کرد**، از جمله ردیفِ تک‌تکِ کارت‌های تابلو.
   ⚠️ هیچ سنجه‌ای نگرفتش چون همه فقط کارتِ پیش‌پذیرش را می‌دیدند؛ `pre_card`
      حالا یک ردیفِ کارِ **بیرونی** هم می‌سازد و می‌سنجد که چسبنده **نشود**. */
.acts.stick { position: sticky; bottom: 0; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 0 4px; border-top: 1px solid var(--line-soft);
  background: linear-gradient(to top, var(--card) 72%, var(--card-0)); }

/* ── دفترِ تماسِ پیش‌پذیرش ───────────────────────────────────────────────────
   🔑 تاریخچه **زیرِ** خودِ کنش می‌نشیند، نه در جای دیگرِ صفحه: نتیجه‌ای که
      دور از دکمه‌اش باشد، لحظهٔ تصمیم دیده نمی‌شود. */
.pre-call { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.pre-call select { font: inherit; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--card); color: inherit; }
.call-log { display: flex; flex-direction: column; gap: 3px; }
.call-row { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ── راهنمای درونِ اپ (حکمِ کاربر ۱۴۰۵/۰۶/۱۹) ───────────────────────────────
   🔑 دکمه در نوارِ بالا **جای ثابت** دارد: راهنمایی که هر صفحه جای دیگری
      باشد، در لحظهٔ گیرکردن پیدا نمی‌شود. */
.helpbtn { width: 30px; height: 30px; min-width: 30px; padding: 0; border-radius: 50%;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font: 700 14px/1 inherit; display: inline-flex; align-items: center;
  justify-content: center; flex: none; margin-inline-end: 8px; }
.help-back { position: fixed; inset: 0; background: var(--veil); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center; }
.help-sheet { background: var(--card); width: 100%; max-width: 560px; max-height: 82vh;
  border-radius: var(--r) var(--r) 0 0; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: var(--shadow-lg); }
.help-h { display: flex; align-items: center; gap: 9px; padding: 12px 15px;
  border-bottom: 1px solid var(--line-soft); background: var(--sunken); }
.help-h .x { margin-inline-start: auto; border: 0; background: transparent;
  color: var(--muted); font-size: 16px; padding: 4px 8px; }
.help-b { padding: 13px 15px; overflow-y: auto; display: flex;
  flex-direction: column; gap: 16px; }
.help-grp { display: flex; flex-direction: column; gap: 9px; }
.help-cap { font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); padding: 3px 9px; border-radius: 99px; align-self: flex-start; }
.help-qa { display: flex; flex-direction: column; gap: 3px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.help-grp .help-qa:last-child { border-bottom: 0; padding-bottom: 0; }
.help-qa .q { font-size: 14px; font-weight: 700; }
.help-qa .a { font-size: 13.5px; color: var(--muted); }
/* لینکِ راهنمای کامل — ته ورقه، جدا از بندها با یک خطِ نقطه‌چین تا با
   پرسش‌وپاسخ‌ها قاطی نشود. */
.help-more { display: flex; flex-direction: column; gap: 2px; margin-top: 4px;
  padding-top: 11px; border-top: 1px dashed var(--line-soft); }
.help-more a { font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }
.help-more a:hover { text-decoration: underline; }
.help-more .muted { font-size: 12.5px; }

/* رمزِ چهاررقمیِ تازه — **باید از فاصلهٔ یک بازو خوانده شود**، چون کارمند
   دارد یادداشتش می‌کند و یک‌بار بیشتر نمی‌بیندش. */
.pin-show { font: 700 40px/1.2 "IBM Plex Mono", monospace; letter-spacing: .22em;
  text-align: center; padding: 14px 0; color: var(--accent); direction: ltr; }

/* پانلِ ویرایش/دعوت، زیرِ همان ردیفِ کاربر — نه تهِ صفحه، چون پیامی
   که جای دیگری بنشیند دیده نمی‌شود. */
.upanel { flex-basis: 100%; margin-top: 10px; padding: 12px 14px; border-radius: var(--r);
  background: var(--sunken); border: 1px solid var(--line); }
.upanel label { display: block; margin: 8px 0 4px; font-size: 13px; }
.upanel input { width: 100%; max-width: 320px; }
.upanel button { margin: 10px 8px 0 0; }
.upanel code.secret { display: block; margin-top: 6px; word-break: break-all; direction: ltr;
  font-size: 14px; }