/* فونت برند مادا — جاسازی‌شده داخل فایل؛ به هیچ فایل و پوشه‌ای نیاز ندارد */



:root{
  --primary:#FFB3AC; --on-primary:#571E19;
  --primary-container:#8E1310; --on-primary-container:#FFDAD5;
  --secondary-container:#5D3F3B; --on-secondary-container:#FFDAD5;
  --surface:#141011; --on-surface:#EAE0DE; --surface-dim:#100C0D;
  --surface-container-low:#1D1718; --surface-container:#211B1C;
  --surface-container-high:#2C2526; --surface-container-highest:#373030;
  --on-surface-variant:#D0C4C1; --outline:#998E8C; --outline-variant:#524442;
  --error-container:#93000A; --on-error-container:#FFDAD6;
  --warn:#E8C26C; --warn-container:#4A3A10;
  --shape-xs:4px; --shape-sm:8px; --shape-md:12px; --shape-lg:16px; --shape-full:100px;
  --e1:0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --e2:0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
}
html[data-theme="light"]{
  --primary:#B3261E; --on-primary:#FFFFFF;
  --primary-container:#FFDAD5; --on-primary-container:#410001;
  --secondary-container:#FFDAD5; --on-secondary-container:#442925;
  --surface:#FFF8F6; --on-surface:#231918; --surface-dim:#E8DCDA;
  --surface-container-low:#FEF1EE; --surface-container:#F8EBE8;
  --surface-container-high:#F2E5E2; --surface-container-highest:#ECE0DD;
  --on-surface-variant:#534341; --outline:#857370; --outline-variant:#D8C2BE;
  --error-container:#FFDAD6; --on-error-container:#410002;
  --warn:#7A5900; --warn-container:#FFDF9E;
  --e1:0 1px 2px rgba(0,0,0,.12), 0 1px 3px 1px rgba(0,0,0,.08);
  --e2:0 1px 2px rgba(0,0,0,.12), 0 2px 6px 2px rgba(0,0,0,.08);
}
html[data-theme="light"] #viewerCol{background:radial-gradient(1100px 560px at 50% 85%, #efe2df 0%, #e2d4d1 70%)}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{background:var(--surface); color:var(--on-surface); font-family:'Noora',Tahoma,sans-serif}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; font-size:22px; vertical-align:middle}
/* ---- Vector SVG Icons ---- */
.ico{display:inline-block; width:1.15em; height:1.15em; vertical-align:-0.15em; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; flex-shrink:0}
.ico use{pointer-events:none}
.num{font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:embed}
.display-sm{font-size:32px; font-weight:900; line-height:42px}
.label-md{font-size:12px; font-weight:500; letter-spacing:.03em}

.appbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  height:64px; padding:0 18px; background:var(--surface); border-bottom:1px solid var(--surface-container-high)}
.appbar .mark{height:34px; width:auto; display:block}
.appbar .t{flex:1}
.appbar .t b{font-size:17px; font-weight:800}
.appbar .t span{display:block; font-size:11px; color:var(--on-surface-variant)}
.hdrAi{border:0; background:linear-gradient(135deg,#E0392F,#8E1310); color:#fff; height:38px; padding:0 14px; border-radius:100px; cursor:pointer;
  display:flex; align-items:center; gap:6px; font-family:inherit; font-size:12.5px; font-weight:700; flex:none}
.hdrAi .material-symbols-outlined, .hdrAi .ico{width:18px; height:18px; font-size:18px}
.hdrTheme{border:0; background:var(--surface-container-high); color:var(--on-surface); width:38px; height:38px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:none}
.hdrTheme .material-symbols-outlined, .hdrTheme .ico{width:20px; height:20px; font-size:20px}
@media(max-width:920px){
  .appbar{height:56px; padding:0 12px; gap:10px}
  .appbar .mark{height:28px}
  .appbar .t b{font-size:15px}
  .appbar .t span, .hdrBadge{display:none}
  .hdrAi{width:38px; padding:0; justify-content:center; border-radius:50%}
  .hdrAiTxt{display:none}
}
.badge{background:var(--secondary-container); color:var(--on-secondary-container);
  border-radius:var(--shape-sm); padding:5px 12px; font-size:11.5px; font-weight:500}

.wrap{display:grid; grid-template-columns:minmax(360px,460px) 1fr; min-height:calc(100vh - 64px)}
@media(max-width:920px){ .wrap{grid-template-columns:1fr} }
#panelCol{padding:16px 16px 48px; display:flex; flex-direction:column; gap:14px; overflow-y:auto}

.card{background:var(--surface-container-low); border-radius:var(--shape-md); padding:18px}
.card h2{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.card h2 .material-symbols-outlined, .card h2 .ico{color:var(--primary); font-size:20px}
.card h2 span{font-size:14px; font-weight:500}
.card h2 em{font-style:normal; font-size:11px; color:var(--on-surface-variant); margin-inline-start:auto}

#drop{border:1.5px dashed var(--outline-variant); border-radius:var(--shape-md); padding:24px 16px;
  text-align:center; cursor:pointer; transition:.2s; position:relative}
#drop:hover,#drop.on{background:var(--surface-container); border-color:var(--primary)}
#drop .material-symbols-outlined, #drop .ico.dropIco{font-size:34px; color:var(--on-surface-variant)}
#drop b{display:block; margin-top:8px; font-size:14px; font-weight:500}
#drop p{font-size:12px; color:var(--on-surface-variant); margin-top:4px}
#fileChip{display:none; margin-top:12px; align-items:center; gap:8px; background:var(--secondary-container);
  color:var(--on-secondary-container); border-radius:var(--shape-sm); padding:8px 12px; font-size:12.5px; width:fit-content; max-width:100%}
