/* Inferriate · Falegnameria Negro — interfaccia V05
   Palette e caratteri dalle linee guida del brand («Natural Precision»).
   I colori di lavoro dentro il disegno (selezione, punti, agganci) restano quelli
   descritti nella guida utente: sono segnali funzionali, non grafica di marca. */
:root{
  --charcoal:#141412; --brass:#C4A882; --cream:#F4F1EC; --warm:#F8F5F0;
  --stone:#8A8884; --stone-light:#A8A5A0; --wood:#4A3728; --wood-mid:#6B4D3A;
  --line:rgba(20,20,18,.14); --line-soft:rgba(20,20,18,.08); --brass-tint:rgba(196,168,130,.22);
  --danger:#aa4940; --ok:#4A3728;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --top:58px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:300 13px/1.5 var(--sans);color:var(--charcoal);background:var(--cream);display:flex;flex-direction:column;overflow:hidden}
.hidden{display:none!important}
h1,h2,h3{font-weight:300;margin:0}
h1{font-size:26px;letter-spacing:-.3px}
h2{font-size:16px}
h3{font-size:12px;letter-spacing:.4px}
.muted{color:var(--stone)}
.eyebrow,.menu-title{font:400 10px/1.4 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--stone)}
.small-note{font-size:11px;line-height:1.55;color:var(--stone);margin:8px 0}
a{color:var(--wood)}

/* ── controlli di base ── */
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:transparent;border-radius:3px;padding:7px 11px;font-size:12px;transition:background .12s,border-color .12s;white-space:nowrap}
button:hover{background:var(--brass-tint);border-color:var(--brass)}
button:disabled{opacity:.35;cursor:default;background:transparent;border-color:var(--line)}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
button.primary{border-color:var(--charcoal);text-transform:uppercase;letter-spacing:1.2px;font-size:11px;font-weight:400}
button.primary:hover{background:var(--charcoal);color:var(--warm)}
button.danger{color:var(--danger)}
button.danger:hover{background:rgba(170,73,64,.1);border-color:var(--danger)}
button.icon{padding:5px 9px;font-size:15px;line-height:1}
button.link{border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px;color:var(--stone)}
button.link:hover{background:transparent;color:var(--charcoal)}
button.wide,.wide{width:100%;text-align:left;margin:4px 0}
button[aria-pressed=true],.active-mirror{background:var(--brass-tint);border-color:var(--brass)}
label{display:block;font-size:11px;color:var(--stone);margin:8px 0 0}
label span{float:right;font:300 10px var(--mono);color:var(--stone-light)}
input[type=number],input[type=text],input[type=search],input[type=email],input[type=password],select{display:block;width:100%;border:1px solid var(--line);border-radius:3px;padding:7px 9px;background:var(--warm);margin-top:4px;font-size:12px}
input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums}
input:disabled,select:disabled{color:var(--stone-light);background:transparent}
input[type=checkbox],input[type=range]{accent-color:var(--wood)}
input[type=range]{width:100%;margin:8px 0}
output{float:right;font-family:var(--mono)}
.toggle{display:flex;align-items:center;gap:6px;margin:0;color:var(--charcoal);font-size:12px;white-space:nowrap}
.fieldrow{display:flex;gap:8px;margin:8px 0;align-items:end}
.fieldrow>*{flex:1;min-width:0;margin-top:0}

/* ── barra superiore ── */
.top{height:var(--top);flex:none;display:flex;align-items:center;gap:22px;padding:0 18px;background:var(--warm);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand img{height:38px;width:auto}
.brand-text{border-left:1px solid var(--line);padding-left:14px;line-height:1.25}
.brand-text strong{display:block;font-weight:300;font-size:17px;letter-spacing:.2px}
.brand-text small{font:300 9px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--stone)}
.project-head{flex:1;min-width:120px;display:flex;align-items:baseline;gap:12px}
.project-head input{flex:0 1 380px;min-width:0;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;padding:3px 0;margin:0;font-size:18px;font-weight:300}
.project-head input:hover,.project-head input:focus{border-bottom-color:var(--brass);outline:none}
.save-status{font:300 10px var(--mono);letter-spacing:.4px;color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;align-items:center;gap:6px;flex:none}
.account{max-width:190px;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:10px;color:var(--stone)}

