/* یاری‌دک — قالب صنعتی تیره؛ فارسی/RTL؛ فقط پروپرتی‌های منطقی */
@import url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face/css/Vazirmatn-font-face.css");

:root{
  --font-fa:"Vazirmatn","IRANSansX","Segoe UI",Tahoma,sans-serif;
  --bg:#14161b; --surface:#1c2029; --surface2:#232837; --line:#2c3140;
  --text:#e8edf5; --muted:#98a2b3; --accent:#ffb020; --accent-soft:rgba(255,176,32,.14);
  --good:#3fb27f; --bad:#e5534b; --info:#4a9dff; --violet:#8f7bff;
  --radius:14px; --radius-sm:9px;
}
*{box-sizing:border-box}
html,body{padding:0;margin:0}
body{
  font-family:var(--font-fa); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.9;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.5; margin:0 0 .4em}
.muted{color:var(--muted)}
.small{font-size:12.5px}

/* ---------- نوار بالا ---------- */
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px;
  padding:10px 22px; background:rgba(20,22,27,.88); backdrop-filter:blur(8px);
  border-block-end:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px}
.brand .glyph{
  width:34px;height:34px; display:grid; place-items:center; border-radius:10px;
  background:var(--accent); color:#191500; font-weight:900;
}
.topbar nav{display:flex; gap:12px; margin-inline-start:14px}
.topbar nav a{color:var(--text); padding:6px 10px; border-radius:8px}
.topbar nav a:hover{background:var(--surface2); text-decoration:none}
.spacer{flex:1}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border-radius:999px; background:var(--surface2); border:1px solid var(--line);
  font-size:12.5px; color:var(--muted);
}
.chip b{color:var(--text)}
.bell{position:relative; flex:none}
.bell .dot{
  position:absolute; inset-block-start:-4px; inset-inline-end:-4px;
  background:var(--bad); color:#fff; font-size:10px; min-width:16px; height:16px;
  border-radius:999px; display:grid; place-items:center; padding-inline:3px;
}
.notiflist{
  position:absolute; inset-block-start:calc(100% + 10px); inset-inline-end:0;
  inline-size:min(340px, 80vw); max-block-size:320px; overflow-y:auto;
  z-index:50; margin:0; padding:8px; text-align:start;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.notiflist .notif-item{padding:8px 10px; border-block-end:1px solid var(--line); line-height:1.7}
.notiflist .notif-item:last-child{border-block-end:0}
.notiflist .notif-time{color:var(--muted); font-size:11.5px}
@media (max-width:640px){
  .topbar{flex-wrap:wrap; gap:10px; padding:8px 12px}
  .topbar nav{margin-inline-start:0}
  .wrap{padding:18px 12px 60px}
}

/* ---------- چیدمان ---------- */
.wrap{max-width:1080px; margin-inline:auto; padding:26px 22px 70px}
.grid{display:grid; gap:16px}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:860px){
  .grid.g2,.grid.g3,.grid.cards{grid-template-columns:1fr}
}

/* ---------- مؤلفه‌ها ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 18px 14px;
}
.card h3{font-size:15.5px}
.card .sub{color:var(--muted); font-size:13px}
.kpi{display:flex; flex-direction:column; gap:2px}
.kpi .v{font-size:26px; font-weight:800; color:var(--accent)}
.kpi .v.green{color:var(--good)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface2); color:var(--text); font:inherit; cursor:pointer;
  transition:filter .15s, transform .15s;
}
.btn:hover{filter:brightness(1.2); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); color:#191500; border-color:transparent; font-weight:700}
.btn.ghost{background:transparent}
.btn.good{background:var(--good); color:#04140c; border-color:transparent; font-weight:700}
.btn.bad{background:var(--bad); color:#fff; border-color:transparent}
.btn.sm{padding:6px 10px; font-size:13px; border-radius:8px}

/* ---------- اتوکامپلیت (پیشنهاد خودرو) ---------- */
.ac-list{position:absolute; inset-inline:0; top:100%; margin-block-start:4px; z-index:30;
  background:var(--surface2); border:1px solid var(--line); border-radius:10px;
  max-height:220px; overflow-y:auto; padding:4px; box-shadow:0 12px 30px rgba(0,0,0,.45)}
