/* ==========================================================================
   VENDORHA — فرم‌های پنل مدیریت
   --------------------------------------------------------------------------
   ⚠️ پیشوند `pf-` یکتاست.

   پیشوند `sc-` از قبل برای بخش دیگری استفاده می‌شد و قواعد
   روی هم می‌افتادند — عرض فرم به ۶۳ پیکسل می‌رسید.

   یک سامانهٔ واحد برای همهٔ فرم‌های پنل: ویترین، خروج کالا،
   کشورها.
   ========================================================================== */

/* ==========================================================================
   چیدمان صفحه
   --------------------------------------------------------------------------
   ⚠️ در دسکتاپ عرض کامل، فقط با سقف خوانایی.

   فرم باریک در صفحهٔ بزرگ فضا را هدر می‌دهد و کاربر باید
   بی‌جهت اسکرول کند.
   ========================================================================== */
.pf-wrap {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}

.pf-head {
  display: flex; align-items: flex-start; gap: 16px;
  justify-content: space-between; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.pf-head h1 {
  margin: 0 0 4px; font-size: 1.35rem; font-weight: 800;
  letter-spacing: -.01em;
}
.pf-head p {
  margin: 0; font-size: .84rem; color: var(--slate);
  line-height: 1.9;
}
.pf-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   کارت بخش
   ========================================================================== */
.pf-card {
  margin-bottom: 16px; padding: 20px 22px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.pf-card-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 13px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.pf-card-head h2 {
  margin: 0; font-size: .95rem; font-weight: 800;
  color: var(--ink);
}
.pf-card-ico {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 9px; font-size: .95rem;
  background: var(--green-100);
}
.pf-card-note {
  margin: -6px 0 16px; font-size: .78rem;
  color: var(--slate); line-height: 1.95;
}

/* ==========================================================================
   شبکهٔ فیلدها
   --------------------------------------------------------------------------
   ⚠️ `grid` نه `flex`.

   با `flex` فیلدها اندازه‌های ناهماهنگ می‌گیرند و ستون‌ها
   به هم نمی‌خورند.
   ========================================================================== */
.pf-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.pf-grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* فیلدی که تمام عرض می‌گیرد */
.pf-full { grid-column: 1 / -1; }

/* ---- فیلد ---- */
.pf-field { display: block; min-width: 0; }

.pf-field > span {
  display: block; margin-bottom: 6px;
  font-size: .79rem; font-weight: 700; color: var(--ink-soft);
}
.pf-field > span b {
  color: var(--danger-text); margin-inline-start: 2px;
}

.pf-field input[type="text"],
.pf-field input[type="tel"],
.pf-field input[type="url"],
.pf-field input[type="email"],
.pf-field input[type="number"],
.pf-field input[type="search"],
.pf-field select,
.pf-field textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: .88rem;
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pf-field input:focus,
.pf-field select:focus,
.pf-field textarea:focus {
  outline: none;
  border-color: var(--green-btn);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--green-btn) 14%, transparent);
}

.pf-field textarea { resize: vertical; min-height: 68px; }

.pf-field input[type="file"] {
  width: 100%; font-size: .82rem;
  padding: 9px; border-radius: 10px;
  background: var(--bg-subtle);
  border: 1px dashed var(--line);
}

.pf-hint {
  display: block; margin-top: 5px;
  font-size: .72rem; color: var(--slate); line-height: 1.75;
}

