@font-face{ font-family:"Vazirmatn"; src:url("./fonts/vazirmatn/Vazirmatn-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Vazirmatn"; src:url("./fonts/vazirmatn/Vazirmatn-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Vazirmatn"; src:url("./fonts/vazirmatn/Vazirmatn-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }

:root[data-theme="dark"]{ --bg:#111517; --surface:#1A1F21; --surface-sunk:#181D1F; --ink:#EAEDEC; --ink-muted:#9BA2A1; --hairline:#2E3436; --hairline-strong:#454C4E; --filament-ink:#CBAE72; }
*{ box-sizing:border-box; }
body{ margin:0; }
.wz{ font-family:"Vazirmatn",Tahoma,sans-serif; color:var(--ink); background:var(--bg); min-height:100vh; padding:clamp(14px,2vw,26px); line-height:1.7; }
.num{ font-variant-numeric:tabular-nums; }

.wz-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.wz-brand{ display:flex; align-items:baseline; gap:10px; }
.wz-brand b{ font-size:1.15rem; font-weight:600; }
.wz-brand span{ font-size:.72rem; color:var(--filament-ink); font-weight:600; }
.wz-topactions{ display:flex; gap:8px; }
.wz-chip{ border:1px solid var(--hairline-strong); background:var(--surface); color:var(--ink); border-radius:100px; min-height:38px; padding:0 14px; font:inherit; font-size:.84rem; cursor:pointer; transition:border-color .2s,color .2s; }
.wz-chip:hover{ border-color:var(--c-buildplate,#B79A5E); color:var(--filament-ink); }
.wz-chip[aria-pressed="true"]{ background:var(--c-buildplate,#B79A5E); color:#16191A; }

.wz-stepper{ display:flex; gap:6px; background:var(--surface); border:1px solid var(--hairline); border-radius:12px; padding:6px; margin-bottom:16px; overflow-x:auto; }
.wz-step{ flex:1 1 0; min-width:112px; display:flex; align-items:center; gap:9px; padding:10px 12px; border:0; border-radius:8px; background:transparent; font:inherit; color:var(--ink-muted); cursor:pointer; text-align:right; transition:background .2s,color .2s; }
.wz-step:hover{ background:var(--surface-sunk); color:var(--ink); }
.wz-step .n{ width:26px; height:26px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; font-size:.82rem; font-weight:600; background:var(--surface-sunk); border:1px solid var(--hairline); }
.wz-step .t{ font-size:.9rem; font-weight:500; white-space:nowrap; }
.wz-step.done .n{ background:#6FA542; color:#fff; border-color:#6FA542; }
.wz-step.active{ background:var(--c-anthracite,#16191A); color:#EAEDEC; }
.wz-step.active .n{ background:var(--c-buildplate,#B79A5E); color:#16191A; }
.wz-step.active .t{ color:#EAEDEC; }

.wz-main{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:900px){ .wz-main{ grid-template-columns:1fr 23rem; align-items:start; } .wz-main.expert{ grid-template-columns:1fr; } .wz-panel{ position:sticky; top:14px; } }

.wz-stage{ background:var(--c-anthracite,#14181A); border-radius:12px; padding:16px; position:relative; min-height:360px; display:grid; place-items:center; overflow:hidden; }
.wz-tools{ position:absolute; top:12px; inset-inline-start:12px; z-index:3; }
.wz-seg2{ display:inline-flex; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:100px; padding:3px; }
.wz-seg2 button{ font:inherit; font-size:.78rem; color:#A7ADAC; background:transparent; border:0; border-radius:100px; padding:6px 13px; cursor:pointer; }
.wz-seg2 button.on{ background:#EAEDEC; color:#14181A; font-weight:600; }
.wz-preview{ width:100%; }
.wz-preview svg.cfg-svg{ width:100%; height:auto; max-height:64vh; min-height:20rem; display:block; }
.wz-preview canvas{ width:100%!important; height:auto!important; border-radius:8px; }
.wz-3dloading{ color:#A7ADAC; font-size:.9rem; padding:60px 0; text-align:center; }
.wz-stagehint{ position:absolute; bottom:8px; inset-inline-end:14px; color:#8A9190; font-size:.7rem; z-index:3; margin:0; }

.wz-panel{ background:var(--surface); border:1px solid var(--hairline); border-radius:12px; padding:18px; }
.wz-panel.expert{ display:grid; gap:16px; }
.wz-panel.expert .wz-pstep{ border-bottom:1px solid var(--hairline); padding-bottom:14px; }
.wz-eyebrow{ font-size:.72rem; letter-spacing:.04em; color:var(--filament-ink); font-weight:600; margin:0 0 4px; }
.wz-q{ font-size:1.15rem; font-weight:600; margin:0 0 4px; text-wrap:balance; }
.wz-hint{ color:var(--ink-muted); font-size:.85rem; margin:0 0 14px; }

.wz-field{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:.9rem; }
.wz-field input, .wz-field select{ min-height:44px; width:9rem; text-align:center; font:inherit; font-size:1rem; border:1px solid var(--hairline-strong); border-radius:6px; background:var(--bg); color:var(--ink); }
.wz-field select{ width:11rem; text-align:right; }
.wz-units{ display:flex; gap:14px; font-size:.85rem; margin:4px 0 2px; }
.wz-units label{ display:flex; align-items:center; gap:6px; }
.wz-note{ font-size:.74rem; color:var(--ink-muted); margin:6px 0 0; }
.wz-readout{ font-size:.85rem; color:var(--ink-muted); margin:12px 0 0; }
.wz-readout b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.wz-warn{ margin:10px 0 0; padding:10px 12px; border-inline-start:3px solid var(--c-buildplate,#B79A5E); background:color-mix(in srgb,#B79A5E 12%,transparent); border-radius:6px; font-size:.82rem; }

.wz-callout{ margin-top:12px; padding:12px; border-radius:6px; border-inline-start:3px solid var(--orchid,#C76B94); background:color-mix(in srgb,#C76B94 9%,transparent); font-size:.85rem; }
.wz-callout b{ color:#C76B94; }
.wz-callout.wz-birch{ border-color:#D8B98A; background:color-mix(in srgb,#D8B98A 14%,transparent); }
.wz-callout.wz-birch b{ color:var(--filament-ink); }
.wz-seg{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.wz-seg button{ font:inherit; font-size:.8rem; border:1px solid var(--hairline-strong); background:var(--bg); color:var(--ink); border-radius:100px; padding:6px 12px; cursor:pointer; }
.wz-seg button.on{ background:#C76B94; color:#fff; border-color:#C76B94; }

.wz-cards{ display:grid; gap:8px; }
.wz-card{ display:flex; flex-direction:column; gap:2px; text-align:right; padding:11px 13px; border:1px solid var(--hairline); border-radius:6px; background:var(--bg); cursor:pointer; font:inherit; color:var(--ink); transition:border-color .2s,background .2s; }
.wz-card:hover{ border-color:var(--c-buildplate,#B79A5E); }
.wz-card.on{ border-color:var(--c-buildplate,#B79A5E); background:color-mix(in srgb,#B79A5E 8%,transparent); }
.wz-card .cn{ font-weight:600; font-size:.92rem; }
.wz-card .cd{ font-size:.78rem; color:var(--ink-muted); }

.wz-swrow{ margin:10px 0; }
.wz-swwrap{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.wz-slabel{ font-size:.8rem; color:var(--ink-muted); display:block; margin-bottom:6px; width:100%; }
.wz-sw{ display:inline-flex; align-items:center; gap:6px; font-size:.82rem; cursor:pointer; }
.wz-sw i{ width:18px; height:18px; border-radius:5px; border:1px solid var(--hairline-strong); display:inline-block; }
.wz-sw.on i{ outline:2px solid var(--filament-ink); outline-offset:2px; }
.wz-row2{ display:flex; gap:8px; margin-top:4px; }
.wz-paint{ font-size:.8rem; color:#2A9DB0; margin-top:8px; }

.wz-binrow{ display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.wz-binrow .ico{ width:30px; height:26px; flex:0 0 auto; }
.wz-binrow .lbl{ flex:1; color:var(--ink-muted); }
.wz-binrow input{ width:5.5rem; min-height:40px; text-align:center; font:inherit; border:1px solid var(--hairline-strong); border-radius:6px; background:var(--bg); color:var(--ink); }

.wz-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:8px; overflow:hidden; margin:4px 0 12px; }
.wz-grid2 div{ background:var(--surface); padding:9px 12px; }
.wz-grid2 dt{ font-size:.72rem; color:var(--ink-muted); margin:0; }
.wz-grid2 dd{ margin:0; font-weight:600; }
.wz-pay{ font-size:.86rem; margin:8px 0; }
.wz-pay .pl{ display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed var(--hairline); }
.wz-pay .pl.total{ border-bottom:0; font-size:1.05rem; font-weight:600; color:var(--filament-ink); padding-top:8px; }
.wz-drawers{ margin:10px 0; border:1px solid var(--hairline); border-radius:8px; padding:10px; }
.wz-drawer{ display:flex; justify-content:space-between; font-size:.85rem; padding:3px 0; }
.wz-carttotal{ border-top:1px solid var(--hairline); margin-top:4px; padding-top:6px; font-weight:600; color:var(--filament-ink); }
.wz-cart{ margin-inline-start:12px; padding:5px 12px; border-radius:100px; background:color-mix(in srgb,var(--c-buildplate,#B79A5E) 16%,transparent); color:var(--filament-ink); font-size:.8rem; font-weight:600; }
.wz-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.wz-checkout{ flex:1 1 100%; background:var(--c-buildplate,#B79A5E)!important; border-color:var(--c-buildplate,#B79A5E)!important; color:#16191A!important; font-weight:600; }

.wz-bar{ position:sticky; bottom:0; margin-top:16px; background:var(--surface); border:1px solid var(--hairline); border-radius:12px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; box-shadow:0 -6px 22px rgba(0,0,0,.06); flex-wrap:wrap; }
.wz-price{ display:flex; align-items:baseline; gap:8px; }
.wz-price .pv{ font-size:1.35rem; font-weight:600; color:var(--filament-ink); }
.wz-price .pl{ font-size:.75rem; color:var(--ink-muted); }
.wz-nav{ display:flex; gap:8px; }
.wz-btn{ min-height:44px; padding:0 18px; border-radius:6px; border:1px solid var(--hairline-strong); background:var(--bg); color:var(--ink); font:inherit; cursor:pointer; transition:background .2s,border-color .2s; }
.wz-btn:hover{ border-color:var(--ink); }
.wz-btn.primary{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.wz-btn.ghost{ background:transparent; }
.wz-btn:disabled{ opacity:.4; cursor:default; }

.wz-toast{ position:fixed; inset-block-end:22px; inset-inline:0; margin:auto; width:max-content; max-width:92vw; background:var(--c-anthracite,#16191A); color:#EAEDEC; padding:11px 20px; border-radius:100px; opacity:0; transform:translateY(10px); transition:.3s; z-index:20; font-size:.92rem; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.wz-toast.show{ opacity:1; transform:none; }
.wz-toast.ok{ background:#3A7D3A; }
:focus-visible{ outline:2px solid var(--filament-ink); outline-offset:2px; }
@media(prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }