/* ============================================================
   استایل سایت عمومی — استخراج‌شده از layouts/app.blade.php (فاز ۱).
   رنگ/فاصله/شعاع فقط از tokens.css (var()). هیچ hex خام اینجا نیست.
   ============================================================ */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Vazirmatn', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    transition: background .2s, color .2s;
}
a { color: inherit; text-decoration: none; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 32px; width: 100%; }

/* ---------- Top site header (all pages) ---------- */
/* ارتفاع ~۴۰٪ بیشتر (۶۴→۹۰px، توکنِ --header-h) — لوگو/شعار/آیکون‌ها با
   همان نسبت بزرگ‌تر شدند تا در نوارِ بلندتر گم نشوند؛ فاصله‌ها از توکن. */
.site-header {
    display: flex; align-items: center; gap: var(--space-4); height: var(--header-h); padding: 0 var(--space-6);
    border-bottom: 1px solid var(--border); background: var(--surface);
    position: sticky; top: 0; z-index: 50;
}
.site-logo { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; font-size: 1.3rem; }
.site-logo .logo-emoji {
    width: 56px; height: 56px; border-radius: 15px; background: var(--accent-soft);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem;
}
.site-logo img { height: 56px; width: auto; border-radius: 11px; }
.site-logo .tagline { color: var(--muted); font-size: .85rem; font-weight: 400; }
.site-header .spacer { flex: 1; }
.theme-btn {
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
    width: 53px; height: 53px; border-radius: 13px; cursor: pointer; font-size: 1.4rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.theme-btn:hover { border-color: var(--accent); }
/* دو SVG هر دو در DOMاند؛ فقط یکی طبقِ تمِ فعلی دیده می‌شود — بدونِ JS برایِ خودِ آیکون */
.theme-ic-moon { display: none; }
:root[data-theme="light"] .theme-ic-sun { display: none; }
:root[data-theme="light"] .theme-ic-moon { display: inline-flex; }
.account-links { display: flex; align-items: center; gap: var(--space-4); font-size: .95rem; }
.account-links a:hover { color: var(--accent); }
.account-links form { display: inline; }
.link-btn { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.link-btn:hover { color: var(--accent); }
.hamb { display: none; font-size: 2rem; line-height: 1; background: none; border: none; color: var(--text); cursor: pointer; padding: var(--space-1) var(--space-2); }

/* ---------- Shell / layout ---------- */
.shell { display: flex; min-height: calc(100vh - var(--header-h)); }
.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-wrap > main.container { padding-top: 30px; flex: 1; }

/* ---------- Sidebar (RTL, right) ---------- */
.sidebar {
    width: var(--sidebar-w); flex-shrink: 0;
    background: var(--surface);
    border-inline-start: 1px solid var(--border);
    position: sticky; top: var(--header-h); align-self: flex-start;
    height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 16px 14px 28px;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; }
.side-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; padding: 6px 8px 14px; }
.side-brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); flex-shrink: 0; }
.side-close { display: none; margin-inline-start: auto; color: var(--muted); cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); }
.side-close:hover { background: var(--surface-2); color: var(--text); }
.nav-group { margin-top: 14px; }
.nav-kicker { color: var(--muted); font-size: .72rem; letter-spacing: .04em; padding: 0 10px 6px; opacity: .8; }
.navlink {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
    color: var(--text); font-size: .92rem; margin-bottom: 2px; position: relative; white-space: nowrap;
}
.navlink .ic { opacity: .9; }
.navlink:hover { background: var(--surface-2); }
.navlink.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.navlink.active::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 3px; background: var(--accent);
}
.navlink.disabled { color: var(--muted); opacity: .55; cursor: default; }
.navlink.disabled:hover { background: transparent; }
/* CTAِ «سرویس‌دهنده شو» — حاشیهٔ نقطه‌چینِ accent، متمایز از بقیهٔ آیتم‌ها */
.navlink-cta { color: var(--accent); border: 1px dashed var(--accent); }
.navlink-cta:hover { background: var(--accent-soft); }
.navlink-cta.active { border-style: solid; }
.soon { margin-inline-start: auto; font-size: .62rem; background: var(--surface-2); color: var(--muted); padding: 1px 7px; border-radius: 999px; }
.nav-badge { margin-inline-start: 8px; font-size: .66rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; }

/* نوارِ پایینِ موبایل — فقط زیرِ ۹۰۰px (مدیاکوئریِ پایین‌تر)؛ افزودنی، کشو دست‌نخورده. */
.bottom-nav {
    display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
    justify-content: space-around; padding: var(--space-2) var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
}
.bn-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: .68rem; flex: 1; }
.bn-item.active { color: var(--accent); font-weight: 700; }

.navtoggle { display: none; }
.scrim { display: none; }

/* مسیرِ جایگزینِ حساب/ورود در سایدبار — فقط زیرِ ۹۰۰px دیده می‌شود (پایین) */
.sidebar-account { display: none; flex-direction: column; gap: 2px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.sidebar-logout-btn { background: none; border: none; width: 100%; text-align: start; font: inherit; cursor: pointer; }

@media (max-width: 900px) {
    .hamb { display: inline-flex; }
    .sidebar {
        position: fixed; top: 0; bottom: 0; right: 0; left: auto; height: 100vh; z-index: 60;
        transform: translateX(100%); transition: transform .22s ease; box-shadow: -12px 0 40px var(--shadow);
    }
    .navtoggle:checked ~ .shell .sidebar { transform: translateX(0); }
    .navtoggle:checked ~ .shell .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 55; }
    .site-logo .tagline { display: none; }
    /* نامِ برند تک‌خط بماند — فونتِ کمی کوچک‌تر + بدونِ شکستن، جا برایِ
       همبرگر/زنگوله/دکمهٔ تم در همان ردیفِ تنگ باز شود. */
    .site-header { padding: 0 var(--space-4); gap: var(--space-2); }
    .site-logo { font-size: 1.05rem; }
    .site-logo span { white-space: nowrap; }
    /* «سلام/خروج» یا «ورود/ثبت‌نام» از هدر بیرون می‌روند — معادلش در
       سایدبار/منویِ همبرگری همین بالا اضافه شد؛ زنگوله و دکمهٔ تم می‌مانند. */
    .account-links { display: none; }
    .sidebar-account { display: flex; }
    /* نوارِ پایینِ ثابت — افزودنی؛ کشو (بالا) دست‌نخورده برایِ سرریز می‌ماند. */
    .bottom-nav { display: flex; }
    .side-close { display: inline-flex; }
    /* فاصلهٔ ته‌صفحه تا نوارِ ثابت محتوا را نپوشاند — قاعدهٔ چیدمانِ سراسری،
       نه دست‌زدن به طراحیِ خودِ صفحات (بخشِ B2). */
    .main-wrap > main.container { padding-bottom: 84px; }
}

/* ---------- Shared content styles ---------- */
.hero { padding: 10px 0 6px; }
.hero h1 { font-size: 1.8rem; margin: 0 0 6px; }
.hero p { color: var(--muted); margin: 0; }

/* فیلترِ چندانتخابیِ اسلایسری (چک‌باکس‌های افقی، آبشاری) */
.slicer-filters { display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); padding: var(--space-4); border-radius: var(--radius); margin: var(--space-5) 0 var(--space-6); }
.sf-search input { width: 100%; }
.frow { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); background: var(--surface-2); }
.frow > summary { cursor: pointer; font-weight: 600; font-size: .9rem; list-style: none; }
.frow > summary::-webkit-details-marker { display: none; }
.frow > summary::before { content: '▾'; color: var(--muted); margin-inline-end: var(--space-2); }
.frow:not([open]) > summary::before { content: '▸'; }
.fcount { display: inline-block; background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-sm); font-size: .72rem; padding: 0 var(--space-2); margin-inline-start: var(--space-1); }
.fchips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.fchip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-size: .85rem; white-space: nowrap; }
.fchip input { accent-color: var(--accent); }
.fchip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.fgroups { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
/* گروه و لیبل در RTL یکپارچه: لیبل کنارِ چیپ‌ها می‌ماند، چیپ‌ها در ظرفِ خودشان wrap می‌شوند */
.fgroup { display: flex; align-items: flex-start; gap: var(--space-3); }
.fglabel { color: var(--muted); font-size: .78rem; font-weight: 700; min-width: 3.5rem; padding-top: var(--space-1); flex-shrink: 0; }
.fgroup .fchips { margin-top: 0; flex: 1; }
.fhint { color: var(--muted); font-size: .82rem; margin: var(--space-2) 0 0; }

/* «نحوهٔ دریافت» — سگمنتِ تمام‌عرضِ دوگزینه‌ای طبقِ design_handoff_print_request_flow
   (قلمِ ۶)؛ کلاسِ جداگانه از .fchip چون آن الگوی چیپیِ عمومی است، این‌جا طرح یک
   toggleِ پُررنگِ تمام‌عرض با پرِ solidِ accent می‌خواست. */
.fulfillment-toggle { display: flex; width: 100%; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; box-sizing: border-box; }
.ft-opt { position: relative; flex: 1 1 0; text-align: center; border-radius: calc(var(--radius-sm) - 3px); padding: 10px var(--space-3); font-size: .85rem; font-weight: 700; cursor: pointer; color: var(--muted); }
.ft-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ft-opt:has(input:checked) { background: var(--accent); color: var(--on-accent); }
.ft-opt:not(:has(input:checked)):hover { color: var(--accent); }

/* سطحِ کیفیت (قلمِ ۵-۳، چیدمانِ افقیِ تأییدِ چشمی) — کارتِ تمام‌عرض: بدنه (نام + لایهٔ mm + توضیح) و
   رادیو ته‌ی ردیف. منتخب = حاشیه/زمینهٔ accent. متن/عدد بد نمی‌شکند (بدنه flex-grow، رادیو shrink-0). */
.quality-toggle { display: flex; flex-direction: column; gap: var(--space-2); }
.qt-opt { display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); cursor: pointer; background: var(--surface); }
.qt-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.qt-opt:not(:has(input:checked)):hover { border-color: var(--accent); }
.qt-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qt-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.qt-name { font-weight: 700; }
.qt-mm { color: var(--accent); font-weight: 700; font-size: .9rem; }
.qt-phrase { font-size: .82rem; line-height: 1.7; }
/* width:auto لازم است — `.stack-form input{width:100%}` (خطِ ~۷۴۴، هم‌specificityِ .qt-opt input ولی
   دیرتر در فایل، پس برنده) رادیو را ۵۹۴px می‌کرد و با flex:0 0 auto قفل، بدنه را به عرضِ ۰ می‌راند (هر
   کلمه یک خط). specificity را با `.quality-toggle`ِ نیا بالا می‌بریم (۰,۲,۱ > ۰,۱,۱) تا واقعاً ببرد.
   کشفِ تستِ چشمیِ حامد؛ فقط رادیوهای کارتِ کیفیت را هدف می‌گیرد. */
.quality-toggle .qt-opt input { flex: 0 0 auto; width: auto; }

/* کارتِ برآوردِ اسلایس (قلمِ ۵-۳) — بدونِ پول؛ حقایقِ فیزیکی + DFM + انتساب. */
.slice-estimate-card .se-title { margin-block-end: var(--space-3); }
.se-material { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; margin-block-end: var(--space-1); }
.se-quality { margin-block: 0 var(--space-3); }
.se-headline { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-block: var(--space-3); }
.se-metric { display: flex; flex-direction: column; gap: 2px; }
.se-value { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.se-label { font-size: .8rem; color: var(--muted); }
.se-approx { color: var(--gold); }
.se-why, .se-why-link, .se-calc-link { color: var(--accent); font-size: .8rem; text-decoration: none; display: inline-block; }
.se-why:hover, .se-why-link:hover, .se-calc-link:hover { text-decoration: underline; }
.se-calc { margin-block-start: var(--space-2); font-size: .8rem; }
.se-rule { border: none; border-block-start: 1px solid var(--border); margin-block: var(--space-3); }
.se-fact { margin-block: var(--space-1); font-size: .9rem; }
.se-dfm { margin-block: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: .85rem; font-weight: 700; }
.se-dfm.dfm-ok { background: var(--ok-soft); color: var(--ok); }
.se-dfm.dfm-warn { background: var(--gold-soft); color: var(--gold); }
.se-dfm.dfm-block { background: var(--danger-soft); color: var(--danger); }
.se-price-note { font-weight: 700; margin-block: var(--space-2); }
.se-agpl { margin-block-start: var(--space-3); font-size: .75rem; }
.about-agpl { margin-block-start: var(--space-5); font-size: .75rem; }

/* انتخابگرِ تاریخِ شمسی (قلمِ تاریخ) — پاپ‌آپِ سبک؛ .jdp-proxy از .stack-form input استایل می‌گیرد. بی‌JS = input بومی. */
.jdp-wrap { position: relative; display: block; }
.jdp-proxy { cursor: pointer; }
.jdp-pop { position: absolute; z-index: 30; inset-block-start: calc(100% + 4px); inset-inline-start: 0; width: 280px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: var(--space-3); }
.jdp-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-2); }
.jdp-title { font-weight: 700; }
.jdp-nav { background: none; border: none; color: var(--accent); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 var(--space-2); }
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jdp-wd { text-align: center; font-size: .7rem; color: var(--muted); padding-block: var(--space-1); }
.jdp-day { background: none; border: none; border-radius: var(--radius-sm); padding: var(--space-2) 0; cursor: pointer; color: var(--text); font-family: inherit; font-size: .9rem; }
.jdp-day:hover { background: var(--accent-soft); }
.jdp-day.is-today { border: 1px solid var(--accent); }
.jdp-day.is-sel { background: var(--accent); color: var(--on-accent); }
select, input[type=text] {
    width: 100%; padding: 10px 12px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    color: var(--text); font-family: inherit; font-size: .95rem;
}
.btn {
    background: var(--accent); color: var(--on-accent); border: none; font-weight: 600;
    padding: 10px 18px; border-radius: 10px; cursor: pointer; font-family: inherit;
    align-self: end; height: 42px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.ghost.danger { color: var(--danger); border-color: var(--danger); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px; transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.swatch { display: block; width: 100%; height: 8px; border-radius: 6px; margin-bottom: 12px; background: var(--surface-2); }
.card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.meta { color: var(--muted); font-size: .85rem; display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: .78rem;
    background: var(--accent-soft); color: var(--accent); padding: 2px 9px; border-radius: 999px;
}
.chip.gray { background: var(--surface-2); color: var(--muted); }
.cardfoot { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.dots { display: flex; align-items: center; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
table.settings { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .9rem; }
table.settings th, table.settings td { border: 1px solid var(--border); padding: 8px 10px; text-align: center; }
table.settings th { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin: 18px 0; }
.section h2 { margin: 0 0 12px; font-size: 1.15rem; }
.storelist { display: grid; gap: 10px; }
.store {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.price { font-weight: 600; }

/* کارتِ صفحهٔ فروشگاه (۰۸‑۲۴) — عکس + نام + قیمت + دو دکمه.
   ⚠ ابعاد و شعاع از همان `.fcard`ِ کاتالوگ می‌آیند تا دو شبکهٔ کارت در سایت
   دو حسِ متفاوت ندهند؛ تفاوتش فقط این است که کارت خودش لینک نیست. */
.storegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: var(--space-4); }
.scard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.scard .fcard-img { height: 148px; }
.scard-body { padding: 0 var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.scard-name { font-weight: 700; font-size: .92rem; }
.scard-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: var(--space-2); }
.scard-actions .btn { flex: 1 1 auto; text-align: center; }

/* فهرستِ «فروشندگان این کالا» در صفحهٔ فیلامنت (۰۸‑۲۴) — سطر، نه کارت:
   این‌جا محصول نیست، فروشنده است؛ و عکسی هم ندارد که کارت را توجیه کند. */
.sellerlist { display: grid; gap: 10px; }
.seller-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.seller-id { display: flex; flex-direction: column; gap: 2px; }
.seller-city { font-size: .85rem; }
.seller-buy { display: flex; align-items: center; gap: 12px; }
.resultcount { text-align: center; color: var(--muted); font-size: .85rem; margin: 26px 0 10px; }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 0 30px; }
.pagination a, .pagination > span { padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: .9rem; line-height: 1; min-width: 20px; text-align: center; }
.pagination a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pagination .active { background: var(--accent); border-color: var(--accent); }
.pagination .active span { color: var(--on-accent); padding: 0; border: none; background: transparent; min-width: 0; }
.pagination .disabled { color: var(--muted); opacity: .5; border-style: dashed; }
.pagination .dots { border: none; background: transparent; }
.pagination svg { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: middle; }
/* ---------- Browse (filaments landing — Phase-A item 2) ---------- */
.browse-search {
    display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 0 26px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 10px 14px;
}
.browse-search svg { color: var(--muted); flex-shrink: 0; }
.browse-search input { flex: 1; border: none; background: transparent; font: inherit; color: inherit; }
.browse-search input:focus { outline: none; }
.browse-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 8px; }
@media (max-width: 860px) { .browse-cols { grid-template-columns: 1fr; gap: 26px; } }
.browse-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.browse-head h2 { margin: 0; font-size: 1.3rem; }
.browse-head-count { color: var(--muted); font-size: .95rem; font-weight: 500; }
.browse-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.browse-tile {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px; transition: border-color .15s, transform .15s;
}
.browse-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.bt-swatch { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; }
.bt-mono {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex;
    align-items: center; justify-content: center; font-size: .72rem; font-weight: 700;
}
.bt-name { font-weight: 700; font-size: .92rem; flex: 1 1 auto; min-width: 0; }
.bt-count { color: var(--muted); font-size: .78rem; flex-basis: 100%; }
.browse-more { margin-top: 14px; text-align: center; }
.browse-more a { color: var(--accent); font-size: .9rem; font-weight: 600; }
.browse-all { text-align: center; margin: 34px 0 10px; }

/* ---------- Color search table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.ctable { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 720px; }
table.ctable th { text-align: right; color: var(--muted); font-weight: 500; font-size: .8rem; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.ctable td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
table.ctable tbody tr:last-child td { border-bottom: none; }
table.ctable tbody tr:hover { background: var(--surface-2); }
.ctable .cbrand { font-weight: 600; }
.ctable .cmuted { color: var(--muted); }
.ctable .cmono { font-family: ui-monospace, monospace; color: var(--muted); direction: ltr; text-align: right; }
.csettings { text-align: center; }
.settings-link { display: inline-flex; align-items: center; justify-content: center; }
.settings-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--settings-dot); box-shadow: 0 0 6px var(--settings-dot), 0 0 11px var(--settings-glow);
    display: inline-block; transition: transform .12s;
}
.settings-link:hover .settings-dot { transform: scale(1.3); }
.settings-link.dim .settings-dot { background: var(--surface-2); box-shadow: none; opacity: .6; }
.cell-color { display: flex; align-items: center; gap: 10px; }
.cell-color .sw { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); flex-shrink: 0; }
/* رنگِ بدونِ کدِ hex — هاشور تا با خاکستریِ واقعی اشتباه نشود */
.cell-color .sw-nodata { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 3px, var(--border) 3px, var(--border) 6px); }
.cell-color .cimg { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); background: var(--img-bg); flex-shrink: 0; }
/* قلمِ آکاردئونِ فروشنده (۰۷‑۱۸، عملکردی) — تصحیحِ چیدمان: <details> داخلِ <td>
   عرضش به ستون قفل می‌شد (بازبینیِ چشمیِ صاحب پروژه)؛ کشوی واقعی حالا ردیفِ
   جداگانه با colspanِ کامل است (Blade)، عرض-کاملِ زیرِ ردیفِ رنگ — دقیقاً
   ظاهرِ .mat-group که در catalog/show:117 استفاده شده. این‌جا فقط ماشه +
   چک‌باکسِ مخفی (الگویِ .chip-toggle/.pt-more-toggle همین فایل). */
.seller-trigger {
    display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
    font-weight: 600; color: inherit;
}
.seller-trigger .cnt { color: var(--muted); font-weight: 400; font-size: .85rem; }
.seller-trigger .car { color: var(--muted); }
.seller-drawer-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seller-drawer-row:hover { background: transparent; }
.seller-drawer-cell { padding: 0; border-bottom: none; }
.seller-drawer-body { display: none; margin: 0 14px 14px; }
.seller-drawer-toggle:checked ~ .seller-drawer-body { display: block; }
.seller-overflow-note { margin: var(--space-2) 0 0; text-align: center; }
/* برچسب‌هایِ آگهی (قلمِ ۷): «قیمت نامعتبر» + تازگی — آگهی دیده می‌شود، فقط برچسب می‌گیرد (بندِ ۲). */
.offer-badges { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.offer-badge { font-size: .72rem; line-height: 1.7; padding: 0 var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.offer-badge--flag { color: var(--danger); background: var(--danger-soft); font-weight: 600; }
.offer-badge--stale { color: var(--muted); border: 1px solid var(--border); }
/* فازِ ۵: برچسبِ آستانه‌دار رفت و جایش تاریخِ همیشگی نشست. همان توکن‌هایِ
   --stale عمداً بازاستفاده شدند (صفر توکنِ نو) — ظاهر عوض نشد، معنایش شد:
   دیگر «کهنه» نمی‌گوید، «آخرین به‌روزرسانی» می‌گوید. */
.offer-badge--freshness { color: var(--muted); border: 1px solid var(--border); }
.offer-badge--unchecked { color: var(--muted); font-style: italic; }
table.ctable th.csettings { text-align: center; }

/* موبایل: جدول رنگ به کارت عمودی (برچسب:مقدار) */
@media (max-width: 720px) {
    .table-wrap { border: none; background: transparent; overflow-x: visible; }
    table.ctable { min-width: 0; }
    table.ctable thead { display: none; }
    table.ctable tbody tr {
        display: block; background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--radius); margin-bottom: 12px;
    }
    table.ctable tbody tr:hover { background: var(--surface); }
    table.ctable td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        border: none; border-bottom: 1px dashed var(--border); padding: 10px 14px;
    }
    table.ctable td:last-child { border-bottom: none; }
    table.ctable td::before {
        content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 500; flex-shrink: 0;
    }
    table.ctable td.csettings { justify-content: space-between; }
    /* ردیفِ کشوِ فروشنده روی موبایل هم مثلِ دسکتاپ: بدونِ کارتِ خالیِ جدا وقتی
       بسته است — چک‌باکس + .mat-group خودش وقتی باز شد ظاهر می‌شوند. */
    table.ctable tbody tr.seller-drawer-row { border: none; background: transparent; margin-bottom: 0; }
    table.ctable td.seller-drawer-cell { display: block; padding: 0; border-bottom: none; }
    table.ctable td.seller-drawer-cell::before { content: none; }
}

/* ---------- Printers: تولبار + گرید/لیستِ گالری‌محور (فازِ A، قلمِ ۱) ---------- */
.printer-toolbar { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin: var(--space-4) 0 var(--space-5); }
.pt-search { position: relative; margin-bottom: var(--space-3); }
.pt-search .icon { position: absolute; inset-inline-end: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.pt-search input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 var(--space-6) 0 var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: .95rem; }
.pt-search input:focus { border-color: var(--accent); outline: none; }
.pt-brands { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pt-label { font-size: .78rem; color: var(--muted); font-weight: 700; }
.chip-toggle { display: inline-flex; border-radius: 999px; padding: 5px var(--space-3); font-size: .82rem; font-weight: 600; cursor: pointer; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.chip-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chip-toggle.active, .chip-toggle:has(input:checked) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.chip-toggle:not(.active):not(:has(input:checked)):hover { border-color: var(--accent); color: var(--accent); }
.pt-more-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pt-more-label { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 5px var(--space-3); font-size: .82rem; font-weight: 700; cursor: pointer; background: transparent; color: var(--accent); border: 1px dashed var(--accent); }
.pt-more-label .show-less { display: none; }
.pt-more-toggle:checked ~ .pt-more-label .show-more { display: none; }
.pt-more-toggle:checked ~ .pt-more-label .show-less { display: inline; }
.pt-more-brands { display: none; flex-basis: 100%; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.pt-more-toggle:checked ~ .pt-more-brands { display: flex; }
.pt-divider { height: 1px; background: var(--border); margin: var(--space-3) 0; }
.pt-controls { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pt-segment { display: flex; align-items: center; gap: var(--space-2); }
.seg-track { display: inline-flex; gap: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.seg-opt { position: relative; border-radius: 7px; padding: 6px var(--space-3); font-size: .78rem; font-weight: 700; cursor: pointer; color: var(--muted); }
.seg-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg-opt.active, .seg-opt:has(input:checked) { background: var(--accent-soft); color: var(--accent); }
.seg-opt:not(.active):not(:has(input:checked)):hover { color: var(--accent); }
.seg-icons .seg-opt { display: flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; }
.pt-meta { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); }
.pt-count { font-size: .8rem; color: var(--muted); font-weight: 600; }
.pt-apply { margin-top: var(--space-3); }

.printer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.printer-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); transition: border-color .16s, transform .16s; }
.printer-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.pc-image { position: relative; margin: var(--space-3); border-radius: var(--radius-sm); overflow: hidden; height: 150px; background: var(--img-bg); display: flex; align-items: center; justify-content: center; }
.pc-image img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-3); box-sizing: border-box; }
.pc-popular { position: absolute; top: var(--space-2); inset-inline-end: var(--space-2); display: inline-flex; align-items: center; gap: 3px; background: var(--accent); color: var(--on-accent); font-size: .68rem; font-weight: 800; padding: 3px var(--space-2); border-radius: 999px; }
.pc-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 60%, transparent); opacity: 0; transition: opacity .18s; }
.printer-card:hover .pc-overlay { opacity: 1; }
.pc-cta { pointer-events: none; }
.pc-body { padding: 0 var(--space-3) var(--space-4); }
.pc-brand { display: inline-block; font-size: .68rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px var(--space-2); border-radius: 999px; margin-bottom: var(--space-2); }
.pc-name { font-weight: 700; font-size: .92rem; margin-bottom: var(--space-2); }
.pc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; padding: 3px var(--space-2); border-radius: 7px; }
.pc-badge.has { background: var(--ok-soft); color: var(--ok); }
.pc-badge.none { background: var(--surface-2); color: var(--muted); }