/* ---- تیک ---- */
.pf-checks {
  display: grid; gap: 9px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.pf-check {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; cursor: pointer;
  border-radius: 11px; font-size: .84rem;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.pf-check:hover { border-color: var(--line); }
.pf-check:has(input:checked) {
  background: var(--green-100);
  border-color: var(--green-btn);
}
.pf-check input {
  width: 17px; height: 17px; flex: none; cursor: pointer;
  accent-color: var(--green-btn);
}

/* ==========================================================================
   دکمه‌ها
   --------------------------------------------------------------------------
   ⚠️ نوار چسبان پایین.

   فرم بلند است؛ بدون این کاربر باید تا ته اسکرول کند تا
   ذخیره را ببیند.
   ========================================================================== */
.pf-acts {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; gap: 9px; flex-wrap: wrap;
  padding: 14px 0; margin-top: 4px;
  background: linear-gradient(to top,
    var(--bg) 72%, transparent);
}
.pf-acts .btn { min-width: 120px; }

.pf-danger {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
.pf-danger button {
  padding: 9px 18px; cursor: pointer;
  border-radius: 10px; font: inherit; font-size: .82rem;
  border: 1px solid var(--danger-text);
  background: transparent; color: var(--danger-text);
  transition: background .15s ease;
}
.pf-danger button:hover { background: var(--danger-bg); }

/* ==========================================================================
   راهنما و پیام
   ========================================================================== */
.pf-guide {
  padding: 15px 19px; margin-bottom: 18px;
  border-radius: 14px; font-size: .82rem; line-height: 2;
  background: var(--info-bg); color: var(--info-text);
}
.pf-guide b { display: block; margin-bottom: 7px; }
.pf-guide ol, .pf-guide ul {
  margin: 8px 0 0; padding-inline-start: 20px;
}
.pf-guide p { margin: 9px 0 0; }

.pf-msg {
  margin: 0 0 14px; padding: 11px 15px;
  border-radius: 11px; font-size: .84rem; font-weight: 700;
}
.pf-msg.is-ok {
  background: var(--success-bg); color: var(--success-text);
}
.pf-msg.is-bad {
  background: var(--danger-bg); color: var(--danger-text);
}

/* پیش‌نمایش تصویر */
.pf-preview {
  margin-top: 9px; max-width: 120px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* ==========================================================================
   موبایل
   --------------------------------------------------------------------------
   ⚠️ محدودیت عرض فقط اینجا — در دسکتاپ فرم تمام عرض دارد.
   ========================================================================== */
@media (max-width: 768px) {
  .pf-head { flex-direction: column; gap: 12px; }
  .pf-head h1 { font-size: 1.15rem; }
  .pf-head-acts { width: 100%; }
  .pf-head-acts .btn { flex: 1; }

  .pf-card { padding: 15px 16px; border-radius: 13px; }

  .pf-grid,
  .pf-grid-2 { grid-template-columns: 1fr; gap: 12px; }

  .pf-checks { grid-template-columns: 1fr; }

  .pf-acts { padding: 12px 0; }
  .pf-acts .btn { flex: 1; min-width: 0; }
}

/* ==========================================================================
   پنل سئو
   ========================================================================== */
.seo-score {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 24px; margin-bottom: 18px;
  border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
}

.seo-ring {
  display: grid; place-items: center; flex: none;
  width: 92px; height: 92px; border-radius: 50%;
  background: color-mix(in srgb, var(--sc) 12%, transparent);
  border: 3px solid var(--sc);
}
.seo-num {
  font-size: 1.8rem; font-weight: 900; color: var(--sc);
  line-height: 1;
}
.seo-ring small { font-size: .64rem; color: var(--slate); }

.seo-score-txt b {
  display: block; font-size: 1.1rem; color: var(--sc);
  margin-bottom: 4px;
}
.seo-score-txt p {
  margin: 0; font-size: .85rem; color: var(--slate);
}

.seo-stats {
  display: grid; gap: 10px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.seo-stats > * {
  padding: 14px 16px; border-radius: 12px; text-align: center;
  background: var(--bg-subtle); text-decoration: none;
  color: var(--ink); border: 1px solid transparent;
}
.seo-stats a:hover { border-color: var(--green-btn); }
.seo-stats span {
  display: block; font-size: .73rem; color: var(--slate);
  margin-bottom: 4px;
}
.seo-stats b { font-size: 1.3rem; }
.seo-stats .is-warn { background: var(--warn-bg); }
.seo-stats .is-warn b { color: var(--warn-text); }

.seo-sub { font-size: 1rem; margin: 0 0 12px; }

.seo-checks { display: grid; gap: 10px; }

.seo-check {
  padding: 14px 17px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--slate);
}
.seo-check.is-critical { border-inline-start-color: #B91C1C; }
.seo-check.is-warning { border-inline-start-color: #B45309; }
.seo-check.is-info { border-inline-start-color: #2563EB; }

.seo-check-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 7px;
}
.seo-check-head b { font-size: .92rem; }

.seo-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--slate);
}
.is-critical .seo-dot { background: #B91C1C; }
.is-warning .seo-dot { background: #B45309; }
.is-info .seo-dot { background: #2563EB; }

.seo-why {
  margin: 0 0 6px; font-size: .82rem; line-height: 1.95;
  color: var(--slate);
}
.seo-fix {
  margin: 0 0 10px; font-size: .82rem; font-weight: 600;
  color: var(--green-text-soft);
}

.seo-ok {
  padding: 20px; text-align: center; border-radius: 12px;
  background: var(--success-bg); color: var(--success-text);
  font-weight: 700;
}

.seo-warn {
  padding: 11px 15px; border-radius: 10px;
  font-size: .82rem; line-height: 1.9;
  background: var(--warn-bg); color: var(--warn-text);
}

.seo-badge {
  padding: 2px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 700;
}
.seo-badge.is-ok {
  background: var(--success-bg); color: var(--success-text);
}
.seo-badge.is-warn {
  background: var(--warn-bg); color: var(--warn-text);
}

/* ---- آزمون زنده ---- */
.seo-test { display: flex; gap: 8px; margin-bottom: 14px; }
.seo-test input {
  flex: 1; font: inherit; font-size: .88rem;
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}

.seo-result { margin-top: 14px; }

/* پیش‌نمایش نتیجهٔ گوگل */
.serp {
  padding: 14px 16px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line);
  direction: rtl; text-align: start;
}
.serp-url {
  font-size: .76rem; color: #202124; direction: ltr;
  text-align: start; margin-bottom: 3px;
}
.serp-title {
  font-size: 1.1rem; color: #1a0dab; line-height: 1.5;
  margin-bottom: 3px;
}
.serp-desc {
  font-size: .84rem; color: #4d5156; line-height: 1.8;
}

.seo-lens {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; font-size: .76rem; color: var(--slate);
}

.seo-notes {
  margin: 10px 0 0; padding: 11px 15px 11px 30px;
  border-radius: 9px; font-size: .8rem; line-height: 1.95;
  background: var(--warn-bg); color: var(--warn-text);
}

.seo-bad {
  padding: 11px 15px; border-radius: 9px;
  background: var(--danger-bg); color: var(--danger-text);
}

.nf-fix { display: flex; gap: 5px; }
.nf-fix input {
  width: 110px; font: inherit; font-size: .78rem;
  padding: 5px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}

@media (max-width: 640px) {
  .seo-score { flex-direction: column; text-align: center; }
  .seo-stats { grid-template-columns: repeat(2, 1fr); }
  .nf-fix input { width: 80px; }
}

/* ==========================================================================
   گزارش‌ساز
   ========================================================================== */
.rb-totals {
  display: grid; gap: 10px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.rb-t {
  padding: 14px 16px; border-radius: 13px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
}
.rb-t.is-main {
  background: var(--green-100);
  border-color: var(--green-btn);
}

.rb-t span {
  display: block; font-size: .73rem; color: var(--slate);
  margin-bottom: 5px;
}
.rb-t b {
  display: block; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.rb-t.is-main b { color: var(--green-text-soft); }
.rb-t small {
  display: block; margin-top: 3px;
  font-size: .67rem; color: var(--slate);
}

/* وضعیت‌ها — تراشه‌ای */
.rb-states {
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.rb-states-lbl {
  font-size: .78rem; font-weight: 700; color: var(--slate);
}

.rb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; cursor: pointer;
  border-radius: 999px; font-size: .8rem;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
.rb-chip:has(input:checked) {
  background: var(--green-100);
  border-color: var(--green-btn);
  color: var(--green-text-soft);
  font-weight: 700;
}
.rb-chip input {
  width: 15px; height: 15px; cursor: pointer;
  accent-color: var(--green-btn);
}

@media (max-width: 640px) {
  .rb-totals { grid-template-columns: repeat(2, 1fr); }
  .rb-t { padding: 11px 13px; }
  .rb-t b { font-size: .92rem; }
  .rb-states { gap: 6px; }
  .rb-chip { font-size: .74rem; padding: 5px 10px; }
}

/* ==========================================================================
   تنظیمات موتور ترجمه
   ========================================================================== */
.tr-alert {
  padding: 12px 16px; margin-bottom: 14px;
  border-radius: 11px; font-size: .85rem; font-weight: 600;
}
.tr-alert.is-ok {
  background: var(--success-bg); color: var(--success-text);
}
.tr-alert.is-bad {
  background: var(--danger-bg); color: var(--danger-text);
}
.tr-alert.is-off {
  background: var(--bg-subtle); color: var(--slate);
}

.tr-last {
  margin-bottom: 16px; font-size: .78rem; color: var(--slate);
}
.tr-last .is-ok { color: var(--success-text); }
.tr-last .is-bad { color: var(--danger-text); }

.tr-test {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.tr-test input {
  flex: 1; min-width: 180px;
  font: inherit; font-size: .88rem;
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}
.tr-test select {
  font: inherit; font-size: .86rem;
  padding: 10px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink);
}

.tr-result {
  padding: 12px 15px; border-radius: 10px;
  font-size: .87rem; line-height: 1.9;
  background: var(--bg-subtle); color: var(--slate);
}
.tr-result.is-ok {
  background: var(--success-bg); color: var(--success-text);
  font-weight: 600;
}
.tr-result.is-bad {
  background: var(--danger-bg); color: var(--danger-text);
}

@media (max-width: 640px) {
  .tr-test { flex-direction: column; }
  .tr-test input, .tr-test select, .tr-test .btn { width: 100%; }
}


/* ==========================================================================
   انتخاب زمان تحویل — صندوق
   ========================================================================== */
.dt-card[hidden] { display: none; }

.dt-days {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin: 12px 0;
}

.dt-day {
  padding: 9px 14px; cursor: pointer;
  border-radius: 10px; font: inherit; font-size: .82rem;
  background: var(--bg-subtle);
  border: 1px solid transparent; color: var(--ink);
  transition: background .15s ease, border-color .15s ease;
}
.dt-day:hover { border-color: var(--line); }
.dt-day.is-on {
  background: var(--green-100);
  border-color: var(--green-btn);
  color: var(--green-text-soft); font-weight: 700;
}

.dt-slots { margin-top: 4px; }
.dt-slots-label {
  display: block; font-size: .76rem; color: var(--slate);
  margin-bottom: 7px;
}

.dt-slots-list {
  display: flex; gap: 7px; flex-wrap: wrap;
}

.dt-slot {
  padding: 8px 15px; cursor: pointer;
  border-radius: 999px; font: inherit; font-size: .8rem;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--line); color: var(--ink);
}
.dt-slot.is-on {
  /* سبز تیره‌تر — نسبت ۵.۴ با سفید */
  background: #15803D; color: #fff;
  border-color: var(--green-btn); font-weight: 700;
}

.dt-note {
  display: grid; gap: 5px; margin-top: 14px;
  font-size: .78rem; color: var(--slate);
}
.dt-note input {
  font: inherit; font-size: .84rem;
  padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}

.dt-picked {
  margin-top: 12px; padding: 10px 14px;
  border-radius: 9px; font-size: .84rem; font-weight: 700;
  background: var(--success-bg); color: var(--success-text);
}

@media (max-width: 640px) {
  /* ⚠️ `.sc-week` اینجا نیست — در بلوک زمان‌بندی است */
  .dt-days, .dt-slots-list { gap: 6px; }
  .dt-day, .dt-slot { font-size: .78rem; padding: 8px 12px; }
}

/* ==========================================================================
   زمان‌بندی ارسال — مدیریت
   --------------------------------------------------------------------------
   ⚠️ بازطراحی: فرم افزودن بازه به مودال منتقل شد.

   پیش‌تر درون ستون روز بود؛ ستون ۱۹۳ پیکسلی است و فیلدها روی
   هم می‌افتادند. باز کردن یک روز، چیدمان بقیه را هم به هم
   می‌ریخت.
   ========================================================================== */
.sc-new-head {
  cursor: pointer; font-weight: 700; font-size: .9rem;
  color: var(--green-text-soft);
}

.sc-count {
  margin-inline-start: auto; font-size: .78rem;
  color: var(--slate);
}
.sc-count .is-warn { color: var(--warn-text); }

.sc-off {
  padding: 2px 9px; border-radius: 999px; font-size: .7rem;
  background: var(--danger-bg); color: var(--danger-text);
}

/*
  هفت روز — دو ردیف چهارتایی در دسکتاپ.

  ⚠️ هفت ستون در یک ردیف یعنی هر کدام زیر ۲۰۰ پیکسل که برای
  نمایش بازه‌ها کم است.
*/
.sc-week {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(4, 1fr);
}

.sc-day {
  display: flex; flex-direction: column;
  padding: 12px; border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
  min-height: 118px;
}
.sc-day.is-empty {
  background: transparent;
  border-style: dashed; border-color: var(--line);
}

.sc-day-head {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 9px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.sc-day-head b { font-size: .84rem; }
.sc-day-head small {
  margin-inline-start: auto;
  font-size: .66rem; color: var(--slate);
}

.sc-slot {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; margin-bottom: 5px;
  border-radius: 9px; background: var(--surface);
  border: 1px solid var(--line);
}
.sc-slot.is-off { opacity: .48; }

.sc-slot-time {
  font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}

.sc-slot-meta {
  flex: 1; font-size: .64rem; color: var(--slate);
  line-height: 1.5;
}

.sc-slot-act { display: inline-flex; margin: 0; }
.sc-slot-act button {
  width: 21px; height: 21px; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 6px; font-size: .7rem;
  background: transparent; color: var(--slate);
}
.sc-slot-act button:hover { background: var(--bg-subtle); }
.sc-slot-act button.is-del:hover {
  background: var(--danger-bg); color: var(--danger-text);
}

/* دکمهٔ افزودن — همیشه پایین ستون */
.sc-add-btn {
  margin-top: auto; padding: 7px 10px; cursor: pointer;
  border-radius: 9px; font: inherit; font-size: .74rem;
  font-weight: 700;
  background: transparent; color: var(--green-text-soft);
  border: 1px dashed var(--green-btn);
  transition: background .15s ease;
}
.sc-add-btn:hover { background: var(--green-100); }

/* ==========================================================================
   مودال افزودن بازه
   ========================================================================== */
.sm {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.sm[hidden] { display: none; }

.sm-back {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(3px);
}

.sm-box {
  position: relative; z-index: 1;
  width: min(480px, 100%); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 22px 55px rgba(15, 23, 42, .3);
  animation: sm-in .18s ease;
}
@keyframes sm-in {
  from { opacity: 0; transform: translateY(12px); }
}

.sm-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; flex: none;
  border-bottom: 1px solid var(--line);
}
.sm-head b { flex: 1; font-size: .92rem; }

.sm-x {
  width: 29px; height: 29px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%; border: 0; font-size: .78rem;
  background: var(--bg-subtle); color: var(--slate);
}
.sm-x:hover {
  background: var(--danger-bg); color: var(--danger-text);
}

.sm-body { padding: 18px; overflow-y: auto; }

.sm-row {
  display: flex; gap: 10px; align-items: flex-end;
}
.sm-row-2 { margin-top: 16px; }
.sm-row-2 .sm-field { flex: 1; }

.sm-field { flex: 1; display: grid; gap: 5px; }
.sm-field > span {
  font-size: .77rem; font-weight: 600; color: var(--slate);
}
.sm-field input {
  font: inherit; font-size: .92rem;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
}
.sm-field input:focus {
  outline: none; border-color: var(--green-btn);
  background: var(--surface);
}
.sm-field small {
  font-size: .66rem; color: var(--slate); line-height: 1.6;
}

.sm-dash {
  padding-bottom: 12px; color: var(--slate); font-weight: 700;
}

/* بازه‌های آماده */
.sm-presets {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center; margin-top: 12px;
}
.sm-presets > span {
  width: 100%; font-size: .72rem; color: var(--slate);
  margin-bottom: 2px;
}
.sm-presets button {
  padding: 6px 13px; cursor: pointer;
  border-radius: 999px; font: inherit; font-size: .78rem;
  font-variant-numeric: tabular-nums;
  background: var(--bg-subtle); color: var(--ink-soft);
  border: 1px solid transparent;
}
.sm-presets button:hover {
  background: var(--green-100);
  border-color: var(--green-btn);
  color: var(--green-text-soft);
}

.sm-hint {
  margin-top: 14px; padding: 10px 13px;
  border-radius: 9px; font-size: .8rem; font-weight: 600;
}
.sm-hint.is-bad {
  background: var(--danger-bg); color: var(--danger-text);
}

.sm-foot {
  display: flex; gap: 8px; padding: 14px 18px; flex: none;
  border-top: 1px solid var(--line);
  background: var(--bg-subtle);
}

/* صف انتظار */
.ct-table tr.is-due { background: var(--warn-bg); }
.is-due-tag { color: var(--warn-text); }

@media (max-width: 1024px) {
  .sc-week { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .sc-week { grid-template-columns: 1fr; }
  .sc-day { min-height: auto; }
  .sm { padding: 0; }
  .sm-box {
    width: 100%; max-height: 100vh; height: 100vh;
    border-radius: 0;
  }
  .sm-row { flex-direction: column; align-items: stretch; }
  .sm-dash { display: none; }
  .sm-foot { flex-direction: column-reverse; }
  .sm-foot .btn { width: 100%; }
}

/* ==========================================================================
   ارسال فوری و مناطق جغرافیایی
   ========================================================================== */
.ex-method.is-off { opacity: .62; }

.ex-eta {
  margin-inline-start: auto;
  font-size: .78rem; color: var(--slate);
}

.ex-zones {
  display: grid; gap: 7px; margin: 12px 0;
}

.ex-zone {
  display: flex; align-items: baseline; gap: 11px;
  flex-wrap: wrap;
  padding: 10px 13px; border-radius: 10px;
  background: var(--bg-subtle); font-size: .82rem;
}
.ex-zone.is-off { opacity: .5; }
.ex-zone b { flex: none; }

.ex-zone-shape {
  font-size: .74rem; color: var(--slate);
}

.ex-zone-cost {
  margin-inline-start: auto; font-weight: 700;
  color: var(--green-text-soft);
}

.ex-zone small {
  width: 100%; font-size: .7rem; color: var(--slate);
}

.ex-warn {
  padding: 10px 14px; margin: 12px 0;
  border-radius: 9px; font-size: .79rem;
  background: var(--warn-bg); color: var(--warn-text);
}

.ex-acts {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.ex-acts form { margin: 0; }

/* ---- ویرایشگر نقشه ---- */
.ez-layout {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 380px;
  align-items: start;
}

.ez-map-wrap {
  border-radius: 14px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}

.ez-tools {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}

.ez-tool {
  padding: 8px 13px; cursor: pointer;
  border-radius: 9px; font: inherit; font-size: .79rem;
  background: var(--bg-subtle); color: var(--ink-soft);
  border: 1px solid transparent;
}
.ez-tool.is-on {
  background: #15803D; color: #fff;
  border-color: #15803D; font-weight: 700;
}
.ez-tool.ez-clear:hover {
  background: var(--danger-bg); color: var(--danger-text);
}

.ez-hint {
  margin: 0; padding: 9px 14px;
  font-size: .78rem; color: var(--slate);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
}

/*
  ⚠️ ارتفاع ثابت نه `aspect-ratio`.

  نقشه با نسبت تصویر روی صفحه‌های باریک بیش از حد کوتاه
  می‌شود و ترسیم غیرممکن است.
*/
.ez-map {
  height: 540px; width: 100%;
  background: var(--bg-subtle);
}

.ez-side > .pf-card { margin: 0; }

.ez-shape-note {
  margin-top: 11px; padding: 10px 13px;
  border-radius: 9px; font-size: .78rem;
  background: var(--bg-subtle); color: var(--slate);
}

.ez-err {
  margin: 11px 0 0; padding: 10px 13px;
  border-radius: 9px; font-size: .79rem; font-weight: 600;
  background: var(--danger-bg); color: var(--danger-text);
}

.ez-list { display: grid; gap: 7px; }

.ez-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg-subtle);
}
.ez-item-main { flex: 1; min-width: 0; }
.ez-item-main b {
  display: block; font-size: .84rem;
}
.ez-item-main small {
  display: block; margin-top: 2px;
  font-size: .71rem; color: var(--slate);
}

.ez-item form { margin: 0; }

.ez-edit, .ez-del {
  width: 27px; height: 27px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 7px; border: 0; font-size: .74rem;
  background: var(--surface); color: var(--slate);
}
.ez-del:hover {
  background: var(--danger-bg); color: var(--danger-text);
}

@media (max-width: 1024px) {
  .ez-layout { grid-template-columns: 1fr; }
  .ez-map { height: 420px; }
}

@media (max-width: 640px) {
  .ez-map { height: 340px; }
  .ez-tools { gap: 5px; }
  .ez-tool { font-size: .74rem; padding: 7px 10px; }
  .ex-acts { flex-direction: column; }
  .ex-acts .btn, .ex-acts form { width: 100%; }
  .ex-acts .btn { text-align: center; }
}

/* ==========================================================================
   انتخابگر ساعت ۲۴ ساعته
   --------------------------------------------------------------------------
   ⚠️ `<input type="time">` بر پایهٔ زبان سیستم عامل AM/PM
   می‌دهد — حتی با `lang="fa-IR"`.

   کشویی عددی صریح، همه‌جا یکسان است.
   ========================================================================== */
/*
  ⚠️ کل ردیف — چهار کشویی در یک ستون باریک زیر هم می‌افتند.
*/
.pf-hours { display: grid; gap: 6px; grid-column: 1 / -1; }
.pf-hours > span {
  font-size: .8rem; font-weight: 600; color: var(--slate);
}

.hr-pick {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap;
}

.hr-pick select {
  flex: none;
  font: inherit; font-size: .88rem;
  font-variant-numeric: tabular-nums;
  padding: 9px 6px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  width: 72px; text-align: center;
}

.hr-pick b { color: var(--slate); }

.hr-dash {
  margin: 0 8px; font-size: .82rem; color: var(--slate);
}

@media (max-width: 640px) {
  .hr-pick { flex-wrap: wrap; }
  .hr-pick select { width: 66px; padding: 8px 4px; }
  .hr-dash { margin: 0 4px; }
}

/* ==========================================================================
   ارسال بین‌شهری
   ========================================================================== */
.pf-sub {
  grid-column: 1 / -1;
  margin-top: 10px; padding: 9px 13px;
  border-radius: 9px; font-size: .82rem; font-weight: 700;
  background: var(--bg-subtle); color: var(--ink-soft);
}
.pf-sub small {
  display: block; margin-top: 3px;
  font-size: .71rem; font-weight: 400; color: var(--slate);
}

.fr-tag {
  padding: 2px 9px; border-radius: 999px;
  font-size: .68rem;
  background: var(--bg-subtle); color: var(--slate);
}
.fr-tag.is-post {
  background: var(--warn-bg); color: var(--warn-text);
  font-weight: 700;
}

.fr-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin: 10px 0 12px;
  font-size: .77rem; color: var(--slate);
}

/* ---- قواعد مقصد ---- */
.fr-rules {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.fr-rules h4 { font-size: .86rem; margin-bottom: 6px; }

.fr-rule {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  border-radius: 9px; font-size: .8rem;
  background: var(--bg-subtle);
}
.fr-rule.is-ex {
  background: var(--danger-bg); color: var(--danger-text);
}
.fr-rule b { flex: 1; }
.fr-rule form { margin: 0; }

.fr-rule-form {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center; margin-top: 10px;
  padding: 11px; border-radius: 10px;
  background: var(--bg-subtle);
}
.fr-rule-form input[type="text"] {
  flex: 1; min-width: 110px;
  font: inherit; font-size: .8rem;
  padding: 8px 11px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}

.fr-ex {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; cursor: pointer;
}

/* ---- محموله‌ها ---- */
.sh-list { display: grid; gap: 12px; }

.sh-head {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 9px;
}
.sh-head b { font-size: .9rem; }

.sh-service { font-size: .8rem; color: var(--ink-soft); }

.sh-state {
  padding: 2px 10px; border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  background: var(--bg-subtle); color: var(--slate);
}
.sh-state.is-handed, .sh-state.is-transit {
  background: var(--warn-bg); color: var(--warn-text);
}
.sh-state.is-delivered {
  background: var(--success-bg); color: var(--success-text);
}
.sh-state.is-returned {
  background: var(--danger-bg); color: var(--danger-text);
}

.sh-when {
  margin-inline-start: auto;
  font-size: .74rem; color: var(--slate);
}

.sh-meta {
  display: flex; gap: 13px; flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: .76rem; color: var(--slate);
}

.sh-code {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 10px 13px; margin-bottom: 10px;
  border-radius: 9px; font-size: .8rem;
  background: var(--success-bg);
}
.sh-code span { color: var(--slate); }
.sh-code b {
  font-variant-numeric: tabular-nums;
  color: var(--success-text);
}
.sh-code a {
  margin-inline-start: auto;
  color: var(--green-text-soft); font-size: .76rem;
}

.sh-form {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-top: 11px; border-top: 1px solid var(--line);
}
.sh-form input, .sh-form select {
  font: inherit; font-size: .8rem;
  padding: 8px 11px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
}
.sh-form input[name="tracking_code"] { flex: 1; min-width: 160px; }
.sh-form input[name="note"] { flex: 1; min-width: 130px; }

@media (max-width: 640px) {
  .sh-form { flex-direction: column; }
  .sh-form input, .sh-form select, .sh-form .btn { width: 100%; }
  .fr-rule-form input[type="text"] { min-width: 100%; }
}

/* ==========================================================================
   تنظیمات ارسال
   --------------------------------------------------------------------------
   ⚠️ پیشوند `sg-` — پیش از افزودن بررسی شد که با هیچ قاعدهٔ
   موجودی تصادم ندارد. (`sc-` قبلاً چنین مشکلی ساخت.)
   ========================================================================== */

.sg-warn {
  padding: 11px 15px; margin: 0 0 14px;
  border-radius: 10px; font-size: .8rem; line-height: 1.7;
  background: var(--warn-bg); color: var(--warn-text);
}

/* ---- نوار بالا ---- */
.sg-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; margin-bottom: 14px;
}

.sg-search {
  display: flex; gap: 6px; flex: 1; min-width: 220px;
  margin: 0;
}

.sg-search input {
  flex: 1; min-width: 0;
  padding: 9px 13px; font: inherit; font-size: .82rem;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}

.sg-count {
  margin: 0 0 10px; font-size: .76rem; color: var(--slate);
}

.sg-new { margin-bottom: 14px; }

.sg-new-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: flex-end;
}
.sg-new-row .pf-field { flex: 1; min-width: 200px; margin: 0; }

/* ---- فهرست گروه‌ها ---- */
.sg-list { display: grid; gap: 9px; }

.sg-card {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
  padding: 13px 15px; border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.sg-card.is-off { opacity: .55; }

.sg-card-main { flex: 1; min-width: 200px; }

.sg-card-main h3 {
  margin: 0; font-size: .92rem; line-height: 1.6;
}

.sg-tag {
  display: inline-block; vertical-align: middle;
  padding: 2px 8px; margin-inline-end: 5px;
  border-radius: 6px; font-size: .66rem; font-weight: 700;
  background: var(--green-100);
  color: var(--green-text-soft);
}

.sg-note {
  margin: 3px 0 0; font-size: .75rem; color: var(--slate);
}

.sg-meta {
  display: flex; gap: 11px; flex-wrap: wrap;
  margin-top: 7px; font-size: .72rem; color: var(--slate);
}

.sg-card-act {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.sg-card-act form { margin: 0; }

.sg-del:hover {
  background: var(--danger-bg); color: var(--danger-text);
}

.sg-pager {
  display: flex; gap: 10px; align-items: center;
  justify-content: center; margin-top: 16px;
  font-size: .78rem; color: var(--slate);
}

/* ==========================================================================
   ویرایشگر
   ========================================================================== */
.sg-map-block {
  display: grid; gap: 16px;
  grid-template-columns: 1fr 360px;
  align-items: start; margin-bottom: 18px;
}

.sg-map-wrap {
  border-radius: 14px; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  position: relative;
}

.sg-map-search {
  display: flex; gap: 6px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}

.sg-map-search input {
  flex: 1; min-width: 0;
  padding: 8px 12px; font: inherit; font-size: .8rem;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
}

.sg-map-results {
  list-style: none; margin: 0; padding: 0;
  max-height: 210px; overflow-y: auto;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.sg-map-results li { border-bottom: 1px solid var(--line); }
.sg-map-results li:last-child { border-bottom: 0; }

.sg-map-results button {
  display: block; width: 100%; text-align: start;
  padding: 9px 14px; border: 0; cursor: pointer;
  font: inherit; font-size: .76rem; line-height: 1.6;
  background: transparent; color: var(--ink-soft);
}
.sg-map-results button:hover { background: var(--bg-subtle); }

.sg-tools {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}

.sg-tool {
  padding: 8px 13px; cursor: pointer;
  border-radius: 9px; font: inherit; font-size: .79rem;
  background: var(--bg-subtle); color: var(--ink-soft);
  border: 1px solid transparent;
}
.sg-tool.is-on {
  background: #15803D; color: #fff;
  border-color: #15803D; font-weight: 700;
}
.sg-tool.sg-done {
  background: var(--green-100);
  color: var(--green-text-soft);
  font-weight: 700;
}

.sg-tool.sg-clear:hover {
  background: var(--danger-bg); color: var(--danger-text);
}

.sg-hint {
  margin: 0; padding: 9px 14px;
  font-size: .78rem; color: var(--slate);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--line);
}

/*
  ⚠️ ارتفاع ثابت، نه `aspect-ratio` — روی صفحهٔ باریک نقشه
  آن‌قدر کوتاه می‌شود که ترسیم عملاً ناممکن است.
*/
.sg-map { height: 520px; width: 100%; background: var(--bg-subtle); }

.sg-map-side { display: grid; gap: 12px; }
.sg-map-side > .pf-card { margin: 0; }

.sg-shape-note {
  margin-top: 11px; padding: 10px 13px;
  border-radius: 9px; font-size: .78rem;
  background: var(--bg-subtle); color: var(--slate);
}

.sg-err {
  margin: 11px 0 0; padding: 10px 13px;
  border-radius: 9px; font-size: .79rem; font-weight: 600;
  background: var(--danger-bg); color: var(--danger-text);
}

.sg-area-acts {
  display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px;
}

.sg-area-list { display: grid; gap: 7px; }

.sg-area-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg-subtle);
}
.sg-area-item form { margin: 0; }

.sg-area-main { flex: 1; min-width: 0; }
.sg-area-main b { display: block; font-size: .83rem; }
.sg-area-main small {
  display: block; margin-top: 2px;
  font-size: .71rem; color: var(--slate);
}

.sg-del-btn {
  width: 27px; height: 27px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 7px; border: 0; font-size: .74rem;
  background: var(--surface); color: var(--slate);
}
.sg-del-btn:hover {
  background: var(--danger-bg); color: var(--danger-text);
}

/* ---- فرم اصلی ---- */
.sg-form { display: grid; gap: 14px; }

.sg-flags {
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px;
}

.sg-check {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; font-size: .82rem;
}
.sg-check input { width: 17px; height: 17px; cursor: pointer; }

/* ---- عضویت ---- */
.sg-picks {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(3, 1fr);
}

.sg-pick { min-width: 0; position: relative; }

.sg-pick h4 {
  margin: 0 0 8px; font-size: .82rem;
}

.sg-pick-search input {
  width: 100%; box-sizing: border-box;
  padding: 8px 12px; font: inherit; font-size: .78rem;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
}

.sg-pick-results {
  list-style: none; margin: 4px 0 0; padding: 0;
  position: absolute; inset-inline: 0; z-index: 20;
  max-height: 220px; overflow-y: auto;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .13);
}

.sg-pick-results button {
  display: block; width: 100%; text-align: start;
  padding: 8px 12px; border: 0; cursor: pointer;
  font: inherit; font-size: .77rem;
  background: transparent; color: var(--ink-soft);
}
.sg-pick-results button:hover { background: var(--bg-subtle); }
.sg-pick-results small {
  display: block; font-size: .68rem; color: var(--slate);
}

.sg-pick-empty {
  padding: 9px 12px; font-size: .75rem; color: var(--slate);
}

.sg-chips {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px;
  min-height: 4px;
}

.sg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: .74rem; line-height: 1.5;
  background: var(--bg-subtle); color: var(--ink-soft);
  border: 1px solid var(--line);
  max-width: 100%;
}

.sg-chip button {
  border: 0; cursor: pointer; padding: 0;
  width: 16px; height: 16px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; font-size: .62rem;
  background: transparent; color: var(--slate);
}
.sg-chip button:hover {
  background: var(--danger-bg); color: var(--danger-text);
}

/* ---- روش‌ها ---- */
.sg-scopes {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: 1fr 1fr;
}

.sg-scope {
  padding: 13px; border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
}

.sg-scope-head {
  margin: 0 0 11px; padding-bottom: 9px;
  font-size: .85rem;
  border-bottom: 1px solid var(--line);
}
.sg-scope-head.sg-in { color: var(--green-text-soft); }
.sg-scope-head.sg-out { color: var(--slate); }

.sg-family { margin-bottom: 13px; }
.sg-family:last-child { margin-bottom: 0; }

.sg-family > b {
  display: block; margin-bottom: 6px;
  font-size: .74rem; color: var(--slate);
}

.sg-method {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 5px;
  border-radius: 9px; cursor: pointer;
  background: var(--surface);
  border: 1px solid transparent;
}
.sg-method.is-on {
  border-color: #15803D;
  background: var(--green-100);
}

.sg-method input[type=checkbox] {
  width: 16px; height: 16px; flex: none; cursor: pointer;
}

.sg-method-name {
  flex: 1; min-width: 0; font-size: .78rem;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/*
  ⚠️ ورودی مازاد باید باریک بماند.

  بدون عرض ثابت، در RTL کنار نام کالا کشیده می‌شود و نام
  کوتاه می‌افتد.
*/
.sg-surcharge {
  width: 92px; flex: none;
  padding: 5px 8px; font: inherit; font-size: .73rem;
  border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--ink);
  text-align: center;
}

.sg-save { display: flex; justify-content: flex-end; }

/* ==========================================================================
   واکنش‌گرایی
   ========================================================================== */
@media (max-width: 1100px) {
  .sg-map-block { grid-template-columns: 1fr; }
  .sg-map { height: 420px; }
  .sg-picks { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .sg-scopes { grid-template-columns: 1fr; }
  .sg-picks { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .sg-map { height: 340px; }
  .sg-tools { gap: 5px; }
  .sg-tool { font-size: .74rem; padding: 7px 10px; }

  .sg-card { flex-direction: column; align-items: stretch; }
  .sg-card-act { justify-content: stretch; }
  .sg-card-act .btn, .sg-card-act form { flex: 1; }
  .sg-card-act .btn { text-align: center; }

  .sg-new-row { flex-direction: column; align-items: stretch; }
  .sg-new-row .btn { width: 100%; }

  .sg-save .btn { width: 100%; }

  /* ⚠️ مازاد زیر نام برود — کنار هم روی موبایل جا نمی‌شود */
  .sg-method { flex-wrap: wrap; }
  .sg-surcharge { width: 100%; }
}

/* ==========================================================================
   وضعیت موتورهای ترجمه
   ========================================================================== */
.tr-status {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 6px;
}

.tr-status li {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: baseline;
  padding: 8px 12px; border-radius: 9px;
  font-size: .78rem; line-height: 1.7;
  background: var(--bg-subtle);
  border-inline-start: 3px solid var(--line);
}

.tr-status li.is-ok {
  border-inline-start-color: var(--green);
}

.tr-status li.is-need {
  border-inline-start-color: var(--warn-text);
}

.tr-status b { flex: none; font-size: .8rem; }
.tr-status span { color: var(--slate); }

.tr-presets {
  display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px;
}

.tr-preset {
  padding: 4px 10px; cursor: pointer;
  border-radius: 999px; font: inherit; font-size: .71rem;
  background: var(--bg-subtle); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.tr-preset:hover {
  border-color: var(--green);
  color: var(--green);
}

/* ==========================================================================
   پیش‌فاکتور
   --------------------------------------------------------------------------
   ⚠️ پیشوند `pfx-` — پیش از افزودن بررسی شد که تصادم ندارد.
   ========================================================================== */
.pfx-note {
  padding: 11px 15px; margin: 0 0 14px;
  border-radius: 10px; font-size: .8rem; line-height: 1.8;
  background: var(--bg-subtle); color: var(--slate);
}
.pfx-note a { color: var(--green); }
.pfx-note.is-warn { background: var(--warn-bg); color: var(--warn-text); }
.pfx-note.is-ok { background: var(--green-100); color: var(--green-text-soft); }
.pfx-note.is-lock { background: var(--bg-subtle); }

.pfx-new { margin-bottom: 14px; }

/*
  ⚠️ فاصلهٔ دکمه از فیلد.

  پیش‌تر دکمه به کادر ورودی چسبیده بود. `align-items: flex-end`
  لازم است تا دکمه هم‌تراز پایین فیلد بنشیند، نه وسط برچسب.
*/
.pfx-lookup {
  display: flex; gap: 12px; align-items: flex-end;
  flex-wrap: wrap;
}

.pfx-lookup .pf-field {
  flex: 1; min-width: 220px; margin: 0;
}

.pfx-lookup input {
  width: 100%; box-sizing: border-box;
  padding: 10px 13px; font: inherit; font-size: .9rem;
  letter-spacing: .04em;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}

.pfx-lookup .btn { flex: none; }

.pfx-lookup-msg {
  margin: 10px 0 0; padding: 9px 13px;
  border-radius: 9px; font-size: .8rem; font-weight: 600;
}
.pfx-lookup-msg.is-ok {
  background: var(--green-100); color: var(--green-text-soft);
}
.pfx-lookup-msg.is-bad {
  background: var(--danger-bg); color: var(--danger-text);
}

/* دکمهٔ پیش‌فاکتور در نوار گفتگو */
.ch-proforma { text-decoration: none; }

@media (max-width: 640px) {
  .pfx-lookup { flex-direction: column; align-items: stretch; }
  .pfx-lookup .btn { width: 100%; }
}

.pfx-pick { position: relative; }

.pfx-pick input[type=search] {
  width: 100%; box-sizing: border-box;
  padding: 9px 13px; font: inherit; font-size: .82rem;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}

.pfx-results {
  list-style: none; margin: 4px 0 0; padding: 0;
  position: absolute; inset-inline: 0; z-index: 30;
  max-height: 240px; overflow-y: auto;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .13);
}

.pfx-results button {
  display: block; width: 100%; text-align: start;
  padding: 9px 13px; border: 0; cursor: pointer;
  font: inherit; font-size: .8rem;
  background: transparent; color: var(--ink-soft);
}
.pfx-results button:hover { background: var(--bg-subtle); }
.pfx-results small { color: var(--slate); margin-inline-start: 6px; }

.pfx-none { padding: 9px 13px; font-size: .78rem; color: var(--slate); }

.pfx-chosen {
  margin: 9px 0 0; font-size: .82rem; font-weight: 700;
  color: var(--green-text-soft);
}

/* ---- تب‌ها ---- */
.pfx-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}

.pfx-tab {
  padding: 7px 13px; border-radius: 999px;
  font-size: .78rem; text-decoration: none;
  background: var(--bg-subtle); color: var(--ink-soft);
}
.pfx-tab.on {
  background: var(--green-btn); color: var(--on-green);
  font-weight: 700;
}
.pfx-tab b { margin-inline-start: 5px; opacity: .75; }

.pfx-search { display: flex; gap: 6px; margin-bottom: 14px; }
.pfx-search input {
  flex: 1; min-width: 0;
  padding: 9px 13px; font: inherit; font-size: .82rem;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}

/* ---- نشان وضعیت ---- */
.pfx-badge {
  display: inline-block; padding: 2px 9px;
  border-radius: 999px; font-size: .68rem; font-weight: 700;
  background: var(--bg-subtle); color: var(--slate);
}
.pfx-badge.is-sent { background: var(--green-100); color: var(--green-text-soft); }
.pfx-badge.is-paid {
  background: var(--green-btn); color: var(--on-green);
}
.pfx-badge.is-edit { background: var(--warn-bg); color: var(--warn-text); }
.pfx-badge.is-cancelled,
.pfx-badge.is-expired { background: var(--danger-bg); color: var(--danger-text); }

.pfx-empty {
  text-align: center; padding: 26px 12px;
  color: var(--slate); font-size: .82rem;
}

/* ---- ویرایشگر ---- */
.pfx-msg {
  padding: 12px 15px; margin-bottom: 14px;
  border-radius: 11px;
  background: var(--warn-bg); color: var(--warn-text);
}
.pfx-msg b { display: block; margin-bottom: 5px; font-size: .82rem; }
.pfx-msg p { margin: 0; font-size: .82rem; line-height: 1.9; }

.pfx-add {
  display: flex; gap: 9px; flex-wrap: wrap;
  align-items: flex-end; margin-bottom: 12px;
}
.pfx-add .pfx-pick { flex: 1; min-width: 220px; }

.pfx-mini { display: flex; flex-direction: column; gap: 4px; }
.pfx-mini span { font-size: .72rem; color: var(--slate); }
.pfx-mini input {
  width: 120px;
  padding: 8px 11px; font: inherit; font-size: .82rem;
  border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}
/*
  ⚠️ عرض بیشتر برای عدد با جداکننده.

  «۱۲,۰۰۰,۰۰۰» از «12000000» پهن‌تر است و در ۱۵۰ پیکسل
  بریده می‌شد.
*/
.pfx-price-box input {
  width: 175px;
  text-align: end;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.pfx-mini input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
}

.pfx-diff {
  margin: 0 0 12px; padding: 8px 12px;
  border-radius: 9px; font-size: .78rem; font-weight: 600;
}
.pfx-diff.is-up { background: var(--warn-bg); color: var(--warn-text); }
.pfx-diff.is-down { background: var(--green-100); color: var(--green-text-soft); }

/*
  ⚠️ اختلاف با قیمت سایت فقط برای تأمین‌کننده.

  مشتری هرگز این را نمی‌بیند — قیمت توافقی بین دو طرف است.
*/
.pfx-vs {
  display: inline-block; margin-inline-start: 6px;
  padding: 1px 7px; border-radius: 999px; font-size: .66rem;
}
.pfx-vs.is-up { background: var(--warn-bg); color: var(--warn-text); }
.pfx-vs.is-down { background: var(--green-100); color: var(--green-text-soft); }

.pfx-items small { display: block; font-size: .72rem; color: var(--slate); }

/* ---- جمع ---- */
.pfx-sum {
  display: grid; gap: 7px; margin-top: 14px;
  padding: 13px 15px; border-radius: 11px;
  background: var(--bg-subtle);
}
.pfx-sum > div {
  display: flex; justify-content: space-between;
  font-size: .82rem;
}
.pfx-sum .is-total {
  padding-top: 9px; margin-top: 4px;
  border-top: 1px solid var(--line);
  font-size: .95rem; font-weight: 800;
  color: var(--green-text-soft);
}

.pfx-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.pfx-cancel { margin-top: 14px; }
.pfx-danger:hover { background: var(--danger-bg); color: var(--danger-text); }

/* ---- کارت‌های مشتری ---- */
.pfx-cards { display: grid; gap: 11px; }

.pfx-card {
  padding: 14px 16px; border-radius: 13px;
  background: var(--surface); border: 1.5px solid var(--line);
}
.pfx-card.is-sent { border-color: var(--green-btn); }

.pfx-card header {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.pfx-card header b { display: block; font-size: .92rem; }
.pfx-card header small {
  color: var(--slate); font-size: .72rem;
}

.pfx-card-body {
  display: flex; justify-content: space-between;
  align-items: baseline; margin: 11px 0;
  font-size: .84rem;
}
.pfx-card-body b { font-size: 1.05rem; font-weight: 800; }

.pfx-valid { margin: 0 0 10px; font-size: .74rem; color: var(--slate); }
.pfx-valid.is-expired { color: var(--danger-text); font-weight: 700; }

.pfx-from {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px; font-size: .86rem;
}
.pfx-from span { color: var(--slate); }

.pfx-more { margin-top: 14px; }
.pfx-more summary {
  cursor: pointer; font-size: .82rem; color: var(--slate);
  padding: 8px 0;
}
.pfx-reply { margin-top: 10px; }

@media (max-width: 640px) {
  .pfx-add { flex-direction: column; align-items: stretch; }
  .pfx-mini input, .pfx-price-box input { width: 100%; }
  .pfx-actions .btn { width: 100%; text-align: center; }
  .pfx-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .pfx-tab { white-space: nowrap; }
}

/* ==========================================================================
   تغییر گروهی قیمت
   ========================================================================== */
.bpx-warn {
  padding: 12px 15px; margin-bottom: 14px;
  border-radius: 11px; font-size: .82rem; line-height: 1.9;
  background: var(--warn-bg); color: var(--warn-text);
}

.bpx h3 {
  margin: 18px 0 10px; font-size: .9rem;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.bpx h3:first-of-type { margin-top: 0; }

.bpx-fields {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
}

.bpx-check {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-size: .83rem;
}
.bpx-check input { width: 17px; height: 17px; cursor: pointer; }

.bpx-check.is-confirm {
  padding: 11px 14px; border-radius: 10px;
  margin: 12px 0;
  background: var(--warn-bg); color: var(--warn-text);
  align-items: flex-start; line-height: 1.8;
}

/*
  ⚠️ `align-items: flex-end` برچسب‌ها را به‌هم می‌ریخت.

  فیلدهایی که زیرشان راهنما دارند بلندترند؛ با ته‌چین‌کردن،
  کف‌ها هم‌تراز می‌شد ولی **برچسب‌ها** در ارتفاع‌های متفاوت
  می‌نشستند — دقیقاً همان به‌هم‌ریختگی تصویر.

  `stretch` همهٔ ستون‌ها را هم‌ارتفاع می‌کند و برچسب‌ها از
  بالا هم‌تراز می‌مانند.
*/
.bpx-row {
  display: flex; gap: 12px 14px; flex-wrap: wrap;
  align-items: stretch;
}

/*
  ⚠️ هر فیلد ستون فلکس می‌شود.

  `margin-top: auto` روی راهنما، آن را به کف می‌چسباند تا
  ورودی‌ها هم‌تراز بمانند حتی وقتی طول راهنماها فرق دارد.
*/
.bpx-row .pf-field {
  flex: 1; min-width: 190px; margin: 0;
  display: flex; flex-direction: column;
}
.bpx-row .pf-field > span { margin-bottom: 5px; }
.bpx-row .pf-field .pf-hint { margin-top: auto; padding-top: 5px; }

@media (max-width: 640px) {
  /* ⚠️ در موبایل ستون‌بندی معنا ندارد */
  .bpx-row { flex-direction: column; }
  .bpx-row .pf-field { min-width: 0; }
}

.bpx-actions { margin-top: 16px; }

.bpx-result { margin-top: 16px; }

.bpx-field { font-size: .74rem; color: var(--slate); }

/*
  ⚠️ رنگ به‌تنهایی معنا را نمی‌رساند.

  ستون‌ها برچسب «از» و «به» دارند؛ رنگ فقط کمک بصری است.
*/
.bpx-old { color: var(--slate); text-decoration: line-through; }
.bpx-new { font-weight: 800; color: var(--green-text-soft); }

.bpx-confirm { margin-top: 14px; }

@media (max-width: 640px) {
  .bpx-row { flex-direction: column; align-items: stretch; }
  .bpx-row .pf-field { width: 100%; }
  .bpx-actions .btn, .bpx-confirm .btn { width: 100%; }
}

/* ---- گروه‌های کاری پیش‌فاکتور ---- */
.pfx-groups {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.pfx-group {
  padding: 9px 15px; border-radius: 10px;
  font-size: .84rem; font-weight: 700;
  text-decoration: none;
  background: var(--bg-subtle); color: var(--ink-soft);
}
.pfx-group.on {
  background: var(--green-btn); color: var(--on-green);
}
.pfx-group b {
  margin-inline-start: 6px; opacity: .8; font-weight: 800;
}

.pfx-act { display: flex; gap: 5px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .pfx-groups { overflow-x: auto; flex-wrap: nowrap; }
  .pfx-group { white-space: nowrap; }
}

/* ==========================================================================
   ساعت کاری مجموعه
   ========================================================================== */
.wh-grid { display: grid; gap: 8px; }

.wh-row {
  display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap;
  padding: 11px 14px; border-radius: 10px;
  background: var(--bg-subtle);
  border: 1px solid transparent;
}

/*
  ⚠️ روز تعطیل باید در نگاه اول معلوم باشد.

  فقط برداشتن تیک کافی نیست — ردیف باید کم‌رنگ شود.
*/
.wh-row.is-off { opacity: .55; }

.wh-day {
  display: flex; align-items: center; gap: 9px;
  min-width: 130px; cursor: pointer;
}
.wh-day input { width: 17px; height: 17px; cursor: pointer; }
.wh-day b { font-size: .86rem; }

.wh-times { display: flex; gap: 12px; flex-wrap: wrap; }

.wh-times label {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--slate);
}

.wh-times input {
  padding: 7px 10px; font: inherit; font-size: .82rem;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
}

@media (max-width: 640px) {
  .wh-row { flex-direction: column; align-items: stretch; }
  .wh-times { justify-content: space-between; }
}

/* ==========================================================================
   مورد ۱۶ — چیپ‌های وضعیت گزارش‌ساز در موبایل
   ========================================================================== */
@media (max-width: 640px) {
  /*
    ⚠️ برچسب «وضعیت سفارش» عضو همان ردیف فلکس بود.

    عرض می‌گرفت و چیپ‌ها در فضای باقی‌مانده به ردیف‌های
    نامنظم می‌شکستند — بعضی ردیف‌ها یک چیپ، بعضی سه‌تا.

    حالا برچسب ردیف کامل خودش را دارد و چیپ‌ها در گرید دو
    ستونهٔ مرتب می‌نشینند.
  */
  .rb-states {
    display: grid; gap: 8px;
    grid-template-columns: repeat(2, 1fr);
  }

  .rb-states-lbl {
    grid-column: 1 / -1; margin-bottom: 2px;
    font-size: .8rem;
  }

  .rb-chip {
    justify-content: flex-start;
    padding: 11px 13px; border-radius: 12px;
    font-size: .79rem; min-height: 44px;
    box-sizing: border-box;
  }

  /* ⚠️ هدف لمس چک‌باکس باید دست‌کم ۱۸ پیکسل باشد */
  .rb-chip input {
    width: 18px; height: 18px; flex: none; cursor: pointer;
  }
}

/* ==========================================================================
   مورد ۱۰ — کارت زمان تحویل، دو ستونه در دسکتاپ
   --------------------------------------------------------------------------
   ⚠️ تقویم عرض ثابت دارد.

   تنها در یک کارت پهن، دو سوم فضا خالی می‌ماند و بازهٔ ساعتی
   و یادداشت زیرش پرت می‌افتند. با دو ستون، چشم از تاریخ به
   ساعت می‌رود — همان ترتیبی که ذهن دنبال می‌کند.

   ⚠️ در موبایل یک ستون می‌ماند، طبق خواستهٔ سند.
   ========================================================================== */
.dt-grid { display: grid; gap: 18px; }

.dt-col-cal { min-width: 0; }
.dt-col-side { min-width: 0; }

@media (min-width: 860px) {
  .dt-grid {
    /*
      ⚠️ `auto 1fr` بهتر از عرض ثابت است — اگر روزی عرض تقویم
      عوض شود، چیدمان خودش را وفق می‌دهد.
    */
    /*
      ⚠️ ۳۰٪ به تقویم، بقیه به بازه‌های ساعتی.

      `auto` عرض محتوا را می‌گرفت و تقویم را در قابی باریک
      می‌فشرد. نسبت صریح، هم فضای کافی می‌دهد هم مانع
      بی‌قواره‌شدن در نمایشگر پهن می‌شود.

      ⚠️ کف ۳۰۰ پیکسل است، نه کمتر.

      با ۲۶۰ پیکسل، خانه به ۳۱ پیکسل می‌رسید — زیر حد راحت
      برای کلیک. ۳۰۰ پیکسل خانهٔ ۳۵ پیکسلی می‌دهد.
    */
    grid-template-columns: minmax(300px, 30%) 1fr;
    gap: 28px;
    align-items: start;
  }

  /*
    ⚠️ خط جداکنندهٔ نرم بین دو ستون.

    بدون آن، دو بخش شناور به‌نظر می‌رسند و ربطشان معلوم نیست.
  */
  .dt-col-side {
    padding-inline-start: 28px;
    border-inline-start: 1px solid var(--line);
    align-self: stretch;
  }

  .dt-col-cal .cal { margin-top: 0; }

  /*
    ⚠️ تقویم در دسکتاپ نباید فشرده بماند.

    سقف ۳۳۰ پیکسلی برای موبایل تعیین شده بود. در چیدمان دو
    ستونه، ستون تقویم فضای کافی دارد و همان اندازه، خانه‌ها
    را ریز و متن را کوچک نشان می‌داد — دقیقاً همان فشردگی
    گزارش‌شده.

    ۳۰٪ عرض کارت به تقویم می‌رسد و بقیه به بازه‌های ساعتی.
  */
  /*
    ⚠️ سقف عرض همچنان لازم است.

    هشدار موجود در `pages.css` درست است: `aspect-ratio` خانه
    را به عرض ستون گره می‌زند و روی نمایشگر خیلی پهن،
    ۳۰٪ آن‌قدر بزرگ می‌شود که خانه‌ها غول‌آسا شوند.

    ۴۲۰ پیکسل یعنی خانهٔ حدود ۵۲ پیکسلی — بزرگ و راحت، نه
    بی‌قواره.
  */
  .dt-col-cal .cal { width: 100%; max-width: 420px; }

  .dt-col-cal .cal-grid { gap: 5px; padding: 0 12px 14px; }

  /*
    ⚠️ خانه باید **مربع** بماند، نه بیضی.

    ارتفاع ثابت (`height: 44px`) با عرضی که از `1fr` می‌آید
    ترکیب نمی‌شود: اگر ستون باریک شود، خانه باریک و بلند
    می‌ماند — همان بیضی‌های کشیده در تصویر.

    `aspect-ratio: 1` عرض را مبنا می‌گیرد و ارتفاع را برابرش
    می‌کند، پس در هر عرضی مربع می‌ماند.
  */
  .dt-col-cal .cal-cell {
    height: auto;
    aspect-ratio: 1;
    font-size: .86rem;
    border-radius: 12px;
  }

  /* ⚠️ نام واقعی کلاس‌ها `cal-head` و `cal-title` است */
  .dt-col-cal .cal-head span { font-size: .75rem; }

  .dt-col-cal .cal-title { font-size: .92rem; }
}

/*
  انتخاب ساعت — جذاب‌تر و منظم‌تر.

  ⚠️ با فلکس، ردیف آخر نیمه‌پر می‌ماند و بی‌قواره به‌نظر
  می‌رسد. گرید همه را هم‌عرض نگه می‌دارد.
*/
@media (min-width: 860px) {
  .dt-slots-list {
    display: grid; gap: 9px;
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  }

  .dt-slot {
    text-align: center; padding: 13px 10px;
    border-radius: 14px;
    transition: border-color .15s ease, background .15s ease,
                transform .12s ease;
  }
  .dt-slot:hover { border-color: var(--green); }
  .dt-slot:active { transform: scale(.97); }
}

.dt-slots-label {
  font-weight: 700; font-size: .82rem; color: var(--ink-soft);
}

/*
  ⚠️ پیش از انتخاب روز، ستون کناری خالی است.

  کادر خالی بی‌توضیح کاربر را سردرگم می‌کند؛ راهنما می‌گوید
  قدم بعدی چیست.
*/
.dt-wait {
  padding: 24px 16px; text-align: center;
  border-radius: 14px; border: 1px dashed var(--line);
  color: var(--slate); font-size: .83rem; line-height: 1.9;
  background: var(--bg-subtle);
}

.dt-picked { display: flex; align-items: center; gap: 8px; }

/* ==========================================================================
   چاپ لیبل ارسال
   ========================================================================== */
.lbl-bar {
  display: flex; gap: 14px; align-items: flex-end;
  flex-wrap: wrap; margin: 14px 0;
  padding: 14px; border-radius: 12px;
  background: var(--bg-subtle);
}

.lbl-sender { min-width: 200px; margin: 0; }

/*
  ⚠️ تیک‌ها در گرید، نه ردیف فلکس.

  هشت گزینه در یک ردیف، در عرض کم به ردیف‌های نامنظم
  می‌شکنند.
*/
.lbl-checks {
  display: grid; gap: 10px; margin: 12px 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.lbl-sender-form { margin-top: 18px; }
.lbl-sender-form h4 {
  margin: 0 0 12px; font-size: .9rem; font-weight: 700;
}

@media (max-width: 640px) {
  .lbl-bar { flex-direction: column; align-items: stretch; }
  .lbl-bar .btn { width: 100%; }
  .lbl-checks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   پنل — جوایز باشگاه
   ========================================================================== */
.cr-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.cr-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 15px 16px; border-radius: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* ⚠️ جایزهٔ غیرفعال باید در نگاه اول معلوم باشد */
.cr-card.is-off { opacity: .6; border-style: dashed; }

.cr-top { display: flex; align-items: flex-start; gap: 11px; }

.cr-ic {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px; font-size: 1.5rem;
  background: var(--green-100); overflow: hidden;
}
.cr-ic img { width: 100%; height: 100%; object-fit: cover; }

.cr-head { flex: 1; min-width: 0; }
.cr-head b { display: block; font-size: .9rem; line-height: 1.6; }

.cr-kind {
  font-size: .72rem; color: var(--slate);
}

.cr-points {
  flex: none; text-align: center;
  font-size: 1.05rem; font-weight: 900;
  color: var(--green-text-soft);
}
.cr-points small {
  display: block; font-size: .62rem; font-weight: 600;
  color: var(--slate);
}

.cr-desc {
  margin: 0; font-size: .78rem; line-height: 1.9;
  color: var(--slate);
}

.cr-facts, .cr-levels {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cr-facts span {
  font-size: .71rem; padding: 3px 9px;
  border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--ink-soft);
}
.cr-lv {
  font-size: .69rem; padding: 2px 9px;
  border-radius: var(--r-full);
  background: var(--green-100); color: var(--green-text-soft);
  font-weight: 700;
}

.cr-acts {
  display: flex; gap: 8px; align-items: center;
  padding-top: 10px; margin-top: auto;
  border-top: 1px solid var(--line);
}
/* ⚠️ فرم از چیدمان حذف شود تا دکمه‌اش هم‌تراز بماند */
.cr-acts form { display: contents; }

.cr-checks {
  display: grid; gap: 9px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

@media (max-width: 640px) {
  .cr-grid { grid-template-columns: 1fr; }
  .cr-checks { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   حساب‌های سامانه
   ========================================================================== */
.la-grid {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.la-card {
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
}

/*
  ⚠️ حساب رزرو باید در نگاه اول پیدا باشد.

  خالی‌بودنش ثبت تخفیف را متوقف می‌کند.
*/
.la-card.is-reserve {
  border-color: var(--green); background: var(--green-100);
}

.la-name { font-size: .78rem; color: var(--slate); }

.la-amount {
  font-size: 1.25rem; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.la-amount small { font-size: .68rem; font-weight: 600; }

.la-new, .la-hint {
  font-size: .7rem; line-height: 1.8; color: var(--slate);
}

.la-in { color: var(--green-text-soft); font-weight: 700; }
.la-out { color: var(--warn-text); font-weight: 700; }

@media (max-width: 640px) {
  .la-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   تأیید کد تخفیف تأمین‌کننده
   ========================================================================== */
/*
  ⚠️ باید در نگاه اول جلب توجه کند.

  تعهد مالی است و نباید بین بقیهٔ محتوا گم شود.
*/
.cc-card {
  margin-bottom: 14px; padding: 16px 18px;
  border-radius: 14px;
  background: var(--warn-bg);
  border: 1.5px solid var(--warn-text);
}

.cc-head {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 9px;
}

.cc-code {
  font-family: ui-monospace, monospace; direction: ltr;
  font-size: 1rem; font-weight: 900;
  padding: 4px 12px; border-radius: 8px;
  background: var(--surface); color: var(--ink);
}

.cc-value { font-size: .9rem; font-weight: 800; }

.cc-warn {
  margin: 0 0 12px; font-size: .82rem; line-height: 1.9;
  color: var(--warn-text);
}

.cc-form { display: grid; gap: 11px; }
.cc-form .sg-check span { font-size: .8rem; line-height: 1.9; }

/* ==========================================================================
   انتخابگر چندتایی — چک‌باکس، جست‌وجو، شمارنده
   ========================================================================== */
.pk {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}

.pk-bar {
  position: relative; display: flex; align-items: center;
  border-bottom: 1px solid var(--line);
}

.pk-ic {
  position: absolute; inset-inline-start: 11px;
  top: 50%; transform: translateY(-50%);
  font-size: .82rem; opacity: .5; pointer-events: none;
}

.pk-q {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: .82rem;
  padding: 10px 34px; border: 0;
  background: transparent; color: var(--ink);
}
.pk-q:focus { outline: none; background: var(--bg-subtle); }
.pk-q::-webkit-search-cancel-button { display: none; }

.pk-tools {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
}

/* ⚠️ `border` دو بار نوشته شده بود؛ `border: 0` مرده بود. */
.pk-btn {
  padding: 4px 11px; cursor: pointer;
  border-radius: var(--r-full); font: inherit;
  font-size: .72rem; font-weight: 700;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.pk-btn:hover { border-color: var(--green); color: var(--green-text-soft); }

/*
  ⚠️ شمارنده تا وقتی صفر است خنثی می‌ماند.

  رنگ سبز روی «۰» یعنی چیزی انتخاب شده، که غلط است.
*/
.pk-count {
  margin-inline-start: auto;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: .72rem; font-weight: 800;
  background: var(--line); color: var(--slate);
}
.pk-count.is-on {
  background: var(--green-btn); color: var(--on-green);
}

/*
  ⚠️ ارتفاع ثابت با اسکرول.

  فهرست کالا ممکن است صدها ردیف باشد؛ بدون سقف، فرم
  بی‌انتها می‌شود.
*/
.pk-list {
  max-height: 210px; overflow-y: auto;
  padding: 5px;
}

.pk-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  font-size: .81rem; line-height: 1.7;
}
.pk-item:hover { background: var(--bg-subtle); }
.pk-item[hidden] { display: none; }

.pk-item input {
  width: 16px; height: 16px; flex: none; cursor: pointer;
}
.pk-item span { min-width: 0; word-break: break-word; }

.pk-item:has(input:checked) {
  background: var(--green-100); font-weight: 700;
}

.pk-empty, .pk-none {
  margin: 0; padding: 16px 12px; text-align: center;
  font-size: .78rem; color: var(--slate);
}

/* دکمهٔ فرم‌های مالی — فاصله از کادر بالایی */
/*
  ⚠️ بدون این، دکمه به فیلد می‌چسبد و به‌نظر می‌رسد بخشی از
  آن است.
*/
.la-form { margin-bottom: 16px; }
.la-acts {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   مدیریت کاربران
   ========================================================================== */
.us-grid {
  display: grid; gap: 11px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.us-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .15s ease;
}
.us-card:hover { border-color: var(--green); }

.us-avatar {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 1.3rem;
  background: var(--green-100); overflow: hidden;
}
.us-avatar img { width: 100%; height: 100%; object-fit: cover; }

.us-body { flex: 1; min-width: 0; }
.us-body b { display: block; font-size: .88rem; line-height: 1.7; }

.us-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: .74rem; color: var(--slate); margin-top: 2px;
}

.us-tags {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
}
.us-tag {
  font-size: .67rem; font-weight: 700;
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--slate);
}
.us-tag.is-ok {
  background: var(--green-100); color: var(--green-text-soft);
}
.us-tag.is-off {
  background: var(--danger-bg); color: var(--danger-text);
}

/*
  ⚠️ بخش تغییر رمز باید متمایز باشد.

  عملیات پرخطری است و نباید با فرم عادی اشتباه شود.
*/
.us-danger { border-color: var(--danger-text); }

@media (max-width: 640px) {
  .us-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   فرم جایزه — چیدمان مدرن
   ========================================================================== */
/*
  ⚠️ فرم تودرتو و فشرده بود.

  همهٔ بخش‌ها با فاصلهٔ یکسان پشت هم می‌آمدند و مرزی بینشان
  نبود؛ چشم نمی‌فهمید کجا یک موضوع تمام و بعدی شروع می‌شود.
*/
#crForm h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 26px 0 14px; padding-bottom: 10px;
  font-size: .95rem; font-weight: 800;
  border-bottom: 2px solid var(--green-100);
}
#crForm h3:first-of-type { margin-top: 0; }

#crForm .pf-field { margin-bottom: 14px; }

#crForm .pf-hint {
  font-size: .75rem; line-height: 1.9; color: var(--slate);
}

/* ---------- موجودی رزرو ---------- */
/*
  ⚠️ بالای فرم — ادمین باید پیش از تعریف تخفیف بداند بودجه
  دارد یا نه.
*/
.rf-reserve {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 18px;
  padding: 13px 17px; border-radius: 13px;
  background: var(--green-100);
  border: 1px solid var(--green);
  font-size: .84rem;
}
.rf-reserve b {
  font-size: 1.05rem; font-variant-numeric: tabular-nums;
  color: var(--green-text-soft);
}
.rf-reserve a {
  margin-inline-start: auto; font-weight: 700;
  color: var(--green-text-soft);
}

/* ⚠️ حساب خالی باید هشدار بدهد، نه تشویق */
.rf-reserve.is-empty {
  background: var(--warn-bg); border-color: var(--warn-text);
}
.rf-reserve.is-empty b,
.rf-reserve.is-empty a { color: var(--warn-text); }

/* ---------- انتخاب بار مالی ---------- */
.rf-bearer {
  display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.rf-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; cursor: pointer;
  border-radius: 13px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  transition: border-color .15s ease, background .15s ease;
}
.rf-opt:hover { border-color: var(--green); }

/*
  ⚠️ گزینهٔ انتخابی باید در نگاه اول پیدا باشد.

  این تصمیم مالی است و نباید مبهم بماند.
*/
.rf-opt:has(input:checked) {
  border-color: var(--green-btn); background: var(--green-100);
}

.rf-opt input { margin-top: 3px; flex: none; }
.rf-opt-body { min-width: 0; }
.rf-opt-body b { display: block; font-size: .85rem; }
.rf-opt-body small {
  display: block; margin-top: 3px;
  font-size: .73rem; line-height: 1.8; color: var(--slate);
}

.rf-flags {
  display: grid; gap: 10px; margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

@media (max-width: 640px) {
  .rf-bearer, .rf-flags { grid-template-columns: 1fr; }
  .rf-reserve a { margin-inline-start: 0; }
}

/* ==========================================================================
   دسته‌بندی‌ها
   ========================================================================== */
.cg-tree { display: grid; gap: 9px; }

.cg-branch {
  padding: 4px; border-radius: 15px;
  background: var(--bg-subtle);
}

.cg-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
}
.cg-row.is-root { font-weight: 700; }
.cg-row.is-off { opacity: .6; border-style: dashed; }

/*
  ⚠️ فرزندان با تورفتگی منطقی.

  `padding-inline-start` جهت‌آگاه است؛ `padding-left` در RTL
  سمت اشتباه می‌افتد.
*/
.cg-kids {
  display: grid; gap: 6px;
  padding: 6px 0 2px;
  padding-inline-start: 26px;
}

.cg-ic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px; font-size: 1.2rem;
  background: var(--green-100); overflow: hidden;
}
.cg-ic img { width: 100%; height: 100%; object-fit: cover; }

.cg-body { flex: 1; min-width: 0; }
.cg-body b { display: block; font-size: .88rem; }

.cg-meta {
  display: flex; flex-wrap: wrap; gap: 5px 10px;
  margin-top: 3px; font-size: .72rem; color: var(--slate);
}
.cg-meta code {
  font-family: ui-monospace, monospace; direction: ltr;
  padding: 1px 7px; border-radius: 5px;
  background: var(--bg-subtle);
}

.cg-acts { display: flex; gap: 10px; align-items: center; }
.cg-acts form { display: contents; }

/* ---------- فرم ---------- */
.cg-visual {
  display: grid; gap: 14px; margin-bottom: 6px;
  grid-template-columns: minmax(150px, 220px) 1fr;
  align-items: start;
}

/*
  ⚠️ برچسب «کجا دیده می‌شود».

  آیکن و تصویر دو جای متفاوت‌اند و اسمشان این را نمی‌رساند؛
  بدون این برچسب ادمین یکی را پر می‌کند و فکر می‌کند کافی
  است. (کلاس `is-muted` پیشین حذف شد — آیکن دیگر با آمدن
  تصویر بی‌اثر نمی‌شود.)
*/
.cg-where {
  font-style: normal; font-weight: 600; font-size: .68rem;
  margin-inline-start: 6px; padding: 1px 8px;
  border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--slate);
}

@media (max-width: 640px) {
  .cg-visual { grid-template-columns: 1fr; }
  .cg-row { flex-wrap: wrap; }
  .cg-acts { width: 100%; padding-top: 8px;
             border-top: 1px solid var(--line); }
}

/* ==========================================================================
   کدهای تخفیف
   ========================================================================== */
.cp-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.cp-card {
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 16px; border-radius: 15px;
  background: var(--surface); border: 1px solid var(--line);
}

/* ⚠️ کد غیرفعال باید در نگاه اول معلوم باشد */
.cp-card.is-off { opacity: .62; border-style: dashed; }

.cp-top {
  display: flex; align-items: center; gap: 11px;
  flex-wrap: wrap;
}

.cp-code {
  flex: 1; min-width: 0;
  font-family: ui-monospace, monospace; direction: ltr;
  font-size: .95rem; font-weight: 900;
  padding: 5px 12px; border-radius: 9px;
  background: var(--green-100); color: var(--green-text-soft);
  overflow: hidden; text-overflow: ellipsis;
}

.cp-value {
  font-size: 1.05rem; font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.cp-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.cp-tag {
  font-size: .69rem; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--slate);
}
.cp-tag.is-ship {
  background: var(--green-100); color: var(--green-text-soft);
}

.cp-why {
  margin: 0; padding: 7px 10px; border-radius: 8px;
  font-size: .73rem; line-height: 1.8;
  background: var(--warn-bg); color: var(--warn-text);
}

.cp-meta {
  display: flex; flex-wrap: wrap; gap: 5px 11px;
  font-size: .71rem; color: var(--slate);
}

.cp-acts {
  display: flex; gap: 9px; align-items: center;
  padding-top: 10px; margin-top: auto;
  border-top: 1px solid var(--line);
}
.cp-acts form { display: contents; }

@media (max-width: 640px) {
  .cp-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   درخت دسته‌بندی — باز و بسته
   ========================================================================== */
.cg-tools {
  display: flex; gap: 8px; margin-bottom: 12px;
}

.cg-branch { padding: 4px; }

/*
  ⚠️ فلش پیش‌فرض مرورگر حذف می‌شود.

  در RTL سمت اشتباه می‌افتد و با فلش خودمان دوتا می‌شود.
*/
.cg-summary {
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; list-style: none;
}
.cg-summary::-webkit-details-marker { display: none; }
.cg-summary::marker { content: ""; }

.cg-summary .cg-row { flex: 1; min-width: 0; }

.cg-caret {
  flex: none; width: 22px; height: 22px;
  display: grid; place-items: center;
  font-size: .8rem; color: var(--slate);
  transition: transform .18s ease;
}

/* ⚠️ در RTL چرخش باید معکوس باشد */
details.cg-branch:not([open]) .cg-caret {
  transform: rotate(90deg);
}

.cg-count {
  flex: none; font-size: .68rem; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--green-100); color: var(--green-text-soft);
}

.cg-branch.is-leaf { padding-inline-start: 35px; }

@media (max-width: 640px) {
  .cg-count { display: none; }
  .cg-branch.is-leaf { padding-inline-start: 8px; }
}

/* تنظیمات نمایش دسته‌بندی */
/*
  ⚠️ جمع‌شونده — تنظیمی است که کم عوض می‌شود و نباید فهرست
  دسته‌ها را عقب بیندازد.
*/
.cg-settings {
  margin-bottom: 14px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--line);
}
.cg-settings > summary {
  padding: 13px 16px; cursor: pointer;
  font-size: .85rem; font-weight: 700;
  list-style: none;
}
.cg-settings > summary::-webkit-details-marker { display: none; }
.cg-settings > summary::marker { content: ""; }
.cg-settings[open] > summary {
  border-bottom: 1px solid var(--line);
}

.cg-settings-form { padding: 16px; }


/* ==========================================================================
   مرور درختیِ سلکت — `js/tree-picker.js`
   --------------------------------------------------------------------------
   ⚠️ جست‌وجوی سلکت جای این را نمی‌گیرد.

   جست‌وجو برای کسی است که نام دسته را می‌داند. این پنجره
   برای کسی است که می‌خواهد ساختار را ببیند و تصمیم بگیرد
   کالایش کجا بنشیند.
   ========================================================================== */

/*
  ⚠️ سلکت باید همهٔ عرض را بگیرد و دکمه فقط اندازهٔ خودش.

  بدون `min-width: 0` روی فرزند، سلکتِ داخل فلکس با یک گزینهٔ
  بلند از ظرفش بیرون می‌زند.
*/
.tp-row-host { display: flex; align-items: stretch; gap: 8px; }
.tp-row-host > :first-child { flex: 1; min-width: 0; }

.tp-open {
  flex: none; width: 44px; cursor: pointer;
  display: grid; place-items: center;
  font-size: 1.05rem; line-height: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 10px);
  background: var(--surface); color: var(--slate);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tp-open:hover {
  border-color: var(--green); background: var(--green-100);
  color: var(--green-text-soft);
}
.tp-open:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- پوشش و پنجره ---------- */
/*
  ⚠️ پنجره به `body` می‌رود، نه کنار فیلد.

  همان تلهٔ `vh-select`: کارت‌های پنل `overflow: hidden` دارند
  و پنجره داخلشان بریده می‌شود.
*/
.tp-veil {
  position: fixed; inset: 0; z-index: 1200;
  background: rgb(0 0 0 / .45);
  backdrop-filter: blur(2px);
}

.tp-pop {
  position: fixed; z-index: 1201;
  inset-block-start: 50%; inset-inline-start: 50%;
  transform: translate(50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: min(76vh, 680px);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg, 16px);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgb(0 0 0 / .28);
  overflow: hidden;
}

/* ⚠️ در LTR جهت جابه‌جایی برعکس است */
[dir="ltr"] .tp-pop { transform: translate(-50%, -50%); }

/* ⚠️ صفحهٔ پشت نباید اسکرول بخورد */
body.tp-lock { overflow: hidden; }

.tp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.tp-title { font-weight: 800; font-size: .95rem; }
.tp-x {
  width: 32px; height: 32px; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--slate); font-size: .9rem;
}
.tp-x:hover { background: var(--bg-subtle); }

.tp-search { position: relative; padding: 12px 16px 8px; }
.tp-search input {
  width: 100%; padding: 10px 12px;
  padding-inline-start: 38px;
  border: 1px solid var(--line); border-radius: var(--r-sm, 10px);
  background: var(--bg-subtle); font: inherit; color: inherit;
}
.tp-search input:focus {
  outline: none; border-color: var(--green); background: var(--surface);
}

/*
  ⚠️ `inset-inline-start` ، نه `-end`.

  در RTL «انتهای درون‌خطی» سمت چپ است — همان جایی که
  مرورگر خودش دکمهٔ پاک‌کردنِ `type="search"` را می‌گذارد؛
  ذره‌بین روی همان دکمه می‌افتاد.
*/
.tp-search-ic {
  position: absolute; inset-inline-start: 26px; top: 21px;
  opacity: .5; pointer-events: none;
}
.tp-search-ic::before { content: "🔍"; font-size: .85rem; }

.tp-body { flex: 1; overflow: auto; padding: 4px 12px 12px; }
.tp-empty { text-align: center; color: var(--slate); padding: 26px 0; }

/* ---------- خودِ درخت ---------- */
.tp-tree, .tp-kids { list-style: none; margin: 0; padding: 0; }

/*
  ⚠️ خط راهنما، همان الگوی درختوارهٔ پنل دسته‌ها.

  دو جای متفاوت با دو ظاهر متفاوت برای یک مفهوم، کاربر را
  مجبور می‌کند دو بار یاد بگیرد.
*/
.tp-kids {
  margin-inline-start: 13px;
  padding-inline-start: 14px;
  border-inline-start: 1.5px solid var(--line);
}

.tp-row { display: flex; align-items: center; gap: 2px; }

.tp-caret {
  flex: none; width: 26px; height: 30px; cursor: pointer;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--slate); font-size: .68rem;
  transition: transform .18s ease;
}
.tp-caret::before { content: "▾"; }
.tp-caret.is-empty { cursor: default; }
.tp-caret.is-empty::before { content: ""; }

/* ⚠️ بسته = چرخیده؛ در RTL به سمت چپ */
.tp-caret:not(.is-open) { transform: rotate(90deg); }

.tp-pick {
  flex: 1; min-width: 0; cursor: pointer; text-align: start;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin: 2px 0;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: inherit; font: inherit;
}
.tp-pick:hover { background: var(--green-100); border-color: var(--green); }

.tp-ic { flex: none; width: 20px; text-align: center; font-size: .92rem; }

.tp-name {
  flex: 1; min-width: 0; font-size: .86rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tp-num {
  flex: none; font-size: .64rem; font-weight: 700;
  padding: 2px 7px; border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--slate);
}

/*
  ⚠️ انتخاب فعلی باید بدون خواندن متن پیدا باشد.

  ⚠️ جفتِ `--green-btn` / `--on-green`، نه `--green` و سفید.

  `--green` رنگ **مرز و تأکید** است، نه پس‌زمینهٔ دکمه؛ متن
  سفید رویش نسبت کنتراست ۳٫۱ می‌دهد که زیر حد ۴٫۵ است و
  `manage.py check_contrast` می‌گیردش. این دو توکن برای همین
  کنار هم تعریف شده‌اند و در هر دو تم سنجیده‌اند.
*/
.tp-row.is-on > .tp-pick {
  background: var(--green-btn); border-color: var(--green-btn);
  color: var(--on-green);
}

/*
  ⚠️ شمارنده روی انتخاب، رنگش را عوض نمی‌کند.

  نسخهٔ پیشین سفیدِ ۲۲٪ روی سفید بود — نسبت ۱٫۰، یعنی عملاً
  نامرئی. همان چیپ روشنِ پیش‌فرض روی دکمهٔ سبز هم دیده می‌شود
  هم خوانا می‌ماند.
*/

/* ⚠️ نتیجهٔ جست‌وجو در میان والدهایی که فقط راه‌اند */
.tp-row.is-hit > .tp-pick { border-color: var(--green); }

.tp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--line); background: var(--bg-subtle);
}
.tp-cur {
  min-width: 0; font-size: .8rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tp-clear {
  flex: none; cursor: pointer; font: inherit; font-size: .78rem;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--slate);
}
.tp-clear:hover { border-color: var(--danger-text); color: var(--danger-text); }

@media (max-width: 640px) {
  .tp-pop {
    inset: auto 0 0 0; transform: none;
    width: 100%; max-height: 86vh;
    border-radius: var(--r-lg, 16px) var(--r-lg, 16px) 0 0;
  }
  [dir="ltr"] .tp-pop { transform: none; }
}


/* ==========================================================================
   چیدمان صفحهٔ نخست — `/panel/content/sections/`
   --------------------------------------------------------------------------
   ⚠️ بلوک‌های ثابت سایت و بخش‌های ساختنی در یک فهرست‌اند.

   ظاهرشان باید کمی فرق کند (نشانِ «بلوک سایت») ولی نه آن‌قدر
   که دو فهرست به‌نظر برسند — چون در صفحهٔ نخست هم‌رده‌اند.
   ========================================================================== */
.hl-help { margin: 0 0 14px; }

.hl-list { list-style: none; margin: 0 0 18px; padding: 0; }

.hl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin-bottom: 8px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.hl-item:hover { border-color: var(--green); }

/* ⚠️ ردیفِ در حال کشیدن باید از بقیه جدا دیده شود */
.hl-item.is-drag { opacity: .45; border-style: dashed; }

.hl-item.is-off { opacity: .55; border-style: dashed; }

.hl-grip {
  flex: none; cursor: grab; user-select: none;
  color: var(--slate); font-size: 1rem; line-height: 1;
  padding: 4px 2px;
}
.hl-grip:active { cursor: grabbing; }

.hl-ic {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px; font-size: 1rem;
  background: var(--green-100);
}

.hl-txt { flex: 1; min-width: 0; }
.hl-txt b {
  display: block; font-size: .88rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hl-txt small {
  display: block; font-size: .72rem; color: var(--slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hl-tag {
  flex: none; font-size: .65rem; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--slate);
}

/*
  ⚠️ «بلوک سایت» یعنی حذف ندارد.

  رنگ متفاوت، همان چیزی است که جای توضیح متنی را می‌گیرد:
  این ردیف‌ها را می‌شود خاموش و جابه‌جا کرد، ولی پاک نه.
*/
.hl-tag-core {
  background: var(--green-100); color: var(--green-text-soft);
}

.hl-off {
  flex: none; font-size: .65rem; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--danger-bg); color: var(--danger-text);
}

.hl-acts { flex: none; display: flex; align-items: center; gap: 3px; }

.hl-btn {
  width: 32px; height: 32px; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; font-size: .85rem;
  background: transparent; color: inherit;
}
.hl-btn:hover { background: var(--green-100); }
.hl-btn-x:hover { background: var(--danger-bg); }

/* ⚠️ فرم‌های تک‌دکمه‌ای جا نگیرند */
.hl-hidden-form { display: none; }

.hl-save {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .hl-tag { display: none; }
  .hl-txt small { display: none; }
}

/*
  ⚠️ دکمهٔ صفحه‌ساز وقتی صفحه واقعاً چیده شده، پررنگ می‌شود.

  بدون این، فهرست صفحه‌ها نشان نمی‌دهد کدام صفحه با متن ساده
  کار می‌کند و کدام با بلوک — و ادمین در فرمِ متن، متنی را
  ویرایش می‌کند که دیگر روی سایت دیده نمی‌شود.
*/
.btn-xs.is-on {
  border-color: var(--green); background: var(--green-100);
}


/* ==========================================================================
   ویرایشگر بلوکیِ توضیحات کالا — `js/desc-editor.js`
   --------------------------------------------------------------------------
   ⚠️ چرا این‌جا و نه یک فایل جدا.

   فقط در فرم کالا استفاده می‌شود و همان فرم این فایل را
   می‌خواند؛ یک درخواست کمتر.
   ========================================================================== */
.de { display: flex; flex-direction: column; gap: 12px; }

/* ---------- نوار افزودن ---------- */
.de-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px; border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
}

.de-add {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; font: inherit; font-size: .76rem; font-weight: 700;
  padding: 7px 12px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface); color: inherit;
}
.de-add:hover { border-color: var(--green); background: var(--green-100); }
.de-add span { font-size: .9rem; }

/* ---------- کارت بلوک ---------- */
.de-list { display: flex; flex-direction: column; gap: 10px; }

.de-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); overflow: hidden;
}

.de-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-subtle);
}
.de-ic { font-size: .9rem; }
.de-name { font-size: .78rem; font-weight: 700; }

.de-acts { margin-inline-start: auto; display: flex; gap: 3px; }

.de-mini {
  width: 26px; height: 26px; cursor: pointer;
  display: grid; place-items: center;
  border: 0; border-radius: 7px; font-size: .7rem;
  background: transparent; color: var(--slate);
}
.de-mini:hover { background: var(--green-100); color: var(--green-text-soft); }
.de-mini-x:hover { background: var(--danger-bg); color: var(--danger-text); }

.de-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.de-f {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface); color: inherit;
  font: inherit; font-size: .84rem;
}
.de-f:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100);
}
textarea.de-f { resize: vertical; min-height: 74px; line-height: 1.9; }

