/* ============================================================
   اودین مارکتینگ — دیزاین‌سیستمِ گلس‌مورفیسم (Glassmorphism)
   طراحی: پوستهٔ شیشه‌ای روی گرادیانتِ نرم · محتوای پرکنتراست برای خوانایی
   فونت: پیدا (Peyda Pro, FaNum) · برند: سرمه‌ایِ کلاغ #15202B · اکسنت: نارنجی #FE8E10
   ------------------------------------------------------------
   • بدون build و بدون CDN — هیچ درخواستی به بیرون از هاست نمی‌رود.
     آیکون‌ها SVGِ درون‌خطی‌اند (functions.php)، لوگو assets/img/logo.png،
     و فونت از assets/fonts محلی می‌آید. برای اینترنتِ ایران و سناریوی
     اینترنتِ ملی، سایت کاملاً مستقل بالا می‌آید.
   • نام‌کلاس‌ها و متغیرها با مارک‌آپِ موجود سازگارند (مارک‌آپ تغییر نکرد)
   ============================================================ */

/* ----- فونت پیدا (Peyda Pro) — نسخهٔ Farsi Numerals، خودمیزبان -----
   فقط ۵ وزنی که واقعاً استفاده می‌شود (۴۰۰/۵۰۰/۶۰۰/۷۰۰/۸۰۰)، نه هر ۱۰ وزن.
   نسخهٔ FaNum یعنی ارقامِ لاتینِ داخلِ کد (0-9) با شکلِ فارسی رندر می‌شوند،
   بدون اینکه مقدارِ واقعیِ input یا دیتابیس عوض شود.

   font-display:swap تا اگر فونت دیر رسید متن بلافاصله با فونتِ سیستم دیده شود
   (به‌جای متنِ نامرئی تا ۳ ثانیه). */
@font-face{
  font-family:'Peyda'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/PeydaFaNumWeb-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Peyda'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/PeydaFaNumWeb-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Peyda'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/PeydaFaNumWeb-SemiBold.woff2') format('woff2');
}
@font-face{
  font-family:'Peyda'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/PeydaFaNumWeb-Bold.woff2') format('woff2');
}
@font-face{
  font-family:'Peyda'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/PeydaFaNumWeb-ExtraBold.woff2') format('woff2');
}

:root{
  /* ============================================================
     برند — سلسله‌مراتبِ خودِ لوگو: تودهٔ سرمه‌ای، منقارِ نارنجی.
     سرمه‌ای حجم و ساختار می‌سازد (دکمه، منوی فعال، متن)؛
     نارنجی فقط نقطهٔ تأکید است (نشانگر، هاور، فوکوس، نمودار).
     نارنجی هرگز روی چیپ/بجِ وضعیت نمی‌نشیند تا با «هشدار» اشتباه نشود.
     ============================================================ */
  --navy:#15202B; --navy-deep:#09101A; --slate:#394652;
  --orange:#FE8E10; --orange-deep:#DD420B; --amber:#FDBC41;
  --cloud:#F7F9FB; --mist:#E4E9ED; --cool:#687580;

  /* نقش‌ها */
  --brand:var(--navy); --brand-deep:var(--navy-deep); --accent:var(--orange);
  /* حلقهٔ فوکوس عمداً نارنجیِ سوخته است نه Signal Orange:
     کامپوننتِ UI حداقل ۳:۱ می‌خواهد؛ #FE8E10 روی سفید ۲.۳:۱ است و رد می‌شود،
     #DD420B با ۴.۳:۱ قبول است و روی سطحِ سرمه‌ای هم دیده می‌شود. */
  --ring:var(--orange-deep);
  /* نارنجیِ متن جدا از نارنجیِ برند است: #DD420B روی سفید ۴.۳۲:۱ می‌دهد که برای
     متنِ ریز از حدِ ۴.۵ کمی کم است. این نسخهٔ کمی تیره‌تر ۵.۱:۱ می‌دهد.
     برند برای پر/خط، این برای متن و لینک. */
  --accent-text:#C93B08;
  --brand-rgb:21,32,43; --ring-rgb:221,66,11; --danger-rgb:185,28,28;

  /* alias های سازگاری — مارک‌آپ و ۳۰+ ارجاعِ var(--red) دست‌نخورده می‌مانند */
  --red:var(--navy); --red-dark:var(--navy-deep); --red-soft:var(--slate);

  --text:#15202B; --text2:#394652; --text3:#687580; /* هر سه روی سفید ≥۴.۵:۱ */

  /* ----- خطوط و سطوح (سازگاری با مارک‌آپِ inline) ----- */
  --border:rgba(56,70,82,.18); --border-soft:rgba(56,70,82,.10);
  --bg:var(--cloud); --surface:rgba(255,255,255,.62);
  --radius:18px;

  /* ----- وضعیت‌ها ----- */
  --ok-bg:rgba(19,131,51,.12); --ok-text:#0f8a3c;
  /* خطر دیگر مشتقِ قرمزِ برند نیست — حالا که برند سرمه‌ای است، قرمز آزاد شد
     و می‌تواند قرمزِ واقعیِ «خطر» باشد. به رمپِ --st-danger وصل است. */
  --alert-bg:rgba(185,28,28,.10); --alert-text:#b91c1c;
  --alert-row:rgba(185,28,28,.05);

  /* ----- توکن‌های وضعیت محصول (مستقل از قرمزِ برند تا هشدار واقعی گم نشود) -----
     جفتِ متن/پس‌زمینه با کنتراست AA برای متنِ ریزِ بج‌ها */
  --st-ok-text:#15803d;      --st-ok-bg:#f0fdf4;      --st-ok-brd:rgba(21,128,61,.28);
  /* هشدار زردتر شد (amber-700 به‌جای #b45309 نارنجی‌قهوه‌ای) تا از نارنجیِ برند جدا بماند */
  --st-warn-text:#a16207;    --st-warn-bg:#fffbeb;    --st-warn-brd:rgba(253,188,65,.55);
  --st-danger-text:#b91c1c;  --st-danger-bg:#fef2f2;  --st-danger-brd:rgba(185,28,28,.28);
  --st-neutral-text:#475569; --st-neutral-bg:#f1f5f9; --st-neutral-brd:rgba(71,85,105,.24);
  --st-info-text:#1d4ed8;    --st-info-bg:#eff6ff;    --st-info-brd:rgba(29,78,216,.28);

  /* placeholder عمداً کم‌رنگ‌تر از متنِ عادی تا با «مقدارِ پرشده» اشتباه نشود */
  --ph:#b9c1ce;

  /* ----- توکن‌های شیشه ----- */
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.78);
  /* سطحِ مات‌ترِ سفید برای دسکتاپ (خواناییِ بیشتر و ظاهرِ یک‌پارچه) */
  --surface-solid:rgba(255,255,255,.96);
  /* لبهٔ سطح‌ها قبلاً rgba(255,255,255,.65) بود — یعنی بوردرِ سفید روی کارتِ سفید،
     که عملاً نامرئی است. کارت‌ها فقط به یک سایهٔ نرم تکیه کرده بودند و «شناور» به نظر می‌رسیدند.
     Mist یک لبهٔ واقعی می‌دهد بدون اینکه سنگین شود. */
  --glass-brd:var(--mist);
  --glass-shadow:0 10px 34px rgba(31,41,72,.14), 0 2px 8px rgba(31,41,72,.06);
  --glass-shadow-lg:0 20px 60px rgba(31,41,72,.20);
  --blur:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* پس‌زمینهٔ پایه روی html تا در صفحاتِ کوتاه/اسکرولِ اضافه هیچ ناحیهٔ تیره‌ای دیده نشود.
   overflow-x:hidden جلوی اسکرولِ افقی را می‌گیرد که سایدبارِ کشویی (خارج از قاب) ایجاد می‌کرد. */