/* ── menu ── */
.menu-wrap{position:relative}
.menu,.pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:250px;padding:6px;background:var(--warm);border:1px solid var(--line);border-radius:4px;box-shadow:0 12px 34px rgba(20,20,18,.14)}
.menu>button,.menu>a{display:block;width:100%;text-align:left;border:0;padding:8px 10px;font-size:12px;text-decoration:none;color:inherit;border-radius:3px}
.menu>a:hover{background:var(--brass-tint)}
.menu-title{padding:9px 10px 4px}
.menu-title:not(:first-child){border-top:1px solid var(--line-soft);margin-top:5px}
.menu-note{margin:0;padding:4px 10px 8px;font-size:11px;color:var(--stone);max-width:260px;white-space:normal}
.menu-wide{min-width:340px}
.shortcuts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:2px 10px 8px;font-size:11px}
.shortcuts dt{font-family:var(--mono);font-size:10px;color:var(--wood)}
.shortcuts dd{margin:0;color:var(--stone)}

/* ── impaginazione ── */
.layout{flex:1;min-height:0;display:grid;grid-template-columns:292px minmax(380px,1fr) 316px}
.side{background:var(--warm);display:flex;flex-direction:column;min-height:0}
.side-left{border-right:1px solid var(--line)}
.side-right{border-left:1px solid var(--line)}
.side-tabs{display:flex;flex:none;border-bottom:1px solid var(--line)}
.side-tabs button{flex:1;border:0;border-bottom:2px solid transparent;border-radius:0;padding:13px 6px 11px;font:400 10px var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--stone)}
.side-tabs button.active{color:var(--charcoal);border-bottom-color:var(--brass);background:transparent}
.pane{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 16px 22px}
.pane-foot{margin-top:14px;padding-top:10px;border-top:1px solid var(--line-soft)}
.pane-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.pane-head-actions{display:flex;gap:4px}
.pane-head-actions button{font-size:10px;padding:4px 7px}
.count{font:400 9px var(--mono);border:1px solid var(--brass);border-radius:9px;padding:1px 6px;margin-left:4px;color:var(--wood)}

/* ── catalogo ── */
.pane[data-pane=catalogo]{display:flex;flex-direction:column;overflow:hidden;padding-bottom:10px}
.catalog-filters{display:grid;gap:6px;flex:none}
.catalog-filters input,.catalog-filters select{margin:0}
.pane-meta{flex:none;margin:8px 0}
#catalog{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start;padding-right:4px}
.catalog-card{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:9px 8px 8px;text-align:left;background:#fff;border-color:var(--line-soft);white-space:normal;cursor:grab}
.catalog-card[hidden]{display:none}
.catalog-card:hover{background:#fff;border-color:var(--brass);box-shadow:0 3px 12px rgba(20,20,18,.08)}
.catalog-card svg{width:100%;height:76px}
.catalog-card b{display:block;font:400 11px var(--mono)}
.catalog-card small{display:block;font-size:10px;color:var(--stone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catalog-card .plus{display:none}
.pane[data-pane=catalogo] .pane-foot{flex:none;margin-top:8px}

/* ── barre, foto ── */
.bar-library{margin-top:8px}
.bar-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}
.bar-presets button{padding:9px 6px;font-size:11px}
.tool-details{font-size:12px;border-top:1px solid var(--line-soft);margin-top:14px;padding-top:10px}
.tool-details>summary{cursor:pointer;font:400 10px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--stone);margin-bottom:8px}
#photoSlot .tool-details{border:0;margin:0;padding:0}
#photoSlot .tool-details>summary{display:none}

/* ── area di lavoro ── */
.workspace{min-width:0;min-height:0;display:flex;flex-direction:column;padding:10px 14px 8px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-bottom:8px;flex:none}
.tool-group{display:flex;align-items:center;gap:6px;padding:0 12px;border-left:1px solid var(--line)}
.tool-group:first-child{padding-left:0;border-left:0}
.tool-group:empty{display:none}
.tool-group button,.tool-group select{padding:5px 9px;font-size:11px;margin:0}
.tool-group select{width:auto}
.tool-group label{margin:0;display:flex;align-items:center;gap:6px;font-size:11px;white-space:nowrap}
.tool-panels{flex:1 1 auto;min-width:0}
.tabs{display:flex;flex-wrap:wrap;gap:2px}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;padding:6px 10px;font-size:12px;color:var(--stone)}
.tabs button.active{color:var(--charcoal);border-bottom-color:var(--brass)}
.segmented{display:flex;border:1px solid var(--line);border-radius:3px;overflow:hidden}
.segmented button{border:0;border-radius:0;padding:5px 11px}
.segmented button.active{background:var(--charcoal);color:var(--warm)}
.editor-tools{display:flex;align-items:center;gap:12px}
.editor-tools .small-note{display:none}
.grid-step input{width:52px;display:inline-block;padding:4px 5px;margin:0}
#gridScaleNote{font:300 9px var(--mono);color:var(--stone)}
#symmetrySlot details{position:relative;border:0;margin:0;padding:0}
#symmetrySlot summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:3px;padding:5px 9px;font:300 11px var(--sans);letter-spacing:0;text-transform:none;color:var(--charcoal);margin:0}
#symmetrySlot summary::-webkit-details-marker{display:none}
#symmetrySlot summary.on{background:var(--brass-tint);border-color:var(--brass)}
#symmetrySlot summary.on::after{content:' · attiva'}
.pop{width:300px;padding:14px}
.symmetry-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end}
.symmetry-tools .toggle{grid-column:1/-1}
.symmetry-tools label{display:block}