/* ---------- متنِ قالب‌بندی‌شده ---------- */
/*
  ⚠️ کادر ویرایش `div` است، نه `textarea`.

  قالب‌بندی روی بخشی از متن در `textarea` ممکن نیست. دلیل
  کامل و مرزِ امنیتی‌اش در `static/js/desc-editor.js`.
*/
.de-rich { display: flex; flex-direction: column; gap: 6px; }

.de-rt-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.de-rt-btn {
  width: 30px; height: 30px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-size: .82rem; line-height: 1;
}
.de-rt-btn:hover { border-color: var(--green); background: var(--green-100); }

.de-rt-btn.de-rt-b { font-weight: 900; }
.de-rt-btn.de-rt-i { font-style: italic; }
.de-rt-btn.de-rt-u { text-decoration: underline; text-underline-offset: 2px; }
/* قالبِ جای مکان‌نما — تا کاربر ببیند کلیک بعدی «برمی‌دارد» */
.de-rt-btn.is-on { background: var(--band, var(--green)); border-color: var(--band, var(--green)); color: #fff; }
.de-rich .de-rt-c.is-on { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-100); font-weight: 800; }

/*
  ⚠️ عرضِ صریح برای گزینهٔ رنگ.

  `.field select` در همین فایل عرض ۱۰۰٪ می‌دهد و از
  `.de-rt-c` خاص‌تر است؛ نتیجه‌اش این بود که گزینهٔ رنگ کل
  خط را می‌گرفت و دکمه‌های B/I/U را به خط بعد می‌راند.
  والدِ اضافه فقط برای بردن وزن انتخابگر است.
*/
.de-rich .de-rt-c { width: auto; min-width: 118px; flex: 0 0 auto; }

