/* عرشیا بات - راست‌چین، فونت وزیرمتن */

/* ═══════════ رنگ‌ها ═══════════

   سه خانواده‌ی جدا، و عمداً جدا می‌مانند:

   ۱. «برند» — رنگِ اصلیِ خودِ برنامه: نوار بالا، دکمه‌ها، لینک‌ها،
      چیپ‌ها، نوار پیشرفت. تنها خانواده‌ای که با سلیقه عوض می‌شود، و
      عوض کردنش یعنی عوض کردنِ همین چند خط — نه گشتن در فایل.
      ★ از قرمز به نیلی رفت (۱۴۰۵/۰۶). هیچ قاعده‌ای دست نخورد، چون
      همه‌ی مصرف‌کننده‌ها از همین متغیرها می‌خوانند.

   ۲. «معنایی» — good / bad / warn. دست نمی‌خورند. سبزِ موفقیت و
      قرمزِ خطا و کهربایی هشدار معنا دارند نه سلیقه؛ اگر با برند
      هم‌رنگ شوند معنایشان گم می‌شود. --bad قرمز می‌ماند حتی وقتی
      برند نیلی است.

   ۳. «هویتِ کانال» — بنفشِ اسنپ‌شاپ، قرمزِ دیجی‌کالا، آبیِ انبار، و
      پالتِ --sk-* که از خودِ سیجیکالا اندازه‌گیری شده. اینها هم دست
      نمی‌خورند: کارشان این است که هر پنل شبیهِ خودش بماند، پس مثلِ
      رنگِ معنایی‌اند نه مثلِ رنگِ برند.

   ★ چرا --brand-line و --brand-tint اضافه شدند: مقدارهایی که با برند
   حرکت می‌کنند ولی متغیر نداشتند (کادرِ e0d3ff کنارِ زمینه‌ی نرم،
   هاورِ ردیفِ fbfaff، سرستونِ f7f4ff، کادرِ f3ccd2). چون متغیر
   نبودند، با عوض شدنِ برند جا می‌ماندند و کسی نمی‌دیدشان. */

:root{
  /* --- ۱. برند --- */
  --brand:#4338ca;
  --brand-dark:#322a9e;
  --brand-soft:#eef0fd;
  --brand-line:#ccd2f7;
  --brand-tint:#f6f7fe;
  --brand-bar:#3730a3;
  --brand-bar-2:#f0f1f4;

  /* --- ۳. هویتِ کانال: با برند عوض نمی‌شوند --- */
  --purple:#7d3cf8;
  --purple-dark:#6a2fe0;
  --purple-soft:#f4efff;
  --dk-red:#ef4056;
  --wh-blue:#2c5fd0;
  --wh-blue-bg:#eef4ff;

  /* --- خنثی --- */
  --bg-page:#f4f5f7;
  --card:#ffffff;
  --text:#16161f;
  --text-soft:#5a5a6e;
  --mute:#9292a3;
  --border:#e7e7ee;
  --border-strong:#dcdce6;

  /* --- ۲. معنایی: دست نمی‌خورند --- */
  --good:#118a5c;
  --good-bg:#e6f7f0;
  --bad:#d81f3d;
  --bad-dark:#b81833;
  --bad-bg:#fdeaee;
  --warn-bg:#fff6e5;
  --warn-text:#8a5e06;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg-page); color:var(--text);
  font-family:"Vazirmatn",Tahoma,sans-serif;
  font-size:13px; line-height:1.75; direction:rtl;
}

/* ---------- چیدمان کلی ---------- */
.topbar{
  background:var(--brand-bar); color:#fff; padding:0 18px;
  display:flex; align-items:center; justify-content:space-between; height:50px;
}
.topbar .brand{font-weight:800; font-size:16px; letter-spacing:.2px;}
/* تب‌های سطح یک: گوشه‌گرد، فعال با پس‌زمینه‌ی روشن نه خط زیر */
.tabs{display:flex; gap:5px; align-items:center; height:100%;}
.tab{
  color:#fff; text-decoration:none; opacity:.82; padding:6px 15px;
  display:flex; align-items:center; gap:5px; font-size:13.5px;
  border-radius:9px; transition:background .12s, opacity .12s;
}
.tab:hover{opacity:1; background:rgba(255,255,255,.14);}
.tab.active{opacity:1; font-weight:700; background:#fff; color:var(--brand);}

.content{padding:16px 20px 60px;}

.banner{padding:10px 14px; border-radius:10px; margin-bottom:12px; font-size:13px;}
.banner-ok{background:var(--good-bg); color:var(--good);}
.banner-err{background:var(--bad-bg); color:var(--bad);}
.banner-warn{background:var(--warn-bg); color:var(--warn-text);}
.banner a{color:inherit; font-weight:700;}

.card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:12px;}
.card-title{font-weight:700; font-size:14px; margin-bottom:10px;}

.actions-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.inline-form{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:10px 14px; display:flex; gap:9px; align-items:center; flex-wrap:wrap;
}
.inline-form .lbl{font-size:12px; color:var(--text-soft);}
.inline-form .hint{font-size:11.5px; color:var(--mute);}