html{min-height:100%;background:#eaeef2;overflow-x:hidden}
body{
  font-family:'Peyda', Tahoma, 'Segoe UI', system-ui, -apple-system, sans-serif;
  direction:rtl; color:var(--text);
  font-size:14px; line-height:1.75;
  min-height:100vh;
  /* پس‌زمینه عمداً از Cloud کمی تیره‌تر است. با خودِ #F7F9FB جداییِ کارت از صفحه
     ۱.۰۶ می‌شد (تقریباً هیچ) و کل رابط تخت به نظر می‌رسید. این مقادیر ~۱.۱۵ می‌دهند. */
  background:
    radial-gradient(1100px 600px at 90% -10%, #fdf2e3 0%, transparent 50%),
    radial-gradient(900px 600px at -10% 10%, #e8ecf0 0%, transparent 50%),
    linear-gradient(160deg, #eef1f5 0%, #eaeef2 45%, #f2eee9 100%);
}

/* ----- بلاب‌های شناورِ پس‌زمینه (بدون نیاز به مارک‌آپ) ----- */
body::before, body::after{
  content:""; position:fixed; z-index:-1; border-radius:50%;
  filter:blur(90px); opacity:.13; pointer-events:none;
}
body::before{
  width:46vw; height:46vw; top:-8vw; right:-6vw;
  background:radial-gradient(circle at 30% 30%, var(--amber), var(--orange));
  animation:float1 16s ease-in-out infinite;
}
body::after{
  width:40vw; height:40vw; bottom:-10vw; left:-6vw;
  background:radial-gradient(circle at 60% 40%, var(--cool), var(--slate));
  animation:float2 20s ease-in-out infinite;
}
@keyframes float1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-3vw,4vw) scale(1.08)}
}
@keyframes float2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(3vw,-3vw) scale(1.1)}
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{animation:none}
}

a{color:inherit;text-decoration:none;transition:color .15s}

/* ============================================================
   پوستهٔ داشبورد — سایدبارِ عمودی + نوارِ بالای افقی
   ============================================================ */
.app-shell{display:flex;align-items:stretch;min-height:100vh;min-height:100dvh}

/* ---------- سایدبار (ناوبریِ اصلی) ---------- */
.sidebar{
  flex:none;width:250px;align-self:stretch;
  position:sticky;top:0;height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  padding:18px 14px;
  background:var(--surface-solid);
  border-inline-start:1px solid var(--glass-brd);   /* لبهٔ سمتِ راستِ صفحه (RTL) */
  box-shadow:0 0 40px rgba(31,41,72,.05);
  overflow-y:auto;z-index:40;
}
.sidebar .brand{
  display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;
  padding:6px 10px 18px;color:var(--text);
}
.side-nav{display:flex;flex-direction:column;gap:16px;flex:1}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-group-title{
  font-size:11px;font-weight:700;color:var(--text3);
  padding:2px 12px 4px;letter-spacing:.2px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:12px;
  /* لبهٔ شفاف روی همهٔ آیتم‌ها رزرو می‌شود تا نوارِ نارنجیِ حالتِ active جابه‌جاییِ چیدمان ندهد */
  border-inline-start:3px solid transparent;
  font-size:14px;font-weight:600;color:var(--text2);
  transition:background .15s,color .15s;white-space:nowrap;
}
.nav-item .icon{color:var(--text3);flex:none;transition:color .15s}
.nav-item:hover{background:rgba(31,41,72,.05);color:var(--text)}
.nav-item:hover .icon{color:var(--text)}
/* آیتمِ فعالِ منو نارنجیِ پر است — پررنگ‌ترین حضورِ برند در رابط، و همیشه روی صفحه.
   متن و آیکون سرمه‌ای‌اند نه سفید: سفید روی #FE8E10 فقط ۲.۳:۱ می‌دهد و ناخواناست،
   سرمه‌ای روی نارنجی ۷.۱:۱. لبهٔ نارنجیِ سوخته عمق می‌دهد. */
.nav-item.active{
  color:var(--navy);font-weight:800;
  background:linear-gradient(135deg,var(--amber),var(--orange));
  box-shadow:0 6px 16px rgba(254,142,16,.35);
  border-inline-start:3px solid var(--orange-deep);
}
.nav-item.active .icon{color:var(--navy)}
.nav-item:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.side-foot{display:flex;flex-direction:column;gap:2px;padding-top:12px;
  margin-top:8px;border-top:1px solid var(--border-soft)}
.nav-item.danger:hover{background:var(--alert-bg);color:var(--alert-text)}
.nav-item.danger:hover .icon{color:var(--alert-text)}

/* ---------- ستونِ محتوا ---------- */
.app-content{flex:1;min-width:0;display:flex;flex-direction:column}

/* ---------- نوارِ بالا (اطلاعاتِ مختصر + دسترسیِ سریع) ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 26px;position:sticky;top:0;z-index:30;
  background:var(--surface-solid);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 14px rgba(31,41,72,.05);
}
.topbar-start{display:flex;align-items:center;gap:12px;min-width:0}
.topbar-title{font-size:18px;font-weight:800;letter-spacing:-.3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-end{display:flex;align-items:center;gap:12px}
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;cursor:pointer;
  background:var(--glass);color:var(--text2);
  border:1px solid var(--border);transition:.15s;
}
.nav-toggle:hover{background:#fff;color:var(--text)}
.nav-toggle:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
/* نشانِ برند — SVGِ کلاغ از تابعِ logo() در functions.php می‌آید.
   قبلاً اینجا یک دکمهٔ Playِ یوتیوب با CSS خالص کشیده می‌شد (مستطیلِ قرمز + مثلثِ border). حذف شد. */
.logo{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  line-height:0;
}
.logo svg{display:block}

/* چیپِ کاربر */
.user-chip{display:flex;align-items:center;gap:9px;padding:8px 15px;
  border-radius:999px;transition:background .15s}