/*
  ⚠️ کادر ویرایش سقف ارتفاع دارد.

  توضیحات هزارکلمه‌ای بدون این، کادری چندصفحه‌ای می‌شد و
  بقیهٔ فرم — اندازه، چینش، دکمهٔ ثبت — از دسترس بیرون
  می‌رفت.
*/
.de-rt {
  min-height: 74px; max-height: 340px; overflow-y: auto;
  line-height: 1.9; overflow-wrap: anywhere;
}
.de-rt-1 { min-height: 0; max-height: none; }

/*
  ⚠️ همان کلاس‌های صفحهٔ کالا، این‌جا هم.

  کادر ویرایش دقیقاً همان `rt-*`ها را می‌سازد که قالب
  عمومی می‌سازد؛ بدون این قواعد، فروشنده در پنل هیچ
  تفاوتی نمی‌دید و «پررنگ» بی‌اثر به نظر می‌رسید.
  `pages.css` در پنل بارگذاری نمی‌شود.
*/
.de-rt .rt-b { font-weight: 800; }
.de-rt .rt-i { font-style: italic; }
.de-rt .rt-u { text-decoration: underline; text-underline-offset: 3px; }
.de-rt .rt-c-green { color: var(--green-text); }
.de-rt .rt-c-red { color: var(--danger-text); }
.de-rt .rt-c-amber { color: var(--warn-text); }
.de-rt .rt-c-blue { color: var(--info-text); }
.de-rt .rt-c-slate { color: var(--slate); }
.de-rt .rt-c-ink { color: var(--ink); }