.stats-row{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:12px;}
.stat{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 16px; min-width:126px;}
.stat .k{display:block; font-size:11.5px; color:var(--mute); margin-bottom:2px;}
.stat b{font-size:17px; font-weight:800;}
.stat.warn{background:var(--warn-bg); border-color:#f0dcb4;}
.stat.warn b{color:var(--warn-text);}

.filters{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:11px 14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px;
}
.filters select,.filters input,.inline-form input[type=file]{
  border:1px solid var(--border-strong); border-radius:8px; padding:8px 10px;
  font-family:inherit; font-size:12.5px; background:#fff; color:var(--text);
}
.filters .search{min-width:230px;}

.quick-filters{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:12px;}
.chip{
  background:#ececed; border:1px solid transparent; border-radius:18px;
  padding:6px 15px; text-decoration:none; color:#6e6e78; font-size:12.5px; font-weight:700;
}
.chip:hover{color:var(--brand);}
/* انتخاب‌شده سفید با کادر، نه پرشده — تا لای بقیه بیرون بزند */
.chip.active{
  background:#fff; color:var(--brand); border-color:var(--brand);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.lock-note{margin-inline-start:auto; font-size:11.5px; color:var(--warn-text);
  background:var(--warn-bg); padding:6px 12px; border-radius:8px;}

/* ---------- دکمه‌ها ---------- */
.btn-solid{background:var(--brand); color:#fff; border:none; border-radius:8px;
  padding:9px 16px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700;}
.btn-solid:hover{background:var(--brand-dark);}
.btn-outline{background:#fff; color:var(--brand); border:1px solid var(--brand);
  border-radius:8px; padding:8px 14px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700;}
.btn-mini{background:var(--brand); color:#fff; border:none; border-radius:7px;
  padding:8px 18px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700;}
.btn-mini:hover{background:var(--brand-dark);}
.btn-check{background:#fff; color:var(--brand); border:1px solid var(--brand);
  border-radius:7px; padding:8px 18px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700;}
.btn-check:hover{background:var(--brand); color:#fff;}
.btn-apply{background:var(--bad); color:#fff; border:none; border-radius:8px;
  padding:8px 16px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700;}
.btn-apply:hover{background:var(--bad-dark);}
.btn-stop{background:var(--bad); color:#fff; border:none; border-radius:8px;
  padding:10px 20px; cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:800;}
.btn-stop:hover{background:var(--bad-dark);}
.btn-lock{background:#f5f5fa; border:1px solid var(--border-strong); border-radius:7px;
  padding:6px 11px; cursor:pointer; font-size:13px;}

/* ---------- کارت محصول ---------- */
.pcard{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  margin-bottom:10px; display:flex; overflow:hidden;
}
/* نوار وضعیت بای‌باکس سمت راست کارت (در RTL یعنی اولِ ردیف) */
.pcard-strip{order:0;}
.pcard-body{order:1;}

/* دایره‌ی «قیمت‌گذار دارد» کنار عنوان */
.pdot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--purple); margin-inline-start:6px; vertical-align:middle;
  cursor:help; flex:0 0 auto;
}
.pdot.off{background:var(--border-strong);}
.pcard-flag{border-color:#f0d9a8; background:#fffdf7;}

/* نوار عمودی سمت راست کارت: وضعیت بای‌باکس */
.pcard-strip{
  flex:0 0 46px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; padding:10px 0;
  writing-mode:vertical-rl; text-orientation:mixed;
}
.strip-label{font-size:12px; font-weight:800; letter-spacing:.3px;}
.strip-price{font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums;}
.strip-won{background:var(--good-bg); color:var(--good);}
.strip-lost{background:var(--bad-bg); color:var(--bad);}
.strip-none{background:#eeeef3; color:#77778a;}

.pcard-body{flex:1; min-width:0; padding:12px 14px;}

.pcard-head{display:flex; gap:12px; align-items:flex-start;}
.pcard-thumb{
  flex:0 0 56px; height:56px; border-radius:9px; background:#f4f4f8;
  border:1px dashed var(--border-strong); display:flex; align-items:center;
  justify-content:center; color:var(--mute); font-size:10px; text-align:center;
}
.pcard-ident{min-width:0; flex:1;}
.pcard-title{
  display:block; font-weight:800; font-size:14px; line-height:1.7;
  color:var(--text); text-decoration:none;
}
a.pcard-title:hover{color:var(--brand); text-decoration:underline;}
a.pcard-title::after{content:" ↗"; font-size:10.5px; color:var(--mute); font-weight:400;}
.pcard-meta{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  margin-top:4px; font-size:11.5px; color:var(--mute);
}
.pcard-meta code{background:#f2f2f7; padding:1px 6px; border-radius:5px; font-size:11px; color:#6e6e85;}
.pcard-meta .cat{color:var(--brand); font-weight:700;}

/* ردیف اعداد */
.pcard-figures{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:11px 0; padding:10px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.fig{flex:1 1 128px; min-width:118px;}
.fig-k{display:block; font-size:11px; color:var(--mute); margin-bottom:2px;}
.fig-v{display:block; font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums;}
.fig-sub{display:block; font-size:11px; color:var(--text-soft); margin-top:1px;}

/* تصمیم موتور */
.psug{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  margin:0 0 11px; padding:7px 11px; border-radius:8px;
  border:1px solid transparent; font-size:11.5px;
}
.psug-badge{font-weight:800; font-size:11px; white-space:nowrap;}
.psug-price{font-variant-numeric:tabular-nums; font-size:13px; color:var(--text-soft);}
.psug-price b{font-size:14px; color:var(--text);}
.psug-arrow{color:var(--mute); padding:0 2px;}
.psug-step{
  background:rgba(255,255,255,.75); border:1px solid var(--border-strong);
  border-radius:6px; padding:1px 7px; font-weight:700;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.psug-step i{font-style:normal; font-size:10px; color:var(--mute); font-weight:400;}
.psug-why{color:var(--text-soft); flex:1 1 100%; line-height:1.6;}

/* قابل اجرا / نیاز به رسیدگی / فقط خبر */
.psug-act{background:var(--brand-soft); border-color:var(--brand-line);}
.psug-act .psug-badge{color:var(--brand);}
.psug-warn{background:var(--warn-bg); border-color:#f0dcb0;}
.psug-warn .psug-badge{color:var(--warn-text);}
.psug-idle{background:#f5f5f9; border-color:var(--border);}
.psug-idle .psug-badge{color:#6e6e85;}

/* ردیف ورودی‌ها */
.pcard-foot{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;}
.pcard-edit{display:flex; gap:9px; align-items:flex-end; flex-wrap:wrap; flex:1;}
.ef label{display:block; font-size:11px; color:var(--mute); margin-bottom:4px;}
.ef input{
  width:110px; border:1px solid var(--border-strong); border-radius:7px;
  padding:7px 9px; font-family:inherit; font-size:12.5px; direction:ltr; text-align:left;
}
.ef input:focus{outline:2px solid var(--brand); outline-offset:-1px;}
.seek-toggle{display:flex; align-items:center; gap:5px; font-size:11.5px;
  color:var(--text-soft); white-space:nowrap; cursor:pointer; padding-bottom:7px;}
.seek-toggle input{width:auto; margin:0;}
.computed{
  flex-basis:100%; font-size:11.5px; color:var(--brand); font-weight:700;
  background:var(--brand-soft); padding:6px 11px; border-radius:7px; margin-top:2px;
}
.computed-warn{color:var(--mute); background:#f4f4f8; font-weight:400;}
.pcard-check{display:flex; flex-direction:column; align-items:center; gap:4px;}
.pcard-check small{font-size:10.5px;}

/* ---------- عمومی ---------- */
.muted{color:var(--mute);}
.good{color:var(--good);}
.bad{color:var(--bad);}
.strike{text-decoration:line-through; color:var(--mute);}
.pill{padding:2px 8px; border-radius:6px; font-size:10.5px; font-weight:700;}
.pill-green{background:var(--good-bg); color:var(--good);}
.pill-red{background:var(--bad-bg); color:var(--bad);}
.pill-grey{background:#ededf3; color:#6e6e85;}
/* «وصل است ولی قلمش در شیت نیست» نه سبز است نه قرمز: تطبیق انجام شده،
   موجودی نامعلوم است. */
.pill-warn{background:#fff6e5; color:#8a5e06;}
.pill-lock{background:#e8eaf6; color:#3f51b5;}
.pill-seek{background:#e8f5e9; color:#2e7d32;}
.empty{text-align:center; color:var(--mute); padding:34px; font-size:13px;}

/* ---------- جدول (نرخ کمیسیون، دفتر اعمال، اجرای خشک) ---------- */
.table-wrap{background:var(--card); border:1px solid var(--border); border-radius:12px; overflow-x:auto;}
table.grid{width:100%; border-collapse:collapse; font-size:12.5px;}
table.grid th{
  background:#fafafc; text-align:right; padding:11px 12px; font-weight:700; font-size:12px;
  color:var(--text-soft); border-bottom:1px solid var(--border-strong); white-space:nowrap;
}
table.grid td{padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.grid tr:last-child td{border-bottom:none;}
table.grid tr:hover td{background:var(--brand-tint);}
th.key-col{color:var(--brand); background:var(--brand-tint);}
td.key-col{background:var(--brand-tint); font-weight:700;}
.num{text-align:left; direction:ltr; font-variant-numeric:tabular-nums; white-space:nowrap;}
.title-cell .t{display:block; font-weight:700; font-size:13px;}
.title-cell .meta{display:flex; gap:7px; margin-top:3px; font-size:11px; color:var(--mute);}
.title-cell code{background:#f2f2f7; padding:1px 6px; border-radius:5px; font-size:11px;}
.row-flag td{background:#fffaf2;}
.sug-price{display:block; font-size:14px; font-weight:800;}
.sug-down{color:var(--bad);}
.sug-up{color:var(--good);}
.sug-status{display:block; font-size:11.5px; font-weight:700; color:var(--text-soft);}
.sug-none{display:block; font-size:12.5px; font-weight:700; color:var(--mute);}
.sug-reason{display:block; font-size:11px; color:var(--mute); font-weight:400; margin-top:3px;}
.sug-floor{display:block; font-size:11px; color:var(--brand); font-weight:600; margin-top:2px;}
.sug-cell{min-width:210px; text-align:right; direction:rtl;}
.cost-form{display:flex; gap:6px; align-items:center;}
.cost-form input{width:88px; border:1px solid var(--border-strong); border-radius:7px;
  padding:6px 8px; font-family:inherit; font-size:12px; direction:ltr; text-align:left;}
.total-pct{font-size:12px; color:var(--text-soft); min-width:50px; font-weight:700;}

/* ---------- تنظیمات ---------- */
.hint-block{font-size:12.5px; color:var(--text-soft); line-height:1.9; margin:0 0 10px;}
.hint-block code,.rule-list code{background:#f2f2f7; padding:1px 6px; border-radius:5px; font-size:11.5px;}
.rule-list{font-size:12.5px; line-height:2.1; color:var(--text-soft); margin:0 0 10px; padding-inline-start:20px;}
.settings-form{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;}
.settings-form .field label{display:block; font-size:12px; color:var(--text-soft); margin-bottom:5px;}
.settings-form .field input{border:1px solid var(--border-strong); border-radius:8px;
  padding:9px 11px; font-family:inherit; font-size:13px; width:170px;}
.field-hint{font-size:11.5px; color:var(--mute); margin-top:5px; max-width:520px; line-height:1.8;}
.stop-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:10px;}
.stop-state{font-size:13px; font-weight:700; padding:8px 14px; border-radius:9px;}
.stop-state.on{background:var(--bad-bg); color:var(--bad);}
.stop-state.off{background:var(--good-bg); color:var(--good);}
.confirm-card{border:2px solid var(--bad);}

/* ---------- صفحه‌بندی ---------- */
.pagination{display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:14px; flex-wrap:wrap; font-size:12.5px;}
.pagination .pages{display:flex; gap:5px; flex-wrap:wrap;}
.pagination .pages a{text-decoration:none; color:var(--text); background:#fff;
  border:1px solid var(--border-strong); border-radius:7px; padding:7px 12px;}
.pagination .pages a:hover{border-color:var(--brand); color:var(--brand);}
.pagination .pages a.active{background:var(--brand); color:#fff; border-color:var(--brand);}
.pagination .per-page select{border:1px solid var(--border-strong); border-radius:7px;
  padding:7px 10px; font-family:inherit; font-size:12.5px; background:#fff;}
.total-count{color:var(--text-soft);}

/* ---------- پنل فیلتر سمت راست ---------- */
.topline{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;
}
.result-count{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:9px 16px; font-size:13px;
}
.result-count b{font-size:17px; font-weight:800; color:var(--brand);}
.result-count .of-total{color:var(--mute); font-size:12px;}

.layout{display:flex; gap:14px; align-items:flex-start;}
.fmain{flex:1; min-width:0;}

.fpanel{
  flex:0 0 232px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:14px; position:sticky; top:12px;
  max-height:calc(100vh - 24px); overflow-y:auto;
}
.fpanel-head{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:800; font-size:13.5px; padding-bottom:9px; margin-bottom:4px;
  border-bottom:1px solid var(--border);
}
.clear-all{
  font-size:11.5px; font-weight:700; color:var(--bad);
  text-decoration:none; background:var(--bad-bg); padding:3px 9px; border-radius:6px;
}
.clear-all:hover{background:var(--bad); color:#fff;}

.fgroup{padding:10px 0; border-bottom:1px solid var(--border);}
.fgroup:last-of-type{border-bottom:none;}
.fgroup-t{display:block; font-size:11.5px; font-weight:700; color:var(--text-soft); margin-bottom:6px;}
.fsearch{
  width:100%; border:1px solid var(--border-strong); border-radius:8px;
  padding:8px 10px; font-family:inherit; font-size:12.5px;
}
.fsearch:focus{outline:2px solid var(--brand); outline-offset:-1px;}
.fopt{
  display:flex; align-items:center; gap:7px; font-size:12.5px;
  color:var(--text); cursor:pointer; padding:3px 2px; border-radius:6px;
}
.fopt:hover{background:var(--brand-soft);}
.fopt input{margin:0; cursor:pointer;}
.fopt .cname{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fopt .ccount{
  font-size:11px; color:var(--text-soft); background:#f2f2f7;
  padding:1px 7px; border-radius:9px; font-variant-numeric:tabular-nums;
}
.fopt.dim{opacity:.45;}
.fnote{font-size:10.5px; color:var(--mute); margin-top:5px; line-height:1.7;}
.fcats{max-height:290px; overflow-y:auto; padding-inline-end:3px;}


/* ═══════════ صفحه‌ی کارها ═══════════ */

.sk-tasks-table .sk-rp-head, .sk-tasks-table .sk-rp-row{
  display:grid; gap:8px; align-items:start; min-width:900px;
  /* ★ اندازه‌ها از روی خودِ صفحه گرفته شده‌اند، نه حدس:
     · ستونِ تاریخ ۱۵۶ است نه ۱۳۲، چون با آمدنِ ثانیه متن بیرون می‌زد.
     · کفِ دو ستونِ متنی کم شد. مجموعِ کف‌ها ۱۰۱۶ می‌شد در حالی که
       ستونِ اصلی در صفحه‌ی ۱۲۸۰ فقط ۹۷۴ است — یعنی جدول از والدش
       بیرون می‌زد. حالا مجموع ۹۱۶ است و جا می‌شود. */
  grid-template-columns:64px minmax(160px,2.2fr) 96px 84px 128px
                        minmax(180px,3fr) 156px;
}
.sk-disc-table .sk-rp-head, .sk-disc-table .sk-rp-row{
  display:grid; gap:8px; align-items:start; min-width:820px;
  grid-template-columns:150px 70px 84px minmax(200px,1.4fr) minmax(240px,2fr);
}

.sk-task-id{font-size:11px; color:var(--sk-mute); font-variant-numeric:tabular-nums;}
.sk-tchanged{font-size:11px; color:var(--sk-mute); direction:ltr;
  text-align:start; min-width:0; overflow-wrap:anywhere;}
.sk-tnote{font-size:11.5px; color:var(--sk-text);}

/* ★ سلولِ ویرایش‌شونده باید **دیده شود** که ویرایش می‌شود. بدونِ نشانه،
   کاربر نمی‌داند کجا می‌تواند بنویسد و کجا نه. */
.sk-tedit{
  display:block; border-radius:6px; padding:2px 5px; margin:-2px -5px;
  border:1px dashed transparent; cursor:text; min-height:18px;
}
.sk-tedit:hover{border-color:var(--sk-line);}
.sk-tedit:focus{
  outline:none; border-color:var(--sk-teal); background:#fff;
  box-shadow:0 0 0 2px var(--sk-teal-bg);
}
.sk-tsel{
  font-size:11.5px; padding:2px 4px; border-radius:6px;
  border:1px solid var(--sk-line); background:#fff; max-width:100%;
}

/* رنگِ بخش — ملایم، چون کنارش اولویت و وضعیت هم هست و سه رنگِ پررنگ
   روی یک ردیف با هم می‌جنگند. */
.sk-area-chip{
  font-style:normal; background:var(--sk-bg); border-radius:5px;
  padding:1px 7px; font-size:11px;
}

.sk-rf-check{flex-direction:row; align-items:center; gap:8px;}
.sk-rf-check input{width:auto; min-height:0;}

/* ★ نشانه‌ی ذخیره. بدونِ آن «نوشته شد» و «نوشته نشد» یک شکل دیده
   می‌شوند — و آن بدترین حالت است. خطا خودش نمی‌رود، تا دیده شود. */
.sk-save-flag{
  position:fixed; inset-block-end:16px; inset-inline-start:16px; z-index:60;
  background:var(--sk-teal); color:#fff; border-radius:8px;
  padding:8px 14px; font-size:12px; box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.sk-save-flag.bad{background:var(--sk-red);}

@media (max-width:900px){
  .layout{flex-direction:column;}
  .fpanel{flex:1 1 auto; width:100%; position:static; max-height:none;}
  .fcats{max-height:none;}
}

/* ---------- حالت لودینگ دکمه‌ها ---------- */
.btn-mini, .btn-check{position:relative;}
button.is-loading{opacity:.85; cursor:progress;}
button.is-loading .btn-txt{visibility:hidden;}
button.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:13px; height:13px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* کارتی که همین الان به‌روز شد */
.just-updated .pcard{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft);
  transition:box-shadow .35s, border-color .35s;
}

/* ---------- پیام شناور ---------- */
.toast{
  position:fixed; bottom:18px; left:50%; transform:translate(-50%, 26px);
  background:var(--text); color:#fff; padding:10px 18px; border-radius:10px;
  font-size:12.5px; font-family:inherit; z-index:60; max-width:82vw;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1; transform:translate(-50%, 0);}
.toast-err{background:var(--bad);}

/* ---------- نشان‌های تنوع ---------- */
.pill-variant{background:var(--wh-blue-bg); color:var(--wh-blue);}
.pill-family{background:#f3eefe; color:#6a2fe0;}

/* ---------- عملیات دسته‌ای ---------- */
.bulkbar{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; margin-bottom:10px;
}
.bulk-toggle{
  cursor:pointer; padding:11px 14px; font-weight:700; font-size:13px;
  color:var(--brand); list-style:none; display:flex; align-items:center; gap:7px;
}
.bulk-toggle::-webkit-details-marker{display:none;}
.bulk-toggle::before{content:"▾"; font-size:11px; transition:transform .15s;}
.bulkbar[open] .bulk-toggle::before{transform:rotate(180deg);}
.bulk-form{
  display:flex; gap:11px; align-items:flex-end; flex-wrap:wrap;
  padding:0 14px 14px; border-top:1px solid var(--border); padding-top:12px;
}
.bulk-form .ef input{width:150px;}
.bulk-note{flex-basis:100%; font-size:11.5px; color:var(--mute); line-height:1.8;}

/* ---------- آکاردئون فیلترها ---------- */
details.fgroup > summary.fgroup-t{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px;
  padding:2px 0; user-select:none;
}
details.fgroup > summary.fgroup-t::-webkit-details-marker{display:none;}
details.fgroup > summary.fgroup-t::before{
  content:"▾"; font-size:10px; color:var(--mute); transition:transform .15s;
}
details.fgroup[open] > summary.fgroup-t::before{transform:rotate(180deg);}
details.fgroup > summary.fgroup-t:hover{color:var(--brand);}
.fsum{
  margin-inline-start:auto; font-size:10.5px; font-weight:700;
  background:var(--brand-soft); color:var(--brand);
  padding:1px 8px; border-radius:9px;
}

/* ---------- انبار ---------- */
.addbox{padding:0; align-items:stretch; flex-direction:column;}
.addbox .bulk-toggle{padding:11px 14px;}
.add-form{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  padding:12px 14px 14px; border-top:1px solid var(--border);}

.wcard{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  margin-bottom:10px; display:flex; align-items:stretch; gap:12px; padding:12px 14px;
}
.wpick{display:flex; align-items:flex-start; padding-top:3px;}
.wpick input{cursor:pointer;}
.wthumb{
  flex:0 0 66px; height:66px; border-radius:9px; background:#f4f4f8;
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  overflow:hidden; color:var(--mute); font-size:10px; text-align:center;
}
.wthumb img{width:100%; height:100%; object-fit:cover;}
.wthumb.noimg::after{content:"بدون عکس";}
.wbody{flex:1; min-width:0;}
.wname{display:block; font-weight:800; font-size:14px; line-height:1.7;}
.wmeta{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-top:3px;
  font-size:11.5px; color:var(--mute);}
.wmeta code{background:#f2f2f7; padding:1px 6px; border-radius:5px; font-size:11px;}
.wmeta .brand{color:var(--brand); font-weight:700;}
.wedit{display:flex; gap:9px; align-items:flex-end; flex-wrap:wrap; margin-top:10px;
  padding-top:10px; border-top:1px solid var(--border);}
.wlast{flex-basis:100%; font-size:11.5px; color:var(--text-soft);
  background:#f7f7fb; padding:5px 10px; border-radius:7px; margin-top:2px;}
.wnums{
  flex:0 0 250px; display:flex; gap:8px; align-items:flex-start;
  border-inline-start:1px solid var(--border); padding-inline-start:12px;
}
.wnums .fig{flex:1 1 76px; min-width:70px;}

/* اتصال محصول به انبار */
.pcard-link{display:flex; gap:8px; align-items:flex-end;}
.pcard-link input{width:190px; border:1px solid var(--border-strong); border-radius:7px;
  padding:7px 9px; font-family:inherit; font-size:12.5px;}
.btn-link-wh{
  background:#fff; color:var(--wh-blue); border:1px solid var(--wh-blue); border-radius:7px;
  padding:8px 16px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700;
  position:relative;
}
.btn-link-wh:hover{background:var(--wh-blue); color:#fff;}
.from-wh{color:var(--wh-blue); font-weight:700;}
.ef input[readonly]{background:#f4f6fb; color:var(--wh-blue); cursor:not-allowed;}
.ppick{position:absolute; margin:7px; z-index:2;}
.pcard{position:relative;}
.ppick input{cursor:pointer;}
.bulk-link-row{border-top:1px dashed var(--border-strong); margin-top:2px;}

/* ---------- سورت چیپ ---------- */
.sortbar{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:10px;}
.sortbar-t{font-size:12px; color:var(--mute); font-weight:700;}
.sortbar .chip{padding:5px 13px; font-size:12px;}

/* ---------- عکس محصول ---------- */
.pcard-thumb img{width:100%; height:100%; object-fit:cover; border-radius:8px;}
.pcard-thumb.noimg::after{content:"بدون عکس"; font-size:10px; color:var(--mute);}
.pnum{direction:ltr; unicode-bidi:embed; font-variant-numeric:tabular-nums;}

/* ---------- دکمه‌های کارت ---------- */
.btn-goods{
  background:var(--wh-blue-bg); color:var(--wh-blue); border:1px solid #c9dbff; border-radius:7px;
  padding:8px 16px; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:700;
}
.btn-goods:hover{background:var(--wh-blue); color:#fff; border-color:var(--wh-blue);}
.btn-goods b{font-weight:800;}
/* فعال/غیرفعال فقط از پنل — دکمه نیست چون API این فیلد را نمی‌پذیرد */
.pcard-panel{display:flex; flex-direction:column; align-items:center; gap:3px;}
.pcard-panel small{font-size:10px; line-height:1.5;}
.pcard-panel code{background:#f2f2f7; padding:0 4px; border-radius:4px; font-size:9.5px;}
.btn-panel{
  display:inline-block; border-radius:7px; padding:8px 14px; font-size:12.5px;
  font-weight:700; text-decoration:none; white-space:nowrap;
  background:#fff; color:var(--text-soft); border:1px solid var(--border-strong);
}
a.btn-panel:hover{border-color:var(--brand); color:var(--brand);}
.btn-panel.is-off{color:var(--mute); border-style:dashed; cursor:default;}
.btn-deact, .btn-act{
  border-radius:7px; padding:8px 14px; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:700; position:relative;
}
.btn-deact{background:#fff; color:var(--bad); border:1px solid var(--bad);}
.btn-deact:hover{background:var(--bad); color:#fff;}
.btn-act{background:#fff; color:var(--good); border:1px solid var(--good);}
.btn-act:hover{background:var(--good); color:#fff;}
.pill-wh{background:var(--wh-blue-bg); color:var(--wh-blue);}

/* ---------- مودال ---------- */
.modal{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;}
.modal[hidden]{display:none;}
.modal-back{position:absolute; inset:0; background:rgba(20,20,32,.5);}
.modal-box{
  position:relative; background:var(--card); border-radius:14px; width:min(760px, 94vw);
  max-height:88vh; display:flex; flex-direction:column; box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid var(--border); font-weight:800; font-size:14px;
}
.modal-x{background:none; border:none; font-size:16px; cursor:pointer; color:var(--mute);}
.modal-x:hover{color:var(--bad);}
.modal-body{padding:14px 16px 18px; overflow-y:auto;}
.modal-section{margin-bottom:16px;}
.modal-section .fgroup-t{margin-bottom:6px;}
.wh-results{max-height:270px; overflow-y:auto; margin-top:8px;
  border:1px solid var(--border); border-radius:10px;}

.whit{display:flex; gap:10px; align-items:center; padding:9px 11px; border-bottom:1px solid var(--border);}
.whit:last-child{border-bottom:none;}
.whit:hover{background:var(--brand-soft);}
/* ★ ۵۲ پیکسل، قاب‌دار و contain — دلیلش کنارِ .msug-thumb */
.whit-thumb{flex:0 0 52px; height:52px; border-radius:8px; background:#fff;
  border:1px solid var(--border, #e5e7eb);
  display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--mute);}
.whit-thumb img{width:100%; height:100%; object-fit:contain; padding:2px;
  box-sizing:border-box;}
.whit-body{flex:1; min-width:0;}
.whit-name{display:block; font-weight:700; font-size:12.5px;}
.whit-meta{display:flex; gap:9px; flex-wrap:wrap; font-size:11px; color:var(--mute); margin-top:2px;}
.whit-meta code{background:#f2f2f7; padding:1px 5px; border-radius:4px;}
.whit-meta b{color:var(--text); font-variant-numeric:tabular-nums;}
.whit-add{display:flex; gap:6px; align-items:center;}
.whit-qty{width:58px; border:1px solid var(--border-strong); border-radius:6px;
  padding:6px 7px; font-family:inherit; font-size:12px; text-align:center;}

.comp-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.comp-table th{background:#fafafc; text-align:right; padding:8px 10px; font-size:11.5px;
  color:var(--text-soft); border-bottom:1px solid var(--border-strong);}
.comp-table td{padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle;}
.comp-table tfoot td{background:#fafafc; font-weight:700; border-bottom:none;}
.comp-thumb{width:48px;}
.comp-thumb img{width:44px; height:44px; object-fit:contain; border-radius:7px;
  background:#fff; border:1px solid var(--border, #e5e7eb); padding:2px;
  box-sizing:border-box;}
.comp-name{display:block; font-weight:700;}
.comp-meta{display:flex; gap:7px; font-size:11px; color:var(--mute);}
.comp-meta code{background:#f2f2f7; padding:1px 5px; border-radius:4px;}
.comp-x{background:var(--bad-bg); color:var(--bad); border:none; border-radius:6px;
  width:24px; height:24px; cursor:pointer; font-size:12px;}
.comp-x:hover{background:var(--bad); color:#fff;}
.comp-empty{text-align:center; color:var(--mute); padding:20px; font-size:12.5px;}

/* ---------- تنوع‌های یک قلم انبار ---------- */
.btn-variants{padding:7px 13px; font-size:12px;}
.whp-panel{flex-basis:100%; margin-top:10px; border-top:1px solid var(--border); padding-top:10px;}
.whp{display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--border);}
.whp:last-child{border-bottom:none;}
.whp-thumb{flex:0 0 40px; height:40px; border-radius:7px; background:#f2f2f7; overflow:hidden;
  display:flex; align-items:center; justify-content:center; color:var(--mute);}
.whp-thumb img{width:100%; height:100%; object-fit:cover;}
.whp-body{flex:1; min-width:0;}
.whp-name{display:block; font-weight:700; font-size:12.5px; color:var(--text); text-decoration:none;}
a.whp-name:hover{color:var(--brand); text-decoration:underline;}
.whp-meta{display:flex; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--mute); margin-top:2px;}
.whp-meta code{background:#f2f2f7; padding:1px 5px; border-radius:4px;}
.whp-price{flex:0 0 118px; text-align:left;}
.whp-bb{flex:0 0 96px; display:flex; flex-direction:column; align-items:center; gap:2px;}
.bb-ok{color:var(--good); font-size:19px; font-weight:800;}
.bb-no{color:var(--bad); font-size:19px; font-weight:800;}
.bb-na{color:var(--mute); font-size:17px;}
.bb-price{font-size:11px; color:var(--bad); font-variant-numeric:tabular-nums;}

/* ---------- برچسب برند ---------- */
.pill-brand-exact{background:#e8f0fe; color:#1a56b8;}
.pill-brand-guess{background:#f3f0e8; color:#8a6d1f;}

/* ---------- مرتب‌سازی دکمه‌های ردیف انبار ---------- */
.wedit{
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
}
.wedit .ef input{width:132px;}
/* همه‌ی دکمه‌های ردیف یک اندازه و یک خط پایه */
.wedit .btn-mini,
.wedit .btn-variants{
  height:34px; padding:0 16px; display:inline-flex; align-items:center;
  justify-content:center; font-size:12.5px; font-weight:700;
  border-radius:8px; line-height:1; white-space:nowrap; margin-bottom:0;
}
.wedit .btn-variants{
  background:#fff; color:var(--brand); border:1px solid var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand-soft);
}
.wedit .btn-variants:hover{background:var(--brand-soft); border-color:var(--brand);}
.wcard{align-items:flex-start;}
.wpick{padding-top:6px;}
.whead{min-height:auto;}
.wnums{padding-top:2px;}

/* ---------- ورود ---------- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh;}
.login-box{background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:26px 28px; width:min(380px, 92vw); box-shadow:0 8px 30px rgba(0,0,0,.08);}
.login-brand{font-weight:800; font-size:18px; color:var(--brand); text-align:center; margin-bottom:18px;}
.login-field{margin-bottom:13px;}
.login-field label{display:block; font-size:12.5px; color:var(--text-soft); margin-bottom:5px;}
.login-field input{width:100%; border:1px solid var(--border-strong); border-radius:9px;
  padding:11px 12px; font-family:inherit; font-size:14px;}
.login-field input:focus{outline:2px solid var(--brand); outline-offset:-1px;}
.login-btn{width:100%; padding:12px; font-size:14px; margin-top:4px;}
.login-note{font-size:11.5px; color:var(--mute); text-align:center; margin-top:14px;}

/* ---------- منوی کاربر ---------- */
.topbar-left{display:flex; align-items:center; gap:14px;}
.usermenu{position:relative;}
.usermenu > summary{cursor:pointer; list-style:none; color:#fff; font-size:13px;
  display:flex; align-items:center; gap:7px; opacity:.9;}
.usermenu > summary::-webkit-details-marker{display:none;}
.usermenu > summary:hover{opacity:1;}
.role-chip{background:rgba(255,255,255,.22); padding:2px 9px; border-radius:9px; font-size:11px;}
.usermenu-box{position:absolute; top:32px; inset-inline-start:0; background:var(--card);
  border:1px solid var(--border); border-radius:12px; padding:14px; width:250px;
  box-shadow:0 10px 30px rgba(0,0,0,.16); z-index:70;}
.pw-form{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;
  padding-bottom:12px; border-bottom:1px solid var(--border);}
.pw-form label{font-size:11.5px; color:var(--mute);}
.pw-form input{border:1px solid var(--border-strong); border-radius:7px; padding:7px 9px;
  font-family:inherit; font-size:12.5px;}

/* دکمه‌ی خروج، کنارِ نام کاربر روی نوار بالا.
   ★ کادرِ سفیدِ توخالی است نه دکمه‌ی پُر: روی نوارِ نیلی باید دیده شود
   ولی از تب‌های راهبری پررنگ‌تر نباشد. متنِ سفید روی نوار تضادِ ۹٫۹
   دارد — `python scripts/check_contrast.py`. */
.logout-form{display:flex; align-items:center; margin:0;}
.btn-logout{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55);
  border-radius:8px; padding:6px 13px; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700; white-space:nowrap;
  line-height:1.4; transition:background .12s, border-color .12s;
}
.btn-logout:hover{background:rgba(255,255,255,.16); border-color:#fff;}
.btn-logout:focus-visible{outline:2px solid #fff; outline-offset:2px;}

button[disabled]{opacity:.45; cursor:not-allowed;}

/* اهرم قیمت روی کارت: تخفیف با رنگ برند تا از «قیمت پایه» جدا دیده شود */
.lever-disc{color:var(--brand);}

/* ---------- نوارهای زیرین منو ---------- */
/* نوار پنل‌ها خاکستری روشن است و هر پنل رنگ خودش را دارد؛ رنگ از کلاس
   panel-* روی همان نوار می‌آید و به نوارهای پایین‌تر هم داده می‌شود. */
.subbar{
  display:flex; gap:5px; align-items:center; flex-wrap:wrap; padding:0 18px;
  background:#eeeef2; border-bottom:1px solid var(--border);
  --pc:var(--purple);          /* رنگ پیش‌فرض پنل */
}
.subbar-2,.subbar-3,.subbar-4,.subbar-5{background:#f6f6f9;}

/* رنگ هر پنل */
.panel-snappshop  {--pc:var(--purple);}   /* بنفش */
.panel-digikala   {--pc:var(--dk-red);}   /* قرمز */
.panel-tapsishop  {--pc:#f07c00;}   /* نارنجی */
.panel-basalam    {--pc:#1b3a6b;}   /* سرمه‌ای */
.panel-arshiakala {--pc:#a9836b;}   /* قهوه‌ای کم‌رنگ */
/* انبار پنل فروشگاهی نیست، مشترکِ همه است — تیلِ سیجیکالا تا با هیچ
   فروشگاهی اشتباه گرفته نشود */
.panel-warehouse  {--pc:var(--sk-teal);}   /* تیل */

.subtab{
  color:var(--text-soft); text-decoration:none; font-size:12.5px;
  padding:8px 15px; border-radius:9px 9px 0 0; white-space:nowrap;
}
.subtab:hover{color:var(--pc); background:rgba(0,0,0,.035);}
/* تب فعال: سفید با متن هم‌رنگ پنل */
.subtab.active{
  background:#fff; color:var(--pc); font-weight:700;
  box-shadow:0 -2px 0 var(--pc) inset;
}
/* پنلِ ساخته‌نشده کم‌رنگ‌تر دیده می‌شود */
.subtab.soon{opacity:.55;}

/* نقطه‌ی «هنوز ساخته نشده» */
.soon-dot{color:#f0a500; font-size:15px; line-height:0; vertical-align:middle;}

/* لینک‌های مدیریتی کنار منوی کاربر */
.adminlink{
  color:#fff; opacity:.72; text-decoration:none; font-size:12.5px; padding:0 9px;
}
.adminlink:hover{opacity:1;}
.adminlink.active{opacity:1; font-weight:700;}

/* صفحه‌ی به‌زودی */
.soon-card{text-align:center; padding:44px 20px;}
.soon-icon{font-size:38px; margin-bottom:6px;}

/* ---------- نمودار دایره‌ای آمار ---------- */
/* با conic-gradient رسم می‌شود، نه کتابخانه: یک نمودار ساده ارزش یک
   وابستگی CDN و اجرای جاوااسکریپت را ندارد. */
:root{
  --pie0:#7d3cf8; --pie1:#2c5fd0; --pie2:#118a5c; --pie3:#f0a500;
  --pie4:#d81f3d; --pie5:#8b5cf6; --pie6:#0891b2; --pie7:#65a30d; --pie8:#9292a3;
}
.pie-row{display:flex; gap:12px; flex-wrap:wrap;}
.pie-card{flex:1 1 380px;}
.pie-wrap{display:flex; gap:18px; align-items:center; flex-wrap:wrap;}
.pie{
  width:168px; height:168px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--border);
}
.pie-legend{list-style:none; margin:0; padding:0; flex:1 1 200px; min-width:200px;}
.pie-legend li{
  display:flex; gap:8px; align-items:center; font-size:12px;
  padding:3px 0; border-bottom:1px solid var(--border);
}
.pie-legend li:last-child{border-bottom:none;}
.swatch{width:11px; height:11px; border-radius:3px; flex:0 0 auto;}
.lg-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lg-val{font-variant-numeric:tabular-nums; color:var(--text-soft);}
.lg-pct{font-variant-numeric:tabular-nums; font-weight:700; min-width:52px; text-align:left;}
.row-dim{opacity:.55;}

/* خط خلاصه‌ی لغوها بالای آمار */
.cancel-line{font-size:12.5px;}
.cancel-line b{font-variant-numeric:tabular-nums;}

/* سه ورودی کنار هم (نرخ ارسال عادی) */
.tri-input{display:flex; gap:6px;}
.tri-input input{width:88px; border:1px solid var(--border-strong); border-radius:7px;
  padding:7px 9px; font-family:inherit; font-size:12.5px; direction:ltr; text-align:left;}

/* ---------- ماشین‌حساب سود ---------- */
.calc-grid{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start;}
.calc-grid > .card{flex:1 1 300px; margin-bottom:0;}
.calc-grid select,.calc-grid input{
  width:100%; border:1px solid var(--border-strong); border-radius:8px;
  padding:8px 10px; font-family:inherit; font-size:13px; background:#fff;
}
.calc-out{
  font-size:22px; font-weight:800; font-variant-numeric:tabular-nums;
  padding:10px 0 4px; color:var(--brand);
}
.calc-out.good{color:var(--good);} .calc-out.bad{color:var(--bad);}
.calc-break{font-size:11.5px; color:var(--text-soft); line-height:1.9;}

/* انتخابگر تعداد، چسبیده به سمت چپِ ردیف چیپ‌ها */
.sortbar{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:12px;}
.sortbar-t{font-size:12px; color:var(--mute);}
.sortbar-perpage{
  margin-inline-start:auto; font-size:11.5px; color:var(--mute);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.sortbar-perpage select{
  border:1px solid var(--border-strong); border-radius:8px; padding:5px 8px;
  font-family:inherit; font-size:12px; background:#fff; color:var(--text);
}

/* ---------- کنترل‌های بالای نمودار ---------- */
.chart-controls{
  display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; margin-bottom:12px;
}
.chart-controls label{display:flex; flex-direction:column; gap:4px;}
.chart-controls label > span{font-size:11px; color:var(--mute);}
.chart-controls select{
  border:1px solid var(--border-strong); border-radius:8px; padding:8px 11px;
  font-family:inherit; font-size:13px; background:#fff; color:var(--text); min-width:150px;
}
.chart-controls .grand{
  margin-inline-start:auto; text-align:center; background:var(--brand-soft);
  border:1px solid var(--brand-line); border-radius:10px; padding:6px 20px;
}
.chart-controls .grand b{
  display:block; font-size:20px; font-weight:800; color:var(--brand);
  font-variant-numeric:tabular-nums; line-height:1.5;
}
.chart-controls .grand .k{font-size:11px; color:var(--mute);}

/* ---------- نوار پیشرفت کار پس‌زمینه‌ای ---------- */
.jobbar{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:11px 14px; margin:16px 20px 0;
}
.jobbar-head{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px;}
.jobbar-head b{font-size:13px;}
.jobbar-head .muted{font-size:11.5px; flex:1; min-width:0;}
.job-pct{font-size:12.5px; font-weight:800; color:var(--brand);
  font-variant-numeric:tabular-nums; white-space:nowrap;}
.jobtrack{height:7px; background:#ececf1; border-radius:99px; overflow:hidden;}
.jobfill{
  height:100%; width:0; border-radius:99px; background:var(--brand);
  transition:width .4s ease;
}
/* وقتی کل کار معلوم نیست: نوار راه‌راهِ متحرک به‌جای درصد دروغین */
.jobfill.indet{
  background:repeating-linear-gradient(115deg, var(--brand) 0 12px,
             var(--brand-dark) 12px 24px);
  animation:jobslide 1s linear infinite;
}
@keyframes jobslide{from{background-position:0 0;} to{background-position:48px 0;}}

/* ردیف عنوان کارت: عنوان + کالای وصل‌شده + دایره‌ی قیمت‌گذار کنار هم */
.pcard-titlerow{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.pcard-titlerow .pcard-title{flex:0 1 auto;}

/* کنترل‌های آمار داخل پنل فیلتر سمت راست */
.fgroup-body{padding:10px 12px;}
.flabel{display:block; font-size:11px; color:var(--mute); margin:8px 0 4px;}
.fselect{
  width:100%; border:1px solid var(--border-strong); border-radius:8px;
  padding:8px 10px; font-family:inherit; font-size:12.5px; background:#fff;
}
.fpanel .grand{
  margin-top:14px; text-align:center; background:var(--purple-soft);
  border:1px solid #e3d6ff; border-radius:10px; padding:8px 12px;
}
.fpanel .grand b{display:block; font-size:18px; font-weight:800; color:var(--purple);
  font-variant-numeric:tabular-nums; line-height:1.6;}
.fpanel .grand .k{font-size:11px; color:var(--mute);}

/* ---------- نقش‌ها و مجوزها ---------- */
.rolebox{border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px;}
.rolehead{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:9px;}
.rolehead input[type=text]{border:1px solid var(--border-strong); border-radius:7px;
  padding:7px 9px; font-family:inherit; font-size:12.5px;}
.rolecount{margin-inline-start:auto; font-size:11.5px; color:var(--mute);
  background:#f2f2f7; padding:3px 10px; border-radius:20px;}
.permgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:5px;}
.permopt{display:flex; gap:6px; align-items:center; font-size:12px; color:var(--text-soft);
  padding:4px 6px; border-radius:6px;}
.permopt:hover{background:#f6f6fa;}
.permopt input{margin:0;}
.roleactions{display:flex; gap:8px; margin-top:10px;}
.pcard-edit.is-ro{display:flex; gap:16px; align-items:center;}
.pcard-edit.is-ro .ef{display:flex; flex-direction:column; gap:2px;}
.pcard-edit.is-ro b{font-size:12.5px; color:var(--text);}

/* ---------- کارت سفارش (صفحه‌ی سفارشات) ---------- */
/* هم‌خانواده‌ی کارت محصول است — نوار بای‌باکس و تصویر و عنوان از همان
   کلاس‌ها می‌آیند — ولی لهجه‌اش بنفشِ اسنپ‌شاپ است نه قرمز. */
.ocard{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  margin-bottom:10px; display:flex; overflow:hidden;
}
.ocard:hover{border-color:#ddd0ff;}
.ocard .pcard-strip{order:0;}      /* بای‌باکس: سمت راست */
.ocard-body{order:1; flex:1; min-width:0; padding:12px 14px;}
.ocard-act{order:2;}               /* «بررسی کردم»: سمت چپ */

.ocard-head{display:flex; gap:12px; align-items:flex-start;}
.ocard-head .pcard-thumb{flex:0 0 62px; height:62px;}
.ocard-head .pcard-ident{flex:1; min-width:0;}

/* کمیسیون، گوشه‌ی سمت چپِ کارت */
.ocomm{
  flex:0 0 auto; text-align:center; background:var(--purple-soft);
  border:1px solid #e6dbff; border-radius:9px; padding:6px 12px; min-width:104px;
}
.ocomm-k{display:block; font-size:10.5px; color:var(--mute);}
.ocomm-v{display:block; font-size:14px; font-weight:800; color:var(--purple);
  font-variant-numeric:tabular-nums; line-height:1.7;}
.ocomm-s{display:block; font-size:10.5px; color:var(--text-soft);}

/* ردیف مشخصات */
.ospecs{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:11px 0 0; padding:10px 0;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.ospec{flex:1 1 104px; min-width:96px;}
.ospec-k{display:block; font-size:10.5px; color:var(--mute); margin-bottom:2px;}
.ospec-v{display:block; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;}
.ospec-v code{background:#f2f2f7; padding:1px 6px; border-radius:5px;
  font-size:11.5px; color:#6e6e85; font-weight:400;}
.ospec-v .strike{font-size:11px; font-weight:400; margin-inline-start:4px;}
.ospec-i{display:block; font-size:10px; font-weight:400; color:var(--mute); font-style:normal;}

/* ردیف پایین: آخرین سفارش و ماه اخیر */
.ofoot{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:11px -14px -12px; padding:10px 14px;
  background:var(--purple-soft); border-top:1px solid #e9e0ff;
}
.ofoot-col{flex:1 1 300px; min-width:250px;}
.ofoot-col + .ofoot-col{border-inline-start:1px solid #e2d6ff; padding-inline-start:12px;}
.ofoot-t{font-size:10.5px; font-weight:800; color:var(--purple); margin-bottom:5px;}
.ofoot-nums{display:flex; gap:14px; flex-wrap:wrap; align-items:baseline;}
.ofn{display:flex; gap:5px; align-items:baseline; flex-wrap:wrap;}
.ofn i{font-style:normal; font-size:10.5px; color:var(--mute);}
.ofn b{font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;}
.ofn em{font-style:normal; font-size:11px;}

/* برچسب درصد تغییر نسبت به ماه قبل */
.odelta{font-size:10px; font-weight:700; border-radius:5px; padding:1px 5px; white-space:nowrap;}
.odelta-up{background:var(--good-bg); color:var(--good);}
.odelta-down{background:var(--bad-bg); color:var(--bad);}
.odelta-none{background:#ececf3; color:var(--mute);}

/* ستون دکمه‌ی «بررسی کردم» */
.ocard-act{
  flex:0 0 118px; display:flex; flex-direction:column; gap:5px;
  align-items:center; justify-content:center;
  padding:10px; border-inline-start:1px solid var(--border); background:#fcfcfe;
}
.ocard-act small{font-size:10px; text-align:center; line-height:1.6;}
.btn-review{
  background:var(--good); color:#fff; border:none; border-radius:8px;
  padding:9px 12px; width:100%; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700; white-space:nowrap;
}
.btn-review:hover{background:#0d7049;}

@media (max-width:900px){
  .ocard{flex-wrap:wrap;}
  .ocard-act{flex:1 1 100%; flex-direction:row; justify-content:flex-start;
    border-inline-start:none; border-top:1px solid var(--border);}
  .btn-review{width:auto;}
  .ofoot-col + .ofoot-col{border-inline-start:none; padding-inline-start:0;}
}

/* ---------- تطبیق خودکار با انبار ---------- */
.mcard{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  margin-bottom:10px; display:flex; gap:0; overflow:hidden; align-items:stretch;
  /* ★ `wrap` لازم است: بدونش هشدارِ «همین قلم پیشنهادِ n تنوعِ دیگر
     هم هست» — که `.bulk-note` است و `flex-basis:100%` دارد — کلِ عرض
     را می‌گرفت و ستونِ پیشنهادها به **۲۴ پیکسل** له می‌شد. کارت‌ها
     محتوا داشتند و دیده نمی‌شدند؛ از بیرون «صفحه‌ی تطبیق خراب است».
     `.bulk-note` برای `.bulk-form` نوشته شده بود که wrap دارد، و
     اینجا بی‌آنکه سبکش بازبینی شود دوباره استفاده شد. */
  flex-wrap:wrap;
}
/* هشدار می‌رود خطِ دوم، زیرِ محصول و پیشنهادها — نه وسطشان. */
.mcard > .bulk-note{
  order:1; flex:0 0 100%; padding:0 14px 11px; margin:0;
  border-top:1px solid var(--border); padding-top:9px;
}
/* محصول سمت راست، پیشنهادها سمت چپ */
.mprod{
  flex:0 0 330px; display:flex; gap:10px; align-items:flex-start;
  padding:12px 14px; background:#fbfbfe; border-inline-end:1px solid var(--border);
}
.mprod .pcard-thumb{flex:0 0 54px; height:54px;}
.mprod-ident{min-width:0; flex:1;}
.mprod .pcard-title{font-size:13px; line-height:1.7;}
.mprod .pcard-meta{gap:7px; font-size:11px;}

.msugg{flex:1; min-width:0; padding:8px 12px; display:flex; flex-direction:column; gap:6px;}
.msug{
  display:flex; gap:10px; align-items:center;
  border:1px solid var(--border); border-radius:9px; padding:7px 10px;
}
.msug-top{border-color:#c9f0dd; background:#f4fdf9;}
.msug-body{flex:1; min-width:0;}
.msug-name{display:block; font-size:12.5px; font-weight:700; line-height:1.7;}
.msug-meta{display:flex; gap:9px; flex-wrap:wrap; font-size:11px; color:var(--mute);}
.msug-meta code{background:#f2f2f7; padding:1px 6px; border-radius:5px; color:#6e6e85;}
.msug-meta b{color:var(--text); font-variant-numeric:tabular-nums;}
.msug-empty{font-size:12px; color:var(--mute); padding:6px 2px;}

/* درصد شباهت */
.mscore{
  flex:0 0 52px; text-align:center; border-radius:8px; padding:6px 0;
  font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;
}
.sc-hi{background:var(--good-bg); color:var(--good);}
.sc-mid{background:var(--warn-bg); color:var(--warn-text);}
.sc-lo{background:#eeeef3; color:#77778a;}
.sc-manual{background:var(--purple-soft); color:var(--purple); font-size:11px;}

.btn-confirm{
  background:var(--good); color:#fff; border:none; border-radius:7px;
  padding:7px 16px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:700;
}
.btn-confirm:hover{background:#0d7049;}
.btn-none{
  background:#fff; color:var(--text-soft); border:1px solid var(--border-strong);
  border-radius:7px; padding:7px 14px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:700;
}
.btn-none:hover{border-color:var(--bad); color:var(--bad);}

.mmanual{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:2px;}
.mmanual-find{display:flex; gap:6px; flex:1; min-width:200px;}
.mmanual-find input[type=search]{
  flex:1; min-width:0; border:1px solid var(--border-strong); border-radius:7px;
  padding:6px 10px; font-family:inherit; font-size:12px;
}
.mfound{display:flex; flex-direction:column; gap:6px;
  border-top:1px dashed var(--border-strong); padding-top:7px; margin-top:2px;}

.match-find{display:flex; gap:6px; margin-inline-start:10px;}
.match-find input[type=search]{
  border:1px solid var(--border-strong); border-radius:7px;
  padding:6px 10px; font-family:inherit; font-size:12px; min-width:170px;
}
.chip-n{font-style:normal; font-size:11px; opacity:.75;}
.btn-count{
  background:rgba(255,255,255,.25); border-radius:11px;
  padding:0 7px; margin-inline-start:5px; font-size:11.5px;
}
.btn-solid:disabled{background:#c9c9d2; cursor:not-allowed;}

@media (max-width:900px){
  .mcard{flex-direction:column;}
  .mprod{flex:1 1 auto; border-inline-end:none; border-bottom:1px solid var(--border);}
}

/* ═══════════ صفحه‌ی قیمت‌گذاری دیجی‌کالا — هم‌شکل سیجیکالا ═══════════
   توکن‌ها از خودِ سیجیکالا خوانده شده‌اند (getComputedStyle روی صفحه‌ی
   /digikala/<id>/repricers)، نه حدس:
     متن #252525 · زمینه #F6F7FA · تیل اکشن #017E77 · قرمز #D1324D
     کارت radius 12 با border #F0F0F1 و سایه‌ی 0 1px 5px
     پایه ۱۲px، سربرگ ستون ۱۰px وزن ۲۰۰، عنوان کالا ۱۴px
   عمداً زیر .sk- محدود شده‌اند تا هیچ‌کدام روی صفحه‌های اسنپ‌شاپ نریزند. */
/* توکن‌ها روی :root می‌نشینند نه روی .sk-layout، چون بیرون از آن هم لازم
   می‌شوند (صفحه‌بندی، بنر). گذاشتنشان اینجا هیچ قاعده‌ی اسنپ‌شاپی را عوض
   نمی‌کند: متغیر CSS تا جایی که var() صدایش نزند اثری ندارد، و هیچ‌کدام از
   این نام‌ها در قواعد اسنپ‌شاپ استفاده نشده. */
:root{
  --sk-text:#252525; --sk-bg:#f6f7fa; --sk-line:#f0f0f1; --sk-line2:#e6e6e6;
  --sk-mute:#a6a6a6; --sk-teal:#017e77; --sk-teal-bg:#eef6f4; --sk-red:#d1324d;
  --sk-red-bg:#fdeef0; --sk-red-dark:#b52a42; --sk-red-line:#f0b8c2;
}
.sk-layout{
  display:flex; gap:16px; align-items:flex-start; color:var(--sk-text);
  font-size:12px; line-height:18px;
}
.sk-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px;}

/* ---------- ستون فیلتر (راست) ---------- */
.sk-side{width:250px; flex:none; position:sticky; top:12px;}
.sk-sidebox{
  background:#fff; border:1px solid var(--sk-line); border-radius:12px;
  box-shadow:0 1px 5px rgba(0,0,0,.08); padding:16px;
  display:flex; flex-direction:column; gap:13px;
}
.sk-search,.sk-f select{
  width:100%; background:var(--sk-bg); border:1px solid var(--sk-mute);
  border-radius:8px; padding:9px 10px; font-family:inherit; font-size:13px;
  color:var(--sk-text);
}
.sk-search:focus,.sk-f select:focus{outline:none; border-color:var(--sk-teal);}
.sk-f{display:block;}
.sk-f-k{display:block; font-size:11px; color:var(--sk-mute); margin-bottom:4px;}
.sk-f-pair{display:flex; gap:9px;}
.sk-f-pair .sk-f{flex:1; min-width:0;}

/* ---------- نوار بالا ---------- */
.sk-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.sk-defaults{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.sk-defaults-k{font-size:11px; color:var(--sk-mute);}
.sk-stat{
  background:#fff; border:1px solid var(--sk-line); border-radius:8px;
  padding:6px 12px; display:flex; flex-direction:column; align-items:flex-end;
  min-width:82px;
}
.sk-stat span{font-size:10px; color:var(--sk-mute); font-weight:200;}
.sk-stat b{font-size:14px; font-variant-numeric:tabular-nums;}
.sk-stat.over{background:var(--sk-red-bg); border-color:#f3c9d1;}
.sk-stat.over b{color:var(--sk-red);}

.sk-btn{
  border:none; border-radius:8px; padding:9px 15px; font-family:inherit;
  font-size:13px; font-weight:400; cursor:pointer; color:#fff;
  /* ★ زمینه‌ی پیش‌فرض لازم است: `.sk-btn` رنگِ متن را سفید می‌کرد ولی
     زمینه نمی‌داد. روی `<button>` زمینه‌ی پیش‌فرضِ مرورگر نجاتش می‌داد،
     ولی روی `<a>` زمینه شفاف است و دکمه **سفید روی سفید** می‌شد —
     یعنی کاملاً نامرئی، بدونِ هیچ خطایی. اندازه‌گیری شد: ۳۱۶×۴۴ با
     `color:#fff` و `background:rgba(0,0,0,0)`.
     همه‌ی گونه‌ها (`teal`، `ghost`، `outline`، `soft`، `dark`، `line`)
     زمینه‌ی صریح دارند و بعد از این می‌آیند، پس دست‌نخورده می‌مانند. */
  background:var(--sk-teal);
}
.sk-btn-teal{background:var(--sk-teal);}
.sk-btn-teal:hover{background:#016b65;}
.sk-btn-red{background:var(--sk-red);}
.sk-btn-red:hover{background:var(--sk-red-dark);}
.sk-btn-line{
  background:#fff; color:var(--sk-teal); border:1px solid var(--sk-teal);
}

/* ---------- چیپ‌های مرتب‌سازی ---------- */
.sk-sorts{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
/* چیپ سیجیکالا کادر ندارد؛ فقط سایه‌ی نازک. اندازه‌ها اندازه‌گیری‌شده‌اند:
   ارتفاع ۴۰، radius ۶، فونت ۱۲، padding افقی ۱۵. */
.sk-chip{
  background:#fff; border:none; border-radius:6px; height:40px;
  display:inline-flex; align-items:center; padding:0 15px;
  font-size:12px; color:var(--sk-text); text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.sk-chip:hover{background:#fbfbfd;}
.sk-chip.active{background:var(--sk-red); color:#fff;}
.sk-perpage select{
  background:#fff; border:none; border-radius:6px; height:40px;
  padding:0 10px; font-family:inherit; font-size:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.sk-perpage{margin-inline-start:auto; order:2;}
.sk-count{ font-size:11.5px; color:var(--sk-mute);}

/* ---------- کارت کالا ---------- */
.sk-card{
  background:#fff; border:1px solid var(--sk-line); border-radius:12px;
  box-shadow:0 1px 5px rgba(0,0,0,.08); padding:20px;
}
.sk-card-head{display:flex; align-items:center; gap:14px;}
.sk-thumb{
  width:56px; height:56px; flex:none; border-radius:8px; overflow:hidden;
  background:var(--sk-bg); display:flex; align-items:center; justify-content:center;
}
.sk-thumb img{width:100%; height:100%; object-fit:contain;}
.sk-thumb-x{color:var(--sk-mute);}
.sk-title{flex:1; min-width:0; margin:0; font-size:14px; font-weight:400;}
.sk-title a{color:var(--sk-text); text-decoration:none;}
.sk-title a:hover{text-decoration:underline;}
/* DKPC آبی و بدون خط، دقیقاً مثل سیجیکالا */
.sk-dkp{color:#2f7ed8; text-decoration:none; font-size:12.5px;
  font-variant-numeric:tabular-nums; direction:ltr;}
.sk-brand,.sk-cat{font-size:12px; color:var(--sk-text); white-space:nowrap;}
.sk-cat{color:var(--sk-mute);}
.sk-comm{display:flex; flex-direction:column; align-items:center; min-width:56px;}
.sk-comm span{font-size:10px; color:var(--sk-mute); font-weight:200;}
.sk-comm b{font-size:13px;}
.sk-comm b.sk-na{color:var(--sk-mute);}

/* ---------- بلوک تنوع ----------
   در سیجیکالا هر تنوع یک کادرِ روشن است که هم ردیف مشخصات را دربر می‌گیرد
   هم پنل قیمت‌گذارش. اندازه‌ها از خودِ صفحه خوانده شده‌اند: radius 8،
   border #F0F0F1، padding 10، سایه‌ی 0 1px 2px، و زمینه‌ی برنده #EEF6F4. */
.sk-vblock{
  position:relative; border:1px solid var(--sk-line); border-radius:8px;
  padding:10px; margin-top:10px; background:var(--sk-bg);
  box-shadow:0 1px 2px rgba(0,0,0,.1);
}
/* padding سمت راستِ **فیزیکی**، نه inline-end: جهت صفحه rtl است و
   inline-end یعنی چپ — برچسب عمودی آن‌وقت روی ورودی اول می‌افتاد. */
.sk-vblock.won{background:var(--sk-teal-bg); padding-right:32px;}
.sk-vblock.over{border-color:var(--sk-red-line);}

/* ردیف مشخصات: ستون‌ها به همان ترتیب سیجیکالا، هر ستون «عنوان کوچک بالا،
   عدد پایین». عنوان‌ها ۱۰px وزن ۲۰۰ و عددها ۱۴px — اندازه‌گیری‌شده. */
.sk-vrow{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 10px;
}
.sk-vcell{
  display:flex; flex-direction:column; gap:4px; min-width:44px;
  text-align:center;
}
.sk-vcell i{font-style:normal; font-size:10px; font-weight:200;
  color:var(--sk-text); white-space:nowrap;}
.sk-vcell b{font-size:14px; font-weight:400;
  font-variant-numeric:tabular-nums;}
.sk-vcell b em{display:block; font-style:normal; font-size:10px;
  font-weight:200; color:var(--sk-mute);}
/* دکمه‌ی «کالاها» ته ردیف می‌آید ولی حاشیه‌ی خودکار نمی‌گیرد: با
   margin:auto یک فاصله‌ی تمام‌عرض می‌ساخت و ستون‌های بعدی را به خط دوم
   می‌انداخت. */
.sk-vcell-btn{justify-content:flex-start; padding-top:14px;}
.sk-dkpc{direction:ltr; font-variant-numeric:tabular-nums;}
.sk-price{font-weight:700;}
.sk-floor.bad{color:var(--sk-red); font-weight:700;}
.sk-floor em{font-style:normal; color:var(--sk-mute); font-size:12px;}
.sk-yn{color:var(--sk-teal); font-size:15px; font-weight:700;}
.sk-yn.no{color:var(--sk-red);}
.sk-tag{
  font-style:normal; font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:6px;
}
.sk-tag-teal{background:var(--sk-teal-bg); color:var(--sk-teal);}
.sk-tag-grey{background:#ededf3; color:#6e6e85;}
.sk-disc-tag{background:var(--sk-red-bg); color:var(--sk-red);}

/* برچسب عمودی «بای‌باکس» روی لبه‌ی راستِ بلوک، مثل سیجیکالا.
   عمداً right فیزیکی نه inset-inline-end: جهت صفحه rtl است، پس
   inline-end یعنی چپ و برچسب روی ورودی‌ها می‌افتاد. */
.sk-vert{
  position:absolute; right:9px; top:50%;
  transform:translateY(-50%); writing-mode:vertical-rl;
  font-size:15px; font-weight:800; color:var(--sk-teal); letter-spacing:.5px;
}

/* ---------- پنل قیمت‌گذار ----------
   ورودی‌های سیجیکالا: عرض ۱۴۴، ارتفاع ۳۷، radius 8، زمینه #F6F7FA، کادر
   #A6A6A6، و برچسبِ ۱۰pxِ خاکستری بالایشان با ستاره‌ی قرمز. */
.sk-repricer{
  border-top:1px solid rgba(0,0,0,.06); margin-top:10px; padding-top:10px;
}
.sk-rfields{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;}
.sk-rf{display:flex; flex-direction:column; gap:3px;}
.sk-rf>span{font-size:10px; color:var(--sk-mute);}
.sk-req{font-style:normal; color:var(--sk-red);}
.sk-hint{font-style:normal; font-size:10px; color:var(--sk-mute);}
.sk-rf input,.sk-rf select{
  width:144px; height:37px; background:var(--sk-bg);
  border:1px solid var(--sk-mute); border-radius:8px; padding:0 10px;
  font-family:inherit; font-size:14px; color:var(--sk-text);
  direction:ltr; text-align:left; font-variant-numeric:tabular-nums;
}
.sk-rf select{direction:rtl; text-align:right;}
.sk-rf input:disabled{color:var(--sk-mute); border-style:dashed;
  background:transparent;}
.sk-rf input:focus{outline:none; border-color:var(--sk-teal); background:#fff;}
.sk-rf input.over{border-color:var(--sk-red); background:var(--sk-red-bg);}
.sk-rf input::placeholder{color:var(--sk-mute); font-size:12px;}

.sk-rfoot{
  display:flex; align-items:center; gap:14px; margin-top:8px; flex-wrap:wrap;
  font-size:10px; color:var(--sk-mute);
}
.sk-floor-note{font-size:11px;}
.sk-ref i{font-style:normal;}
.sk-over-note{color:var(--sk-red); font-weight:700; font-size:11px;}

/* ---------- دکمه‌های ردیف ---------- */
.sk-vactions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px;
}
.sk-inline{display:inline-flex; align-items:center; gap:6px;}
.sk-toggle{
  height:25px; padding:0 12px; border-radius:8px; cursor:pointer;
  font-family:inherit; font-size:10px; font-weight:700; background:#fff;
}
.sk-toggle.on{border:1px solid var(--dk-red); color:var(--dk-red);}
.sk-toggle.on:hover{background:var(--sk-red-bg);}
.sk-toggle.off{border:1px solid var(--sk-teal); color:var(--sk-teal);}
.sk-toggle.off:hover{background:var(--sk-teal-bg);}
/* تصمیمی که ثبت شده ولی روی پلتفرم ننشسته باید دیده شود، وگرنه کاربر فکر
   می‌کند محصول غیرفعال شده در حالی که روی سایت هنوز فعال است. */
.sk-pending{
  background:#fff6e5; color:#8a5e06; border-radius:6px; padding:2px 8px;
  font-size:10px; font-weight:700;
}
.sk-check{height:31px; padding:0 18px; font-size:12px;}
.sk-check:disabled{opacity:.6; cursor:default;}
.sk-checked{font-size:10px; color:var(--sk-mute);}

.sk-empty{
  background:#fff; border:1px solid var(--sk-line); border-radius:12px;
  padding:40px; text-align:center; color:var(--sk-mute);
}

@media (max-width:900px){
  .sk-layout{flex-direction:column;}
  .sk-side{width:100%; position:static;}
  /* ★ در حالتِ ستونی، `align-items:flex-start` یعنی عرضِ فرزند از
     محتوایش می‌آید نه از والد — پس `min-width:0` روی sk-main هیچ کاری
     نمی‌کرد و ستونِ اصلی به اندازه‌ی max-content پهن می‌شد (۴۷۶ در
     صفحه‌ی ۴۶۴). sk-side عرضِ صریح گرفته بود، sk-main نه. باگ از خودِ
     همین بریک‌پوینت است، نه از کارت‌ها. */
  .sk-main{width:100%;}
  .sk-vhead{display:none;}
  .sk-vrow{grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); text-align:start;}
  .sk-vblock.won{padding-right:10px;}
  .sk-vert{display:none;}
}

/* ---------- تخفیف‌ها: بخش جمع‌شونده‌ی پایین کارت ----------
   سیجیکالا چنین بخشی ندارد، پس بسته می‌ماند و باز شدنش هم چیزی را
   جابه‌جا نمی‌کند — فقط زیر همان کارت باز می‌شود. */
.sk-disc{margin-top:12px; border-top:1px solid var(--sk-line); padding-top:9px;}
.sk-disc summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px;
  font-size:11.5px; color:var(--sk-mute); user-select:none;
}
.sk-disc summary::-webkit-details-marker{display:none;}
.sk-disc summary::before{
  content:"›"; display:inline-block; transition:transform .15s;
  font-size:14px; color:var(--sk-mute);
}
.sk-disc[open] summary::before{transform:rotate(90deg);}
.sk-disc.has summary{color:var(--sk-text);}
.sk-disc-n{
  font-style:normal; background:var(--sk-red-bg); color:var(--sk-red);
  border-radius:6px; padding:1px 8px; font-size:10.5px; font-weight:700;
}
.sk-disc-none{font-style:normal; font-size:10.5px;}
.sk-disc-body{margin-top:8px; display:flex; flex-direction:column; gap:4px;}
.sk-disc-row{
  display:grid; grid-template-columns:minmax(90px,1fr) minmax(90px,1fr)
    minmax(96px,1fr) minmax(120px,1.2fr);
  gap:8px; align-items:center; padding:6px 10px;
  background:var(--sk-bg); border-radius:6px; font-size:11.5px;
}
.sk-disc-var{font-weight:700;}
.sk-disc-price,.sk-disc-off{direction:ltr; text-align:left;
  font-variant-numeric:tabular-nums;}
.sk-disc-off{color:var(--sk-teal);}
.sk-disc-row em{font-style:normal; color:var(--sk-mute);}

/* ---------- چیزهایی که قبلاً از کلاس‌های اسنپ‌شاپ قرض گرفته می‌شد ----------
   صفحه‌ی دیجی‌کالا دیگر هیچ کلاسی با اسنپ‌شاپ مشترک ندارد. دلیلش این نیست
   که الان چیزی خراب است — diff می‌گوید هیچ قاعده‌ی موجودی عوض نشده — بلکه
   این است که دفعه‌ی بعد که ظاهر دیجی‌کالا عوض شود، نشود ناخواسته اسنپ‌شاپ
   را هم عوض کرد. */
.sk-muted{color:var(--sk-mute);}

.sk-banner{
  border-radius:8px; padding:11px 15px; font-size:12px; margin-bottom:2px;
}
.sk-banner-warn{background:#fff6e5; color:#8a5e06;}
.sk-banner-ok{background:var(--sk-teal-bg); color:var(--sk-teal);}
.sk-banner-err{background:var(--sk-red-bg); color:var(--sk-red);}

.sk-pagination{
  display:flex; align-items:center; gap:8px; padding:4px 0 12px;
  font-size:12px; color:var(--sk-text);
}
.sk-pagination a{
  background:#fff; border-radius:6px; height:34px; display:inline-flex;
  align-items:center; padding:0 14px; color:var(--sk-text);
  text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.sk-pagination a:hover{background:#fbfbfd;}
.sk-pnum{color:var(--sk-mute); font-size:11.5px;}
.sk-perpages{display:flex; gap:6px; margin-inline-start:auto;}
.sk-pchip{
  background:#fff; border-radius:6px; height:34px; display:inline-flex;
  align-items:center; padding:0 12px; font-size:11.5px; color:var(--sk-text);
  text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.sk-pchip.active{background:var(--sk-red); color:#fff;}
/* تراشه‌ی خاموش: دیده می‌شود ولی کلیک ندارد — «نیست» با «غیرفعال» یکی
   دیده نشود، چون کاربر دنبالِ دکمه‌ای می‌گردد که برداشته‌ایم. */
.sk-chip-off{opacity:.45; cursor:not-allowed;}

/* ═══════════ انبار مشترک — هم‌شکل «انبارداری» سیجیکالا ═══════════
   توکن‌های --sk-* را از بلوک دیجی‌کالا قرض می‌گیرد (روی :root تعریف
   شده‌اند) چون ظاهرِ هدف یکی است. کلاس‌ها sk-wh- هستند و با هیچ‌جای
   دیگر اسنپ‌شاپ مشترک نیستند: /products هم از layout و fpanel و chip
   استفاده می‌کند و بازآراییِ آن‌ها صفحه‌ی محصولات را هم عوض می‌کرد. */
.sk-wh{color:var(--sk-text); font-size:12px; line-height:18px;}

/* ---------- نوار ابزار ---------- */
.sk-wh-tools{
  display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap;
  margin-bottom:12px;
}
.sk-wh-tools-left{margin-inline-start:auto; display:flex; gap:9px; flex-wrap:wrap;}
.sk-btn-dark{background:#1a1a22; color:#fff;}
.sk-btn-dark:hover{background:#2c2c38;}
/* «عملیات دسته‌ای» در سیجیکالا صورتیِ کم‌رنگ است، نه قرمزِ توپر */
.sk-btn-soft{background:#f8d7dc; color:#8d2338;}
.sk-btn-soft:hover{background:#f3c4cc;}

.sk-wh-add summary{list-style:none; display:inline-flex; cursor:pointer;}
.sk-wh-add summary::-webkit-details-marker{display:none;}
.sk-wh-addform{
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  background:#fff; border:1px solid var(--sk-line); border-radius:12px;
  box-shadow:0 1px 5px rgba(0,0,0,.08); padding:15px; margin-top:9px;
}
.sk-wh-upload{display:flex; gap:7px; align-items:center;}
.sk-wh-file{display:flex; flex-direction:column; gap:3px;}
.sk-wh-file span{font-size:10px; color:var(--sk-mute); font-weight:200;}
.sk-wh-file input[type=file]{
  font-family:inherit; font-size:11px; width:168px; color:var(--sk-text);
}
.sk-wh-note{
  flex-basis:100%; font-size:11px; color:var(--sk-mute); margin-top:2px;
}
.sk-wh-clear{
  font-size:11px; color:var(--sk-red); text-decoration:none; text-align:center;
}

/* ---------- مودالِ افزودن کالا — چیدمانِ سیجیکالا ----------
   فرم یک ستونیِ برچسب‌دار است، نه ردیفِ افقی: در سیجیکالا مودال
   باریک است و هر فیلد خطِ خودش را دارد. `flex-basis:100%` روی
   جداکننده‌ها همان شکست خط را می‌سازد. */
.sk-wh-addhead{
  flex-basis:100%; font-size:13px; font-weight:600; color:var(--sk-text);
  padding-bottom:4px; border-bottom:1px solid var(--sk-line); margin-bottom:2px;
}
/* چک‌باکسِ کنارِ متن — برچسبش کنار است نه بالا، پس ردیفی می‌شود */
.sk-rf-check{flex-direction:row; align-items:center; gap:6px;}
.sk-rf-check>span{font-size:12px; color:var(--sk-text);}
.sk-rf-check input[type=checkbox]{width:auto; margin:0;}

/* دو جعبه‌ی عکس — هرکدام خطِ خودش، چون جای هم می‌نشینند */
.sk-wh-img{
  flex-basis:100%; display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;
  background:var(--sk-soft,#f7f8fa); border-radius:9px; padding:9px 11px;
}
.sk-wh-img .sk-wh-note{flex-basis:auto; margin-top:0; align-self:center;}
#whDkPrev{
  flex-basis:100%; max-width:110px; max-height:110px; border-radius:7px;
  border:1px solid var(--sk-line); background:#fff; object-fit:contain;
}

.sk-wh-adv{flex-basis:100%;}
.sk-wh-adv>summary{
  cursor:pointer; font-size:12px; color:var(--sk-teal); list-style:none;
  padding:5px 0; user-select:none;
}
.sk-wh-adv>summary::-webkit-details-marker{display:none;}
/* «+ تنظیمات پیشرفته» که با باز شدن «−» می‌شود — عیناً سیجیکالا */
.sk-wh-adv>summary::before{content:"+ ";}
.sk-wh-adv[open]>summary::before{content:"− ";}
.sk-wh-advbody{
  flex-basis:100%; display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  padding-top:4px;
}
.sk-wh-advbody .sk-wh-note{flex-basis:auto; margin-top:0; align-self:center;}

/* ---------- عملیات دسته‌ای ---------- */
.sk-wh-bulk{
  background:#fff; border:1px solid var(--sk-line); border-radius:12px;
  box-shadow:0 1px 5px rgba(0,0,0,.08); padding:12px 15px; margin-bottom:10px;
}
.sk-wh-bulk summary{
  cursor:pointer; list-style:none; font-size:12px; font-weight:700;
  color:var(--sk-text);
}
.sk-wh-bulk summary::-webkit-details-marker{display:none;}
.sk-wh-bulkform{
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin-top:11px;
}
.sk-wh-all{display:flex; align-items:center; gap:5px; font-size:11.5px;}

/* ---------- کارت قلم ---------- */
.sk-wh-card{
  background:#fff; border:1px solid var(--sk-line); border-radius:12px;
  box-shadow:0 1px 5px rgba(0,0,0,.08); padding:16px 18px; margin-bottom:10px;
}
.sk-wh-head{display:flex; align-items:center; gap:13px;}
.sk-wh-pick input{width:16px; height:16px; accent-color:var(--sk-red);}
.sk-wh-thumb{
  width:80px; height:80px; flex:none; border-radius:8px; overflow:hidden;
  background:var(--sk-bg); display:flex; align-items:center;
  justify-content:center; font-size:10px; color:var(--sk-mute);
}
.sk-wh-thumb img{width:100%; height:100%; object-fit:contain;}
.sk-wh-thumb.noimg::after{content:"بدون عکس";}
.sk-wh-name{flex:1; min-width:0; margin:0; font-size:14px; font-weight:400;}
/* «تنوع‌ها» در سیجیکالا کپسولِ کادرِ قرمزِ توخالی است */
.sk-wh-variants{
  background:#fff; border:1px solid var(--sk-red); border-radius:6px;
  color:var(--sk-red); font-family:inherit; font-size:11px; font-weight:700;
  padding:5px 12px; cursor:pointer; white-space:nowrap;
}
.sk-wh-variants:hover{background:var(--sk-red-bg);}
.sk-wh-brand{font-size:12px; white-space:nowrap;}
.sk-wh-stock,.sk-wh-code{
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  white-space:nowrap;
}
.sk-wh-stock-k{font-size:10px; color:var(--sk-mute); font-weight:200;}
.sk-wh-stock span{font-size:11.5px; font-variant-numeric:tabular-nums;}
.sk-wh-stock i{font-style:normal; color:var(--sk-mute); font-size:10px;}
.sk-wh-code b{font-size:13px; font-variant-numeric:tabular-nums;}

.sk-wh-edit{
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  border-top:1px solid var(--sk-line); margin-top:12px; padding-top:11px;
}
.sk-wh-last{font-size:11px; color:var(--sk-mute); margin-inline-start:auto;}
.sk-wh-last i{font-style:normal;}

/* ---------- پنل تنوع‌ها ---------- */
.sk-whp-panel{margin-top:11px;}
.sk-whp-list{display:flex; flex-direction:column; gap:6px;}
.sk-whp{
  display:flex; align-items:center; gap:11px; padding:8px 11px;
  background:var(--sk-bg); border:1px solid var(--sk-line); border-radius:8px;
}
.sk-whp-thumb{
  width:52px; height:52px; flex:none; border-radius:8px; overflow:hidden;
  background:#fff; border:1px solid var(--sk-line);
  display:flex; align-items:center; justify-content:center;
  color:var(--sk-mute);
}
.sk-whp-thumb img{width:100%; height:100%; object-fit:contain;}
.sk-whp-body{flex:1; min-width:0;}
.sk-whp-name{display:block; font-size:12px; color:var(--sk-text);
  text-decoration:none;}
.sk-whp-name:hover{text-decoration:underline;}
.sk-whp-meta{display:flex; gap:8px; align-items:center; margin-top:2px;
  font-size:10.5px; color:var(--sk-mute); flex-wrap:wrap;}
.sk-whp-meta code{background:#fff; border-radius:5px; padding:1px 6px;}
.sk-whp-tag{
  font-style:normal; background:var(--sk-teal-bg); color:var(--sk-teal);
  border-radius:5px; padding:1px 7px; font-weight:700;
}
.sk-whp-price{display:flex; flex-direction:column; align-items:flex-end;
  white-space:nowrap;}
.sk-whp-price span{font-size:10px; color:var(--sk-mute); font-weight:200;}
.sk-whp-price b{font-size:12.5px; font-variant-numeric:tabular-nums;}
.sk-whp-bb{min-width:78px; text-align:center; font-size:15px;}
.sk-whp-bb .ok{color:var(--sk-teal);}
.sk-whp-bb .no{color:var(--sk-red);}
.sk-whp-bb .na{color:var(--sk-mute);}
.sk-whp-bb .p{display:block; font-size:11px; color:var(--sk-mute);
  font-variant-numeric:tabular-nums;}
.sk-whp-empty{
  padding:14px; text-align:center; color:var(--sk-mute); font-size:11.5px;
  background:var(--sk-bg); border-radius:8px;
}

@media (max-width:900px){
  .sk-wh-head{flex-wrap:wrap;}
  .sk-wh-name{flex-basis:100%; order:-1;}
}
.sk-whp-sec{
  font-size:10px; font-weight:700; color:var(--sk-mute); margin-top:4px;
}
.sk-wh-variants.off{border-color:var(--sk-line2); color:var(--sk-mute);}
.sk-wh-variants.off:hover{background:var(--sk-bg);}

/* ---------- دکمه‌ی «کالا» و پنل اتصال انبار ----------
   ظاهرش از «کالاها»ی سیجیکالا اندازه گرفته شده: زمینه‌ی شفاف، کادر
   یک‌پیکسلیِ #EF4056، radius 8، فونت ۱۰، padding افقی ۵، ارتفاع ۲۵. */
.sk-kala{
  background:transparent; border:1px solid var(--dk-red); border-radius:8px;
  color:var(--sk-text); font-family:inherit; font-size:10px; font-weight:700;
  height:25px; padding:0 9px; cursor:pointer; white-space:nowrap;
  margin-inline-start:auto;      /* سمت چپِ نوار */
}
.sk-kala:hover{background:var(--sk-red-bg);}
/* وصل‌شده: پرِ کم‌رنگ، تا از یک نگاه معلوم باشد کدام تنوع انبار دارد */
.sk-kala.on{background:var(--sk-teal-bg); border-color:var(--sk-teal);
  color:var(--sk-teal);}

.sk-lk-panel{margin-top:10px;}

/* پنل «کالاها» وقتی مودال است (صفحه‌ی ساخت انبارش) — چون آنجا کارتِ
   تنوع داخلِ فرمِ ساخت است و فرمِ تودرتو نمی‌شود. */
.sk-lk-dialog{padding:0;}
.sk-lk-dialog-body{padding:16px 18px 20px; max-height:76vh; overflow-y:auto;}
.sk-lk-dialog-x{display:flex; justify-content:flex-start; padding:8px 10px 0;}
.sk-lk-dialog-x button{
  background:transparent; border:none; cursor:pointer; line-height:1;
  font-size:22px; color:var(--sk-mute); padding:0 6px;
}
.sk-lk-dialog-x button:hover{color:var(--sk-text);}
.sk-lk-head{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding-bottom:7px; margin-bottom:7px;
  border-bottom:1px dashed var(--sk-line2);
}
.sk-lk-t{font-size:12px; font-weight:700;}
.sk-lk-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:10.5px; color:var(--sk-mute);}
.sk-lk-meta code{background:#fff; border-radius:5px; padding:1px 6px;}
.sk-lk-sum{
  margin-top:8px; font-size:11.5px; color:var(--sk-text);
}
.sk-lk-sum b{font-variant-numeric:tabular-nums;}
.sk-lk-sum i{font-style:normal; color:var(--sk-mute); font-size:10.5px;}
.sk-lk-go{
  display:inline-block; margin-inline-start:8px; color:var(--sk-red);
  text-decoration:none; font-weight:700;
}
.sk-lk-go:hover{text-decoration:underline;}
/* قاب سفید پشت تصویر: عکس‌های دیجی‌کالا زمینه‌ی سفید دارند و بدون قاب،
   کارت خالی به‌نظر می‌رسید */
.sk-thumb{border:1px solid var(--sk-line); background:#fff;}
.sk-thumb.noimg::after{content:"بدون عکس"; font-size:9px; color:var(--sk-mute);}

/* ═══════════ افزوده‌های صفحه‌ی قیمت‌گذاری ═══════════ */

/* شانزده فیلترِ سیجیکالا دوتا در هر ردیف می‌نشینند */
.sk-f-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 9px;}
.sk-f-grid .sk-f{min-width:0;}
.sk-f-grid select{width:100%;}

/* نوار بالا: پیش‌فرض‌ها راست، عملیات وسط، همگام‌سازی چپ — مثل سیجیکالا،
   با خط جداکننده‌ی زیرش (اندازه‌گیری‌شده: padding پایین ۲۰، خط ۱px). */
.sk-toolbar{
  align-items:flex-end; border-bottom:1px solid var(--sk-text);
  padding-bottom:20px;
}
.sk-toolbar-mid{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.sk-defaults{align-items:flex-end;}
.sk-stats{display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.sk-stats .sk-count{margin-inline-start:auto;}

/* دکمه‌ی کادرِ قرمزِ توخالی و دکمه‌ی سفیدِ «ثبت» — هر دو در سیجیکالا هستند */
.sk-btn-outline{
  background:transparent; border:1px solid var(--dk-red); color:var(--sk-text);
  height:40px; display:inline-flex; align-items:center;
}
.sk-btn-outline:hover{background:var(--sk-red-bg);}
.sk-btn-ghost{
  background:#fff; border:1px solid var(--sk-line2); color:var(--sk-mute);
  height:37px;
}
.sk-btn-ghost:hover{color:var(--sk-text); border-color:var(--sk-mute);}
.sk-btn-dark{background:var(--sk-text); color:#fff;}
.sk-btn-dark:hover{background:#3a3a3a;}
a.sk-btn{text-decoration:none; display:inline-flex; align-items:center;}

/* ---------- مودال عملیات دسته‌ای ----------
   ورقِ سفیدِ وسطِ صفحه با دکمه‌های تیره — همان چیزی که «عملیات دسته‌ای»ی
   سیجیکالا باز می‌کند. */
.sk-modal{
  border:none; border-radius:10px; padding:0; width:min(920px, 92vw);
  color:var(--sk-text); font-size:12px;
}
.sk-modal::backdrop{background:rgba(0,0,0,.45);}
.sk-modal-body{padding:20px 10px; display:flex; flex-direction:column; gap:14px;}
.sk-modal-row{display:flex; gap:10px; justify-content:space-around;
  flex-wrap:wrap;}
.sk-modal-note{margin:0; font-size:11px; color:var(--sk-mute); text-align:center;}
.sk-modal-btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-top:12px;}

/* ---------- جدول پیش‌نمایش دسته‌ای ---------- */
.sk-bulk-table{margin-top:12px; display:flex; flex-direction:column; gap:4px;}
.sk-bulk-head,.sk-bulk-row{
  display:grid; gap:8px; align-items:center;
  grid-template-columns:96px minmax(160px,2fr) minmax(120px,1fr)
    minmax(180px,1.4fr) minmax(110px,1fr);
}
.sk-bulk-head{font-size:10px; font-weight:200; padding:0 10px;}
.sk-bulk-row{
  background:var(--sk-bg); border-radius:8px; padding:8px 10px; font-size:12px;
}
.sk-bulk-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- محموله ---------- */
.sk-pk .sk-card-head{flex-wrap:wrap;}
.sk-pk-sheets{display:flex; gap:8px; margin-inline-start:auto;}
.sk-pk-name input{
  height:37px; border:1px solid var(--sk-mute); border-radius:8px;
  padding:0 10px; font-family:inherit; font-size:14px; background:var(--sk-bg);
}
.sk-pk-list{display:flex; flex-direction:column; gap:6px; margin-top:10px;}
/* قلمِ بی‌اتصال قرمز است، همان‌طور که روی کاغذ قرمز چاپ می‌شود */
.sk-pk-warn{border-color:var(--sk-red-line); background:var(--sk-red-bg);}
.sk-pk-nolink{font-style:normal; color:var(--sk-red); font-weight:700;}

@media (max-width:900px){
  .sk-f-grid{grid-template-columns:1fr;}
  .sk-bulk-head{display:none;}
  .sk-bulk-row{grid-template-columns:1fr 1fr;}
}

/* ═══════════ آمار سفارشات دیجی‌کالا ═══════════ */
.sk-grand{
  display:flex; flex-direction:column; gap:2px; background:var(--sk-bg);
  border-radius:8px; padding:10px 12px;
}
.sk-grand span{font-size:10px; color:var(--sk-mute);}
.sk-grand b{font-size:18px; font-variant-numeric:tabular-nums;}
.sk-stats-head{font-size:12px; color:var(--sk-mute); margin-bottom:10px;}
/* ★ چهار نمودار در یک ردیفِ مساوی. قبلاً flex با `min-width:280` بود و
   چهارتا در ستونِ ~۹۷۴ پیکسلی جا نمی‌شدند (۴×۲۸۰+گپ = ۱۱۸۰)، پس یکی
   بی‌صدا به سطرِ بعد می‌افتاد و ردیف نامرتب می‌شد.
   `minmax(0,1fr)` لازم است نه `1fr`: کفِ پیش‌فرضِ گرید `auto` است و
   محتوای پهن دوباره ستون را باز می‌کند. */
.sk-pies{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;}
.sk-pie-card{min-width:0;}
/* در چهارستونه دایره کوچک‌تر می‌شود تا افسانه زیرش جا بگیرد */
.sk-pies .sk-pie-wrap{flex-direction:column; align-items:stretch; gap:10px;}
/* ★ دایره اندازه‌ی **ثابتِ درون‌خطی** دارد (`width:NNNpx` از سرور) و در
   کارتِ باریک مقیاس نمی‌شد؛ قاچ‌ها از لبه‌ی کارت بیرون می‌زدند —
   اندازه‌گیری روی ۳۹۰: کارت ۳۰۸ ولی قاچ تا ۴۴۱ می‌رفت.
   `!important` لازم است چون مقدار درون‌خطی است و هیچ سلکتوری بدونش
   نمی‌بردش. کلاسِ درست `sg-pie` است نه `sk-pie` — نسخه‌ی اول همین را
   اشتباه گرفت و قاعده بی‌اثر ماند. */
.sk-pies .sg-pie{width:100% !important; height:auto !important;}
.sk-pies .sg-pie svg{width:100%; height:auto; display:block;}

/* ═══════════ نمودار روند ═══════════ */

.sk-chart-modes{margin-inline-start:auto; display:inline-flex; gap:6px;}
.sk-stats-head:has(.sk-chart-modes){display:flex; align-items:center;}

.sk-chart-legend{
  list-style:none; margin:0 0 10px; padding:0;
  display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px;
}
.sk-chart-legend li{display:inline-flex; align-items:center; gap:6px;}

/* ستونِ عدد سمتِ راست، نمودار وسط، برچسبِ دوره پایین */
.sk-chart2{position:relative; padding-inline-end:78px;}
.sk-chart2 svg{width:100%; height:280px; display:block; overflow:visible;}

/* ★ خط‌کشیِ پس‌زمینه عمداً کمرنگ است: باید خواندنِ عدد را آسان کند،
   نه با خودِ خطِ داده رقابت. */
.sk-grid{stroke:var(--sk-line, #e5e7eb); stroke-width:1;}

.sk-axis-y{
  position:absolute; inset-inline-end:0; top:0; height:280px; width:74px;
  display:flex; flex-direction:column; justify-content:space-between;
  font-size:10.5px; color:var(--sk-mute); text-align:start;
  font-variant-numeric:tabular-nums; padding-block:14px 34px;
}
.sk-axis-x{
  display:flex; justify-content:space-between; font-size:10px;
  color:var(--sk-mute); margin-top:4px; gap:2px;
}
.sk-axis-x span{flex:1; text-align:center; white-space:nowrap;}

.sk-pie-title{font-size:14px; text-align:center; margin-bottom:10px;}
.sk-pie-wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.sk-pie{width:190px; height:190px; border-radius:50%; flex:none;}
.sk-legend{list-style:none; margin:0; padding:0; flex:1; min-width:170px;}
.sk-legend li{
  display:grid; grid-template-columns:14px 1fr auto auto; gap:8px;
  align-items:center; font-size:11px; padding:2px 0;
}
.sk-swatch{width:14px; height:10px; border-radius:2px;}
.sk-lg-label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sk-lg-val,.sk-lg-pct{font-variant-numeric:tabular-nums;}
.sk-lg-pct{color:var(--sk-mute);}
.sk-pie-note{font-size:11px; color:var(--sk-mute); margin:8px 0 0;}

/* ── دو نمودارِ روی‌هم با محورِ افقیِ مشترک ──
   ★ عمداً دو نمودارِ جدا و نه یک نمودار با دو محورِ عمودی: نمودارِ
   دومحوره شکلِ رابطه را می‌سازد نه اینکه نشانش دهد. با عوض کردنِ
   مقیاسِ یکی می‌شود دو خط را به هم چسباند یا از هم دور کرد. */
.sk-chartrow{display:flex; align-items:stretch; gap:8px; margin-bottom:4px;}
.sk-chartlab{
  flex:0 0 74px; font-size:11px; color:var(--sk-mute); align-self:center;
  text-align:start;
}
.sk-chartrow .sk-chart2{flex:1; min-width:0; padding-inline-end:64px;}
.sk-chartrow .sk-chart2 svg{height:150px;}
/* محورِ عمودیِ کوتاه: فقط بیشینه و صفر — پله‌ی میانی روی ۱۵۰ پیکسل
   شلوغی می‌آورد بی‌آنکه چیزی اضافه کند. */
.sk-axis-short{height:150px; padding-block:8px 22px;}
/* محورِ افقی زیرِ **هر دو** نمودار، یک بار.
   ★ داخلِ همان `.sk-chartrow` می‌نشیند (با یک برچسبِ خالی به‌جای
   عنوان)، تا عرضش دقیقاً عرضِ نمودارها باشد. حاشیه‌ی دستی جواب نمی‌داد:
   در RTL جهتِ `margin-inline-start` برعکس می‌شود.

   ★ `direction:ltr` **لازم است**: خطِ نمودار از چپ (قدیمی‌ترین روز) به
   راست کشیده می‌شود، ولی صفحه راست‌چین است و بدونِ این، برچسب‌ها
   برعکسِ نقطه‌ها می‌نشینند — اندازه‌گیری شد: برچسبِ روزِ اول ۱۵۸۲ پیکسل
   دورتر از نقطه‌ی روزِ اول بود.

   ★ `padding-inline:3%` هم‌ترازی را کامل می‌کند: نقطه‌ها در viewBoxِ
   ۱۰۰۰واحدی از x=30 تا x=970 اند، یعنی ۳٪ از هر طرف تورفتگی. */
/* ★ هر برچسب **مطلق** روی جایگاهِ نقطه‌ی خودش می‌نشیند، نه با
   `space-between`. با تقسیمِ مساوی، مرکزِ هر برچسب وسطِ یک برش می‌افتد
   نه روی نقطه — اندازه‌گیری شد: ۵۶ پیکسل خطا روی اولین و آخرین. */
.sk-axis-x-shared{
  position:relative; height:16px; direction:ltr; margin-top:2px;
  font-size:10px; color:var(--sk-mute);
}
.sk-axis-x-shared span{
  position:absolute; transform:translateX(-50%); white-space:nowrap;
}
/* ردیفِ محور خودش عنوان ندارد، ولی جای عنوان را نگه می‌دارد. */
.sk-axisrow .sk-chart2{padding-inline-end:64px;}

.sk-chart{position:relative;}
.sk-chart svg{width:100%; height:260px; display:block;}
.sk-chart-x{
  /* برچسب‌های محور افقی چپ‌به‌راست‌اند، چون خودِ خط هم از چپ (قدیمی‌ترین
     روز) به راست (تازه‌ترین) کشیده می‌شود. بدون این، برچسب‌ها برعکسِ
     نمودار می‌نشستند. */
  display:flex; justify-content:space-between; font-size:10px;
  color:var(--sk-mute); padding:0 18px; direction:ltr;
}
.sk-chart-y{
  position:absolute; top:0; bottom:24px; inset-inline-end:0;
  display:flex; flex-direction:column; justify-content:space-between;
  font-size:10px; color:var(--sk-mute); pointer-events:none;
}
.sk-missing{margin:0; padding-inline-start:18px; font-size:12px;}
.sk-missing li{margin:3px 0;}

/* ═══════════ سفارشات: بلوک «آخرین سفارش / ماه اخیر» ═══════════
   اندازه‌ها از کارت «بررسی»ی سیجیکالا: عنوان‌های ۱۰px وزن ۲۰۰، عددها ۱۴،
   دکمه‌ی «بررسی کردم» ۹۹×۳۷ تیل، و برچسب درصد تغییر با گوشه‌ی ۴. */
.sk-ostats{
  display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap;
  border-top:1px solid rgba(0,0,0,.06); margin-top:10px; padding-top:10px;
}
.sk-obox{min-width:200px;}
.sk-obox-t{font-size:10px; font-weight:200; color:var(--sk-text); margin-bottom:4px;}
.sk-orow{display:flex; align-items:center; gap:6px; font-size:14px; padding:1px 0;}
.sk-orow i{font-style:normal; font-size:10px; font-weight:200; color:var(--sk-text);}
.sk-orow b{font-weight:400; font-variant-numeric:tabular-nums;}
.sk-good{color:var(--sk-teal);}
.sk-bad{color:var(--sk-red);}
.sk-delta{
  font-size:10px; font-weight:700; border-radius:4px; padding:2px 6px;
}
.sk-delta.up{background:var(--sk-teal-bg); color:var(--sk-teal);}
.sk-delta.down{background:var(--sk-red-bg); color:var(--sk-red);}
.sk-oreview{display:flex; flex-direction:column; align-items:center; gap:4px;
  margin-inline-start:auto;}

/* ---------- جدول ردیف‌های سفارش (هر دو کانال) ---------- */
.sk-otable{display:flex; flex-direction:column; gap:4px; margin-top:10px;}
.sk-ohead,.sk-orow-t{
  display:grid; gap:8px; align-items:center;
  grid-template-columns:minmax(150px,2.2fr) 42px minmax(84px,1fr)
    minmax(92px,1.1fr) minmax(104px,1.2fr) 72px minmax(56px,.7fr);
}
.sk-ohead{font-size:10px; font-weight:200; padding:0 10px;}
.sk-orow-t{
  background:var(--sk-bg); border-radius:8px; padding:8px 10px; font-size:12px;
  font-variant-numeric:tabular-nums;
}
.sk-oname{display:flex; flex-direction:column; gap:2px; min-width:0;}
.sk-oname i{font-size:10px;}
.sk-orow-t i{font-style:normal;}

@media (max-width:900px){
  .sk-ohead{display:none;}
  .sk-orow-t{grid-template-columns:1fr 1fr;}
  .sk-ostats{gap:12px;}
}

/* جدولِ ردیف‌های سفارش پهن است؛ داخل خودش اسکرول شود نه اینکه کلِ صفحه را
   پهن کند و ستون فیلتر را از لبه بیرون بیندازد. */
.sk-card{min-width:0;}
.sk-otable{overflow-x:auto;}
.sk-ohead,.sk-orow-t{min-width:660px;}

/* زنجیره‌ی تطبیق در ستون «تطبیق» محموله‌ساز: قلم انبار ← ردیف شیت */
.chain-cell{min-width:260px;}
.chain{font-size:10.5px; color:var(--mute); margin-top:3px; line-height:1.6;}
.chain b{color:var(--text); font-weight:700;}
.chain-miss{color:var(--bad);}
.chain-miss i{font-style:normal; font-weight:700;}

/* ═══════════ محموله‌ساز: جدول انتخاب ═══════════ */
.sk-bp-head,.sk-bp-row{
  display:grid; gap:8px; align-items:center; min-width:900px;
  grid-template-columns:34px 52px minmax(200px,2.4fr) 62px 96px 92px 108px
    minmax(230px,2fr);
}
.sk-bp-head{font-size:10px; font-weight:200; padding:0 10px 6px;}
.sk-bp-row{
  background:var(--sk-bg); border-radius:8px; padding:8px 10px; font-size:12px;
  margin-bottom:4px;
}
/* ردیفی که هیچ باری ندارد کم‌رنگ‌تر است — ولی حذف نمی‌شود */
.sk-bp-none{opacity:.62;}
.sk-bp-thumb{
  width:44px; height:44px; border-radius:6px; overflow:hidden; background:#fff;
  border:1px solid var(--sk-line); display:flex; align-items:center;
  justify-content:center;
}
.sk-bp-thumb img{width:100%; height:100%; object-fit:contain;}
.sk-bp-title{display:flex; flex-direction:column; gap:2px; min-width:0;}
.sk-bp-title a{color:var(--sk-text); text-decoration:none;}
.sk-bp-title a:hover{text-decoration:underline;}
.sk-bp-title i{font-size:10px; font-style:normal;}
.sk-bp-num{text-align:center; font-variant-numeric:tabular-nums;}
.sk-bp-num i{font-style:normal; font-size:10px; display:block;}
.sk-qty{
  width:92px; height:31px; border:1px solid var(--sk-mute); border-radius:8px;
  background:#fff; padding:0 8px; font-family:inherit; font-size:13px;
  text-align:center; font-variant-numeric:tabular-nums;
}
.sk-qty:disabled{background:var(--sk-bg); color:var(--sk-mute);}
input[type=checkbox]{accent-color:var(--sk-teal); width:16px; height:16px;}

/* برچسب وضعیت موجودی */
.sk-avail-full{background:var(--sk-teal-bg); color:var(--sk-teal);}
.sk-avail-partial{background:#fff6e5; color:#8a5e06;}
.sk-avail-none{background:var(--sk-red-bg); color:var(--sk-red);}
.sk-avail-unknown{background:#ededf3; color:#6e6e85;}

.sk-chip-n{
  font-style:normal; font-size:10px; color:var(--sk-mute);
  margin-inline-start:6px;
}
.sk-chip.active .sk-chip-n{color:#fff;}

/* خلاصه‌ی انتخاب، بالای دکمه‌ی ساخت */
.sk-pick-sum{
  margin:12px 0; font-size:13px; color:var(--sk-mute);
}
.sk-pick-sum.on{color:var(--sk-text); font-weight:700;}
.sk-shoplist{
  width:100%; font-family:monospace; font-size:12px; border-radius:8px;
  border:1px solid var(--sk-line); padding:10px; margin-top:10px;
}

/* ═══════════ فهرست محموله‌ها ═══════════ */
.sk-pk-head,.sk-pk-row{
  display:grid; gap:8px; align-items:center; min-width:860px;
  grid-template-columns:minmax(170px,1.6fr) minmax(140px,1.2fr)
    minmax(120px,1fr) 54px 54px minmax(150px,1.2fr) minmax(210px,1.4fr);
}
.sk-pk-head{font-size:10px; font-weight:200; padding:0 10px 6px;}
.sk-pk-row{
  background:var(--sk-bg); border-radius:8px; padding:8px 10px; font-size:12px;
  margin-bottom:4px;
}
.sk-pk-row .sk-pk-sheets{margin:0; gap:6px; flex-wrap:wrap;}
.sk-pk-row .sk-btn-outline{height:28px; font-size:11px; padding:0 10px;}

/* ═══════════════════════════════════════════════════════════════════
   داشبورد — اندازه‌ها و رنگ‌ها عیناً از سیجیکالا خوانده شده‌اند.
   مرجع: docs/sigikala-ui-spec.md § داشبورد
   ═══════════════════════════════════════════════════════════════════ */

.sg-row { display: flex; gap: 30px; align-items: stretch; }
.sg-row > .sg-card { flex: 1 1 0; min-width: 0; }

.sg-card {
  display: flex; flex-direction: column; gap: 20px;
  background: #fff; border-radius: 8px; padding: 20px;
  box-shadow: rgba(0, 0, 0, .05) 0 0 12px 0;
}

.sg-card-title { font-size: 16px; }
.sg-card-title-line {
  border-bottom: 2px solid var(--sk-text); padding-bottom: 2px;
  display: flex; align-items: center; justify-content: space-between;
}

/* ── کارتِ تنظیمات ── */
.sg-set-body {
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start; flex: 1;
}
.sg-set-col { display: flex; flex-direction: column; align-items: flex-start;
              gap: 15px; }

/* سوییچ: در سیجیکالا یک دایره‌ی ۱۶ پیکسلی است، نه کلیدِ کشویی */
.sg-switch { display: flex; align-items: center; font-size: 10px;
             cursor: pointer; gap: 6px; }
.sg-switch input { position: absolute; opacity: 0; width: 16px; height: 16px;
                   margin: 0; cursor: pointer; }
.sg-switch-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; background: var(--sk-line2); border-radius: 100%;
  flex: 0 0 16px; transition: background .15s;
}
.sg-switch-dot svg { opacity: 0; transition: opacity .15s; }
.sg-switch input:checked + .sg-switch-dot { background: var(--dk-red); }
.sg-switch input:checked + .sg-switch-dot svg { opacity: 1; }
.sg-switch input:focus-visible + .sg-switch-dot { outline: 2px solid var(--dk-red);
                                                  outline-offset: 2px; }
.sg-switch-txt { font-size: 10px; }

/* ورودی: ۱۲۰×۳۷ با برچسبِ زیرِ آن */
.sg-field { text-align: right; display: flex; flex-direction: column; }
.sg-field input {
  width: 120px; height: 37px; font-size: 14px; background: var(--sk-bg);
  border-radius: 8px; padding: 10px 10px 10px 5px;
  border: 1px solid var(--sk-mute); color: var(--sk-text);
}
.sg-field label { font-size: 10px; color: var(--sk-mute); margin-top: 2px; }
.sg-req { color: var(--sk-red); }
.sg-hint { font-size: 10px; color: var(--sk-mute); }

.sg-save {
  height: 37px; padding: 0 15px; border: 0; border-radius: 8px;
  background: var(--sk-teal); color: #fff; font-size: 14px; cursor: pointer;
  font-family: inherit;
}

/* ── تودو لیست ── */
.sg-refresh { color: var(--sk-text); display: inline-flex; padding: 2px;
              border-radius: 4px; }
.sg-refresh:hover { background: var(--sk-line); }
.sg-todo { list-style: none; margin: 0; padding: 0; display: flex;
           flex-direction: column; gap: 10px; }
.sg-todo li a {
  display: block; font-size: 12px; color: var(--sk-text); text-decoration: none;
  border: 1px solid var(--sk-line); border-radius: 8px; padding: 10px;
  line-height: 1.7;
}
.sg-todo li a:hover { border-color: var(--dk-red); }
.sg-todo li b { color: var(--sk-red); font-size: 14px; }
.sg-todo-empty { font-size: 12px; color: var(--sk-mute); margin: 0; }

/* ── نمودار ── */
.sg-chart-box { display: flex; flex-direction: column; gap: 10px; }
.sg-pie { position: relative; max-width: 100%; }
.sg-pie svg { max-width: 100%; height: auto; }
.sg-slice { transition: opacity .12s; }
.sg-pie:hover .sg-slice { opacity: .55; }
.sg-pie .sg-slice:hover { opacity: 1; }

/* tooltipِ مشترکِ همه‌ی نمودارها */
.sg-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: rgba(0, 0, 0, .8); color: #fff; font-size: 12px;
  padding: 6px 8px; border-radius: 6px; white-space: nowrap;
  transform: translate(-50%, -140%); opacity: 0; transition: opacity .1s;
}
.sg-tip.on { opacity: 1; }

@media (max-width: 1100px) { .sg-row { flex-direction: column; } }

/* ═══════════════════════════════════════════════════════════════════
   ساخت انبارش — اندازه‌ها از سیجیکالا.
   مرجع: docs/sigikala-ui-spec.md § ساخت انبارش
   ═══════════════════════════════════════════════════════════════════ */

.sg-inb-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--sk-text);
}
.sg-inb-weeks { display: flex; align-items: center; gap: 20px; font-size: 12px; }
.sg-inb-weeks .sg-field input { width: 100px; }
.sg-inb-total { text-align: center; width: 120px; height: 45px;
                display: flex; flex-direction: column;
                justify-content: center; }
.sg-inb-total div { font-size: 12px; }
.sg-inb-total b { font-size: 18px; font-weight: 800; }
.sg-inb-make {
  height: 40px; padding: 0 15px; border-radius: 8px; font-size: 14px;
  font-weight: 200; border: 1px solid transparent; background: #fff;
  color: var(--sk-mute); cursor: not-allowed; font-family: inherit;
}
.sg-inb-make:not([disabled]) {
  background: var(--sk-teal); color: #fff; cursor: pointer;
  border-color: var(--sk-teal);
}

.sg-inb-body { display: flex; justify-content: space-between; gap: 30px;
               margin-top: 20px; align-items: flex-start; }
.sg-side { width: 250px; flex: 0 0 250px; }
.sg-side-form { display: flex; flex-direction: column; gap: 20px; }
.sg-search {
  width: 100%; height: 40px; border-radius: 6px; background: var(--sk-bg);
  border: 1px solid var(--sk-mute); padding: 10px; font-size: 16px;
  font-family: inherit; color: var(--sk-text);
}
.sg-all { margin: 0; }
.sg-filters { display: flex; flex-wrap: wrap; justify-content: space-between; }
.sg-filter { width: 115px; padding: 10px 0; }
/* ★ ۱۱۵×۹۰ فقط برای شبکه‌ی دوستونی است. spec خودش «برندها» و
   «دسته‌ها» را جدا و **تمام‌عرض** توصیف می‌کند، و ارتفاعِ ثابت
   رویشان محتوا را بیرون می‌زد. */
.sg-filters .sg-filter { height: 90px; }
.sg-filter h2 { font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.sg-filter select {
  width: 115px; height: 34px; border-radius: 6px; background: var(--sk-bg);
  border: 1px solid var(--sk-mute); font-size: 12px; font-family: inherit;
  color: var(--sk-text); padding: 0 6px;
}

/* بازه‌ی تاریخ تعهد — ورودی‌ها به سبکِ همان تقویمِ شمسیِ سیجیکالا:
   زمینه‌ی #F6F7FA، حاشیه‌ی خاکستری، گوشه‌ی ۶. دو تا زیر هم چون ستونِ
   فیلتر ۲۵۰ پیکسل است و کنارِ هم هرکدام زیرِ ۱۲۰ می‌افتاد. */
.sg-daterange { display: flex; flex-direction: column; gap: 6px; }
.sg-daterange input {
  width: 100%; height: 34px; border-radius: 6px; background: var(--sk-bg);
  border: 1px solid var(--sk-mute); font-size: 12px; font-family: inherit;
  color: var(--sk-text); padding: 0 8px; text-align: center;
}
.sg-daterange-err { color: var(--dk-red); font-size: 11px; margin: 6px 0 0; }
.sg-daterange-go {
  margin-top: 6px; height: 30px; width: 100%; border-radius: 6px;
  border: 1px solid var(--dk-red); background: #fff; color: var(--sk-text);
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.sg-daterange-go:hover { background: var(--dk-red); color: #fff; }

.sg-main { flex: 1; min-width: 0; display: flex; flex-direction: column;
           gap: 15px; }
.sg-sorts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sg-chip {
  height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 15px; border-radius: 6px; background: #fff; color: var(--sk-text);
  font-size: 12px; text-decoration: none;
  box-shadow: rgba(0, 0, 0, .2) 0 1px 2px 0;
}
.sg-chip.on { background: var(--dk-red); color: #fff; }
.sg-per { height: 40px; border-radius: 8px; background: var(--sk-bg);
          border: 1px solid var(--sk-mute); font-family: inherit; padding: 0 8px;
          margin-inline-start: auto; }

.sg-prod { display: flex; flex-direction: column; gap: 10px; }
.sg-prod-head { display: flex; justify-content: space-between;
                align-items: center; gap: 20px; }
.sg-prod-head img, .sg-noimg { width: 60px; height: 60px; border-radius: 6px;
                               object-fit: contain; flex: 0 0 60px; }
.sg-noimg { background: var(--sk-line); display: inline-block; }
.sg-prod-title { flex: 1; font-size: 14px; }
.sg-prod-id { color: #1ab1d4; text-decoration: none; }
/* spec: «برند و دسته، ستونی و وسط‌چین» — ردیفی بود. */
.sg-prod-tags { display: flex; flex-direction: column; align-items: center;
                text-align: center; font-size: 12px; }
.sg-prod-comm { text-align: center; }
.sg-prod-comm div { font-size: 10px; font-weight: 200; }

.sg-var {
  display: flex; flex-direction: column; gap: 10px; background: var(--sk-teal-bg);
  border-radius: 8px; padding: 10px; border: 1px solid var(--sk-line);
  box-shadow: rgba(0, 0, 0, .1) 0 1px 2px 0;
}
.sg-var-top { display: flex; align-items: flex-start; gap: 10px;
              flex-wrap: wrap; }
.sg-var-bot { display: flex; justify-content: space-between; align-items: center;
              gap: 10px; padding-top: 12px; border-top: 1px solid var(--sk-line);
              flex-wrap: wrap; }
.sg-col { display: flex; flex-direction: column; justify-content: space-between;
          font-size: 14px; min-width: 54px; }
/* عرض‌ها عیناً از جدولِ spec § کارتِ تنوع. `min-width` نه `width`،
   چون محتوای فارسیِ ما گاهی از نمونه بلندتر است و بریدنش بدتر از
   یکی-دو پیکسل اختلاف است. */
.sg-col-dkpc { min-width: 80px; }
.sg-col-var { min-width: 32px; }
.sg-col-w { min-width: 134px; }
.sg-col-67 { min-width: 67px; }
.sg-col-27 { min-width: 27px; }
/* آخرین ستون: «کالاها» و «ت.م» رویِ هم. در سیجیکالا کنارِ همند و ۳۶px،
   ولی «ت.م»ِ ما چک‌باکس است (نه دکمه‌ی قرمزِ پُر) و پهن‌تر درمی‌آید —
   پس ستونی چیده شدند تا ردیف را نشکنند. */
.sg-col-btn { min-width: 36px; display:flex; flex-direction:column; gap:5px;
              align-items:flex-start; margin-inline-start:auto; }
/* `margin-inline-start:auto`ِ خودِ .sk-kala اینجا لازم نیست — ستون
   خودش چپ‌چین شده و آن حاشیه دکمه را از «ت.م» جدا می‌انداخت. */
.sg-col-btn .sk-kala { margin-inline-start:0; }
.sg-col-p { min-width: 291px; flex: 1; }
.sg-lbl { font-size: 10px; font-weight: 200; }
.sg-v { font-size: 14px; }
.sg-pair { display: flex; align-items: center; gap: 5px; font-size: 14px; }
.sg-yes { color: var(--sk-teal); font-size: 15px; font-weight: 700; }
.sg-dot { width: 16px; height: 16px; border-radius: 100%; background: var(--sk-line2);
          display: inline-block; }
.sg-dot.on { background: var(--sk-teal); }
.sg-pick { gap: 0; }
.sg-qty input { width: 144px; }
.sg-col a { color: var(--sk-text); text-decoration: none; }

.sg-empty { font-size: 12px; color: var(--sk-mute); }
.sg-pager { display: flex; align-items: center; gap: 15px; font-size: 12px;
            justify-content: center; padding: 10px 0; }
.sg-pager a { color: var(--dk-red); text-decoration: none; }

@media (max-width: 1100px) {
  .sg-inb-body { flex-direction: column; }
  .sg-side { width: 100%; flex: 1 1 auto; }
}
.sg-filter-wide { width: 100%; padding-bottom: 15px; }
.sg-filter-wide select { width: 100%; }

/* ═══════════════ صورتحساب ═══════════════
   اندازه‌ها از خودِ سیجیکالا: دکمه ۱۳۲×۴۰، radius 8، فونت 14/200،
   زمینه‌ی #252525 با متن سفید و روی hover برعکس (از کدِ styled-components
   خوانده شد، نه از اسکرین‌شات). */

.sg-bill-empty { display: flex; align-items: center; justify-content: center;
                 height: 50vh; }
.sg-bill-up    { display: flex; flex-direction: column; align-items: center;
                 gap: 6px; }
.sg-bill-btn   { display: inline-flex; align-items: center; justify-content: center;
                 height: 40px; padding: 0 15px; border-radius: 8px;
                 background: var(--sk-text); color: #fff; border: 1px solid var(--sk-text);
                 font-size: 14px; font-weight: 200; cursor: pointer; }
.sg-bill-btn:hover { background: #fff; color: var(--sk-text); }

.sg-bill-top   { display: flex; align-items: center; justify-content: space-between;
                 gap: 20px; padding-bottom: 20px; }

.sg-bill-warn  { background: #fff4f5; border: 1px solid var(--sk-red); color: var(--sk-text);
                 border-radius: 8px; padding: 12px 16px; font-size: 12px;
                 margin-bottom: 20px; }

.sg-bill-card  { margin-bottom: 30px; }
.sg-bill-body  { display: flex; gap: 30px; justify-content: space-between;
                 flex-wrap: wrap; }
.sg-bill-cols  { display: flex; flex-direction: column; gap: 30px; }
/* سیجیکالا: FlexWrap با gap 50 و justify-content space-around */
.sg-bill-wrap  { display: flex; flex-wrap: wrap; gap: 50px;
                 justify-content: space-around; }
.sg-bill-block { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.sg-bill-h     { font-size: 12px; color: var(--sk-mute); margin-bottom: 4px; }
.sg-bill-line  { display: flex; gap: 10px; justify-content: space-between;
                 font-size: 12px; }
.sg-bill-line span:last-child { direction: ltr; }
.sg-bill-big   { font-size: 18px; font-weight: 800; direction: ltr;
                 text-align: right; }

.sg-bill-none  { text-align: center; color: var(--sk-mute); font-size: 12px;
                 padding: 60px 0; }

.sg-bill-rows  { display: flex; flex-direction: column; gap: 10px; }
.sg-bill-row   { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
                 background: #fff; border: 1px solid var(--sk-line); border-radius: 8px;
                 padding: 12px 16px; box-shadow: rgba(0,0,0,.1) 0 1px 2px; }
.sg-bill-row.done { background: var(--sk-teal-bg); }
.sg-bill-cell  { display: flex; flex-direction: column; gap: 4px; font-size: 14px;
                 direction: ltr; text-align: right; }
.sg-bill-cell i { font-style: normal; font-size: 10px; font-weight: 200;
                  color: var(--sk-mute); direction: rtl; }
.sg-bill-name  { flex: 1; direction: rtl; text-align: right; gap: 2px; }
.sg-bill-name a { color: #1ab1d4; text-decoration: none; font-size: 12px; }
.sg-bill-nocost { font-size: 10px; font-weight: 200; color: var(--sk-mute); direction: rtl; }
.sg-bill-act   { margin-inline-start: auto; }
.sg-bill-ok    { height: 37px; padding: 0 15px; border-radius: 8px;
                 background: var(--sk-teal); color: #fff; border: 1px solid var(--sk-teal);
                 font-size: 12px; font-weight: 200; cursor: pointer; }
.sg-bill-ok.undo { background: #fff; color: var(--sk-teal); }

/* ═══════════════ محاسبه‌ی سود ═══════════════
   اندازه‌ها از مودالِ سیجیکالا: ستونِ ورودی ۲۵۰px، ورودی‌ها ۴۰px با
   radius 8 و زمینه‌ی #F6F7FA، برچسبِ خاکستری بالای فیلد، و عددِ نتیجه
   ۳۶px وزن ۷۰۰. */

.sg-calc        { max-width: 840px; margin: 0 auto; background: var(--sk-bg);
                  border-radius: 20px; padding: 30px; }
.sg-calc-tabs   { display: flex; background: #fff; border-radius: 6px;
                  height: 40px; overflow: hidden; margin-bottom: 20px; }
.sg-calc-tab    { flex: 1; border: 0; background: transparent; cursor: pointer;
                  font-size: 14px; color: var(--sk-mute); font-family: inherit; }
.sg-calc-tab.on { color: var(--sk-text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--dk-red); }
.sg-calc-title  { font-size: 12px; font-weight: 600; margin-bottom: 20px; }
.sg-calc-pane.hidden { display: none; }
.sg-calc-body   { display: flex; align-items: center; justify-content: space-around;
                  gap: 30px; flex-wrap: wrap; }
.sg-calc-col    { display: flex; flex-direction: column; gap: 18px; width: 250px; }
.sg-calc-field  { display: flex; flex-direction: column; gap: 4px; }
.sg-calc-field > label { font-size: 10px; color: var(--sk-mute); }
.sg-calc-field select,
.sg-calc-field input   { height: 40px; border-radius: 8px; background: var(--sk-bg);
                         border: 1px solid var(--sk-mute); padding: 0 10px;
                         font-size: 14px; font-family: inherit; color: var(--sk-text);
                         text-align: right; }
.sg-calc-out    { font-size: 36px; font-weight: 700; color: var(--sk-text);
                  direction: ltr; min-width: 132px; text-align: center; }

/* ═══════════════ محموله: دکمه‌های آماده ارسال ═══════════════
   رنگ‌ها از خودِ سیجیکالا اندازه‌گیری شده‌اند (getComputedStyle روی
   دکمه‌های تبِ «آماده ارسال»)، نه از اسکرین‌شات. */

.sg-pk-btn   { display: inline-flex; align-items: center; justify-content: center;
               height: 40px; padding: 0 15px; border-radius: 8px;
               font-size: 14px; font-weight: 200; font-family: inherit;
               border: 1px solid transparent; cursor: pointer;
               text-decoration: none; white-space: nowrap; }
.sg-pk-green { background: var(--sk-teal); color: #fff; border-color: var(--sk-teal); }
.sg-pk-peach { background: #ffc7b4; color: #323643; border-color: #ffc7b4; }
/* تهی و کم‌صدا — این دکمه پیش‌نمایش است، نه عمل. */
.sg-pk-ghost { background: #fff; color: var(--sk-text); border-color: var(--sk-mute); }
.sg-pk-ghost:hover { background: var(--sk-bg); }

/* ── پیش‌نمایشِ کسر از موجودی ── */
.sk-ded-h { font-size: 20px; margin: 0 0 12px; }
.sk-ded-note {
  background: var(--sk-teal-bg); border: 1px solid var(--sk-teal); border-radius: 8px;
  padding: 12px 16px; margin-bottom: 16px; font-size: 13px; line-height: 1.9;
}
.sk-ded-sum { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 12px; }
.sk-ded-sum span { display: flex; flex-direction: column; }
.sk-ded-sum i { font-size: 11px; font-style: normal; color: #6b7280; }
.sk-ded-sum b { font-size: 18px; font-weight: 800; }
.sk-ded-sum .bad b { color: var(--dk-red); }
.sk-ded-pk { font-size: 12px; color: #6b7280; margin: 0 0 12px; }
.sk-ded-pk code { direction: ltr; unicode-bidi: embed; }
.sk-ded-warn {
  background: #fff1f2; border: 1px solid var(--dk-red); border-radius: 8px;
  padding: 10px 14px; margin: 0 0 12px; font-size: 13px; color: var(--sk-text);
}
.sk-ded-warn-soft { background: #fffbeb; border-color: #d9a441; }
.sk-ded-table td.title-cell { text-align: start; }
/* عددِ منفی در متنِ راست‌به‌چپ علامتش آن‌طرف می‌افتد («۲-» به‌جای «-۲»).
   isolate هر عدد را جزیره‌ی خودش می‌کند. */
.sk-ded-table b, .sk-ded-table td { unicode-bidi: isolate; }
.sk-ded-table .bad { color: var(--dk-red); }
.sk-ded-table .bad-row { background: #fff7f7; }
.sk-ded-back { margin-top: 16px; font-size: 13px; }
.sk-ded-table .good { color: var(--sk-teal); }
.sk-ded-table .muted-row { opacity: .55; }
.sk-ded-dup {
  display: inline-block; font-style: normal; font-size: 10px;
  background: #ffe4e6; color: #9f1239; border-radius: 4px;
  padding: 1px 6px; margin-inline-end: 6px;
}
.sk-ded-tag {
  display: inline-block;
  font-style: normal; font-size: 11px; color: #6b7280;
  background: #f3f4f6; border-radius: 4px; padding: 2px 8px;
}
.sk-ded-tag-teal { background: var(--sk-teal-bg); color: var(--sk-teal); }
.sk-ded-tag-warn { background: #fffbeb; color: #92651a; }
/* دو دکمه‌ی «تسویه» و «برگردان» کنارِ هم، نه زیرِ هم. */
.sk-ded-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.sk-ded-acts form { margin: 0; }
.sg-pk-red { background: var(--dk-red); color: #fff; border-color: var(--dk-red); }
.sg-pk-red:hover { background: #d92f45; }

/* فرمِ اعمال — عمداً پایینِ جدول و جدا، تا کسی قبل از دیدنِ ردیف‌ها
   بهش نرسد. */
.sk-ded-apply {
  margin-top: 24px; padding: 18px 20px; border-radius: 8px;
  background: #fff; border: 1px solid var(--dk-red); max-width: 560px;
}
.sk-ded-apply h2 { font-size: 15px; margin: 0 0 8px; }
.sk-ded-apply p { font-size: 12px; color: #6b7280; line-height: 1.9; margin: 0 0 14px; }
.sk-ded-apply label { display: block; font-size: 12px; margin-bottom: 12px; }
.sk-ded-apply input[type=text] {
  display: block; width: 100%; height: 34px; margin-top: 5px;
  border-radius: 6px; background: var(--sk-bg); border: 1px solid var(--sk-mute);
  font-family: inherit; font-size: 13px; padding: 0 8px; color: var(--sk-text);
}
.sg-pk-red   { background: var(--dk-red); color: #fff;    border-color: var(--dk-red); }
.sg-pk-btn:hover { filter: brightness(1.06); }

.sg-exit        { display: flex; justify-content: flex-start; margin-bottom: 16px; }
.sg-exit-menu   { position: relative; }
.sg-exit-menu > summary { list-style: none; }
.sg-exit-menu > summary::-webkit-details-marker { display: none; }
.sg-exit-body   { position: absolute; z-index: 20; margin-top: 6px;
                  background: #fff; border: 1px solid var(--sk-line); border-radius: 8px;
                  box-shadow: rgba(0,0,0,.1) 0 2px 8px; padding: 10px;
                  display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
.sg-exit-choice { font-size: 14px; color: var(--sk-text); text-decoration: none;
                  padding: 8px; border-radius: 6px; }
.sg-exit-choice:hover { background: var(--sk-bg); }
.sg-exit-form   { display: flex; gap: 8px; }
.sg-exit-form input { flex: 1; height: 40px; border-radius: 8px; background: var(--sk-bg);
                      border: 1px solid var(--sk-mute); padding: 0 10px;
                      font-family: inherit; font-size: 14px; }

/* دکمه‌ی «+» افزودن پنل، کنارِ نوارِ بالا */
.sg-plus { display:inline-flex; align-items:center; justify-content:center;
           width:32px; height:32px; border-radius:8px; font-size:20px;
           line-height:1; text-decoration:none; color:inherit; opacity:.85; }
.sg-plus:hover { background:rgba(255,255,255,.15); opacity:1; }

.sg-add        { max-width:840px; margin:0 auto; background:var(--sk-bg);
                 border-radius:20px; padding:30px; }
.sg-add-body   { display:flex; flex-direction:column; gap:18px;
                 max-width:320px; }
.sg-add-note   { line-height:1.9; max-width:520px; }
.sg-add-state  { display:flex; flex-direction:column; gap:4px; }
.sg-add-list   { margin-top:24px; display:flex; flex-direction:column; gap:10px; }
.sg-add-row    { display:flex; align-items:center; gap:16px; flex-wrap:wrap;
                 background:#fff; border:1px solid var(--sk-line); border-radius:8px;
                 padding:10px 14px; }
.sg-add-row > span:first-child { flex:1; display:flex; flex-direction:column; gap:2px; }

/* جدولِ آماده ارسال — نُه ستون، هم‌شکل سیجیکالا */
.sk-pk-table .sk-pk-head,
.sk-pk-table .sk-pk-row {
  display: grid;
  grid-template-columns: 32px 2fr .8fr .8fr 1.1fr 1.3fr 1.4fr 1.4fr auto;
  gap: 12px; align-items: center;
}
.sk-pk-num   { display: flex; flex-direction: column; gap: 2px; }
.sk-pk-local { font-size: 10px; color: var(--sk-mute); text-decoration: none; }
.sk-pk-local:hover { color: var(--sk-text); }
.sk-chip-sep { display: inline-block; width: 1px; height: 20px;
               background: var(--sk-line); margin: 0 6px; }
.sk-pk-bulk  { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
               border-top: 1px solid var(--sk-line); margin-top: 14px; padding-top: 14px; }
.sk-banner-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08);
                  font-size: 11px; opacity: .85; line-height: 1.9; }
.sk-banner-note code { direction: ltr; display: inline-block; background: rgba(0,0,0,.05);
                       padding: 1px 6px; border-radius: 4px; font-size: 11px; }


/* ── صفحه‌ی نرخ کمیسیون ── */
.sk-rate-sum { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 18px; }
.sk-rate-sum span { display: flex; flex-direction: column; }
.sk-rate-sum i { font-size: 11px; font-style: normal; color: #6b7280; }
.sk-rate-sum b { font-size: 18px; font-weight: 800; }
.sk-rate-sum .bad b { color: var(--dk-red); }
.sk-rate-h {
  font-size: 15px; margin: 22px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}
.sk-rate-h .muted { font-size: 11px; font-weight: 400; margin-inline-start: 8px; }
/* «کل» از سه‌تای قبلش جدا می‌شود تا معلوم باشد جمعِ آن‌هاست، نه یک
   عددِ چهارمِ هم‌ردیف. */
.sk-rate-eq { padding-inline-start: 18px; border-inline-start: 2px solid #e5e7eb; }
.sk-rate-note { font-size: 12px; color: #6b7280; line-height: 2; margin: 0 0 18px; }
.sk-rate-subtotal td { background: #f9fafb; font-weight: 700; }
.sk-rate-subtotal .muted { font-weight: 400; }


/* ── ساخت محموله: دو دکمه‌ی جدا ── */
.sk-pkg-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.sk-btn-ghost {
  background: #fff; color: var(--sk-text); border: 1px solid var(--sk-mute);
}
.sk-btn-ghost:hover:not([disabled]) { background: var(--sk-bg); }
.sk-pkg-hint { font-size: 11px; color: #6b7280; margin: 8px 0 0; line-height: 1.9; }

/* ---------- بازه‌های سهمیه (محموله‌ساز) ---------- */
/* ★ بازه‌ها دکمه‌اند نه radio: سطحِ کلیک بزرگ‌تر است و «کدام انتخاب شده»
   با رنگِ پُر دیده می‌شود، نه با یک نقطه‌ی ۱۲ پیکسلی. */
.sk-pkg-slots { margin: 10px 0 0; }
.sk-pkg-slots[hidden] { display: none; }
.sk-pkg-slots-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sk-pkg-slots-count { font-size: 11px; color: #6b7280; font-weight: 700; }
.sk-pkg-slots-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.sk-pkg-slots-sent {
  margin-top: 8px; font-size: 10px; color: #6b7280; line-height: 1.9;
}
.sk-pkg-slots-sent[hidden] { display: none; }
.sk-pkg-slots-sent code {
  direction: ltr; display: inline-block; background: #f3f4f6;
  padding: 1px 5px; border-radius: 4px; font-size: 10px;
}
.sk-pkg-slots-err {
  margin-top: 8px; font-size: 11px; line-height: 1.9;
  color: #9f1239; background: var(--sk-red-bg); border: 1px solid #fbd0d8;
  border-radius: 7px; padding: 7px 10px;
}
.sk-slot {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 7px 11px; border: 1px solid var(--sk-line, #e5e7eb);
  border-radius: 8px; background: #fff; cursor: pointer;
  font: inherit; color: inherit; text-align: right; line-height: 1.5;
}
.sk-slot:hover { border-color: var(--sk-teal, #0d9488); background: #f6fffd; }
.sk-slot b { font-size: 12px; font-weight: 700; }
.sk-slot small { font-size: 10px; color: #6b7280; }
.sk-slot.on {
  border-color: var(--sk-teal, #0d9488); background: var(--sk-teal, #0d9488);
  color: #fff;
}
.sk-slot.on small { color: #d7f5f0; }
/* ★ بازه‌ی پر: هم کمرنگ، هم واقعاً disabled. مکان‌نما هم می‌گوید
   کلیک نمی‌شود — کلیکِ بی‌اثر شبیهِ «خراب است» دیده می‌شود. */
.sk-slot:disabled,
.sk-slot.full {
  background: #f9fafb; border-color: #ececf0; color: #b3b6bd;
  cursor: not-allowed; opacity: .75;
}
.sk-slot:disabled small, .sk-slot.full small { color: #c2c5cc; }
.sk-slot:disabled:hover, .sk-slot.full:hover {
  border-color: #ececf0; background: #f9fafb;
}
.sk-pkg-picked {
  margin-top: 9px; font-size: 11px; line-height: 1.9;
  color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4;
  border-radius: 7px; padding: 7px 10px;
}
.sk-pkg-picked[hidden] { display: none; }

/* ---------- دو عددِ محموله: خودش · سفارش‌های همان روز ---------- */
.sk-units2 { white-space: nowrap; }
.sk-units2 b { font-weight: 700; }
.sk-units2 .sk-u-live {
  font-style: normal; font-size: 11px; color: #6b7280; margin-inline-start: 2px;
}
/* اختلاف یعنی سفارشی بعد از بسته شدنِ محموله آمده یا لغو شده — نه خطا،
   ولی باید دیده شود. */
.sk-units2 .sk-u-live.drift { color: #b45309; font-weight: 700; }
/* ⚠ هشدارِ «این بُعد اعمال نشده» — عمداً پررنگ‌تر از hint معمولی */
.sk-pkg-warn {
  margin: 9px 0 0; font-size: 11px; line-height: 1.95;
  color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 7px; padding: 8px 11px;
}
.sk-pkg-warn[hidden] { display: none; }
.sk-pkg-warn code {
  background: #fef3c7; padding: 1px 4px; border-radius: 4px;
  font-size: 10px; direction: ltr; display: inline-block;
}
.sk-btn-sm { padding: 5px 12px; font-size: 11px; }
.sk-sub-err {
  font-family: ui-monospace, monospace; font-size: 11px; direction: ltr;
  text-align: left; white-space: pre-wrap; background: #f9fafb;
  border-radius: 6px; padding: 8px; margin-top: 6px; max-width: 420px;
}


/* هشدارِ «تنوعِ بی‌عنوان» در محموله‌ساز */
.sk-nameless { border: 1px solid var(--dk-red); background: #fff7f7; }
.sk-nameless p { font-size: 12px; color: #6b7280; line-height: 2; margin: 8px 0 0; }
.sk-nameless-ids code { direction: ltr; unicode-bidi: embed; font-size: 11px; }

/* ---------- داشبوردِ انبار ----------
   کارتِ صفِ کار: عددِ درشت بالا، عنوان، توضیح، و لینکِ رفع پایین.
   صفِ خالی نصفه‌رنگ می‌شود ولی حذف نمی‌شود. */
.sk-whd-clear{
  background:#fff; border:1px solid var(--sk-line); border-radius:12px;
  box-shadow:0 1px 5px rgba(0,0,0,.08); padding:34px 18px; text-align:center;
}
.sk-whd-clear b{display:block; font-size:16px; color:var(--sk-teal);}
.sk-whd-clear span{font-size:12px; color:var(--sk-mute);}

.sk-whd-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:11px;
}
.sk-whd-card{
  display:flex; flex-direction:column; gap:4px; text-decoration:none;
  background:#fff; border:1px solid var(--sk-line); border-radius:12px;
  box-shadow:0 1px 5px rgba(0,0,0,.08); padding:14px 15px; color:var(--sk-text);
}
.sk-whd-card:hover{border-color:var(--sk-teal);}
.sk-whd-n{font-size:23px; font-weight:600; color:var(--sk-red); line-height:1.1;}
.sk-whd-t{font-size:13px;}
.sk-whd-note{font-size:11px; color:var(--sk-mute); line-height:1.7;}
.sk-whd-go{font-size:11px; color:var(--sk-teal); margin-top:3px;}
/* صفِ تمام‌شده: هست، ولی جلب توجه نمی‌کند */
.sk-whd-card.done{opacity:.55;}
.sk-whd-card.done .sk-whd-n{color:var(--sk-mute);}
.sk-whd-card.done .sk-whd-go{color:var(--sk-mute);}

.sk-whd-set{
  background:#fff; border:1px solid var(--sk-line); border-radius:12px;
  box-shadow:0 1px 5px rgba(0,0,0,.08); padding:15px; margin-top:13px;
}
.sk-whd-set h3{font-size:12px; color:var(--sk-mute); font-weight:400; margin:0 0 9px;}
.sk-whd-sw{display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer;}
.sk-whd-sw input{width:auto; margin:0;}

/* ---------- آمار تجمیعیِ انبار ----------
   نمودار با نوارِ CSS ساخته می‌شود نه کتابخانه: بدونِ جاوااسکریپتِ
   بیرونی، و روی موبایل هم خوانا. */
.sk-rp-total{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
.sk-rp-k{font-size:12px; color:var(--sk-mute);}
.sk-rp-v{font-size:25px; font-weight:600; color:var(--sk-teal);}
.sk-rp-u{font-size:12px; color:var(--sk-mute);}
.sk-rp-h{font-size:12px; color:var(--sk-mute); font-weight:400; margin:0 0 10px;}

.sk-rp-bars{display:flex; flex-direction:column; gap:6px;}
.sk-rp-bar{
  display:grid; grid-template-columns:130px 1fr 130px 62px;
  gap:9px; align-items:center; font-size:12px;
}
.sk-rp-bn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sk-rp-bt{background:var(--sk-soft,#f0f2f5); border-radius:4px; height:13px;}
.sk-rp-bt>i{display:block; height:100%; background:var(--sk-teal); border-radius:4px;}
.sk-rp-bv{text-align:left; direction:ltr;}
.sk-rp-bc{color:var(--sk-mute); font-size:11px;}

.sk-rp-form{display:flex; gap:11px; align-items:flex-end; flex-wrap:wrap;}
.sk-rp-head,.sk-rp-row{
  display:grid; grid-template-columns:1fr 80px 140px 140px 90px;
  gap:9px; align-items:center; padding:8px 4px; font-size:12px;
}
.sk-rp-head{color:var(--sk-mute); font-size:11px; border-bottom:1px solid var(--sk-line);}
.sk-rp-row{border-bottom:1px solid var(--sk-line);}
.sk-rp-items .sk-rp-head,.sk-rp-items .sk-rp-row{
  grid-template-columns:1fr 70px 140px 140px 80px;
}
.sk-rp-row a{color:var(--sk-text); text-decoration:none;}
.sk-rp-row a:hover{color:var(--sk-teal);}
/* ردیفی که سودش قابلِ اعتماد نیست — کم‌رنگ، ولی حذف‌نشده */
.sk-rp-blind{background:#fffaf2;}
.sk-rp-q{color:var(--sk-red); font-weight:600; cursor:help;}
.sk-rp-spark{
  display:block; height:3px; background:var(--sk-teal);
  border-radius:2px; margin-top:3px;
}

/* ---------- خرید ---------- */
.sk-by-review .sk-rp-head,.sk-by-review .sk-rp-row{
  grid-template-columns:1fr 58px 72px 58px 66px 128px 112px 112px;
}
.sk-by-urgent .sk-rp-head,.sk-by-urgent .sk-rp-row{
  grid-template-columns:1fr 90px 80px 80px 120px;
}
.sk-rp-row .sk-muted{display:block; font-size:10px;}
.sk-by-sug b{color:var(--sk-teal); font-size:13px;}
.sk-by-short{color:var(--sk-red); font-weight:600;}
/* قلمی که کافی است — هست ولی جلب توجه نمی‌کند */
.sk-by-ok{opacity:.55;}

/* ---------- مودالِ «کالاها» — ویرایشِ اتصال ----------
   عکس عمداً بزرگ‌تر از حدِ معمول است: در انباری با پانصد قلم و نام‌های
   شبیهِ هم، عکس تنها چیزی است که سریع تفکیکشان می‌کند. */
.sk-lk-add{margin-top:9px; border-top:1px solid var(--sk-line); padding-top:8px;}
.sk-lk-add>summary{
  cursor:pointer; font-size:12px; color:var(--sk-teal);
  list-style:none; user-select:none; padding:3px 0;
}
.sk-lk-add>summary::-webkit-details-marker{display:none;}
.sk-lk-addbody{padding-top:7px;}
.sk-lk-q{
  width:100%; box-sizing:border-box; font-family:inherit; font-size:12px;
  padding:7px 10px; border:1px solid var(--sk-line); border-radius:8px;
  background:#fff;
}
.sk-lk-q:focus{outline:none; border-color:var(--sk-teal);}
.sk-lk-res{
  max-height:290px; overflow-y:auto; margin-top:7px;
  border:1px solid var(--sk-line); border-radius:9px; background:#fff;
}
/* قلمی که همین حالا وصل است — دکمه‌اش «به‌روزرسانی» می‌شود */
.whit-on{background:#f2fbf8;}
.whit-qty{
  width:52px; font-family:inherit; font-size:12px; text-align:center;
  padding:5px; border:1px solid var(--sk-line); border-radius:6px;
}
.whit-add{display:flex; gap:5px; align-items:center;}

.sk-lk-qty{display:flex; gap:5px; align-items:flex-end;}
.sk-lk-qty label{display:flex; flex-direction:column; gap:2px; font-size:10px;
  color:var(--sk-mute);}
.sk-lk-qty input{
  width:52px; font-family:inherit; font-size:12px; text-align:center;
  padding:5px; border:1px solid var(--sk-line); border-radius:6px;
}
.sk-lk-x{
  border:none; background:transparent; color:var(--sk-red);
  font-size:17px; cursor:pointer; line-height:1; padding:4px 7px;
}
.sk-lk-x:hover{background:var(--sk-red-bg); border-radius:6px;}

/* ---------- برگه‌های اسنپ‌شاپ ---------- */
.sk-ss-table .sk-rp-head,.sk-ss-table .sk-rp-row{
  grid-template-columns:120px 138px 74px 64px 1fr;
}

/* شش فیلترِ انبارداری — دو ستون، مثلِ چیدمانِ سیجیکالا */
.sk-f-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}

/* ---------- فاکتور ---------- */
.sk-inv-head{display:flex; gap:11px; align-items:flex-end; flex-wrap:wrap;
  padding-bottom:11px; border-bottom:1px solid var(--sk-line); margin-bottom:11px;}
.sk-inv-rows{display:flex; flex-direction:column; gap:8px;}
.sk-inv-row{display:flex; gap:9px; align-items:flex-end;}
.sk-inv-n{font-size:12px; color:var(--sk-mute); width:20px; padding-bottom:7px;}
.sk-inv-item{min-width:260px;}
.sk-inv-sum{font-size:12px; color:var(--sk-mute); padding-bottom:7px; min-width:90px;
  text-align:left; direction:ltr;}
.sk-inv-foot{display:flex; gap:9px; align-items:center; margin-top:13px;
  padding-top:11px; border-top:1px solid var(--sk-line);}
.sk-inv-total{margin-inline-start:auto; font-size:13px;}
.sk-inv-total b{font-size:16px; color:var(--sk-teal);}
.sk-inv-table .sk-rp-head,.sk-inv-table .sk-rp-row{
  grid-template-columns:100px 1fr 60px 130px 100px 120px;}
.sk-party-table .sk-rp-head,.sk-party-table .sk-rp-row{
  grid-template-columns:1fr 62px 118px 118px 118px 118px 118px;}
.sk-cash-table .sk-rp-head,.sk-cash-table .sk-rp-row{
  grid-template-columns:100px 1fr 1fr 130px;}

/* ---------- پیش‌نمایش «ت.م» ---------- */
.sk-dist-table .sk-rp-head,.sk-dist-table .sk-rp-row{
  grid-template-columns:1fr 92px 100px 100px 92px 108px;}
.sk-dist-n{width:66px; font-family:inherit; font-size:13px; text-align:center;
  padding:5px; border:1px solid var(--sk-teal); border-radius:6px;}

/* دکمه‌ی «ت.م» — چک‌باکس، نه اجرای مستقیم */
.sk-tm{display:inline-flex; align-items:center; gap:4px; cursor:pointer;
  font-size:11px; padding:3px 7px; border-radius:6px; background:var(--sk-red-bg);
  color:var(--sk-red); border:1px solid #f5c6ce;}
.sk-tm input{width:auto; margin:0;}
.sk-tm-bar{display:flex; gap:11px; align-items:flex-end; flex-wrap:wrap;
  background:#fff; border:1px solid var(--sk-line); border-radius:12px;
  box-shadow:0 1px 5px rgba(0,0,0,.08); padding:12px 15px; margin:9px 0;}

/* «خروجی اکسل» در نوار سورت — چیپ، ولی با رنگِ عمل نه فیلتر */
.sk-chip-x{background:#e8f6f1; border-color:#bfe3d7; color:#0f766e;}
.sk-chip-x:hover{background:#d5efe6;}

/* تعدادِ قابلِ ویرایش در مودالِ اقلامِ محصول اسنپ‌شاپ */
.comp-qty{display:flex; gap:4px; align-items:center; justify-content:flex-end;}
.comp-qty input{width:52px; font-family:inherit; font-size:12px; text-align:center;
  padding:4px; border:1px solid var(--border); border-radius:6px;}

/* ---------- محموله‌سازِ اسنپ‌شاپ ---------- */
.sk-bld-table .sk-rp-head,.sk-bld-table .sk-rp-row{
  grid-template-columns:34px 1fr 96px 84px 96px;}
.sk-bld-table.wh .sk-rp-head,.sk-bld-table.wh .sk-rp-row{
  grid-template-columns:34px 1fr 96px 84px 104px 96px;}
.sk-bld-n{width:66px; font-family:inherit; font-size:13px; text-align:center;
  padding:5px; border:1px solid var(--sk-teal); border-radius:6px;}
/* ستونِ اولِ ۳۴px برای چک‌باکسِ «خروج از انبار» اضافه شد — همان عرضی
   که جدولِ محموله‌سازِ بالای همین صفحه دارد، تا دو جدول هم‌تراز بمانند. */
.sk-bpk-table .sk-rp-head,.sk-bpk-table .sk-rp-row{
  grid-template-columns:34px 1fr 76px 130px 54px 54px 190px 96px;}
.sk-bpk-ops{display:flex; gap:4px; align-items:center;}

/* نسبتِ بسته‌بندی در تطبیق — حدس، پس دیده شود که حدس است */
.mqty{display:inline-flex; flex-direction:column; gap:2px; margin-inline-end:7px;}
.mqty>span{font-size:10px; color:var(--mute);}
.mqty input{width:52px; font-family:inherit; font-size:13px; text-align:center;
  padding:5px; border:1px solid var(--border); border-radius:6px;}
.mqty input.guessed{border-color:#d97706; background:#fffbeb; font-weight:700;}
.mguess{background:#fffbeb; border-radius:7px; padding:7px 10px; font-size:11.5px;
  color:#92400e;}

/* ---------- اصلاحِ نسبتِ بسته‌بندی ---------- */
.sk-pr-table .sk-rp-head,.sk-pr-table .sk-rp-row{
  grid-template-columns:34px 1fr 200px 58px 62px 210px;}
.sk-prl-table .sk-rp-head,.sk-prl-table .sk-rp-row{
  grid-template-columns:80px 1fr 180px 46px 50px 120px 100px;}
.sk-pr-old{color:var(--sk-mute); text-decoration:line-through;}
.sk-pr-new{color:var(--sk-teal); font-weight:700; font-size:14px;}

/* لینکِ محصول در تطبیق — دیده شود که لینک است */
.mlink{color:var(--sk-teal, #0f766e); text-decoration:none; font-weight:700;}
.mlink:hover{text-decoration:underline;}
.mlink-code{color:inherit; text-decoration:none; border-bottom:1px dotted currentColor;}

/* عکسِ پیشنهاد در تطبیق
   ★ ۵۶ پیکسل و با قاب، نه ۴۰ و بی‌قاب: خیلی از کالاهای این انبار
   سفیدند (فلاش‌تانک، سیفون، جامایع) و روی زمینه‌ی سفید در ۴۰ پیکسل
   عملاً نامرئی بودند — کاربر گزارش داد «عکس نمایش داده نمی‌شود» در
   حالی که عکس بارگذاری شده بود.
   `contain` نه `cover`: بریدنِ لبه‌ی کالای باریک شکلش را از بین
   می‌برد و همان چیزی است که باید تشخیص داده شود. */
.msug-thumb{flex:0 0 56px; height:56px; border-radius:8px; background:#fff;
  border:1px solid var(--border, #e5e7eb);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:var(--mute); font-size:11px;}
.msug-thumb img{width:100%; height:100%; object-fit:contain; padding:2px;
  box-sizing:border-box;}

/* ---------- تپسی‌شاپ ---------- */
.sk-tp-table .sk-rp-head,.sk-tp-table .sk-rp-row{
  grid-template-columns:1fr 130px 110px 110px 110px 110px;}
.sk-tp-list .sk-rp-head,.sk-tp-list .sk-rp-row{
  grid-template-columns:1fr 140px 110px 80px 200px;}
.sk-tp-ev .sk-rp-head,.sk-tp-ev .sk-rp-row{
  grid-template-columns:150px 1fr 140px 160px;}

/* ---------- تطبیق بدونِ رفرش ---------- */
.mcard-done{background:#f0fdf4; border-color:#86efac;}
.mcard-skipped{opacity:.55;}
.mcard-note{
  margin-top:8px; padding:7px 11px; border-radius:8px; font-size:12px;
  background:#dcfce7; color:#166534;
}
.mcard-skipped .mcard-note{background:#f1f5f9; color:#475569;}
.match-toast{
  position:fixed; inset-inline-start:50%; bottom:26px; transform:translateX(-50%) translateY(80px);
  background:#0f172a; color:#fff; padding:11px 18px; border-radius:10px;
  font-size:13px; box-shadow:0 6px 22px rgba(0,0,0,.24); z-index:999;
  opacity:0; transition:opacity .18s, transform .18s; pointer-events:none;
  max-width:80vw;
}
.match-toast.on{opacity:1; transform:translateX(-50%) translateY(0);}
.match-toast.bad{background:#b91c1c;}

/* نشانگرِ جستجوی زنده */
.msearch-spin{font-size:15px; color:var(--mute); padding:0 5px;}

/* ---------- مودالِ ویرایشِ قلمِ انبار ---------- */
.sk-wh-edit-open{
  background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--sk-text); text-align:start; font-weight:600;
}
.sk-wh-edit-open:hover{color:var(--sk-teal);}
.sk-whe-panel{
  grid-column:1/-1; margin-top:9px; background:#fbfbfd;
  border:1px solid var(--sk-line); border-radius:10px; padding:14px;
}
.sk-whe-head{display:flex; justify-content:space-between; align-items:center;
  font-size:13px; font-weight:600; padding-bottom:9px;
  border-bottom:1px solid var(--sk-line); margin-bottom:11px;}
.sk-whe-sec{font-size:11px; color:var(--sk-mute); margin:13px 0 7px;
  padding-top:9px; border-top:1px solid var(--sk-line);}
.sk-whe-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px; align-items:end;}
.sk-whe-img{display:flex; gap:13px; align-items:flex-start;}
.sk-whe-cur{flex:0 0 84px; height:84px; border-radius:9px; background:#fff;
  border:1px solid var(--sk-line); display:flex; align-items:center;
  justify-content:center; overflow:hidden; font-size:11px; color:var(--sk-mute);}
.sk-whe-cur img{width:100%; height:100%; object-fit:contain; padding:3px;
  box-sizing:border-box;}
.sk-whe-imgbody{flex:1; display:flex; flex-direction:column; gap:7px;}
.sk-whe-foot{display:flex; gap:9px; align-items:center; margin-top:14px;
  padding-top:11px; border-top:1px solid var(--sk-line);}
.sk-whe-ok{background:#dcfce7; color:#166534; padding:8px 12px;
  border-radius:8px; font-size:12px; margin-bottom:10px;}
.sk-whe-bad{background:#fee2e2; color:#991b1b; padding:8px 12px;
  border-radius:8px; font-size:12px; margin-bottom:10px;}

/* پیش‌نمایشِ عکس در مودالِ ویرایش */
.whe-dkrow{display:flex; gap:8px; align-items:flex-end;}
.whe-prev,.whe-upprev{display:flex; gap:9px; align-items:center; margin-top:7px;}
.whe-prev img,.whe-upprev img{width:64px; height:64px; object-fit:contain;
  border:1px solid var(--sk-line); border-radius:8px; background:#fff; padding:3px;}
.whe-prev span{font-size:11px; color:var(--sk-mute);}

/* برند با پیشنهاد در مودالِ ویرایش */
.sk-whe-brand{position:relative;}
.whe-brand-list{
  position:absolute; top:100%; inset-inline-start:0; z-index:20;
  background:#fff; border:1px solid var(--sk-line); border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.12); min-width:100%; max-height:190px;
  overflow-y:auto; padding:4px; display:flex; flex-direction:column; gap:2px;
}
.whe-brand-pick{
  text-align:start; background:none; border:none; padding:6px 9px;
  border-radius:6px; font:inherit; font-size:12px; cursor:pointer;
  color:var(--sk-text);
}
.whe-brand-pick:hover{background:var(--sk-soft,#f0f2f5);}
.whe-brand-new{
  margin-top:5px; font-size:11px; color:#92400e; background:#fffbeb;
  border-radius:6px; padding:5px 8px;
}
.whe-brand-ok{
  border:1px solid #d97706; background:#fff; color:#92400e; cursor:pointer;
  border-radius:6px; padding:3px 9px; font:inherit; font-size:11px;
  margin-inline-start:5px;
}


/* چیپ‌های برند در صفحه‌ی خرید
   ★ اندازه‌ها از خودِ سیجیکالا خوانده شدند (getComputedStyle روی
   صفحه‌ی زنده)، نه تخمینی:
       زمینه #F6F7FA · قاب 1px #E6E6E6 · شعاع 999px
       پدینگ 6px 12px · فونت 12px · ارتفاع 32px · گپ 8px
   ★ و ردیف **wrap نمی‌شود** — سیجیکالا `nowrap` دارد و چیپ‌ها در
   یک خط افقی اسکرول می‌شوند. wrap کردن ارتفاعِ صفحه را با هر
   تعداد برند عوض می‌کند و جای فهرست می‌پرد. */
.sk-by-chips{
  display:flex; flex-wrap:nowrap; gap:8px; padding:0 0 4px;
  margin:11px 0 3px; overflow-x:auto; scrollbar-width:thin;
}
.sk-by-chip{
  font-size:12px; padding:6px 12px; border-radius:999px; text-decoration:none;
  background:var(--sk-bg); border:1px solid var(--sk-line2); color:#000;
  white-space:nowrap; flex:none; line-height:1.5;
}
.sk-by-chip:hover{border-color:var(--sk-teal);}
.sk-by-chip.on{background:var(--sk-teal); border-color:var(--sk-teal); color:#fff;}
.sk-by-sale i{font-size:10px; color:var(--sk-mute); display:inline;}

/* ریزکردنِ سطلِ تعهد در محموله‌ساز */
.sk-bp-range{display:flex; gap:7px; align-items:center; flex-wrap:wrap;
  margin:9px 0;}
.sk-bp-range-k{font-size:11px; color:var(--sk-mute);}


/* بدنه‌ی JSON در صفحه‌ی تأییدِ محموله — بازشونده، تا صفحه را شلوغ نکند
   ولی پیش از یک کارِ برگشت‌ناپذیر در دسترس باشد. */
.sk-ded-payload{margin:14px 0; font-size:11px;}
.sk-ded-payload summary{cursor:pointer; color:var(--sk-mute); padding:4px 0;}
.sk-ded-payload summary:hover{color:var(--sk-text);}
.sk-ded-payload pre{
  background:var(--sk-bg); border:1px solid var(--sk-line); border-radius:8px;
  padding:12px 14px; overflow-x:auto; margin:8px 0 0;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px;
  line-height:1.7;
}


/* ── ستونِ انتخاب در جدول‌های محموله ──
   ★ چرا لازم شد: کاربر گزارش داد «چک‌باکسی نمی‌بینم». چک‌باکس‌ها در
   HTML بودند و کار می‌کردند، ولی چک‌باکسِ **تیک‌نخورده**ی پیش‌فرضِ
   مرورگر یک قابِ خاکستریِ کم‌رنگ است و لبه‌ی جدول گم می‌شود.

   در صفحه‌ی محموله‌ساز بدتر هم بود: ردیف‌های کاندید بالای صفحه
   چک‌باکسِ **تیک‌خورده**ی فیروزه‌ای دارند، و کنارِ آن‌ها این‌ها اصلاً
   دیده نمی‌شدند.

   پس قابِ پررنگ‌تر، اندازه‌ی بزرگ‌تر، و ناحیه‌ی کلیکِ بازتر. */
/* ★ `input[type=checkbox]` بالاتر در همین فایل عرض و ارتفاع را
   ۱۶px می‌گذارد، و **ویژگیِ (specificity) بیشتری** از یک کلاسِ تنها
   دارد (انتخابگرِ نوع + خصیصه در برابر یک کلاس). پس اینجا هم نوع و
   هم کلاس می‌آید، وگرنه این قاعده بی‌اثر است — همان اتفاقی که در
   اولین تلاش افتاد و اندازه ۱۶px ماند. */
input[type=checkbox].pick-row,
input[type=checkbox]#pick-all{
  width:19px; height:19px; cursor:pointer;
  accent-color:var(--sk-teal);
  outline:2px solid var(--sk-mute); outline-offset:1px;
  border-radius:4px;
}
input[type=checkbox].pick-row:hover,
input[type=checkbox]#pick-all:hover{ outline-color:var(--sk-teal); }
input[type=checkbox].pick-row:checked,
input[type=checkbox]#pick-all:checked{ outline-color:var(--sk-teal); }

/* سرستونِ ستونِ انتخاب — «انتخاب» نوشته می‌شود، نه فقط یک چک‌باکسِ
   بی‌برچسب. ستون بی‌عنوان یعنی کاربر نمی‌داند آنجا چیزی هست. */
.pick-head{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  line-height:1;
}
.pick-head i{ font-size:9px; color:var(--sk-mute); font-style:normal; }


/* دکمه‌ی «فقط انتخاب‌شده‌ها» در منوی خروج — ظاهرش مثلِ لینک‌های
   کنارش، ولی چون submit است باید button باشد. غیرفعال بودنش باید
   دیده شود: راهِ سوم وجود دارد، فقط هنوز چیزی تیک نخورده. */
.sg-exit-choice-btn{
  background:none; border:none; font-family:inherit; text-align:start;
  width:100%; cursor:pointer;
}
.sg-exit-choice-btn:disabled{ color:var(--sk-mute); cursor:not-allowed; }
.sg-exit-choice-btn:disabled:hover{ background:none; }


/* نشانه‌ی فعال/غیرفعال در کارتِ تطبیق — کوچک و کم‌رنگ، چون در کنارِ
   عنوان است نه به‌جای آن. */
.mact{font-size:10px; padding:1px 7px; border-radius:999px; font-style:normal;
      margin-inline-start:5px; white-space:nowrap;}
.mact.on{background:#e7f5f2; color:#0f7a72; border:1px solid #bce0d9;}
.mact.off{background:#f3f4f6; color:#8b919b; border:1px solid #e5e7ea;}


/* نحوه‌ی ارسالِ سفارش — اکسپرس در برابر ارسال به انبار.

   ★ «نامعلوم» عمداً رنگِ خودش را دارد و خاکستری است، نه شبیهِ «به
   انبار». ۲۱ سفارش این فیلد را ندارند و اگر مثلِ حالتِ عادی دیده شوند
   یعنی کسی برایشان برگه می‌زند — که غلط است. */
.odt{font-size:10.5px; padding:1px 8px; border-radius:999px;
     font-style:normal; white-space:nowrap;}
.odt.exp{background:#fdf1e5; color:#a55a12; border:1px solid #f2d9bd;}
.odt.wh{background:#eaf1fb; color:#2b5fa8; border:1px solid #cbdcf3;}
.odt.unk{background:#f3f4f6; color:#8b919b; border:1px dashed #d8dbe0;}


/* فهرستِ سفارش‌های اخیر در پایینِ کارتِ محصول. هر ردیف یک سفارش است، و
   برچسبِ ارسال مالِ همان سفارش — نه مالِ محصول. */
.olist{display:flex; flex-direction:column; gap:3px;}
.olist-row{
  display:grid; align-items:center; gap:8px;
  grid-template-columns:auto auto 1fr auto;
  font-size:11.5px; padding:2px 0;
}
.olist-row + .olist-row{border-top:1px dotted #e2d6ff;}
.olist-when{color:var(--mute); font-variant-numeric:tabular-nums;}
.olist-price{font-weight:800; font-variant-numeric:tabular-nums;
             text-align:start;}
.olist-profit{font-weight:800; font-variant-numeric:tabular-nums;
              justify-self:end;}
/* درصدِ حاشیه چسبیده به سود می‌آید، کوچک‌تر — همان چیزی که در نسخه‌ی
   «آخرین سفارش» بود و نباید با فهرست‌شدن گم می‌شد. */
.olist-profit em{font-style:normal; font-weight:600; font-size:10.5px;
                 margin-inline-start:4px; opacity:.85;}
/* عددِ «۵ از ۸ سفارش» کنارِ عنوان — کم‌رنگ‌تر از عنوان، چون توضیح است
   نه تیتر. */
.ofoot-of{font-weight:600; color:var(--mute); margin-inline-start:6px;}


/* محموله‌ی خوانده‌شده از پنلِ اسنپ‌شاپ — تا با محموله‌ی محلی اشتباه
   نشود. محلی را می‌شود ویرایش و حذف کرد، این یکی آینه‌ی پنل است. */
.sk-tag-snapp{background:#f4eefb; color:#6b46a8; border:1px solid #ded0f0;}
.sk-tag-st{background:#eef4fb; color:#2b5fa8; border:1px solid #cbdcf3;}

/* ═══════════════════════════════════════════════════════════════
   نسخه‌ی گوشی — یک CSS، بدونِ قالبِ موازی
   ═══════════════════════════════════════════════════════════════

   ★ چرا اینجا و نه یک فایل جدا: در این پروژه هر جا کد کپی شد باگ
   تکثیر شد (links.js، pick.js، ترتیبِ برگه‌ها، شرطِ تحویل‌نشده). دو
   فایلِ CSS یعنی روزی یکی اصلاح شود و دیگری نه.

   ★ نقطه‌شکن ۶۴۰ است نه ۹۰۰: نُه media queryِ موجود همه ۹۰۰ و ۱۱۰۰
   اند، یعنی برای تبلت. گوشی هیچ‌وقت نقطه‌شکنِ خودش را نداشت. */

@media (max-width: 640px) {

  /* ── ۱. سرریزِ افقی ──
     اندازه‌گیری شد: صفحه ۹۱ پیکسل سرریز داشت و مقصرش `topbar-left`
     بود (عرضِ ثابتِ ۳۹۹). سرریز یعنی کلِ بدنه افقی می‌لغزد و متن از
     لبه بریده می‌شود. */
  html, body { overflow-x: hidden; }
  .topbar { flex-wrap: wrap; height: auto; padding: 6px 10px; gap: 6px; }
  .topbar-left, .topbar-right { flex-wrap: wrap; min-width: 0; }

  /* ── ۲. هدفِ انگشت ──
     ۳۳ از ۳۶ عنصرِ تعاملیِ صفحه‌ی تعهدات زیر ۴۰ پیکسل بودند. */
  .sk-btn, .btn-solid, button, select,
  input[type="submit"], input[type="text"], input[type="number"], input[type="date"] {
    min-height: 44px;
  }
  .sk-btn-sm { min-height: 38px; }   /* دکمه‌های ثانویه کمی کوچک‌تر */
  /* ★ `min-height` روی عنصرِ inline اثر ندارد. `.btn-solid` در قاعده‌ی
     بالا بود ولی وقتی روی `<a>` می‌نشست بی‌اثر می‌ماند — قاعده نوشته
     شده بود و کار نمی‌کرد، و سنجش هم نشانش نمی‌داد چون فقط دنبالِ
     «آیا قاعده هست» نبودم بلکه ارتفاعِ واقعی را می‌گرفتم. */
  a.sk-btn, a.btn-solid, a.btn-outline, a.sk-pk-local, a.sg-exit-choice {
    min-height: 44px; display: inline-flex; align-items: center;
    justify-content: center;
  }

  /* ── ۳. فرمِ تک‌ستونی ── */
  .sk-rfields, .settings-form, .sk-filters { flex-direction: column; align-items: stretch; }
  .sk-rf, .field { width: 100%; }
  .sk-rf input, .sk-rf select, .field input, .field select { width: 100%; }

  /* ── ۴. جدول → کارت ──
     ★ **کوچک نمی‌شود و افقی هم نمی‌لغزد.** هر ردیف یک کارت می‌شود و
     عنوانِ هر ستون از `data-label` کنارِ مقدار می‌آید. بدونِ آن، کارت
     ستونی از عددهای بی‌عنوان است که خواندنش ممکن نیست.
     ★ فقط جدول‌هایی که `sk-cardable` دارند — بقیه دست‌نخورده می‌مانند
     تا این تغییر یک‌جا و قابلِ بازبینی باشد. */
  table.sk-cardable thead { display: none; }
  table.sk-cardable, table.sk-cardable tbody { display: block; width: 100%; }
  table.sk-cardable tr {
    display: block; width: 100%; box-sizing: border-box;
    background: #fff; border: 1px solid var(--sk-line, #e5e7eb);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
  }
  table.sk-cardable td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; width: 100%; box-sizing: border-box;
    border: 0; border-bottom: 1px dashed #eef0f3;
    padding: 7px 0; text-align: start;
  }
  table.sk-cardable td:last-child { border-bottom: 0; }
  table.sk-cardable td::before {
    content: attr(data-label);
    flex: 0 0 auto; font-size: 11px; color: var(--sk-mute, #6b7280);
    font-weight: 700;
  }
  /* سلولِ بی‌برچسب (اگر یادمان رفت) کاملاً پهن شود، نه اینکه بی‌صدا
     شبیهِ بقیه دیده شود */
  table.sk-cardable td:not([data-label]) { display: block; }
  table.sk-cardable td.title-cell { flex-direction: column; align-items: stretch; gap: 3px; }
  table.sk-cardable td.title-cell::before { margin-bottom: 2px; }
  table.sk-cardable td.num { font-variant-numeric: tabular-nums; }

  /* ── ۵. منو: لینک‌های ناوبری هم هدفِ انگشت شوند ──
     ★ فقط لینک‌های **ناوبری**، نه هر `<a>`. لینکِ داخلِ متن اگر ۴۴
     پیکسل شود، پاراگراف را می‌شکند. */
  .topbar a, .tabs a, .subbar a, .sortbar a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .adminlink { padding: 0 8px; }

  /* ── ۶. نوارهای ناوبری بپیچند، نه اینکه بریده شوند ──
     سه ردیفِ افقی هر کدام از عرضِ صفحه پهن‌تر بودند. */
  .tabs, .subbar, .sortbar {
    flex-wrap: wrap; height: auto; overflow: visible; gap: 2px 4px;
  }
  .subbar { padding-bottom: 4px; }

  /* ★ شناسه‌ی DKP و تراشه‌های صفحه‌بندی لینک‌اند و کلیک می‌شوند، ولی
     ارتفاعشان ۱۸ پیکسل بود. لینک‌های متنیِ داخلِ عنوان عمداً دست‌نخورده
     می‌مانند: آن‌ها تمام‌عرضِ سطرند و هدفِ کوچکی نیستند. */
  .sk-dkp, .sk-pchip, .sk-dkpc {
    min-height: 40px; display: inline-flex; align-items: center;
  }

  /* ── ۶.۳ نمودارها ──
     ★ چهار نمودارِ دایره‌ای زیرِ هم، نه دو ستونِ نصفه: دایره‌ی ۹۵
     پیکسلی با افسانه‌اش در نصفِ صفحه‌ی ۳۹۰ خوانده نمی‌شود. */
  .sk-pies{grid-template-columns:1fr; gap:14px;}
  .sk-chart2{padding-inline-end:60px;}
  .sk-chart2 svg{height:220px;}
  .sk-axis-y{width:58px; height:220px; font-size:9.5px;}
  /* برچسبِ هر دوره روی ۳۹۰ جا نمی‌شود؛ یکی‌درمیان نشان داده می‌شود
     تا به‌جای درهم‌رفتن، خوانا بماند. */
  .sk-axis-x{font-size:9px;}
  .sk-axis-x span:nth-child(even){visibility:hidden;}
  .sk-chart-modes{margin-inline-start:0;}

  /* ── ۶.۴ ردیفِ «تنوع‌ها»ی انبار ──
     ★ همان مسئله‌ی سربرگِ کارت: `sk-whp` یک ردیفِ flex است و
     `sk-whp-price` (nowrap) و `sk-whp-bb` (min-width:78) نامِ محصول را
     به ۱۳۰ پیکسل از ۳۸۶ می‌رساندند. حالا سطرِ اول عکس و نام است و
     سطرِ دوم قیمت و بای‌باکس. */
  .sk-whp { flex-wrap: wrap; align-items: flex-start; }
  .sk-whp > .sk-whp-body  { flex: 1 1 calc(100% - 63px); }
  .sk-whp > .sk-whp-price {
    order: 3; flex-direction: row; align-items: baseline; gap: 6px;
  }
  .sk-whp > .sk-whp-bb { order: 3; margin-inline-start: auto; min-width: 0; }

  /* ── ۶.۵ سربرگِ کارتِ محصول ──
     ★ `sk-card-head` یک ردیفِ flex بدونِ wrap است: عکس ۵۶، عنوانِ
     `flex:1`، و بعد DKP و برند و دسته که همه `white-space:nowrap`
     دارند و کمیسیون که `min-width:56` دارد. روی ۳۸۰ پیکسل آن‌ها فضا
     را می‌گیرند و عنوان به یک کلمه در هر سطر له می‌شود.
     پس اینجا سه سطر می‌شود: عکس و کمیسیون، بعد عنوانِ تمام‌عرض،
     بعد شناسه و برند و دسته. */
  .sk-card-head { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
  .sk-card-head > .sk-thumb { order: 1; }
  .sk-card-head > .sk-comm  { order: 1; margin-inline-start: auto; }
  .sk-card-head > .sk-title {
    order: 2; flex: 1 1 100%; font-size: 14px; line-height: 21px;
  }
  .sk-card-head > .sk-dkp,
  .sk-card-head > .sk-brand,
  .sk-card-head > .sk-cat { order: 3; }

  /* ── ۷. شبکه‌های `div` هم کارت شوند ──
     ★ شش صفحه به‌جای `<table>` از شبکه‌ی `grid` استفاده می‌کنند، و هر
     کدام کلاسِ خودش را دارد (`sk-rp-`، `sk-pk-`، `sk-o-`). اگر برای هر
     کدام یک بلوک جدا می‌نوشتم، همان تکثیرِ کدی می‌شد که در این پروژه
     چهار بار باگ ساخته. پس **یک** قاعده هست و دو کلاسِ خنثی
     (`sk-cardhd` / `sk-cardrow`) که کنارِ کلاسِ اصلی می‌نشینند: کلاسِ
     اصلی چیدمانِ دسکتاپ را نگه می‌دارد، این دو فقط در همین media
     معنا دارند.
     ★ `grid-template-columns` صریح `none` می‌شود، وگرنه قانونِ ستونیِ
     بیرونِ media همچنان ستون‌ها را تحمیل می‌کند. */
  /* ★ دو چیز از چیدمانِ دسکتاپ باید همین‌جا خنثی شود، وگرنه کارت
     ساخته می‌شود ولی دیده نمی‌شود:
       · `min-width` (۶۶۰ تا ۹۰۰ پیکسل روی خودِ ردیف‌ها) — کارت ۸۶۰
         پیکسلی می‌شد و `overflow-x:hidden` فقط پنهانش می‌کرد؛ یعنی
         محتوا بیرونِ صفحه و نامرئی. عددِ overflow صفر بود و باگ
         **بی‌صدا** رد می‌شد. تنها راهِ گرفتنش سنجشِ getBoundingClientRect
         روی تک‌تکِ عناصر بود، نه scrollWidth.
       · `.sk-otable{overflow-x:auto}` — همان لغزشِ افقی که روی گوشی
         خواندنی نیست. در حالتِ کارت اصلاً لازم نیست. */
  .sk-cardable-rows { overflow-x: visible; min-width: 0; }
  .sk-cardable-rows .sk-cardhd,
  .sk-cardable-rows .sk-cardrow { min-width: 0; }
  .sk-cardable-rows .sk-cardrow > span { min-width: 0; overflow-wrap: anywhere; }
  .sk-cardable-rows .sk-cardhd { display: none; }
  .sk-cardable-rows .sk-cardrow {
    display: block; grid-template-columns: none;
    background: #fff; border: 1px solid var(--sk-line, #e5e7eb);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
  }
  .sk-cardable-rows .sk-cardrow > span {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 7px 0; border-bottom: 1px dashed #eef0f3;
  }
  .sk-cardable-rows .sk-cardrow > span:last-child { border-bottom: 0; }
  .sk-cardable-rows .sk-cardrow > span::before {
    content: attr(data-label);
    flex: 0 0 auto; font-size: 11px; color: var(--sk-mute, #6b7280);
    font-weight: 700;
  }
  /* ستونِ دکمه‌ها و ستونِ بی‌برچسب تمام‌عرض بمانند */
  /* ★ دو ستون عمداً برچسب ندارند و باید همین‌طور بماند: `sk-pk-sheets`
     (سه دکمه‌ی PDF) و `sk-bpk-ops` (بستن/بازکردن). صریح نوشته می‌شوند
     تا سنجشِ «چند سلولِ بی‌برچسب داریم» عددِ واقعی بدهد، نه عددی که
     باید هر بار دستی توضیح داده شود. */
  .sk-cardable-rows .sk-cardrow > span:not([data-label]),
  .sk-cardable-rows .sk-cardrow > span.sk-pk-sheets,
  .sk-cardable-rows .sk-cardrow > span.sk-bpk-ops {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start;
  }
  .sk-cardable-rows .sk-cardrow > span.sk-pk-sheets::before,
  .sk-cardable-rows .sk-cardrow > span.sk-bpk-ops::before { content: none; }
  /* نامِ محصول/محموله در کارت دو خطی است، نه یک خطِ فشرده */
  .sk-cardable-rows .sk-cardrow > span.sk-pk-num,
  .sk-cardable-rows .sk-cardrow > span.sk-oname {
    flex-direction: column; align-items: stretch; gap: 3px;
  }
}

/* ══════════════ قیفِ هزینه و سودِ تبلیغات ══════════════
   ★ رنگ‌های معنایی (--good / --bad) عمداً از پالتِ برند نیستند: با
   عوض شدنِ رنگِ برنامه نباید عوض شوند، وگرنه «ضرر» یک روز آبی
   می‌شود. همان قاعده‌ی بالای این فایل. */

/* --- عددِ بالای صفحه --- */
.sk-hero{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}
.sk-hero-cell{
  background:#fff; border:1px solid var(--sk-line); border-radius:10px;
  padding:10px 13px;
}
.sk-hero-cell span{display:block; font-size:10.5px; color:var(--sk-mute);}
.sk-hero-cell b{
  font-size:17px; font-variant-numeric:tabular-nums; line-height:1.5;
}
/* ★ ستونِ آخر عمداً بزرگ‌تر و پررنگ‌تر است — سؤالِ اصلیِ صفحه همین است */
.sk-hero-cell.net{grid-column:span 2; background:var(--good-bg);
  border-color:#bfe6d6;}
.sk-hero-cell.net b{font-size:24px; color:var(--good);}
.sk-hero-cell.net.bad{background:var(--bad-bg); border-color:var(--sk-red-line);}
.sk-hero-cell.net.bad b{font-size:26px; color:var(--bad); font-weight:700;}
.sk-hero-cell.unknown{background:var(--warn-bg); border-color:#f0dcae;}
.sk-hero-cell.unknown b{color:var(--warn-text);}

/* --- سه مرحله‌ی قیف --- */
.sk-fn-stage{display:flex; align-items:center; gap:10px; margin:5px 0;}
.sk-fn-name{width:52px; flex:none; font-size:11px; color:var(--sk-mute);}
.sk-fn-track{
  flex:1; min-width:0; height:22px; background:var(--sk-line);
  border-radius:5px; overflow:hidden;
}
/* ★ عرضِ نوار دقیقاً همان درصد است و کفِ مصنوعی ندارد: مرحله‌ی فروش
   واقعاً باریک است و باریک هم باید دیده شود. برای همین عدد **بیرونِ**
   نوار نوشته می‌شود، وگرنه روی نوارِ یک‌پیکسلی جا نمی‌شد و ناچار
   می‌شدیم نوار را دروغ پهن کنیم. */
/* ★ display:block لازم است: `.sk-fn-stage` فلکس است پس خودِ track
   بلوک می‌شود، ولی نوارِ داخلش هنوز inline است و روی inline نه
   height کار می‌کند نه width — نوار **نامرئی** می‌شد، نه غایب.
   سنجیده شد با getBoundingClientRect، نه از روی قاعده. */
.sk-fn-bar{display:block; height:100%; background:var(--brand);
  border-radius:5px;
  /* ★ کفِ ۲ پیکسل، و صفحه خودش این را می‌نویسد.
     مرحله‌ی فروش ۰.۰۳٪ است یعنی ۰.۱ پیکسل روی نوارِ ۲۷۰ پیکسلی —
     یعنی اصلاً پِینت نمی‌شود و «کم» با «خرابِ رندر» یک شکل دیده
     می‌شود. کف گذاشته شد تا دیده شود، و چون کف یک اغراقِ کوچک
     است، تحریفش **کنارِ خودش** اعلام می‌شود نه در هیچ‌جا. عددِ
     بیرونِ نوار همیشه دقیق است. */
  min-width:2px;}
.sk-fn-val{
  width:190px; flex:none; font-size:11.5px; font-variant-numeric:tabular-nums;
}
.sk-fn-val b{font-size:13px;}
.sk-fn-val i{font-style:normal; color:var(--sk-mute);}

/* --- ROAS واقعی کنارِ حداقل --- */
.sk-roas{
  display:inline-block; padding:1px 8px; border-radius:20px;
  font-variant-numeric:tabular-nums; font-weight:700; font-size:12px;
}
/* ★ رنگِ متنِ این سه از --good/--bad تیره‌تر است و عمداً: قرص‌ها
   زمینه‌ی رنگی دارند و با خودِ متغیرها تضاد ۳.۹ می‌شد، زیر ۴.۵.
   سنجیده شد (check_contrast.py)، نه تخمین زده. خودِ متغیرها دست
   نخوردند چون جاهای دیگر روی زمینه‌ی سفید می‌نشینند. */
.sk-roas.ok{background:var(--good-bg); color:#0b6442;}
.sk-roas.bad{background:var(--bad-bg); color:#b81833;}
.sk-roas.na{background:#ededf3; color:#585870; font-weight:400;}
/* ★ حاشیه همیشه کنارِ حداقل می‌آید: «حداقل ۲۵ برابر» گنگ است،
   «حاشیه ۴٪ → ۲۵ برابر» فهمیدنی. */
.sk-minroas{font-size:11px; color:var(--sk-mute); white-space:nowrap;}
.sk-minroas b{color:var(--sk-text); font-variant-numeric:tabular-nums;}

/* --- سطحِ کمپین: باز و بسته --- */
.sk-fn-camp{border:1px solid var(--sk-line); border-radius:9px; margin:7px 0;
  background:#fff;}
.sk-fn-camp[open]{border-color:var(--sk-line2);}
.sk-fn-camp > summary{
  list-style:none; cursor:pointer; padding:9px 12px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.sk-fn-camp > summary::-webkit-details-marker{display:none;}
.sk-fn-camp > summary:hover{background:var(--sk-bg);}
.sk-fn-camp > summary::before{
  content:"▸"; color:var(--sk-mute); flex:none; font-size:11px;
  /* ★ در RTL مثلثِ رو‌به‌راست به بیرون اشاره می‌کند، پس آینه می‌شود */
  transform:scaleX(-1);
}
.sk-fn-camp[open] > summary::before{content:"▾"; transform:none;}
.sk-fn-t{flex:1; min-width:120px;}
.sk-fn-n{font-variant-numeric:tabular-nums; white-space:nowrap;}
.sk-fn-n.bad{color:var(--bad); font-weight:700;}
.sk-fn-n.ok{color:var(--good);}
.sk-fn-body{padding:0 12px 10px; border-top:1px solid var(--sk-line);}

/* --- فهرستِ کپی‌شدنی --- */
.sk-copybox{
  width:100%; min-height:74px; font-family:inherit; font-size:11.5px;
  direction:ltr; text-align:left; border:1px solid var(--sk-line2);
  border-radius:8px; padding:8px; background:var(--sk-bg); resize:vertical;
}