.user-chip:hover .user-name{color:var(--accent-text)}
.user-chip:hover{background:rgba(31,41,72,.05)}
.user-chip .user-name{font-size:13px;font-weight:700;color:var(--text);
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg, var(--red-soft), var(--red-dark));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
  box-shadow:0 4px 12px rgba(var(--brand-rgb),.28);
}
/* نشانگرِ اعتبارِ اشتراک */
.sub-pill{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--ok-bg);color:var(--ok-text);border:1px solid rgba(15,138,60,.22);
  transition:filter .15s;
}
.sub-pill:hover{filter:brightness(.97)}
.sub-pill.warn{background:var(--alert-bg);color:var(--alert-text);border-color:rgba(var(--danger-rgb),.25)}
.sub-pill.neutral{background:rgba(120,130,150,.10);color:var(--text2);border-color:var(--border)}
.sub-pill .icon{opacity:.85}

/* اسکریمِ پشتِ سایدبارِ کشویی (فقط موبایل) */
.nav-scrim{display:none}

/* ============================================================
   بدنه
   ============================================================ */
/* تمام‌عرض: جدولِ داده از کلِ فضای کنارِ سایدبار استفاده می‌کند */
.main{width:100%;margin:0;padding:24px 28px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-size:22px;font-weight:800;margin:0;letter-spacing:-.3px}
.page-head .page-sub{margin:3px 0 0;font-size:13px;color:var(--text2);font-weight:500}

/* ============================================================
   دکمه‌ها
   ============================================================ */
/* دکمهٔ اصلی نارنجی است، نه سرمه‌ای — قاعدهٔ سیستم: «نارنجی = عمل، سرمه‌ای = ساختار».
   متنِ روی آن سرمه‌ای است نه سفید: سفید روی #FE8E10 فقط ۲.۳:۱ می‌دهد و رد می‌شود،
   ولی سرمه‌ای روی نارنجی ۷.۱:۱ است. */
.btn{
  font-family:inherit;color:var(--navy);border:none;border-radius:12px;
  background:linear-gradient(135deg, var(--amber), var(--orange));
  padding:10px 20px;font-size:14px;font-weight:800;cursor:pointer;
  transition:transform .12s, box-shadow .18s, filter .15s;
  box-shadow:0 6px 16px rgba(254,142,16,.30);
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(254,142,16,.40);filter:brightness(1.03)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:var(--glass-strong);color:var(--text);
  border:1px solid var(--glass-brd);box-shadow:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn.ghost:hover{background:#fff;box-shadow:var(--glass-shadow)}
.btn.block{display:block;width:100%;border-radius:12px}
.btn[disabled],button[disabled]{opacity:.7;cursor:progress;transform:none!important;box-shadow:none}

/* اسپینرِ حالتِ بارگذاری (روی دکمه‌ها) */
.spinner{
  display:inline-block;width:14px;height:14px;vertical-align:-2px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:tp-spin .7s linear infinite;
}
@keyframes tp-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner{animation-duration:1.4s}}

/* ============================================================
   کارت‌های آمار (Glass tiles)
   ============================================================ */
.stats{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.stat{
  flex:1;min-width:160px;padding:16px 18px;border-radius:var(--radius);
  background:var(--surface-solid); border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
  transition:transform .15s, box-shadow .2s;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow-lg)}
.stat .n{font-size:24px;font-weight:800;letter-spacing:-.5px}
.stat .n .n-sub{font-size:14px;font-weight:600;color:var(--text3)}
.stat .n.warn{color:var(--alert-text)}
.stat .n.ok{color:var(--ok-text)}
.stat .l{font-size:12px;color:var(--text2);margin-top:3px}
/* کارتِ عددی به‌عنوان تب (کلیک = نمایشِ همان دسته) */
button.stat{font:inherit;color:inherit;text-align:start}
.stat.tab{cursor:pointer}
.stat.tab:hover{border-color:var(--orange)}
.stat.tab:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.stat.tab.active{border-color:var(--orange);box-shadow:0 0 0 1.5px var(--orange) inset, var(--glass-shadow)}
.stat-view{display:inline-flex;align-items:center;gap:4px;margin-top:9px;font-size:11.5px;font-weight:700;color:var(--accent-text)}
.stat.tab.active .stat-view::after{content:" ●";color:var(--accent-text)}

/* سکشن‌های تب‌شونده + نوار پیشرفت */
.of-section[hidden]{display:none}
.of-progress{height:9px;border-radius:99px;background:rgba(120,130,150,.16);overflow:hidden}
.of-progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--st-ok-text),var(--ok-text));border-radius:99px;transition:width .35s ease}

/* ============================================================
   آکاردئون (progressive disclosure — جمع‌شونده)
   ============================================================ */
details.acc{
  background:var(--surface-solid);border:1px solid var(--glass-brd);
  border-radius:var(--radius);margin:16px 0;overflow:hidden;
  box-shadow:var(--glass-shadow);
}
details.acc>summary{
  cursor:pointer;list-style:none;padding:15px 18px;
  display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;
}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::after{
  content:"";margin-inline-start:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--text3);border-bottom:2px solid var(--text3);
  transform:rotate(45deg);transition:transform .2s;
}
details.acc[open]>summary::after{transform:rotate(-135deg)}
details.acc>summary:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
details.acc .acc-body{padding:2px 18px 16px}
.acc-count{margin-inline-start:auto;font-weight:600;font-size:12.5px;color:var(--text3)}
details.acc[open]>summary .acc-count{display:none}

/* ============================================================
   کارت / جدول — پوستهٔ شیشه، محتوای پرکنتراست برای خوانایی
   ============================================================ */
.card{
  border-radius:var(--radius);overflow:hidden;
  background:var(--surface-solid); border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow);
}
table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
th{
  text-align:right;color:var(--text2);font-weight:600;padding:11px 10px;
  border-bottom:1px solid var(--border);
  background:rgba(247,249,252,.9);   /* تهِ رنگِ بسیار ملایم؛ روی بدنهٔ سفید یک‌پارچه دیده می‌شود */
}
td{padding:10px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
/* آیکون‌های داخلِ جدول کمی جمع‌تر؛ ناحیهٔ لمس با ::after حفظ می‌شود */
.data-table .icon-btn{width:32px;height:32px}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(31,41,72,.04)}   /* تهِ رنگِ خنثی تا روی سفید هم واضح باشد */
tr:last-child td{border-bottom:none}
/* ردیفِ هشدار: قبلاً کلِ ردیف تینتِ قرمز می‌گرفت. چون ~۴۶٪ ردیف‌ها در حالتِ
   هشدارند، نیمی از جدول صورتی می‌شد و قرمز (که رنگِ معناییِ خطاست) به رنگِ
   غالبِ محصول تبدیل می‌شد — ۶۶٬۰۰۰px² در برابر ۶۴px² نارنجیِ برند.
   حالا وضعیت فقط با یک نوارِ کناری اعلام می‌شود؛ بجِ «زیر هشدار» معنا را می‌رساند. */