/*
  ⚠️ جای‌نمای متن، دستی.

  `placeholder` روی `contenteditable` کار نمی‌کند؛ کادر
  خالی بدون این، یک مستطیل بی‌نشانه بود.
*/
.de-rt[data-empty="1"]::before {
  content: attr(data-place);
  color: var(--slate); opacity: .7; pointer-events: none;
}

/* ---------- تنظیمات کوچک ---------- */
/*
  ⚠️ حالا تا چهار کنترل در این ردیف می‌نشیند.

  پیش‌تر فقط «اندازه» و «چینش» بود و آن هم فقط برای تیتر و
  پاراگراف. با اضافه‌شدن «سمت» و «اندازهٔ تصویر»، ردیف روی
  موبایل می‌شکند — `flex-wrap` این را می‌گیرد، ولی خطِ
  جداکنندهٔ بالا لازم است تا از خودِ محتوای بلوک تفکیک شود.
*/
.de-opts {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.de-lab { display: flex; align-items: center; gap: 6px; }
.de-lab > span { font-size: .72rem; color: var(--slate); font-weight: 600; }

.de-sel {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface); color: inherit;
  font: inherit; font-size: .76rem;
}

/* ---------- فهرست نکته ---------- */
.de-items { display: flex; flex-direction: column; gap: 6px; }
.de-item { display: flex; align-items: center; gap: 5px; }

