/* ═══════════════════════════════════════════════════════════════════════
 * سیستم طراحی اطلس — تنها شیوه‌نامهٔ صفحه‌های بازسازی‌شده
 * ═══════════════════════════════════════════════════════════════════════
 *
 * این فایل جانشین `style.css` + `shared.css` + `panel/style.css` +
 * `admin/admin.css` + `tokens.css` + `ui.css` است، نه لایه‌ای روی آن‌ها.
 * صفحه‌ای که بازسازی شده **فقط** این را بار می‌کند. صفحه‌ای که هنوز نوبتش
 * نرسیده، همان شیوه‌نامه‌های قبلی را نگه می‌دارد تا نشکند. هیچ صفحه‌ای هر
 * دو را با هم بار نمی‌کند — ترکیب همان چیزی بود که رابط قبلی را دورگه کرد.
 *
 * هر عدد اینجا از خودِ پروتوتایپ درآمده، با اجرای آن در مرورگر و خواندن
 * `getComputedStyle` — نه با نگاه‌کردن به عکس و حدس‌زدن. مقدارهایی که تفاوت
 * را می‌ساختند و در نسخهٔ قبلیِ من غلط بودند:
 *
 *   متن بدنه   ۱۶px / ۱٫۸۵   (نه ۱۳ یا ۱۴)
 *   تیتر صفحه  ۳۴px / ۹۰۰    (نه ۲۸)
 *   کنترل      ۴۲px          (نه ۳۰ یا ۳۶)
 *   دکمه       ۱۵px / ۷۰۰    (نه ۱۲٫۵ / ۶۰۰)
 *
 * چهار عدد بالا تنهایی کافی بودند که رابط «همان قدیمی، رنگ‌شده» به‌نظر برسد.
 */

/* ───────────────────────────────────────────────────────────── توکن‌ها */
:root {
  /* نردبان خنثی — گرمِ کاغذی (hue 85)، نه خاکستریِ سرد */
  --n-100: #fbfaf8; --n-100: oklch(0.985 0.004 85);
  --n-200: #f3f1ee; --n-200: oklch(0.955 0.005 85);
  --n-300: #e4e1dc; --n-300: oklch(0.900 0.006 85);
  --n-400: #c9c5be; --n-400: oklch(0.820 0.007 85);
  --n-500: #96918a; --n-500: oklch(0.660 0.008 85);
  --n-600: #6e6a64; --n-600: oklch(0.520 0.008 85);
  --n-700: #514e49; --n-700: oklch(0.400 0.010 85);
  --n-800: #35322e; --n-800: oklch(0.280 0.012 85);
  --n-900: #1f1d1a; --n-900: oklch(0.180 0.014 85);

  /* لنگر رنگی: فیروزه‌ای عمیق */
  --a-100: #e8f7f7; --a-100: oklch(0.965 0.018 200);
  --a-200: #cfeeef; --a-200: oklch(0.925 0.035 200);
  --a-300: #a5dbdd; --a-300: oklch(0.850 0.060 200);
  --a-400: #6ec1c5; --a-400: oklch(0.740 0.090 200);
  --a-500: #3f9fa6; --a-500: oklch(0.620 0.100 200);
  --a-600: #17828b; --a-600: oklch(0.530 0.110 200);
  --a-700: #00656d; --a-700: oklch(0.450 0.100 202);
  --a-800: #004c54; --a-800: oklch(0.360 0.080 205);
  --a-900: #00363c; --a-900: oklch(0.270 0.060 208);

  /* سه رنگ معنادار — هر کدام یک معنی، هیچ‌کدام تزئینی */
  --ok:        #35704a; --ok:        oklch(0.380 0.090 150);
  --ok-soft:   #e3f3e7; --ok-soft:   oklch(0.950 0.040 150);
  --warn:      #7a5410; --warn:      oklch(0.420 0.130 70);
  --warn-soft: #fdf0d8; --warn-soft: oklch(0.960 0.040 80);
  --danger:    #a52f28; --danger:    oklch(0.450 0.160 25);
  --danger-soft:#fbe6e3; --danger-soft: oklch(0.960 0.030 25);

  /* سطح و متن */
  --surface: #fefdfc; --surface: oklch(0.995 0.002 85);
  /* ★ کاغذِ ستون کار یک پله روشن‌تر از --n-200 است. در پروتوتایپ عمداً بین
     سطحِ کارت و زمینهٔ صفحه می‌نشیند تا کارت روی آن جدا دیده شود. */
  --paper:   #f7f5f2; --paper:   oklch(0.965 0.005 85);
  --bg:      var(--n-200);
  --ink:     #211f1c; --ink: oklch(0.220 0.012 85);
  --ink-2:   var(--n-700);
  --ink-3:   var(--n-600);
  --line:    var(--n-300);
  --line-2:  var(--n-400);

  /* زمینهٔ تیره — برای ریل ثبت‌نام و صفحه‌های ورود (hue 240، سرد) */
  --dark-1: #0d1117; --dark-1: oklch(0.155 0.010 240);
  --dark-2: #141a21; --dark-2: oklch(0.190 0.010 240);
  --dark-3: #1d242c; --dark-3: oklch(0.245 0.012 240);
  --dark-4: #2b333d; --dark-4: oklch(0.320 0.013 240);
  --dark-ink:  #f2f4f6; --dark-ink:  oklch(0.960 0.004 240);
  --dark-ink2: #b3b9c0; --dark-ink2: oklch(0.740 0.008 240);
  --dark-ink3: #8b929a; --dark-ink3: oklch(0.600 0.010 240);
  --dark-accent: #7fd3d8; --dark-accent: oklch(0.790 0.080 196);

  /* فاصله — عدد صحیح، ضریب ۴ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* شعاع */
  --r-sm: 6px;    /* نشان کوچک */
  --r:    8px;    /* دکمه، فیلد، تب */
  --r-md: 10px;
  --r-lg: 12px;   /* کارت */
  --r-pill: 999px;

  /* ارتفاع کنترل */
  --h-sm: 36px;   /* کنش داخل سطر */
  --h:    42px;   /* دکمه و فیلد معمولی */
  --h-lg: 49px;   /* فیلد قهرمانِ صفحه */

  --shadow-sm: 0 1px 2px rgba(25, 22, 16, .06);
  --shadow-md: 0 4px 16px rgba(25, 22, 16, .10);
  --ring: 0 0 0 3px var(--a-200);
}