.ac-item{display:block; width:100%; text-align:start; background:none; border:0; color:var(--text);
  padding:9px 12px; border-radius:8px; font-size:14px; cursor:pointer; font-family:inherit}
.ac-item.on,.ac-item:hover{background:rgba(255,176,32,.16)}
form.inline{--ctl-h:42px; display:flex; gap:10px; align-items:end; flex-wrap:wrap}
form.inline .field{flex:1 1 150px; min-width:0; margin-block-end:0}
form.inline .btn{flex:none; height:var(--ctl-h); min-height:var(--ctl-h); padding-block:0; padding-inline:18px}
form.inline input,form.inline select{height:var(--ctl-h); min-height:var(--ctl-h); padding-block:0; padding-inline:12px; line-height:var(--ctl-h)}
@media (max-width:640px){
  form.inline .field{flex:1 1 100%}
  form.inline .btn{width:100%}
}
label{display:block; font-size:12.5px; color:var(--muted); margin-block-end:4px}
input,select,textarea{
  width:100%; padding:9px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface2); color:var(--text); font:inherit;
}
input:focus,select:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}
input[data-money]{text-align:right; letter-spacing:.5px}
.field{margin-block-end:10px}

/* ---------- برچسب/حالت ---------- */
.badge{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:12px; border:1px solid var(--line); color:var(--muted);
}
.badge.ok{background:rgba(63,178,127,.12); color:#7fe2b7; border-color:transparent}
.badge.wait{background:rgba(74,157,255,.12); color:#9cc6ff; border-color:transparent}
.badge.warn{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.badge.err{background:rgba(229,83,75,.14); color:#ff9a93; border-color:transparent}
.badge.gradeA{background:rgba(143,123,255,.15); color:#b3a5ff; border-color:transparent}
.badge.gradeB{background:rgba(74,157,255,.15); color:#9cc6ff; border-color:transparent}
.badge.gradeC{background:rgba(255,176,32,.12); color:var(--accent); border-color:transparent}
.badge.gradeD{background:var(--surface2); color:var(--muted)}

/* ---------- جدول ---------- */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{padding:8px 10px; text-align:right; border-block-end:1px solid var(--line)}
th{color:var(--muted); font-weight:600; font-size:12.5px}
tbody tr:hover{background:var(--surface2)}

/* ---------- تایمر ---------- */
.cd{
  display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; background:var(--surface2);
  border:1px solid var(--line); border-radius:12px; padding:10px 14px;
}
.cd .num{font-variant-numeric:tabular-nums; font-size:22px; font-weight:800; color:var(--accent)}
.bar{height:6px; border-radius:6px; background:var(--surface2); overflow:hidden}
.bar > i{display:block; height:100%; background:var(--accent); transition:width .6s linear}

/* ---------- تایم‌لاین سفارش ---------- */
.rail{display:flex; flex-direction:column; gap:0; margin-block:6px}
.rail .step{display:flex; gap:12px; padding-block:8px}
.rail .dot{
  width:14px; height:14px; border-radius:50%; background:var(--surface2);
  border:2px solid var(--line); flex:none; margin-block-start:6px;
}
.rail .step.done .dot{background:var(--good); border-color:var(--good)}
.rail .step.now  .dot{background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.rail .step.fail .dot{background:var(--bad); border-color:var(--bad)}
.rail .body b{font-size:14px}
.rail .body .sub{font-size:12px}

/* ---------- پیشنهادها ---------- */
.offer{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px;
}
.offer.best{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.offer .rank{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface2); font-weight:800; font-size:18px;
}
.offer.best .rank{background:var(--accent); color:#191500}
.offer .price{font-size:20px; font-weight:800}
.offer .specs{display:flex; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--muted)}
.offer .specs span{background:var(--surface2); border-radius:8px; padding:2px 8px}
.hero{
  padding:46px 8px 30px; text-align:center;
}
.hero h1{font-size:34px; font-weight:900}
.hero h1 em{color:var(--accent); font-style:normal}
.hero p{color:var(--muted); max-inline-size:560px; margin-inline:auto}
.rolecard{display:flex; flex-direction:column; gap:8px; text-align:start}
.rolecard .ic{font-size:28px}
footer.foot{
  border-block-start:1px solid var(--line); color:var(--muted);
  padding:18px 22px; font-size:12.5px; text-align:center;
}
.errbanner{
  background:rgba(229,83,75,.12); color:#ffb3ad; border:1px solid rgba(229,83,75,.3);
  padding:10px 14px; border-radius:12px; margin-block-end:14px;
}
.okbanner{
  background:rgba(63,178,127,.12); color:#7fe2b7; border:1px solid rgba(63,178,127,.3);
  padding:10px 14px; border-radius:12px; margin-block-end:14px;
}
.kv{display:flex; gap:18px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.kv b{color:var(--text)}
/* اعداد خالص: ارقام فارسی + چپ‌چین */
.num{direction:ltr; unicode-bidi:embed; text-align:left; font-variant-numeric:tabular-nums}
.settle-row{
  margin-block-start:12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.settle-row .badge{line-height:1.7}
.seal{
  font-family:"Courier New",monospace; letter-spacing:2px; font-size:20px;
  font-weight:700; color:var(--accent);
  background:var(--accent-soft); border:1px solid rgba(255,176,32,.35);
  border-radius:8px; padding:2px 10px; white-space:nowrap;
  display:inline-block; max-width:100%;
}
.labelprint{background:#fff; color:#111; border-radius:12px; padding:22px; text-align:center}
.labelprint .seal{color:#111; background:#f1f3f6; border-color:#d4d9e0}
.labelprint .kv{color:#333}
.labelprint .kv b{color:#111}
.labelprint .muted{color:#555}

/* ---------- پایداری چیدمان (پاسخ به گزارش به هم ریختگی) ---------- */
.card{overflow-x:auto}
.offer{min-width:0}
@media (max-width:640px){.offer{grid-template-columns:1fr;gap:8px}.offer .rank{justify-self:start}}

/* ---------- آیکون دسته قطعه ---------- */
.part-ic{
  width:46px; height:46px; border-radius:13px; display:inline-grid; place-items:center; flex:none;
  background:var(--accent-soft); color:var(--accent);
  border:1px solid rgba(255,176,32,.32);
}
.part-ic svg{width:26px; height:26px; display:block}
.part-name{display:flex; flex-direction:column; gap:0; line-height:1.6; min-width:0}
.part-name b{font-size:14.5px}
.part-cat{font-size:11.5px; color:var(--muted)}
.cell-part .part-wrap{display:flex; align-items:center; gap:10px; min-width:0}
.ord{
  color:var(--accent); font-weight:700; direction:ltr; unicode-bidi:embed;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.inq-head{display:flex; gap:14px; align-items:flex-start; margin-block-end:6px}
.inq-head .part-ic{width:52px; height:52px; border-radius:15px}
.inq-head .part-ic svg{width:30px; height:30px}
.inv-line{display:flex; gap:12px; align-items:flex-start; min-width:0}
.bundle-item{display:inline-flex; align-items:center; gap:8px}
.bundle-item .part-ic{width:30px; height:30px; border-radius:9px}
.bundle-item .part-ic svg{width:18px; height:18px}

/* ---------- جدول واکنش‌گرا: در موبایل کارت می‌شود، هیچ اسکرول عرضی ---------- */
@media (max-width:640px){
  table thead{display:none}
  table, table tbody, table tr, table td{display:block; width:100%; min-width:0}
  table{border:0}
  /* کارت هر ردیف: فضای تنفسی بیشتر، تفکیک بصری سربرگ/بدنه/اکشن */
  table tr{border:1px solid var(--line); border-radius:16px; margin-block-end:14px;
    padding:8px 6px 12px; background:var(--surface2)}
  table tbody tr:hover{background:var(--surface2)}
  table td{border:0; padding:9px 16px; display:flex; gap:14px; align-items:center;
    text-align:start; justify-content:space-between; line-height:1.8}
  table td::before{content:attr(data-th); color:var(--muted); font-size:12px; flex:none; min-width:76px}
  table td[data-th=""]::before{display:none}
  /* ردیف قطعه = سربرگ کارت: بدون لیبل، برجسته، با فاصله از بقیه */
  table td.cell-part{background:rgba(255,176,32,.07); border-radius:11px;
    margin:4px 8px 6px; width:auto; padding:11px 12px; justify-content:flex-start; gap:12px}
  table td.cell-part::before{display:none}
  table td.cell-part .part-name b{font-size:15.5px}
  /* شماره ردیف کوچک و کم‌رنگ در گوشه */
  table td.cell-num{padding-block-end:0; font-size:12px; color:var(--muted)}
  /* وضعیت و سفارش: مقدار سمت چپ، خوانا */
  table td.cell-status, table td.cell-order{border-block-start:1px dashed var(--line)}
  table td.cell-order{padding-block-end:2px}
  /* عملیات: تمام‌عرض، بدون لیبل، دکمه بزرگ لمسی */
  table td.cell-act{padding:10px 14px 6px}
  table td.cell-act::before{display:none}
  table td.cell-act .btn{width:100%; padding:12px; font-size:14.5px; border-radius:11px}
  /* بقیه جدول‌ها (غیر خریدار): حداقل بهبود فاصله */
  table tr > td:first-child{padding-block-start:12px}
}

/* ---------- لندینگ ---------- */
.landing-hero{position:relative;text-align:center;padding:64px 12px 40px;overflow:hidden}
.landing-glow{position:absolute;inset:-40% -20% auto;height:420px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,176,32,.16),transparent 70%);}
.landing-badge{display:inline-block;padding:5px 16px;border-radius:999px;font-size:13px;
  color:var(--accent);border:1px solid rgba(255,176,32,.4);background:var(--accent-soft);
  animation:rise .6s ease both}
.landing-hero h1{font-size:clamp(30px,5.4vw,52px);font-weight:900;line-height:1.6;margin:18px 0 10px;
  animation:rise .6s .08s ease both}
.landing-hero h1 em{color:var(--accent);font-style:normal;
  text-shadow:0 0 34px rgba(255,176,32,.35)}
.landing-sub{color:var(--muted);max-inline-size:600px;margin:0 auto;font-size:16px;animation:rise .6s .16s ease both}
.landing-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-block-start:26px;
  animation:rise .6s .24s ease both}
.btn.big{padding:13px 30px;font-size:16px;border-radius:12px}
.landing-trust{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-block-start:26px;
  color:var(--muted);font-size:13.5px;animation:rise .6s .32s ease both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.ticker{border-block:1px solid var(--line);background:var(--surface);overflow:hidden;
  direction:ltr;margin-block:10px 0}
.ticker-track{display:inline-flex;align-items:center;padding:10px 0;white-space:nowrap;
  animation:tick 30s linear infinite}
.ticker-track span{color:var(--muted);font-size:13.5px;margin:0 13px}
.ticker-track i{color:var(--accent);font-style:normal;font-size:10px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}

.landing-section{margin-block-start:52px}
.landing-section h2{font-size:24px;font-weight:900}
.landing-section>p{margin-block:2px 18px}
.steps .step{display:flex;gap:14px;align-items:flex-start}
.stepnum{flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  font-size:20px;font-weight:900;background:var(--accent-soft);color:var(--accent);
  border:1px solid rgba(255,176,32,.35)}
.audience .ic{font-size:30px}
.audience ul{margin:10px 0 0;padding-inline-start:20px;color:var(--muted);font-size:14px}
.audience li{margin-block:6px}
.audience li::marker{color:var(--accent)}
.fee-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-block-start:52px;background:linear-gradient(180deg,var(--accent-soft),transparent);
  border:1px solid rgba(255,176,32,.3);border-radius:var(--radius);padding:22px 12px;text-align:center}
.fee-strip b{display:block;font-size:34px;font-weight:900;color:var(--accent)}
.fee-strip span{color:var(--muted);font-size:13px}
@media (max-width:640px){.fee-strip{grid-template-columns:1fr}}
.faq{display:grid;gap:12px}
.faq details{padding:14px 18px;cursor:pointer}
.faq summary{font-weight:700;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);font-weight:900;margin-inline-end:10px}
.faq details[open] summary::before{content:"−"}
.faq p{margin:10px 0 2px}
.landing-final{margin-block:56px 8px}
.final-card{text-align:center;padding:44px 20px;
  background:linear-gradient(180deg,rgba(255,176,32,.10),transparent 70%)}
.final-card h2{font-size:26px;font-weight:900}
.final-card .btn{margin-block-start:18px}