.printer-list { display: flex; flex-direction: column; gap: var(--space-2); }
.printer-row { display: flex; align-items: center; gap: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); text-decoration: none; color: var(--text); }
.printer-row:hover { border-color: var(--accent); }
.pr-thumb { width: 64px; height: 64px; flex: none; border-radius: var(--radius-sm); background: var(--img-bg); object-fit: contain; padding: var(--space-1); box-sizing: border-box; }
.pr-main { flex: 1; min-width: 0; }
.pr-name { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: .92rem; }
.pr-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: 3px; font-size: .78rem; }
.pr-cta { flex: none; }

/* ---------- Filaments: تولبار + گریدِ محصولات (فازِ A، قلمِ ۳) ---------- */
.filament-toolbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); margin: var(--space-4) 0 var(--space-5); }
.ft-search { position: relative; margin-bottom: var(--space-3); }
.ft-search .icon { position: absolute; inset-inline-end: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ft-search input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 var(--space-6) 0 var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: .95rem; }
.ft-search input:focus { border-color: var(--accent); outline: none; }
/* فقط فیلدِ جستجویِ رنگ (colors/search.blade.php): هم کدِ Hex می‌گیرد هم متنِ
   فارسی، پس جهتِ ثابت (نه ltr نه rtl) درست نیست — جهتِ هر ورودی از اولین
   حرفِ خودش تشخیص داده شود («#»→LTR، «ن»→RTL)، بدونِ JS. */
.ft-search-q-bidi { unicode-bidi: plaintext; text-align: start; }
.ft-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--border); margin-top: var(--space-3); }
.ft-row:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.ft-label { font-size: .78rem; color: var(--muted); font-weight: 700; }
.ft-chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.chip-dot { display: inline-flex; align-items: center; gap: 6px; }
.chip-dotmark { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ft-apply { margin-top: var(--space-3); }
.ft-resultbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.ft-count { font-size: .82rem; color: var(--muted); font-weight: 600; }
.ft-back { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 600; color: var(--accent); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════
   کارتِ فیلامنت — طرحِ `docs/design/design_handoff_product_card_2a/`

   🔴 **فضایِ نامِ `fc2-` عمدی است:** `.fcard-img` را کامپوننتِ
   `<x-catalog-thumb>` می‌سازد و **صفحهٔ فروشگاه هم از همان می‌خورد**
   (`stores/show.blade.php:70`). بازسازیِ این کارت رویِ آن کلاس‌ها، صفحهٔ
   فروشگاه را هم عوض می‌کرد — بی آنکه در دامنهٔ این قلم باشد. (قاعدهٔ تستِ ۹.)

   ⚠ **و `.fcard*` دست‌نخورده ماند**، نه به‌عنوانِ کدِ مرده: صفحهٔ فروشگاه
   همین حالا از آن استفاده می‌کند.
   ═══════════════════════════════════════════════════════════════════════ */
.filament-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }

.fc2 { display: block; background: var(--surface); border: 1px solid var(--spec-hairline); border-radius: var(--spec-card-radius); overflow: hidden; text-decoration: none; color: var(--text); transition: border-color var(--slider-ctrl-ms) var(--slider-curve); }
.fc2:hover { border-color: var(--card-hover-edge); }
.fc2:focus-visible { outline: 2px solid var(--card-ink-brand); outline-offset: 2px; }

/* نوارِ عکس — تمام‌عرض، بی حاشیه و بی قابِ سفید (قیدِ صریحِ طرح).
   🔄 ۰۹‑۰۴: `cover` به `contain` رسید — حکمِ صاحب پروژه پس از دیدنِ صفحه:
   «بالا پایین قرقره های ایسان که تو عکس معلوم نی». عکسِ محصول مربع است و
   نوار پهن‌تر از بلند، پس `cover` بالا و پایینِ قرقره را می‌برید.
   ⚠ و قیدِ «بی قابِ سفید» نقض نمی‌شود: نوار همچنان تمام‌عرض است و زمینه‌اش
   `--surface-2`ِ خودِ کارت است، نه سفید. */
.fc2-band { height: var(--card-band-h); overflow: hidden; background: var(--surface-2); }
.fc2-band img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* حالتِ بی‌عکس — طرح ندیده بودش و ۱۰۹ محصول از ۱۷۸ همین‌اند. */
.fc2-band.empty { display: flex; align-items: center; justify-content: center; }

.fc2-body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-3); }
.fc2-name { margin: 0; color: var(--text); font-size: .9375rem; font-weight: 700; direction: ltr; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc2-tags { display: flex; gap: 6px; }
.fc2-tag { font-size: .6875rem; font-weight: 600; padding: 3px 9px; border-radius: 4px; direction: ltr; white-space: nowrap; }
.fc2-tag.mat { background: var(--card-tint-material); color: var(--card-ink-material); }
.fc2-tag.brand { background: var(--card-tint-brand); color: var(--card-ink-brand); }

/* نوارِ رنگ — پشتهٔ روی‌هم‌افتادهٔ نقطه‌ها، و شمارش سمتِ دیگر. */
.fc2-colors { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px var(--card-pad); border-top: 1px solid var(--spec-hairline); background: var(--card-wash); }
.fc2-dots { display: flex; align-items: center; }
.fc2-dot { width: var(--card-dot); height: var(--card-dot); border-radius: 50%; border: 1.5px solid var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); flex: none; }
.fc2-dot + .fc2-dot { margin-inline-start: var(--card-dot-overlap); }
.fc2-more { margin-inline-start: 6px; color: var(--muted); font-size: .6875rem; font-weight: 600; direction: ltr; font-variant-numeric: tabular-nums; }
.fc2-count { color: var(--card-count-ink); font-size: .75rem; font-weight: 600; white-space: nowrap; }

/* پاورقی — دو خانه، خطِ ستون بینشان. */
.fc2-foot { display: grid; grid-template-columns: 1.35fr 1fr; border-top: 1px solid var(--spec-hairline); background: var(--card-wash); }
.fc2-cell { padding: 10px 8px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: .6875rem; white-space: nowrap; }
.fc2-cell.settings { border-inline-start: 1px solid var(--spec-hairline); color: var(--spec-tone-mech); font-weight: 600; }
/* ⚠ صفر سبز نمی‌ماند: رنگ نباید خلافِ عدد بگوید. */
.fc2-cell.settings.none { color: var(--muted); font-weight: 400; }
.fc2-cell.shops { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .fc2 { transition: none; } }
.fcard { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); transition: border-color .16s, transform .16s; }
.fcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.fcard-img { margin: var(--space-3); border-radius: var(--radius-sm); overflow: hidden; height: 168px; background: linear-gradient(160deg, var(--img-bg), var(--surface-2)); display: flex; align-items: center; justify-content: center; }
.fcard-img img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-3); box-sizing: border-box; }
.fcard-body { padding: 0 var(--space-3) var(--space-4); }
.fcard-name { font-weight: 700; font-size: .92rem; margin-bottom: var(--space-2); }
.fcard-chips { display: flex; gap: 6px; margin-bottom: var(--space-3); flex-wrap: wrap; }
.fchip-brand { font-size: .68rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px var(--space-2); border-radius: 999px; }
.fchip-mat { font-size: .68rem; font-weight: 600; padding: 3px var(--space-2); border-radius: 999px; }
.fcard-meta { display: flex; flex-direction: column; gap: 6px; }
.fmeta-settings { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 700; width: fit-content; }
.fmeta-settings.has { color: var(--ok); }
.fmeta-settings.none { color: var(--muted); font-weight: 500; }
.fmeta-row { display: flex; gap: var(--space-3); }
.fmeta-row span { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--muted); }

/* ---------- Colors: تولبار + نوارِ نتایج (فازِ A، قلمِ ۴) — تولبار از همان
   کلاس‌هایِ .filament-toolbar/.ft-*ِ بالا (قلمِ ۳) بازاستفاده می‌کند. ---------- */
.ft-grouplabel { font-size: .74rem; color: var(--muted); font-weight: 700; padding: 0 2px; }
.ft-boxcount { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--accent); }

/* ---------- Printer detail ---------- */
.p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.p-head-id { display: flex; align-items: center; gap: var(--space-4); }
.p-icon-tile { flex: none; width: 54px; height: 54px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.p-icon-tile .icon-big { color: inherit; }
.p-head h1 { margin: 2px 0 8px; font-size: 2.2rem; letter-spacing: -.5px; }
.p-brand { font-weight: 700; font-size: 1.02rem; }
.p-logo { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.p-logo:hover { color: var(--accent); }
.verified { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; background: var(--ok-soft); color: var(--ok); padding: 3px 11px; border-radius: 999px; font-weight: 600; }

.p-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-4); margin-top: var(--space-4); align-items: stretch; }
.p-hero-grid:has(> :only-child) { grid-template-columns: 1fr; }
@media (max-width: 820px) { .p-hero-grid { grid-template-columns: 1fr; } }
.p-card-solo { margin-top: var(--space-4); }
.p-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.p-card h2 { margin: 0 0 16px; font-size: 1.12rem; display: flex; align-items: center; gap: 9px; }
.p-grp { color: var(--muted); font-size: .82rem; font-weight: 600; margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.p-grp.first { margin-top: 0; }
.p-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .95rem; align-items: center; }
.p-row .k { color: var(--muted); }
/* اصطلاحِ انگلیسیِ همان پارامتر — زیرِ فارسی، کوچک‌تر و کم‌رنگ‌تر. */
.p-row .k-en { display: block; font-size: .78rem; opacity: .65; }
/* خطِ منبعِ زیرِ جدولِ مشخصات — کم‌رنگ، چون فرا-داده است نه داده. */
.spec-source { color: var(--muted); font-size: .82rem; margin-top: var(--space-3); }
/* همان اصطلاحِ لاتین در صفحهٔ تنظیمات — کارتِ طلایی و جدولِ پارامترها. */
.golden-label .golden-en, .param-en { display: block; font-size: .72rem; opacity: .6; font-weight: 400; }
.p-row .v { font-weight: 600; }
.p-row .v small { color: var(--muted); font-weight: 400; }
.p-carousel .frame { background: var(--img-bg); border-radius: 12px; min-height: 320px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 22px; }
.p-carousel .frame img { max-width: 100%; max-height: 320px; object-fit: contain; }
.p-carousel .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.p-carousel .nav.p { right: 12px; } .p-carousel .nav.n { left: 12px; }
.p-carousel .count { text-align: center; color: var(--muted); font-size: .82rem; margin-top: 10px; }

.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
@media (max-width: 820px) { .spec-grid { grid-template-columns: 1fr; } }
.spec-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.spec-box h3 { margin: 0 0 14px; font-size: 1.02rem; display: flex; align-items: center; gap: 9px; }
.bv-visual { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; justify-content: center; }
.stat-tiles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.tile { flex: 1; min-width: 90px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 8px; }
.tile .v { font-size: 1.15rem; font-weight: 700; }
.tile .l { color: var(--muted); font-size: .72rem; margin-top: 2px; }
.bigtile { flex: 1; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 20px 10px; }
.bigtile .l { color: var(--muted); font-size: .8rem; }
.bigtile .v { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.noz { flex: 1; min-width: 78px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 15px 8px; font-weight: 700; font-size: 1.4rem; }
.noz small { font-size: .72rem; color: var(--muted); font-weight: 400; }
.plate { flex: 1; min-width: 140px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 15px 10px; }
.plate .b { color: var(--muted); font-size: .72rem; }
.plate .n { font-weight: 600; margin-top: 4px; }
.amscard { flex: 1; min-width: 150px; text-align: center; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.amscard .n { font-weight: 600; }

.edition { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--border); }
.edition:first-of-type { border-top: none; }
@media (max-width: 640px) { .edition { grid-template-columns: 64px 1fr; } }
.edition .eimg { width: 90px; height: 90px; border-radius: 10px; object-fit: cover; background: var(--seller-bg); border: 1px solid var(--border); }
.edition .ename { font-weight: 600; }
.edition .esku { color: var(--muted); font-size: .8rem; margin-top: 3px; }
.ebuys { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.ebuy { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; font-size: .9rem; }
.ebuy:hover { border-color: var(--accent); }
.ebuy .reg { color: var(--muted); font-size: .78rem; }

/* آکاردئون گروه‌بندی تنظیمات بر اساس جنس */
.mat-group { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.mat-group > summary { list-style: none; cursor: pointer; padding: 13px 16px; display: flex; align-items: center; gap: 10px; font-weight: 600; user-select: none; }
.mat-group > summary::-webkit-details-marker { display: none; }
.mat-group > summary:hover { background: var(--surface-2); }
.mat-group > summary .cnt { margin-inline-start: auto; font-size: .78rem; color: var(--muted); font-weight: 400; }
.mat-group > summary .car { color: var(--muted); transition: transform .2s; }
.mat-group[open] > summary .car { transform: rotate(180deg); }
.mat-group[open] > summary { border-bottom: 1px solid var(--border); }
.mat-group .table-wrap { border: none; border-radius: 0; }
/* بجِ جنس در آکاردئونِ صفحهٔ پرینتر — تزئینی، تابعِ نامِ جنس (colorFor)، نه دادهٔ رنگِ واقعی */
.mat-badge { display: inline-block; font-size: .78rem; font-weight: 700; border-radius: var(--radius-sm); padding: 4px 11px; }

.empty { text-align: center; color: var(--muted); padding: 60px 0; }
/* کارتِ empty-stateِ نقطه‌چین — طبقِ design_handoff (قلم‌هایِ ۲/۳/۷)، کلاسِ جداگانه
   تا .empty/.muted-note در صفحاتِ خارج از دامنهٔ این طرح‌ها دست‌نخورده بماند. */
.empty-tile { text-align: center; color: var(--muted); padding: var(--space-6) var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); }
.backlink { color: var(--muted); font-size: .9rem; }
/* 🔴 **فاصلهٔ فوتر از محتوا — و این سایت‌گستر است، نه مالِ صفحهٔ فیلامنت (۰۹‑۰۲).**

   **حکمِ صاحب پروژه:** «فوتر هم خیلی چسبیده به کارت ها باید یک فاصله
   استانداردی باشد».

   ⚠ **سنجشِ پنج صفحه نشان داد `main` هیچ فاصلهٔ پایینی ندارد — در هیچ‌کدام:**

   ```
   /filaments/…    آخرین عنصر: کارت، حاشیهٔ پایین ۰   ⇒  فاصله = ۰
   /about                                  ۱۴px       ⇒  ۱۴
   /                                       ۱۸px       ⇒  ۱۸
   /printers                               ۳۰px       ⇒  ۳۰
   /filaments                             ۲۴۰px       ⇒  ۲۴۰
   ```

   🔑 **پس این باگِ صفحهٔ فیلامنت نبود؛ آن‌جا فقط بدترین حالتش دیده شد** —
   تنها صفحه‌ای که آخرین عنصرش کارتی با حاشیهٔ صفر است. بقیه تصادفاً از
   حاشیهٔ آخرین عنصر نجات پیدا کرده بودند، نه از یک قاعده.

   ⇒ رفع رویِ **خودِ فوتر** می‌نشیند، چون قاعدهٔ گم‌شده هم آن‌جاست: «ناحیهٔ
   بعدی از ناحیهٔ قبلی جدا می‌شود». صفحه‌ای که از قبل فاصله داشت، فقط
   کمی بازتر می‌شود.

   📌 و `--space-6` (۳۲px) انتخاب شد چون فاصلهٔ بینِ خودِ کارت‌ها
   `--space-4` (۱۶px) است: جداکنندهٔ **ناحیه** باید از جداکنندهٔ **کارت**
   بزرگ‌تر باشد، وگرنه فوتر مثلِ کارتِ بعدیِ همان پشته خوانده می‌شود —
   دقیقاً چیزی که او دید. `--space-5` (۲۲px) فقط ۶px تفاوت می‌داد. */
footer.site { border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; margin-top: var(--space-6); padding: var(--space-5) 0; text-align: center; }
footer.site .footer-links { display: flex; gap: var(--space-4); justify-content: center; margin-bottom: var(--space-2); }
footer.site .footer-links a { color: var(--text); }
footer.site .footer-links a:hover { color: var(--accent); }

/* ---------- Home dashboard ---------- */
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.stat-card .head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; }
.stat-card .head .ic { font-size: 1.2rem; }

/* ---------- کامپوننت‌ها (فاز ۱): trust-badge ---------- */
.trust-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; padding: 3px 11px; border-radius: 999px; font-weight: 600; }
.trust-badge.default { background: var(--surface-2); color: var(--muted); }
.trust-badge.community { background: var(--ok-soft); color: var(--ok); }
/* 🔴 «سند دیده‌ایم» — آبی، نه سبز (۰۸‑۲۱، هم‌ترازی با ستِ نشان‌هایِ کارگاه).
 * سبز مالِ چیزی است که از رفتارِ کارگاه آمده؛ این یکی تأییدِ ماست.
 * ⚠ کلاسِ جدا و نه رنگ‌آمیزیِ دوبارهٔ `.community`: آن کلاس در بافتِ تنظیمات
 * «تأیید جامعه» است و آن‌جا سبز **درست** است. یک کلاس برایِ دو معنا، همان
 * چیزی است که این تفکیک دارد بازش می‌کند. */
.trust-badge.evidenced { background: var(--info-soft); color: var(--info); }
.trust-badge.staff { background: var(--gold-soft); color: var(--gold); }

/* ---------- کلاس‌های کمکی صفحه‌ای (فاز ۱: جایگزین style های inline) ---------- */
.mt-block { margin-top: 22px; }
.backlink-block { margin-top: 20px; }
.muted-note { color: var(--muted); font-size: .85rem; }
/* حالتِ غیرعادی/نیازمندِ پیگیری (کارتِ فروشگاهِ رد شده/معلق): کنارِ .muted-note می‌آید تا
   اندازه/فاصله همان بماند و فقط رنگ عوض شود — .danger-note بعد از .muted-note است، پس برنده. */
.danger-note { color: var(--danger); }
/* catalog/show */
.fil-notes { color: var(--muted); margin-top: 12px; }
.setgroup-title { margin: 16px 0 4px; }
.store-h3 { margin: 6px 0 10px; }
.store-h3.own { color: var(--accent); }
.store-h3.other { margin: 18px 0 10px; }
.vendor-stock { margin-inline-start: 8px; }
.vendor-buy { display: flex; align-items: center; gap: 14px; }
/* printers */
.p-head { margin-top: 12px; }
.p-desc { color: var(--muted); max-width: 720px; margin-top: 14px; }
.p-carousel { margin-top: 14px; }
.section-head { display: flex; justify-content: space-between; align-items: center; }
.section-note { color: var(--muted); font-size: .85rem; margin: -4px 0 14px; }

/* ============ صفحهٔ canonicalِ تنظیمات (فاز ۵a) — فقط var()، بدون px/hex خام ============ */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: .85rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.bc-sep { color: var(--muted); }
.bc-current { color: var(--text); font-weight: 600; }
.settings-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }

.golden-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin: var(--space-5) 0; }
.golden-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); text-align: center; }
.golden-value { display: block; font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1.15; }
.golden-unit { font-size: 1rem; font-weight: 500; color: var(--muted); margin-inline-start: var(--space-1); }
.golden-label { display: block; margin-top: var(--space-2); color: var(--muted); font-size: .85rem; }

.table-scroll { overflow-x: auto; }
.settings-full th[scope="row"] { text-align: start; white-space: nowrap; }
.param-unit { color: var(--muted); font-weight: 400; font-size: .8rem; margin-inline-start: var(--space-1); }
/* انتخابگرِ هات‌اند، کنارِ دکمه‌های دانلود (§۶.۵۴).
   ⚠ تا امروز این سه کلاس **هیچ استایلی نداشتند**، برایِ همین select
   به ردیفِ دکمه‌ها چسبیده بود. سنجش پیش از افزودن: هر سه فقط در همین
   بلاکِ `settings/show` به‌کار رفته‌اند ⇒ هیچ صفحهٔ دیگری متأثر نیست
   (قاعدهٔ تستِ ۹ روی فایلِ مشترکِ site.css). */
.dl-hotend-form { display: block; }
.dl-hotend-label { display: block; margin-bottom: var(--space-1); }
.dl-hotend-select { max-width: 100%; margin-bottom: var(--space-3); }

/* یادداشتِ گونه‌های هات‌اند — بالایِ جدول (§۶.۵۳).
   🔴 عمداً پرحضور: شرطِ خودِ حکم این بود که «نشود ردش کرد». برچسبِ
   داخلِ ردیف کنارِ عدد می‌نشست و دیده می‌شد؛ یادداشتِ بالای جدول را
   می‌شود ندید — و آن‌وقت خواننده عددِ بی‌برچسبِ زیرش را مالِ خودش
   می‌گیرد، یعنی همان باگی که این طرح برایش ساخته شد.
   ⚠ رنگ `--accent` است نه `--danger` (چیزی خراب نیست) و نه `--gold`
   (آن مالِ نشانِ «تست‌شده توسط ما»ست و قاطی می‌شد). */
.variant-note {
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-inline-start-width: 4px;
    border-radius: var(--radius-sm);
}
.variant-note-lead { margin: 0; font-weight: 700; }
.variant-note-block { margin-top: var(--space-3); }
.variant-note-if { margin: 0 0 var(--space-1); font-weight: 700; color: var(--accent); }
.variant-note-name { font-weight: 700; }
.variant-note-rows { margin: 0; padding: 0; list-style: none; }
/* ⚠ عدد **بلافاصله بعدِ برچسبش**، نه چسبیده به لبهٔ مقابل (حکمِ ۰۹‑۰۲:
   «لازم نیست عدد انقدر دور بشه از فیلدش برای ان قسمت»).
   🔑 و این عمداً با جدول فرق دارد: جدول ۱۷ ردیف دارد و ستونِ مقدارش
   باید تراز بماند؛ یادداشت دو-سه خط است و پخش‌کردنشان فقط چشم را
   می‌دواند. `space-between` این‌جا هیچ ستونی نگه نمی‌داشت. */
.variant-note-rows li {
    display: flex; gap: var(--space-2);
    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--accent-soft);
}
.variant-note-rows li:last-child { border-bottom: 0; }
.variant-note-label { color: var(--muted); }
.variant-note-value { font-weight: 700; white-space: nowrap; }
.param-group { margin-top: var(--space-4); }
.param-group:first-of-type { margin-top: var(--space-3); }
.param-group-title { margin: 0 0 var(--space-2); font-size: .85rem; font-weight: 700; color: var(--accent); }

.empty-state { text-align: center; }
.empty-lead { font-size: 1.1rem; font-weight: 600; margin-bottom: var(--space-2); }

