/* ===== کارکور — طراحی یکپارچه RTL (بر پایهٔ طرح اپارتو۲۴، با برند نارنجی/ذغالی) ===== */

@font-face { font-family: 'Vazirmatn'; src: url('/fonts/Vazirmatn-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/fonts/Vazirmatn-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/fonts/Vazirmatn-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Vazirmatn'; src: url('/fonts/Vazirmatn-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  /* ⚠️ کارکور پوستهٔ تاریک ندارد و این باید صریح گفته شود.
     بدونِ این خط، روی ویندوزِ در حالتِ تاریک، کروم فهرستِ بازشوی
     ‎<select>‎ را با متنِ سفیدِ حالتِ تاریک می‌کشد در حالی که CSS ما
     پس‌زمینه را سفید نگه داشته — یعنی گزینه‌ها سفیدِ روی سفید و
     «صنف‌ها» در بانک مخاطبان عملاً ناخوانا. مدیر همین را دید. */
  color-scheme: light;

  --bg: #f4f5f9;
  --surface: #ffffff;
  --ink: #1c222b;
  --muted: #6b7285;
  --line: #e6e8f0;
  --brand: #2f9e68;
  --brand-ink: #258356;
  --brand-deep: #1c6b45;
  --brand-soft: #e9f6ef;
  /* تهِ‌رنگ و مرزِ کادرهای ورودی — جدا از ‎--surface‎/‎--line‎ نگه داشته شده‌اند
     تا کنتراستِ فرم بشود تنظیم شود بی‌آنکه کارت‌ها و جدول‌ها هم عوض شوند.

     ⚠️ نسخهٔ اول ‎#f7f9fc‎ بود — دو درصد تیره‌تر از سفید. روی کاغذِ نظری
     «تهِ‌رنگ» بود ولی روی نمایشگر هیچ‌کس تفاوتش را ندید و مالک دو بار
     گفت «رنگ کادرها را عوض نکردی». حق داشت: تغییری که دیده نشود انجام
     نشده است. این یکی دیده می‌شود. */
  --field: #eaf1fb;
  --field-line: #b9c7dd;
  --charcoal: #191c21;
  --accent: #0aa08e;
  --accent-soft: #e2f6f3;
  --danger: #d94358;
  --danger-soft: #fdecee;
  --warn: #b97f10;
  --warn-soft: #fdf3df;
  --ok: #1d9d5f;
  --ok-soft: #e4f6ec;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(25, 28, 33, .05), 0 8px 24px -12px rgba(25, 28, 33, .12);
  --shadow-lg: 0 24px 48px -16px rgba(25, 28, 33, .22);
  --grad: linear-gradient(135deg, #43b781 0%, #238457 100%);
  --grad-dark: linear-gradient(120deg, #14171b 0%, #2b3038 55%, #45351f 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  min-height: 100dvh;
}
a { color: var(--brand-ink); text-decoration: none; }
img { max-width: 100%; }

/* ---------- دکمه‌ها ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 0; cursor: pointer; font: inherit; font-weight: 700;
  padding: .62rem 1.25rem; border-radius: 12px;
  background: var(--brand); color: #fff;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { background: var(--brand-ink); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: none; }
.btn-lg { padding: .85rem 1.9rem; font-size: 1.05rem; border-radius: 14px; }
.btn-sm { padding: .32rem .8rem; font-size: .85rem; border-radius: 10px; }
.btn-ghost { background: var(--brand-soft); color: var(--brand-ink); }
.btn-ghost:hover { background: #fbe2cd; }
.btn-accent { background: var(--accent); }
.btn-accent:hover { background: #078575; }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: #f9d7dc; box-shadow: none; }
.btn-outline { background: transparent; color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--brand); }
.btn-outline:hover { background: var(--brand-soft); }
.btn-white { background: #fff; color: var(--charcoal); }
.btn-white:hover { background: #fff3ea; }
.btn-dark { background: var(--charcoal); }
.btn-dark:hover { background: #2b3038; }
.btn[disabled] { opacity: .55; pointer-events: none; }

/* چرخونک روی دکمه بعد از کلیک (busy.js) */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: ccspin .7s linear infinite;
}
.btn-ghost.is-busy::after, .btn-outline.is-busy::after, .btn-danger.is-busy::after {
  border-color: rgba(0,0,0,.15); border-top-color: var(--brand-ink);
}
@keyframes ccspin { to { transform: rotate(360deg); } }

/* نوار پیشرفت بالای صفحه بعد از هر کلیک ناوبری */
#ccBar {
  position: fixed; top: 0; right: 0; left: 0; height: 3px; z-index: 90;
  background: var(--grad); transform: scaleX(0); transform-origin: right;
  transition: transform .4s ease; pointer-events: none;
}
#ccBar.on { transform: scaleX(.8); }

/* ---------- فرم‌ها ---------- */
/* ⚠️ برچسب‌ها ‎--muted‎ بودند، یعنی خاکستریِ کم‌رنگ روی سفید، و مدیر گزارش
   کرد «نوشته‌ها دیده نمی‌شن». برچسبِ فرم عنوانِ فرعی نیست؛ همان چیزی است
   که کاربر باید بخواند تا بداند در کادر چه بنویسد. */
label { font-size: .88rem; font-weight: 700; color: var(--ink); display: block; margin-bottom: .35rem; }

/* ⚠️ کادرها هم‌رنگِ کارت بودند — سفید روی سفید — و تنها مرزشان یک خطِ بسیار
   کم‌رنگ. روی نمایشگرِ روشن معلوم نبود کجا باید نوشت. حالا تهِ کادر یک
   تهِ‌رنگِ خیلی ملایم دارد و مرزش پررنگ‌تر است. رنگِ برند دست نخورده؛
   این فقط کنتراست است. */
/* ⚠️ آنچه کاربر *نوشته* پررنگ است و آنچه راهنماست نه. پیش‌تر هر دو یک وزن
   داشتند و مقدارِ واقعی لای راهنماها گم می‌شد. */
input, select, textarea {
  font: inherit; font-weight: 600; width: 100%; color: var(--ink);
  background: var(--field); border: 1.5px solid var(--field-line); border-radius: 12px;
  padding: .6rem .9rem; transition: border-color .12s, box-shadow .12s, background .12s;
}
input::placeholder, textarea::placeholder { font-weight: 500; }
input:hover, select:hover, textarea:hover { border-color: var(--brand); }

/* خانه‌ای که در آن می‌نویسی باید از بقیه جدا باشد — نه با یک خطِ نازک،
   با رنگ. */
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
/* راهنمای داخلِ کادر هم باید خوانده شود؛ پیش‌فرضِ مرورگر بیش از حد کم‌رنگ است. */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
/* کمربندِ دوم برای همان ماجرای ‎color-scheme‎: کروم پوستهٔ فهرستِ بازشو را
   از ‎color-scheme‎ی *خودِ عنصر* برمی‌دارد، پس فقط ‎:root‎ کافی نبود — روی
   ویندوزِ تاریک همچنان گزینه‌های سفید روی سفید دیده می‌شد. رنگ‌ها هم عمداً
   ثابت‌اند نه متغیر، و ‎!important‎ دارند تا هیچ پوسته‌ای نتواند بازشان کند. */
select { color-scheme: light; }
select option, select optgroup {
  color: #1c222b !important;
  background: #ffffff !important;
}
input[type="checkbox"] { width: auto; accent-color: var(--brand); transform: scale(1.2); }

/* ---------- کادرِ گذرواژه با دکمهٔ نمایش ----------
   ⚠️ ‎position: relative‎ روی ‎.pw-box‎ حیاتی است. دکمه ‎absolute‎ است و اگر
   نیایِ موقعیت‌دار نداشته باشد نسبت به کلِ صفحه می‌نشیند — همان اشتباهی که
   یک‌بار در ‎.sw‎ افتاد و در حالت راست‌به‌چپ ۲۵۹ پیکسل اسکرولِ افقی ساخت. */
.pw-box { position: relative; }
/* ‎inset-inline-end‎ در راست‌به‌چپ یعنی سمتِ چپ — همان لبهٔ پایانیِ کادر */
.pw-eye {
  position: absolute; inset-inline-end: .5rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--muted);
}
.pw-eye:hover { color: var(--brand-ink); background: var(--brand-soft); }
.pw-eye:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.pw-eye svg { width: 20px; height: 20px; display: block; }
/* متن نباید زیرِ دکمه برود */
.pw-box input { padding-inline-end: 2.7rem; }
/* پیش‌فرض: گذرواژه پنهان است، پس «چشمِ باز» یعنی «نمایش بده» */
.pw-eye .pw-hide { display: none; }
.pw-eye[aria-pressed="true"] .pw-show { display: none; }
.pw-eye[aria-pressed="true"] .pw-hide { display: block; }

/* ---------- کارتِ دعوت به «پیدا کردن دوستان» ----------
   خودش یک لینک است، پس تمامِ کارت کلیک‌پذیر باشد و نه فقط یک نوشتهٔ کوچک. */
.find-cta {
  display: flex; align-items: center; gap: .75rem;
  text-decoration: none; color: inherit;
}
.find-cta:hover { border-color: var(--brand); }
.find-cta .i { color: var(--brand); display: grid; place-items: center; }
.find-cta .i svg { width: 26px; height: 26px; }
.find-cta b { display: block; }
.find-cta small { display: block; }

.invite-card .invite-text {
  background: var(--brand-soft); color: var(--brand-ink);
  border-radius: 12px; padding: .6rem .8rem; margin-bottom: .7rem;
  line-height: 1.9;
}

.field { margin-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem 1rem; align-items: end; }
.hint { font-size: .8rem; color: var(--muted); margin-top: .3rem; }

/* ورودی کد یک‌بارمصرف */
.otp-input {
  direction: ltr; text-align: center; letter-spacing: .5em; font-size: 1.4rem; font-weight: 800;
}
/* دو تبِ ورود — کنترلِ بخش‌بندی‌شده */
.login-tabs {
  display: flex; gap: .35rem; background: var(--bg); border: 1px solid var(--line);
  border-radius: 14px; padding: .35rem; margin-bottom: 1.1rem;
}
.login-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .62rem .5rem; border: 0; background: transparent; border-radius: 10px;
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--muted); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.login-tab svg { width: 17px; height: 17px; }
.login-tab.active { background: var(--surface); color: var(--brand-ink); box-shadow: 0 2px 7px -3px rgba(25,28,33,.28); }
.login-pane { animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.otp-timer { font-size: .85rem; color: var(--muted); margin-top: .7rem; }
.otp-timer b { color: var(--brand-ink); font-variant-numeric: tabular-nums; }

/* ---------- کارت‌ها ---------- */
.card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem;
  border: 1px solid rgba(230, 232, 240, .6);
}

/* عنوانِ کارت یک خطِ رنگیِ کوتاه زیرِ خودش دارد — صفحه‌ای که ده کارتِ
   سفیدِ پشتِ‌هم است، خسته‌کننده می‌شود و چشم نمی‌داند کجا شروع کند. */
.card > .card-title::after {
  content: ''; flex: none; height: 3px; width: 28px; border-radius: 2px;
  background: var(--brand); margin-inline-start: .1rem;
}
.card + .card { margin-top: 1rem; }
/* ⚠️ ولی نه داخلِ گرید. آن‌جا فاصله را خودِ ‎gap‎ می‌دهد و این حاشیه فقط
   کارتِ دوم به بعد را ۱۶ پیکسل پایین می‌اندازد؛ یعنی سرِ ستون‌های یک ردیف
   با هم یکی نمی‌شود. با اندازه‌گیریِ DOM پیدا شد و نه با نگاه — اختلافِ
   ۱۶ پیکسل در اسکرین‌شات به چشم نمی‌آید ولی ردیف را کج نشان می‌دهد. */
.grid-2 > .card + .card, .grid-3 > .card + .card { margin-top: 0; }
.card-title { font-size: 1.02rem; font-weight: 800; margin-bottom: .9rem; display: flex; align-items: center; gap: .5rem; }
.card-title .spacer { flex: 1; }