#fileChip .material-symbols-outlined, #fileChip .ico{font-size:18px; width:18px; height:18px}

.field{position:relative; margin-top:14px}
.field label{position:absolute; top:7px; inset-inline-start:14px; font-size:11px; color:var(--on-surface-variant); pointer-events:none; z-index:1}
.field select,.field input{width:100%; appearance:none; background:var(--surface-container-highest); color:var(--on-surface);
  border:0; border-bottom:1.5px solid var(--outline); border-radius:var(--shape-xs) var(--shape-xs) 0 0;
  padding:24px 14px 8px; font-family:inherit; font-size:14px; outline:none; transition:border-color .15s}
.field select:focus,.field input:focus{border-bottom-color:var(--primary)}
.field::after{content:''; position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%); width:10px; height:6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:contain; pointer-events:none}
.field.noarrow::after{content:''; display:none}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.techGrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.techGrid .tchip:nth-child(5):last-child{grid-column:1/-1}
.useGrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.uchip{background:var(--surface-container); border:1.5px solid var(--outline-variant); border-radius:var(--shape-md);
  padding:12px; cursor:pointer; transition:.15s; display:flex; align-items:center; gap:10px}
.uchip:hover{background:var(--surface-container-high)}
.uchip.sel{border-color:var(--primary); background:var(--secondary-container); color:var(--on-secondary-container)}
.uchip .material-symbols-outlined, .uchip .ico{font-size:22px; width:22px; height:22px; color:var(--primary)}
.uchip b{font-size:13px; display:block}
.uchip small{font-size:10.5px; color:var(--on-surface-variant); display:block; margin-top:2px}
.uchip.sel small{color:inherit; opacity:.8}
#advWrap{display:none; margin-top:14px; padding-top:14px; border-top:1px dashed var(--outline-variant)}
#advToggle{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--on-surface-variant);
  background:none; border:0; cursor:pointer; font-family:inherit; padding:4px 0}
#advToggle:hover{color:var(--on-surface)}
.trust{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 14px}
.trust div{display:flex; align-items:flex-start; gap:8px; font-size:11.5px; color:var(--on-surface-variant); line-height:1.7}
.trust .material-symbols-outlined, .trust .ico{font-size:18px; width:18px; height:18px; color:var(--primary); margin-top:1px}
.tchip{border:1px solid var(--outline-variant); background:var(--surface-container); border-radius:var(--shape-sm);
  padding:11px 10px; cursor:pointer; transition:.12s; user-select:none}
.tchip b{font-size:14px; font-weight:700}
.tchip small{display:block; font-size:10.5px; color:var(--on-surface-variant); margin-top:2px}
.tchip:hover{background:var(--surface-container-high)}
.tchip.sel{background:var(--secondary-container); border-color:transparent; color:var(--on-secondary-container)}
.tchip.sel small{color:var(--on-secondary-container); opacity:.75}
.tchip.sel b::before{content:'✓ '; color:var(--primary); font-weight:900; margin-inline-end:4px}

.geoList{background:var(--surface-container); border-radius:var(--shape-md); overflow:hidden}
.gitem{display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--surface-container-high)}
.gitem:last-child{border-bottom:0}
.gitem .material-symbols-outlined, .gitem .ico{font-size:19px; width:19px; height:19px; color:var(--on-surface-variant)}
.gitem span{flex:1; font-size:13px; color:var(--on-surface-variant)}
.gitem b{font-weight:500; font-size:13.5px}