.alt-links .setgroup-title { margin-top: var(--space-4); }
.alt-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.alt-chip { display: inline-flex; padding: var(--space-2) var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: .85rem; }
.alt-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ============ فهرستِ لینکِ تنظیمات در صفحاتِ hub (فاز ۵b) — فقط var() ============ */
.settings-link-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.settings-link { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }
.settings-link:hover { border-color: var(--accent); }
.sl-main { display: flex; flex-direction: column; min-width: 140px; }
.sl-label { font-weight: 600; }
.sl-sub { color: var(--muted); font-size: .8rem; }
.sl-preview { display: flex; gap: var(--space-3); flex-wrap: wrap; color: var(--muted); font-size: .82rem; margin-inline-start: auto; }
.sl-kv { white-space: nowrap; }
.sl-arrow { color: var(--accent); font-size: .85rem; white-space: nowrap; }

/* دکمه‌های نازل (۰۹‑۴): پرینترِ چندنازلی یک ردیف می‌ماند و هر نازل دکمهٔ خودش
   را دارد. شکل از `.chip` می‌آید؛ این‌جا فقط چیزی که دکمه‌اش می‌کند اضافه شده.
   🔴 حاشیه ثابت است نه فقط رویِ hover: رویِ لمس hover وجود ندارد و کاربر باید
   بی‌کشفِ قبلی بفهمد این‌ها کلیک‌شدنی‌اند. */
.sl-nozzles { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sl-nozzle { text-decoration: none; border: 1px solid var(--accent); font-variant-numeric: tabular-nums; }
.sl-nozzle:hover, .sl-nozzle:focus-visible { background: var(--accent); color: var(--on-accent); }

/* ============ صفحهٔ اصلی (بازطراحیِ یابندهٔ تب‌دار) — فقط var() ============ */
/* combobox (progressive enhancement روی جستجوگر) */
.combobox { position: relative; }
.combobox-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.combobox-input { width: 100%; padding: var(--space-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: .95rem; }
.combobox-input:focus { border-color: var(--accent); outline: none; }
.combobox-list { position: absolute; z-index: 20; inset-inline-start: 0; inset-inline-end: 0; margin-top: var(--space-1); max-height: 15rem; overflow-y: auto; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 var(--space-2) var(--space-5) var(--shadow); }
.combobox-group { padding: var(--space-1) var(--space-3); color: var(--muted); font-size: .72rem; font-weight: 600; background: var(--surface-2); cursor: default; position: sticky; top: 0; }
.combobox-item { padding: var(--space-2) var(--space-3); cursor: pointer; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combobox-item:hover { background: var(--surface-2); color: var(--accent); }

/* یابندهٔ تب‌دار — کارتِ hero */
.finder-hero {
    border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5) var(--space-6);
    margin: var(--space-2) 0 var(--space-5);
    background: radial-gradient(120% 140% at 90% 0%, var(--accent-soft), transparent 55%), var(--surface);
}
.finder-kicker { display: flex; align-items: center; gap: var(--space-2); color: var(--accent); font-size: .8rem; font-weight: 700; margin-bottom: var(--space-1); }
.finder-hero h1 { margin: 0 0 var(--space-1); font-size: 1.7rem; }
.finder-hero > .muted-note { margin: 0 0 var(--space-4); }

/* تب‌ها — رادیو+CSS، بدونِ JS (همان الگویِ rfq-upload-card:has) */
.finder-tab-pills { position: relative; display: inline-flex; gap: var(--space-1); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-1); margin-bottom: var(--space-4); flex-wrap: wrap; }
.finder-tab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.finder-tab-label { border-radius: 9px; padding: var(--space-2) var(--space-4); font-size: .87rem; font-weight: 700; cursor: pointer; color: var(--muted); white-space: nowrap; }
.finder-tab-radio:checked + .finder-tab-label { background: var(--accent); color: var(--on-accent); }
.finder-tab-radio:focus-visible + .finder-tab-label { outline: 2px solid var(--accent); outline-offset: 2px; }
.finder-body { display: none; }
.finder-tabs:has(#finder-tab-0:checked) #finder-body-0,
.finder-tabs:has(#finder-tab-1:checked) #finder-body-1,
.finder-tabs:has(#finder-tab-2:checked) #finder-body-2 { display: block; }

.finder-fields { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.finder-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 180px; }
.finder-field > span { color: var(--muted); font-size: .82rem; }
/* :not(.combobox-select) — انتخابِ اصلی وقتی JS آن را جایگزین کرد کلاسِ combobox-select
   می‌گیرد و باید مخفیِ ۱پیکسلیِ خودش (site.css، .combobox-select) بماند؛ وگرنه
   با همین قاعده هم‌تخصیصی می‌شکند و به عرضِ کلِ صفحه کشیده می‌شود (کشفِ تستِ چشمی). */
.finder-field input, .finder-field select:not(.combobox-select) { padding: var(--space-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: .95rem; width: 100%; }
.finder-field input:focus, .finder-field select:focus { border-color: var(--accent); outline: none; }
.finder-hint { margin: var(--space-3) 0 0; }
.finder-hint-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.finder-hint-link:hover { text-decoration: underline; }

.finder-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.color-swatch { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; padding: 0; }
.color-swatch:hover, .color-swatch:focus-visible { border-color: var(--accent); outline: none; }
.finder-all-colors { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); color: var(--accent); text-decoration: none; font-size: .85rem; }

/* کاشی‌های آماریِ کلیک‌پذیر */
.quick-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); }
.qtile { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); text-decoration: none; color: var(--text); transition: border-color .16s, transform .16s; }
.qtile:hover { border-color: var(--accent); transform: translateY(-2px); }
.qtile-icon { display: inline-flex; align-self: flex-start; margin-bottom: var(--space-3); }
.qtile-big { font-size: 1.35rem; font-weight: 800; }
.qtile-label { margin-top: 2px; }
.qtile-sub { color: var(--muted); font-size: .8rem; margin-top: 2px; }

/* دوستونه — ترکیب‌های پیشنهادی + پرومویِ خدماتِ پرینت */
.home-columns { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.combo-panel .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.combo-panel .panel-head h2 { margin: 0; }
.panel-more { color: var(--accent); font-size: .82rem; font-weight: 600; text-decoration: none; }
.combo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.combo-card { display: block; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); text-decoration: none; color: var(--text); }
.combo-card:hover { border-color: var(--accent); }
.combo-top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); min-width: 0; }
.combo-swatch { width: 26px; height: 26px; border-radius: var(--radius-sm); flex: none; border: 1px solid var(--border); }
.combo-name { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.combo-on { font-size: .78rem; margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.combo-chips { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.chip-mini { font-size: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 2px var(--space-2); }

.services-promo { background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%), var(--surface); border: 1px solid var(--accent); display: flex; flex-direction: column; }
.promo-icon { display: inline-flex; align-self: flex-start; margin-bottom: var(--space-3); }
.services-promo h2 { margin: 0 0 var(--space-2); font-size: 1.02rem; }
.services-promo p { margin: 0 0 var(--space-4); color: var(--promo-muted); }
.promo-avatars { display: flex; align-items: center; margin-bottom: var(--space-4); }
.promo-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); border: 2px solid var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; margin-inline-start: -9px; }
.promo-avatar:first-child { margin-inline-start: 0; }
.promo-count { margin-inline-start: var(--space-2); font-size: .78rem; }
.promo-cta { margin-top: auto; align-self: stretch; justify-content: center; }

/* نوارِ درخواست */
.request-bar { border-style: dashed; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.request-info { flex: 1; min-width: 200px; }
.request-title { font-weight: 700; }
.request-form { flex: 1; min-width: 240px; }
.request-main-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.request-main-row input { flex: 1; min-width: 200px; padding: var(--space-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: .95rem; }
.request-main-row input:focus { border-color: var(--accent); outline: none; }
.request-note { width: 100%; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: .85rem; box-sizing: border-box; }

@media (max-width: 900px) {
    .home-columns { grid-template-columns: 1fr; }
    .combo-grid { grid-template-columns: 1fr; }
    /* موبایل: سه تب در ۳۹۰px یک‌خطی جا نمی‌شوند و اسکرولِ افقی کشف‌نشدنی بود
       (تبِ سوم پنهان می‌ماند — باگِ تستِ چشمی). به‌جایِ اسکرول، تب‌ها به خطِ دوم
       می‌پیچند و هرکدام تمامِ عرضِ سهمش را می‌گیرد تا عمدی به‌نظر برسد. */
    .finder-tab-pills { display: flex; flex-wrap: wrap; max-width: 100%; }
    .finder-tab-label { flex: 1 1 auto; text-align: center; }
}

.form-ok { color: var(--ok); font-weight: 600; margin-bottom: var(--space-2); }
.form-err { display: block; color: var(--danger); font-size: .82rem; margin-top: var(--space-2); }

/* ============ صفحاتِ خطا (۴۰۴/۴۰۳/۴۱۹/۴۲۹) ============ */
.errpage { text-align: center; padding: var(--space-6) 0; max-width: 560px; margin: 0 auto; }
.errpage .err-code { font-size: 3.4rem; font-weight: 700; color: var(--accent); line-height: 1; }
.errpage h1 { font-size: 1.5rem; margin: var(--space-3) 0 var(--space-2); }
.errpage p { color: var(--muted); margin: 0 0 var(--space-4); }
.errpage .err-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ============ صفحاتِ هویتی: prose (درباره) + فرمِ ستونیِ تماس ============ */
.prose { max-width: 720px; line-height: 2; color: var(--text); }
.prose p { margin: 0 0 var(--space-4); }
.stack-form { max-width: 620px; display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
/* فرمِ عریض‌تر (A4) — صفحاتِ RFQ‌ای که محتوایِ بزرگ (کارت/نمایشگرِ سه‌بعدی)
   دارند و ۶۲۰px تنگ‌شان می‌کند؛ بقیهٔ .stack-form دست‌نخورده می‌ماند. */
.stack-form.form-wide { max-width: 900px; }
/* .delivery-fields: ریشهٔ کامپوننتِ اطلاعاتِ تحویل — بیرونِ stack-form/calc-form
   رندر می‌شود (فرمِ واحدِ war/quotes)، پس بدونِ این سلکتورها ورودی‌هایش با استایلِ
   خامِ مرورگر می‌ماند (باگِ تستِ چشمیِ ۴.۲.۵ — از قلمِ ۳.۵ جامانده بود). */
.stack-form .ff, .delivery-fields .ff { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-form .ff > span, .delivery-fields .ff > span { font-weight: 600; font-size: .92rem; }
.stack-form .ff > span i { color: var(--accent); font-style: normal; margin-inline-start: var(--space-1); }
.stack-form input, .stack-form textarea, .stack-form select,
.delivery-fields input, .delivery-fields textarea,
.rating-form input, .rating-form textarea { padding: var(--space-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: .95rem; width: 100%; }
.stack-form input:focus, .stack-form textarea:focus, .stack-form select:focus,
.delivery-fields input:focus, .delivery-fields textarea:focus,
.rating-form textarea:focus { border-color: var(--accent); outline: none; }
.stack-form textarea, .delivery-fields textarea, .rating-form textarea { resize: vertical; }
/* .rating-form .ff — همان الگویِ برچسبِ فیلد؛ ورودیِ ستاره جدا استایل دارد */
.rating-form .ff { display: flex; flex-direction: column; gap: var(--space-2); }
.rating-form .ff > span { font-weight: 600; font-size: .92rem; }

/* سطلِ تقصیرِ لغو (قلمِ ۴.۳) — رادیوهای دلیلِ لغوِ سرویس‌دهنده، بدونِ JS */
.cancel-cats { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cancel-cats legend { font-weight: 600; font-size: .92rem; padding: 0 var(--space-2); }
.cancel-cats legend i { color: var(--accent); font-style: normal; margin-inline-start: var(--space-1); }
.cancel-cat-option { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.cancel-cat-option:hover { background: var(--surface-2); }
.cancel-cat-option input[type="radio"] { width: auto; margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.cancel-cat-text { display: flex; flex-direction: column; gap: 2px; }
.cancel-cat-label { font-weight: 600; font-size: .92rem; }
.cancel-cat-hint { font-size: .82rem; }

/* ============ حلقهٔ بازخورد (فاز ۶) — فقط var() ============ */
/* کارتِ مشارکت (بازطراحیِ فازِ A) — قاب accent مثلِ .user-notes/.cta */
.section.feedback { border-inline-start: 4px solid var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 55%); }
.fb-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.fb-copy h2 { margin: 0; }
.fb-lead { color: var(--muted); margin: var(--space-1) 0 0; }
.fb-trust-badge { flex: none; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); min-width: 100px; }
.fb-trust-pct { font-size: 1.6rem; font-weight: 900; color: var(--ok); line-height: 1; }
.fb-trust-label { font-size: .72rem; color: var(--muted); margin-top: var(--space-1); }
.fb-bar { height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin-top: var(--space-4); }
.fb-bar-fill { height: 100%; background: var(--ok); border-radius: 6px; }
.fb-bar-meta { display: flex; justify-content: space-between; margin-top: var(--space-2); font-size: .78rem; color: var(--muted); }
.fb-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; margin: var(--space-3) 0; }
.fb-buttons > .fb-yes, .fb-buttons > .fb-correct { flex: 1; min-width: 180px; }
.fb-yes .btn, .fb-correct > summary { width: 100%; text-align: center; }
.fb-correct > summary { list-style: none; cursor: pointer; }
.fb-correct > summary::-webkit-details-marker { display: none; }
.fb-correct[open] { flex-basis: 100%; }               /* هنگام باز شدن، تمام‌عرض */
.fb-correct[open] > summary { margin-bottom: var(--space-3); }
.fb-form { margin-top: var(--space-2); }
.fb-params { display: flex; flex-direction: column; gap: var(--space-2); }
.fb-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.fb-label { min-width: 140px; }
.fb-site { width: 80px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2); text-align: center; }
.fb-user { width: 120px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2); font-family: inherit; }
.fb-user:focus { border-color: var(--accent); outline: none; }
.fb-extra { margin-top: var(--space-2); }
.fb-extra > summary { cursor: pointer; color: var(--muted); padding: var(--space-2) 0; }
.fb-note { display: block; width: 100%; margin-top: var(--space-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); font-family: inherit; min-height: calc(var(--space-6) * 2); }
.fb-hint { color: var(--muted); font-size: .8rem; margin-top: var(--space-3); }

/* دانلودِ پروفایل + نکتهٔ کاربران (۶ب) */
.settings-actions { margin: var(--space-3) 0; }
.btn-ext { display: block; opacity: .75; font-size: .78rem; direction: ltr; text-align: start; }
.btn.download { background: var(--ok); color: var(--on-ok); border-color: var(--ok); font-weight: 600; }
.btn.download:hover { opacity: .9; }
.dl-hint { color: var(--muted); font-size: .8rem; margin-top: var(--space-2); }
.download-group { display: flex; flex-direction: column; gap: var(--space-2); }
.dl-label { font-weight: 600; }
.dl-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.dl-buttons .btn { height: auto; width: 100%; justify-content: space-between; padding: var(--space-4); border-radius: var(--radius); }
.dl-name { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: start; }
.dl-name-main { font-weight: 800; font-size: .98rem; }
.dl-icon { flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--on-accent) 22%, transparent); }
.dl-soon-form { display: contents; }
.btn.soon { background: var(--surface-2); color: var(--muted); border-color: var(--border); cursor: pointer; }
.btn.soon:hover { border-color: var(--accent); color: var(--text); }
.soon-tag { font-size: .75em; opacity: .8; }
/* برجسته‌سازیِ امضای اجتماعی (تست چشمیِ فاز ۱۰) — قبلاً یک .section ساده و گم بود */
.user-notes { border-inline-start: 4px solid var(--ok); background: linear-gradient(180deg, var(--ok-soft), var(--surface) 60%); }
.user-notes h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: 1.05rem; }
.notes-count { color: var(--ok); font-weight: 600; font-size: .85rem; }
.user-notes .notes-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.note-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.note-verdict.ok { color: var(--ok); }
.note-verdict.no { color: var(--accent); }
.note-tweak { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); font-size: .82rem; }
.note-text { color: var(--muted); }

/* خاستگاهِ رکوردِ primary زیرِ H1 (تست چشمیِ فاز ۱۰) — قابِ بصریِ واضح + فاصلهٔ کافی
   از چیپ‌های زیرش (مشکلِ فاز ۱۰: قبلاً margin-bottom نداشت و به meta می‌چسبید) */
.provenance-note { font-size: .85rem; margin: var(--space-3) 0 var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid transparent; display: block; }
.provenance-note.staff { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-soft); }
.provenance-note.community { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-soft); }
.provenance-lead { display: block; font-size: .72rem; opacity: .8; margin-bottom: var(--space-1); }

.calc-inline-link { display: inline-block; margin-top: var(--space-3); color: var(--accent); text-decoration: none; font-size: .9rem; }
.calc-inline-link:hover { text-decoration: underline; }
.mini-link { color: var(--accent); text-decoration: none; margin-inline-start: var(--space-2); }
.mini-link:hover { text-decoration: underline; }

.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
/* .sf/.cf/.opt/.req عمداً بدونِ پیشوندِ .calc-form (رفعِ گپِ کشف‌شده در آخرین قلمِ فازِ A:
   این چهار کلاس در onboarding/new-specs/quote-form-fields هم — بیرونِ .calc-form —
   استفاده می‌شدند و بی‌استایل می‌ماندند؛ عمومی‌سازی فقط استایلِ گم‌شده را اضافه می‌کند). */
.sf, .cf { display: flex; flex-direction: column; gap: var(--space-1); }
.sf > span, .cf > span { color: var(--muted); font-size: .82rem; }
.opt { color: var(--muted); font-style: normal; font-size: .78em; opacity: .8; }
.cf-hint { color: var(--muted); font-size: .75rem; line-height: 1.5; margin-top: var(--space-1); }
.req { color: var(--danger); font-weight: 700; }
.calc-form input.has-err { border-color: var(--danger); }
.form-errors { background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-4); }
/* بنرِ هشدارِ درجا (قلمِ ۴.۲ — مهلتِ بی‌حرکتی): خویشاوندِ form-errors ولی با لحنِ
   accent (توجه/مهلت) نه danger (خطا) — هنوز چیزی خراب نشده، قابلِ جلوگیری است. */
.form-warn { background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: var(--space-3); margin: 0; }
/* بنرِ **اطلاع‌رسانی** — سومین لحنِ همان خانواده، کنارِ danger (خراب شد) و accent
   (مهلت/توجه). این یکی هیچ‌کدام نیست: «ایمیلت هنوز تأیید نشده» وضعیتِ عادیِ پس از
   ثبت‌نام است، نه خطا. با `form-errors` قرمز رندر می‌شد و کاربر را بی‌دلیل نگران
   می‌کرد (کشفِ تستِ چشمی). **افزودنی است، نه تغییر** — رفتارِ هیچ صفحهٔ موجودی
   عوض نمی‌شود. فقط توکن‌هایِ موجود (`--info` در هر دو تم تعریف شده). */
/* چک‌باکسِ درون‌خطیِ فرم («مرا … روز وارد نگه دار»). `width:auto` لازم است چون
   `.stack-form input { width:100% }` (خطِ ~۷۵۸) وگرنه چک‌باکس را به عرضِ کاملِ فرم
   می‌کشد — همان تلهٔ ثبت‌شدهٔ رادیوهای کارتِ کیفیت در خطِ ۱۷۹. فقط توکن. */
.ff-check { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.stack-form .ff-check input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }

.form-note { background: var(--info-soft); border: 1px solid var(--info); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-4); }
.form-note .fe-lead { color: var(--info); font-weight: 600; margin: 0 0 var(--space-1); }
/* کارتِ ماشهٔ مشتری (اصلاحِ مهلت‌ها — بازطراحیِ تستِ چشمی): لحظهٔ اختیار باید
   کارتِ مستقلِ برجسته باشد، نه دکمه‌ای گم‌شده لایِ متن. فقط توکن‌هایِ موجود. */
.release-card { border: 1px solid var(--accent); background: var(--accent-soft); }
.release-card h2 { color: var(--accent); }
.release-card .rc-body { margin: var(--space-2) 0; line-height: 1.9; }
.release-card .rc-reassure { color: var(--muted); font-size: .85rem; margin: 0 0 var(--space-3); }
.form-errors .fe-lead { color: var(--danger); font-weight: 600; margin: 0 0 var(--space-1); }
.form-errors ul { margin: 0; padding-inline-start: var(--space-5); font-size: .85rem; }
.calc-form select, .calc-form input { padding: var(--space-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: .95rem; }
.calc-form select:focus, .calc-form input:focus { border-color: var(--accent); outline: none; }
.cf-time-row { display: flex; align-items: center; gap: var(--space-2); }
.cf-time-row input { width: 100%; }
.cf-colon { color: var(--muted); }
.cf-autoprice .auto-price { margin: 0; padding: var(--space-3); background: var(--ok-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .9rem; }

.calc-advanced { margin-top: var(--space-4); }
.calc-advanced > summary { cursor: pointer; color: var(--accent); font-size: .9rem; }
.calc-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }

/* چیدمانِ دوستونه: فرم + خروجی هم‌زمان (دسکتاپ)؛ موبایل پشت‌سرهم */
.calc-layout { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-4); align-items: start; }
.calc-output .section { position: sticky; top: var(--space-4); }
@media (max-width: 860px) {
    .calc-layout { grid-template-columns: 1fr; }
    .calc-output .section { position: static; }
}

/* چهار سطحِ قیمت — کارت‌های متمایز فقط با رنگِ حاشیه/قیمت (نه پس‌زمینه‌یِ
   تینت‌دار، طبقِ طرح: هر چهار کارت زمینهٔ یک‌دستِ فیلد دارند)؛ رنگ‌ها فقط از
   توکن‌ها (color-mix رویِ var برایِ درصدِ کدری، نه hexِ جدید). ترتیبِ بصری
   (استاندارد/اقتصادی/لوکس/ویژه) از ترتیبِ Bladeِ @foreach می‌آید، نه CSS. */
