/* ============================================================================
   BoxGen Studio — v3 (dark studio shell)
   ==========================================================================*/
@font-face { font-family:'Vazirmatn'; src:url('../fonts/vazirmatn-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../fonts/vazirmatn-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('../fonts/vazirmatn-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --bg:#070a11; --bg2:#0a0f1a; --surf:#0d1320; --surf2:#111a2b; --surf3:#16223a;
  --line:rgba(148,176,224,.12); --line2:rgba(148,176,224,.24);
  --txt:#e9effc; --dim:#8ba0c4; --dim2:#66799a;
  --amber:#ffb648; --amber2:#ff8a5c; --cyan:#57d3ff; --violet:#a78bfa;
  --green:#3ddc97; --red:#ff5d73; --engrave:#5aa9ff;
  --r:12px; --r2:9px; --shadow:0 18px 48px rgba(0,0,0,.45);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,182,72,.07), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(87,211,255,.06), transparent 55%),
    var(--bg);
  color:var(--txt); font:13px/1.6 'Vazirmatn',system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:rgba(255,182,72,.28)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(148,176,224,.16);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(148,176,224,.3);background-clip:padding-box}
h1,h2,h3,p{margin:0}
button,input,select{font:inherit;color:inherit}
input,select{
  background:var(--surf2); border:1px solid var(--line); border-radius:var(--r2);
  padding:7px 10px; outline:none; transition:border-color .16s, box-shadow .16s, background .16s;
  min-width:0;
}
input:hover,select:hover{border-color:var(--line2)}
input:focus,select:focus{border-color:rgba(255,182,72,.55); box-shadow:0 0 0 3px rgba(255,182,72,.12); background:var(--surf3)}
input[type=number]{font-variant-numeric:tabular-nums}
input::placeholder{color:var(--dim2)}
.hidden{display:none!important}

/* ── top bar ───────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  padding:10px 16px; backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(10,15,26,.92), rgba(10,15,26,.72));
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex:0 0 auto}
.brand .logo{width:34px;height:34px;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,182,72,.16),rgba(255,138,92,.05));
  border:1px solid var(--line); border-radius:11px}
.brand .logo svg{width:26px;height:26px}
.brand .btext{display:flex;flex-direction:column;line-height:1.25}
.brand b{font-size:14.5px;letter-spacing:.2px}
.brand b .studio{color:var(--amber);font-weight:700}
.brand i{font-style:normal;font-size:10.5px;color:var(--dim2);letter-spacing:.3px}

.viewseg{display:flex;gap:3px;padding:3px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:11px}
.viewseg button{
  display:flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--dim);
  padding:7px 13px;border-radius:8px;cursor:pointer;transition:.16s;font-size:12.5px
}
.viewseg button:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.viewseg button.on{background:var(--surf3);color:#fff}
.ico{width:16px;height:16px;flex:0 0 auto}

.topactions{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.btn{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:rgba(255,255,255,.035);color:var(--txt);padding:8px 13px;border-radius:10px;
  cursor:pointer;transition:border-color .16s,background .16s,color .16s;
  font-size:12.5px;white-space:nowrap
}
.btn:hover{background:var(--surf3);border-color:var(--line2);color:var(--txt)}
.btn:active{background:var(--surf)}
.btn:focus-visible{outline:2px solid rgba(255,182,72,.5);outline-offset:2px}
.btn.primary{background:var(--amber);color:#1b1204;
  border-color:transparent;font-weight:700}
.btn.primary:hover{background:#ffc76c;color:#1b1204}
.btn.ghost{background:transparent}
.btn.icononly{padding:8px 10px}
.btn.kbd{padding:7px 10px;color:var(--dim);gap:8px}
.btn.kbd kbd{font:11px var(--mono);padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.06);
  border:1px solid var(--line);color:var(--dim2)}
.btn.tiny{padding:5px 9px;font-size:11.5px;border-radius:8px}
.btn.wide{width:100%;justify-content:center}
.btn.on{border-color:rgba(255,182,72,.6);color:var(--amber);background:rgba(255,182,72,.08)}

/* export dropdown */
.dl{position:relative}
.dlmenu{
  position:absolute; inset-inline-start:0; top:calc(100% + 8px); width:290px; z-index:50;
  background:var(--surf2); border:1px solid var(--line2);
  border-radius:14px; padding:6px; box-shadow:0 10px 26px rgba(0,0,0,.32);
  display:none; animation:pop .14s ease
}
.dlmenu.open{display:block}
.dlmenu button{
  display:flex;flex-direction:column;gap:1px;width:100%;text-align:start;padding:9px 11px;
  border:0;background:transparent;border-radius:9px;cursor:pointer;transition:.14s
}
.dlmenu button:hover{background:rgba(255,182,72,.09)}
.dlmenu b{font-size:12.5px;color:var(--txt)}
.dlmenu i{font-style:normal;font-size:10.5px;color:var(--dim2)}
.dlmenu button.hl{border:1px solid rgba(255,182,72,.32);background:rgba(255,182,72,.07);margin-top:4px}
.dlmenu button.hl b{color:var(--amber)}
@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ── shell ─────────────────────────────────────────────────────────────── */
.wrap{display:grid;grid-template-columns:372px minmax(0,1fr);gap:14px;padding:14px;align-items:start}
.panel{display:flex;flex-direction:column;gap:10px;min-width:0}
.sec{
  background:var(--surf);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden
}
.sec>summary{
  display:flex;align-items:center;gap:8px;padding:11px 13px;cursor:pointer;list-style:none;
  user-select:none;transition:background .15s
}
.sec>summary:hover{background:rgba(255,255,255,.03)}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::after{content:'▾';margin-inline-start:auto;color:var(--dim2);font-size:11px;transition:transform .18s}
.sec[open]>summary::after{transform:rotate(180deg)}
.sec .hd{font-size:12.5px;font-weight:700;letter-spacing:.2px}
.sec small{font-size:10px;color:var(--dim2);padding:1px 6px;border:1px solid var(--line);border-radius:20px}
.secbody{padding:0 13px 13px}