/* ─────────────────────────────────────────────────────────── پایه */
*, *::before, *::after { box-sizing: border-box; }

html { direction: rtl; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Outfit', 'Yekan Bakh FaNum', system-ui, sans-serif;
  font-size: 16px;              /* ★ پیش‌فرضِ بدنه، نه ۱۳ */
  line-height: 1.85;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure { margin: 0; }
/* لاتینِ تیترها از Poppins، فارسی‌اش از «یکان بخ» — دلیلِ ترتیب در fonts.css */
h1, h2, h3, h4, .t-hero, .t-h1, .brand b {
  font-family: 'Poppins', 'Yekan Bakh FaNum', system-ui, sans-serif;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

/* عدد و کد در ستون نلغزند */
.mono, time, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; }

/* ─────────────────────────────────────────────── مقیاس تایپوگرافی */
.t-hero  { font-size: 44px; font-weight: 900; line-height: 1.15; }
.t-h1    { font-size: 34px; font-weight: 900; line-height: 1.2; }
.t-h2    { font-size: 26px; font-weight: 700; line-height: 1.25; }
.t-h3    { font-size: 20px; font-weight: 700; line-height: 1.3; }
.t-body  { font-size: 16px; font-weight: 400; line-height: 1.85; }
.t-ctl   { font-size: 15px; font-weight: 400; line-height: 1.5; }
.t-label { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--n-800); }
.t-cap   { font-size: 12.5px; font-weight: 400; line-height: 1.6; color: var(--ink-3); }
.t-eyebrow {
  font-size: 12px; font-weight: 700; line-height: 1.4;
  color: var(--a-700); letter-spacing: .03em;
}
p { text-wrap: pretty; }
.muted { color: var(--ink-3); }
.muted-2 { color: var(--n-500); }

/* ────────────────────────────────────────────────────────── دکمه */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  height: var(--h); padding-inline: 20px;
  border: 1px solid transparent; border-radius: var(--r);
  font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .13s, border-color .13s, color .13s;
}
.btn:disabled { cursor: not-allowed; background: var(--n-200);
                border-color: var(--n-300); color: var(--n-500); font-weight: 400; }
.btn:focus-visible { outline: 0; box-shadow: var(--ring); }

.btn-primary { background: var(--a-700); color: var(--surface); }
.btn-primary:hover:not(:disabled) { background: var(--a-800); }

.btn-line { background: var(--surface); border-color: var(--line-2);
            color: var(--n-800); font-weight: 500; }
.btn-line:hover:not(:disabled) { border-color: var(--a-700); color: var(--a-700); }

.btn-quiet { background: none; border-color: transparent;
             color: var(--ink-3); font-weight: 500; padding-inline: 12px; }
.btn-quiet:hover:not(:disabled) { background: var(--n-200); color: var(--ink); }

.btn-danger { background: none; border-color: transparent;
              color: var(--danger); font-weight: 500; padding-inline: 12px; }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }

/* دکمهٔ داخل سطرِ فهرست: یک پله کوچک‌تر از دکمهٔ مستقل، تا سطر را
   نکِشد. مقدارها از پروتوتایپ: ۳۸ پیکسل، پدینگ افقی ۱۸، متن ۱۴٫۵. */
.btn-sm { height: 38px; padding-inline: 18px; font-size: 14.5px; }
.btn-block { width: 100%; }

/* دکمهٔ تیره — روی زمینهٔ کهربایی حالت «در انتظار» */
.btn-warn { background: var(--warn); color: #fff; }
.btn-warn:hover:not(:disabled) { background: oklch(0.34 0.11 70); }

/* ───────────────────────────────────────────────────────── فیلد */
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 500; color: var(--n-800); }
.field > .hint { font-size: 12.5px; color: var(--ink-3); }
/* ★ `.fhint` در جاوااسکریپت ساخته می‌شد («اول استان را انتخاب کنید»، راهنمای
   صنایع هدف) ولی هیچ‌جا تعریف نشده بود — متنِ راهنما به اندازهٔ خودِ برچسب
   بزرگ و پررنگ دیده می‌شد و با آن اشتباه می‌شد. */
.field > .fhint, .fhint { display: block; font-size: 12.5px; line-height: 1.7;
                          color: var(--ink-3); }

.input, .select, .textarea {
  width: 100%; height: var(--h);
  padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px;
}
.textarea { height: auto; min-height: 104px; padding: 11px 12px; line-height: 1.8;
            resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--n-500); }
.input:focus, .select:focus, .textarea:focus {
  outline: 0; border-color: var(--a-500); box-shadow: var(--ring);
}
.input:disabled, .select:disabled { background: var(--n-200); color: var(--ink-3); }
.input-lg { height: var(--h-lg); padding: 0 14px; font-size: 16px; }

/* خطا: مرز و زمینهٔ قرمزِ ملایم + جملهٔ زیر فیلد */
.field[data-err] > :is(.input, .select, .textarea) {
  border-color: var(--danger); background: oklch(0.995 0.010 25);
}
.field[data-err]::after {
  content: attr(data-err);
  font-size: 12.5px; line-height: 1.6; color: var(--danger);
}

/* ────────────────────────────────────────────────────────── کارت */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.card-tight { padding: var(--s4); }
.card-flush { padding: 0; overflow: hidden; }
.card-h { display: flex; align-items: flex-start; gap: var(--s3);
          margin-block-end: var(--s4); }