.calc-price-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.calc-price-card { border: 1.5px solid var(--border); border-radius: var(--radius); padding: var(--space-4); text-align: center; background: var(--surface-2); }
.calc-price-card.lvl-1 { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.calc-price-card.lvl-0 { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.calc-price-card.lvl-3 { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.cpc-name { display: block; font-weight: 600; font-size: .9rem; }
.cpc-price { display: block; font-size: 1.5rem; font-weight: 700; color: var(--accent); line-height: 1.25; margin-top: var(--space-1); }
.lvl-0 .cpc-price { color: var(--ok); }
.lvl-2 .cpc-price { color: var(--text); }
.cpc-meta { color: var(--muted); font-size: .75rem; }
.calc-legend { margin-top: var(--space-3); font-size: .78rem; line-height: 1.6; }

/* تفکیکِ هزینه — کارت‌های کوچکِ شبکه‌ای + کارتِ جمعِ متمایز */
.calc-sub { margin-top: var(--space-5); font-size: 1rem; }
.calc-breakdown-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.cb-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); text-align: center; }
.cb-label { display: block; color: var(--muted); font-size: .78rem; }
.cb-val { display: block; font-weight: 600; margin-top: var(--space-1); }
.cb-total { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.cb-total-label { font-weight: 600; }
.cb-total-val { font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.calc-share { margin-top: var(--space-4); }

/* حالتِ اولیه — راهنمای placeholder به‌جای نتیجهٔ خالی */
.calc-placeholder { text-align: center; padding: var(--space-6) var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius); }
.cph-ic { font-size: 2.4rem; }
.cph-lead { font-weight: 600; margin-top: var(--space-2); }

/* اکشن‌های نتیجه: ذخیره + اشتراک (۷ب) */
.calc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.save-estimate-form { margin: 0; }
.calc-share-box { display: inline-flex; align-items: center; gap: var(--space-2); }
.share-ok { color: var(--ok); font-size: .85rem; }

/* آپلودِ G-code (۷ج-الف) — فرمِ جدا بالای ماشین‌حساب */
.gcode-upload { margin-bottom: var(--space-4); }
.gcode-upload h2 { margin-bottom: var(--space-1); }
.gcode-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.gcode-upload input[type="file"] { flex: 1 1 220px; padding: var(--space-2); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: .9rem; }
/* کلمهٔ G-code در تیترِ نوارِ آپلود + دکمهٔ استخراج — طبقِ design_handoff_cost_calculator
   (یافتهٔ تستِ چشمی: قبلاً chevron/ghostِ عمومی بود، طرح دکمهٔ مرزدارِ تیره + آیکونِ
   آپلودِ accent می‌خواست). */
.gcode-accent-word { color: var(--accent); }
.gcode-extract-btn {
    display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
    background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 11px var(--space-4); font-weight: 700;
    font-size: .85rem; font-family: inherit; cursor: pointer;
}
.gcode-extract-btn:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.gcode-extract-btn .icon { color: var(--accent); }
/* کارتِ ماندگارِ فایلِ G-code (۷ج) — پیش‌فاکتورِ کوچکِ پروژه */
.gcode-card { border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: var(--radius); background: var(--surface); padding: var(--space-4); margin-bottom: var(--space-4); }
.gc-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gc-file { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; font-weight: 600; }
.gc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.gc-remove { margin-inline-start: auto; color: var(--danger); font-size: .8rem; text-decoration: none; white-space: nowrap; }
.gc-body { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.gc-line { display: flex; justify-content: space-between; gap: var(--space-3); font-size: .9rem; }
.gc-line > span { color: var(--muted); }
.gc-mats { list-style: none; margin: 0 0 var(--space-1); padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.gc-mats li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: .85rem; }
.gc-mw { font-weight: 600; }
.gc-note { margin-top: var(--space-3); }

/* ردیف‌های متریالِ چندگانه (۷ج-ب) */
.calc-materials { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.material-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--surface); }
.mr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.mr-num { color: var(--muted); font-size: .82rem; font-weight: 600; }
.mr-remove { background: none; border: none; color: var(--danger); font-family: inherit; font-size: .8rem; cursor: pointer; padding: 0; }
.mr-add { align-self: flex-start; }

/* صفحهٔ برآوردِ فقط‌خواندنی */
.estimate-meta { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.estimate-meta li { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.em-k { color: var(--muted); font-size: .72rem; }
.em-v { font-weight: 600; }
.estimate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }

/* ==============================================================
   PrintMarket P1 — سرویس‌دهنده: onboarding/دایرکتوری/پروفایل/داشبورد
   ============================================================== */

/* سکشن‌های ویترینیِ onboarding (سه‌ستونه) */
.g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; }

/* گریدِ کارتِ سرویس‌دهنده — عریض‌تر از mcard چون محتوای بیشتری دارد */
/* minmax(340px,…) به‌جایِ ۲۶۰px (تصمیمِ صاحب پروژه، تستِ چشمیِ دورِ دوم): کارتِ عریض‌تر
   لازم بود تا نامِ کاملِ متریال‌ها جا شود؛ رویِ عرضِ حداکثریِ main.container (۱۴۰۰px
   منهایِ padding/سایدبار) همین مقدار سه‌ستونه می‌شود، نه چهارستونه. */
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }

/* کارتِ سرویس‌دهنده — بازطراحیِ بصری، فازِ A قلمِ ۷ (design_handoff_service_provider_card).
   بنر: گرادیانِ تزئینیِ hue-محور (--pc-accent از accent_colorِ present()) به‌جایِ عکسِ واقعی
   که نداریم. .unlisted فقط کارت کم‌رنگ‌تر می‌شود، بدونِ اکشن. */
.provider-card { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.provider-card.unlisted { opacity: .75; border-style: dashed; }
.pc-banner { position: relative; height: 78px; background: linear-gradient(135deg, color-mix(in srgb, var(--pc-accent) 38%, var(--surface-2)), var(--surface-2) 78%); }
/* ⚠ `.pc-banner .pc-badge` با حکمِ ۰۸‑۲۲ برداشته شد — برچسبِ اعتماد از کارت رفت
   (همان جمله دو بار رندر می‌شد). خودِ `.pc-badge` می‌ماند: فهرستِ پرینترها هم
   استفاده‌اش می‌کند، با معنایِ کاملاً دیگری. */
/* ترتیبِ عمودیِ آگاهانه (تستِ چشمی، دورِ دوم): بنر → آواتار → نام → شهر — فقط آواتار
   رویِ لبهٔ بنر می‌نشیند (margin-top منفی)؛ نام/شهر کاملاً زیرِ بنر، جریانِ عادی.
   position:relative رویِ ردیفِ آواتار لازم بود تا z-index:1 بگیرد — بدونش، چون
   .pc-banner هم positioned است (برایِ بجِ absolute)، طبقِ ترتیبِ چیدمانِ CSS عنصرِ
   positioned همیشه روی عنصرِ static می‌نشیند، صرف‌نظر از ترتیبِ DOM؛ نتیجه‌اش نیمهٔ
   بالاییِ آواتار زیرِ بنر پنهان می‌شد (تستِ چشمیِ دورِ اول). */
.pc-avatar-row { position: relative; z-index: 1; padding: 0 var(--space-4); margin-top: -30px; }
.pc-avatar { display: block; width: 60px; height: 60px; border-radius: 50%; overflow: hidden; border: 3px solid var(--surface); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .3); background: var(--surface-2); }
.pc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pc-headinfo { padding: var(--space-2) var(--space-4) 0; min-width: 0; }
.pc-name { display: block; font-size: 1.05rem; }
.pc-city { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.pc-body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.pc-bio { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.7; }
.pc-specialties { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.specialty-tag { font-size: .78rem; padding: 2px var(--space-2); border-radius: 999px; background: var(--accent-soft); color: var(--accent); }

/* نمونه‌کارهایِ اخیر — فقط وقتی ≥۱ عکسِ approved واقعاً هست (شرطی در Blade)، وگرنه کل بخش پنهان است. */
.pc-samples-head { display: flex; align-items: center; justify-content: space-between; font-size: .74rem; color: var(--muted); margin-bottom: var(--space-2); }
.pc-samples-head a { color: var(--accent); text-decoration: none; font-weight: 600; }
.pc-samples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.pc-sample-tile { display: block; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.pc-sample-tile img { width: 100%; height: 100%; object-fit: cover; }

/* دو کارتِ meta فشرده — دستگاه (خلاصهٔ برند) و متریال (نقطه‌رنگِ colorFor). */
.pc-meta { display: flex; gap: var(--space-2); }
/* gap از space-2 به space-3 (حکمِ ۰۸‑۲۲: فاصلهٔ آیکون تا متن کم بود). */
.pc-meta-card { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pcm-info { min-width: 0; }
.pc-meta-card strong { display: block; font-size: .82rem; }
/* تستِ چشمی: با nowrap+ellipsis، «+n»ِ محدودشده هم در کارت‌هایِ باریک بریده می‌شد
   (ellipsisِ RTL وسطِ کلمه می‌افتاد). به‌جایِ بریدن، اجازهٔ دوخطی‌شدن. */
.pcm-sub { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; line-height: 1.4; overflow-wrap: break-word; }
.pcm-dots { display: flex; flex: none; flex-wrap: wrap; max-width: 30px; gap: 2px; margin-top: 3px; }
.pcm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.pc-unlisted-note { color: var(--muted); font-size: .8rem; margin: 0 var(--space-4) var(--space-4); }
.pc-actions { display: flex; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
/* اسمِ .pc-cta عمداً استفاده نشد — همان کلاسِ printer-card (خطِ ۳۴۸) با
   pointer-events:none، چون آن‌جا فقط متنِ تزئینیِ hover است، نه لینکِ واقعی؛
   با هم‌نام‌شدن، دکمهٔ واقعیِ این‌جا کاملاً غیرقابل‌کلیک می‌شد (باگِ تستِ چشمی،
   ریشه‌یابی‌شده با کلیکِ واقعیِ Playwright، نه فقط بررسیِ href). */
.pc-request-btn { flex: 1; text-align: center; }
.pc-profile-link { flex: none; }

/* دو کارتِ ورودِ لندینگِ ثبتِ درخواست (B1) — کارتِ مستقیم برجسته/پیشنهادی
   (بازطراحیِ بصری قلمِ ۶)، کارتِ جنگ خنثی می‌ماند. */
.entry-cards { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--space-4); margin: var(--space-4) 0; }
@media (max-width: 760px) { .entry-cards { grid-template-columns: 1fr; } }
.entry-card { display: flex; flex-direction: column; gap: var(--space-3); }
.entry-card .stack-form { margin-top: auto; }
.entry-card-primary { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.entry-card-primary::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 100px; background: radial-gradient(120% 100% at 80% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); pointer-events: none; }
.entry-card-badge { font-size: .68rem; font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: 3px var(--space-2); border-radius: 999px; }

/* نوارِ تکمیلِ پروفایل */
.completion-bar { margin: var(--space-3) 0; }
.cb-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cb-fill { height: 100%; background: var(--ok); border-radius: 999px; transition: width .2s; }
.cb-label { font-size: .8rem; color: var(--muted); margin-top: var(--space-1); }
.cb-narrative { font-size: .85rem; margin: var(--space-2) 0 0; }
.cb-next { color: var(--accent); font-weight: 600; }

/* چهار کارتِ وریفایِ داشبورد */
.verification-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-5); align-items: stretch; }
.vc-mechanism { font-size: .85rem; margin: 0; }
.vc-narrative { font-size: .8rem; color: var(--muted); margin: 0; }

/* بلوکِ پیمان‌نامه در فرمِ ثبتِ پایه */
.pledge-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--space-2); }
.pledge-block h2 { margin: 0; font-size: 1rem; }
/* بندهایِ عنوان‌دارِ پیمان‌نامه (قلمِ ۷الف) — عنوانِ کوتاه خواندنِ ده بند را ممکن
   می‌کند و در داوری قابلِ ارجاع است؛ فقط توکن‌هایِ موجود، صفر رنگ/فاصلهٔ خام. */
.pledge-clauses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); counter-reset: pledge; }
.pledge-clause { counter-increment: pledge; }
.pledge-clause-title { margin: 0 0 var(--space-1); font-size: .9rem; font-weight: 700; }
.pledge-clause-title::before { content: counter(pledge) ". "; color: var(--accent); font-variant-numeric: tabular-nums; }
.pledge-clause-body { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.85; }

/* صفحهٔ عمومیِ قوانین (قلمِ ۷الف) — همان زبانِ بصریِ بندهایِ پیمان، فقط توکن‌هایِ موجود. */
.rules-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); counter-reset: rule; }
.rules-item { counter-increment: rule; }
.rules-item-title { margin: 0 0 var(--space-1); font-size: .95rem; font-weight: 700; }
.rules-item-title::before { content: counter(rule) ". "; color: var(--accent); font-variant-numeric: tabular-nums; }
.rules-item-body { margin: 0; color: var(--muted); line-height: 1.9; }
/* 🗑 هفت خطِ `.rules-defect*` در ۲۰۲۶‑۰۸‑۱۷ برداشته شد — جدولِ عیب حذف شد
   (حکمِ صاحب پروژه: استانداردِ داوری بود و داوری با جراحی رفت). تنها مصرف‌کننده‌شان
   همان بلاک بود؛ سنجیده، نه فرض. */

/* پذیرشِ پیمان‌نامهٔ «سرویس‌دهنده شو» (قلمِ ۸) — کارتِ بزرگِ کلیک‌پذیر، نه چک‌باکسِ
   ریز؛ چک‌باکسِ واقعی زیرِ لیبل مخفیِ بصری می‌ماند (نه display:none — قابلِ‌فوکوس/تب
   با کیبورد)، required روی خودش، اعتبارسنجیِ سرور دست‌نخورده. حالتِ تیک‌خورده فقط با
   :has، صفر JS — الگویِ .fchip/.chip-toggleِ موجودِ سایت. */
.pledge-accept { position: relative; display: flex; align-items: center; gap: var(--space-3); cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: var(--space-3) var(--space-4); font-weight: 600; transition: background .15s, border-color .15s; }
.pledge-accept input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pledge-accept:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.pledge-accept:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pledge-accept-box { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; color: transparent; }
.pledge-accept:has(input:checked) .pledge-accept-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* «مسیرِ تو» — سه گامِ واقعی (توالیِ راستین: ثبت → تکمیل → وریفای). بازطراحیِ بصریِ
   قلمِ ۸: کارتِ افقی با زمینه/حاشیه (طبقِ design_handoff_become_provider)، نه صرفاً
   لیستِ آیکون‌دار — گامِ جاری با زمینه/حاشیهٔ accent برجسته می‌شود. */
.path-steps { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.path-step { display: flex; gap: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: var(--space-3) var(--space-4); }
.path-step.current { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.path-step.current .path-num { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.path-num { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.path-step p { margin: var(--space-1) 0 0; font-size: .85rem; color: var(--muted); }
.path-step-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.path-here { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); padding: 2px var(--space-2); border-radius: 999px; margin-inline-start: auto; }

/* خطِ یادآوریِ پایانیِ بلوکِ «چطور کار می‌کند» (قلمِ ۶ — requests/start.blade.php). */
.path-section-note { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); color: var(--muted); font-size: .85rem; line-height: 1.7; }
.path-section-note svg { flex-shrink: 0; margin-top: 2px; }

/* «سرویس‌دهنده شو» — فرمِ ثبتِ پایه + پیش‌نمایشِ زندهٔ کارت (قلمِ ۸، دوستونه، طبقِ طرح).
   ستونِ پیش‌نمایش چسبان و در موبایل بالایِ فرم (order، نه تغییرِ DOM — ترتیبِ خواندنِ
   بدونِ‌CSS همچنان فرم اول است). */
.provider-onboard-grid { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-5); align-items: start; margin-top: var(--space-4); }
.ob-preview-pane { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.ob-preview-head { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; color: var(--muted); font-weight: 600; }
.ob-preview-pct { color: var(--accent); font-weight: 700; }
.ob-progress-track { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ob-progress-fill { height: 100%; background: var(--accent); transition: width .25s; }
.ob-preview-note { text-align: center; font-size: .78rem; }
.ob-submit { display: flex; flex-direction: column; gap: var(--space-2); }
.ob-submit-hint { margin: 0; text-align: center; font-size: .8rem; color: var(--muted); }
.ob-submit-hint.is-ready { color: var(--ok); }
/* حالت‌هایِ بصریِ دکمهٔ ثبت طبقِ design_handoff_become_provider (یافتهٔ بازبینیِ
   گذشته‌نگرِ قلمِ ۸) — پیش‌فرضِ .btn همان حالتِ «آماده»ست، این دو فقط override. */
/* حالت‌هایِ بصریِ دکمهٔ ثبتِ گِیت‌شده با اعتبارسنجیِ زنده — عمومی شد (قلمِ ۸ فقط
   #ob-submit-btn داشت، قلمِ ۱۱ فرمِ تیکت هم همین الگو را لازم داشت). */
.btn.not-ready { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.btn.is-submitted { background: var(--ok); color: var(--on-ok); }
@media (max-width: 860px) {
    .provider-onboard-grid { grid-template-columns: 1fr; }
    .ob-preview-pane { position: static; order: -1; }
}

/* آیکونِ بزرگِ solid (x-icon-big، فازِ آیکون‌ها) — SVGِ منبع fill ندارد، پس
   currentColor از رنگِ خودِ .icon-big می‌آید. پیش‌فرض نارنجیِ برند (accent)،
   در هر دو تم از توکن — نه hexِ جدید. */
.icon-big { display: inline-flex; flex: none; color: var(--accent); }
.icon-big svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.icon-big-sm { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon-big-md { width: var(--icon-size-md); height: var(--icon-size-md); }
.icon-big-lg { width: var(--icon-size-lg); height: var(--icon-size-lg); }

/* استثنا: پس‌زمینه‌ی این دو جا خودش accent-soft (وشِ نارنجیِ کم‌رنگ) +
   حاشیه‌ی accent است — نارنجیِ کامل رویش کم‌کنتراست/گم می‌شود، پس آیکون به
   رنگِ متنِ عادی برمی‌گردد. */
.dash-action-card .icon-big,
.rfq-upload-card:has(input:checked) .icon-big { color: var(--text); }

/* جفتِ آیکون+عنوان (هدرِ بخش‌ها) — یک الگو، همه‌جا */
.icon-heading { display: flex; align-items: center; gap: var(--space-3); }
.icon-heading h1, .icon-heading h2 { margin: 0; }

/* حالت‌های خالی با آیکونِ بزرگ */
.empty-state .icon-big { margin-bottom: var(--space-3); }

/* آیکونِ ریزِ خطی (x-icon، وندورِ Lucide، لایهٔ ۲) — stroke نه fill.
   پیش‌فرض tone=current یعنی رنگِ متنِ والد را می‌گیرد (بدونِ رنگِ خاص). */
.icon { display: inline-flex; flex: none; vertical-align: -3px; }
.icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; display: block; }
.icon-sm { width: var(--icon-ui-size-sm); height: var(--icon-ui-size-sm); }
.icon-md { width: var(--icon-ui-size-md); height: var(--icon-ui-size-md); }
.icon-lg { width: var(--icon-ui-size-lg); height: var(--icon-ui-size-lg); }
.icon-tone-ok { color: var(--ok); }
.icon-tone-danger { color: var(--danger); }
.icon-tone-warning { color: var(--accent); }
.icon-tone-muted { color: var(--muted); }
.icon-tone-gold { color: var(--gold); }
.icon-tone-current { color: currentColor; }
/* آیکون‌هایِ جهت‌دار بدونِ نسخهٔ آینه‌ایِ جداگانه در ستِ وندورشده (external-link) —
   یونیکدِ قبلی (→‹›) با Bidi_Mirrored خودکار در RTL آینه می‌شد، SVG این‌طور نیست. */
.icon-mirror { transform: scaleX(-1); }
.provider-bio { margin: var(--space-4) 0; max-width: 62ch; }
.provenance-note.default { background: var(--surface-2); color: var(--muted); border-color: var(--border); }

/* فهرستِ متراکمِ توانمندی — مشترکِ پروفایلِ عمومی/داشبورد */
.capability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--grid-card-min), 1fr)); gap: var(--space-5); }
.cg-title { display: flex; align-items: center; gap: var(--space-2); font-size: .95rem; margin: 0 0 var(--space-2); }
.cg-count { color: var(--muted); font-weight: 400; font-size: .82rem; }
.capability-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.capability-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.capability-row:last-child { border-bottom: none; }
.cr-qty { color: var(--muted); margin-inline-start: var(--space-1); }
.cr-status { font-size: .72rem; font-weight: 600; padding: 2px var(--space-2); border-radius: 999px; white-space: nowrap; }
.cr-status.verified { background: var(--ok-soft); color: var(--ok); }
.cr-status.declared { background: var(--surface-2); color: var(--muted); }

/* نمونه‌کارها — گالریِ placeholder، و گالریِ واقعی بعدِ آپلود (کاشی‌ها ۲۰٪ بزرگ‌تر: ۱۲۰ → ۱۴۴) */
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.portfolio-tile { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); border: 1px dashed var(--border); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); color: var(--muted); font-size: 1.4rem; text-decoration: none; }
.portfolio-tile.has-image { aspect-ratio: auto; border-style: solid; padding: 0; overflow: hidden; align-items: stretch; cursor: zoom-in; }
.portfolio-tile.has-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.portfolio-caption { padding: var(--space-2); font-size: .8rem; color: var(--muted); }

/* مدیریتِ گالری در داشبورد — آپلود/حذف/ترتیبِ ساده (بدونِ JS) */
.portfolio-manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.portfolio-manage-tile { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.portfolio-manage-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pmt-title { padding: var(--space-2) var(--space-2) 0; font-size: .82rem; color: var(--muted); }
.pmt-actions { display: flex; gap: var(--space-1); padding: var(--space-2); flex-wrap: wrap; }
.pmt-actions form { margin: 0; }
.pmt-actions .btn { height: 32px; padding: 4px 10px; font-size: .78rem; }

/* داشبورد — خلاصهٔ بالای صفحه */
.dash-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.dash-facts { margin-top: var(--space-4); }
.listed-status.is-listed { color: var(--ok); }

/* بلوکِ «قدمِ بعدیِ تو» — همیشه یک اقدام، برجسته‌تر از بقیهٔ کارت‌های داشبورد */
.next-step-block { border-color: var(--accent); background: var(--accent-soft); }
.next-step-block h2 { margin-top: 0; }

/* فهرستِ per-device وریفای — بازنگریِ نقطهٔ ۲ (هر دستگاه وضعیتِ مستقل) */
.device-verify-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.dv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.dv-row:last-child { border-bottom: none; }
.dv-row > div { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dv-status { font-size: .8rem; font-weight: 600; padding: 2px var(--space-2); border-radius: 999px; }
.dv-status.verified { background: var(--ok-soft); color: var(--ok); }
.dv-status.pending { background: var(--accent-soft); color: var(--accent); }
.dv-status.rejected { background: var(--danger-soft); color: var(--danger); }
.dv-status.todo { background: var(--surface-2); color: var(--muted); }
.dv-status.waiting { background: var(--gold-soft); color: var(--gold); }
.dv-status.info { background: var(--info-soft); color: var(--info); }

/* بلوکِ موقعیت + CTAِ درخواستِ قیمت (غیرفعال تا P2) */
.location-block { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: .9rem; margin-top: var(--space-3); }

/* FAQِ کوتاه — details/summaryِ بومی، بدونِ JS */
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--surface-2); }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { margin: var(--space-2) 0 0; color: var(--muted); font-size: .9rem; }

/* نوارِ راهنمای «چطور انتخاب کنم؟» بالای دایرکتوری */
.howto-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); margin-bottom: var(--space-4); }
.howto-bar p { margin: var(--space-1) 0 0; color: var(--muted); font-size: .88rem; }
.howto-bar-icon { display: flex; gap: var(--space-3); align-items: flex-start; }
.howto-bar-icon .icon { flex-shrink: 0; margin-top: 2px; }

/* کارتِ اطلاعاتِ تماسِ داشبورد — خصوصی */
.contact-private-note { color: var(--muted); font-size: .85rem; margin: 0 0 var(--space-3); }
.contact-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.contact-fields li { display: flex; gap: var(--space-3); font-size: .9rem; border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); }
.contact-fields li:last-child { border-bottom: none; }
.contact-fields .ct-k { color: var(--muted); min-width: 90px; }

/* صفحهٔ وریفایِ دستگاه — کدِ یکتای جلسه */
.verification-code { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; margin-bottom: var(--space-4); }
.vc-label { font-size: .8rem; color: var(--muted); }
.vc-code { font-size: 1.6rem; letter-spacing: .15em; font-family: monospace; direction: ltr; }
.verification-steps { margin: 0 0 var(--space-4); padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }

/* ===== ناحیهٔ کاربریِ «قفسهٔ من» — P1.5 ===== */

/* نوارِ اصلیِ ناحیهٔ کاربری («یک خانه، دو بال» — بازطراحیِ WHMCS-گونه).
   داخلِ main-wrap، خواهرِ main.container (نه بیرونِ shell) — پس‌زمینه/خط‌زیر
   تمام‌عرضِ همان ستون است؛ .mp-row همان .container را می‌گیرد (max-width/
   padding/وسط‌چینِ یکسان با بقیهٔ صفحه، بدونِ کدِ تکراری). دو ردیف: پایه
   (همیشه) + دنیایِ کاری (فقط سرویس‌دهنده، فقط داخلِ صفحاتِ آن دنیا). زیرِ
   ۸۲۰px هر دو ردیف کلاً پنهان می‌شوند و همان آیتم‌ها به‌شکلِ کارت‌گرید
   نشان داده می‌شوند — تصمیمِ صریح (اسکرولِ افقیِ نسخهٔ قبل تجربهٔ ضعیفی بود)،
   با CSS خالص (mp-row/mp-cards هر دو همیشه در DOM‌اند، فقط display عوض
   می‌شود؛ بدونِ جاوااسکریپت). */
.menu-primary { background: var(--surface); border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.mp-row { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-2); }
.mp-row-provider { border-top: 1px dashed var(--border); }
.mp-scroll { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mp-ticket-cta {
    flex-shrink: 0; display: inline-flex; align-items: center; padding: 9px 14px; border-radius: 10px;
    font-size: .9rem; font-weight: 700; color: var(--ok); background: var(--ok-soft); border: 1px solid var(--ok);
    white-space: nowrap;
}
.mp-ticket-cta:hover, .mp-ticket-cta.active { background: var(--ok); color: var(--on-ok); }
.mp-cards { display: none; }
@media (max-width: 820px) {
    .mp-row { display: none; }
    .mp-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); padding-block: var(--space-3); }
    .mp-cards-provider { border-top: 1px dashed var(--border); margin-top: var(--space-1); }
    .mp-card {
        display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-3);
        border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: .85rem; font-weight: 600;
    }
    .mp-card.active { background: var(--accent-soft); color: var(--accent); }
    .mp-card-cta { grid-column: 1 / -1; background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok); }
}

