/* ============================================================
   سامانه دهیاری — دیزاین‌سیستم «مُهر سبز»
   Civic Emerald: سبز کاج + کاغذ گرم + طلایی مُهر
   RTL / Mobile-first / WCAG AA
   ============================================================ */

@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Estedad';
  src: url('../fonts/Estedad-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---- رنگ‌ها ---- */
  --paper: #f5f3ec;          /* پس‌زمینه کاغذی گرم */
  --surface: #ffffff;
  --surface-dim: #faf9f4;
  --ink: #1d2b24;            /* متن اصلی، سبز-مشکی */
  --ink-2: #56675d;          /* متن کم‌رنگ */
  --ink-3: #8a978f;          /* متن خیلی کم‌رنگ / placeholder */
  --line: #e5e2d5;           /* خط و حاشیه گرم */
  --line-strong: #cfccbd;

  --brand: #155e40;          /* سبز کاج — primary */
  --brand-ink: #0c3f2a;      /* هاور/تیره */
  --brand-soft: #e6efe8;     /* تینت پس‌زمینه */
  --brand-soft-2: #d3e4d9;

  --gold: #b8862b;           /* طلایی مُهر — تأکید */
  --gold-ink: #8a6420;       /* طلایی برای متن روی روشن */
  --gold-soft: #f7efdc;

  --danger: #b03028;
  --danger-soft: #fae8e6;
  --ok: #1e7a4e;
  --ok-soft: #e2f1e8;
  --warn: #9c5c10;
  --warn-soft: #f9efdb;
  --info: #1c5d8a;
  --info-soft: #e5eff6;

  /* ---- ابعاد ---- */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow-1: 0 1px 2px rgba(29,43,36,.05), 0 10px 28px -14px rgba(29,43,36,.16);
  --shadow-2: 0 2px 6px rgba(29,43,36,.07), 0 20px 48px -16px rgba(29,43,36,.24);
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  /* ---- فونت ---- */
  --font-body: 'Vazirmatn', tahoma, sans-serif;
  --font-display: 'Estedad', 'Vazirmatn', tahoma, sans-serif;
}

/* ---- ریست ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: balance;
}
::placeholder { color: var(--ink-3); opacity: 1; }
::selection { background: var(--brand-soft-2); }

/* اسکرول‌بار سایت‌نیتیو (نه خامِ مرورگر) */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
*::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   ۲) تایپوگرافی و شِل صفحه
   ============================================================ */
.h-display { font-size: clamp(24px, 5.5vw, 34px); font-weight: 800; }
.h-page    { font-size: clamp(20px, 4.5vw, 26px); font-weight: 750; }
.h-section { font-size: clamp(17px, 4vw, 20px);  font-weight: 700; }
.t-muted   { color: var(--ink-2); }
.t-small   { font-size: 13.5px; }
.t-num     { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(14px, 4vw, 28px);
}
.container--narrow { max-width: 760px; }

/* شِل اپ: هدر بالا + محتوا + ناوِ پایین در موبایل */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.shell__main {
  flex: 1;
  /* فضای انتهایی: ۶۴ ارتفاع پیل + ۱۴ حاشیه + تنفس — آخرین ردیف زیر پیل نیفتد */
  padding-block: clamp(16px, 4vw, 32px)
                 calc(clamp(16px, 4vw, 32px) + 92px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  .shell__main { padding-bottom: clamp(16px, 4vw, 32px); }
}

/* سربرگ صفحه */
.page-head { margin-bottom: clamp(16px, 4vw, 28px); }
.page-head__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.page-head__sub { color: var(--ink-2); font-size: 14px; margin-top: 2px; }

/* یوتیلیتی */
.stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.row     { display: flex; align-items: center; gap: var(--space-3); }
.row--between { justify-content: space-between; }
.wrap    { flex-wrap: wrap; }
.grow    { flex: 1; }
.grid    { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.hide-mobile  { display: none !important; }
@media (min-width: 900px) {
  .hide-mobile  { display: revert !important; }
  .hide-desktop { display: none !important; }
}

/* دسترس‌پذیری */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 12px; top: -48px;
  background: var(--brand); color: #fff; padding: 10px 18px;
  border-radius: var(--radius-sm); z-index: 1001; transition: top .2s;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ============================================================
   ۳) دکمه‌ها
   ============================================================ */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-bg-hover: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .18s ease, border-color .18s ease,
              color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn:active { transform: scale(.97); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--brand);
}
.btn[disabled], .btn.is-loading {
  opacity: .55; pointer-events: none;
}
.btn svg { width: 19px; height: 19px; flex: none; }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--brand);
  --btn-bg-hover: var(--brand-soft);
  border-color: var(--brand-soft-2);
}
.btn--ghost:hover { color: var(--brand-ink); }
.btn--soft {
  --btn-bg: var(--brand-soft); --btn-fg: var(--brand-ink);
  --btn-bg-hover: var(--brand-soft-2);
}
.btn--danger { --btn-bg: var(--danger); --btn-bg-hover: #8f251e; }
.btn--danger-soft {
  --btn-bg: var(--danger-soft); --btn-fg: var(--danger);
  --btn-bg-hover: #f3d5d2;
}
.btn--danger-soft:focus-visible,
.btn--danger:focus-visible {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--danger);
}
.btn--gold {
  --btn-bg: var(--gold); --btn-bg-hover: #9a6f21;
}
.btn--sm { min-height: 40px; padding: 6px 14px; font-size: 14px; border-radius: 9px; }
.btn--lg { min-height: 54px; font-size: 17px; border-radius: var(--radius); }
.btn--block { width: 100%; }
.btn--icon {
  min-width: 48px; padding: 10px;
}
.btn--icon.btn--sm { min-width: 40px; padding: 6px; }

/* اسپینر داخل دکمه هنگام ارسال */
.btn .spin {
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
  display: none;
}
.btn.is-loading .spin { display: inline-block; }
.btn.is-loading .btn__label { opacity: .75; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   ۴) فرم‌ها
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font-weight: 600; font-size: 14.5px;
  display: flex; align-items: center; gap: 6px;
}
.field__label .req { color: var(--danger); font-weight: 700; }
.field__hint { font-size: 13px; color: var(--ink-2); }
.field__error {
  font-size: 13px; color: var(--danger); display: none;
  align-items: center; gap: 5px;
}
.field.has-error .field__error { display: flex; }

.input, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 16px; /* جلوگیری از زوم iOS */
  transition: border-color .18s ease, background-color .18s ease;
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.8; }
/* فقط رنگ border عوض می‌شود — هیچ حلقه/هاله‌ای دور فیلد متنی */
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
}
.input[readonly] { background: var(--surface-dim); color: var(--ink-2); }
.input[dir="ltr"] { text-align: left; }