tr.alert-row > td:first-child{position:relative}
tr.alert-row > td:first-child::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--st-danger-text);
}
tr.alert-row:hover{background:rgba(var(--brand-rgb),.04)}
.pname{font-weight:600}
.pname small{display:block;color:var(--text3);font-weight:400;font-size:11.5px;margin-top:2px;
  direction:ltr;text-align:right}
/* «نبضِ بازار» — متنِ خوانا و کم‌رنگ. رنگِ هر تکه معنایش را می‌رساند. */
.mkt-pulse{font-size:11.5px;line-height:1.7;color:var(--text3);font-weight:400}
.mkt-pulse .mp-sep{margin:0 7px;opacity:.5}
.mkt-pulse .mp-range{color:var(--text2)}
.mkt-pulse .mp-up{color:var(--st-ok-text);font-weight:600}
.mkt-pulse .mp-down{color:var(--st-danger-text);font-weight:600}
.mkt-pulse .mp-flat{color:var(--text3)}
.mkt-pulse .mp-hot{color:var(--accent-text);font-weight:600}
.mkt-pulse .mp-warm{color:var(--text2)}
/* دسکتاپ: ردیفِ تمام‌عرضِ مستقل، ولی چسبیده به محصولِ بالا (نه یک ردیفِ جدا).
   has-pulse بوردرِ زیرِ ردیفِ محصول را برمی‌دارد؛ خودِ pulse-row بوردرِ
   جداکنندهٔ محصولِ بعدی را دارد. پس محصول + نبض یک بلوکِ واحد دیده می‌شوند. */
tr.has-pulse > td{border-bottom:none}
.pulse-row > td{padding:0 10px 11px;border-bottom:1px solid var(--border-soft)}
/* نسخهٔ داخلِ نام فقط موبایل. ویژگی عمداً `.pname .mp-mobile` است تا از
   `.pname small{display:block}` بالاتر باشد، وگرنه روی دسکتاپ پنهان نمی‌شد
   و نام را از تراز خارج می‌کرد. */
.pname .mp-mobile{display:none}
/* نامِ محصول خودش لینک است و آیکون در انتهای متن می‌آید. ستون می‌تواند
   باریک باشد و نام تا دو خط بشکند — بهتر از اینکه یک ستونِ پهن اشغال کند. */
td.pname{min-width:170px;max-width:230px;white-space:normal;line-height:1.7}
td.pname a{color:inherit;text-decoration:none}
td.pname a:hover{text-decoration:underline;text-underline-offset:3px}
td.pname a svg{opacity:.5;vertical-align:-2px;margin-inline-start:3px;flex:none}
.price{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.price.down{color:var(--alert-text)}
.muted{color:var(--text2);white-space:nowrap}

/* ============================================================
   بَج‌ها
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:4px;vertical-align:middle;
  padding:5px 12px;border-radius:999px;font-size:12px;
  font-weight:600;white-space:nowrap;border:1px solid transparent;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.badge.ok{background:var(--ok-bg);color:var(--ok-text);border-color:rgba(15,138,60,.25)}
.badge.alert{background:var(--alert-bg);color:var(--alert-text);border-color:rgba(var(--danger-rgb),.25)}

/* بج‌های وضعیت محصول — رنگِ مستقل از برند (آیکون/متن همراهِ رنگ، نه فقط رنگ) */
.badge.st-ok{background:var(--st-ok-bg);color:var(--st-ok-text);border-color:var(--st-ok-brd)}
.badge.st-warn{background:var(--st-warn-bg);color:var(--st-warn-text);border-color:var(--st-warn-brd)}
.badge.st-danger{background:var(--st-danger-bg);color:var(--st-danger-text);border-color:var(--st-danger-brd)}
.badge.st-neutral{background:var(--st-neutral-bg);color:var(--st-neutral-text);border-color:var(--st-neutral-brd)}
.badge.st-info{background:var(--st-info-bg);color:var(--st-info-text);border-color:var(--st-info-brd)}

/* شبکهٔ ایمنی: اگر جدول جایی جا نشد، اسکرولِ افقیِ خودِ کارت (نه کلیپِ بی‌صدا)
   اسکرول‌بار همیشه مرئی تا کاربر macOS متوجهِ ادامهٔ جدول شود */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* بدونِ این min-width، جدول به‌جای اسکرول‌شدن *فشرده* می‌شد.
   دلیلش این است که همهٔ ستون‌های دیگر white-space:nowrap دارند و
   نمی‌توانند کوچک شوند، پس تنها ستونی که اجازهٔ شکستن دارد — نامِ محصول —
   تمامِ فشار را جذب می‌کرد: روی iPad عمودی به ۸۳px و ۸ خط می‌رسید.
   حالا جدول عرضِ راحتش را نگه می‌دارد و *کارت* افقی اسکرول می‌شود؛
   صفحه هرگز افقی اسکرول نمی‌شود (html{overflow-x:hidden}). */
.data-table{min-width:1040px}
.table-wrap::-webkit-scrollbar{height:8px}
.table-wrap::-webkit-scrollbar-track{background:rgba(120,130,150,.10);border-radius:99px}
.table-wrap::-webkit-scrollbar-thumb{background:rgba(120,130,150,.38);border-radius:99px}
.table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(120,130,150,.55)}

/* سلولِ مقایسهٔ قیمت: قیمتِ شما درشت + کفِ بازار و فروشنده زیرش */
.pricecmp{white-space:nowrap}
.pricecmp .cmpbox{display:inline-block;vertical-align:middle}
.pricecmp .mine{font-weight:800;font-size:14px;white-space:nowrap}
/* قیمت دیگر قرمز نمی‌شود: وضعیت قبلاً سه‌بار اعلام می‌شد (تینتِ ردیف + بج + قیمتِ قرمز).
   بج معنا را می‌رساند؛ قیمت فقط باید خوانا و پررنگ باشد. */
.pricecmp .mine.down{color:var(--text);font-weight:800}
/* بازار + نامِ فروشنده — یک خط، و برش فقط روی نامِ فروشگاه.
   قبلاً کلِ رشته یک متنِ واحد با line-clamp:2 بود، پس با باریک‌شدنِ ستون
   برش وسطِ *عدد* می‌افتاد («۱۹,۲۱۸,۳۰۰» → «۲۱۸,۳۰۰…»). قیمتِ بریده از
   نبودنش بدتر است: خوانده می‌شود و غلط است.
   حالا mkt-v (برچسب+عدد) flex:none و nowrap است و هرگز کوتاه نمی‌شود؛
   فقط mkt-s (نامِ فروشگاه) جمع می‌شود و سه‌نقطه می‌گیرد. */