/* کارت‌های شمارنده — همان .stat-card (لینک‌دار این‌بار). بازطراحیِ بصریِ قلمِ ۹
   (design_handoff_user_dashboard): برچسبِ کم‌رنگ + آیکون/عددِ رنگیِ معنادار
   به‌ازایِ هر شمارنده (accent/ok/info/gold، دقیقاً ترتیبِ خودِ طرح). */
.account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.account-cards .stat-card .head { font-weight: 500; font-size: .8rem; color: var(--muted); margin-bottom: var(--space-2); }
.account-cards .stat-card .value { font-size: 1.8rem; font-weight: 700; margin-bottom: 0; }
.stat-card-link { display: block; transition: border-color .15s; }
.stat-card-link:hover { border-color: var(--accent); }
.account-cards .stat-card:nth-child(1) .icon-big, .account-cards .stat-card:nth-child(1) .value { color: var(--accent); }
.account-cards .stat-card:nth-child(2) .icon-big, .account-cards .stat-card:nth-child(2) .value { color: var(--ok); }
.account-cards .stat-card:nth-child(3) .icon, .account-cards .stat-card:nth-child(3) .value { color: var(--info); }
.account-cards .stat-card:nth-child(4) .icon, .account-cards .stat-card:nth-child(4) .value { color: var(--gold); }
.verification-badge { font-size: .95rem; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); display: inline-block; }
.verification-badge.verification-done { color: var(--ok); background: var(--ok-soft); }
.verification-badge.verification-pending { color: var(--gold); background: var(--gold-soft); }
.verification-badge.verification-todo { color: var(--muted); background: var(--surface-2); }

/* «داشبوردِ من» — گریدِ دوستونهٔ WHMCS-گونه (۳۲۰px هویت + بدنهٔ منعطف).
   زیرِ ۸۲۰px (همان breakpointِ .p-two/.spec-grid) تک‌ستونه؛ هویت همیشه اول. */
.dash-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
@media (max-width: 820px) { .dash-grid { grid-template-columns: 1fr; } }
.identity-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }
.ic-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.ic-avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; }
.ic-name { font-weight: 700; font-size: 1.15rem; margin-bottom: 2px; }
.ic-line { color: var(--muted); font-size: .88rem; margin-bottom: 2px; }
.ic-line-tight { margin-bottom: 0; }
.ic-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.ic-actions form { display: inline; }
.dash-shortcuts { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.dash-body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.dash-widget { margin: 0; }
/* CTAِ «درخواستِ تازه» و بانرِ «سرویس‌دهنده شو» — چیدمانِ افقی (متن+دکمه کنارِ هم)
   طبقِ design_handoff_user_dashboard، به‌جایِ نسخهٔ قبلیِ سانتر/عمودی. */
.dash-action-card { margin: 0; background: var(--accent-soft); border-color: var(--accent); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.dash-action-card h2 { margin: 0 0 4px; }
.dash-action-card .dac-text p { margin: 0; }
.dash-action-card .btn { flex: none; }
.dash-provider-card, .dash-become-provider-card { margin: 0; }
.dash-become-provider-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.dbc-info { display: flex; align-items: center; gap: var(--space-3); }
.dbc-info h2 { margin: 0 0 4px; }
.dbc-info p { margin: 0; }
.dbc-icon { flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.dbc-cta { flex: none; border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.dash-facts-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* آیکون‌تایلِ ردیفِ درخواستِ فعال + خطِ فایل·تاریخ (LTR) زیرِ عنوان + شمارندهٔ
   «N پیشنهاد» انتهایِ ردیف (قلمِ ۹). */
.tk-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.tk-file-date { font-size: .78rem; }
.tk-offers { font-size: .78rem; white-space: nowrap; }

/* دکمهٔ برجستهٔ «+ به قفسهٔ من» روی صفحهٔ تکیِ فیلامنت + خطِ روایتِ زیرش */
.spool-cta-block { margin-top: var(--space-4); }
.spool-intent-form { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.spool-cta { display: inline-block; font-weight: 600; }
.spool-cta-narrative { margin-top: var(--space-2); max-width: 46em; }
/* همان دو دکمه، فشرده‌تر داخلِ جدولِ رنگ‌ها */
.spool-intent-form-sm { display: flex; gap: 4px; flex-wrap: wrap; }
.spool-cta-sm { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 8px; font-size: .76rem; font-weight: 600; }

.spool-edit-note > summary { cursor: pointer; list-style: none; }
.spool-edit-note > summary::-webkit-details-marker { display: none; }
.spool-edit-note[open] { flex-basis: 100%; margin-top: var(--space-2); }
.spool-edit-note .stack-form { margin-top: var(--space-2); }

/* نوارِ ابزارِ بالایِ جدولِ قفسه (A2) — خروجیِ اکسل + اشتراک‌گذاری */
.shelf-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-4); }
.shelf-share-form { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.shelf-share-label { color: var(--muted); font-size: .82rem; }
.shelf-share-link { font-family: ui-monospace, monospace; direction: ltr; text-align: left; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); min-width: 220px; max-width: 100%; }

/* ستونِ «عملیات» ردیفِ جدولِ قفسه (mode=shelf) */
.shelf-row-actions { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.shelf-note-preview { margin: 0; font-size: .82rem; max-width: 22em; }

.feedback-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.feedback-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--surface); }
.fbr-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.fbr-title { font-weight: 600; }
.fbr-verdict { margin: var(--space-1) 0 0; color: var(--muted); font-size: .88rem; }
.fbr-note { margin: var(--space-1) 0 0; font-size: .9rem; }

.ticket-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.ticket-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.ticket-row:last-child { border-bottom: none; }
.tk-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.tk-subject { font-weight: 600; }
.tk-meta { color: var(--muted); font-size: .82rem; }

/* آیکون‌تایلِ ردیفِ تیکت (قلمِ ۱۱ — design_handoff_support_tickets)، رنگش طبقِ
   وضعیتِ همان تیکت — کلاسِ جداگانه از .tk-icon (که در ویجتِ داشبورد، قلمِ ۹،
   همیشه accent است، این‌جا چهار رنگِ متفاوت لازم بود). */
.tkt-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.ticket-row.status-pending .tkt-icon { background: var(--accent-soft); color: var(--accent); }
.ticket-row.status-info .tkt-icon { background: var(--info-soft); color: var(--info); }
.ticket-row.status-waiting .tkt-icon { background: var(--gold-soft); color: var(--gold); }

/* ثریدِ تیکت — RTL: همهٔ حباب‌ها تمام‌عرض و هم‌راستا؛ تمایزِ تو/پشتیبانی فقط
   با رنگِ پس‌زمینه/حاشیه + برچسب، نه با چپ/راست‌چین (کشفِ تستِ چشمی: چپ‌چین
   کردنِ پیام در RTL غلط است). */
.ticket-thread { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tm-row { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--surface); }
.tm-row.team { background: var(--accent-soft); border-color: var(--accent); }
.tm-from { font-weight: 600; font-size: .82rem; color: var(--muted); }
.tm-body { margin: var(--space-1) 0; }
.tm-date { font-size: .76rem; color: var(--muted); }
.tm-attachment { display: inline-block; font-size: .82rem; margin-bottom: var(--space-1); }
.ticket-reply { border-top: 1px solid var(--border); padding-top: var(--space-3); }

/* زنگولهٔ اطلاع‌رسانی (P-Notify، نقطهٔ ۱) — لینکِ سادهٔ هدر، هم‌ردیفِ account-links */
.notif-bell { display: inline-flex; align-items: center; font-size: 1.3rem; }

/* فهرستِ اعلان‌ها — بازطراحیِ بصریِ قلمِ ۱۰ (design_handoff_notifications):
   کارت با نوارِ رنگیِ inline-start (فقط گروهِ درخواستِ پرینت رنگ دارد — سایرِ
   گروه‌ها طبقِ همان تصمیمِ ازقبل‌ثبت‌شده در config بی‌رنگ می‌مانند)، پس‌زمینهٔ
   تینت‌دار برایِ نخوانده، کم‌رنگ‌شدنِ کلی برایِ خوانده. مکانیزم/دسته‌بندی دست‌نخورد،
   فقط سه‌رنگِ dv-status (pending/rejected/verified) به سطحِ کارت ترجمه شد. */
.notif-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.notif-row {
    display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    background: var(--surface-2); border: 1px solid var(--border); border-inline-start: 3px solid var(--border);
}
.notif-row:not(.unread) { opacity: .6; }
.notif-row.status-pending { border-inline-start-color: var(--accent); }
.notif-row.status-pending.unread { background: var(--accent-soft); }
.notif-row.status-rejected { border-inline-start-color: var(--danger); }
.notif-row.status-rejected.unread { background: var(--danger-soft); }
.notif-row.status-verified { border-inline-start-color: var(--ok); }
.notif-row.status-verified.unread { background: var(--ok-soft); }
.notif-icon { flex: none; color: var(--muted); }
.notif-row.status-pending .notif-icon { color: var(--accent); }
.notif-row.status-rejected .notif-icon { color: var(--danger); }
.notif-row.status-verified .notif-icon { color: var(--ok); }
.notif-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.notif-tags { display: flex; align-items: center; gap: var(--space-2); }
.notif-status-label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.notif-row.status-pending .notif-status-label { color: var(--accent); }
.notif-row.status-rejected .notif-status-label { color: var(--danger); }
.notif-row.status-verified .notif-status-label { color: var(--ok); }
.notif-new-badge { font-size: .7rem; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px var(--space-2); border-radius: 999px; }
.notif-title { font-weight: 600; }
.notif-row.unread .notif-title { font-weight: 700; }
.notif-body { margin: 0; }
.notif-meta { color: var(--muted); font-size: .78rem; }
.notif-read-note { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; white-space: nowrap; }

/* تب‌بندیِ صفحه (صیقل A1 — بازنگری) — نوارِ افقی، بدونِ JS (لینکِ سرور-ساید).
   شمارنده از همان کلاسِ nav-badگِ زنگولهٔ هدر بازاستفاده می‌شود (صفر رنگِ جدید).
   تبِ فعال طبقِ طرح، بجِ شمارنده‌اش را invert می‌کند (پرِ accent). */
.notif-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); }
.notif-tab { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--muted); font-size: .9rem; font-weight: 600; }
.notif-tab:hover { background: var(--surface-2); color: var(--text); }
.notif-tab.active { background: var(--accent-soft); color: var(--accent); }
.notif-tab .nav-badge { margin-inline-start: var(--space-1); }
.notif-tab.active .nav-badge { background: var(--accent); color: var(--on-accent); }

/* جدولِ ترجیحاتِ اطلاع‌رسانی — HTMLِ واقعی (قاعدهٔ CLAUDE §۵، بدونِ رندرِ JS) */
.pref-table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); }
.pref-table th, .pref-table td { text-align: start; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.pref-table th { color: var(--muted); font-size: .82rem; font-weight: 600; }

/* ============================================================
   P2 — «جنگِ پرینت»/RFQ، نقطهٔ ۱ (پیش‌نمایش). فقط توکن‌ها (CLAUDE §۱).
   ============================================================ */

/* نشانگرِ مرحلهٔ فرمِ چندمرحله‌ای — بازطراحیِ بصری (فازِ A قلمِ ۶): نوارِ پیشرفتِ
   بخش‌بخش‌شده به‌جایِ متنِ ساده، هم‌زبانِ کارت‌هایِ بقیهٔ سایت. */
.rfq-stepper { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.rfq-stepper-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.rfq-stepper-of { font-size: .82rem; color: var(--muted); font-weight: 600; }
.rfq-stepper-title { font-size: .92rem; font-weight: 800; color: var(--accent); }
.rfq-stepper-track { display: flex; gap: var(--space-2); }
.rfq-stepper-seg { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); }
.rfq-stepper-seg.done { background: var(--accent); }

/* چهارکارتِ آپلود (مرحلهٔ ۱، نقطهٔ ۲) — هر کارت رادیو+تیتر+یک‌خطِ مزیت. رادیو
   گوشهٔ کارت (بازطراحیِ بصری قلمِ ۶) به‌جایِ کنارِ آیکون. */
.rfq-upload-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.rfq-upload-card { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-height: 148px; }
.rfq-upload-card input { position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.rfq-upload-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* کارتِ برآوردِ مبنا — کمی متمایز از .section سادهٔ دیگر (حاشیهٔ accent) */
.base-estimate-card { border-inline-start: 3px solid var(--accent); }
.base-estimate-card .be-range { font-size: 1.3rem; font-weight: 700; margin: var(--space-2) 0; }

/* بلوکِ «دادهٔ فنی» (war/show، دیدِ سرویس‌دهنده) — اعدادِ بولد/برجسته برایِ
   قیمت‌دهی (کشفِ تستِ چشمی: قبلاً وزن/حجم گم/ریز بودند). */
.rfq-tech-data { border-inline-start: 3px solid var(--ok); }
.tech-data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.tech-data-item .tdi-label { display: block; color: var(--muted); font-size: .82rem; margin-bottom: var(--space-1); }
.tech-data-item .tdi-value { display: block; font-size: 1.3rem; font-weight: 700; color: var(--text); }

/* شمارندهٔ پایانِ پنجره — رنگ/وزنِ متمایز تا گم نشود در متنِ خنثی (کشفِ تستِ چشمی). */
.war-countdown { color: var(--accent); font-weight: 700; }

/* دیدِ مشتری در war/show: مشخصات+شمارندهٔ پنجره کنارِ هم (بازطراحیِ بصری قلمِ ۶). */
.rfq-request-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-4); align-items: start; }
@media (max-width: 860px) { .rfq-request-grid { grid-template-columns: 1fr; } }
.rfq-countdown-card { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.rcc-label { color: var(--muted); font-size: .82rem; margin-bottom: var(--space-1); }
.rcc-value { font-size: 1.3rem; }
.rcc-row { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* CTAِ اصلیِ war/show (مشتری، awaiting_selection) — بالایِ صفحه، پررنگ (کشفِ
   تستِ چشمی: قبلاً همان دکمه ته صفحه و گم بود). */
.war-cta-primary { background: var(--accent-soft); border: 1px solid var(--accent); text-align: center; }
.war-cta-primary .btn { font-size: 1.05rem; padding: var(--space-3) var(--space-6); }

/* بنرِ موفقیتِ بلافاصله‌بعدِ ثبتِ درخواست (war/show، دیدِ مشتری). */
.war-success-banner { display: flex; align-items: center; gap: var(--space-3); background: var(--ok-soft); border: 1px solid var(--ok); }

/* دکمه‌هایِ پایانیِ صفحهٔ war/show، دیدِ مشتری (طرحِ اسکرینِ ۷). */
.war-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); text-align: center; justify-content: center; }
.war-success-banner span { font-weight: 600; }

/* گالریِ تصاویرِ پیش‌نمایشِ کلاینت‌ساخته (war/show، قلمِ ۳.۲) — جایگزینِ
   نمایشگرِ سه‌بعدیِ زنده؛ عکسِ ثابت، بدونِ تعامل. */
.preview-image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.preview-image-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }

/* کارت‌هایِ هویتِ پیشنهاددهنده — فقط نام/بج، بدونِ مبلغ (دیدِ مالکِ درخواست). */
.bidders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.bidder-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); text-decoration: none; color: var(--text); }
.bidder-card:hover { border-color: var(--accent); }

/* نمایشگرِ سه‌بعدیِ STL — کانواسِ ثابت‌ارتفاع، پس‌زمینهٔ متمایز از سطح.
   باگِ کشف‌شدهٔ تستِ چشمی: «display:block»ِ بدونِ قید روی خودِ خاصیتِ hidden
   اولویت داشت (استایلِ نویسنده همیشه بر استایلِ پیش‌فرضِ مرورگر می‌برد) — پس
   کانواس با انتخابِ فایلِ ناپشتیبانی‌شده (3MF/OBJ/PLY) به‌جایِ محو شدن، خالی/سفید
   می‌ماند. رفع: display فقط وقتی [hidden] نباشد. */
.stl-viewer-box .stl-canvas[hidden] { display: none; }
.stl-viewer-box .stl-canvas:not([hidden]) { display: block; }
/* ارتفاعِ ۵۲۰px (A4: صفحهٔ نمایشگر عریض‌تر شد، ارتفاع هم متناسب زیاد شد؛
   پیش‌ازاین ۴۶۸px بود). resize()ِ JS با ResizeObserver عرضِ واقعیِ ستون را
   می‌خواند، این فقط ارتفاعِ پایه/CSS است. */
.stl-viewer-box .stl-canvas { width: 100%; height: 520px; margin-top: var(--space-3); border-radius: var(--radius-sm); background: var(--img-bg); touch-action: none; }
.stl-viewer-result { margin-top: var(--space-3); }

/* گریدِ دوستونیِ مرحلهٔ پیش‌نمایش وقتی نمایشگر+فرمِ G-code هم‌زمان‌اند (A4،
   file_type=both) — نمایشگر و فرم واقعاً هم‌زمان فضا می‌گیرند، نه زیرِ هم؛
   زیرِ ۹۰۰px (عرضِ .form-wide) تک‌ستونه می‌شود، بدونِ JS. */
.rfq-preview-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-4); align-items: start; }
@media (max-width: 900px) {
    .rfq-preview-split { grid-template-columns: 1fr; }
}

/* فهرستِ جنگ‌ها/درخواست‌ها — فاصلهٔ استانداردِ .section خودش کافی است، فقط رَپِر */
.war-list { display: flex; flex-direction: column; }
.war-row .section-head { margin-bottom: var(--space-2); }

/* شبکهٔ مقایسهٔ پیشنهادهای مهروموم‌بازشده */
.quote-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.quote-card .be-range { font-size: 1.2rem; font-weight: 700; }

/* اعتبارِ سرویس‌دهنده رویِ کارتِ پیشنهاد (فازِ ۲، قلمِ ۳ و ۴) — سه چیپِ جدا،
   عمداً بدونِ هیچ عددِ ترکیبی. نمونه‌کار زیرشان، چون تصویر است نه عدد. */
.provider-credit { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.pc-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pc-portfolio { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--muted); font-size: .82rem; }
.pc-portfolio img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); background: var(--img-bg); border: 1px solid var(--border); }
.pc-portfolio:hover { color: var(--accent); }

/* پرسشِ دوره‌ای (فازِ ۲، قلمِ ۶) — سه گزینه در یک ردیف، بی‌سلسله‌مراتب:
   هیچ‌کدام «دکمهٔ اصلی» نیست، چون هیچ جوابی از نظرِ ما بهتر از دیگری نیست. */
.checkin-form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.pc-portfolio span { display: inline-flex; align-items: center; gap: var(--space-1); }

/* تایم‌لاینِ وضعیتِ سفارش */
.order-timeline { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ot-step { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; position: relative; }
.ot-step::before { content: ''; position: absolute; inset-inline-start: 5px; top: -2px; bottom: -2px; width: 2px; background: var(--border); z-index: 0; }
.ot-step:first-child::before { top: 50%; }
.ot-step:last-child::before { bottom: 50%; }
.ot-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--border); z-index: 1; }
.ot-step.done .ot-dot { background: var(--ok); border-color: var(--ok); }
.ot-step.done .ot-label { font-weight: 600; }
.ot-step.todo .ot-label { color: var(--muted); }
/* مرحلهٔ جاریِ stepper (قلمِ ۴.۲ — تستِ چشمی): نارنجی، نه سبز — «اینجایی، هنوز
   تمام نشده». نقطهٔ سبز کنارِ بنرِ هشدارِ نارنجی تناقضِ رنگ/معنا بود. */
.ot-step.current .ot-dot { background: var(--accent-soft); border-color: var(--accent); }
.ot-step.current .ot-label { font-weight: 600; color: var(--accent); }

/* ---------- صفحهٔ سفارش: چیدمانِ دوستونه (طرحِ handoff_order_v3) ----------
   ستونِ اصلی = اسپاینِ روند و اقدام‌ها · ستونِ کناریِ **چسبان** = کارت‌هایِ مرجع
   (تحویل/تماس) که کاربر حین کار نگاهشان می‌کند و رویشان اقدام نمی‌کند.

   ⚠ **دسکتاپ‌اول، مثلِ بقیهٔ این فایل** (`.browse-cols`, `.spec-grid`): زیرِ نقطهٔ
   شکست به یک ستون برمی‌گردد و همان ترتیبِ طبیعیِ سند می‌ماند — طرح صریح می‌گوید
   موبایل «همان بخش‌ها زیرِ هم، بدونِ هیچ اسکرولِ عرضی».
   ⚠ و فقط توکن؛ فازِ ۱۱ سیستمِ بصری را عقب می‌اندازد، نه چیدمان را. */
.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.order-main { min-width: 0; }
.order-side { position: sticky; top: calc(var(--header-h) + var(--space-4)); align-self: start; }
.order-side .section { margin-block-end: var(--space-4); }

@media (max-width: 900px) {
    /* تک‌ستونه — و `position: sticky` هم برداشته می‌شود، وگرنه کارت وسطِ اسکرولِ
       موبایل می‌چسبد و جلویِ محتوا را می‌گیرد. */
    .order-grid { grid-template-columns: 1fr; gap: 0; }
    .order-side { position: static; }
}

/* 🔴 `fdbPulse` (طرحِ handoff_order_v3، بخشِ ۳) — گرهٔ مرحلهٔ **جاری** نفس می‌کشد.
   کارکردش تزئین نیست: در تایم‌لاینی که همهٔ گره‌ها هم‌شکل‌اند، چشم باید بی‌خواندن
   بفهمد «الان این‌جاییم». رنگ و فاصله فقط از توکن‌ها.
   ⚠ و فازِ ۱۱ سیستمِ بصری را عقب می‌اندازد، نه چیدمان/رفتار را — پس این‌جا رنگِ نو
   ساخته نشد، فقط از `--accent`ِ موجود سایه می‌گیرد. */