/* رینگ خطای ولیدیشن روی خود فیلد */
.ct-err-ring {
  border-color: var(--danger) !important;
  background: #fffafa;
  animation: errshake .3s ease;
}
@keyframes errshake {
  0%,100% { transform: translateX(0); }
  30% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
}

/* گروه ورودی با آیکون */
.input-wrap { position: relative; }
.input-wrap .input { padding-inline-start: 46px; }
.input-wrap__icon {
  position: absolute; inset-inline-start: 14px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--ink-3); pointer-events: none;
}
.input-wrap--btn .input { padding-inline-end: 52px; }
.input-wrap__btn {
  position: absolute; inset-inline-end: 6px; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 8px;
  color: var(--ink-2); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.input-wrap__btn:hover { background: var(--brand-soft); color: var(--brand); }
.input-wrap__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft-2);
}
.input-wrap__btn svg { width: 19px; height: 19px; }

/* چک‌باکس اختصاصی (نه نیتیو) */
.check {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 22px; height: 22px; flex: none;
  border: 2px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  display: grid; place-items: center;
  transition: background-color .15s, border-color .15s;
}
.check__box svg {
  width: 13px; height: 13px; color: #fff;
  opacity: 0; transform: scale(.5);
  transition: opacity .15s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.check input:checked + .check__box {
  background: var(--brand); border-color: var(--brand);
}
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box {
  box-shadow: 0 0 0 3px var(--brand-soft-2);
}

/* ============================================================
   ۵) سلکت اختصاصی + کارت‌ها
   ============================================================ */
.sel { position: relative; }
.sel__btn {
  width: 100%; min-height: 50px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 15.5px; text-align: start; cursor: pointer;
  transition: border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.sel__btn:focus-visible { outline: none; border-color: var(--brand); }
.sel.open .sel__btn { border-color: var(--brand); }
.sel__btn .chev { width: 18px; height: 18px; color: var(--ink-3); flex: none;
  transition: transform .2s ease; }
.sel.open .chev { transform: rotate(180deg); }
.sel__btn .ph { color: var(--ink-3); }
.sel__menu {
  position: absolute; inset-inline: 0; top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  z-index: 200;
  max-height: 280px; overflow-y: auto;
  padding: 6px;
  opacity: 0; transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .16s ease, transform .18s ease;
}
/* وقتی پایین جا نیست: بازشدن به بالا */
.sel--up .sel__menu {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(6px) scale(.98);
}
.sel.open .sel__menu { opacity: 1; transform: none; pointer-events: auto; }
.sel__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px; min-height: 44px;
  border-radius: 8px; cursor: pointer; font-size: 15px;
}
.sel__opt:hover, .sel__opt.is-hl { background: var(--brand-soft); }
.sel__opt.is-sel { color: var(--brand-ink); font-weight: 600; }
.sel__opt.is-sel::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); flex: none;
}
.sel__search {
  position: sticky; top: 0; background: var(--surface); padding: 4px;
  margin: -6px -6px 4px; border-bottom: 1px solid var(--line);
}
.sel__search input {
  width: 100%; border: 0; padding: 10px 12px; font-size: 15px;
  background: transparent; outline: none;
}
.sel__empty { padding: 16px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* کارت */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.card__body { padding: clamp(16px, 3.5vw, 24px); }
.card__head {
  padding: 14px clamp(16px, 3.5vw, 24px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.card__title { font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card__title svg { width: 20px; height: 20px; color: var(--brand); }

/* استت‌کارت داشبورد */
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
}
.stat::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px;
  width: 4px; border-radius: 99px;
  background: var(--stat-color, var(--brand));
}
.stat__icon {
  width: 46px; height: 46px; flex: none;
  border-radius: 12px;
  background: var(--stat-soft, var(--brand-soft));
  color: var(--stat-color, var(--brand));
  display: grid; place-items: center;
}
.stat__icon svg { width: 23px; height: 23px; }
.stat > div:last-child { flex: 1; min-width: 0; }
.stat__label { font-size: 13px; color: var(--ink-2); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(16px, 4vw, 23px);
  font-weight: 800; line-height: 1.4;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stat__value small { font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-inline-start: 3px; }
.stat--gold   { --stat-color: var(--gold-ink);  --stat-soft: var(--gold-soft); }
.stat--danger { --stat-color: var(--danger); --stat-soft: var(--danger-soft); }
.stat--ok     { --stat-color: var(--ok);     --stat-soft: var(--ok-soft); }
.stat--info   { --stat-color: var(--info);   --stat-soft: var(--info-soft); }

/* ============================================================
   ۶) جدول‌ها (موبایل: کارت | دسکتاپ: جدول) + بج‌ها
   ============================================================ */
.table-scroll { overflow-x: auto; border-radius: var(--radius); }
.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 14.5px;
}
.table th {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 650;
  color: var(--ink-2);
  text-align: start;
  padding: 12px 16px;
  background: var(--surface-dim);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table tbody tr { transition: background-color .15s; }
.table tbody tr:hover { background: var(--surface-dim); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .t-num { font-variant-numeric: tabular-nums; }

/* موبایل: هر ردیف یک کارت؛ سلول‌ها لیبل‌دار */
@media (max-width: 767px) {
  .table--cards thead { display: none; }
  .table--cards, .table--cards tbody, .table--cards tr, .table--cards td { display: block; }
  .table--cards tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }
  .table--cards td {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px dashed var(--line);
    text-align: start;
  }
  .table--cards td:last-child { border-bottom: 0; }
  .table--cards td::before {
    content: attr(data-th);
    font-size: 12.5px; color: var(--ink-3); font-weight: 600;
    text-align: start; flex: none;
    min-width: 76px;
  }
  /* سلول‌های عددی: چیدمان RTL می‌ماند (لیبل راست)، خود ارقام درست رندر می‌شوند */
  .table--cards td[dir="ltr"] {
    direction: rtl;
    font-variant-numeric: tabular-nums;
  }
  .table--cards td.td-actions { background: var(--surface-dim); justify-content: flex-end; }
  .table--cards td.td-actions::before { display: none; }
  .table--cards td.td-primary {
    background: var(--brand-soft);
    font-weight: 700; font-size: 15.5px;
  }
}

/* موبایل: کارتِ دورِ جدول شفاف می‌شود تا کاغذِ صفحه دیده شود */
@media (max-width: 767px) {
  .card--flush {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .card--flush > .card__head {
    background: transparent;
    border-bottom: 0;
    padding-inline: 4px;
    margin-bottom: 2px;
  }
  .card--flush > .table-scroll { overflow: visible; border-radius: 0; }
  .card--flush .table { background: transparent; }

  /* جدول‌کارت داخل بدنهٔ کارت سفید: تفکیک بصری با پس‌زمینهٔ گرم */
  .card__body .table--cards tr {
    background: var(--surface-dim);
    box-shadow: none;
  }
}

/* صفحه‌بندی — پیل‌گروپ یکپارچه */
.pager {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
@media (min-width: 760px) {
  .pager { flex-direction: row; justify-content: space-between; }
}
.pager__nav {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 5px;
  box-shadow: var(--shadow-1);
}
.pager__arrow, .pager__num {
  min-width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding-inline: 8px;
  border-radius: 99px;
  color: var(--ink-2);
  font-size: 14.5px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s, color .16s, transform .12s;
}
.pager__arrow svg { width: 18px; height: 18px; }
.pager__arrow:hover, .pager__num:hover { background: var(--brand-soft); color: var(--brand-ink); }
.pager__arrow:active, .pager__num:active { transform: scale(.92); }
.pager__arrow.is-disabled { opacity: .3; pointer-events: none; }
.pager__num.is-current {
  background: linear-gradient(150deg, var(--brand), var(--brand-ink));
  color: #fff;
  box-shadow: 0 5px 14px -5px rgba(12,63,42,.55);
  pointer-events: none;
}
.pager__gap {
  color: var(--ink-3); font-size: 13px;
  padding-inline: 3px; letter-spacing: .15em;
  user-select: none;
}
.pager__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ink-2);
}
.pager__size { display: flex; align-items: center; gap: 8px; }
.pager__size .sel { min-width: 78px; }
.pager__size .sel__btn {
  min-height: 40px; padding: 6px 14px;
  font-size: 14px; border-radius: 99px;
  background: var(--surface);
}
.pager__count {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 12.5px; font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pager__count svg { width: 14px; height: 14px; }

/* چیپ‌های فیلتر فعال */
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; min-height: 36px;
  border-radius: 99px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-soft-2);
  color: var(--brand-ink);
  font-size: 12.5px; font-weight: 600;
}
.chip a {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(12,63,42,.1);
  color: var(--brand-ink);
}
.chip a:hover { background: var(--danger-soft); color: var(--danger); }
.chip a svg { width: 12px; height: 12px; }
.chip > svg { width: 13px; height: 13px; }
a.chip { cursor: pointer; }
a.chip:hover { filter: brightness(.96); }

/* بج وضعیت */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; min-height: 26px;
  border-radius: 99px;
  font-size: 12.5px; font-weight: 600;
  background: var(--badge-bg, var(--brand-soft));
  color: var(--badge-fg, var(--brand-ink));
  white-space: nowrap;
}
.badge svg, .badge .dot { width: 13px; height: 13px; flex: none; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge--ok     { --badge-bg: var(--ok-soft);     --badge-fg: var(--ok); }
.badge--danger { --badge-bg: var(--danger-soft); --badge-fg: var(--danger); }
.badge--warn   { --badge-bg: var(--warn-soft);   --badge-fg: var(--warn); }
.badge--info   { --badge-bg: var(--info-soft);   --badge-fg: var(--info); }
.badge--gold   { --badge-bg: var(--gold-soft);   --badge-fg: var(--gold-ink); }
.badge--muted  { --badge-bg: #eceae0;            --badge-fg: var(--ink-2); }
.badge--crit   { --badge-bg: #7c1d15;            --badge-fg: #ffe8e5; }
.t-ok { color: var(--ok); }

/* ============================================================
   ۷) آلرت، توست، حالت خالی، اسکلتون
   ============================================================ */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--al-bg, var(--info-soft));
  color: var(--al-fg, var(--info));
  font-size: 14.5px;
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert--danger { --al-bg: var(--danger-soft); --al-fg: var(--danger); }
.alert--ok     { --al-bg: var(--ok-soft);     --al-fg: var(--ok); }
.alert--warn   { --al-bg: var(--warn-soft);   --al-fg: var(--warn); }
.alert b { font-weight: 700; }

/* توست */
.toast-zone {
  position: fixed; z-index: 1200;
  inset-inline: 0; bottom: calc(92px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; padding-inline: 16px;
}
@media (min-width: 900px) { .toast-zone { bottom: 28px; } }
.toast {
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 420px);
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  font-size: 14.5px;
  pointer-events: auto;
}
.toast svg { width: 18px; height: 18px; flex: none; }
.toast--ok svg { color: #6fd39e; }
.toast--danger svg { color: #ff9d94; }

/* حالت خالی */
.empty {
  text-align: center;
  padding: clamp(28px, 8vw, 56px) 20px;
  color: var(--ink-2);
}
.empty__icon {
  width: 64px; height: 64px; margin-inline: auto;
  border-radius: 20px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.empty__icon svg { width: 30px; height: 30px; }
.empty__title { font-weight: 700; color: var(--ink); font-size: 16.5px; margin-bottom: 4px; }
.empty p { font-size: 14px; }

/* اسکلتون */
.skel {
  background: linear-gradient(90deg, #eceade 25%, #f6f4ec 50%, #eceade 75%);
  background-size: 200% 100%;
  animation: skel 1.3s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes skel { to { background-position: -200% 0; } }

/* ============================================================
   ۸) ناوبری: تاپ‌بار + باتم‌نو موبایل
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease, background-color .3s ease;
}
/* نخِ طلاییِ مُهر زیر هدر */
.topbar::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--gold) 18%, #e3c789 50%, var(--gold) 82%, transparent);
  opacity: .55;
}
.topbar.is-stuck {
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 22px -12px rgba(29,43,36,.35);
}

/* ---- طبقهٔ ۱: نوار اطلاعاتِ نازک ---- */
.topstrip {
  background: linear-gradient(100deg, var(--brand-ink), var(--brand) 60%, #1a7350);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  overflow: hidden;
  max-height: 40px;
  transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .24s ease;
}
.topbar.is-stuck .topstrip { max-height: 0; opacity: 0; }
.topstrip__in {
  display: flex; align-items: center; gap: 14px;
  min-height: 34px; flex-wrap: nowrap;
}
.topstrip__item {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.topstrip__item svg { width: 14px; height: 14px; opacity: .85; }
.topstrip__sep {
  width: 1px; height: 14px; flex: none;
  background: rgba(255,255,255,.22);
}
.topstrip__end { margin-inline-start: auto; }
.topstrip__live { display: inline-flex; align-items: center; gap: 6px; }
.topstrip__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6ee7a8;
  box-shadow: 0 0 0 0 rgba(110,231,168,.6);
  animation: dhPulse 2.4s ease-out infinite;
}
@keyframes dhPulse {
  0%   { box-shadow: 0 0 0 0 rgba(110,231,168,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(110,231,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(110,231,168,0); }
}
@media (max-width: 599px) {
  .topstrip__hide-xs { display: none; }
}

/* ---- طبقهٔ ۲: نوار اصلی ---- */
.topbar__in {
  display: flex; align-items: center; gap: 12px;
  min-height: 66px;
  padding-block: 9px;
  transition: min-height .3s cubic-bezier(.4,0,.2,1), padding-block .3s cubic-bezier(.4,0,.2,1);
}
.topbar.is-stuck .topbar__in { min-height: 56px; padding-block: 5px; }

/* ---- نشانِ رسمی (مُهر) ---- */
.brand {
  display: flex; align-items: center; gap: 11px;
  color: var(--ink); font-family: var(--font-display);
}
.brand__logo {
  position: relative;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--brand), var(--brand-ink));
  color: #fff;
  display: grid; place-items: center;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.2),
    0 3px 10px -3px rgba(12,63,42,.5);
  transition: width .3s ease, height .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
/* حلقهٔ طلاییِ دورِ مُهر */
.brand__logo::before {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  opacity: .5;
  transition: inset .3s ease, opacity .3s ease;
}
.brand:hover .brand__logo { transform: rotate(-8deg) scale(1.04); }
.brand:hover .brand__logo::before { inset: -5px; opacity: .85; }
.topbar.is-stuck .brand__logo { width: 38px; height: 38px; }
.brand__logo svg { width: 23px; height: 23px; }
.brand__name {
  font-size: 16.5px; font-weight: 750; line-height: 1.25;
  letter-spacing: -.01em;
}
.brand__sub {
  font-size: 11px; color: var(--gold-ink); font-family: var(--font-body);
  font-weight: 600; letter-spacing: .02em;
}

/* ---- منوی دسکتاپ با ایندیکیتور لغزان ---- */
.topbar__nav {
  display: none; position: relative;
  align-items: center; gap: 2px;
  margin-inline-start: 20px;
}
@media (min-width: 900px) { .topbar__nav { display: flex; } }
/* پیلِ لغزان زیر آیتم فعال */
.nav-slider {
  position: absolute; z-index: 0;
  top: 50%; left: 0; /* لنگر از چپ — هم‌راستا با offsetLeft در JS (RTL-safe) */
  height: 42px; width: 0;
  transform: translateY(-50%);
  border-radius: 11px;
  background: linear-gradient(150deg, var(--brand), var(--brand-ink));
  box-shadow: 0 4px 12px -4px rgba(12,63,42,.5);
  opacity: 0;
  transition:
    transform .42s cubic-bezier(.34,1.3,.5,1),
    width .42s cubic-bezier(.34,1.3,.5,1),
    opacity .2s ease;
  pointer-events: none;
}
.nav-link {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; min-height: 42px;
  border-radius: 11px;
  color: var(--ink-2); font-size: 14.5px; font-weight: 550;
  white-space: nowrap;
  transition: color .22s ease;
}
.nav-link svg { width: 18px; height: 18px; transition: transform .22s ease; }
/* پیل تیره زیرِ آیتمِ هاور/فوکوس می‌رود → متنِ آن سفید شود */
.nav-link:hover, .nav-link:focus-visible { color: #fff; }
.nav-link:hover svg { transform: translateY(-1px); }
.nav-link.is-active { color: #fff; font-weight: 650; }
/* وقتی پیل از زیرِ آیتم فعال به آیتم دیگری رفته، متنِ فعال دیگر سفید-روی-سفید نباشد */
.topbar__nav:hover .nav-link.is-active:not(:hover),
.topbar__nav:focus-within .nav-link.is-active:not(:focus-visible):not(:hover) { color: var(--brand-ink); }
.nav-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft-2); }

.topbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }

/* ---- دکمه‌های آیکونیِ هدر ---- */
.tb-icon {
  position: relative;
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s, color .18s, border-color .18s, transform .12s;
}
.tb-icon svg { width: 20px; height: 20px; }
.tb-icon:hover {
  background: var(--brand-soft);
  border-color: var(--brand-soft-2);
  color: var(--brand-ink);
}
.tb-icon:active { transform: scale(.93); }
.tb-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft-2); }
/* بجِ شمارنده روی زنگ */
.tb-icon__badge {
  position: absolute; top: 4px; inset-inline-end: 4px;
  min-width: 18px; height: 18px;
  padding-inline: 4px;
  border-radius: 99px;
  background: var(--danger);
  color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--surface);
}
/* ---- دکمهٔ جستجوی سراسری ---- */
.tb-search {
  display: none; align-items: center; gap: 9px;
  height: 42px; min-width: 190px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-dim);
  color: var(--ink-3);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .18s, background-color .18s, color .18s;
}
@media (min-width: 1080px) { .tb-search { display: flex; } }
.tb-search:hover { border-color: var(--brand-soft-2); background: var(--brand-soft); color: var(--brand-ink); }
.tb-search svg { width: 17px; height: 17px; flex: none; }
.tb-search__kbd {
  margin-inline-start: auto;
  display: inline-flex; gap: 2px;
  font-size: 10.5px; font-weight: 700;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: var(--font-body);
}
@media (min-width: 1080px) { .tb-icon--search { display: none; } }

/* ---- منوی کاربر ---- */
.user-menu { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 4px 5px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface-dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s, background-color .18s;
}
.user-btn:hover { border-color: var(--brand-soft-2); background: var(--brand-soft); }
.user-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft-2); }
.user-btn__caret {
  width: 15px; height: 15px; color: var(--ink-3);
  transform: rotate(-90deg);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.user-menu.open .user-btn__caret { transform: rotate(90deg); }
.user-btn__text { display: none; line-height: 1.25; text-align: start; }
@media (min-width: 700px) { .user-btn__text { display: block; } }
.user-btn__name { font-size: 13.5px; font-weight: 700; }
.user-btn__role { font-size: 10.5px; color: var(--ink-3); }
.avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: linear-gradient(150deg, #d9ae5a, var(--gold-ink));
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 750; font-size: 14px;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25);
}
.user-pop {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  min-width: 232px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: 7px;
  z-index: 140;
  opacity: 0; transform: translateY(-8px) scale(.97);
  pointer-events: none;
  transform-origin: top left;
  transition: opacity .18s ease, transform .24s cubic-bezier(.34,1.4,.6,1);
}
.user-menu.open .user-pop { opacity: 1; transform: none; pointer-events: auto; }
.user-pop__head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.user-pop__name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.user-pop__role { font-size: 11.5px; color: var(--ink-3); }
.user-pop__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; min-height: 44px;
  border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: 14px; font-weight: 550;
  transition: background-color .16s, color .16s;
}
.user-pop__item svg { width: 18px; height: 18px; flex: none; }
.user-pop__item:hover { background: var(--brand-soft); color: var(--brand-ink); }
.user-pop__item--danger { color: var(--danger); }
.user-pop__item--danger:hover { background: var(--danger-soft); color: var(--danger); }