/* عدد و نامِ فروشگاه *زیرِ هم* — نه کنارِ هم. کنارِ هم بودنشان ستون را
   به ۲۵۰px می‌رساند و جدول را در ۱۲۸۰ به اسکرول می‌انداخت؛ باریک‌کردنِ
   همان چیدمان هم نام را به ~۳۵px می‌رساند که عملاً فقط سه‌نقطه است.
   زیرِ هم: ستون فقط به اندازهٔ عدد پهن می‌شود (~۱۷۵px) و نامِ فروشگاه
   *تمامِ* همان عرض را می‌گیرد. ارتفاعِ ردیف هم عملاً عوض نمی‌شود چون
   ستونِ نامِ محصول از قبل بلندتر است. */
.pricecmp .mkt{
  display:block;max-width:175px;
  font-size:11.5px;color:var(--text2);font-weight:400;margin-top:3px;
  line-height:1.55;
}
.pricecmp .mkt-v{display:block;white-space:nowrap}
.pricecmp .mkt-s{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:.8;
}
/* دو بازارِ ترب زیر هم؛ بازاری که خودِ فروشنده در آن است پررنگ‌تر و نقطه‌دار */
.pricecmp .mkt + .mkt{margin-top:1px}
.pricecmp .mkt.mine-mkt{color:var(--text);font-weight:600}
.pricecmp .mkt .dot{color:var(--accent);font-weight:900}

/* تاریخِ بررسی: اجازهٔ شکستن به دو خط تا ستون باریک بماند */
td.lastcheck{white-space:normal;font-size:12px;min-width:70px;max-width:90px;line-height:1.5}
/* تاریخ بالا، ساعت خط دوم — ستون را باریک نگه می‌دارد و جداکنندهٔ تزئینی لازم ندارد */
td.lastcheck .d{display:block;white-space:nowrap}
td.lastcheck .t{display:block;color:var(--text3);font-size:11px;font-variant-numeric:tabular-nums}

/* برشِ دوخطیِ متنِ بلند (نامِ محصول) + متنِ کامل در title */
.clamp2{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.7;word-break:break-word;
}

/* نوارِ چیپ‌های فیلترِ وضعیت (صفِ رسیدگی) */
.statusbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.statusbar .chip b{font-weight:800;font-size:12px;opacity:.9}
.chip .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.chip.st[aria-pressed="true"]{background:var(--text);color:#fff;border-color:transparent}
.chip.st[aria-pressed="true"] .dot{background:#fff !important}
.chip.st.st-ok[aria-pressed="true"]{background:var(--st-ok-text)}
.chip.st.st-warn[aria-pressed="true"]{background:var(--st-warn-text)}
.chip.st.st-danger[aria-pressed="true"]{background:var(--st-danger-text)}
.chip.st.st-neutral[aria-pressed="true"]{background:var(--st-neutral-text)}

/* ----- عملیات ردیف ----- */
.act{display:inline-flex;gap:14px;align-items:center;color:var(--text3);font-size:15px}
.act span{cursor:pointer;transition:.15s}
.act span:hover{color:var(--accent-text);transform:scale(1.15)}

/* ----- آیکون‌ها و دکمه‌های آیکونی (جایگزینِ ایموجی) ----- */
.icon{display:inline-block;vertical-align:middle;flex:none}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:none;background:none;
  color:var(--text3);border-radius:10px;cursor:pointer;position:relative;
  text-decoration:none;transition:background .15s, color .15s, transform .1s;
}
/* ناحیهٔ لمسِ ~۴۸px بدونِ بزرگ‌کردنِ خودِ دکمه (touch-target ≥۴۴px) */
.icon-btn::after{content:"";position:absolute;inset:-6px}
.icon-btn:hover{background:rgba(255,255,255,.6);color:var(--text)}
.icon-btn:active{transform:scale(.92)}
.icon-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* .icon-btn.brand روی «مشاهده در ترب» است که در هر ردیف تکرار می‌شود (۱۳ بار در یک صفحه).
   نارنجی‌کردنش دقیقاً همان اشتباهِ قرمز را تکرار می‌کند: اکسنت وقتی در هر ردیف تکرار شود
   دیگر اکسنت نیست. این یک لینکِ کمکیِ درجه‌سه است، پس در حالتِ عادی خنثی می‌ماند
   و رنگِ برند را فقط موقعِ هاور می‌گیرد. */
.icon-btn.brand{color:var(--text3)}
.icon-btn.brand:hover{color:var(--accent-text);background:rgba(254,142,16,.10)}

/* «قیمت‌گذاری خودکار فعال» — حالتی نادر و مهم، پس اکسنتِ پر می‌گیرد.
   قبلاً همان کلاسِ .brand را داشت که لینکِ «مشاهده در ترب» هم از آن استفاده می‌کرد،
   یعنی یک کلاس دو معنی داشت و حالتِ فعال اصلاً قابلِ تشخیص نبود.

   رنگ تنها حاملِ معنا نیست: تفاوتِ «پر» و «توخالی» خودش یک تفاوتِ فرمی است
   و برای کاربرِ کوررنگ هم کار می‌کند؛ ضمناً دکمه aria-pressed و برچسبِ
   فعال/غیرفعال دارد. آیکونِ سرمه‌ای روی نارنجی ۷.۱:۱. */
.icon-btn.auto-on{
  color:var(--navy);background:var(--accent);border-radius:50%;
  box-shadow:0 2px 8px rgba(254,142,16,.45);
}
.icon-btn.auto-on:hover{color:var(--navy);background:var(--amber)}
.icon-btn.danger:hover{color:var(--alert-text);background:var(--alert-bg)}

/* ----- نوارِ فیلتر / مرتب‌سازیِ داشبورد ----- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}

/* جعبهٔ جستجوی محصول */
.search-box{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border-radius:999px;color:var(--text3);
  background:var(--surface-solid);border:1px solid var(--border);
  transition:border-color .15s;
}
.search-box:focus-within{border-color:var(--ring);color:var(--ring)}
.search-box input{
  -webkit-appearance:none; appearance:none;
  border:none;background:none;outline:none;
  font-family:'Peyda', Tahoma, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size:13px;line-height:1.6;color:var(--text);min-width:150px;
}
.search-box input::placeholder{color:var(--ph);font-family:'Peyda', Tahoma, 'Segoe UI', system-ui, -apple-system, sans-serif}
.search-box input::-webkit-search-decoration,
.search-box input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* صفحه‌بندی */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin:16px 0 4px}
.pg-btn{
  min-width:40px;min-height:40px;padding:9px 13px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--text2);
  background:var(--surface-solid);border:1px solid var(--border);transition:.15s;
}
.pg-btn:hover:not(:disabled):not(.active){background:#fff;color:var(--text)}
.pg-btn.active{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(var(--brand-rgb),.26)}
.pg-btn:disabled{opacity:.42;cursor:default}
.pg-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text2);
  background:var(--glass);border:1px solid var(--border);
  transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{background:#fff;color:var(--text)}
.chip[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:transparent}
.chip:focus-visible,.sortsel select:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.sortsel{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text2)}
.sortsel select{
  font-family:inherit;font-size:12.5px;padding:7px 11px;border-radius:10px;
  border:1px solid var(--border);background:var(--glass);color:var(--text);cursor:pointer;
}
/* فیلترِ «فقط جاهایی که اول نیستم» */
tbody.filter-notfirst tr[data-first="1"]{display:none}