.card-h h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.card-h .sub { display: block; font-size: 13px; color: var(--ink-3);
               margin-block-start: 2px; }
.card-dashed { border-style: dashed; border-color: var(--line-2);
               background: none; border-radius: var(--r-md); }

/* ───────────────────────────────────────────────────────── نشان */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border: 0; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: var(--n-300); color: var(--n-800);
}
.tag-ok     { background: var(--ok-soft);     color: var(--ok); }
.tag-warn   { background: var(--warn-soft);   color: var(--warn); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.tag-accent { background: var(--a-200);       color: var(--a-900); }
.tag-quiet  { background: var(--n-200);       color: var(--ink-3); font-weight: 500; }

/* ─────────────────────────────────────────────────────── اعلان */
/* ★ اعلان `display:flex` بود و هر فرزندش — از جمله متنِ خام و `<b>` و
   `<br>` — یک آیتمِ جدا می‌شد؛ جمله تکه‌تکه و بی‌ترتیب می‌ریخت. حالا جریانِ
   متنی عادی است و نقطهٔ کنارش با `position` می‌نشیند، نه با flex. */
.note {
  display: block; position: relative;
  padding: 13px 15px; padding-inline-start: 30px;
  border-radius: var(--r-md); font-size: 14px; line-height: 1.8;
  background: var(--n-200); color: var(--ink-2);
}
.note::before { content: ''; position: absolute;
                inset-inline-start: 14px; inset-block-start: 21px;
                width: 7px; height: 7px; border-radius: var(--r-pill);
                background: currentColor; opacity: .55; }
.note-ok   { background: var(--ok-soft);     color: var(--ok); }
.note-warn { background: var(--warn-soft);   color: var(--warn); }
.note-bad  { background: var(--danger-soft); color: var(--danger); }
.note-info { background: var(--a-100);       color: var(--a-900); }

/* ──────────────────────────────────────────────────── قرص و تراشه */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--h-sm); padding-inline: 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  white-space: nowrap;
}
.pill:hover { border-color: var(--line-2); }
.pill.on { background: var(--n-900); border-color: var(--n-900);
           color: var(--n-100); font-weight: 700; }
.pill b { font-weight: 700; opacity: .7; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 0; border-radius: var(--r-pill);
  background: var(--a-100); color: var(--a-900);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip .x { font-size: 15px; line-height: 1; opacity: .55; }
.chip:hover .x { opacity: 1; }
.chip-add { background: none; border: 1px dashed var(--line-2); color: var(--ink-3); }

/* ───────────────────────────────────────────── نوار بالای صفحه */
.topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 28px; flex: none;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none;
         text-decoration: none; color: inherit; }
.brand b { font-size: 17px; font-weight: 900; }
.mark {
  width: 30px; height: 30px; flex: none; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  background: var(--a-700); color: var(--surface);
  font-size: 15px; font-weight: 900;
}
.mark-lg { width: 34px; height: 34px; font-size: 17px; }