.stage{position:relative;flex:1;min-height:260px;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden}
#drawing,#three{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#drawing:focus{outline:none}
#drawing .item{cursor:grab}
#drawing .item:active{cursor:grabbing}
.stage[data-cut=true]{cursor:crosshair}
.stage-badge{position:absolute;left:14px;bottom:12px;font:300 9px var(--mono);letter-spacing:1.3px;color:var(--stone-light);pointer-events:none}
.empty-tip{position:absolute;top:44%;width:100%;text-align:center;font-size:15px;color:var(--stone);pointer-events:none}
.empty-tip small{font-size:11px;line-height:2.4}
.selection-bar,.endpoint-toolbar{position:absolute;top:12px;z-index:2;display:flex;align-items:center;gap:5px;padding:5px 7px;background:rgba(248,245,240,.96);border:1px solid var(--line);border-radius:4px;box-shadow:0 4px 14px rgba(20,20,18,.08)}
.selection-bar{right:12px}
.selection-bar button,.endpoint-actions button{padding:4px 8px;font-size:11px}
#selectionBarLabel{font:400 10px var(--mono);letter-spacing:.6px;padding:0 6px;color:var(--wood)}
.endpoint-toolbar{left:12px;max-width:calc(100% - 24px);flex-wrap:wrap;font-size:11px;color:var(--wood)}
.endpoint-actions{display:flex;flex-wrap:wrap;gap:5px}
.weld-prompt,.reference-prompt{position:absolute;left:12px;bottom:36px;max-width:470px;z-index:3;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;font-size:12px;background:var(--warm);border:1px solid var(--brass);border-radius:4px;box-shadow:0 4px 18px rgba(20,20,18,.12)}
.weld-prompt div{display:flex;gap:6px}
.stage-footer{display:flex;justify-content:space-between;gap:12px;flex:none;padding:7px 2px 0;font:300 10px var(--mono);color:var(--stone)}
.stage-footer .bad{color:var(--danger)}
.stage-footer .good{color:var(--ok)}
.notice{flex:none;margin-top:6px;padding:8px 12px;font-size:11px;border-left:2px solid var(--danger);background:rgba(170,73,64,.07);color:var(--wood)}

/* ── proprietà ── */
.opening-controls{margin:6px 0}
.clearance{margin:10px 0 4px}
.clearance input{width:110px}
.clearance small{font:300 10px var(--mono);color:var(--stone-light)}
.leaf-controls,.hinge-settings,.bar-cut-tools,#barEditor{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:6px}
.bar-cut-tools h3{margin:6px 0;font:400 10px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--stone)}
#sectionPreview{background:#fff;border:1px solid var(--line-soft);border-radius:3px;padding:8px;margin-top:10px}
#sectionPreview svg{display:block;width:100%;max-height:200px}
.fit-error{color:var(--danger)!important}
.element-picker{margin:0 0 10px}
.element-picker small{display:block;font-size:10px;color:var(--stone-light);margin-top:4px}
.nothing{color:var(--stone);text-align:center;font-size:12px;padding:26px 0}
#selection h2{font-family:var(--mono);font-size:14px;margin-top:6px}
#selection>.muted{font-size:11px;margin:2px 0 8px}
.rotation{display:flex;gap:6px;margin-top:4px}
.rotation input{margin:0}
.rotation button{padding:6px 8px;font-size:11px}
.bom-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line-soft);padding:9px 0;font-size:12px}
.bom-row small{font:300 10px var(--mono);color:var(--stone)}
.bom-row b{font:400 13px var(--mono)}

