/* Kitchen Visualizer v9 - studio layout with frosted glass controls */
.viz{padding:6px 0 40px}
.vzStudio{--glass:rgba(24,26,32,.52);--glassB:rgba(255,255,255,.16);--txt:#f4f2ee;--sub:rgba(244,242,238,.68);
  position:relative;width:min(1680px,calc(100vw - 32px));margin-left:calc(50% - min(840px,50vw - 16px));
  aspect-ratio:16/9;max-height:calc(100vh - 96px);min-height:520px;border-radius:22px;overflow:hidden;background:#15161a;
  box-shadow:0 30px 80px rgba(11,15,26,.28);isolation:isolate;color:var(--txt)}
.vzViewport{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;background:#15161a}
.vzViewport.drag{cursor:grabbing}
.vzWrap{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.vzWrap canvas{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.vizLoading{position:absolute;left:24px;top:90px;color:var(--txt);z-index:2}
.vzBusy{position:absolute;left:50%;top:84px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.82rem;z-index:6;pointer-events:none}
.vzGlass{background:var(--glass);border:1px solid var(--glassB);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 10px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12);border-radius:18px;color:var(--txt)}
.vzTop{position:absolute;left:16px;right:16px;top:16px;z-index:5;display:flex;align-items:center;gap:14px;padding:9px 12px 9px 20px;border-radius:999px}
.vzTitle{font-weight:800;font-size:1.05rem;letter-spacing:.01em;white-space:nowrap}
.vzTop .vizLayouts{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.vzTopR{margin-left:auto;display:flex;gap:6px}
.vzPill,.vzTab,.vzSeg,.vzIco{appearance:none;font:inherit;cursor:pointer;color:var(--txt);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:7px 14px;font-size:.84rem;font-weight:650;transition:background .18s,border-color .18s,transform .18s}
.vzPill:hover,.vzTab:hover,.vzSeg:hover,.vzIco:hover{background:rgba(255,255,255,.18)}
.vzPill.active,.vzTab.active,.vzSeg.active{background:#f4f2ee;color:#14161b;border-color:#f4f2ee}
.vzPanel{position:absolute;right:16px;top:84px;bottom:76px;width:min(350px,28%);z-index:4;padding:14px;display:flex;flex-direction:column;overflow:hidden}
.vzTabs{display:flex;gap:6px;flex-wrap:wrap}
.vzTab{padding:7px 12px}
.vizPick{margin-top:12px;display:flex;flex-direction:column;min-height:0;flex:1}
.vizPick[hidden]{display:none}
.vzZones{display:flex;gap:0;margin-bottom:10px;background:rgba(255,255,255,.06);border-radius:999px;padding:3px;border:1px solid rgba(255,255,255,.12);align-self:flex-start}
.vzZones[hidden]{display:none}
.vzSeg{border:0;background:transparent;padding:6px 14px}
.vzSeg[hidden]{display:none}
.vzCheck,.vzHide{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--sub);margin:0 0 10px;cursor:pointer}
.vzCheck input,.vzHide input{accent-color:#bda67b;width:16px;height:16px}
.vzSearch{width:100%;margin:0 0 10px;padding:9px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:var(--txt);font:inherit;font-size:.86rem;outline:none}
.vzSearch::placeholder{color:var(--sub)}
.vzSearch:focus{border-color:#bda67b}
.vizGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px;overflow:auto;padding:2px 4px 6px 2px;overscroll-behavior:contain;flex:1;min-height:0;align-content:start;grid-auto-rows:max-content;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.vizSw{appearance:none;border:2px solid transparent;background:rgba(255,255,255,.07);border-radius:12px;padding:0;cursor:pointer;text-align:left;font:inherit;overflow:hidden;color:var(--txt);transition:transform .15s,border-color .15s}
.vizSw img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:rgba(255,255,255,.1)}
.vizSw span{display:block;padding:5px 7px 6px;font-size:.74rem;line-height:1.25;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vizSw small{display:block;padding:0 7px 6px;margin-top:-4px;font-size:.66rem;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vizSw:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.35)}
.vizSw.sel{border-color:#bda67b;box-shadow:0 0 0 2px rgba(189,166,123,.35)}
.vizSw:focus-visible,.vzPill:focus-visible,.vzTab:focus-visible,.vzSeg:focus-visible,.vzIco:focus-visible{outline:2px solid #bda67b;outline-offset:2px}
.vizEmpty{grid-column:1/-1;padding:10px;color:var(--sub)}
.vzDims{position:absolute;left:16px;bottom:16px;z-index:4;padding:9px 14px;display:flex;flex-wrap:wrap;gap:4px 14px;max-width:calc(100% - 520px);font-size:.8rem;border-radius:14px}
.vzDims b{color:#fff}.vzDims span{white-space:nowrap;color:var(--sub)}
.vzZoom{position:absolute;right:16px;bottom:16px;z-index:6;display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px}
.vzIco{width:32px;height:32px;padding:0;display:grid;place-items:center;font-size:1.05rem}
.vzFit{width:auto;padding:0 12px;font-size:.8rem}
.vzZoom input[type=range]{width:110px;accent-color:#bda67b}
.vzPct{min-width:42px;text-align:center;font-size:.8rem;font-variant-numeric:tabular-nums}
.vzHide{margin:0 0 0 6px;color:var(--txt)}
.vzSummary{position:absolute;right:16px;top:84px;width:min(420px,40%);max-height:calc(100% - 170px);overflow:auto;z-index:7;padding:16px 18px}
.vzSumHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:1rem}
.vzX{appearance:none;background:none;border:0;color:var(--txt);font-size:1.4rem;cursor:pointer;line-height:1}
.vzSumT{width:100%;border-collapse:collapse;font-size:.84rem}
.vzSumT th{text-align:left;font-weight:700;color:var(--sub);padding:7px 10px 7px 0;vertical-align:top;white-space:nowrap}
.vzSumT td{padding:7px 0;border-top:1px solid rgba(255,255,255,.1)}
.vzSumT th{border-top:1px solid rgba(255,255,255,.1)}
.vzSumT td small{display:block;color:var(--sub)}
.vzSumNote{margin-top:10px;font-size:.76rem;color:var(--sub)}
.vzStudio.uiHidden [data-ui],.vzStudio.uiHidden [data-summary]{opacity:0;pointer-events:none;transform:translateY(-6px)}
.vzStudio [data-ui]{transition:opacity .25s,transform .25s}
.vizNote{margin-top:14px;padding:10px 14px;border-radius:14px;background:rgba(189,166,123,.12);border:1px solid rgba(189,166,123,.35)}
@media (max-width:980px){
  .vzStudio{aspect-ratio:auto;max-height:none;min-height:0;width:100%;margin-left:0;border-radius:18px;display:flex;flex-direction:column}
  .vzViewport{position:relative;aspect-ratio:4/3;order:1}
  .vzTop{position:relative;left:auto;right:auto;top:auto;order:0;margin:10px;border-radius:18px;flex-wrap:wrap}
  .vzTopR{margin-left:0}
  .vzPanel{position:relative;right:auto;top:auto;bottom:auto;width:auto;order:3;margin:10px;max-height:70vh}
  .vzDims{position:relative;left:auto;bottom:auto;max-width:none;order:2;margin:10px 10px 0}
  .vzZoom{position:relative;right:auto;bottom:auto;order:2;margin:10px 10px 0;align-self:flex-start;flex-wrap:wrap;border-radius:18px}
  .vzSummary{width:auto;left:10px;right:10px;top:10px}
}

/* handle finish */
.vzHwRow{display:flex;flex-direction:column;gap:5px;margin:0 0 10px}
.vzHwLbl{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.vzZones.vzHw{flex-wrap:wrap;margin:0;border-radius:16px;align-self:stretch}
.vzHw .vzSeg{padding:5px 9px;font-size:.8rem;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vzHw .vzSeg i{width:11px;height:11px;border-radius:50%;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}