@keyframes fdbPulse {
    0%   { box-shadow: 0 0 0 0 var(--accent-soft); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.ot-step.current .ot-dot { animation: fdbPulse 2s ease-out infinite; }

/* ⚠ احترام به تنظیمِ سیستمِ کاربر — انیمیشنِ تکرارشونده برایِ بخشی از کاربران
   آزاردهنده یا محرک است. حذفِ حرکت، نه حذفِ نشانه: گره همچنان رنگِ اکسنت دارد. */
@media (prefers-reduced-motion: reduce) {
    .ot-step.current .ot-dot { animation: none; }
}
.ot-note { display: block; color: var(--muted); font-size: .82rem; font-weight: 400; margin-top: 2px; }

/* 🔴 کارتِ اقدامِ **درجا** (طرحِ handoff_order_v3) — «اقدامِ لازم دقیقاً همان‌جا
   داخلِ مرحلهٔ جاری»، نه کارتِ جدا در پایینِ صفحه.
   ⚠ `.ot-step` یک flexِ افقی است، پس مرحله‌ای که کارت دارد باید عمودی بچیند —
   وگرنه فرم کنارِ برچسب فشرده می‌شود و در موبایل می‌شکند. */
.ot-step:has(.ot-action) { flex-wrap: wrap; align-items: flex-start; }
.ot-step:has(.ot-action) .ot-dot { margin-top: 6px; }
.ot-action {
    flex-basis: 100%;
    margin: var(--space-2) 0 var(--space-1);
    margin-inline-start: calc(12px + var(--space-3));   /* هم‌ترازِ برچسب، نه گره */
    padding: var(--space-3);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
}
/* 🔴 `--fg` بود و **هیچ‌جا تعریف نشده** (کشفِ `CssTokensAllExistTest`، ۰۸‑۲۲).
 * ⇒ اعلانِ نامعتبر، بی‌صدا رد می‌شد و متن رنگِ ارثی می‌گرفت. توکنِ درست `--text`
 * است — همان چیزی که بقیهٔ متنِ بدنه می‌خواند. */
.ot-action-lead { color: var(--text); margin: 0 0 var(--space-2); font-size: .9rem; }
/* حالتِ سومِ صریح — لغو نباید مثلِ مرحلهٔ موفق (سبز) دیده شود (کشفِ تستِ چشمی، قلمِ ۳) */
.ot-step.cancelled .ot-dot { background: var(--danger); border-color: var(--danger); }
.ot-step.cancelled .ot-label { font-weight: 600; color: var(--danger); }
.ot-label { flex: 1; }
.ot-at { color: var(--muted); font-size: .82rem; }

/* مدرکِ آمادگیِ سفارش — نمایشِ درجا (نقطهٔ ۳ قلمِ ۳)، نه لینکِ دانلود */
.evidence-preview img, .evidence-preview video { max-width: 100%; max-height: 360px; border-radius: var(--radius-sm); margin-top: var(--space-2); display: block; }

/* نخِ پیامِ درون‌سفارشی (نقطهٔ ۳، قلمِ ۳.۵) */
.order-message-list { list-style: none; margin: var(--space-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.order-message { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.order-message.mine { border-inline-start: 3px solid var(--accent); }
.order-message.hidden .om-body { color: var(--muted); font-style: italic; }
.om-meta { display: flex; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.om-sender { font-weight: 600; font-size: .85rem; }
.om-at { color: var(--muted); font-size: .8rem; }
.om-body { margin: 0; white-space: pre-line; }

/* صفحهٔ «درباره» — بازطراحیِ بصریِ قلمِ ۱۲ (design_handoff_contact_about). */
.about-kicker { display: inline-block; color: var(--accent); font-size: .82rem; font-weight: 700; margin-bottom: var(--space-2); }
.about-offer-card { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; }
.about-offer-card h3 { margin: 0; }
.about-offer-card p { margin: 0; }
/* کارتِ سانتر با CTA — بازاستفاده بینِ بخشِ «تماس» صفحهٔ درباره و حالتِ موفقیتِ فرمِ تماس. */
.center-cta-card { text-align: center; }
.center-cta-card .btn { margin-top: var(--space-3); }

/* صفحهٔ «تماس» — پنلِ کانال‌ها (aside)، بازطراحیِ بصریِ قلمِ ۱۲. */
.contact-channel-block { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.contact-channel-block p { margin: 0; }
.contact-channel-block-bordered { padding-top: var(--space-3); border-top: 1px solid var(--border); }

/* ---------- ورود/ثبت‌نام (Auth) — بازطراحیِ فازِ A، آخرین قلم ---------- */
.auth-card { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; margin-top: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 820px) { .auth-card { grid-template-columns: 1fr; } }
.auth-brand { background: linear-gradient(160deg, var(--accent-soft), var(--surface) 75%); padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); border-inline-end: 1px solid var(--border); }
@media (max-width: 820px) { .auth-brand { border-inline-end: none; border-bottom: 1px solid var(--border); padding: var(--space-4); } }
.auth-logo-row { display: flex; align-items: center; gap: var(--space-2); }
.auth-logo { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.auth-logo .icon-big { color: inherit; }
.auth-logo-text { font-weight: 800; }
.auth-hero-title { margin: var(--space-3) 0 var(--space-2); font-size: 1.3rem; line-height: 1.6; }
.auth-hero-sub { margin: 0; color: var(--muted); line-height: 1.9; }
.auth-perks { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
/* مزیت‌ها عنوان+توضیح شدند (بازنویسیِ لحن، ثبت‌نام/ورود) — align-start برایِ چندخطی. */
.auth-perks li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: .9rem; }
.auth-perk-icon { flex: none; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.auth-perk-text { display: flex; flex-direction: column; gap: 2px; }
.auth-perk-title { font-weight: 700; }
.auth-perk-sub { color: var(--muted); font-size: .82rem; line-height: 1.75; }
/* خطِ پذیرشِ قوانین — بالایِ دکمه؛ لینک باید آشکارا کلیک‌پذیر باشد (accent + زیرخط)،
   نه خاکستریِ کم‌رنگ (پذیرشِ حقوقی است، نه تزئین). */
.auth-rules-line { font-size: .85rem; color: var(--text); margin: 0; line-height: 1.85; }
.auth-rules-line a { color: var(--accent); text-decoration: underline; font-weight: 600; }
.auth-form-panel { padding: var(--space-5); }
/* صفحاتِ OTP فقط پنلِ فرم دارند (بی‌بالِ برند) — تک‌ستونیِ وسط‌چین (قلمِ الف بخشِ ۲). */
.auth-card:has(> :only-child) { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.otp-resend { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.otp-timer { white-space: nowrap; }
/* مالی (قلمِ ب) — کیف‌پول + فاکتور */
.fin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.fin-kpi { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); background: var(--surface-2, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); }
.fin-kpi-label { color: var(--muted); font-size: 0.9rem; }
.fin-kpi-value { font-size: 1.3rem; font-weight: 700; }
.invoice-doc { max-width: 640px; margin-inline: auto; }
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); }
.invoice-buyer { margin: var(--space-4) 0; line-height: 2; }
.invoice-table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; }
.invoice-table td { padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--border); }
.invoice-table td:last-child { text-align: end; font-variant-numeric: tabular-nums; }
.invoice-total td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: none; font-size: 1.1rem; }
/* حالتِ پایانیِ سند (لغو/بازپرداخت) — سندِ مرده باید در نگاهِ اول از سندِ زنده جدا باشد. */
.invoice-state-note { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.invoice-state-note.is-dead { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); font-weight: 700; }
@media print { header, .site, .no-print { display: none !important; } }
.auth-tabs { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; margin-bottom: var(--space-4); }
.auth-tab { flex: 1; text-align: center; padding: var(--space-2) 0; border-radius: calc(var(--radius-sm) - 3px); font-weight: 700; font-size: .88rem; color: var(--muted); text-decoration: none; }
.auth-tab.active { background: var(--accent); color: var(--on-accent); }
.auth-switch { text-align: center; margin-top: var(--space-4); }

/* ---------- فضایِ کاریِ سرویس‌دهنده — وریفای/نمونه‌کار/توانمندی ---------- */
/* بجِ راهنمای وضعیت بالایِ لیستِ وریفای (تأییدشده/در انتظار/بدونِ مدرک) */
.status-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.status-legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: .82rem; color: var(--muted); }
.status-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-legend-dot.ok { background: var(--ok); }
.status-legend-dot.pending { background: var(--accent); }
.status-legend-dot.todo { background: var(--muted); }

/* ردیفِ دستگاهِ وریفای — کارتی به‌جایِ سطرِ ساده */
.device-verify-list { gap: var(--space-2); }
.dv-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.dv-icon-tile { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }

/* کارتِ مدرکِ دستگاه (verification-device.blade.php) */
.evidence-card { display: flex; flex-direction: column; gap: var(--space-3); }

/* نمونه‌کارها — هدرِ ظرفیت + گریدِ کارتی */
.portfolio-capacity { display: flex; align-items: baseline; gap: var(--space-1); flex: none; }
.portfolio-capacity .pc-num { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.portfolio-capacity .pc-max { color: var(--muted); font-size: .9rem; }
.portfolio-manage-tile { position: relative; }
.portfolio-manage-tile .dv-status { margin: var(--space-2) var(--space-2) 0; align-self: flex-start; }
.pmt-actions .btn.ghost.danger { margin-inline-start: auto; }
.pmt-icon-up { transform: rotate(180deg); }

/* پرسشنامهٔ توانمندی — ردیفِ دستگاه کارتی، سوییچِ بولک، سکشن‌هایِ آیکون‌دار */
.cap-section-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
.cap-section-head .icon-big { color: var(--accent); }
.cap-device-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: end; }
.cap-device-row .ff { margin: 0; }
.cap-verified-tag { margin-inline-start: var(--space-2); font-weight: 400; }
.cap-remove-verified { margin-top: var(--space-2); border-color: var(--danger); color: var(--danger); }
.cap-remove-verified input { accent-color: var(--danger); }
.switch-field { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); cursor: pointer; }
.switch-field input { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.switch-track { flex: none; width: 42px; height: 24px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); position: relative; transition: background .15s, border-color .15s; }
.switch-track::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: inset-inline-start .15s, background .15s; }
.switch-field:has(input:checked) .switch-track { background: var(--accent); border-color: var(--accent); }
.switch-field:has(input:checked) .switch-track::after { inset-inline-start: calc(100% - 20px); background: var(--on-accent); }
.switch-field:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.stack-form .bulk-cap-field { display: none; margin-top: var(--space-3); }
.bulk-toggle-wrap:has(.switch-field input:checked) .bulk-cap-field { display: flex; }
.cf-privacy-note { display: flex; align-items: center; gap: var(--space-2); color: var(--ok); font-size: .8rem; margin: 0 0 var(--space-3); }
.contact-channel-block .btn { align-self: flex-start; margin-top: var(--space-1); }

/* ---------- جزئیاتِ فیلامنت (catalog/show.blade.php، قلمِ ۱۲.۸) ---------- */
/* ریلِ هویت چسبان (دسکتاپ) — DOMِ ریل قبل از محتوایِ اصلی (h1 زودتر برایِ SEO)،
   با order روی گرید به‌جایِ سمتِ راست/چپِ فیزیکی جابه‌جا می‌شود. */
.fd-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-4); align-items: start; }
.fd-main { order: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.fd-rail { order: 2; position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 820px) {
    .fd-layout { grid-template-columns: 1fr; }
    .fd-main, .fd-rail { order: 0; }
    .fd-rail { position: static; }
}
.fd-identity { gap: var(--space-2); }
/* display:block اجباری چون x-swatch یک <span> است — بدونش width/height بی‌اثر می‌ماند.
   border همیشه دیده می‌شود، حتی وقتی color_hex خالی است و fallbackِ خاکستری با پس‌زمینهٔ کارت یکی می‌شود. */
.fd-swatch { display: block; width: 56px; height: 56px; border-radius: var(--radius-sm); margin: 0 0 var(--space-2); border: 1px solid var(--border); }
.fd-identity h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.3px; }

/* بخشِ رنگ (§۴.۳۰ بندِ ۲) — شبکهٔ خودتنظیم، پس ۱ رنگ و ۵۵ رنگ هر دو درست
   می‌نشینند بی هیچ breakpointِ دستی. کمینه ۶.۵rem تا نامِ دورنگی («Tangerine
   Yellow») در دو خط بماند، نه سه. */
/* گالریِ محصول — جایش موقتی است (حکمِ ۰۸‑۳۱)، پس کامپوننتِ خودش را دارد. */
.fd-gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-3); }
.fd-gallery-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }
.fd-gallery-link { display: block; border-radius: var(--radius-sm); }
.fd-gallery-link:hover img { border-color: var(--accent); }
.fd-gallery-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ═══ پاپ‌آپِ عکس — حکمِ صاحب پروژه ۰۹‑۰۱ ═══
   ⚠ `[hidden]` را بعضی ریست‌ها با `display:flex` می‌شکنند ⇒ صریح بسته می‌شود،
   وگرنه قاب **همیشه باز** می‌ماند و کلِ صفحه را می‌پوشاند. */
.fd-lightbox { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: var(--lightbox-scrim); }
.fd-lightbox[hidden] { display: none; }
.fd-lightbox img { max-width: min(92vw, 60rem); max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-sm); background: var(--img-bg); }
.fd-lightbox-close { position: absolute; top: var(--space-4); inset-inline-end: var(--space-4); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--spec-hairline); border-radius: var(--spec-radius); background: var(--surface); color: var(--text); cursor: pointer; }
.fd-lightbox-close:hover { border-color: var(--accent); color: var(--accent); }
/* پشتِ قاب اسکرول نمی‌شود، وگرنه صفحه زیرِ پاپ‌آپ می‌لغزد. */
body.fd-lightbox-open { overflow: hidden; }

/* اسنادِ فنی (§۴.۳۰ بندِ ۳) — تنها لینکِ بیرونیِ صفحه. */
.fd-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fd-doc-list a { display: inline-flex; align-items: center; gap: var(--space-1); font-size: .8rem; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); background: var(--surface); }
.fd-doc-list a:hover { border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════
   اسلایدرِ رنگ — طرحِ `docs/design/design_handoff_filament_color_slider/`

   سرِ کارت (عنوان + شمارش + دو فلش) · سکویِ عکس با پلاکِ نامِ رنگ ·
   ردیفِ سواچ‌هایِ مربع با حلقهٔ انتخاب.
   ═══════════════════════════════════════════════════════════════════════ */
.fd-colors-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.fd-colors-head h2 { margin: 0; }
.fd-colors-n { font-size: .8125rem; font-weight: 400; color: var(--muted); margin-inline-start: var(--space-2); }

/* دو فلش. RTL: فلشِ چپ «بعدی» است — همان چیزی که طرح صریح گفته. */
.fd-colors-nav { display: flex; gap: var(--space-2); flex: none; }
.fd-colors-nav a {
    width: var(--slider-ctrl); height: var(--slider-ctrl);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--slider-ctrl-border); border-radius: var(--spec-radius);
    color: var(--slider-ctrl-ink); text-decoration: none;
    transition: all var(--slider-ctrl-ms) var(--slider-curve);
}
.fd-colors-nav a:hover { border-color: var(--accent); color: var(--accent); }

/* ── سکویِ عکس ──
   🔴 **زمینهٔ روشن داخلِ کارتِ تیره، و این عمدِ طرح است:** عکسِ محصول
   رویِ زمینهٔ نزدیک‌به‌سفید عکاسی شده؛ `contain` رویِ زمینهٔ تیره یک قابِ
   روشن وسطِ سیاهی می‌ساخت. */
.fd-color-hero { position: relative; margin: 0; height: var(--slider-stage-h); border-radius: var(--spec-radius); overflow: hidden; background: var(--slider-stage); }
.fd-color-hero img, .fd-color-hero-sw { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* 🔑 لایهٔ دوم فقط ظرفِ غلتِ JS است و بی JS **هرگز رندر نمی‌شود** — پس
   نبودِ اسکریپت یعنی نبودِ انیمیشن، نه نبودِ عکس. */
.fd-color-hero img { transition: transform var(--slider-roll-ms) var(--slider-curve), opacity var(--slider-roll-ms) var(--slider-curve); }
.fd-color-hero img.is-out { opacity: 0; }

.fd-color-hero figcaption {
    position: absolute; inset-inline-start: var(--spec-pad-x); bottom: var(--spec-pad-x);
    display: flex; align-items: center; gap: var(--space-3); pointer-events: none;
    background: var(--slider-scrim); border-radius: var(--spec-radius); padding: 7px 12px;
}
.fd-color-hero-name { font-size: .8125rem; font-weight: 600; color: #fff; direction: ltr; }
.fd-color-hero figcaption .fd-color-hex { color: var(--muted); }
.fd-color-hero-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); flex: none; }

/* ── ردیفِ سواچ ──
   ⚠ **طرح شش سلولِ `flex:1` گفته؛ ما گرید داریم و دلیلش داده است:**
   ۷۴ محصول از ۱۳۹ بیش از شش رنگ دارند و بیشینه **۵۵** است ⇒ `flex:1`
   رویِ ۵۵ سلول یعنی خانهٔ ۱۰ پیکسلی.
   🔑 و `--slider-cell-min` طوری انتخاب شده که **در عرضِ ۶۴۰pxِ طرح دقیقاً
   شش‌تا در ردیف بنشیند** — یعنی شش، نتیجه است نه عددِ سخت‌کدشده. */
.fd-color-grid { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--slider-cell-min), 1fr)); gap: var(--slider-gap); }
/* ⚠ **`stretch`، نه `center` — و این یک باگِ اندازه بود، نه سلیقه.**
   با `align-items: center` تصویرکِ `width:100%` سرِ اندازه‌اش به `aspect-ratio`
   نمی‌رسید و **۸۵٫۸×۱۰۸** درمی‌آمد (نسبت ۰٫۷۹) — یعنی قابْ بلندتر از عکس و
   یک نوارِ تیره بالا و پایین. `text-align` جایِ آن، متن را وسط نگه می‌دارد. */
.fd-color { display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: var(--space-2); text-decoration: none; color: inherit; }

/* 🔴 سواچ **مربع** است، نه دایره — هندسهٔ طرح.
   ⚠ و محتوایش هگز است نه عکسِ محصول، برعکسِ طرح: ۱۵۶۴ رنگ از ۱۵۷۹ هگز
   دارند و فقط ۵۵۲ عکس. ⇒ عکس پلهٔ **دوم** است، نه اول.
   و حاشیه رویِ **همه** می‌آید، نه فقط روشن‌ها: `#ffffff` واقعاً وجود دارد
   (Jade White) و بی حاشیه نامرئی است. */
.fd-color-sw {
    display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--spec-radius);
    border: 2px solid var(--slider-swatch-ring); box-shadow: var(--slider-shadow);
    object-fit: contain; background: var(--surface-2); transform: scale(.9);
    transition: transform var(--slider-ctrl-ms) var(--slider-curve), border-color var(--slider-ctrl-ms);
}
.fd-color.is-current .fd-color-sw { border-color: var(--accent); transform: scale(1); }

.fd-color-label { display: flex; align-items: center; justify-content: center; gap: 6px; }
.fd-color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--slider-dot-ring); flex: none; }
.fd-color-name { font-size: .75rem; font-weight: 600; line-height: 1.5; direction: ltr; }
.fd-color-hex { font-size: .6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fd-color.is-current .fd-color-hex { color: var(--accent); }
.fd-color:hover .fd-color-name { color: var(--accent); }

/* ⚠ حرکت فقط برایِ کسی که خواسته باشد. سکو ثابت می‌ماند، فقط غلت نمی‌خورد. */
@media (prefers-reduced-motion: reduce) {
    .fd-color-hero img, .fd-color-sw, .fd-colors-nav a { transition: none; }
}

/* زیرِ ~۶۶۰px کارت روان می‌شود و سکو نسبتِ ۱۶/۱۰ می‌گیرد (پیشنهادِ خودِ طرح). */
@media (max-width: 660px) {
    .fd-color-hero { height: auto; aspect-ratio: 16 / 10; }
}
.fd-calc-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--space-4); font-weight: 700; font-size: .92rem; color: var(--accent); text-decoration: none; }
.fd-calc-card:hover { background: var(--accent-soft); }
.fd-calc-card span:first-child { display: flex; align-items: center; gap: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════
   کارتِ مشخصاتِ فنی — طرحِ `docs/design/design_handoff_filament_specs_card/`

   🔴 **فضایِ نامِ `fspec-` عمدی است، نه سلیقه.** بلاکِ قبلی از `.p-card`/
   `.p-row` استفاده می‌کرد و **همان دو کلاس در `printers/show.blade.php` هم
   زندگی می‌کنند** ⇒ بازسازیِ این کارت رویشان، صفحهٔ دستگاه را هم عوض
   می‌کرد، بی آنکه در دامنهٔ این قلم باشد. (قاعدهٔ تستِ ۹.)

   ⚠ **و `.p-card`/`.p-row` دست‌نخورده ماندند** — صفحهٔ دستگاه دقیقاً همان
   است که بود.

   طرح high-fidelity است؛ رنگ/فاصله/شعاع از توکن‌هایِ `--spec-*` می‌آیند و
   دلیلِ هر انحراف در `tokens.css` کنارِ خودِ توکن نوشته شده.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── تنظیمات چاپ (§۶.۳۰) ────────────────────────────────────────────
   🔴 **کلاسِ اختصاصیِ تازه‌ای ندارد — همان `.fspec-*`ِ طرحِ تأییدشده.**

   نسخهٔ اولش یک خانوادهٔ کاملِ دوم بود (`.fps-card/.fps-list/.fps-row`) با
   ظاهرِ خودش. حکمِ صاحب پروژه: «ظاهر جدول تنظیمات چاپ بشه مثل دیزاینی که
   … برای جدول مشخصات فنی … دادم» ⇒ آن خانواده برداشته شد.

   ⚠ **و این فقط تکرارِ کار نبود، شکافِ آینده بود:** دو خانوادهٔ موازی
   یعنی هر اصلاحِ بعدی در طرح باید **دو جا** بنشیند، و روزی که یکی‌شان
   جا بماند، دو جدولِ یک صفحه دو ظاهر پیدا می‌کنند. هیچ چیز هم قرمز
   نمی‌شود.

   آنچه می‌ماند، سه اصلاحِ کوچک روی همان زبان است:
   ═══════════════════════════════════════════════════════════════════ */

/* ۱ · بدونِ پنلِ گروه، خودِ بدنه لبه و شعاع می‌گیرد — نوارِ سرگروه در طرح
   برایِ جدا کردنِ **سه** گروه است و این‌جا یک گروه بیشتر نیست. */
/* 🔴 **دو ستون — طرح `grid-template-columns: 1fr 1fr` دارد و README هم
   صریح می‌گوید.** کلاسِ `.two` همان قاعده‌ها را از قبل دارد: خطِ عمودیِ
   ستونِ دوم، زبرا رویِ **ردیفِ گرید** نه سلول، و `span 2` برایِ ردیفِ
   آخرِ فرد. ⇒ ردیفِ یازدهم تمام‌عرض می‌شود و نیم‌سلولِ خالی نمی‌ماند. */
.fps-body { margin-top: var(--space-5); border: 1px solid var(--spec-hairline);
    border-radius: var(--spec-radius); overflow: hidden; }

/* ۲ · زبرا در طرح رویِ `.fspec-body` تعریف شده و این‌جا هم همان — بی
   تعریفِ دوباره؛ فقط خطِ آخر که پنلِ گروه نداشت حذف می‌شود. */
.fps-body .fspec-row:last-child { border-bottom: none; }

/* ۳ · 🔴 **خطِ «تأیید شده توسط …» رویِ *همان* خط می‌نشیند — ۰۹‑۰۲.**

   **حکمِ صاحب پروژه، نقلِ عین:** «گزینه هایی که جمله تایید شده توسط بامبو
   لب دارند چون هم عدد بازه داخل کادر است و هم جمله تایید شده توسط بامبو …
   اینا باید در یک خط قرار بگیرند بالا پایین شدنش مشکل سازه».

   ⚠ **و مسئله فقط زیبایی نبود — گرید بود.** `.fspec-body.two` یک گریدِ
   دوستونه است، پس سلولِ بلند **کلِ ردیفِ گرید را بلند می‌کند**؛ همسایه‌اش
   محتوایش را وسطِ آن فضا نگه می‌داشت ⇒ سه ردیف از یازده ردیف با بقیه
   هم‌تراز نبودند و نوارِ یک‌درمیان هم ناهموار می‌شد.

   🔑 ⇒ یک‌خطی‌کردن، هم خواستهٔ او را می‌دهد و هم گرید را برمی‌گرداند به
   ارتفاعِ یکنواخت. **گزینهٔ دومش (۱۱ فیلد → ۱۴ ردیف) لازم نشد**، چون
   اندازه‌گیری نشان داد کلِ خط در عرضِ یک ستون جا می‌شود.

   ⚠ **و راست‌چینی می‌ماند، به همان دلیلِ دیروز:** `.fspec-row .v` جهتش
   `ltr` است، پس بی این، خواننده‌ای که از راست می‌خواند اول عدد را می‌دید و
   دو نقطه به چپ‌ترین نقطه می‌افتاد — دور از عددی که به آن اشاره می‌کند.
   ⇒ بازه راست، عبارت وسط، عدد چپ.

   📌 اختصاصِ (0,3,0) عمدی است: `.fspec-row .v { direction: ltr }` پایین‌تر
   در همین فایل می‌آید و با دو کلاس بر این می‌چربید. */
.fps-body .fps-tall .v { direction: rtl; }
.fps-tall .v-sub { font-size: .72rem; font-weight: 400;
    margin-inline-start: .5em; color: var(--tone-verified); }

/* 🔴 `.v` در طرح `nowrap` است و آن باید بماند — ولی خطِ مقدار خودش یک
   بازهٔ مستقل می‌شود تا پیشوندِ فارسی و عددِ لاتین در یک ردیف بنشینند
   بی آنکه در یک بازهٔ دوجهته‌ی مشترک قاطی شوند. */
.fps-body .v-line { display: inline-flex; align-items: baseline; gap: .35em; }

/* ── گیجِ نازل در سرِ کارتِ تنظیمات (۰۹‑۰۲) ──────────────────────────────
   **حکمِ صاحب پروژه:** «کارت بازه دمای نازل را عرضشو کم کنیم به عندازه
   عرض یکی از ستون ها و به جای شمارنده نمایش بدیم».

   ⚠ **«عرضِ یکی از ستون‌ها» عددِ دقیقی است، نه تقریب:** بدنهٔ کارت
   `grid-template-columns: 1fr 1fr` بی فاصله است ⇒ یک ستون دقیقاً نصفِ
   عرضِ داخلیِ کارت. پس `50%`، نه یک درصدِ چشمی.

   📌 و نسخهٔ کوتاه‌شده است، نه همان کارت: نوار نازک‌تر و فاصلهٔ زیرِ
   عددها کمتر، وگرنه سرِ کارت از خودِ ردیف‌ها بلندتر می‌شد.
   ═══════════════════════════════════════════════════════════════════ */
.fps-gauge { flex: 0 0 50%; display: flex; align-items: center; gap: var(--space-3); }
.fps-gauge-label { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.fps-gauge .noz-gauge { flex: 1; margin-top: 0; }
.fps-gauge .noz-track { height: 10px; margin: 4px 4px 20px; }
.fps-gauge .noz-marks { font-size: .72rem; }

/* ── هشدارِ نازلِ سخت (§۶.۲۸) ────────────────────────────────────────
   ⚠ دربارهٔ **آسیب به سخت‌افزار** است، نه یک مشخصه ⇒ عمداً شبیهِ کارتِ
   جدول نیست: حاشیهٔ رنگی و پس‌زمینهٔ ملایم تا از بدنهٔ صفحه جدا بخواند.
   رنگ از `--accent`ِ موجود می‌آید (همان توکنی که `icon-tone-warning`
   می‌خورد) — توکنِ نو ساخته نشد.
   ═══════════════════════════════════════════════════════════════════ */
.fd-warn { display: flex; gap: var(--space-3); align-items: flex-start;
    background: var(--surface); border: 1px solid var(--accent);
    border-radius: var(--spec-card-radius); padding: var(--space-4); }
.fd-warn strong { display: block; color: var(--accent); }
.fd-warn p { margin: var(--space-2) 0 0; line-height: 1.8; }

/* ── معرفیِ سازنده (§۶.۲۷) ──────────────────────────────────────────────
   همان پوستهٔ کارتِ مشخصات، چون در همان ستون و کنارِ آن می‌نشیند.
   ⚠ هیچ مقدارِ خام این‌جا نیست — رنگ/فاصله/شعاع همه توکن‌اند (قاعدهٔ
   طراحیِ ۱)، و بخش وقتی ترجمه نباشد اصلاً رندر نمی‌شود، پس حالتِ خالی
   ندارد.
   ═══════════════════════════════════════════════════════════════════ */
.fd-intro { background: var(--surface); border: 1px solid var(--spec-hairline); border-radius: var(--spec-card-radius); padding: var(--space-5); }
.fd-intro h2 { margin: 0 0 var(--space-3); font-size: 1rem; font-weight: 700; }
/* ⚠ نامِ لاتینِ برند داخلِ عنوانِ فارسی است ⇒ `bdi` در Blade مرزش را
   نگه می‌دارد؛ این‌جا فقط رنگِ ملایم‌ترش می‌کند تا عنوان یک‌دست بماند. */
/* 🔴 **نامِ برند سبز می‌شود، نه کلِ عنوان — حکمِ صاحب پروژه ۰۹‑۰۲:**
   «این قسمت فونتش سبز بشه Bambu Lab - بامبولب».

   ⚠ **همان `--tone-verified`ِ خطِ «تأیید شده توسط …»، و توکنِ سومی ساخته
   نشد:** هر دو یک چیز می‌گویند — «این از خودِ سازنده آمده». دو سبز برایِ
   یک معنا، معنا را رقیق می‌کند.

   📌 و `bdi` فقط نامِ برند را در بر می‌گیرد، پس «معرفی شده از برند»
   دست‌نخورده می‌ماند — همان تفکیکی که حکم خواسته. */
.fd-intro h2 bdi { color: var(--tone-verified); font-weight: 600; }

/* ── نکته‌های محصول (§۶.۳۱) ──────────────────────────────────────────
   گزینهٔ الف: یک جعبه برایِ همهٔ گزاره‌ها، بی تفکیکِ هشدار از خبر.

   ⚠ **هم‌خانوادهٔ `.fd-intro`ست، نه یک ظاهرِ سوم** — همان پوسته، همان
   توکن‌ها. صفحه از قبل دو جدول در زبانِ `fspec-*` دارد؛ جعبهٔ نو باید
   کنارِ **معرفی** بخواند، چون آن هم متن است نه عدد.

   📌 صاحب پروژه گفته جایش را پس از دیدن تنظیم می‌کند ⇒ عمداً ساده.
   ═══════════════════════════════════════════════════════════════════ */
/* دوتاییِ «اسناد» و «قیمتِ مرجع» — گریدِ طرح. در تنگنا تک‌ستونه. */
.fd-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 900px) { .fd-two { grid-template-columns: 1fr; } }

.fd-notes { background: var(--surface); border: 1px solid var(--spec-hairline);
    border-radius: var(--spec-card-radius); padding: var(--space-5); }
.fd-notes h2 { margin: 0 0 var(--space-3); font-size: 1rem; font-weight: 700; }
.fd-notes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
/* نشانهٔ ابتدای ردیف با `::before` است نه بولتِ فهرست: در RTL سمتِ درست
   می‌نشیند و رنگش توکن می‌گیرد. */
.fd-notes li { position: relative; padding-inline-start: var(--space-4); line-height: 1.7; }
.fd-notes li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em;
    width: var(--spec-dot); height: var(--spec-dot); border-radius: 50%;
    background: var(--spec-tone-print); }