.de-more {
  align-self: flex-start; cursor: pointer; font: inherit;
  font-size: .74rem; font-weight: 700;
  padding: 6px 12px; border-radius: 8px;
  border: 1px dashed var(--line);
  background: transparent; color: var(--green-text);
}
.de-more:hover { border-color: var(--green); background: var(--green-100); }

/* ---------- کادر تصویر ---------- */
/*
  ⚠️ `input[type=file]` نامرئیِ تمام‌کادر است، نه پنهان.

  `display:none` یعنی کشیدن‌و‌رهاکردن کار نمی‌کند و کلیک هم
  به یک دکمهٔ جدا نیاز دارد. این‌طوری کل کادر هم کلیک‌پذیر
  است هم مقصد رهاکردن.
*/
.de-img {
  position: relative; overflow: hidden;
  min-height: 130px; border-radius: 11px;
  border: 1.5px dashed var(--line);
  background: var(--bg-subtle);
  display: grid; place-items: center;
}
.de-img::after {
  content: attr(data-note);
  position: absolute; inset-inline: 8px; bottom: 8px;
  padding: 5px 9px; border-radius: 7px;
  font-size: .7rem; text-align: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--slate);
  pointer-events: none;
}
.de-img input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
  width: 100%; height: 100%;
}
.de-img img { width: 100%; height: 100%; object-fit: cover; }
.de-img.has-img { border-style: solid; min-height: 160px; }
.de-img.is-over { border-color: var(--green); background: var(--green-100); }
.de-img.is-busy { opacity: .6; }

