/* Compact color controls; alternate preview only. */
.scene{position:relative;min-height:280px}
.scene>.product,.scene>.installed-product{width:100%;margin:0}
.scene .part-wrap{transition:opacity .18s ease}
.scene[data-focus=pin] #body-wrap,.scene[data-focus=pin] #tap-wrap,.scene[data-focus=body] #pin-wrap,.scene[data-focus=body] #tap-wrap,.scene[data-focus=tap] #body-wrap,.scene[data-focus=tap] #pin-wrap{opacity:.8}
.scene .zoom-open{top:0;left:0}
.scene-hint,.mobile-composition,.product-levels,.level-note,.pin-toggle{display:none!important}
.stage-toolbar{justify-content:space-between;padding:0;min-height:44px;margin-bottom:4px}
.pin-composition-action{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:10px;font-size:11px;color:#514a40;background:transparent}
.pin-composition-action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pin-composition-action:hover{background:#eae7e0}
.color-controls{max-width:560px;margin:0 auto 12px;padding:0 4px}
.color-control-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.color-controls .focus-tabs{display:flex;gap:4px;flex:1;justify-content:flex-start;border:0;margin:0;padding:0}
.color-controls .focus-tabs button{flex:1;min-width:0;min-height:44px;padding:0 8px;font-size:12px;color:#665e53;border-radius:8px}
.color-controls .focus-tabs button[aria-pressed=true]{background:#e8e4dc;color:#252522;font-weight:750}
.color-controls .focus-tabs button::after{display:none}
.color-picker{flex:0 0 128px;margin:0}
.color-picker summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:48px;padding:4px 8px;cursor:pointer;border-radius:10px;background:#fff;box-shadow:0 3px 10px #29241b0d}
.color-picker summary::-webkit-details-marker{display:none}
.current-color-dot{flex:0 0 24px;width:24px;height:24px;background:var(--current-color,#d8d4cc);border:1px solid #0002;border-radius:50%}
.current-color-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;line-height:1.2}
.current-color-copy>span:first-child{font-size:10px;color:#71695d}
.current-color-copy #color-name{font-size:11px;font-weight:700;color:#252522;white-space:nowrap}
.color-picker summary>svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;flex:0 0 14px}
.color-picker[open] summary>svg{transform:rotate(180deg)}
.inline-color-panel{margin-top:12px;padding:12px;background:#eeebe5;border-radius:12px}
.inline-color-panel>strong{display:block;font-size:11px;margin:0 0 8px;color:#514a40}
.inline-color-panel .swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:0;overflow:visible;padding:0}
.inline-color-panel .swatches button{position:relative;width:100%;min-width:0;height:44px;border:0;background:none;border-radius:8px;padding:0}
.inline-color-panel .swatches button::before{content:'';position:absolute;width:24px;height:24px;inset:10px calc(50% - 12px);border-radius:50%;background:var(--color);border:1px solid #0002}
.inline-color-panel .swatches button[aria-pressed=true]::after{content:'';position:absolute;inset:5px calc(50% - 17px);border:1.5px solid #252522;border-radius:50%;background:none}
.inline-color-panel .restore-color{display:none}
.color-controls :focus-visible,.pin-composition-action:focus-visible{outline:2px solid #bc480e;outline-offset:3px}
.control-dock{background:transparent;border-radius:0;box-shadow:none;padding:0 8px 8px;margin-top:0}
.control-dock .piece-heading{min-height:36px}
.control-dock .installed-types{gap:8px;justify-content:center;margin:8px 0 12px}
.control-dock .type-option{min-width:64px;min-height:60px;border-radius:10px;padding:8px;background:transparent}
.control-dock .type-option[aria-pressed=true]{background:#fff;box-shadow:0 3px 12px #29241b12}
.control-dock .type-option[aria-pressed=true]::after{display:none}
.control-dock .type-option>svg{width:40px;height:40px;filter:drop-shadow(0 3px 3px #29241b25)}
.focused-options{text-align:center}
.focused-options .variant{background:transparent;color:#4e483e;border:1px solid #bdb7ac;border-radius:8px;min-height:44px;min-width:64px;padding:0 12px;margin:3px;font-size:11px;text-decoration:none;box-shadow:none}
.focused-options .variant[aria-pressed=true]{background:#252522;color:#fff;border-color:#252522;box-shadow:0 3px 8px #2525221f}
.focused-options .variant[aria-disabled=true]{opacity:1;color:#8b857b;border-color:#d9d4ca;cursor:not-allowed;text-decoration:none}
.reference-disclosure{display:block;text-align:center;margin:10px 0 4px;font-size:10px;color:#736b60}
.finish-controls{border-top:1px solid #d8d4cc;margin-top:12px}
.finish-conflict{display:grid;gap:8px;padding:10px 12px;margin:8px 0;background:#fff4e7;border:1px solid #b64a1f;border-radius:10px;color:#57321f;font-size:12px;line-height:1.45}.finish-conflict p{margin:0}.finish-conflict button{min-height:44px;padding:0 12px;text-align:left;border:1px solid #b64a1f;border-radius:8px;background:#fff;color:#57321f;font:inherit;font-weight:650}
.scene-views{margin:4px auto 12px}
@media(min-width:901px){.scene{height:clamp(320px,calc(100svh - 440px),500px)}}
@media(max-width:900px){.scene,.app[data-level=tap] .scene{height:clamp(280px,calc(100svh - 410px),390px)}.color-controls{margin-bottom:8px}.inline-color-panel .swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 12px}.inline-color-panel{padding:12px 16px}.color-control-row{gap:8px}.color-picker{flex-basis:116px}.color-controls .focus-tabs button{font-size:11px;padding:0 4px}.color-note{display:none}}
@media(prefers-reduced-motion:reduce){.scene .part-wrap{transition:none}}

/* Optional pin belongs to composition controls, below the piece tabs. */
.pin-composition-action{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:none;min-height:44px;margin:6px 0 0;padding:0 8px;background:transparent;color:#514a40;border-radius:8px;font-size:11px;font-weight:600}
.pin-composition-action:hover{background:#eae7e0}
.pin-switch{width:34px;height:22px;border-radius:14px;background:#c6c1b7;padding:3px}
.pin-switch:before{content:'';display:block;width:16px;height:16px;border-radius:50%;background:white;box-shadow:0 1px 3px #0002;transition:transform .2s ease}
.pin-composition-action[aria-checked=true] .pin-switch{background:#252522}
.pin-composition-action[aria-checked=true] .pin-switch:before{transform:translateX(12px);background:#ff8647}
.stage-toolbar{gap:12px;justify-content:flex-end}

/* Current color stays visual; its name remains available to assistive technology. */
.current-color-copy #color-name{display:none}
.current-color-copy>span:first-child{font-size:11px;font-weight:650;color:#252522}
.color-picker{flex-basis:96px}
@media(max-width:900px){.color-picker{flex-basis:96px}}
/* Color belongs to the selected piece; zoom occupies the scene corner. */
.builder-lines,.site-header h1,.mobile-line-select{display:none!important}
.site-header{gap:12px}
.editor-title{font-size:15px;font-weight:750;text-align:center;flex:1}
.product-actions{position:absolute;left:auto;right:10px;top:10px;transform:none;z-index:3}
.product-actions #open-zoom{position:static;inset:auto;min-width:44px;width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;background:#fff;box-shadow:0 3px 12px #29241b12}
.product-actions #open-zoom span{display:none}
.product-actions #open-zoom svg{width:19px;height:19px}
.control-dock .piece-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-bottom:8px}
.control-dock .piece-heading>div{flex:1;min-width:0;margin:0;font-size:16px;text-align:left}
.control-dock .color-picker{flex:none;width:96px}
.control-dock .color-picker summary{min-height:44px;border:1px solid #d8d4cc;box-shadow:none;background:transparent}
.control-dock .color-picker[open] summary{background:#eeebe5}
.control-dock .inline-color-panel{margin:0 0 12px}
.color-control-row{justify-content:center}
.color-controls .focus-tabs{justify-content:center}
.app[data-level=tap] .color-controls{display:none}

@media(max-width:900px){.app .site-header{height:56px;padding:0 16px}.app .site-header .brand,.app .site-header .brand img{width:72px;max-width:72px}.app .site-header .close{width:44px;min-width:44px;min-height:44px}.scene,.app[data-level=tap] .scene{height:clamp(280px,calc(100svh - 430px),360px)}}
@media(max-width:360px){.editor-title{font-size:13px}.app .site-header{padding:0 12px}.app .site-header .brand,.app .site-header .brand img{width:56px;max-width:56px}.product-actions{right:2px;top:6px}}

.inline-color-panel{scroll-margin-bottom:calc(160px + env(safe-area-inset-bottom))}
.current-color-dot[data-color="preto"]{--current-color:#252525}.current-color-dot[data-color="branco"]{--current-color:#f4f0e4}.current-color-dot[data-color="bege"]{--current-color:#cbbfa6}.current-color-dot[data-color="amarelo"]{--current-color:#f4c32f}.current-color-dot[data-color="laranja"]{--current-color:#f78026}.current-color-dot[data-color="verde"]{--current-color:#a9bf92}.current-color-dot[data-color="azul"]{--current-color:#20a5e3}.current-color-dot[data-color="vermelho"]{--current-color:#ef2929}