.nav { display: flex; gap: 4px; min-width: 0; overflow-x: auto;
       scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a, .nav button {
  position: relative; display: inline-flex; align-items: center;
  height: var(--h-sm); padding-inline: 14px;
  border: 0; border-radius: var(--r); background: none;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.nav a:hover, .nav button:hover { background: var(--n-200); color: var(--ink); }
.nav .on { background: var(--a-200); color: var(--a-900); font-weight: 700; }
.nav .dot { position: absolute; inset-block-start: 4px; inset-inline-end: 6px;
            width: 6px; height: 6px; border-radius: var(--r-pill);
            background: var(--warn); display: none; }
.nav .dot.has { display: block; }

.spacer { flex: 1 1 auto; min-width: 8px; }

/* ★ نویسهٔ «›» در فونت فارسی شبیه فلش نیست، شبیه یک پرانتزِ باریک است —
   همان چیزی که در فهرست اطلس هم دیده شد. هرجا «بازگشت» داریم، chevron
   واقعی می‌نشیند: از رنگِ متن ارث می‌برد و در راست‌به‌چپ به سمت درست
   (راست) اشاره می‌کند. */
.ico-back { width: 15px; height: 15px; flex: none; }

/* ★ «دیدن اطلس» پیوندِ متنیِ لخت بود، کنارِ «تغییر رمز» و «خروج» که هر دو
   دکمه‌اند. سه چیزِ هم‌ردیف با دو ظاهرِ متفاوت، نوار را نامرتب نشان می‌داد و
   خودِ پیوند کم‌اهمیت‌تر از آنچه هست به نظر می‌رسید. حالا `btn btn-line` است:
   کادر دارد، و کادرِ خطی (نه پُر) می‌گوید این تنها دکمه‌ای است که از پنل
   بیرون می‌برد. کلاس `.at-link` جایی نمانده، پس برداشته شد. */

/* ★ فاصله‌ها اینجا *فیزیکی* بودند (`padding: 5px 6px 5px 14px`) و در صفحهٔ
   راست‌به‌چپ وارونه می‌افتادند: سمتِ متن ۶ پیکسل می‌گرفت و سمتِ آواتار ۱۴،
   یعنی نام به لبه می‌چسبید و آواتار در فضای خالی شناور بود. با ویژگی‌های
   منطقی، «سمتِ متن» و «سمتِ آواتار» در هر دو جهت درست می‌مانند.
   هم‌ترازیِ متن هم `end` بود که در RTL یعنی چپ — نام و نقش به هم نمی‌خوردند. */
.user {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding-block: 5px;
  padding-inline-start: 12px;      /* سمتِ متن */
  padding-inline-end: 5px;         /* سمتِ آواتار */
  border: 1px solid var(--line); border-radius: var(--r-pill);
}
.user .nm { line-height: 1.3; text-align: start; }
.user .nm b { display: block; font-size: 13.5px; font-weight: 700; }
.user .nm small { display: block; font-size: 11.5px; color: var(--ink-3); }
.avatar {
  width: 28px; height: 28px; flex: none; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--n-300); color: var(--n-700); font-size: 11px; font-weight: 700;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ───────────────────────────────────────────────── بدنهٔ صفحه */
.page { display: flex; flex-direction: column; min-height: 100%; }
.main { flex: 1; padding: var(--s6) 28px var(--s7); max-width: 1500px;
        margin-inline: auto; width: 100%; }
.vhead { display: flex; align-items: flex-end; justify-content: space-between;
         gap: var(--s5); flex-wrap: wrap; padding-block-end: var(--s5); }
.vhead .vtitle { min-width: 0; flex: 1 1 320px; }
.vhead h1 { font-size: 34px; font-weight: 900; line-height: 1.2;
            overflow-wrap: anywhere; }
.vhead .sub { display: block; margin-block-start: 5px; font-size: 15px;
              color: var(--ink-2); }
.vhead .acts { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
/* ★ `.select` و `.input` سراسری `width: 100%` دارند — درست برای داخل یک
   فیلد، ولی داخل نوار کنش‌های تیتر یعنی یک آیتمِ فلکسی که تمام عرض را
   می‌گیرد و بقیه را به سطر بعد می‌راند. در نمای «کاربران» همین باعث شده بود
   فیلتر نقش‌ها یک سطر کامل بگیرد و «کاربر جدید» بیفتد سطر سوم. */
.vhead .acts .select, .vhead .acts .input { width: auto; }
.vhead .acts .select { min-width: 140px; max-width: 180px; }
/* نوار کنش‌ها نباید فشرده شود تا داخلش بشکند؛ اگر جا کم آمد، *تیتر* باریک
   می‌شود — نه اینکه دکمهٔ «کاربر جدید» بیفتد سطر بعد. در دسکتاپ صریحاً
   نمی‌شکند: عرضِ ذاتیِ یک ظرفِ شکننده قابل اتکا نیست و کروم آن را کمی
   کمتر از جمعِ فرزندان حساب می‌کرد، پس دکمه می‌افتاد سطر دوم. */
/* ★ `flex: none` بی‌قید، در ۳۹۰ پیکسل نوار را از لبهٔ چپ بیرون می‌انداخت:
   نه می‌شکست و نه کوچک می‌شد. فقط از ۷۶۸ به بالا اعمال می‌شود؛ در موبایل
   همان رفتار قبلی (شکستن) درست است. */
@media (min-width: 768px) {
  .vhead .acts { flex: none; flex-wrap: nowrap; }
  .vhead .vtitle { flex: 1 1 240px; }
}

.stack   { display: grid; gap: var(--s4); }
.stack-5 { display: grid; gap: var(--s5); }
.row     { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.grid-2  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
           gap: var(--s4); }
.wide    { grid-column: 1 / -1; }

/* ───────────────────────────────────────── کاشی عدد (KPI) */
.kpis { display: flex; gap: var(--s3); flex-wrap: wrap; }
.kpi { flex: none; min-width: 104px; padding: 12px 18px;
       border: 1px solid var(--line); border-radius: var(--r-md);
       background: var(--surface); }
.kpi b { display: block; font-size: 26px; font-weight: 900; line-height: 1.2; }
.kpi span { display: block; font-size: 12.5px; color: var(--ink-3); }
.kpi.hot { border-color: var(--a-300); background: var(--a-100); }
.kpi.hot b { color: var(--a-800); }

/* ── گام‌شمار ─────────────────────────────────────────────────────
   ★ هم صفحهٔ ثبت‌نام دارد، هم «ورود از اکسل». یک تعریف، نه دو تا که با
   اولین ویرایش از هم دور بیفتند. وضعیت را می‌گوید، دکمه نیست. */
.steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
         margin-block-end: var(--s5); }
.steps li { display: flex; align-items: center; gap: 9px;
            /* ★ ‎--n-500‎ روی کاغذ ۲٫۸:۱ می‌داد — گامِ انجام‌نشده کم‌رنگ است،
               ولی نه تا حدی که خوانده نشود. */
            font-size: 13.5px; color: var(--ink-3); }
.steps li::after { content: ''; width: 26px; height: 1px; background: var(--line-2);
                   margin-inline-start: 1px; }
.steps li:last-child::after { display: none; }
/* ★ ‎--n-600‎ روی ‎--n-300‎ نسبت ۴٫۰۸ می‌داد — زیر حد. شمارهٔ گام کوچک و
   پررنگ است ولی همچنان متن است و باید خوانده شود. */
.steps i { width: 26px; height: 26px; flex: none; border-radius: var(--r-pill);
           display: flex; align-items: center; justify-content: center;
           background: var(--n-300); color: var(--n-800);
           font-size: 12.5px; font-weight: 700; font-style: normal; }
.steps li.on { color: var(--ink); font-weight: 700; }
.steps li.on i { background: var(--a-700); color: var(--surface); }
.steps li.past i { background: var(--a-200); color: var(--a-800); }

/* ──────────────────────────────────────────────────── تب داخل کارت */
.tabs { display: flex; gap: var(--s5); border-block-end: 1px solid var(--line);
        padding-inline: var(--s5); }
.tabs button {
  border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500;
  color: var(--ink-3); padding: 14px 0; cursor: pointer;
  border-block-end: 2px solid transparent; margin-block-end: -1px;
}
.tabs button[aria-selected="true"] { color: var(--a-800); font-weight: 700;
                                     border-block-end-color: var(--a-700); }

/* ────────────────────────────────────────────────── فهرست سطری */
.list { display: block; }
.list > * { border-block-end: 1px solid var(--line); }
.list > *:last-child { border-block-end: 0; }

.lrow {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; padding: var(--s4);
  border-inline-start: 3px solid transparent;
  background: none; font: inherit; text-align: start; cursor: pointer;
  color: inherit;
}
.lrow:hover { background: var(--n-100); }
.lrow[aria-current="true"] { background: var(--a-100);
                             border-inline-start-color: var(--a-700); }
.lrow .nm { flex: 1; min-width: 0; }
.lrow .nm b { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; }
.lrow .nm .meta { display: block; font-size: 13px; color: var(--ink-3); }
.lrow .age { flex: none; font-size: 12.5px; color: var(--ink-3); }

/* مربع لوگو/نشانگر کنار سطر */
.thumb { width: 44px; height: 44px; flex: none; border-radius: var(--r-md);
         background: var(--n-200); display: flex; align-items: center;
         justify-content: center; font-size: 11px; color: var(--n-500);
         overflow: hidden; }

/* ─────────────────────────────────────────────────────── جدول */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 14px 16px; text-align: start; }
.table thead th {
  font-size: 12.5px; font-weight: 700; color: var(--ink-3);
  background: var(--n-100); border-block-end: 1px solid var(--line);
  white-space: nowrap;
}
.table tbody tr { border-block-end: 1px solid var(--line); }
.table tbody tr:last-child { border-block-end: 0; }
.table tbody tr:hover { background: var(--n-100); }
.table td { font-size: 14.5px; }
.table .nm b { display: block; font-size: 15.5px; font-weight: 700; }
.table .nm small { display: block; font-size: 12.5px; color: var(--ink-3); }
.table tr[data-diff="soft"] { background: var(--warn-soft); }
.table tr[data-diff="hard"] { background: var(--danger-soft); }
.table tr[data-diff] td:last-child { font-weight: 700; }

.pager { display: flex; align-items: center; justify-content: space-between;
         gap: var(--s4); padding: var(--s4); flex-wrap: wrap; }
.pager .pages { display: flex; gap: 6px; }
.pager .pages button { min-width: 36px; height: 36px; padding-inline: 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  font: inherit; font-size: 14px; cursor: pointer; }
.pager .pages button.on { background: var(--n-900); border-color: var(--n-900);
                          color: var(--n-100); font-weight: 700; }

/* ═══════════════ جدولِ شبکه‌ای ═══════════════
   سر و سطر یک شبکه‌اند تا ستون‌ها با عرضِ محتوا نلغزند. ستون‌ها را هر صفحه
   خودش با `--cols` می‌گوید — نه اینکه هر جا یک قاعدهٔ جدا بنویسد. */
.dhead, .drow { display: grid; align-items: center; grid-template-columns: var(--cols); }
.dhead { background: var(--n-100); border-block-end: 1px solid var(--line); }
.dhead > div { padding: 12px 16px; font-size: 12.5px; font-weight: 700;
               color: var(--ink-3); white-space: nowrap; }
.drow { border-block-end: 1px solid var(--line); }
.drow:last-child { border-block-end: 0; }
.drow:hover { background: var(--n-100); }
.drow > div { padding: 14px 16px; font-size: 14.5px; min-width: 0;
              display: flex; align-items: center; gap: 8px; }
.drow .nm b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.drow .nm small { display: block; font-size: 12.5px; color: var(--ink-3); }
.drow .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acts-cell { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* کلیدهای تقسیم‌شده — قرص، نه جعبهٔ به‌هم‌چسبیده */
.seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-pill);
       background: var(--n-200); }