/* آمارک‌ها */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.stat {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem 1.1rem; border: 1px solid rgba(230, 232, 240, .6);
}
.stat .k { font-size: .8rem; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 1.35rem; font-weight: 800; margin-top: .15rem; }
.stat .v small { font-size: .75rem; font-weight: 600; color: var(--muted); }
.stat.brand { background: var(--grad); border: 0; }
.stat.brand .k, .stat.brand .v { color: #fff; }
.stat.accent .v { color: var(--accent); }
.stat.danger .v { color: var(--danger); }

/* ---------- جدول ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .92rem; }
th { text-align: right; font-size: .8rem; color: var(--muted); font-weight: 700; padding: .7rem .9rem; border-bottom: 2px solid var(--line); white-space: nowrap; }
td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fdf9f5; }

/* ---------- برچسب‌ها ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 700; padding: .18rem .65rem; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-ink); white-space: nowrap;
}
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.chip.brand { background: var(--brand-soft); color: var(--brand-ink); }
.chip.muted { background: #eef0f6; color: var(--muted); }

/* چیپ‌های تیک‌خور — انتخاب چندتایی نوع/سرویس */
.check-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.check-chip {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  font-size: .82rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px;
  background: #eef0f6; color: var(--muted); margin: 0; user-select: none;
  border: 1.5px solid transparent;
}
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip.on, .check-chip:has(input:checked) {
  background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand);
}

/* گروه خدمات زیر هر دسته */
.svc-cat { margin: .55rem 0; }
.svc-cat > b { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .3rem; }

/* سرتیتر دسته داخل کمبوی چندانتخابی */
.msel .pop .grp {
  width: 100%; font-size: .72rem; font-weight: 800; color: var(--muted);
  border-bottom: 1px solid var(--line); padding: .35rem .2rem .2rem; margin-top: .2rem;
}