/* رنگِ متن از بدنه به ارث می‌رسد — توکنِ جداگانه‌ای لازم ندارد. */
.fd-intro p { margin: 0; line-height: 1.9; }

.fspec-card { background: var(--surface); border: 1px solid var(--spec-hairline); border-radius: var(--spec-card-radius); padding: var(--space-5); }
.fspec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--spec-hairline); }
.fspec-head h2 { margin: 0; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: var(--space-3); }
.fspec-sum { color: var(--muted); font-size: .8125rem; }

/* 🔴 **سه ستون — طرحِ صفحهٔ محصول** (`design_handoff_filament_product_page`).
   پیش از این دو ستون بود، از طرحِ کارتِ مشخصات که تنها سه گروه داشت.
   حالا پنج گروه داریم و سه ستون هر پنج را با چیدمانِ طبیعی جا می‌دهد:
   ردیفِ اول سه گروهِ کوچک، ردیفِ دوم چاپ و مکانیکیِ تمام‌عرض.
   ⚠ خودِ ستون‌ها از طرح‌اند؛ **تعدادِ گروه‌ها از داده** — طرح دربارهٔ
   محتوا حکم نمی‌دهد (حکمِ صاحب پروژه ۰۹‑۰۱). */
.fspec-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); margin-top: var(--space-5); align-items: start; }
.fspec-group { border: 1px solid var(--spec-hairline); border-radius: var(--spec-radius); overflow: hidden; }
/* 🔴 **تمام‌عرض، نه «دو ستون از سه» — ۰۹‑۰۲.**

   با ادغامِ گروه‌ها سه گروه ماند و **هر سه** تمام‌عرض‌اند. `span 2` رویِ
   گریدِ سه‌ستونه یک **حفرهٔ واقعی** می‌ساخت: گروهِ کوتاه ستونِ سومِ ردیفِ
   خودش را خالی می‌گذاشت و گروهِ بعدی مجبور بود از ردیفِ تازه شروع کند ⇒
   اندازه‌گیری: ۶۳۱ + ۳۰۷ در ردیفِ اول و یک بلوکِ خالیِ ۶۳۱ در ردیفِ دوم.

   ⚠ `1 / -1` به‌جای `span 3` عمدی است: در هر سه بریکپوینت (۳، ۲ و ۱
   ستون) «تا آخر» یک معنا دارد، درحالی‌که `span 3` رویِ گریدِ دوستونه
   سرریز می‌کند. */
.fspec-group.wide { grid-column: 1 / -1; }

.fspec-ghead { display: flex; align-items: center; gap: var(--space-2); padding: var(--spec-strip-pad-y) var(--spec-pad-x); background: var(--spec-strip); border-bottom: 1px solid var(--spec-hairline); }
.fspec-ghead .dot { width: var(--spec-dot); height: var(--spec-dot); border-radius: 50%; flex: none; }
.fspec-gtitle { font-size: .8125rem; font-weight: 700; }
.fspec-gcount { color: var(--muted); font-size: .75rem; }

.fspec-body { display: grid; grid-template-columns: 1fr; }
.fspec-body.two { grid-template-columns: 1fr 1fr; }

.fspec-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 0 var(--spec-pad-x); min-height: var(--spec-row-h); border-bottom: 1px solid var(--spec-rule); }
.fspec-row .k { color: var(--spec-label); font-size: .8125rem; line-height: 1.55; }
/* 🔴 **برچسبِ انگلیسی به لبهٔ فارسیِ بالایش می‌چسبد — حکمِ صاحب پروژه ۰۹‑۰۲:**
   «مثل متن فارسی بچسبه سمت راست و رنگ متن انگلیسی نارنجی کمرنگ بشه».

   ⚠ **`text-align: end` و نه `right`، و این تفاوت واقعی است:** خودِ `bdi`
   ‏`dir="ltr"` دارد، پس `start`ِ آن چپ است و متن از چپ می‌ریخت — همان
   «بهم ریخته»ای که او دید. `end` درونِ همان بازهٔ LTR یعنی **راست**، و
   چون منطقی است، **رویِ خطِ دوم هم برقرار می‌ماند** (گروهِ مکانیکی
   برچسب‌هایی دارد که می‌پیچند).

   ⚠ و `opacity` برداشته شد: کم‌رنگی در خودِ توکن است، وگرنه کنتراستِ
   واقعی از عددِ نوشته‌شده جدا می‌شد. */
.fspec-row .k-en { display: block; font-size: .72rem; text-align: end;
    color: var(--spec-label-en); }
/* 🔴 **`nowrap` فقط رویِ عدد، نه رویِ جمله.**

   ⚠ **تصویر در سه‌ستونه گرفتش:** مقدارهایِ گروهِ شیمیایی *جمله*اند
   («در شرایط عادی نگهداری پایدار است»)، نه عدد. با `nowrap` در ستونِ
   ۳۰۷ پیکسلی **بریده می‌شدند** — نه سرریز، نه سه‌نقطه، فقط قطع.

   🔑 طرح سه ستون را با فرضِ **مقدارِ عددی** کشیده؛ دادهٔ ما در یک گروه
   نثر است. ⇒ عدد یک‌خطی می‌ماند (بازهٔ `190–230°C` نباید بشکند) و نثر
   می‌پیچد. */
.fspec-row .v { color: var(--text); font-size: .8125rem; font-weight: 600; direction: ltr; font-variant-numeric: tabular-nums; white-space: normal; }
.fspec-row .v > bdi[dir="ltr"] { white-space: nowrap; }
/* 🔴 نامِ کلاس `fspec-empty` است نه `empty` — و این را جهش نگرفت، تصویر گرفت.
   `.empty` از قبل یک کلاسِ سراسریِ حالتِ خالی است (`padding: 60px 0`) ⇒ هر
   مقدارِ «ثبت نشده» ردیفش را از ۴۰px به ۱۴۳px می‌برد.
   🔑 **درس: فضایِ نام تا وقتی کامل است که *همهٔ* کلاس‌ها را بگیرد** — یک
   کلاسِ کمکیِ بی‌پیشوند کافی است تا کلِ جداسازی بی‌اثر شود. */
.fspec-row .v.fspec-empty { color: var(--muted); font-weight: 400; }

/* 🔑 **نوارِ یک‌درمیان، خطِ ستون و ردیفِ فرد — همه CSSِ خالص، صفر منطق در Blade.**
   در گروهِ دوستونی «یک‌درمیان» یعنی **هر ردیفِ گرید**، نه هر خانه ⇒ `4n+3`/`4n+4`.
   و ردیفِ آخرِ یک گروهِ فردشمار خودش کلِ عرض را می‌گیرد تا نیم‌ردیفِ خالی رنگ نشود —
   `:last-child:nth-child(odd)` دقیقاً همان است، بی هیچ شمارنده‌ای در ویو. */
.fspec-body:not(.two) .fspec-row:nth-child(even) { background: var(--spec-zebra); }
.fspec-body.two .fspec-row:nth-child(4n+3),
.fspec-body.two .fspec-row:nth-child(4n+4) { background: var(--spec-zebra); }
.fspec-body.two .fspec-row:nth-child(even) { border-inline-start: 1px solid var(--spec-hairline); }
.fspec-body.two .fspec-row:last-child:nth-child(odd) { grid-column: span 2; }

.fspec-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--spec-hairline); }
.fspec-foot p { margin: 0; color: var(--muted); font-size: .75rem; }

/* ═══ شکستِ کارت — به عرضِ **خودِ کارت** بسته است، نه عرضِ پنجره ═══

   🔴 **و این تفاوت را اندازه‌گیری تحمیل کرد، نه سلیقه.** کارت داخلِ
   `.fd-main` می‌نشیند و ریلِ کناری عرضش را می‌خورد:

     پنجره ۱۹۲۰ → کارت ۱۰۰۰px  (دقیقاً عددِ طرح؛ همه ردیف‌ها ۴۰px ✓)
     پنجره ۱۴۴۰ → کارت  ۷۵۲px  (هنوز ۴۰px ✓)
     پنجره ۱۲۸۰ → کارت  ۵۹۲px  (۱۲ ردیف از ۱۳ تا ۱۰۲px باد می‌کنند ✗)
     پنجره ۱۰۲۴ → کارت  ۳۳۶px  (سرریزِ افقی ✗)

   ⇒ **شرطی که به عرضِ پنجره ببندد، دقیقاً همان‌جا که مشکل هست خاموش
   می‌ماند** — پنجرهٔ ۱۲۸۰ «دسکتاپِ عریض» است و کارتش تنگ‌ترین حالت.

   ⚠ **و بلاکِ `@media` تکرارِ همین است، نه زائد:** `@container` در
   مرورگرهایِ پیش از ۲۰۲۳ **بی‌صدا نادیده گرفته می‌شود**، و آن‌جا موبایل
   با گروهِ دوستونه می‌ماند. ⇒ دو بلاک، و **باید هم‌گام بمانند.** */
.fspec-card { container-type: inline-size; }

/* 🔴 **پلهٔ میانی: سه ستون → دو، پیش از رسیدن به یک.**

   ⚠ بی این، کارت از سه ستون **مستقیم** به یک می‌افتد و در عرض‌هایِ میانی
   سه ستونِ فشرده می‌ماند که برچسب‌هایشان می‌شکنند.

   📌 **این در طرح نیست** — طرح یک عرض دارد و README خودش قواعدِ واکنشی را
   «پیشنهادی، نه در ماکت» می‌نامد. ⇒ نوشتهٔ ماست و اعلام شد. */
/* ⚠ **۹۴۰ و نه ۱۰۰۰:** کارتِ طرح دقیقاً ۱۰۰۰px است، پس آستانهٔ ۱۰۰۰
   خودِ عرضِ طرح را می‌گرفت و سه‌ستونه هرگز دیده نمی‌شد. تصویر گرفتش —
   عددِ گرد درست به‌نظر می‌رسید. */
@container (max-width: 940px) {
    .fspec-grid { grid-template-columns: 1fr 1fr; }
}

@container (max-width: 700px) {
    .fspec-grid { grid-template-columns: 1fr; }
    .fspec-group.wide { grid-column: auto; }
    .fspec-body.two { grid-template-columns: 1fr; }
    /* 🔴 **گیجِ سرِ کارت تمام‌عرض می‌شود، وگرنه دو عددش رویِ هم می‌افتند.**
       ⚠ تصویر گرفتش: در ۴۲۰px گیج ۱۵۵ پیکسل می‌شد و «190» و «230°C»
       همدیگر را می‌پوشاندند. «نصفِ کارت» فقط تا جایی معنا دارد که خودِ
       کارت دو ستون داشته باشد. */
    .fspec-head { flex-wrap: wrap; }
    .fps-gauge { flex-basis: 100%; }
    /* 🔴 بی این خط، `span 2`ِ ردیفِ آخر یک **ستونِ ضمنی** می‌سازد و گرید
       دوباره دوستونه می‌شود — یعنی خودِ شرطِ جمع‌شدن بی‌اثر می‌ماند.
       ⚠ و هیچ خطایی نمی‌دهد: `grid-template-columns` تک‌ستونه است و
       مرورگر ستونِ دوم را **خودش** اضافه می‌کند. تصویر گرفتش، نه تست. */
    .fspec-body.two .fspec-row:last-child:nth-child(odd) { grid-column: auto; }
    .fspec-body.two .fspec-row:nth-child(even) { border-inline-start: 0; }
    /* ⚠ صفرکردنِ ردیف‌هایِ فرد لازم است، نه زائد: قاعدهٔ `4n+3`ِ بیرونِ این بلاک
       همان اختصاصِ (0,3,1) را دارد، پس با `.fspec-row` تنها خنثی نمی‌شود. */
    .fspec-body.two .fspec-row:nth-child(odd) { background: none; }
    .fspec-body.two .fspec-row:nth-child(even) { background: var(--spec-zebra); }
    .fspec-row { padding: var(--space-3) var(--spec-pad-x); }
    .fspec-row .v { white-space: normal; }
}

/* بدلِ پلهٔ میانی برایِ مرورگرِ بی‌`@container`. باید با بلاکِ بالا هم‌گام بماند. */
@media (max-width: 1200px) {
    .fspec-grid { grid-template-columns: 1fr 1fr; }
}

/* نسخهٔ پشتیبان برایِ مرورگرِ بی‌`@container` — عیناً بلاکِ بالا. */
@media (max-width: 900px) {
    .fspec-grid { grid-template-columns: 1fr; }
    .fspec-group.wide { grid-column: auto; }
    .fspec-body.two { grid-template-columns: 1fr; }
    /* هم‌گام با بلاکِ `@container` بالا — گیج تمام‌عرض، وگرنه دو عدد رویِ هم. */
    .fspec-head { flex-wrap: wrap; }
    .fps-gauge { flex-basis: 100%; }
    /* 🔴 بی این خط، `span 2`ِ ردیفِ آخر یک **ستونِ ضمنی** می‌سازد و گرید
       دوباره دوستونه می‌شود — یعنی خودِ شرطِ جمع‌شدن بی‌اثر می‌ماند.
       ⚠ و هیچ خطایی نمی‌دهد: `grid-template-columns` تک‌ستونه است و
       مرورگر ستونِ دوم را **خودش** اضافه می‌کند. تصویر گرفتش، نه تست. */
    .fspec-body.two .fspec-row:last-child:nth-child(odd) { grid-column: auto; }
    .fspec-body.two .fspec-row:nth-child(even) { border-inline-start: 0; }
    .fspec-body.two .fspec-row:nth-child(odd) { background: none; }
    .fspec-body.two .fspec-row:nth-child(even) { background: var(--spec-zebra); }
    .fspec-row { padding: var(--space-3) var(--spec-pad-x); }
    .fspec-row .v { white-space: normal; }
}

/* گیجِ بازهٔ دمایِ نازل — بازهٔ min/max واقعیِ فیلامنت رویِ دامنهٔ ثابتِ کاتالوگ.
   dir=ltr عمدی: مقیاسِ دما همیشه سرد→گرم چپ‌به‌راست خوانده می‌شود، مستقل از RTLِ صفحه. */
.noz-gauge { margin-top: var(--space-2); }
.noz-track { position: relative; height: 14px; border-radius: 8px; background: linear-gradient(90deg, var(--info), var(--accent), var(--danger)); margin: 6px 4px 26px; }
.noz-band { position: absolute; top: -6px; bottom: -6px; border: 2px solid var(--text); border-radius: 8px; box-shadow: 0 0 0 3px var(--scrim); }
.noz-marks { position: relative; font-size: .78rem; font-weight: 700; color: var(--muted); }
.noz-mark { position: absolute; top: -18px; transform: translateX(-50%); white-space: nowrap; }
.noz-mark.end { transform: translateX(50%); }

.mat-badge.mono { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; }

/* ---------- داشبوردِ کاریِ سرویس‌دهنده (dashboard.blade.php، قلمِ ۱۲.۷) ---------- */
.provider-dash-band { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; background: linear-gradient(110deg, var(--surface) 55%, var(--accent-soft)); }
.pdb-id { display: flex; align-items: center; gap: var(--space-4); }
.pdb-avatar { flex: none; width: 62px; height: 62px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; color: var(--on-accent); }
.pdb-name-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pdb-name-row h1 { margin: 0; font-size: 1.4rem; }
.pdb-meta { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: .85rem; margin-top: var(--space-1); }
.pdb-meta span { display: flex; align-items: center; gap: 5px; }
.pdb-trust { display: flex; align-items: center; gap: var(--space-3); padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--border); }
.pdb-trust-label { font-size: .8rem; color: var(--muted); }
.pdb-trust-val { font-weight: 700; color: var(--ok); }

.trust-ring { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; }
.trust-ring svg { display: block; }
.trust-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; }
.trust-ring-label small { color: var(--muted); font-size: .72rem; font-weight: 600; }

.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }
.kpi-tile { display: flex; align-items: center; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.kpi-icon { flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.kpi-icon.ok { background: var(--ok-soft); color: var(--ok); }
.kpi-icon.info { background: var(--info-soft); color: var(--info); }
.kpi-icon.accent { background: var(--accent-soft); color: var(--accent); }
.kpi-icon.gold { background: var(--gold-soft); color: var(--gold); }
.kpi-val { font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
.kpi-label { font-size: .78rem; color: var(--muted); margin-top: 2px; }
@media (max-width: 720px) { .kpi-row { grid-template-columns: 1fr 1fr; } }

.provider-dash-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--space-4); align-items: start; }
.pd-main, .pd-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pd-main .section, .pd-side .section { margin: 0; }
@media (max-width: 900px) { .provider-dash-grid { grid-template-columns: 1fr; } }

/* تایلِ مدالیونِ وریفای — details/summary، بدونِ JS. رنگ از همان چهار وضعیتِ vc-status.
   چیدمانِ عمودی (آیکون/عنوان/وضعیت زیرِ هم، طبقِ طرح) — ردیفِ افقی برایِ عنوان‌هایِ
   بلند («دستگاهِ واقعی» + «در انتظارِ داوری») می‌شکست. */
/* height:100%+flex column روی خودِ details — قبلاً min-height فقط رویِ summary
   بود که در حالتِ بسته کافی نیست: اگر summary خودش کوتاه‌تر از ارتفاعِ ردیفِ
   گرید (که با تایلِ عنوانِ دوخطیِ هم‌ردیف کشیده شده) بماند، جعبهٔ details هم
   کوتاه دیده می‌شود (کشفِ تستِ چشمی، دور دوم). حالا summary با flex:1 تمامِ
   ارتفاعِ کشیده‌شدهٔ details را پر می‌کند، چه بسته چه باز. */
.medallion { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.medallion > summary { list-style: none; cursor: pointer; padding: var(--space-3); position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-2); min-height: 96px; flex: 1; }
.medallion > summary::-webkit-details-marker { display: none; }
.medallion-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--muted); }
.medallion.is-done .medallion-icon { background: var(--ok-soft); color: var(--ok); }
.medallion.is-pending .medallion-icon { background: var(--accent-soft); color: var(--accent); }
.medallion.is-todo .medallion-icon { background: var(--danger-soft); color: var(--danger); }
.medallion.is-soon .medallion-icon { background: var(--surface); color: var(--muted); }
.medallion-title { font-size: .92rem; }
.medallion-state { font-size: .75rem; font-weight: 700; }
.medallion-state.is-done { color: var(--ok); }
.medallion-state.is-pending { color: var(--accent); }
.medallion-state.is-todo { color: var(--danger); }
.medallion-state.is-soon { color: var(--muted); }
.medallion-car { position: absolute; top: var(--space-3); inset-inline-end: var(--space-3); color: var(--muted); transition: transform .2s; }
.medallion[open] .medallion-car { transform: rotate(180deg); }
.medallion[open] { border-color: var(--accent); }
.medallion-body { padding: 0 var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }

/* کارتِ «قدمِ بعدی» — پیش‌فرض accent (اقدام لازم است)؛ ready=سبز، waiting=طلایی. */
.next-step-block.ready { border-color: var(--ok); background: var(--ok-soft); }
.next-step-block.waiting { border-color: var(--gold); background: var(--gold-soft); }
.next-step-block .completion-bar { margin-top: var(--space-3); }
.next-step-secondary-link { margin-inline-start: var(--space-2); }

.pdw-preview-row { display: flex; gap: var(--space-2); margin: var(--space-3) 0; }
.pdw-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.pdw-add-tile { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1); border: 1.5px dashed var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: .82rem; min-height: 56px; }
.pdw-add-tile:hover { border-color: var(--accent); color: var(--accent); }
.pdw-manage-btn { width: 100%; justify-content: center; margin-top: var(--space-2); }

/* ---------- پروفایلِ عمومیِ سرویس‌دهنده (printmarket/providers/show.blade.php، قلمِ ۷.۵) ---------- */
/* بنر+آواتار — همان زبانِ بصریِ .pc-banner/.pc-avatarِ کارتِ قلمِ ۷ (hue از --pc-accent)،
   فقط بزرگ‌ترِ مقیاسِ صفحهٔ کامل به‌جایِ کارتِ گرید. */