/* ── schermate a tutto schermo: archivio e accesso ── */
.overlay{position:fixed;inset:0;z-index:50;background:var(--cream);overflow-y:auto;padding:26px 34px 40px}
.overlay-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.overlay-head>div{flex:1;min-width:180px}
.overlay-head input{width:260px;margin:0}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,300px));gap:18px}
.gallery-empty{color:var(--stone);font-size:14px;max-width:520px}
.project-card{background:var(--warm);border:1px solid var(--line);border-radius:4px;display:flex;flex-direction:column}
.project-thumb{border:0;border-bottom:1px solid var(--line-soft);border-radius:0;padding:10px;background:#fff;height:210px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.project-thumb:hover{background:#fff}
.project-thumb img{width:100%;height:100%;object-fit:contain}
.project-meta{padding:12px 14px 4px}
.project-meta strong{display:block;font-weight:400;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project-meta small{font:300 10px var(--mono);color:var(--stone)}
.project-meta small b{font-weight:400;color:var(--wood)}
.project-actions{display:flex;flex-wrap:wrap;gap:5px;padding:10px 14px 14px}
.project-actions button{padding:5px 8px;font-size:11px}
.overlay-login{z-index:55;display:flex;align-items:center;justify-content:center}
.login-card{width:min(380px,100%);background:var(--warm);border:1px solid var(--line);border-radius:4px;padding:34px 34px 26px;display:grid;gap:6px}
.login-card img{height:54px;justify-self:start;margin-bottom:14px}
.login-card h1{margin:4px 0 10px}
.login-card button.primary{margin-top:16px;padding:11px}
.login-error{min-height:18px;margin:6px 0 0;font-size:12px;color:var(--danger)}

/* ── finestre di conferma e avvisi ── */
dialog{border:1px solid var(--line);border-radius:4px;background:var(--warm);color:var(--charcoal);padding:24px;width:420px;max-width:90vw;box-shadow:0 18px 60px rgba(20,20,18,.25)}
dialog::backdrop{background:rgba(20,20,18,.4)}
dialog h2{font-size:18px;margin-bottom:8px}
dialog p{color:var(--stone);font-size:13px;line-height:1.6}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:70;background:var(--charcoal);color:var(--warm);padding:11px 20px;border-radius:4px;font-size:12px;max-width:90vw;box-shadow:0 6px 24px rgba(20,20,18,.25)}

/* ── schermi stretti ── */
@media(max-width:1180px){.layout{grid-template-columns:240px minmax(340px,1fr) 270px}.brand-text{display:none}.top{gap:14px}.account{display:none}}
@media(max-width:860px){
  body{overflow:auto;display:block}
  .top{height:auto;flex-wrap:wrap;padding:10px 12px}
  .layout{display:flex;flex-direction:column}
  .workspace{order:-1}
  .stage{min-height:62vh;flex:none}
  .side{border:0;border-top:1px solid var(--line)}
  .pane{max-height:70vh}
  .overlay{padding:16px}
}
@media print{body{overflow:visible}}

/* il logo ha fondo bianco: si fonde con il fondo caldo */
.brand img,.login-card img{mix-blend-mode:multiply}
.selection-bar.low{top:auto;bottom:12px}
.panel-copies{margin:2px 0 12px}
.panel-copies button{font-size:11px;padding:6px 8px}

/* Contorno libero del vano */
.contour-tools{display:grid;gap:6px;margin:8px 0 2px}
.contour-prompt{position:static;max-width:none;flex:none;margin:0 0 8px;box-shadow:none;line-height:1.5}
.contour-prompt span{flex:1;min-width:260px}
.contour-prompt b{font-weight:500}