*[hidden]{display:none!important}
.material-browser{position:fixed;z-index:8;top:136px;right:0;bottom:0;width:min(48vw,680px);padding:24px;background:#fff;border-left:1px solid var(--line);box-shadow:-18px 0 50px #24251f12;overflow:auto}
.material-browser[hidden]{display:none}
.material-browser-head{display:grid;grid-template-columns:1fr 170px;gap:18px;align-items:stretch;margin-bottom:16px}
.material-browser-head>div:first-child{display:flex;flex-direction:column;justify-content:center}
.material-label{font-size:9px;letter-spacing:.15em;color:var(--muted);font-weight:700}
.material-browser-head strong{font:600 25px Manrope;margin-top:5px}
.material-browser-head small{font-size:11px;color:var(--muted);margin-top:2px}
.material-preview{height:105px;border-radius:10px;background:#eeece5 center/cover;box-shadow:inset 0 0 0 1px #00000012}
.material-search{height:42px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:9px;padding:0 12px}
.material-search input{border:0;outline:0;width:100%;font-size:12px}
.material-families{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}
.material-families button{border:1px solid var(--line);background:#f5f4ef;border-radius:18px;padding:7px 11px;font-size:10px}
.material-families button.active{background:var(--ink);border-color:var(--ink);color:#fff}
.material-families button span{opacity:.62;margin-left:3px}
.material-results{display:flex;justify-content:space-between;align-items:center;margin:12px 0 9px;font-size:10px;color:var(--muted)}
.material-results button{border:0;background:none;text-decoration:underline;font-size:10px}
.material-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.material-card{position:relative;border:1px solid transparent;background:#fff;padding:5px;border-radius:9px;text-align:left;min-width:0}
.material-card:hover{border-color:#aaa}.material-card.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--lime)}
.material-card i{display:block;height:92px;border-radius:6px;background:#eee center/cover;box-shadow:inset 0 0 0 1px #00000012}
.material-card b{display:block;margin-top:6px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.material-card small{display:block;color:var(--muted);font-size:8px;margin-top:1px}
.material-more{display:block;width:100%;margin-top:14px;border:1px solid var(--line);background:#f4f3ed;border-radius:8px;padding:11px;font-size:11px}
.automatic-mode .brief-view{margin-left:max(0px,calc((100vw - min(48vw,680px) - 680px)/2));margin-right:min(48vw,680px);padding-left:28px;padding-right:28px;grid-template-columns:1fr}
.automatic-mode .brief-preview{display:block;position:relative;align-self:start;top:auto}
.automatic-mode .material-native-select{display:none!important}
.surface-instructions{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#171814;color:#fff;border-radius:9px;padding:12px 14px;margin:13px 0;font-size:11px}
.surface-instructions b{color:var(--lime)}
.surface-instructions button{border:1px solid #ffffff55;background:#ffffff12;color:#fff;border-radius:6px;padding:7px 9px;font-size:9px}
.surface-stage{position:relative;line-height:0;border-radius:14px;overflow:hidden;background:#dedbd1;box-shadow:0 12px 40px #3332}
.surface-stage #briefImage{box-shadow:none;border-radius:0;max-height:none;width:100%;height:auto}
.surface-overlay{position:absolute;inset:0;line-height:normal;pointer-events:none}
.surface-shape{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:rgba(214,183,95,.2);outline:2px solid rgba(214,183,95,.95);outline-offset:-2px;pointer-events:auto;cursor:pointer;transition:.16s filter,.16s background}
.surface-shape:hover{background:rgba(214,183,95,.34);outline:3px solid #fff;filter:drop-shadow(0 0 5px #294427)}
.surface-shape.selected{background-color:rgba(255,255,255,.2);background-position:center;background-size:150px 150px;background-repeat:repeat;background-blend-mode:normal;outline:3px solid #fff;filter:saturate(.9) drop-shadow(0 0 5px #17181488);box-shadow:inset 0 0 0 9999px rgba(62,97,54,.16)}
.surface-shape.selected:not(.active){opacity:.76}
.surface-shape.selected.active{outline:4px solid #3471ff;filter:saturate(1.05) drop-shadow(0 0 7px #3471ff)}
.surface-shape span{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:15px;background:#171814;color:#fff;font-size:10px;font-weight:700;box-shadow:0 2px 9px #0006}
.surface-shape.selected span{background:#171814;min-width:68px;padding:0 9px}.surface-shape.selected.active span{background:#3471ff}
.surface-manual-marker{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border:2px dashed #fff;border-radius:50%;background:#3471ff55;box-shadow:0 0 0 2px #3471ff;pointer-events:auto;cursor:pointer}
/* La crescita dell'area, disegnata sopra la foto: cerchi che partono grossi dal
   punto cliccato e si spengono allontanandosi. NESSUNA linea di contorno — una
   linea, anche tratteggiata, dichiara un confine che noi non conosciamo: la
   maschera vera la decide il rendering. Sta nel velo, che è pointer-events:none,
   quindi il clic passa alla foto come prima. */
.surface-crescita{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
/* Ogni cerchio è una macchia sfumata, non un dischetto: il riempimento è un
   gradiente radiale (currentColor, così il colore lo decide la classe dell area)
   che va da pieno al centro a trasparente al bordo. Niente stroke, e niente
   ombra stretta: quella disegnava un anello attorno a ogni punto, cioè un bordo
   in piccolo, ed è quello che si vedeva. */
.surface-crescita circle{stroke:none}
/* Un alone largo e debole, non l ombra stretta di prima: quella disegnava un
   anello attorno a ogni punto — un bordo in piccolo, ed era quello che si
   vedeva. Largo e debole si legge come un velo scuro sotto la nuvola, e tiene
   i cerchi visibili anche sui ripiani bianchi. */
.crescita-area{filter:drop-shadow(0 0 5px #0b0d0a55)}
.surface-manual-marker span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#3471ff;color:#fff;font-size:10px;font-weight:700}
.selection-entry.active{border-color:#3471ff;box-shadow:0 0 0 2px #3471ff22}
.selection-entry{cursor:pointer}.selection-entry i{background-position:center;background-size:cover}
.selection-entry .area-number{display:grid;width:22px;height:22px;border-radius:50%;background:#171814;color:#fff;place-items:center;margin-right:8px;font-style:normal;font-weight:700}
.selection-entry.active .area-number{background:#3471ff}
.selection-empty{border:1px dashed var(--line);border-radius:9px;padding:15px;text-align:center;color:var(--muted);font-size:10px}
.material-browser.no-area:after{content:'Seleziona prima un’area sulla fotografia';position:sticky;display:block;bottom:0;margin-top:12px;background:#171814;color:#fff;padding:11px;border-radius:8px;text-align:center;font-size:10px}
.active-area-context{display:flex;align-items:center;gap:10px;background:#eef3ff;border:1px solid #cbd9ff;border-radius:9px;padding:10px 12px;margin-bottom:14px}
.active-area-context b{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#3471ff;color:#fff;font-size:11px}
.active-area-context span{font-size:10px;color:var(--muted)}.active-area-context strong{display:block;color:var(--ink);font-size:12px;margin-bottom:1px}
.surface-preview-legend{display:flex;justify-content:space-between;align-items:center;margin:10px 1px 7px;font-size:9px;color:var(--muted)}
.surface-preview-legend b{color:var(--ink)}
.candidate-summary{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:9px 0 12px}
.candidate-summary button{display:flex;align-items:center;gap:7px;min-width:0;border:1px solid var(--line);background:#fff;border-radius:7px;padding:7px 8px;text-align:left;font-size:9px;color:var(--ink)}
.candidate-summary button b{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#edf0e9;color:var(--iconic-dark);font-size:9px}.candidate-summary button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.candidate-summary button.selected{border-color:var(--iconic);background:var(--iconic-soft)}.candidate-summary button.selected b{background:var(--iconic);color:#fff}.candidate-summary button.active{box-shadow:0 0 0 2px var(--iconic-gold)}
.surface-accuracy-note{font-size:9px;color:var(--muted);line-height:1.45;margin:-4px 0 9px}
.manual-mode .candidate-summary{display:none}
.manual-mode .surface-accuracy-note{background:#f0f4ed;border-left:3px solid var(--iconic);border-radius:0 7px 7px 0;padding:9px 11px;margin:8px 0 12px;color:var(--iconic-dark)}
.manual-mode .surface-stage{cursor:crosshair}
.manual-mode .surface-stage:after{content:'＋ Clicca una superficie';position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:#fff;color:var(--iconic-dark);border:1px solid var(--line);border-radius:18px;padding:8px 12px;font-size:9px;line-height:1;pointer-events:none;box-shadow:0 4px 15px #0002}
.manual-mode .surface-manual-marker{width:54px;height:54px;border:3px solid #fff;box-shadow:0 0 0 3px var(--iconic),0 5px 18px #0005}
.manual-mode .surface-manual-marker.active{box-shadow:0 0 0 4px var(--iconic-gold),0 5px 20px #0006}
@media(max-width:900px){.material-browser{position:relative;top:auto;right:auto;bottom:auto;width:100%;border-left:0;border-top:1px solid var(--line);box-shadow:none}.automatic-mode .brief-view{margin:0;padding:20px}.material-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.material-browser-head{grid-template-columns:1fr 130px}}
@media(max-width:520px){.material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}