.seg button { height: 34px; padding-inline: 14px; border: 0; border-radius: var(--r-pill);
              background: none; font: inherit; font-size: 13.5px; font-weight: 500;
              color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.seg button.on { background: var(--surface); color: var(--a-900); font-weight: 700;
                 box-shadow: var(--shadow-sm); }
.seg b { font-weight: 700; opacity: .65; }

/* پنجرهٔ گفتگو */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center;
         justify-content: center; padding: 24px;
         background: color-mix(in srgb, var(--n-900) 45%, transparent);
         backdrop-filter: blur(2px); overflow: auto; }
.modal-card { width: min(520px, 100%); box-shadow: var(--shadow-md);
              max-height: calc(100vh - 48px); overflow: auto; }

@media (max-width: 1023px) {
  /* جدول هرگز افقی اسکرول نمی‌شود — سطر به کارتِ دوستونی می‌رود */
  .dhead { display: none; }
  .drow { grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 6px 14px; padding: 15px 16px; align-items: start; }
  .drow > div { padding: 0; min-height: 24px; justify-content: space-between; }
  .drow > div::before { content: attr(data-l); flex: none; font-size: 12px;
                        color: var(--ink-3); }
  .drow > div:first-child { grid-column: 1 / -1; justify-content: flex-start;
                            font-size: 15.5px; font-weight: 700; }
  .drow > div:first-child::before { display: none; }
  .acts-cell { grid-column: 1 / -1; justify-content: flex-start; padding-block-start: 4px; }
  .acts-cell::before { display: none; }
}
@media (max-width: 768px) {
  .drow { grid-template-columns: minmax(0, 1fr); }
  .acts-cell .btn { min-height: 44px; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-card { width: 100%; max-height: 92vh;
                border-radius: var(--r-lg) var(--r-lg) 0 0; }
}

/* ═══════════════════════ چهار حالتِ اجباری هر نما ═══════════════════════
   بخش ۸ سند: هیچ نمایی بدون این چهار حالت تمام‌شده نیست. */

/* خالی — تیتر، جمله، و یک قدم بعدیِ قابلِ کلیک */
.state { display: flex; flex-direction: column; align-items: flex-start;
         gap: var(--s3); padding: 34px 28px; }
.state .icon { width: 44px; height: 44px; border-radius: var(--r-md);
               background: var(--a-200); flex: none; }
.state h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.state p { font-size: 15px; line-height: 1.75; color: var(--ink-2); max-width: 46ch; }
.state .acts { display: flex; gap: var(--s2); flex-wrap: wrap; }
.state-center { align-items: center; text-align: center; }
.state-center p { margin-inline: auto; }

.state-error .icon  { background: var(--danger-soft); }
.state-pending { background: var(--warn-soft); border-color: transparent;
                 border-radius: var(--r-lg); }
.state-pending h3, .state-pending p { color: var(--warn); }

/* بارگذاری — اسکلتِ همان چیدمانی که می‌آید، نه چرخ‌فلک وسط صفحه */
.skel { display: grid; gap: 14px; padding: 34px 28px; }
.skel i { display: block; height: 14px; border-radius: var(--r-sm);
          background: var(--n-300); animation: shimmer 1.4s ease-in-out infinite; }
.skel i.w80 { width: 80%; } .skel i.w60 { width: 60%; } .skel i.w40 { width: 40%; }
.skel i.tall { height: 22px; }
.skel .srow { display: grid; gap: 8px; padding-block: 12px;
              border-block-end: 1px solid var(--line); }
.skel .srow:last-child { border-block-end: 0; }
@keyframes shimmer { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .skel i { animation: none; } }

/* ─────────────────────────────────────────────── نوار کنش چسبیده */
.actionbar {
  position: sticky; inset-block-end: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: 14px 28px; margin-block-start: var(--s6);
  background: var(--surface); border-block-start: 1px solid var(--line);
}
.actionbar .note-line { flex: 1; min-width: 200px; font-size: 13px;
                        color: var(--ink-3); }
/* ★ وقتی چیزی ذخیره‌نشده مانده، نوار باید *دیده* شود. رنگِ کم‌رنگِ همیشگی
   یعنی کاربر فرم را پر می‌کند، تب را می‌بندد، و بعد می‌پرسد «چرا ذخیره
   نشد؟» — که دقیقاً همان چیزی است که اتفاق افتاد. */
.actionbar.is-dirty { border-block-start-color: var(--warn);
                      box-shadow: 0 -6px 18px -12px var(--warn); }
.actionbar.is-dirty .note-line { color: var(--warn); font-weight: 500; }

/* ─────────────────────────────────────────────────── نوار پیشرفت */
.bar { height: 8px; border-radius: var(--r-pill); background: var(--n-300);
       overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--a-700);
           border-radius: inherit; }

/* چک‌لیست کامل‌بودن */
.checks { display: grid; gap: 9px; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.checks .box { width: 15px; height: 15px; flex: none; border-radius: 4px;
               border: 1.5px solid var(--n-400); }
.checks .done { color: var(--ink-3); text-decoration: line-through; }
.checks .done .box { background: var(--a-700); border-color: var(--a-700); }

/* ══════════════════════════ زمینهٔ تیره ══════════════════════════
   ریلِ ثبت‌نام و صفحه‌های ورود روی زمینهٔ سرد می‌نشینند — کاغذ گرم آنجا
   کدر می‌شود. این کلاس روی هر ظرفی بیاید، درونش وارونه می‌شود. */
.dark { background: var(--dark-1); color: var(--dark-ink); }
.dark .t-eyebrow { color: var(--dark-accent); }
.dark .muted, .dark .t-cap { color: var(--dark-ink2); }
.dark .card { background: var(--dark-2); border-color: var(--dark-4);
              color: var(--dark-ink); }
.dark .field > span { color: var(--dark-ink2); }
.dark .input, .dark .select, .dark .textarea {
  background: var(--dark-1); border-color: var(--dark-4); color: var(--dark-ink);
}
.dark .input::placeholder { color: var(--dark-ink3); }
.dark .input:focus { border-color: var(--dark-accent);
                     box-shadow: 0 0 0 3px var(--dark-4); }
.dark .btn-primary { background: var(--a-400); color: var(--dark-1); }
.dark .btn-primary:hover:not(:disabled) { background: var(--a-300); }
.dark .btn-line { background: none; border-color: var(--dark-4);
                  color: var(--dark-ink2); }
.dark .btn-line:hover:not(:disabled) { border-color: var(--dark-accent);
                                       color: var(--dark-accent); }
.dark a { color: var(--dark-accent); }
.dark .note { background: var(--dark-3); color: var(--dark-ink2); }
.dark .note-warn { background: oklch(0.26 0.035 70); color: oklch(0.90 0.09 78); }
.dark .list > * { border-color: var(--dark-4); }

/* ═════════════════════════ سه عرض ═════════════════════════
   نقطه‌های شکست: ۷۶۸ و ۱۰۲۳. طراحی از همان اول ریسپانسیو است — نه چند
   media query در انتها. */

@media (max-width: 1023px) {
  .main { padding: var(--s5) 20px var(--s6); }
  .vhead h1 { font-size: 28px; }
  .grid-2 { gap: var(--s3); }
  /* ★ نوار بالا در ۸۳۴ پیکسل جا نمی‌شد و چون جهت راست‌به‌چپ است، تراشهٔ
     کاربر از لبهٔ **چپ** بیرون می‌زد — جایی که scrollWidth نمی‌بیند.
     ناوبری به سطر خودش می‌رود و بقیه در سطر اول جا می‌شوند. */
  .topbar { flex-wrap: wrap; gap: var(--s3); padding: 12px 20px; }
  .nav { order: 3; width: 100%; }
  .user { flex-shrink: 1; min-width: 0; }
  .user .nm { min-width: 0; overflow: hidden; }
  .user .nm b, .user .nm small { overflow: hidden; text-overflow: ellipsis;
                                 white-space: nowrap; }
}

@media (max-width: 768px) {
  body { font-size: 15px; }
  .topbar { padding: 10px 14px; gap: var(--s3); flex-wrap: wrap; }
  .nav { order: 3; width: 100%; }
  .user .nm { display: none; }
  .main { padding: 20px 14px var(--s6); }
  .vhead { padding-block-end: var(--s4); }
  .vhead h1 { font-size: 24px; }
  .vhead .sub { font-size: 14px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--s4); }
  .state, .skel { padding: var(--s5) var(--s4); }
  .table th, .table td { padding: 12px; }
  .actionbar { padding: 12px 14px; }
  .tabs { padding-inline: var(--s4); gap: var(--s4); overflow-x: auto;
          scrollbar-width: none; }
  .steps li span { display: none; }        /* در موبایل فقط شماره‌ها */
  .steps li.on span { display: inline; }
  .steps li::after { width: 16px; }
  /* ★ در موبایل هیچ چیزِ قابلِ لمسی زیر ۴۴ پیکسل نباشد. */
  .btn, .pill, .nav a, .nav button, .input, .select { min-height: 44px; }
  .btn-sm { min-height: 44px; }
}