/* ----- پنلِ بازشوندهٔ قیمت‌گذاریِ خودکار (زیرِ هر محصول) ----- */
.reprice-row{display:none}
.reprice-row.open{display:table-row}
.reprice-row > td{background:rgba(255,255,255,.4);padding:16px 18px}
.reprice-form{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
/* هر فیلد: عنوان بالا + ورودی پایین، هم‌عرض و هم‌ارتفاع تا همه در یک ردیفِ تراز بنشینند */
.reprice-form label{
  display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text2);font-weight:600;
  flex:1 1 150px;min-width:140px;
}
.reprice-form input[type=text],.reprice-form select{
  font-family:inherit;font-size:13px;padding:8px 10px;border-radius:10px;
  border:1px solid var(--border);background:rgba(255,255,255,.85);color:var(--text);
  width:100%;height:38px;
}
.reprice-form input:focus,.reprice-form select:focus{outline:none;border-color:var(--ring);background:#fff}
.reprice-form .btn{flex:none;height:38px;padding-block:0}
/* سوییچ روشن/خاموش: هم‌مرکز با ردیفِ ورودی‌ها */
.reprice-form label.reprice-toggle{
  flex:none;flex-direction:row;align-items:center;gap:8px;
  color:var(--text);font-size:13px;min-width:0;height:38px;
}
.reprice-toggle input{width:17px;height:17px;accent-color:var(--red);cursor:pointer}
/* راهنمای کف ضرر: یک خطِ تمام‌عرض زیرِ ردیف تا ترازِ فیلدها را به‌هم نزند */
.reprice-note{flex-basis:100%;font-size:11px;font-weight:400;color:var(--text3);margin:-2px 0 0}
@media (max-width:640px){
  .reprice-row.open{display:block}
  .reprice-row > td{display:block}
  .reprice-row > td::before{display:none}
  .reprice-form{flex-direction:column;align-items:stretch;gap:12px}
  /* در چیدمانِ ستونی، flex-basis روی محور عمودی می‌افتد و هر فیلد را ۱۵۰px بلند می‌کند — خنثی شود */
  .reprice-form label{flex:none;min-width:0}
  .reprice-form input[type=text],.reprice-form select{min-width:0;width:100%}
}

.note{font-size:12px;color:var(--text3);margin-top:16px;text-align:center;line-height:2}

/* ============================================================
   مودال — شیشه‌ای با پس‌زمینهٔ تارِ عمیق
   ============================================================ */
.overlay{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50;
  background:rgba(22,26,33,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:20px;
}
.overlay.on{display:flex;animation:fadeIn .18s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:380px;max-width:100%;padding:24px;border-radius:22px;
  background:var(--glass-strong); border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow-lg);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  animation:pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 16px;font-size:18px;font-weight:800}
.modal .field{margin-top:12px}
.modal label{display:block;font-size:12.5px;color:var(--text2);margin-bottom:6px;font-weight:600}
.modal input,.modal select{
  width:100%;font-family:inherit;padding:11px 13px;border-radius:11px;
  border:1px solid var(--border);background:rgba(255,255,255,.7);
  font-size:13.5px;color:var(--text);transition:.15s;
}
.modal input:focus,.modal select:focus{
  outline:none;border-color:var(--ring);background:#fff;
  box-shadow:0 0 0 3px rgba(var(--ring-rgb),.18);
}
.modal .row{display:flex;gap:10px;margin-top:20px}

/* ============================================================
   صفحهٔ ورود / ثبت‌نام — کارتِ شیشه‌ایِ هیرو
   ============================================================ */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{
  width:380px;max-width:100%;padding:34px 30px;border-radius:26px;
  background:var(--glass-strong); border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow-lg);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  animation:pop .3s cubic-bezier(.2,.9,.3,1.2);
}
.auth-card .brand{justify-content:center;margin-bottom:8px;font-size:20px}
.auth-card .subtitle{text-align:center;color:var(--text2);font-size:13px;margin-bottom:24px}
.auth-card .field{margin-bottom:15px}
.auth-card label{display:block;font-size:12.5px;color:var(--text2);margin-bottom:7px;font-weight:600}
.auth-card input{
  width:100%;font-family:inherit;padding:12px 14px;border-radius:13px;
  border:1px solid var(--border);background:rgba(255,255,255,.7);
  font-size:14px;color:var(--text);transition:.15s;
}
.auth-card input:focus{
  outline:none;border-color:var(--ring);background:#fff;
  box-shadow:0 0 0 3px rgba(var(--ring-rgb),.18);
}
/* placeholder کم‌رنگ تا فرمِ خالی «پرشده» به نظر نرسد */
.auth-card input::placeholder{color:var(--ph)}
.auth-foot{text-align:center;font-size:12.5px;color:var(--text2);margin-top:18px}
.auth-foot a{color:var(--accent-text);font-weight:700}
.auth-foot a:hover{color:var(--red-dark)}

/* ============================================================
   انتخابِ چندتایی — چک‌باکس‌ها و نوارِ عملیاتِ گروهی
   ============================================================ */
.col-actions{white-space:nowrap;text-align:center;width:1%}
/* ستونِ انتخاب و عملیاتِ سرستون: باریک و وسط‌چین */
.data-table th.col-ops,.data-table th.col-actions{text-align:center;width:1%}
.data-table td.col-select{text-align:center;width:1%;white-space:nowrap}
.data-table td[data-label="عملیات"]{width:1%;white-space:nowrap}
/* گروهِ عملیات: دنده + سطلِ زباله در یک ردیف */
.ops{display:inline-flex;align-items:center;gap:4px}
/* برچسبِ دربرگیرنده = ناحیهٔ لمسِ بزرگ‌تر بدونِ بزرگ‌کردنِ ظاهرِ چک‌باکس */
/* چک‌باکسِ ردیف — عمداً کوچک‌تر از پیش‌فرضِ مرورگر نگه داشته می‌شود:
   ۲۰px در جدولِ فشرده درشت به نظر می‌رسید و ستونِ انتخاب را سنگین می‌کرد.
   ۱۶px با ناحیهٔ کلیکِ ۳۲px (padding روی label) هم مینیمال است هم روی
   موبایل قابلِ زدن — استانداردِ لمسی حداقل ۲۴px ناحیهٔ هدف می‌خواهد. */