.priceCard{background:var(--primary-container); color:var(--on-primary-container); border-radius:var(--shape-lg); padding:20px; box-shadow:var(--e1)}
.priceCard .label-md{opacity:.8}
#priceMain small{font-size:15px; font-weight:400; opacity:.85}
#priceRange{font-size:12px; opacity:.85; margin-top:2px}
.pline{display:flex; justify-content:space-between; font-size:12.5px; padding:6px 0; border-top:1px solid rgba(255,218,213,.18); opacity:.92}
#breakdown{margin-top:12px}
.note{display:flex; gap:8px; font-size:12px; color:var(--on-surface-variant); line-height:1.8; margin-top:12px}
.note .material-symbols-outlined, .note .ico{font-size:17px; width:17px; height:17px; margin-top:2px; flex:none}
.alert{display:flex; gap:10px; border-radius:var(--shape-md); padding:12px 14px; font-size:12.5px; line-height:1.7; margin-top:10px}
.alert .material-symbols-outlined, .alert .ico{font-size:19px; width:19px; height:19px; flex:none; margin-top:1px}
.alert.warn{background:var(--warn-container); color:var(--warn)}
.alert.error{background:var(--error-container); color:var(--on-error-container)}
.alert.ok{background:#1E3A2A; color:#8FD9A8}

.btn{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:52px; border:0; border-radius:var(--shape-full); font-family:inherit;
  font-size:15px; font-weight:600; cursor:pointer; margin-top:14px; transition:.2s}
.btn.filled{background:var(--primary-container); color:var(--on-primary-container)}
.btn.tonal{background:var(--secondary-container); color:var(--on-secondary-container); height:44px; font-size:13.5px}
.prow{display:flex; align-items:center; gap:10px; background:var(--surface-container); border-radius:var(--shape-sm);
  padding:9px 12px; margin-bottom:8px; font-size:12px}
.prow .pthumb{width:42px; height:42px; border-radius:var(--shape-sm); object-fit:cover; background:var(--surface-container-high); flex:none}
.prow .pthumb-ico{width:42px; height:42px; border-radius:var(--shape-sm); background:var(--surface-container-high);
  display:flex; align-items:center; justify-content:center; color:var(--on-surface-variant); flex:none}
.prow .pinfo{flex:1; min-width:0}
.prow .pinfo b{display:block; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .pinfo span{color:var(--on-surface-variant); font-size:11px}
.prow .pprice{font-weight:500}
.prow .pdel{border:0; background:none; color:var(--on-surface-variant); cursor:pointer; padding:4px; border-radius:50%}
.prow .pdel:hover{background:var(--surface-container-high); color:var(--on-error-container)}
.btn.filled:hover{box-shadow:var(--e2)}
.btn:disabled{background:var(--surface-container-high); color:var(--on-surface-variant); cursor:not-allowed; box-shadow:none}
.ripple{position:absolute; border-radius:50%; background:rgba(255,255,255,.25); transform:scale(0); animation:rip .5s ease-out}
@keyframes rip{to{transform:scale(3); opacity:0}}
#summaryOut{display:none; margin-top:12px; background:var(--surface-container); border-radius:var(--shape-md);
  padding:14px; font-size:12px; white-space:pre-wrap; line-height:1.9}

#viewerCol{position:sticky; top:16px; height:calc(100vh - 32px); align-self:start;
  background:radial-gradient(1100px 560px at 50% 85%, #221819 0%, var(--surface-dim) 70%);
  margin:16px; margin-inline-start:0; border-radius:var(--shape-lg); overflow:hidden}
@media(max-width:920px){ .wrap{grid-template-columns:1fr} }
#cv{width:100%; height:100%; display:block; touch-action:none}
#vhint{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--outline-variant); pointer-events:none}
#vhint .material-symbols-outlined, #vhint .ico{font-size:56px; width:56px; height:56px; font-variation-settings:'wght' 300; opacity:.7}
#vhint p{font-size:13px; color:var(--on-surface-variant); opacity:.7}
.vchip{position:absolute; bottom:14px; inset-inline-start:14px; display:none; align-items:center; gap:8px;
  background:var(--surface-container-high); border-radius:var(--shape-sm); padding:7px 12px; font-size:11.5px; color:var(--on-surface-variant); box-shadow:var(--e1)}
.vchip .num{color:var(--on-surface)}
#axisChip{inset-inline-start:auto; inset-inline-end:14px; bottom:auto; top:14px}
#vTools{position:absolute; top:14px; inset-inline-start:14px; display:none; flex-direction:column; gap:8px; z-index:5}
#vTools button{width:42px; height:42px; border:0; border-radius:var(--shape-md); cursor:pointer;
  background:var(--surface-container-high); color:var(--on-surface); box-shadow:var(--e1); transition:.15s;
  display:flex; align-items:center; justify-content:center}
#vTools button:hover{background:var(--secondary-container); color:var(--on-secondary-container)}
#vTools .material-symbols-outlined, #vTools .ico{font-size:21px; width:21px; height:21px}

#dropOverlay{position:fixed; inset:0; z-index:999; display:none; align-items:center; justify-content:center;
  background:rgba(20,16,17,.88); border:3px dashed var(--primary); pointer-events:none}
#dropOverlay p{font-size:20px; font-weight:700; color:var(--on-primary-container)}

#stickyCta{position:fixed; bottom:0; left:0; right:0; z-index:50; display:none;
  background:var(--surface-container-high); border-top:1px solid var(--outline-variant);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -4px 20px rgba(0,0,0,.35)}
#stickyCta .inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:14px}
#stickyCta .tot{flex:1; min-width:0}
#stickyCta .tot small{display:block; font-size:11px; color:var(--on-surface-variant)}
#stickyCta .tot b{font-size:17px; font-weight:700}
#stickyCta button{height:46px; padding:0 22px; border:0; border-radius:var(--shape-md); cursor:pointer;
  background:var(--primary); color:var(--on-primary); font-family:inherit; font-size:14px; font-weight:700;
  display:flex; align-items:center; gap:8px}
#stickyCta button .ico{width:20px; height:20px}
body.has-sticky{padding-bottom:76px}

/* ---- سوییچر پنل ---- */
.modeSeg{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; background:var(--surface-container);
  border-radius:var(--shape-full); padding:5px; margin-bottom:16px}
.modeSeg button{border:0; background:transparent; color:var(--on-surface-variant); font-family:inherit;
  font-size:12.5px; font-weight:700; padding:10px 6px; border-radius:var(--shape-full); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px; transition:.2s}