/* ═══════════════════════════ نمای تیره ═══════════════════════════
 *
 * پروتوتایپ کارتابل را در نمای تیره هم کشیده — یعنی این یک حالتِ واقعی است،
 * نه ایده. اصلِ کار همان است که در آرت‌بوردِ سیستم طراحی نوشته شده:
 * **هیچ نام توکنی عوض نمی‌شود، فقط مقدارها.** پس هیچ کامپوننتی قاعدهٔ
 * جداگانه برای تیره لازم ندارد.
 *
 * دو نکته که در تیره فرق می‌کنند و مقدارشان از پروتوتایپ آمده:
 *   ۱) نردبان خنثی از گرمِ کاغذی (hue 85) به سردِ سرمه‌ای (hue 240) می‌رود.
 *      کاغذِ گرم روی زمینهٔ تیره کدر و چرک دیده می‌شود.
 *   ۲) نردبان فیروزه‌ای روشن‌تر می‌شود؛ ‎--a-700‎ی که روی سفید کنتراست دارد،
 *      روی زمینهٔ تیره تقریباً ناخواناست.
 */
:root[data-theme="dark"] {
  --n-100: oklch(0.155 0.010 240);
  --n-200: oklch(0.195 0.011 240);
  --n-300: oklch(0.245 0.012 240);
  --n-400: oklch(0.320 0.013 240);
  --n-500: oklch(0.450 0.012 240);
  --n-600: oklch(0.600 0.010 240);
  --n-700: oklch(0.740 0.008 240);
  --n-800: oklch(0.870 0.006 240);
  --n-900: oklch(0.960 0.004 240);

  --a-100: oklch(0.250 0.040 200);
  --a-200: oklch(0.320 0.060 200);
  --a-300: oklch(0.400 0.080 200);
  --a-400: oklch(0.500 0.100 200);
  --a-500: oklch(0.600 0.110 200);
  --a-600: oklch(0.700 0.100 198);
  --a-700: oklch(0.790 0.080 196);
  --a-800: oklch(0.870 0.060 194);
  --a-900: oklch(0.940 0.030 192);

  /* سه رنگ معنادار: خودِ رنگ روشن‌تر، زمینهٔ نرمش تیره‌تر */
  --ok:         oklch(0.780 0.110 150);
  --ok-soft:    oklch(0.280 0.050 150);
  --warn:       oklch(0.840 0.100 60);
  --warn-soft:  oklch(0.260 0.035 70);
  --danger:     oklch(0.800 0.110 25);
  --danger-soft:oklch(0.260 0.040 25);

  --surface: oklch(0.195 0.011 240);
  --paper:   oklch(0.155 0.010 240);
  --bg:      oklch(0.155 0.010 240);
  --ink:     oklch(0.960 0.004 240);
  --ink-2:   oklch(0.740 0.008 240);
  --ink-3:   oklch(0.680 0.010 240);   /* در تیره باید روشن‌تر باشد تا خوانده شود */
  --line:    oklch(0.245 0.012 240);
  --line-2:  oklch(0.320 0.013 240);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --ring: 0 0 0 3px oklch(0.32 0.06 200);

  color-scheme: dark;
}

/* در تیره، نشانِ برند و قرصِ فعال باید روشن‌تر باشند تا خوانده شوند —
   ‎--a-700‎ی که روی کاغذ سفید تیره است، اینجا زمینه می‌شود. */
:root[data-theme="dark"] .mark { background: var(--a-500); color: var(--n-100); }
:root[data-theme="dark"] .btn-primary { background: var(--a-500); color: var(--n-100); }
/* ★ گامِ جاری ‎background: --a-700‎ روی ‎color: --surface‎ بود. در نمای تیره
   هر دو تیره می‌شوند و نسبتشان به ۱٫۲۹ می‌رسد — یعنی عدد داخل دایره عملاً
   نامرئی. همان جفتی را می‌گیرد که دکمهٔ اصلی در نمای تیره می‌گیرد. */
:root[data-theme="dark"] .steps li.on i { background: var(--a-500); color: var(--n-100); }
:root[data-theme="dark"] .steps i { background: var(--dark-3); color: var(--dark-ink2); }
:root[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: var(--a-600); }
:root[data-theme="dark"] .nav .on { background: var(--a-200); color: var(--a-900); }
:root[data-theme="dark"] .pill.on,
:root[data-theme="dark"] .wb-tab.on,
:root[data-theme="dark"] .wb-tab[aria-selected="true"] {
  background: var(--n-400); color: var(--n-900);
}
/* اسکلتِ بارگذاری در تیره نباید سفید بزند */
:root[data-theme="dark"] .skel i { background: var(--n-300); }

/* کسی که نمای تیرهٔ سیستم‌عامل را انتخاب کرده و صریحاً روشن نخواسته */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
  }
}

