@font-face{font-family:Lexend;src:url('/fonts/Lexend-Regular.woff2')}@font-face{font-family:Lexend;src:url('/fonts/Lexend-Bold.woff2');font-weight:700}@font-face{font-family:'FA';src:url('/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2')}@font-face{font-family:'FAR';src:url('/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.woff2')}.fa-solid,.fa-regular{font-family:FA;font-style:normal}.fa-regular{font-family:FAR}.fa-shirt:before{content:'\f553'}.fa-cloud-arrow-up:before{content:'\f0ee'}.fa-font:before{content:'\f031'}.fa-wand-magic-sparkles:before{content:'\e2ca'}.fa-plus:before{content:'\2b'}.fa-trash-can:before{content:'\f2ed'}.fa-align-center:before{content:'\f037'}.fa-border-all:before{content:'\f84c'}.fa-rotate-left:before{content:'\f2ea'}.fa-rotate-right:before{content:'\f2f9'}.fa-floppy-disk:before{content:'\f0c7'}.fa-arrow-right:before{content:'\f061'}
:root{font-family:Lexend,sans-serif;color:#252a3a;background:#fff;font-size:14px}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:2px solid #2963d4;outline-offset:3px}header{height:72px;padding:0 32px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #e1e4e9}header .divider{height:24px;border-left:1px solid #dce0e7}.badge{font-size:11px;background:#edf2fd;color:#2963d4;padding:6px 12px;border-radius:16px}.quiet{margin-left:auto;font-size:12px}.quiet span{display:inline-flex;justify-content:center;align-items:center;border:1px solid #c8ced9;border-radius:50%;width:24px;height:24px;margin-left:8px}main{display:grid;grid-template-columns:88px 320px minmax(280px,1fr) 112px;height:calc(100dvh - 152px);min-height:580px}.tools{border-right:1px solid #e1e4e9;padding:16px 8px;display:flex;flex-direction:column;gap:8px}.tools button{border-radius:8px;min-height:80px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;font-size:11px}.tools i{font-size:22px}.tools small{font-size:9px;color:#788293}.tools button.active{background:#edf2fd;color:#2963d4}.inspector{padding:32px 24px 24px;border-right:1px solid #e1e4e9;overflow:auto}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.2px;color:#7e8999}h1{font-size:23px;line-height:1.35;margin:12px 0}h2{font-size:13px;margin:0}.muted{font-size:12px;line-height:1.8;color:#77808e;margin:0 0 24px}label{display:block;font-size:12px;margin:16px 0 8px}textarea,select{width:100%;border:1px solid #d4dae3;border-radius:8px;padding:12px;background:#fff;color:#252a3a}textarea{resize:vertical;line-height:1.6}select{height:44px}.primary,.secondary{border-radius:8px;padding:12px 16px;min-height:44px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.primary{background:#2963d4;color:white;font-weight:700}.secondary{background:white;border:1px solid #d4dae3}.wide{width:100%;margin-top:12px}.rule{border-top:1px solid #e4e7ed;margin:24px 0}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}input[type=color]{border:1px solid #d4dae3;border-radius:8px;padding:6px;background:white;width:100%;height:44px}input[type=range]{width:100%;accent-color:#2963d4;height:20px}.hint{color:#818997;font-size:11px;line-height:1.8;margin:16px 0}.section-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.section-title>span{font-size:10px;color:#8a93a1}.icon{width:36px;height:36px;border-radius:8px;font-size:14px}.layers{margin-top:32px;padding-top:20px;border-top:1px solid #e4e7ed}.layer{display:block;width:100%;text-align:left;padding:12px 8px;font-size:12px;margin-top:8px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer.active{background:#edf2fd;color:#2963d4}.workspace{background:#f3f4f6;position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden}.stage-top,.stage-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;z-index:1;font-size:12px}.dot{display:inline-block;width:6px;height:6px;background:#02be7a;border-radius:50%;margin-right:8px}.compact{padding:8px 12px;min-height:32px;font-size:11px}.canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 16px}canvas{height:100%;max-width:100%;aspect-ratio:1;object-fit:contain;touch-action:none}.stage-bottom{color:#8c94a0;padding-top:16px;padding-bottom:16px}.stage-bottom>div{display:flex;align-items:center;gap:8px}.zoom-label{font-size:10px;border-left:1px solid #d5dbe5;padding-left:16px;margin-left:8px}.sides{padding:24px 12px;border-left:1px solid #e1e4e9;display:flex;flex-direction:column;gap:12px}.sides>.eyebrow{text-align:center;font-size:8px;margin-bottom:4px}.sides button{border:1px solid #e1e4e9;border-radius:8px;padding:8px 4px;font-size:10px;background:white;position:relative}.sides button.active{border-color:#2963d4;box-shadow:0 0 0 1px #2963d4;color:#2963d4;background:#f5f8ff}.sides img{display:block;width:56px;height:56px;object-fit:contain;margin:0 auto 8px}.sides small{position:absolute;right:5px;top:4px;color:#2963d4}footer{height:80px;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e1e4e9;gap:16px}.footer-product,.footer-actions{display:flex;align-items:center;gap:16px}.footer-product>i{font-size:28px;color:#8091aa}.footer-product strong{font-size:12px;display:block}.footer-product span{display:block;font-size:11px;color:#808895;margin-top:4px}.link{color:#2963d4;font-size:11px}.footer-actions>span{font-size:10px;color:#9097a3}.product-line{display:flex;gap:16px;align-items:center;padding:20px 0;border-bottom:1px solid #eee}.product-line i{font-size:32px;color:#9ba9bc}.product-line small{display:block;color:#9098a5;font-size:11px;margin-top:4px}#colors{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}#colors button{width:32px;height:32px;border:1px solid #ccd2dc;border-radius:50%}#colors button.active{outline:2px solid #2963d4;outline-offset:3px}#color-name{float:right;font-size:11px}.drop{padding:32px 16px;border:1px dashed #9cafd2;border-radius:8px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center;cursor:pointer;background:#f7f9fd}.drop i{font-size:32px;color:#2963d4}.drop span{font-size:10px;color:#818b9a}#toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:#24344f;color:white;padding:16px 24px;border-radius:8px;z-index:9;max-width:90%;font-size:12px}[hidden]{display:none!important}
@media(min-width:1500px){main{grid-template-columns:96px 360px minmax(280px,1fr) 128px}.inspector{padding:40px 32px}.sides{padding:32px 16px}.sides img{width:64px;height:64px}}
@media(max-width:900px){header{padding:0 16px;gap:16px;height:64px}header img{width:132px}header .divider,header>span:not(.badge),.quiet{display:none}header .badge{margin-left:auto}main{height:auto;min-height:0;grid-template-columns:64px minmax(0,1fr) 80px}.tools{grid-column:1;grid-row:1;padding:8px 4px}.tools button{font-size:9px;min-height:72px}.workspace{grid-column:2;grid-row:1;height:440px}.sides{grid-column:3;grid-row:1;padding:12px 6px;gap:8px}.sides img{width:40px;height:40px}.sides button{font-size:9px}.inspector{grid-row:2;grid-column:1/-1;border-top:1px solid #e1e4e9;overflow:visible;padding:24px}.stage-top{padding:12px;flex-wrap:wrap;gap:8px}.stage-bottom{padding:8px}.stage-bottom>span{display:none}.canvas-wrap{padding:0}footer{height:auto;padding:16px;flex-wrap:wrap}.footer-actions{flex-wrap:wrap;gap:8px;width:100%}.footer-actions>span{width:100%}.footer-actions button{flex:1}.footer-product{width:100%}.footer-product .link{margin-left:auto}h1{font-size:22px}}
/* V2: il capo occupa lo spazio liberato dal pannello; comandi compatti e diretti. */
header{height:56px;padding:0 24px}header img{width:144px}footer{height:56px;padding:8px 24px}footer .primary,footer .secondary{min-height:36px;padding:8px 12px}main{height:calc(100dvh - 112px);grid-template-columns:80px 296px minmax(280px,1fr) 104px;min-height:540px}main.panel-closed{grid-template-columns:80px minmax(280px,1fr) 104px}.inspector{padding:20px}.tools{padding-top:12px}.tools button{min-height:68px}h1{font-size:20px;margin:8px 0}.muted{margin-bottom:12px;line-height:1.6}.muted:empty{display:none}label{margin-top:12px}.rule{margin:16px 0}.drop{padding:20px 12px;gap:8px}.drop i{font-size:24px}.drop.drag-over,.workspace.drag-over{background:#e6edfc;outline:2px dashed #2963d4;outline-offset:-4px}.hint{margin:12px 0;line-height:1.6}.layers{margin-top:20px;padding-top:16px}.layer{display:flex;align-items:center;padding:4px;margin-top:4px;gap:4px}.layer-select{display:flex;align-items:center;gap:8px;min-width:0;flex:1;text-align:left;padding:4px}.layer-select>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-thumb{width:36px;height:36px;flex-shrink:0;object-fit:contain;background:#fff;border:1px solid #e1e4e9;border-radius:4px;display:flex;align-items:center;justify-content:center}.layer .icon{width:32px;height:36px;flex-shrink:0}.rotation-heading{display:flex;align-items:center;gap:4px;margin-top:12px}.rotation-heading label{margin:0;flex:1}#angle{width:56px;padding:6px 4px;border:1px solid #d4dae3;border-radius:4px}.alignment{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.alignment button{height:32px;border:1px solid #d4dae3;border-radius:4px;font-size:18px}.stage-top{padding:16px 20px}.stage-bottom{padding:12px 20px;gap:8px}.history-button{font-size:11px;white-space:nowrap;min-height:32px;padding:4px}.history-button i{margin-right:4px}.sides{background:#f3f4f6;border:0;justify-content:center;padding:16px 8px;gap:8px}.sides button,.sides button.active{border:0;box-shadow:none;background:transparent;border-radius:0;padding:4px}.sides button.active span{border-bottom:2px solid #2963d4;padding-bottom:4px}.sides img{width:56px;height:56px;margin-bottom:4px}canvas{cursor:default}#toast{bottom:72px}
@media(max-width:900px){header{height:48px}footer{height:auto;padding:12px 16px}main,main.panel-closed{height:auto;min-height:0;grid-template-columns:60px minmax(0,1fr) 72px}.inspector{padding:20px}.workspace{height:460px}.sides{padding:8px 4px}.sides img{width:40px;height:40px}.stage-top{padding:12px 8px}.stage-bottom{padding:8px}.history-button{font-size:10px}.footer-actions>span{width:auto}.footer-actions button{min-height:36px}.tools button{min-height:64px}}

/* Comandi sul margine destro e singoli slot nuovamente delimitati. */
main{position:relative}.side-slots{display:flex;flex-direction:column;gap:12px}.sides .side-slots button{border:1px solid #e1e4e9;border-radius:8px;padding:8px 4px;background:#fff;font-size:10px;position:relative}.sides .side-slots button.active{border-color:#2963d4;box-shadow:0 0 0 1px #2963d4;background:#f5f8ff;color:#2963d4}.sides .side-slots button.active span{border:0;padding:0}.sides #guides{position:absolute;right:16px;top:16px;border:1px solid #d4dae3;border-radius:8px;background:#fff;padding:8px 12px;font-size:11px;z-index:2}.side-history{position:absolute;right:16px;bottom:12px;display:flex;gap:8px;z-index:2}.sides .history-button{font-size:11px;padding:4px;min-height:32px}.stage-bottom{min-height:56px}.stage-top{min-height:64px}
@media(max-width:900px){.sides #guides{top:12px;right:8px}.side-history{top:420px;bottom:auto;right:8px}.side-slots{gap:8px}.sides .side-slots button{font-size:9px;padding:4px}.sides .history-button{font-size:10px}.stage-top{min-height:64px}}

/* Prodotto essenziale: campioni quadrati come nella scheda tecnica, grafica separata. */
.product-panel .layers,.product-panel #object-controls{display:none}.product-panel .product-line{padding:4px 0 20px}#colors button{border-radius:6px}.sides #guides[aria-pressed="true"]{border-color:#2963d4;box-shadow:0 0 0 1px #2963d4;background:#f5f8ff;color:#2963d4}
/* Regent: preventivo compatto nella spalla prodotto, totale sempre nella barra finale. */
@media(min-width:901px){main{grid-template-columns:80px 360px minmax(280px,1fr) 104px}}
#quote-quantity{width:100%;height:40px;border:1px solid #d4dae3;border-radius:8px;padding:8px 12px}.quote-row select,#quote-date{font-size:12px;height:40px;padding:8px}.quote-row label{margin-top:16px}#colors{gap:8px}#colors button{width:28px;height:28px}.quote-summary strong{display:block;font-size:18px}.quote-summary span{display:block;font-size:10px;color:#77808e;margin-top:4px}.footer-actions{gap:16px}#quote-status{min-height:18px}
/* Creazione essenziale; livelli ed editor appartengono soltanto a Modifica. */
.fa-sliders:before{content:'\f1de'}.product-thumb{width:40px;height:48px;object-fit:contain;border:1px solid #e1e4e9;border-radius:4px}.footer-product .product-thumb{width:28px;height:36px}[data-section=edit] .layers{margin:0;padding:0;border:0}#back-layers{padding:0;min-height:32px;margin-bottom:12px}#edit-wording{margin-bottom:8px}[data-section=upload] .drop{margin-top:0}
/* Titoli condivisi, livelli riconoscibili e anteprima reale delle famiglie tipografiche. */
.inspector h1{margin:0 0 16px;font-size:20px}.layers h2{font-size:20px}.layer{background:#edf2fd;border:1px solid #dce6fa;padding:8px;border-radius:8px;margin-top:8px}.measurements{font-size:12px;color:#596478;margin-bottom:8px;line-height:1.6}.rotation-heading #angle{border:0;padding:0}.delete-layer{color:#a12d36;margin-top:16px}.font-picker{position:relative;border:1px solid #d4dae3;border-radius:8px;background:#fff}.font-picker summary{padding:12px;cursor:pointer}.font-picker>div{display:flex;flex-direction:column;max-height:200px;overflow:auto;border-top:1px solid #e1e4e9}.font-picker button{text-align:left;padding:12px;font-size:18px}
/* Navigazione superiore e quantità sempre visibile; file raggruppati per posizione. */
.top-tools{display:flex;gap:8px}.top-tools button{padding:8px 16px;border-radius:8px;font-size:13px}.top-tools button.active{background:#edf2fd;color:#2963d4}.header-quantity{display:flex;align-items:center;gap:8px;margin-left:auto}.header-quantity label{margin:0}.header-quantity #quote-quantity{width:88px;height:36px}.quiet{margin-left:0}main{grid-template-columns:360px minmax(280px,1fr) 104px}main.panel-closed{grid-template-columns:minmax(280px,1fr) 104px}.layer-group{margin-top:20px;border-radius:8px;min-height:72px}.layer-group h3{font-size:12px;margin:0 0 8px;color:#69758a}.drop-target{outline:2px dashed #2963d4;background:#edf2fd}.layer[draggable]{cursor:grab}.fa-copy:before{content:'\f0c5'}#quantity-dialog{border:0;border-radius:16px;padding:32px;width:400px;max-width:calc(100% - 32px);color:#252a3a;box-shadow:0 16px 64px #14243c33}#quantity-dialog::backdrop{background:rgba(26,34,49,.5)}#quantity-dialog h1{font-size:22px;margin:0 0 24px}#initial-quantity{width:100%;border:1px solid #d4dae3;border-radius:8px;padding:12px;font:inherit}
@media(max-width:900px){header{height:auto;min-height:56px;flex-wrap:wrap;padding:8px 12px;gap:8px}header img{width:120px}header .badge{display:none}.top-tools{order:2}.header-quantity{order:3}.top-tools button{padding:8px 12px}main,main.panel-closed{grid-template-columns:minmax(0,1fr) 72px}.workspace{grid-column:1}.sides{grid-column:2}.inspector{grid-column:1/-1}.header-quantity #quote-quantity{width:72px}.layer .icon{width:36px}}
.layer-select{touch-action:none;cursor:grab;user-select:none}
header{position:sticky;top:0;z-index:5;background:#fff}

/* Navigazione a due voci nella colonna originale; stato vuoto solo con azioni di creazione. */
main{grid-template-columns:80px 360px minmax(280px,1fr) 104px}main.panel-closed{grid-template-columns:80px minmax(280px,1fr) 104px}
@media(max-width:900px){main,main.panel-closed{grid-template-columns:60px minmax(0,1fr) 72px}.tools{grid-column:1;grid-row:1}.workspace{grid-column:2}.sides{grid-column:3}.inspector{grid-column:1/-1}}
/* Rotazioni rapide e zoom della sola vista, senza alterare le dimensioni della grafica. */
.rotation-presets{display:flex;gap:8px;margin-top:8px}.rotation-presets button{flex:1;border:1px solid #d4dae3;border-radius:4px;padding:8px;font-size:12px}.zoom-controls{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d4dae3;border-radius:8px;font-size:11px}.zoom-controls button{width:32px;height:32px;font-size:20px}.zoom-controls span{min-width:40px;text-align:center}.file-drop-active{outline:2px dashed #2963d4;outline-offset:-4px}.layer-thumb{pointer-events:none;-webkit-user-drag:none}
/* Due schede in testa alla spalla, senza una seconda colonna di navigazione. */
main{grid-template-columns:360px minmax(280px,1fr) 104px}.inspector{padding-top:0}.inspector .tools{position:sticky;top:0;z-index:2;background:white;flex-direction:row;border-right:0;border-bottom:1px solid #e1e4e9;margin:0 -20px 20px;padding:8px 20px;gap:8px}.inspector .tools button{flex:1;min-height:40px;flex-direction:row;font-size:13px}.inspector .tools i{font-size:16px}#quote-status:empty{display:none}
@media(max-width:900px){main,main.panel-closed{grid-template-columns:minmax(0,1fr) 72px}.workspace{grid-column:1}.sides{grid-column:2}.inspector{grid-column:1/-1}.inspector .tools{position:static}}
/* Il canvas riempie il fondo, mentre tutti i controlli rimangono sovrapposti. */
main{grid-template-columns:360px minmax(0,1fr)}.workspace{grid-column:2;grid-row:1}.sides{position:absolute;right:0;top:0;bottom:0;width:104px;background:transparent;pointer-events:none;z-index:2}.sides button,.side-history{pointer-events:auto}.sides #guides{white-space:nowrap}.side-history{white-space:nowrap}.canvas-wrap{position:absolute;inset:0;padding:0}canvas{aspect-ratio:auto;max-width:none;object-fit:fill}.stage-top,.stage-bottom{pointer-events:none}.stage-top button,.zoom-controls{pointer-events:auto}.stage-bottom{margin-top:auto}.dimension-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dimension-inputs label{font-size:11px;color:#69758a;margin:4px 0}.dimension-inputs input{display:block;width:100%;height:40px;margin-top:8px;padding:8px;border:1px solid #d4dae3;border-radius:8px;color:#252a3a;background:white}
@media(max-width:900px){main,main.panel-closed{grid-template-columns:minmax(0,1fr)}.workspace{grid-column:1}.sides{height:460px;bottom:auto;width:72px}.inspector{grid-column:1}.sides #guides{right:8px}.side-history{top:auto;bottom:8px}}

/* Controlli riconoscibili e feedback di trascinamento sopra tutta la pagina. */
.zoom-controls>i{font-size:14px;padding-left:12px}.fa-magnifying-glass:before{content:'\f002'}
.sides .history-button{background:white;border:1px solid #2963d4;border-radius:8px;padding:8px 12px;color:#2963d4;min-height:32px;font-size:11px}.sides .history-button:disabled{border-color:#cbd2dc;color:#8792a3;opacity:.65}
.layer-group{padding:16px;margin-top:16px;border:1px solid transparent}.layer-group h3{margin-bottom:12px}.layer-group.drop-target{outline:none;border:1px dashed #2963d4;background:#edf2fd}.layer-drag-preview{position:fixed;z-index:9999;pointer-events:none;display:flex;align-items:center;gap:12px;width:240px;padding:12px;background:#edf2fd;border:2px solid #2963d4;border-radius:8px;box-shadow:0 8px 24px #182b4933;text-align:left}.layer-drag-preview>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drag-source{opacity:.35}.dragging-layer,.dragging-layer *{cursor:grabbing!important;user-select:none!important}

/* Livelli compatti, lato corrente distinto dalla destinazione di trascinamento. */
.layer-group{padding:8px;margin-top:8px;min-height:0}.layer-group h3{margin:0 0 8px}/* Lato visualizzato: bordo come le miniature, fondo bianco e nessuno spostamento del layout. */
.layer-group.current-side{background:#fff;border-color:#2963d4;box-shadow:0 0 0 1px #2963d4}.layer-group.drop-target{background:#e5edff;border-color:#2963d4}.layer-group .layer{margin-top:4px;padding:8px}.select-side-levels{padding:0;text-align:left;width:100%;font-weight:600;color:inherit}.group-edit .alignment,.group-edit label:has(+.alignment),.group-edit #reset-transform,.group-edit #delete,.group-edit>.rule:last-of-type{display:none}.group-edit .rotation-presets+.rule{display:none}

/* La spalla occupa tutta l'altezza; prezzo e azioni restano sotto l'anteprima. */
.zoom-controls>i{padding:0;margin-right:4px}
header .header-quantity{position:absolute;left:50%;transform:translateX(-50%);margin:0}header .quiet{margin-left:auto}
main{height:calc(100dvh - 56px);grid-template-rows:minmax(0,1fr) 56px;min-height:540px}.inspector{grid-row:1/3;min-height:0}.sides{bottom:56px}main>footer{grid-column:2;grid-row:2;min-width:0;padding:8px 16px}.footer-actions{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px}.quote-summary{text-align:center}.footer-actions>button{white-space:nowrap}
@media(min-width:901px) and (max-width:1150px){header>.divider,header>span:not(.badge){display:none}.footer-actions{gap:8px}.footer-actions>button{font-size:10px;padding:8px}.quote-summary strong{font-size:15px}}
@media(max-width:900px){header .header-quantity{position:static;transform:none;margin-left:auto}main{height:auto;min-height:0;grid-template-rows:460px auto auto}.inspector{grid-row:3}.sides{bottom:auto}main>footer{grid-column:1;grid-row:2;height:auto;padding:12px}.footer-actions{grid-template-columns:1fr 1fr;gap:8px}.quote-summary{grid-column:1/-1}.footer-actions>button{white-space:normal}}

/* Inviti contestuali sul lato vuoto e quantità senza controlli ridondanti. */
.empty-side-actions{position:absolute;inset:0;pointer-events:none;z-index:1}
/* Larghezza dal testo, non dalla regione: etichette leggibili anche sul fronte zip mobile. */
.empty-region-actions{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:8px;width:max-content;max-width:calc(100% - 24px);pointer-events:auto}
.empty-region-actions button{background:#fff;min-height:44px;padding:10px 16px;font-size:12px;line-height:1.4;white-space:nowrap;flex-wrap:nowrap;box-shadow:0 2px 8px #183c8010}
#quote-quantity,#initial-quantity{text-align:center;appearance:textfield;-moz-appearance:textfield}#quote-quantity::-webkit-inner-spin-button,#quote-quantity::-webkit-outer-spin-button,#initial-quantity::-webkit-inner-spin-button,#initial-quantity::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Upload visibile nella spalla, overlay solo per file esterni su tutta l'interfaccia. */
.inspector:has([data-section="upload"]:not([hidden])){display:flex;flex-direction:column}
[data-section="upload"]:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:240px}
[data-section="upload"] .drop{flex:1;justify-content:center;margin-bottom:0}
.file-drop-overlay{position:fixed;inset:8px;z-index:100;pointer-events:none;display:flex;align-items:center;justify-content:center;border:3px dashed #2963d4;border-radius:16px;background:#edf2fddd;backdrop-filter:blur(2px)}
.file-drop-overlay strong{padding:24px;background:white;border-radius:12px;color:#2963d4;font-size:20px;text-align:center}
@media(max-width:900px){[data-section="upload"]:not([hidden]){min-height:320px}.file-drop-overlay strong{font-size:16px;margin:16px}}

/* Azioni di copia e cancellazione condivise da elemento e gruppo. */
.group-edit #delete{display:inline-flex}.group-edit>.rule.delete-separator{display:block}#duplicate-destinations{display:grid;gap:8px}#duplicate-destinations button{margin:0}.group-edit #duplicate-destinations{margin-top:16px}
.group-edit #duplicate-destinations{border-top:1px solid #e4e7ed;padding-top:16px}

/* Miniatura prodotto del solo studio: riempimento del riquadro con ritaglio centrato. */
.product-line .product-thumb{object-fit:cover;object-position:center;flex-shrink:0}
/* Colonne stabili anche prima della quantità, quando il riepilogo è nascosto. */
.footer-actions>.secondary{grid-column:2}.footer-actions>#quote-cart{grid-column:3}
@media(max-width:900px){.footer-actions>.secondary{grid-column:1}.footer-actions>#quote-cart{grid-column:2}}

/* HEX esplicito e palette rapide coerenti con gli swatch prodotto. */
.ink-value{display:flex;gap:4px;align-items:center}.ink-value #ink{width:40px;flex-shrink:0;padding:4px}.ink-value #ink-hex{width:100%;min-width:0;height:44px;padding:4px;border:1px solid #d4dae3;border-radius:8px;font-size:11px;text-align:center;text-transform:uppercase}.ink-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.ink-swatches button{height:28px;border:1px solid #ccd2dc;border-radius:4px}.ink-swatches button.active{outline:2px solid #2963d4;outline-offset:2px}

/* Barra compatta nell’editor; palette completa nella vista colore dedicata. */
.ink-bar{width:100%;height:44px;padding:8px;border:1px solid #d4dae3;border-radius:8px;background:white}.ink-bar span{display:block;height:100%;background:#183c80;border:1px solid #0002}.inspector [data-section="color"] h1{margin-top:16px}[data-section="color"] .ink-value #ink{width:56px}[data-section="color"] .ink-value #ink-hex{font-size:14px}
/* Le azioni seguono il colore personalizzato; Applica compare solo per una prova diversa. */
.ink-actions{display:flex;flex-direction:column;gap:12px;border-top:1px solid #e4e7ed;margin-top:16px;padding-top:16px}.ink-actions .wide{margin-top:0}
.fa-eye-dropper:before{content:'\f1fb'}
.fa-palette:before{content:'\f53f'}

/* La lista resta visibile alla selezione; il + di ogni posizione apre le azioni locali. */
.fa-pen-to-square:before{content:'\f044'}.fa-arrow-left:before{content:'\f060'}
.layers{margin-top:0;padding-top:0;border-top:0}#levels-list{border-top:0;padding-top:0}
button.add-layers{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;margin-top:8px;border:1px dashed #d4dae3;border-radius:8px;color:#8792a3;font-size:18px}
button.add-layers[aria-expanded="true"]{color:#2963d4;background:#edf2fd;border-color:#2963d4}
.layer-add-actions{display:flex;gap:8px;margin-top:8px}.layer-add-actions button{flex:1;min-width:0;min-height:40px;padding:8px 4px;font-size:11px}
.back-to-levels{width:100%;justify-content:flex-start;margin-bottom:16px;color:#2963d4;font-weight:600}
@media(min-width:901px){#object-controls>.back-to-levels{position:sticky;top:56px;z-index:1;background:#fff}}
/* Editor testo compatto: valori espliciti accanto ai cursori. */
.text-style-row{display:grid;grid-template-columns:minmax(0,1fr) 48px 108px;gap:8px;align-items:end}.text-style-row label{margin:8px 0 4px}.text-style-row .font-picker summary,.text-style-row select{height:40px;padding:8px;overflow:hidden;text-overflow:ellipsis}.text-style-row .ink-bar{height:40px;padding:6px}.text-advanced{margin-top:16px}.text-range,.rotation-range{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:8px;align-items:center;margin:8px 0}.text-range label{grid-column:1/-1;margin:0}.text-range input[type=number],.rotation-range input[type=number],.text-stroke input[type=number]{width:100%;height:36px;padding:4px;text-align:center;border:1px solid #d4dae3;border-radius:8px}.rotation-range{grid-template-columns:minmax(0,1fr) 72px}.text-justify,.text-stroke{display:flex;align-items:center;gap:8px;margin-top:16px}.text-justify>span{flex:1;font-size:12px}.text-justify>div{display:flex;gap:4px}.text-justify button{width:36px;height:36px;border:1px solid #d4dae3;border-radius:8px}.text-justify button[aria-pressed=true]{border-color:#2963d4;background:#edf2fd;color:#2963d4}.text-justify button[data-justify=left]{text-align:left}.text-justify button[data-justify=right]{text-align:right}.text-stroke{border-top:1px solid #e4e7ed;padding-top:16px}.text-stroke label{margin:0}.text-stroke .ink-bar{width:40px;height:36px;padding:5px}.text-stroke input[type=number]{width:48px;margin-left:auto}

/* Icone semantiche e label sopra i cursori, con valore numerico sulla stessa riga. */
.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.text-justify button[data-justify]{text-align:center}

/* Lo stesso box ospita il più o le azioni; la linea indica la precedenza di drop. */
.layer-add-actions{border:1px dashed #d4dae3;border-radius:8px;padding:8px;min-height:40px}

/* Editor pulito: opzioni progressive, stile rapido e campi numerici senza spin button. */
#object-controls input[type=number]{appearance:textfield;-moz-appearance:textfield}
#object-controls input[type=number]::-webkit-inner-spin-button,#object-controls input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.text-style-row{grid-template-columns:minmax(0,1fr) 40px 80px}
.weight-buttons{display:flex;gap:4px}.weight-buttons button{width:36px;height:40px;border:1px solid #d4dae3;border-radius:8px}.weight-buttons button[aria-pressed=true]{color:#2963d4;border-color:#2963d4;background:#edf2fd}
.text-style-row .font-picker summary{display:flex;align-items:center;gap:8px;list-style:none}.font-picker summary::-webkit-details-marker{display:none}.font-picker summary:before{content:'▸';line-height:1}.font-picker[open] summary:before{transform:rotate(90deg)}
.text-stroke{flex-wrap:wrap}#stroke-options{flex-basis:100%;display:flex;align-items:center;gap:8px}#stroke-options[hidden],.text-justify[hidden]{display:none}

/* Indicatore autonomo: riserva spazio reale e separa le card durante il riordino. */
.layer-insertion{height:8px;display:flex;align-items:center;padding:0 8px;pointer-events:none}.layer-insertion:before{content:"";display:block;width:100%;height:3px;border-radius:4px;background:#2963d4}

/* Reset sulla testata del cursore e interlinea solo per testo multilinea. */
.text-range-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px}.text-range-heading .link{padding:4px 0}.text-range[hidden]{display:none}

/* Navigazione contestuale unica nella barra superiore della spalla. */
.tools #panel-back{grid-column:1/-1;width:100%;flex:1;justify-content:flex-start;color:#2963d4}.tools button[hidden]{display:none}

/* Stessa evidenziazione per il singolo livello e ogni membro selezionato del gruppo. */
.layer-group .layer.active{border-color:#2963d4;box-shadow:0 0 0 1px #2963d4;color:#2963d4}

/* Azione gruppo esplicita accanto al titolo, senza sottrarre spazio ai livelli. */
.layer-group h3{display:flex;align-items:center;justify-content:space-between;gap:8px}.layer-group h3 .select-side-levels{flex:1;width:auto}.select-all-levels{flex-shrink:0;padding:4px 0;white-space:nowrap}

/* Scelta font dedicata e un solo toggle bold nell’editor. */
.text-style-row{grid-template-columns:minmax(0,1fr) 40px 40px}.text-style-row.no-weight{grid-template-columns:minmax(0,1fr) 40px}.font-open{width:100%;height:40px;padding:8px;border:1px solid #d4dae3;border-radius:8px;text-align:left;background:#fff}.font-list{display:grid;gap:8px}.font-list button{padding:16px;text-align:left;font-size:24px;border:1px solid #d4dae3;border-radius:8px}.font-list button[aria-pressed=true]{border-color:#2963d4;background:#edf2fd;color:#2963d4}

/* Anteprima font riconoscibile al mouse e alla tastiera. */
.font-list button:focus-visible{border-color:#2963d4;background:#edf2fd;color:#2963d4;box-shadow:0 0 0 1px #2963d4}

/* Bolla sovrapposta: la lista scorre sotto, senza spazio riservato aggiuntivo. */
#levels-help{position:fixed;z-index:5;box-sizing:border-box;background:#24344f;color:#fff;border-radius:8px;padding:16px 32px 16px 16px;box-shadow:0 4px 16px #14243c26;font-size:12px;line-height:1.6}#levels-help p{margin:0}#dismiss-levels-help{position:absolute;right:4px;top:4px;width:28px;height:28px;color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center}

/* Suggerimento preventivo con la stessa bolla della lista livelli. */
/* Il consiglio prodotto appartiene al flusso della spalla e non copre le opzioni. */
#product-help{margin-top:16px;padding:16px;background:#edf2fd;color:#1c4584;border:1px solid #dce6fa;border-radius:8px;font-size:12px;line-height:1.6}#product-help p{margin:0}

/* Aiuto resta nell'header anche su mobile: nessun launcher copre il canvas o le posizioni. */
header #help{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:40px}
header #help span{margin-left:0}
@media(max-width:900px){header #help{order:4;margin-left:0}}
@media(max-width:600px){header #help{order:2;margin-left:auto}header .header-quantity{order:3;width:100%;margin:0;justify-content:center}}

/* Uscita sempre accessibile, anche nel dialog iniziale che blocca il resto dello studio. */

.quantity-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.quantity-actions button{min-height:44px}

/* Filtri compatti prima del catalogo: nessun font grafico modifica la tipografia UI. */
/* Filtri a capo, accessibili anche senza scorrimento orizzontale del mouse. */
.font-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;max-width:100%}
.font-filters button{flex:none;white-space:nowrap;padding:8px 12px;border:1px solid #d4dbe7;border-radius:24px;background:#fff;font-size:12px;min-height:40px}
.font-filters button[aria-pressed="true"]{background:#ecf2fe;border-color:#2963d4;color:#2963d4}
#font-search{width:100%;min-height:48px}
.font-list button{font-synthesis:none}
.font-list button[hidden]{display:none}
.font-list button[aria-busy="true"]{opacity:.6}
#font-search{padding:12px 48px 12px 16px;border:1px solid #d4dbe7;border-radius:12px;font:inherit;color:inherit;background:#fff;box-sizing:border-box}
#font-search:focus{outline:2px solid #2963d4;outline-offset:2px}

/* Lente interna decorativa: resta spazio per testo e pulsante nativo di cancellazione. */
.font-search-field{position:relative}
.font-search-field>i{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:#68758b}

/* Logo navigabile e assistenza allineata al bordo destro su ogni viewport. */
header .studio-home{display:inline-flex;align-items:center;flex-shrink:0}
header .studio-home:focus-visible{outline:2px solid #2963d4;outline-offset:4px}
header #help{margin-left:auto}

/* Controlli immagine compatti: colore originale, sostituzione ed eliminazione. */
.image-background{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.image-background .secondary{flex:1}
#image-controls input[type=color]{width:40px;height:40px;padding:4px;flex-shrink:0}
#image-tolerance{width:100%;margin:8px 0 16px}
#image-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 16px}
.image-color-row{position:relative;display:flex;align-items:center;border:1px solid #d5dce8;border-radius:8px;min-width:0}
.image-color-row code{font-size:10px;flex:1}
.image-color-edit{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:8px;text-align:start}
/* Il pulsante copre anche il bordo e gli spazi; la gomma ha un bersaglio distinto sopra di esso. */
.image-color-edit::after{content:'';position:absolute;inset:0;border-radius:8px}
.image-color-swatch{display:block;width:40px;height:40px;flex-shrink:0;border:1px solid #d4dae3;border-radius:8px}
.image-color-remove{position:relative;z-index:1;padding:8px;min-width:32px;margin:8px;margin-inline-start:0}

.image-color-row.highlighted{border-color:#2963d4;box-shadow:0 0 0 1px #2963d4;background:#edf2fd}
#image-pick-color{margin-top:0}
#image-pick-color[aria-pressed=true]{border-color:#2963d4;color:#2963d4;background:#edf2fd}
#canvas.sampling-color{cursor:crosshair!important}
@media(max-width:380px){#image-colors{grid-template-columns:1fr}}

/* Glifo FA7 nel sottoinsieme di icone caricato dallo studio. */
.fa-eraser:before{content:"\f12d"}
/* Popup colore unico, compatto e con formato HEX ripristinato ad ogni apertura. */
#studio-color-picker{width:320px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:16px;border:1px solid #d5dce8;border-radius:12px;color:#252a3a;box-shadow:0 8px 32px #0003}
#studio-color-picker::backdrop{background:#14213d33}
#studio-color-picker form{display:grid;gap:16px}
.picker-heading,.picker-value-row,.picker-actions{display:flex;align-items:center;gap:8px}
.picker-heading strong{flex:1}.picker-close{font-size:24px;line-height:24px;padding:4px}
.picker-sv{height:176px;position:relative;touch-action:none;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);border-radius:8px}
.picker-sv span{position:absolute;width:16px;height:16px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0008;transform:translate(-50%,-50%);pointer-events:none}
#studio-color-picker label{margin:0}#picker-hue{width:100%;margin:0;accent-color:#2963d4}
.picker-sample{width:40px;height:40px;border:1px solid #ccd3e0;border-radius:8px;flex-shrink:0}
#picker-value{width:100%;min-width:0;text-transform:none}#picker-format{width:100%;margin:0}.picker-actions button{flex:1}

/* Campioni pieni e arrotondati, senza cornice interna, in tutti i controlli colore. */
#image-controls input[type=color],.ink-value #ink{padding:0;border:1px solid #d4dae3;border-radius:8px;overflow:hidden;cursor:pointer;appearance:none;-webkit-appearance:none}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}
input[type=color]::-moz-color-swatch{border:0;border-radius:7px}
.ink-bar,.text-style-row .ink-bar,.text-stroke .ink-bar{padding:0;overflow:hidden}
.ink-bar span{border:0;border-radius:7px}

/* Pattern decorativo dietro il canvas: resta escluso da grafica e file di stampa. */
.workspace{background-image:radial-gradient(circle,#d6dce7 .8px,transparent .8px);background-size:12px 12px;background-position:center;}

/* Header mobile su una riga: panino, quantità centrata e Aiuto. */
@media(max-width:900px){header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);height:64px;min-height:64px;padding:8px 12px;gap:8px}header .studio-home{grid-column:1;grid-row:1;justify-self:start;min-height:44px;align-items:center}header .studio-home img{display:block;width:40px;height:32px}header .header-quantity{grid-column:2;grid-row:1;order:0;position:static;transform:none;width:auto;margin:0;gap:8px;justify-content:center}header .header-quantity #quote-quantity{width:64px;height:40px}header #help{grid-column:3;grid-row:1;order:0;justify-self:end;margin:0;padding:0;gap:4px;min-height:44px}}

/* La shell mobile segue la viewport; i gesti sul canvas restano gestiti dal suo motore. */
@media(max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:clip;touch-action:pan-y}
  main,main.panel-closed{width:100%;max-width:100%;min-width:0}
  header,.inspector,main>footer,.footer-actions,.inspector section{min-width:0;max-width:100%}
  .inspector .two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inspector input,.inspector select,.inspector textarea{min-width:0;max-width:100%}
  /* iOS non ingrandisce la pagina quando si entra in un campo con testo da 16px. */
  input:not([type=range]):not([type=color]),select,textarea{font-size:16px!important}
  dialog{max-width:calc(100% - 32px)}
  .product-line>div{min-width:0;overflow-wrap:anywhere}
}

/* Mobile: viste sopra il canvas e cronologia in una fascia separata sotto. */
@media(max-width:900px){
 header{position:static}
 main,main.panel-closed{grid-template-rows: min(620px,calc(100vw + 192px)) auto auto}
 .workspace{height:100%;min-height:0}
 .workspace .canvas-wrap{inset:112px 0 64px}
 .workspace .zoom-controls{display:none}
 .workspace .stage-top{position:absolute;top:80px;left:0;right:0;min-height:0;padding:0 12px;justify-content:center}
 .sides{grid-column:1/-1;grid-row:1;top:0;bottom:auto;left:0;right:0;width:100%;height:min(620px,calc(100vw + 192px));padding:8px 12px;justify-content:flex-start}
 .side-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
 .sides .side-slots button{font-size:9px;line-height:12px;padding:4px;min-width:0}
 .sides .side-slots img{width:32px;height:32px;margin-bottom:4px}
 .side-history{top:auto;bottom:12px;left:0;right:0;justify-content:center;gap:8px}
 .sides .history-button{min-height:40px;padding:8px 12px}
}

/* Il preventivo mobile vive in testata; la CTA segue sempre il pannello in fondo alla pagina. */
#quote-total small{font:inherit}.quote-summary .quote-unit-detail{display:inline;font:inherit;color:inherit;margin:0}
@media(max-width:900px){
 header{grid-template-columns:40px auto minmax(0,1fr)}
 header #help{display:none}
 header .header-quantity{gap:4px}
 header .header-quantity #quote-quantity{width:48px;padding:8px 4px}
 header .quote-summary{grid-column:3;grid-row:1;min-width:0;text-align:right}
 header .quote-summary strong{font-size:16px;white-space:nowrap}
 header #quote-total small{font-size:10px;font-weight:400}
 header #quote-unit{font-size:10px;white-space:nowrap;margin-top:4px}
 header .quote-summary .quote-unit-detail{display:none}
 #levels-help{display:none!important}
 main,main.panel-closed{grid-template-rows:min(536px,calc(100vw + 104px)) auto auto}
 .sides{height:min(536px,calc(100vw + 104px))}
 .workspace .canvas-wrap{inset:80px 0 48px}
 .side-history{bottom:4px}
 .inspector{grid-row:2}
 main>footer{grid-row:3;padding:12px;position:static}
 .footer-actions{display:flex}
 .footer-actions>#quote-cart{width:100%;flex:1}
}

/* Quantità nuovamente centrata e CTA mobile con proporzioni dei tab. */
@media(max-width:900px){
 header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px}
 main>footer .footer-actions>#quote-cart{min-height:48px;padding:12px 16px;font-size:14px}
}
@media(max-width:360px){header .header-quantity{flex-direction:column;gap:0}header .header-quantity label{font-size:10px}header .header-quantity #quote-quantity{height:32px}header .quote-summary strong{font-size:14px}}

/* I cambi del pannello sotto il canvas non devono spostare la pagina durante i gesti. */
@media(max-width:900px){html,body,main,.inspector{overflow-anchor:none}}

/* Safari gestisce direttamente lo scorrimento del canvas con un dito, inclusa l’inerzia. */
@media(max-width:900px){canvas{touch-action:pan-y}}

/* Previene pull-to-refresh sui browser compatibili, mantenendo lo scroll nativo mobile. */
@media(max-width:900px){html,body{overscroll-behavior-y:none}}

/* Freccia interna distanziata dal bordo, mantenendo il select nativo su ogni dispositivo. */
select,#quote-settings select,#quote-date{
 appearance:none;-webkit-appearance:none;
 padding-right:40px;
 background-image:linear-gradient(45deg,transparent 50%,#596478 50%),linear-gradient(135deg,#596478 50%,transparent 50%);
 background-position:calc(100% - 28px) 50%,calc(100% - 24px) 50%;
 background-size:4px 4px;background-repeat:no-repeat;
}

/* Select condivisi: nome nel campo, delta solo nelle opzioni; freccia V a 16px. */

 #quote-settings select.mobile-select-native{display:none}
 .mobile-select{display:block;width:100%;min-width:0;margin-top:0}
 .mobile-select summary{list-style:none;position:relative;min-height:48px;padding:12px 40px 12px 12px;background:white;border:1px solid #d4dae3;border-radius:8px;font-size:16px;line-height:24px;overflow-wrap:anywhere;cursor:pointer}
 .mobile-select summary::-webkit-details-marker{display:none}
 .mobile-select summary:after{content:'';position:absolute;right:16px;top:20px;width:8px;height:8px;border-right:1px solid #596478;border-bottom:1px solid #596478;transform:rotate(45deg)}
 .mobile-select[open] summary:after{transform:rotate(225deg);top:24px}
 .mobile-select summary[aria-disabled=true]{opacity:.5;cursor:default}
 .mobile-select summary:focus-visible{outline:2px solid #2963d4;outline-offset:2px}
 .mobile-select-options{margin-top:4px;border:1px solid #d4dae3;border-radius:8px;background:#fff;padding:4px;max-height: min(360px,50dvh);overflow-y:auto;overscroll-behavior:contain}
 .mobile-select-options button{display:block;width:100%;min-height:48px;padding:12px;text-align:left;font-size:14px;line-height:20px;white-space:normal;overflow-wrap:anywhere;border-radius:4px}
 .mobile-select-options button[aria-pressed=true]{background:#edf2fd;color:#2963d4;font-weight:600}


/* Allineamento unico di carattere, colore e stile: campioni quadrati e baseline comuni. */
.text-style-row{align-items:start}
.text-style-row>div{min-width:0}
.text-style-row label{display:block;line-height:20px;min-height:20px;margin:8px 0 4px}
.text-style-row .font-open,.text-style-row .ink-bar,.text-style-row .weight-buttons button{height:40px;min-height:40px;vertical-align:top}
.text-style-row .ink-bar,.text-style-row .weight-buttons button{display:block;width:40px;min-width:40px;padding:0;border-radius:8px}
.text-style-row .weight-buttons{height:40px}

/* Proporzioni del preventivatore precedenti al passaggio ai menu personalizzati. */
.mobile-select summary{font-size:12px;line-height:20px;min-height:40px;padding-top:8px;padding-bottom:8px}
.mobile-select summary:after{top:14px}.mobile-select[open] summary:after{top:18px}
.mobile-select-options button{font-size:12px;min-height:40px;padding:8px 12px}

/* Selettore dimensionale compatto nel solo lato attivo dei livelli. */
.print-size-select{margin-block:8px}
/* Stesso controllo del prodotto; selezione blu rinforzata, hover grigio da 1 px solo sui gruppi non selezionati. */


/* I loader bloccano tastiera e touch; il bordo tratteggiato resta riservato al drop. */
.processing-overlay{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;padding:16px;touch-action:none;outline:none;background:#edf2fddd;backdrop-filter:blur(2px)}
.processing-overlay:not([open]){display:none}
.processing-overlay::backdrop{background:#edf2fd80;backdrop-filter:blur(2px)}
.processing-overlay strong{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:480px;padding:24px;background:white;border-radius:12px;color:#2963d4;font-size:20px;text-align:center;line-height:1.5}
@media(max-width:900px){.processing-overlay strong{font-size:16px}}
.cart-submit-spinner{display:block;width:40px;height:40px;border:4px solid #dbe5fa;border-top-color:#2963d4;border-radius:50%;animation:cart-submit-spin .8s linear infinite}
@keyframes cart-submit-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.cart-submit-spinner{animation-duration:2s}}

/* Anteprima locale prima/dopo, contenuta nel viewport anche su telefono. */
#background-suggestion{--suggestion-padding:24px;width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:var(--suggestion-padding);border:1px solid #d4dae3;border-radius:16px;color:#252a3a;overflow:auto}
#background-suggestion::backdrop{background:#24344f99}
#background-suggestion h2{font-size:20px;margin:0 0 24px}
.background-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.background-comparison figure{margin:0;min-width:0;display:flex;flex-direction:column;gap:12px}.background-comparison figure>button{width:100%}.background-comparison figure>button:last-child{margin-top:auto}
.background-comparison figcaption{font-size:14px;text-align:center}.background-comparison figcaption span{display:inline-block;padding:4px 12px;background:#edf2fd;color:#2963d4;border-radius:16px}
/* L'intera anteprima conferma la stessa scelta della CTA, anche da tastiera e touch. */
.background-comparison .background-preview-choice{height:240px;padding:16px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#e4e7ed 0% 25%,#fff 0% 50%) 0 / 16px 16px}

.background-comparison img,.background-comparison canvas{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;touch-action:pan-y}
#background-suggestion-status{font-size:14px;text-align:center;padding:16px}
#background-suggestion-status:empty{display:none}
#background-suggestion.has-color-option{width:min(944px,calc(100% - 32px))}
.has-color-option .background-comparison{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:600px){#background-suggestion{--suggestion-padding:16px}.background-comparison,.has-color-option .background-comparison{grid-template-columns:1fr;gap:24px}.background-comparison .background-preview-choice{height:184px}}

/* Con tre alternative il pulsante intermedio è distinto dalla rimozione totale. */
.has-color-option #background-suggestion-remove{background:#edf2fd;color:#2963d4;border:1px solid #d4dff6}

/* Stesso margine su tutti i lati, anche quando la testata rimane visibile durante lo scroll. */
.background-suggestion-heading{display:flex;align-items:flex-start;gap:16px;position:sticky;top:0;background:#fff;z-index:1;margin-bottom:16px}
/* Copre anche il margine sopra la testata: il contenuto scorrevole non deve riaffiorare lì. */
.background-suggestion-heading::before{content:'';position:absolute;inset-block-start:calc(-1 * var(--suggestion-padding));inset-inline:0;height:var(--suggestion-padding);background:#fff;pointer-events:none}
#background-suggestion .background-suggestion-heading h2{margin:0;flex:1;align-self:center}
#background-suggestion-close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:0;border:1px solid #d4dae3;border-radius:8px;font-size:20px;line-height:1;background:#fff}
#background-suggestion-close .fa-xmark:before{content:'\f00d'}


/* Feedback solo nel layout desktop con mouse: niente hover persistenti dopo un tap.
   Le selezioni e il focus restano autonomi; gli swatch non cambiano mai tinta. */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
 button.primary:not(:disabled):not([aria-disabled="true"]):hover{background:#2054b8}
 button.secondary:not(:disabled):not([aria-disabled="true"]):hover{background:#edf2fd;border-color:#b8c9e8}
 .has-color-option #background-suggestion-remove:not(:disabled):hover{background:#dfe8fb;border-color:#b8c9e8}
 button.delete-layer:not(:disabled):hover{background:#fff1f2;border-color:#e7bac0}

 :is(.tools,.sides,.alignment,.rotation-presets,.weight-buttons,.text-justify,.zoom-controls,.font-filters,.mobile-select-options,.font-picker) button:not(:disabled):not([aria-disabled="true"]):hover,
 button:is(.icon,.font-open,.picker-close):not(:disabled):hover,
 #background-suggestion-close:not(:disabled):hover{background:#edf2fd}
 :is(.tools,.sides) button.active:not(:disabled):hover,
 :is(.weight-buttons,.text-justify,.font-filters,.mobile-select-options) button[aria-pressed="true"]:not(:disabled):hover,
 #image-pick-color[aria-pressed="true"]:not(:disabled):hover{background:#dfe8fb}
 .font-list button:not(:disabled):hover{border-color:#2963d4;background:#e2ebfc;color:#2963d4;box-shadow:0 0 0 1px #2963d4}
 .mobile-select summary:not([aria-disabled="true"]):hover{background:#edf2fd;border-color:#b8c9e8}
 button.add-layers:not(:disabled):hover{color:#2963d4;background:#edf2fd;border-color:#2963d4}
 .layer:hover{background:#e2ebfc}
 .select-side-levels:not(:disabled):hover{color:#2963d4}
 button.link:not(:disabled):hover,#help:not(:disabled):hover{text-decoration:underline;text-underline-offset:3px}
 :is(#dismiss-levels-help,#dismiss-product-help):not(:disabled):hover{background:#ffffff26;border-radius:4px}

 .image-color-row:has(.image-color-edit:not(:disabled):hover){background:#edf2fd;border-color:#b8c9e8}
 .image-color-row.highlighted:has(.image-color-edit:not(:disabled):hover){border-color:#2963d4}
 :is(#colors,.ink-swatches) button:not(:disabled):hover,
 button.ink-bar:not(:disabled):hover,
 :is(#image-controls,.ink-value) input[type=color]:not(:disabled):hover{box-shadow:0 0 0 2px #a1aab8}
 .background-preview-choice:not(:disabled):hover{box-shadow:inset 0 0 0 2px #2963d4}

 /* Il gruppo selezionato conserva il bordo blu; il titolo ha un feedback proprio. */
 .layer-group.has-content:not(.current-side):not(.drop-target):hover:not(:has(.layer:hover,details:hover,.add-layers:hover,.layer-add-actions:hover)){border-color:#a1aab8;box-shadow:none;cursor:pointer}
}

/* Un solo cursore per la riduzione, con campioni scorrevoli. */
.image-color-count-controls{display:flex;align-items:center;gap:16px;margin-block:8px 16px}
.image-color-count-controls input[type=range]{flex:1;min-width:0;width:100%}
/* Ai limiti della palette lo scroll prosegue naturalmente nella sidebar. */
#image-colors{max-height:352px;overflow:auto;overscroll-behavior:auto}

/* Unità fisse nel campo: il valore resta numerico e tutti i cursori finiscono allo stesso bordo. */
.number-with-unit{position:relative;min-width:0}
.text-range .number-with-unit input,.rotation-range .number-with-unit input{padding-inline:8px 24px;appearance:textfield;-moz-appearance:textfield}
.number-with-unit input::-webkit-inner-spin-button,.number-with-unit input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.number-with-unit>span{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);color:#8b95a5;pointer-events:none;font-size:12px}

/* Chat AI locale: icona animata, conversazione flessibile e compositore sul fondo. */
.fa-microphone:before{content:'\f130'}.fa-arrow-up:before{content:'\f062'}.fa-stop:before{content:'\f04d'}
.ai-sparkle{background:linear-gradient(110deg,#2864df,#9944dc,#e74087,#ee9729,#2864df);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:ai-spectrum 5s ease-in-out infinite alternate;font-size:20px}
/* Andata e ritorno senza salto; sul prodotto l’icona usa la stessa misura delle altre azioni. */
.empty-region-actions .ai-sparkle,.layer-add-actions .ai-sparkle{font-size:inherit}
@keyframes ai-spectrum{from{background-position:0% 50%}to{background-position:100% 50%}}@media(prefers-reduced-motion:reduce){.ai-sparkle{animation:none}}
.inspector.ai-panel{display:flex;flex-direction:column;overflow:hidden}.inspector.ai-panel .tools{flex-shrink:0}
#studio-ai:not([hidden]){position:relative;display:flex;flex-direction:column;flex:1;min-height:0;padding-bottom:0}/* Il margine inferiore usa solo il padding della spalla, come i lati. */
.ai-chat-body{display:flex;flex-direction:column;flex:1;min-height:0;gap:16px}
#ai-messages{display:flex;flex-direction:column;gap:16px;overflow-y:auto;overscroll-behavior:auto;flex:1;min-height:0;padding:4px}
.ai-welcome{margin:auto 0;text-align:center;padding:24px 8px;display:grid;gap:16px}/* Il glifo ha spazio anche sopra le scintille, senza taglio del gradiente. */
.ai-welcome>i{font-size:40px;line-height:1.4;padding:4px;justify-self:center;width:auto;overflow:visible}.ai-welcome p{color:#7c8799;line-height:1.5}
#ai-messages p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.ai-question{align-self:flex-end;max-width:92%;background:#edf2ff;border-radius:16px;padding:12px 16px;font-size:13px}
.ai-proposal{display:grid;gap:8px}.ai-proposal img{width:100%;height:auto;border-radius:12px}.ai-proposal button{justify-self:end;padding:8px 16px;min-height:40px}
#ai-form{margin:0;border:1px solid #dce1e9;box-shadow:0 2px 12px #24324b0a;border-radius:24px;padding:12px;flex-shrink:0;background:#fff}
#ai-form textarea{border:0;outline:0;box-shadow:none;padding:4px 8px;resize:none;width:100%;min-height:48px;max-height:120px;font:inherit;font-size:14px;background:transparent;box-sizing:border-box}
.ai-composer-actions{display:flex;align-items:center;gap:8px}.ai-composer-actions button{flex-shrink:0;width:36px;height:36px;min-height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;font-size:16px}
#ai-status{flex:1;margin:0;font-size:11px;color:#788396;overflow-wrap:anywhere}#ai-microphone[aria-pressed=true]{background:#2963d4;color:#fff}
#ai-login-gate{position:absolute;inset:48px 0 0;z-index:3;background:#ffffffa8;backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}
/* Keep authentication actions compact even when the AI panel expands. */
#ai-login-gate>button{width:192px;max-width:100%;margin-top:0;flex-shrink:0}
#ai-login-gate[hidden]{display:none}#ai-login-gate p{font-size:14px;line-height:1.5;margin:0}#ai-login-gate>i{font-size:32px}
#ai-attachments{display:flex;gap:8px;padding:4px 8px 8px}#ai-attachments[hidden]{display:none}.ai-reference-chip{position:relative}.ai-reference-chip img{width:48px;height:48px;object-fit:cover;border-radius:8px}.ai-reference-chip button{position:absolute;right:-4px;top:-4px;background:#fff;border:1px solid #d4dae3;border-radius:50%;padding:0;width:24px;height:24px;min-height:24px}
#ai-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:16px}#ai-gallery button{padding:4px;border:1px solid #dce1e9;border-radius:8px;background:#fff;cursor:grab}#ai-gallery img{width:100%;aspect-ratio:1;object-fit:contain;display:block}#ai-gallery button:focus-visible{outline:2px solid #2963d4}#ai-gallery-count{font-weight:400;font-size:12px;color:#7b8597}
#ai-auth-dialog{padding:0;border:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:transparent;overflow:hidden}#ai-auth-frame{width:100%;height:100%;border:0}#ai-auth-close{position:fixed;right:16px;top:16px;width:40px;height:40px;display:grid;place-items:center;background:#fff;border:1px solid #d4dae3;border-radius:8px;z-index:2}
@media(max-width:900px){.inspector.ai-panel{height:calc(100dvh - 72px);min-height:440px}}

/* Livelli microfono: puntini silenziosi e barre proporzionali alla voce, storia da destra a sinistra. */
#ai-waveform:not([hidden]){height:36px;display:flex;align-items:center;justify-content:space-between;gap:4px;overflow:hidden;direction:ltr;padding:0;width:100%}
#ai-waveform span{display:block;flex:0 0 4px;border-radius:4px;background:#64748b;min-height:4px}

.ai-composer-feedback{flex:1;min-width:0}.ai-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#studio-ai.ai-drop-target{outline:2px dashed #2963d4;outline-offset:-4px;background:#edf2fd}

/* Spalla AI autonoma: si estende sul prodotto senza spostare la geometria del capo. */
@media(min-width:901px){.inspector.ai-panel{width:800px;max-width:100vw;position:relative;z-index:12;background:#fff;box-shadow:8px 0 24px #183c8010}}
#ai-form{position:relative}#ai-reference-menu:not([hidden]){position:absolute;bottom:56px;left:8px;z-index:20;background:#fff;border:1px solid #d4dae3;border-radius:12px;box-shadow:0 8px 24px #183c8026;padding:8px;display:flex;flex-direction:column;min-width:200px}
#ai-reference-menu button{width:100%;height:auto;min-height:36px;border-radius:8px;text-align:left;display:block;padding:8px 12px;white-space:nowrap}.ai-answer{white-space:pre-wrap;line-height:1.6;margin:12px 0 20px}

/* Chat AI: allegati nel turno, anteprime compatte e attesa senza percentuali inventate. */
.ai-question .ai-thumbnail{display:inline-flex;margin-top:12px}
.ai-thumbnail{width:128px;height:128px;padding:4px;flex:0 0 128px;background:#f5f7fc;border:1px solid #d8dfec;border-radius:12px;overflow:hidden}
.ai-thumbnail img{width:100%;height:100%;object-fit:contain}
#ai-messages .ai-proposal{display:flex;align-items:center;gap:16px;background:none;padding:0}
#ai-messages .ai-proposal .primary{width:auto;padding:0 20px}
.ai-loading-dots{display:grid;grid-template-columns:repeat(12,8px);gap:8px;padding:16px;border:1px solid #d8dfec;border-radius:16px;width:max-content;margin-top:12px}
.ai-loading-dots i{width:5px;height:5px;border-radius:50%;background:#6295ef;animation:ai-dot-wave 1.6s ease-in-out infinite;animation-delay:var(--delay)}
@keyframes ai-dot-wave{0%,100%{opacity:.2;transform:scale(.5)}50%{opacity:1;transform:scale(1.4)}}
.ai-image-preview{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;box-sizing:border-box;border:0;background:#f5f7fc;padding:48px 16px 16px}
.ai-image-preview::backdrop{background:#202533cc}.ai-image-preview img{width:100%;height:100%;object-fit:contain}.ai-image-preview button{position:absolute;right:16px;top:8px;width:36px;height:36px;padding:0;font-size:28px}
@media(prefers-reduced-motion:reduce){.ai-loading-dots i{animation:none;opacity:.65}}

/* Galleria AI compatta, con copia verso il lato scelto. */
#ai-gallery button{touch-action:none;min-width:0} .ai-gallery-ghost{position:fixed;z-index:10000;pointer-events:none;width:72px;height:72px;padding:4px;border:1px solid #2963d4;border-radius:8px;background:white;opacity:.85}.ai-gallery-ghost img{width:100%;height:100%;object-fit:contain}.workspace.drop-target{outline:3px solid #2963d4;outline-offset:-3px}
@media(max-width:480px){#ai-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Salvataggi e scelta prodotto riusano Lexend, controlli da 40 px e griglia 8/4 dello studio. */
#studio-site-auth[x-cloak]{display:none}
.studio-product-browser #project-product-search{display:block}
/* La lista visuale riusa il catalogo: categorie e genere restano navigabili senza inserire una ricerca. */
.studio-project-dialog.studio-product-browser{width:min(1184px,calc(100vw - 32px))}.studio-product-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.studio-product-heading h2{margin:0}.studio-product-heading>button{width:40px;padding:8px}#project-product-path{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px}#project-product-path button{padding:8px}#project-product-facets{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}#project-product-facets button[aria-pressed=true]{border-color:#2963d4;box-shadow:0 0 0 1px #2963d4}#project-product-search{display:block}.studio-product-search{display:flex;gap:8px}#project-product-query{width:100%;min-width:0}.studio-product-search button{flex-shrink:0}#project-product-pagination{justify-content:space-between;align-items:center}
@media(max-width:600px){.studio-product-browser{padding:16px}.studio-product-search{flex-wrap:wrap}.studio-product-search button{width:100%}}
.studio-project-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto;border:0;border-radius:16px;padding:24px;font:inherit;color:#1a2231}.studio-project-dialog::backdrop{background:rgba(26,34,49,.5)}.studio-project-dialog h2{font-size:20px;margin:0 0 16px;font-weight:700}.studio-project-dialog label{display:block;margin:16px 0 8px;font-weight:500}.studio-project-dialog input:not([type=checkbox]){box-sizing:border-box;width:100%;border:1px solid #d4dae3;border-radius:8px;padding:8px 16px;min-height:40px;font:inherit}.studio-project-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.studio-project-dialog p{font-size:14px;line-height:1.5}.studio-project-dialog .studio-project-check{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:400}.studio-project-check input{flex-shrink:0;margin-top:4px}.studio-project-dialog button{min-height:40px}#project-product-search{display:flex;flex-wrap:wrap;gap:8px}#project-product-query{flex:1;min-width:160px}#project-product-results{margin:16px 0}#project-review{position:static;box-sizing:border-box;width:100%;margin:8px 0 16px;padding:16px;border:1px solid #2963d4;border-radius:8px;background:#fff;box-shadow:0 8px 32px #0002}#project-review p{font-size:14px;margin:0 0 8px}#project-unplaced{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.project-unplaced-row{display:flex;align-items:center;gap:8px}#project-unplaced select{padding:8px;border:1px solid #d4dae3;border-radius:8px;font:inherit}.footer-actions{flex-wrap:wrap}#project-save{white-space:nowrap}

/* La chiusura dei dialog usa la stessa icona Font Awesome dei controlli del sito. */
.fa-xmark:before{content:"\f00d"}

/* Nome progetto modificabile: cresce senza sottrarre spazio ai controlli header. */
header .project-header-name{width:240px;min-width:80px;max-width:calc(50vw - 450px);border:1px solid transparent;border-radius:8px;background:transparent;padding:8px;color:inherit;font-weight:500;text-overflow:ellipsis}
header .project-header-name:hover,header .project-header-name:focus{border-color:#d4dae3;background:#fff}
header .project-header-name::placeholder{color:inherit;opacity:1}
/* Il titolo resta fuori dal controllo quantità centrato; sul telefono usa una seconda riga compatta. */
@media(min-width:901px) and (max-width:1150px){header .badge{display:none}header .project-header-name{max-width:calc(50vw - 320px)}}
@media(max-width:900px){header{height:auto;grid-template-rows:auto auto}header .project-header-name{grid-column:1/-1;grid-row:2;width:100%;max-width:none;min-width:0;min-height:32px;padding:4px 8px;font-size:12px}}

/* Riepilogo prodotto: stesso respiro da 16px sopra la foto, prima del cambio e prima del separatore. */
.product-panel .tools{margin-bottom:16px}
.product-panel .product-line{padding:0}
.product-panel #project-change-product{margin-top:16px}

/* Bordo AI da 1px: fondo bianco e gradiente confinato al bordo, senza cambiare le dimensioni. */
.empty-region-actions button:has(.ai-sparkle),.layer-add-actions button:has(.ai-sparkle){border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#2864df,#9944dc,#e74087,#ee9729,#2864df) border-box;background-size:100% 100%,300% 100%;animation:ai-spectrum 5s ease-in-out infinite alternate}
@media(prefers-reduced-motion:reduce){.empty-region-actions button:has(.ai-sparkle),.layer-add-actions button:has(.ai-sparkle){animation:none}}
/* Salvataggio immediato e proprietà progetto condividono la stessa cella della toolbar. */
.project-save-actions{display:flex;min-width:0}.project-save-actions #project-save{border-radius:8px 0 0 8px;min-width:0}.project-save-actions #project-properties{border-left:0;border-radius:0 8px 8px 0;padding:8px;min-width:32px}
@media(max-width:900px){.project-save-actions #project-save{flex:1;white-space:normal}.project-save-actions button{min-height:40px}}
/* Icone FA7 della shell autonoma: feedback di salvataggio e menu proprietà. */
.fa-spinner:before{content:'\f110'}.fa-chevron-down:before{content:'\f078'}.fa-spin{display:inline-block;animation:bp-studio-spin 1s linear infinite}@keyframes bp-studio-spin{to{transform:rotate(360deg)}}
.project-save-actions #project-properties{flex:0 0 36px;width:36px}

/* Tipografia numerica unica per dimensioni, cursori e rotazione di testi e immagini. */
#object-controls input[type=number]{font-size:14px;font-weight:600;line-height:1.4;text-align:center;color:#252a3a}

/* Allegati riconoscibili anche con trasparenza: cornice fissa e rimozione centrata sull’angolo. */
#ai-attachments{flex-wrap:wrap;gap:12px;padding-top:8px}
.ai-reference-chip{flex:0 0 56px;width:56px;height:56px}
.ai-reference-chip img{display:block;width:56px;height:56px;object-fit:contain;border:1px solid #d4dae3;border-radius:8px;background:#f6f8fc;padding:4px}
.ai-reference-chip button{display:flex;align-items:center;justify-content:center;line-height:1;right:-4px;top:-4px;padding:0}
.ai-reference-chip button i{font-size:12px;line-height:1}

/* Cestino contestuale compatto, fuori dal canvas esportato. */
#selection-delete{position:absolute;z-index:4;transform:translateX(-50%);width:32px;height:32px;display:grid;place-items:center;border:1px solid #d4dae3;border-radius:8px;background:#eef0f3;color:#596478;box-shadow:0 2px 8px #24324b14}
#selection-delete[hidden]{display:none}#selection-delete:hover{background:#e1e5eb;color:#252a3a}
@media(max-width:900px){#selection-delete{width:40px;height:40px}}

/* Adaptive security confirmation reuses the compact studio dialog rhythm. */
.ai-security-confirmation{max-width:calc(100vw - 32px);width:352px;padding:24px;border:1px solid #d7deec;border-radius:8px;color:#253047}.ai-security-confirmation p{margin:0 0 16px}.ai-security-confirmation button{margin-top:16px;padding:8px 16px;border:1px solid #d7deec;border-radius:8px;background:#fff;color:#2963d4}.ai-security-confirmation::backdrop{background:rgba(20,30,50,.4)}
/* The saved project label and its dictatable ID share one unbroken line, including on small screens. */
header .project-reference{margin-left:auto;font-size:12px;line-height:1.6;min-width:0;white-space:nowrap;flex-shrink:0;align-items:center;gap:4px}
header .project-reference[hidden]{display:none}
header .project-reference:not([hidden]){display:inline-flex}
header .project-reference strong{display:inline;font-weight:600;font-variant-numeric:tabular-nums;user-select:all}
header .project-reference:not([hidden])+#help{margin-left:0}
/* Saved reference has its own row, below the editable title; Help remains reachable on small screens. */
@media(max-width:900px){header:has(.project-reference:not([hidden])){height:148px;min-height:148px;grid-template-rows:40px 32px 44px}header .project-reference{grid-column:1/3;grid-row:3;align-self:center;margin:0;font-size:12px;max-width:none}header .project-reference:not([hidden]){display:flex;gap:4px}header .project-reference strong{display:inline;font-weight:600}header:has(.project-reference:not([hidden])) #help{display:inline-flex;grid-row:3}header:has(.project-reference:not([hidden]))+main{height:calc(100dvh - 228px)}}

/* Azioni contestuali esterne al canvas, ancorate insieme sotto la selezione. */
#selection-actions{position:absolute;z-index:4;transform:translateX(-50%);display:flex;align-items:center;gap:8px}
#selection-actions[hidden]{display:none}
#selection-actions #selection-delete{position:static;transform:none}
#selection-generate{height:32px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #d4dae3;border-radius:8px;background:#eef0f3;color:#252a3a;box-shadow:0 2px 8px #24324b14;font:inherit;font-size:14px}
#selection-generate .ai-sparkle{font-size:14px}
#selection-generate:hover{background:#e1e5eb}
@media(max-width:900px){#selection-generate{height:40px}}

/* La bacchetta contestuale resta grande quanto il cestino, indipendentemente dallo zoom. */
#selection-generate{width:32px;min-width:32px;padding:0;justify-content:center;border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#2864df,#9944dc,#e74087,#ee9729,#2864df) border-box;background-size:100% 100%,300% 100%;animation:ai-spectrum 5s ease-in-out infinite alternate}
#selection-generate:hover{background-image:linear-gradient(#f5f8ff,#f5f8ff),linear-gradient(110deg,#2864df,#9944dc,#e74087,#ee9729,#2864df)}
@media(max-width:900px){#selection-generate{width:40px;min-width:40px}}
@media(prefers-reduced-motion:reduce){#selection-generate{animation:none}}

/* Lo stato automatico conserva leggibilità, senza suggerire un’azione cliccabile. */
.project-save-actions #project-save{border-radius:8px}
#project-save.autosave-indicator:disabled{opacity:1;cursor:default;color:#788293;background:#f5f6f8}

/* Palette compatta: stessi campioni nel riepilogo e nella transazione di modifica. */
#image-colors{display:flex;flex-wrap:wrap;gap:8px;max-height:none;overflow:visible;margin:8px 0}
#image-colors>button{padding:0;min-width:0;min-height:0;flex:0 0 24px;display:block;width:24px;height:24px;border:1px solid #d4dae3;border-radius:4px}
#image-palette-swatches{margin:16px 0 24px}
.ink-swatches .transparent-swatch{background:repeating-conic-gradient(#d4dae3 0% 25%,#fff 0% 50%) 0 0/12px 12px}
.ink-swatches .transparent-swatch[aria-pressed=true]{outline:2px solid #2963d4;outline-offset:2px}

#image-palette-swatches{display:flex;flex-wrap:wrap;gap:8px}
#image-palette-swatches button{flex:0 0 32px;width:32px;height:32px}

/* Campioni compatti quadrati; lo sbarramento rende esplicita la trasparenza. */
.ink-swatches{display:flex;flex-wrap:wrap;gap:8px}
.ink-swatches button{width:32px;height:32px;flex:0 0 32px;border-radius:4px}
.ink-swatches .transparent-swatch{position:relative;overflow:hidden}
.ink-swatches .transparent-swatch::after{content:"";position:absolute;left:-25%;top:calc(50% - 1px);width:150%;height:2px;background:#e53935;transform:rotate(-45deg);pointer-events:none}
#sample-color{margin:0 0 16px}

/* Otto campioni per riga: 31 tinte e trasparenza completano quattro righe. */
#basic-inks{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
#basic-inks button{width:100%;height:auto;aspect-ratio:1;min-width:0}
#view-all-colors{margin-top:0;margin-bottom:16px}

/* Applica segue i campioni della composizione, senza un separatore residuo in fondo. */
[data-section="color"] .ink-actions{border:0;margin:0 0 16px;padding:0;gap:0}
[data-section="color"] .ink-actions:has(#apply-ink[hidden]){display:none}

/* Selettore catalogo ampio: risultati e filtri condivisi affiancati, filtri sopra le card su mobile. */
.studio-project-dialog.studio-product-browser{width:calc(100vw - 32px);max-width:1800px;box-sizing:border-box}
.studio-browser-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.has-products .studio-browser-layout{grid-template-columns:minmax(0,1fr) 264px}
.studio-browser-list{min-width:0}.studio-browser-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
#project-product-sidebar{border-inline-start:1px solid #d4dae3;padding-inline-start:24px;min-width:0}
#project-product-sidebar .studio-product-search{display:block}#project-product-sidebar .studio-product-search button{display:none}
#project-product-sidebar select{width:100%;min-height:40px;border:1px solid #d4dae3;border-radius:8px;padding:8px;font:inherit;background:white}
.studio-filter-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:24px 0 8px}
.studio-filter-heading button{font-size:12px;padding:4px 8px}
#project-product-filter-groups details{border-bottom:1px solid #d4dae3;padding:16px 0}
#project-product-filter-groups summary{cursor:pointer;font-weight:500}
#project-product-filter-groups label{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:400;margin:12px 0}
#project-product-filter-groups input{width:16px;height:16px;accent-color:#2963d4;flex-shrink:0}
@media(max-width:767px){.has-products .studio-browser-layout{grid-template-columns:minmax(0,1fr)}#project-product-sidebar{grid-row:1;border-inline-start:0;padding-inline-start:0}.studio-browser-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.studio-project-dialog.studio-product-browser{padding:16px;width:calc(100vw - 16px)}}

#project-product-filter-panel>summary{cursor:pointer;font-weight:600;margin:16px 0}
#project-product-filter-groups input[type=number]{width:88px;min-width:0;height:40px;padding:8px}
@media(min-width:768px){#project-product-sidebar{position:sticky;top:0;max-height:calc(100svh - 96px);overflow-y:auto;padding-inline-end:8px}#project-product-filter-panel>summary{display:none}}
@media(max-width:767px){#project-product-filter-panel{border-bottom:1px solid #d4dae3}.studio-filter-heading strong{display:none}}

/* Intestazione unica e dialog ancorato in alto: l'altezza segue il contenuto. */
.studio-project-dialog.studio-product-browser{inset:16px 16px auto;margin:0;width:calc(100vw - 32px);max-width:none}
.studio-product-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:sticky;top:-24px;background:#fff;z-index:2;padding-block:8px}
.studio-product-heading>h2{margin:0}.studio-product-heading>button{justify-self:end;grid-column:3}
.studio-product-heading #project-product-path{justify-content:center}
@media(max-width:767px){.studio-project-dialog.studio-product-browser{inset:8px 8px auto;width:calc(100vw - 16px)}.studio-product-heading{grid-template-columns:1fr auto;top:-16px;gap:8px}.studio-product-heading>button{grid-column:2;grid-row:1}.studio-product-heading #project-product-path{grid-column:1/-1;grid-row:2;justify-content:flex-start}}

/* Stato di attesa unico e centrale per elenco e cambio del prodotto. */
.studio-browser-loader{display:none;align-items:center;justify-content:center;gap:16px;min-height:160px;color:#68758d}
.is-loading .studio-browser-loader{display:flex}.is-loading .studio-browser-layout,.is-loading #project-product-pagination{display:none!important}
.studio-browser-spinner{width:32px;height:32px;border:3px solid #e6edfc;border-top-color:#2963d4;border-radius:50%;animation:studio-browser-spin .8s linear infinite}
@keyframes studio-browser-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.studio-browser-spinner{animation:none}}

/* Aggiornamenti live: il loader copre solo le card, senza smontare ricerca e filtri. */
.is-loading.loading-results .studio-browser-layout{display:grid!important}
.loading-results #project-product-results{position:relative;min-height:240px}
.loading-results #project-product-results .studio-browser-loader{position:absolute;inset:0;background:#ecf2fe;z-index:1;align-items:center;padding:0;bottom:auto}
.loading-results #project-product-cards{pointer-events:none}


/* Un solo loader animato, centrato nel pannello azzurro durante ogni passaggio. */
.studio-browser-loader{background:#ecf2fe;border-radius:12px;box-sizing:border-box}
.studio-browser-loader>span:not(.studio-browser-spinner){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.loading-results #project-product-cards{visibility:hidden}
.loading-results #project-product-results{background:#ecf2fe;border-radius:12px}

/* Specificità esplicita: il reset delle card non deve azzerare il bordo del loader. */
#project-product-dialog .studio-browser-loader{align-items:flex-start;padding-top:var(--loader-offset,64px)}
#project-product-dialog .studio-browser-spinner{display:block;flex:none;width:32px;height:32px;border:3px solid #d4e1fc;border-top-color:#2963d4;border-radius:50%;animation:studio-browser-spin .8s linear infinite}
@media(prefers-reduced-motion:reduce){#project-product-dialog .studio-browser-spinner{animation:none}}
#project-product-dialog.loading-results #project-product-results .studio-browser-loader{align-items:flex-start;padding-top:var(--loader-offset,64px)}

/* Il campione attivo precede i comandi; gli strumenti avanzati seguono la palette base. */
#single-ink-swatch{margin:16px 0 24px}
#basic-inks{margin-bottom:16px}

/* La tonalità mostra l’intero spettro; il valore usa lo stesso campo del formato. */
#picker-hue{appearance:none;-webkit-appearance:none;height:24px;background:transparent;cursor:pointer}
#picker-hue::-webkit-slider-runnable-track{height:12px;border-radius:8px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
#picker-hue::-moz-range-track{height:12px;border:0;border-radius:8px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
#picker-hue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin-top:-6px;border:2px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #596478}
#picker-hue::-moz-range-thumb{width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #596478}
#picker-value{height:44px;border:1px solid #d4dae3;border-radius:8px;padding:12px;background:#fff;color:#252a3a}

/* Selezione strumenti coerente con i campioni: azzurro leggero e anello blu. */
.file-tool[aria-pressed="true"]{background:#edf2fd;color:#2963d4;border-color:#2963d4;box-shadow:0 0 0 1px #2963d4;font-weight:500}

/* Authentication and verification share a compact gate; the composer remains hidden. */
#ai-verification-gate{position:absolute;inset:48px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:white;z-index:3}
#ai-verification-gate[hidden],#ai-chat-body[hidden]{display:none}
#ai-verification-gate>i{font-size:32px;color:var(--blue,#2b60d7)}
#ai-verification-gate p{font-size:14px;line-height:1.5;margin:0;max-width:480px}
#ai-verification-gate>button{width:192px;max-width:100%;margin:0}