/* کمبوباکس چندانتخابی — details بومی، بدون جاوااسکریپت */
.msel { position: relative; }
.msel > summary {
  list-style: none; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
  padding: .6rem .9rem; font-size: .95rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: .4rem;
}
.msel > summary::-webkit-details-marker { display: none; }
.msel > summary::after { content: '▾'; margin-right: auto; color: var(--muted); font-size: .8rem; }
.msel[open] > summary { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.msel .pop {
  position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: var(--shadow-lg); padding: .6rem; max-height: 260px; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.msel .count { background: var(--brand); color: #fff; font-size: .72rem; border-radius: 999px; padding: 0 .5rem; min-width: 1.2rem; text-align: center; }

/* ردیف چیپ‌های فیلتر (قابل پیمایش روی موبایل) */
.chip-row { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row a.chip { background: #eef0f6; color: var(--muted); }
.chip-row a.chip.on { background: var(--charcoal); color: #fff; }

/* ---------- پیام‌ها ---------- */
.flash { border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1rem; font-weight: 600; font-size: .92rem; }
.flash.ok { background: var(--ok-soft); color: var(--ok); }
.flash.err { background: var(--danger-soft); color: var(--danger); }
/* «هنوز نبسته ولی دارد پر می‌شود» — مثل سقفِ ثبتِ مرکزِ ناقص. رنگ از همان
   ‎--warn‎ی می‌آید که چیپ‌ها استفاده می‌کنند؛ رنگِ تازه‌ای ساخته نشده. */
.flash.warn { background: var(--warn-soft); color: var(--warn); }

/* ---------- میان‌بُرهای تماس (پنل مدیریت) ----------
   ریز و بی‌سر‌و‌صدا: کنارِ هر ردیفِ جدول می‌نشینند و نباید با دکمه‌های
   اصلیِ صفحه رقابت کنند. رنگ‌ها از تخته‌رنگِ خودِ برنامه می‌آیند و نه از
   رنگِ برندِ آن پیام‌رسان‌ها. */
/* «پیام کارکور» بالای میان‌بُرهای دستگاه می‌نشیند، نه در همان ردیف —
   این یکی از سامانه می‌فرستد و آن‌ها کارِ گوشی‌اند؛ کنارِ هم که باشند یکی
   به‌نظر می‌آیند. */
.mb-xs { display: inline-block; margin-bottom: .3rem; }

.contact-links { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.contact-links .cl {
  font-size: .7rem; font-weight: 700; line-height: 1;
  padding: .3rem .45rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  cursor: pointer; white-space: nowrap;
}
.contact-links .cl:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }
.contact-links .wa:hover { border-color: var(--ok); color: var(--ok); }
.contact-links .cp { font-family: inherit; }

/* کشویِ ریزِ نقش داخلِ ردیفِ جدول — نباید هم‌قدِ کادرهای فرم باشد و ردیف را
   بکشد. عرض به محتوا بسته است تا ستون پهن نشود. */
.role-mini {
  width: auto; min-width: 108px; font-size: .74rem;
  padding: .25rem .4rem; border-radius: 8px;
}

/* تیکِ «همهٔ این دسته» داخلِ سرتیترِ کشویی */
.msel > summary .bulk { display: inline-flex; align-items: center; margin: 0; padding: 0; }
.msel > summary .bulk input {
  width: auto; margin: 0; accent-color: var(--brand); transform: scale(1.1); cursor: pointer;
}

/* ---------- نمودارهای داشبورد ----------
   ‎auto-fit‎ و نه تعدادِ ثابتِ ستون: روی گوشی یکی زیرِ دیگری می‌نشینند و
   روی دسکتاپ دوتا-دوتا، بی‌آنکه نقطهٔ شکستِ دستی بنویسیم. */
.chart-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.chart-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .9rem; box-shadow: var(--shadow);
}
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.chart-head .t { font-size: .85rem; font-weight: 700; color: var(--muted); }
.chart-head .v { font-size: .95rem; font-weight: 800; color: var(--ink); }
/* ارتفاع ثابت است تا چهار کارت هم‌قد بمانند؛ ‎viewBox‎ کشش را می‌دهد. */
.chart { width: 100%; height: 90px; display: block; margin: .5rem 0 .3rem; overflow: visible; }
.chart-foot {
  display: flex; justify-content: space-between; gap: .4rem;
  font-size: .68rem; color: var(--muted); font-weight: 600;
}
.chart-foot .mx { opacity: .8; }
.chart-empty {
  height: 90px; display: grid; place-items: center;
  font-size: .78rem; color: var(--muted); margin: .5rem 0 .3rem;
}
.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
/* آیکون ‎1em‎ است، پس همان ‎font-size‎ اندازه‌اش را می‌دهد — مثل قبل */
.empty .i { font-size: 2.4rem; display: block; margin-bottom: .5rem; line-height: 1; }
.empty .i svg { stroke-width: 1.4; opacity: .5; }

/* نوار تکمیل پروفایل — دکمهٔ بستن ندارد؛ با کامل‌شدن خودش می‌رود */
.nudge {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--brand-soft), #fff); border: 1px solid #f8d9bf;
  border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem;
}
.nudge b { font-size: .92rem; }
.nudge .t { flex: 1; min-width: 180px; font-size: .84rem; color: var(--muted); }

/* ---------- پوستهٔ پنل ---------- */
.shell { display: flex; min-height: 100dvh; }
.sidebar {
  width: 252px; flex-shrink: 0; background: var(--surface);
  border-left: 1px solid var(--line);
  padding: 1.1rem .9rem; position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar .brand-row { display: flex; align-items: center; gap: .55rem; padding: 0 .4rem 1rem; }

/* آرم — سه‌تکهٔ لوگو + واژه‌نشان CARCORE */
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand-lockup { display: flex; flex-direction: column; line-height: 1.25; }
.brand .brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; direction: ltr; }
.brand .brand-name .c1 { color: var(--charcoal); }
.brand .brand-name .c2 { color: var(--brand); }
.brand-slogan { display: flex; align-items: center; gap: .35rem; font-size: .66rem; color: var(--muted); font-weight: 600; }
.brand-slogan i { flex: 1; height: 1px; background: var(--line); min-width: 12px; }
.brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; }
.brand-name .c1 { color: var(--charcoal); }
.brand-name .c2 { color: var(--brand); }
.brand-name small { display: block; font-size: .66rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.nav-section { font-size: .7rem; font-weight: 700; color: var(--muted); padding: .9rem .6rem .3rem; }
.nav-link {
  display: flex; align-items: center; gap: .6rem; color: var(--ink);
  padding: .55rem .6rem; border-radius: 11px; font-size: .93rem; font-weight: 600;
  transition: background .1s;
}
.nav-link:hover { background: var(--bg); }
.nav-link.active { background: var(--brand-soft); color: var(--brand-ink); }
/* ‎.ic‎ حالا یک ‎<svg>‎ است و نه ایموجی: اندازه‌اش با ‎width/height‎ تعیین
   می‌شود و رنگش از ‎currentColor‎ می‌آید، پس با متنِ کنارش هماهنگ می‌ماند. */
.ic { width: 19px; height: 19px; flex: 0 0 auto; }
.nav-link .ic { width: 21px; height: 21px; }
.nav-link .badge {
  margin-right: auto; background: var(--danger); color: #fff;
  font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 0 .45rem; min-width: 1.25rem; text-align: center;
}
.sidebar .foot { margin-top: auto; padding-top: 1rem; }
.sidebar .ver { display: block; text-align: center; font-size: .72rem; color: var(--muted); padding-top: .4rem; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .8rem; padding: .65rem 1.2rem; min-height: 58px;
}
.topbar h1 { font-size: 1.05rem; font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .sub { font-size: .74rem; color: var(--muted); font-weight: 500; }
.content { padding: 1.25rem; max-width: 1080px; width: 100%; margin: 0 auto; padding-bottom: 5.5rem; }

/* ناوبری پایین موبایل */
.bottom-nav {
  display: none; position: fixed; bottom: 0; right: 0; left: 0; z-index: 40;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
}
.bottom-nav .wrap { display: flex; justify-content: space-around; max-width: 520px; margin: 0 auto; }
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  color: var(--muted); font-size: .66rem; font-weight: 700; padding: .25rem .6rem; border-radius: 12px;
  position: relative; min-width: 58px;
}
.bottom-nav a .ic { width: 22px; height: 22px; }
.bottom-nav a.active { color: var(--brand-ink); }
.bottom-nav a .badge {
  position: absolute; top: 0; left: .4rem; background: var(--danger); color: #fff;
  font-size: .62rem; border-radius: 999px; padding: 0 .3rem; min-width: 1rem; text-align: center;
}

@media (max-width: 900px) {
  .sidebar { display: none; }
  .bottom-nav { display: block; }
  .content { padding: 1rem .9rem 6rem; }
}

/* ---------- صفحه‌های ورود ---------- */
/* ⚠️ ستونی و نه ردیفی.
   ‎.auth-wrap‎ دو فرزند دارد: کارتِ ورود و پاورقیِ مشترک. تا وقتی پاورقی
   فقط در صفحهٔ فرود بود، این ‎flex‎ یک فرزند بیشتر نداشت و وسط‌چین‌کردنش
   درست کار می‌کرد. با اضافه‌شدنِ پاورقی به صفحه‌های ورود، همان ‎flex‎ دو
   ستون شد و چون صفحه ‎rtl‎ است کارت رفت سمت راست و پاورقی چسبید سمتِ چپِ
   آن — یعنی «نوشته‌های سمت چپ». حالا پاورقی زیرِ کارت می‌نشیند. */
.auth-wrap {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(700px 380px at 85% -10%, rgba(242, 106, 27, .15), transparent 60%),
    radial-gradient(600px 340px at 0% 110%, rgba(10, 160, 142, .12), transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border-radius: 22px; box-shadow: var(--shadow-lg); padding: 2rem 1.75rem;
}
.auth-card .brand-row { display: flex; justify-content: center; margin-bottom: 1rem; }
.auth-card h1 { font-size: 1.25rem; text-align: center; margin-bottom: .25rem; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: .87rem; margin-bottom: 1.4rem; }
.auth-card .alt { text-align: center; font-size: .87rem; margin-top: 1.2rem; color: var(--muted); }

/* تب‌های راننده / مرکز خدماتی */
.tabs { display: flex; background: var(--bg); border-radius: 13px; padding: .3rem; gap: .3rem; margin-bottom: 1.2rem; }
.tabs a {
  flex: 1; text-align: center; padding: .5rem .4rem; border-radius: 10px;
  font-size: .9rem; font-weight: 700; color: var(--muted);
}
.tabs a.on { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow); }

/* ---------- صفحهٔ فرود ---------- */
/* صفحهٔ فرود پس‌زمینهٔ خودش را دارد و قاعدهٔ ‎body‎ را کنار می‌زند، پس
   واژه‌نشان باید اینجا هم جداگانه بیاید — وگرنه دیده‌شده‌ترین صفحهٔ سایت
   تنها جایی می‌شد که آن را ندارد. */
.landing-page { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='210'%3E%3Ctext x='170' y='112' font-family='Segoe UI,Tahoma,sans-serif' font-size='34' font-weight='700' letter-spacing='3' fill='%232f9e68' fill-opacity='0.035' text-anchor='middle' transform='rotate(-22 170 105)'%3ECARCORE%3C/text%3E%3C/svg%3E") repeat,
  radial-gradient(800px 420px at 90% -5%, rgba(242, 106, 27, .12), transparent 60%),
  radial-gradient(700px 400px at 5% 30%, rgba(10, 160, 142, .08), transparent 60%),
  var(--bg);
  min-height: 100dvh;
}
.landing-header {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1.4rem; max-width: 1080px; margin: 0 auto;
}
.landing-header .spacer { flex: 1; }
.hero-wrap {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: center;
  max-width: 1020px; margin: 0 auto; padding: 2.5rem 1.25rem 1.5rem;
}
.hero { text-align: inherit; padding: 1rem 0; }
.hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 800; line-height: 1.45; }
.hero h1 .grad {
  background: linear-gradient(120deg, var(--brand), #d5470b 55%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--muted); font-size: 1.05rem; margin: 1rem 0 1.8rem; max-width: 34rem; }
.hero .cta { display: flex; gap: .7rem; flex-wrap: wrap; }
@media (max-width: 860px) {
  .hero-wrap { grid-template-columns: 1fr; text-align: center; }
  .hero { padding: 0; }
  .hero .cta { justify-content: center; }
  .hero p { margin-inline: auto; }
}

.phone-mock {
  width: 250px; margin: 0 auto; background: var(--charcoal); border-radius: 34px; padding: 12px;
  box-shadow: var(--shadow-lg), 0 0 0 2px rgba(242, 106, 27, .18);
  transform: rotate(-4deg);
}
.phone-mock .screen { background: var(--bg); border-radius: 24px; overflow: hidden; }
.phone-mock .notch { height: 20px; display: flex; justify-content: center; align-items: center; }
.phone-mock .notch span { width: 70px; height: 7px; border-radius: 999px; background: #dfe3ef; }
.phone-mock .app-head { background: var(--grad); color: #fff; padding: .7rem .8rem .9rem; font-size: .72rem; font-weight: 700; }
.phone-mock .app-head .bal { font-size: 1rem; font-weight: 800; margin-top: .2rem; }
.phone-mock .rows { padding: .55rem; display: flex; flex-direction: column; gap: .45rem; }
.phone-mock .mrow {
  background: #fff; border-radius: 11px; padding: .45rem .55rem;
  display: flex; align-items: center; gap: .45rem; font-size: .62rem; font-weight: 700;
  box-shadow: 0 1px 3px rgba(25,28,33,.06);
}
.phone-mock .mrow .grow { flex: 1; }
.phone-mock .mrow .sub { display: block; font-weight: 500; color: var(--muted); font-size: .56rem; }
.phone-mock .navbar { display: flex; justify-content: space-around; padding: .45rem 0 .6rem; font-size: .8rem; background: #fff; border-top: 1px solid var(--line); }

.app-strip { max-width: 1020px; margin: 1.5rem auto; padding: 0 1.25rem; }
.app-strip .inner {
  background: var(--grad-dark);
  border-radius: 22px; color: #fff; padding: 1.6rem 1.8rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.app-strip h3 { font-size: 1.25rem; }
.app-strip p { opacity: .85; font-size: .9rem; margin-top: .2rem; }
.app-strip .grow { flex: 1; min-width: 230px; }

.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem; max-width: 1020px; margin: 1rem auto 2rem; padding: 0 1.25rem;
}
.feature { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem; }
.feature .i { font-size: 1.9rem; display: block; line-height: 1; }
.feature .i svg { stroke: var(--brand); }
.feature h3 { font-size: 1rem; margin: .5rem 0 .25rem; }
.feature p { color: var(--muted); font-size: .87rem; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1rem; max-width: 1020px; margin: 0 auto 2.5rem; padding: 0 1.25rem; }
.step { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem; position: relative; }
.step .n {
  width: 34px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand-ink); font-weight: 800; margin-bottom: .6rem;
}
.step h4 { font-size: .98rem; margin-bottom: .2rem; }
.step p { color: var(--muted); font-size: .85rem; }

.section-title { text-align: center; font-size: 1.35rem; font-weight: 800; margin: 2.5rem 0 1.2rem; }
.section-title small { display: block; font-size: .85rem; color: var(--muted); font-weight: 500; margin-top: .25rem; }
.landing-footer { text-align: center; color: var(--muted); font-size: .82rem; padding: 2rem 1rem; }

/* ---------- فهرست مراکز ---------- */
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.provider-card {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.15rem; display: flex; flex-direction: column; gap: .4rem;
}
.provider-card .cat { font-size: .8rem; color: var(--muted); display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.provider-card h3 { font-size: 1.02rem; }

/* سربرگ کارت مرکز: آیکن نوع در کاشی نرم + نام و نوع */
.pcard-head { display: flex; align-items: center; gap: .7rem; }
.pcard-ic {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; font-size: 1.45rem;
  background: var(--brand-soft);
}
.pcard-ic.mobile { background: var(--accent-soft); }
.pcard-head .place-mark { flex-shrink: 0; border-radius: 14px; box-shadow: var(--shadow); }
.pcard-title { flex: 1; min-width: 0; }
.pcard-title h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-title .cat { display: block; }

/* کادر امتیاز — گوشهٔ چپ سربرگ را پر می‌کند */
.pcard-score {
  flex-shrink: 0; text-align: center; line-height: 1.35;
  background: var(--warn-soft); border-radius: 12px; padding: .3rem .65rem;
}
.pcard-score b { display: block; font-size: .95rem; white-space: nowrap; }
.pcard-score small { font-size: .68rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pcard-score.empty { background: #eef0f6; }
.pcard-score.empty b { color: var(--muted); }

.btn-block { width: 100%; }
.provider-card .city { font-size: .84rem; color: var(--muted); }
.provider-card .actions { margin-top: auto; padding-top: .7rem; display: flex; gap: .5rem; align-items: center; }
.live-dot { display: inline-flex; align-items: center; gap: .3rem; color: var(--ok); font-size: .78rem; font-weight: 700; }
.live-dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: ccpulse 1.6s infinite; }
@keyframes ccpulse { 50% { opacity: .35; } }

/* ستاره‌ها */
.stars { display: inline-flex; direction: ltr; gap: 1px; font-size: .95rem; color: #d8dbe4; }
.stars .on { color: #f5a623; }

/* ---------- نقشه ---------- */
.map-box { height: 380px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.map-box.sm { height: 280px; }
.leaflet-container { font: inherit; }

/* ---------- پلاک ایران — چیدمان واقعی (فرمت رنگیو) ---------- */
.plate {
  display: inline-flex; align-items: stretch; border: 1.5px solid #15489e; border-radius: 5px;
  overflow: hidden; background: #fff; font-weight: 800; font-size: 14px;
  direction: ltr; vertical-align: middle; line-height: 1.15; white-space: nowrap;
}
.plate .pg { padding: 3px 8px; display: grid; place-items: center; color: #111; }
.plate .p-ir {
  background: #15489e; color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 1px 4px; gap: 1px;
}
.plate .p-flag {
  width: 10px; height: 7px; border: .4px solid #fff;
  background: linear-gradient(#239f40 0 33.3%, #fff 33.3% 66.6%, #da0000 66.6% 100%);
}
.plate .p-irt { font-size: 5px; font-weight: 700; line-height: 1.05; text-align: center; letter-spacing: .2px; }
.plate .p-rg {
  border-left: 1px solid #15489e; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 1px 6px; min-width: 28px; color: #15489e;
}
.plate .p-rgt { font-size: 6px; font-weight: 700; line-height: 1; border-bottom: .5px solid #15489e; padding-bottom: 1px; margin-bottom: 1px; }
.plate .p-rgn { font-size: 12px; font-weight: 900; line-height: 1; }
.plate-masked { opacity: .75; }

/* ورودی پلاک */
/* ---------- پلاک ----------
   ⚠️ عیناً از «رنگیو» آورده شده، به خواستهٔ صریح مالک. همان آبیِ ‎#15489e‎،
   همان بدنهٔ سفید، همان نوارِ I.R.IRAN با پرچم، و همان «ایران» روی کد استان.
   ترتیب از چپ به راست دقیقاً مثل پلاک واقعی. */
.plate-box {
  display: flex; align-items: stretch; gap: 0; direction: ltr;
  border: 2px solid #15489e; border-radius: 10px; overflow: hidden;
  width: fit-content; max-width: 100%; background: #fff; height: 52px;
}
.plate-box input, .plate-box select {
  border: none; border-radius: 0; text-align: center; font-weight: 800; font-size: 16px;
  background: #fff; font-family: inherit; padding: 0; height: 100%;
}
.plate-box input:focus, .plate-box select:focus {
  outline: none; background: var(--brand-soft); box-shadow: none;
}
.plate-box .p-d2 { width: 56px; border-right: 1px solid #d9dee8; }
.plate-box .p-letter { width: 78px; border-right: 1px solid #d9dee8; font-size: 15px; }
.plate-box .p-d3 { width: 72px; border-right: 1px solid #d9dee8; }

/* نوار آبی «I.R.IRAN» در سمت چپ — مثل پلاک واقعی */
.plate-box .p-strip {
  background: #15489e; color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; padding: 0 6px; flex: none;
}
.plate-box .p-flag {
  width: 17px; height: 11px; border-radius: 1px;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.55);
  background: linear-gradient(#239f40 0 33.34%, #fff 33.34% 66.67%, #da0000 66.67% 100%);
}
.plate-box .p-ir { font-size: 6.5px; line-height: 1.15; font-weight: 800; letter-spacing: .4px; text-align: center; }

/* بخش راست: «ایران» بالای کد استان */
.plate-box .p-prov {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-left: 2px solid #15489e; padding: 3px 4px 0; flex: none;
}
.plate-box .p-prov i { font-style: normal; font-size: 9px; font-weight: 800; color: #15489e; line-height: 1; }
.plate-box .p-reg { width: 46px; flex: 1; padding: 0; font-size: 15px; }

/* ستونِ «اعتبار» — فقط پلاک گذر دارد. پلاکِ موقت است و بدون این تاریخ،
   معلوم نیست اعتبارش کِی تمام می‌شود. */
.plate-box .p-exp {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-left: 2px solid #15489e; padding: 3px 4px 0; flex: none;
}
.plate-box .p-exp i { font-style: normal; font-size: 8px; font-weight: 800; color: #15489e; line-height: 1; }
.plate-box .p-exp-in { width: 76px; flex: 1; padding: 0; font-size: 13px; }

/* ⚠️ بدون این، صفتِ ‎hidden‎ بی‌اثر است: قاعدهٔ ‎display:flex‎ بالا بر پیش‌فرضِ
   مرورگر غالب می‌شود و ستون روی پلاکی که نبایدش دارد هم دیده می‌ماند. همین
   دام در رنگیو دو بار پیش آمد و هر دو بار با دیدن، نه با خواندنِ کد، پیدا شد. */
.plate-box .p-prov[hidden], .plate-box .p-letter[hidden],
.plate-box .p-exp[hidden], .plate-box[hidden], .plate-free[hidden] { display: none; }

/* ---------- پلاک منطقهٔ آزاد ----------
   کلاسِ جدا و نه واریانتِ ‎.plate-box‎: ساختارش فرق دارد نه رنگش — مربعِ
   دوطبقه، بدون حرف و بدون کد استان، با نامِ منطقه روی نوارِ آبی. */
.plate-free {
  display: flex; align-items: stretch; direction: ltr;
  border: 2px solid #111; border-radius: 8px; overflow: hidden;
  width: fit-content; max-width: 100%; background: #fff; height: 74px;
}
.plate-free .pf-badge {
  background: #15489e; color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; padding: 6px 10px; flex: none; min-width: 92px;
}
.plate-free .pf-badge .p-flag {
  width: 20px; height: 13px; border-radius: 1px;
  box-shadow: 0 0 0 .5px rgba(255,255,255,.55);
  background: linear-gradient(#239f40 0 33.34%, #fff 33.34% 66.67%, #da0000 66.67% 100%);
}
.plate-free .pf-ir { font-size: 7.5px; font-weight: 800; letter-spacing: .5px; line-height: 1; }
.plate-free .pf-zone { font-size: 12px; font-weight: 900; letter-spacing: .8px; line-height: 1.1; text-align: center; }
.plate-free .pf-nums { display: flex; flex: 1; min-width: 150px; }
.plate-free .pf-nums input {
  flex: 1; border: none; border-radius: 0; text-align: center;
  font-weight: 900; font-size: 20px; background: #fff; font-family: inherit; padding: 0;
}
.plate-free .pf-nums input:focus { outline: none; background: var(--brand-soft); box-shadow: none; }
.plate-free .pf-two { border-right: 2px solid #111; max-width: 80px; }

/* رنگِ زمینه بر پایهٔ نوع پلاک — شخصی سفید، عمومی/تاکسی زرد،
   دولتی قرمز، انتظامی سبز. همان چیزی که روی خیابان دیده می‌شود. */
.plate-box[data-pt="taxi"], .plate-box[data-pt="taxi"] input, .plate-box[data-pt="taxi"] select,
.plate-box[data-pt="public"], .plate-box[data-pt="public"] input, .plate-box[data-pt="public"] select { background: #f5c518; }
.plate-box[data-pt="gov"], .plate-box[data-pt="gov"] input, .plate-box[data-pt="gov"] select { background: #d8232a; color: #fff; }
.plate-box[data-pt="police"], .plate-box[data-pt="police"] input, .plate-box[data-pt="police"] select { background: #1f7a3d; color: #fff; }
.plate-box[data-pt="gov"] .p-prov i, .plate-box[data-pt="police"] .p-prov i { color: #fff; }
.plate-box[data-pt="gov"] .p-prov, .plate-box[data-pt="police"] .p-prov { border-left-color: #fff; }

/* ---------- متفرقه ---------- */
.money { font-variant-numeric: tabular-nums; font-weight: 700; }
.money.pos { color: var(--ok); }
.money.neg { color: var(--danger); }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row .spacer { flex: 1; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* کارتی که خودش یک لینک است — میان‌بُرهای بالای پنل.
   ⚠️ ‎color: inherit‎ لازم است: بدون آن، کلِ کارت آبیِ لینک می‌شود. */
a.card.tile { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
a.card.tile:hover { border-color: var(--brand); transform: translateY(-2px); }
a.card.tile .hint { margin-bottom: 0; }
.code-badge {
  font-family: inherit; letter-spacing: .08em; direction: ltr; display: inline-block;
  background: var(--brand-soft); color: var(--brand-ink);
  font-weight: 800; border-radius: 10px; padding: .25rem .8rem;
}
details.inline-edit summary { cursor: pointer; color: var(--brand-ink); font-size: .84rem; font-weight: 700; list-style: none; }
details.inline-edit summary::-webkit-details-marker { display: none; }
details.inline-edit > div { margin-top: .6rem; padding: .8rem; background: var(--bg); border-radius: 12px; }

/* گفت‌وگوی تیکت */
.thread { display: flex; flex-direction: column; gap: .6rem; }
.bubble {
  max-width: 85%; border-radius: 14px; padding: .6rem .9rem; font-size: .92rem;
  background: var(--surface); box-shadow: var(--shadow); align-self: flex-start;
}
.bubble.me { background: var(--brand-soft); align-self: flex-end; }
.bubble .meta { display: block; font-size: .7rem; color: var(--muted); margin-top: .25rem; }

/* کارت اشتراک/کیف پول تیره */
.balance-card {
  background: var(--grad-dark); color: #fff; border-radius: 18px;
  padding: 1.3rem 1.4rem; box-shadow: var(--shadow-lg);
}
.balance-card .amount { font-size: 1.6rem; font-weight: 800; margin: .3rem 0; }
.balance-card .meta { display: flex; justify-content: space-between; font-size: .84rem; opacity: .9; flex-wrap: wrap; gap: .4rem; }

/* ==========================================================================
   ظاهر: پس‌زمینهٔ غیرسفید، منوی رنگی و برجسته، واژه‌نشانِ مورب
   ========================================================================== */

/* ---- پس‌زمینه ----
   سفیدیِ یکدست، کارت‌های سفید را نامرئی می‌کرد: مرزِ هر کارت فقط یک خطِ
   یک‌پیکسلیِ کم‌رنگ بود. یک زمینهٔ سرد و بسیار روشن با دو هالهٔ رنگی، همان
   کارت‌ها را بدون تغییرِ خودشان جدا می‌کند. */
/* واژه‌نشانِ «CARCORE» لایهٔ اولِ همین پس‌زمینه است و نه یک قاعدهٔ جدا.
   جدا نوشتنش ــ که اول همین کار را کردم ــ ‎background-image‎ را از نو
   می‌نویسد و هر سه لایهٔ زیر را پاک می‌کند؛ یعنی همان دو هالهٔ رنگی که
   کارت‌ها را از زمینه جدا می‌کنند از بین می‌روند. اندازه‌گیری لو داد:
   رنگِ زمینهٔ صفحه‌های پنل شفاف شده بود.

   شفافیتش ۰٫۰۳۵ است تا فقط از نزدیک دیده شود؛ به تخته‌رنگ چیزی اضافه
   نمی‌کند و خوانایی متن را دست نمی‌زند. */
body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='210'%3E%3Ctext x='170' y='112' font-family='Segoe UI,Tahoma,sans-serif' font-size='34' font-weight='700' letter-spacing='3' fill='%232f9e68' fill-opacity='0.035' text-anchor='middle' transform='rotate(-22 170 105)'%3ECARCORE%3C/text%3E%3C/svg%3E") repeat,
    radial-gradient(900px 520px at 88% -8%, rgba(47,158,104,.10), transparent 60%),
    radial-gradient(760px 460px at 4% 4%, rgba(10,160,142,.09), transparent 62%),
    linear-gradient(180deg, #eef1f7 0%, #e9ecf4 100%);
  background-attachment: fixed;
}

/* روی کاغذ واژه‌نشان فقط جوهر هدر می‌دهد */
@media print { body { background-image: none; } }

/* ---------- چاپِ کارنامه ----------
   بدون این، «چاپ کارنامه» کلِ پوسته را هم روی کاغذ می‌آورد: منوی کناری،
   نوار بالا، نوار پایینِ موبایل و دکمه‌های ویرایش. کاغذی که دستِ کسی داده
   می‌شود باید فقط کارنامه باشد. */
.no-print { }
@media print {
  /* ⚠️ حاشیهٔ صفر، تا سربرگ و پاورقیِ خودِ مرورگر (نشانی، عنوان، تاریخ،
     شمارهٔ صفحه) روی کاغذ نیایند؛ تا وقتی ‎@page‎ حاشیه داشته باشد آن‌ها
     جا می‌گیرند. حاشیهٔ واقعی را ‎.content‎ می‌سازد. */
  @page { margin: 0; }

  .sidebar, .topbar, .bottom-nav, .nav-scrim, .site-footer,
  .no-print, #ccBar, .nudge { display: none !important; }

  .shell, .main { display: block !important; margin: 0 !important; padding: 0 !important; }
  /* ⚠️ ‎.content‎ عمداً از خطِ بالا جدا شد. وقتی با ‎.shell, .main‎ یک‌جا بود،
     همان ‎padding: 0 !important‎ حاشیهٔ ۱۲ میلی‌متری را می‌خورد و متن به لبهٔ
     کاغذ می‌چسبید — چون هر دو ‎!important‎ و هم‌وزن بودند و قاعدهٔ بعدی
     برنده می‌شد. */
  .content { display: block !important; margin: 0 !important; padding: 12mm !important; }
  .card {
    box-shadow: none !important; border: 1px solid #d8dbe4 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* جدولِ بلند نباید وسطِ یک ردیف بشکند */
  table tr { break-inside: avoid; page-break-inside: avoid; }
  a[href]::after { content: none !important; }   /* مرورگرها نشانی را چاپ می‌کنند */

  /* سربرگِ گزارش — فقط روی کاغذ. بدون این، برگه‌ای که چاپ می‌شود نه نام دارد
     نه بازه، و یک ماه بعد معلوم نیست مالِ چیست. */
  .print-only { display: block !important; }
  .report-head { margin: 0 0 6mm; border-bottom: 2px solid #191c21; padding-bottom: 3mm; }
  .report-head .rh-top { display: flex; justify-content: space-between; font-size: 10pt; color: #555; }
  .report-head .rh-brand { font-weight: 800; }
  .report-head .rh-title { font-size: 16pt; margin: 2mm 0 1mm; }
  .report-head .rh-range { font-size: 11pt; color: #333; }

}

/* روی نمایشگر پنهان است؛ قاعدهٔ چاپ بالا نشانش می‌دهد */
.print-only { display: none; }

.report-tools {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; margin-bottom: .75rem;
}

/* ---- سایدبار ----
   دیگر هم‌رنگِ کارت‌ها نیست، وگرنه با محتوا یکی می‌شد. */
.sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  box-shadow: 1px 0 0 rgba(25,28,33,.05), -18px 0 40px -32px rgba(25,28,33,.35);
}

/* ---- ردیف‌های منو: رنگی و برجسته ----
   هر گروه رنگِ خودش را دارد تا با نگاه پیدا شود نه با خواندن — همان کاری که
   در رنگیو جواب داده. رنگ روی «نوارِ کناری» و آیکون می‌نشیند، نه روی متن، تا
   خوانایی دست‌نخورده بماند. */
/* ⚠️ پیش‌تر فقط آیکون و نوارِ کناری رنگ می‌گرفتند و خودِ باکس سفید می‌ماند —
   یعنی از دور همهٔ ردیف‌ها یک‌شکل بودند و رنگ‌بندی عملاً دیده نمی‌شد.
   حالا خودِ باکس ته‌رنگِ همان ردیف را دارد. درصدها آن‌قدر هست که از یک متری
   دیده شود و آن‌قدر کم که متنِ تیره رویش خوانا بماند — بارِ اول ۹ تا ۱۵ درصد
   بود و عملاً سفید به‌نظر می‌رسید. */
.nav-link {
  position: relative; z-index: 0;
  border-radius: 12px;
  border: 1.5px solid rgba(25,28,33,.07);
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(25,28,33,.05), 0 2px 6px -4px rgba(25,28,33,.18);
  margin-bottom: .25rem;
  transition: transform .12s, box-shadow .12s;
}
/* ته‌رنگِ باکس = همان رنگِ ردیف با شفافیتِ کم.
   ⚠️ با ‎opacity‎ ساخته می‌شود، نه ‎color-mix‎ — پس روی مرورگرهای قدیمی هم
   کار می‌کند و منو دیگر سفید نمی‌ماند. ‎z-index:-1‎ تا زیرِ متن بنشیند. */
.nav-link::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: var(--nav-hue, var(--brand)); opacity: .13;
}
.nav-link::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%;
  width: 3px; border-radius: 999px; background: var(--nav-hue, var(--brand)); opacity: .9;
}
.nav-link .ic { filter: drop-shadow(0 1px 1px rgba(25,28,33,.22)); }

.nav-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(25,28,33,.05), 0 10px 18px -12px rgba(25,28,33,.4);
}
.nav-link:hover::after { opacity: .22; }
.nav-link:active { transform: translateY(0); }

/* ردیفِ فعال: ته‌رنگ پررنگ‌تر و قابِ هم‌رنگ؛ متن تیره برای خوانایی. */
.nav-link.active { border-color: var(--nav-hue, var(--brand)); color: #14171b; font-weight: 700; }
.nav-link.active::after { opacity: .32; }
.nav-link.active::before { opacity: 1; width: 4px; }

/* رنگِ هر گروه. ترتیبشان همان ترتیبِ ‎nav-section‎هاست. */

.nav-section {
  font-size: .72rem; font-weight: 800; color: var(--muted);
  letter-spacing: .06em; margin: .9rem .3rem .35rem;
  text-transform: none;
}

/* ---- کارت‌ها: کمی برجسته ---- */
.card, .stat, .balance-card {
  box-shadow: 0 1px 0 rgba(25,28,33,.04), 0 12px 26px -18px rgba(25,28,33,.35);
}

/* ---- نوار پایین موبایل ---- */
.bottom-nav {
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  box-shadow: 0 -10px 24px -18px rgba(25,28,33,.5);
}
.bottom-nav a.active .ic { filter: drop-shadow(0 2px 2px rgba(35,132,87,.45)); }

/* ---- واژه‌نشان CARCORE ----
   مورب و سایه‌دار، همان‌طور که خواسته شد. ‎skewX‎ به‌جای ‎italic‎ استفاده شده
   چون فونت وزیرمتن برشِ ایتالیکِ لاتین ندارد و مرورگر آن را با کجیِ مصنوعیِ
   ناهموار می‌سازد؛ ‎skewX‎ همان کج‌شدگی را یکدست و کنترل‌شده می‌دهد. */
.brand-name {
  display: inline-block;
  transform: skewX(-9deg);
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 2px 3px rgba(25,28,33,.28);
}
.brand-name .c2 { text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 3px 6px rgba(35,132,87,.45); }
.brand-mark { border-radius: 10px; }

/* ---- CARCORE: «CAR» بزرگ و سایه‌دار، «CORE» کوچک‌تر ----
   نسبت اندازه‌ها کارِ اصلی را می‌کند، نه رنگ: چشم اول به بخشِ بزرگ‌تر می‌رود و
   بخشِ دوم دنبالش می‌آید. سایه فقط روی «CAR» سنگین است؛ اگر روی هر دو بود،
   تضاد از بین می‌رفت و کل واژه‌نشان مات به نظر می‌رسید.

   ‎inline-block‎ روی هر دو لازم است، وگرنه ‎font-size‎ی متفاوت خطِ پایه را
   جابه‌جا می‌کند و دو نیمه روی یک خط نمی‌نشینند. */
.brand-name .c1 {
  display: inline-block;
  font-size: 1.24em;
  font-weight: 900;
  letter-spacing: .01em;
  vertical-align: baseline;
  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 2px 2px rgba(25,28,33,.30),
    0 4px 8px rgba(25,28,33,.26),
    0 8px 18px rgba(25,28,33,.18);
}
.brand-name .c2 {
  display: inline-block;
  font-size: .92em;
  font-weight: 800;
  vertical-align: baseline;
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 4px rgba(35,132,87,.40);
}

/* ---- گروه‌های کشویی منو ----
   رنگ از ‎--nav-hue‎ی می‌آید که خودِ ‎_Layout‎ روی هر گروه می‌گذارد. تلاشِ
   قبلی با ‎nth-of-type ~‎ انجام شده بود و کار نمی‌کرد: ‎~‎ همهٔ لینک‌های بعدی
   را می‌گیرد نه فقط گروهِ خودش، پس قاعدهٔ آخر روی همه می‌نشست. */
.nav-group { margin-bottom: .3rem; }
.nav-group > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .45rem;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::before {
  content: "▸"; font-size: .7rem; color: var(--nav-hue);
  transition: transform .15s; display: inline-block;
}
.nav-group[open] > summary::before { transform: rotate(-90deg); }
.nav-group > summary::after {
  content: ""; flex: 1; height: 2px; border-radius: 2px;
  background: var(--nav-hue); opacity: .28;
}
.nav-group-flat { margin-bottom: .45rem; }

/* ---- گروه‌های تیکِ جمع‌شونده (مشخصات مرکز) ----
   دو فهرستِ «نوع مرکز» و «سرویس‌ها» ده‌ها چک‌باکس دارند و باز بودنشان یعنی
   برای عوض‌کردن یک شمارهٔ تلفن باید از همه‌شان رد شد. */
.pick-group {
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: .7rem .9rem; background: var(--surface);
}
.pick-group > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.pick-group > summary::-webkit-details-marker { display: none; }
.pick-group > summary::before {
  content: "▸"; color: var(--brand); font-size: .8rem;
  transition: transform .15s; display: inline-block;
}
.pick-group[open] > summary::before { transform: rotate(-90deg); }
.pick-group > summary .chip { margin-inline-start: auto; }

/* ---------- انتخابگر تاریخ شمسی (js/jdate.js) ---------- */
/* روی body نشانده می‌شود نه کنارِ فیلد، تا کارت‌هایی که overflow دارند نبرندش. */
.jdp{position:absolute;z-index:120;background:var(--surface);border:1.5px solid var(--line);
     border-radius:14px;box-shadow:var(--shadow-lg);padding:10px;
     width:262px;direction:rtl;font-family:inherit}
.jdp-head{display:flex;gap:6px;margin-bottom:8px}
.jdp-head select{flex:1;border:1.5px solid var(--line);border-radius:9px;padding:6px 8px;
                 font-family:inherit;font-size:12.5px;font-weight:700;background:#fbfcfe;color:var(--ink)}
.jdp-wk,.jdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.jdp-wk span{text-align:center;font-size:11px;font-weight:800;color:var(--muted);padding:4px 0}
.jdp-grid button{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:700;
                 color:var(--ink);padding:7px 0;border-radius:9px;cursor:pointer;transition:.13s}
.jdp-grid button:hover{background:var(--brand-soft)}
/* «امروز» فقط قاب می‌گیرد و «انتخاب‌شده» پُر می‌شود، تا از هم جدا باشند */
.jdp-grid button.now{box-shadow:inset 0 0 0 1.5px var(--brand)}
.jdp-grid button.on{background:var(--brand);color:#fff}
.jdp-foot{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.jdp-foot button{flex:1;border:1.5px solid var(--line);background:var(--surface);border-radius:9px;padding:6px 0;
                 font-family:inherit;font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.jdp-foot button:hover{border-color:var(--brand);color:var(--brand)}

/* ---------- سربرگِ میز پذیرش ---------- */
/* نام مرکز و نوعش، تا اپراتور بداند پشتِ کدام باجه نشسته است */
.desk-head { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; }
.desk-head-name { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.desk-head-where { font-size: .82rem; color: var(--muted); }
.chip-wrap { display: flex; flex-wrap: wrap; gap: .4rem; }

/* توضیح مرکز روی کارت — دو خط، تا کارت‌ها هم‌قد بمانند */
.pcard-about {
  font-size: .78rem; line-height: 1.6; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* کارتی که با دابل‌کلیک باز می‌شود — نشانهٔ کوچکِ اینکه کلیک‌پذیر است */
.is-boxlink { cursor: pointer; }
.is-boxlink:hover { box-shadow: var(--shadow-lg); }

/* ---------- رنگِ پلاک بر پایهٔ نوعش ---------- */
/* اینها رنگِ پوستهٔ برنامه نیستند، رنگِ قانونیِ خودِ پلاک‌اند: زردِ عمومی،
   قرمزِ دولتی، سبزِ انتظامی. همان کدهایی که رنگیو استفاده می‌کند، تا یک
   خودرو در دو سامانه دو رنگ نخورد. */
.plate[data-pt="taxi"], .plate[data-pt="public"] { background: #f5c518; }
.plate[data-pt="gov"] { background: #d8232a; }
.plate[data-pt="police"] { background: #1f7a3d; }
/* ‎.pg‎ رنگِ ثابتِ ‎#111‎ دارد؛ روی زمینهٔ قرمز/سبز باید صریح سفید شود، وگرنه
   ارقام تقریباً ناخوانا می‌مانند. */
/* آبی — پلاک معلولان/جانبازان و پلاک سیاسی و دیپلمات */
.plate[data-pt="disabled"], .plate[data-pt="diplomat"] { background: #1f5fbf; }
.plate[data-pt="gov"] .pg, .plate[data-pt="police"] .pg,
.plate[data-pt="disabled"] .pg, .plate[data-pt="diplomat"] .pg,
.plate[data-pt="gov"] .p-rg, .plate[data-pt="police"] .p-rg,
.plate[data-pt="disabled"] .p-rg, .plate[data-pt="diplomat"] .p-rg { color: #fff; }
.plate[data-pt="gov"] .p-rg, .plate[data-pt="police"] .p-rg,
.plate[data-pt="disabled"] .p-rg, .plate[data-pt="diplomat"] .p-rg { border-left-color: #fff; }
.plate[data-pt="gov"] .p-rgt, .plate[data-pt="police"] .p-rgt,
.plate[data-pt="disabled"] .p-rgt, .plate[data-pt="diplomat"] .p-rgt { border-bottom-color: #fff; }
/* کادرِ راستِ پلاکِ منطقهٔ آزاد نامِ منطقه را نگه می‌دارد، نه کد استان */
.plate .p-rgz { font-size: .6rem; font-weight: 800; line-height: 1; }

/* ---------- شبکهٔ کشویی‌های دسته‌ای (مشخصات مرکز) ---------- */
/* هر دسته یک کشویی؛ کنار هم می‌نشینند تا صفحه بلند نشود */
.msel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
/* کشوییِ باز نباید زیرِ کشویی‌های بعدی برود */
.msel-grid .msel[open] { z-index: 60; }
.msel-grid .msel > summary { font-size: .88rem; padding: .5rem .7rem; }

/* ---------- نامِ مرکز زیر لوگو ---------- */
.my-center {
  font-size: .82rem; font-weight: 800; color: var(--brand-ink);
  background: var(--brand-soft); border-radius: 10px;
  padding: .3rem .6rem; margin: -.3rem .2rem .7rem; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- رنگِ آیکون‌ها ---------- */
/* آیکون‌ها تک‌رنگ بودند و کنارِ ایموجی‌های قبلی بی‌روح دیده می‌شدند.
   هر گروهِ منو از پیش یک ‎--nav-hue‎ دارد (همان رنگی که نوارِ کنارِ ردیف
   می‌گیرد)، پس آیکون هم همان را برمی‌دارد: رنگ معنی‌دار می‌ماند و به‌جای
   انتخابِ سلیقه‌ای، از دسته‌بندیِ موجود می‌آید. */
.nav-link .ic { color: var(--nav-hue, var(--brand)); }
/* ردیفِ فعال متنش رنگِ برند می‌گیرد؛ آیکون هم با آن یکی می‌شود */
.nav-link.active .ic { color: inherit; }
.bottom-nav a .ic { color: var(--nav-hue, var(--brand)); }
/* ردیفِ فعال کاملاً رنگِ برند می‌شود (متن و آیکون با هم) */
.bottom-nav a.active .ic { color: inherit; }

/* حالت‌های خالی و کارت‌های صفحهٔ اصلی */
.empty .i svg { stroke: var(--brand); opacity: .45; }

/* ردیفِ جدول که با دابل‌کلیک باز می‌شود */
tr.is-boxlink { cursor: pointer; }
tr.is-boxlink:hover { background: var(--brand-soft); }

/* ---------- گفت‌وگوی راننده و مرکز ---------- */
.chat { display: flex; flex-direction: column; gap: .5rem; max-height: 55vh; overflow-y: auto; padding: .2rem; }
.chat .msg { max-width: 78%; align-self: flex-start; background: #eef0f6; border-radius: 14px 14px 14px 4px; padding: .55rem .8rem; }
/* پیامِ خودم سمتِ دیگر و با رنگِ برند — تا با یک نگاه بفهمی کدام مالِ کیست */
.chat .msg.mine { align-self: flex-end; background: var(--brand-soft); border-radius: 14px 14px 4px 14px; }
.chat .msg .body { font-size: .92rem; white-space: pre-wrap; word-break: break-word; }
.chat .msg .at { font-size: .68rem; color: var(--muted); margin-top: .25rem; }

/* ---------- سرتیترِ بخشِ کشویی داخل فرم ---------- */
/* بی‌این، ‎<summary>‎ شبیه یک خطِ متنِ معمولی بود و کاربر نمی‌فهمید بازشدنی
   است — گزارش شد «ویرایش اطلاعات نیست و نشانی حذف شده»، در حالی که فقط
   بسته بود. حالا زمینه و فلش دارد و دستِ ماوس رویش عوض می‌شود. */
details.field > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px;
  padding: .55rem .85rem; font-size: .92rem; color: var(--ink);
}
details.field > summary::-webkit-details-marker { display: none; }
details.field > summary::after { content: '▾'; margin-inline-start: auto; color: var(--muted); }
details.field[open] > summary::after { content: '▴'; }
details.field[open] > summary { border-color: var(--brand); background: var(--brand-soft); }
details.field > summary + * { margin-top: .7rem; }

/* ---------- سرگروهِ منو رنگِ خودش را می‌گیرد ---------- */
/* پیش‌تر فقط آیکون و نوارِ کنارِ ردیف رنگی بود و خودِ عنوانِ گروه خاکستری
   می‌ماند؛ نتیجه این بود که رنگ‌بندی به‌چشم نمی‌آمد. */
/* ⚠️ عنوانِ دسته با رنگِ خودِ دسته نوشته می‌شد و بعضی از آن رنگ‌ها روی سفید
   نسبتِ کنتراستِ ‎۲٫۷‎ می‌دادند — یعنی زیرِ حداقلِ خواناییِ ‎۴٫۵‎. مدیر گزارش
   کرد «نوشته‌ها دیده نمی‌شن».

   رنگِ دسته حذف نشد، فقط جایش عوض شد: هویتِ رنگی روی همان نقطهٔ کنارِ
   عنوان و خطِ زیرش می‌ماند و خودِ نوشته پررنگ می‌شود. */
.nav-group > summary.nav-section {
  color: var(--ink);
  border-bottom: 2px solid var(--nav-hue, var(--line));
  padding-bottom: .3rem;
}
.nav-group > summary.nav-section::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--nav-hue, var(--muted)); display: inline-block; margin-inline-end: .4rem;
}

/* ---------- نوار بالا: بازگشت، ساعت ---------- */
.topbar .back-btn { padding: .3rem .55rem; line-height: 0; }
.topbar .back-btn .ic { width: 18px; height: 18px; }
.clock {
  font-size: .78rem; font-weight: 700; color: var(--muted);
  margin-inline-start: auto; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* روی نمایشگرِ باریک، ساعت اولین چیزی است که باید جا خالی کند */
@media (max-width: 560px) { .clock { display: none; } }

/* زمانِ آخرین پوش، زیرِ شمارهٔ نسخه */
.ver-at { display: block; font-size: .68rem; opacity: .75; }

/* ---------- راهنمای رنگ پلاک ---------- */
.plate-legend { display: flex; flex-direction: column; gap: .35rem; }
.plate-legend .pl-row { display: flex; align-items: center; gap: .5rem; font-size: .82rem; flex-wrap: wrap; }
.plate-legend .pl-swatch {
  width: 22px; height: 15px; border-radius: 3px;
  border: 1.5px solid #15489e; flex: 0 0 auto;
}

/* نشانِ لینکِ بیرونی در منو */
.nav-link .ext { margin-inline-start: auto; font-size: .75rem; color: var(--muted); }

/* نشانِ تصویری در منو (به‌جای آیکون خطی) */
.nav-logo { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }

/* مسافت و زمانِ تقریبی زیر دکمه‌های مسیریابی */
.dir-box { display: flex; flex-direction: column; gap: .35rem; }
.dir-eta { font-size: .76rem; color: var(--muted); }

/* ---------- آیکون‌ها در ماکتِ گوشیِ صفحهٔ اصلی و نوارهای تبلیغی ---------- */
/* اینجا آیکون جای ایموجی نشسته؛ اندازه باید با متنِ ریزِ ماکت جور باشد */
.phone-mock .mrow svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--brand); }
.phone-mock .navbar svg { width: 15px; height: 15px; color: var(--muted); }
.phone-mock .navbar span:first-child svg { color: var(--brand); }
.strip-ic svg { width: 34px; height: 34px; }
.app-strip .inner .strip-ic { flex: 0 0 auto; }

/* آیکنِ نوع مرکز — کوچک، هم‌اندازهٔ متنِ کنارش */
.ic-type { width: 1em; height: 1em; }
.check-chip .ic-type, .chip .ic-type { opacity: .8; }

/* ---------- نصب اپ ---------- */
.install-actions { display: flex; flex-direction: column; gap: .45rem; align-items: stretch; flex: 0 0 auto; }
.apk-note { font-size: .78rem; opacity: .85; margin-top: .35rem; }
.pwa-hint { font-size: .72rem; opacity: .9; text-align: center; }

/* نوار پایین با شش ردیف: کمی باریک‌تر تا روی گوشیِ ۳۶۰ پیکسلی جا شود */
@media (max-width: 420px) {
  .bottom-nav a { min-width: 50px; font-size: .6rem; padding-inline: .35rem; }
}

/* ---------- تعهدنامهٔ ثبت‌نام ---------- */
.pledge {
  display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 1rem;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px;
  padding: .75rem .9rem; font-size: .78rem; line-height: 1.9; color: var(--ink);
  font-weight: 500; cursor: pointer;
}
.pledge input { flex: 0 0 auto; margin-top: .35rem; }
.pledge a { text-decoration: underline; }

/* ---------- استعلام رسمی ---------- */
.inq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; }
.inq {
  border: 1.5px solid var(--line); border-radius: 13px; padding: .8rem .9rem;
  display: flex; flex-direction: column; gap: .2rem;
}
.inq-head { display: flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 800; }
.inq-val { font-size: 1rem; font-weight: 800; }
.inq-val.ok { color: var(--ok); }
.inq-val.bad { color: var(--danger); }
.inq-val.na { color: var(--muted); font-weight: 600; font-size: .88rem; }
.inq-detail { font-size: .74rem; color: var(--muted); line-height: 1.7; }
.inq-at { font-size: .68rem; color: var(--muted); margin-top: .2rem; }

/* ریزِ جریمه‌ها در تاریخچه — هر قلم یک خط.
   ⚠️ ‎pre-line‎ لازم است: بدونش HTML همهٔ شکستِ خط‌ها را یک فاصله می‌کند و ده
   جریمه به یک بندِ درهم می‌چسبد. کلاسش از ‎.inq-detail‎ جداست تا کارتِ
   خودرو دست‌نخورده بماند. */
.inq-lines {
  white-space: pre-line;
  font-size: .8rem; line-height: 1.9; color: var(--ink);
  background: #f7f8fc; border-radius: 10px;
  padding: .5rem .7rem; margin-top: .4rem;
}

/* ===== پاورقی مشترک ===== */
.site-footer {
  text-align: center; color: var(--muted); font-size: .82rem;
  padding: 2rem 1rem 1.4rem; line-height: 2;
  border-top: 1px solid var(--line); margin-top: 2.5rem;
}
.site-footer .sf-links,
.site-footer .sf-social {
  display: flex; gap: .4rem 1.1rem; justify-content: center; flex-wrap: wrap;
}
.site-footer .sf-links { margin-bottom: .6rem; }
.site-footer .sf-social { margin-bottom: .8rem; }
.site-footer .sf-social a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.site-footer .sf-social svg { width: 1.05em; height: 1.05em; }
.site-footer .sf-legal { font-size: .76rem; opacity: .85; }
.site-footer a { color: var(--brand-ink); }
.site-footer a:hover { text-decoration: underline; }
/* نوارِ پایینِ گوشی روی پاورقی می‌افتد؛ جا باز کن */
body:has(.bottom-nav) .site-footer { padding-bottom: 5.2rem; }

/* زیرِ کارتِ ورود، پاورقی نه خطِ جداکننده لازم دارد و نه فاصلهٔ بلندِ
   صفحه‌های بلند — این‌جا محتوا وسطِ صفحه است و آن فاصله فقط کارت را از
   وسط می‌انداخت. پهنایش هم به کارت گره می‌خورد تا لبه‌هایشان یکی باشد. */
.auth-wrap .site-footer {
  width: 100%; max-width: 400px;
  border-top: none; margin-top: 1.4rem; padding: 1.2rem 0 0;
}


/* ---- تعهدنامه: تیک همیشه پیدا، متن پشت دکمه ---- */
.pledge-box { margin: .9rem 0 1.1rem; }
.pledge-toggle {
  background: none; border: 0; padding: .15rem 0; margin-top: .3rem;
  color: var(--brand-ink); font: inherit; font-size: .85rem; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.pledge-toggle:hover { color: var(--brand-deep); }
.pledge-text {
  margin-top: .5rem; padding: .75rem .85rem; border-radius: 12px;
  background: var(--brand-soft); font-size: .85rem; line-height: 1.95;
}
.pledge-text a { text-decoration: underline; }

/* دکمهٔ کارت، چسبیده به نام — روی موبایل زیر نام می‌افتد و نه بیرون از قاب */
.desk-head-name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.name-card-btn { font-weight: 700; }

/* ===== منوی کشویی روی گوشی =====
   ⚠️ این بلوک عمداً *ته* فایل است.
   بارِ اول همین قواعد را کنارِ مدیا-کوئریِ موجود (خط ~۲۹۵) گذاشتم و کار
   نکرد: مدیا-کوئری به specificity چیزی اضافه نمی‌کند، و پایین‌تر در همین
   فایل ‎.sidebar‎ و ‎.nav-toggle‎ دوباره تعریف شده بودند — پس آن تعریف‌های
   بعدی برنده می‌شدند و منو همچنان روی گوشی نبود.

   پیش از این، سایدبار زیر ۹۰۰ پیکسل ‎display:none‎ می‌شد؛ یعنی هر ردیفی که
   در نوارِ پایین جا نمی‌شد، برای کاربرِ موبایل اصلاً وجود نداشت. */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .sidebar {
    display: flex;
    /* عمداً ‎right‎ فیزیکی، نه ‎inset-inline-end‎: در صفحهٔ ‎rtl‎ آن یکی به
       لبهٔ *چپ* نگاشته می‌شود و منو از سمتِ اشتباه می‌آمد — برعکسِ جایی که
       روی دسکتاپ می‌نشیند و برعکسِ جای دکمهٔ همبرگری. */
    position: fixed; top: 0; bottom: 0; right: 0; left: auto; z-index: 60;
    width: min(84vw, 320px); max-width: 320px;
    overflow-y: auto; padding: 1rem .8rem;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
    box-shadow: var(--shadow-lg);
    /* ‎translateX‎ فیزیکی است و با ‎rtl‎ قرینه نمی‌شود؛ مثبت یعنی به راست. */
    transform: translateX(100%);
    transition: transform .22s ease;
  }
  body.nav-open .sidebar { transform: none; }

  /* پرده — زدن رویش می‌بندد. تا باز نشده کلیک هم نمی‌گیرد. */
  .nav-scrim {
    position: fixed; inset: 0; z-index: 55; background: rgba(25,28,33,.45);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}

/* روی دسکتاپ پرده هیچ‌وقت دیده نمی‌شود */
@media (min-width: 901px) { .nav-scrim { display: none; } }

/* ---------- نامِ مرکز در نوارِ بالا ----------
   خواستهٔ صریح: «همیشه بالای صفحه دیده شود». پیش‌تر فقط زیرِ لوگو در
   سایدبار بود و روی گوشی که سایدبار کشویی است، تا منو باز نمی‌شد دیده
   نمی‌شد.

   ‎flex: 0 1 auto‎ و ‎min-width: 0‎ با هم یعنی «جا که تنگ شد کوتاه شو، ولی
   نرو»: عنوانِ صفحه ‎flex: 1‎ دارد و بدون این، نامِ مرکز روی صفحهٔ باریک از
   نوار بیرون می‌افتاد. زیر ۵۶۰ پیکسل ساعت پنهان می‌شود و جا باز می‌کند. */
.topbar-center {
  flex: 0 1 auto; min-width: 0; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .78rem; font-weight: 800; color: var(--brand-ink);
  background: var(--brand-soft); border-radius: 999px;
  padding: .22rem .6rem; line-height: 1.7;
}
/* ⚠️ روی گوشی نوار جای هر دو را با هم ندارد.
   با نام مرکز و عنوانِ صفحه در یک ردیف، عنوان تا عرضِ *صفر* له می‌شد و
   عملاً ناپدید — یعنی برای جا دادنِ نام مرکز، عنوانِ صفحه را می‌انداختم.
   اندازه‌گیری روی ۳۷۵ پیکسل نشانش داد: ‎h1‎ عرضِ ۰.
   پس نوار می‌شکند و نام مرکز ردیفِ خودش را می‌گیرد: هم کامل دیده می‌شود و
   بریده نمی‌شود، هم عنوان سرِ جایش می‌ماند. */
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; row-gap: .35rem; }
  /* پایهٔ صفر و نه ‎6rem‎: با پایهٔ ثابت، عنوان جا را می‌گرفت و دکمهٔ «خروج»
     را به ردیفِ سوم می‌انداخت (نوار ۱۲۷ پیکسل می‌شد). با پایهٔ صفر، عنوان
     فقط باقی‌ماندهٔ ردیف را می‌گیرد و دکمه‌ها کنارِ هم می‌مانند. */
  .topbar h1 { flex: 1 1 0; min-width: 0; }
  .topbar-center {
    order: 99; flex: 1 1 100%; max-width: 100%;
    font-size: .74rem; text-align: center;
  }
}

/* ===== عکس‌های مرکز ===== */
.photo-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 560px) { .photo-slots { grid-template-columns: 1fr; } }

.photo-slot { display: flex; flex-direction: column; gap: .5rem; }
.ps-frame {
  aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  background: var(--bg); border: 1.5px dashed var(--line);
  display: grid; place-items: center;
}
.ps-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-empty {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--muted); font-size: .84rem; font-weight: 700;
}
.ps-empty svg { width: 1.15em; height: 1.15em; }
.ps-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.ps-actions form { display: inline; }

/* ⚠️ ورودیِ فایل باید *داخلِ* برچسب مهار شود.
   ‎input‎ سراسری ‎width: 100%‎ دارد؛ اگر این را ‎absolute‎ بگذاریم و برچسب
   ‎relative‎ نباشد، بلوکِ دربرگیرنده‌اش کلِ صفحه می‌شود و در ‎rtl‎ از لبهٔ چپ
   می‌زند بیرون — همان اشکالی که در کارت ویزیت ۲۵۹ پیکسل اسکرولِ افقیِ
   نامرئی ساخته بود. این‌جا از همان اول بسته شده. */
.ps-pick { position: relative; overflow: hidden; cursor: pointer; }
.ps-pick input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; margin: 0; border: 0;
}

/* عکس‌های مرکز روی صفحهٔ عمومی — با یک عکس تمامِ عرض، با دو تا نصف‌نصف */
.photo-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; }
.photo-shots img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line); display: block;
}

/* «نمایش بیشتر» در فهرست مراکز — کارتِ پنهان تا کاربر بخواهد */
.provider-card.cc-more-hidden { display: none; }

/* ---------------------------------------------------------------- کشویی‌ها
   پنجرهٔ بازشوی بومیِ ‎<select>‎ روی ویندوزِ تیره، پوسته را از سیستم‌عامل
   می‌گیرد و CSS صفحه را نادیده می‌گیرد؛ گزینه‌ها سفیدِ روی سفید می‌شدند.
   ‎dropdown.js‎ به‌جایش یک فهرستِ HTMLی می‌سازد — این‌ها پوستهٔ آن است.
   خودِ ‎<select>‎ در DOM می‌ماند (فرم و ‎name‎ و کدهای موجود دست‌نخورده)
   ولی دیده نمی‌شود. */
.dd { position: relative; }
.dd > select {
  position: absolute; opacity: 0; pointer-events: none;
  width: 100%; height: 100%; inset: 0;
}
.dd-btn {
  width: 100%; text-align: right; cursor: pointer;
  background: #fff; color: #1c222b;
  border: 1px solid var(--line); border-radius: 10px;
  padding: .55rem .8rem; font: inherit;
}
.dd-btn::after { content: "⌄"; float: left; opacity: .6; }
.dd-panel {
  display: none; position: absolute; z-index: 50; inset-inline: 0; top: calc(100% + 4px);
  max-height: 16rem; overflow-y: auto;
  background: #fff; color: #1c222b;
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.dd.open .dd-panel { display: block; }
.dd-item { padding: .5rem .8rem; cursor: pointer; }
.dd-item:hover, .dd-item.on { background: #eef3f8; }

/* ---------------------------------------------------------------- کیف پول */
/* موجودیِ کیف پول در صفحهٔ اصلی — یک کارتِ کلیک‌شدنی و خوانا */
.wallet-mini { display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; }
.wallet-mini .wm-ic { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center;
  border-radius:12px; background:var(--brand-soft, #e8f5ee); color:var(--brand, #2f9e68); }
.wallet-mini .wm-ic svg { width:22px; height:22px; }
.wallet-mini .wm-body { display:flex; flex-direction:column; line-height:1.35; }
.wallet-mini .wm-k { font-size:.8rem; color:var(--muted); }
.wallet-mini .wm-v { font-size:1.15rem; font-weight:800; }
.wallet-mini .wm-sub { margin-inline-start:auto; font-size:.78rem; color:var(--muted);
  background:var(--line-soft, #f1f5f9); padding:.3rem .6rem; border-radius:999px; white-space:nowrap; }
.wallet-mini .wm-sub.on { color:var(--brand, #2f9e68); background:var(--brand-soft, #e8f5ee); }

/* کارتِ بزرگِ موجودی در صفحهٔ کیف پول */
.wallet-hero { border-radius:18px; padding:20px 22px; color:#fff;
  background:linear-gradient(135deg,#2f9e68,#0f8a86); box-shadow:0 8px 24px rgba(15,138,134,.25); }
.wallet-hero .wh-top { display:flex; justify-content:space-between; align-items:center;
  font-size:.85rem; opacity:.92; }
.wallet-hero .wh-top svg { width:18px; height:18px; vertical-align:-3px; }
.wallet-hero .wh-phone { opacity:.8; }
.wallet-hero .wh-amount { font-size:2rem; font-weight:800; margin:.4rem 0 .5rem; letter-spacing:.2px; }
.wallet-hero .wh-sub { font-size:.85rem; opacity:.95; }
.wallet-hero .wh-sub svg { width:16px; height:16px; vertical-align:-3px; }

/* چیپ‌های مبلغِ شارژ */
.amount-chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.amount-chips .chip-btn { border:1px solid var(--line); background:#fff; color:inherit;
  border-radius:999px; padding:.45rem .9rem; cursor:pointer; font-size:.9rem; }
.amount-chips .chip-btn:hover { border-color:var(--brand,#2f9e68); }
.amount-chips .chip-btn.on { background:var(--brand,#2f9e68); color:#fff; border-color:var(--brand,#2f9e68); }

/* مبلغِ اشتراک */
.sub-price { display:flex; justify-content:space-between; align-items:center;
  background:var(--line-soft,#f1f5f9); border-radius:12px; padding:.7rem 1rem; margin-top:.4rem; }
.sub-price .sp-k { color:var(--muted); font-size:.9rem; }
.sub-price .sp-v { font-weight:800; font-size:1.1rem; }

/* توضیحِ کاربردِ هر کارت — بالای صفحهٔ کارت، غیرِ چاپی */
.card-purpose {
  max-width: 520px; margin: .5rem auto 0; padding: .75rem 1rem;
  background: var(--brand-soft, #e8f5ee); border: 1px solid var(--line);
  border-radius: 12px; font-size: .85rem; line-height: 1.9; color: var(--ink, #14171b);
}
.card-purpose b { display: block; margin-bottom: .15rem; }
.card-purpose b svg { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------------------------------------------------------------- پذیرش */
.reception-card .rc-line { font-size: .85rem; margin: .3rem 0; color: var(--ink, #14171b); }
.reception-card .rc-line svg { width: 15px; height: 15px; vertical-align: -3px; opacity: .7; }
.reception-card .rc-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem;
  border-top: 1px solid var(--line); padding-top: .7rem; }
.reception-card .rc-act { flex: 1 1 auto; }
.reception-card .rc-act > summary { list-style: none; cursor: pointer; width: 100%; text-align: center; }
.reception-card .rc-act > summary::-webkit-details-marker { display: none; }
.reception-card .rc-form { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.reception-card .rc-form input { flex: 1 1 140px; }

/* لیست پذیرش‌ها — موبایل: کارت؛ دسکتاپ: ردیفی */
.reception-list { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (min-width: 760px) {
  .reception-list { grid-template-columns: 1fr; }
  .reception-list .reception-card { display: flex; align-items: flex-start; gap: 1.2rem; }
  .reception-list .rc-main { flex: 1 1 auto; min-width: 0; }
  .reception-list .rc-side { flex: 0 0 auto; width: 340px; display: flex; flex-direction: column; gap: .5rem; }
  .reception-list .rc-side .rc-actions { margin-top: 0; border-top: 0; padding-top: 0; }
}

/* ═══════════ پروندهٔ خودرو (دیتیل) — مرکزِ همه‌کاره ═══════════ */

/* سربرگِ خودرو: پلاک، نام و کارهای اصلی، در یک قابِ چشم‌نواز */
.veh-hero {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--surface) 60%, var(--brand-soft) 140%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.veh-hero-plate { flex: 0 0 auto; }
.veh-hero-main { flex: 1 1 240px; min-width: 0; }
.veh-hero-main h1 { font-size: 1.3rem; font-weight: 800; margin: 0 0 .4rem; display: flex; align-items: center; gap: .4rem; }
.veh-hero-main h1 svg { color: var(--brand-ink); }
.veh-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .84rem; color: var(--muted); }
.veh-hero-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.veh-hero-meta svg { width: 15px; height: 15px; opacity: .75; }
.veh-hero-meta b { color: var(--ink); }
.veh-hero-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }

/* پنلِ پیگیریِ پذیرش داخلِ پرونده */
.reception-panel .rec-facts { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .85rem; color: var(--muted); margin: .5rem 0; }
.reception-panel .rec-facts span { display: inline-flex; align-items: center; gap: .3rem; }
.reception-panel .rec-facts svg { width: 15px; height: 15px; opacity: .7; }
.reception-panel .rec-facts b { color: var(--ink); }
.reception-panel .rec-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .7rem 0; padding: .6rem .8rem; background: var(--bg); border-radius: 11px; }
.reception-panel .sms-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .9rem; }
.reception-panel .sms-head svg { width: 17px; height: 17px; color: var(--brand-ink); }
.reception-panel .rc-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.reception-panel .rc-act { flex: 1 1 200px; }
.reception-panel .rc-act > summary { list-style: none; cursor: pointer; width: 100%; text-align: center; }
.reception-panel .rc-act > summary::-webkit-details-marker { display: none; }
.reception-panel .rc-form { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.reception-panel .rc-form input { flex: 1 1 140px; }
.reception-panel.none .rec-none { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .9rem; }
.reception-panel.none .rec-none span { display: inline-flex; align-items: center; gap: .4rem; }

/* یادداشت‌ها */
.note-add textarea { resize: vertical; min-height: 2.6rem; }
.note-list { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.note-item { background: var(--warn-soft); border: 1px solid #f0e2c2; border-radius: 12px; padding: .6rem .8rem; }
.note-item p { margin: 0 0 .35rem; white-space: pre-line; line-height: 1.7; }
.note-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .74rem; color: var(--muted); }
.note-foot span { display: inline-flex; align-items: center; gap: .3rem; }
.note-foot svg { width: 13px; height: 13px; opacity: .7; }
.link-danger { background: none; border: 0; cursor: pointer; color: var(--danger); font: inherit; font-size: .74rem; padding: 0; }
.link-danger:hover { text-decoration: underline; }

/* ---------- سرویس‌های مرکز در صفحهٔ عمومی (ابرِ چیپ) ---------- */
.svc-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.svc-chip { background: var(--brand-soft); color: var(--brand-ink); border: 1px solid #d3ecdd;
  border-radius: 999px; padding: .3rem .72rem; font-size: .8rem; font-weight: 500; white-space: nowrap; }
.svc-more { margin-top: .55rem; }
.svc-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
  color: var(--brand-ink); font-size: .84rem; font-weight: 700; padding: .1rem 0; }
.svc-more > summary::-webkit-details-marker { display: none; }
.svc-more > summary::before { content: "▾"; font-size: .8rem; transition: transform .15s; }
.svc-more[open] > summary::before { transform: rotate(180deg); }
.svc-head { display: flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; }
.svc-head .chip { font-weight: 700; }

/* ---------- گام‌شمارِ کمپین (فیلتر → متن → تأیید) ---------- */
.camp-steps { display: flex; align-items: center; justify-content: center; gap: .3rem;
  margin: .2rem 0 1.3rem; flex-wrap: wrap; }
.camp-step { display: inline-flex; align-items: center; gap: .5rem; }
.camp-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; background: var(--field); color: var(--muted);
  border: 2px solid var(--field-line); flex: none; }
.camp-step.now .camp-num { background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft); }
.camp-step.done .camp-num { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand); }
.camp-lbl { font-size: .9rem; font-weight: 600; color: var(--muted); }
.camp-step.now .camp-lbl { color: var(--brand-ink); }
.camp-step.done .camp-lbl { color: var(--ink); }
.camp-conn { width: 34px; height: 2px; background: var(--field-line); border-radius: 2px; }
.camp-conn.done { background: var(--brand); }
@media (max-width: 560px) {
  .camp-lbl { display: none; }
  .camp-conn { width: 18px; }
}

/* ---------- سرتیترِ بخش در پرونده‌ها (اطلاعات / مدیریت) ---------- */
.sec-h { margin: 1.5rem 0 .7rem; font-size: 1.05rem; color: var(--brand-ink);
  border-bottom: 2px solid var(--brand-soft); padding-bottom: .35rem;
  display: flex; align-items: center; gap: .4rem; }
.sec-h svg { width: 18px; height: 18px; }

/* ---------- آگاه‌سازیِ GPS (کیلومترشمار خودکار) ---------- */
/* حالتِ پیش‌فرض «هنوز روشن نیست» است و کهربایی می‌ماند تا چشم بگیرد؛ حالتِ
   ‎.on‎ سبزِ آرام می‌شود چون دیگر هشدار نیست، فقط یادآوریِ نگه‌داشتن. */
.gps-note { display: flex; gap: .75rem; margin-top: .9rem; padding: .85rem .9rem;
  border-radius: 14px; background: var(--warn-soft); border: 1px solid #f0e2c2; }
.gps-note.on { background: var(--ok-soft); border-color: #cbe9d6; }
.gps-note-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--warn); color: #fff; }
.gps-note.on .gps-note-ico { background: var(--ok); }
.gps-note-ico svg { width: 19px; height: 19px; }
.gps-note-body { min-width: 0; }
.gps-note-body > b { display: block; font-size: .96rem; }
.gps-note-body p { margin: .25rem 0 .5rem; font-size: .85rem; line-height: 1.7; color: var(--ink); }
.gps-note .btn { margin-bottom: .5rem; }
.gps-tips { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.gps-tips li { display: flex; align-items: flex-start; gap: .4rem; font-size: .78rem; color: var(--muted); line-height: 1.65; }
.gps-tips svg { flex: none; width: 14px; height: 14px; margin-top: .28rem; color: var(--ok); }

@media (max-width: 560px) {
  .veh-hero-actions { flex-direction: row; width: 100%; }
  .veh-hero-actions .btn { flex: 1; }
}

/* ═══════════ داشبوردِ مرکز ═══════════ */
.dash-h { font-size: 1.05rem; font-weight: 800; margin: 1.2rem 0 .6rem; display: flex; align-items: center; gap: .4rem; }
.dash-h svg { color: var(--brand-ink); width: 18px; height: 18px; }

/* دسترسیِ سریع */
.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.quick-link {
  display: flex; align-items: center; gap: .55rem; padding: .7rem .85rem;
  border: 1px solid var(--line); border-radius: 13px; background: var(--bg);
  color: var(--ink); font-weight: 700; font-size: .9rem; transition: border-color .15s, transform .15s;
}
.quick-link:hover { border-color: var(--brand); transform: translateY(-1px); }
.quick-link .ql-i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand-ink); flex: 0 0 auto; }
.quick-link .ql-i svg { width: 18px; height: 18px; }

/* نمودارِ ستونیِ درآمد — بدونِ کتابخانه، فقط CSS */
.chart { display: flex; align-items: flex-end; gap: .4rem; height: 200px; padding-top: 1.4rem; overflow-x: auto; }
.chart-col { flex: 1 1 0; min-width: 26px; display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; }
.chart-barwrap { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.chart-bar {
  width: 68%; max-width: 34px; min-height: 3px; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  transition: filter .15s;
}
.chart-col:hover .chart-bar { filter: brightness(1.12); }
.chart-val { font-size: .6rem; color: var(--muted); font-weight: 700; white-space: nowrap; margin-bottom: .15rem; }
.chart-x { font-size: .72rem; color: var(--muted); font-weight: 700; }

/* ═══════════ کادرِ لیستِ به‌هم‌پیوسته (فیلتر + فهرست یک‌جا) ═══════════ */
.list-card { padding: 0; overflow: hidden; }
.list-head { padding: 1rem 1.1rem .85rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--brand-soft) -40%, var(--surface) 70%); }
.list-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.list-toolbar input, .list-toolbar select { margin: 0; height: 40px; }
.list-toolbar .lt-search { flex: 3 1 220px; }
.list-toolbar .lt-date { flex: 1 1 120px; min-width: 110px; text-align: center; }
.list-toolbar .lt-stage { flex: 1 1 140px; min-width: 130px; }
.list-toolbar .btn { height: 40px; }

/* درونِ کادرِ لیست، هر پذیرش یک ردیفِ به‌هم‌پیوسته است — نه کارتی جدا. */
.list-card .reception-list { display: flex; flex-direction: column; gap: 0; grid-template-columns: none; padding: 0; }
.list-card .reception-card { background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--line); padding: 1rem 1.1rem; transition: background .12s; }
.list-card .reception-card:hover { background: #f4f6fb; background: color-mix(in srgb, var(--brand-soft) 40%, transparent); }
.list-card .reception-card:last-child { border-bottom: 0; }
.list-card .empty { padding: 2.5rem 1rem; }
@media (min-width: 760px) {
  .list-card .reception-list { grid-template-columns: none; }
  .list-card .reception-card { display: flex; align-items: flex-start; gap: 1.4rem; }
  .list-card .rc-main { flex: 1 1 auto; min-width: 0; }
  .list-card .rc-side { flex: 0 0 320px; display: flex; flex-direction: column; gap: .5rem; }
}

/* فرمِ پذیرش، درونِ همان کادر (زیرِ جست‌وجو) */
.list-card .intake { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.list-card .intake > summary { padding: 0; }

/* فهرست پذیرش‌ها: دسکتاپ = ردیفِ جدولیِ فشرده؛ موبایل = کارت */
.reception-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.reception-table thead th {
  text-align: right; font-size: .74rem; color: var(--muted); font-weight: 700;
  padding: .5rem .9rem; border-bottom: 1.5px solid var(--line); white-space: nowrap;
}
.reception-table td { padding: .5rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.reception-table tbody tr:last-child td { border-bottom: 0; }
.reception-table tbody tr:hover td { background: #f4f6fb; background: color-mix(in srgb, var(--brand-soft) 35%, transparent); }
.reception-table td b { font-weight: 700; }
.reception-table .sub { font-size: .73rem; color: var(--muted); margin-top: .1rem; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reception-table td.nowrap { white-space: nowrap; color: var(--muted); font-size: .8rem; }
.reception-table td.rc-action-cell { text-align: left; white-space: nowrap; width: 1%; }
.reception-table .rc-act > summary { list-style: none; cursor: pointer; }
.reception-table .rc-act > summary::-webkit-details-marker { display: none; }
.reception-table .rc-pop { position: relative; display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; min-width: 220px; }
.reception-table .rc-pop .rc-form { display: flex; gap: .35rem; }
.reception-table .rc-pop .rc-form input { flex: 1; }
/* فرمِ ویرایشِ درونِ کشو (ویرایش خدمت) — ورودی‌ها زیرِ هم */
.rc-pop form { display: flex; flex-direction: column; gap: .4rem; margin-top: .3rem; }

@media (max-width: 759px) {
  .reception-table thead { display: none; }
  .reception-table, .reception-table tbody, .reception-table tr, .reception-table td { display: block; width: auto; }
  .reception-table tr { border: 1px solid var(--line); border-radius: 12px; margin: .7rem 1rem; padding: .35rem .2rem; background: var(--surface); }
  .reception-table td { border: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .3rem .9rem; }
  .reception-table td .sub { max-width: none; white-space: normal; text-align: left; }
  .reception-table td::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: .76rem; flex: 0 0 auto; }
  .reception-table td.rc-action-cell { justify-content: flex-start; }
  .reception-table td.rc-action-cell::before { content: ''; }
}

/* کشوی وضعیت — مثل یک چیپِ رنگی که باز می‌شود */
.stage-form { margin: 0; display: inline-block; max-width: 100%; }
.stage-select {
  font-size: .8rem; font-weight: 700; width: auto; height: auto; max-width: 100%;
  padding: .38rem 1.7rem .38rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(25,28,33,.08);
  appearance: none; -webkit-appearance: none;
  background-color: #eef0f6;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%236b7285' stroke-width='1.6' stroke-linecap='round'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: left .6rem center;
}
.stage-select:focus { box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.stage-select.chip-warn { background-color: var(--warn-soft); color: var(--warn); }
.stage-select.chip-accent { background-color: var(--accent-soft); color: var(--accent); }
.stage-select.chip-ok { background-color: var(--ok-soft); color: var(--ok); }
.stage-select.chip-brand { background-color: var(--brand-soft); color: var(--brand-ink); }

/* منویِ عملیاتِ ردیفِ پذیرش — کشویی، آیتم‌ها زیرِ هم و تمام‌عرض */
.reception-table .ops-pop { min-width: 210px; }
.reception-table .ops-pop > a,
.reception-table .ops-pop > .rc-act,
.reception-table .ops-pop > form { width: 100%; }
.reception-table .ops-pop > a,
.reception-table .ops-pop > .rc-act > summary,
.reception-table .ops-pop > form > button { width: 100%; text-align: center; box-sizing: border-box; }
.reception-table .ops-pop .rc-pop { min-width: 0; }

/* سازندهٔ قالبِ یادآوری */
.param-btns { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.param-chip { cursor: pointer; border: 1px dashed var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.param-chip:hover { background: #fff; }
.tpl-preview { background: var(--warn-soft); border: 1px solid #f0e2c2; border-radius: 12px; padding: .6rem .8rem; }
.tpl-preview #tplPreview { white-space: pre-line; line-height: 1.7; color: var(--ink); margin-top: .25rem; }

/* یادآوری‌ها روی پروندهٔ خودرو */
.reminder-add { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.reminder-add input[name="note"] { flex: 3 1 220px; }
.reminder-add input[name="when"] { flex: 1 1 130px; }
.reminder-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.reminder-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); }
.reminder-item.due { border-color: #f0d9a8; background: var(--warn-soft); }
.reminder-item .small { display: block; margin-top: .1rem; }
.link-muted { background: none; border: 0; cursor: pointer; color: var(--brand-ink); font: inherit; font-size: .78rem; padding: 0; white-space: nowrap; }
.link-muted:hover { text-decoration: underline; }

/* بلوکِ خودروهای یافته‌شده، درونِ همان کادرِ لیست */
.found-block { padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--brand-soft); }
.found-block .found-title { font-weight: 800; font-size: .9rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
.found-block.empty-hint { color: var(--muted); font-size: .88rem; }
.found-block table { background: var(--surface); border-radius: 10px; overflow: hidden; }

/* فرم‌های ثبت (پذیرش تازه / ثبت مشتری) — عنوان بدونِ فلش پیش‌فرض */
.intake > summary { list-style: none; }
.intake > summary::-webkit-details-marker { display: none; }
.intake > summary::before { content: "▾"; font-size: .8em; margin-left: .3rem; color: var(--muted); transition: transform .15s; display: inline-block; }
.intake:not([open]) > summary::before { transform: rotate(-90deg); }

/* نامِ منطقهٔ آزاد روی نوارِ آبیِ پلاک — جای کدِ استان را می‌گیرد، چون
   پلاکِ منطقهٔ آزاد اصلاً کدِ استان ندارد. */
.plate-box .p-zone {
  font-size: 7.5px; font-weight: 900; letter-spacing: .4px; line-height: 1;
  max-width: 68px; text-align: center; overflow: hidden; text-overflow: ellipsis;
}
.plate-box .p-zone[hidden] { display: none; }
/* پلاکِ منطقهٔ آزاد مرزِ مشکی دارد، نه آبی. */
.plate-box[data-pt="free"] { border-color: #111; }
.plate-box[data-pt="free"] .p-strip { background: #111; }