/* Simplified Accessory Studio interface. Geometry remains in its own modules. */
.masthead{height:112px;padding:26px 38px;grid-template-columns:120px minmax(0,1fr) 120px;gap:16px;align-items:center}
.site-home{font-size:23px;font-weight:300;letter-spacing:-.5px;width:max-content}
.masthead h1{margin:0;font-size:clamp(26px,3.4vw,42px);font-weight:300;letter-spacing:-1.5px;line-height:1.1;text-align:center}
.masthead>.text-button{justify-self:end;font-size:18px;padding:8px 0;text-transform:none;font-weight:300}
.controls{padding-top:28px}
.controls>.control-section:first-child{border-top:0;padding-top:0}
.workspace{padding-top:28px}
.workspace-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:54px;margin:0 0 20px}
.workspace-top h2{grid-column:2;margin:0;text-align:center}
.preview-tabs{grid-column:3;justify-self:end;margin:0;border:1px solid #8c958d;width:max-content;align-self:center}
.preview-tabs button{padding:7px 11px;font-size:12px;line-height:1.1;text-transform:none}
.preview-tabs button+button{border-left:1px solid #8c958d}
.device-viewport{min-height:0!important;padding:20px 20px 0}
.device-drawings{min-height:0!important;padding-top:0;column-gap:20px}
.device-figure figcaption{font-size:10px;margin-bottom:8px}
.device-figure svg{max-height:470px}
.device-shell{fill:#d2d3d4}
.assembly-scene{height:470px}
.assembly-loading{top:160px}
.assembly-view{margin:-20px -20px 0}
.colour-controls{border-top:1px solid #bcc5bd;margin-top:20px;padding:10px 0}
.colour-row{display:flex;align-items:center;gap:14px;min-height:45px}
.colour-row>span{font-size:12px;min-width:88px;color:#303b32}
.colour-options{display:flex;align-items:center;flex-wrap:wrap;gap:13px;padding:5px}
.colour-row .swatch{width:20px;height:20px;min-width:20px;border:2px solid transparent;background:var(--swatch)!important;box-shadow:0 0 0 1px #929b94;border-radius:50%;padding:0}
.colour-row .swatch.active{outline:1px solid #202920;outline-offset:4px}
.colour-wheel{display:block;position:relative;width:24px;height:24px;min-width:24px;border:2px solid var(--paper);border-radius:50%;background:conic-gradient(#f44,#ff0,#0e6,#0cf,#44f,#f0c,#f44);box-shadow:0 0 0 1px #8c978e;margin-left:6px;cursor:pointer;overflow:hidden}
.colour-wheel input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:0;cursor:pointer}
.colour-wheel:focus-within{outline:2px solid var(--orange);outline-offset:4px}
.opening-comparison{display:flex;align-items:baseline;justify-content:center;gap:20px;border-top:1px solid #b8c2b9;border-bottom:1px solid var(--ink);padding:20px 0;margin:22px 0 0}
.opening-comparison>span{font-size:13px;color:#536057}
.opening-comparison strong{font-size:32px;line-height:1.1;font-weight:300;letter-spacing:-1px}
.opening-comparison small{font-size:12px;font-weight:400;letter-spacing:0;color:#536057;margin-left:6px}
.export-bar{display:flex;justify-content:center;align-items:center;margin-top:24px}
.export-bar .button{min-width:190px;justify-content:center;font-size:13px;background:var(--orange);border-color:var(--orange);color:var(--ink);text-transform:none}
.export-bar .button:hover{background:#ff703e;border-color:#ff703e}
.about-dialog h2{margin-top:0;font-size:34px}
.about-dialog p{font-size:14px;line-height:1.75;color:#4e5b52;margin:20px 0 0}
.about-dialog>a{display:inline-block;margin-top:24px;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.perspective-shell{fill:#d2d3d4;stroke:#4e5650;stroke-width:1.15;stroke-linejoin:round}
.device-shell .handle-opening{fill:#e7ebe8}
.perspective-shell .control-recess{fill:#bfc1c3}
.perspective-shell .control-light{fill:#dadbdc}
.perspective-shell .control-dark{fill:#363638;stroke:#363638}
.perspective-shell .control-hole{fill:#bfc1c3;stroke:#bfc1c3}
.perspective-shell .side-foot{fill:#bfc1c3}
.perspective-shell .device-orange{fill:#f45b27;stroke:#7c4029}
.perspective-shell .dial-mark{fill:none;stroke:#7c4029;stroke-width:.8}
.perspective-hidden{fill:none;stroke-dasharray:4 4;opacity:.45}
.perspective-figure svg{max-height:470px}
@media(min-width:1600px){.masthead{grid-template-columns:160px minmax(0,1fr) 160px;padding-left:50px;padding-right:50px}}
@media(max-width:1100px){.masthead{height:102px;grid-template-columns:100px minmax(0,1fr) 100px;padding:24px 26px}.masthead h1{font-size:32px}.site-home{font-size:21px}.workspace-top{gap:8px}.preview-tabs button{padding:7px 9px}.colour-row{gap:7px}.colour-row>span{min-width:79px}.colour-options{gap:10px}.colour-row .swatch{width:17px;height:17px;min-width:17px}.colour-wheel{width:22px;height:22px;min-width:22px;margin-left:3px}}
@media(max-width:760px){.masthead{height:96px;grid-template-columns:72px minmax(0,1fr) 58px;gap:12px;padding:20px 22px}.masthead h1{font-size:26px;letter-spacing:-.9px}.masthead>.text-button{font-size:16px}.site-home{font-size:18px}.workspace{padding-top:20px}.workspace-top{margin-bottom:18px;min-height:45px}.controls{padding-top:24px}.assembly-scene{height:390px}.colour-options{gap:11px}.colour-row .swatch{width:19px;height:19px;min-width:19px}.opening-comparison{gap:15px;padding:18px 0}.opening-comparison strong{font-size:30px}.export-bar{flex-direction:row}.device-figure figcaption{font-size:9px}.device-figure svg{max-height:none}.device-drawings{padding-top:0}.device-viewport{padding-top:18px}.assembly-view{margin-top:-18px}.colour-controls{margin-top:12px}}
@media(max-width:480px){.masthead{grid-template-columns:65px minmax(0,1fr) 47px;gap:8px;padding-left:18px;padding-right:18px}.masthead h1{font-size:23px;letter-spacing:-.8px}.workspace-top{grid-template-columns:1fr auto 1fr}.workspace-top h2{font-size:30px}.preview-tabs button{padding:7px 8px;font-size:11px}.device-viewport{padding:15px 12px 0}.assembly-view{margin:-15px -12px 0}.assembly-scene{height:340px}.colour-row{gap:5px;min-height:47px}.colour-row>span{font-size:11px;min-width:72px}.colour-options{gap:9px;padding:5px}.colour-row .swatch{width:17px;height:17px;min-width:17px}.colour-wheel{width:21px;height:21px;min-width:21px;margin-left:2px}.opening-comparison{gap:12px}.opening-comparison>span{font-size:12px}.opening-comparison strong{font-size:28px}.opening-comparison small{font-size:11px}.device-figure figcaption{margin-bottom:4px}}
@media(max-width:380px){.colour-options{gap:8px}.colour-row>span{min-width:68px}.colour-row .swatch{width:15px;height:15px;min-width:15px}.colour-wheel{width:20px;height:20px;min-width:20px}.masthead h1{font-size:21px}}

/* Photo-based SVG drafting: body, true hollow, recessed ports and round feet. */
.perspective-shell{stroke:#626568;stroke-width:1.1}
.upper-housing .hollow-floor{fill:#bfc1c3}
.upper-housing .hollow-wall{fill:#b2b5b7}
.upper-housing .handle-underside{fill:#a8abad}
.upper-housing .handle-edge{fill:#c2c4c6}
.upper-housing .handle-channel{fill:#c3c5c7}
.upper-housing .body-top,.upper-housing .body-front{fill:#d2d3d4}
.upper-housing .channel-contour{stroke:#a2a5a7;stroke-width:.8}
.upper-housing .io-mouth{fill:#a1a4a6}
.upper-housing .io-floor{fill:#babdbf}
.upper-housing .io-rim{fill:none;stroke:#73777a}
.upper-housing .port-slot{fill:#313436;stroke:#313436;stroke-width:.7}
.upper-housing .recess-wall-line{stroke:#858a8d;stroke-width:.65}
.upper-housing .status-led{fill:#dee0e1}
.upper-housing .peg-hole{fill:#717679;stroke:#e0e1e2;stroke-width:1}
.upper-housing .hollow-latch{fill:#b4b7b9}
.perspective-shell .cylinder-wall{fill:#bbbdbf}
.perspective-shell .cylinder-cap{fill:#d0d2d3}
.perspective-shell .cylinder-edge{stroke:#7b7f82;stroke-width:.8}
.perspective-shell .power-button .cylinder-wall,.perspective-shell .volume-wheel .cylinder-wall{fill:#e25a1d}
.perspective-shell .power-button .cylinder-cap,.perspective-shell .volume-wheel .cylinder-cap{fill:#f56a26}
.perspective-shell .fx-black .cylinder-wall{fill:#393b3d}
.perspective-shell .fx-black .cylinder-cap{fill:#535557}
.perspective-shell .fx-white .cylinder-wall{fill:#c6c8c9}
.perspective-shell .fx-white .cylinder-cap{fill:#e0e1e2}
.perspective-shell .roller-mark{stroke:#a6a8aa;stroke-width:.8}

.perspective-shell .volume-tread{stroke:#a94719;stroke-width:1}

/* Keep the full sample library readable at every sidebar width. */
.samples { flex-wrap: wrap; gap: 5px; }
.samples > span { flex: 0 0 100%; margin: 0 0 3px; }
.samples .sample { white-space: nowrap; }
.gradient-controls{border:1px solid var(--line);margin:12px 0 18px;padding:12px}
.gradient-stops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gradient-stops label{display:grid;gap:5px;font-size:11px}
.gradient-stops input{width:100%;height:28px;min-width:0;padding:1px;border:1px solid #878d89;background:transparent;cursor:pointer}
.gradient-controls .range-field{margin:12px 0 6px}
.gradient-controls .control-hint{margin:0}

/* Thin image-colour layer controls reuse the panel/frame palette. */
.colour-layer-section{border-top:1px solid var(--line,#b8c2b9);border-bottom:1px solid var(--line,#b8c2b9);margin:18px 0;padding:16px 0 12px}
.colour-layer-section>.control-hint{margin:8px 0}
.colour-layer-section select{font:inherit;font-size:12px;background:transparent;border:1px solid #8c978e;padding:6px 8px;color:inherit}
.top-colour-row{display:block;margin:14px 0;min-height:0}
.top-colour-row>span{display:block;font-size:11px;margin-bottom:8px}
.top-colour-row .colour-options{flex-wrap:wrap;gap:12px;padding:5px}
.top-colour-row .swatch{width:18px;height:18px;min-width:18px}
.top-colour-row .colour-wheel{width:22px;height:22px;min-width:22px}
.colour-layer-status{font-size:11px;line-height:1.6;color:#46544a;margin:12px 0 0}
.colour-export-note{max-width:480px;text-align:center;margin:14px auto 0;font-size:11px;line-height:1.7;color:#536057}
[hidden]{display:none!important}

/* The extracted colour remains visible even when it does not match a preset. */
.palette-actions{display:flex;justify-content:flex-end;margin:4px 0 10px}
.top-colour-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:8px;gap:8px}
.selected-colour-value{display:flex;align-items:center;gap:6px;font-size:10px;font-variant-numeric:tabular-nums;color:#536057}
.selected-colour-chip{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid #8c978e}