/* دکمهٔ تعویض نما — آیکن و کلمه کنار هم.
   ★ قبلاً فقط یک مربع ۳۴×۳۴ با نویسهٔ ☾ بود: کاربر نمی‌فهمید دکمه است و
   نمی‌دانست زدنش چه می‌کند. حالا کلمه هم هست و اندازه‌اش با بقیهٔ دکمه‌های
   نوار یکی است. */
.theme-btn {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: var(--h-sm); padding-inline: 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: none; color: var(--ink-2);
  font: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; line-height: 1; white-space: nowrap;
}
.theme-btn .ico { font-size: 15px; line-height: 1; }
.theme-btn:hover { border-color: var(--line-2); color: var(--ink);
                   background: var(--n-200); }
.theme-btn:focus-visible { outline: 2px solid var(--a-500); outline-offset: 2px; }

/* صفحه‌های ورود و ثبت‌نام نوار بالا ندارند؛ آنجا دکمه شناور می‌شود تا
   چیدمانِ کارتِ وسط را جابه‌جا نکند */
.theme-btn-float {
  position: fixed; inset-block-start: 16px; inset-inline-start: 16px; z-index: 40;
  background: var(--surface);
}

/* زیر ۵۲۰ پیکسل جا تنگ است — کلمه می‌رود و فقط آیکن می‌ماند */
@media (max-width: 520px) {
  .theme-btn { padding-inline: 0; width: var(--h-sm); justify-content: center; }
  .theme-btn .txt { display: none; }
}

/* ═══════════════════════ پیامِ «انجام شد» ═══════════════════════
   ★ این پیام‌ها قبلاً در یک `<span class="t-cap">` گوشهٔ نوار بالا چاپ
   می‌شدند: ۱۲٫۵ پیکسل، رنگِ کم‌رنگِ `--ink-3`، بالای صفحه. کاربر که وسط
   فرم بود و اسکرول کرده بود، هیچ‌وقت نمی‌دیدش — و درست گفت: «باید یه
   پیغامی بده که کاربر متوجه بشه اون کاری که انجام داده ذخیره شده.»

   حالا یک حبابِ شناور است، وسطِ پایینِ صفحه، جایی که چشم بعد از زدنِ دکمه
   همان‌جاست. `z-index` از پنجره‌های مودال (۸۰) بالاتر است، چون خیلی از این
   پیام‌ها دقیقاً پس از کاری داخل یک پنجره می‌آیند — «رمز کپی شد» بی‌فایده
   است اگر پشتِ همان پنجره بماند.

   `aria-live` روی خودِ ظرف است تا صفحه‌خوان هم بشنود، و `pointer-events`
   بسته است تا حباب جلوی کلیکِ بعدی را نگیرد. */
.toast-wrap {
  position: fixed; inset-block-end: 24px; inset-inline: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; padding-inline: 16px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  max-width: min(460px, 100%); padding: 12px 18px;
  border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--n-900); color: var(--n-100);
  font-size: 14px; font-weight: 500; line-height: 1.6;
  box-shadow: var(--shadow-md);
  animation: toast-in .22s cubic-bezier(.2, .8, .3, 1);
}
/* ★ در نمای تیره، `--n-900` و `--n-100` هر دو روشن می‌شوند — یعنی حبابِ
   پیش‌فرض «روشن روی روشن» می‌شد با نسبت کنتراست ۲٫۱۳ (کمینهٔ لازم ۴٫۵).
   سنجیده شد، نه حدس. آنجا حباب یک «سطحِ برجسته» با متنِ معمولی است، که هم
   خوانا است و هم روی صفحهٔ تیره مثل یک وصلهٔ سفید نمی‌زند.
   حالتِ خطا و هشدار رنگِ خودشان را دارند و در هر دو نما درست‌اند. */
:root[data-theme="dark"] .toast {
  background: var(--surface); color: var(--ink); border-color: var(--line-2);
}
/* ★ ولی آن قاعده رنگِ خطا و هشدار را هم می‌بلعید (ویژگیِ بالاتر) و در نمای
   تیره هر سه حباب یک شکل می‌شدند — یعنی «ذخیره شد» و «ذخیره نشد» از هم
   قابل تشخیص نبودند. همان‌جایی که رنگ بیشترین کار را می‌کند. */
:root[data-theme="dark"] .toast-warn {
  background: var(--warn-soft); color: var(--warn); border-color: var(--warn);
}
:root[data-theme="dark"] .toast-bad {
  background: var(--danger-soft); color: var(--danger); border-color: var(--danger);
}
.toast i { flex: none; font-style: normal; font-size: 15px; }
.toast.is-out { animation: toast-out .28s ease forwards; }
/* خطا رنگِ خودش را دارد: «ذخیره شد» و «ذخیره نشد» نباید یک شکل باشند */
.toast-bad { background: var(--danger); color: #fff; }
.toast-warn { background: var(--warn); color: #fff; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px); } }

/* کسی که «حرکت کمتر» خواسته، پیام را بی‌حرکت می‌گیرد — ولی می‌گیرد */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-out { animation: none; }
}

/* ★ توصیف‌گرِ کنارِ نشان. نامِ قبلی («اطلس صنایع ایران») خودش می‌گفت محصول
   چیست؛ «کن‌کاو» نمی‌گوید. کسی که اولین بار می‌آید یک واژهٔ ناآشنا می‌بیند و
   یک نقشه. تا وقتی برند شناخته نشده، توصیف‌گر کنارش می‌ماند — قاعدهٔ
   شناخته‌شدهٔ برندهای غیرتوصیفی. روی موبایل برداشته می‌شود، چون آنجا نوار
   بالا جا ندارد و نام مهم‌تر از توضیح است. */
.brand-tag {
  padding-inline-start: 10px; margin-inline-start: 2px;
  border-inline-start: 1px solid var(--line-2);
  font-size: 12.5px; font-weight: 500; color: var(--ink-3);
  white-space: nowrap;
}
@media (max-width: 900px) { .brand-tag { display: none; } }