.pp-banner { height: 150px; border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--pc-accent) 38%, var(--surface-2)), var(--surface-2) 78%); border: 1px solid var(--border); }
.pp-identity { display: flex; align-items: flex-end; gap: var(--space-4); margin: -42px var(--space-2) 0; position: relative; flex-wrap: wrap; }
.pp-avatar { display: block; width: 96px; height: 96px; border-radius: var(--radius); overflow: hidden; border: 4px solid var(--bg); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); background: var(--surface-2); flex: none; }
.pp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pp-identity-text { padding-bottom: var(--space-1); }
.pp-name-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.pp-name-row h1 { margin: 0; font-size: 1.7rem; }
@media (max-width: 640px) { .pp-avatar { width: 76px; height: 76px; } .pp-name-row h1 { font-size: 1.35rem; } }

/* ریلِ کناری+ستونِ اصلی — DOMِ ریل اول (h1 بالاست، این خودش پیش‌ترها حل شد؛ اینجا
   فقط ترتیبِ بصری با order، دقیقاً الگویِ قلمِ ۱۲.۷/۱۲.۸). */
.pp-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-4); align-items: start; margin-top: var(--space-5); }
.pp-main { order: 1; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pp-side { order: 2; display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: var(--space-4); }
@media (max-width: 900px) {
    .pp-grid { grid-template-columns: 1fr; }
    .pp-main, .pp-side { order: 0; }
    .pp-side { position: static; }
}

.pp-cta-card { background: linear-gradient(180deg, var(--accent-soft), transparent 65%); border-color: var(--accent); }
.pp-cta-lead { margin: 0 0 4px; font-size: .85rem; color: var(--muted); }
.pp-cta-title { margin: 0 0 var(--space-3); font-size: 1.05rem; font-weight: 800; }
.pp-cta-btn { width: 100%; justify-content: center; }
.pp-cta-note { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin: var(--space-2) 0 0; font-size: .78rem; color: var(--muted); }
.pp-provenance-card { padding: var(--space-4); }
.pp-facts-title { margin: 0 0 var(--space-2); font-size: .95rem; }

/* کارنامه (قلمِ ۴.۳) — نرخِ تکمیل + زمانِ پاسخ در ریلِ کناریِ پروفایل */
.track-record-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tr-item { display: flex; align-items: center; gap: var(--space-2); font-size: .9rem; }
.tr-completed { color: var(--text); font-weight: 600; }
.tr-cancelled { color: var(--muted); }
.tr-clean, .tr-response { color: var(--muted); }
.tr-rating { align-items: center; gap: var(--space-2); }
.tr-rating-num { font-weight: 800; color: var(--text); }

/* امتیازدهی (قلمِ ۵) — نمایش و فرم */
.rating-stars { display: inline-flex; gap: 1px; vertical-align: middle; }
.pc-rating { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-top: 3px; font-size: .85rem; }
.pc-rating-num { font-weight: 800; }
/* نمایشِ صادقانهٔ رأیِ کم (قلمِ ۵، قیدِ صاحب پروژه) — تعداد همیشه دیده می‌شود، بجِ «رأیِ کم» زیرِ آستانه */
.pc-rating-count, .tr-rating-count { color: var(--muted); }
.pc-rating-low, .tr-rating-low { font-size: .78rem; }
.pc-rating-low { color: var(--accent); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0 var(--space-2); }
.tr-rating-low { padding-inline-start: 1.6rem; }
.rating-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.rating-item { display: flex; flex-direction: column; gap: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); }
.rating-item-role { font-size: .82rem; color: var(--muted); font-weight: 700; }
.rating-comment { margin: var(--space-1) 0 0; font-size: .92rem; }
.rating-waiting { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; margin: 0 0 var(--space-2); }
.rating-blind-note { margin-bottom: var(--space-3); }
.rating-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); max-width: 620px; }
/* رادیوی ستاره — بدونِ JS: DOMِ ۵→۱، هاور/چک خودش و کوچک‌ترها را طلایی می‌کند */
.star-input { border: none; padding: 0; margin: 0; }
.star-input legend { font-weight: 600; font-size: .92rem; margin-bottom: var(--space-2); }
.star-input legend i { color: var(--accent); font-style: normal; margin-inline-start: var(--space-1); }
.star-input input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.star-input label { display: inline-block; cursor: pointer; color: var(--muted); line-height: 1; padding: 0 1px; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--gold); }

.faq-car { color: var(--accent); transition: transform .18s; }
.faq-item[open] .faq-car { transform: rotate(180deg); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }

/* بنرِ «ورود به حساب» (قلمِ ۷) — گاردِ دائمیِ impersonation. رنگ/فاصله فقط از توکن. */
.imp-banner {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 2px 12px var(--shadow);
    font-size: .95rem;
}
.imp-banner--own { background: var(--danger); color: var(--on-danger); }
.imp-banner__msg { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.imp-banner__mode {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--imp-scrim);
    font-size: .8rem;
}
.imp-banner__mode--op { font-weight: 700; }
.imp-banner__actions { display: flex; align-items: center; gap: var(--space-2); }
.imp-banner__actions form { margin: 0; }
.imp-banner__btn {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.imp-banner__btn--exit { background: var(--imp-scrim); }
.imp-banner__btn:hover { background: var(--imp-scrim-strong); }

/* ===== ناحیهٔ فروشنده (قلمِ ۹ — Blade، توکن‌دار؛ یکدست‌سازیِ نهایی فازِ ۱۱) ===== */
.flash-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.seller-status-head { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 var(--space-2); }
.seller-offer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.seller-offer-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.seller-offer-row .sor-main { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.seller-offer-row .sor-actions { display: flex; gap: var(--space-2); align-items: center; }
.seller-offer-row .sor-actions form { margin: 0; }

.seller-offer-form .offer-row { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3);
  margin-bottom: var(--space-3); border-inline-start: 3px solid var(--border); }
.seller-offer-form .offer-row.is-complete { border-inline-start-color: var(--ok); }
.seller-offer-form .offer-row.is-incomplete { border-inline-start-color: var(--gold); }
.seller-offer-form .offer-row legend { font-weight: 600; padding: 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.offer-row-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) 40px; gap: var(--space-2); align-items: end; }
.offer-row-grid .field-url { grid-column: 1 / -2; }
.offer-row-del { align-self: end; padding: var(--space-2); }
.offer-form-tools { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.offer-add-row { flex: 1; border-style: dashed; }
.seller-form-actions .sfa-buttons { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-2); }
.form-error-summary { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.mp-row-cta { display: flex; align-items: center; gap: var(--space-2); }

@media (max-width: 640px) {
  .offer-row-grid { grid-template-columns: 1fr; }
  .offer-row-grid .field-url { grid-column: auto; }
  .seller-offer-row { flex-direction: column; align-items: stretch; }
}
.sor-issues { list-style: disc; margin: var(--space-1) 0 0; padding-inline-start: var(--space-4);
  color: var(--danger); font-size: .85rem; width: 100%; }
.seller-offer-form.js-cascade .cascade-reload { display: none; } /* JS: آبشار خودکار، دکمهٔ بازخوانی لازم نیست */

/* ============================================================
   پاساژ — ویترینِ سرویس‌دهنده (قلمِ ۴-۱). فقط توکن‌ها (رنگ/فاصله/شعاع).
   px فقط برای ابعادِ چیدمانی (ارتفاع/عرضِ track)، مثلِ بقیهٔ site.css.
   ============================================================ */
.sc-mine-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.sc-list { display: grid; gap: var(--space-3); }
.sc-card { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.sc-card-title { font-weight: 600; color: var(--text); text-decoration: none; }
.sc-card-title:hover { color: var(--accent); }
.sc-card .meta { margin-inline-start: auto; }
.sc-reason-inline { color: var(--danger); font-size: .82rem; }

/* بج‌های وضعیت — رنگِ معنایی از توکن */
.chip.sc-draft { background: var(--surface-2); color: var(--muted); }
.chip.sc-published { background: var(--info-soft); color: var(--info); }
.chip.sc-pending { background: var(--gold-soft); color: var(--gold); }
.chip.sc-approved { background: var(--ok-soft); color: var(--ok); }
.chip.sc-needs_fix { background: var(--danger-soft); color: var(--danger); }

/* پیامِ §۱ + بنرِ نیازِ اصلاح + بندِ حذف */
.sc-notice { background: var(--accent-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.sc-notice strong { display: block; margin-bottom: var(--space-1); color: var(--text); }
.sc-needs-fix { background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); color: var(--text); }
.sc-removal { color: var(--muted); font-size: .82rem; margin-top: var(--space-3); border-inline-start: 2px solid var(--border); padding-inline-start: var(--space-3); }

/* گروهِ فیلد */
.sc-fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4); margin: var(--space-3) 0; }
.sc-fieldset > legend { color: var(--muted); font-size: .82rem; padding-inline: var(--space-2); }
.sc-dims { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sc-dims input { flex: 1 1 90px; }
.sc-radios { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.sc-radios label { display: inline-flex; align-items: center; gap: var(--space-1); }

/* پلکانِ قیمت/مهلت */
.sc-tier { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.sc-tier-label { min-width: 92px; color: var(--muted); font-size: .85rem; }
.sc-tier input { flex: 1 1 140px; }

/* چک‌باکسِ رنگ/برچسب */
.sc-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.sc-check { display: inline-flex; align-items: center; gap: var(--space-1); font-size: .9rem; }

/* عکس‌ها */
.sc-photo-guide { color: var(--muted); font-size: .85rem; margin-bottom: var(--space-3); }
.sc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-3); }
.sc-photo { position: relative; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--img-bg); }
.sc-photo img { display: block; width: 100%; height: 120px; object-fit: cover; }
.sc-photo > .chip { position: absolute; inset-block-start: var(--space-1); inset-inline-start: var(--space-1); }
.sc-photo-del { width: 100%; border: none; background: var(--danger-soft); color: var(--danger); padding: var(--space-1); cursor: pointer; font-family: inherit; }
.sc-upload { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }
.sc-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-4); }

/* ورودیِ برچسبِ آزاد (۴-۳ «ب») — بی‌JS چک‌باکسِ .fchip + <datalist>؛ با JS چیپ + افزودن */
.sc-taginput { display: flex; flex-direction: column; gap: var(--space-2); }
.sc-taginput-selected { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sc-taginput-selected:empty { display: none; }
.sc-taginput-input { padding: var(--space-2) var(--space-3); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: .95rem; }
.sc-taginput-input:focus { border-color: var(--accent); outline: none; }
.sc-tagchip { gap: var(--space-1); }
.sc-tagchip-del { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding-inline-start: var(--space-1); font-family: inherit; }
.sc-tagchip-del:hover { color: var(--danger); }

/* ============================================================
   پاساژ — نمایشِ عمومی (قلمِ ۴-۳). فقط توکن‌ها؛ px فقط ابعادِ چیدمانی.
   ============================================================ */

/* گریدِ کارت‌های محصول */
.showcase-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* کارتِ محصول (روی .card پایه) */
.showcase-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.showcase-card:hover { transform: translateY(-2px); }
.showcase-card-media { display: block; aspect-ratio: 4 / 3; background: var(--img-bg); }
.showcase-card-media img { width: 100%; height: 100%; object-fit: cover; }
.showcase-card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.showcase-card-title { margin: 0; font-size: 1rem; }
.showcase-card-title a { color: var(--text); text-decoration: none; }
.showcase-card-title a:hover { color: var(--accent); }
.showcase-card-provider { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: .85rem; }
.showcase-card-workshop { color: var(--muted); text-decoration: none; }
.showcase-card-workshop:hover { color: var(--accent); }
.showcase-card-filament { font-size: .82rem; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.showcase-card-filament a { color: var(--info); text-decoration: none; }
.showcase-card-filament a:hover { text-decoration: underline; }
.showcase-card-tiers { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.showcase-tier { font-size: .8rem; background: var(--surface-2); border-radius: var(--radius-sm); padding: 2px var(--space-2); }
.showcase-tier .st-label { color: var(--muted); }
.showcase-card-meta { font-size: .8rem; }

/* سرصفحهٔ صفحاتِ فهرست (برچسب/ویترینِ کارگاه) + سرِ بخشِ ویترین در پروفایل */
.sc-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0; }
.sc-page-head h1 { margin: 0; }
.pp-showcase-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }

/* صفحهٔ کاملِ محصول */
.showcase-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-4); }
@media (max-width: 820px) { .showcase-detail { grid-template-columns: 1fr; } }
.sd-main-photo { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--img-bg); }
.sd-main-photo img { display: block; width: 100%; height: auto; }
.sd-thumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.sd-thumb { display: block; width: 72px; height: 72px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.sd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sd-info h1 { margin: 0 0 var(--space-3); }
.sd-provider { display: flex; align-items: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.sd-workshop { color: var(--text); text-decoration: none; font-weight: 600; }
.sd-workshop:hover { color: var(--accent); }
.sd-workshop-all { color: var(--muted); font-size: .85rem; text-decoration: none; }
.sd-workshop-all:hover { color: var(--accent); }
.sd-desc { color: var(--text); line-height: 1.8; }
.sd-block { margin-top: var(--space-4); }
.sd-block h2 { font-size: 1.05rem; margin: 0 0 var(--space-2); }
.sd-tiers { width: 100%; border-collapse: collapse; }
.sd-tiers th, .sd-tiers td { text-align: start; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.sd-tiers th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.sd-tiers tbody tr:last-child td { border-bottom: none; }
.sd-colors { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.sd-color { display: inline-flex; align-items: center; gap: var(--space-2); font-size: .9rem; }
.sd-swatch { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 1px solid var(--border); }
.sd-filament .btn { margin-top: var(--space-1); }
.sc-discontinued { color: var(--danger); font-size: .85rem; margin-top: var(--space-2); }
.sd-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sd-tags .chip { text-decoration: none; }
.sd-specs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.sd-specs li { display: flex; gap: var(--space-3); font-size: .9rem; }
.sd-specs .k { color: var(--muted); min-width: 96px; }
.sd-order { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); }
.sd-order-btn { margin-top: var(--space-2); }

/* فرمِ سفارشِ آنی (۴-۲) */
.sd-order-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.sd-order-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.sd-order-row .cf { flex: 1 1 140px; }
.sc-decline-form { display: flex; flex-direction: column; gap: var(--space-2); max-width: 320px; }

/* ═══════════════════════════════════════════════════════════════════════════
   سیستمِ سکشن (قلمِ ج) — بلاک‌هایی که ادمین از پنل روی صفحات می‌گذارد.

   فقط سلکتورِ **نو**؛ هیچ سلکتورِ موجودی دست نخورد (قیدِ آلفا: site.css هر صفحهٔ
   عمومی را لمس می‌کند). فقط توکن، و ویژگیِ منطقیِ RTL — نه left/right فیزیکی.
   ═══════════════════════════════════════════════════════════════════════════ */

.page-section { position: relative; margin-block: var(--space-6); }
.page-section > section,
.page-section > aside { margin: 0; }

/* مدادِ ویرایشِ زنده — کم‌رنگ تا وقتی لازم نشده. برای غیرِ ادمین اصلاً در HTML نیست. */
.section-edit-pencil {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 2;
    line-height: 1;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
    opacity: .35;
    text-decoration: none;
    transition: opacity .15s ease;
}
.page-section:hover .section-edit-pencil,
.section-edit-pencil:focus-visible { opacity: 1; }

/* سرصفحهٔ بزرگ */
.section-hero { text-align: center; padding-block: var(--space-4); }
.section-hero h2 { margin: 0 0 var(--space-2); }
.section-hero-icon { display: block; font-size: var(--icon-size-lg); margin-block-end: var(--space-2); }

/* متنِ ساده */
.section-text h2 { margin: 0 0 var(--space-2); }
.section-text p { margin: 0; color: var(--text); }

/* متن + تصویر — دوستونی روی عرضِ کافی، روی موبایل روی‌هم */
.section-text-image { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.section-text-image-body { flex: 1 1 260px; }
.section-text-image-body h2 { margin: 0 0 var(--space-2); }
.section-text-image-body p { margin: 0; }
.section-image {
    flex: 1 1 240px;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    background: var(--img-bg);
}

/* فهرستِ نکته‌ها */
.section-list h2 { margin: 0 0 var(--space-2); }
.section-list ul { margin: 0; padding-inline-start: var(--space-5); }
.section-list li { margin-block-end: var(--space-1); }

/* دعوت به اقدام */
.section-cta {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    text-align: center;
}
.section-cta h2 { margin: 0 0 var(--space-2); }
.section-cta p { margin: 0 0 var(--space-3); }
.section-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin: 0;
}

/* پرسش و پاسخ — بی‌جاوااسکریپت، محتوا در HTMLِ اولیه (قاعدهٔ طراحیِ ۵) */
.section-faq h2 { margin: 0 0 var(--space-3); }
.section-faq dl { margin: 0; }
.section-faq dt { font-weight: 700; margin-block-start: var(--space-3); }
.section-faq dt:first-of-type { margin-block-start: 0; }
.section-faq dd { margin: var(--space-1) 0 0; padding-inline-start: 0; color: var(--muted); }

/* بنرِ تبلیغ — 🔴 باید **بی‌ابهام** تبلیغ به‌نظر برسد (ADR ۳).
   زمینهٔ متفاوت از محتوایِ سایت + برچسبِ چسبیده، تا با محتوایِ خودمان اشتباه نشود. */
.section-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.section-banner-tag {
    align-self: flex-start;
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--promo-muted);
    border: 1px solid var(--border);
}
.section-banner .section-image { flex: 0 1 160px; }
.section-banner-body { flex: 1 1 200px; }
.section-banner-body strong { display: block; margin-block-end: var(--space-1); }
.section-banner-body p { margin: 0; color: var(--muted); }
.section-banner-link { flex: 0 0 auto; align-self: center; }

/* ===== راهنما (Help Center) — فازِ Help Center =====
   ⚠ فقط کلاسِ **نو**؛ هیچ سلکتورِ موجودی این‌جا بازتعریف نمی‌شود، پس صفحاتِ دیگر
   لمس نمی‌شوند. مقادیر همه توکن‌اند (قاعدهٔ طراحیِ ۱). */
.help-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.help-item { padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--border); }
.help-item-title { display: block; font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--text); }
.help-item-title:hover { color: var(--accent); }
.help-item-summary { margin: var(--space-1) 0 0; color: var(--muted); font-size: .88rem; line-height: 1.8; }
.help-body p { margin: 0 0 var(--space-3); line-height: 1.9; }
.help-body p:last-child { margin-block-end: 0; }
.help-steps { margin: var(--space-4) 0 0; padding-inline-start: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); line-height: 1.9; }
.help-steps li::marker { color: var(--accent); font-variant-numeric: tabular-nums; }
.help-note { margin: var(--space-4) 0 0; padding: var(--space-3); border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--muted); line-height: 1.9; }
.help-siblings .help-item { border-inline-start-color: var(--accent-soft); }
/* دکمهٔ «؟» کنارِ همان بخشی که کاربر گیر می‌کند — هم‌ترازِ متنِ کنارش، نه بلوکِ جدا. */
.help-link { display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; margin-inline-start: var(--space-1); vertical-align: middle; }
.help-link:hover { color: var(--accent); }

/* ── پرسش‌هایِ پیش از توافق (فازِ ۳) ────────────────────────────────────────
   بلاکِ کاملاً نو: هیچ سلکتوری از صفحاتِ دیگر را لمس نمی‌کند (`.pre-agreement`
   و `.pa-*` جای دیگری وجود ندارند) — پس افزودنی است، نه تغییرِ رفتار.
   بازشدن با `<details>` بومی است؛ این‌جا فقط ظاهر است، نه مکانیزم. */
.pre-agreement-list { list-style: none; margin: 0; padding: 0; }
.pa-item { border-block-end: 1px solid var(--border); }
.pa-item:last-child { border-block-end: 0; }
.pa-item summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: var(--space-3) 0; cursor: pointer; }
.pa-item summary::marker { color: var(--muted); }
.pa-q { flex: 1 1 auto; color: var(--text); line-height: 1.9; }
.pa-why-label { flex: 0 0 auto; color: var(--accent); font-size: 0.85em; }
/* خطِ لبه ۱px است نه ۲px: گاردِ `SectionStylesExistTest` از بلاکِ سکشن تا انتهایِ فایل
   فقط `1px` را استثنا می‌کند (خطِ مو)، و رنگ هم به `--accent` رفت تا نازکی جبران شود. */
.pa-why { margin: 0 0 var(--space-3); padding: var(--space-3); border-inline-start: 1px solid var(--accent); background: var(--surface-2); border-radius: var(--radius-sm); color: var(--muted); line-height: 1.9; }

/* ═══ نشان‌هایِ کارگاه — طرحِ `design_handoff_workshop_badges/` (۲۰۲۶‑۰۸‑۲۱) ═══
 *
 * 🔴 **هیچ حالتِ خاکستری/قفل/کم‌رنگ این‌جا نیست، و نبودش عمدی است.** کارگاهی که
 * نشان را ندارد، ردیفش رندر نمی‌شود (شرطِ `count($badges)` در هر دو کامپوننت).
 * قاعدهٔ صریحِ طرح، و همان ADR ردیفِ ۳ از سمتِ بصری.
 *
 * ⚠ رنگ‌ها همه از توکن‌اند؛ هیچ hexی این‌جا نیست (قاعدهٔ طراحیِ ۱). خودِ پلاک و
 * نوارِ رنگی داخلِ SVGها هستند — دارایی نهایی، دست‌نخورده.
 */
/* 🔴 دو ستون، نه پنج (حکمِ صاحب پروژه ۰۸‑۲۲): گالری از ردیفِ افقیِ تمام‌عرضِ وسطِ
   صفحه به **ستونِ کناری** رفت. ردیفِ افقی فضایِ خالیِ بزرگی می‌ساخت و جایش هم
   وسطِ جریانِ متن بود، نه کنارِ هویتِ کارگاه. با چهار نشان ⇒ دو ردیفِ دوتایی. */
.badge-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-block: 0;
}
.bg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}
.bg-name { font-weight: 700; font-size: .88rem; color: var(--text); text-align: center; }
/* ⚠ در ریلِ کناری (~۳۰۰px) پلاکِ ۵۶px با دو ستون لبه‌به‌لبه می‌شد؛ کوچک‌کردنِ خودِ
   تصویر با CSS، نه عوض‌کردنِ فایلِ SVG — همان دارایی، ظرفِ باریک‌تر. */
.pp-badges-card .bg-item img { width: var(--badge-plate-side); height: var(--badge-plate-side); }
/* ⚠ `.bg-criterion` با حکمِ ۰۸‑۲۲ برداشته شد — متنِ معیار از جریانِ صفحه به
   `title`/`aria-label` رفت، پس این قاعده دیگر هیچ عنصری نداشت. */

/* ⚠ کوئریِ موبایلِ قبلی برداشته شد، چون **کارِ اضافه شده بود**: پایه از ۰۸‑۲۲
   خودش دو ستون است، پس آن کوئری همان مقدار را دوباره می‌نوشت — و قاعده‌ای که
   چیزی را عوض نمی‌کند، فردا کسی را گمراه می‌کند که فکر کند دارد کار می‌کند. */

.badge-row {
    display: flex;
    gap: var(--badge-gap);
    flex-wrap: wrap;
    align-items: center;
}
.br-item { display: inline-flex; align-items: center; gap: var(--badge-item-gap); }
.br-name { font-weight: 600; font-size: .78rem; color: var(--badge-card-ink); }
.br-more { font-size: .78rem; color: var(--muted); text-decoration: none; }
.br-more:hover { text-decoration: underline; }

/* جدولِ مرزِ «ماهوی ⟷ اطلاع‌رسانی» در صفحهٔ قوانین (بازساختِ تعهدنامه، ۰۸‑۲۲).
   دو ستون رویِ عرضِ کافی، یک ستون رویِ کم — بی نقطهٔ شکستِ نو: `auto-fit` خودش
   تصمیم می‌گیرد، پس به بدهیِ شش‌نقطه‌ایِ media-query اضافه نمی‌کند. */
.rules-boundary { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--grid-card-min), 1fr)); gap: var(--space-4); margin-block: var(--space-3); }
.rules-boundary h4 { margin: 0 0 var(--space-2); font-size: .92rem; }
.rules-boundary ul { margin: 0; padding-inline-start: var(--space-4); color: var(--muted); line-height: 2; }