/* ==========================================================
   EFFEDI — Personalizzatore 3D shopper
   Scena a sinistra (luci + sfondo regolabili), pannello a step a destra.
   ========================================================== */
.cfg-cta{white-space:nowrap}
.cfg-row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}

.cfg{--cp:#0e0d0c;--cp2:#151412;--line:rgba(242,237,228,.09);--line2:rgba(242,237,228,.16);
  display:grid;grid-template-columns:minmax(0,1fr) 460px;height:100vh;height:100svh;min-height:680px;padding-top:86px;background:var(--bg);font-family:var(--sans)}

/* ---------- scena ---------- */
.cfg-stage{position:relative;overflow:hidden;min-height:0;touch-action:none;overscroll-behavior:contain;transition:background .6s;
  background:radial-gradient(70% 60% at 50% 42%,#2a2217 0%,#12100c 55%,#080807 100%);--st-ink:var(--ink);--st-mut:var(--mut);--st-glass:rgba(10,9,8,.72);--st-line:rgba(255,255,255,.1)}
.cfg-stage[data-bg="light"]{background:radial-gradient(75% 65% at 50% 40%,#f6f3ee 0%,#e4ded3 60%,#cfc8bc 100%);--st-ink:#1a1714;--st-mut:rgba(26,23,20,.6);--st-glass:rgba(255,255,255,.72);--st-line:rgba(0,0,0,.1)}
.cfg-stage[data-bg="white"]{background:radial-gradient(80% 70% at 50% 40%,#fff 0%,#f6f5f2 70%,#ecebe8 100%);--st-ink:#1a1714;--st-mut:rgba(26,23,20,.6);--st-glass:rgba(255,255,255,.8);--st-line:rgba(0,0,0,.09)}
.cfg-stage::before{content:"";position:absolute;left:50%;bottom:8%;width:70%;height:22%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(201,168,119,.16),transparent);pointer-events:none}
.cfg-stage:not([data-bg="dark"])::before{opacity:0}
.cfg-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:0;touch-action:none;cursor:grab}
.cfg-stage canvas:active{cursor:grabbing}
.cfg-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut);background:#0b0a09;z-index:5;transition:opacity .7s,visibility .7s}
.cfg-loading.done{opacity:0;visibility:hidden}
.st-tl{position:absolute;left:22px;top:20px;display:flex;gap:8px;align-items:center;z-index:3}
.beta{font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#000;background:var(--gold);padding:6px 10px}
.cfg-dims{font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--st-ink);padding:5px 11px;border:1px solid var(--st-line);background:var(--st-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cfg-hint{position:absolute;left:50%;top:24px;transform:translateX(-50%);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--st-mut);z-index:2;pointer-events:none;white-space:nowrap}

/* luci */
.st-tr{position:absolute;right:20px;top:16px;z-index:4}
.st-btn{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--st-ink);background:var(--st-glass);border:1px solid var(--st-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .3s}
.st-btn svg{width:17px;height:17px}
.st-btn:hover,.st-btn[aria-expanded="true"]{border-color:var(--gold)}
.lights{position:absolute;right:0;top:calc(100% + 8px);width:290px;padding:16px;background:rgba(14,13,12,.94);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(0,0,0,.45);animation:liIn .3s var(--ease);color:var(--ink)}
@keyframes liIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.lights h6{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.lights h6:not(:first-child){margin-top:16px}
.li-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.li-p,.li-bg{display:flex;flex-direction:column;align-items:center;gap:6px;padding:7px 2px;border:1px solid transparent;font-size:9.5px;color:var(--mut);transition:all .25s}
.li-p i,.li-bg i{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
.li-studio i{background:radial-gradient(circle at 35% 30%,#fff6e6,#9a8e7c 60%,#2b2722)}
.li-day i{background:radial-gradient(circle at 35% 30%,#fff,#cfdcf0 55%,#7d8fa8)}
.li-warm i{background:radial-gradient(circle at 35% 30%,#ffe2b4,#e08a3c 55%,#5a2a10)}
.li-spot i{background:radial-gradient(circle at 50% 30%,#fff 0 18%,#3a332a 45%,#0a0908)}
.li-night i{background:radial-gradient(circle at 35% 30%,#c9d6ff,#4b5d9c 55%,#10152a)}
.bg-dark i{background:#0d0c0b}.bg-light i{background:#e4ded3}.bg-white i{background:#fff}
.li-p:hover,.li-bg:hover{color:var(--ink)}
.li-p.on,.li-bg.on{color:var(--ink);border-color:rgba(201,168,119,.6);background:rgba(201,168,119,.08)}
.li-bgs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.li-row{display:block;margin-top:12px;font-size:11px;color:var(--mut)}
.li-row span{display:block;margin-bottom:4px}

/* dock in basso */
.st-dock{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;background:var(--st-glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--st-line);z-index:3;max-width:calc(100% - 24px)}
.st-views{display:flex;gap:2px}
.st-views button{padding:9px 13px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--st-mut);transition:all .25s;white-space:nowrap}
.st-views button:hover{color:var(--st-ink)}
.st-views button.on{color:#000;background:var(--gold)}
.st-sep{width:1px;height:22px;background:var(--st-line);margin:0 4px}
.st-ico{width:36px;height:36px;display:grid;place-items:center;color:var(--st-mut);transition:all .25s}
.st-ico svg{width:18px;height:18px}
.st-ico:hover{color:var(--st-ink)}
.st-ico.on{color:var(--gold)}
.st-ico.ok{color:#7fc48a}

/* ---------- pannello ---------- */
.cfg-panel{display:flex;flex-direction:column;min-height:0;background:var(--cp);border-left:1px solid var(--line);color:var(--ink)}
.cp-head{padding:16px 24px 14px}
.cp-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cp-eyebrow{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:flex;gap:10px;align-items:center}
.cp-eyebrow span{color:var(--mut);letter-spacing:.14em;font-weight:500}
.cp-tools{display:flex;gap:4px}
.cp-tool{width:32px;height:32px;display:grid;place-items:center;color:var(--mut);border:1px solid var(--line);transition:all .3s}
.cp-tool svg{width:16px;height:16px}
.cp-tool:hover{color:var(--gold);border-color:rgba(201,168,119,.5)}
.cp-title{margin-top:8px;font-family:var(--sans);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.01em}
.cp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cp-meta span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--mut);padding:4px 9px;background:var(--cp2);border:1px solid var(--line)}
.cp-meta i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}

.cp-steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cp-step{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 10px 12px;text-align:left;color:var(--mut);transition:color .3s;min-width:0}
.cp-step i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.08em;color:rgba(242,237,228,.35);transition:color .3s}
.cp-step span{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cp-step:hover{color:var(--ink)}
.cp-step.done i{color:var(--gold)}
.cp-step.on{color:var(--ink)}
.cp-step.on i{color:var(--gold)}
.cp-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;pointer-events:none}
.cp-prog i{display:block;height:100%;width:0;background:var(--gold);transition:width .5s var(--ease)}

/* ---------- contenuto degli step ---------- */
.cfg-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:20px 24px 24px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(201,168,119,.35) transparent}
.cfg-scroll::-webkit-scrollbar{width:6px}
.cfg-scroll::-webkit-scrollbar-thumb{background:rgba(201,168,119,.3);border-radius:3px}
.pane[hidden],[hidden]{display:none!important}
.pane{animation-duration:.45s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.pane.slide-r{animation-name:paneInR}
.pane.slide-l{animation-name:paneInL}
@keyframes paneInR{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes paneInL{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.pane-hd{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
.pane-n{font-family:var(--serif);font-size:38px;line-height:.9;color:var(--gold);flex:none;font-weight:400}
.pane-hd h2{font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.25;letter-spacing:-.005em}
.pane-hd p{margin-top:5px;font-size:12px;line-height:1.5;color:var(--mut)}

.blk{padding:16px 0;border-top:1px solid var(--line)}
.blk:first-of-type{border-top:0;padding-top:4px}
.pane-hd+.blk{border-top:0;padding-top:0}
.pcards~.blk{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.cp-foot{flex-wrap:wrap}
.cfg-notice{flex:1 0 100%;margin:0 0 2px;padding:9px 12px;font-size:11.5px}
.cfg-notice.err{border-left-color:#c0504d}
.cfg-notice[hidden]{display:none}
.blk-t{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;opacity:.85}
.hint{font-size:11.5px;color:var(--mut);line-height:1.5;margin-top:10px}
.hint.err,#cfgQtyNote.err{color:#e7746a}
.cnt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:-4px 0 10px}
.pnote{font-size:12px;color:var(--ink);line-height:1.55;padding:12px 14px;border-left:2px solid var(--gold);background:rgba(201,168,119,.06);margin-bottom:16px;opacity:.9}

/* schede prodotto */
.pcards{display:grid;gap:10px}
.pcard{display:grid;grid-template-columns:118px 1fr;gap:0;text-align:left;border:1px solid var(--line2);background:var(--cp2);transition:border-color .35s,transform .35s var(--ease),box-shadow .35s;overflow:hidden}
.pcard:hover{border-color:rgba(201,168,119,.55);transform:translateY(-1px)}
.pcard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset,0 12px 34px rgba(0,0,0,.35)}
.pc-img{position:relative;display:grid;place-items:center;background:#f4f2ee;padding:10px;min-height:132px}
.pc-img img{max-width:100%;max-height:118px;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.pcard:hover .pc-img img{transform:scale(1.04)}
.pc-check{position:absolute;left:8px;top:8px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#000;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:all .35s var(--ease)}
.pc-check svg{width:13px;height:13px}
.pcard.on .pc-check{opacity:1;transform:none}
.pc-body{display:flex;flex-direction:column;gap:5px;padding:13px 14px;min-width:0}
.pc-tags{display:flex;gap:5px}
.pc-tags em{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:3px 6px;border:1px solid rgba(201,168,119,.35)}
.pc-body b{font-weight:600;font-size:14.5px;line-height:1.25;color:var(--ink)}
.pc-body small{font-size:11px;line-height:1.45;color:var(--mut)}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px}
.pc-dots{display:flex}
.pc-dots i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.35);margin-left:-3px;box-shadow:0 0 0 1px var(--cp2)}
.pc-dots i:first-child{margin-left:0}
.pc-cnt{font-size:10px;color:var(--mut);white-space:nowrap}

/* colori e lamine con nome */
.nsw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.nsw-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.nsw{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);background:var(--cp2);font-size:12px;color:var(--mut);text-align:left;transition:all .25s;min-width:0}
.nsw i{width:22px;height:22px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 -3px 5px rgba(0,0,0,.2)}
.nsw span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nsw-grid.three .nsw{padding:7px 8px;gap:8px;font-size:11px}
.nsw-grid.three .nsw i{width:18px;height:18px}
.nsw:hover{color:var(--ink);border-color:var(--line2)}
.nsw.on{color:var(--ink);border-color:var(--gold);background:rgba(201,168,119,.08)}

/* formati e quantità */
.fmts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fmt{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);background:var(--cp2);color:var(--mut);text-align:left;transition:all .25s}
.fmt svg{width:24px;height:26px;flex:none;opacity:.6}
.fmt span{display:flex;flex-direction:column;gap:2px;min-width:0}
.fmt b{font-weight:600;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.fmt small{font-size:10.5px}
.fmt:hover{border-color:var(--line2)}
.fmt.on{border-color:var(--gold);background:rgba(201,168,119,.08)}
.fmt.on svg{color:var(--gold);opacity:1}
.ro{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.ro span{font-size:11.5px;color:var(--mut);padding:6px 10px;border:1px solid var(--line)}
.ro b{font-weight:600;color:var(--ink)}
.qty{display:flex;align-items:stretch;border:1px solid var(--line2);background:var(--cp2)}
.qty input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:inherit;font-size:22px;font-weight:600;text-align:center;padding:10px 6px;outline:0;-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input.bad{color:#e7746a}
.qunit{display:flex;align-items:center;padding:0 12px 0 0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.qbtn{width:50px;font-size:20px;color:var(--mut);transition:all .25s;border-left:1px solid var(--line)}
.qbtn:first-child{border-left:0;border-right:1px solid var(--line)}
.qbtn:hover{color:#000;background:var(--gold)}

/* controlli generici */
.seg{display:flex;border:1px solid var(--line2);background:var(--cp2)}
.seg button{flex:1;padding:11px 8px;font-size:11.5px;font-weight:500;color:var(--mut);border-left:1px solid var(--line);transition:all .25s;line-height:1.3}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink);color:#000}
.ctl{margin-top:16px}
.ctl label{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);margin-bottom:8px}
.ctl output{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(242,237,228,.22)}
input[type=range]::-moz-range-track{height:2px;background:rgba(242,237,228,.22)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold);border:0;margin-top:-7px;box-shadow:0 0 0 4px rgba(201,168,119,.16);transition:box-shadow .3s}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gold);border:0}
input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(201,168,119,.22)}
.ta{width:100%;background:var(--cp2);border:1px solid var(--line2);color:var(--ink);font:inherit;font-size:14px;padding:12px 14px;outline:0;border-radius:0;transition:border-color .3s;resize:vertical;min-height:58px;margin-bottom:10px}
.ta:focus{border-color:var(--gold)}
.drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:22px 16px;border:1px dashed rgba(201,168,119,.5);cursor:pointer;transition:all .3s;color:var(--gold);background:rgba(201,168,119,.03)}
.drop svg{width:26px;height:26px}
.drop b{font-weight:600;font-size:13px;color:var(--ink)}
.drop small{font-size:11px;color:var(--mut)}
.drop:hover,.drop.over{background:rgba(201,168,119,.08);border-style:solid}
.row-btns{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.fname{flex:1;min-width:80px;font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border:1px solid var(--line2);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);transition:all .3s}
.mini svg{width:16px;height:16px}
.mini:hover{color:var(--ink);border-color:var(--gold)}
.mini.wide{width:100%;margin-top:16px;padding:12px}

/* riepilogo */
.sum-hd{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);background:var(--cp2);margin-bottom:8px}
.sum-hd img{width:64px;height:72px;object-fit:contain;background:#f4f2ee;padding:4px;mix-blend-mode:normal}
.sum-hd b{display:block;font-weight:600;font-size:14px}
.sum-hd small{display:block;margin-top:3px;font-size:11px;color:var(--mut);line-height:1.4}
.sumrow{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.sumrow span{color:var(--mut);flex:none}
.sumrow b{font-weight:500;text-align:right}
.sum-cta{margin-top:18px}
.sum-cta .btn{width:100%;justify-content:center;margin-top:12px}
.sum-acts{display:flex;gap:6px;margin-top:8px}
.sum-acts button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border:1px solid var(--line2);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);transition:all .3s}
.sum-acts button svg{width:16px;height:16px}
.sum-acts button:hover{color:var(--ink);border-color:var(--gold)}
.sum-acts button.ok{color:#7fc48a;border-color:#7fc48a}
.beta-note{font-size:10px;color:rgba(242,237,228,.4);line-height:1.45;margin-top:12px}

/* footer di navigazione */
.cp-foot{display:flex;gap:8px;padding:12px 24px 14px;border-top:1px solid var(--line);background:var(--cp)}
.cp-prev{width:52px;flex:none;display:grid;place-items:center;border:1px solid var(--line2);color:var(--ink);transition:all .3s}
.cp-prev svg,.cp-next svg{width:20px;height:20px}
.cp-prev:hover{border-color:var(--gold);color:var(--gold)}
.cp-prev:disabled{opacity:.3;pointer-events:none}
.cp-next{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px 11px 18px;background:var(--ink);color:#000;transition:background .3s}
.cp-next:hover,.cp-next.send{background:var(--gold)}
.cp-next-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.cp-next-t b{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cp-next-t small{font-size:11px;opacity:.6;margin-top:2px}
.cp-next-t small:empty{display:none}

/* ---------- anteprima di stampa (grafica piatta) ---------- */
.cfg-proof{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.cfg-proof.open{opacity:1;visibility:visible}
.cfg-proof-bg{position:absolute;inset:0;background:rgba(5,5,5,.9);backdrop-filter:blur(6px)}
.cfg-proof-in{position:relative;z-index:2;max-width:min(920px,92vw);max-height:88vh;overflow:auto;background:var(--bg2);border:1px solid var(--faint);padding:32px}
.cfg-proof-in h3{font-family:var(--sans);font-weight:600;font-size:20px;margin-bottom:20px}
.cfg-proof-x{position:absolute;right:14px;top:14px;width:38px;height:38px;border:1px solid var(--faint);border-radius:50%;transition:all .3s}
.cfg-proof-x:hover{background:var(--ink);color:#000}
.cfg-proof-imgs{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.cfg-proof-imgs figure{background:#0d0c0a;padding:10px}
.cfg-proof-imgs img{max-width:min(380px,80vw);max-height:60vh;display:block}
.cfg-proof-imgs figcaption{text-align:center;margin-top:8px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}

/* ---------- rifinitura: angoli arrotondati e fondo interno del pannello leggermente diverso ---------- */
.cfg{--r:12px;--rs:8px;--cp:#0c0b0a;--cp2:#1a1815;--cpin:#121110}
.cfg-panel{background:var(--cp)}
.cfg-scroll{background:linear-gradient(180deg,var(--cpin),#100f0d);margin:0 10px;border-radius:var(--r) var(--r) 0 0;border:1px solid var(--line);border-bottom:0;padding:22px 20px 26px}
.cp-head{padding-bottom:12px}
.cp-steps{border:0;margin:0 10px 10px;background:var(--cpin);border-radius:var(--r);padding:0 4px;overflow:hidden;border:1px solid var(--line)}
.cp-prog{left:12px;right:12px;bottom:0;border-radius:2px}
.cp-prog i{border-radius:2px}
.cp-step{border-radius:var(--rs)}
.cp-meta span{border-radius:999px;padding:4px 10px}
.cp-tool{border-radius:50%}
.pcard{border-radius:var(--r)}
.pc-img{border-radius:calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px)}
.pc-tags em{border-radius:999px;padding:3px 8px}
.nsw,.fmt{border-radius:var(--rs)}
.seg{border-radius:var(--rs);overflow:hidden;padding:3px;gap:3px;border-color:var(--line)}
.seg button{border-left:0;border-radius:6px}
.qty{border-radius:var(--rs);overflow:hidden}
.ro span{border-radius:999px}
.ta,.drop,.mini,.sum-acts button{border-radius:var(--rs)}
.pnote{border-radius:0 var(--rs) var(--rs) 0}
.sum-hd{border-radius:var(--r)}
.sum-hd img{border-radius:6px}
.sum-cta .btn{border-radius:var(--rs)}
.cp-foot{margin:0 10px 10px;padding:10px;background:var(--cpin);border:1px solid var(--line);border-top:1px solid var(--line2);border-radius:0 0 var(--r) var(--r)}
.cp-prev,.cp-next{border-radius:var(--rs)}
.st-dock{border-radius:14px;padding:5px 6px}
.st-views button{border-radius:8px}
.st-ico{border-radius:50%}
.st-btn,.cfg-dims{border-radius:999px}
.beta{border-radius:999px;padding:6px 11px}
.lights{border-radius:var(--r)}
.li-p,.li-bg{border-radius:var(--rs)}
.cfg-proof-in{border-radius:var(--r)}
.cfg-proof-imgs figure{border-radius:var(--rs)}

/* ---------- 8 step ---------- */
.cp-steps{grid-template-columns:repeat(8,1fr)}
.cp-step{padding:10px 6px 11px}
.cp-step span{font-size:10.5px}

/* ---------- grafica caricata ---------- */
.logo-card{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line2);background:var(--cp2);border-radius:var(--r)}
.lc-img{width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:var(--rs);background:repeating-conic-gradient(#2a2724 0 25%,#1d1b18 0 50%) 0 0/12px 12px;overflow:hidden}
.lc-img img{max-width:88%;max-height:88%;object-fit:contain}
.lc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lc-t b{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-t small{font-size:11px;color:var(--gold)}
.lc-acts{display:flex;flex-direction:column;gap:5px}
.lc-acts .mini{padding:6px 10px;font-size:9.5px}
.pos-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.pos-row .mini svg{width:15px;height:15px}
.drag-hint{display:flex;align-items:center;gap:7px;margin:14px 0 0;font-size:11px}
.ctr-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.ctr-row .mini{padding:9px 8px;font-size:9.5px;letter-spacing:.06em}
.ctr-row .mini svg{width:17px;height:17px;flex:none}
.ctr-row .mini span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drag-hint svg{width:16px;height:16px;flex:none;color:var(--gold)}
.foil-chip-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0;font-size:11px;color:var(--mut)}
.pane-hd+.foil-chip-row{margin:-4px 0 14px}
.foil-chip{display:inline-flex;align-items:center;gap:7px;font-style:normal;font-size:11px;color:var(--ink);padding:4px 10px 4px 5px;border:1px solid var(--line2);border-radius:999px;background:var(--cp2)}
.foil-chip i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}

/* ---------- tendina caratteri ---------- */
.fontpick{position:relative}
.fp-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border:1px solid var(--line2);border-radius:var(--rs);background:var(--cp2);color:var(--ink);font-size:19px;text-align:left;transition:border-color .3s}
.fp-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-btn svg{width:18px;height:18px;flex:none;color:var(--gold);transition:transform .3s}
.fp-btn[aria-expanded="true"]{border-color:var(--gold)}
.fp-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.fp-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;background:#171513;border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 22px 50px rgba(0,0,0,.55);overflow:hidden;animation:liIn .25s var(--ease)}
.fp-search{width:100%;background:#0f0e0c;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;font-size:13px;padding:12px 14px;outline:0}
.fp-list{position:relative;max-height:300px;overflow-y:auto;padding:6px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(201,168,119,.35) transparent}
.fp-g{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding:10px 8px 6px}
.fp-it{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:6px;font-size:19px;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .2s}
.fp-it:hover{background:rgba(255,255,255,.06)}
.fp-it.on{background:rgba(201,168,119,.14);color:var(--gold)}
.txbar{display:flex;align-items:center;gap:4px;margin-top:10px;padding:4px;border:1px solid var(--line);border-radius:var(--rs);background:var(--cp2)}
.txb{width:38px;height:34px;display:grid;place-items:center;border-radius:6px;font-size:15px;color:var(--mut);transition:all .2s;font-family:Georgia,serif}
.txb svg{width:18px;height:18px}
.txb:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.txb.on{background:var(--ink);color:#000}
.txsep{width:1px;height:20px;background:var(--line2);margin:0 4px}

/* ---------- fantasie ---------- */
.ptns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ptn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 4px 8px;border:1px solid var(--line);border-radius:var(--rs);background:var(--cp2);font-size:10.5px;color:var(--mut);transition:all .25s;min-width:0}
.ptn span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptn-i{width:100%;aspect-ratio:1;border-radius:6px;background-size:cover;background-color:#0f0e0c;display:grid;place-items:center;color:var(--mut);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ptn-i svg{width:26px;height:26px}
.ptn:hover{color:var(--ink);border-color:var(--line2)}
.ptn.on{color:var(--ink);border-color:var(--gold);background:rgba(201,168,119,.08)}
.ptn:disabled{opacity:.35;cursor:not-allowed}

/* ---------- popup originale / senza sfondo ---------- */
.bgm-in{max-width:min(760px,94vw);padding:30px}
.bgm-d{font-size:12.5px;color:var(--mut);line-height:1.55;margin:-10px 0 18px}
.bgm-d b{color:var(--ink);font-weight:600}
.bgm-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bgm-opt{display:flex;flex-direction:column;text-align:left;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--cp2);transition:all .3s}
.bgm-opt:hover{border-color:rgba(201,168,119,.55)}
.bgm-opt.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.bgm-img{display:grid;place-items:center;aspect-ratio:4/3;background:#2a2724;padding:16px}
.bgm-img.checker{background:repeating-conic-gradient(#d9d6d0 0 25%,#f4f2ee 0 50%) 0 0/18px 18px}
.bgm-img img{max-width:100%;max-height:100%;object-fit:contain}
.bgm-t{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px 40px}
.bgm-t b{font-size:14px;font-weight:600}
.bgm-t small{font-size:11.5px;color:var(--mut)}
.bgm-r{position:absolute;left:14px;top:14px;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(242,237,228,.4)}
.bgm-opt.on .bgm-r{border-color:var(--gold);background:radial-gradient(circle,var(--gold) 0 45%,transparent 50%)}
.bgm-acts{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:20px}
.bgm-acts .btn{border-radius:var(--rs)}
@media(max-width:560px){.bgm-opts{grid-template-columns:1fr}.bgm-in{padding:22px 16px}.ptns{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- sfondo: scuro / chiaro ---------- */
.bgtog{display:flex;padding:4px;gap:2px;border-radius:999px;background:var(--st-glass);border:1px solid var(--st-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.bgtog button{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--st-mut);transition:all .3s}
.bgtog svg{width:15px;height:15px}
.bgtog button:hover{color:var(--st-ink)}
.bgtog button.on{background:var(--gold);color:#000}

/* ---------- riquadro misure (schizzo tecnico) ---------- */
.dimbox{position:absolute;left:20px;bottom:20px;z-index:3;width:250px;padding:12px 12px 10px;border-radius:14px;background:var(--st-glass);border:1px solid var(--st-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--st-ink);font-family:var(--sans)}
.db-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 4px;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.db-h b{font-size:12px;letter-spacing:.04em;color:var(--st-ink);font-weight:600;text-transform:none}
.dimbox svg{display:block;width:100%;height:auto;overflow:visible}
.dimbox .df{fill:rgba(201,168,119,.1);stroke:var(--st-ink);stroke-width:1.2;stroke-linejoin:round;opacity:.9}
.dimbox .ds{fill:rgba(201,168,119,.05);stroke:var(--st-ink);stroke-width:1.2;stroke-linejoin:round;opacity:.75}
.dimbox .db{fill:none;stroke:var(--st-ink);stroke-width:1;opacity:.45}
.dimbox .dc{fill:none;stroke:var(--st-ink);stroke-width:.8;stroke-dasharray:2.5 2.5;opacity:.45}
.dimbox .dh{fill:none;stroke:var(--st-ink);stroke-width:1.6;stroke-linecap:round;opacity:.85}
.dimbox .dh.flat{stroke-width:3.4;stroke-linejoin:miter;stroke-linecap:butt;opacity:.6}
.dimbox .dk{fill:var(--st-ink);opacity:.7}
.dimbox .dl{stroke:var(--gold);stroke-width:1}
.dimbox .dd{fill:var(--gold)}
.dimbox text{font-size:10.5px;fill:var(--st-mut);font-weight:500}
.dimbox text tspan{fill:var(--st-ink);font-weight:700}
.db-l{display:flex;gap:14px;margin:2px 0 0;font-size:10px;color:var(--st-mut)}
.db-l i{font-style:normal;font-weight:700;color:var(--gold);margin-right:3px}
/* il riquadro misure occupa l'angolo in basso a sinistra: la barra dei comandi si sposta in basso a destra */
.st-dock{left:auto;right:20px;transform:none}
@media(max-width:1280px){.dimbox{width:190px;padding:10px}.db-l{display:none}.st-views button{padding:9px 9px}}
@media(max-width:1000px){.st-dock{left:50%;right:auto;transform:translateX(-50%)}.dimbox{display:none}}

/* ---------- più scritte: elenco a pillole ---------- */
.txlist{display:flex;flex-wrap:wrap;gap:6px}
.txchip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 8px 6px 6px;border:1px solid var(--line2);border-radius:999px;background:var(--cp2);color:var(--mut);font-size:13px;transition:all .25s}
.txchip b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;background:rgba(242,237,228,.1);color:var(--ink);flex:none;font-family:var(--sans)}
.txchip span{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.txchip i{font-style:normal;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:14px;line-height:1;color:var(--mut);transition:all .2s}
.txchip i:hover{background:#e7746a;color:#000}
.txchip:hover{color:var(--ink);border-color:rgba(201,168,119,.5)}
.txchip.on{color:var(--ink);border-color:var(--gold);background:rgba(201,168,119,.1)}
.txchip.on b{background:var(--gold);color:#000}
.txchip.img b.ic{width:24px;height:24px;border-radius:6px;background:repeating-conic-gradient(#2a2724 0 25%,#1d1b18 0 50%) 0 0/8px 8px;overflow:hidden}
.txchip.img b.ic img{width:100%;height:100%;object-fit:contain}
.txchip.img span{font-family:var(--sans);font-size:12px}
.txchip.img.on b.ic{background:repeating-conic-gradient(#3a332a 0 25%,#2a2520 0 50%) 0 0/8px 8px;box-shadow:0 0 0 1.5px var(--gold)}
.txadds{display:inline-flex;gap:6px;flex-wrap:wrap}
.txadd{padding:7px 14px;border:1px dashed rgba(201,168,119,.6);border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);transition:all .25s}
.txadd:hover{background:rgba(201,168,119,.1);border-style:solid}

/* ---------- editor della scritta: barra strumenti dentro il box ---------- */
.txed{border:1px solid var(--line2);border-radius:var(--r);background:var(--cp2);overflow:visible;transition:border-color .3s}
.txed:focus-within{border-color:rgba(201,168,119,.6)}
.txed-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px;border-bottom:1px solid var(--line)}
/* riga "Carattere": ben visibile in cima all'editor */
.txed-font{display:flex;flex-direction:column;gap:7px;padding:10px 10px 8px;border-bottom:1px solid var(--line)}
.txed-lbl{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.txed-lbl i{font-style:normal;font-family:var(--serif);font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink)}
.txed-font .fp-btn{padding:10px 12px;font-size:20px;border-radius:8px;background:rgba(255,255,255,.04);border-color:rgba(201,168,119,.45)}
.txed-font .fp-btn:hover{border-color:var(--gold);background:rgba(201,168,119,.08)}
.fp-btn span{flex:1;min-width:0}
.fp-cta{font-style:normal;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);flex:none}
.txed-bar .txtools{display:flex;align-items:center;gap:2px}
.txed-bar .txb{width:32px;height:32px}
.txed-ta{display:block;width:100%;min-height:76px;resize:vertical;background:transparent;border:0;outline:0;color:var(--ink);font:inherit;font-size:15px;line-height:1.45;padding:12px 14px}
.txed-ta::placeholder{color:rgba(242,237,228,.35)}
.txed-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--mut)}

/* tendina caratteri fuori dal pannello: fissa sopra a tutto, mai tagliata */
.fp-pop{--line:rgba(242,237,228,.09);--line2:rgba(242,237,228,.16);--r:12px;position:fixed;z-index:9800;right:auto;top:auto;margin:0;font-family:var(--sans)}
.fp-pop .fp-list{max-height:360px}

/* ---------- popup grafica: tre versioni (originale / senza sfondo / vettoriale) ---------- */
.bgm-in{max-width:min(980px,95vw)}
.bgm-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
.bgm-img{position:relative}
.bgm-badge{position:absolute;right:10px;top:10px;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#000;background:var(--gold);padding:4px 9px;border-radius:999px}
.vec-spin{position:absolute;inset:0;display:none;place-items:center;background:rgba(14,13,12,.45)}
.vec-spin::after{content:"";width:34px;height:34px;border-radius:50%;border:2px solid rgba(201,168,119,.3);border-top-color:var(--gold);animation:vecSpin .8s linear infinite}
@keyframes vecSpin{to{transform:rotate(360deg)}}
.bgm-opt.busy .vec-spin{display:grid}
.vecset{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:18px;margin-top:16px;padding:14px 16px;border:1px solid rgba(201,168,119,.35);border-radius:12px;background:rgba(201,168,119,.05)}
.vecset label{display:block;font-size:11.5px;color:var(--mut)}
.vecset label span{display:block;margin-bottom:6px}
.vec-stats{margin:0;font-size:11.5px;color:var(--gold);white-space:nowrap;padding-bottom:3px}
@media(max-width:760px){.bgm-opts{grid-template-columns:1fr}.vecset{grid-template-columns:1fr}}

@media(max-width:1200px){.cfg{grid-template-columns:minmax(0,1fr) 420px}.cfg-hint{display:none}}
@media(max-width:1000px){
  .cfg{grid-template-columns:1fr;height:auto;min-height:0;padding-top:70px}
  .cfg-stage{height:62svh;min-height:400px}
  .cfg-panel{border-left:0;border-top:1px solid var(--line)}
  .cfg-scroll{overflow:visible}
  .cp-steps{position:sticky;top:60px;z-index:5;background:var(--cp)}
  .cp-foot{position:sticky;bottom:0;z-index:5}
}
@media(max-width:560px){
  .cp-step span{display:none}
  .cp-step{align-items:center;padding:12px 4px}
  .cp-step i{font-size:12px}
  .pcard{grid-template-columns:96px 1fr}
  .st-views button{padding:9px 9px;font-size:9.5px}
  .st-dock{flex-wrap:wrap;justify-content:center;bottom:12px}
  .st-sep{display:none}
  .lights{width:min(290px,calc(100vw - 40px))}
  .cfg-head{padding-right:24px}
}

/* ==========================================================
   Linea SU MISURA: scelta della linea, misure libere, manici, stampa lato per lato
   ========================================================== */
.cp-step[hidden]{display:none}
.lines{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.line{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:12px 12px 13px;border:1px solid var(--line2);background:var(--cp2);border-radius:var(--r);transition:border-color .3s,background .3s}
.line:hover{border-color:rgba(201,168,119,.55)}
.line.on{border-color:var(--gold);background:rgba(201,168,119,.08);box-shadow:0 0 0 1px var(--gold) inset}
.line-r{width:15px;height:15px;flex:none;margin-top:2px;border-radius:50%;border:1.5px solid var(--line2);transition:all .3s}
.line.on .line-r{border-color:var(--gold);box-shadow:inset 0 0 0 3.5px var(--cp2),inset 0 0 0 8px var(--gold)}
.line-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.line-t b{font-size:13px;font-weight:600;color:var(--ink)}
.line-t small{font-size:10.5px;line-height:1.4;color:var(--mut)}
.is-custom .pc-cnt{color:var(--gold)}
.cu-badge{font-style:normal;color:#000;background:var(--gold);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:9.5px}
.cp-meta span:has(.cu-badge){background:var(--gold);border-color:var(--gold)}
.seg.wrap{flex-wrap:wrap}
.seg.wrap button{flex:1 0 auto;min-width:58px}

/* colore a scelta: campione + codice */
.cpick{display:flex;align-items:stretch;gap:8px;margin-top:4px}
.cpick-sw{position:relative;width:46px;height:42px;flex:none;border-radius:var(--rs);border:1px solid var(--line2);overflow:hidden;cursor:pointer;background:var(--cp2)}
.cpick-sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.cpick-sw i{position:absolute;inset:5px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none}
.cpick-code{flex:1;min-width:0;background:var(--cp2);border:1px solid var(--line2);border-radius:var(--rs);color:var(--ink);font:inherit;font-size:13px;padding:0 12px;outline:0}
.cpick-code:focus{border-color:var(--gold)}
.cpick-code::placeholder{color:rgba(242,237,228,.35)}

/* misure libere */
.dims{display:grid;gap:8px}
.dim{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;font-size:11.5px;color:var(--mut)}
.dim-in{display:flex;align-items:stretch;border:1px solid var(--line2);background:var(--cp2);border-radius:var(--rs);overflow:hidden}
.dim-in input{flex:1;min-width:0;width:0;background:transparent;border:0;color:var(--ink);font:inherit;font-size:18px;font-weight:600;text-align:center;padding:8px 4px;outline:0;-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.dim-in input::-webkit-outer-spin-button,.dim-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dim-in input:focus{background:rgba(201,168,119,.06)}
.dim-in em{display:flex;align-items:center;padding-right:10px;font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.dim-in .qbtn{width:42px}

/* tipi di manico */
.hcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hcard{position:relative;display:flex;gap:10px;align-items:center;text-align:left;padding:10px;border:1px solid var(--line);background:var(--cp2);border-radius:var(--rs);color:var(--mut);transition:all .25s;min-width:0}
.hcard:hover{border-color:var(--line2);color:var(--ink)}
.hcard.on{border-color:var(--gold);background:rgba(201,168,119,.08);color:var(--ink)}
.hc-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.04);color:var(--gold)}
.hc-ico svg{width:24px;height:24px}
.hc-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hc-t b{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-t small{font-size:10px;line-height:1.35}
.hcard em{position:absolute;top:6px;right:7px;font-style:normal;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,237,228,.4)}
.hcard.on em{color:var(--gold)}
.hatt{display:grid;gap:6px}
.hatt-b{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:10px 12px;border:1px solid var(--line);background:var(--cp2);border-radius:var(--rs);transition:all .25s}
.hatt-b i{width:14px;height:14px;flex:none;margin-top:2px;border-radius:50%;border:1.5px solid var(--line2)}
.hatt-b span{display:flex;flex-direction:column;gap:2px}
.hatt-b b{font-size:12px;color:var(--ink);font-weight:600}
.hatt-b small{font-size:10.5px;color:var(--mut);line-height:1.4}
.hatt-b:hover{border-color:var(--line2)}
.hatt-b.on{border-color:var(--gold);background:rgba(201,168,119,.08)}
.hatt-b.on i{border-color:var(--gold);box-shadow:inset 0 0 0 3px var(--cp2),inset 0 0 0 7px var(--gold)}
[data-when-hmode]{margin-top:10px}
.stripes .seg{margin-bottom:10px}
.stripe-row{display:flex;gap:8px;align-items:center}
.stripe-prev{flex:1;height:42px;border-radius:var(--rs);border:1px solid var(--line2)}

/* lati da stampare */
.sides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.side{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 4px 8px;border:1px solid var(--line);background:var(--cp2);border-radius:var(--rs);font-size:10.5px;color:var(--mut);transition:all .25s;min-width:0}
.side span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side:hover{border-color:var(--line2);color:var(--ink)}
.side.on{border-color:var(--gold);background:rgba(201,168,119,.08);color:var(--ink)}
.sd-th{width:34px;height:34px;border-radius:6px;background:repeating-conic-gradient(#2a2724 0 25%,#1d1b18 0 50%) 0 0/8px 8px;background-size:cover;background-position:center;border:1px solid var(--line2)}
.sd-th[style]{background-size:contain;background-repeat:no-repeat;background-color:#1d1b18}
.sd-th.pending{background:transparent;border:1px dashed var(--gold)}
.sd-th.off{background:transparent;border:1px dashed var(--line2)}
[data-when-sidemode="art"]{margin-top:12px}
[data-when-sidemode="art"] .lc-acts{flex-wrap:wrap}
.cu-notes{background:var(--cp2);border:1px solid var(--line2);border-radius:var(--rs);font-size:13px;min-height:70px}
.cu-notes:focus{border-color:var(--gold)}
.cfg-proof-imgs.four img{max-width:min(240px,40vw)}
@media(max-width:560px){.lines{grid-template-columns:1fr}.hcards{grid-template-columns:1fr}.dim{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================
   Pannello compatto: intestazione su una riga, step con icone, tendine apribili,
   riepilogo sulla scena; su telefono pannello a scomparsa sopra il 3D
   ========================================================== */
.cfg .cp-head{padding:12px 18px 10px}
.cfg .cp-row{gap:12px}
.cfg .cp-title{margin:0;font-size:17px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-grab{display:none}

/* riepilogo della configurazione sulla scena 3D */
.st-meta{position:absolute;left:22px;top:62px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:0;max-width:44%;pointer-events:none}
.cfg .st-meta span{color:var(--st-ink);background:var(--st-glass);border:1px solid var(--st-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:10.5px;padding:4px 10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfg .st-meta span:has(.cu-badge){background:var(--gold);border-color:var(--gold)}

/* step: icona + nome */
.cfg .cp-steps{grid-template-columns:repeat(5,1fr)}
.cfg .cp-step{flex-direction:column;align-items:center;gap:4px;padding:9px 4px 10px;text-align:center}
.cp-step svg{width:19px;height:19px;opacity:.5;transition:opacity .3s,color .3s}
.cfg .cp-step span{font-size:10.5px}
.cp-step.on svg{opacity:1;color:var(--gold)}
.cp-step.done svg{opacity:.9;color:var(--gold)}

/* intestazione dello step: una riga; la spiegazione si apre dalla "i" */
.cfg .cfg-scroll{padding:16px 16px 20px}
.cfg .pane-hd{align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cfg .pane-hd h2{font-size:15px}
.pane-i{width:24px;height:24px;flex:none;border-radius:50%;border:1px solid var(--line2);font-family:var(--serif);font-style:italic;font-size:14px;line-height:1;color:var(--mut);transition:all .25s}
.pane-i:hover,.pane-i.on{color:#000;background:var(--gold);border-color:var(--gold)}
.pane-d{font-size:12px;line-height:1.55;color:var(--mut);margin:-4px 0 12px;padding:10px 12px;border-left:2px solid var(--gold);background:rgba(201,168,119,.06)}

/* tendine */
.cfg .acc{padding:0;margin-top:6px;border:1px solid var(--line);border-radius:var(--rs);background:var(--cp2);transition:border-color .3s}
.cfg .acc:first-of-type{padding-top:0;border-top:1px solid var(--line)}
.cfg .acc.open{border-color:rgba(201,168,119,.45)}
.acc-h{width:100%;display:flex;align-items:center;gap:10px;padding:12px;text-align:left;min-height:44px}
.acc-t{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.acc-v{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:6px;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc.open .acc-v{opacity:.55}
.acc-sw{width:12px;height:12px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.25)}
.acc-sw+.acc-sw{margin-left:-9px}
.acc-c{width:16px;height:16px;flex:none;color:var(--mut);transition:transform .3s,color .3s}
.acc.open .acc-c{transform:rotate(180deg);color:var(--gold)}
.acc-b{padding:0 12px 14px}
.acc:not(.open) .acc-b{display:none}
.acc.open .acc-b{animation:accIn .35s cubic-bezier(.16,1,.3,1)}
@keyframes accIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sub{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:16px 0 8px}
.acc-b>.sub:first-child{margin-top:2px}
.hint.top{margin:0 0 6px}
.acc .ctl{margin-top:12px}

/* elementi compatti */
.cfg .lines{gap:6px;margin-bottom:4px}
.cfg .line{padding:9px 10px}
.cfg .line-t b{font-size:12.5px}
.cfg .line-t small{font-size:10px}
.cfg .pcards{gap:6px}
.cfg .pcard{grid-template-columns:72px 1fr}
.cfg .pc-img{min-height:0;padding:6px}
.cfg .pc-img img{max-height:74px}
.cfg .pc-check{left:5px;top:5px;width:18px;height:18px}
.cfg .pc-body{padding:9px 11px;gap:3px}
.cfg .pc-body b{font-size:13px}
.cfg .pc-body small{font-size:10.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cfg .pc-foot{padding-top:3px}
.nsw-grid.swatches{grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:4px}
.swatches .nsw{justify-content:center;aspect-ratio:1;padding:0;border-radius:50%;background:transparent;border:1.5px solid transparent}
.swatches .nsw i{width:26px;height:26px}
.swatches .nsw span{display:none}
.swatches .nsw:hover{border-color:var(--line2);background:transparent}
.swatches .nsw.on{border-color:var(--gold);background:transparent}
.sw-name{font-size:11.5px;color:var(--mut);margin:8px 0 0}
.sw-name b{color:var(--ink);font-weight:600}
.acc .fmts{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.acc .fmt{flex-direction:column;align-items:flex-start;gap:1px;padding:7px 9px}
.acc .fmt svg{display:none}
.acc .fmt b{font-size:12px}
.acc .fmt small{font-size:10px}
.cfg .hc-t small{display:none}
.cfg .hcard{padding:8px 10px}
.cfg .hc-ico{width:30px;height:30px}
.cfg .sides{margin-bottom:8px}
.side-mode{margin-bottom:10px}
[data-when-sidemode="art"]{margin:0 0 4px}
.cfg .acc .drop{padding:16px 12px}
.cfg .mini.wide{margin-top:12px}

/* telefono e tablet: la scena occupa lo schermo, il pannello sale dal basso (3 altezze) */
@media(max-width:1000px){
  .cfg{display:block;position:relative;height:100svh;min-height:560px;padding-top:0;overflow:hidden;--sheet:56svh}
  .cfg[data-sheet="mini"]{--sheet:34svh}
  .cfg[data-sheet="full"]{--sheet:88svh}
  .cfg .cfg-stage{position:absolute;left:0;right:0;top:64px;bottom:calc(var(--sheet) - 18px);height:auto;min-height:0;transition:bottom .45s cubic-bezier(.16,1,.3,1)}
  .cfg .cfg-panel{position:absolute;left:0;right:0;bottom:0;height:var(--sheet);z-index:6;border:0;border-top:1px solid var(--line2);border-radius:20px 20px 0 0;box-shadow:0 -18px 50px rgba(0,0,0,.5);transition:height .45s cubic-bezier(.16,1,.3,1)}
  .cfg.sheet-drag .cfg-panel,.cfg.sheet-drag .cfg-stage{transition:none}
  .cfg .cfg-scroll{overflow-y:auto;overscroll-behavior:auto}
  .cfg .cp-steps{position:relative;top:auto}
  .cfg .cp-foot{position:relative}
  .cp-grab{display:flex;justify-content:center;align-items:center;height:22px;flex:none;cursor:grab;touch-action:none}
  .cp-grab i{width:42px;height:4px;border-radius:2px;background:var(--line2)}
  .cfg .cp-head{padding:2px 16px 8px}
  .st-meta{top:56px;left:12px;max-width:52%}
  .cfg .st-meta span{font-size:10px;padding:3px 8px}
}
@media(max-width:560px){
  .cfg .cp-step span{display:block;font-size:9.5px}
  .st-meta span:nth-child(n+4){display:none}
  .cfg .st-dock{bottom:10px}
}
@media(max-width:560px){
  .cfg .lines{grid-template-columns:1fr 1fr}
  .cfg .line{padding:8px 9px;gap:8px}
  .cfg .line-r{width:13px;height:13px}
  .cfg .line-t small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media(max-width:560px){.cfg .hcards{grid-template-columns:1fr 1fr}.cfg .hcard em{display:none}.cfg .hc-t b{font-size:11.5px;white-space:normal}}

/* step separati (fino a 8), editor a colori su misura, intensità rimozione sfondo */
.cfg .cp-step span{white-space:normal;line-height:1.15;font-size:10px;text-align:center;overflow:visible}
.cfg .cp-step{padding:9px 2px 10px}
.paper-info{font-size:12.5px;color:var(--ink);margin:0 0 6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--rs);background:var(--cp2)}
.cfg .pane>.blk:first-of-type,.cfg .pane>.paper-info+.blk{border-top:0}
.cpick-sw.sm{width:34px;height:30px;border-radius:7px}
.cpick-sw.sm i{inset:4px;border-radius:4px}
.txed-foot [data-line-only]{display:inline-flex}
.txed-foot [data-line-only][hidden]{display:none}
.txed-foot.plain{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0 2px;font-size:11.5px;color:var(--mut)}
.txchip.shp .ic{width:20px;height:20px;border-radius:4px;border:1px solid rgba(255,255,255,.25)}
.txchip.shp .ic.sh-circle{border-radius:50%}
.txchip.shp .ic.sh-round{border-radius:7px}
.cutset label span b{color:var(--gold);margin-left:6px}
.cutset{margin-top:12px}
@media(max-width:560px){.cfg .cp-step span{font-size:8.5px}.cfg .cp-step svg{width:17px;height:17px}}
.vecset.cutset{display:block;grid-template-columns:none}
.cutset label{display:block}
.cutset input{width:100%}
.cutset .vec-stats{white-space:normal;color:var(--mut);margin-top:6px;line-height:1.45}

/* ==========================================================
   Step di stampa: barra strumenti (uno alla volta), elenchi separati, regolazioni fini chiuse
   ========================================================== */
.tools{display:flex;gap:4px;margin:0 0 12px;padding:4px;border:1px solid var(--line);border-radius:var(--r);background:var(--cp2);overflow-x:auto;scrollbar-width:none}
.tools::-webkit-scrollbar{display:none}
.tool{position:relative;flex:1 0 auto;min-width:58px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 6px 7px;border-radius:8px;color:var(--mut);font-size:10.5px;transition:background .25s,color .25s}
.tool svg{width:19px;height:19px}
.tool:hover{color:var(--ink)}
.tool.on{background:var(--ink);color:#000}
.tl-n{position:absolute;top:3px;right:6px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--gold);color:#000;font-style:normal;font-size:9.5px;font-weight:700;line-height:15px;text-align:center}
.tl-n.sw{width:10px;min-width:10px;height:10px;padding:0;top:6px;right:9px;border:1px solid rgba(255,255,255,.4)}
.tool.on .tl-n.sw{border-color:rgba(0,0,0,.35)}
.tpanel{animation:accIn .3s cubic-bezier(.16,1,.3,1)}
.tpanel>*+*{margin-top:12px}
.tpanel .ctl{margin-top:12px}
.layers{display:flex;flex-wrap:wrap;gap:6px}
.layers:empty{display:none}
.drop.small{width:100%;flex-direction:row;justify-content:center;gap:10px;padding:14px 12px;text-align:left}
.drop.small svg{width:22px;height:22px;flex:none}
.drop.small b{font-size:12.5px}
.drop.small small{display:none}
.shp-add{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.shp-b{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 6px;border:1px dashed var(--line2);border-radius:var(--rs);font-size:11px;color:var(--mut);transition:all .25s}
.shp-b:hover{color:var(--ink);border-color:var(--gold)}
.shp-b:disabled{opacity:.35;pointer-events:none}
.shp-b i{width:16px;height:12px;background:var(--gold);flex:none}
.shp-b i.sh-round{border-radius:4px}
.shp-b i.sh-circle{width:13px;height:13px;border-radius:50%}
.row-c{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--mut)}
details.more{border:1px solid var(--line);border-radius:var(--rs);background:rgba(255,255,255,.015)}
details.more>summary{list-style:none;cursor:pointer;padding:10px 12px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);display:flex;justify-content:space-between;align-items:center}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
details.more[open]>summary{color:var(--ink)}
details.more[open]>summary::after{transform:rotate(225deg) translateY(-2px)}
details.more>.more-b{padding:0 12px 12px}
details.more .ctr-row{margin-top:2px}
.txed-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.txed-col{display:inline-flex;align-items:center}
.txed-col [hidden]{display:none!important}
.txed .txed-font{margin-top:0}
.cfg .sides{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.cfg .side{flex-direction:row;justify-content:center;gap:6px;padding:7px 4px}
.cfg .side .sd-th{width:18px;height:18px;border-radius:4px;flex:none}
.cfg .side span{font-size:10.5px}
.cfg .side-mode{margin:8px 0 12px}
.drag-hint{opacity:.8}

/* ==========================================================
   Colori PANTONE C (linea su misura): campo colore + mazzetta interattiva
   ========================================================== */
.pmsf{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.pms-btn{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border:1px solid var(--line2);border-radius:var(--rs);background:var(--cp2);text-align:left;color:var(--ink);transition:border-color .25s}
.pms-btn:hover{border-color:var(--gold)}
.pms-btn>i{width:40px;height:40px;flex:none;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 4px 10px rgba(0,0,0,.35)}
.pms-btn span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pms-btn b{font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pms-btn small{font-size:10.5px;color:var(--gold);letter-spacing:.06em}
.pms-btn svg{width:20px;height:20px;flex:none;color:var(--gold)}
.pms-code-in{background:transparent;border:1px dashed var(--line2);border-radius:var(--rs);color:var(--ink);font:inherit;font-size:12.5px;padding:9px 12px;outline:0}
.pms-code-in:focus{border-style:solid;border-color:var(--gold)}
.pms-code-in::placeholder{color:rgba(242,237,228,.38)}
.pms-msg{font-size:11.5px;color:#e7746a;margin:0}
.pmsf.sm{display:inline-flex}
.pmsf.sm .pms-btn{width:auto;padding:4px 10px 4px 4px;gap:8px;border-radius:999px}
.pmsf.sm .pms-btn>i{width:22px;height:22px;border-radius:50%}
.pmsf.sm .pms-btn b{font-size:11px}
.stripe-row{flex-wrap:wrap}
.stripe-row .pmsf.sm{flex:none}

/* mazzetta */
.pms{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.pms.open{visibility:visible;opacity:1}
.pms-bg{position:absolute;inset:0;background:rgba(5,5,4,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pms-in{position:relative;width:min(1100px,calc(100vw - 24px));max-height:calc(100svh - 24px);overflow:auto;display:flex;flex-direction:column;gap:12px;padding:20px 22px 18px;border-radius:18px;background:#0e0d0c;border:1px solid rgba(242,237,228,.12);color:#f2ede4;font-family:var(--sans);box-shadow:0 40px 100px rgba(0,0,0,.6);transform:translateY(14px) scale(.985);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pms.open .pms-in{transform:none}
.pms-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pms-eye{font-size:10px;font-weight:700;letter-spacing:.26em;color:#c9a877;margin:0 0 4px}
.pms-hd h3{font-size:20px;font-weight:600;margin:0}
.pms-x{width:36px;height:36px;border-radius:50%;border:1px solid rgba(242,237,228,.18);color:#f2ede4;flex:none}
.pms-x:hover{background:#f2ede4;color:#000}
.pms-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:center}
.pms-cur{display:flex;align-items:center;gap:14px;min-width:0}
.pms-big{width:64px;height:64px;flex:none;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 10px 24px rgba(0,0,0,.45);transition:background .3s}
.pms-cur b{display:block;font-size:17px;font-weight:700;letter-spacing:.01em}
.pms-cur small{font-size:11.5px;color:rgba(242,237,228,.55)}
.pms-find{display:flex;border:1px solid rgba(242,237,228,.18);border-radius:10px;overflow:hidden;background:#151412}
.pms-find:focus-within{border-color:#c9a877}
.pms-q{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#f2ede4;font:inherit;font-size:14px;padding:12px 14px}
.pms-q::placeholder{color:rgba(242,237,228,.38)}
.pms-find button{padding:0 18px;background:#c9a877;color:#000;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.pms-err{margin:-4px 0 0;font-size:12px;color:#e7746a}
.pms-recent,.pms-results{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pms-recent>span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,237,228,.5);margin-right:4px}
.pms-results{max-height:180px;overflow:auto;padding:2px}
.pms-chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid rgba(242,237,228,.14);background:#151412;color:#f2ede4;font-size:11.5px;transition:border-color .2s}
.pms-chip i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.pms-chip:hover,.pms-chip.on{border-color:#c9a877}
.pms-deck{position:relative;border-radius:14px;background:radial-gradient(120% 90% at 50% 0%,#24201a 0%,#100f0d 70%);overflow:hidden}
.pms-fan{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;padding:26px 50% 34px;scroll-snap-type:x proximity;scrollbar-width:none}
.pms-fan::-webkit-scrollbar{display:none}
.pms-strip{flex:none;width:96px;margin-right:-14px;display:flex;flex-direction:column;padding:6px 6px 22px;background:#f7f5f0;border-radius:8px;box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.25);transform-origin:50% 180%;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s;scroll-snap-align:center;position:relative}
.pms-strip:hover{z-index:5;margin-top:-10px;box-shadow:0 22px 40px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.25)}
.pms-strip em{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.22em;color:#1a1714}
.pms-c{position:relative;height:46px;margin-bottom:3px;border-radius:2px;background:var(--c);display:flex;align-items:flex-end;padding:0 5px 3px;color:var(--t);font-size:9.5px;font-weight:600;text-align:left;transition:transform .2s;cursor:pointer}
.pms-c span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pms-c:hover{transform:scale(1.06);z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.pms-c.on{outline:3px solid #c9a877;outline-offset:2px;z-index:3}
.pms-map{display:flex;height:16px;border-radius:6px;overflow:hidden;cursor:pointer}
.pms-map i{flex:1;transition:transform .2s}
.pms-map i.on{transform:scaleY(1.5)}
.pms-map i:hover{filter:brightness(1.2)}
.pms-ft{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pms-ft p{font-size:11.5px;color:rgba(242,237,228,.55);margin:0}
.pms-ft .btn{border-radius:10px}
@media(max-width:700px){
  .pms{place-items:end center}
  .pms-in{width:100vw;max-height:94svh;border-radius:18px 18px 0 0;padding:16px 14px 14px}
  .pms-top{grid-template-columns:1fr}
  .pms-strip{width:84px}
  .pms-c{height:40px}
  .pms-ft p{display:none}
  .pms-ft .btn{width:100%;justify-content:center}
}

/* ---------- mazzetta a ventaglio (perno in basso, si trascina) ---------- */
.pd{--sw:80px;--ch:38px;display:flex;flex-direction:column;gap:10px}
.pd.pd-sm{--sw:64px;--ch:30px}
.pd-fam{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pd-fam::-webkit-scrollbar{display:none}
.pd-fam button{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid rgba(242,237,228,.14);background:rgba(255,255,255,.03);color:rgba(242,237,228,.7);font-size:11px;white-space:nowrap;transition:all .2s}
.pd-fam button i{width:10px;height:10px;border-radius:50%}
.pd-fam button:hover{color:#f2ede4;border-color:rgba(242,237,228,.3)}
.pd-fam button.on{background:#f2ede4;color:#000;border-color:#f2ede4}
.pd-stage{position:relative;height:calc(var(--ch) * 7 + 92px);overflow:hidden;border-radius:14px;background:radial-gradient(90% 80% at 50% 100%,#2a241b 0%,#121110 60%,#0b0a09 100%);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:0}
.pd-stage:active{cursor:grabbing}
.pd-stage:focus-visible{box-shadow:0 0 0 2px #c9a877 inset}
.pd-strip{position:absolute;left:50%;bottom:16px;width:var(--sw);display:flex;flex-direction:column;gap:2px;padding:4px 4px 18px;background:#f7f5f0;border-radius:5px;transform-origin:50% 100%;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.2);will-change:transform}
.pd-strip.mid{box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.2)}
.pd-strip em{position:absolute;left:0;right:0;bottom:4px;text-align:center;font-style:normal;font-size:7px;font-weight:800;letter-spacing:.2em;color:#1a1714}
.pd-strip em sup{font-size:5px}
.pd-c{height:var(--ch);border-radius:2px;background:var(--c);display:flex;align-items:flex-end;padding:0 4px 2px;color:var(--t);font-size:8.5px;font-weight:700;cursor:pointer;transition:transform .15s}
.pd-sm .pd-c{font-size:7.5px}
.pd-c span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-strip.mid .pd-c:hover{transform:scaleX(1.08)}
.pd-c.on{outline:2.5px solid #c9a877;outline-offset:1px;position:relative;z-index:2}
.pd-rivet{position:absolute;left:50%;bottom:9px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f5e3bd,#9b7d4c 60%,#4a3a20);box-shadow:0 2px 6px rgba(0,0,0,.6);z-index:2000;pointer-events:none}
.pd-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(14,13,12,.75);border:1px solid rgba(242,237,228,.18);color:#f2ede4;font-size:20px;line-height:1;z-index:2001;backdrop-filter:blur(6px)}
.pd-nav:hover{background:#c9a877;color:#000}
.pd-prev{left:8px}.pd-next{right:8px}
.pd-scrub{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:7px;cursor:pointer;margin:0}
.pd-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:22px;border-radius:4px;background:#f2ede4;border:2px solid #0e0d0c;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.pd-scrub::-moz-range-thumb{width:8px;height:20px;border-radius:4px;background:#f2ede4;border:2px solid #0e0d0c}
.pd-scrub::-moz-range-track{background:transparent}

/* campione scelto, come un chip PANTONE vero */
.pms-card{display:inline-flex;flex-direction:column;width:86px;flex:none;background:#f7f5f0;border-radius:6px;padding:5px 5px 7px;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.pms-card i{display:block;height:64px;border-radius:3px;transition:background .3s}
.pms-card>span{display:flex;flex-direction:column;padding:5px 2px 0;line-height:1.15}
.pms-card em{font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.2em;color:#1a1714}
.pms-card em sup{font-size:5px}
.pms-card b{font-size:12px;font-weight:700;color:#1a1714}
.pms-hd{align-items:center}
.pms-hd .pms-cur{flex:none}
.pms-ht{flex:1;min-width:0}
.pms-deckhost{min-height:0}

/* step Colore su misura */
.bagmode{margin-bottom:12px}
.nat-info{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--rs);background:var(--cp2);font-size:12px;color:var(--mut);line-height:1.5}
.nat-info i{width:38px;height:38px;flex:none;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.bag-pms{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.bag-pms-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.bag-pms-r .hint{margin:0}
.nat-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}

/* mazzetta: vista ventaglio / griglia con tutti i colori */
.pd-bar{display:flex}
.pd-view{flex:1}
.pd-fam button.on{background:#f2ede4;color:#000;border-color:#f2ede4}
.pd-grid{display:flex;gap:6px;flex-wrap:wrap;max-height:min(52svh,440px);overflow-y:auto;padding:8px;border-radius:14px;background:#0b0a09;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(201,168,119,.4) transparent}
.pd-gs{display:flex;flex-direction:column;gap:2px;width:calc((100% - 6px * 5) / 6);min-width:58px;padding:3px;background:#f7f5f0;border-radius:4px}
.pd-sm .pd-gs{width:calc((100% - 6px * 3) / 4)}
.pd-g{height:30px;border-radius:2px;background:var(--c);color:var(--t);font-size:8px;font-weight:700;display:flex;align-items:flex-end;padding:0 4px 2px;cursor:pointer}
.pd-g span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-g:hover{transform:scale(1.05);box-shadow:0 3px 10px rgba(0,0,0,.4);position:relative;z-index:1}
.pd-g.on{outline:2.5px solid #c9a877;outline-offset:1px;position:relative;z-index:2}
.pms-card.nat em{letter-spacing:.08em;font-size:7px;text-transform:uppercase}
.pms-card.nat b{font-size:11px}
.nat-alt{margin-top:14px}
.nat-alt .sub{margin:0 0 8px;text-transform:none;letter-spacing:0;font-weight:500;font-size:11.5px}
.pd-bar{align-items:stretch;gap:6px}
.pd-exp{flex:none;width:44px;display:grid;place-items:center;border:1px solid var(--line2,rgba(242,237,228,.16));border-radius:var(--rs,8px);background:rgba(255,255,255,.03);color:#c9a877;transition:all .25s}
.pd-exp svg{width:20px;height:20px}
.pd-exp:hover{background:#c9a877;color:#000;border-color:#c9a877}

/* annulla / ripeti */
.cp-tool:disabled{opacity:.28;cursor:default;pointer-events:none}
.cp-tsep{width:1px;align-self:stretch;margin:6px 3px;background:var(--line)}

/* menu rapido sull'elemento (spostabile) */
.ctxm{position:absolute;z-index:30;left:0;top:0;width:max-content;max-width:calc(100% - 16px);padding:6px;border-radius:14px;background:rgba(22,19,16,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(201,168,119,.32);box-shadow:0 18px 44px -14px rgba(0,0,0,.65);color:#f2ece3;font-size:12px;user-select:none;-webkit-user-select:none;touch-action:none;animation:ctxIn .18s cubic-bezier(.16,1,.3,1)}
.ctxm[hidden]{display:none}
@keyframes ctxIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.ctxm.moving{box-shadow:0 26px 60px -14px rgba(0,0,0,.75);border-color:rgba(201,168,119,.6)}
.ctxm-h{display:flex;align-items:center;gap:6px;padding:1px 1px 6px 2px;cursor:grab}
.ctxm.moving .ctxm-h{cursor:grabbing}
.ctxm-grip{width:14px;height:14px;opacity:.45;flex:none}
.ctxm-grip svg{width:14px;height:14px;display:block}
.ctxm-t{flex:1;min-width:0;max-width:190px;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctxm.locked .ctxm-t::after{content:" · \1F512";opacity:.8}
.ctxm-x{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11px;color:inherit;opacity:.6;transition:opacity .2s,background .2s}
.ctxm-x:hover{opacity:1;background:rgba(255,255,255,.1)}
.ctxm-r{display:flex;align-items:center;gap:3px}
.ctxm-r+.ctxm-r{margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.08)}
.ctxm .cb{height:30px;min-width:30px;padding:0 7px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:5px;color:inherit;background:rgba(255,255,255,.05);transition:background .2s,color .2s;font-size:12px}
.ctxm .cb:hover{background:rgba(201,168,119,.2);color:#ecd3a3}
.ctxm .cb svg{width:16px;height:16px;flex:none}
.ctxm .cb.lbl{flex:1;padding:0 9px}
.ctxm .cb.on{background:rgba(201,168,119,.3);color:#ecd3a3}
.ctxm .cb.del:hover{background:rgba(214,72,60,.28);color:#ffa59a}
.ctxm .cb:disabled{opacity:.28;pointer-events:none}
.ctxm .cb[hidden]{display:none}
.ctxm-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;opacity:.55;margin:0 auto 0 3px;padding-right:6px}
.ctxm .sw{width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.55),inset 0 0 0 1px rgba(0,0,0,.25)}

/* linea su misura: sacchetti in plastica */
.po-group{margin-top:16px}
.po-sub{margin:0 0 8px}
.po-img{background:linear-gradient(160deg,#eef2f5,#d9e0e6);color:#56626d}
.po-img > svg{width:96px;height:96px;transition:transform .5s var(--ease)}
.pcard:hover .po-img > svg{transform:scale(1.04)}
.pcard.on .po-img{color:#8a6a35}
.poshapes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.po-orient{margin-bottom:10px}
.envl{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.envl .hint{margin:0}
.envl-prev{flex:none;width:112px;height:66px;border-radius:8px;background:rgba(255,255,255,.04);border:1px dashed var(--line2);display:grid;place-items:center}
.envl-prev canvas{width:100px;height:57px;display:block}
.sum-po{flex:none;width:64px;height:64px;display:grid;place-items:center;background:linear-gradient(160deg,#eef2f5,#d9e0e6);color:#56626d;border-radius:8px}
.sum-po svg{width:56px;height:56px}
.ctxm-r[hidden]{display:none}

/* linea su misura: carta velina e affini */
.vl-img{background:linear-gradient(160deg,#f7f1e8,#e6dbcc);color:#7a5a3c}
.pt-text{margin:10px 0 6px;resize:none}

/* step Stampa riorganizzato: impaginazione, lati con interruttore, strumenti in due gruppi, tendine in fondo */
.pr-lay{display:grid;gap:7px;margin-bottom:14px}
.pr-lbl{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.pr-lay .hint{margin:0}
.pr-sides{margin-bottom:12px}
.cfg .sides{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none}
.side-sw{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sw-tog{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border:1px solid var(--line);border-radius:999px;background:var(--cp2);color:var(--mut);font-size:11.5px;transition:color .25s,border-color .25s}
.sw-tog i{position:relative;flex:none;width:28px;height:16px;border-radius:999px;background:rgba(255,255,255,.14);transition:background .25s}
.sw-tog i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#cfc8bc;transition:transform .25s var(--ease),background .25s}
.sw-tog:hover{color:var(--ink)}
.sw-tog.on{color:var(--ink);border-color:rgba(201,168,119,.55)}
.sw-tog.on i{background:var(--gold)}
.sw-tog.on i::after{transform:translateX(12px);background:#141210}
.tools-g{display:grid;grid-template-columns:3fr 2fr;gap:6px;overflow:visible;padding:6px}
.tgrp{display:flex;flex-direction:column;gap:4px;min-width:0}
.tgrp+.tgrp{border-left:1px solid var(--line);padding-left:6px}
.tg-l{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);padding:0 4px}
.tg-b{display:flex;gap:3px;min-width:0}
.tools-g .tool{flex:1 1 0;min-width:0;padding:8px 2px 7px}
.tools-g .tool span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-notes{margin-top:12px}
.pr-dot{font-style:normal;color:var(--gold);margin-left:6px}
details.blk-d{margin-top:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--cp2)}
details.blk-d>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;font-size:12px;font-weight:600;color:var(--ink)}
details.blk-d>summary::-webkit-details-marker{display:none}
details.blk-d>summary::after{content:"";width:7px;height:7px;flex:none;border-right:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);transform:rotate(45deg);margin:-3px 2px 0 0;transition:transform .25s}
details.blk-d[open]>summary::after{transform:rotate(225deg);margin-top:3px}
details.blk-d>summary em{margin-left:auto;font-style:normal;font-weight:400;font-size:11px;color:var(--mut)}
.blk-d-b{padding:0 14px 14px}