.badge{
  font:11px var(--mono); color:var(--amber); background:rgba(255,182,72,.1);
  border:1px solid rgba(255,182,72,.25); padding:1px 7px; border-radius:20px
}
.search{width:100%;margin-bottom:8px;background:var(--bg2)}
.catrow{display:flex;gap:5px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px;scrollbar-width:none}
.catrow::-webkit-scrollbar{display:none}
.catrow button{
  flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--dim);
  padding:5px 9px;border-radius:20px;cursor:pointer;font-size:11.5px;transition:.15s
}
.catrow button:hover{color:var(--txt);border-color:var(--line2)}
.catrow button.on{background:rgba(255,182,72,.12);border-color:rgba(255,182,72,.45);color:var(--amber);font-weight:700}

/* gallery */
.presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:46vh;overflow:auto;padding-inline-end:2px}
/* کاشی‌های دسته: تصویر یک نمونهٔ نماینده برای هر دسته */
.cattiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:46vh;overflow:auto;padding-inline-end:2px}
.ctile{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);background:var(--surf2);
  border-radius:11px;overflow:hidden;cursor:pointer;text-align:start;transition:.18s}
.ctile:hover{border-color:rgba(255,182,72,.42);background:var(--surf3)}
.cthumb{display:block;aspect-ratio:4/3;overflow:hidden}
.cthumb svg{width:100%;height:100%;display:block}
.cmeta{display:flex;flex-direction:column;gap:1px;padding:6px 8px 8px}
.cmeta b{font-size:12px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmeta i{font-style:normal;font-size:10px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* سرتیتر دسته: یک ردیف کامل داخل همان شبکه؛ بقیهٔ چیدمان دست‌نخورده */
.pgroup-h{grid-column:1/-1;display:flex;align-items:baseline;gap:6px;margin:2px 0 0;
  padding:2px 2px 4px;font-size:11.5px;font-weight:700;color:var(--dim);
  border-bottom:1px solid var(--line)}
.pgroup-h .en{font-style:normal;font-weight:400;font-size:10px;color:var(--dim2)}
.pgroup-h b{margin-inline-start:auto;font-weight:600;font-size:10.5px;color:var(--dim2)}
.pcard{
  position:relative;padding:0;border:1px solid var(--line);background:var(--surf2);
  border-radius:11px;cursor:pointer;overflow:hidden;text-align:start;transition:.18s
}
.pcard:hover{border-color:rgba(255,182,72,.42);background:var(--surf3)}
.pcard.on{border-color:var(--amber)}
.pthumb{display:block;aspect-ratio:4/3;overflow:hidden}
.pthumb svg{width:100%;height:100%;display:block;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .pthumb svg{transform:scale(1.06)}
.pmeta{display:flex;flex-direction:column;gap:1px;padding:6px 8px 8px}
.pmeta b{font-size:11.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmeta i{font-style:normal;font-size:10px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star,.cmptog{
  position:absolute;top:5px;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  font-size:10px;line-height:1;background:rgba(6,10,18,.72);border:1px solid var(--line);
  color:var(--dim2);z-index:2;transition:.14s
}
.star{inset-inline-start:5px}
.cmptog{inset-inline-end:5px}
.star:hover,.cmptog:hover{color:var(--amber);border-color:rgba(255,182,72,.5)}
.star.on,.cmptog.on{background:var(--amber);color:#20140a;border-color:transparent}
.cmpbar{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--line)}
.cmpcount{flex:1 1 auto;font-size:11px;color:var(--dim2)}

/* schema form */
.sf{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.sf-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.sf-cell>span{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-cell>span small{font-size:9.5px;color:var(--dim2)}
.sf-cell input,.sf-cell select{width:100%;padding:6px 8px;font-size:12px}
.sf-wide{grid-column:1/-1}
.check{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);cursor:pointer}
.check input{width:15px;height:15px;accent-color:var(--amber)}
.row{display:flex;gap:7px;align-items:flex-end;margin-top:8px;flex-wrap:wrap}
.row .inline{flex:1 1 110px;display:flex;flex-direction:column;gap:4px;margin:0}
.row .inline>span{font-size:10.5px;color:var(--dim)}
.row .grow{flex:1 1 100%}
.filebtn{
  position:relative;display:flex;align-items:center;gap:7px;justify-content:center;
  border:1px dashed var(--line2);border-radius:10px;padding:8px;cursor:pointer;color:var(--dim);
  font-size:11.5px;width:100%
}
.filebtn:hover{border-color:rgba(255,182,72,.5);color:var(--amber)}
.filebtn input{display:none}
.saves{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.saveitem{display:flex;align-items:center;gap:6px;font-size:11.5px;border:1px solid var(--line);
  border-radius:8px;padding:5px 8px}
.saveitem span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.help p{margin:0 0 6px;font-size:11.5px;color:var(--dim);line-height:1.75}
.jobcard{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.jobcard>div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px;
  padding:7px 9px;display:flex;flex-direction:column;gap:1px}
.jobcard i{font-style:normal;font-size:10px;color:var(--dim2)}
.jobcard b{font-size:13px;font-variant-numeric:tabular-nums}
.jobcard .jobnote{grid-column:1/-1;background:none;border:0;padding:2px;font-size:10px;color:var(--dim2)}
.warnbox{display:none}
.warnbox.on{display:block;margin-top:8px;padding:8px 10px;border-radius:9px;
  background:rgba(255,93,115,.07);border:1px solid rgba(255,93,115,.28);font-size:11px;color:#ffc3cb}
.warnbox b{display:block;margin-bottom:3px;color:var(--red);font-size:11px}
.warnbox p{margin:2px 0;line-height:1.65}

/* ── stage ─────────────────────────────────────────────────────────────── */
.stage{display:flex;flex-direction:column;gap:10px;min-width:0}
.statbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:11.5px;color:var(--dim)}
.chip .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.dot.amber{background:var(--amber);box-shadow:0 0 8px rgba(255,182,72,.7)}
.dot.cyan{background:var(--cyan);box-shadow:0 0 8px rgba(87,211,255,.7)}
.dot.violet{background:var(--violet);box-shadow:0 0 8px rgba(167,139,250,.7)}
.dot.green{background:var(--green);box-shadow:0 0 8px rgba(61,220,151,.7)}
.spacer{flex:1 1 auto}
.hint{font-size:10.5px;color:var(--dim2)}

.pane{background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative}
.pane-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.tleft{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.tright2{display:flex;align-items:center;gap:8px}
.ic{
  border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--dim);
  width:28px;height:28px;border-radius:8px;cursor:pointer;display:grid;place-items:center;
  font-size:13px;transition:.14s
}
.ic:hover{color:var(--txt);border-color:var(--line2);background:rgba(255,255,255,.06)}
.ic.on{color:var(--amber);border-color:rgba(255,182,72,.5);background:rgba(255,182,72,.1)}
.sheetlabel{font:11px var(--mono);color:var(--dim2)}
.layers{display:flex;gap:9px;font-size:10.5px;color:var(--dim2)}
.lg{display:inline-flex;align-items:center;gap:4px}
.lg i{width:12px;height:2px;border-radius:2px;display:inline-block}
.lg.cut i{background:#e2001a}
.lg.score i{background:#0aa03c}
.lg.engrave i{background:#0b6fe0}
.exslider{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--dim2)}
.exslider input[type=range]{width:92px;accent-color:var(--amber);background:none;border:0;padding:0}

.canvas-scroll{
  overflow:auto;max-height:54vh;padding:14px;
  background-image:radial-gradient(rgba(148,176,224,.14) 1px, transparent 1px);
  background-size:22px 22px
}
.canvas{width:100%;transition:width .2s;display:flex;flex-direction:column;gap:10px;align-items:center}
.canvas>svg{width:100%;height:auto;background:#0b1220;border-radius:10px;border:1px solid var(--line);
  box-shadow:inset 0 0 60px rgba(0,0,0,.5)}
.canvas .sep{height:1px;width:100%;background:var(--line)}
.canvas .err{color:var(--red);font-size:12px;padding:20px}
.iso{min-height:52vh;display:grid;place-items:center;cursor:grab;
  background:radial-gradient(70% 60% at 50% 30%,#142239 0%,#0a1220 65%,#080d17 100%)}
.iso.dragging{cursor:grabbing}
.iso svg{width:100%;height:auto;max-height:56vh;display:block}
.iso-meta{display:flex;gap:12px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid var(--line);
  font-size:11px;color:var(--dim)}
.iso-meta b{color:var(--txt)}

.partsbar{background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ptitle{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:700}
.selinfo{font-weight:400;font-size:11px;color:var(--amber)}
.ptable{max-height:22vh;overflow:auto}
.ptable table{width:100%;border-collapse:collapse;font-size:11.5px}
.ptable th{position:sticky;top:0;background:var(--surf);color:var(--dim2);font-weight:500;
  text-align:start;padding:7px 12px;border-bottom:1px solid var(--line);font-size:10.5px}
.ptable td{padding:6px 12px;border-bottom:1px solid rgba(148,176,224,.07);color:var(--dim)}
.ptable tr:hover td{background:rgba(255,255,255,.03);color:var(--txt)}
.ptable tr.sel td{background:rgba(255,182,72,.08);color:var(--amber)}

/* ── footer, toast, modals ─────────────────────────────────────────────── */
.ftr{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:18px 14px 26px;color:var(--dim2);font-size:11px}
.ftr b{color:var(--dim)}
.sepdot{opacity:.5}
.toast{
  position:fixed;inset-inline:0;bottom:22px;margin:auto;width:max-content;max-width:90vw;z-index:80;
  background:rgba(14,22,36,.96);border:1px solid var(--line2);color:var(--txt);
  padding:10px 16px;border-radius:12px;box-shadow:var(--shadow);font-size:12px;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s
}
.toast.show{opacity:1;transform:none}
.toast.bad{border-color:rgba(255,93,115,.5);color:#ffc3cb}

.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:18px;
  background:rgba(4,8,14,.72);backdrop-filter:blur(6px);animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{width:min(1100px,100%);max-height:88vh;overflow:auto;background:linear-gradient(180deg,var(--surf2),var(--bg2));
  border:1px solid var(--line2);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.modal-head b{font-size:14px}
.modal-hint{flex:1 1 auto;font-size:11px;color:var(--dim2)}
.cmp-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.cmpcol{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;
  background:rgba(255,255,255,.02)}
.cmpthumb{aspect-ratio:4/3;border-radius:9px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(70% 60% at 50% 30%,#16243a,#0a1220 70%)}
.cmpthumb svg{width:100%;height:100%;display:block}
.cmpname{font-size:12px;font-weight:700;line-height:1.5}
.cmpcol table{width:100%;border-collapse:collapse;font-size:11px}
.cmpcol td{padding:3px 2px;border-bottom:1px dashed rgba(148,176,224,.1)}
.cmpcol td:first-child{color:var(--dim2)}
.cmpcol td:last-child{text-align:end;color:var(--txt);font-variant-numeric:tabular-nums}

.cmdk-card{width:min(620px,100%);background:linear-gradient(180deg,var(--surf2),var(--surf));
  border:1px solid var(--line2);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.cmdk-card input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:14px 16px;font-size:14px;background:transparent}
.cmdk-card input:focus{box-shadow:none;background:transparent}
.cmdk-list{max-height:52vh;overflow:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;font-size:12.5px}
.cmdk-item small{margin-inline-start:auto;color:var(--dim2);font-size:10.5px}
.cmdk-item .k{font:11px var(--mono);color:var(--dim2);border:1px solid var(--line);border-radius:5px;
  padding:0 5px;min-width:22px;text-align:center}
.cmdk-item.on,.cmdk-item:hover{background:rgba(255,182,72,.1);color:var(--amber)}
.cmdk-foot{padding:8px 12px;border-top:1px solid var(--line);font-size:10.5px;color:var(--dim2);display:flex;gap:6px;align-items:center}
.cmdk-foot kbd{font:10px var(--mono);border:1px solid var(--line);border-radius:4px;padding:0 4px}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .presets{max-height:34vh}
  .canvas-scroll{max-height:46vh}
}
@media (max-width:760px){
  .topbar{gap:8px;padding:8px 10px;flex-wrap:wrap}
  .brand .btext{display:none}
  .viewseg button span{display:none}
  .btn.kbd span{display:none}
  .btn.kbd kbd{display:none}
  .only-mobile{display:inline-flex}
  .wrap{padding:10px}
  .panel{order:2}
  .panel:not(.collapsed){display:flex}
  .panel.collapsed{display:none}
  .statbar .hint{display:none}
  .presets{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}
  .iso{min-height:40vh}
}
@media (min-width:761px){ .only-mobile{display:none} }
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}


/* ── 4-step wizard ──────────────────────────────────────────────────────── */
.wz{width:min(980px,100%)}
.wz-steps{display:flex;gap:6px;flex:1 1 auto;justify-content:center}
.wz-steps span{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  border:1px solid var(--line);color:var(--dim2);background:rgba(255,255,255,.03)
}
.wz-steps span.on{background:var(--amber);color:#20140a;border-color:transparent;font-weight:700}
.wz-steps span.done{border-color:rgba(255,182,72,.5);color:var(--amber)}
.wz-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:14px}
.wz-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.wz-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.wz-prev{aspect-ratio:4/3;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 30%,#16243a,#0a1220 70%)}
.wz-prev svg{width:100%;height:100%;display:block}
.wz-facts{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--dim)}
.wz-facts b{color:var(--txt);float:inline-end;font-variant-numeric:tabular-nums}
.wz-nav{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.wz-hint{flex:1 1 auto;text-align:center;font-size:11px;color:var(--dim2)}
.wz-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.wz-card{border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:11px;
  padding:11px;cursor:pointer;text-align:start;transition:.15s;display:flex;flex-direction:column;gap:3px}
.wz-card:hover{border-color:rgba(255,182,72,.45);background:rgba(255,182,72,.06);transform:translateY(-1px)}
.wz-card.on{border-color:var(--amber);background:rgba(255,182,72,.1)}
.wz-card b{font-size:12.5px}
.wz-card i{font-style:normal;font-size:10.5px;color:var(--dim2);line-height:1.5}
.wz-field{display:flex;flex-direction:column;gap:4px}
.wz-field>span{font-size:10.5px;color:var(--dim)}
.wz-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.wz-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.wz-dl .btn{justify-content:center}
.wz-note{font-size:11px;color:var(--dim2);line-height:1.7}
@media (max-width:760px){ .wz-body{grid-template-columns:minmax(0,1fr)} .wz-prev{aspect-ratio:16/10} }

.vsep{width:1px;height:18px;background:var(--line);margin:0 2px;display:inline-block}
.canvas [data-part]{cursor:pointer}
.layed .canvas [data-part]{cursor:grab}
.layed .canvas [data-part]:hover{filter:brightness(1.25)}

.jobsheet{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin-top:2px}
.jobsheet #suggestOut{font-size:10.5px;color:var(--dim2);font-variant-numeric:tabular-nums}


/* ── joint library ──────────────────────────────────────────────────────── */
.jointlib{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.jcard{border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:10px;
  padding:8px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:5px;text-align:start}
.jcard:hover{border-color:rgba(255,182,72,.45);background:rgba(255,182,72,.06);transform:translateY(-1px)}
.jcard.on{border-color:var(--amber)}
.jthumb{border-radius:6px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);padding:3px}
.jthumb svg{width:100%;height:auto;display:block}
.jthumb path{stroke:#e2001a}
.jcard b{font-size:11.5px}
.jcard i{font-style:normal;font-size:10px;color:var(--dim2);line-height:1.5}

/* ── light theme ────────────────────────────────────────────────────────── */
html[data-theme="light"]{
  --bg:#f2f5fa; --bg2:#e9eef7; --surf:#ffffff; --surf2:#f6f8fc; --surf3:#eaf0fa;
  --line:rgba(22,38,64,.13); --line2:rgba(22,38,64,.26);
  --txt:#17233c; --dim:#4b5b79; --dim2:#6d7c96;
  --shadow:0 18px 48px rgba(30,45,70,.14);
}
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(255,182,72,.18), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(87,211,255,.16), transparent 55%),
    var(--bg);
}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.92)}
html[data-theme="light"] .sec{background:#fff}
html[data-theme="light"] .iso{background:radial-gradient(70% 60% at 50% 30%,#ffffff 0%,#eef3fb 65%,#e6ecf6 100%)}
html[data-theme="light"] .canvas>svg{background:#ffffff;box-shadow:inset 0 0 40px rgba(20,35,60,.05)}
html[data-theme="light"] .canvas-scroll{background-image:radial-gradient(rgba(22,38,64,.13) 1px,transparent 1px)}
html[data-theme="light"] .pcard{background:#f7f9fd}
html[data-theme="light"] .pcard .star,html[data-theme="light"] .pcard .cmptog{background:rgba(255,255,255,.9)}
html[data-theme="light"] .wz-prev,html[data-theme="light"] .cmpthumb{background:radial-gradient(70% 60% at 50% 30%,#ffffff,#eef3fb 70%)}
html[data-theme="light"] .btn{background:rgba(22,38,64,.04)}
html[data-theme="light"] .btn:hover{background:rgba(22,38,64,.08)}
html[data-theme="light"] .toast{background:rgba(255,255,255,.97);color:var(--txt)}
html[data-theme="light"] .jthumb path{stroke:#c8102e}


/* ============================================================================
   v3.8 — quick/full flow (flat surfaces are in the rules above)
   ==========================================================================*/

/* ── quick card (landing state) ────────────────────────────────────────── */
.quick{
  display:flex;flex-direction:column;gap:10px;padding:13px;
  background:var(--surf);border:1px solid var(--line2);border-radius:var(--r);
}
.qhead{display:flex;align-items:center;gap:8px}
.qhead b{font-size:13px;letter-spacing:.2px}
.qhead small{
  margin-inline-start:auto;font-size:10px;color:var(--dim2);
  border:1px solid var(--line);border-radius:20px;padding:1px 7px;
}
.qseg .viewseg{width:100%;flex-wrap:wrap;background:var(--bg2)}
.qseg .viewseg button{flex:1 1 auto;justify-content:center;padding:7px 9px;font-size:12px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:8px}
.qgrid .sf-cell>span{font-size:10.5px;color:var(--dim)}
.qgrid .sf-cell input,.qgrid .sf-cell select{
  width:100%;padding:9px 10px;font-size:13.5px;font-variant-numeric:tabular-nums;
  background:var(--bg2);border-color:var(--line);
}
.qgrid .sf-cell input:focus,.qgrid .sf-cell select:focus{background:var(--surf2)}
.btn.cont{justify-content:center;padding:11px 14px;font-size:12.5px;border-radius:10px;letter-spacing:.2px}
.qhint{margin:0;text-align:center;font-size:10.5px;line-height:1.7;color:var(--dim2)}

/* ── advanced block ────────────────────────────────────────────────────── */
.more{display:flex;flex-direction:column;gap:10px;animation:moreIn .16s ease;scroll-margin-top:64px}
.morehead{display:flex;align-items:center;gap:8px;padding:2px 3px 0}
.morehead .hd{font-size:11.5px;font-weight:700;color:var(--dim2);letter-spacing:.3px}
.morehead .btn{margin-inline-start:auto}
@keyframes moreIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.chip.mode{background:transparent;border:1px solid var(--line2);color:var(--dim);font-size:11px}

/* light theme: keep the flat look readable */
html[data-theme="light"] .quick{background:#fff;border-color:#dbe3ef}
html[data-theme="light"] .qseg .viewseg{background:#f3f6fb}
html[data-theme="light"] .btn{background:#f4f7fc;border-color:#dbe3ef}
html[data-theme="light"] .btn:hover{background:#eaf0f9}
html[data-theme="light"] .btn.primary{background:var(--amber);color:#231604}
html[data-theme="light"] .viewseg button.on{background:#e3ebf7;color:#12203a}
html[data-theme="light"] .ic{background:#f4f7fc;border-color:#dbe3ef}
html[data-theme="light"] .morehead .hd{color:#5b6b86}
html[data-theme="light"] .pcard:hover{background:#eef3fb}

/* ============================================================================
   v4.0 — tokens, icon sprite, undo/redo, panel edits, empty states
   ==========================================================================*/

/* icon sprite + one metrics for every glyph */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.btn .ico,.ic .ico,.filebtn .ico{width:16px;height:16px;flex:0 0 auto}
.ic .ico{width:15px;height:15px}

/* skip link (keyboard users land here first) */
.skip{
  position:absolute;inset-inline-start:8px;top:-40px;z-index:var(--z-toast);
  padding:8px 12px;border-radius:var(--rad-2);background:var(--amber);color:#1b1204;
  font-weight:700;text-decoration:none;transition:top .15s;
}
.skip:focus{top:8px}

/* disabled buttons keep the flat look */
.btn:disabled,.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn:disabled:hover,.btn[disabled]:hover{background:var(--surf2);border-color:var(--line2)}

/* "most used" chips above the gallery */
.usagerow{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 6px}
.usagerow:empty{display:none}
.uchip{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--surf2);color:var(--dim);padding:4px 9px;border-radius:var(--rad-pill);
  font-size:var(--fs-xs);cursor:pointer;transition:background .14s,color .14s,border-color .14s;
}
.uchip:hover{color:var(--txt);border-color:var(--line2);background:var(--surf3)}
.uchip b{font:600 10px var(--mono);color:var(--amber)}

/* panel edit list */
.oplist{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.opitem{
  display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);
  border:1px solid var(--line);border-radius:var(--rad-1);padding:4px 7px;background:var(--bg2);
}
.opitem b{font-weight:600;color:var(--dim)}
.opitem span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim2)}
.hint{font-size:var(--fs-xs);line-height:var(--lh-loose);color:var(--dim2);margin:8px 0 0}

/* gallery: skeleton while the lazy thumbnails paint, and a real empty state */
.pthumb:empty{
  background:linear-gradient(100deg,var(--surf2) 30%,var(--surf3) 45%,var(--surf2) 60%);
  background-size:220% 100%;animation:skel 1.3s ease-in-out infinite;
}
@keyframes skel{from{background-position:120% 0}to{background-position:-120% 0}}
.empty{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 14px;border:1px dashed var(--line2);border-radius:var(--rad-3);
  color:var(--dim2);font-size:var(--fs-sm);text-align:center;
}
.empty b{color:var(--dim);font-size:var(--fs-md)}

/* focus ring for keyboard users only (mouse users never see it) */
:focus-visible{outline:2px solid rgba(255,182,72,.55);outline-offset:2px}

/* ============================================================================
   v4.0 — phone / small tablet: the sidebar becomes a bottom sheet
   ==========================================================================*/
@media (max-width: 860px) {
  .wrap { grid-template-columns: minmax(0, 1fr) !important; padding: 8px !important; }
  .stage { order: 1; }
  #panel {
    position: fixed; inset-inline: 8px; bottom: 8px; z-index: 60;
    max-height: 76vh; overflow: auto; overscroll-behavior: contain;
    background: var(--bg2); border: 1px solid var(--line2);
    border-radius: var(--rad-4); padding: 10px;
    box-shadow: var(--el-2);
  }
  #panel.collapsed { display: none; }
  .topbar { gap: 8px; padding: 8px 10px; }
  .brand .btext i { display: none; }
  .partsbar { padding-bottom: 84px; }        /* keep the table clear of the sheet */
  .only-mobile { display: inline-flex !important; }
  .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .presets { max-height: 34vh; }
}