/* ════════════════════════════════════════════════════
   COMPONENTS.CSS — طلاهاست
   کامپوننت‌های مشترک: کارت، جدول، بج، دکمه، فرم...
════════════════════════════════════════════════════ */

/* ── جهت متن: کلاس‌های کمکی LTR/RTL (روی ورودی دامنه، ایمیل، اعداد و ...) ── */
.ltr { direction: ltr; }
.rtl { direction: rtl; }


.fs-xs  { font-size: .75rem; }   /* کوچک */
.fs-xxs { font-size: .68rem; }   /* خیلی کوچک */



/* ── CARD ── */
.th-card {
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: background var(--t-mid), border-color var(--t-mid), box-shadow var(--t-fast);
  overflow: hidden;
}
.th-card:hover { box-shadow: var(--sh-md); }
.th-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--th-border);
}
.th-card-title { font-size: .9rem; font-weight: 600; color: var(--th-text-1); }
.th-card-body { padding: 18px; }

/* ── PAGE HEADER ── */
.th-page-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.th-page-title { font-size: 1.35rem; font-weight: 700; color: var(--th-text-1); line-height: 1.3; }
.th-page-sub { font-size: .82rem; color: var(--th-text-2); margin-top: 3px; }

/* ── STAT CARD ── */
.th-stat {
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.th-stat::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 3px; height: 100%;
  background: var(--stat-color, var(--th-brand));
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  opacity: .7;
}
.th-stat:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.th-stat-ico {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--stat-color, var(--th-brand)) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--stat-color, var(--th-brand));
}
.th-stat-val {
  font-size: 1.6rem; font-weight: 700; color: var(--th-text-1);
  line-height: 1; font-family: var(--font-num);
  direction: ltr; text-align: right;
}
.th-stat-lbl { font-size: .78rem; color: var(--th-text-2); font-weight: 500; }

/* ── TABLE ── */
.th-tbl-wrap { overflow-x: auto; }
.th-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.th-table th {
  text-align: right; padding: 10px 16px;
  font-size: .71rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--th-text-3);
  background: var(--th-surface-2); border-bottom: 1px solid var(--th-border);
  white-space: nowrap;
}
.th-table td { padding: 11px 16px; border-bottom: 1px solid var(--th-border); vertical-align: middle; }
.th-table tr:last-child td { border-bottom: none; }
.th-table tbody tr { transition: background var(--t-fast); }
.th-table tbody tr:hover td { background: var(--th-surface-2); }

/* ════════════════════════════════════════════════════
   جدول استاندارد Bootstrap — تک‌منبع مشترک همه‌ی جدول‌های داده
   ----------------------------------------------------------------
   استایل کلاس .table را با توکن‌های طلاهاست یکدست می‌کند تا همه‌ی
   لیست‌ها (دامنه/سرویس/کاربر/صورتحساب/...) ظاهر یکسان و حرفه‌ای
   بگیرند، بدون تغییر ساختار قالب‌ها.
   نکته‌ها:
   • روی th مستقیم اعمال می‌شود ⇒ هر سه نوع مارک‌آپ (با/بدون thead،
     با/بدون tr) پوشش داده می‌شود.
   • --bs-table-bg: transparent ⇒ سلول شفاف می‌ماند تا رنگ وضعیت
     ردیف (هم bgcolor و هم style=background-color) یکدست دیده شود.
   • دارک‌مود در darkmode.css مدیریت می‌شود (بعد از این فایل لود
     می‌شود و --bs-table-* را override می‌کند).
   ════════════════════════════════════════════════════ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--th-text-1);
  --bs-table-border-color: var(--th-border);
  --bs-table-hover-bg: color-mix(in srgb, var(--th-brand) 7%, transparent);
  --bs-table-hover-color: var(--th-text-1);
  vertical-align: middle;
  font-size: 1rem;
  color: var(--th-text-1);
}

/* سرستون‌ها — انتخابگر روی th تا همه‌ی حالت‌های مارک‌آپ پوشش یابد */
.table th {
  background: var(--th-surface-2);
  color: var(--th-text-2);
  font-weight: 600;
  vertical-align: middle;
  border-bottom: 2px solid var(--th-border-2);
  white-space: nowrap;
}

.table td { vertical-align: middle; }

/* caption بالای جدول */
.table > caption {
  caption-side: top;
  padding: 10px 4px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--th-text-1);
}

/* hover ملایم که رنگ وضعیت ردیف را پاک نمی‌کند (شفاف روی رنگ ردیف) */
.table tbody tr:hover > td,
.table tbody tr:hover > th {
  background-color: var(--bs-table-hover-bg);
}

/* جدول‌های فرمی «برچسب | ورودی» (مثل admin/edit-domain): چون .table عرض ۱۰۰٪
   دارد، بدون محدودیت ستون، فضای اضافی به ستون برچسب می‌رفت و ستون ورودی کوچک
   می‌شد. اینجا فقط جدول‌هایی که ورودی فرم دارند هدف می‌شوند: ستون اول (برچسب)
   به‌اندازه‌ی محتوا جمع می‌شود و ستون ورودی بقیه‌ی عرض را می‌گیرد. جدول‌های داده
   (بدون ورودی در سلول) دست‌نخورده می‌مانند. */
.table:has(.form-control, .form-select, textarea, .input-group) > tbody > tr > td:first-child,
.table:has(.form-control, .form-select, textarea, .input-group) > tr > td:first-child {
  width: 1%;
  white-space: nowrap;
}

/* جدول‌های داده/لیست (بدون ورودی فرم در سلول): حذف خطوط عمودیِ شطرنجی و
   نگه‌داشتن فقط جداکننده‌های افقی → ظاهر تمیزتر. جدول‌های فرمی و آن‌هایی که
   ورودی دارند دست‌نخورده می‌مانند. */
.table.table-bordered:not(:has(.form-control, .form-select, textarea, .input-group)) > :not(caption) > * > * {
  border-inline-width: 0;
}

/* نوار فیلتر به‌صورت قرص/تب (مثل لیست تیکت‌ها) — جایگزین جدول کادردارِ فیلتر */
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filter-pills > a {
  font-size: .82rem; padding: 6px 14px; border-radius: 99px;
  background: var(--th-surface-2); color: var(--th-text-2);
  border: 1px solid var(--th-border); white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-pills > a:hover { background: var(--th-surface); color: var(--th-text-1); border-color: var(--th-brand); }
/* قرصِ فعال: زمینه‌ی نارنجیِ برند با متنِ تیره.
   قبلاً متن #fff بود که روی #F59E0B کنتراست ~۲.۱:۱ می‌داد و عملاً ناخوانا بود
   (مثل گزینه‌ی «همه»). متن تیره روی همان نارنجی ~۸.۶:۱ می‌دهد و در لایت و
   دارک هر دو یکسان خوانا است. */
.filter-pills > a.active { background: var(--th-brand); color: var(--th-on-brand); border-color: var(--th-brand); font-weight: 700; }
/* بجِ وضعیت داخل قرصِ فعال باید رنگ خودش را رها کند؛ وگرنه (مثلاً «درحال
   پیگیری» با متنِ کهربایی) روی زمینه‌ی نارنجیِ برند محو می‌شود. */
.filter-pills > a.active .tk-status {
  background: transparent; color: inherit; border-color: transparent;
}

/* ── BADGE ── */
.th-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 99px;
  font-size: .72rem; font-weight: 600; line-height: 1;
}
.th-badge-ok   { background: rgba(16,185,129,.1);  color: var(--th-success); }
.th-badge-warn { background: rgba(245,158,11,.1);  color: var(--th-warning); }
.th-badge-err  { background: rgba(239,68,68,.1);   color: var(--th-danger); }
.th-badge-info { background: rgba(59,130,246,.1);  color: var(--th-info); }
.th-badge-gray { background: var(--th-surface-2);  color: var(--th-text-2); border: 1px solid var(--th-border); }

/* ── TICKET STATUS BADGES ── */
/* به‌صورت بج مستقل: <span class="tk-status tk-open">باز</span>
   ته‌رنگ کم‌رنگ + متنِ هم‌خانواده‌ی تیره‌تر/روشن‌تر.
   توجه: رنگِ خودِ توکن (--th-success و …) برای *متن* ساخته نشده؛ روی زمینه‌ی
   روشنِ لایت‌مود کنتراست ۱.۹ تا ۳.۴ می‌داد (سبز ۲.۱۸، کهربایی ۱.۸۶) و بج‌ها
   عملاً محو بودند. اینجا متن در لایت از سایه‌ی ۷۰۰/۸۰۰ همان رنگ و در دارک از
   سایه‌ی ۴۰۰ گرفته می‌شود تا در هر دو حالت ≥۴.۵:۱ بماند. */
.tk-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px;
  font-size: .72rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
.tk-open     { background: rgba(16,185,129,.12); color: #047857; }  /* باز — سبز */
.tk-answered { background: rgba(59,130,246,.12); color: #1D4ED8; }  /* پاسخ داده شده — آبی */
.tk-wait     { background: rgba(245,158,11,.14); color: #92400E; }  /* درحال پیگیری — کهربایی */
.tk-held     { background: rgba(139,92,246,.14); color: #6D28D9; }  /* نگهداشته شده — بنفش */
.tk-closed   { background: var(--th-surface-2);  color: var(--th-text-2); border: 1px solid var(--th-border); } /* بسته شده — خاکستری */

/* دارک‌مود: همان ته‌رنگ‌ها، اما متن روشن‌تر از توکن (آبی و بنفشِ توکن روی
   سطحِ تیره فقط ۳.۳ و ۲.۹ می‌دادند). */
html.dark .tk-open     { color: var(--th-success); }
html.dark .tk-answered { color: #60A5FA; }
html.dark .tk-wait     { color: var(--th-warning); }
html.dark .tk-held     { color: #B39DFC; }

/* عنوان تیکتِ خوانده‌نشده در لیست‌ها (پررنگ و متمایز از لینک عادی).
   قبلاً در PHP با style="color:black" چاپ می‌شد و در دارک‌مود روی پس‌زمینه‌ی
   تیره ناخوانا بود؛ حالا از توکن متن استفاده می‌کند تا در هر دو حالت خوانا باشد. */
.tkt-unread { color: var(--th-text-1); font-weight: 700; }
a:hover .tkt-unread { color: var(--th-text-1); }

/* لینک ساده‌ی داخل نتایج جستجوی تیکت — به‌جای رنگ مشکیِ هاردکد */
a.tkt-plain-link { color: var(--th-text-1); }

/* ════════════════════════════════════════════════════
   سربرگ تیکت — جعبه‌ی اطلاعات بالای هر تیکت (dv_tkt_title)
   این ناحیه چند جدول کوچک و دو فرم (اختصاص/ترکیب) را روی‌هم می‌چید و
   به‌هم‌ریخته دیده می‌شد. اینجا به یک کارت تمیز با ردیف‌های کلید/مقدار،
   نشانِ قرص‌مانندِ وضعیت و دکمه‌های هم‌تراز تبدیل می‌شود.
   ════════════════════════════════════════════════════ */
#dv_tkt_title {
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
}
#dv_tkt_title > header { margin-bottom: 12px; }
#dv_tkt_title > header h4 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--th-text-1);
}
#dv_tkt_title > header span { font-size: .88rem; color: var(--th-text-2); line-height: 1.9; }
#dv_tkt_title > header a { color: var(--th-link); }

/* سه‌گانه‌ی سربرگ (عنوان + «جزئیات» + دپارتمان-موضوع) در یک ردیف کنارِ هم؛
   اگر جا نبود به ردیف بعدی می‌شکند. با کلاس (نه id) تا در نسخه‌ی چسبانِ
   بالای صفحه (#dv_tkt_title1_fixed) که innerHTML را کپی می‌کند هم اعمال شود. */
.tkt-title-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 14px;
  row-gap: 4px;
}
.tkt-title-meta { display: inline-block; }

/* جدول‌های اطلاعاتِ داخل سربرگ: کلید/مقدار تمیز، بدون خطوطِ سنگین،
   داخل یک کارتِ کم‌رنگ. (این‌ها جدولِ داده نیستند؛ پنل اطلاعات‌اند.) */
#dv_tkt_cid_did .table {
  margin-bottom: 10px;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
#dv_tkt_cid_did .table:last-child { margin-bottom: 0; }
#dv_tkt_cid_did .table th,
#dv_tkt_cid_did .table td {
  border: 0;
  border-bottom: 1px solid var(--th-border);
  padding: 9px 12px;
  font-size: .9rem;
  vertical-align: middle;
}
#dv_tkt_cid_did .table > tbody > tr:last-child > *,
#dv_tkt_cid_did .table > tr:last-child > * { border-bottom: 0; }
#dv_tkt_cid_did .table th {
  background: transparent;
  color: var(--th-text-2);
  font-weight: 600;
}
/* ستونِ اولِ هر ردیف (برچسب/عنوان) کمی پررنگ‌تر و جمع‌تر */
#dv_tkt_cid_did .table td:first-child { font-weight: 500; }

/* نشانِ وضعیتِ سرویس (فعال/منقضی…) — رنگ پس‌زمینه از دیتابیس می‌آید،
   فقط شکلِ قرص/بَج به آن می‌دهیم تا مثلِ پس‌زمینه‌ی خام دیده نشود. */
#dv_tkt_cid_did span[style*="background-color"] {
  display: inline-block;
  padding: 2px 10px;
  margin-inline-start: 4px;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}

/* آیکن‌های کنارِ دامنه (تنظیمات/بازکردن سایت/whois) با فاصله‌ی یکدست */
#dv_tkt_cid_did .icon-link-muted {
  color: var(--th-text-3);
  margin-inline-start: 10px;
  transition: color var(--t-fast);
}
#dv_tkt_cid_did .icon-link-muted:hover { color: var(--th-brand); }

/* دو فرمِ «اختصاص سرویس» و «ترکیب تیکت» — کنارِ هم، هم‌تراز و واکنش‌گرا،
   به‌جای دو سلولِ جدول که روی‌هم می‌افتاد. */
.tkt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.tkt-actions form { flex: 1 1 260px; margin: 0; }
.tkt-actions .input-group { margin: 0; }

/* «ترکیب تیکت» یک عملیاتِ مدیریتیِ کم‌کاربرد است ولی با btn-danger پرِ قرمز،
   پررنگ‌ترین عنصرِ کلِ صفحه‌ی تیکت می‌شد و چشم را از خودِ گفتگو می‌دزدید.
   اینجا به دکمه‌ی قرمزِ کم‌رنگ (ته‌رنگ + متن و حاشیه‌ی قرمز) تبدیل می‌شود؛
   هنوز به‌عنوان عملیاتِ خطرناک خوانده می‌شود، اما داد نمی‌زند. */
.tkt-actions .btn-danger {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.45);
  color: #B91C1C;
  font-weight: 600;
}
.tkt-actions .btn-danger:hover,
.tkt-actions .btn-danger:focus {
  background: var(--th-danger);
  border-color: var(--th-danger);
  color: #fff;
}
html.dark .tkt-actions .btn-danger { color: #FCA5A5; }

/* یادداشتِ مهمِ کاربر (فقط برای پشتیبانی) — قبلاً با <h1> قرمز و
   استایل‌های inline وسط‌چین چاپ می‌شد. */
.tkt-usernote {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid rgba(239,68,68,.35);
  border-inline-start: 3px solid var(--th-danger);
  border-radius: var(--r-md);
  background: rgba(239,68,68,.06);
}
.tkt-usernote-title {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 6px;
  font-size: .88rem; font-weight: 700;
  color: #B91C1C;
}
html.dark .tkt-usernote-title { color: #FCA5A5; }
.tkt-usernote-body { font-size: .92rem; line-height: 1.9; color: var(--th-text-1); }

/* ════════════════════════════════════════════════════
   تِرِدِ گفتگوی تیکت (message-show.html)
   ----------------------------------------------------------------
   قبلاً هر پیام یک .card بوت‌استرپ بود با هدرِ توپُرِ bg-info/bg-warning،
   بدنه‌ی زردِ inline و سه لایه d-flex تودرتو. نتیجه: دو رنگِ اشباع‌شده که
   با هم رقابت می‌کردند، نامِ فرستنده در گوشه‌ی مخالفِ چیزی که می‌خواندی،
   و متنِ پیام با line-height پیش‌فرض و بدون فاصله‌ی راحت.

   طراحیِ تازه: یک تِرِدِ گفتگو با کارت‌های هم‌شکل که فقط با یک نوارِ لهجه‌ی
   باریک و ته‌رنگِ خیلی ملایمِ هدر از هم تفکیک می‌شوند. هویتِ فرستنده
   (آواتار + نام + نقش) در ابتدای هدر و ابزارها (زمان، شماره، حذف) در
   انتهای همان ردیف. همه‌ی رنگ‌ها از توکن‌ها می‌آیند، پس دارک‌مود بدون
   هیچ override با !important کار می‌کند.
   ════════════════════════════════════════════════════ */
.tkt-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0;
}

/* رنگِ لهجه‌ی هر نوع پیام؛ بقیه‌ی قواعد فقط از این متغیرها می‌خوانند.
   در لایت از سایه‌ی ۸۰۰ استفاده می‌شود چون همین رنگ متنِ بجِ نقش هم هست و
   روی ته‌رنگِ روشن باید ≥۴.۵:۱ بدهد؛ در دارک سایه‌ی ۳۰۰/۴۰۰. */
.tkt-msg-usr { --tkt-ac: #075985; --tkt-tint: rgba(3,105,161,.055); --tkt-soft: rgba(3,105,161,.13); }
.tkt-msg-stf { --tkt-ac: #92400E; --tkt-tint: rgba(180,83,9,.055);  --tkt-soft: rgba(180,83,9,.13); }
html.dark .tkt-msg-usr { --tkt-ac: #7DD3FC; --tkt-tint: rgba(56,189,248,.07); --tkt-soft: rgba(56,189,248,.15); }
html.dark .tkt-msg-stf { --tkt-ac: #FBBF24; --tkt-tint: rgba(251,191,36,.07); --tkt-soft: rgba(251,191,36,.15); }

/* متادیتای ریزِ داخل سربرگ روی ته‌رنگِ روشن می‌نشیند؛ --th-text-2 آنجا
   ۴.۴۹:۱ می‌داد (زیر حدِ ۴.۵ برای متنِ کوچک)، پس یک پله تیره‌تر. */
.tkt-msg { --tkt-meta: #4B5563; }
html.dark .tkt-msg { --tkt-meta: var(--th-text-2); }

.tkt-msg {
  scroll-margin-top: calc(var(--th-nav-h) + 20px);
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-inline-start: 3px solid var(--tkt-ac);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow var(--t-fast);
}
.tkt-msg:hover { box-shadow: var(--sh-md); }
.tkt-msg:target { border-color: var(--th-brand); box-shadow: 0 0 0 3px var(--th-brand-glow); }

/* ── سربرگِ پیام ── */
.tkt-msg-head {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--tkt-tint);
  border-bottom: 1px solid var(--th-border);
}
.tkt-msg-avatar {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--tkt-soft);
  color: var(--tkt-ac);
  font-size: .95rem;
}
.tkt-msg-ident { flex: 1 1 180px; min-width: 0; }
.tkt-msg-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--th-text-1);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.tkt-msg-uid { font-weight: 500; color: var(--tkt-meta); font-size: .85em; }
.tkt-msg-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 3px;
}
.tkt-msg-role {
  padding: 2px 9px; border-radius: 99px;
  background: var(--tkt-soft); color: var(--tkt-ac);
  font-size: .7rem; font-weight: 700; line-height: 1.6;
}
/* text-3 توکنِ «خیلی کم‌رنگ» است و برای متنِ واقعی روی این سطوح زیر ۳:۱
   می‌افتد؛ متادیتای خواندنی (دپارتمان، IP، حجم فایل) با text-2 می‌آید. */
.tkt-msg-dpt,
.tkt-msg-ip {
  font-size: .72rem;
  color: var(--tkt-meta);
  line-height: 1.6;
}
.tkt-msg-ip { font-family: var(--font-num); letter-spacing: .2px; }
.tkt-msg-delflag {
  padding: 2px 8px; border-radius: 99px;
  background: rgba(239,68,68,.12); color: #B91C1C;
  font-size: .7rem; font-weight: 700; line-height: 1.6;
}
html.dark .tkt-msg-delflag { color: #FCA5A5; }

/* ── ابزارهای سمتِ انتهای سربرگ ── */
.tkt-msg-tools {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}
.tkt-msg-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .76rem;
  color: var(--tkt-meta);
  white-space: nowrap;
}
.tkt-msg-num {
  padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  color: var(--th-text-2);
  font-family: var(--font-num); font-size: .72rem;
  text-decoration: none;
}
.tkt-msg-num:hover { color: var(--th-brand); border-color: var(--th-brand); }
.tkt-msg-toolform { margin: 0; }
.tkt-msg-btn {
  padding: 3px 10px;
  border: 1px solid var(--th-border-2);
  border-radius: var(--r-sm);
  background: var(--th-surface);
  color: var(--th-text-2);
  font-family: inherit; font-size: .72rem; font-weight: 600;
  line-height: 1.7;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tkt-msg-btn:hover { background: var(--th-surface-2); color: var(--th-text-1); }
.tkt-msg-btn.is-danger { border-color: rgba(239,68,68,.4); color: #B91C1C; }
.tkt-msg-btn.is-danger:hover { background: var(--th-danger); border-color: var(--th-danger); color: #fff; }
html.dark .tkt-msg-btn.is-danger { color: #FCA5A5; }

/* ── بدنه‌ی پیام ── */
/* متنِ تیکت‌ها فارسی و اغلب چندپاراگرافی است؛ line-height بازتر و اندازه‌ی
   کمی بزرگ‌تر خواندنِ آن را به‌مراتب راحت‌تر می‌کند. */
.tkt-msg-body {
  padding: 16px 18px;
  font-size: .95rem;
  line-height: 2.1;
  color: var(--th-text-1);
  overflow-wrap: anywhere;
}
.tkt-msg-body > :first-child { margin-top: 0; }
.tkt-msg-body > :last-child  { margin-bottom: 0; }
.tkt-msg-body p { margin: 0 0 .9em; }
.tkt-msg-body a { color: var(--th-link); }
.tkt-msg-body img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.tkt-msg-body ul,
.tkt-msg-body ol { padding-inline-start: 1.4em; margin: 0 0 .9em; }
.tkt-msg-body hr { border: 0; border-top: 1px solid var(--th-border); margin: 14px 0; }
.tkt-msg-body blockquote {
  margin: 0 0 .9em;
  padding: 6px 12px;
  border-inline-start: 3px solid var(--th-border-2);
  background: var(--th-surface-2);
  border-radius: var(--r-sm);
  color: var(--th-text-2);
}
/* خروجی دستور، لاگ و کدِ داخل تیکت همیشه لاتین است — چپ‌چین و تک‌عرض */
.tkt-msg-body pre,
.tkt-msg-body code {
  direction: ltr; text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85em;
}
.tkt-msg-body code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
}
.tkt-msg-body pre {
  padding: 12px 14px; margin: 0 0 .9em;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-sm);
  overflow-x: auto;
  line-height: 1.7;
}
.tkt-msg-body pre code { padding: 0; border: 0; background: none; }
.tkt-msg-body table { max-width: 100%; }

/* پیامِ حذف‌شده: کم‌رنگ و خط‌خورده، اما همچنان خوانا */
.tkt-msg-del { opacity: .7; }
.tkt-msg-del .tkt-msg-body s { text-decoration-color: var(--th-danger); }

/* ── پیوست‌ها ── */
/* خروجیِ PHP به‌شکل «<br><a><img>نام</a> <span>(حجم)</span><br>» است؛
   <br>ها حذف و هر پیوست به یک چیپِ مستقل تبدیل می‌شود. */
.tkt-msg-att {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 18px 14px;
}
.tkt-msg-att br { display: none; }
.tkt-msg-att-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .76rem; font-weight: 600; color: var(--th-text-3);
}
.tkt-msg-att a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--th-border);
  border-radius: 99px;
  background: var(--th-surface-2);
  color: var(--th-link);
  font-size: .8rem;
  text-decoration: none;
}
.tkt-msg-att a:hover { border-color: var(--th-brand); background: var(--th-brand-glow); }
.tkt-msg-att a img { width: 14px; height: 14px; }
/* حجمِ فایل از PHP با style="color:gray" چاپ می‌شود؛ رنگِ inline فقط با
   important قابل جایگزینی است و gray روی سطحِ تیره کنتراستِ کافی ندارد. */
.tkt-msg-att span { font-size: .72rem; color: var(--th-text-2) !important; }
.tkt-msg-att span em { font-style: normal; }

/* ── پاورقی پیام ── */
.tkt-msg-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  padding: 8px 16px;
  background: var(--th-surface-2);
  border-top: 1px solid var(--th-border);
  font-size: .8rem;
}
.tkt-msg-reply {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--th-link); font-weight: 600; text-decoration: none;
}
.tkt-msg-reply:hover { color: var(--th-link-hover); }
.tkt-msg-tid { font-size: .74rem; color: var(--th-text-2); font-family: var(--font-num); }

/* ── صفحه‌بندیِ تِرِد ── */
/* flex-start و نه right: صفحه RTL است، پس ابتدای محور یعنی سمت راست و
   اگر روزی نسخه‌ی LTR بیاید خودش سمت چپ می‌رود. */
.tkt-pager { display: flex; justify-content: flex-start; margin: 14px 0; }
.tkt-pager:empty { display: none; }
.tkt-pager .pagination { margin: 0; flex-wrap: wrap; gap: 4px; }

/* ── دکمه‌های پایانِ صفحه (بستن تیکت / پاسخ کوتاه) ── */
/* قبلاً هرکدام یک .form-control تمام‌عرض بودند که مثل فیلدِ ورودی
   دیده می‌شدند و روی دسکتاپ کلِ عرض را می‌گرفتند. */
.tkt-thread-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 20px 0 8px;
}
.tkt-thread-actions:empty { display: none; }
.tkt-thread-actions form { margin: 0; }
.tkt-action-wait { text-align: center; font-size: .82rem; color: var(--th-text-2); }
.tkt-action-btn {
  padding: 9px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit; font-size: .88rem; font-weight: 600;
  line-height: 1.8;
  cursor: pointer;
  transition: filter var(--t-fast);
}
.tkt-action-btn:hover { filter: brightness(1.12); }
/* توکنِ خامِ --th-info/--th-success برای *پس‌زمینه‌ی* دکمه‌ی متن‌سفید روشن‌اند
   (۳.۲ و ۲.۵ به یک). سایه‌ی ۷۰۰ همان رنگ‌ها را می‌گیریم تا ≥۴.۵:۱ بماند. */
.tkt-action-btn.is-info    { background: #1D4ED8; color: #fff; }
.tkt-action-btn.is-success { background: #047857; color: #fff; }

/* ── موبایل ── */
@media (max-width: 575.98px) {
  .tkt-thread { gap: 12px; }
  .tkt-msg-head { padding: 9px 11px; gap: 9px; }
  .tkt-msg-avatar { width: 30px; height: 30px; font-size: .82rem; }
  .tkt-msg-tools { width: 100%; margin-inline-start: 0; }
  .tkt-msg-body { padding: 13px 13px; font-size: .92rem; line-height: 2; }
  .tkt-msg-att  { padding: 0 13px 12px; }
  .tkt-msg-foot { padding: 8px 12px; }
  .tkt-thread-actions form,
  .tkt-action-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════
   انتخابگرِ «سرویس یا دامنه» در ارسال تیکت جدید (message-pre.html)
   ----------------------------------------------------------------
   قبلاً این مرحله با <table class="table table-bordered"> به‌عنوان
   چیدمان ساخته می‌شد؛ گزینه‌های رادیویی داخل سلول‌های کادردار روی‌هم
   می‌افتادند و ظاهرِ ناجوری داشت. اینجا به یک لیستِ گزینه‌ی کارت‌مانند
   تبدیل می‌شود: هر گزینه یک ردیفِ قابل‌کلیک با هایلایتِ حالتِ انتخاب،
   و زیرلیستِ سرویس/دامنه یک لیستِ تمیزِ اسکرول‌شونده با جعبه‌ی جستجو.
   ════════════════════════════════════════════════════ */
.tkt-picker { max-width: 720px; }
.tkt-picker-q {
  font-weight: 600;
  font-size: 1rem;
  color: var(--th-text-1);
  margin-bottom: 14px;
}

/* هر گزینه‌ی اصلی — کارتِ قابل‌کلیک با رادیو + برچسب */
.tkt-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 12px 14px;
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  background: var(--th-surface);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.tkt-opt:hover { background: var(--th-surface-2); border-color: var(--th-brand); }
.tkt-opt > input[type="radio"] { cursor: pointer; flex: 0 0 auto; margin: 0; }
.tkt-opt-txt { font-weight: 600; color: var(--th-text-1); }
/* حالتِ انتخاب‌شده — هایلایتِ ملایمِ برند */
.tkt-opt:has(input:checked) {
  border-color: var(--th-brand);
  background: color-mix(in srgb, var(--th-brand) 8%, transparent);
  box-shadow: 0 0 0 1px var(--th-brand) inset;
}

/* زیرلیستِ سرویس/دامنه — تورفته زیرِ گزینه‌ی مربوطه */
.tkt-sublist {
  margin: -2px 0 8px;
  padding: 12px;
  margin-inline-start: 18px;
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  background: var(--th-surface-2);
}
.tkt-sublist-empty { color: var(--th-text-2); font-size: .9rem; padding: 4px 2px; }
.tkt-sublist-search { margin-bottom: 10px; }
.tkt-sublist-scroll { max-height: 340px; overflow-y: auto; }

/* جدولِ آیتم‌های زیرلیست — بدونِ خطوطِ کادر، ردیف‌های قابل‌کلیک */
.tkt-list-table { width: 100%; border-collapse: collapse; }
.tkt-list-table > tbody > tr > td,
.tkt-list-table > tr > td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--th-border);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.tkt-list-table > tbody > tr:last-child > td,
.tkt-list-table > tr:last-child > td { border-bottom: 0; }
.tkt-list-table tr:hover > td { background: color-mix(in srgb, var(--th-brand) 7%, transparent); }
.tkt-list-table label { display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; width: 100%; }
.tkt-list-table input[type="radio"] { flex: 0 0 auto; margin: 0; cursor: pointer; }
.tkt-list-table span { cursor: pointer; }

/* خلاصه‌ی انتخاب + دکمه‌ی «مرحله بعد» */
.tkt-selected:not(:empty) {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--th-border-2);
  border-radius: var(--r-md);
  background: var(--th-surface);
}

/* ── مرحله‌ی «بخش» (message-pre-process.html) ──
   قبلاً هدرِ زردِ توپُر (bg-warning) و برچسب‌های زیرموضوع با پس‌زمینه‌ی
   زردِ دائمی (span.bg-warning) استفاده می‌شد که در دارک‌مود چشم‌آزار بود.
   اینجا به همان زبانِ طراحیِ انتخابگرِ بالا تبدیل می‌شود. */
.tkt-step {
  max-width: 720px;
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  background: var(--th-surface);
  overflow: hidden;
}
.tkt-step-head {
  padding: 13px 16px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--th-text-1);
  background: var(--th-surface-2);
  border-bottom: 1px solid var(--th-border);
  border-inline-start: 3px solid var(--th-brand);
}
.tkt-step-body { padding: 16px; }
.tkt-step-hint { color: var(--th-text-2); font-size: .92rem; margin-bottom: 14px; }

/* گزینه‌ی زیرموضوع — تورفته زیرِ بخشِ مربوطه، هایلایت فقط روی hover/انتخاب */
.tkt-subopt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  margin-inline-start: 26px;
  padding: 9px 12px;
  border: 1px solid var(--th-border);
  border-radius: var(--r-sm);
  background: var(--th-surface-2);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.tkt-subopt:hover { border-color: var(--th-brand); background: color-mix(in srgb, var(--th-brand) 8%, transparent); }
.tkt-subopt > input[type="radio"] { flex: 0 0 auto; margin: 0; cursor: pointer; }
.tkt-subopt-arrow { color: var(--th-text-3); flex: 0 0 auto; font-size: .9rem; }
.tkt-subopt-txt { color: var(--th-text-1); font-size: .92rem; }
.tkt-subopt:has(input:checked) {
  border-color: var(--th-brand);
  background: color-mix(in srgb, var(--th-brand) 10%, transparent);
  box-shadow: 0 0 0 1px var(--th-brand) inset;
}

/* گزینه‌ی بخشِ غیرفعال (پشتیبانی بدون سرویس فعال) — کم‌رنگ و غیرقابل‌انتخاب */
.tkt-opt.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  background: var(--th-surface-2);
}
.tkt-opt.is-disabled:hover { border-color: var(--th-border); background: var(--th-surface-2); }
.tkt-opt.is-disabled .tkt-opt-txt { font-weight: 500; font-style: italic; color: var(--th-text-2); }

/* ── مرحله‌ی «چند پیشنهاد» (message-pre-suggest.html) ──
   قبلاً یک <h1> بزرگ + alert بوت‌استرپ + گریدِ ستون‌های خالی بود که به‌هم‌ریخته
   دیده می‌شد. اینجا به یک کارتِ تمیزِ هم‌زبان با بقیه‌ی مراحل تبدیل می‌شود. */
.tkt-suggest-lead { color: var(--th-text-2); font-size: .95rem; margin-bottom: 12px; }
.tkt-suggest-box {
  padding: 14px 16px;
  border: 1px solid var(--th-border);
  border-inline-start: 3px solid var(--th-info);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--th-info) 6%, transparent);
  color: var(--th-text-1);
  line-height: 1.9;
}
.tkt-suggest-box a { color: var(--th-link); }
.tkt-suggest-box img { max-width: 100%; height: auto; }
.tkt-suggest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.tkt-suggest-actions .btn { flex: 1 1 200px; margin: 0; }

/* ── مرحله‌ی آخر: فرمِ متنِ تیکت (message-new.html) ──
   قبلاً داخل یک card با هدرِ کم‌رنگ + <h5> خالی + <p> دورِ فرم + ستون‌های
   فاصله‌گذارِ col-md-2 بود. اینجا به همان کارتِ تمیزِ .tkt-step با عرضِ
   محدود و وسط‌چین تبدیل می‌شود تا با مراحل قبل یکدست باشد. */
.tkt-newform { max-width: 760px; margin-inline: auto; }
.tkt-newform label { font-weight: 500; color: var(--th-text-1); }
.tkt-newform .form-control,
.tkt-newform .form-select { margin-top: 4px; }

/* ════════════════════════════════════════════════════
   فرم پاسخ تیکت — پنل «گزینه‌های بیشتر» (panel/message-reply.html)
   ----------------------------------------------------------------
   قبلاً یک <div> بدون کلاسِ ستون وسطِ .row بود؛ چون flex-item غیرcol
   حاشیه‌ی منفیِ ردیف را جبران نمی‌کرد، ستون‌های داخلش از لبه بیرون
   می‌زدند و لیبل/ورودی‌ها نامرتب روی‌هم می‌افتادند. لینک‌های بازکننده هم
   رنگ ثابتِ #0D4D89 داشتند که روی زمینه‌ی تیره خوانا نبود.
   نکته: خانواده‌ی .tkt-opt (بدونِ پسوند) در message-new برای کارتِ
   انتخاب بخش استفاده می‌شود و ربطی به کلاس‌های زیر ندارد.
   ════════════════════════════════════════════════════ */
.tkt-opt-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  /* فاصله روی دکمه است نه پنل: slideDown ارتفاع را پیش از overflow:hidden
     می‌سنجد و margin-top فرزند در آن لحظه collapse می‌شود و ۱۰px کم می‌آید */
  margin-bottom: 10px;
  font-family: inherit; font-size: .85rem; font-weight: 500;
  color: var(--th-text-1);
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.tkt-opt-toggle:hover {
  color: var(--th-brand);
  border-color: var(--th-brand);
  background: color-mix(in srgb, var(--th-brand) 8%, transparent);
}
.tkt-opt-toggle:focus-visible {
  outline: none;
  border-color: var(--th-brand);
  box-shadow: 0 0 0 3px var(--th-brand-glow);
}
.tkt-opt-caret { font-size: .8rem; color: var(--th-text-3); transition: transform var(--t-fast); }
.tkt-opt-toggle[aria-expanded="true"] { color: var(--th-brand); border-color: var(--th-brand); }
.tkt-opt-toggle[aria-expanded="true"] .tkt-opt-caret { transform: rotate(180deg); color: var(--th-brand); }

.tkt-opt-panel {
  padding: 16px;
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  background: var(--th-surface-2);
}
/* لیبل‌های داخل پنل کوچک و کم‌رنگ‌اند تا ردیفِ کنترل‌ها شلوغ نشود
   (اسپسیفیسیتیِ #maincontent لازم است چون قانون عمومیِ label با #id نوشته شده) */
#maincontent .tkt-opt-panel label {
  margin-bottom: .3rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--th-text-2);
}

/* ساعت/دقیقه‌ی «تاریخ ارسال» — قانون عمومیِ input-group عرضِ flex می‌دهد و
   این دو کادرِ دورقمی را بی‌دلیل پهن می‌کرد */
#maincontent .input-group > .form-control.tkt-opt-time {
  flex: 0 0 62px;
  width: 62px;
  text-align: center;
  padding-inline: 4px;
}

/* کادرهای بازشونده (یوزر و رمز) — جایگزین .rounded6 که فقط شعاع می‌داد */
.tkt-opt-note {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  background: var(--th-surface);
  color: var(--th-text-1);
  font-size: .88rem;
  line-height: 1.9;
}
.tkt-opt-note a { color: var(--th-link); cursor: pointer; }
.tkt-opt-note a:hover { color: var(--th-link-hover); text-decoration: underline; text-underline-offset: 2px; }

.tkt-opt-link { margin-top: 8px; cursor: pointer; }
.tkt-opt-link a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .88rem;
  color: var(--th-link);
  transition: color var(--t-fast);
}
.tkt-opt-link a:hover { color: var(--th-link-hover); }

.tkt-opt-hint { font-size: .78rem; font-weight: 400; color: var(--th-text-3); }
.tkt-opt-hint a { color: var(--th-link); }

/* فهرست‌های داخل هشدارهای این فرم — ul سراسری list-style:none دارد */
.tkt-opt-list { list-style: disc; padding-inline-start: 1.25rem; }

/* دارک‌مود: پس‌زمینه‌ی کنترل‌های فرم در شب خودش --th-surface-2 است؛ اگر پنل هم
   همان باشد کادرها در زمینه گم می‌شوند. سطح‌ها را یک پله جابه‌جا می‌کنیم تا در
   هر دو حالت ورودی روشن‌تر از ظرفش بماند. */
html.dark .tkt-opt-panel,
html.dark .tkt-opt-toggle { background: var(--th-surface); }
html.dark .tkt-opt-toggle:hover { background: color-mix(in srgb, var(--th-brand) 12%, transparent); }
html.dark .tkt-opt-note { background: var(--th-bg); }

/* ── BUTTONS ── */
.th-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: var(--r-md);
  font-family: inherit; font-size: .84rem; font-weight: 500;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  cursor: pointer; border: none; white-space: nowrap;
}
.th-btn:active { transform: scale(.98); }
/* روی زمینه‌ی برند همیشه --th-on-brand؛ #fff کنتراست ~۲.۱:۱ می‌داد */
.th-btn-primary { background: var(--th-brand); color: var(--th-on-brand); }
.th-btn-primary:hover { background: var(--th-brand-dark); color: var(--th-on-brand); box-shadow: 0 4px 12px rgba(245,158,11,.3); }
.th-btn-ghost { background: transparent; color: var(--th-text-2); border: 1px solid var(--th-border); }
.th-btn-ghost:hover { background: var(--th-surface-2); color: var(--th-text-1); }
.th-btn-danger { background: var(--th-danger); color: #fff; }
.th-btn-danger:hover { background: #dc2626; box-shadow: 0 4px 12px rgba(239,68,68,.3); }
.th-btn-sm { padding: 5px 11px; font-size: .78rem; }
.th-btn-login {
  padding: 7px 16px; font-size: .84rem; font-weight: 500;
  color: var(--th-text-2); border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.th-btn-login:hover { background: var(--th-surface-2); color: var(--th-text-1); }
.th-btn-register {
  padding: 7px 18px; font-size: .84rem; font-weight: 600;
  color: var(--th-on-brand); background: var(--th-brand); border-radius: var(--r-sm);
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.th-btn-register:hover { background: var(--th-brand-dark); box-shadow: 0 4px 12px rgba(245,158,11,.35); transform: translateY(-1px); }

/* ── btn-block: بازگرداندنِ کلاسِ حذف‌شده‌ی بوت‌استرپ ۴ ──
   در BS5 کلاس .btn-block برداشته شده و جایگزینش .d-grid روی والد است. ولی این
   کلاس هنوز در ~۸۰ نقطه‌ی قالب روی دکمه‌های submit فرم‌ها نوشته شده و چون هیچ
   تعریفی نداشت، بی‌اثر بود: دکمه‌ها با عرضِ متنِ خودشان و چسبیده به لبه‌ی راستِ
   کارت رندر می‌شدند. به‌جای ویرایشِ ۸۰ فایل، کلاس را همین‌جا برمی‌گردانیم. */
.btn-block { display: block; width: 100%; }
/* استثنا: دکمه‌های داخل .btn-group (دراپ‌داونِ نامِ کاربر در بردکرامب، ۴۳ مورد)
   باید همان رفتارِ اینلاینِ بوت‌استرپ را نگه دارند، وگرنه بردکرامب می‌شکند. */
.btn-group > .btn-block { display: inline-block; width: auto; }

/* ── ICON BUTTON ── */
.th-icon-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--th-text-2);
  font-size: .95rem; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.th-icon-btn:hover { background: var(--th-surface-2); color: var(--th-brand); }
/* در حالت شب، قاعدهٔ سراسریِ «html.dark a:not(.btn):not(...)» در darkmode.css
   با specificity بالا روی .th-icon-btn غلبه می‌کرد. نتیجه: آیکن‌هایی که <a>
   بودند (پاکتِ تیکت در نوار پایین مدیر) طلایی می‌شدند و آن‌هایی که <button>
   بودند خاکستری — یک ردیف آیکن با دو رنگ بی‌دلیل. رنگ عمدی (مثل خروجِ قرمز)
   inline است و همچنان برنده می‌شود. */
html.dark a.th-icon-btn { color: var(--th-text-2); }
html.dark a.th-icon-btn:hover { color: var(--th-brand); }
.th-notif-dot {
  position: absolute; top: 6px; left: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--th-danger); border: 2px solid var(--th-surface);
}

/* ── SEARCH BOX ── */
.th-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: var(--r-md); padding: 7px 12px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.th-search:focus-within {
  border-color: var(--th-brand);
  box-shadow: 0 0 0 3px var(--th-brand-glow);
}
.th-search input {
  border: none; background: transparent; font-family: inherit;
  font-size: .84rem; color: var(--th-text-1); outline: none; width: 200px;
}
.th-search input::placeholder { color: var(--th-text-3); }

/* ── FORM ELEMENTS ── */
.th-input {
  display: block; width: 100%;
  padding: 8px 12px; font-family: inherit; font-size: .875rem;
  color: var(--th-text-1); background: var(--th-surface);
  border: 1px solid var(--th-border); border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.th-input:focus {
  border-color: var(--th-brand);
  box-shadow: 0 0 0 3px var(--th-brand-glow);
}
.th-input::placeholder { color: var(--th-text-3); }

/* ════════════════════════════════════════════════════
   فرم استاندارد — تک‌منبع مشترک همه‌ی فرم‌های ناحیه‌ی محتوا
   ----------------------------------------------------------------
   Bootstrap .form-control/.form-select و همچنین <select>/<textarea>/
   <input> بدون‌کلاس و <label> را با توکن‌های طلاهاست یکدست می‌کند.
   محدود به #maincontent تا فرم‌های نوبار/سایدبار دست‌نخورده بمانند.
   دارک‌مود در darkmode.css مدیریت می‌شود (بعد از این فایل لود می‌شود).
   ════════════════════════════════════════════════════ */
#maincontent .form-control:not(.btn),
#maincontent .form-select,
#maincontent select,
#maincontent textarea,
#maincontent input[type="text"],
#maincontent input[type="email"],
#maincontent input[type="password"],
#maincontent input[type="number"],
#maincontent input[type="search"],
#maincontent input[type="tel"],
#maincontent input[type="url"],
#maincontent input[type="date"] {
  font-family: inherit; font-size: .875rem; line-height: 1.5;
  color: var(--th-text-1);
  background-color: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  padding: 8px 12px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* عرض کامل فقط برای المان‌های بلوکی استاندارد (نه select اینلاین) */
#maincontent .form-control:not(.btn),
#maincontent .form-select,
#maincontent textarea,
#maincontent input[type="text"],
#maincontent input[type="email"],
#maincontent input[type="password"],
#maincontent input[type="number"],
#maincontent input[type="tel"],
#maincontent input[type="url"] { display: block; width: 100%; }

/* استثنا: ورودی‌های داخل .input-group باید رفتار flex بوت‌استرپ را نگه دارند
   (کنار هم، نه بلوکیِ ۱۰۰٪ روی‌هم). قانون width:100% بالا این را می‌شکست و
   ورودی‌های ساعت/دقیقه/ثانیه را در ۳ ردیف می‌چید (مثل admin/edit-domain). */
#maincontent .input-group > .form-control:not(.btn),
#maincontent .input-group > .form-select {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* ── سطر «تاریخ + ساعت» فرم‌های ادمین (admin/edit-contract) ──
   بدون این، قاعده‌ی width:100% بالا هر ورودی ساعت/دقیقه/ثانیه را یک سطر کامل
   می‌کرد و هر تاریخ ۵ سطر می‌گرفت. سلکتورها با #maincontent شروع می‌شوند چون
   قاعده‌ی سراسری «#maincontent input[type=text]» وزن id دارد و بدون آن می‌بَرَد. */
#maincontent .adm-datetime {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
}
#maincontent .adm-datetime > .form-control.adm-dt-date {
  flex: 0 0 auto;
  width: 8.5rem;
  text-align: center;
}
#maincontent .adm-datetime .adm-dt-type {
  flex: 0 0 auto;
  width: auto;
  padding-top: 6px;
  padding-bottom: 6px;
}
#maincontent .adm-datetime .adm-dt-time {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  color: var(--th-text-3);
}
#maincontent .adm-datetime .adm-dt-num {
  display: inline-block;
  flex: 0 0 auto;
  width: 2.75rem;
  padding-left: .25rem;
  padding-right: .25rem;
  text-align: center;
}
#maincontent .adm-datetime .adm-dt-hint {
  font-size: .75rem;
  color: var(--th-text-3);
  white-space: nowrap;
}

/* ── ردیف‌های کم‌کاربردِ فرم ادمین، پشت یک دکمه‌ی باز/بسته ──
   پنهان‌سازی با display است نه [hidden] روی فیلد، تا ورودی‌ها در POST بمانند.
   کلاس .adm-extra-open را جاوااسکریپت روی خودِ <table> می‌گذارد. */
#maincontent .adm-extra-row { display: none; }
#maincontent .table.adm-extra-open .adm-extra-row { display: table-row; }
/* قاعده‌ی «ستون برچسب» بالا td:first-child را باریک و nowrap می‌کند؛
   سلولِ colspan=2 این دکمه نباید آن رفتار را بگیرد. */
#maincontent .adm-extra-toggle > td { width: auto; white-space: normal; }
#maincontent .adm-toggle-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: inherit; font-size: .82rem;
  padding: 6px 14px; border-radius: 99px;
  background: var(--th-surface-2); color: var(--th-text-2);
  border: 1px solid var(--th-border); white-space: nowrap; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
#maincontent .adm-toggle-btn:hover {
  background: var(--th-surface); color: var(--th-text-1); border-color: var(--th-brand);
}
#maincontent .adm-toggle-btn .adm-toggle-caret {
  transition: transform var(--t-fast);
}
#maincontent .table.adm-extra-open .adm-toggle-btn .adm-toggle-caret {
  transform: rotate(180deg);
}

/* فوکوس یکدست با رنگ برند */
#maincontent .form-control:not(.btn):focus,
#maincontent .form-select:focus,
#maincontent select:focus,
#maincontent textarea:focus,
#maincontent input[type="text"]:focus,
#maincontent input[type="email"]:focus,
#maincontent input[type="password"]:focus,
#maincontent input[type="number"]:focus,
#maincontent input[type="search"]:focus,
#maincontent input[type="tel"]:focus,
#maincontent input[type="url"]:focus,
#maincontent input[type="date"]:focus {
  outline: none;
  border-color: var(--th-brand);
  box-shadow: 0 0 0 3px var(--th-brand-glow);
}
#maincontent .form-control::placeholder,
#maincontent textarea::placeholder,
#maincontent input::placeholder { color: var(--th-text-3); }

/* فلش سفارشی برای select (RTL: سمت چپ) — جای فلش نامنظم native */
#maincontent select,
#maincontent .form-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B7280' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left .75rem center;
  background-size: 14px;
  padding-left: 2rem;
  max-width: 100%;
  vertical-align: middle;
}

/* فضای آیکن اعتبارسنجی (is-valid/is-invalid)
   ----------------------------------------------------------------
   قانون padding یکدستِ بالا (padding:8px 12px با اسپسیفیسیتیِ #maincontent)
   روی padding-left بوت‌استرپ برای فرم‌های ولید غالب می‌شد و آیکنِ تیک/ضربدر
   روی متن ورودی می‌افتاد. اینجا فقط سمتِ آیکن (چپ در RTL) دوباره باز می‌شود؛
   background-position خودِ بوت‌استرپ دست‌نخورده می‌ماند. */
#maincontent .form-control.is-valid,
#maincontent .form-control.is-invalid,
#maincontent input.is-valid,
#maincontent input.is-invalid,
#maincontent textarea.is-valid,
#maincontent textarea.is-invalid {
  padding-left: calc(1.5em + 0.75rem);
}

/* لیبل‌ها — حتی بدون کلاس form-label فاصله و وزن یکنواخت بگیرند */
#maincontent form label {
  display: inline-block;
  margin-bottom: .4rem;
  font-weight: 500;
  font-size: .85rem;
  color: var(--th-text-1);
}

/* افزونه‌های input-group یکدست */
#maincontent .input-group-text {
  background-color: var(--th-surface-2);
  border-color: var(--th-border);
  color: var(--th-text-2);
}

/* حالت غیرفعال */
#maincontent .form-control:disabled,
#maincontent .form-control[readonly],
#maincontent select:disabled,
#maincontent textarea:disabled,
#maincontent input:disabled {
  background-color: var(--th-surface-2);
  color: var(--th-text-2);
  cursor: not-allowed;
}

/* ── ALERT ── */
.th-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md);
  font-size: .84rem; border: 1px solid transparent;
  margin-bottom: 18px;
}
.th-alert-warn { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2); }
.th-alert-err  { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.2); }
.th-alert-ok   { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.2); }
.th-alert-info { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.2); }
.th-alert-ico  { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* ── ENV TAG ── */
.th-env-tag {
  font-size: .68rem; font-weight: 600; padding: 3px 8px; border-radius: 99px;
  background: rgba(245,158,11,.1); color: var(--th-brand);
  border: 1px solid rgba(245,158,11,.2); white-space: nowrap;
}

/* ── USER CHIP (navbar) ── */
.th-user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--th-border); border-radius: 99px;
  cursor: pointer;
  /* چیپ باید بتواند جمع شود وگرنه نوار را می‌شکند (نگاه کنید به .th-nav-cta) */
  min-width: 0;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.th-user-chip:hover {
  background: var(--th-surface-2);
  border-color: var(--th-brand);
  box-shadow: 0 0 0 3px var(--th-brand-glow);
}
.th-user-av {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--th-brand), var(--th-brand-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; color: #fff;
  flex-shrink: 0;   /* آواتار و فلش هرگز له نشوند؛ فقط نام کوتاه شود */
}
.th-user-chip > svg { flex-shrink: 0; }
/* تنها عضو قابل‌جمع‌شدنِ چیپ. سقف عرض در mobile.css سخت‌گیرانه‌تر می‌شود. */
.th-user-name {
  font-size: .82rem; font-weight: 500; color: var(--th-text-1);
  min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── DROPDOWN MENU (آواتار پنل) ── */
.th-user-menu { position: relative; }
/* پل نامرئی: فاصله بین آواتار و منو را پر می‌کند تا hover قطع نشود */
.th-user-menu::after {
  content: ''; position: absolute;
  top: 100%; left: 0; right: 0; height: 12px;
  opacity: 0; pointer-events: none;
}
.th-user-menu:hover::after { pointer-events: auto; }
.th-user-drop {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 210px; background: var(--th-surface);
  border: 1px solid var(--th-border); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid);
  z-index: var(--z-overlay);
}
.th-user-menu:hover .th-user-drop,
.th-user-drop:hover { opacity: 1; visibility: visible; transform: translateY(0); }
.th-drop-hd { padding: 10px 12px 12px; border-bottom: 1px solid var(--th-border); margin-bottom: 6px; }
.th-drop-name { font-size: .875rem; font-weight: 600; color: var(--th-text-1); }
.th-drop-email { font-size: .75rem; color: var(--th-text-3); margin-top: 2px; direction: ltr; text-align: right; }
.th-drop-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; font-size: .84rem; color: var(--th-text-2);
  border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast); cursor: pointer;
}
.th-drop-item:hover { background: var(--th-surface-2); color: var(--th-text-1); }
.th-drop-item.danger { color: var(--th-danger); }
.th-drop-item.danger:hover { background: rgba(239,68,68,.07); }
.th-drop-sep { height: 1px; background: var(--th-border); margin: 6px 0; }
.th-drop-ico { font-size: .9rem; width: 18px; text-align: center; opacity: .8; }

/* ── TAB BAR ── */
.th-tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--th-border); margin-bottom: 18px;
}
.th-tab {
  padding: 9px 16px; font-size: .84rem; font-weight: 500;
  color: var(--th-text-2); border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.th-tab:hover { color: var(--th-text-1); }
.th-tab.active { color: var(--th-brand); border-bottom-color: var(--th-brand); }

/* ── DELTA (آمار) ── */
.th-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .72rem; font-weight: 600; padding: 2px 7px; border-radius: 99px;
}
.th-delta-up { background: rgba(16,185,129,.1); color: var(--th-success); }
.th-delta-dn { background: rgba(239,68,68,.1);  color: var(--th-danger); }

/* ── UTILITY ── */
.th-mono { font-family: var(--font-num); direction: ltr; }
.th-text-sm { font-size: .82rem; }
.th-text-muted { color: var(--th-text-3); }
.th-flex { display: flex; }
.th-items-center { align-items: center; }
.th-gap-2 { gap: 8px; }
.th-gap-3 { gap: 12px; }
.th-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


.admin-log { display:none; }


/* ════════════════════════════════════════════════════
   CHATROOM — گفت‌وگوی تیمی (بازطراحی مسنجری)
   ساختار: FAB شناور → پنجره → [لیست همکاران | گفت‌وگو]
   پیام‌های خودی سمت چپ، پیام‌های طرف مقابل سمت راست (قرارداد RTL)
════════════════════════════════════════════════════ */
:root {
  --chat-w:        384px;
  --chat-canvas:   #EEF1F6;
  --chat-self-bg:  #FEF3C7;
  --chat-self-bd:  #FCE1A1;
  --chat-self-fg:  #6B4708;
  --chat-other-bg: #FFFFFF;
  --chat-other-bd: var(--th-border);
  --chat-other-fg: var(--th-text-1);
}
html.dark {
  --chat-canvas:   #171A21;
  --chat-self-bg:  rgba(245,158,11,.15);
  --chat-self-bd:  rgba(245,158,11,.28);
  --chat-self-fg:  #FBE3B0;
  --chat-other-bg: #242835;
  --chat-other-bd: rgba(255,255,255,.07);
}

/* ── دکمه شناور (FAB) ── */
.th-chat-fab {
  position: fixed; left: 22px; bottom: 22px;
  z-index: calc(var(--z-modal) - 1);
  width: 54px; height: 54px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  background: linear-gradient(145deg, var(--th-brand), var(--th-brand-dark));
  color: #fff; font-size: 1.25rem;
  box-shadow: 0 8px 22px rgba(245,158,11,.35), var(--sh-md);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-mid), opacity var(--t-mid);
}
.th-chat-fab:hover  { transform: translateY(-2px) scale(1.05); }
.th-chat-fab:active { transform: scale(.95); }
.th-chat-fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(.6); }
.th-chat-fab-badge {
  position: absolute; top: -2px; left: -2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 99px; background: var(--th-danger); color: #fff;
  font-family: var(--font-num); font-size: .66rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--th-surface);
}

/* ── پنجره ── */
.th-chat {
  position: fixed; left: 20px; bottom: 20px;
  z-index: var(--z-modal);
  width: var(--chat-w); height: min(580px, calc(100vh - 110px));
  display: none;
  direction: rtl; text-align: right;
  font-family: var(--font-fa);
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.th-chat.is-open { display: block; animation: thChatIn .22s cubic-bezier(.4,0,.2,1) both; }
@keyframes thChatIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
#dv_main_chatroom { display: flex; flex-direction: column; height: 100%; }

/* ── سربرگ ── */
#dv_chat_title {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--th-brand), var(--th-brand-dark));
  color: #fff;
}
#chat-title { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.th-chat-hbtn {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  border: none; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: .88rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast);
}
.th-chat-hbtn:hover { background: rgba(255,255,255,.32); }
.th-chat-hbtn[hidden] { display: none; }
.th-chat-htxt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.4; }
.th-chat-htxt b     { font-size: .88rem; font-weight: 700; }
.th-chat-htxt small { font-size: .68rem; opacity: .85; }
.th-chat-htxt b, .th-chat-htxt small {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── آواتار ── */
.th-chat-av {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.22); color: #fff;
  font-size: .9rem; font-weight: 700;
}
.th-chat-av.sm {
  width: 32px; height: 32px; font-size: .82rem;
  background: var(--th-brand-light); color: var(--th-brand-dark);
}
.th-chat-av.sm.group { background: rgba(59,130,246,.13); color: var(--th-info); }
html.dark .th-chat-av.sm { background: rgba(245,158,11,.16); color: #FBBF24; }

/* ── لیست همکاران ── */
#dv_chat_users { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.th-chat-search {
  flex: 0 0 auto; margin: 10px 12px 4px;
  display: flex; align-items: center; gap: 8px;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: 99px; padding: 7px 12px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.th-chat-search:focus-within { border-color: var(--th-brand); box-shadow: 0 0 0 3px var(--th-brand-glow); }
.th-chat-search i { color: var(--th-text-3); font-size: .78rem; }
.th-chat-search input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: .82rem; color: var(--th-text-1);
}
.th-chat-search input::placeholder { color: var(--th-text-3); }

.chatroom_users {
  flex: 1; min-height: 0; overflow-y: auto;
  list-style: none; margin: 0; padding: 4px 8px 10px;
}
.chatroom_users li { margin-bottom: 2px; }
.chatroom_users li a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md);
  color: var(--th-text-1); font-size: .85rem; text-decoration: none;
  transition: background var(--t-fast);
}
.chatroom_users li a:hover  { background: var(--th-surface-2); }
.chatroom_users li.is-active a { background: var(--th-sb-active); }
.th-chat-uname {
  flex: 1; min-width: 0; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.th-chat-badge {
  flex: 0 0 auto; min-width: 20px; padding: 1px 7px; border-radius: 99px;
  background: var(--th-danger); color: #fff !important;
  font-family: var(--font-num); font-size: .66rem; font-weight: 700; text-align: center;
}
.th-chat-badge:empty { display: none; }
.th-chat-badge font, .th-chat-badge b { color: #fff !important; font-weight: 700; }

.th-chat-note {
  margin: auto; padding: 24px 16px; text-align: center;
  color: var(--th-text-3); font-size: .8rem; line-height: 1.9;
}
.th-chat-note[hidden] { display: none; }

/* ── ناحیه گفت‌وگو ── */
#dv_chat_message {
  flex: 1; min-height: 0; position: relative;
  display: flex; flex-direction: column;
  background: var(--chat-canvas);
}
#chatroom_messages {
  flex: 1; min-height: 0; overflow-y: auto;
  list-style: none; margin: 0; padding: 12px 12px 8px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: .83rem; line-height: 1.8;
}

.th-msg { display: flex; }
.th-msg.self  { justify-content: flex-end; }   /* در RTL یعنی سمت چپ */
.th-msg.other { justify-content: flex-start; } /* در RTL یعنی سمت راست */
.th-bub {
  box-sizing: border-box;
  max-width: 82%; padding: 7px 11px 4px;
  border: 1px solid transparent; border-radius: 14px;
  box-shadow: var(--sh-sm);
  word-break: break-word; overflow-wrap: anywhere;
}
.th-msg.self .th-bub {
  background: var(--chat-self-bg); border-color: var(--chat-self-bd);
  color: var(--chat-self-fg); border-bottom-left-radius: 4px;
}
.th-msg.other .th-bub {
  background: var(--chat-other-bg); border-color: var(--chat-other-bd);
  color: var(--chat-other-fg); border-bottom-right-radius: 4px;
}
.th-msg.pending .th-bub { opacity: .55; }
.th-bub-name { margin-bottom: 2px; font-size: .72rem; font-weight: 700; color: var(--th-info); }
.th-bub-txt a { color: var(--th-link); text-decoration: underline; }
.th-msg.self .th-bub-txt a { color: inherit; }
.th-bub-meta {
  margin-top: 2px; direction: ltr;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  font-family: var(--font-num); font-size: .63rem; color: var(--th-text-3);
}
.th-msg.self .th-bub-meta { color: rgba(107,71,8,.55); }
html.dark .th-msg.self .th-bub-meta { color: rgba(251,227,176,.5); }
.th-bub-meta .th-tick-read { color: var(--th-info); }

/* جداکننده روز */
.th-day { align-self: center; margin: 4px 0; }
.th-day span {
  display: inline-block; padding: 3px 12px; border-radius: 99px;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  color: var(--th-text-2); font-family: var(--font-num); font-size: .67rem;
}

/* دکمه پرش به آخرین پیام */
.th-chat-jump {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 104px; z-index: 3;
  border: none; border-radius: 99px; cursor: pointer; padding: 5px 14px;
  background: var(--th-brand); color: var(--th-on-brand); box-shadow: var(--sh-md);
  font-family: inherit; font-size: .72rem; font-weight: 600;
}
.th-chat-jump[hidden] { display: none; }

/* ── نویسنده پیام ── */
#frm_chatroom {
  flex: 0 0 auto; padding: 8px 10px 9px;
  background: var(--th-surface); border-top: 1px solid var(--th-border);
}
.th-chat-tagrow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.th-chat-tagrow > i { color: var(--th-text-3); font-size: .72rem; }
.th-chat-type {
  flex: 1; min-width: 0; outline: none; cursor: pointer;
  font-family: inherit; font-size: .75rem; color: var(--th-text-2);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: 99px; padding: 4px 10px;
}
.th-chat-type:focus { border-color: var(--th-brand); box-shadow: 0 0 0 3px var(--th-brand-glow); }
.th-chat-type.is-tagged { color: var(--th-danger); border-color: var(--th-danger); font-weight: 700; }

.th-chat-composer {
  display: flex; align-items: flex-end; gap: 8px; padding: 5px 7px;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.th-chat-composer:focus-within { border-color: var(--th-brand); box-shadow: 0 0 0 3px var(--th-brand-glow); }
#chat_txt {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  resize: none; overflow-y: auto; max-height: 110px; padding: 4px;
  font-family: inherit; font-size: .84rem; line-height: 1.7; color: var(--th-text-1);
}
#chat_txt::placeholder { color: var(--th-text-3); }
.th-chat-send {
  flex: 0 0 auto; width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--th-brand); color: var(--th-on-brand); font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), transform var(--t-fast);
}
.th-chat-send:hover  { background: var(--th-brand-dark); }
.th-chat-send:active { transform: scale(.9); }
.th-chat-send i { transform: scaleX(-1); }   /* جهت پیکان مطابق RTL */

.th-chat-hint { margin-top: 5px; text-align: center; font-size: .63rem; color: var(--th-text-3); }
.th-chat-hint kbd {
  font-family: var(--font-num); font-size: .6rem; color: var(--th-text-2);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: 4px; padding: 0 4px;
}

/* ── اسکرول‌بار باریک ── */
#chatroom_messages, .chatroom_users { scrollbar-width: thin; }
#chatroom_messages::-webkit-scrollbar,
.chatroom_users::-webkit-scrollbar { width: 6px; }
#chatroom_messages::-webkit-scrollbar-thumb,
.chatroom_users::-webkit-scrollbar-thumb { background: var(--th-border-2); border-radius: 99px; }

/* ── موبایل/تبلت (همان مرز bottom-nav): تمام‌صفحه ── */
@media (max-width: 991.98px) {
  .th-chat-fab { display: none; }
  .th-chat {
    inset: 0; width: auto; height: auto;
    border: none; border-radius: 0;
    z-index: var(--z-sheet);
  }
  #chat-title { padding: 12px; }
  .th-bub { max-width: 88%; }
  .th-chat-jump { bottom: 110px; }
}

/* ════════════════════════════════════════════════════
   تیترها (H1–H6) — مقیاس تایپوگرافی یکدست در ناحیه‌ی محتوا
   ----------------------------------------------------------------
   تیترهای بدون‌کلاس ظاهر یکنواخت و حرفه‌ای می‌گیرند (به‌جای اندازه‌های
   پیش‌فرض و ناهماهنگ مرورگر/بوت‌استرپ). محدود به #maincontent تا
   چرومِ سراسری دست‌نخورده بماند. .card-title بوت‌استرپ سرجای خود است.
   ════════════════════════════════════════════════════ */
#maincontent h1, #maincontent h2, #maincontent h3,
#maincontent h4, #maincontent h5, #maincontent h6 {
  color: var(--th-text-1);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .6em;
}
#maincontent h1 { font-size: 1.5rem; }
#maincontent h2 { font-size: 1.3rem; }
#maincontent h3 { font-size: 1.15rem; }
#maincontent h4 { font-size: 1.05rem; font-weight: 600; }
#maincontent h5 { font-size: .95rem; font-weight: 600; }
#maincontent h6 { font-size: .85rem; font-weight: 600; color: var(--th-text-2); }

/* ════════════════════════════════════════════════════
   کلاس‌های ظرف/div پرکاربرد که در قالب‌ها بودند ولی هیچ‌جا تعریف
   نشده بودند — حالا با توکن‌ها یکدست و سازگار با دارک‌مود تعریف می‌شوند.
   (سراسری چون utility هستند و هرجا به‌کار می‌روند.)
   ════════════════════════════════════════════════════ */
.shadow1    { box-shadow: var(--sh-sm); }
.bg-content { background-color: var(--th-surface); }
.rounded6   { border-radius: var(--r-sm); }   /* ۶px */
.altrow     { background-color: var(--th-surface-2); }

/* جعبه‌های هشدار قدیمی (div) — معادل توکنی th-alert */
.alert_warning, .alert_error, .alert_notify {
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  margin-bottom: 14px;
  font-size: .875rem;
  color: var(--th-text-1);
}
.alert_warning { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.22); }
.alert_error   { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.22); }
.alert_notify  { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.22); }

/* ════════════════════════════════════════════════════
   dash-box — کارت‌های گزینه‌ای صفحه‌ی تائید حساب (panel/approve.html)
   ----------------------------------------------------------------
   تنها جایی که این کلاس‌ها استفاده می‌شوند؛ قبلاً هیچ‌جا تعریف نشده
   بودند و صفحه بدون استایل دیده می‌شد. کارت با سرستون رنگی برند.
   ارتفاع برابر ستون‌ها از طریق stretch پیش‌فرض بوت‌استرپ تأمین می‌شود.
   ════════════════════════════════════════════════════ */
.dash-box {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  margin-bottom: 20px;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.dash-box:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
/* سرستون رنگی کارت */
.dash-box-icon {
  background: linear-gradient(135deg, var(--th-brand), var(--th-brand-dark));
  color: #fff; text-align: center;
  font-size: 1rem; font-weight: 700;
  padding: 14px 16px;
}
.dash-box-body {
  padding: 16px; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.dash-box-count {
  display: block;
  font-size: 1rem; font-weight: 600; color: var(--th-text-1);
}
.dash-box-title {
  display: block;
  font-size: .82rem; color: var(--th-text-2); line-height: 1.7;
}

/* ════════════════════════════════════════════════════
   جدول‌های PHP (.datatable / .borderless) — تک‌منبع مشترک
   ----------------------------------------------------------------
   فایل‌های PHP جدول‌ها را با class="datatable" یا "borderless" چاپ
   می‌کنند (نه .table بوت‌استرپ)، و این کلاس‌ها هیچ‌جا تعریف نشده بودند
   ⇒ جدول‌های PHP بدون استایل بودند. اینجا با همان توکن‌های .table یکدست
   می‌شوند:
   • انتخابگر روی th مستقیم (datatableها <thead> ندارند).
   • سلول‌ها شفاف می‌مانند تا رنگ وضعیت ردیف (bgcolor) دیده شود.
   • دارک‌مود از طریق توکن‌ها خودکار است.
   ════════════════════════════════════════════════════ */
.datatable {
  border-collapse: collapse;
  color: var(--th-text-1);
  font-size: .85rem;
  background-color: transparent;
}
.datatable th,
.datatable td {
  padding: 9px 12px;
  border: 1px solid var(--th-border);
  vertical-align: middle;
  background-color: transparent;
}
.datatable th {
  background-color: var(--th-surface-2);
  color: var(--th-text-2);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  border-bottom: 2px solid var(--th-border-2);
}
/* hover ملایم که رنگ وضعیت ردیف را پاک نمی‌کند */
.datatable tr:hover > td {
  background-color: color-mix(in srgb, var(--th-brand) 7%, transparent);
}

/* borderless: همان تایپوگرافی، بدون خطوط سلول (جدول‌های چیدمانی) */
.borderless {
  border-collapse: collapse;
  color: var(--th-text-1);
  font-size: .85rem;
  background-color: transparent;
}
.borderless th,
.borderless td {
  padding: 8px 12px;
  border: 0;
  vertical-align: middle;
  background-color: transparent;
}
.borderless th { font-weight: 600; color: var(--th-text-2); text-align: right; }

.cell-truncate {
  max-width: 300px;        /* عرض دلخواه */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════
   TOM SELECT — استایل مرکزی (جایگزین <style>های inline)
   وندور (tom-select.bootstrap5) قبل از این فایل لود می‌شود،
   پس این قوانین با ترتیب لود روی آن می‌نشینند.
   شامل: پسوند دامنه در product/whois/register-domain و سلکت‌های ادمین.
════════════════════════════════════════════════════ */

/* ── سلکت‌های پسوند داخل input-group (بدون کادر، شفاف، هم‌ارتفاع) ── */
.product-tld-group,
.whois-ext-group,
.tld-ext-group { padding-top: 0; padding-bottom: 0; }

.input-group-text .ts-wrapper { min-width: 150px; max-width: 260px; }
.input-group-text .ts-control {
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ── رفع دو‌ردیفی هنگام تایپ (فقط single) ──
   کادر جستجوی وندور min-width:7rem دارد و کنار آیتمِ انتخاب‌شده در باکس باریک
   به خط دوم می‌رود. به‌جای پنهان‌کردن آیتم (که گزینهٔ تازه‌انتخاب‌شده را تا blur
   نامرئی می‌کرد)، از شکستن به خط بعد جلوگیری می‌کنیم: nowrap + min-width کوچک.
   این‌طوری همیشه تک‌ردیف می‌ماند و آیتم بلافاصله پس از انتخاب دیده می‌شود.
   روی multi (whois) اعمال نمی‌شود تا برچسب‌ها بتوانند چند‌ردیفه شوند. */
.ts-wrapper.single .ts-control { flex-wrap: nowrap; }
.ts-wrapper.single .ts-control > input { min-width: 2rem; }

/* ── هایلایت حروف منطبق: زردِ وندور → برند ── */
.ts-dropdown [data-selectable] .highlight {
  background: color-mix(in srgb, var(--th-brand) 30%, transparent);
  color: inherit;
  border-radius: 2px;
}

/* ════ حالت شب ════
   وندور رنگ متن را ثابت #343a40 (تیره) گذاشته؛ روی زمینهٔ تیره ناخواناست.
   نکته: در این قالب متغیرهای پایهٔ تیره (--fbg/--bg-light/--border) فقط داخل
   بلوک @media auto تعریف شده‌اند و زیر html.dark مقدار ندارند؛ برای همین
   اینجا با var(..., مقدار پیش‌فرض) نوشته می‌شود تا هیچ‌وقت به شفاف نیفتد. */
html.dark .ts-control,
html.dark .ts-control input,
html.dark .ts-control .item,
html.dark .ts-dropdown { color: var(--bs-body-color, #c4c8d3); }

html.dark .ts-dropdown {
  background: var(--fbg, #191C1F);
  border-color: var(--border, rgba(228,228,228,.14));
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
html.dark .ts-dropdown .active { background-color: var(--bg-light, #2F3138); }
html.dark .ts-dropdown .optgroup-header {
  background: var(--fbg, #191C1F);
  color: var(--gray1, #999);
}

/* فلش کارت (chevron) وندور با stroke تیره ساخته شده — در شب روشنش می‌کنیم */
html.dark .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c4c8d3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}

/* برچسب‌های چندانتخابی (whois) در شب */
html.dark .ts-wrapper.multi .ts-control > div {
  background: var(--bg-light, #2F3138);
  color: var(--bs-body-color, #c4c8d3);
}
html.dark .ts-wrapper.multi .ts-control > div.active {
  background: var(--th-brand);
  color: var(--th-on-brand);
}

/* ════════════════════════════════════════════════════
   منوی کاربرِ نان (breadcrumb) — مدیر/کارمند
   دکمهٔ نام + منوی میان‌بر (کنترل‌پنل/تیکت/صورتحساب/…)
   بازطراحی از btn-light بوت‌استرپ به چیپِ سیستمِ طراحی
   و رفع نبودِ بک‌گراند منو در دارک‌مود (توکن‌های --th-*
   در هر دو حالت تعریف شده‌اند، برخلاف --fbg قدیمی).
════════════════════════════════════════════════════ */
/* بردکرامب بعد از سوار شدن روی نوار پنل دیگر داخل #pagetitle نیست،
   پس سلکتور نباید به آن مقید باشد. */
.breadcrumb .btn-group { position: relative; min-width: 0; }
/* منو باید روی محتوای صفحه بیفتد، نه زیر آن */
:is(#dropdown-menu-breadcrumb, #dropdown-menu-ticket).dropdown-menu.show { z-index: var(--z-overlay); }

:is(#breadcrumb-fullname, #breadcrumb-ticket).btn {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; max-width: 320px;
  padding: 5px 12px;
  font-size: .84rem; font-weight: 600; line-height: 1.4;
  color: var(--th-text-1);
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: 99px;
  box-shadow: var(--sh-sm);
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(#breadcrumb-fullname, #breadcrumb-ticket).btn:hover,
:is(#breadcrumb-fullname, #breadcrumb-ticket).btn:focus,
:is(#breadcrumb-fullname, #breadcrumb-ticket).btn.show,
:is(#breadcrumb-fullname, #breadcrumb-ticket).btn[aria-expanded="true"] {
  color: var(--th-text-1);
  background: var(--th-surface-2);
  border-color: var(--th-brand);
  box-shadow: 0 0 0 3px var(--th-brand-glow);
}
:is(#breadcrumb-fullname, #breadcrumb-ticket).btn .fa-check-circle { color: var(--th-info) !important; }
/* فلشِ dropdown-toggle: هم‌رنگِ متنِ کم‌رنگ + چرخش هنگام باز شدن */
:is(#breadcrumb-fullname, #breadcrumb-ticket).dropdown-toggle::after {
  margin-right: 2px; margin-left: 0;
  color: var(--th-text-3);
  transition: transform var(--t-fast);
}
:is(#breadcrumb-fullname, #breadcrumb-ticket).dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* منوی میان‌بر */
:is(#dropdown-menu-breadcrumb, #dropdown-menu-ticket).dropdown-menu {
  --bs-dropdown-bg: var(--th-surface);
  --bs-dropdown-border-color: var(--th-border);
  --bs-dropdown-link-color: var(--th-text-1);
  --bs-dropdown-link-hover-color: var(--th-text-1);
  --bs-dropdown-link-hover-bg: var(--th-surface-2);
  --bs-dropdown-link-active-color: var(--th-text-1);
  --bs-dropdown-link-active-bg: var(--th-surface-2);
  min-width: 210px;
  padding: 6px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
:is(#dropdown-menu-breadcrumb, #dropdown-menu-ticket).dropdown-menu .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  font-size: .84rem; font-weight: 500;
  color: var(--th-text-1);
  border-radius: var(--r-sm);
}
:is(#dropdown-menu-breadcrumb, #dropdown-menu-ticket).dropdown-menu .dropdown-item:hover,
:is(#dropdown-menu-breadcrumb, #dropdown-menu-ticket).dropdown-menu .dropdown-item:focus {
  color: var(--th-text-1);
  background: var(--th-surface-2);
}
:is(#dropdown-menu-breadcrumb, #dropdown-menu-ticket).dropdown-menu .dropdown-item i {
  width: 18px; text-align: center;
  color: var(--th-text-2);
  flex-shrink: 0;
}
:is(#dropdown-menu-breadcrumb, #dropdown-menu-ticket).dropdown-menu .dropdown-item:hover i,
:is(#dropdown-menu-breadcrumb, #dropdown-menu-ticket).dropdown-menu .dropdown-item:focus i { color: var(--th-brand); }
:is(#dropdown-menu-breadcrumb, #dropdown-menu-ticket).dropdown-menu .dropdown-divider {
  margin: 6px 4px;
  border-top-color: var(--th-border);
}

/* ════════════════════════════════════════════════════
   صفحهٔ امنیت (panel/security.html)
   کارت وضعیت کلی + چک‌لیست ۴ موردی + نکات
════════════════════════════════════════════════════ */
.sec-page { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }

/* ── کارت وضعیت کلی ── */
.sec-hero { padding: 20px 22px; }
.sec-hero-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sec-hero-ico {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
}
.sec-hero-ico.is-ok  { background: rgba(16,185,129,.12); color: var(--th-success); }
.sec-hero-ico.is-mid { background: rgba(245,158,11,.14); color: var(--th-warning); }
.sec-hero-ico.is-bad { background: rgba(239,68,68,.12);  color: var(--th-danger); }
.sec-hero-txt { flex: 1 1 200px; min-width: 0; }
.sec-hero-title { font-size: 1.05rem; font-weight: 700; color: var(--th-text-1); }
.sec-hero-sub { font-size: .84rem; color: var(--th-text-2); margin-top: 3px; line-height: 1.9; }
.sec-verdict {
  flex: 0 0 auto;
  padding: 6px 18px; border-radius: 99px;
  font-size: .92rem; font-weight: 700;
}
.sec-verdict.is-ok  { background: rgba(16,185,129,.12); color: var(--th-success); }
.sec-verdict.is-mid { background: rgba(245,158,11,.14); color: var(--th-warning); }
.sec-verdict.is-bad { background: rgba(239,68,68,.12);  color: var(--th-danger); }

/* نوار چهارقسمتی — هر قسمت یک چک امنیتی برقرار */
.sec-meter { display: flex; gap: 6px; margin-top: 16px; }
.sec-meter > span {
  flex: 1; height: 6px; border-radius: 99px;
  background: var(--th-border);
  transition: background var(--t-mid);
}
.sec-meter.is-ok  > span.on { background: var(--th-success); }
.sec-meter.is-mid > span.on { background: var(--th-warning); }
.sec-meter.is-bad > span.on { background: var(--th-danger); }

/* ── آیتم‌های چک‌لیست ── */
.sec-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.sec-item-ico {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
}
.sec-item.is-ok  .sec-item-ico { background: rgba(16,185,129,.1); color: var(--th-success); }
.sec-item.is-bad .sec-item-ico { background: rgba(239,68,68,.1);  color: var(--th-danger); }
.sec-item-body { flex: 1 1 auto; min-width: 0; }
.sec-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec-item-title { font-size: .95rem; font-weight: 700; color: var(--th-text-1); }
.sec-item-desc { font-size: .85rem; color: var(--th-text-2); margin-top: 5px; line-height: 1.9; }
.sec-item-act { flex: 0 0 auto; align-self: center; }
a.sec-item-act, a.sec-item-act:hover { text-decoration: none; }
@media (max-width: 575px) {
  .sec-item { flex-wrap: wrap; }
  .sec-item-act { flex: 1 1 100%; justify-content: center; }
}

/* ── نکات مهم ── */
.sec-notes .th-card-title i { color: var(--th-info); margin-left: 4px; }
.sec-notes-list { list-style: none; margin: 0; padding: 0; }
.sec-notes-list > li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 0;
  font-size: .87rem; line-height: 2; color: var(--th-text-1);
}
.sec-notes-list > li:first-child { padding-top: 0; }
.sec-notes-list > li:last-child { padding-bottom: 0; }
.sec-notes-list > li + li { border-top: 1px dashed var(--th-border); }
.sec-notes-list > li > i {
  width: 32px; height: 32px; flex: 0 0 auto;
  margin-top: 5px;
  border-radius: var(--r-sm);
  background: var(--th-surface-2); color: var(--th-text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
}

/* ════════════════════════════════════════════════════
   فرم‌های حسابِ کاربری — acc-*
   panel/change-password.html · change-mobile.html
   change-mail.html · profile.html
   الگو: کارت فرم (راست) + کارت راهنما (چپ)
════════════════════════════════════════════════════ */
.acc-wrap {
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 16px; align-items: start;
  max-width: 1040px;
}
@media (max-width: 767px) { .acc-wrap { grid-template-columns: 1fr; } }

/* پروفایل فرمِ بلند و چندستونی دارد، پس ستونِ فرم پهن و راهنما باریک می‌شود */
.acc-wrap-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); max-width: 1180px; }
@media (max-width: 991px) { .acc-wrap-wide { grid-template-columns: 1fr; } }

.acc-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--th-border);
  background: var(--th-surface-2);
}
.acc-head-ico {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--th-brand) 14%, transparent);
  color: var(--th-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.acc-head-title { font-size: 1rem; font-weight: 700; color: var(--th-text-1); }
.acc-head-sub { font-size: .78rem; color: var(--th-text-2); margin-top: 2px; }
/* نشانِ کنارِ عنوان (احراز هویت شده / نشده) */
.acc-head-badge {
  margin-inline-start: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.acc-head-badge.is-ok   { background: rgba(16,185,129,.12); color: #047857; }
.acc-head-badge.is-wait { background: rgba(245,158,11,.14); color: #B45309; }
html.dark .acc-head-badge.is-ok   { color: var(--th-success); }
html.dark .acc-head-badge.is-wait { color: var(--th-warning); }
@media (max-width: 575px) { .acc-head-badge { display: none; } }

.acc-card .th-card-body { padding: 20px; }
.acc-field { margin-bottom: 16px; }
.acc-field label {
  display: block; margin-bottom: 6px;
  font-size: .85rem; font-weight: 600; color: var(--th-text-1);
}
/* text-2 و نه text-3: این پرانتز متنِ واقعی است («۱۱ رقم، با ۰۹ شروع شود»،
   «حداقل ۸ کاراکتر») و کاربر باید بخواندش. text-3 توکنِ «خیلی کم‌رنگ» است و
   روی سطحِ کارت ۲.۵:۱ در روز و ۳.۳:۱ در شب می‌دهد — هر دو زیر AA. */
.acc-label-hint { font-weight: 400; color: var(--th-text-2); font-size: .78rem; }
/* لینکِ کوچکِ کنارِ برچسب — «تغییر موبایل» / «تغییر ایمیل».
   چون کلاس دارد، از قانونِ .th-content a:not([class]) در layout.css مستثناست
   و باید رنگِ لینک را خودش بگیرد. */
.acc-label-link { font-weight: 400; font-size: .76rem; margin-inline-start: 6px; color: var(--th-link); }
.acc-label-link:hover { color: var(--th-link-hover); text-decoration: underline; text-underline-offset: 2px; }
.acc-label-link i { font-size: .68rem; margin-inline-end: 3px; }
.acc-submit { width: 100%; margin-top: 4px; }
.acc-wait { text-align: center; padding: 8px 0; color: var(--th-text-2); font-size: .85rem; }

/* مقدارِ فقط‌خواندنی (موبایل/ایمیلِ فعلی) — به‌جای input disabled */
.acc-static {
  display: flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 8px 12px;
  border: 1px dashed var(--th-border-2); border-radius: var(--r-sm);
  background: var(--th-surface-2);
  font-size: .9rem; color: var(--th-text-1);
  overflow-wrap: anywhere;
}
.acc-static > i { flex: 0 0 auto; color: var(--th-text-3); font-size: .8rem; }
.acc-static .th-mono { font-weight: 600; }
.acc-static-empty { color: var(--th-text-3); font-size: .85rem; }

/* انتخابِ گزینه‌ای (رادیوی کارتی) — به‌جای <select> برای تنظیماتِ دوحالته.
   قواعد زیرِ .acc-opts نوشته می‌شوند تا از .acc-field label (display:block)
   قوی‌تر باشند، وگرنه چیدمانِ فلکسِ کارت می‌شکند. */
.acc-opts { display: grid; gap: 10px; }
.acc-opts .acc-opt {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0; padding: 12px 14px;
  border: 1px solid var(--th-border); border-radius: var(--r-md);
  background: var(--th-surface); cursor: pointer; font-weight: 400;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.acc-opts .acc-opt:hover { border-color: var(--th-brand); background: var(--th-surface-2); }
.acc-opts .acc-opt > input[type="radio"] { flex: 0 0 auto; margin: 3px 0 0; cursor: pointer; }
.acc-opts .acc-opt:has(input:checked) {
  border-color: var(--th-brand);
  background: color-mix(in srgb, var(--th-brand) 8%, transparent);
  box-shadow: 0 0 0 1px var(--th-brand) inset;
}
.acc-opt-body { flex: 1 1 auto; min-width: 0; }
.acc-opt-title {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .87rem; font-weight: 600; color: var(--th-text-1);
}
.acc-opt-desc { font-size: .79rem; color: var(--th-text-2); margin-top: 4px; line-height: 1.9; }
.acc-opt-tag {
  padding: 2px 8px; border-radius: 999px;
  font-size: .7rem; font-weight: 600;
  background: rgba(16,185,129,.12); color: var(--th-success);
}
/* حالتِ قفل — وقتی تغییرِ تنظیمات در انتظارِ تاییدِ ایمیل است */
.acc-opts.is-locked .acc-opt { cursor: not-allowed; opacity: .7; }
.acc-opts.is-locked .acc-opt:hover { border-color: var(--th-border); background: var(--th-surface); }
.acc-opts.is-locked .acc-opt:has(input:checked) {
  border-color: var(--th-border-2); background: var(--th-surface-2); box-shadow: none;
}

/* بخش‌بندی فرمِ بلند (profile) */
.acc-sec + .acc-sec { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--th-border); }
.acc-sec-hd {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  font-size: .85rem; font-weight: 700; color: var(--th-text-1);
}
.acc-sec-hd > i {
  width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--th-brand) 12%, transparent);
  color: var(--th-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
}
.acc-sec-hd small { font-weight: 400; color: var(--th-text-3); font-size: .76rem; }

/* ردیف‌های اطلاعاتیِ فقط‌خواندنی (بخش ادمین در profile) */
.acc-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.acc-info-item {
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: var(--r-sm); padding: 10px 12px;
  font-size: .85rem; color: var(--th-text-1); line-height: 1.9;
}
.acc-info-item > span { display: block; color: var(--th-text-2); font-size: .76rem; margin-bottom: 2px; }

/* نوار لینک‌های ادمین بالای فرم */
.acc-adminbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.acc-adminbar a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--th-border); background: var(--th-surface);
  font-size: .8rem; color: var(--th-text-1); text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.acc-adminbar a:hover { border-color: var(--th-brand); color: var(--th-brand); text-decoration: none; }
.acc-adminbar a > i { font-size: .78rem; color: var(--th-text-3); }
.acc-adminbar a:hover > i { color: var(--th-brand); }

/* پاورقی فرم — توضیح + دکمه ثبت */
.acc-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--th-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.acc-foot-note { font-size: .8rem; color: var(--th-text-2); }
.acc-foot .btn { min-width: 190px; }
@media (max-width: 575px) { .acc-foot .btn { width: 100%; } }

/* راهنما */
.acc-tips .th-card-title i { color: var(--th-info); margin-left: 4px; }
.acc-tips-list { list-style: none; margin: 0; padding: 0; }
.acc-tips-list > li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  font-size: .87rem; line-height: 2; color: var(--th-text-1);
}
.acc-tips-list > li:first-child { padding-top: 0; }
.acc-tips-list > li:last-child { padding-bottom: 0; }
.acc-tips-list > li + li { border-top: 1px dashed var(--th-border); }
.acc-tips-list > li > i {
  width: 32px; height: 32px; flex: 0 0 auto;
  margin-top: 5px;
  border-radius: var(--r-sm);
  background: var(--th-surface-2); color: var(--th-text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
}
/* ════════════════════════════════════════════════════
   تکمیل حساب — onb-*
   panel/profile-welcome.html
   گامِ آخرِ ثبت‌نام: یک ستون، بدون کارت راهنما و بدون نوار ادمین،
   تا چشمِ کاربرِ تازه فقط روی همان چند فیلد بماند.
════════════════════════════════════════════════════ */
.onb-wrap { max-width: 620px; margin-inline: auto; }

/* نوار گام‌ها — همان دو گامی که کاربر تازه طی کرده و می‌کند */
.onb-steps {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  list-style: none; margin: 0 0 14px; padding: 0;
}
.onb-step {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; color: var(--th-text-3);
}
.onb-step + .onb-step::before {
  content: ""; width: 22px; height: 1px;
  background: var(--th-border-2); margin-inline-end: 8px;
}
.onb-step-num {
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  background: var(--th-surface-2); color: var(--th-text-3);
  border: 1px solid var(--th-border);
}
/* رنگ‌های تُکِن روی زمینه‌ی روشن کنتراست کافی ندارند (همان نکته‌ی
   .discount-badge)، پس در روز نسخه‌ی تیره‌ترشان و در شب خودِ توکن. */
.onb-step.is-done { color: var(--th-text-2); }
.onb-step.is-done .onb-step-num {
  background: color-mix(in srgb, var(--th-success) 16%, transparent);
  border-color: transparent; color: #047857;
}
html.dark .onb-step.is-done .onb-step-num { color: var(--th-success); }
.onb-step.is-now { color: var(--th-text-1); font-weight: 600; }
.onb-step.is-now .onb-step-num {
  background: color-mix(in srgb, var(--th-brand) 20%, transparent);
  border-color: transparent; color: #B45309;
}
html.dark .onb-step.is-now .onb-step-num { color: var(--th-brand); }

/* چیزهایی که همین حالا تأیید شده‌اند — فیلدِ غیرفعال نیستند، پس
   کاربر دنبالِ ویرایششان نمی‌گردد */
.onb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.onb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--th-success) 10%, transparent);
  font-size: .8rem; color: var(--th-text-2);
}
.onb-chip > i { color: #047857; font-size: .8rem; }
html.dark .onb-chip > i { color: var(--th-success); }
.onb-chip > b { color: var(--th-text-1); font-weight: 600; }

.onb-hint { margin-top: 6px; font-size: .78rem; color: var(--th-text-3); line-height: 1.9; }

/* فیلدِ اختیاری، بسته تا شلوغ نکند */
.onb-more { margin-top: 4px; }
.onb-more > summary {
  cursor: pointer; list-style: none;
  font-size: .83rem; color: var(--th-link);
  padding: 6px 0;
}
.onb-more > summary::-webkit-details-marker { display: none; }
.onb-more > summary::before {
  content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: .62rem; margin-inline-end: 6px;
  display: inline-block; transition: transform var(--t-fast);
}
.onb-more[open] > summary::before { transform: rotate(180deg); }
.onb-more > summary:hover { color: var(--th-link-hover); }
.onb-more > .acc-field { margin-top: 10px; }

.onb-foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--th-border);
  text-align: center;
}
.onb-btn { width: 100%; max-width: 320px; }
.onb-note {
  margin-top: 14px; font-size: .79rem; line-height: 2;
  color: var(--th-text-2); text-align: start;
}
.onb-note > i { color: var(--th-text-3); margin-inline-end: 5px; }
.onb-skip {
  display: inline-block; margin-top: 12px;
  font-size: .8rem; color: var(--th-text-3);
}
.onb-skip:hover { color: var(--th-text-2); text-decoration: underline; text-underline-offset: 2px; }

/* کارتِ پایان — قرینه‌ی گام done در فرم ورود */
.onb-done { text-align: center; padding: 34px 24px; }
.onb-done-ico {
  width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--th-success) 14%, transparent);
  color: #047857;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
}
html.dark .onb-done-ico { color: var(--th-success); }
.onb-done-title { font-size: 1.12rem; font-weight: 700; color: var(--th-text-1); margin: 0 0 8px; }
.onb-done-sub { font-size: .88rem; line-height: 2.1; color: var(--th-text-2); margin: 0 0 20px; }

/* ═══════════════════════ صفحه محصول (product.html) ═══════════════════════ */
.product-title { font-size: 1.35rem; font-weight: 700; color: var(--th-text-1); margin: 0 0 8px; }
.product-title em { font-size: .75em; font-style: normal; color: var(--th-text-2); }

/* جعبه قیمت — جایگزین alert-info قبلی؛ prod_price را جاوااسکریپت پر می‌کند */
.product-price-box {
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.product-price-box .price-main { font-size: 1rem; font-weight: 700; color: var(--th-text-1); line-height: 2; }
.product-price-box .price-meta { margin-top: 6px; font-size: .82rem; color: var(--th-text-2); }
.product-price-box .price-meta:empty { display: none; }
.discount-badge {
  display: inline-block;
  background: color-mix(in srgb, var(--th-success) 15%, transparent);
  /* --th-success روی زمینه‌ی روشن فقط ~۲:۱ کنتراست می‌دهد، پس در روز
     سبزِ تیره‌تر و در شب خودِ توکن */
  color: #047857;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .76rem; font-weight: 700;
  margin-inline-start: 6px;
}
html.dark .discount-badge { color: var(--th-success); }
.trust-line { margin-top: 10px; font-size: .82rem; color: var(--th-text-2); }
.trust-line i { color: var(--th-success); margin-left: 4px; }

/* مشخصات کلیدی — فقط موبایل، بالای فرم سفارش */
.key-specs {
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 16px;
}
.key-specs-item {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0;
  font-size: .85rem;
}
.key-specs-item + .key-specs-item { border-top: 1px dashed var(--th-border); }
.key-specs-item span { color: var(--th-text-2); }
.key-specs-item b { color: var(--th-text-1); font-weight: 600; }
/* ── آکاردئون «مشاهده همه مشخصات» ──
   یک <details> واقعی است: در دسکتاپ باز و بدون summary (جدول، ستونِ کنارِ
   فرم سفارش است)، در موبایل بسته و با نوار تاگل. باز/بسته‌شدن را JS
   همگام می‌کند چون CSS به open دسترسی ندارد. */
.specs-acc-sum {
  display: none;               /* دسکتاپ: تاگل معنا ندارد */
  align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 14px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  font-size: .88rem; font-weight: 700; color: var(--th-text-1);
  cursor: pointer;
  list-style: none;
}
.specs-acc-sum::-webkit-details-marker { display: none; }
.specs-acc-sum::after {
  content: '\f078';            /* chevron-down */
  font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .72rem;
  color: var(--th-text-2);
  transition: transform var(--t-fast);
}
.specs-acc[open] > .specs-acc-sum::after { transform: rotate(180deg); }
.specs-acc[open] > .specs-acc-sum {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

/* دکمهٔ خرید در انتهای مشخصات — بدون آن کاربر باید کل جدول را برگردد بالا */
.specs-cta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--th-border); }
.specs-cta-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 16px;
  background: var(--th-brand);
  color: var(--th-on-brand);       /* متن تیره روی برند */
  border-radius: var(--r-md);
  font-size: .9rem; font-weight: 700;
  text-decoration: none;
  transition: background var(--t-fast);
}
.specs-cta-btn:hover, .specs-cta-btn:active, .specs-cta-btn:focus-visible {
  background: var(--th-brand-dark); color: var(--th-on-brand);
}
/* همان ضامنِ کنتراست: قاعدهٔ سراسریِ darkmode.css رنگ هر <a> را در شب
   نارنجیِ برند می‌کند و روی این دکمه یعنی متنِ نامرئی. */
html.dark a.specs-cta-btn { color: var(--th-on-brand) !important; }

/* هدفِ پرش‌ها کمی از لبهٔ بالا فاصله بگیرد */
[id^="details"], [id^="ordercard"] { scroll-margin-top: 12px; }

/* تأکید کوتاه پس از پرش تا کاربر بفهمد کجا رسیده */
@keyframes jump-flash {
  from { box-shadow: 0 0 0 3px var(--th-brand); }
  to   { box-shadow: 0 0 0 3px rgba(245,158,11,0); }
}
.jump-flash { border-radius: var(--r-md); animation: jump-flash 1.2s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .jump-flash { animation: none; } }

/* ── صفحهٔ محصول در موبایل ──
   ترتیب: مشخصات کلیدی → آکاردئون همهٔ مشخصات → فرم سفارش.
   جدولِ کامل قبلاً ته صفحه بود و «مشاهده همه مشخصات» فقط یک پرشِ
   ~۱۵۰۰پیکسلی بود؛ حالا همان‌جا باز می‌شود. */
@media (max-width: 767px) {
  .product-cols .key-specs-col { order: 0; }
  .product-cols .specs-col     { order: 1; }
  .product-cols .order-col     { order: 2; }
  /* آکاردئون درست زیر کارت مشخصات کلیدی می‌نشیند، پس فاصلهٔ آن حذف می‌شود */
  .key-specs-col .key-specs { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; }
  .specs-col { margin-bottom: 16px; }
  .specs-acc-sum { display: flex; }
  .specs-acc[open] > .bg-content { border-top-left-radius: 0; border-top-right-radius: 0; }
}

/* ═══════════════════ رادیو / چک‌باکس و انتخاب متن ═══════════════════ */
/* بوت‌استرپ برای .form-check-input مرزی به رنگ --bs-border-color می‌گذارد که
   هم در روز کم‌رنگ است هم در شب. اینها کنترلِ تعاملی‌اند و باید حلقه‌ی
   دیدنی داشته باشند، وگرنه حالتِ انتخاب‌نشده اصلاً به چشم نمی‌آید. */
/* فقط حالتِ انتخاب‌نشده؛ :checked باید دستِ بوت‌استرپ بماند وگرنه
   پرشدگیِ رنگیِ حالت انتخاب‌شده از بین می‌رود */
.form-check-input:not(:checked) {
  border: 1.5px solid var(--th-border-2);
  background-color: var(--th-surface);
}
.form-check-input:not(:checked):not(:disabled):hover { border-color: var(--th-text-3); }
html.dark .form-check-input:not(:checked) {
  border-color: rgba(255,255,255,.38);
  background-color: rgba(0,0,0,.28);
}
html.dark .form-check-input:not(:checked):not(:disabled):hover { border-color: rgba(255,255,255,.60); }
.form-check-label { cursor: pointer; }

/* انتخاب متن با ماوس — رنگ برند در هر دو تم.
   قبلاً فقط یک قانون html.dark با متغیر تعریف‌نشده وجود داشت که نتیجه‌اش
   پس‌زمینه‌ی شفاف + متن سفید بود، یعنی انتخاب عملاً نامرئی. */
::selection {
  background: var(--th-brand);
  color: var(--th-on-brand);
}

/* سربرگ گروه مشخصات در جدول محصول.
   رنگ پس‌زمینه inline از ستون product_specs_group.bgcolor می‌آید و پاستلیِ
   روشن است، بنابراین در حالت شب متنِ روشنِ قالب رویش ناخوانا می‌شد
   (کنتراست ~۱.۲). در روز متن را تیره می‌کنیم و در شب رنگِ دیتابیس را
   کنار می‌گذاریم. */
.spec-group-head { font-weight: 700; color: #111827; }
html.dark .spec-group-head {
  background-color: var(--th-surface-2) !important;
  color: var(--th-text-1);
}

/* ════════════════════════════════════════════════════
   رمز یکبار مصرف — tfa-*
   panel/2fa-1.html · 2fa-2.html · 2fa-3.html
   panel/2fa-enabled.html · 2fa-disable.html
   کارت‌های فرم از acc-* استفاده می‌کنند و اینجا فقط
   اجزای مخصوص 2FA (نوار مرحله، بارکد، کد اختصاصی، ورودی ۶ رقمی) است.
════════════════════════════════════════════════════ */
.tfa-page { display: flex; flex-direction: column; gap: 14px; max-width: 860px; }

/* ── نوار مراحل ── */
.tfa-stepbar { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.tfa-stepbar > li {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--th-border); background: var(--th-surface-2);
  font-size: .81rem; color: var(--th-text-2);
  white-space: nowrap; overflow: hidden;
}
.tfa-stepbar .n {
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  background: var(--th-border); color: var(--th-text-2);
}
.tfa-stepbar > li.is-done   { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.07); color: var(--th-success); }
.tfa-stepbar > li.is-done .n { background: var(--th-success); color: #fff; }
.tfa-stepbar > li.is-active {
  border-color: var(--th-brand); background: rgba(245,158,11,.09);
  color: var(--th-text-1); font-weight: 700;
}
.tfa-stepbar > li.is-active .n { background: var(--th-brand); color: var(--th-on-brand); }
/* موبایل: فقط مرحله‌ی جاری متن دارد تا نوار در یک ردیف جا شود */
@media (max-width: 575px) {
  .tfa-stepbar > li { flex: 0 0 auto; padding: 8px 10px; }
  .tfa-stepbar > li .t { display: none; }
  .tfa-stepbar > li.is-active { flex: 1 1 auto; }
  .tfa-stepbar > li.is-active .t { display: inline; }
}

/* ── کارت سربرگ ── */
.tfa-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 22px; }
.tfa-hero-ico {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  background: rgba(245,158,11,.14); color: var(--th-warning);
}
.tfa-hero.is-ok  .tfa-hero-ico { background: rgba(16,185,129,.12); color: var(--th-success); }
.tfa-hero.is-bad .tfa-hero-ico { background: rgba(239,68,68,.12);  color: var(--th-danger); }
.tfa-hero-txt { flex: 1 1 220px; min-width: 0; }
.tfa-hero-title { font-size: 1.05rem; font-weight: 700; color: var(--th-text-1); }
.tfa-hero-sub { font-size: .84rem; color: var(--th-text-2); margin-top: 4px; line-height: 1.9; }
.tfa-hero-badge {
  flex: 0 0 auto;
  padding: 6px 16px; border-radius: 99px;
  font-size: .85rem; font-weight: 700;
  background: var(--th-surface-2); color: var(--th-text-2);
}
.tfa-hero-badge.is-ok  { background: rgba(16,185,129,.12); color: var(--th-success); }
.tfa-hero-badge.is-bad { background: rgba(239,68,68,.12);  color: var(--th-danger); }

/* ── «چطور کار می‌کند» ── */
.tfa-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tfa-how-item {
  padding: 14px 15px; border-radius: var(--r-md);
  border: 1px solid var(--th-border); background: var(--th-surface-2);
}
.tfa-how-item > i { font-size: 1.05rem; color: var(--th-brand); }
.tfa-how-title { font-size: .88rem; font-weight: 700; color: var(--th-text-1); margin: 9px 0 4px; }
.tfa-how-desc  { font-size: .8rem; color: var(--th-text-2); line-height: 1.95; }

/* ── بارکد ── */
.tfa-qr { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.tfa-qr-frame {
  flex: 0 0 auto; line-height: 0;
  padding: 12px; border-radius: var(--r-lg);
  /* بارکد باید در حالت شب هم روی زمینه‌ی سفید بماند تا اسکن شود */
  background: #fff; border: 1px solid var(--th-border); box-shadow: var(--sh-sm);
}
.tfa-qr-frame img { display: block; width: 190px; height: 190px; }
.tfa-qr-side { flex: 1 1 250px; min-width: 0; }
@media (max-width: 575px) { .tfa-qr { justify-content: center; } }

/* ── لینک اپلیکیشن‌ها ── */
.tfa-apps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.tfa-app {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: var(--r-md);
  border: 1px solid var(--th-border); background: var(--th-surface);
  font-size: .8rem; color: var(--th-text-1); text-decoration: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.tfa-app:hover { border-color: var(--th-brand); color: var(--th-brand); text-decoration: none; }
.tfa-app img { height: 20px; width: auto; flex: 0 0 auto; }

/* ── کد اختصاصی ── */
.tfa-secret-lbl { font-size: .8rem; color: var(--th-text-2); margin-bottom: 7px; }
.tfa-secret {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--th-surface-2); border: 1px dashed var(--th-border-2);
}
.tfa-secret-code {
  flex: 1 1 140px; min-width: 0;
  font-family: var(--font-num); direction: ltr; text-align: left;
  font-size: .95rem; font-weight: 700; letter-spacing: 1.5px;
  color: var(--th-text-1); word-break: break-all;
}

/* ── ورودی کد ۶ رقمی ──
   با #maincontent هم نوشته می‌شود چون قانون یکدست‌سازی فرم‌ها در همین فایل
   با اسپسیفیسیتی id نوشته شده و در غیر این صورت روی فونت/سایز غالب می‌شد. */
.tfa-otp,
#maincontent input.tfa-otp:not(.btn) {
  max-width: 240px;
  text-align: center;
  font-family: var(--font-num);
  font-size: 1.4rem; font-weight: 700;
  letter-spacing: .5em; text-indent: .5em;
  padding: 9px 12px;
}
.tfa-otp::-webkit-outer-spin-button,
.tfa-otp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── دکمه‌های پایین فرم ── */
.tfa-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.tfa-actions > * { flex: 1 1 180px; text-align: center; }

/* ── راه جایگزین (ارسال با SMS) ── */
.tfa-alt { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--th-border); }
.tfa-alt-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none;
  font-family: inherit; font-size: .83rem; color: var(--th-link);
  cursor: pointer; user-select: none;
}
.tfa-alt-toggle:hover { color: var(--th-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.tfa-alt-body { margin-top: 12px; }

/* ════════════════════════════════════════════════════
   جدول DNS اختصاصی (glue record) — automation/domain-childhost-list.html
   ----------------------------------------------------------------
   • ستون «اختیارات» به‌اندازه‌ی محتوا جمع می‌شود و دو ستون DNS/IP بقیه‌ی
     عرض را نصف‌نصف می‌گیرند.
   • قانون عمومیِ «ستون اول جدول‌های فرمی جمع شود» (بالاتر در همین فایل)
     اینجا خنثی می‌شود، چون این جدول هم داده است هم فرم و ستون اولش باید
     عریض بماند.
   ════════════════════════════════════════════════════ */
.childhost-table { margin-bottom: 0; }
.table.childhost-table > thead > tr > th:not(.childhost-col-actions),
.table.childhost-table > tbody > tr > td:first-child,
.table.childhost-table > tbody > tr > td:nth-child(2) {
  width: 50%;
  white-space: normal;
}
.table.childhost-table > thead > tr > th.childhost-col-actions,
.table.childhost-table > tbody > tr > td:nth-child(3) {
  width: 1%;
  white-space: nowrap;
}
.childhost-name,
.childhost-ip {
  display: inline-block;
  font-family: var(--font-num);
  word-break: break-all;
}
/* دکمه‌های هر ردیف کنار هم، با فاصله‌ی یکنواخت (جای «|» های قدیمی).
   nowrap تا ستون «اختیارات» به‌جای دو طبقه شدن، عرض طبیعی خودش را بگیرد؛
   در عرض کم، .table-responsive اسکرول افقی می‌دهد. */
.childhost-btns { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.childhost-btns > .btn { flex: 0 0 auto; }
/* ردیفِ «افزودن» انتهای جدول از ردیف‌های داده متمایز باشد */
.table.childhost-table > tbody > tr.childhost-add-row > td {
  background-color: var(--th-surface-2);
  vertical-align: top;
}
.childhost-empty { color: var(--th-text-2); text-align: center; }
.childhost-hint {
  margin-top: 14px;
  font-size: .82rem;
  line-height: 1.9;
  color: var(--th-text-2);
}

/* ════════════════════════════════════════════════════
   صفحه صورتحساب — inv-*
   panel/viewinvoice.html  (آدرس invoice-<id>.htm)
   ----------------------------------------------------------------
   • رنگِ وضعیت صورتحساب از یک متغیر (--inv-c) می‌آید که روی .inv-hero
     و .inv-status ست می‌شود؛ بقیه‌ی اجزا از همان ارث می‌برند تا
     پرداخت‌شده/نشده/لغو با یک تغییرِ کلاس عوض شود.
   • درگاه‌های پرداخت کارت‌اند نه ردیف جدول؛ جزئیات و دکمه‌ی پرداختِ
     هر درگاه فقط روی کارتِ .is-active دیده می‌شود و این کار با CSS
     انجام می‌شود، نه با style="display:none" در قالب.
════════════════════════════════════════════════════ */
.inv-page { display: flex; flex-direction: column; gap: 14px; }
/* بدون این، min-width:auto ی آیتم‌های فلکس اجازه نمی‌دهد کارتِ جدولِ
   «اطلاعات پرداخت» جمع شود و .table-responsive به‌جای اسکرول، کلِ صفحه را
   در موبایل پهن می‌کند */
.inv-page > * { min-width: 0; }

/* ── سربرگ: شماره، وضعیت و مبلغ ── */
.inv-hero {
  --inv-c: var(--th-text-3);
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; padding: 20px 24px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.inv-hero::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; inset-inline-start: 0; width: 4px;
  background: var(--inv-c);
}
.inv-hero.is-paid     { --inv-c: var(--th-success); }
.inv-hero.is-unpaid   { --inv-c: var(--th-danger); }
.inv-hero.is-pending  { --inv-c: var(--th-warning); }
.inv-hero.is-wrong    { --inv-c: var(--th-danger); }
.inv-hero.is-canceled { --inv-c: var(--th-text-3); }

.inv-hero-info { min-width: 0; }
.inv-hero-id { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.inv-hero-lbl { font-size: .84rem; color: var(--th-text-2); }
.inv-hero-num {
  font-family: var(--font-num); direction: ltr;
  font-size: 1.3rem; font-weight: 700; color: var(--th-text-1);
}
.inv-hero-desc {
  margin-top: 8px; font-size: .87rem; line-height: 1.9;
  color: var(--th-text-2); max-width: 60ch;
}
.inv-hero-desc em { font-style: normal; color: var(--th-text-3); }

.inv-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; white-space: nowrap;
  color: var(--inv-c);
  background: color-mix(in srgb, var(--inv-c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--inv-c) 28%, transparent);
}
/* توکن‌های وضعیت روی زمینه‌ی روشن کنتراست کافی ندارند (سبز ~۲:۱،
   قرمز ~۳.۸:۱، کهربایی ~۲:۱)، پس در روز نسخه‌ی تیره‌ترشان را می‌گذاریم
   و در شب خودِ توکن را برمی‌گردانیم — همان کاری که .discount-badge می‌کند */
.inv-hero.is-paid     .inv-status { color: #047857; }
.inv-hero.is-unpaid   .inv-status,
.inv-hero.is-wrong    .inv-status { color: #B91C1C; }
.inv-hero.is-pending  .inv-status { color: #B45309; }
.inv-hero.is-canceled .inv-status { color: var(--th-text-2); }
html.dark .inv-hero .inv-status { color: var(--inv-c); }

.inv-amount { text-align: center; flex: 0 0 auto; }
.inv-amount-lbl { display: block; font-size: .76rem; color: var(--th-text-3); margin-bottom: 4px; }
.inv-amount-val { font-size: .95rem; color: var(--th-text-2); white-space: nowrap; }
.inv-amount-val b {
  font-family: var(--font-num);
  font-size: 1.75rem; font-weight: 800; color: var(--th-text-1);
  margin-inline-end: 4px;
}

/* ── نوار تاریخ‌ها ── */
.inv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.inv-meta-item {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
}
.inv-meta-item > i {
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--th-surface-2); color: var(--th-text-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
}
.inv-meta-item.is-warn > i { background: rgba(245,158,11,.1); color: var(--th-warning); }
.inv-meta-item.is-danger > i { background: rgba(239,68,68,.1); color: var(--th-danger); }
.inv-meta-k { font-size: .74rem; color: var(--th-text-3); }
.inv-meta-v { font-size: .87rem; font-weight: 600; color: var(--th-text-1); margin-top: 2px; }
.inv-meta-v .num { font-family: var(--font-num); }

/* ── درگاه‌های پرداخت ── */
.inv-gw-list { display: flex; flex-direction: column; gap: 10px; }
.inv-gw {
  border: 1.5px solid var(--th-border);
  border-radius: var(--r-md);
  background: var(--th-surface);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.inv-gw:hover { border-color: var(--th-border-2); }
.inv-gw.is-active {
  border-color: var(--th-brand);
  background: color-mix(in srgb, var(--th-brand) 6%, var(--th-surface));
  box-shadow: 0 0 0 3px var(--th-brand-glow);
}
.inv-gw-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 12px 14px; cursor: pointer;
}
.inv-gw-head > .form-check-input { flex: 0 0 auto; margin: 0; }
.inv-gw-logo {
  width: 42px; height: 42px; flex: 0 0 auto;
  object-fit: contain; border-radius: var(--r-sm);
  background: #fff; padding: 3px;
  border: 1px solid var(--th-border);
}
.inv-gw-name { display: block; font-size: .9rem; font-weight: 600; color: var(--th-text-1); }
.inv-gw-tax { display: block; font-size: .75rem; color: var(--th-text-3); margin-top: 3px; }
.inv-gw:not(.is-active) .inv-gw-tax,
.inv-gw:not(.is-active) .inv-gw-body { display: none; }
.inv-gw-body { padding: 0 14px 14px; }
/* کدِ درگاه از دیتابیس می‌آید و ساختارش ثابت نیست؛ فقط دکمه‌ی نهایی را
   تمام‌عرض می‌کنیم تا CTA پرداخت گم نشود */
.inv-gw-body input[type="submit"],
.inv-gw-body button[type="submit"],
.inv-gw-body .btn { width: 100%; }

/* ── ریز مبالغ ── */
.inv-sum-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; font-size: .88rem; color: var(--th-text-2);
}
.inv-sum-row + .inv-sum-row { border-top: 1px dashed var(--th-border); }
.inv-sum-row .k { min-width: 0; line-height: 1.9; }
.inv-sum-row .k em { font-style: normal; color: var(--th-text-3); }
.inv-sum-row .v { font-family: var(--font-num); font-weight: 600; color: var(--th-text-1); white-space: nowrap; }
.inv-sum-row.is-discount .v { color: #047857; }
html.dark .inv-sum-row.is-discount .v { color: var(--th-success); }
.inv-sum-total {
  background: var(--th-surface-2);
  border-top: 1px solid var(--th-border) !important;
  padding-block: 16px;
}
.inv-sum-total .k { font-size: .95rem; font-weight: 700; color: var(--th-text-1); }
.inv-sum-total .v { font-size: 1.3rem; font-weight: 800; }

/* ── رسید پرداخت ──
   عمداً جدول نیست: قانون سراسری «.table th { white-space: nowrap }» باعث
   می‌شد ردیف‌های یک جدول ۴ ستونی در موبایل به‌جای اسکرول، از کادر بیرون
   بزنند و بریده شوند. گرید در دسکتاپ همان نمای ۴ ستونی را می‌دهد و در
   موبایل به فهرست «برچسب ← مقدار» تبدیل می‌شود. */
.inv-receipt { display: grid; grid-template-columns: repeat(4, 1fr); }
.inv-receipt > div { padding: 14px 18px; text-align: center; min-width: 0; }
.inv-receipt > div + div { border-inline-start: 1px solid var(--th-border); }
.inv-receipt-k { font-size: .72rem; color: var(--th-text-3); margin-bottom: 5px; }
.inv-receipt-v { font-size: .88rem; font-weight: 600; color: var(--th-text-1); overflow-wrap: anywhere; }
.inv-receipt-v .num { font-family: var(--font-num); }
.inv-receipt-v em {
  display: block; margin-top: 3px;
  font-style: normal; font-weight: 400; font-size: .75rem; color: var(--th-text-2);
}

@media (max-width: 760px) {
  .inv-receipt { grid-template-columns: 1fr; }
  .inv-receipt > div {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; text-align: start; padding: 11px 16px;
  }
  .inv-receipt > div + div { border-inline-start: 0; border-top: 1px dashed var(--th-border); }
  .inv-receipt-k { margin-bottom: 0; flex: 0 0 auto; }
  /* em زیر مقدار می‌ماند (نه inline)، وگرنه به متنِ قبلی می‌چسبد */
  .inv-receipt-v { text-align: end; }
}

/* ── طرفین صورتحساب ── */
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.inv-party { padding: 18px; }
.inv-party + .inv-party { border-inline-start: 1px solid var(--th-border); }
.inv-party-role {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: .71rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--th-text-3);
}
.inv-party-name { font-size: .95rem; font-weight: 700; color: var(--th-text-1); }
.inv-party-lines { margin-top: 5px; font-size: .82rem; line-height: 2.1; color: var(--th-text-2); }
.inv-party-lines .num { font-family: var(--font-num); }

/* ── ابزارهای مدیریتی (فقط ادمین/پشتیبانی/مالی) ── */
.inv-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-tool {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--th-border); background: var(--th-surface-2);
  font-size: .8rem; color: var(--th-text-2);
  transition: border-color var(--t-fast), color var(--t-fast);
}
a.inv-tool:hover { border-color: var(--th-brand); color: var(--th-text-1); text-decoration: none; }
a.inv-tool.is-danger { color: var(--th-danger); border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.06); }
a.inv-tool.is-danger:hover { border-color: var(--th-danger); }
.inv-tool .num { font-family: var(--font-num); color: var(--th-text-1); font-weight: 600; }
.inv-note { font-size: .83rem; line-height: 2; color: var(--th-text-2); }
.inv-note blockquote {
  margin: 6px 0 0; padding: 10px 12px;
  border-inline-start: 3px solid var(--th-border-2);
  background: var(--th-surface-2); border-radius: var(--r-sm);
  font-size: .83rem; color: var(--th-text-1);
}

/* ── فهرست هشدارها داخل کارت ── */
.inv-hint-list { margin: 0; padding-inline-start: 18px; font-size: .82rem; line-height: 2.1; color: var(--th-text-2); }
.inv-hint-list li + li { margin-top: 2px; }

/* ════════════════════════════════════════════════════
   لیست صورتحساب‌ها — invl-*
   panel/transaction-list.html  (آدرس invoices-<uid>.htm)
   ----------------------------------------------------------------
   • راهنمای وضعیت (پرداخت‌شده/نشده/اشتباه/انتظار) هم‌زمان فیلترِ لیست است؛
     با .filter-pills مشترکِ لیست تیکت‌ها ساخته می‌شود و هر قرص یک نقطه‌ی
     رنگیِ .inv-dot دارد.
   • رنگِ پس‌زمینه‌ی ردیف‌ها همچنان از PHP (attribute bgcolor) می‌آید و
     دارک‌مود آن را در darkmode.css خنثی می‌کند؛ اینجا فقط چیدمان مدرن
     می‌شود.
   ════════════════════════════════════════════════════ */
/* نقطه‌ی رنگیِ راهنمای وضعیت داخل قرص فیلتر */
.inv-dot {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; flex: 0 0 auto;
  background: var(--d, var(--th-text-3));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--d, var(--th-text-3)) 22%, transparent);
}
.inv-dot-paid    { --d: var(--th-success); }
.inv-dot-unpaid  { --d: var(--th-warning); }
.inv-dot-error   { --d: var(--th-danger); }
.inv-dot-pending { --d: var(--th-info); }
.filter-pills > a > .inv-dot { margin-inline-end: 6px; vertical-align: middle; }

/* شمارشِ کوچکِ کنارِ عنوانِ لیست */
.invl-count {
  font-size: .78rem; font-weight: 600;
  color: var(--th-text-2); font-family: var(--font-num);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: 99px; padding: 2px 10px;
}

/* سرستونِ قابلِ مرتب‌سازی: برچسب + دو پیکانِ ریز */
.invl-th { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.invl-sort { display: inline-flex; flex-direction: column; line-height: .6; gap: 1px; }
.invl-sort a { color: var(--th-text-3); font-size: .62rem; transition: color var(--t-fast); }
.invl-sort a:hover { color: var(--th-brand); }

/* شماره‌ی صورتحساب — تک‌عرض و لاتین، بدونِ زیرخطِ قدیمی */
.invl-id {
  font-family: var(--font-num); direction: ltr;
  font-weight: 700; color: var(--th-text-1);
  text-decoration: none;
}
.invl-id:hover { color: var(--th-brand); }

/* ستونِ مبلغ */
.invl-price { font-family: var(--font-num); font-weight: 600; white-space: nowrap; }
.invl-price-old {
  display: inline-block; text-decoration: line-through;
  color: var(--th-text-3); font-size: .82em; margin-inline-end: 4px;
}
.invl-price-off { color: #047857; font-size: .78rem; }
html.dark .invl-price-off { color: var(--th-success); }

/* دکمه‌ی «مشاهده / پرداخت» داخلِ ردیف */
.invl-act {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 99px; white-space: nowrap;
  font-size: .8rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--th-border-2); color: var(--th-text-2);
  background: var(--th-surface);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.invl-act:hover { color: var(--th-text-1); border-color: var(--th-brand); }
.invl-act.is-pay {
  border-color: transparent; color: #fff;
  background: var(--th-success);
}
.invl-act.is-pay:hover { color: #fff; filter: brightness(1.08); border-color: transparent; }

/* نوارِ عملیاتِ پایینِ لیست (پرداختِ گروهی / حذفِ گروهی) — به‌جای دکمه‌ی
   تمام‌عرضِ btn-block که مثلِ یک بلوکِ بزرگ دیده می‌شد */
.invl-bulk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; margin: 16px 0 4px;
}
.invl-bulk .form-check { margin: 0; }

/* ── کارت پرداخت با کارت بانکیِ اجباری ── */
.inv-forcecard { font-family: var(--font-num); direction: ltr; text-align: center; font-weight: 700; line-height: 2; }

@media (max-width: 640px) {
  .inv-hero { padding: 16px; gap: 12px; }
  .inv-hero-num { font-size: 1.1rem; }
  .inv-amount { text-align: start; }
  .inv-amount-val b { font-size: 1.5rem; }
  .inv-parties { grid-template-columns: 1fr; }
  .inv-party + .inv-party { border-inline-start: 0; border-top: 1px solid var(--th-border); }
}


/* ════════════════════════════════════════════════════
   صفحه سرویس — svc-*
   panel/show-service.html  (آدرس service-<id>.htm)
   ----------------------------------------------------------------
   • نوار تب‌ها یک segmented control است، نه تبِ پیش‌فرض بوت‌استرپ؛
     ساختار .nav-tabs/.tab-pane دست‌نخورده می‌ماند چون script.js با
     همان data-bs-toggle و کلاس pending-load تبِ «تنظیمات» را لود
     می‌کند و ماژول‌های اتوماسیون با createNavTab() تب اضافه می‌کنند.
   • پنل‌ها (tab-pane) کارتِ سفیدند، پس بلوک‌های داخلشان تختِ
     --th-surface-2 هستند تا کارت‌تو‌کارت سنگین دیده نشود.
   • رنگ وضعیت سرویس از --svc-c روی .svc-hero می‌آید و اجزای داخلی
     از همان ارث می‌برند.
════════════════════════════════════════════════════ */

/* ── نوار تب‌ها ── */
/* wrapper چسبنده: خودِ نوار overflow-x دارد، پس نمی‌تواند هم اسکرولر باشد
   و هم پس‌زمینه‌ای بیرون از قاب خودش بکشد. wrapper این کار را می‌کند:
   • زیرِ هدر سایت و هدر پنل می‌ایستد (هر دو sticky هستند)
   • زمینه‌ی صفحه را می‌گیرد تا محتوا از کنارِ گوشه‌های گردِ نوار نشت نکند
   • z-index پایین‌تر از --z-header می‌ماند تا زیر هدر پنل برود، نه رویش
   padding/margin قرینه‌اند تا در حالت غیرچسبیده نوار دقیقاً همان‌جای قبلی
   بماند (۱۴px فاصله‌ی زیرش که قبلاً روی خودِ .svc-tabs بود). */
.svc-tabs-bar {
  position: sticky;
  top: calc(var(--th-nav-h) + var(--th-panel-h));
  z-index: 80;
  background: var(--th-bg);
  padding-block: 10px;
  margin-block: -10px 4px;
}
/* اسکرول افقی دارد ولی اسکرول‌بارش پنهان است؛ بدون نشانهٔ بصری، تب‌هایی که
   بیرون قاب می‌مانند (مثل «تمدید» در موبایل) نامرئی و کشف‌ناشدنی‌اند.
   ماسک زیر لبهٔ سرریز را محو می‌کند تا معلوم شود ادامه دارد. چون در RTL
   سرریز سمت چپ است، ماسک هم از همان سمت شروع می‌شود. */
.svc-tabs.nav-tabs {
  display: flex; flex-wrap: nowrap; gap: 6px;
  padding: 6px; margin-bottom: 14px;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.svc-tabs.nav-tabs .nav-link { scroll-snap-align: end; }
/* کلاس‌ها را thUpdateTabFade در script.js می‌گذارد — فقط وقتی واقعاً سرریز
   هست و در همان سمتی که هنوز محتوای دیده‌نشده دارد. ماسک روی خودِ اسکرولر
   است تا هم متن تب و هم پس‌زمینه‌اش با هم محو شوند. */
.svc-tabs.nav-tabs.has-more-end {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent 100%);
}
.svc-tabs.nav-tabs.has-more-start {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}
.svc-tabs.nav-tabs.has-more-start.has-more-end {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(to left, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
.svc-tabs.nav-tabs::-webkit-scrollbar { display: none; }
/* داخل wrapperِ چسبنده، فاصله‌ی زیرین به خودِ wrapper منتقل شده */
.svc-tabs-bar > .svc-tabs.nav-tabs { margin-bottom: 0; }
/* وقتی چسبیده است یک لبه‌ی نرم می‌گیرد تا از محتوایی که زیرش رد می‌شود
   جدا دیده شود. کلاس is-stuck را thStickyTabs در script.js می‌گذارد. */
.svc-tabs-bar.is-stuck > .svc-tabs.nav-tabs {
  border-color: var(--th-border-2);
  box-shadow: var(--sh-md);
}
.svc-tabs.nav-tabs .nav-link {
  flex: 1 1 0; min-width: max-content;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border: 0; border-radius: var(--r-md);
  font-family: inherit; font-size: .87rem; font-weight: 600; white-space: nowrap;
  color: var(--th-text-2); background: transparent;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.svc-tabs.nav-tabs .nav-link i { font-size: .9em; opacity: .85; }
.svc-tabs.nav-tabs .nav-link:hover { background: var(--th-surface); color: var(--th-text-1); }
.svc-tabs.nav-tabs .nav-link.active {
  background: var(--th-surface); color: #B45309;   /* توکن برند روی سفید ~۳:۱ است؛ تیره‌ترش می‌کنیم */
  box-shadow: var(--sh-sm);
}
html.dark .svc-tabs.nav-tabs .nav-link.active { color: var(--th-brand); }
.svc-tabs.nav-tabs .nav-link.active i { opacity: 1; }

/* پنل‌ها — قابِ یکدست برای هر چهار تب */
.svc-tabc > .tab-pane {
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
}

/* ── چیدمان کلی تب ── */
.svc-page { display: flex; flex-direction: column; gap: 14px; }
.svc-page > * { min-width: 0; }

/* ── سربرگ: شناسه، دامنه، محصول، وضعیت و روزهای باقی‌مانده ── */
.svc-hero {
  --svc-c: var(--th-text-3);
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 22px;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
}
.svc-hero::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; inset-inline-start: 0; width: 4px;
  background: var(--svc-c);
}
.svc-hero.is-active    { --svc-c: var(--th-success); }
.svc-hero.is-suspended { --svc-c: var(--th-warning); }
.svc-hero.is-unpaid,
.svc-hero.is-abuse     { --svc-c: var(--th-danger); }
.svc-hero.is-pending   { --svc-c: var(--th-info); }

.svc-hero-main { min-width: 0; flex: 1 1 260px; }
.svc-hero-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.svc-hero-lbl { font-size: .8rem; color: var(--th-text-2); }
.svc-hero-num {
  font-family: var(--font-num); direction: ltr;
  font-size: 1.25rem; font-weight: 700; color: var(--th-text-1);
}
.svc-hero-domain {
  margin-top: 9px; font-size: 1.05rem; font-weight: 700;
  direction: ltr; text-align: right; overflow-wrap: anywhere;
  color: var(--th-text-1);
}
.svc-hero-domain a { color: inherit; }
.svc-hero-domain a:hover { color: var(--th-brand); }
.svc-hero-prod {
  /* wrap لازم است: عنوان محصول بلند است و چیپ ارتقا نباید از کادر بزند */
  margin-top: 5px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: .83rem; color: var(--th-text-2);
}
.svc-hero-prod img { border-radius: 2px; }
.svc-hero-prod a { color: inherit; }
.svc-hero-prod a:hover { color: var(--th-brand); text-decoration: underline; text-underline-offset: 2px; }

/* ارتقا کنار نام محصول — چون «ارتقا» یعنی عوض‌کردن پلن و جایش کنار
   خودِ پلن است. عمداً چیپِ کوچک است تا با دکمه‌ی ردیف عملیات (که
   همچنان سرجایش هست) رقابت نکند. انتخابگرها a دارند تا بر قانونِ
   .svc-hero-prod a غالب شوند. */
.svc-hero-prod a.svc-hero-upgrade {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--th-brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--th-brand) 32%, transparent);
  /* یک پله تیره‌تر از #B45309 معمولِ بقیه‌ی بخش‌ها: زمینه‌ی این چیپ
     تینتِ برند روی --th-surface-2 است (نه سفید) و با B45309 کنتراست
     ۴.۴۱ می‌شد؛ با این مقدار ۶.۲ است. */
  font-size: .72rem; font-weight: 600; color: #92400E;
  white-space: nowrap; text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.svc-hero-prod a.svc-hero-upgrade:hover {
  background: color-mix(in srgb, var(--th-brand) 20%, transparent);
  border-color: var(--th-brand); color: #92400E; text-decoration: none;
}
html.dark .svc-hero-prod a.svc-hero-upgrade,
html.dark .svc-hero-prod a.svc-hero-upgrade:hover { color: var(--th-brand); }

.svc-state {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  color: var(--svc-c);
  background: color-mix(in srgb, var(--svc-c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--svc-c) 28%, transparent);
}
/* توکن‌های وضعیت روی زمینه‌ی روشن کنتراست کافی ندارند — همان کاری که .inv-status می‌کند */
.svc-hero.is-active    .svc-state { color: #047857; }
.svc-hero.is-unpaid    .svc-state,
.svc-hero.is-abuse     .svc-state { color: #B91C1C; }
.svc-hero.is-suspended .svc-state { color: #B45309; }
.svc-hero.is-pending   .svc-state { color: #1D4ED8; }
.svc-hero.is-deleted   .svc-state,
.svc-hero.is-moved     .svc-state,
.svc-hero.is-other     .svc-state { color: var(--th-text-2); }
html.dark .svc-hero .svc-state { color: var(--svc-c); }

/* ── سنجه‌ی روزهای باقی‌مانده ── */
.svc-life { --svc-life-c: var(--th-success); flex: 0 0 auto; width: 260px; max-width: 100%; }
.svc-life.is-warn { --svc-life-c: var(--th-warning); }
.svc-life.is-crit,
.svc-life.is-over { --svc-life-c: var(--th-danger); }
.svc-life-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.svc-life-lbl { font-size: .76rem; color: var(--th-text-3); }
.svc-life-val { font-family: var(--font-num); font-size: 1.5rem; font-weight: 800; color: var(--th-text-1); line-height: 1.2; }
.svc-life-val small { font-size: .7rem; font-weight: 500; color: var(--th-text-2); margin-inline-start: 4px; }
.svc-life.is-over .svc-life-val { color: var(--th-danger); }
.svc-life-bar {
  height: 8px; margin-top: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--th-text-3) 22%, transparent);
}
.svc-life-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--svc-life-c);
  /* عرض inline از {$days_left_percent} می‌آید. با ۶ روز مانده از یک سال،
     این عدد ~۱.۶٪ است و رگه‌ای تقریباً نامرئی می‌شد — یعنی دقیقاً در
     بحرانی‌ترین حالت کمترین خوانایی. کف عرض تضمین می‌کند نوار همیشه دیده
     شود؛ min-width بر width تنظیم‌شدهٔ inline غلبه می‌کند. */
  min-width: 6px;
}
.svc-life-dates { display: flex; justify-content: space-between; gap: 14px; margin-top: 9px; }
.svc-life-date { font-size: .72rem; color: var(--th-text-3); }
.svc-life-date b {
  display: block; margin-top: 2px;
  font-family: var(--font-num); font-size: .82rem; font-weight: 600; color: var(--th-text-2);
}

/* ── دکمه‌های عملیات سریع ── */
.svc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-action {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--th-border); background: var(--th-surface);
  font-size: .82rem; font-weight: 500; color: var(--th-text-2);
  transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
a.svc-action:hover { border-color: var(--th-brand); color: var(--th-text-1); box-shadow: var(--sh-sm); text-decoration: none; }
html.dark a.svc-action { color: var(--th-text-2); }
html.dark a.svc-action:hover { color: var(--th-text-1); }

/* ── بلوک محتوا (سربرگ + بدنه) ── */
.svc-block {
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.svc-block-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; border-bottom: 1px solid var(--th-border);
  font-size: .88rem; font-weight: 700; color: var(--th-text-1);
}
.svc-block-hd i { color: var(--th-brand); font-size: .95em; }
.svc-block-hd .svc-block-note { margin-inline-start: auto; font-size: .75rem; font-weight: 500; color: var(--th-text-3); }
.svc-block-bd { padding: 16px; }
.svc-block-bd > .table { margin-bottom: 0; }
/* جدول صورتحساب‌ها لبه‌به‌لبه‌ی بلوک بنشیند */
.svc-block-bd.is-flush { padding: 0; }
.svc-block-bd.is-flush > .table-responsive > .table { margin-bottom: 0; }

/* ── فهرست «کلید ← مقدار» ── */
.svc-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.svc-kv-item {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px 12px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
}
.svc-kv-item.is-wide { grid-column: 1 / -1; }
.svc-kv-ico {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-size: .8rem;
  background: var(--th-surface-2); color: var(--th-text-2);
}
.svc-kv-body { flex: 1 1 auto; min-width: 0; }
.svc-kv-k { font-size: .72rem; color: var(--th-text-3); }
.svc-kv-v {
  margin-top: 3px; font-size: .86rem; font-weight: 600;
  color: var(--th-text-1); line-height: 1.9; overflow-wrap: anywhere;
}
.svc-kv-v.num { font-family: var(--font-num); direction: ltr; text-align: right; }
.svc-kv-v a { color: var(--th-link); }
.svc-kv-v a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ردیف‌هایی که مقدارشان فرمِ ادمین است (تغییر نام کاربری / سرور).
   مارک‌آپ فرم از PHP می‌آید و کلاسِ بوت‌استرپ ندارد، پس همین‌جا یکدست می‌شود. */
.svc-kv-item.is-form .svc-kv-v { font-weight: 400; }
.svc-kv-item.is-form form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.svc-kv-item.is-form form > div { flex-basis: 100%; }
.svc-kv-item.is-form input:not([type]),
.svc-kv-item.is-form input[type="text"] {
  flex: 1 1 110px; min-width: 0; max-width: 100%; width: auto;
  padding: 6px 10px; border: 1px solid var(--th-border); border-radius: var(--r-sm);
  background: var(--th-surface); color: var(--th-text-1);
  font-family: var(--font-num); direction: ltr; text-align: right; font-size: .82rem;
}
.svc-kv-item.is-form input[type="submit"],
.svc-kv-item.is-form button {
  flex: 0 0 auto;
  padding: 6px 12px; border: 1px solid var(--th-border); border-radius: var(--r-sm);
  background: var(--th-surface-2); color: var(--th-text-2);
  font-family: inherit; font-size: .78rem; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.svc-kv-item.is-form input[type="submit"]:hover,
.svc-kv-item.is-form button:hover { color: var(--th-text-1); border-color: var(--th-brand); }
.svc-copy {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--th-border); border-radius: var(--r-sm);
  background: var(--th-surface-2); color: var(--th-text-3);
  font-size: .78rem; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.svc-copy:hover { color: var(--th-brand); border-color: var(--th-brand); }

/* ── فرم‌ها ── */
/* max-width: بدون آن، auto-fit روی نمایشگر پهن ۵ ستون می‌سازد و فرم پخش می‌شود */
.svc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; max-width: 780px; }
.svc-form-field.is-wide { grid-column: 1 / -1; }
.svc-form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.svc-form-actions .th-btn { min-width: 200px; justify-content: center; }
/* اسپینرِ فرم: با style="display:none" داخل قالب پنهان است و accjax با
   پاک‌کردنِ همان inline نمایشش می‌دهد ⇒ اینجا display:flex می‌ماند */
.svc-wait { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--th-text-2); }
/* width:100% لازم است: margin-inline:auto روی آیتمِ فلکس، stretch را لغو
   می‌کند و کارت به‌جای ۵۶۰px به عرضِ محتوایش جمع می‌شود */
.svc-narrow { width: 100%; max-width: 560px; margin-inline: auto; }

/* ── افزونه‌ها ── */
.svc-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.svc-addon {
  display: flex; flex-direction: column; gap: 9px;
  padding: 16px;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.svc-addon:hover { border-color: var(--th-border-2); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.svc-addon-name { font-size: .92rem; font-weight: 700; color: var(--th-text-1); line-height: 1.8; }
.svc-addon-name a { color: inherit; }
.svc-addon-name a:hover { color: var(--th-brand); }
.svc-addon-period {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--th-surface); border: 1px solid var(--th-border);
  font-size: .72rem; color: var(--th-text-2);
}
.svc-addon-period .num { font-family: var(--font-num); }
.svc-addon-price {
  margin-top: auto; padding-top: 4px;
  font-size: .82rem; color: var(--th-text-2);
}
.svc-addon-price b {
  font-family: var(--font-num); font-size: 1.2rem; font-weight: 800;
  color: var(--th-text-1); margin-inline-end: 4px;
}
.svc-addon-btn {
  display: block; text-align: center;
  padding: 9px 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--th-brand) 12%, var(--th-surface));
  border: 1px solid color-mix(in srgb, var(--th-brand) 40%, transparent);
  font-size: .82rem; font-weight: 600; color: #B45309;
  transition: background var(--t-fast), border-color var(--t-fast);
}
a.svc-addon-btn:hover { background: color-mix(in srgb, var(--th-brand) 20%, var(--th-surface)); border-color: var(--th-brand); text-decoration: none; }
html.dark a.svc-addon-btn { color: var(--th-brand); }

/* ── حالت خالی / پیام ── */
.svc-empty {
  padding: 28px 18px; text-align: center;
  font-size: .86rem; color: var(--th-text-2);
}
.svc-empty i { display: block; font-size: 1.6rem; color: var(--th-text-3); margin-bottom: 10px; }

@media (max-width: 640px) {
  .svc-hero { padding: 16px; gap: 14px; }
  .svc-hero-num { font-size: 1.1rem; }
  .svc-life { width: 100%; }
  .svc-tabs.nav-tabs .nav-link { flex: 0 0 auto; padding: 9px 12px; font-size: .82rem; }
  .svc-form-actions .th-btn { min-width: 0; width: 100%; }

  /* flex-wrap در موبایل چیدمان دندانه‌دار می‌داد (یک دکمه تنها، بعد دو تا،
     بسته به طول متن). گرید دوستونی ردیف‌های یکدست می‌سازد. */
  .svc-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .svc-action { justify-content: center; text-align: center; }
}



/* ════════════════════════════════════════════════════
   لیست سرویس‌ها — svcl-*
   قالب: html/panel/services.html
   ----------------------------------------------------------------
   نکته: بخش‌های «چهارچوبِ لیست» این مجموعه (قرص‌ها، نوار ترتیب، پنل
   جستجو، دکمه‌ها، حالت خالی، صفحه‌بندی و نوار عمر) عمداً وابسته به
   سرویس نیستند و لیست دامنه‌ها (dmnl-*) هم از همان‌ها استفاده می‌کند؛
   فقط کارتِ هر ردیف است که برای هر صفحه جدا تعریف شده.
   ----------------------------------------------------------------
   قبلاً یک <table> شش‌ستونه بود با دو ایراد اساسی:
   • رنگِ وضعیت روی زمینه‌ی کل ردیف می‌نشست. آن رنگ‌ها از دیتابیس
     می‌آیند و روشن‌اند، پس در دارک‌مود متنِ روشن روی آن‌ها عملاً
     ناخوانا بود (همان مشکلی که برای سفارش‌ها با .order-status-cell
     وصله شد).
   • در موبایل دو ستون با d-none حذف می‌شد و بقیه افقی اسکرول می‌شد.
   حالا هر سرویس یک کارت است: در دسکتاپ چهار ستون در یک ردیف، در
   موبایل روی هم. واژگان ظاهری عمداً همان صفحه‌ی تکِ سرویس است
   (نوار وضعیت کناری، قرص وضعیت، سنجه‌ی روزهای باقی‌مانده).
   ════════════════════════════════════════════════════ */
.svcl-page { display: flex; flex-direction: column; gap: 14px; }
.svcl-page > * { min-width: 0; }

/* ── قرص‌های وضعیت (خلاصه + فیلتر یک‌کلیکی) ── */
.svcl-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.svcl-pill {
  --svc-c: var(--th-text-3);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--th-surface); border: 1px solid var(--th-border);
  font-size: .82rem; font-weight: 500; color: var(--th-text-2);
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
/* نقطه‌ی رنگی، همان رنگی که نوار کناری کارت‌های همان وضعیت دارد */
.svcl-pill::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--svc-c); flex: 0 0 auto;
}
.svcl-pill.is-all::before { display: none; }
.svcl-pill.is-active    { --svc-c: var(--th-success); }
.svcl-pill.is-suspended,
.svcl-pill.is-expired   { --svc-c: var(--th-warning); }
.svcl-pill.is-unpaid,
.svcl-pill.is-abuse,
.svcl-pill.is-deleted   { --svc-c: var(--th-danger); }
.svcl-pill.is-pending   { --svc-c: var(--th-info); }
/* قرص‌هایی که آیکن دارند نقطه‌ی رنگی نمی‌خواهند */
.svcl-pill.is-soon      { --svc-c: var(--th-warning); }
.svcl-pill.is-wait      { --svc-c: var(--th-info); }
.svcl-pill.is-tahrim    { --svc-c: var(--th-danger); }
.svcl-pill.is-soon::before,
.svcl-pill.is-wait::before,
.svcl-pill.is-tahrim::before { display: none; }
.svcl-pill.is-soon i,
.svcl-pill.is-wait i,
.svcl-pill.is-tahrim i { color: var(--svc-c); font-size: .9em; }
.svcl-pill.active i { color: inherit; }
.svcl-pill-n {
  font-family: var(--font-num); font-size: .76rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--th-surface-2); color: var(--th-text-2);
}
a.svcl-pill:hover { border-color: var(--th-brand); color: var(--th-text-1); text-decoration: none; }
/* قرص فعال: زمینه‌ی برند با متنِ تیره — سفید روی #F59E0B کنتراست ~۲.۱:۱ می‌دهد */
a.svcl-pill.active,
a.svcl-pill.active:hover {
  background: var(--th-brand); border-color: var(--th-brand);
  color: var(--th-on-brand); font-weight: 700;
}
.svcl-pill.active::before { background: var(--th-on-brand); }
.svcl-pill.active .svcl-pill-n { background: rgba(0,0,0,.14); color: var(--th-on-brand); }
html.dark a.svcl-pill { color: var(--th-text-2); }
html.dark a.svcl-pill:hover { color: var(--th-text-1); }
html.dark a.svcl-pill.active { color: var(--th-on-brand); }

/* ── نوار ابزار: ترتیب + شمارش ── */
.svcl-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.svcl-sorts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.svcl-sorts-lbl { font-size: .78rem; color: var(--th-text-3); margin-inline-end: 2px; }
.svcl-sort {
  padding: 5px 11px; border-radius: var(--r-sm);
  font-size: .8rem; color: var(--th-text-2);
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
a.svcl-sort:hover { background: var(--th-surface-2); color: var(--th-text-1); text-decoration: none; }
a.svcl-sort.active {
  background: color-mix(in srgb, var(--th-brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--th-brand) 35%, transparent);
  color: #92400E; font-weight: 700;
}
html.dark a.svcl-sort { color: var(--th-text-2); }
html.dark a.svcl-sort.active { color: var(--th-brand); }
.svcl-sort i { font-size: .7em; }
.svcl-count { margin-inline-start: auto; font-size: .8rem; color: var(--th-text-3); }
.svcl-count-f { color: var(--th-brand); }

/* ── پنل جستجو ── */
.svcl-filter {
  background: var(--th-surface); border: 1px solid var(--th-border);
  border-radius: var(--r-lg); overflow: hidden;
}
.svcl-filter-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; cursor: pointer; list-style: none;
  font-size: .86rem; font-weight: 600; color: var(--th-text-1);
}
.svcl-filter-sum::-webkit-details-marker { display: none; }
.svcl-filter-sum i { color: var(--th-text-2); margin-inline-end: 5px; }
.svcl-filter-sum::after {
  content: '\f078';/* chevron-down */
  font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .7rem;
  color: var(--th-text-3); transition: transform var(--t-fast);
}
.svcl-filter[open] > .svcl-filter-sum::after { transform: rotate(180deg); }
.svcl-filter[open] > .svcl-filter-sum { border-bottom: 1px solid var(--th-border); }
.svcl-filter-n {
  margin-inline-start: auto; margin-inline-end: 10px;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--th-brand) 14%, transparent);
  font-size: .72rem; font-weight: 700; color: #92400E;
}
html.dark .svcl-filter-n { color: var(--th-brand); }
.svcl-filter-bd { padding: 16px; }
/* ستونی که خودش را با عرض جا می‌دهد — قبلاً همه‌ی فیلدها در یک ستون
   باریکِ col-lg-7 روی هم بودند و فرم بی‌دلیل بلند می‌شد */
.svcl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.svcl-field { min-width: 0; }
.svcl-field > label { display: block; margin-bottom: 5px; font-size: .78rem; color: var(--th-text-2); }
.svcl-filter-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.svcl-filter-hint { font-size: .76rem; color: var(--th-text-3); }

/* ── دکمه‌ها ── */
.svcl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 18px; border-radius: var(--r-md); border: 1px solid transparent;
  font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.svcl-btn-primary { background: var(--th-brand); color: var(--th-on-brand); }
.svcl-btn-primary:hover { background: var(--th-brand-dark); color: var(--th-on-brand); text-decoration: none; }
.svcl-btn-ghost { background: var(--th-surface); border-color: var(--th-border); color: var(--th-text-2); }
.svcl-btn-ghost:hover { border-color: var(--th-brand); color: var(--th-text-1); text-decoration: none; }
/* darkmode.css رنگ هر <a> محتوا را نارنجی می‌کند؛ دکمه‌ها استثنا هستند */
html.dark a.svcl-btn-primary { color: var(--th-on-brand); }
html.dark a.svcl-btn-ghost { color: var(--th-text-2); }

/* ── کارت سرویس ── */
.svcl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.svcl-card {
  --svc-c: var(--th-text-3);
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto 220px auto;
  gap: 12px 20px;
  padding: 14px 16px; padding-inline-start: 20px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.svcl-card:hover { border-color: color-mix(in srgb, var(--th-brand) 45%, var(--th-border)); box-shadow: var(--sh-sm); }
.svcl-card::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; inset-inline-start: 0; width: 4px;
  background: var(--svc-c);
}
.svcl-card.is-active    { --svc-c: var(--th-success); }
.svcl-card.is-suspended { --svc-c: var(--th-warning); }
.svcl-card.is-unpaid,
.svcl-card.is-abuse     { --svc-c: var(--th-danger); }
.svcl-card.is-pending   { --svc-c: var(--th-info); }
/* قرص وضعیت از .svc-state صفحه‌ی سرویس می‌آید؛ همان‌جا هم توضیح داده شده
   که توکن‌های وضعیت روی زمینه‌ی روشن کنتراست کافی ندارند و باید یک پله
   تیره‌تر شوند. این چهار خط معادلِ همان قانون برای کارت‌های لیست است. */
.svcl-card.is-active    .svc-state { color: #047857; }
.svcl-card.is-unpaid    .svc-state,
.svcl-card.is-abuse     .svc-state { color: #B91C1C; }
.svcl-card.is-suspended .svc-state { color: #B45309; }
.svcl-card.is-pending   .svc-state { color: #1D4ED8; }
.svcl-card.is-deleted   .svc-state,
.svcl-card.is-moved     .svc-state,
.svcl-card.is-other     .svc-state { color: var(--th-text-2); }
html.dark .svcl-card .svc-state { color: var(--svc-c); }

.svcl-main { min-width: 0; }
.svcl-top { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.svcl-domain {
  direction: ltr; font-size: 1rem; font-weight: 700; color: var(--th-text-1);
  overflow-wrap: anywhere;
}
a.svcl-domain:hover { color: var(--th-brand); text-decoration: none; }
html.dark a.svcl-domain { color: var(--th-text-1); }
html.dark a.svcl-domain:hover { color: var(--th-brand); }
.svcl-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 7px; font-size: .78rem; color: var(--th-text-2);
}
.svcl-num { font-family: var(--font-num); direction: ltr; color: var(--th-text-3); }
.svcl-prod { color: var(--th-text-2); }
a.svcl-prod:hover { color: var(--th-brand); text-decoration: underline; text-underline-offset: 2px; }
html.dark a.svcl-prod { color: var(--th-text-2); }
.svcl-user { font-family: var(--font-num); color: var(--th-text-3); }
.svcl-user i { font-size: .9em; }
.svcl-note { color: var(--th-text-2); }
a.svcl-note:hover { color: var(--th-brand); text-decoration: none; }
html.dark a.svcl-note { color: var(--th-text-2); }

/* ── قیمت ── */
.svcl-price { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.svcl-price-lbl { font-size: .72rem; color: var(--th-text-3); }
.svcl-price-val {
  font-family: var(--font-num); font-size: 1rem; font-weight: 700; color: var(--th-text-1);
  white-space: nowrap;
}
.svcl-price-val small { font-family: var(--font-fa); font-size: .7rem; font-weight: 500; color: var(--th-text-2); }
.svcl-price-per { font-size: .72rem; color: var(--th-text-3); }

/* ── سنجه‌ی روزهای باقی‌مانده (نسخه‌ی جمع‌وجورِ .svc-life) ── */
.svcl-life { --svcl-c: var(--th-success); min-width: 0; }
.svcl-life.is-warn { --svcl-c: var(--th-warning); }
.svcl-life.is-crit,
.svcl-life.is-over { --svcl-c: var(--th-danger); }
.svcl-life-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.svcl-life-lbl { font-size: .72rem; color: var(--th-text-3); }
.svcl-life-val {
  font-family: var(--font-num); font-size: 1.05rem; font-weight: 800;
  color: var(--th-text-1); line-height: 1.2; white-space: nowrap;
}
.svcl-life-val small { font-family: var(--font-fa); font-size: .68rem; font-weight: 500; color: var(--th-text-2); margin-inline-start: 3px; }
.svcl-life.is-over .svcl-life-val { font-size: .86rem; color: var(--th-danger); }
.svcl-life-bar {
  height: 6px; margin-top: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--th-text-3) 22%, transparent);
}
.svcl-life-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--svcl-c);
  /* با ۶ روز مانده از یک سال، عرض ~۱.۶٪ رگه‌ای نامرئی می‌شد — یعنی
     دقیقاً در بحرانی‌ترین حالت کمترین خوانایی. (همتای .svc-life-bar) */
  min-width: 6px;
}
/* منقضی: نوار باید واقعاً خالی باشد، پس کفِ بالا نباید اعمال شود */
.svcl-life.is-over .svcl-life-bar > span { min-width: 0; }
.svcl-life-dates { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; }
.svcl-life-date { font-size: .7rem; color: var(--th-text-3); }
.svcl-life-date b {
  display: inline-block; margin-inline-start: 4px;
  font-family: var(--font-num); font-size: .76rem; font-weight: 600; color: var(--th-text-2);
}

/* ── عملیات ── */
.svcl-acts { display: flex; align-items: center; gap: 6px; }
.svcl-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--r-md);
  border: 1px solid var(--th-border); background: var(--th-surface);
  font-size: .8rem; font-weight: 500; color: var(--th-text-2);
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
a.svcl-act:hover { border-color: var(--th-brand); color: var(--th-text-1); text-decoration: none; }
html.dark a.svcl-act { color: var(--th-text-2); }
html.dark a.svcl-act:hover { color: var(--th-text-1); }
.svcl-act.is-main {
  background: color-mix(in srgb, var(--th-brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--th-brand) 32%, transparent);
  color: #92400E; font-weight: 600;
}
a.svcl-act.is-main:hover { background: color-mix(in srgb, var(--th-brand) 20%, transparent); border-color: var(--th-brand); color: #92400E; }
html.dark a.svcl-act.is-main, html.dark a.svcl-act.is-main:hover { color: var(--th-brand); }
.svcl-act.is-icon { width: 36px; padding: 8px 0; }
/* در دسکتاپ آیکن به‌تنهایی کافی است (title دارد)؛ در موبایل متن برمی‌گردد
   تا هدفِ لمس بزرگ‌تر و معنایش روشن باشد */
.svcl-act-t { display: none; }

/* ── حالت خالی ── */
.svcl-empty {
  padding: 40px 20px; text-align: center;
  background: var(--th-surface); border: 1px dashed var(--th-border-2);
  border-radius: var(--r-lg);
}
.svcl-empty > i { display: block; font-size: 2rem; color: var(--th-text-3); margin-bottom: 12px; }
.svcl-empty-t { font-size: .95rem; font-weight: 700; color: var(--th-text-1); }
.svcl-empty-s { margin-top: 6px; font-size: .82rem; color: var(--th-text-2); }
.svcl-empty .svcl-btn { margin-top: 16px; }

/* ── صفحه‌بندی ──
   خروجی Pager() لینک‌های خام است (مشترک بین همه‌ی صفحه‌ها)، پس اینجا فقط
   در محدوده‌ی همین صفحه شکل می‌گیرد. */
.svcl-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .84rem; color: var(--th-text-2); }
.svcl-pager a {
  display: inline-block; min-width: 32px; padding: 5px 9px;
  border: 1px solid var(--th-border); border-radius: var(--r-sm);
  text-align: center; color: var(--th-text-2);
}
.svcl-pager a:hover { border-color: var(--th-brand); color: var(--th-text-1); text-decoration: none; }
.svcl-pager > b {
  display: inline-block; min-width: 32px; padding: 5px 9px;
  border-radius: var(--r-sm); text-align: center;
  background: var(--th-brand); color: var(--th-on-brand);
}
.svcl-pager form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.svcl-pager select, .svcl-pager input[type="button"] {
  padding: 4px 8px; border: 1px solid var(--th-border); border-radius: var(--r-sm);
  background: var(--th-surface); color: var(--th-text-1); font-family: inherit; font-size: .8rem;
}
.svcl-pager br { display: none; }
/* رنگِ خودِ لینک‌ها در شب عمداً دست‌نخورده می‌ماند: مارک‌آپ Pager() کلاس
   plain ندارد، پس قانون سراسری darkmode.css آن‌ها را طلایی می‌کند — همان
   رفتاری که بقیه‌ی لینک‌های محتوا دارند. */

/* ── ۱۱۰۰px: دو ستون — ردیف اول دامنه/قیمت، ردیف دوم سنجه/عملیات ── */
@media (max-width: 1100px) {
  .svcl-card { grid-template-columns: minmax(0, 1fr) auto; }
  .svcl-price { text-align: end; }
  /* سنجه در ستون ۱fr می‌ماند و عملیات کنارش؛ اگر تمام‌عرض می‌شد، سر و ته
     نوار (برچسب و عدد) به دو انتهای کارت پرت می‌شدند */
  .svcl-life { max-width: 420px; }
}

@media (max-width: 640px) {
  .svcl-card { grid-template-columns: 1fr; gap: 14px; padding: 14px; padding-inline-start: 16px; }
  .svcl-price { flex-direction: row; align-items: baseline; gap: 8px; text-align: start; }
  .svcl-price-lbl { order: -1; }
  /* دکمه‌ها در موبایل تمام‌عرض و با برچسب — آیکن تنها هدفِ لمسِ کوچکی
     می‌ساخت و title روی لمس دیده نمی‌شود */
  .svcl-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .svcl-act { justify-content: center; }
  .svcl-act.is-main { grid-column: 1 / -1; }
  .svcl-act.is-icon { width: auto; padding: 8px 12px; }
  .svcl-act-t { display: inline; }
  .svcl-toolbar { gap: 8px; }
  .svcl-count { margin-inline-start: 0; width: 100%; }
  .svcl-filter-hint { display: none; }
  .svcl-filter-act .svcl-btn { flex: 1 1 140px; }
}


/* ════════════════════════════════════════════════════
   لیست دامنه‌ها — dmnl-*
   قالب: html/panel/domain-list.html  (domains.htm و dns.htm)
   ----------------------------------------------------------------
   چهارچوب صفحه (قرص‌ها، ترتیب، پنل جستجو، نوار عمر، دکمه‌ها،
   صفحه‌بندی) همان svcl-* لیست سرویس‌هاست تا دو صفحه‌ی هم‌خانواده یک
   زبان بصری داشته باشند و CSS دو بار نوشته نشود. اینجا فقط چیزهایی
   می‌آید که مخصوص دامنه است.

   قالب قبلی یک <table> پنج‌ستونه بود با دو ایراد که همان‌هاست که در
   لیست سرویس‌ها هم رفع شد:
   • رنگِ وضعیت (#ffcfcf / #efefef) روی زمینه‌ی کل ردیف می‌نشست؛ در
     دارک‌مود متنِ روشن روی آن ناخوانا بود.
   • در موبایل دو ستون با d-none حذف می‌شد و «تاریخ ثبت» و شماره‌ی
     دامنه اصلاً دیده نمی‌شدند.
   کارتِ دامنه سه ستون دارد (مشخصات / نوار عمر / عملیات) — برخلاف
   کارت سرویس، ستون «قیمت» ندارد چون تعرفه‌ی دامنه به پسوند و سال
   بستگی دارد نه به خودِ ردیف.
   ════════════════════════════════════════════════════ */

/* ── هشدار رجیسترار تحریم‌شده ──
   جای <div class="alert alert-warning"> با <span style="color:red">
   را می‌گیرد؛ آن ترکیب در شب ته‌رنگِ روشن و متنِ قرمزِ تیره داشت. */
.dmnl-warn {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--th-danger) 35%, var(--th-border));
  border-inline-start: 4px solid var(--th-danger);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--th-danger) 7%, var(--th-surface));
}
.dmnl-warn-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 700; color: #B91C1C;
}
html.dark .dmnl-warn-hd { color: var(--th-danger); }
.dmnl-warn-ul {
  margin: 10px 0 0; padding-inline-start: 20px;
  font-size: .82rem; line-height: 2.1; color: var(--th-text-2);
}

/* ── کارت دامنه ── */
.dmnl-card {
  --svc-c: var(--th-text-3);
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 220px auto;
  gap: 12px 20px;
  padding: 14px 16px; padding-inline-start: 20px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.dmnl-card:hover { border-color: color-mix(in srgb, var(--th-brand) 45%, var(--th-border)); box-shadow: var(--sh-sm); }
.dmnl-card::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; inset-inline-start: 0; width: 4px;
  background: var(--svc-c);
}
.dmnl-card.is-active  { --svc-c: var(--th-success); }
.dmnl-card.is-expired { --svc-c: var(--th-warning); }
.dmnl-card.is-deleted { --svc-c: var(--th-danger); }
/* قرص وضعیت از .svc-state صفحه‌ی سرویس/دامنه می‌آید. توکن‌های وضعیت روی
   زمینه‌ی روشن کنتراست کافی ندارند و باید یک پله تیره‌تر شوند — همان
   قاعده‌ای که برای .svcl-card نوشته شده. */
.dmnl-card.is-active  .svc-state { color: #047857; }
.dmnl-card.is-expired .svc-state { color: #B45309; }
.dmnl-card.is-deleted .svc-state { color: #B91C1C; }
.dmnl-card.is-other   .svc-state { color: var(--th-text-2); }
html.dark .dmnl-card .svc-state { color: var(--svc-c); }

.dmnl-main { min-width: 0; }
.dmnl-top { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.dmnl-domain {
  direction: ltr; font-size: 1rem; font-weight: 700; color: var(--th-text-1);
  overflow-wrap: anywhere;
}
a.dmnl-domain:hover { color: var(--th-brand); text-decoration: none; }
html.dark a.dmnl-domain { color: var(--th-text-1); }
html.dark a.dmnl-domain:hover { color: var(--th-brand); }
.dmnl-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 7px; font-size: .78rem; color: var(--th-text-2);
}
.dmnl-meta i { font-size: .9em; color: var(--th-text-3); }
/* ── کلید «بیشتر» ──
   در دسکتاپ کاملاً حذف است، نه فقط نامرئی: گریدِ کارت سه ستون دارد و
   بر پایه‌ی همان سه فرزند (مشخصات/نوار عمر/عملیات) بسته شده؛ چک‌باکس و
   لیبل اگر display داشتند دو آیتمِ گریدِ اضافه می‌شدند. */
.dmnl-more-cb, .dmnl-more { display: none; }
.dmnl-num { font-family: var(--font-num); direction: ltr; color: var(--th-text-3); }
.dmnl-reg { color: var(--th-text-2); }
.dmnl-web { font-family: var(--font-num); color: var(--th-text-3); }

/* دامنه‌ی بدون تاریخ انقضا نوار عمر ندارد؛ ستونش خالی نمی‌ماند ولی
   ارتفاعِ کارت را هم بی‌دلیل بلند نمی‌کند */
.dmnl-life-none .svcl-life-val { font-size: .86rem; color: var(--th-text-2); }
.dmnl-life-none .svcl-life-dates { margin-top: 6px; }

/* ── ردیف تمام‌عرضِ انتقال از رجیسترار تحریم‌شده ── */
.dmnl-renew {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 2px; padding-top: 12px;
  border-top: 1px dashed var(--th-border-2);
}
.dmnl-renew-lbl { font-size: .78rem; color: var(--th-text-3); }
.dmnl-renew-val {
  font-family: var(--font-num); font-size: 1rem; font-weight: 700; color: var(--th-text-1);
  white-space: nowrap;
}
.dmnl-renew-val small { font-family: var(--font-fa); font-size: .7rem; font-weight: 500; color: var(--th-text-2); }
.dmnl-renew-frm { margin: 0; margin-inline-start: auto; }
.dmnl-renew-wait {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; color: #1D4ED8;
}
html.dark .dmnl-renew-wait { color: var(--th-info); }
.dmnl-sum {
  padding: 12px 16px; border-radius: var(--r-lg);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  font-size: .84rem; color: var(--th-text-2);
}
.dmnl-sum b { font-family: var(--font-num); font-size: 1rem; color: var(--th-text-1); }

/* ── راهنمای پایین صفحه ──
   همان پوسته‌ی .svcl-filter را دارد ولی محتوایش متن است نه فرم */
.dmnl-help-ul {
  margin: 0; padding-inline-start: 20px;
  font-size: .82rem; line-height: 2.1; color: var(--th-text-2);
}

/* ── ۱۱۰۰px: دو ستون ──
   مشخصات و نوار عمر کنار هم می‌مانند و عملیات تمام‌عرض به ردیف دوم
   می‌رود. اگر عملیات را در ستون ۱fr رها می‌کردیم، نوار عمر به ستونِ
   auto می‌افتاد و به عرض برچسب‌هایش (~۱۸۰px) جمع می‌شد. */
@media (max-width: 1100px) {
  .dmnl-card { grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); }
  .dmnl-card > .svcl-acts { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .dmnl-card { grid-template-columns: 1fr; gap: 12px; padding: 14px; padding-inline-start: 16px; }
  .dmnl-renew-frm,
  .dmnl-renew-wait { margin-inline-start: 0; flex: 1 1 100%; }
  .dmnl-renew-frm .svcl-btn { width: 100%; }

  /* ── جمع‌کردن ریزه‌کاری‌ها و دکمه‌ها پشت «بیشتر» ──
     در عرضِ گوشی، ردیفِ متا (شماره، شناسه سفارش، رجیسترار) و چهار دکمه
     دو سومِ ارتفاعِ کارت را می‌گرفتند و در یک صفحه بیش از یکی-دو دامنه
     جا نمی‌شد. نام دامنه خودش لینکِ همان صفحه‌ی مدیریت است، پس با بسته
     بودنِ دکمه‌ها هیچ راهِ دسترسی‌ای بسته نمی‌شود.

     کلِ سازوکار پشت @supports است: مرورگری که :has() ندارد اصلاً کلید را
     نمی‌بیند و کارت مثل قبل باز می‌ماند — نه دکمه‌ی بی‌اثر، نه محتوای
     پنهانِ غیرقابل‌بازکردن. */
  @supports selector(:has(*)) {
    .dmnl-more-cb {
      /* پنهان ولی فوکوس‌پذیر؛ با display:none کیبورد به کلید نمی‌رسید */
      display: block; position: absolute;
      width: 1px; height: 1px; margin: 0; padding: 0;
      opacity: 0; pointer-events: none;
    }
    .dmnl-more {
      display: flex; align-items: center; justify-content: center; gap: 7px;
      padding: 8px 12px;
      border: 1px dashed var(--th-border-2); border-radius: var(--r-md);
      font-size: .8rem; font-weight: 600; color: var(--th-text-2);
      cursor: pointer;
      -webkit-user-select: none; user-select: none;
      transition: border-color var(--t-fast), color var(--t-fast);
    }
    .dmnl-more:active { border-color: var(--th-brand); color: var(--th-text-1); }
    .dmnl-more > i { font-size: .7em; transition: transform var(--t-fast); }
    /* فوکوسِ کیبورد روی چک‌باکسِ نامرئی است، پس حلقه را روی لیبل می‌کشیم */
    .dmnl-card:has(.dmnl-more-cb:focus-visible) .dmnl-more {
      outline: 2px solid var(--th-brand); outline-offset: 2px;
    }
    /* کارتی که باز شده کمی از بقیه جدا دیده شود — عمداً فقط یک پله‌ی
       سطح (surface → surface-2)، همان اختلافِ ملایمی که خودِ تم برای
       «یک درجه بالاتر» تعریف کرده؛ در روز ~۲٪ تیره‌تر از سفید. */
    .dmnl-card:has(.dmnl-more-cb:checked) { background: var(--th-surface-2); }
    .dmnl-card:not(:has(.dmnl-more-cb:checked)) .dmnl-meta,
    .dmnl-card:not(:has(.dmnl-more-cb:checked)) .svcl-acts { display: none; }
    /* برچسبِ کلید بین «بیشتر» و «بستن» عوض می‌شود */
    .dmnl-card:not(:has(.dmnl-more-cb:checked)) .dmnl-more-lbl.is-open,
    .dmnl-card:has(.dmnl-more-cb:checked) .dmnl-more-lbl:not(.is-open) { display: none; }
    .dmnl-card:has(.dmnl-more-cb:checked) .dmnl-more > i { transform: rotate(180deg); }
  }
}



/* ════════════════════════════════════════════════════
   پیگیری خریدها — ordl-*
   قالب: html/panel/orders.html  (orders.htm)
   ----------------------------------------------------------------
   چهارچوب صفحه (قرص‌ها، ترتیب، پنل جستجو، دکمه‌ها، حالت خالی،
   صفحه‌بندی) همان svcl-* لیست سرویس‌هاست تا سه صفحه‌ی هم‌خانواده‌ی
   «سرویس‌ها / دامنه‌ها / خریدها» یک زبان بصری داشته باشند و CSS سه
   بار نوشته نشود. اینجا فقط چیزهایی می‌آید که مخصوص سفارش است.

   قالب قبلی یک <table> هشت‌ستونه بود با سه ایراد:
   • رنگِ وضعیت (که ادمین در جدول order_status انتخاب می‌کند و روشن
     است) روی زمینه‌ی خانه می‌نشست؛ .order-status-cell ناچار بود متن
     را حتی در تم شب تیره نگه دارد — یعنی یک وصله، نه یک طراحی.
   • در موبایل سه ستون با d-none حذف می‌شد: تاریخ سفارش، حذف، و بخشی
     از مبلغ اصلاً دیده نمی‌شدند.
   • مهم‌ترین کارِ صفحه («ثبت اتوماتیک») یک لینکِ ریز در ستون هفتم بود
     و از «حذف سفارش» بزرگ‌تر به‌نظر نمی‌رسید.

   کارتِ سفارش سه ستون دارد (مشخصات / مبلغ / وضعیت) و یک ردیفِ
   تمام‌عرضِ عملیات. برخلاف کارتِ سرویس و دامنه، ستونِ «نوار عمر»
   ندارد — سفارش هنوز شروع نشده که عمری داشته باشد؛ به‌جایش ستونِ
   وضعیت می‌گوید توپ در زمینِ کیست.
   ════════════════════════════════════════════════════ */

/* ── دو قرصِ تازه در واژگانِ مشترکِ svcl-pill ──
   is-todo کارِ خودِ کاربر است پس رنگِ برند می‌گیرد؛ is-status قرصِ
   داده‌محورِ همین صفحه است که رنگِ نقطه‌اش inline از دیتابیس می‌آید. */
.svcl-pill.is-todo   { --svc-c: var(--th-brand); }
.svcl-pill.is-status { --svc-c: var(--th-text-3); }
.svcl-pill.is-todo::before { display: none; }
.svcl-pill.is-todo i { color: var(--svc-c); font-size: .9em; }
/* رنگ‌های جدول order_status روشن‌اند و #fff هم بینشان هست؛ بدون این
   حاشیه‌ی مویی، نقطه روی زمینه‌ی کارت ناپدید می‌شد. */
.svcl-pill.is-status::before {
  border: 1px solid color-mix(in srgb, var(--th-text-3) 45%, transparent);
}
/* عنوانِ وضعیت متنِ آزادِ ادمین است و گاهی یک جمله‌ی کامل؛ قرص نباید
   تمام عرضِ نوار را بگیرد. */
.svcl-pill-t {
  display: inline-block; max-width: 22ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}

/* ── نوار «این سفارش‌ها منتظر شما هستند» ──
   جای کادر آبیِ همیشه‌بازِ قبلی را می‌گیرد، ولی فقط وقتی واقعاً کاری
   روی زمین مانده باشد و با شمارش و لینکِ مستقیم به همان‌ها. */
.ordl-todo {
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--th-brand) 38%, var(--th-border));
  border-inline-start: 4px solid var(--th-brand);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--th-brand) 8%, var(--th-surface));
}
.ordl-todo-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 700; color: #92400E;
}
html.dark .ordl-todo-hd { color: var(--th-brand); }
.ordl-todo-bd { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.ordl-todo-l { font-size: .83rem; color: var(--th-text-2); }
.ordl-todo-l b { font-family: var(--font-num); font-size: .95rem; color: var(--th-text-1); }
a.ordl-todo-l:hover { color: var(--th-text-1); text-decoration: underline; text-underline-offset: 3px; }
html.dark a.ordl-todo-l { color: var(--th-text-2); }
html.dark a.ordl-todo-l:hover { color: var(--th-text-1); }

/* ── کارت سفارش ── */
.ordl-card {
  --svc-c: var(--th-text-3);
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(190px, 230px);
  gap: 12px 20px;
  padding: 14px 16px; padding-inline-start: 20px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ordl-card:hover { border-color: color-mix(in srgb, var(--th-brand) 45%, var(--th-border)); box-shadow: var(--sh-sm); }
.ordl-card::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; inset-inline-start: 0; width: 4px;
  background: var(--svc-c);
}
/* نوار کناری = «نوبتِ کیست»، نه وضعیتِ خامِ دیتابیس. سه حالتِ کاربردیِ
   این صفحه: پول بده، کلیک کن، منتظر ما بمان. */
.ordl-card.is-unpaid,
.ordl-card.is-error { --svc-c: var(--th-danger); }
.ordl-card.is-todo  { --svc-c: var(--th-brand); }
.ordl-card.is-wait  { --svc-c: var(--th-info); }

/* ── ستون ۱: مشخصات ── */
.ordl-main { min-width: 0; }
.ordl-top { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.ordl-ico {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--svc-c) 14%, transparent);
  color: var(--svc-c); font-size: .82rem;
}
.ordl-title {
  font-size: 1rem; font-weight: 700; color: var(--th-text-1);
  overflow-wrap: anywhere; min-width: 0;
}
.ordl-kind {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  font-size: .72rem; font-weight: 600; color: var(--th-text-2);
  white-space: nowrap;
}
.ordl-kind i { font-size: .9em; color: var(--th-text-3); }
.ordl-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 7px; font-size: .78rem; color: var(--th-text-2);
}
.ordl-meta i { font-size: .9em; color: var(--th-text-3); }
/* text-2 نه text-3 — قاعده‌ی تم: text-3 توکنِ «خیلی کم‌رنگ» است و برای
   متنِ واقعی روی زمینه‌ی روشن زیر ۳:۱ می‌افتد. شناسه‌ی سفارش، دوره و
   تاریخ متنِ خواندنی‌اند نه تزئین؛ فرودستی‌شان را اندازه می‌رساند.
   (آیکن‌های کنارشان همچنان text-3 می‌مانند چون تزئین‌اند.) */
.ordl-num  { font-family: var(--font-num); color: var(--th-text-2); }
.ordl-per  { color: var(--th-text-2); }
.ordl-date { font-family: var(--font-num); color: var(--th-text-2); }
.ordl-prod { color: var(--th-text-2); }
a.ordl-prod:hover { color: var(--th-brand); text-decoration: underline; text-underline-offset: 2px; }
html.dark a.ordl-prod { color: var(--th-text-2); }
.ordl-note, .ordl-who { color: var(--th-text-2); }
a.ordl-note:hover, a.ordl-who:hover { color: var(--th-brand); text-decoration: none; }
html.dark a.ordl-note, html.dark a.ordl-who { color: var(--th-text-2); }
/* کد انتقال باید قابل انتخاب و خواندن باشد — قبلاً وسطِ یک جمله‌ی
   فارسی و بدون جداکننده چاپ می‌شد. */
.ordl-auth {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 9px; padding: 6px 10px;
  border-radius: var(--r-sm); background: var(--th-surface-2);
  /* text-2 نه text-3: کد انتقال چیزی است که کاربر باید بخواند و کپی کند،
     پس حتی برچسبش هم نباید به ۲.۴ کنتراست بیفتد. */
  font-size: .75rem; color: var(--th-text-2);
}
.ordl-auth b {
  font-family: var(--font-num); font-size: .84rem; font-weight: 700;
  color: var(--th-text-1); user-select: all; overflow-wrap: anywhere;
}

/* ── ستون ۲: مبلغ ── */
.ordl-price { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.ordl-price-lbl { font-size: .72rem; color: var(--th-text-2); }
.ordl-price-val {
  font-family: var(--font-num); font-size: 1.05rem; font-weight: 800;
  color: var(--th-text-1); white-space: nowrap; line-height: 1.3;
}
.ordl-price-val small { font-family: var(--font-fa); font-size: .68rem; font-weight: 500; color: var(--th-text-2); }
/* text-2 نه text-3: این خط قیمتِ قبل از تخفیف را می‌گوید، یعنی داده است
   نه برچسبِ تزئینی، و text-3 روی سفید فقط ۲.۵ کنتراست می‌دهد. */
.ordl-price-off { font-family: var(--font-num); font-size: .7rem; color: var(--th-text-2); }
.ordl-price-off b { color: var(--th-success); font-weight: 700; }
.ordl-price-adm { font-family: var(--font-num); font-size: .7rem; color: var(--th-text-2); }

/* ── ستون ۳: وضعیت ── */
.ordl-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
/* «نوبتِ کیست» — تیترِ واقعیِ کارت. توکن‌های وضعیت روی زمینه‌ی روشن
   کنتراست کافی ندارند و باید یک پله تیره‌تر شوند؛ همان قاعده‌ای که
   .svcl-card و .dmnl-card دارند. */
.ordl-next {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 700; color: var(--th-text-2);
}
.ordl-card.is-unpaid .ordl-next,
.ordl-card.is-error  .ordl-next { color: #B91C1C; }
.ordl-card.is-todo   .ordl-next { color: #92400E; }
.ordl-card.is-wait   .ordl-next { color: #1D4ED8; }
/* در شب، خودِ توکن روی زمینه‌ی کارت به ۴.۲ می‌رسد و این خط مهم‌ترین جمله‌ی
   کارت است؛ یک پله روشن‌تر می‌شود تا از ۴.۵ رد شود. */
html.dark .ordl-card .ordl-next { color: color-mix(in srgb, var(--svc-c) 80%, #FFFFFF); }

/* عنوانِ خامِ وضعیت. رنگِ دیتابیس (--ord-sc) فقط لبه را رنگ می‌کند نه
   زمینه را: آن رنگ‌ها روشن‌اند (#fff، #efefef، #FFEF94 …) و به‌عنوان
   زمینه در تم شب متن رویشان ناخوانا می‌شد. */
.ordl-sbadge {
  --ord-sc: var(--th-text-3);
  display: block; max-width: 100%;
  padding: 5px 9px;
  border-inline-start: 3px solid var(--ord-sc);
  border-radius: var(--r-sm);
  background: var(--th-surface-2);
  font-size: .76rem; line-height: 1.7; color: var(--th-text-2);
  overflow-wrap: anywhere;
}
.ordl-sbadge a { color: var(--th-text-2); }
.ordl-sbadge a:hover { color: var(--th-brand); text-decoration: none; }
html.dark .ordl-sbadge a { color: var(--th-text-2); }
html.dark .ordl-sbadge a:hover { color: var(--th-brand); }
.ordl-sbadge i { font-size: .78em; opacity: .75; }
/* وقتی قرص به صورتحساب می‌رود یک عملیات است نه یک برچسب، پس لبه‌اش رنگِ
   وضعیتِ دیتابیس را نمی‌گیرد و صریحاً «پرداخت» به‌نظر می‌رسد. */
.ordl-sbadge.is-pay { border-inline-start-color: var(--th-danger); }
/* :not(.ordl-shelp) لازم است — ⓘ راهنما هم فرزندِ مستقیمِ همین قرص است و
   بدون آن، قاعده‌ی پررنگ روی خودش هم می‌نشست و دقیقاً همان چیزی را که
   می‌خواستیم کم‌رنگ کنیم هم‌وزنِ لینکِ پرداخت می‌کرد. */
.ordl-sbadge.is-pay > a:not(.ordl-shelp) { color: #B91C1C; font-weight: 600; }
.ordl-sbadge.is-pay > a:not(.ordl-shelp):hover { color: #B91C1C; text-decoration: underline; text-underline-offset: 2px; }
html.dark .ordl-sbadge.is-pay > a:not(.ordl-shelp),
html.dark .ordl-sbadge.is-pay > a:not(.ordl-shelp):hover { color: color-mix(in srgb, var(--th-danger) 80%, #FFFFFF); }
/* ⓘ راهنما: پس‌زمینه‌تر از لینکِ اصلی، ولی نه کم‌رنگ‌تر از حدِ خوانایی —
   یک لینکِ فقط‌آیکنی است و text-3 روی قرص فقط ۲.۴ می‌دهد (کمتر از کفِ ۳
   برای کنترل‌های غیرمتنی). فرودستی‌اش را وزن و رنگ‌مایه می‌رساند نه روشنی.
   وزنِ سلکتور عمداً از .ordl-sbadge a بالاتر است وگرنه رنگِ عمومیِ قرص
   رویش می‌نشیند. */
.ordl-sbadge .ordl-shelp { margin-inline-start: 6px; color: var(--th-text-2); font-weight: 400; }
.ordl-sbadge a.ordl-shelp:hover { color: var(--th-brand); text-decoration: none; }
html.dark .ordl-sbadge a.ordl-shelp { color: var(--th-text-2); }
html.dark .ordl-sbadge a.ordl-shelp:hover { color: var(--th-brand); }

.ordl-pay {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: .76rem; color: var(--th-text-2);
}
.ordl-pay i { font-size: .6em; }
.ordl-pay.is-ok      { color: #047857; }
.ordl-pay.is-error   { color: #B91C1C; }
.ordl-pay.is-pending { color: #B45309; }
html.dark .ordl-pay.is-ok      { color: var(--th-success); }
html.dark .ordl-pay.is-error   { color: var(--th-danger); }
html.dark .ordl-pay.is-pending { color: var(--th-warning); }
.ordl-pay a { color: var(--th-text-2); text-decoration: underline; text-underline-offset: 2px; }
.ordl-pay a:hover { color: var(--th-brand); }
html.dark .ordl-pay a { color: var(--th-text-2); }

/* ── توضیحِ وضعیت (HTML آزادِ ادمین) ── */
.ordl-desc {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--th-border-2);
  padding-top: 10px;
}
.ordl-desc-sum {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none;
  font-size: .78rem; font-weight: 600; color: var(--th-text-2);
}
.ordl-desc-sum::-webkit-details-marker { display: none; }
.ordl-desc-sum i { color: var(--th-text-3); }
.ordl-desc[open] > .ordl-desc-sum { color: var(--th-text-1); }
.ordl-desc-bd {
  margin-top: 9px; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--th-surface-2);
  font-size: .8rem; line-height: 2.1; color: var(--th-text-2);
  overflow-wrap: anywhere;
}
.ordl-desc-bd b { color: var(--th-text-1); }

/* ── ردیفِ عملیات ──
   عمداً تمام‌عرض و در ردیفِ خودش است: کارِ اصلیِ این صفحه همین است و
   قبلاً در ستونِ باریکِ هفتم به یک لینکِ چندکلمه‌ای تا می‌شد. */
.ordl-acts {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 12px; margin-top: 2px;
  border-top: 1px dashed var(--th-border-2);
}
/* PanelOrderActionForm هر دکمه را داخل یک <form> می‌گذارد تا با GET
   قابل‌شلیک نباشد؛ فرم نباید ارتفاع یا ردیف اضافه کند. */
.ordl-act-frm { display: inline-flex; margin: 0; }
/* دکمه‌ی داخل فرم دقیقاً باید مثل <a class="svcl-act"> دیده شود */
.ordl-acts button.svcl-act { font-family: inherit; cursor: pointer; }
/* حذف تا وقتی روی آن نرفته‌ایم خنثاست: در صفحه‌ای که دکمه‌ی اصلی‌اش
   «ثبت اتوماتیک» است، یک دکمه‌ی همیشه‌قرمز چشم را می‌دزدد.
   text-2 نه text-3: این یک کنترلِ کلیک‌شدنی است و text-3 روی سفید فقط
   ۲.۵ کنتراست می‌دهد — برای برچسبِ خاموش بس است، برای دکمه نه. */
.svcl-act.is-danger { color: var(--th-text-2); }
a.svcl-act.is-danger:hover,
button.svcl-act.is-danger:hover {
  border-color: var(--th-danger); color: var(--th-danger);
  background: color-mix(in srgb, var(--th-danger) 8%, transparent);
}
html.dark a.svcl-act.is-danger { color: var(--th-text-2); }
html.dark a.svcl-act.is-danger:hover { color: var(--th-danger); }
/* «حذف» باید ته نوار باشد نه کنارِ دکمه‌ی اصلی */
.ordl-acts > .svcl-act.is-danger { margin-inline-start: auto; }

/* ── راهنمای پایین صفحه ── */
.ordl-help-ul {
  margin: 0; padding-inline-start: 20px;
  font-size: .82rem; line-height: 2.1; color: var(--th-text-2);
}

/* ── ۱۰۵۰px: دو ستون ──
   مشخصات و مبلغ کنار هم می‌مانند و ستونِ وضعیت تمام‌عرض به ردیف دوم
   می‌رود. اگر وضعیت را در ستونِ auto رها می‌کردیم، عنوانِ بلندِ
   دیتابیسی آن را به یک ستونِ باریکِ چندخطی تبدیل می‌کرد. */
@media (max-width: 1050px) {
  .ordl-card { grid-template-columns: minmax(0, 1fr) auto; }
  .ordl-price { text-align: end; }
  .ordl-status {
    grid-column: 1 / -1;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  }
  .ordl-sbadge { flex: 1 1 260px; }
}

@media (max-width: 640px) {
  .ordl-card { grid-template-columns: 1fr; gap: 12px; padding: 14px; padding-inline-start: 16px; }
  .ordl-price { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; text-align: start; }
  .ordl-price-lbl { order: -1; }
  .ordl-price-off,
  .ordl-price-adm { flex-basis: 100%; }
  .ordl-status { flex-direction: column; align-items: stretch; }
  .ordl-sbadge { flex: 1 1 auto; }
  /* در موبایل هر عملیات یک دکمه‌ی تمام‌عرض است: هدفِ لمس بزرگ‌تر و
     ترتیبِ خواندن روشن‌تر. دکمه‌ی اصلی اول، حذف آخر. */
  .ordl-acts { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .ordl-act-frm { display: block; }
  .ordl-acts .svcl-act,
  .ordl-acts button.svcl-act { width: 100%; justify-content: center; }
  .ordl-acts > .svcl-act.is-danger { margin-inline-start: 0; order: 99; }
  .svcl-pill-t { max-width: 16ch; }
}

/* ════════════════════════════════════════════════════
   لیست تیکت‌ها — tktl-*
   قالب: html/panel/message-inbox.html  (tickets.htm)
   ----------------------------------------------------------------
   چهارچوب صفحه (قرص‌ها، ترتیب، پنل جستجو، دکمه‌ها، حالت خالی،
   صفحه‌بندی) همان svcl-* لیست سرویس‌هاست تا چهار صفحه‌ی هم‌خانواده‌ی
   «سرویس‌ها / دامنه‌ها / خریدها / تیکت‌ها» یک زبان بصری داشته باشند و
   CSS چهار بار نوشته نشود. اینجا فقط چیزهایی می‌آید که مخصوص تیکت
   است.

   قالب قبلی یک <table> شش‌ستونه بود با سه ایراد:
   • در موبایل سه ستون با d-none حذف می‌شد و دو تا از آن‌ها دقیقا همان
     چیزی بودند که کاربر برای همین‌شان صفحه را باز می‌کند: «وضعیت» و
     «آخرین پاسخ».
   • «خوانده‌نشده» فقط یک <b> بود؛ در فهرستی از ده ردیف با فونت
     یکسان، پررنگ‌بودنِ یک ردیف تقریبا دیده نمی‌شد.
   • ستونِ وضعیت عنوانِ خامِ دیتابیس را نشان می‌داد («لطفا منتظر
     بمانید» برای open) که به پرسشِ واقعیِ کاربر — نوبتِ کیست — جواب
     نمی‌داد.

   کارتِ تیکت چهار ناحیه دارد: مشخصات (عنوان و فراداده) / زمانِ آخرین
   پاسخ / وضعیت و «نوبتِ کیست» / عملیات. نوارِ رنگیِ کناری همان نقشِ
   .svcl-card::before را دارد.
════════════════════════════════════════════════════ */

/* ── حالت‌های تازه در واژگانِ مشترکِ svcl-pill ──
   نامشان با tk- شروع می‌شود چون is-wait و is-pending و ... قبلا برای
   لیست سرویس‌ها معنی دیگری گرفته‌اند.
   رنگ‌ها عمدا همان‌هایی هستند که بجِ .tk-* روی کارت دارد: نقطه‌ی قرص،
   نوارِ کناریِ کارت و بجِ وضعیت باید یک رنگ باشند وگرنه کاربر سه
   نظامِ رنگی می‌بیند. */
.svcl-pill.is-tk-turn     { --svc-c: var(--th-brand); }
.svcl-pill.is-tk-open     { --svc-c: var(--th-success); }
.svcl-pill.is-tk-answered { --svc-c: var(--th-info); }
.svcl-pill.is-tk-wait     { --svc-c: var(--th-warning); }
.svcl-pill.is-tk-held     { --svc-c: #8B5CF6; }
.svcl-pill.is-tk-closed   { --svc-c: var(--th-text-3); }
.svcl-pill.is-tk-snooze   { --svc-c: var(--th-info); }
.svcl-pill.is-tk-deleted  { --svc-c: var(--th-danger); }

/* پیامِ خطای پنلِ جستجو — تنها چیزی که svcl-filter کم داشت */
.svcl-filter-err {
  margin-top: 12px; padding: 9px 12px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--th-danger) 10%, transparent);
  font-size: .8rem; color: #B91C1C;
}
html.dark .svcl-filter-err { color: color-mix(in srgb, var(--th-danger) 80%, #FFFFFF); }

/* دکمه‌ی «تیکت جدید» ته نوار ابزار.
   .svcl-count خودش margin-inline-start:auto دارد، پس دکمه بعد از آن و
   چسبیده به لبه می‌نشیند. */
.tktl-new { margin-inline-start: 10px; }

/* ── کارت ── */
.tktl-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px 18px;
  padding: 14px 18px;
  padding-inline-start: 20px;
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  background: var(--th-surface);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  --svc-c: var(--th-text-3);
}
.tktl-card:hover { border-color: color-mix(in srgb, var(--th-brand) 45%, var(--th-border)); box-shadow: var(--sh-sm); }
.tktl-card::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 4px; background: var(--svc-c);
}
.tktl-card.is-new      { --svc-c: var(--th-brand); }
.tktl-card.is-open     { --svc-c: var(--th-success); }
.tktl-card.is-answered { --svc-c: var(--th-info); }
.tktl-card.is-wait     { --svc-c: var(--th-warning); }
.tktl-card.is-held     { --svc-c: #8B5CF6; }
.tktl-card.is-closed   { --svc-c: var(--th-border-2); }
.tktl-card.is-deleted  { --svc-c: var(--th-danger); }
/* تیکتِ حذف‌شده را فقط مدیر می‌بیند و باید در فهرست فورا از بقیه جدا باشد */
.tktl-card.is-deleted .tktl-subject { text-decoration: line-through; color: var(--th-text-2); }
/* تیکتی که پاسخِ خوانده‌نشده دارد باید از یک نگاه از بقیه جدا باشد؛
   پررنگ‌کردنِ عنوان به‌تنهایی کافی نبود. */
.tktl-card.is-unread { background: color-mix(in srgb, var(--th-brand) 5%, var(--th-surface)); }

/* ── ناحیه‌ی مشخصات ── */
.tktl-main { min-width: 0; }
.tktl-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tktl-subject {
  min-width: 0; font-size: .92rem; font-weight: 600; color: var(--th-text-1);
  overflow-wrap: anywhere;
}
a.tktl-subject:hover { color: var(--th-brand); text-decoration: none; }
html.dark a.tktl-subject { color: var(--th-text-1); }
html.dark a.tktl-subject:hover { color: var(--th-brand); }
.tktl-card.is-unread .tktl-subject { font-weight: 700; }
.tktl-clip, .tktl-lock { color: var(--th-text-3); font-size: .8rem; }
.tktl-badge-new {
  padding: 2px 8px; border-radius: 99px;
  background: var(--th-brand); color: var(--th-on-brand);
  font-size: .68rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
}

.tktl-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px;
  margin-top: 7px; font-size: .76rem; color: var(--th-text-3);
}
.tktl-meta i { font-size: .9em; color: var(--th-text-3); }
.tktl-num { font-family: var(--font-num); color: var(--th-text-2); }
.tktl-dpt, .tktl-cnt { color: var(--th-text-2); }
.tktl-ctx { color: var(--th-text-2); overflow-wrap: anywhere; }
.tktl-uname { color: var(--th-text-2); }
a.tktl-uname:hover { color: var(--th-brand); text-decoration: none; }
html.dark a.tktl-uname { color: var(--th-text-2); }
html.dark a.tktl-uname:hover { color: var(--th-brand); }
/* تائیدنشده: قبلا با style="color:#ff7451" چاپ می‌شد که در تم شب روی
   زمینه‌ی تیره ۲.۹ کنتراست می‌داد. */
.tktl-uname.is-ok   { color: #047857; }
.tktl-uname.is-warn { color: #B45309; font-weight: 600; }
html.dark .tktl-uname.is-ok   { color: var(--th-success); }
html.dark .tktl-uname.is-warn { color: var(--th-warning); }

.tktl-queue {
  margin-top: 8px; padding: 7px 10px;
  border-radius: var(--r-md);
  background: var(--th-surface-2);
  font-size: .74rem; color: var(--th-text-2);
}
.tktl-queue i { color: var(--th-warning); margin-inline-end: 4px; }

/* ── ناحیه‌ی زمان ── */
.tktl-when { display: flex; flex-direction: column; gap: 3px; text-align: start; white-space: nowrap; }
.tktl-when-lbl { font-size: .7rem; color: var(--th-text-3); }
.tktl-when-val { font-size: .8rem; color: var(--th-text-1); }
html.dark .tktl-when-val { color: var(--th-text-1); }

/* ── ناحیه‌ی وضعیت ── */
.tktl-status { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
/* «نوبتِ کیست» چیزی است که وضعیت نمی‌گوید: عنوانِ open در دیتابیس
   «لطفا منتظر بمانید» است و کاربر از آن نمی‌فهمد توپ در زمین کیست. */
.tktl-turn { font-size: .72rem; color: var(--th-text-3); white-space: nowrap; }
.tktl-turn.is-you { color: #B45309; font-weight: 600; }
html.dark .tktl-turn.is-you { color: var(--th-warning); }

/* ── عملیات ── */
.tktl-acts { display: flex; align-items: center; gap: 6px; }
.tktl-act-t { display: inline; }

/* ── حذف دسته‌ای (فقط مدیر کل) ──
   چک‌باکس یک ستونِ باریک در ابتدای کارت است. کلِ .tktl-pick هدفِ کلیک
   است (label) تا روی موبایل هم بشود زد. */
/* چک‌باکس یک آیتمِ گرید است، پس هرجا ستون‌ها تعریف شده‌اند یک ستونِ باریک
   جلویشان اضافه می‌شود. :has در همین فایل جای دیگر هم استفاده شده. */
.tktl-card:has(.tktl-pick) { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.tktl-pick { display: flex; align-items: center; margin: 0; cursor: pointer; }
.tktl-pick input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--th-danger); }
.tktl-card:has(.tktl-pick input:checked) {
  border-color: var(--th-danger);
  background: color-mix(in srgb, var(--th-danger) 6%, var(--th-surface));
}
.tktl-massbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 12px; padding: 12px 14px;
  border: 1px dashed var(--th-border-2); border-radius: var(--r-lg);
}
.tktl-massbar-t { flex: 1 1 260px; font-size: .78rem; color: var(--th-text-3); }
.tktl-massbar-t b { color: var(--th-danger); }
/* دکمه‌ی این نوار تنها کارِ برگشت‌ناپذیرِ صفحه است و باید همان‌طور دیده شود */
.svcl-btn.is-danger { border-color: var(--th-danger); color: var(--th-danger); background: var(--th-surface); }
.svcl-btn.is-danger:hover { background: color-mix(in srgb, var(--th-danger) 10%, transparent); color: var(--th-danger); }
html.dark .svcl-btn.is-danger { color: var(--th-danger); }

/* ── ۱۰۵۰px: زمان و وضعیت به ردیف دوم ── */
@media (max-width: 1050px) {
  .tktl-card { grid-template-columns: minmax(0, 1fr) auto; }
  .tktl-card:has(.tktl-pick) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tktl-when { grid-row: 1; grid-column: 2; text-align: end; }
  .tktl-card:has(.tktl-pick) .tktl-when { grid-column: 3; }
  .tktl-status {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  }
  .tktl-acts { grid-column: 1 / -1; padding-top: 10px; border-top: 1px dashed var(--th-border-2); }
  .tktl-acts .svcl-act { flex: 0 0 auto; }
  .tktl-acts > .svcl-act.is-danger { margin-inline-start: auto; }
}

@media (max-width: 640px) {
  .tktl-card { grid-template-columns: 1fr; gap: 10px; padding: 14px; padding-inline-start: 16px; }
  .tktl-card:has(.tktl-pick) { grid-template-columns: auto 1fr; }
  .tktl-when { grid-row: auto; grid-column: 1; flex-direction: row; align-items: baseline; gap: 8px; text-align: start; }
  .tktl-card:has(.tktl-pick) .tktl-when { grid-column: 2; }
  .tktl-when-lbl { order: -1; }
  /* دکمه‌ی «مشاهده» تمام فضای باقیمانده را می‌گیرد و «حذف» به اندازه‌ی
     خودش می‌ماند — هدفِ لمسِ بزرگ‌تر برای کارِ اصلی، بدون اینکه حذف هم
     تمام‌عرض و وسوسه‌انگیز شود. */
  .tktl-acts { display: flex; flex-wrap: nowrap; gap: 8px; }
  .tktl-acts .svcl-act.is-main { flex: 1 1 auto; }
  .tktl-acts > .svcl-act.is-danger { flex: 0 0 auto; margin-inline-start: 0; }
  .tktl-new { margin-inline-start: 0; width: 100%; }
}

/* ════════════════════════════════════════════════════
   تب «تنظیمات سرویس» — کارت‌های ماژول‌های اتوماسیون
   قالب: html/panel/service-module-cards.html
   ----------------------------------------------------------------
   مارک‌آپ متعلق به همین تم است (PHP فقط داده می‌دهد)، پس کلاس‌ها
   svc-mod* هستند و دیگر لازم نیست .row/.card بوت‌استرپ را override
   کنیم؛ در نتیجه صفحه‌های عملیاتیِ ماژول‌ها (شارژ نمایندگی، تغییر
   یوزر WHM و ...) که همچنان بوت‌استرپی‌اند دست‌نخورده می‌مانند.
   نکته: فیلد icon همچنان HTML آماده‌ی ماژول است و رنگ inline
   goldenrod دارد ⇒ ناچار به !important.

   چیدمان سه لایه است، چون داده‌ی این تب سه جنس دارد و قبلاً هر سه در
   یک گریدِ هم‌وزن ریخته می‌شد:
     .svc-modmain   عملیاتِ اصلی (ورود به پنل) — تنها چیزی که رنگِ برند
                    می‌گیرد، چون بیشترِ مراجعه‌ها همین است
     .svc-modstats  آمار مصرف — «اطلاعات» است، نه دکمه
     .svc-modsec    عملیات، دسته‌بندی‌شده با تیتر
   کارتِ عملیاتی (.is-action) خودش یک <a> است و دکمه‌ی جدا ندارد.
════════════════════════════════════════════════════ */

/* سقف عرض لازم است: تبِ پنل تمام‌عرض است و روی نمایشگر پهن گرید تا ۷
   ستون باز می‌شد. نتیجه‌اش کارت‌های ۲۶۰پیکسلی بود که توضیحشان سه خط
   می‌شکست در حالی که ۱۷۰۰px کنارشان خالی می‌ماند.
   بدون margin: auto — در RTL بلوک از لبه‌ی راست شروع می‌شود و با نوار
   تب‌های بالای صفحه هم‌تراز می‌ماند. */
.svc-modwrap { display: flex; flex-direction: column; gap: 20px; max-width: 1400px; }

/* ── عملیات اصلی ──
   تنها جای این تب که زمینه‌ی برند دارد. متن از --th-on-brand می‌آید،
   نه سفید (سفید روی نارنجی ~۲.۱:۱ است و ناخوانا). */
.svc-modmain { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-modmain-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-md);
  background: var(--th-brand); border: 1px solid var(--th-brand);
  color: var(--th-on-brand); font-size: .86rem; font-weight: 700;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
a.svc-modmain-btn:hover {
  background: var(--th-brand-dark); border-color: var(--th-brand-dark);
  color: var(--th-on-brand); box-shadow: var(--sh-sm); text-decoration: none;
}
html.dark a.svc-modmain-btn,
html.dark a.svc-modmain-btn:hover { color: var(--th-on-brand) !important; text-decoration: none !important; }

/* ── نوار آمار مصرف ──
   عریض‌تر از کارت‌های عملیات چون محتوایشان جدول و نوار پیشرفت است. */
.svc-modstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.svc-modstat {
  display: flex; flex-direction: column;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ── دسته‌ها ──
   تیتر با یک خطِ کشیده تا مرزِ دسته‌ها بدون کادرکشی دیده شود. */
.svc-modsec { display: flex; flex-direction: column; gap: 10px; }
.svc-modsec-hd {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: .8rem; font-weight: 700;
  color: var(--th-text-2); letter-spacing: .01em;
}
.svc-modsec-hd::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--th-border);
}

.svc-modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.svc-modcard {
  display: flex; flex-direction: column;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.svc-modcard:hover { border-color: var(--th-border-2); box-shadow: var(--sh-sm); transform: translateY(-2px); }

/* ── کارتِ عملیاتی: یک ردیف، نه یک جعبه ──
   بدنه‌ی این کارت‌ها خالی بود (description تقریباً همه‌جا '' است) و
   تنها محتوایش دکمه‌ای بود با متنِ خودِ عنوان. ردیفِ فشرده هم فضای
   کمتری می‌گیرد و هم در RTL سریع‌تر اسکن می‌شود. */
.svc-modcard.is-action {
  flex-direction: row; align-items: center; gap: 10px;
  padding: 11px 13px;
  color: var(--th-text-1);
  /* بدون این، ردیف در همان سطرِ گرید تا قدِ بلندترین کارت (فرمِ «حذف
     سرویس» ~۱۸۰px) کش می‌آمد و یک ردیفِ ۵۰پیکسلی سه برابر می‌شد. */
  align-self: start;
  min-height: 54px;
}
a.svc-modcard.is-action:hover {
  border-color: var(--th-brand);
  background: color-mix(in srgb, var(--th-brand) 7%, var(--th-surface-2));
  text-decoration: none;
}
html.dark a.svc-modcard.is-action,
html.dark a.svc-modcard.is-action:hover { color: var(--th-text-1) !important; text-decoration: none !important; }
.svc-modcard-main {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
/* برچسبِ کنش — فقط وقتی ماژول متنی جز عنوان داده باشد (مثل «قفل باز
   شود» روی کارتِ «قفل انتقال دامنه»)؛ وگرنه کارت خودش گویاست. */
.svc-modcard-act {
  flex: 0 0 auto;
  padding: 3px 9px; border-radius: 999px;
  background: var(--th-surface); border: 1px solid var(--th-border);
  font-size: .72rem; font-weight: 600; color: var(--th-text-2);
  white-space: nowrap;
}
.svc-modcard-go {
  flex: 0 0 auto; font-size: .8rem; color: var(--th-text-3);
  transition: transform var(--t-fast), color var(--t-fast);
}
.svc-modcard.is-action:hover .svc-modcard-go {
  color: var(--th-brand); transform: translateX(-3px);
}

/* ── عملیات برگشت‌ناپذیر ──
   فقط آیکن و حالتِ hover قرمز می‌شود، نه کلِ کارت: هدف این است که
   کنارِ «بازگردانی بکاپ» با یک نگاه از هم تفکیک شوند، نه اینکه صفحه
   پر از کادرِ قرمز شود. */
.svc-modcard.is-danger .svc-modcard-ico {
  background: color-mix(in srgb, var(--th-danger) 12%, transparent);
  color: var(--th-danger);
}
a.svc-modcard.is-danger:hover {
  border-color: var(--th-danger);
  background: color-mix(in srgb, var(--th-danger) 7%, var(--th-surface-2));
}
.svc-modcard.is-danger:hover .svc-modcard-go { color: var(--th-danger); }

.svc-modcard-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--th-border);
}
.svc-modcard-ico {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--th-brand) 12%, transparent);
  color: var(--th-brand);
  font-size: .82rem;
}
/* آیکن ماژول با style="color: goldenrod" می‌آید */
.svc-modcard-ico span,
.svc-modcard-ico i { color: inherit !important; font-size: inherit !important; }
.svc-modcard-title {
  font-size: .85rem; font-weight: 700; line-height: 1.7;
  color: var(--th-text-1); min-width: 0;
}
/* حداکثر دو خط. تک‌خطیِ ellipsis‌دار عنوان‌های بلند مثل «فایلهای مخرب
   حذف شده توسط سیستم» را نصفه می‌کرد. */
.svc-modcard.is-action .svc-modcard-title {
  line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.svc-modcard-bd {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  font-size: .84rem; color: var(--th-text-2);
}
.svc-modcard-desc { margin: 0; font-size: .78rem; color: var(--th-text-3); line-height: 1.9; }
/* حداکثر دو خط. توضیح‌های بلندتر اصلاً به ردیف نمی‌رسند —
   RenderServiceModuleCards آنها را کارتِ کامل می‌کند تا متن بریده نشود. */
.svc-modcard.is-action .svc-modcard-desc {
  line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── دکمه‌ی عملیات ──
   فقط برای کارت‌های html می‌ماند (فرم/جدول نمی‌توانند داخل <a> بروند).
   عمداً خنثی است نه برند: در این تب فقط عملیاتِ اصلی رنگِ برند دارد. */
.svc-modcard-btn {
  display: block; text-align: center;
  padding: 8px 12px; border-radius: var(--r-md);
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  font-size: .82rem; font-weight: 600; color: var(--th-text-1);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
a.svc-modcard-btn:hover {
  background: color-mix(in srgb, var(--th-brand) 10%, var(--th-surface));
  border-color: var(--th-brand); color: #B45309; text-decoration: none;
}
html.dark a.svc-modcard-btn:hover { color: var(--th-brand); }

/* ── html آزادِ ماژول (فرم، جدول مصرف، لینک‌های چندتایی) ── */
.svc-modcard-html { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.svc-modcard-html > br { display: none; }
/* لینکِ مستقیم داخل html ماژول یک «عملیات» است (مثل دو گزینه‌ی سرویس
   ایمیل) ⇒ مثل دکمه‌ی کارت. لینکِ داخل جدول/فرم متنِ توضیحی است. */
.svc-modcard-html > a {
  display: block; text-align: center;
  padding: 8px 12px; border-radius: var(--r-md);
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  font-size: .82rem; font-weight: 600; color: var(--th-text-1);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.svc-modcard-html > a:hover {
  background: color-mix(in srgb, var(--th-brand) 10%, var(--th-surface));
  border-color: var(--th-brand); color: #B45309; text-decoration: none;
}
/* این <a>ها از html خودِ ماژول می‌آیند و کلاس plain ندارند، پس قانونِ
   سراسریِ «لینکِ بی‌کلاس در شب» (specificity بالا) رویشان می‌نشست و
   نارنجی و زیرخط‌دارشان می‌کرد؛ اینجا صریح خنثی می‌شود. */
html.dark .svc-modcard-html > a { color: var(--th-text-1) !important; text-decoration: none !important; }
html.dark .svc-modcard-html > a:hover { color: var(--th-brand) !important; }
.svc-modcard-html table a,
.svc-modcard-html form a { color: var(--th-link); }

.svc-modcard-html form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0;
}
.svc-modcard-html form > div { flex-basis: 100%; }
.svc-modcard-html input:not([type]),
.svc-modcard-html input[type="text"] {
  flex: 1 1 110px; min-width: 0; width: auto;
  padding: 6px 10px; border: 1px solid var(--th-border); border-radius: var(--r-sm);
  background: var(--th-surface); color: var(--th-text-1);
  font-family: var(--font-num); direction: ltr; text-align: right; font-size: .82rem;
}
/* submitها باید دکمه دیده شوند نه ورودی — وگرنه کنارِ input متنی گم می‌شوند */
.svc-modcard-html input[type="submit"],
.svc-modcard-html button {
  flex: 1 1 auto;
  padding: 8px 12px; border: 1px solid var(--th-border); border-radius: var(--r-md);
  background: var(--th-surface); color: var(--th-text-1);
  font-family: inherit; font-size: .82rem; font-weight: 600; text-align: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.svc-modcard-html input[type="submit"]:hover,
.svc-modcard-html button:hover {
  background: color-mix(in srgb, var(--th-brand) 10%, var(--th-surface));
  border-color: var(--th-brand); color: #B45309;
}
html.dark .svc-modcard-html input[type="submit"]:hover,
html.dark .svc-modcard-html button:hover { color: var(--th-brand); }

.svc-modcard-html table { width: 100% !important; border-collapse: collapse; }
.svc-modcard-html table td {
  padding: 0 0 6px; border: 0; background: transparent;
  font-size: .8rem; line-height: 2; color: var(--th-text-2);
}
.svc-modcard-html table tr:last-child td { padding-bottom: 0; }
.svc-modcard-html table b { color: var(--th-text-1); font-family: var(--font-num); }
.svc-modcard-html img { max-width: 100%; height: auto; }

.svc-modcard-html .progress {
  height: 8px; margin-top: 5px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--th-text-3) 22%, transparent);
}
.svc-modcard-html .progress-bar { border-radius: 999px; }

/* در موبایل دکمه‌ی عملیات اصلی تمام‌عرض می‌شود — تنها کارِ صفحه است و
   نباید کنارِ لبه بچسبد و نصفه بماند. */
@media (max-width: 640px) {
  .svc-modwrap { gap: 16px; }
  .svc-modmain-btn { flex: 1 1 100%; justify-content: center; }
  .svc-modstats { grid-template-columns: 1fr; }
}

/* ── حالت «در حال بارگذاری» پیش از لود ایجکسِ تب ──
   انتخابگر عمداً .mod-loading است نه «#nav-setting > .alert».
   آن نسخه‌ی قبلی *هر* alertی را که فرزندِ مستقیم تب تنظیمات بود می‌گرفت،
   از جمله پیام‌های PutWindow خودِ ماژول‌ها («دامنه … تمدید شد» با کلاس
   alert-success). چون id داشت (specificity 1,1,0) بر alert-success و
   حتی «html.dark .alert-success» غلبه می‌کرد و همه‌ی پیام‌های موفقیت/خطا
   را به یک کادر خط‌چینِ خاکستریِ کم‌کنتراست تبدیل می‌کرد.

   انتخابگر «.alert.mod-loading» است نه فقط «.mod-loading»: پلیس‌هولدر
   کلاس alert-primary را هم دارد و بوت‌استرپ/دارک‌مود برایش رنگ آبی
   می‌دهند؛ با یک کلاسِ تنها (0,1,0) از «html.dark .alert-primary»
   (0,2,1) می‌باخت و کادر در شب آبی می‌شد. */
.alert.mod-loading {
  border-radius: var(--r-lg);
  border: 1px dashed var(--th-border-2);
  background: var(--th-surface-2);
  color: var(--th-text-2);
  text-align: center; font-size: .86rem;
}
html.dark .alert.mod-loading {
  background: var(--th-surface-2);
  color: var(--th-text-2);
  border-color: var(--th-border-2);
}

/* ── پیام‌های PutWindow داخل تب تنظیمات ──
   وقتی PutWindow بدون عنوان صدا زده می‌شود ('' به‌عنوان title)، قالبِ
   other/alert.html یک «<span><b></b></span><br>» خالی چاپ می‌کند و
   پیام یک سطرِ خالی بالای خودش می‌گیرد. آن سطر اینجا جمع می‌شود.
   (این قالب str_replace است نه Smarty، پس شرط در خودِ قالب ممکن نیست.) */
.alert > span:has(> b:empty),
.alert > span:has(> b:empty) + br { display: none; }


/* ════════════════════════════════════════════════════
   صفحه دامنه — dmn-*
   panel/domain.html  (آدرس domain-<id>.htm)
   ----------------------------------------------------------------
   • بدنه‌ی صفحه همان اجزای صفحه‌ی سرویس است (svc-hero / svc-life /
     svc-kv / svc-block / svc-form) تا دو صفحه‌ی هم‌خانواده یک زبان
     بصری داشته باشند؛ اینجا فقط چیزهایی که مخصوص دامنه است می‌آید.
   • نوار عمر دامنه جایگزین <img src="graph.php"> شد: آن تصویر در شب
     زمینه‌ی سفید داشت و در موبایل کش می‌آمد.
   • همه‌ی رنگ‌ها از توکن می‌آیند، پس حالت شب خودکار درست است؛ فقط
     جاهایی که روی ته‌رنگِ روشن متن تیره لازم است صریح آمده.
════════════════════════════════════════════════════ */

/* ── برچسب‌های کنارِ وضعیت در سربرگ (Premium / در انتظار تمدید) ── */
.dmn-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.dmn-tag i { font-size: .9em; }
.dmn-tag.is-premium {
  color: #B45309;
  background: color-mix(in srgb, var(--th-brand) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--th-brand) 32%, transparent);
}
.dmn-tag.is-wait {
  color: #1D4ED8;
  background: color-mix(in srgb, var(--th-info) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--th-info) 30%, transparent);
}
/* در شب ته‌رنگ تیره است و متنِ تیره روی آن زیر ۳:۱ می‌افتد */
html.dark .dmn-tag.is-premium { color: var(--th-brand); }
html.dark .dmn-tag.is-wait    { color: var(--th-info); }

/* ── مقدارهای بله/خیر داخل svc-kv (هزینه انتقال، تحریم) ──
   جایگزین <span style="color:green|red"> که قبلاً از PHP می‌آمد. */
.dmn-ok { color: #047857; font-weight: 600; }
.dmn-no { color: #B91C1C; font-weight: 600; }
html.dark .dmn-ok { color: var(--th-success); }
html.dark .dmn-no { color: var(--th-danger); }

/* ── بلوکِ عملیات خطرناک (حذف دامنه) ──
   کارت با همان ساختار svc-block، ولی لبه و سربرگِ قرمز تا با
   بلوک‌های اطلاعاتی اشتباه نشود. */
.svc-block.is-danger { border-color: color-mix(in srgb, var(--th-danger) 35%, var(--th-border)); }
.svc-block.is-danger .svc-block-hd {
  color: #B91C1C;
  background: color-mix(in srgb, var(--th-danger) 7%, transparent);
  border-bottom-color: color-mix(in srgb, var(--th-danger) 22%, var(--th-border));
}
.svc-block.is-danger .svc-block-hd i { color: inherit; }
html.dark .svc-block.is-danger .svc-block-hd { color: var(--th-danger); }
.dmn-danger-note {
  margin: 0 0 12px;
  font-size: .8rem; line-height: 2; color: var(--th-text-2);
}


/* ── فلش‌های مرتب‌سازی سرستون جدول‌ها ──
   قبلاً <img class="msp msp-s-asc"> بودند، ولی این قالب هیچ قاعده‌ی
   .msp ندارد (اسپرایت فقط در قالب ۲۰۲۴ تعریف شده) ⇒ همه نامرئی بودند.
   حالا آیکن FontAwesome‌اند و چون داخل <a> بی‌کلاس‌اند، بدون این قاعده
   رنگِ لینک می‌گرفتند و کنارِ عنوانِ ستون شلوغ می‌شدند. */
.th-sort {
  font-size: .78em;
  color: var(--th-text-3);
  vertical-align: middle;
  transition: color var(--t-fast);
}
a:hover > .th-sort { color: var(--th-brand); }
/* دو فلشِ ASC/DESC چسبیده‌اند؛ کمی فاصله تا قابل کلیک و خوانا باشند */
th a + a > .th-sort { margin-inline-start: 2px; }
/* قانون سراسریِ «لینکِ بی‌کلاس در شب» رنگ را روی <a> می‌گذارد و <i>
   ارث می‌برد؛ اینجا صریح خنثی می‌شود تا فلش‌ها کم‌رنگ بمانند */
html.dark .th-sort { color: var(--th-text-3); }
html.dark a:hover > .th-sort { color: var(--th-brand); }

/* تصویر کپچا: اندازه‌ی ۲۰۰×۶۴ نباید در موبایل از کادر بیرون بزند */
.captcha-img { max-width: 100%; height: auto; display: block; }

/* ── ویجت کپچای اثبات‌کار ─────────────────────────────────────
   جای تصویر کپچا می‌نشیند. کاربر چیزی وارد نمی‌کند؛ فقط باید
   بفهمد چیزی در حال انجام است و کِی تمام شد. سه حالت دارد:
   solving (چرخنده) / ready (تیک) / error (پیام + تلاش دوباره) */
.captcha-pow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 12px;
  font-size: .88rem;
  color: var(--th-text-2);
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md, 8px);
}
/* وقتی ویجت تنها عضو input-group است، باید کل عرض را بگیرد وگرنه
   کنارِ لبه‌ی گروه می‌چسبد و شکسته به‌نظر می‌رسد */
.input-group.captcha-pow-group { display: block; }
.input-group.captcha-pow-group > .captcha-pow,
.input-group.captcha-pow-group > .input-group-text { width: 100%; }
.input-group.captcha-pow-group > .input-group-text {
  padding: 0;
  background: none;
  border: 0;
}

.captcha-pow-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--th-border);
  border-top-color: var(--th-brand);
  animation: captcha-pow-spin .7s linear infinite;
}
@keyframes captcha-pow-spin { to { transform: rotate(360deg); } }

/* پیش از اولین تعاملِ کاربر هنوز چالشی گرفته نشده — چرخنده دروغ می‌گوید */
.captcha-pow[data-state="idle"] > .captcha-pow-icon {
  animation: none;
  border-color: var(--th-border);
}
.captcha-pow[data-state="ready"] { color: var(--th-text-1); }
.captcha-pow[data-state="ready"] > .captcha-pow-icon {
  animation: none;
  border: 0;
  background: var(--th-success);
  /* تیک، بدون وابستگی به فونت آیکن */
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.2 11.6 2.9 8.3l1.1-1.1 2.2 2.2 5.8-5.8 1.1 1.1z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.2 11.6 2.9 8.3l1.1-1.1 2.2 2.2 5.8-5.8 1.1 1.1z"/></svg>') center/contain no-repeat;
}
.captcha-pow[data-state="error"] { color: var(--th-danger); border-color: var(--th-danger); }
.captcha-pow[data-state="error"] > .captcha-pow-icon { animation: none; border-color: var(--th-danger); }
.captcha-pow-retry { margin-inline-start: 4px; white-space: nowrap; }
.captcha-pow-noscript { color: var(--th-danger); }

/* حرکت چرخنده برای کسانی که انیمیشن را خاموش کرده‌اند آزاردهنده است */
@media (prefers-reduced-motion: reduce) {
  .captcha-pow-icon { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   فرم ورود یکپارچه (login-unified.html)
   --------------------------------------------------------------
   همه‌ی رنگ‌ها از توکن‌ها می‌آیند، پس حالت شب بدون قاعده‌ی جداگانه
   درست درمی‌آید. تنها استثناها جایی است که روی ته‌رنگِ رنگی متن
   می‌نشیند و باید کنتراست دستی تنظیم شود.
══════════════════════════════════════════════════════════════ */

.lg-wrap {
  display: flex; justify-content: center; align-items: flex-start;
  padding: 28px 16px 56px;
}
.lg-wrap form { width: 100%; max-width: 430px; }

.lg-card {
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden;
}

/* ── سربرگ ── */
.lg-head {
  display: flex; align-items: center; gap: 13px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--th-border);
}
.lg-head-icon {
  flex: 0 0 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--th-brand) 14%, transparent);
  color: var(--th-brand-dark);
  font-size: 1.05rem;
}
.lg-title { font-size: 1.08rem; font-weight: 700; color: var(--th-text-1); margin: 0; line-height: 1.4; }
.lg-sub   { font-size: .85rem; color: var(--th-text-2); margin: 2px 0 0; line-height: 1.6; }

/* ── بدنه ── */
.lg-body { padding: 20px 22px 4px; }
.lg-field { margin-bottom: 17px; }

.lg-label {
  display: block; margin-bottom: 7px;
  font-size: .86rem; font-weight: 600; color: var(--th-text-1);
}

/* قاعده‌ی سراسریِ فرم‌های پنل (#maincontent input[type=...]) با شناسه
   نوشته شده و بر کلاسِ تنها غلبه می‌کند. پس مثل .tfa-otp، هر قاعده‌ای که
   باید بر آن بچربد دوباره با همان پیشوند نوشته می‌شود. رنگ و حاشیه و
   حالتِ focus از همان قاعده‌ی سراسری می‌آید و اینجا تکرار نمی‌شود. */
.lg-input,
#maincontent input.lg-input:not(.btn) {
  width: 100%; padding: 11px 13px;
  border-radius: var(--r-md);
  font-size: .95rem; line-height: 1.5;
}

.lg-input.is-err,
#maincontent input.lg-input.is-err:not(.btn) {
  border-color: var(--th-danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.14);
}

/* کد پیامکی و رمز دوم: درشت و با فاصله، چون رقم‌به‌رقم خوانده می‌شود */
.lg-code,
#maincontent input.lg-code:not(.btn) {
  text-align: center;
  font-family: var(--font-num);
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: .42em; text-indent: .42em;
  padding: 12px 13px;
}

.lg-hint { font-size: .78rem; color: var(--th-text-2); line-height: 1.75; margin-top: 6px; }

/* ── شناسه‌ای که کاربر قبلاً داده ── */
.lg-ident {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px; margin-bottom: 17px;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
}
.lg-ident-num { font-family: var(--font-num); font-weight: 600; color: var(--th-text-1); font-size: .95rem; }
.lg-ident-edit { font-size: .8rem; color: var(--th-link); text-decoration: none; white-space: nowrap; }
.lg-ident-edit:hover { text-decoration: underline; }

/* ── یادداشتِ «حساب تازه ساخته می‌شود» ── */
.lg-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 17px;
  background: color-mix(in srgb, var(--th-info) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--th-info) 30%, transparent);
  border-radius: var(--r-md);
  font-size: .85rem; line-height: 1.8; color: var(--th-text-1);
}
.lg-note > i { color: var(--th-info); margin-top: 3px; }
.lg-note .lg-hint { margin-top: 2px; }

/* ── رمز عبور + دکمه‌ی چشم ── */
.lg-pass { position: relative; }
/* جای دکمه‌ی چشم خالی می‌ماند تا نقطه‌های رمز زیرش نروند */
.lg-pass .lg-input,
#maincontent .lg-pass input.lg-input:not(.btn) { padding-left: 48px; }
.lg-eye {
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--th-text-2); cursor: pointer;
}
.lg-eye:hover { background: var(--th-surface-2); color: var(--th-text-1); }

/* ── پذیرش قوانین ── */
.lg-check {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 17px; font-size: .85rem; line-height: 1.7; color: var(--th-text-1);
}
.lg-check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--th-brand); flex: 0 0 auto; }
.lg-check.is-err label { color: var(--th-danger); }
.lg-check a { color: var(--th-link); }

/* ── ارسال دوباره ── */
.lg-resend { display: flex; align-items: center; justify-content: center; min-height: 26px; margin-bottom: 6px; }
.lg-linkbtn {
  background: none; border: none; padding: 0;
  color: var(--th-link); font-size: .84rem; font-weight: 600; cursor: pointer;
}
.lg-linkbtn:hover { text-decoration: underline; }
.lg-linkbtn:disabled { color: var(--th-text-3); cursor: default; text-decoration: none; }

/* ── کپچا ── */
.lg-captcha-row { display: flex; align-items: center; gap: 10px; }
.lg-captcha-row .lg-input { flex: 1 1 auto; min-width: 0; }
.lg-captcha-media { flex: 0 0 auto; display: flex; align-items: center; }
.lg-captcha-media .captcha-img { border-radius: var(--r-sm); display: block; max-width: 100%; height: auto; }
/* حالت اثبات‌کار: کاربر چیزی تایپ نمی‌کند، پس نه برچسب لازم است نه کادر */
.lg-captcha.is-pow .lg-label { display: none; }
.lg-captcha.is-pow .lg-input,
#maincontent .lg-captcha.is-pow input.lg-input:not(.btn) { display: none; }

/* ── پیشنهادِ مسیر جایگزین (ورود با کد پیامکی) ── */
.lg-alt { margin: -6px 0 17px; text-align: center; font-size: .84rem; }
.lg-alt a { color: var(--th-link); text-decoration: none; }
.lg-alt a:hover { text-decoration: underline; }
.lg-alt i { margin-left: 4px; }

/* ── پاورقی ── */
.lg-foot { padding: 6px 22px 20px; }
.lg-btn {
  width: 100%; padding: 12px 16px;
  background: var(--th-brand); color: var(--th-on-brand);
  border: none; border-radius: var(--r-md);
  font-size: .97rem; font-weight: 700; cursor: pointer;
  transition: background .15s, transform .08s;
}
.lg-btn:hover  { background: var(--th-brand-dark); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--th-brand-glow); }

.lg-wait { text-align: center; font-size: .84rem; color: var(--th-text-2); margin-bottom: 10px; }
.lg-wait img { vertical-align: middle; }

.lg-links { margin-top: 14px; text-align: center; font-size: .84rem; }
.lg-links a { color: var(--th-link); text-decoration: none; }
.lg-links a:hover { text-decoration: underline; }
.lg-sep { color: var(--th-text-3); margin: 0 7px; }

/* ── پیام سرور ──
   PutWindow مارک‌آپ خودش را می‌آورد؛ فقط جایش را مهار می‌کنیم. */
.lg-alert { padding: 14px 22px 0; font-size: .87rem; line-height: 1.85; }
.lg-alert img { vertical-align: middle; }
.lg-alert p:last-child { margin-bottom: 0; }

@media (max-width: 420px) {
  .lg-wrap { padding: 14px 12px 40px; }
  .lg-head { padding: 17px 17px 14px; }
  .lg-body { padding: 17px 17px 4px; }
  .lg-foot { padding: 6px 17px 17px; }
  .lg-code { font-size: 1.32rem; letter-spacing: .3em; text-indent: .3em; }
}


/* ════════════════════════════════════════════════════════════════════
   بازیابی رمز — recover-unified.html
   --------------------------------------------------------------------
   کارت، فیلدها، دکمه و پیام همگی از همان کلاس‌های .lg-* بالا می‌آیند؛
   این دو صفحه پشت سر هم دیده می‌شوند و باید یک چیز به نظر برسند. فقط
   چیزهایی که فرم ورود ندارد اینجا تعریف می‌شود: فهرست انتخاب پنل و
   نشانگر زنده‌ی شرط‌های رمز.
   ════════════════════════════════════════════════════════════════════ */

/* گام پایانی دکمه ندارد، لینک دارد. .lg-btn برای <button> نوشته شده و
   display نمی‌دهد، پس <a> بدون این inline می‌ماند و width:100% کاری
   نمی‌کند. */
a.lg-btn { display: block; text-align: center; text-decoration: none; color: var(--th-on-brand); }
a.lg-btn:hover { color: var(--th-on-brand); }

/* ── انتخاب پنل (یک شماره، چند پنل) ── */
.rc-picks { display: flex; flex-direction: column; gap: 9px; margin-bottom: 17px; }
.rc-pick {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--th-border); border-radius: var(--r-md);
  background: var(--th-surface-1);
  transition: border-color .15s, background .15s;
}
.rc-pick:hover { border-color: var(--th-brand); }
.rc-pick input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--th-brand); flex: 0 0 auto; }
/* :has برای مرورگرهای قدیمی بی‌اثر است و فقط حالتِ «انتخاب‌شده» را از
   دست می‌دهند؛ خودِ رادیو همچنان دیده می‌شود، پس چیزی نمی‌شکند. */
.rc-pick:has(input:checked) { border-color: var(--th-brand); background: var(--th-surface-2); }
.rc-pick-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-pick-user { font-family: var(--font-num); font-weight: 600; color: var(--th-text-1); font-size: .95rem; word-break: break-all; }
.rc-pick-body .lg-hint { margin-top: 0; }

/* ── شرط‌های رمز ── */
.rc-rules { list-style: none; margin: 9px 0 0; padding: 0; font-size: .78rem; line-height: 2; color: var(--th-text-2); }
.rc-rules li { display: flex; align-items: center; gap: 7px; }
.rc-rules i { width: 13px; text-align: center; color: var(--th-text-3); }
.rc-rules li.is-ok { color: var(--th-text-1); }
.rc-rules li.is-ok i { color: var(--th-success); }


/* ════════════════════════════════════════════════════════════════════
   DASHBOARD — پیشخوانِ کاربر (panel/home.html)
   --------------------------------------------------------------------
   همه‌چیز روی توکن‌های --th-* سوار است، پس شب و روز بدون یک خط قاعده‌ی
   جداگانه کار می‌کند. رنگِ لهجه‌ی هر بلوک از متغیر محلی --dash-c می‌آید
   تا حالت‌های وضعیت (خطر / هشدار / سالم) فقط با عوض‌کردن یک متغیر
   تغییر کنند.
   ════════════════════════════════════════════════════════════════════ */

.dash { display: flex; flex-direction: column; gap: 18px; }

/* ── ۱) نوار خوش‌آمد ── */
.dash-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 16px 20px;
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  background: linear-gradient(215deg, color-mix(in srgb, var(--th-brand) 11%, var(--th-surface)) 0%, var(--th-surface) 62%);
  box-shadow: var(--sh-sm);
}
.dash-hero-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dash-hero-txt { min-width: 0; }
.dash-avatar {
  width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--th-brand) 17%, transparent);
  color: var(--th-brand); font-size: 1.15rem;
}
.dash-hi { font-size: 1.1rem; font-weight: 700; color: var(--th-text-1); margin: 0; line-height: 1.5; }
.dash-hi-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 3px; font-size: .76rem; color: var(--th-text-2); }
.dash-hi-sub i { color: var(--th-text-3); margin-inline-end: 3px; }
.dash-hi-sub b { color: var(--th-text-1); font-weight: 600; }
.dash-hero-act { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── دکمه ── */
.dash-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--r-md); white-space: nowrap;
  border: 1px solid var(--th-border-2); background: var(--th-surface);
  color: var(--th-text-1); font-size: .82rem; font-weight: 600; text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.dash-btn:hover { border-color: var(--th-brand); color: var(--th-brand); }
.dash-btn-primary { background: var(--th-brand); border-color: var(--th-brand); color: var(--th-on-brand); }
.dash-btn-primary:hover { background: var(--th-brand-dark); border-color: var(--th-brand-dark); color: var(--th-on-brand); }
.dash-btn-block { display: flex; width: 100%; }

/* ── ۲) هشدارها ── */
.dash-alerts { display: flex; flex-direction: column; gap: 9px; }
.dash-alert {
  --dash-c: var(--th-info);
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--dash-c) 30%, transparent);
  background: color-mix(in srgb, var(--dash-c) 9%, var(--th-surface));
  color: var(--th-text-1); font-size: .85rem; line-height: 1.75; text-decoration: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.dash-alert:hover { border-color: color-mix(in srgb, var(--dash-c) 55%, transparent); box-shadow: var(--sh-sm); }
.dash-alert.is-danger { --dash-c: var(--th-danger); }
.dash-alert.is-warn   { --dash-c: var(--th-warning); }
.dash-alert.is-info   { --dash-c: var(--th-info); }
.dash-alert-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
  background: color-mix(in srgb, var(--dash-c) 16%, transparent); color: var(--dash-c);
}
.dash-alert-txt { flex: 1 1 auto; min-width: 0; }
.dash-alert-txt b { font-weight: 700; }
.dash-alert-go { flex: 0 0 auto; font-size: .79rem; font-weight: 700; color: var(--dash-c); white-space: nowrap; }
.dash-alert-tag {
  display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 99px;
  background: color-mix(in srgb, var(--dash-c) 18%, transparent); color: var(--dash-c);
  font-size: .71rem; font-weight: 600;
}

/* ── ۳) شاخص‌ها ── */
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 14px; }
.dash-kpi { text-decoration: none; }
.dash-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-kpi-cta {
  font-size: .73rem; font-weight: 600; color: var(--stat-color, var(--th-brand));
  white-space: nowrap; opacity: 0; transition: opacity var(--t-fast);
}
.dash-kpi:hover .dash-kpi-cta, .dash-kpi:focus-visible .dash-kpi-cta { opacity: 1; }
/* عدد + واحد: جریانِ RTL تا واحد سمت چپِ عدد بنشیند؛ خودِ عدد داخل span[dir=ltr] است */
.dash-kpi .th-stat-val { direction: rtl; text-align: right; }
.dash-kpi .th-stat-val small { font-size: .68rem; font-weight: 600; color: var(--th-text-2); }
.dash-kpi .th-stat-lbl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── چیپ‌های کوچک ── */
.dash-chip {
  --dash-c: var(--th-text-3);
  display: inline-block; padding: 1px 8px; border-radius: 99px; vertical-align: middle;
  font-size: .7rem; font-weight: 600;
  background: color-mix(in srgb, var(--dash-c) 15%, transparent); color: var(--dash-c);
}
.dash-chip.is-danger { --dash-c: var(--th-danger); }
.dash-chip.is-warn   { --dash-c: var(--th-warning); }
.dash-chip.is-info   { --dash-c: var(--th-info); }
.dash-chip.is-ok     { --dash-c: var(--th-success); }

/* ── ۴) دو ستون ── */
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-col-main, .dash-col-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* سرِ کارت */
.dash-hd-ico { color: var(--th-brand); margin-inline-end: 5px; }
.dash-hd-link { font-size: .77rem; font-weight: 600; color: var(--th-text-2); text-decoration: none; white-space: nowrap; }
.dash-hd-link:hover { color: var(--th-brand); }

/* ── لیست ── */
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-item {
  --dash-c: var(--th-text-3);
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--th-border);
  transition: background var(--t-fast);
}
.dash-item:last-child { border-bottom: none; }
.dash-item:hover { background: var(--th-surface-2); }
.dash-item.is-expired, .dash-item.is-danger { --dash-c: var(--th-danger); }
.dash-item.is-warn { --dash-c: var(--th-warning); }
.dash-item.is-ok   { --dash-c: var(--th-success); }
.dash-item-main { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; text-decoration: none; }
.dash-item-ico {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
  background: color-mix(in srgb, var(--dash-c) 13%, transparent); color: var(--dash-c);
}
.dash-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-item-title { font-size: .86rem; font-weight: 600; color: var(--th-text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-item-sub { font-size: .73rem; color: var(--th-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-item-main:hover .dash-item-title { color: var(--th-brand); }
.dash-item-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.dash-list-exp .dash-item-side { width: 104px; }
.dash-days { font-size: .73rem; color: var(--th-text-2); text-align: center; }
.dash-days b { font-family: var(--font-num); font-size: .92rem; font-weight: 700; color: var(--dash-c); }

/* نوار پیشرفت */
.dash-bar { height: 5px; border-radius: 99px; background: var(--th-surface-2); border: 1px solid var(--th-border); overflow: hidden; }
.dash-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--dash-c, var(--th-brand)); transition: width var(--t-slow); }
.dash-bar > span.is-brand { background: linear-gradient(90deg, var(--th-brand-dark), var(--th-brand)); }
.dash-bar-lg { height: 8px; margin-top: 9px; }

/* بجِ وضعیت تیکت */
.dash-badge {
  --dash-c: var(--th-text-3);
  display: inline-block; padding: 3px 10px; border-radius: 99px; white-space: nowrap;
  font-size: .71rem; font-weight: 600;
  background: color-mix(in srgb, var(--dash-c) 14%, transparent); color: var(--dash-c);
}
.dash-badge.is-answered { --dash-c: var(--th-info); }
.dash-badge.is-waiting  { --dash-c: var(--th-warning); }

/* حالت خالی و لینکِ «بیشتر» */
.dash-empty { padding: 30px 18px; text-align: center; font-size: .84rem; color: var(--th-text-2); line-height: 1.9; }
.dash-empty i { display: block; font-size: 1.6rem; margin-bottom: 9px; color: var(--th-success); opacity: .6; }
.dash-more {
  display: block; padding: 11px 18px; text-align: center;
  font-size: .78rem; font-weight: 600; color: var(--th-text-2);
  border-top: 1px solid var(--th-border); text-decoration: none;
}
.dash-more:hover { color: var(--th-brand); background: var(--th-surface-2); }

/* ── امتیاز ── */
.dash-score-num { font-family: var(--font-num); font-size: 1.85rem; font-weight: 700; color: var(--th-text-1); line-height: 1; }
.dash-score-max { font-family: var(--font-fa); font-size: .74rem; font-weight: 500; color: var(--th-text-3); margin-inline-start: 6px; }
.dash-kv { margin-top: 15px; display: flex; flex-direction: column; gap: 7px; }
.dash-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; border-radius: var(--r-sm); background: var(--th-surface-2); font-size: .81rem; }
.dash-kv span { color: var(--th-text-2); }
.dash-kv b { color: var(--th-text-1); font-family: var(--font-num); font-weight: 700; }
.dash-note { margin: 13px 0 0; font-size: .74rem; line-height: 1.95; color: var(--th-text-3); }

/* ── امنیت ── */
.dash-checks { list-style: none; margin: 0 0 15px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-checks li { display: flex; align-items: center; gap: 9px; font-size: .83rem; color: var(--th-text-1); }
.dash-checks li > i { font-size: .95rem; flex: 0 0 auto; }
.dash-checks li > span { flex: 1 1 auto; }
.dash-checks li.is-ok > i { color: var(--th-success); }
.dash-checks li.is-todo > i { color: var(--th-warning); }
.dash-checks li.is-todo > span { color: var(--th-text-2); }
.dash-checks a { font-size: .76rem; font-weight: 600; color: var(--th-brand); text-decoration: none; white-space: nowrap; }
.dash-checks a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── دسترسی سریع ── */
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--th-border); border-top: 1px solid var(--th-border); }
.dash-grid a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 16px 5px; background: var(--th-surface); color: var(--th-text-2);
  font-size: .73rem; font-weight: 500; text-align: center; text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.dash-grid a i { font-size: 1.05rem; color: var(--th-text-3); transition: color var(--t-fast); }
.dash-grid a:hover { background: var(--th-surface-2); color: var(--th-brand); }
.dash-grid a:hover i { color: var(--th-brand); }

/* ── واکنش‌گرایی ── */
@media (max-width: 1100px) {
  .dash-cols { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .dash { gap: 14px; }
  .dash-hero { flex-direction: column; align-items: stretch; padding: 15px 16px; }
  .dash-hero-act .dash-btn { flex: 1 1 30%; }
  .dash-kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .th-stat.dash-kpi { padding: 14px; }
  .dash-kpi .th-stat-val { font-size: 1.25rem; }
  .dash-kpi-cta { display: none; }
  .dash-alert { align-items: flex-start; }
  .dash-alert-go { display: none; }
  .dash-item { padding: 10px 13px; gap: 9px; }
  .dash-list-exp .dash-item-side { width: 74px; }
  .dash-cols, .dash-col-main, .dash-col-side { gap: 14px; }
}
@media (max-width: 380px) {
  .dash-kpis { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-bar > span { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════
   DASHBOARD ADMIN — بخشِ مدیریت (فقط کارکنان) + ویجت معرفی دوستان
   روی همان توکن‌های --th-* ⇒ شب/روز خودکار.
   ════════════════════════════════════════════════════════════════════ */

/* ── معرفی دوستان ── */
.dash-invite { display: flex; gap: 8px; align-items: stretch; }
.dash-invite-in {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--th-border-2); border-radius: var(--r-md);
  background: var(--th-surface-2); color: var(--th-text-1);
  font-family: var(--font-num); font-size: .82rem;
}
.dash-invite .dash-btn { flex: 0 0 auto; }

/* ── جداکننده‌ی بخش مدیریت ── */
.dash-admin {
  margin-top: 6px; display: flex; flex-direction: column; gap: 16px;
  padding: 18px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--th-info) 35%, var(--th-border));
  background: color-mix(in srgb, var(--th-info) 5%, var(--th-surface));
}
.dash-admin-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-admin-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 99px;
  background: var(--th-info); color: #fff; font-size: .82rem; font-weight: 700;
}
.dash-admin-sub { font-size: .76rem; color: var(--th-text-2); }

/* وضعیت حساب — شبکه‌ی خانه‌های کوچک */
.dash-admin-status {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px;
  background: var(--th-border); border: 1px solid var(--th-border); border-radius: var(--r-md); overflow: hidden;
}
.dash-astat { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; background: var(--th-surface); }
.dash-astat-wide { grid-column: 1 / -1; }
.dash-astat-lbl { font-size: .72rem; color: var(--th-text-3); }
.dash-astat-val { font-size: .88rem; font-weight: 600; color: var(--th-text-1); word-break: break-word; }
.dash-astat-act { font-size: .74rem; font-weight: 600; color: var(--th-link); margin-inline-start: 6px; }
.dash-astat-act:hover { text-decoration: underline; text-underline-offset: 2px; }

/* شبکه‌ی ابزار مدیریت — روی زمینه‌ی روشن‌ترِ بخش */
.dash-grid-admin a { background: var(--th-surface); }

/* آمار زمان پاسخ */
.dash-rt { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--th-border); border-top: 1px solid var(--th-border); }
.dash-rt > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 13px 8px; background: var(--th-surface); }
.dash-rt span { font-size: .72rem; color: var(--th-text-2); }
.dash-rt b { font-size: .86rem; font-weight: 700; color: var(--th-text-1); font-family: var(--font-num); }

/* فرم‌های اقدام */
.dash-admin-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.dash-form {
  display: flex; flex-direction: column; gap: 9px; padding: 14px;
  border: 1px solid var(--th-border); border-radius: var(--r-md); background: var(--th-surface);
}
.dash-form-hd { font-size: .84rem; font-weight: 600; color: var(--th-text-1); display: flex; align-items: center; gap: 7px; }
.dash-form-hd i { color: var(--th-info); }
.dash-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-in {
  flex: 1 1 130px; min-width: 0; padding: 8px 11px;
  border: 1px solid var(--th-border-2); border-radius: var(--r-sm);
  background: var(--th-surface-2); color: var(--th-text-1);
  font-family: var(--font-fa); font-size: .82rem;
}
.dash-in:focus { outline: none; border-color: var(--th-brand); }
.dash-form .dash-btn { flex: 0 0 auto; }

/* کاربران معرفی‌شده */
.dash-invited { line-height: 2.2; font-size: .85rem; }
.dash-invited a { color: var(--th-link); text-decoration: none; }
.dash-invited a:hover { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 700px) {
  .dash-admin { padding: 14px; }
  .dash-admin-forms { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════
   صفحه بازاریابی — bazaryabi.html
   ----------------------------------------------------
   از کلاس‌های مشترک (th-card / dash-btn / dash-chip / th-table)
   استفاده می‌کند و فقط اجزای خاصِ این صفحه اینجا تعریف شده‌اند.
   ════════════════════════════════════════════════════ */
.bz { display: flex; flex-direction: column; gap: 18px; }

/* ── هیرو درآمد ── */
.bz-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--th-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  background:
    radial-gradient(130% 150% at 100% 0%, var(--th-brand-glow), transparent 55%),
    var(--th-surface);
  padding: 24px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.bz-hero-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bz-hero-ico {
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--th-brand), var(--th-brand-dark));
  color: #201502; font-size: 1.45rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px var(--th-brand-glow);
}
.bz-hero-lbl { font-size: .82rem; color: var(--th-text-2); font-weight: 500; }
.bz-hero-num {
  font-family: var(--font-num); font-weight: 800;
  font-size: 2rem; line-height: 1.15; color: var(--th-text-1);
  margin-top: 2px; direction: ltr; text-align: right;
}
.bz-hero-num small { font-size: .88rem; font-weight: 600; color: var(--th-text-2); margin-inline-start: 5px; }
.bz-hero-sub { font-size: .77rem; color: var(--th-text-3); margin-top: 5px; line-height: 1.8; }
.bz-hero-sub b { color: var(--th-text-1); font-weight: 700; }
.bz-hero-act { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ── سه گام ── */
.bz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--th-border); }
.bz-step {
  background: var(--th-surface); padding: 20px 18px;
  display: flex; flex-direction: column; gap: 8px; position: relative;
}
.bz-step-ico { position: absolute; top: 18px; left: 18px; font-size: 1.5rem; color: var(--th-brand); opacity: .22; }
.bz-step-n {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--th-brand-light); color: var(--th-brand-dark);
  font-family: var(--font-num); font-weight: 700; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
}
.bz-step-t { font-size: .92rem; font-weight: 700; color: var(--th-text-1); }
.bz-step-d { font-size: .8rem; line-height: 1.95; color: var(--th-text-2); }
.bz-step-d b { color: var(--th-brand-dark); font-weight: 700; }

/* ── ابزار اشتراک‌گذاری ── */
.bz-tool { display: flex; flex-direction: column; gap: 8px; }
.bz-tool + .bz-tool { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--th-border); }
.bz-tool-lbl { font-size: .84rem; font-weight: 600; color: var(--th-text-1); display: flex; align-items: center; gap: 8px; }
.bz-tool-lbl i { color: var(--th-brand); }
.bz-tool-hint { font-size: .74rem; color: var(--th-text-3); line-height: 1.85; }

.bz-copy { display: flex; gap: 8px; align-items: stretch; }
.bz-copy-in {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--th-border); border-radius: var(--r-md);
  background: var(--th-surface-2); color: var(--th-text-1);
  padding: 0 12px; height: 40px;
  font-family: var(--font-num); font-size: .85rem;
}
.bz-copy-in:focus { outline: none; border-color: var(--th-brand); }
textarea.bz-copy-in { height: auto; padding: 9px 12px; line-height: 1.7; resize: vertical; }
.bz-copy .dash-btn { flex: 0 0 auto; }

/* ── بنر ── */
.bz-banner {
  text-align: center; padding: 14px;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: var(--r-md);
}
.bz-banner img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

/* ── پرامپت مهمان ── */
.bz-guest {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--th-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--th-warning) 35%, transparent);
  color: var(--th-text-1); font-size: .85rem; font-weight: 500; line-height: 1.8;
}
.bz-guest i { color: var(--th-warning); font-size: 1.15rem; flex: 0 0 auto; }

/* ── قوانین ── */
.bz-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bz-rules li { display: flex; gap: 10px; font-size: .82rem; line-height: 1.95; color: var(--th-text-2); }
.bz-rules li > i { flex: 0 0 auto; color: var(--th-brand); font-size: .42rem; margin-top: .72em; }
.bz-rules b { color: var(--th-text-1); font-weight: 700; }

@media (max-width: 640px) {
  .bz-steps { grid-template-columns: 1fr; }
  .bz-hero { padding: 20px; }
  .bz-hero-num { font-size: 1.7rem; }
  .bz-hero-act { align-items: stretch; width: 100%; }
  .bz-hero-act .dash-btn { justify-content: center; }
}


/* ════════════════════════════════════════════════════
   WHOIS — جست‌وجوی دامنه و کارت اطلاعات
   ----------------------------------------------------------------
   سه قالب از این کلاس‌ها استفاده می‌کنند:
     whois.html          کارتِ جست‌وجو + ظرف‌های نتیجه
     whois-results.html  فهرست «آزاد / ثبت‌شده» به ازای هر پسوند
     whois-record.html   کارت اطلاعات یک دامنه

   رنگ‌ها همه از توکن می‌آیند، پس دارک‌مود قاعده‌ی جداگانه‌ای لازم
   ندارد؛ فقط چند جا که ته‌رنگِ کم‌رنگِ وضعیت لازم بود با color-mix
   از همان توکن ساخته شده است.
   ════════════════════════════════════════════════════ */

/* ── کارت جست‌وجو ── */
.wh-search {
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 22px;
  margin-bottom: 18px;
}
.wh-search-head { margin-bottom: 16px; }
.wh-title {
  font-size: 1.25rem; font-weight: 700; color: var(--th-text-1);
  display: flex; align-items: center; gap: 9px; margin: 0 0 6px;
}
.wh-title i { color: var(--th-brand); font-size: 1rem; }
.wh-sub { font-size: .85rem; color: var(--th-text-2); line-height: 1.9; margin: 0; }

/* ردیف ورودی: نام دامنه | پسوندها | دکمه.
   نام دامنه و پسوند لاتین‌اند و کاربر آن‌ها را چپ‌به‌راست تایپ/می‌خواند
   («adelanweb.com»)؛ با ترتیبِ آردیِ صفحه (input راست‌ترین) این خلاف
   جهتِ خواندنِ خودِ محتوا بود. row-reverse فقط ترتیبِ این سه بلوک را
   می‌چرخاند — نه‌ی direction را، پس چیدمانِ داخلیِ خودِ دکمه (آیکن+متن)
   و Tom Select دست‌نخورده می‌ماند.
   روی موبایل هر سه تمام‌عرض زیر هم می‌آیند (انتهای فایل، ترتیب ستونی
   با column به همان شکلِ قبلی برمی‌گردد). */
.wh-field { display: flex; flex-direction: row-reverse; align-items: stretch; gap: 10px; }
.wh-input-wrap { flex: 1 1 240px; min-width: 0; }
.wh-ext-wrap   { flex: 0 1 260px; min-width: 0; }

/* قاعده‌ی سراسریِ «#maincontent input[type=text]» در همین فایل هست؛
   انتخابگر زیر عمداً هم‌وزنِ آن نوشته شده تا ارتفاع و رنگِ این فیلد
   برنده شود. */
#maincontent .wh-input,
.wh-input {
  display: block; width: 100%; height: 46px;
  padding: 0 14px;
  font-family: inherit; font-size: .95rem;
  color: var(--th-text-1); background: var(--th-surface-2);
  border: 1px solid var(--th-border); border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
#maincontent .wh-input:focus,
.wh-input:focus {
  background: var(--th-surface);
  border-color: var(--th-brand);
  box-shadow: 0 0 0 3px var(--th-brand-glow);
}
.wh-input::placeholder { color: var(--th-text-3); }
#maincontent .wh-input-sm,
.wh-input-sm { height: 38px; width: 130px; font-size: .85rem; }

/* Tom Select باید هم‌قدِ فیلدِ کنارش باشد */
.wh-ext-wrap .ts-wrapper { width: 100%; }
.wh-ext-wrap .ts-control {
  min-height: 46px;
  align-items: center;
  padding: 4px 8px;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  direction: ltr;
}
/* فیلدِ تایپِ داخل Tom Select عرضِ ذاتیِ ~۲۳۰px دارد (از صفتِ size) و
   با flex-basis: auto کنارِ اولین پسوندِ انتخاب‌شده جا نمی‌شود؛ نتیجه
   یک ردیفِ دوم و کادری بلندتر از فیلدِ کناری بود. */
.wh-ext-wrap .ts-control > input { flex: 1 1 60px; width: 60px; min-width: 60px; }
.wh-ext-wrap .ts-control > .item { margin: 2px 4px 2px 0; }
.wh-ext-wrap .ts-wrapper.focus .ts-control {
  border-color: var(--th-brand);
  box-shadow: 0 0 0 3px var(--th-brand-glow);
}

.wh-submit {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 24px;
  font-family: inherit; font-size: .92rem; font-weight: 700;
  /* متنِ تیره روی نارنجیِ برند — همان قاعده‌ی قرصِ فعالِ نوار فیلتر */
  color: var(--th-on-brand); background: var(--th-brand);
  border: none; border-radius: var(--r-md); cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.wh-submit:hover { background: var(--th-brand-dark); box-shadow: 0 4px 14px rgba(245,158,11,.32); }
.wh-submit:active { transform: scale(.98); }

.wh-captcha { margin-top: 14px; }
.wh-captcha > label { display: block; font-size: .78rem; color: var(--th-text-2); margin-bottom: 6px; }
.wh-captcha-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* قاعده‌ی سراسریِ «#maincontent .wh-input» عرض ۱۰۰٪ می‌دهد و چون
   انتخابگرش id دارد، کلاسِ تنها بازنده است؛ پس همان پیشوند تکرار
   می‌شود. وگرنه فیلدِ کپچا تمام‌عرض می‌شود و تصویر به سطر بعد می‌افتد. */
#maincontent .wh-captcha-row .wh-input,
.wh-captcha-row .wh-input { width: 180px; flex: 0 0 auto; }
.wh-captcha-row .captcha-img { border-radius: var(--r-sm); }

.wh-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.wh-hint { font-size: .78rem; color: var(--th-text-2); display: inline-flex; align-items: center; gap: 6px; }
.wh-hint-link { font-size: .78rem; }

/* توکن text-3 برای متنِ واقعی زیر ۳:۱ کنتراست می‌دهد؛ راهنماها و
   تاریخِ میلادی متن‌اند نه تزئین، پس text-2 می‌گیرند. */

/* ── نوار انتظار ── */
.wh-wait {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px; font-size: .85rem; color: var(--th-text-2);
}
.wh-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--th-border-2); border-top-color: var(--th-brand);
  animation: wh-spin .7s linear infinite;
}
@keyframes wh-spin { to { transform: rotate(360deg); } }

/* ── پیام‌ها ── */
.wh-msg {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-md);
  font-size: .85rem; line-height: 1.9; margin-bottom: 14px;
  border: 1px solid var(--th-border);
  background: var(--th-surface-2); color: var(--th-text-1);
}
.wh-msg i { margin-top: 3px; }
.wh-msg-err  { border-color: color-mix(in srgb, var(--th-danger) 35%, transparent); }
.wh-msg-err i { color: var(--th-danger); }
.wh-msg-warn { border-color: color-mix(in srgb, var(--th-warning) 40%, transparent); }
.wh-msg-warn i { color: var(--th-warning); }

/* ── فهرست نتیجه ── */
.wh-results { margin-bottom: 18px; }
.wh-results-title { font-size: .95rem; font-weight: 600; color: var(--th-text-2); margin: 0 0 10px; }
.wh-results-title span { color: var(--th-text-1); font-weight: 700; }

.wh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wh-row {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) auto;
  align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.wh-row:hover { box-shadow: var(--sh-sm); }
.wh-row-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wh-row-domain {
  font-size: 1rem; font-weight: 500; color: var(--th-text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wh-row-domain b { font-weight: 700; }
/* نقطه‌ی رنگیِ وضعیت — ارزان‌ترین راهِ خواندنِ ردیف با یک نگاه */
.wh-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--th-text-3); }
.wh-row-available  .wh-dot { background: var(--th-success); }
.wh-row-registered .wh-dot { background: var(--th-danger); }
.wh-row-error      .wh-dot { background: var(--th-text-3); }

.wh-row-state { font-size: .85rem; display: inline-flex; align-items: center; gap: 7px; color: var(--th-text-2); }
.wh-row-available  .wh-row-state { color: var(--th-success); font-weight: 600; }
.wh-row-registered .wh-row-state { color: var(--th-danger); }
.wh-row-price { font-size: .85rem; color: var(--th-text-2); }
.wh-row-price b { color: var(--th-text-1); font-size: .95rem; }
.wh-row-act { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ── دکمه‌های این بخش ── */
.wh-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-md);
  font-family: inherit; font-size: .82rem; font-weight: 500;
  white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.wh-btn-primary { background: var(--th-brand); color: var(--th-on-brand); font-weight: 700; }
.wh-btn-primary:hover { background: var(--th-brand-dark); color: var(--th-on-brand); }
.wh-btn-ghost { background: transparent; color: var(--th-text-1); border-color: var(--th-border-2); }
.wh-btn-ghost:hover { background: var(--th-surface-2); }
.wh-btn-plain { background: transparent; color: var(--th-text-2); }
.wh-btn-plain:hover { color: var(--th-brand); }
/* وصله‌های html.dark a.wh-btn-* حذف شدند: استثنای [class*="btn"] در
   darkmode.css همین کار را برای همه‌ی دکمه‌ها یک‌جا انجام می‌دهد. */

/* ── کارت اطلاعات دامنه ── */
.wh-card {
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 20px;
}
.wh-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--th-border); margin-bottom: 16px;
}
.wh-card-id { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.wh-card-domain { font-size: 1.3rem; font-weight: 700; color: var(--th-text-1); margin: 0; word-break: break-all; }
.wh-card-tools { display: flex; align-items: center; gap: 8px; }

.wh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: .75rem; font-weight: 600;
  border: 1px solid transparent;
}
.wh-badge-registered {
  color: var(--th-danger);
  background: color-mix(in srgb, var(--th-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--th-danger) 30%, transparent);
}
.wh-badge-available {
  color: var(--th-success);
  background: color-mix(in srgb, var(--th-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--th-success) 30%, transparent);
}
.wh-badge-error { color: var(--th-text-2); background: var(--th-surface-2); border-color: var(--th-border); }

/* واقعیت‌های کلید/مقدار */
.wh-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.wh-fact {
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
}
.wh-fact-key { font-size: .74rem; color: var(--th-text-2); display: inline-flex; align-items: center; gap: 6px; }
.wh-fact-key i { color: var(--th-text-3); width: 14px; text-align: center; }
.wh-fact-val { font-size: .9rem; font-weight: 600; color: var(--th-text-1); word-break: break-word; }
.wh-flag { height: 12px; vertical-align: baseline; border-radius: 2px; }

.wh-block { margin-bottom: 18px; }
.wh-block-title {
  font-size: .85rem; font-weight: 600; color: var(--th-text-2);
  display: flex; align-items: center; gap: 7px; margin: 0 0 9px;
}
.wh-block-title i { color: var(--th-text-3); }

/* تاریخ‌ها: شمسی پررنگ، میلادی و «چند وقت پیش» کم‌رنگ‌تر */
.wh-dates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wh-date {
  display: grid; grid-template-columns: 110px auto auto 1fr;
  align-items: baseline; gap: 10px;
  padding: 9px 13px; border-radius: var(--r-md);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  font-size: .85rem;
}
.wh-date-label { color: var(--th-text-2); font-size: .8rem; }
.wh-date-main { font-weight: 600; color: var(--th-text-1); }
.wh-date-alt  { color: var(--th-text-2); font-size: .78rem; }
.wh-date-rel  { color: var(--th-text-2); font-size: .78rem; text-align: left; }
.wh-date-expire .wh-date-main { color: var(--th-warning); }

.wh-ns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.wh-ns li {
  padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  font-family: var(--font-num); font-size: .82rem; color: var(--th-text-1);
}

.wh-status { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.wh-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  font-size: .78rem; border: 1px solid var(--th-border);
  background: var(--th-surface-2); color: var(--th-text-1);
}
.wh-chip em { font-style: normal; font-size: .72rem; color: var(--th-text-2); }
.wh-chip-ok   { border-color: color-mix(in srgb, var(--th-success) 35%, transparent); }
.wh-chip-warn { border-color: color-mix(in srgb, var(--th-warning) 40%, transparent); }
.wh-chip-bad  { border-color: color-mix(in srgb, var(--th-danger) 35%, transparent); }
.wh-chip-ok   em { color: var(--th-success); }
.wh-chip-bad  em { color: var(--th-danger); }

.wh-note { font-size: .8rem; color: var(--th-text-2); line-height: 1.9; margin: 10px 0 0; }
.wh-note i { margin-inline-end: 5px; color: var(--th-text-3); }
.wh-note-warn i { color: var(--th-warning); }
.wh-note-bad  i { color: var(--th-danger); }

/* خروجی خام: بسته پیش‌فرض، فقط برای کسی که واقعاً می‌خواهد ببیند */
.wh-raw { margin-top: 14px; border-top: 1px solid var(--th-border); padding-top: 12px; }
.wh-raw summary { font-size: .8rem; color: var(--th-text-2); cursor: pointer; }
.wh-raw pre {
  margin: 10px 0 0; padding: 12px;
  max-height: 340px; overflow: auto;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  font-family: var(--font-num); font-size: .78rem; line-height: 1.8;
  color: var(--th-text-2); white-space: pre-wrap; word-break: break-word;
}

.wh-free { padding: 6px 0 2px; }
.wh-free-lead { font-size: 1rem; color: var(--th-text-1); margin: 0 0 6px; }
.wh-free-price { font-size: .9rem; color: var(--th-text-2); margin: 0; }
.wh-free-price b { color: var(--th-text-1); font-size: 1.05rem; }

.wh-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--th-border);
}
.wh-src { font-size: .76rem; color: var(--th-text-2); }
.wh-src b { color: var(--th-text-2); font-weight: 600; }
.wh-refresh { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0; }

/* کپچای فرمِ به‌روزرسانی همان قطعه‌ی مشترک است، فقط جمع‌وجورتر.
   تصویر کپچا ۲۰۰×۶۴ رندر می‌شود؛ قبلاً به ارتفاع ۳۸ فشرده می‌شد و
   ارقامش خوانا نبود. حالا نسبت تصویر حفظ می‌شود. */
.wh-captcha-inline { margin-top: 0; }
.wh-captcha-inline > label { font-size: .74rem; }
.wh-captcha-inline .wh-captcha-row { gap: 8px; }
#maincontent .wh-captcha-inline .wh-input-sm,
.wh-captcha-inline .wh-input-sm { width: 110px; flex: 0 0 auto; }
.wh-refresh .captcha-img { height: 46px; width: auto; border-radius: var(--r-sm); cursor: pointer; }
/* در حالت اثبات‌کار، فیلدِ متنی hidden می‌شود و فقط ویجت می‌ماند */
.wh-refresh .captcha-pow { align-self: center; }

/* ── نکته‌های پایین صفحه ── */
.wh-notes {
  margin-top: 20px; padding: 16px 18px;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
}
.wh-notes-title { font-size: .85rem; font-weight: 600; color: var(--th-text-1); margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.wh-notes-title i { color: var(--th-brand); }
.wh-notes ul { margin: 0; padding: 0; list-style: none; }
.wh-notes li {
  position: relative; padding-inline-start: 16px;
  font-size: .81rem; color: var(--th-text-2); line-height: 2;
}
.wh-notes li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--th-border-2);
}

/* ── موبایل ── */
@media (max-width: 767px){
  .wh-search { padding: 16px; }
  /* در ستون، flex-basis یعنی «ارتفاع». مقدارهای 240px/260px که برای
     چیدمانِ افقی نوشته شده‌اند اینجا به دو کادرِ بلندِ خالی تبدیل
     می‌شدند و بین فیلد و دکمه یک فاصله‌ی چندصد پیکسلی می‌افتاد. */
  .wh-field { flex-direction: column; }
  .wh-input-wrap,
  .wh-ext-wrap { flex: 0 0 auto; }
  .wh-submit { width: 100%; }
  .wh-row { grid-template-columns: 1fr; gap: 8px; }
  .wh-row-act { justify-content: flex-start; }
  .wh-date { grid-template-columns: 1fr auto; row-gap: 4px; }
  .wh-date-alt, .wh-date-rel { grid-column: span 2; text-align: start; }
  .wh-card-domain { font-size: 1.05rem; }
}


/* ════════════════════════════════════════════════════
   مقایسهٔ پلن‌ها — pt-*   (group-products-table.html)
   یک داده، دو نمایش:
   • ≥۹۹۲px → .pt-table-wrap : جدول مقایسه با ستون برچسبِ چسبان
   • ≤۹۹۱px → .pt-cards      : یک کارت برای هر پلن
   جدولِ ۹ستونی روی موبایل ~۸۹۰px پهنا داشت و کاربر را مجبور به
   اسکرول افقی می‌کرد؛ سوییچ فقط CSS است و به JS وابسته نیست.
════════════════════════════════════════════════════ */

.pt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.pt-table {
  /* رنگِ hover باید مات باشد، وگرنه محتوای در حال اسکرول از زیر
     سلولِ sticky دیده می‌شود. پس tint نیمه‌شفاف اینجا جواب نمی‌دهد. */
  --pt-hover: #FDF7EC;
  width: 100%;
  margin: 0;
  border-collapse: separate;   /* برای sticky لازم است */
  border-spacing: 0;
  font-size: .84rem;
  color: var(--th-text-1);
}
html.dark .pt-table { --pt-hover: #2A2E39; }

.pt-table th,
.pt-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--th-border);
  white-space: nowrap;
  background: var(--th-surface);
}
.pt-table thead th {
  background: var(--th-surface-2);
  font-weight: 700;
  font-size: .88rem;
  border-bottom: 2px solid var(--th-border-2);
}
.pt-table thead th a { color: var(--th-text-1); text-decoration: none; }
.pt-table thead th a:hover { color: var(--th-brand-dark); }

/* ستون برچسب: تنها ستونی که با اسکرول افقی نباید برود */
.pt-table .pt-rowhead {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--th-surface-2);
  border-inline-end: 1px solid var(--th-border-2);
  text-align: start;
  font-weight: 600;
  white-space: normal;
  min-width: 170px;
}
.pt-table thead .pt-rowhead { z-index: 2; }

.pt-table tbody tr:hover > * { background: var(--pt-hover); }

/* بلوک قیمت‌ها از مشخصات جدا می‌شود (اولین ردیفِ قیمت خط جداکننده می‌گیرد) */
.pt-table tr:not(.pt-row-price) + tr.pt-row-price > * { border-top: 2px solid var(--th-border-2); }
.pt-row-price td { font-family: var(--font-num); font-weight: 700; }
.pt-row-order > * { border-bottom: none; }
.pt-row-order td { padding: 14px 12px; }

/* دکمهٔ سفارش — روی زمینهٔ برند متن تیره (--th-on-brand) */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 18px;
  border-radius: var(--r-sm);
  background: var(--th-brand);
  color: var(--th-on-brand);
  font-size: .82rem; font-weight: 700;
  text-decoration: none;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.pt-btn:hover, .pt-btn:focus-visible {
  background: var(--th-brand-dark);
  color: var(--th-on-brand);
  box-shadow: 0 4px 12px var(--th-brand-glow);
}

/* ── کارت‌ها (موبایل) ── */
.pt-cards { display: none; }

.pt-card {
  display: flex; flex-direction: column;
  padding: 16px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.pt-card-title { margin: 0 0 10px; font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
.pt-card-title a { color: var(--th-text-1); text-decoration: none; }

.pt-card-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: 0 0 12px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--th-border-2);
}
.pt-price-from { font-size: .75rem; color: var(--th-text-2); }
.pt-price-num  { font-family: var(--font-num); font-size: 1.35rem; font-weight: 800; color: var(--th-text-1); }
.pt-price-unit { font-size: .78rem; color: var(--th-text-2); }

.pt-kv { list-style: none; margin: 0; padding: 0; }
.pt-kv li {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--th-border);
  font-size: .82rem;
}
.pt-kv li:last-child { border-bottom: none; }
.pt-k { color: var(--th-text-2); line-height: 1.6; }
.pt-v { flex: 0 0 auto; font-family: var(--font-num); font-weight: 600; color: var(--th-text-1); text-align: end; }
.pt-kv-price .pt-v { font-weight: 700; }
/* دورهٔ فروخته‌نشده: در جدول ✗ است، ولی در کارت متن گویاتر است */
.pt-na { font-family: var(--font-fa); font-weight: 500; color: var(--th-text-3); }

/* ✓/✗ و مقدارِ صفر — قبلاً style="color:red|green" اینلاین بودند و در
   حالت شب (زمینهٔ #1F222C) قرمزِ خالص کنتراست کافی نداشت. */
.pt-yes { color: var(--th-success); }
.pt-no  { color: var(--th-danger); }

.pt-more { margin-bottom: 14px; }
.pt-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding: 11px 13px;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-md);
  font-size: .8rem; font-weight: 600; color: var(--th-text-2);
  cursor: pointer;
  list-style: none;   /* مثلث پیش‌فرض؛ ::-webkit-details-marker برای سافاری */
}
.pt-more > summary::-webkit-details-marker { display: none; }
.pt-more > summary::after {
  content: '\f078';           /* chevron-down */
  font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .7rem;
  transition: transform var(--t-fast);
}
.pt-more[open] > summary::after { transform: rotate(180deg); }
.pt-more[open] > summary { color: var(--th-text-1); }
.pt-more > .pt-kv { margin-top: 8px; }
.pt-kv-price { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--th-border); }

.pt-card-cta {
  display: flex; align-items: center; justify-content: center;
  margin-top: auto;            /* در گرید دوستونی، دکمه‌ها هم‌تراز کف کارت */
  min-height: 46px; padding: 12px 16px;
  background: var(--th-brand);
  color: var(--th-on-brand);
  border-radius: var(--r-md);
  font-size: .9rem; font-weight: 700;
  text-decoration: none;
  transition: background var(--t-fast);
}
.pt-card-cta:hover, .pt-card-cta:active, .pt-card-cta:focus-visible {
  background: var(--th-brand-dark);
  color: var(--th-on-brand);
}

/* وصله‌های html.dark a.pt-btn / a.pt-card-cta حذف شدند: قاعده‌ی سراسریِ
   darkmode.css دیگر کلاس‌های حاوی btn/cta را رنگ نمی‌کند. */

@media (max-width: 991px) {
  .pt-table-wrap { display: none; }
  .pt-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
}
@media (min-width: 600px) and (max-width: 991px) {
  .pt-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════
   مدیریت سفارش‌ها — ordadm-*
   قالب: html/admin/orderadmin.html
   ----------------------------------------------------------------
   چهارچوب صفحه (قرص‌ها، ترتیب، پنل جستجو، دکمه‌ها، حالت خالی،
   صفحه‌بندی) همان svcl-* لیست‌های پنل کاربر است، و فرادادهٔ کارت هم
   عمداً همان ordl-* لیستِ «پیگیری خریدها»ست: این دو صفحه یک داده را
   نشان می‌دهند و نباید دو زبانِ بصری داشته باشند. اینجا فقط چیزی
   می‌آید که مخصوصِ نمای مدیر است.

   نسخهٔ قبلی یک <table> هفت‌ستونه بود با سه ایراد:
   • در موبایل سه ستون با d-none حذف می‌شد — مبلغ، محصول و تاریخِ
     سفارش — یعنی دقیقاً چیزهایی که اپراتور برای تصمیم‌گیری لازم دارد.
   • رنگِ وضعیت از دیتابیس روی زمینهٔ خانه می‌نشست. آن رنگ‌ها روشن‌اند
     (#fff هم بینشان هست) و .order-status-cell ناچار بود رنگِ متن را
     در هر دو تم روی #1F2937 قفل کند تا ناخوانا نشود؛ یعنی تم شب برای
     یک ستونِ کامل تعطیل بود.
   • وضعیتِ پرداخت سه GIF بود (paymentok/paymenterror/inputpayment).

   کارتِ مدیر سه ناحیه دارد — سفارش و مشتری / مبلغ و پرداخت / کنترلِ
   وضعیت — به‌علاوهٔ یک ردیفِ تمام‌عرضِ ابزار. تفاوت اصلی‌اش با کارتِ
   کاربر همین ردیفِ ابزار است: اینجا کارت فقط گزارش نیست، خودش محلِ
   انجامِ کار است.
════════════════════════════════════════════════════ */

.ordadm-card {
  --svc-c: var(--th-text-3);
  position: relative; overflow: hidden;
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) auto minmax(230px, 270px);
  gap: 12px 20px;
  padding: 14px 16px; padding-inline-start: 20px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ordadm-card:hover { border-color: color-mix(in srgb, var(--th-brand) 45%, var(--th-border)); box-shadow: var(--sh-sm); }
.ordadm-card::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; inset-inline-start: 0; width: 4px;
  background: var(--svc-c);
}
/* نوارِ کناری = «نوبتِ کیست»، از دیدِ اپراتور. */
.ordadm-card.is-unpaid,
.ordadm-card.is-error { --svc-c: var(--th-danger); }
.ordadm-card.is-todo  { --svc-c: var(--th-brand); }
.ordadm-card.is-wait  { --svc-c: var(--th-info); }

/* ── ستون ۱: سفارش و مشتری ── */
.ordadm-main { min-width: 0; }
.ordadm-top { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.ordadm-ico {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--svc-c) 14%, transparent);
  color: var(--svc-c); font-size: .82rem;
}
.ordadm-title {
  font-size: 1rem; font-weight: 700; color: var(--th-text-1);
  overflow-wrap: anywhere; min-width: 0;
}
.ordadm-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin-top: 7px; font-size: .78rem; color: var(--th-text-2);
}
.ordadm-meta i { font-size: .9em; color: var(--th-text-3); }
/* نامِ مشتری پرکاربردترین لینکِ این صفحه است (رفتن به پنلِ او)، پس
   برخلاف بقیهٔ فراداده کمی پررنگ‌تر می‌ماند. */
.ordadm-user { font-weight: 600; color: var(--th-text-1); }
a.ordadm-user:hover { color: var(--th-brand); text-decoration: none; }
html.dark a.ordadm-user { color: var(--th-text-1); }
html.dark a.ordadm-user:hover { color: var(--th-brand); }
.ordadm-num { font-family: var(--font-num); color: var(--th-text-2); }
a.ordadm-num:hover { color: var(--th-brand); text-decoration: none; }
html.dark a.ordadm-num { color: var(--th-text-2); }

/* ── ستون ۲: مبلغ و پرداخت ── */
.ordadm-money { display: flex; flex-direction: column; gap: 3px; text-align: start; min-width: 0; }
/* «نوبتِ کیست» زیرِ مبلغ می‌نشیند چون تصمیمِ اپراتور از ترکیبِ همین دو
   درمی‌آید. رنگ‌ها همان قاعدهٔ .ordl-next است: توکنِ وضعیت روی زمینهٔ
   روشن کنتراست کافی ندارد و باید یک پله تیره‌تر شود. */
/* فقط وقتی دریافتی با مبلغِ سفارش نمی‌خواند چاپ می‌شود، پس عمداً
   کم‌رمق نیست — همان چیزی است که باید چشم را بگیرد. */
.ordadm-paid {
  font-family: var(--font-num); font-size: .72rem; font-weight: 600;
  color: #B45309;
}
html.dark .ordadm-paid { color: var(--th-warning); }
.ordadm-next {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: .78rem; font-weight: 700; color: var(--th-text-2);
}
.ordadm-card.is-unpaid .ordadm-next,
.ordadm-card.is-error  .ordadm-next { color: #B91C1C; }
.ordadm-card.is-todo   .ordadm-next { color: #92400E; }
.ordadm-card.is-wait   .ordadm-next { color: #1D4ED8; }
html.dark .ordadm-card .ordadm-next { color: color-mix(in srgb, var(--svc-c) 80%, #FFFFFF); }

/* ── ستون ۳: کنترلِ وضعیت ──
   این ستون هدفِ جایگزینیِ ajax است (change_status ⇐ #status_{oid})، پس
   قاب و فاصله باید روی خودِ .ordadm-st باشد نه روی ظرفِ بیرونی، وگرنه
   بعد از هر تغییرِ وضعیت ظاهرش عوض می‌شد. */
.ordadm-status { min-width: 0; }
.ordadm-st {
  --ord-sc: var(--th-text-3);
  padding: 10px 12px;
  border: 1px solid var(--th-border);
  border-inline-start: 3px solid var(--ord-sc);
  border-radius: var(--r-md);
  background: var(--th-surface-2);
}
/* خودِ <form> ظرفِ چیدمان است، نه .ordadm-st — با display:contents روی
   فرم، بعضی مرورگرها آن را از درختِ دسترس‌پذیری برمی‌دارند. */
.ordadm-st > form {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  margin: 0;
}
/* عنوانِ فعلیِ وضعیت متنِ آزادِ ادمین است و گاهی یک جملهٔ کامل. */
.ordadm-st-now {
  font-size: .78rem; font-weight: 700; color: var(--th-text-1);
  line-height: 1.7; overflow-wrap: anywhere;
}
.ordadm-st-sel {
  width: 100%; max-width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--th-border); border-radius: var(--r-sm);
  background: var(--th-surface); color: var(--th-text-1);
  font-family: inherit; font-size: .78rem;
}
/* تیک‌ها زیرِ منو و ریز می‌مانند: تصمیمِ اصلی انتخابِ وضعیت است، این دو
   تنظیمِ همان تصمیم‌اند. */
.ordadm-st-chk {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: .73rem; color: var(--th-text-2); cursor: pointer;
}
.ordadm-st-chk input { margin: 0; }
.ordadm-st-go { width: 100%; justify-content: center; }
.ordadm-st-wait { font-size: .73rem; color: var(--th-text-2); text-align: center; }
.ordadm-st-wait img { vertical-align: middle; }

/* ── ردیفِ ابزار ── */
.ordadm-tools {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding-top: 12px; margin-top: 2px;
  border-top: 1px dashed var(--th-border-2);
}
/* ویرایشِ نامِ دامنه — کارِ پرتکرارِ همین صفحه (غلط املاییِ سفارشِ
   مشتری). قبلاً یک input تمام‌عرض داخلِ ستونِ چهارم بود. */
.ordadm-dmn {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0;
  flex: 1 1 320px; min-width: 0;
}
.ordadm-dmn-lbl { font-size: .75rem; color: var(--th-text-2); }
.ordadm-dmn-in {
  flex: 1 1 180px; min-width: 0; width: auto;
  padding: 7px 10px;
  border: 1px solid var(--th-border); border-radius: var(--r-sm);
  background: var(--th-surface); color: var(--th-text-1);
  font-family: var(--font-num); font-size: .82rem;
}
.ordadm-dmn-go { flex: 0 0 auto; cursor: pointer; font-family: inherit; }
.ordadm-dmn-res { font-size: .75rem; color: var(--th-success); }

.ordadm-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* OrderActionForm هر دکمه را داخل یک <form> می‌گذارد تا با GET
   قابل‌شلیک نباشد؛ فرم نباید ارتفاع یا ردیف اضافه کند. */
.ordadm-act-frm { display: inline-flex; margin: 0; }
.ordadm-acts button.svcl-act,
.ordadm-act-frm button.svcl-act { font-family: inherit; cursor: pointer; }

/* تیکِ «تطابق دقیق» زیرِ فیلدِ جستجو، نه کنارش */
.ordadm-inline-chk {
  display: flex; align-items: center; gap: 6px; margin: 6px 0 0;
  font-size: .74rem; color: var(--th-text-2); cursor: pointer;
}
.ordadm-inline-chk input { margin: 0; }

/* ── ۱۱۰۰px: ستونِ وضعیت تمام‌عرض به ردیف دوم می‌رود ──
   اگر در ستونِ باریک رها می‌شد، منوی وضعیت و دو تیک به یک ستونِ
   چندخطیِ فشرده تبدیل می‌شدند. */
@media (max-width: 1100px) {
  .ordadm-card { grid-template-columns: minmax(0, 1fr) auto; }
  .ordadm-money { text-align: end; }
  .ordadm-status { grid-column: 1 / -1; }
  .ordadm-st > form { flex-flow: row wrap; align-items: center; gap: 8px 12px; }
  .ordadm-st-now { flex: 1 1 100%; }
  .ordadm-st-sel { flex: 1 1 220px; width: auto; }
  .ordadm-st-go { width: auto; flex: 0 0 auto; }
}

@media (max-width: 640px) {
  .ordadm-card { grid-template-columns: 1fr; gap: 12px; padding: 14px; padding-inline-start: 16px; }
  /* مبلغ در موبایل یک خطِ افقی می‌شود؛ flex-basis روی آیتمِ ستونی
     فاصله‌ی جعلی می‌سازد پس عمداً به ردیف تغییر جهت می‌دهد. */
  .ordadm-money { flex-flow: row wrap; align-items: baseline; gap: 4px 8px; text-align: start; }
  .ordadm-money > .ordl-price-lbl { order: -1; }
  .ordadm-money > .ordl-price-off,
  .ordadm-money > .ordadm-paid,
  .ordadm-money > .ordl-pay,
  .ordadm-money > .ordadm-next { flex-basis: 100%; }
  .ordadm-st > form { flex-direction: column; align-items: stretch; }
  .ordadm-st-sel,
  .ordadm-st-go { width: 100%; }
  /* در موبایل هر عملیات یک دکمهٔ تمام‌عرض است: هدفِ لمس بزرگ‌تر. */
  .ordadm-dmn { flex: 1 1 100%; }
  .ordadm-dmn-in { flex: 1 1 100%; }
  .ordadm-dmn-go { width: 100%; justify-content: center; }
  .ordadm-acts { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; }
  .ordadm-act-frm { display: block; }
  .ordadm-acts .svcl-act,
  .ordadm-acts button.svcl-act { width: 100%; justify-content: center; }
}


/* ════════════════════════════════════════════════════
   گامِ دومِ ثبت دامنه‌ی IR — irreg-*
   سازنده: source/automation/register-domain.php (شاخه‌ی IR domain)
   ----------------------------------------------------------------
   این قطعه Smarty ندارد و مستقیم از PHP echo می‌شود، پس کلاس‌هایش
   باید خودبسنده باشند.

   نسخه‌ی قبلی چیدمانش را با <br> می‌ساخت: چهار کادرِ size="25" زیر هم،
   بدون <label> (فقط متنِ «DNS#1 :» کنارشان)، بدون id، و یک
   <input class="button"> که هیچ تعریفی در تم نداشت و به دکمه‌ی خامِ
   مرورگر تبدیل می‌شد. سه ایرادِ دیگر هم داشت:
   • راهنمای «ساخت شناسه» در $create_handle_link2 ساخته می‌شد ولی
     $create_handle_link چاپ می‌شد — یعنی هیچ‌وقت دیده نمی‌شد.
   • DNS#3 و DNS#4 اختیاری‌اند ولی مثل دو تای اول نشان داده می‌شدند.
   • دامپِ دیباگِ ProductDNS با <pre> وسطِ فرمِ کاربر می‌نشست.

   حالا دو گامِ شماره‌دار در یک کارت: شناسه، بعد DNS. عرض عمداً محدود
   است — فرمِ شش‌فیلدی روی مانیتورِ عریض نباید تا لبه کشیده شود.
════════════════════════════════════════════════════ */
.irreg {
  max-width: 720px;
  margin: 4px 0;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ── سربرگ ── */
.irreg-hd {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--th-brand) 7%, var(--th-surface));
  border-bottom: 1px solid var(--th-border);
}
.irreg-hd-ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--th-brand) 16%, transparent);
  color: #92400E; font-size: 1rem;
}
html.dark .irreg-hd-ico { color: var(--th-brand); }
.irreg-hd-tx { min-width: 0; }
.irreg-hd-t { font-size: 1rem; font-weight: 700; color: var(--th-text-1); }
.irreg-hd-t b { font-family: var(--font-num); overflow-wrap: anywhere; }
.irreg-hd-s { margin-top: 5px; font-size: .8rem; line-height: 1.9; color: var(--th-text-2); }

/* ── بخش‌های گام‌دار ── */
.irreg-form { margin: 0; }
.irreg-sec { padding: 16px 18px; border-bottom: 1px solid var(--th-border); }
.irreg-sec-hd {
  display: flex; align-items: center; gap: 9px; margin-bottom: 13px;
  font-size: .88rem; font-weight: 700; color: var(--th-text-1);
}
.irreg-step {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--th-brand);
  /* متنِ تیره روی زمینه‌ی برند — قاعده‌ی همیشگیِ این تم */
  color: var(--th-on-brand);
  font-family: var(--font-num); font-size: .74rem; font-weight: 800;
}

/* ── فیلدها ── */
.irreg-field { min-width: 0; }
.irreg-field + .irreg-field { margin-top: 12px; }
.irreg-grid .irreg-field + .irreg-field { margin-top: 0; }
.irreg-field > label {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-size: .79rem; color: var(--th-text-2);
}
.irreg-in {
  display: block; width: 100%; max-width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--th-border); border-radius: var(--r-sm);
  background: var(--th-surface); color: var(--th-text-1);
  font-family: var(--font-num); font-size: .88rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.irreg-in:focus {
  outline: none;
  border-color: var(--th-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-brand) 22%, transparent);
}
/* :invalid تنها بعد از دست‌خوردنِ فیلد قرمز می‌شود — وگرنه فرم از همان
   لحظه‌ی باز شدن قرمزپوش بود، در حالی که مقادیرش از پیش پر است. */
.irreg-in:user-invalid { border-color: var(--th-danger); }

.irreg-req, .irreg-opt {
  padding: 1px 7px; border-radius: 999px;
  font-size: .66rem; font-weight: 600; line-height: 1.8;
}
.irreg-req {
  background: color-mix(in srgb, var(--th-danger) 12%, transparent);
  color: #B91C1C;
}
html.dark .irreg-req { color: var(--th-danger); }
.irreg-opt { background: var(--th-surface-2); color: var(--th-text-2); }

.irreg-hint { margin-top: 6px; font-size: .75rem; line-height: 1.9; color: var(--th-text-2); }
.irreg-hint code {
  padding: 1px 5px; border-radius: var(--r-sm);
  background: var(--th-surface-2);
  font-family: var(--font-num); font-size: .95em; color: var(--th-text-1);
}
.irreg-hint a { color: var(--th-text-2); text-decoration: underline; text-underline-offset: 2px; }
.irreg-hint a:hover { color: var(--th-brand); }
html.dark .irreg-hint a { color: var(--th-text-2); }

.irreg-note {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--th-info) 10%, transparent);
  font-size: .76rem; line-height: 1.9; color: var(--th-text-2);
}
.irreg-note i { color: var(--th-info); margin-top: 3px; }

/* چهار فیلدِ DNS: دوتا در ردیف روی دسکتاپ، یکی در موبایل */
.irreg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }

/* ── راهنمای ساختِ شناسه ──
   بسته می‌ماند: کسی که شناسه دارد (اکثریت) نباید چهار لینکِ اضافه ببیند. */
.irreg-kinds { margin-top: 14px; }
.irreg-kinds-sum {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none;
  font-size: .78rem; font-weight: 600; color: var(--th-text-2);
}
.irreg-kinds-sum::-webkit-details-marker { display: none; }
.irreg-kinds-sum::before {
  content: '+'; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--th-surface-2); color: var(--th-text-2);
  font-size: .8rem; line-height: 1;
}
.irreg-kinds[open] > .irreg-kinds-sum::before { content: '−'; }
.irreg-kinds[open] > .irreg-kinds-sum { color: var(--th-text-1); }
.irreg-kinds-bd { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.irreg-kind {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  font-size: .76rem; color: var(--th-text-2);
}
.irreg-kind i { font-size: .9em; color: var(--th-text-3); }
a.irreg-kind:hover { border-color: var(--th-brand); color: var(--th-text-1); text-decoration: none; }
html.dark a.irreg-kind { color: var(--th-text-2); }
html.dark a.irreg-kind:hover { color: var(--th-text-1); }

/* ── تیکِ اختیاری داخلِ یک بخش ──
   فعلا «استفاده از ایمیل ما» در فرمِ انتقال. قبلا یک <tr> خام بود که خودِ
   ماژول می‌ساخت و فقط داخلِ چیدمانِ جدولی می‌نشست. */
.irreg-check {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 12px 0 0; padding: 10px 12px;
  border: 1px dashed var(--th-border-2); border-radius: var(--r-sm);
  background: var(--th-surface-2);
  font-size: .78rem; line-height: 1.9; color: var(--th-text-2); cursor: pointer;
}
.irreg-check input { margin: 4px 0 0; flex: 0 0 auto; }
.irreg-check-note {
  display: block; margin-top: 2px;
  font-size: .71rem; font-style: normal; color: var(--th-text-2);
}

/* ── تنظیماتِ مخصوصِ پسوند (US / DE / FR / IT / CA / ASIA) ──
   محتوایش HTMLِ قدیمیِ خودِ ماژول‌هاست: <b>عنوان</b> و چند select/input
   خام که با <br> از هم جدا شده‌اند. بازنویسیِ آن ۷ قطعه‌ی جدا از حوصله‌ی
   این تغییر بیرون بود، پس اینجا فقط قابِ خوانا و کنترل‌های هم‌شکل با
   بقیه‌ی فرم می‌گیرد. */
.irreg-extra { font-size: .8rem; line-height: 2.2; color: var(--th-text-2); }
.irreg-extra b { color: var(--th-text-1); }
.irreg-extra select,
.irreg-extra input[type="text"] {
  margin: 3px 6px;
  padding: 7px 10px; max-width: 100%;
  border: 1px solid var(--th-border); border-radius: var(--r-sm);
  background: var(--th-surface); color: var(--th-text-1);
  font-family: inherit; font-size: .82rem;
}
.irreg-extra input[type="text"] { font-family: var(--font-num); }
.irreg-extra select:focus,
.irreg-extra input[type="text"]:focus {
  outline: none; border-color: var(--th-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-brand) 22%, transparent);
}

/* ── نوارِ اقدام ── */
.irreg-act {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 16px 18px;
  background: var(--th-surface-2);
}
.irreg-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border: 0; border-radius: var(--r-md);
  background: var(--th-brand); color: var(--th-on-brand);
  font-family: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast);
}
.irreg-go:hover { background: var(--th-brand-dark); color: var(--th-on-brand); }
/* هشدار عمداً کنارِ دکمه است نه بالای فرم: جایی که واقعاً خوانده می‌شود
   لحظه‌ی پیش از کلیک است. */
.irreg-warn {
  display: flex; align-items: flex-start; gap: 7px;
  flex: 1 1 260px; min-width: 0;
  font-size: .74rem; line-height: 1.9; color: var(--th-text-2);
}
.irreg-warn i { color: var(--th-warning); margin-top: 3px; }

@media (max-width: 560px) {
  .irreg-hd, .irreg-sec, .irreg-act { padding: 14px; }
  .irreg-grid { grid-template-columns: 1fr; }
  .irreg-go { width: 100%; }
}

/* ════════════════════════════════════════════════════
   سبد خرید — crt-*
   قالب: html/panel/cart.html
   ----------------------------------------------------------------
   چیدمان دو ستونی: ردیف‌های سبد + ستونِ چسبانِ خلاصه/پرداخت. زیر
   ۱۰۲۴px ستونی می‌شود و دکمه‌ی خرید به یک نوارِ ثابتِ پایین منتقل
   می‌شود تا در سبدهای بلند از دید خارج نشود.

   سلسله‌مراتبِ دکمه‌ها عمدی است: «تکمیل خرید» تنها دکمه‌ی پرِ برند
   در صفحه است، «خالی کردن سبد» یک لینکِ خاکستری، و «حذف ردیف» یک
   آیکن. قبلا هر سه <input class="button"> و هم‌وزن بودند.
   ════════════════════════════════════════════════════ */
.crt-page { display: flex; flex-direction: column; gap: 14px; }
.crt-page > * { min-width: 0; }

/* ── یادداشت‌های بالای صفحه (مهمان / سفارش برای کاربر دیگر) ── */
.crt-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--th-border);
  background: var(--th-surface);
  font-size: .84rem; line-height: 1.8; color: var(--th-text-1);
}
.crt-note > i { flex: 0 0 auto; margin-top: 4px; font-size: 1rem; }
.crt-note.is-info {
  border-color: color-mix(in srgb, var(--th-info) 35%, transparent);
  background: color-mix(in srgb, var(--th-info) 8%, var(--th-surface));
}
.crt-note.is-info > i { color: var(--th-info); }
.crt-note.is-warn {
  border-color: color-mix(in srgb, var(--th-warning) 40%, transparent);
  background: color-mix(in srgb, var(--th-warning) 10%, var(--th-surface));
}
.crt-note.is-warn > i { color: var(--th-brand-dark); }
html.dark .crt-note.is-warn > i { color: var(--th-brand); }

/* ── چیدمان ── */
.crt-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px; align-items: start;
}
.crt-items { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── نوار بالای لیست ── */
.crt-bar { display: flex; align-items: center; gap: 12px; }
.crt-bar-t {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: .95rem; font-weight: 700; color: var(--th-text-1);
}
.crt-bar-n {
  font-family: var(--font-num); font-size: .76rem; font-weight: 700;
  padding: 1px 8px; border-radius: 999px;
  background: var(--th-surface-2); color: var(--th-text-2);
}
.crt-bar-f { margin: 0; margin-inline-start: auto; }
.crt-clear {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 0; border-radius: var(--r-sm);
  background: none; font-family: inherit; font-size: .8rem;
  color: var(--th-text-3); cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.crt-clear:hover { color: var(--th-danger); background: color-mix(in srgb, var(--th-danger) 10%, transparent); }

/* ── کارت ردیف ── */
.crt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.crt-card {
  --crt-c: var(--th-text-3);
  position: relative; overflow: hidden;
  display: grid; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px 16px;
  padding: 14px 16px; padding-inline-start: 18px;
  background: var(--th-surface);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.crt-card:hover { border-color: color-mix(in srgb, var(--th-brand) 45%, var(--th-border)); box-shadow: var(--sh-sm); }
.crt-card::before {
  content: ''; position: absolute;
  top: 0; bottom: 0; inset-inline-start: 0; width: 4px;
  background: var(--crt-c);
}
.crt-card.is-domain { --crt-c: var(--th-info); }
.crt-card.is-host   { --crt-c: var(--th-brand); }
.crt-card.is-vps    { --crt-c: var(--th-success); }

/* آیکنِ نوع سرویس — همان رنگِ نوار کناری، با ته‌رنگِ ملایم */
.crt-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-md); flex: 0 0 auto;
  background: color-mix(in srgb, var(--crt-c) 14%, transparent);
  color: var(--crt-c); font-size: 1rem;
}

.crt-body { min-width: 0; }
.crt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.crt-title { font-size: .95rem; font-weight: 700; color: var(--th-text-1); overflow-wrap: anywhere; }
a.crt-title:hover { color: var(--th-brand); text-decoration: none; }
html.dark a.crt-title { color: var(--th-text-1); }
html.dark a.crt-title:hover { color: var(--th-brand); }
.crt-kind {
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--crt-c) 13%, transparent);
  font-size: .7rem; font-weight: 600; color: var(--crt-c);
  white-space: nowrap;
}
/* توکن‌های وضعیت روی زمینه‌ی روشن کنتراست کافی ندارند و باید یک پله تیره‌تر
   شوند (همان قاعده‌ی .svcl-card .svc-state) */
.crt-card.is-domain .crt-kind { color: #1D4ED8; }
.crt-card.is-host   .crt-kind { color: #92400E; }
.crt-card.is-vps    .crt-kind { color: #047857; }
/* باید .crt-card را هم داشته باشد وگرنه وزنش از سه قاعده‌ی بالا کمتر است و
   در حالت شب همان قهوه‌ای/آبیِ تیره‌ی لایت‌مود می‌ماند */
html.dark .crt-card .crt-kind { color: var(--crt-c); }

.crt-dom { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.crt-dom-n {
  font-family: var(--font-num); font-size: .9rem; font-weight: 600;
  color: var(--th-text-1); overflow-wrap: anywhere;
}
.crt-dom-note { font-size: .76rem; color: var(--th-text-2); }

.crt-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.crt-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  font-size: .72rem; color: var(--th-text-2); white-space: nowrap;
}
.crt-tag i { font-size: .9em; color: var(--th-text-3); }
.crt-tag.is-gift {
  border-color: color-mix(in srgb, var(--th-success) 35%, transparent);
  background: color-mix(in srgb, var(--th-success) 10%, transparent);
  color: #047857; font-weight: 600;
}
.crt-tag.is-gift i { color: inherit; }
html.dark .crt-tag.is-gift { color: var(--th-success); }
.crt-tag.is-cpn {
  border-color: color-mix(in srgb, var(--th-brand) 38%, transparent);
  background: color-mix(in srgb, var(--th-brand) 12%, transparent);
  color: #92400E; font-weight: 600;
}
.crt-tag.is-cpn i { color: inherit; }
html.dark .crt-tag.is-cpn { color: var(--th-brand); }
.crt-feat { margin-top: 8px; font-size: .76rem; line-height: 1.9; color: var(--th-text-2); }

/* ── مبالغِ ردیف ── */
.crt-money { min-width: 130px; }
.crt-break { margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.crt-break > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.crt-break dt { margin: 0; font-size: .72rem; font-weight: 400; color: var(--th-text-3); }
.crt-break dd { margin: 0; font-family: var(--font-num); font-size: .78rem; color: var(--th-text-2); }
.crt-break .is-off dt, .crt-break .is-off dd { color: var(--th-danger); }
.crt-rowsum {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding-top: 6px; border-top: 1px dashed var(--th-border);
}
/* اگر ریزِ قیمت نمایش داده نشده باشد خطِ بالا فقط یک کشِ اضافه است */
.crt-money > .crt-rowsum:first-child { padding-top: 0; border-top: 0; }
.crt-rowsum-lbl { font-size: .72rem; color: var(--th-text-3); }
.crt-rowsum-v {
  font-family: var(--font-num); font-size: 1rem; font-weight: 700;
  color: var(--th-text-1); white-space: nowrap;
}
.crt-rowsum-v small { font-family: var(--font-fa); font-size: .68rem; font-weight: 500; color: var(--th-text-2); }

/* ── حذف ردیف ── */
.crt-act { display: flex; align-items: center; }
.crt-act form { margin: 0; }
.crt-del {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--th-border); border-radius: var(--r-md);
  background: var(--th-surface); color: var(--th-text-3);
  font-family: inherit; font-size: .82rem; cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.crt-del:hover {
  border-color: color-mix(in srgb, var(--th-danger) 45%, transparent);
  background: color-mix(in srgb, var(--th-danger) 10%, transparent);
  color: var(--th-danger);
}
/* در دسکتاپ آیکن به‌تنهایی کافی است (title دارد)؛ در موبایل متن برمی‌گردد */
.crt-del-t { display: none; }
.crt-wait { margin-top: 6px; font-size: .74rem; color: var(--th-text-2); text-align: center; }
.crt-wait img { vertical-align: middle; }

/* ── افزودن سرویس دیگر ── */
.crt-more {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--r-lg);
  border: 1px dashed var(--th-border-2); background: transparent;
  font-size: .84rem; font-weight: 500; color: var(--th-text-2);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
a.crt-more:hover {
  border-color: var(--th-brand); color: var(--th-text-1);
  background: color-mix(in srgb, var(--th-brand) 7%, transparent);
  text-decoration: none;
}
html.dark a.crt-more { color: var(--th-text-2); }
html.dark a.crt-more:hover { color: var(--th-text-1); }

/* ── ستون خلاصه ── */
.crt-aside { min-width: 0; }
.crt-sum {
  position: sticky; top: calc(var(--th-nav-h) + var(--th-panel-h) + 14px);
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: var(--th-surface); border: 1px solid var(--th-border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.crt-sum-h { font-size: .9rem; font-weight: 700; color: var(--th-text-1); }
.crt-sum-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.crt-sum-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.crt-sum-list dt { margin: 0; font-size: .82rem; font-weight: 400; color: var(--th-text-2); }
.crt-sum-list dd { margin: 0; font-family: var(--font-num); font-size: .86rem; font-weight: 600; color: var(--th-text-1); }
.crt-sum-list .is-off dt, .crt-sum-list .is-off dd { color: var(--th-danger); }
.crt-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--th-border);
}
.crt-total-lbl { font-size: .84rem; font-weight: 600; color: var(--th-text-1); }
.crt-total-v {
  font-family: var(--font-num); font-size: 1.25rem; font-weight: 800;
  color: var(--th-text-1); white-space: nowrap; line-height: 1.3;
}
.crt-total-v small { font-family: var(--font-fa); font-size: .7rem; font-weight: 500; color: var(--th-text-2); }

/* ── کد تخفیف ── */
.crt-sum form { margin: 0; }
.crt-cpn { border: 1px solid var(--th-border); border-radius: var(--r-md); overflow: hidden; }
.crt-cpn-sum {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; cursor: pointer; list-style: none;
  font-size: .82rem; font-weight: 600; color: var(--th-text-1);
}
.crt-cpn-sum::-webkit-details-marker { display: none; }
.crt-cpn-sum > i { color: var(--th-text-3); }
.crt-cpn-sum::after {
  content: '\f078';/* chevron-down */
  font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .68rem;
  color: var(--th-text-3); margin-inline-start: auto; transition: transform var(--t-fast);
}
.crt-cpn[open] > .crt-cpn-sum::after { transform: rotate(180deg); }
.crt-cpn[open] > .crt-cpn-sum { border-bottom: 1px solid var(--th-border); }
.crt-cpn-on {
  padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--th-success) 15%, transparent);
  font-size: .7rem; font-weight: 700; color: #047857;
}
html.dark .crt-cpn-on { color: var(--th-success); }
.crt-cpn-bd { padding: 12px; }
/* input-group بوت‌استرپ اینجا لازم نیست و فقط قواعد عرضِ سراسری را وارد بازی
   می‌کند؛ یک گریدِ دوستونی همان کار را تمیزتر می‌کند */
.crt-cpn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.crt-cpn-row .form-control { margin: 0; }
.crt-cpn-del {
  margin-top: 8px; padding: 0; border: 0; background: none;
  font-family: inherit; font-size: .76rem; color: var(--th-text-3);
  text-decoration: underline; cursor: pointer;
}
.crt-cpn-del:hover { color: var(--th-danger); }

/* ── دکمه‌ها ── */
.crt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-md); border: 1px solid transparent;
  font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.crt-btn-lg { width: 100%; padding: 13px 18px; font-size: .92rem; font-weight: 700; }
/* روی زمینه‌ی برند متنِ تیره؛ سفید روی #F59E0B کنتراست ~۲.۱:۱ می‌دهد */
.crt-btn-primary { background: var(--th-brand); color: var(--th-on-brand); }
.crt-btn-primary:hover { background: var(--th-brand-dark); color: var(--th-on-brand); text-decoration: none; }
.crt-btn-ghost { background: var(--th-surface); border-color: var(--th-border); color: var(--th-text-2); }
.crt-btn-ghost:hover { border-color: var(--th-brand); color: var(--th-text-1); text-decoration: none; }
/* darkmode.css رنگ هر <a> محتوا را نارنجی می‌کند؛ دکمه‌ها استثنا هستند */
html.dark a.crt-btn-primary { color: var(--th-on-brand); }
html.dark a.crt-btn-ghost { color: var(--th-text-2); }

.crt-hints { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.crt-hints li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .76rem; line-height: 1.8; color: var(--th-text-2);
}
.crt-hints i { flex: 0 0 auto; margin-top: 4px; color: var(--th-text-3); }

/* ── سبد خالی ── */
.crt-empty {
  padding: 44px 20px; text-align: center;
  background: var(--th-surface); border: 1px dashed var(--th-border-2);
  border-radius: var(--r-lg);
}
.crt-empty > i { display: block; font-size: 2.2rem; color: var(--th-text-3); margin-bottom: 14px; }
.crt-empty-t { font-size: 1rem; font-weight: 700; color: var(--th-text-1); }
.crt-empty-s { margin-top: 6px; font-size: .82rem; color: var(--th-text-2); }
.crt-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

/* ── نوار چسبانِ موبایل ── */
.crt-mbar { display: none; }

@media (max-width: 1024px) {
  .crt-layout { grid-template-columns: minmax(0, 1fr); }
  /* در حالت ستونی چسباندنِ خلاصه بی‌معنی است (خودش انتهای صفحه است) */
  .crt-sum { position: static; }
}

@media (max-width: 991px) {
  .crt-mbar {
    position: fixed; z-index: 480;
    inset-inline: 0;
    bottom: calc(var(--th-bn-h) + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    background: var(--th-surface);
    border-top: 1px solid var(--th-border);
    box-shadow: var(--sh-up);
  }
  .crt-mbar form { margin: 0; margin-inline-start: auto; }
  .crt-mbar-p { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .crt-mbar-lbl { font-size: .7rem; color: var(--th-text-3); }
  .crt-mbar-v {
    font-family: var(--font-num); font-size: 1.05rem; font-weight: 800;
    color: var(--th-text-1); white-space: nowrap;
  }
  .crt-mbar-v small { font-family: var(--font-fa); font-size: .68rem; font-weight: 500; color: var(--th-text-2); }
  /* جا برای نوار، وگرنه آخرین کارت زیرش گم می‌شود */
  .crt-page { padding-bottom: 72px; }
}

@media (max-width: 640px) {
  /* آیکن و عنوان در ردیف اول، مبالغ و حذف در ردیف دوم */
  .crt-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 14px; padding: 14px; padding-inline-start: 16px;
  }
  /* در حالت ستونی بدنه بلند می‌شود و آیکنِ وسط‌چین کنارِ خطِ دامنه می‌افتد،
     نه کنارِ عنوانی که برچسبش است */
  .crt-ico { align-self: start; }
  .crt-money { grid-column: 1 / -1; min-width: 0; }
  .crt-act { grid-column: 1 / -1; }
  /* آیکنِ تنها هدفِ لمسِ کوچکی می‌ساخت و title روی لمس دیده نمی‌شود، پس متن
     برمی‌گردد — ولی تمام‌عرض نمی‌شود: یک دکمه‌ی تمام‌عرضِ حذف درست زیرِ قیمت
     خیلی راحت اشتباهی لمس می‌شود و حذفِ ردیف تاییدیه ندارد */
  .crt-del { width: auto; height: auto; padding: 9px 16px; }
  .crt-del-t { display: inline; }
  .crt-empty-acts .crt-btn { flex: 1 1 100%; }
}


/* ════════════════════════════════════════════════════
   ارتقای سرویس — upg-*
   قالب: html/panel/upgrade.html + upgrade-plans.html + upgrade-price.html
   ----------------------------------------------------------------
   صفحه سه گام دارد که هر سه هم‌زمان دیده می‌شوند، نه یک ویزاردِ
   چندصفحه‌ای: کاربر باید بتواند وقتی قیمت را دید، بدون از دست دادنِ
   زمینه پلن دیگری را امتحان کند. پس فقط #upg_plans و #upg_price با
   ajax عوض می‌شوند و سربرگ سرِ جایش می‌ماند.

   سلسله‌مراتبِ عمدیِ صفحه از بالا به پایین:
     ۱. «ارزش باقی‌مانده» در سربرگ — پاسخ به «این عدد از کجا آمد؟»
     ۲. کارت پلن‌ها — مقایسه‌ی فضا/پهنای باند در یک نگاه
     ۳. «مبلغ قابل پرداخت» — بزرگ‌ترین عددِ صفحه
   تنها دکمه‌ی پرِ برند «ایجاد صورتحساب ارتقا» است؛ دکمه‌ی کارت‌ها
   ثانویه است چون کارِ برگشت‌پذیری انجام می‌دهد (فقط محاسبه).
════════════════════════════════════════════════════ */
.upg-page { display: flex; flex-direction: column; gap: 14px; }
.upg-page > * { min-width: 0; }

/* ── یادداشت‌ها ── */
.upg-note { font-size: .78rem; color: var(--th-text-2); line-height: 1.9; margin: 0; }
.upg-note-block {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--th-info) 30%, transparent);
  background: color-mix(in srgb, var(--th-info) 7%, var(--th-surface));
  font-size: .82rem; color: var(--th-text-1);
}
.upg-note-block > i { flex: 0 0 auto; margin-top: 4px; color: var(--th-info); }

/* ── حالت خالی ── */
.upg-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 48px 22px;
  background: var(--th-surface); border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
}
.upg-empty > i { font-size: 2.4rem; color: var(--th-text-3); }
.upg-empty-t { font-size: 1.05rem; font-weight: 700; color: var(--th-text-1); }
.upg-empty p { margin: 0; font-size: .84rem; color: var(--th-text-2); line-height: 1.9; max-width: 46ch; }
.upg-empty-list {
  width: 100%; max-width: 520px; margin-top: 6px;
  padding: 14px; border-radius: var(--r-md);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  text-align: start;
}
.upg-empty-list-t { font-size: .78rem; font-weight: 700; color: var(--th-text-2); margin-bottom: 8px; }
.upg-empty-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 6px 0; font-size: .82rem; color: var(--th-text-1);
  border-top: 1px solid var(--th-border);
}
.upg-empty-row:first-of-type { border-top: 0; }
.upg-empty-row span { font-family: var(--font-num); direction: ltr; color: var(--th-text-2); }
.upg-empty-row em { font-style: normal; font-size: .76rem; color: var(--th-text-3); }

/* ── انتخاب سرویس ── */
.upg-picker {
  margin: 0; padding: 14px 16px;
  background: var(--th-surface); border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
}
.upg-picker > label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font-size: .84rem; font-weight: 700; color: var(--th-text-1);
}
.upg-picker > label i { color: var(--th-brand); }
/* flex-basis روی سلکت لازم است: عنوان پلن‌ها بلند است و بدون آن ستونِ
   دکمه را در نمایشگر باریک له می‌کند */
.upg-picker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.upg-picker-row select { flex: 1 1 260px; min-width: 0; }
.upg-picker-row .th-btn { flex: 0 0 auto; }

/* ── سربرگ: سرویس فعلی ── */
.upg-hero {
  --upg-c: var(--th-success);
  display: flex; flex-wrap: wrap; gap: 18px 24px;
  padding: 18px 20px;
  background: var(--th-surface); border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
}
.upg-hero.is-warn { --upg-c: var(--th-warning); }
.upg-hero.is-crit,
.upg-hero.is-over { --upg-c: var(--th-danger); }
.upg-hero-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.upg-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.upg-hero-lbl { font-size: .76rem; color: var(--th-text-3); }
.upg-hero-num { font-family: var(--font-num); font-size: .9rem; font-weight: 800; color: var(--th-text-2); }
a.upg-hero-num:hover { color: var(--th-brand); }
.upg-hero-type {
  padding: 2px 9px; border-radius: 999px;
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  font-size: .72rem; color: var(--th-text-2);
}
.upg-hero-prod { font-size: 1.15rem; font-weight: 800; color: var(--th-text-1); line-height: 1.6; overflow-wrap: anywhere; }
.upg-hero-prod a { color: inherit; }
.upg-hero-prod a:hover { color: var(--th-brand); }
.upg-hero-domain,
.upg-hero-owner { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--th-text-2); }
.upg-hero-domain i,
.upg-hero-owner i { font-size: .8em; color: var(--th-text-3); }
.upg-hero-domain a { font-family: var(--font-num); direction: ltr; color: inherit; }
.upg-hero-domain a:hover,
.upg-hero-owner a:hover { color: var(--th-brand); }

/* ستون کناری سربرگ: عمر + اعتبار. flex-basis اینجا روی خودِ ستون است
   نه روی آیتم‌های داخلِ چیدمانِ ستونی، پس فاصله‌ی جعلی نمی‌سازد */
.upg-hero-side { flex: 0 0 auto; width: 250px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }
.upg-life-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.upg-life-lbl { font-size: .74rem; color: var(--th-text-3); }
.upg-life-val { font-family: var(--font-num); font-size: 1.3rem; font-weight: 800; color: var(--th-text-1); line-height: 1.2; }
.upg-life-val small { font-family: var(--font-fa); font-size: .68rem; font-weight: 500; color: var(--th-text-2); margin-inline-start: 4px; }
.upg-hero.is-over .upg-life-val { color: var(--th-danger); }
.upg-life-bar {
  height: 7px; margin-top: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--th-text-3) 22%, transparent);
}
/* همان دلیلِ صفحه‌ی سرویس: با چند روزِ مانده از یک سال، درصد ~۱٪ می‌شود
   و رگه نامرئی — دقیقاً در بحرانی‌ترین حالت کمترین خوانایی */
.upg-life-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--upg-c); min-width: 6px; }

/* اعتبارِ باقی‌مانده — عددی که کل صفحه رویش بنا شده */
.upg-credit {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--th-brand) 9%, var(--th-surface));
  border: 1px solid color-mix(in srgb, var(--th-brand) 32%, transparent);
}
.upg-credit-lbl { font-size: .72rem; color: var(--th-text-2); }
.upg-credit-val { font-family: var(--font-num); font-size: 1.35rem; font-weight: 800; color: var(--th-text-1); line-height: 1.4; }
.upg-credit-val small { font-family: var(--font-fa); font-size: .68rem; font-weight: 500; color: var(--th-text-2); margin-inline-start: 5px; }
.upg-credit-note { font-size: .7rem; color: var(--th-text-3); line-height: 1.7; }

/* ── گام‌ها ── */
.upg-step {
  padding: 16px 18px;
  background: var(--th-surface); border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
}
.upg-step-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.upg-step-n {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--th-brand); color: var(--th-on-brand);
  font-family: var(--font-num); font-size: .78rem; font-weight: 800;
}
.upg-step-t { font-size: .92rem; font-weight: 700; color: var(--th-text-1); }
/* سلکت گروه (فقط کارمند) ته سطرِ عنوان می‌نشیند */
.upg-group { display: flex; align-items: center; gap: 8px; margin: 0; margin-inline-start: auto; }
.upg-group label { margin: 0; font-size: .76rem; color: var(--th-text-3); }
.upg-group select { min-width: 200px; max-width: 100%; }

/* ── کارت پلن‌ها ── */
.upg-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.upg-plan {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 15px;
  background: var(--th-surface-2);
  border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.upg-plan:hover { border-color: var(--th-border-2); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.upg-plan.is-picked {
  border-color: var(--th-brand);
  background: color-mix(in srgb, var(--th-brand) 8%, var(--th-surface));
  box-shadow: 0 0 0 1px var(--th-brand) inset;
}
.upg-plan.is-hidden-prod { opacity: .78; border-style: dashed; }
.upg-plan-name { font-size: .95rem; font-weight: 700; color: var(--th-text-1); line-height: 1.7; overflow-wrap: anywhere; }
.upg-plan-flag {
  padding: 1px 7px; border-radius: 999px; vertical-align: middle;
  background: var(--th-surface); border: 1px solid var(--th-border);
  font-size: .66rem; font-weight: 500; color: var(--th-text-3);
}
.upg-plan-specs { display: flex; flex-direction: column; gap: 6px; }
.upg-plan-spec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .78rem; }
.upg-plan-spec-k { color: var(--th-text-3); display: inline-flex; align-items: center; gap: 6px; }
.upg-plan-spec-k i { font-size: .85em; }
.upg-plan-spec-v { font-family: var(--font-num); font-weight: 700; color: var(--th-text-1); }
.upg-plan-gain {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--th-success) 13%, var(--th-surface));
  border: 1px solid color-mix(in srgb, var(--th-success) 35%, transparent);
  font-family: var(--font-num); font-size: .72rem; font-weight: 700; color: #047857;
}
.upg-plan-gain i { font-size: .8em; }
html.dark .upg-plan-gain { color: var(--th-success); }
/* دکمه‌ی کارت ثانویه است: کارش فقط محاسبه است و برگشت‌پذیر. دکمه‌ی پرِ
   برند در صفحه یکی است و آن «ایجاد صورتحساب» است. */
.upg-plan-btn {
  margin-top: auto; width: 100%;
  padding: 9px 12px; border-radius: var(--r-md);
  background: var(--th-surface); border: 1px solid var(--th-border-2);
  font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--th-text-2);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.upg-plan-btn:hover { border-color: var(--th-brand); color: var(--th-text-1); }
/* روی زمینه‌ی برند متن تیره؛ سفید روی #F59E0B کنتراست ~۲.۱:۱ می‌دهد */
.upg-plan.is-picked .upg-plan-btn {
  background: var(--th-brand); border-color: var(--th-brand); color: var(--th-on-brand);
}

/* ── هیچ پلن بالاتری نیست ── */
.upg-noplan {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border-radius: var(--r-md);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
}
.upg-noplan > i { flex: 0 0 auto; margin-top: 3px; font-size: 1.1rem; color: var(--th-success); }
.upg-noplan b { display: block; font-size: .88rem; color: var(--th-text-1); margin-bottom: 3px; }
.upg-noplan span { font-size: .8rem; color: var(--th-text-2); line-height: 1.9; }

/* ── پنل قیمت ── */
.upg-quote.is-blocked { border-color: color-mix(in srgb, var(--th-warning) 45%, transparent); }

/* از ← به */
.upg-move { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 14px; }
.upg-move-side {
  flex: 1 1 200px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
}
.upg-move-side.is-to {
  background: color-mix(in srgb, var(--th-brand) 9%, var(--th-surface));
  border-color: color-mix(in srgb, var(--th-brand) 35%, transparent);
}
.upg-move-lbl { font-size: .7rem; color: var(--th-text-3); }
.upg-move-val { font-size: .9rem; font-weight: 700; color: var(--th-text-1); line-height: 1.7; overflow-wrap: anywhere; }
.upg-move-arrow { flex: 0 0 auto; display: flex; align-items: center; color: var(--th-text-3); }

/* ریزِ صورتحساب */
.upg-bill {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 20px;
  padding: 15px 17px; border-radius: var(--r-md);
  background: var(--th-surface-2); border: 1px solid var(--th-border);
}
.upg-bill-rows { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.upg-bill-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--th-text-2); }
.upg-bill-row b { font-family: var(--font-num); font-weight: 700; color: var(--th-text-1); }
.upg-bill-row.is-off b { color: var(--th-success); }
.upg-bill-row.is-note { font-size: .76rem; color: var(--th-text-3); }
.upg-bill-row.is-note b { font-family: var(--font-fa); font-weight: 600; color: var(--th-text-2); }
.upg-bill-total { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; text-align: start; }
.upg-bill-total-lbl { font-size: .74rem; color: var(--th-text-2); }
.upg-bill-total-val { font-family: var(--font-num); font-size: 1.75rem; font-weight: 800; color: var(--th-text-1); line-height: 1.3; }
.upg-bill-total-val small { font-family: var(--font-fa); font-size: .72rem; font-weight: 500; color: var(--th-text-2); margin-inline-start: 6px; }

/* تایید */
.upg-confirm { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.upg-confirm .th-btn { min-width: 230px; justify-content: center; }
.upg-confirm .upg-note { flex-basis: 100%; }

/* هشدارِ «این پلن ارتقا حساب نمی‌شود» */
.upg-warn {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--th-warning) 10%, var(--th-surface));
  border: 1px solid color-mix(in srgb, var(--th-warning) 42%, transparent);
}
.upg-warn > i { flex: 0 0 auto; margin-top: 3px; font-size: 1.05rem; color: var(--th-brand-dark); }
html.dark .upg-warn > i { color: var(--th-brand); }
.upg-warn b { display: block; font-size: .87rem; color: var(--th-text-1); margin-bottom: 3px; }
.upg-warn span { font-size: .8rem; color: var(--th-text-2); line-height: 1.9; }

/* ── انجام شد ── */
.upg-done {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 20px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--th-success) 8%, var(--th-surface));
  border: 1px solid color-mix(in srgb, var(--th-success) 38%, transparent);
}
.upg-done-ico { flex: 0 0 auto; font-size: 1.9rem; color: var(--th-success); line-height: 1; }
.upg-done-body { flex: 1 1 auto; min-width: 0; }
.upg-done-t { font-size: 1.02rem; font-weight: 800; color: var(--th-text-1); }
.upg-done p { margin: 6px 0 0; font-size: .83rem; color: var(--th-text-2); line-height: 1.9; }
.upg-done-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ── موبایل ── */
@media (max-width: 780px) {
  /* ستون کناریِ سربرگ تمام‌عرض می‌شود و عمر/اعتبار کنار هم می‌مانند تا
     سربرگ در نمایشگر کوتاه، کلِ صفحه‌ی اول را نگیرد */
  .upg-hero-side { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .upg-hero-side > * { flex: 1 1 190px; min-width: 0; }
}

@media (max-width: 640px) {
  .upg-hero { padding: 16px; gap: 14px; }
  .upg-hero-prod { font-size: 1.05rem; }
  .upg-step { padding: 14px; }
  /* سلکت گروه زیرِ عنوانِ گام می‌رود، وگرنه عنوان را تا لبه فشار می‌دهد */
  .upg-group { margin-inline-start: 0; width: 100%; }
  .upg-group select { flex: 1 1 auto; min-width: 0; }
  .upg-plans { grid-template-columns: 1fr; }
  /* پیکان «از ← به» در حالت ستونی باید به پایین اشاره کند */
  .upg-move-arrow { width: 100%; justify-content: center; transform: rotate(-90deg); }
  .upg-bill { flex-direction: column; align-items: stretch; }
  .upg-bill-total {
    padding-top: 12px; border-top: 1px solid var(--th-border);
    flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  .upg-confirm .th-btn { width: 100%; min-width: 0; }
  .upg-done { flex-direction: column; gap: 10px; }
  .upg-done-acts .th-btn { flex: 1 1 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════
   تایید شماره موبایل — apv-*
   panel/approve.html · panel/approve3.html
   ----------------------------------------------------------------
   کارتِ فرم و کارتِ راهنما از acc-* می‌آیند (همان الگوی
   change-mobile) و اینجا فقط چیزهای مخصوصِ این جریان است:
   کارتِ وضعیت، نوار مرحله، ورودی کد، شمارشِ ارسالِ دوباره و
   کادرِ انتخابِ فایلِ مدرک.

   چرا نوارِ مرحله و کارتِ وضعیت از tfa-* استفاده نمی‌کنند: آن‌ها
   با «فعال/غیرفعال» دوحالته طراحی شده‌اند، ولی اینجا حالتِ میانیِ
   «تایید شده ولی رو به انقضا» هم داریم که رنگِ سومی می‌خواهد.
════════════════════════════════════════════════════ */
.apv-page { display: flex; flex-direction: column; gap: 14px; max-width: 1040px; }

/* ── کارت وضعیت ── */
.apv-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 22px; }
.apv-hero-ico {
  width: 52px; height: 52px; flex: 0 0 auto;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  background: var(--th-surface-2); color: var(--th-text-2);
}
.apv-hero.is-ok   .apv-hero-ico { background: rgba(16,185,129,.12); color: var(--th-success); }
.apv-hero.is-warn .apv-hero-ico { background: rgba(245,158,11,.14); color: var(--th-warning); }
.apv-hero.is-bad  .apv-hero-ico { background: rgba(239,68,68,.12);  color: var(--th-danger); }
.apv-hero-txt { flex: 1 1 240px; min-width: 0; }
.apv-hero-title { font-size: 1.05rem; font-weight: 700; color: var(--th-text-1); }
.apv-hero-sub { font-size: .84rem; color: var(--th-text-2); margin-top: 4px; line-height: 1.9; }
.apv-hero-badge {
  flex: 0 0 auto;
  padding: 6px 16px; border-radius: 99px;
  font-size: .85rem; font-weight: 700;
  background: var(--th-surface-2); color: var(--th-text-2);
}
/* رنگِ خامِ توکن روی ته‌رنگِ روشن زیر ۳:۱ می‌ماند (همان نکته‌ی
   .acc-head-badge)، پس در روز نسخه‌ی تیره‌تر و در شب خودِ توکن. */
.apv-hero-badge.is-ok   { background: rgba(16,185,129,.12); color: #047857; }
.apv-hero-badge.is-warn { background: rgba(245,158,11,.14); color: #B45309; }
.apv-hero-badge.is-bad  { background: rgba(239,68,68,.12);  color: #B91C1C; }
html.dark .apv-hero-badge.is-ok   { color: var(--th-success); }
html.dark .apv-hero-badge.is-warn { color: var(--th-warning); }
/* خودِ --th-danger روی ته‌رنگِ قرمز در شب ۳.۷:۱ می‌ماند — برخلاف سبز و
   کهربایی که هر دو بالای ۵ هستند. یک پله روشن‌ترش ۵.۱:۱ می‌دهد. */
html.dark .apv-hero-badge.is-bad  { color: #F87171; }
@media (max-width: 575px) { .apv-hero-badge { display: none; } }

/* ── نوار مراحل ── */
.apv-stepbar { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.apv-stepbar > li {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--th-border); background: var(--th-surface-2);
  font-size: .81rem; color: var(--th-text-2);
  white-space: nowrap; overflow: hidden;
}
.apv-stepbar .n {
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  background: var(--th-border); color: var(--th-text-2);
}
/* رنگِ خامِ --th-success روی ته‌رنگِ ۷٪ خودش ~۲.۴:۱ می‌دهد (زیر حدِ AA)؛
   در روز نسخه‌ی تیره‌ترش و در شب خودِ توکن. */
.apv-stepbar > li.is-done    { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.07); color: #047857; }
.apv-stepbar > li.is-done .n { background: var(--th-success); color: #fff; }
html.dark .apv-stepbar > li.is-done { color: var(--th-success); }
.apv-stepbar > li.is-active {
  border-color: var(--th-brand); background: rgba(245,158,11,.09);
  color: var(--th-text-1); font-weight: 700;
}
.apv-stepbar > li.is-active .n { background: var(--th-brand); color: var(--th-on-brand); }
/* موبایل: فقط مرحله‌ی جاری متن دارد تا نوار در یک ردیف جا شود */
@media (max-width: 575px) {
  .apv-stepbar > li { flex: 0 0 auto; padding: 8px 10px; }
  .apv-stepbar > li .t { display: none; }
  .apv-stepbar > li.is-active { flex: 1 1 auto; }
  .apv-stepbar > li.is-active .t { display: inline; }
}

/* ── چیدمان: فرم (راست) + راهنما (چپ) ── */
.apv-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 14px; align-items: start;
}
@media (max-width: 900px) { .apv-grid { grid-template-columns: 1fr; } }
.apv-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.apv-card .th-card-body { padding: 20px; }

/* ── کارتِ وضعیتِ تاییدشده ── */
.apv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.apv-fact {
  background: var(--th-surface-2); border: 1px solid var(--th-border);
  border-radius: var(--r-md); padding: 12px 14px;
}
.apv-fact-lbl { display: block; font-size: .76rem; color: var(--th-text-2); margin-bottom: 4px; }
.apv-fact-val { display: block; font-size: .95rem; font-weight: 700; color: var(--th-text-1); }

/* لینکِ داخلِ هشدارِ رنگی: --th-link روی ته‌رنگِ آبیِ th-alert-info به ۴.۳۸
   می‌افتد (کمی زیرِ AA). نسخه‌ی تیره‌ترِ همان رنگ ۶.۱ می‌دهد. فقط در همین
   صفحه، تا قاعده‌ی سراسریِ .th-alert دست‌نخورده بماند. */
.apv-page .th-alert a { color: var(--th-link-hover); font-weight: 600; }
.apv-page .th-alert a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── یادداشتِ ریزِ زیرِ محتوا ── */
.apv-note {
  display: flex; gap: 9px; align-items: flex-start;
  margin: 16px 0 0; font-size: .83rem; line-height: 2; color: var(--th-text-2);
}
.apv-note > i { flex: 0 0 auto; margin-top: 6px; color: var(--th-info); font-size: .85rem; }

/* ── راهنمای ریزِ زیرِ فیلد ──
   text-2 و نه text-3: این خط متنِ واقعی است (مهلتِ کد، دلیلِ رد شدنِ شماره)
   و باید خوانده شود؛ text-3 روی سطحِ کارت زیر ۳:۱ می‌ماند. */
.apv-hint { margin-top: 6px; font-size: .78rem; color: var(--th-text-2); line-height: 1.9; }
.apv-hint-center { text-align: center; margin-top: 12px; }

/* ── ورودی شماره ──
   با #maincontent هم نوشته می‌شود چون قانونِ یکدست‌سازیِ فرم‌ها در همین
   فایل با اسپسیفیسیتیِ id نوشته شده و در غیر این صورت روی فونت/سایز
   غالب می‌شد (همان نکته‌ی .tfa-otp). */
.apv-mobile,
#maincontent input.apv-mobile:not(.btn) {
  font-family: var(--font-num);
  font-size: 1.05rem; font-weight: 600; letter-spacing: .06em;
  text-align: center;
}

/* ── ورودی کدِ ۵ رقمی ── */
.apv-otp,
#maincontent input.apv-otp:not(.btn) {
  max-width: 240px; margin-inline: auto;
  text-align: center;
  font-family: var(--font-num);
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: .5em; text-indent: .5em;
  padding: 10px 12px;
}
.apv-otp::-webkit-outer-spin-button,
.apv-otp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* خطای کد: کادر قرمز، بدون آنکه پیامِ سرور تکرار شود */
#maincontent input.apv-otp.is-err,
#maincontent input.apv-mobile.is-err {
  border-color: var(--th-danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

/* ── شماره‌ای که کد به آن رفته + «تغییر شماره» ── */
.apv-target {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 13px; margin-bottom: 18px;
  border: 1px dashed var(--th-border-2); border-radius: var(--r-md);
  background: var(--th-surface-2);
}
.apv-target > i { flex: 0 0 auto; color: var(--th-text-3); font-size: .85rem; }
.apv-target-num {
  flex: 1 1 auto; min-width: 0;
  font-size: 1rem; font-weight: 700; color: var(--th-text-1);
}

/* فرم‌های تک‌دکمه‌ای (تغییر شماره / ارسال دوباره) نباید ردیف بشکنند */
.apv-inline-form { display: inline; margin: 0; }

/* دکمه‌ای که مثل لینک دیده می‌شود */
.apv-linkbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none;
  font-family: inherit; font-size: .82rem; color: var(--th-link);
  cursor: pointer; user-select: none;
}
.apv-linkbtn:hover { color: var(--th-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.apv-linkbtn[disabled] { color: var(--th-text-3); cursor: default; text-decoration: none; }
.apv-linkbtn > i { font-size: .74rem; }

/* ── دو دکمه‌ی «پیامک» و «تماس» ── */
.apv-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.apv-actions > .apv-btn { flex: 1 1 190px; min-width: 0; }
.apv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

/* دکمه‌ی درجه‌دومِ این صفحه.
   عمداً .btn-outline-* بوت‌استرپ نیست: darkmode.css فقط دکمه‌های توپُر را
   اصلاح می‌کند و outline دست‌نخورده می‌ماند، پس آبیِ خامِ #0d6efd روی
   زمینه‌ی شب ~۳.۵:۱ می‌داد. این نسخه از توکن‌های تم می‌خواند و در هر دو
   حالت درست است. */
.apv-btn-alt,
#maincontent a.apv-btn-alt {
  background: var(--th-surface);
  color: var(--th-text-1);
  border: 1px solid var(--th-border-2);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.apv-btn-alt:hover,
#maincontent a.apv-btn-alt:hover {
  background: color-mix(in srgb, var(--th-brand) 8%, var(--th-surface));
  border-color: var(--th-brand);
  color: var(--th-text-1);
}
.apv-btn-alt > i { color: var(--th-brand); }

/* ── ردیف «ارسال دوباره» ── */
.apv-resend {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed var(--th-border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: center; text-align: center;
}
.apv-resend .apv-hint { margin-top: 0; }
.apv-sep { color: var(--th-text-3); }

.apv-wait { text-align: center; padding: 8px 0; color: var(--th-text-2); font-size: .85rem; }
.apv-wait img { vertical-align: middle; }

/* ── کارتِ راهِ جایگزین ── */
.apv-alt-desc { margin: 0 0 12px; font-size: .84rem; line-height: 2; color: var(--th-text-2); }
.apv-alt-desc:last-child { margin-bottom: 0; }
.apv-alt-desc > i { color: var(--th-warning); margin-inline-end: 5px; }
.apv-alt-btn { display: inline-flex; align-items: center; gap: 7px; }
.apv-alt.is-pending .th-card-title i { color: var(--th-warning); }

/* ── انتخابِ فایلِ مدرک (approve3) ──
   ورودیِ فایل داخلِ همین برچسب پنهان می‌شود تا کلِ کادر قابلِ کلیک باشد؛
   display:none نمی‌شود چون آن‌وقت required بودنش پیامِ اعتبارسنجیِ
   مرورگر را روی المانِ نامرئی نشان می‌دهد و کاربر چیزی نمی‌بیند. */
.apv-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  padding: 26px 18px; cursor: pointer;
  border: 2px dashed var(--th-border-2); border-radius: var(--r-lg);
  background: var(--th-surface-2);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.apv-drop:hover, .apv-drop.is-over { border-color: var(--th-brand); background: color-mix(in srgb, var(--th-brand) 6%, transparent); }
.apv-drop.is-filled { border-style: solid; border-color: var(--th-success); background: color-mix(in srgb, var(--th-success) 7%, transparent); }
.apv-drop-ico { font-size: 1.6rem; color: var(--th-text-3); }
.apv-drop.is-filled .apv-drop-ico { color: var(--th-success); }
.apv-drop-title { font-size: .88rem; font-weight: 700; color: var(--th-text-1); overflow-wrap: anywhere; }
.apv-drop-sub { font-size: .78rem; color: var(--th-text-2); line-height: 1.9; }
.apv-drop-input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
/* پیش‌نمایشِ تصویرِ انتخاب‌شده — دلیلِ اصلیِ اشتباه در این فرم فرستادنِ
   فایلِ اشتباه بود، پس بگذار کاربر ببیند چه می‌فرستد. */
.apv-drop-thumb {
  max-width: 190px; max-height: 130px;
  border-radius: var(--r-sm); border: 1px solid var(--th-border);
  background: #fff;
}

@media (max-width: 575px) {
  .apv-hero { padding: 16px; gap: 12px; }
  .apv-card .th-card-body { padding: 16px; }
  .apv-actions > .apv-btn { flex: 1 1 100%; }
  .apv-target { gap: 8px; }
}


/* ════════════════════════════════════════════════════
   تایید سفارش — ckt-*
   قالب: html/other/order-confirm.html  (source/panel/checkout.php)
   ----------------------------------------------------------------
   قبلا این صفحه خروجیِ همان قالبی بود که به ایمیل هم می‌رفت: جدولِ
   ۶۵۵ پیکسلیِ ثابت با رنگ‌های hard-code (background:#eee روی th).
   نتیجه در پنل: سرستون‌های خاکستریِ روشن روی زمینه‌ی شب عملا نامرئی،
   و در موبایل جدولی که از کادر بیرون می‌زد.

   حالا صفحه و ایمیل دو قالب جدا دارند و این یکی از توکن‌های تم
   می‌خواند، پس در هر دو تم درست است.
   ════════════════════════════════════════════════════ */
.ckt-page { display: flex; flex-direction: column; gap: 14px; }
.ckt-page > * { min-width: 0; }

/* ── سربرگ موفقیت ── */
.ckt-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--th-success) 32%, transparent);
  background: color-mix(in srgb, var(--th-success) 9%, var(--th-surface));
}
.ckt-hero-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  background: color-mix(in srgb, var(--th-success) 16%, transparent);
  color: #047857; font-size: 1.35rem;
}
html.dark .ckt-hero-ico { color: var(--th-success); }
.ckt-hero-tx { min-width: 0; }
.ckt-hero-t { font-size: 1rem; font-weight: 700; color: var(--th-text-1); }
.ckt-hero-s { margin-top: 5px; font-size: .82rem; line-height: 1.9; color: var(--th-text-2); }

/* ── کارت صورتحساب ── */
.ckt-card {
  background: var(--th-surface); border: 1px solid var(--th-border);
  border-radius: var(--r-lg); overflow: hidden;
}
.ckt-card-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  padding: 13px 16px; border-bottom: 1px solid var(--th-border);
}
.ckt-card-t { font-size: .9rem; font-weight: 700; color: var(--th-text-1); }
.ckt-fid { font-family: var(--font-num); color: var(--th-text-2); }
.ckt-due {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--th-warning) 13%, transparent);
  font-size: .74rem; color: #92400E;
}
.ckt-due b { font-family: var(--font-num); }
.ckt-due i { font-size: .9em; }
html.dark .ckt-due { color: var(--th-brand); }

/* ── جدول ردیف‌ها ── */
.ckt-tbl-wrap { overflow-x: auto; }
.ckt-tbl { width: 100%; border-collapse: collapse; }
.ckt-tbl th, .ckt-tbl td {
  padding: 11px 16px; text-align: start;
  border-bottom: 1px solid var(--th-border); vertical-align: top;
}
.ckt-tbl thead th {
  background: var(--th-surface-2);
  font-size: .74rem; font-weight: 600; color: var(--th-text-2);
  white-space: nowrap;
}
.ckt-tbl .ckt-num { text-align: end; white-space: nowrap; font-family: var(--font-num); }
.ckt-tbl tbody tr:last-child td { border-bottom: 1px solid var(--th-border); }

.ckt-kind {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; margin-inline-end: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--ckt-c, var(--th-text-3)) 13%, transparent);
  font-size: .68rem; font-weight: 600; color: var(--ckt-c, var(--th-text-2));
  white-space: nowrap; vertical-align: middle;
}
.ckt-kind i { font-size: .9em; }
.ckt-kind.is-domain { --ckt-c: var(--th-info);    color: #1D4ED8; }
.ckt-kind.is-host   { --ckt-c: var(--th-brand);   color: #92400E; }
.ckt-kind.is-server { --ckt-c: var(--th-success); color: #047857; }
/* والد را هم می‌آوریم تا وزنش از سه قاعده‌ی بالا کمتر نشود */
html.dark .ckt-tbl .ckt-kind { color: var(--ckt-c); }

.ckt-title { font-size: .86rem; font-weight: 600; color: var(--th-text-1); overflow-wrap: anywhere; }
.ckt-desc { display: block; margin-top: 5px; font-size: .76rem; color: var(--th-text-2); overflow-wrap: anywhere; }
.ckt-off { color: var(--th-danger); font-weight: 600; }
.ckt-dash { color: var(--th-text-3); }

.ckt-tbl tfoot td {
  padding: 14px 16px; border-bottom: 0;
  background: var(--th-surface-2);
  font-size: .86rem; font-weight: 700; color: var(--th-text-1);
}
.ckt-grand {
  font-family: var(--font-num); font-size: 1.2rem; font-weight: 800;
  color: var(--th-text-1);
}
.ckt-tbl tfoot small { font-family: var(--font-fa); font-size: .7rem; font-weight: 500; color: var(--th-text-2); }

/* ── دکمه‌ها ── */
.ckt-acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; }
.ckt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-md); border: 1px solid transparent;
  font-family: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
/* روی زمینه‌ی برند متنِ تیره؛ سفید روی #F59E0B کنتراست ~۲.۱:۱ می‌دهد */
.ckt-btn-primary { background: var(--th-brand); color: var(--th-on-brand); }
.ckt-btn-primary:hover { background: var(--th-brand-dark); color: var(--th-on-brand); text-decoration: none; }
.ckt-btn-ghost { background: var(--th-surface); border-color: var(--th-border); color: var(--th-text-2); }
.ckt-btn-ghost:hover { border-color: var(--th-brand); color: var(--th-text-1); text-decoration: none; }
/* darkmode.css رنگ هر <a> محتوا را نارنجی می‌کند؛ دکمه‌ها استثنا هستند */
html.dark a.ckt-btn-primary { color: var(--th-on-brand); }
html.dark a.ckt-btn-ghost { color: var(--th-text-2); }

/* ── یادداشت‌ها ── */
.ckt-notes {
  padding: 14px 16px;
  background: var(--th-surface); border: 1px solid var(--th-border);
  border-radius: var(--r-lg);
}
.ckt-notes-h {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: .84rem; font-weight: 700; color: var(--th-text-1);
}
.ckt-notes-h i { color: var(--th-text-3); }
.ckt-note + .ckt-note { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--th-border); }
.ckt-note-t { font-size: .82rem; font-weight: 600; color: var(--th-text-1); }
.ckt-note-b { margin-top: 5px; font-size: .78rem; line-height: 1.9; color: var(--th-text-2); overflow-wrap: anywhere; }

/* ── راهنماها ── */
.ckt-hints { display: flex; flex-direction: column; gap: 8px; }
.ckt-hint {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .78rem; line-height: 1.9; color: var(--th-text-2);
}
.ckt-hint i { flex: 0 0 auto; margin-top: 5px; color: var(--th-text-3); }

@media (max-width: 640px) {
  .ckt-hero { gap: 12px; padding: 14px; }
  .ckt-hero-ico { width: 38px; height: 38px; font-size: 1.15rem; }
  .ckt-due { margin-inline-start: 0; }
  .ckt-acts { padding: 14px; }
  .ckt-acts .ckt-btn { flex: 1 1 100%; }

  /* ── جدول → کارت ──
     سه ستون در ۳۷۵px جا نمی‌شود: ستون شرح به نواری باریک تبدیل می‌شد و
     عنوان در پنج خط می‌شکست. حالا هر ردیف یک بلوک است؛ شرح بالا و
     مبالغ زیرش به‌صورت «برچسب ← مقدار». برچسب از data-lbl می‌آید چون
     سرستون‌ها پنهان‌اند. */
  .ckt-tbl, .ckt-tbl tbody, .ckt-tbl tfoot, .ckt-tbl tr, .ckt-tbl td { display: block; }
  .ckt-tbl thead { display: none; }
  .ckt-tbl tbody tr { padding: 13px 14px; border-bottom: 1px solid var(--th-border); }
  .ckt-tbl tbody tr:last-child { border-bottom: 0; }
  .ckt-tbl tbody td { padding: 0; border-bottom: 0; }
  .ckt-tbl tbody td.ckt-num {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: 7px; text-align: start;
  }
  .ckt-tbl tbody td.ckt-num::before {
    content: attr(data-lbl);
    font-family: var(--font-fa); font-size: .74rem; color: var(--th-text-3);
  }
  .ckt-kind { margin-inline-end: 0; margin-bottom: 6px; }
  .ckt-title { display: block; }
  .ckt-tbl tfoot tr {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 13px 14px; background: var(--th-surface-2);
  }
  .ckt-tbl tfoot td { padding: 0; background: none; }
}