/* ---------- تصویر و متن ---------- */
.de-two { display: grid; gap: 10px; }
@media (min-width: 640px) {
  .de-two { grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
}
.de-two-txt { display: flex; flex-direction: column; gap: 8px; }

.de-note { font-size: .74rem; color: var(--slate); }

.de-empty {
  padding: 22px; text-align: center;
  font-size: .8rem; color: var(--slate);
  border: 1px dashed var(--line); border-radius: 12px;
}


/* ==========================================================================
   ورود دسته‌بندی از اکسل — `/panel/categories/`
   ========================================================================== */
.cg-import-body {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 4px;
}

.cg-sample { align-self: flex-start; }

.cg-import-form {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--line);
}

/*
  ⚠️ ورودی فایل باید اندازهٔ بقیهٔ فیلدها دیده شود.

  `input[type=file]` بدون استایل، ارتفاعش با فیلدهای کنارش
  نمی‌خواند و فرم به‌هم‌ریخته به‌نظر می‌رسد.
*/
.cg-import-form input[type="file"] {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; border-radius: 9px;
  border: 1px dashed var(--line);
  background: var(--surface); color: inherit;
  font: inherit; font-size: .82rem; cursor: pointer;
}
.cg-import-form input[type="file"]:hover { border-color: var(--green); }


/* ==========================================================================
   پیش‌نویس خودکار و خطاهای سمت مرورگر — `js/form-draft.js`
   ========================================================================== */
/*
  ⚠️ نوار بازگردانی باید بالای فرم و آشکار باشد.

  بدون آن، کاربر فرمِ «افزودن کالای تازه» را پر می‌بیند و
  نمی‌فهمد چرا — گمان می‌کند سیستم خراب است.
*/
.draft-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 14px;
  border-radius: 11px;
  font-size: .8rem;
  background: var(--green-100);
  color: var(--green-text-soft);
  border: 1px solid var(--green);
}

.draft-drop {
  margin-inline-start: auto; cursor: pointer; font: inherit;
  font-size: .74rem; font-weight: 700;
  padding: 5px 11px; border-radius: 8px;
  border: 1px solid currentcolor;
  background: transparent; color: inherit;
}
.draft-drop:hover { background: var(--surface); }

/*
  ⚠️ فیلد خطادار باید بدون خواندن متن پیدا باشد.

  فرم کالا بلند است و بخش‌های جمع‌شونده دارد؛ پیام خطای
  تنها، وقتی وسط یک فرم ششصد پیکسلی است، دیده نمی‌شود.
*/
.has-err > input,
.has-err > select,
.has-err > textarea,
.has-err input:not([type="checkbox"]):not([type="radio"]),
.has-err select,
.has-err textarea {
  border-color: var(--danger-text);
  background: var(--danger-bg);
}

.field-err.js-err { display: block; margin-top: 4px; }


/* ==========================================================================
   پیش‌نویس کالا (سمت سرور) — فهرست و یادداشت
   ========================================================================== */
.draft-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }

/*
  ⚠️ ظاهرش با کارت کالا فرق دارد — عمداً.

  پیش‌نویس یک کالا نیست؛ اگر شبیه ردیف‌های کالا باشد،
  فروشنده گمان می‌کند ثبتش کرده.
*/
.draft-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 12px;
  background: var(--bg-subtle);
  border: 1px dashed var(--line);
}
.draft-row:hover { border-color: var(--green); }

.draft-ic {
  flex: none; width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 9px; font-size: .95rem;
  background: var(--surface);
}

.draft-main { flex: 1; min-width: 0; }
.draft-main b {
  display: block; font-size: .86rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.draft-meta {
  display: block; font-size: .72rem; color: var(--slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ⚠️ زمان باقی‌مانده باید از بقیهٔ خط جدا دیده شود */
.draft-ttl { color: var(--danger-text); font-weight: 700; }

.draft-acts { flex: none; display: flex; align-items: center; gap: 8px; }
.draft-acts form { display: inline; }

@media (max-width: 560px) {
  .draft-meta { white-space: normal; }
}

/* ==========================================================================
   جدول مشخصات ویژه (رنگ × رم × حافظه)
   --------------------------------------------------------------------------
   ⚠️ جدول است، ولی `table` نیست.

   ستون‌ها را کاربر اضافه و کم می‌کند و در موبایل باید افقی
   اسکرول بخورد؛ با `grid` می‌شود تعداد ستون را از
   جاوااسکریپت داد، با `table` نه.
   ========================================================================== */
.vmx { display: flex; flex-direction: column; gap: 14px; }

.vmx-warn {
  margin: 0 0 12px;
  padding: 10px 13px; border-radius: 11px;
  font-size: .8rem; line-height: 1.9;
  background: var(--warn-bg); color: var(--warn-text);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}

.vmx-cur {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 12px; font-size: .78rem; font-weight: 700;
}
.vmx-cur select {
  width: auto; min-width: 150px;
  padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface); color: inherit; font: inherit;
  font-size: .78rem;
}

/* ---------- ستون‌ها: یک کارت با تراشه‌ها ---------- */
.vmx-attrs {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line);
}
.vmx-attrs-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.vmx-attrs-h b { font-size: .82rem; font-weight: 800; color: var(--ink); }
.vmx-attrs-h small { font-size: .72rem; color: var(--slate); }

.vmx-attrs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.vmx-attr {
  display: flex; align-items: center; gap: 4px; height: 42px;
  padding: 0 4px; border-radius: 12px;
  background: var(--surface-sunken); border: 1.5px solid var(--line);
  transition: border-color .15s, box-shadow .15s;
}
.vmx-attr:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-100); }
.vmx-attr-f {
  width: 130px; border: 0; background: transparent; color: inherit;
  font: inherit; font-size: .84rem; font-weight: 800; padding: 4px 2px;
}
.vmx-attr-f:focus { outline: none; }
.vmx-attr .vmx-x { width: 28px; height: 28px; border: 0; background: transparent; }

.vmx-add-attr, .vmx-add-row {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
  border: 1.5px dashed var(--green); border-radius: 11px; background: var(--surface);
  color: var(--green-700, var(--green-text)); cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 800;
  transition: background .15s;
}
.vmx-add-attr:hover, .vmx-add-row:hover { background: var(--green-100); }
.vmx-add-attr span, .vmx-add-row span { font-size: 1rem; line-height: 1; }

/* ---------- جدول در یک کارت ---------- */
/*
  ⚠️ اسکرول افقی داخل کارت، نه روی صفحه.

  با شش ستون مشخصه و ده ستون عدد، جدول از عرض هر صفحه‌ای بیرون
  می‌زند؛ بدون این، کلِ فرم افقی اسکرول می‌خورد.
*/
.vmx-card {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--surface);
}
.vmx-card:has(> .vmx-wrap:empty) { display: none; }
.vmx-wrap { overflow-x: auto; }
.vmx-table { min-width: max-content; }

.vmx-tr {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.vmx-tr:not(.vmx-th):hover, .vmx-tr:not(.vmx-th):focus-within { background: var(--surface-sunken); }

.vmx-th {
  align-items: flex-end; padding-top: 11px; padding-bottom: 9px;
  font-size: .7rem; font-weight: 800; color: var(--slate);
  background: var(--surface-sunken);
}
.vmx-th .vmx-td { line-height: 1.5; justify-content: center; text-align: center; }
.vmx-th .vmx-c-opt { justify-content: flex-start; text-align: start; }

/*
  ⚠️ عرض ثابت برای هر نوع ستون — همان کلاس روی سرستون و خانه‌ها.

  پیش‌تر همه ۱۰۸ پیکسل بودند: قیمت ده‌رقمی بریده می‌شد و «خالی =
  استعلامی» جا نمی‌شد، ولی ستون «حداقل» همان‌قدر جا می‌گرفت.
*/
.vmx-td { flex: 0 0 104px; min-width: 0; display: flex; align-items: center; }
.vmx-c-opt { flex-basis: 132px; }
.vmx-c-num { flex-basis: 100px; }
.vmx-c-money { flex-basis: 150px; }
.vmx-c-disc { flex-basis: 84px; }
.vmx-c-final { flex-basis: 150px; }
.vmx-no { flex: 0 0 30px; justify-content: center; }
.vmx-no i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green-100); color: var(--green-700, var(--green-text));
  font-style: normal; font-size: .72rem; font-weight: 900;
}
.vmx-act { flex: 0 0 72px; gap: 2px; justify-content: center; }

.vmx-f {
  width: 100%; height: 40px; box-sizing: border-box;
  padding: 0 10px; border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--bg, var(--surface)); color: var(--ink);
  font: inherit; font-size: .84rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
}
.vmx-f::placeholder { font-weight: 500; font-size: .72rem; color: var(--slate); }
.vmx-f:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-100);
}
.vmx-f:disabled { opacity: .45; cursor: not-allowed; }
.vmx-opt { font-weight: 800; }
.vmx-num, .vmx-money { text-align: center; }

/* قیمت نهایی — فقط خواندنی، به‌شکل برچسب */
.vmx-final {
  display: grid; place-items: center; width: 100%; height: 40px;
  border-radius: 10px; background: var(--green-100);
  font-size: .86rem; font-weight: 900; color: var(--green-700, var(--green-text));
  font-variant-numeric: tabular-nums;
}

.vmx-td.is-off { opacity: .5; }

.vmx-x {
  width: 32px; height: 32px; flex: none; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  border-radius: 9px; border: 0; background: transparent; color: var(--slate);
  font-size: .78rem; line-height: 1; transition: background .15s, color .15s;
}
.vmx-x:hover, .vmx-del:hover { background: var(--danger-bg); color: var(--danger-text); }
.vmx-dup:hover { background: var(--green-100); color: var(--green-text); }

.vmx-empty {
  margin: 0; padding: 14px; font-size: .78rem; color: var(--slate);
}

.vmx-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 14px; background: var(--surface-sunken);
}
.vmx-foot:empty { display: none; }
.vmx-rate { font-size: .72rem; font-weight: 600; color: var(--info-text); }

@media (max-width: 640px) {
  .vmx-c-opt { flex-basis: 116px; }
  .vmx-attr-f { width: 108px; }
}

/*
  ⚠️ برچسب ترکیب، در پنل هم لازم است.

  `pages.css` در پنل بارگذاری نمی‌شود؛ بدون این قاعده،
  «فلز · مشکی · ۱۲۸ گیگ» کنار نام کالا یک متن لخت می‌شد و
  از خودِ نام قابل تشخیص نبود.
*/
.cart-variant {
  display: inline-flex; align-items: center;
  margin-inline-start: 7px; padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: .7rem; font-weight: 700;
  background: var(--green-100); color: var(--green-text);
}

/* ==========================================================================
   انتخاب آیکون و رنگ مشخصه
   --------------------------------------------------------------------------
   ⚠️ مودال به `body` چسبیده، نه داخل فرم.

   دلیلش در `static/js/icon-picker.js`: کادر جست‌وجو داخل
   `<form>` یعنی Enter فرمِ کالا را می‌فرستد.

   ⚠️ `inset: 0` + `margin: auto`، نه `translate`.

   `inset-inline-start` منطقی است ولی `translate` فیزیکی؛
   ترکیبشان در RTL مودال را از کادر بیرون می‌برد.
   ========================================================================== */
.ipk {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center;
  padding: 16px;
  background: color-mix(in srgb, #000 46%, transparent);
  backdrop-filter: blur(3px);
}

/* ⚠️ صفحهٔ زیرین نباید هم‌زمان اسکرول بخورد. */
body.ipk-lock { overflow: hidden; }

.ipk-sheet {
  width: min(620px, 100%);
  max-height: min(86vh, 720px);
  display: flex; flex-direction: column; gap: 11px;
  padding: 16px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -30px color-mix(in srgb, #000 70%, transparent);
}

/*
  ⚠️ هر بخشِ ثابت باید `flex: none` بگیرد.

  ورق مودال یک ستون `flex` با `max-height` است؛ بدون این،
  مرورگر برای جاکردن شبکهٔ آیکون، نوار گروه‌ها را از ۳۲
  پیکسل به ۱۴ پیکسل فشرد و چیپ‌ها نصف شدند.
*/
.ipk-head, .ipk-top, .ipk-find, .ipk-tabs,
.ipk-paste, .ipk-foot { flex: none; }

.ipk-head { display: flex; align-items: center; gap: 10px; }
.ipk-title { margin: 0; font-size: .95rem; font-weight: 800; }

.ipk-x {
  margin-inline-start: auto;
  width: 34px; height: 34px; flex: none;
  border-radius: 11px; border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--slate);
  font: inherit; cursor: pointer;
}
.ipk-x:hover { color: var(--ink); border-color: var(--line-strong); }

/* ---------- پیش‌نمایش و رنگ ---------- */
.ipk-top {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 16px;
  background: var(--bg-subtle); border: 1px solid var(--line);
}

.ipk-prev {
  --ipk-tint: var(--green-text);
  width: 48px; height: 48px; flex: none;
  margin-inline-end: 4px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ipk-tint);
  background: radial-gradient(circle at 32% 28%,
    color-mix(in srgb, currentColor 24%, var(--surface)),
    color-mix(in srgb, currentColor 8%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
}
/* ⚠️ خالی، دایرهٔ سفیدِ مرموز نباشد. */
.ipk-prev.is-empty {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.ipk-prev.is-empty::after {
  content: "＋"; color: var(--slate-light);
  font-size: 1.1rem; line-height: 1;
}
.ipk-prev-in { display: grid; place-items: center; }
.ipk-prev svg { width: 24px; height: 24px; display: block; }

.ipk-em { font-size: 1.25rem; line-height: 1; font-weight: 400; }

.ipk-colors {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}

.ipk-dot {
  width: 26px; height: 26px; flex: none; cursor: pointer;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--line);
  padding: 0; background: var(--surface);
}
.ipk-dot.is-on {
  border-color: var(--surface);
  box-shadow: 0 0 0 2px var(--green-btn);
}
/* ⚠️ «پیش‌فرض» رنگ ندارد، پس با خطِ اریب نشان داده می‌شود. */
.ipk-dot.is-auto {
  background: linear-gradient(135deg,
    var(--surface) 44%, var(--line-strong) 44%,
    var(--line-strong) 56%, var(--surface) 56%);
}

.ipk-free { position: relative; width: 26px; height: 26px; flex: none; }
/*
  ⚠️ `input[type=color]` قابِ خودش را دارد.

  بدون برداشتنِ ظاهرِ پیش‌فرض، یک مربعِ رنگی با حاشیهٔ
  سیستمی کنار دایره‌های پالت می‌نشیند و ردیف ناهماهنگ
  می‌شود.
*/
.ipk-free-f {
  width: 100%; height: 100%; padding: 0; cursor: pointer;
  border: 0; background: none; border-radius: 50%;
  -webkit-appearance: none; appearance: none;
}
.ipk-free-f::-webkit-color-swatch-wrapper { padding: 0; }
.ipk-free-f::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ipk-free-f::-moz-color-swatch { border: 0; border-radius: 50%; }
.ipk-free::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- جست‌وجو و گروه‌ها ---------- */
.ipk-find {
  width: 100%; padding: 10px 13px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg-subtle); color: inherit; font: inherit;
  font-size: .85rem;
}
.ipk-find:focus {
  outline: none; border-color: var(--green);
  background: var(--surface);
}

/* ⚠️ نوار گروه‌ها افقی اسکرول می‌خورد، نه اینکه بشکند. */
.ipk-tabs {
  display: flex; gap: 6px; overflow-x: auto;
  padding-bottom: 3px; scrollbar-width: thin;
}
.ipk-tab {
  flex: none; cursor: pointer;
  padding: 6px 12px; border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--slate);
  font: inherit; font-size: .76rem; font-weight: 600;
  white-space: nowrap;
}
.ipk-tab:hover { color: var(--ink); }
.ipk-tab.is-on {
  background: var(--green-btn); border-color: var(--green-btn);
  color: var(--on-green); font-weight: 700;
}