.modeSeg button .material-symbols-outlined, .modeSeg button .ico{font-size:18px; width:18px; height:18px}
.modeSeg button.on{background:linear-gradient(135deg, var(--primary-container), #6E0B0B); color:var(--on-primary-container); box-shadow:var(--e1)}
html[data-theme="light"] .modeSeg button.on{background:linear-gradient(135deg, #B3261E, #7F1310); color:#fff}
/* ---- جلا ---- */
.card{transition:box-shadow .2s, transform .2s}
.card:hover{box-shadow:var(--e2)}
.card h2 .material-symbols-outlined, .card h2 .ico{background:linear-gradient(135deg, var(--primary-container), #6E0B0B);
  color:var(--on-primary-container); width:34px; height:34px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:19px; padding:6px; box-sizing:border-box}
html[data-theme="light"] .card h2 .material-symbols-outlined,
html[data-theme="light"] .card h2 .ico{background:linear-gradient(135deg,#B3261E,#7F1310); color:#fff}
.priceCard{background:linear-gradient(150deg, #8E1310 0%, #5d0c0a 60%, #46110f 100%) !important; box-shadow:var(--e2); color:#fff !important}
.priceCard *{color:#fff}
.priceCard .label-md{opacity:.9; font-size:13px}
#priceMain{letter-spacing:.5px; font-size:34px; font-weight:700; line-height:1.3; margin:6px 0 4px}
#priceMain small{font-size:15px; opacity:.9}
#priceRange{font-size:13px; opacity:.95; line-height:1.9}
.priceCard .pline{font-size:13px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.16); display:flex; justify-content:space-between; gap:12px}
.priceCard .pline span{opacity:.88}
.priceCard .pline b{font-weight:700; font-size:13.5px}
.uchip.sel{box-shadow:0 0 0 1.5px var(--primary) inset, var(--e1); transform:translateY(-1px)}
#stickyCta{backdrop-filter:blur(14px); background:color-mix(in srgb, var(--surface-container-high) 88%, transparent)}
#stickyCta button{background:linear-gradient(135deg, var(--primary-container), #6E0B0B); color:var(--on-primary-container)}
html[data-theme="light"] #stickyCta button{background:linear-gradient(135deg,#B3261E,#7F1310); color:#fff}
#expertNote{display:none; background:var(--surface-container-high); border-radius:var(--shape-md); padding:16px 14px; line-height:2; font-size:13px}
#expertNote b{color:var(--primary)}

#aiBox{border:1.5px solid var(--outline-variant); border-radius:var(--shape-lg); overflow:hidden;
  background:color-mix(in srgb, var(--surface-dim) 72%, #000 28%); box-shadow:inset 0 2px 12px rgba(0,0,0,.25)}
html[data-theme="light"] #aiBox{background:color-mix(in srgb, var(--surface-dim) 80%, #fff 20%); box-shadow:inset 0 2px 10px rgba(0,0,0,.07)}
#aiHead{display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:12.5px; font-weight:700;
  background:var(--surface-container-high); border-bottom:1px solid var(--outline-variant)}
#aiHead .material-symbols-outlined{font-size:18px; color:var(--primary)}
#aiReset{margin-inline-start:auto; border:0; background:none; color:var(--on-surface-variant); font-family:inherit;
  font-size:11px; cursor:pointer; display:flex; align-items:center; gap:4px}
#aiReset:hover{color:var(--on-surface)}
#aiMsgs{max-height:320px; min-height:120px; overflow-y:auto; padding:12px; display:flex; flex-direction:column}
#aiInputRow{display:flex; gap:8px; padding:10px; border-top:1px solid var(--outline-variant); background:var(--surface-container)}
#aiQ{flex:1; background:var(--surface-container-high); border:1px solid var(--outline-variant); border-radius:var(--shape-md);
  color:var(--on-surface); font-family:inherit; font-size:13px; padding:10px 12px; resize:none; line-height:1.8; max-height:90px}
#aiSend{width:44px; height:44px; flex:none; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(135deg, var(--primary-container), #6E0B0B); color:var(--on-primary-container);
  display:flex; align-items:center; justify-content:center}
html[data-theme="light"] #aiSend{background:linear-gradient(135deg,#B3261E,#7F1310); color:#fff}
#aiSend:disabled{opacity:.5}
.aiB-u{background:var(--surface-container-high); border-radius:12px 12px 4px 12px; padding:8px 12px;
  margin:4px 0 4px 28px; font-size:12.5px; line-height:1.9; align-self:flex-end; max-width:85%}
.aiB-a{background:var(--secondary-container); color:var(--on-secondary-container); border-radius:12px 12px 12px 4px;
  padding:10px 13px; margin:4px 28px 4px 0; font-size:13px; line-height:2.05; white-space:pre-wrap; align-self:flex-start; max-width:90%}

.stepNav{display:flex; align-items:center; gap:8px; margin-bottom:16px; padding:4px 2px}
.snItem{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--on-surface-variant); white-space:nowrap}
.snItem b{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--surface-container-high); font-size:12px; transition:.2s}
.snItem.active b{background:var(--primary); color:var(--on-primary)}
.snItem.active{color:var(--on-surface); font-weight:700}
.snItem.done b{background:var(--secondary-container); color:var(--on-secondary-container)}
.snItem.done{cursor:pointer}
.snItem.lock{opacity:.45}
.snLine{flex:1; height:1.5px; background:var(--outline-variant); min-width:12px}
#aiTip{position:fixed; inset-inline-end:18px; bottom:88px; z-index:59; background:var(--surface-container-highest); color:var(--on-surface);
  padding:10px 14px; border-radius:14px; font-size:12.5px; box-shadow:var(--e2); max-width:260px; display:none; line-height:1.8}
body.has-sticky #aiTip{bottom:160px}
#aiFab .fabTxt{font-size:13.5px; font-weight:700; position:relative; z-index:2}
#aiFab{position:fixed; inset-inline-end:18px; bottom:18px; z-index:60; height:56px; padding:0 20px 0 16px; gap:8px; border-radius:100px;
  border:0; cursor:pointer; background:linear-gradient(135deg,#E0392F,#8E1310); color:#fff;
  box-shadow:0 6px 24px rgba(224,57,47,.45); display:flex; align-items:center; justify-content:center; overflow:hidden;
  animation:fabPulse 2.6s ease-in-out infinite}
#aiFab .material-symbols-outlined, #aiFab .ico{font-size:26px; width:26px; height:26px; position:relative; z-index:2}
#aiFab::after{content:''; position:absolute; top:-60%; left:-80%; width:60%; height:220%; transform:rotate(25deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:fabShine 3.2s ease-in-out infinite}
@keyframes fabShine{0%,55%{left:-80%} 75%{left:130%} 100%{left:130%}}
@keyframes fabPulse{0%,100%{box-shadow:0 6px 24px rgba(224,57,47,.45)} 50%{box-shadow:0 6px 34px rgba(224,57,47,.8)}}
body.has-sticky #aiFab{bottom:92px}
@media(max-width:920px){ body.chatopen{overflow:hidden} }
#aiChat{position:fixed; inset-inline-end:14px; bottom:14px; z-index:70; width:min(390px, calc(100vw - 20px));
  height:min(560px, calc(100vh - 40px)); display:none; flex-direction:column; border-radius:18px; overflow:hidden;
  background:var(--surface-container-high); border:1px solid var(--outline-variant); box-shadow:0 18px 60px rgba(0,0,0,.5)}
#aiChat.open{display:flex; flex-direction:column}
#aiChatHead{flex:none; display:flex; align-items:center; gap:10px; padding:13px 16px;
  background:linear-gradient(135deg,#E0392F,#8E1310); color:#fff}
#aiChatHead b{flex:1; font-size:13.5px}
#aiChatHead button{border:0; background:rgba(255,255,255,.15); color:#fff; width:30px; height:30px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center}
#aiChatHead .material-symbols-outlined, #aiChatHead .ico{font-size:18px; width:18px; height:18px}
#aiMsgs{flex:1 1 0; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px; background:var(--surface); display:flex; flex-direction:column; gap:8px}
.aiB{max-width:85%; padding:10px 13px; font-size:12.5px; line-height:2; border-radius:14px; white-space:pre-wrap}
.aiB.u{align-self:flex-start; background:var(--primary-container); color:var(--on-primary-container); border-end-start-radius:4px}
.aiB.a{align-self:flex-end; background:var(--surface-container-highest); color:var(--on-surface); border-end-end-radius:4px}
#aiInRow{flex:none; display:flex; gap:8px; padding:10px; background:var(--surface-container-high); border-top:1px solid var(--outline-variant)}
#aiQ2{flex:1; border:1px solid var(--outline-variant); background:var(--surface); color:var(--on-surface);
  border-radius:12px; padding:11px 13px; font-family:inherit; font-size:13px; outline:none}
#aiSend{border:0; width:44px; border-radius:12px; background:var(--primary); color:var(--on-primary); cursor:pointer;
  display:flex; align-items:center; justify-content:center}
#aiSend .ico{width:18px; height:18px}

.modeSeg{grid-template-columns:1fr; gap:10px; background:none; padding:0; border-radius:0}
.modeSeg button{justify-content:flex-start; text-align:start; padding:14px 16px; border-radius:var(--shape-md);
  background:var(--surface-container); border:1.5px solid var(--outline-variant); gap:14px; font-weight:400}
.modeSeg button .material-symbols-outlined, .modeSeg button .ico{font-size:28px; width:28px; height:28px; color:var(--primary); flex:none}
.modeSeg button b{display:block; font-size:14px; font-weight:700; margin-bottom:3px}
.modeSeg button small{display:block; font-size:11.5px; line-height:1.8; opacity:.8}
.modeSeg button.on{border-color:transparent}
.modeSeg button.on .material-symbols-outlined, .modeSeg button.on .ico{color:inherit}
.uchip{padding:14px 12px}
.uchip .material-symbols-outlined, .uchip .ico{font-size:26px; width:26px; height:26px}

.wizBack{border:0;background:none;color:var(--on-surface-variant);font-family:inherit;font-size:12px;cursor:pointer;padding:0 0 10px;display:block}
.wizBack:hover{color:var(--primary)}
.wizNext{width:100%;height:50px;border:0;border-radius:var(--shape-md);cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  background:linear-gradient(135deg,#E0392F,#8E1310);color:#fff;box-shadow:var(--e1)}

/* ---- UX refactor ---- */
.hero{margin-bottom:14px}
.hero h1{font-size:20px; font-weight:700; margin:0 0 6px; line-height:1.5}
.hero p{margin:0; font-size:13px; color:var(--on-surface-variant); line-height:1.8}
.card h2.q{font-size:16px; margin-bottom:14px}
.card h2.q::before{display:none}
.linkBtn{border:0; background:none; color:var(--primary); font-family:inherit; font-size:12.5px; font-weight:700; cursor:pointer; padding:4px 0; text-align:start}
.linkBtn.muted{color:var(--on-surface-variant); font-weight:400}
.linkBtn:hover{text-decoration:underline}
.fiRow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px}
.fiRow b{font-size:14px}
#fileInfo{margin-top:6px}
.pathGrid{display:grid; grid-template-columns:1fr; gap:12px}
.pathOpt{position:relative; text-align:start; border:1.5px solid var(--outline-variant); background:var(--surface-container); border-radius:var(--shape-lg);
  padding:18px 16px 16px; cursor:pointer; font-family:inherit; color:var(--on-surface); display:flex; flex-direction:column; gap:4px; transition:.18s}
.pathOpt:hover{border-color:var(--primary); box-shadow:var(--e1)}
.pathOpt.dominant{border-color:var(--primary); background:linear-gradient(160deg, var(--secondary-container), var(--surface-container))}
.pathOpt.sel{box-shadow:0 0 0 2px var(--primary) inset}
.pathOpt .pico{font-size:30px; width:30px; height:30px; color:var(--primary); margin-bottom:6px}
.pathOpt b{font-size:16px}
.pathOpt small{font-size:12.5px; color:var(--on-surface-variant); font-weight:700}
.pathOpt p{margin:6px 0 10px; font-size:12.5px; line-height:1.9; color:var(--on-surface-variant)}
.pathOpt .pcta{font-size:13px; font-weight:700; color:var(--primary)}
.pbadge{position:absolute; top:12px; inset-inline-end:12px; background:var(--primary); color:var(--on-primary); font-size:10.5px; padding:3px 9px; border-radius:100px; font-weight:700}
.prioGrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pchip{background:var(--surface-container); border:1.5px solid var(--outline-variant); border-radius:var(--shape-md); padding:12px; cursor:pointer;
  display:flex; align-items:center; gap:9px; font-size:13px; transition:.15s}
.pchip .material-symbols-outlined, .pchip .ico{font-size:21px; width:21px; height:21px; color:var(--primary)}
.pchip.sel{border-color:var(--primary); background:var(--secondary-container); color:var(--on-secondary-container)}
#recoBox{margin-top:18px; padding:14px 16px; border-radius:var(--shape-md); background:var(--surface-container-high); border-inline-start:3px solid var(--primary)}
.recoHead{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--on-surface-variant); margin-bottom:6px}
.recoHead .material-symbols-outlined, .recoHead .ico{font-size:17px; width:17px; height:17px; color:var(--primary)}
.recoMain{font-size:18px; font-weight:700; letter-spacing:.2px}
#recoWhy{margin-top:8px; font-size:12.5px; line-height:1.9; color:var(--on-surface-variant)}
.qtyRow{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.qtyRow label{font-size:13px; font-weight:700}
.stepper{display:flex; align-items:center; border:1.5px solid var(--outline-variant); border-radius:100px; overflow:hidden; background:var(--surface-container)}
.stepper button{width:42px; height:42px; border:0; background:none; color:var(--on-surface); font-size:20px; cursor:pointer; font-family:inherit}
.stepper button:hover{background:var(--surface-container-high)}
.stepper input{width:64px; height:42px; border:0; background:none; text-align:center; font-family:inherit; font-size:15px; font-weight:700; color:var(--on-surface); -moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
#quoteMeta{font-size:13.5px; opacity:.92; margin-bottom:6px}
.quoteNote{font-size:12px; color:var(--on-surface-variant); line-height:1.9; margin:12px 0 0}
#orderSum{font-size:13px; font-weight:700; margin:4px 0 8px; display:flex; align-items:center; gap:8px}
.trust.compact{display:flex; flex-wrap:wrap; gap:8px 16px; margin:14px 0}
.trust.compact span{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--on-surface-variant)}
.trust.compact .material-symbols-outlined, .trust.compact .ico{font-size:16px; width:16px; height:16px; color:var(--primary)}
/* در دسکتاپ ویوئر همیشه در ستون دوم نمایش داده می‌شود و پیام راهنما و گرید فعال است */
@media(max-width: 920px) {
  body.nomodel #viewerCol{display:none}
  body.nomodel .wrap{grid-template-columns:1fr; max-width:680px; margin:0 auto; min-height:auto}
}


#aiChatHead b small{display:block; font-size:11px; font-weight:400; opacity:.85; margin-top:1px}
#aiQuick{flex:none; margin-top:auto; display:flex; flex-wrap:wrap; gap:6px; padding:8px 10px 4px;
  background:var(--surface-container-high); max-height:96px; overflow-y:auto; scrollbar-width:thin}
#aiQuick::-webkit-scrollbar{width:6px; height:6px}
#aiQuick::-webkit-scrollbar-thumb{background:var(--outline-variant); border-radius:3px}
#aiQuick button{flex:none; border:1px solid var(--outline-variant); background:var(--surface); color:var(--on-surface); border-radius:100px;
  padding:7px 12px; font-family:inherit; font-size:11.5px; cursor:pointer; white-space:nowrap}