.check-wrap{display:inline-flex;align-items:center;justify-content:center;padding:8px;cursor:pointer}
.row-check, #tp-all, .of-all{
  width:16px;height:16px;accent-color:var(--brand);
  cursor:pointer;vertical-align:middle;margin:0;flex:none;
}
tbody tr:has(.row-check:checked){background:rgba(var(--brand-rgb),.05)}
tbody tr.alert-row:has(.row-check:checked){background:rgba(var(--brand-rgb),.10)}

/* وسط‌چینی عمداً *بدونِ* transform انجام می‌شود.
   قبلاً `left:50%` + `transform:translateX(-50%)` بود و انیمیشنِ `pop`
   همان transform را بازنویسی می‌کرد: در طولِ انیمیشن مرکزیت از بین می‌رفت،
   نوار از کنارِ صفحه باز می‌شد و بعد از تمام‌شدنِ انیمیشن یک‌باره به وسط
   می‌پرید — همان «باز شدنِ پله‌ای». چون `pop` بینِ سه عنصرِ دیگر مشترک است،
   راهِ درست آزاد کردنِ transform است نه دست‌کاریِ کی‌فریم.
   left/right:0 + margin auto همان کار را می‌کند و به transform دست نمی‌زند. */
.selbar{
  position:fixed;bottom:20px;left:0;right:0;
  margin-inline:auto;width:max-content;max-width:calc(100% - 32px);
  display:flex;align-items:center;gap:16px;z-index:35;
  padding:9px 12px 9px 18px;border-radius:16px;
  background:var(--surface-solid);border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow-lg);
  animation:pop .18s cubic-bezier(.2,.9,.3,1.2);
}
.selbar[hidden]{display:none}
.selbar-count{font-size:13.5px;font-weight:600;color:var(--text2);white-space:nowrap}
.selbar-count b{color:var(--text);font-size:15px}
.selbar-actions{display:flex;gap:8px}
.selbar .btn{padding:9px 15px;font-size:13px}

/* ============================================================
   ریسپانسیو
   ============================================================ */

/* ---------- تبلت و پایین‌تر: سایدبار کشویی می‌شود ---------- */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .sidebar{
    position:fixed;top:0;bottom:0;inset-inline-start:0;   /* لبهٔ راست در RTL */
    height:100dvh;width:270px;
    transform:translateX(110%);                            /* پنهان در سمتِ راست */
    transition:transform .26s cubic-bezier(.2,.9,.3,1);
    box-shadow:var(--glass-shadow-lg);
  }
  .sidebar.open{transform:none}
  .nav-scrim{
    display:block;position:fixed;inset:0;z-index:39;
    background:rgba(22,26,33,.45);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
  }
  .nav-scrim.on{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  .app-content{min-height:100dvh}
}

@media (max-width:640px){
  .topbar{padding:11px 16px}
  .topbar-title{font-size:16px}
  /* هدفِ لمسیِ حداقل ۴۴px روی موبایل */
  .pg-btn{min-width:44px;min-height:44px}
  .chip{min-height:44px}
  .user-chip{display:none}   /* روی موبایل نام فروشگاه پنهان می‌شود؛ در منو در دسترس است */
  .main{padding:16px 14px}
  .page-head h1{font-size:19px}
  .stat{min-width:calc(50% - 7px)}
}

/* ============================================================
   داشبورد: جدولِ ۹‌ستونی → کارت (هر ردیف یک کارتِ عمودی)
   ------------------------------------------------------------
   نقطهٔ شکست از ۶۴۰ به ۹۰۰ آمد و عمداً *همان* نقطه‌ای است که سایدبار
   کشویی می‌شود — نه یک عددِ تازه.
   چرا: بینِ ۶۴۱ تا ۹۰۰ جدول در حالتِ جدول می‌ماند ولی جا ندارد، و چون
   فقط ستونِ نام قابلِ شکستن است همان یکی له می‌شود. روی تبلت انتخاب بینِ
   «جدولِ ۹ ستونیِ افقی‌اسکرول» و «کارت» است؛ روی صفحهٔ لمسی کارت به‌مراتب
   بهتر است، چون اسکرولِ افقیِ داخلِ یک ناحیه با اسکرولِ عمودیِ صفحه
   تداخل می‌کند.
   ============================================================ */