.tb-icon.has-alert svg { animation: dhBellRing 5s ease-in-out infinite; transform-origin: 50% 15%; }
@keyframes dhBellRing {
  0%, 84%, 100% { transform: rotate(0); }
  86% { transform: rotate(11deg); }
  88% { transform: rotate(-9deg); }
  90% { transform: rotate(7deg); }
  92% { transform: rotate(-5deg); }
  94% { transform: rotate(0); }
}

/* نوار پیشرفتِ ارسال گروهی */
.bulk-bar {
  height: 12px;
  border-radius: 99px;
  background: var(--brand-soft);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(29,43,36,.1);
}
.bulk-bar__fill {
  display: block; height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), #2a9068);
  background-size: 28px 28px;
  background-image: linear-gradient(45deg,
    rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%);
  animation: dhStripe .9s linear infinite;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
@keyframes dhStripe { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) {
  .bulk-bar__fill { animation: none; }
}

/* ---- پالتِ جستجوی سراسری (Ctrl+K) ---- */
.pal-scrim {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(20,30,25,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.pal-scrim.open { opacity: 1; pointer-events: auto; }
.pal {
  position: fixed; z-index: 901;
  inset-inline: 0;
  top: 12vh;
  width: min(600px, calc(100% - 28px));
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(20,30,25,.5);
  overflow: hidden;
  opacity: 0; transform: translateY(-14px) scale(.97);
  pointer-events: none;
  transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.4,.6,1);
}
.pal.open { opacity: 1; transform: none; pointer-events: auto; }
.pal__bar {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.pal__bar > svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.pal__input {
  flex: 1; border: 0; background: transparent;
  font-size: 16px; font-family: var(--font-body);
  min-width: 0;
}
.pal__input:focus { outline: none; }
.pal__esc {
  font-size: 10.5px; font-weight: 700; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 7px; flex: none;
}
.pal__body { max-height: min(56vh, 440px); overflow-y: auto; padding: 7px; }
.pal__group {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  padding: 9px 12px 5px;
  letter-spacing: .03em;
}
.pal__item {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 10px 12px; min-height: 48px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: background-color .13s;
}
.pal__item:hover, .pal__item.is-cursor { background: var(--brand-soft); }
.pal__ico {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
}
.pal__item.is-cursor .pal__ico { background: var(--surface); }
.pal__ico svg { width: 17px; height: 17px; }
.pal__t { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.pal__s { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pal__empty { padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 14px; }
.pal__spin {
  width: 17px; height: 17px; flex: none;
  border: 2px solid var(--brand-soft-2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: dhSpin .7s linear infinite;
}
@keyframes dhSpin { to { transform: rotate(360deg); } }

/* ناوبری پایین — پیلِ شناور با «توپ پرنده» (پورت از AbaOneCall) */
.fnav {
  position: fixed; z-index: 110;
  inset-inline: 12px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  height: 64px;
  max-width: 520px;
  margin-inline: auto;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow:
    0 10px 26px -8px rgba(21,94,64,.30),
    0 2px 8px rgba(29,43,36,.08);
  display: flex;
  padding: 4px;
}
@media (min-width: 900px) { .fnav { display: none; } }

/* توپ پرنده */
.fnav__ball {
  position: absolute; top: 0; left: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 2px 8px rgba(12,63,42,.45);
  display: none;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}

.fnav__cell {
  position: relative; flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  border-radius: 20px;
  color: var(--ink-3);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* پیل فعال — با فنرِ pop باز/جمع می‌شود */
.fnav__pill {
  position: absolute; inset: 0;
  border-radius: 20px;
  background: linear-gradient(155deg, var(--brand), var(--brand-ink));
  transform: scale(.6);
  opacity: 0;
  transition:
    transform .38s cubic-bezier(.34,1.56,.64,1),
    opacity .14s ease;
}
.fnav__cell.is-active .fnav__pill { transform: scale(1); opacity: 1; }
.fnav__cell svg {
  position: relative;
  width: 22px; height: 22px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.fnav__cell.is-active { color: #fff; }
.fnav__cell:not(.is-active):active svg { transform: scale(.86); }
.fnav__label {
  position: relative;
  font-size: 10.5px; font-weight: 700; line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  max-height: 0; opacity: 0;
  transition: max-height .24s ease, opacity .18s ease .1s;
}
.fnav__cell.is-active .fnav__label { max-height: 14px; opacity: 1; }

/* ============================================================
   ۹) مودال / باتم‌شیت + دیالوگ تأیید
   ============================================================ */
.modal-scrim {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(23,32,27,.52);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }

.modal {
  position: fixed; z-index: 1001;
  inset-inline: 0; bottom: 0;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-2);
  max-height: min(88dvh, 720px);
  display: flex; flex-direction: column;
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.32,.72,.32,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.modal.open { transform: none; }
@media (min-width: 700px) {
  .modal {
    inset: 0; margin: auto;
    width: min(92vw, 560px);
    height: fit-content;
    border-radius: var(--radius-lg);
    transform: translateY(14px) scale(.97);
    opacity: 0; pointer-events: none;
    transition: transform .22s ease, opacity .2s ease;
  }
  .modal.open { transform: none; opacity: 1; pointer-events: auto; }
}
.modal__grab {
  width: 44px; height: 5px; border-radius: 99px;
  background: var(--line-strong);
  margin: 10px auto 0;
}
@media (min-width: 700px) { .modal__grab { display: none; } }
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.modal__title { font-size: 17px; font-weight: 750; }
.modal__x {
  width: 40px; height: 40px; flex: none;
  border: 0; background: var(--surface-dim); border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-2);
  transition: background-color .15s, color .15s;
}
.modal__x:hover { background: var(--danger-soft); color: var(--danger); }
.modal__x:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft-2); }
.modal__x svg { width: 18px; height: 18px; }
.modal__body { padding: 18px 20px; overflow-y: auto; }
.modal__foot {
  display: flex; gap: 10px; padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
}
.modal__foot .btn { flex: 1; }

/* دیالوگ تأیید */
.confirm__icon {
  width: 58px; height: 58px; margin-inline: auto;
  border-radius: 18px;
  background: var(--danger-soft); color: var(--danger);
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.confirm__icon svg { width: 28px; height: 28px; }
.confirm__msg { text-align: center; font-size: 15.5px; margin-bottom: 4px; }
.confirm__sub { text-align: center; font-size: 13.5px; color: var(--ink-2); }

/* ============================================================
   ۱۰) تب‌ها، فیلترها، انیمیشن، پرینت
   ============================================================ */
.tabs {
  display: flex; gap: 4px;
  background: var(--surface-dim);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 8px 16px;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-2);
  font-size: 14.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s, color .18s, box-shadow .18s;
}
.tab svg { width: 17px; height: 17px; }
.tab.is-active {
  background: var(--surface); color: var(--brand-ink);
  box-shadow: 0 1px 3px rgba(29,43,36,.12);
}
.tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-soft-2); }

/* نوار فیلتر/جستجو */
.filters {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .filters { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; }
}

/* شمارش نتایج */
.result-count {
  font-size: 13px; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
/* بدون این، svg بی‌اندازه (۳۰۰×۱۵۰ ذاتی) رندر می‌شود و در موبایل صفحه را سرریز می‌کند */
.result-count svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.result-count b { color: var(--brand-ink); font-variant-numeric: tabular-nums; }

/* انیمیشن ورود (با JS کلاس in می‌گیرد؛ بدون JS هم دیده می‌شود) */
.rv { opacity: 0; transform: translateY(14px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .55s cubic-bezier(.22,.9,.32,1);
}
html.no-anim .rv { opacity: 1; transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv { opacity: 1; transform: none; }
}

/* ============================================================
   ۱۲) کارت‌های منوی داشبورد
   ============================================================ */
.menu-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.menu-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  color: var(--ink);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--mc-color, var(--brand));
  color: var(--ink);
}
.menu-card:active { transform: scale(.985); }
.menu-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--brand);
}
.menu-card__icon {
  width: 52px; height: 52px;
  border-radius: 15px;
  background: var(--mc-soft, var(--brand-soft));
  color: var(--mc-color, var(--brand));
  display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.menu-card:hover .menu-card__icon { transform: scale(1.08) rotate(-4deg); }
.menu-card__icon svg { width: 26px; height: 26px; }
.menu-card h3 { font-size: 16.5px; font-weight: 700; }
.menu-card p { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.menu-card__go {
  position: absolute; inset-inline-end: 16px; top: 20px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-dim);
  color: var(--ink-3);
  display: grid; place-items: center;
  transition: background-color .2s, color .2s, transform .2s;
}
.menu-card__go svg { width: 15px; height: 15px; transform: scaleX(-1); }
.menu-card:hover .menu-card__go {
  background: var(--mc-color, var(--brand));
  color: #fff;
  transform: translateX(-3px);
}
.menu-card--gold   { --mc-color: var(--gold-ink);  --mc-soft: var(--gold-soft); }
.menu-card--danger { --mc-color: var(--danger);    --mc-soft: var(--danger-soft); }
.menu-card--info   { --mc-color: var(--info);      --mc-soft: var(--info-soft); }
.menu-card--ok     { --mc-color: var(--ok);        --mc-soft: var(--ok-soft); }

/* چیدمان فرم کنار لیست */
.layout-side { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) {
  .layout-side { grid-template-columns: 370px 1fr; }
  .layout-side__form { position: sticky; top: 78px; }
}

/* بنر خوش‌آمد داشبورد */
.hello-card {
  background:
    radial-gradient(500px 200px at 90% -30%, rgba(184,134,43,.18), transparent 60%),
    linear-gradient(140deg, var(--brand) 0%, var(--brand-ink) 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(20px, 5vw, 32px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.hello-card::after {
  content: '';
  position: absolute; inset-inline-end: -40px; bottom: -60px;
  width: 190px; height: 190px;
  border: 2px dashed rgba(245,243,236,.25);
  border-radius: 50%;
}
.hello-card__eyebrow {
  font-size: 13px; opacity: .85;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.hello-card__eyebrow svg { width: 15px; height: 15px; }
.hello-card h1 {
  font-size: clamp(21px, 5.5vw, 27px);
  font-weight: 800;
}
.hello-card p { font-size: 14px; opacity: .85; margin-top: 6px; max-width: 52ch; }

/* ============================================================
   ۱۳) صفحهٔ تخصیص بدهی
   ============================================================ */
.owner-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  max-height: 430px;
  overflow-y: auto;
  padding: 4px;
  margin: -4px;
}
.owner-card {
  position: relative;
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  background: var(--surface-dim);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .16s, background-color .16s, box-shadow .16s;
  /* لیست‌های بزرگ (۸۰۰+) فقط موارد قابل‌مشاهده رندر شوند */
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}
.owner-card:hover { border-color: var(--brand-soft-2); box-shadow: var(--shadow-1); }
.owner-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.owner-card__tick {
  width: 22px; height: 22px; flex: none;
  margin-top: 2px;
  border: 2px solid var(--line-strong);
  border-radius: 7px;
  display: grid; place-items: center;
  background: var(--surface);
  transition: background-color .15s, border-color .15s;
}
.owner-card__tick svg {
  width: 13px; height: 13px; color: #fff;
  opacity: 0; transform: scale(.5);
  transition: opacity .15s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.owner-card.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.owner-card.selected .owner-card__tick { background: var(--brand); border-color: var(--brand); }
.owner-card.selected .owner-card__tick svg { opacity: 1; transform: scale(1); }
.owner-card__name { font-weight: 650; font-size: 14.5px; display: block; }
.owner-card__meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--ink-2);
  margin-top: 3px;
}
.owner-card__meta svg { width: 13px; height: 13px; flex: none; color: var(--ink-3); }
.owner-card__meta[dir="ltr"] { justify-content: flex-end; }
.owner-card.hidden, .idisc-item.hidden { display: none; }

/* تب‌های تخفیف */
.disc-content { display: none; padding-top: 16px; }
.disc-content.active { display: block; animation: discIn .25s ease; }
@keyframes discIn { from { opacity: 0; transform: translateY(6px); } }

/* آیتم تخفیف فردی */
.idisc-list {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  max-height: 430px; overflow-y: auto;
  padding: 4px; margin: -4px;
}
.idisc-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--surface-dim);
}
.idisc-item h4 { font-size: 14px; margin-bottom: 8px; }
.idisc-item .idisc-inputs { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.idisc-item .input { min-height: 42px; padding: 8px 12px; font-size: 14px; }

/* جعبهٔ خلاصه محاسبات */
.sum-box {
  background:
    radial-gradient(420px 200px at 10% -40%, rgba(184,134,43,.22), transparent 60%),
    linear-gradient(150deg, var(--brand-ink), #082b1d);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(18px, 4vw, 28px);
  box-shadow: var(--shadow-2);
}
.sum-box h3 {
  font-size: 17px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.sum-box h3 svg { width: 20px; height: 20px; color: var(--gold); }
.sum-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
.sum-item {
  background: rgba(245,243,236,.08);
  border: 1px solid rgba(245,243,236,.14);
  border-radius: 12px;
  padding: 12px 14px;
}
.sum-item--hero {
  background: rgba(184,134,43,.16);
  border-color: rgba(184,134,43,.4);
}
.sum-item__label { font-size: 12px; opacity: .8; display: block; margin-bottom: 4px; }
.sum-item__value {
  font-family: var(--font-display);
  font-size: clamp(14px, 3.6vw, 16.5px);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.sum-box .submit-area { margin-top: 18px; }
.sum-box .btn--gold:focus-visible {
  box-shadow: 0 0 0 3px var(--brand-ink), 0 0 0 6px var(--gold);
}

/* ---- تسویه حضوری: جستجوی هوشمند، کاندیدها، سربرگ مالک، نوار ثبت ---- */
.settle-search { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.settle-search .field { min-width: min(100%, 260px); }
.settle-search > .btn { margin-top: 31px; } /* هم‌تراز با ورودی، زیرِ لیبل */
@media (max-width: 599px) { .settle-search > .btn { margin-top: 0; width: 100%; } }

.settle-cands { display: flex; flex-direction: column; gap: 10px; }
.settle-cands__grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.settle-cand {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--surface-dim);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.settle-cand:hover { border-color: var(--brand-soft-2); box-shadow: var(--shadow-1); background: var(--surface); }
.settle-cand__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settle-cand__name { font-weight: 650; font-size: 14.5px; }
.settle-cand__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  font-size: 13px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.settle-cand__meta bdi { white-space: nowrap; } /* شماره‌ها وسطِ عدد نشکنند؛ شکست فقط بین آیتم‌ها */
.settle-cand__meta bdi + bdi::before { content: '·'; color: var(--ink-3); margin-inline-end: 6px; }
.settle-cand__meta svg { width: 13px; height: 13px; flex: none; color: var(--ink-3); }
.settle-cand .btn { flex: none; }

.settle-owner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background:
    radial-gradient(360px 160px at 100% -30%, rgba(184,134,43,.14), transparent 60%),
    var(--brand-soft);
  border: 1px solid var(--brand-soft-2);
}
.settle-owner__avatar { width: 48px; height: 48px; font-size: 20px; }
.settle-owner__info { flex: 1; min-width: 200px; }
.settle-owner__name { font-family: var(--font-display); font-weight: 750; font-size: 17.5px; color: var(--brand-ink); }
.settle-owner__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.settle-owner__meta span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.settle-owner__meta svg { width: 14px; height: 14px; color: var(--brand); }
.settle-owner__stats { display: flex; flex-wrap: wrap; gap: 8px; }
.settle-stat {
  --ss-fg: var(--brand-ink); --ss-bg: var(--surface);
  min-width: 96px; padding: 8px 12px;
  border-radius: 12px;
  background: var(--ss-bg); color: var(--ss-fg);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1px;
}
.settle-stat--gold   { --ss-fg: var(--gold-ink); --ss-bg: var(--gold-soft);   border-color: transparent; }
.settle-stat--danger { --ss-fg: var(--danger);   --ss-bg: var(--danger-soft); border-color: transparent; }
.settle-stat__label { font-size: 13px; }
.settle-stat__value { font-family: var(--font-display); font-size: 16.5px; font-weight: 750; line-height: 1.3; }
.settle-stat__value small { font-size: 13px; font-weight: 500; }

.settle-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px;
  margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-dim);
  border: 1px dashed var(--line-strong);
}
.settle-bar__info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1; min-width: 0; }
@media (max-width: 599px) { .settle-bar .btn { width: 100%; } .settle-bar__hint { display: none; } }
.settle-disc { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gold-ink); margin-inline-start: 6px; }
.settle-disc svg { width: 13px; height: 13px; }
.t-danger { color: var(--danger); }

/* ============================================================
   ۱۱) صحنهٔ لاگین
   ============================================================ */
.login-scene {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center;
  /* وسط‌چین با margin و نه justify-content:
     اگر کارت از صفحه بلندتر شود، سرِ کارت بریده نمی‌شود */
  justify-content: flex-start;
  padding: clamp(16px, 5vw, 40px);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(184,134,43,.10), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(21,94,64,.12), transparent 60%),
    var(--paper);
  position: relative;
  overflow-x: hidden;   /* فقط افقی؛ عمودی باید قابل اسکرول بماند */
}
/* خطوط مزرعه — بافت لطیف پس‌زمینه */
.login-scene::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(21,94,64,.035) 0 1.5px,
    transparent 1.5px 26px
  );
  pointer-events: none;
}
.login-card {
  position: relative;
  margin-block: auto;   /* وسط‌چین امن — بدون بریده‌شدن در صفحه‌های کوتاه */
  width: 100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.login-card::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--gold), var(--brand));
}
.login-card__head {
  text-align: center;
  padding: clamp(28px, 6vw, 40px) 24px 8px;
}
.login-seal {
  width: 84px; height: 84px;
  margin-inline: auto;
  border-radius: 26px;
  background: linear-gradient(155deg, var(--brand) 0%, var(--brand-ink) 100%);
  color: var(--paper);
  display: grid; place-items: center;
  box-shadow:
    0 12px 28px -10px rgba(12,63,42,.55),
    inset 0 0 0 2px rgba(245,243,236,.22);
  margin-bottom: 18px;
  position: relative;
}
.login-seal::after {
  content: '';
  position: absolute; inset: -7px;
  border: 1.5px dashed var(--gold);
  border-radius: 32px;
  opacity: .55;
}
.login-seal svg { width: 42px; height: 42px; }
.login-card__title {
  font-size: clamp(23px, 6vw, 28px);
  font-weight: 800;
  letter-spacing: -.01em;
}
.login-card__sub {
  color: var(--ink-2);
  font-size: 14.5px;
  margin-top: 6px;
}
.login-card__badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  padding: 5px 14px;
  border-radius: 99px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 12.5px; font-weight: 650;
}
.login-card__badge svg { width: 14px; height: 14px; }
.login-card__body { padding: 22px clamp(20px, 5vw, 32px) 10px; }
.login-card__foot {
  text-align: center;
  padding: 16px 24px 22px;
  font-size: 12.5px;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  margin-top: 14px;
  background: var(--surface-dim);
}
.login-help {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--ink-2);
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.login-help svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--brand); }