#aiQuick button:hover{border-color:var(--primary); color:var(--primary)}
.aiB.typing{display:flex; gap:4px; align-items:center; padding:12px 16px}
.aiB.typing i{width:6px; height:6px; border-radius:50%; background:var(--on-surface-variant); opacity:.5; animation:tdot 1.2s infinite}
.aiB.typing i:nth-child(2){animation-delay:.2s} .aiB.typing i:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,80%,100%{transform:translateY(0);opacity:.4} 40%{transform:translateY(-4px);opacity:1}}


#sliceBtn{position:relative; overflow:hidden; isolation:isolate; transition:none}
#sliceBtn::before{content:''; position:absolute; inset-inline-start:0; top:0; bottom:0; width:var(--p,0%);
  background:linear-gradient(90deg, rgba(224,57,47,.35), rgba(224,57,47,.6)); z-index:-1; transition:width .25s ease}
html[data-theme="light"] #sliceBtn::before{background:linear-gradient(90deg, rgba(179,38,30,.22), rgba(179,38,30,.42))}
#sliceBtn.busy{cursor:progress}
#sliceBtn.done::before{width:100%; background:linear-gradient(90deg, rgba(46,125,50,.35), rgba(46,125,50,.55))}

/* ============ موبایل — نسخه یکپارچه ============ */
@media(max-width:920px){
  body{font-size:15px}
  .wrap{grid-template-columns:1fr; min-height:auto}
  #panelCol{padding:12px 12px 20px; gap:12px; display:flex; flex-direction:column}
  .card{padding:16px 14px; border-radius:16px}
  .card h2{font-size:15.5px; margin-bottom:12px}
  .hero h1{font-size:19px} .hero p{font-size:13px}
  /* ویوئر: زیر کارت آپلود، جمع‌شونده، بدون چسبندگی */
  body.nomodel #viewerCol{display:none}
  #viewerCol{order:2; margin:0 12px; height:34vh; position:relative; top:auto; border-radius:16px; overflow:hidden;
    box-shadow:none; transition:height .22s ease}
  body.vcollapsed #viewerCol{height:0; margin-bottom:0}
  #vTools{top:10px; inset-inline-start:10px; gap:6px}
  #vTools button{width:38px; height:38px}
  /* لمس راحت */
  .field select, .field input, .stepper input{min-height:46px; font-size:15px}
  .uchip{padding:14px 12px}
  .pathOpt{padding:16px 14px}
  .btn, .wizNext{min-height:50px}
  .linkBtn{padding:8px 0; font-size:13px}
  #stickyCta{padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
  #stickyCta .tot b{font-size:16px}
  #stickyCta button{height:44px; padding:0 18px; font-size:13.5px}
  /* دکمه شناور مشاور */
  #aiFab{inset-inline-end:12px; bottom:12px; height:50px; padding:0 16px 0 13px; box-shadow:0 4px 18px rgba(224,57,47,.5)}
  #aiFab .fabTxt{font-size:13px}
  body.has-sticky #aiFab{bottom:80px}
  #aiTip{inset-inline-end:12px; bottom:72px; max-width:220px; font-size:12px}
  body.has-sticky #aiTip{bottom:140px}
  /* چت تمام‌صفحه */
  #aiChat{position:fixed; left:0; right:0; bottom:0; top:auto; width:100%;
    height:auto; max-height:80vh; max-height:80dvh; min-height:0;
    border-radius:20px 20px 0 0; border:0; box-shadow:0 -10px 40px rgba(0,0,0,.45)}
  #aiMsgs{min-height:38vh; max-height:52vh; max-height:52dvh}
  #aiChat::before{content:''; position:absolute; top:7px; left:50%; width:40px; height:4px; margin-left:-20px;
    background:rgba(255,255,255,.55); border-radius:2px; z-index:3}
  #aiChatHead{padding:16px 14px 12px}
  #aiChatHead b{font-size:15px}
  #aiMsgs{padding:14px 12px; gap:10px}
  .aiB{max-width:88%; font-size:14px; line-height:1.95}
  #aiQuick{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; max-height:none; padding:8px 10px 6px; scrollbar-width:none}
  #aiQuick::-webkit-scrollbar{display:none}
  #aiQuick button{font-size:12.5px; padding:9px 14px}
  #aiInRow{padding:10px 10px calc(12px + env(safe-area-inset-bottom)); gap:8px}
  #aiQ2{font-size:15px; padding:13px 14px; min-height:48px}
  #aiSend{width:52px; min-height:48px}
}
/* ============ نمایش پاسخ دستیار ============ */
.aiB.a b{font-weight:800}
.aiB.a .aiLine{display:block}
.aiB.a .aiBul{display:flex; gap:7px; margin:3px 0}
.aiB.a .aiBul::before{content:'•'; color:var(--primary); font-weight:800}
.aiPick{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.aiPick button{border:1px solid var(--primary); background:transparent; color:var(--primary); border-radius:100px;
  padding:7px 13px; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer}
.aiPick button.solid{background:var(--primary); color:var(--on-primary)}
.aiWho{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--on-surface-variant); margin-bottom:3px}
.aiWho i{width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#E0392F,#8E1310); display:inline-block}

#aiBack{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:65; display:none}
body.chatopen #aiBack{display:block}
@media(min-width:921px){ #aiBack{display:none !important} }

/* ---- لندینگ ---- */
.heroTag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:var(--primary);
  background:var(--secondary-container); padding:6px 12px; border-radius:100px; margin-bottom:12px}
.heroTag .material-symbols-outlined, .heroTag .ico{font-size:16px; width:16px; height:16px}
.hero h1{font-size:24px; line-height:1.55; margin:0 0 10px}
.hero h1 em{font-style:normal; color:var(--primary); position:relative}
.hero h1 em::after{content:''; position:absolute; left:0; right:0; bottom:2px; height:6px; background:var(--secondary-container); z-index:-1; border-radius:3px}
.hero p{font-size:13.5px; line-height:1.95}
.heroSteps{display:flex; gap:8px; margin:14px 0 6px}
.heroSteps div{flex:1; display:flex; align-items:center; gap:7px; font-size:12px; background:var(--surface-container); border-radius:10px; padding:9px 10px}
.heroSteps b{width:22px; height:22px; border-radius:50%; background:var(--primary); color:var(--on-primary); display:flex; align-items:center; justify-content:center; font-size:11px; flex:none}
#drop{position:relative; overflow:hidden; background:linear-gradient(160deg, var(--surface-container), var(--surface-container-low));
  border:2px dashed var(--outline-variant); transition:border-color .2s, transform .2s}