/* ---------- شبکهٔ آیکون ---------- */
.ipk-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  padding: 4px; border-radius: 14px;
  background: var(--bg-subtle);
}

.ipk-cell {
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px; border-radius: 12px;
  border: 1px solid transparent;
  background: var(--surface); color: var(--ink-soft);
  font: inherit;
}
.ipk-cell:hover { border-color: var(--green); color: var(--green-text); }
.ipk-cell.is-on {
  border-color: var(--green-btn); color: var(--green-text);
  background: var(--green-50);
  box-shadow: 0 0 0 1px var(--green-btn);
}
.ipk-cell-ic { display: grid; place-items: center; height: 24px; }
.ipk-cell svg { width: 22px; height: 22px; display: block; }
.ipk-cell-t {
  font-size: .64rem; font-weight: 600; color: var(--slate);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}

.ipk-empty {
  grid-column: 1 / -1; margin: 0; padding: 26px 10px;
  text-align: center; font-size: .82rem; color: var(--slate);
}

/* ---------- چسباندن ---------- */
.ipk-paste { display: flex; align-items: center; gap: 9px; }
.ipk-paste-t { flex: none; font-size: .76rem; color: var(--slate); }
.ipk-paste-f {
  flex: 1; min-width: 0; padding: 8px 12px;
  border-radius: 11px; border: 1px dashed var(--line-strong);
  background: var(--surface); color: inherit; font: inherit;
  font-size: .8rem;
}
.ipk-paste-f:focus { outline: none; border-color: var(--green); }

.ipk-foot { display: flex; gap: 8px; justify-content: flex-end; }
.ipk-foot .btn { font-size: .82rem; }

@media (max-width: 600px) {
  .ipk { padding: 0; align-items: end; }
  .ipk-sheet {
    width: 100%; max-height: 92vh;
    border-radius: 22px 22px 0 0;
  }
  .ipk-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
}

/* ---------- دکمهٔ آیکون در ردیف ستون‌ها ---------- */
.vmx-attr-ic {
  width: 30px; height: 30px; flex: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 9px; padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-subtle); color: var(--green-text);
  font: inherit; font-size: .9rem; line-height: 1;
}
.vmx-attr-ic:hover { border-color: var(--green); }
.vmx-attr-ic svg { width: 17px; height: 17px; display: block; }
/* ⚠️ ستون بی‌آیکون یک «+» کم‌رنگ می‌گیرد، نه جای خالی. */
.vmx-attr-ic.is-empty { color: var(--slate-light); }
.vmx-attr-ic .ipk-em { font-size: 1rem; }

/* ==========================================================================
   صف بازبینی محتوا — `templates/cms/content_review.html`
   --------------------------------------------------------------------------
   ⚠️ یک صف برای هشت نوع محتوا.

   ردیف‌ها از جدول‌های متفاوت می‌آیند و طول عنوانشان خیلی فرق
   می‌کند (نکتهٔ صفحهٔ ورود کوتاه، عنوان مطلب وبلاگ بلند). پس
   عرضِ ستون‌ها ثابت نیست و ردیف با `flex-wrap` روی موبایل
   می‌شکند.
   ========================================================================== */
.cr-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.cr-tabs-sub { margin-bottom: 16px; }

.cr-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--slate);
  font-size: .78rem; font-weight: 700; text-decoration: none;
}
.cr-tab.is-on {
  background: var(--green-btn); color: var(--on-green);
  border-color: var(--green-btn);
}

/*
  شمارِ در انتظار.

  ⚠️ `--danger` پس‌زمینه نمی‌شود.

  در تم تیره مقدارش `#EF4444` است و سفید رویش فقط ۳٫۷۶
  کنتراست دارد — زیر حد WCAG AA. `--danger-text` در هر دو تم
  برای متن ساخته شده، پس همان را روی پس‌زمینهٔ ملایم
  می‌گذاریم به‌جای سفید روی قرمزِ روشن.
*/
.cr-n {
  min-width: 18px; padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--danger-bg); color: var(--danger-text);
  font-size: .68rem; font-weight: 800; text-align: center;
}

/* ⚠️ روی زبانهٔ فعال (زمینهٔ سبز) هم باید خوانا بماند. */
.cr-tab.is-on .cr-n {
  background: var(--surface); color: var(--danger-text);
}

.cr-empty {
  padding: 28px; text-align: center;
  color: var(--slate); font-size: .84rem;
}

.cr-list { display: flex; flex-direction: column; gap: 10px; }

.cr-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface);
}

.cr-main { min-width: 0; flex: 1 1 260px; }

.cr-kind {
  display: inline-block; margin-bottom: 4px;
  padding: 2px 9px; border-radius: var(--r-full);
  background: var(--bg-subtle); color: var(--slate);
  font-size: .68rem; font-weight: 700;
}

.cr-title {
  margin: 0; font-size: .92rem; font-weight: 800;
  /* ⚠️ عنوانِ بلند نباید ردیف را بکشد. */
  overflow-wrap: anywhere;
}

.cr-meta { margin: 4px 0 0; font-size: .72rem; color: var(--slate); }

.cr-note {
  margin: 6px 0 0; padding: 5px 9px; border-radius: 9px;
  background: var(--bg-subtle);
  font-size: .72rem; color: var(--slate);
}

.cr-acts {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.cr-form { display: flex; gap: 6px; align-items: center; margin: 0; }

.cr-input {
  width: 150px; padding: 5px 9px; border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface); color: inherit;
  font: inherit; font-size: .74rem;
}

@media (max-width: 560px) {
  .cr-acts, .cr-form { width: 100%; }
  .cr-input { flex: 1 1 auto; width: auto; }
}

/*
  «در انتظار تأیید» روی کارت‌های مدیریت محتوا.

  ⚠️ جدا از شمارِ «فعال» است.

  ردیفی می‌تواند تیکِ فعال داشته باشد و هنوز روی سایت نباشد،
  چون تأیید نشده. یک عدد برای هر دو، همان سوءتفاهمی را
  می‌سازد که این گردش کار برای رفعش ساخته شد.
*/
.ct-pending {
  display: block; margin-top: 5px;
  font-size: .7rem; font-weight: 700;
  color: var(--warn-text);
}

/* ==========================================================================
   قیمت پلکانی — جدول فشرده

   یک سرستون برای همه، هر پله یک خط. واحد هر عدد («عدد به بالا»،
   «تومان»، «٪») داخل خودِ کادر است تا بدون برچسب تکراری معلوم باشد
   هر عدد چیست. خالص دریافتی یک خط باریک زیر همان پله است.

   ⚠️ همهٔ کلاس‌ها زیر `.tiers` — `.dyn-row` در `pages.css` برای
   مشخصات فنی هم به کار می‌رود و نباید تغییر کند.
   ========================================================================== */
.tiers {
  --tier-cols: 34px minmax(120px, .9fr) minmax(170px, 1.4fr) minmax(96px, .6fr) 148px 38px;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--surface);
  counter-reset: tier;
}
.tiers .tier-head {
  display: grid; grid-template-columns: var(--tier-cols); gap: 10px; align-items: center;
  padding: 10px 14px; background: var(--surface-sunken);
  border-bottom: 1px solid var(--line);
  font-size: .72rem; font-weight: 800; color: var(--slate);
}
.tiers.is-empty .tier-head { display: none; }
.tiers .tier-rows { gap: 0; }

.tiers .tier-row {
  display: grid; grid-template-columns: var(--tier-cols); gap: 6px 10px; align-items: center;
  padding: 12px 14px; margin: 0; border: 0; border-radius: 0; background: transparent;
  border-bottom: 1px solid var(--line);
  counter-increment: tier;
  transition: background .15s;
}
.tiers .tier-row:hover, .tiers .tier-row:focus-within { background: var(--surface-sunken); }

.tiers .tier-no {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--green-100, var(--success-bg)); color: var(--green-700, var(--success-text));
  font-size: .75rem; font-weight: 900;
}
.tiers .tier-no::before { content: counter(tier, persian); }

.tiers .tier-cell { display: block; min-width: 0; margin: 0; }

/* کادر با واحدِ چسبیده */
.tiers .tier-in {
  display: flex; align-items: center; height: 42px; min-width: 0;
  border: 1.5px solid var(--line); border-radius: 11px; background: var(--bg, var(--surface));
  transition: border-color .15s, box-shadow .15s;
}
.tiers .tier-in:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-100, var(--success-bg)); }
.tiers .tier-in input {
  flex: 1; min-width: 0; height: 100%; padding: 0 12px;
  border: 0 !important; border-radius: 11px; background: transparent !important;
  box-shadow: none !important; outline: 0;
  font: inherit; font-size: .9rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tiers .tier-in i {
  flex: none; padding: 0 10px; font-style: normal; white-space: nowrap;
  font-size: .7rem; font-weight: 700; color: var(--slate);
  border-inline-start: 1px solid var(--line); line-height: 26px;
}
.tiers .tier-in-pct i { padding: 0 11px; font-size: .85rem; }

/* همکار / همه */
.tiers .tier-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; height: 42px;
  border-radius: 11px; background: var(--surface-sunken); border: 1px solid var(--line);
}
.tiers .tier-seg button {
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: inherit; font-size: .76rem; font-weight: 800; color: var(--slate);
  transition: background .15s, color .15s;
}
.tiers .tier-seg button:hover { color: var(--ink); }
.tiers .tier-seg button.on {
  background: var(--surface); color: var(--green-700, var(--success-text));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

.tiers .tier-del {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: var(--slate); transition: background .15s, color .15s;
}
.tiers .tier-del:hover { background: var(--danger-bg); color: var(--danger-text); }

/* خط پایین پله: خالص و هشدار */
.tiers .tier-foot { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.tiers .tier-foot:not(:has(:not([hidden]))) { display: none; }
.tiers .net-out {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
  background: transparent;
}
.tiers .net-out[hidden], .tiers .tier-warn[hidden] { display: none; }
.net-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-sunken); color: var(--slate);
  font-size: .72rem; font-weight: 600;
}
.net-chip b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.net-chip.is-net { background: var(--green-100, var(--success-bg)); color: var(--green-700, var(--success-text)); }
.net-chip.is-net b { color: inherit; }
.tiers .tier-warn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-text);
  font-size: .72rem; font-weight: 700;
}
.tiers .tier-warn::before { content: "⚠"; }

.tiers .tier-empty {
  margin: 0; padding: 18px 16px; text-align: center;
  font-size: .8rem; color: var(--slate);
}
.tiers .tier-empty[hidden] { display: none; }

.tiers .tier-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: var(--surface-sunken);
}
.tiers .tier-add {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 1.5px dashed var(--green); border-radius: 10px; background: var(--surface);
  color: var(--green-700, var(--success-text)); cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 800;
  transition: background .15s;
}
.tiers .tier-add:hover { background: var(--green-100, var(--success-bg)); }
.tiers .tier-add span { font-size: 1rem; line-height: 1; }
.tiers .tier-rate { font-size: .72rem; color: var(--info-text); font-weight: 600; }

/* موبایل: هر پله کارت دوستونه با برچسب */
@media (max-width: 760px) {
  .tiers .tier-head { display: none; }
  .tiers .tier-row { grid-template-columns: 1fr 1fr; padding: 14px; row-gap: 10px; }
  .tiers .tier-no { grid-column: 1; }
  .tiers .tier-del { grid-column: 2; grid-row: 1; justify-self: end; }
  .tiers .tier-cell::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-size: .7rem; font-weight: 800; color: var(--slate);
  }
  .tiers .tier-c-price { grid-column: 1 / -1; }
  .tiers .tier-foot { grid-column: 1 / -1; }
}

/* خالص دریافتی در جدول مشخصات ویژه — همان تراشهٔ سبزِ پله‌ها */
.vmx-td-net { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; }
.vmx-net {
  display: block; align-self: center; max-width: 100%;
  padding: 2px 8px; border-radius: 999px;
  background: var(--green-100); color: var(--green-700, var(--green-text));
  font-size: .66rem; font-weight: 600; line-height: 1.7; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vmx-net b { font-weight: 800; font-variant-numeric: tabular-nums; }
.vmx-net[hidden] { display: none; }
/* خانه‌ها از بالا هم‌تراز — خط «خالص» زیر قیمت، ردیف را کج نکند */
.vmx-tr:not(.vmx-th) { align-items: flex-start; }
.vmx-tr:not(.vmx-th) .vmx-no, .vmx-tr:not(.vmx-th) .vmx-act { min-height: 40px; }


/* ---------- ویرایشگر بلوکی: ویدیو و فایل ---------- */
.de-img-video.has-img, .de-img-file.has-img { min-height: 0; }
.de-img video { display: block; width: 100%; max-height: 320px; background: #000; }
/* ⚠️ لایهٔ انتخاب فایل پایین را آزاد می‌گذارد تا دکمه‌های پخش کار کنند */
.de-img-video.has-img input[type="file"] { height: calc(100% - 54px); }
.de-img-video.has-img::after { bottom: auto; top: 8px; }
.de-img-file.has-img { padding: 14px 14px 46px; place-items: stretch; }
.de-file { display: flex; align-items: center; gap: 12px; text-align: start; }
.de-file-ext {
  flex: none; width: 44px; height: 52px; display: grid; place-items: end center; padding-bottom: 8px;
  border-radius: 8px 16px 8px 8px; direction: ltr;
  background: linear-gradient(160deg, #94a3b8, #475569); color: #fff;
  font-size: .6rem; font-weight: 900;
}
.de-file > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.de-file b { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.de-file small { font-size: .72rem; color: var(--slate); }