/* گام OTP */
.otp-row { direction: ltr; display: flex; justify-content: center; }
.otp-input {
  width: min(100%, 260px);
  text-align: center;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  letter-spacing: .45em;
  padding-inline-end: 0 !important;
  padding-inline-start: .45em !important;
}

/* انتخاب روش ورود — دو کلید برای یک مقصد */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 4px;
  background: var(--surface-dim);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.segmented__b {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13.5px; font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}
.segmented__b svg { width: 17px; height: 17px; flex: none; }
.segmented__b:hover { color: var(--ink); }
.segmented__b.is-on {
  background: var(--surface);
  border-color: var(--brand-soft-2);
  color: var(--brand-ink);
  font-weight: 750;
  box-shadow: 0 1px 2px rgba(29,43,36,.06), 0 4px 12px -8px rgba(29,43,36,.3);
}
.segmented__b:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--surface-dim), 0 0 0 5px var(--brand);
}

/* ریل مراحل — فقط در مسیر سه‌گامیِ ثبت کد ملی */
.steprail {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 4px clamp(14px, 4vw, 26px) 0;
}
.steprail__i {
  position: relative;
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 7px;
  min-width: 0;
}
/* خط اتصال به گام قبلی؛ با inset-inline در RTL و LTR درست می‌نشیند */
.steprail__i:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 14px;
  inset-inline-end: 50%;
  width: 100%;
  height: 2px;
  background: var(--line-strong);
  border-radius: 2px;
}
.steprail__i.is-done::before,
.steprail__i.is-now::before { background: var(--brand); }
.steprail__dot {
  position: relative;
  z-index: 1;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  color: var(--ink-3);
  font-size: 13px; font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.steprail__dot svg { width: 15px; height: 15px; }
.steprail__i.is-done .steprail__dot {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.steprail__i.is-now .steprail__dot {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.steprail__lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.35;
}
.steprail__i.is-done .steprail__lbl { color: var(--ink-2); }
.steprail__i.is-now  .steprail__lbl { color: var(--brand-ink); font-weight: 750; }

/* دکمهٔ متنی — کم‌وزن‌ترین سطح کنش */
.btn--text {
  --btn-bg: transparent;
  --btn-fg: var(--ink-2);
  --btn-bg-hover: transparent;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}
.btn--text:hover { color: var(--brand-ink); text-decoration: underline; }
.btn--text svg { width: 16px; height: 16px; }

/* ============================================================
   ۱۵) پردهٔ باز شدن سایت — «مُهر خوردن سند»
   یک لحظهٔ حرکتِ هدفمند، نه افکتِ تزئینی.
   بدون JS هم خودِ CSS پرده را برمی‌دارد (انیمیشن forwards).
   ============================================================ */
.dh-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(700px 420px at 50% 40%, #1d7350 0%, var(--brand) 45%, var(--brand-ink) 100%);
  animation: dhSplashOut .36s cubic-bezier(.4, 0, .2, 1) .88s forwards;
}
.dh-splash__seal {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 28px;
  background: rgba(245, 243, 236, .1);
  border: 1.5px solid rgba(245, 243, 236, .28);
  display: grid; place-items: center;
  color: var(--paper);
  animation: dhSealStamp .72s cubic-bezier(.22, 1.2, .36, 1) both;
}
.dh-splash__seal svg {
  width: 48px; height: 48px;
  stroke-width: 1.8;
  /* سرو مثل مرکبِ مُهر روی کاغذ ظاهر می‌شود */
  stroke-dasharray: 92;
  stroke-dashoffset: 92;
  animation: dhSealInk .62s ease-out .2s forwards;
}
/* حلقهٔ خط‌چین طلایی که بسته می‌شود.
   دایره است نه مربعِ گرد: خط‌چین روی دایره یکنواخت پخش می‌شود
   و رنگ روشن‌تر از --gold انتخاب شده تا روی سبز تیره خوانا بماند. */
.dh-splash__ring {
  position: absolute;
  inset: -14px;
  border: 2px dashed #e7c684;
  border-radius: 50%;
  opacity: 0;
  animation: dhRingClose .74s cubic-bezier(.33, 1, .5, 1) .16s both;
}
.dh-splash__name {
  position: absolute;
  inset-inline: 0;
  top: calc(50% + 78px);
  text-align: center;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: 0;
  animation: dhNameIn .44s ease-out .42s both;
}

@keyframes dhSealStamp {
  0%   { transform: scale(1.5) translateY(-16px); opacity: 0; }
  55%  { transform: scale(.94)  translateY(0);    opacity: 1; }
  75%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes dhSealInk   { to { stroke-dashoffset: 0; } }
@keyframes dhRingClose {
  0%   { transform: rotate(-70deg) scale(1.4); opacity: 0; }
  55%  { opacity: .95; }
  100% { transform: rotate(0) scale(1); opacity: .75; }
}
@keyframes dhNameIn    { to { opacity: .96; transform: translateY(0); } }
@keyframes dhSplashOut { to { opacity: 0; visibility: hidden; } }

/* پرده هرگز نباید مانع شود: با کاهش حرکت یا بدون پشتیبانی، بلافاصله کنار می‌رود */
html.no-anim .dh-splash { display: none; }
@media (prefers-reduced-motion: reduce) {
  .dh-splash { display: none; }
}

/* موبایل: سربرگ کارت فشرده می‌شود تا فرم بالای خطِ تا بماند */
@media (max-width: 430px) {
  .login-card__head { padding-top: 22px; padding-bottom: 4px; }
  .login-seal { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 12px; }
  .login-seal::after { inset: -6px; border-radius: 25px; }
  .login-seal svg { width: 32px; height: 32px; }
  .login-card__title { font-size: 22px; }
  .login-card__sub { font-size: 13.5px; margin-top: 4px; }
  .login-card__badge { margin-top: 10px; }
  .login-card__body { padding-top: 16px; }
  .login-card__foot { padding: 12px 20px 16px; margin-top: 10px; }
  .dh-splash__seal { width: 82px; height: 82px; }
  .dh-splash__name { top: calc(50% + 68px); font-size: 15.5px; }
}

/* ============================================================
   ۱۴) رسید بدهی (پنل اعضا)
   ============================================================ */
.price-was {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.receipt {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.receipt__head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--brand-soft);
  border-bottom: 1.5px dashed var(--line-strong);
}
.receipt__seal {
  width: 46px; height: 46px; flex: none;
  border-radius: 14px;
  background: var(--brand); color: var(--paper);
  display: grid; place-items: center;
}
.receipt__seal svg { width: 24px; height: 24px; }
.receipt__title { font-weight: 750; font-size: 15.5px; }
.receipt__sub { font-size: 12px; color: var(--ink-2); }
.receipt__body { padding: 6px 18px; }
.receipt__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 14px;
}
.receipt__row:last-child { border-bottom: 0; }
.receipt__row .k { color: var(--ink-2); flex: none; }
.receipt__row .v { font-weight: 650; text-align: end; }
.receipt__total {
  background: var(--gold-soft);
  padding: 12px 18px;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 750;
}
.receipt__total .v { font-family: var(--font-display); font-size: 18px; color: var(--gold-ink); }
.receipt__foot {
  padding: 10px 18px 14px;
  font-size: 11.5px; color: var(--ink-3);
  text-align: center;
  border-top: 1.5px dashed var(--line-strong);
}

/* چاپ رسید: فقط رسید */
body.print-receipt-mode .shell,
body.print-receipt-mode .fnav,
body.print-receipt-mode .topbar,
body.print-receipt-mode .toast-zone { display: none !important; }
#receiptPrintZone { display: none; }
@media print {
  body.print-receipt-mode #receiptPrintZone {
    display: block;
    max-width: 420px;
    margin: 0 auto;
  }
  body.print-receipt-mode .modal, body.print-receipt-mode .modal-scrim { display: none !important; }
}

/* پرینت (گزارش‌ها) */
@media print {
  .topbar, .fnav, .btn, .filters, .toast-zone, .skip-link { display: none !important; }
  body { background: #fff; }
  .card, .stat { box-shadow: none; border-color: #bbb; }
  .table--cards thead { display: table-header-group; }
  .table--cards, .table--cards tbody { display: table; width: 100%; }
  .table--cards tr { display: table-row; box-shadow: none; border: 0; }
  .table--cards td { display: table-cell; border: 1px solid #ccc; }
  .table--cards td::before { display: none; }
}