#drop:hover{border-color:var(--primary)}
#drop .material-symbols-outlined, #drop .ico{font-size:44px; width:44px; height:44px; color:var(--primary); animation:dropFloat 2.8s ease-in-out infinite}
@keyframes dropFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
#drop::after{content:''; position:absolute; inset:-40%; background:conic-gradient(from 0deg, transparent 0 70%, rgba(224,57,47,.10) 85%, transparent 100%);
  animation:dropSpin 9s linear infinite; pointer-events:none}
@keyframes dropSpin{to{transform:rotate(360deg)}}
#drop > *{position:relative; z-index:1}

/* نمونه‌های سریع تستی */
.samplePills{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:12px}
.sampleLabel{font-size:11.5px; color:var(--on-surface-variant); opacity:.85}
.sampleBtn{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--outline-variant); background:var(--surface-container); color:var(--on-surface);
  font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:.18s}
.sampleBtn:hover{background:var(--secondary-container); color:var(--on-secondary-container); border-color:var(--primary); transform:translateY(-1px)}
.sampleBtn .ico{width:15px; height:15px; color:var(--primary)}

.worksHead{display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13.5px}
.worksHead .material-symbols-outlined, .worksHead .ico{color:var(--primary); font-size:20px; width:20px; height:20px}
.worksHead small{margin-inline-start:auto; font-size:11px; color:var(--on-surface-variant)}
.works{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; -webkit-overflow-scrolling:touch}
.works::-webkit-scrollbar{display:none}
.works img{width:96px; height:96px; border-radius:12px; object-fit:cover; flex:none; background:var(--surface-container)}
.tgCard{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--on-surface);
  background:linear-gradient(135deg, #e9f4fb, #f7fbfe); border:1px solid #cfe6f5}
html[data-theme="dark"] .tgCard{background:linear-gradient(135deg,#1a2a36,#182129); border-color:#2b3f4e}
.tgIco{font-size:30px; color:#2AABEE; flex:none; transform:rotate(-20deg); display:flex; align-items:center; justify-content:center}
.tgIco .ico{width:30px; height:30px; color:#2AABEE}
.tgCard b{display:block; font-size:14px; margin-bottom:3px}
.tgCard small{display:block; font-size:12px; line-height:1.8; color:var(--on-surface-variant)}
.tgGo{font-size:12px; font-weight:700; color:#2AABEE; white-space:nowrap; flex:none}
body:not(.nomodel) .landingOnly{display:none}
/* ---- قفل قیمت تا تأیید شماره ---- */
#gate{background:var(--surface-container-high); border:1.5px solid var(--primary); border-radius:var(--shape-lg); padding:18px 16px; margin-bottom:14px}
#gate h3{margin:0 0 6px; font-size:15.5px; display:flex; align-items:center; gap:8px}
#gate h3 .material-symbols-outlined, #gate h3 .ico{color:var(--primary); font-size:20px; width:20px; height:20px}
#gate p{margin:0 0 12px; font-size:12.5px; color:var(--on-surface-variant); line-height:1.9}
#gate .btn.filled{width:100%; height:46px; border:0; border-radius:var(--shape-md); cursor:pointer; font-family:inherit; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px}
#gate .btn.filled .ico{width:20px; height:20px}
#gateCode{letter-spacing:6px; text-align:center; font-size:20px; font-weight:700; direction:ltr}
#gateMsg{font-size:12px; margin-top:8px; min-height:18px}
.gated .priceCard, .gated #breakdown{filter:blur(7px); pointer-events:none; user-select:none}
.gated #intentCard{display:none !important}
/* حداقل سفارش تکنولوژی (SLS/SLM) */
#techMinLine{margin-top:8px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.14); font-size:12.5px; line-height:1.9}
#techMinLine b{font-weight:800}
/* سؤال تمایل به ادامه */
#intentCard{background:var(--surface-container-high); border:1.5px solid var(--primary); border-radius:var(--shape-lg); padding:16px; margin:12px 0 4px; animation:intentIn .35s ease}
@keyframes intentIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
#intentCard h3{margin:0 0 6px; font-size:15px; display:flex; align-items:flex-start; gap:8px; line-height:1.8}
#intentCard h3 .material-symbols-outlined, #intentCard h3 .ico{color:var(--primary); flex:none; margin-top:2px; font-size:20px; width:20px; height:20px}
#intentCard p{margin:0 0 12px; font-size:12.5px; color:var(--on-surface-variant); line-height:1.9}
#intentCard .ibtns{display:grid; grid-template-columns:1fr 1fr; gap:8px}
#intentCard .ibtns .btn{height:46px; border:0; border-radius:var(--shape-md); cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px}
#intentCard .ibtns .btn .ico{width:18px; height:18px}
#intentCard .ibtns .btn.tonal{background:var(--surface-container-highest); color:var(--on-surface)}
#intentMsg{font-size:12.5px; margin-top:10px; line-height:1.9; min-height:0}
@media (max-width:520px){ #intentCard .ibtns{grid-template-columns:1fr} }
#intentWhy{display:none}
#intentWhy .rchips{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px}
.rchip{background:var(--surface-container); border:1.5px solid var(--outline-variant); border-radius:999px; padding:9px 14px; font-size:12.5px; cursor:pointer; user-select:none; transition:.12s; line-height:1.6}
.rchip:hover{background:var(--surface-container-high)}
.rchip.sel{border-color:var(--primary); background:var(--secondary-container); color:var(--on-secondary-container); font-weight:700}
#intentNote{width:100%; box-sizing:border-box; border:1.5px solid var(--outline-variant); border-radius:var(--shape-md); background:var(--surface); color:var(--on-surface); font-family:inherit; font-size:13px; padding:10px 12px; resize:vertical; min-height:44px; display:none}
#intentWhy .wbtns{display:flex; gap:8px; align-items:center; margin-top:10px}
#intentWhy .wbtns .btn.filled{flex:1; height:44px; border:0; border-radius:var(--shape-md); cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px}
#intentWhy .wbtns .btn.filled .ico{width:18px; height:18px}
#intentWhy .wbtns .linkBtn{font-size:12.5px}