@media (max-width:900px){
  /* موبایل کارتی: ردیفِ تمام‌عرضِ دسکتاپ کنار می‌رود و نبض زیرِ نام (mp-mobile)
     دیده می‌شود؛ آنجا هر tr یک کارت است و ترازی مسئله نیست.
     ویژگیِ `.data-table tr.pulse-row` عمداً بالاتر از قاعدهٔ کارتیِ
     `.data-table tr{display:block}` است تا مخفی‌سازی برنده شود. */
  .data-table tr.pulse-row{display:none}
  .pname .mp-mobile{display:block;margin-top:5px}
  .products-card{background:transparent;border:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
  .products-card .table-wrap{overflow:visible !important}
  .data-table{min-width:0 !important}
  .data-table, .data-table tbody, .data-table tr, .data-table td{display:block;width:auto}
  .data-table thead{display:none}
  .data-table tbody tr{
    background:var(--glass-strong);border:1px solid var(--glass-brd);
    border-radius:16px;padding:4px 15px 12px;margin-bottom:12px;
    box-shadow:var(--glass-shadow);
  }
  /* در موبایل هر ردیف یک کارت است و خودِ کارت لبهٔ قرمز می‌گیرد،
     پس نوارِ کناریِ دسکتاپ اینجا اضافه است و باید خاموش شود. */
  .data-table tbody tr.alert-row{border-color:rgba(var(--danger-rgb),.5)}
  tr.alert-row > td:first-child::before{display:none}
  .data-table td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:9px 0;border:none;border-top:1px solid var(--border-soft);
    white-space:normal;text-align:left;
  }
  .data-table td::before{
    content:attr(data-label);color:var(--text2);
    font-size:12.5px;font-weight:600;flex:none;
  }
  /* در نمای کارتی جا هست؛ متنِ بازار/فروشنده و تاریخ بدونِ محدودیتِ عرض */
  .data-table td.pricecmp .mkt{max-width:none}
  /* در کارت جا هست، پس تاریخ و ساعت کنار هم می‌آیند نه دو خط */
  .data-table td.lastcheck{max-width:none;white-space:nowrap}
  .data-table td.lastcheck .d,
  .data-table td.lastcheck .t{display:inline}
  .data-table td.lastcheck .t{margin-inline-start:6px}
  /* نامِ محصول: بلوکی و راست‌چین تا بَجِ هشدار زیرِ نام و چسبیده به راست بنشیند (نه بیرون‌زده به چپ) */
  .data-table td.pname{display:block;text-align:right;padding:12px 0 8px;font-weight:700}
  .data-table td.pname::before{display:none}
  /* ساختارِ قبلی (div فلکس + آیکونِ جدا) حذف شد؛ حالا خودِ نام لینک است */
  .data-table td.pname{max-width:none}
  .data-table td.pname .badge{margin-top:8px}
  /* عرضِ ۱٪ دسکتاپ نباید این سلول‌ها را در کارتِ موبایل جمع کند */
  .data-table td[data-label="عملیات"],.data-table td.col-select{width:auto}
  /* ردیفِ عملیات: برچسب + آیکون‌ها جمع در سمتِ راست تا چپِ ردیف برای چک‌باکس خالی بماند */
  .data-table td[data-label="عملیات"]{justify-content:flex-start;gap:10px}
  .data-table td[data-label="عملیات"] .ops{gap:6px}
  /* چک‌باکسِ «انتخاب»: به‌جای ردیفِ جدا، روی همان ردیفِ عملیات در سمتِ چپ می‌نشیند */
  .data-table td.col-select{
    height:51px;margin-top:-51px;   /* overlay هم‌ارتفاع روی ردیفِ عملیات (وسط‌چینِ عمودی) */
    padding:0;border-top:none;
    justify-content:flex-end;       /* چک‌باکس در انتهای ردیف = سمتِ چپ (RTL) */
    position:relative;z-index:2;pointer-events:none;
  }
  .data-table td.col-select .check-wrap{pointer-events:auto}
  .data-table td.col-select::before{display:none}

  /* «بازبینی درون‌ریزی»: ستونِ انتخاب اولین سلولِ کارت است، نه آخرین.
     ترفندِ overlayِ ۵۱px- بالا برای ردیفِ عملیاتِ داشبورد ساخته شده و
     اینجا سلول را ۵۱px به بیرونِ کارت می‌کشد و روی محتوای بالا می‌اندازد.
     در این جدول‌ها انتخاب یک ردیفِ عادیِ برچسب‌دار در بالای کارت می‌شود. */
  .data-table.of-table td.col-select{
    height:auto;margin-top:0;padding:9px 0 10px;
    border-top:none;justify-content:space-between;
    position:static;pointer-events:auto;
  }
  .data-table.of-table td.col-select::before{display:block}

  /* پنلِ قیمت‌گذاریِ خودکار (زیرِ هر محصول) — روی موبایل یک کارتِ مستقلِ تودرتو
     ویژگی‌بالاتر از قواعدِ کارت‌سازیِ بالا تا فرم درست استایل بگیرد */
  .data-table tbody tr.reprice-row{
    background:transparent;border:none;box-shadow:none;
    padding:0;margin:-6px 0 12px;
  }
  .data-table tr.reprice-row > td{
    display:block;padding:14px 15px;border:none;border-top:none;
    background:var(--glass-strong);border:1px solid var(--glass-brd);
    border-radius:14px;text-align:right;
  }
  .data-table tr.reprice-row > td::before{display:none}

  /* ادمین و بقیه‌ی جدول‌ها روی موبایل همچنان افقی اسکرول می‌شوند */
  .card:not(.products-card) > div[style*="overflow-x"]{overflow-x:auto}
}

/* ============================================================
   ورودیِ کدِ یک‌بارمصرف (OTP)
   ------------------------------------------------------------
   چهار خانهٔ جدا به‌جای یک فیلد: کاربر پیشرفتش را می‌بیند و
   اشتباهِ یک رقم را سریع پیدا می‌کند. جهتِ ظرف عمداً ltr است
   چون کد از چپ به راست خوانده و تایپ می‌شود، حتی در صفحهٔ فارسی.
   ============================================================ */
.otp-boxes{
  display:flex; gap:10px; justify-content:center;
  margin:6px 0 20px;
}
.auth-card .otp-box{
  width:60px; height:68px; padding:0;
  text-align:center; font-size:28px; font-weight:700;
  font-variant-numeric:tabular-nums;
  border-radius:16px; border:1.5px solid var(--border);
  background:rgba(255,255,255,.75); color:var(--text);
  transition:border-color .15s, box-shadow .15s, transform .12s, background .15s;
}
.auth-card .otp-box:focus{
  outline:none; border-color:var(--ring); background:#fff;
  box-shadow:0 0 0 3px rgba(var(--ring-rgb),.18);
  transform:translateY(-2px);
}
/* خانهٔ پرشده رنگِ برند می‌گیرد تا پیشرفت دیده شود */
.auth-card .otp-box:not(:placeholder-shown),
.auth-card .otp-box[value]:not([value=""]){
  border-color:var(--brand); background:#fff;
}

.otp-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:16px 0 4px; min-height:22px;
}
.otp-timer{
  font-size:12.5px; color:var(--text3);
  font-variant-numeric:tabular-nums;
}

/* دکمه‌ای که مثلِ لینک دیده می‌شود — برای «ارسال دوباره» و «تغییر شماره»
   که از نظرِ معنایی باید فرمِ POST باشند (CSRF) ولی وزنِ بصریِ لینک دارند */
.linkish{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600;
  color:var(--accent-text); text-decoration:underline;
  text-underline-offset:3px;
}
.linkish:hover:not([disabled]){color:var(--brand)}
.linkish[disabled]{color:var(--text3); cursor:default; text-decoration:none; opacity:1}

.auth-note{
  text-align:center; font-size:12px; color:var(--text3);
  line-height:1.9; margin:14px 0 0;
}
.auth-msg{
  display:block; text-align:center; margin-bottom:16px;
  padding:10px 14px; line-height:1.9;
}

@media (max-width:420px){
  .otp-boxes{gap:8px}
  .auth-card .otp-box{width:54px;height:62px;font-size:24px}
}

/* ============================================================
   صفحهٔ «همکاری و گزارش باگ»
   ------------------------------------------------------------
   دو ستون روی دسکتاپ (فرم + راهنمای کنار)، تک‌ستون روی موبایل.
   فرم عمداً ستونِ پهن‌تر را می‌گیرد چون کارِ اصلیِ صفحه است.
   ============================================================ */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:16px; align-items:start;
}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }

/* فیلدهای فرم — همان زبانِ بصریِ کارتِ ورود، ولی داخلِ پوستهٔ پنل */
.contact-grid .field{margin-bottom:15px}
.contact-grid label{display:block;font-size:12.5px;color:var(--text2);margin-bottom:7px;font-weight:600}
.contact-grid input[type="text"],
.contact-grid select,
.contact-grid textarea{
  width:100%; font-family:inherit; font-size:14px; color:var(--text);
  padding:12px 14px; border-radius:13px;
  border:1px solid var(--border); background:rgba(255,255,255,.7);
  transition:.15s;
}
.contact-grid textarea{resize:vertical; min-height:120px; line-height:1.9}
.contact-grid input[type="text"]:focus,
.contact-grid select:focus,
.contact-grid textarea:focus{
  outline:none; border-color:var(--ring); background:#fff;
  box-shadow:0 0 0 3px rgba(var(--ring-rgb),.18);
}
.contact-grid input::placeholder,
.contact-grid textarea::placeholder{color:var(--ph)}