/* (condensed) styles from the working version; unchanged core layout/controls */ 
:root{--bg:#fff;--fg:#1a1a1a;--border:#d0d0d0;--hover:#f5f5f5;--accent:#2563eb;--success:#059669;--error:#dc2626;--shadow:rgba(0,0,0,.1);--chip:#0ea5e9;--muted:#6b7280;--component-card-width:84px;--component-card-gap:12px;--component-indent-step:4px;--component-nested-padding:6px;--details-card-width:124px;--details-card-gap:8px;--details-panel-padding:12px;--sample-card-gap:12px;--sample-card-height:210px}
*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--fg);overflow:hidden;display:flex;flex-direction:column}
#header{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px 14px;padding:6px 16px 8px;border-bottom:1px solid var(--border);background:var(--bg);flex-wrap:wrap;row-gap:8px}
.toggle-all-callouts{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);font-size:13px;line-height:1.2;cursor:pointer;user-select:none;transition:background .2s,border-color .2s}.toggle-all-callouts:hover{background:var(--hover)}.toggle-all-callouts:has(input:checked){background:#eef3ff;border-color:var(--accent);color:var(--accent)}
.toggle-all-callouts input{margin:0;accent-color:var(--accent)}
button{padding:8px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);cursor:pointer;font-size:14px;transition:background .2s,transform .05s,border-color .2s}
button:hover{background:var(--hover)}button:active{transform:translateY(1px)}button:focus{outline:2px solid var(--accent);outline-offset:2px}button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#fileInput{display:none}#badge{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:600}#badge.ready{background:#d1fae5;color:var(--success);border:1px solid var(--success)}#badge.unavailable{background:#fee2e2;color:var(--error);border:1px solid var(--error)}
/* Toolbar: labelled, joined button groups */
.tb-group{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px}
.tb-row{display:inline-flex;align-items:center;gap:4px}
.tb-label{padding-left:2px;font-size:9px;line-height:1;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tb-seg{display:inline-flex;align-items:stretch}
#header button{padding:5px 10px;font-size:13px;line-height:1.2}
.tb-seg>*{border-radius:0;margin-left:-1px;position:relative}
.tb-seg>*:first-child{border-radius:6px 0 0 6px;margin-left:0}
.tb-seg>*:last-child{border-radius:0 6px 6px 0}
.tb-seg>*:only-child{border-radius:6px}
.tb-seg>*:hover,.tb-seg>*:focus-visible,.tb-seg>.active{z-index:1}
.tb-end{margin-left:auto;display:inline-flex;align-items:center;gap:10px;align-self:center}
@media (max-width:720px){.tb-label{display:none}#header{gap:6px 10px}}
#viewer{position:relative;width:100%;flex:1 1 auto;min-height:0;overflow:hidden}#canvas{display:block;width:100%;height:100%;cursor:pointer;outline:none}
#dropCluster{position:absolute;top:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:14px;width:min(960px,calc(100% - 32px));max-height:calc(100% - 48px);overflow-y:auto;overscroll-behavior:contain;pointer-events:none;z-index:120;transition:opacity .25s ease,transform .25s ease,visibility 0s linear}
/* ✕ stays in the top-right corner while the gallery scrolls */
button.picker-close{position:sticky;top:8px;align-self:flex-end;flex:0 0 36px;z-index:3;margin:0 8px -44px 0;width:36px;height:36px;padding:0;border-radius:50%;font-size:16px;line-height:1;pointer-events:auto;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.12)}
button.picker-close:hover{background:var(--hover)}
#dropCluster.is-hidden{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-8px)}
.hint-box{background:rgba(255,255,255,.95);border:2px dashed var(--border);border-radius:12px;padding:24px;color:var(--muted);box-shadow:0 15px 35px rgba(15,23,42,.08);backdrop-filter:blur(4px)}
#dropHint{text-align:center;font-size:18px;line-height:1.6;opacity:0;transition:opacity .3s,border-color .3s,color .3s;cursor:pointer;pointer-events:auto}#dropHint.show{opacity:1}
#dropHint.dragover{border-color:var(--accent);color:var(--accent)}
#dropHint:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.hint-subtext{display:block;font-size:14px;margin-top:8px;color:var(--muted)}
#sampleGallery{pointer-events:auto;text-align:left;font-size:15px;width:100%}
.featured-pick{display:flex;align-items:center;gap:18px;padding:14px 18px;margin-bottom:16px;border:2px solid var(--accent);border-radius:16px;background:linear-gradient(135deg,#eef3ff,#e0f2fe);box-shadow:0 6px 18px rgba(37,99,235,.14)}
.featured-pick__text{flex:1 1 auto;min-width:0}
.featured-pick__badge{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.featured-pick__title{margin:8px 0 4px;font-size:18px;line-height:1.25;color:var(--fg)}
.featured-pick__desc{margin:0;font-size:13px;line-height:1.45;color:var(--fg)}
.featured-pick__card{flex:0 0 160px;height:176px;display:flex;justify-content:center}
.featured-pick__card button.sample-card{min-height:0;max-width:160px;padding:12px 12px 40px;gap:10px}
button.sample-card.sample-card--featured{border:2px solid var(--accent);background:#fff;animation:featuredPulse 2.4s ease-in-out infinite}
button.sample-card.sample-card--featured::before{content:'Load';position:absolute;z-index:2;top:18px;right:18px;padding:2px 8px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:700}
@keyframes featuredPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.35)}50%{box-shadow:0 0 0 8px rgba(37,99,235,0)}}
@media (prefers-reduced-motion:reduce){button.sample-card.sample-card--featured{animation:none}}
/* Demo button: pairs with the Lens card (same height), stacks below it on phones */
button.featured-demo{flex:0 0 150px;height:176px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 12px;border:2px solid var(--accent);border-radius:18px;background:#fff;color:var(--accent);text-align:center;transition:background .2s,box-shadow .2s,transform .2s}
button.featured-demo:hover{background:#f5f8ff;box-shadow:0 8px 22px rgba(37,99,235,.18);transform:translateY(-2px)}
button.featured-demo:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.featured-demo__icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;font-size:18px;padding-left:3px}
.featured-demo__label{font-size:14px;font-weight:700;line-height:1.25}
.featured-demo__sub{font-size:11px;color:var(--muted)}
@media (max-width:640px){.featured-pick{flex-direction:column;align-items:stretch;padding:14px}.featured-pick__card{flex-basis:auto;height:auto}.featured-pick__card button.sample-card{max-width:none;height:170px}button.featured-demo{flex:0 0 auto;height:auto;flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 14px;text-align:left}.featured-demo__icon{width:38px;height:38px;flex:0 0 38px}.featured-demo__sub{display:none}}
#sampleGalleryContent .sample-row{opacity:.92;transition:opacity .2s}#sampleGalleryContent .sample-row:hover,#sampleGalleryContent .sample-row:focus-within{opacity:1}
.sample-gallery__lead{text-transform:uppercase;font-size:13px;letter-spacing:.08em;font-weight:700;color:var(--muted);margin-bottom:12px;text-align:center}
.sample-gallery__content{display:flex;flex-direction:column;gap:16px;width:100%}
.sample-gallery__loading,.sample-gallery__error{text-align:center;font-size:14px;color:var(--muted)}
.sample-row{display:grid;grid-template-columns:minmax(100px,140px) 1fr;align-items:start;gap:18px}
.sample-row__label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted);line-height:1.4}
.sample-row__title{text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:700;color:var(--fg)}
.sample-row__description{font-size:13px;line-height:1.4;color:var(--fg)}
.sample-row__folder-tag{font-size:11px;font-family:'SFMono-Regular',Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:4px 8px;border:1px solid var(--border);border-radius:999px;align-self:flex-start}
.sample-row__grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));grid-auto-rows:var(--sample-card-height);gap:var(--sample-card-gap);justify-items:center}
@media (max-width:960px){.sample-row{grid-template-columns:1fr}.sample-row__label{padding-bottom:4px}.sample-row__grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
button.sample-card{position:relative;padding:16px 14px 48px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,#f8fafc,#eef2ff);cursor:pointer;display:flex;flex-direction:column;align-items:stretch;gap:16px;transition:border-color .2s,box-shadow .2s,transform .2s;color:var(--fg);min-height:var(--sample-card-height);height:100%;width:100%;max-width:200px}
button.sample-card:hover{border-color:var(--accent);box-shadow:0 10px 30px rgba(37,99,235,.15);transform:translateY(-2px)}
.sample-card__preview{width:100%;flex:1 1 auto;aspect-ratio:1;border-radius:14px;background:radial-gradient(circle at top,#f5f8ff,#e2e8f0);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 20px rgba(15,23,42,.08);position:relative}
.sample-card__preview svg{width:100%;height:100%;display:block}
.sample-card__svg{width:100%;height:100%}
.sample-card__preview--fallback{background:linear-gradient(160deg,#fef3c7,#e0f2fe)}
.sample-card__fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
.sample-card__fallback.is-hidden{opacity:0;visibility:hidden}
.sample-card__initials{font-size:22px;color:var(--fg);letter-spacing:.08em}
.sample-card__ext{font-size:11px;color:var(--muted);letter-spacing:.2em}
.sample-card__label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-weight:700;font-size:13px;text-align:center;width:90%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-shadow:0 2px 6px rgba(0,0,0,.15)}
button.sample-card.is-loading{pointer-events:none;opacity:.7}
button.sample-card.is-loading::after{content:'Loading…';position:absolute;top:12px;right:12px;font-size:11px;font-weight:600;color:var(--accent)}
.sample-row__grid:empty::after{content:'No models in this folder yet';font-size:13px;color:var(--muted);text-align:center;border:1px dashed var(--border);border-radius:12px;padding:16px;grid-column:1/-1}
.sample-tooltip{position:absolute;padding:10px 14px;border-radius:10px;background:rgba(15,23,42,.92);color:#f8fafc;font-size:13px;line-height:1.4;max-width:240px;box-shadow:0 12px 30px rgba(15,23,42,.35);opacity:0;transform:translate(-50%,-12px);pointer-events:none;transition:opacity .15s ease,z-index 0s linear .15s;z-index:-1}
.sample-tooltip::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border-width:6px 6px 0 6px;border-style:solid;border-color:rgba(15,23,42,.92) transparent transparent transparent}
.sample-tooltip.is-visible{opacity:1;transition:opacity .15s ease;z-index:999}
#progress{position:absolute;top:16px;right:16px;width:200px;height:4px;background:var(--border);border-radius:2px;overflow:hidden;display:none}
#progressBar{height:100%;background:var(--accent);width:0%;transition:width .2s}#progressBar.indeterminate{width:30%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
#toast{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);max-width:460px;padding:12px 16px;background:var(--fg);color:var(--bg);border-radius:8px;box-shadow:0 4px 12px var(--shadow);font-size:14px;display:none;animation:slideIn .3s;z-index:1000}
@keyframes slideIn{from{transform:translateX(-50%) translateY(20px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}}
#footer{position:absolute;bottom:16px;right:16px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.9);padding:6px 12px;border-radius:4px;border:1px solid var(--border);pointer-events:none}
@media (max-width:720px),(pointer:coarse){#footer{display:none}}
#cameraControls{position:absolute;top:16px;left:16px;width:272px;max-height:calc(100% - 32px);overflow-y:auto;overscroll-behavior:contain;background:rgba(255,255,255,.95);border:1px solid var(--border);border-radius:10px;padding:6px 12px 12px;box-shadow:0 2px 8px var(--shadow);z-index:90;transition:width .2s ease}
#cameraControls.is-collapsed{width:auto;padding:4px 8px}
/* Keep View settings beside (not under) the Components panel */
body:has(#componentsPanel.show) #cameraControls{left:336px}
@media (max-width:720px){body:has(#componentsPanel.show) #cameraControls{display:none}}
#cameraControls.is-collapsed .panel-body{display:none}
.panel-collapse-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:6px 2px;margin-bottom:6px;border:none;background:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.panel-collapse-btn:hover{background:none;color:var(--accent)}
#cameraControls.is-collapsed .panel-collapse-btn{margin-bottom:0}
.panel-chevron{display:inline-block;transition:transform .2s ease;font-size:12px;line-height:1}
.is-collapsed .panel-chevron{transform:rotate(-90deg)}
.control-group{margin-bottom:12px}.control-group:last-child{margin-bottom:0}.control-label{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.control-buttons{display:flex;gap:6px;flex-wrap:wrap}.control-buttons button{padding:6px 10px;font-size:12px;min-width:72px}.row{display:flex;align-items:center;gap:8px;margin:6px 0}.row input[type=range]{flex:1}
#layersPanel,#componentsPanel{position:absolute;top:0;height:100%;background:var(--bg);border-left:1px solid var(--border);border-right:1px solid var(--border);display:none;flex-direction:column;box-shadow:0 0 8px var(--shadow);z-index:100}
#layersPanel{right:0;width:320px}#componentsPanel{left:0;width:320px}#layersPanel.show,#componentsPanel.show{display:flex}
#pickPartTray{position:absolute;top:0;right:0;width:360px;max-width:100%;height:100%;background:var(--bg);border-left:1px solid var(--border);box-shadow:0 0 10px var(--shadow);display:none;flex-direction:column;gap:10px;padding:14px 14px 12px;z-index:101;overflow:hidden;min-height:0}
#pickPartTray.show{display:flex}
.pick-part-tray__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:0 0 auto}
.pick-part-title{font-size:15px;font-weight:700}
.pick-part-subtitle{font-size:12px;color:var(--muted);margin-top:1px}
/* Settings: one compact line each, label beside its control */
.pp-settings{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;padding-bottom:10px;border-bottom:1px solid var(--border)}
.pp-row{display:flex;align-items:center;gap:8px;min-height:26px;flex-wrap:wrap}
.pp-row[hidden]{display:none}
.pp-label{flex:0 0 56px;font-size:12px;font-weight:600;color:var(--muted)}
.pp-seg{display:inline-flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;background:var(--bg)}
.pp-seg label{position:relative;display:inline-flex;margin:0}
.pp-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pp-seg span{padding:3px 9px;font-size:12px;line-height:1.5;border-left:1px solid var(--border);user-select:none;white-space:nowrap}
.pp-seg label:first-child span{border-left:none}
.pp-seg label:hover span{background:var(--hover)}
.pp-seg input:checked+span{background:var(--accent);color:#fff}
.pp-seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:inset 0 0 0 3px #fff}
.pp-check{display:inline-flex;align-items:center;gap:5px;font-size:12px;cursor:pointer;white-space:nowrap}
.pp-check input{margin:0;accent-color:var(--accent)}
.pp-check--muted{color:var(--muted);cursor:default}
.pick-part-select{padding:3px 6px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--fg);font-size:12px}
.pick-part-source-status{font-size:12px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
/* Inventory: the only part that scrolls */
.pick-part-inventory{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px}
.pick-part-inventory__head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.pick-part-section__title{font-weight:700;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pick-part-list{overflow-y:auto;flex:1 1 auto;display:flex;flex-direction:column;gap:8px;width:100%;padding-right:4px;min-height:0;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.pick-part-list::-webkit-scrollbar{width:8px}
.pick-part-list::-webkit-scrollbar-track{background:transparent}
.pick-part-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
.pick-part-section{display:flex;flex-direction:column;gap:4px}
.pick-part-section__label{font-size:11px;font-weight:600;color:var(--muted);padding:2px 2px 0}
.pick-part-items{display:grid;grid-template-columns:1fr;gap:4px}
button.pick-part-item{border:1px solid var(--border);border-radius:9px;background:#fff;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:5px 8px;text-align:left;cursor:grab;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;font-size:13px}
button.pick-part-item:hover{border-color:var(--accent);box-shadow:0 4px 12px rgba(37,99,235,.14);transform:translateY(-1px)}
button.pick-part-item:active{transform:scale(.98)}
button.pick-part-item.is-pending{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pick-part-thumb{width:40px;height:40px;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(160deg,#f8fafc,#eef2ff)}
.pick-part-thumb--empty{background:repeating-linear-gradient(135deg,#f3f4f6,#f3f4f6 10px,#e5e7eb 10px,#e5e7eb 20px)}
.pick-part-thumb img,.pick-part-thumb svg{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.pick-part-meta{display:flex;align-items:center;gap:6px;min-width:0}
.pick-part-label{font-size:13px;font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-part-flag{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(239,68,68,0.1);color:#ef4444;font-size:12px;font-weight:800;border:1px solid rgba(239,68,68,0.35)}
.pick-part-badge{padding:2px 7px;border-radius:20px;font-size:10px;font-weight:700;text-transform:capitalize;border:1px solid var(--border)}
.bucket-large{background:rgba(255,99,71,0.12);border-color:rgba(255,99,71,0.3)}
.bucket-medium{background:rgba(255,206,86,0.14);border-color:rgba(255,206,86,0.28)}
.bucket-small{background:rgba(75,192,192,0.14);border-color:rgba(75,192,192,0.3)}
.pick-part-empty{color:var(--muted);font-size:13px;text-align:center;padding:14px 12px;border:1px dashed var(--border);border-radius:8px;width:100%}
.pick-part-handle{position:absolute;left:-12px;top:50%;transform:translateY(-50%);background:var(--accent);color:#fff;border-radius:12px 0 0 12px;border:none;padding:6px 8px;cursor:pointer;box-shadow:0 2px 8px var(--shadow)}
#pickPartStatus{position:absolute;bottom:14px;left:14px;padding:10px 12px;background:rgba(15,23,42,0.82);color:#fff;border-radius:10px;border:1px solid rgba(255,255,255,0.14);box-shadow:0 8px 20px rgba(0,0,0,0.25);font-size:12px;opacity:0;transition:opacity .15s ease;pointer-events:none;z-index:90}
#pickPartStatus.visible{opacity:1}
#pickPartStatus.invalid{background:rgba(127,29,29,0.86);border-color:rgba(248,113,113,0.6)}
#pickPartControls{position:absolute;bottom:14px;right:14px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,0.9);color:var(--text);font-size:11px;max-width:380px;line-height:1.3;box-shadow:0 6px 18px rgba(0,0,0,0.18);display:none}
#pickPartControls.visible{display:block}
/* Keep the key hints and mouse hints clear of the right-hand panels and of each other */
#pickPartControls{bottom:58px}
body:has(#layersPanel.show) #footer,body:has(#layersPanel.show) #pickPartControls{right:336px}
body:has(#pickPartTray.show) #footer,body:has(#pickPartTray.show) #pickPartControls{right:376px}
@media (max-width:720px){#pickPartControls{display:none!important}}
#layersHeader,#componentsHeader{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px}#layersList,#componentsList{flex:1;overflow-y:auto;padding:8px 12px}
.panel-actions{display:flex;align-items:center;gap:6px}
.panel-action-btn{padding:4px 8px;font-size:12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;line-height:1}
.panel-action-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.layer-item{border:1px solid var(--border);border-radius:8px;padding:6px 8px 4px;margin-bottom:6px}.layer-top{display:flex;align-items:center;gap:8px}
.layer-name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-readout{font-variant-numeric:tabular-nums;font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap}
.layer-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#e5e7eb}.layer-dot.is-visible{background:#10b981}
.slider-field--compact{margin:2px 0 0}
.panel-empty{font-size:13px;color:var(--muted);text-align:center;padding:16px 8px}
.panel-action-btn:disabled{color:var(--muted);opacity:.5;cursor:default;background:var(--bg)}
.panel-action-btn:disabled:active{transform:none}
.component-group{margin-bottom:18px;margin-left:var(--component-depth,0px);transition:margin .2s}
.component-group--nested{border-left:1px dashed var(--border);padding-left:var(--component-nested-padding,6px);margin-left:var(--component-depth,0px)}
.component-group-title{font-size:14px;font-weight:700;margin-bottom:8px}
.component-options-grid{display:flex;flex-wrap:nowrap;gap:var(--component-card-gap,12px);overflow-x:auto;padding-bottom:8px;margin-bottom:4px;scrollbar-color:var(--accent) transparent;scrollbar-width:thin}
.component-options-grid::-webkit-scrollbar{height:6px}
.component-options-grid::-webkit-scrollbar-track{background:transparent}
.component-options-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
@supports(selector(:has(*))){.component-options-grid:not(:has(.component-option-card:nth-child(n+4))){overflow-x:hidden}}
.component-option-card{flex:0 0 var(--component-card-width,84px);display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px;border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .2s;background:var(--bg);text-align:center;position:relative}
.component-option-card:hover{background:var(--hover);border-color:var(--accent)}.component-option-card.active{background:#eef3ff;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.component-option-card--invalid{background:#ffe6e6;border-color:#ff4d4f}
.component-option-card--invalid.active{background:#ffd7d7;box-shadow:0 0 0 1px #ff4d4f}
.component-option-card--invalid .component-option-preview{border-color:#ff4d4f;background:linear-gradient(160deg,#fff5f5,#ffe6e6)}
.component-option-flag{position:absolute;top:6px;left:6px;font-size:14px;line-height:1}
.component-option-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.component-option-card:has(.component-option-radio:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.component-option-preview{width:62px;height:62px;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#f8fafc,#eef2ff);overflow:hidden}
.component-option-preview img,.component-option-preview svg{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.component-option-preview--empty{background:repeating-linear-gradient(135deg,#f3f4f6,#f3f4f6 8px,#e5e7eb 8px,#e5e7eb 16px)}
.component-option-preview--empty img,.component-option-preview--empty svg{opacity:0}
.component-option-caption{font-size:11px;font-weight:600;color:var(--muted)}
#componentDetails{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(calc((var(--details-card-width)*3)+(var(--details-card-gap)*2)+(var(--details-panel-padding)*2)),95%);max-width:95vw;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;box-shadow:0 -2px 12px var(--shadow);display:none;z-index:250;pointer-events:none}
#componentDetails.show{display:block;animation:slideUp .3s}@keyframes slideUp{from{transform:translateX(-50%) translateY(100%)}to{transform:translateX(-50%) translateY(0)}}
.details-compact{display:flex;flex-direction:column;gap:10px;padding:var(--details-panel-padding)}.details-compact>*{pointer-events:auto}.details-info{min-width:0;width:100%}.details-title-compact{font-size:14px;font-weight:700;margin-bottom:4px}.details-desc-compact{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:normal}
.details-parts{display:flex;gap:var(--details-card-gap);align-items:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.details-parts::-webkit-scrollbar{height:6px}
.details-parts::-webkit-scrollbar-track{background:transparent}
.details-parts::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}
@supports(selector(:has(*))){.details-parts:not(:has(.part-item:nth-child(n+4))){overflow-x:hidden}}
.part-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s;background:var(--bg);width:var(--details-card-width);flex:0 0 var(--details-card-width);text-align:center}
.part-item:hover{border-color:var(--accent);background:var(--hover)}.part-item.selected{border-color:var(--accent);background:#eef3ff}.part-label{font-size:11px;font-weight:600}.part-colors{display:flex;gap:3px}
.part-preview{width:82px;height:82px;border:1px solid var(--border);border-radius:8px;background:linear-gradient(145deg,#f8fafc,#e8eefc);display:flex;align-items:center;justify-content:center;overflow:hidden}
.part-preview img,.part-preview svg{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}
.part-preview--empty{background:repeating-linear-gradient(135deg,#f3f4f6,#f3f4f6 8px,#e5e7eb 8px,#e5e7eb 16px)}
.part-preview--empty img,.part-preview--empty svg{opacity:0}
button.color-dot{width:18px;height:18px;padding:0;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s}button.color-dot:hover{transform:scale(1.12);border-color:var(--fg)}button.color-dot.active{border-color:var(--fg);box-shadow:inset 0 0 0 1px #fff}
button.dot-a{background:#d66b6b}button.dot-b{background:#e3a43a}button.dot-c{background:#6fb065}button.dot-d{background:#5aa1d8}button.dot-e{background:#8d74d6}button.dot-f{background:#b76aa1}
.details-close-compact{background:none;border:1px solid var(--border);font-size:16px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:8px;min-width:30px}
.details-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.details-head .details-title-compact{margin-bottom:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.details-actions{display:flex;gap:6px;flex:0 0 auto}
.details-body{display:flex;flex-direction:column;gap:10px}
#componentDetails.is-collapsed .details-body{display:none}.details-close-compact:hover{background:var(--hover)}
.axis-control{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.axis-control select{flex:1;min-width:0;padding:4px 6px;border:1px solid var(--border);border-radius:6px;background:var(--bg);font-size:12px}
.axis-symbol{font-size:12px;color:var(--muted);padding:2px 8px;border:1px solid var(--border);border-radius:999px;min-width:44px;text-align:center;white-space:nowrap}
.axis-row>label{font-size:12px;min-width:34px}
/* Group headers with a Reset action */
.control-group__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.control-group__head .control-label{margin-bottom:0}
button.group-reset-btn{padding:2px 8px;font-size:11px;line-height:1.4;border-radius:999px;color:var(--accent);border-color:var(--border)}
#header button.group-reset-btn{padding:4px 10px;font-size:12px}
button.group-reset-btn:disabled{color:var(--muted);opacity:.5;cursor:default;background:transparent}
button.group-reset-btn:disabled:active{transform:none}
button:focus:not(:focus-visible){outline:none}
/* Labelled sliders with readouts and marked ends */
.slider-field{margin:8px 0 6px}
.slider-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12px}
.slider-field__head output{font-variant-numeric:tabular-nums;font-size:11px;font-weight:600;color:var(--accent)}
.slider-field input[type=range]{display:block;width:100%;margin:4px 0 0;accent-color:var(--accent)}
.slider-field__ends{display:flex;justify-content:space-between;font-size:10px;line-height:1.2;color:var(--muted);user-select:none}
.slider-field--centred .slider-field__ends{display:grid;grid-template-columns:1fr auto 1fr}
.slider-field--centred .slider-field__ends span:first-child{justify-self:start;font-size:13px}
.slider-field--centred .slider-field__ends span:last-child{justify-self:end;font-size:13px}
.slider-field__zero{position:relative;padding-top:3px}
.slider-field__zero::before{content:'';position:absolute;top:-2px;left:50%;width:1px;height:5px;background:var(--muted);transform:translateX(-50%)}
.component-callout-line{position:absolute;height:2px;background:linear-gradient(90deg,var(--accent),#38bdf8);transform-origin:0 50%;opacity:0;transition:opacity .2s ease,transform .14s ease,width .14s ease;filter:drop-shadow(0 2px 8px rgba(14,116,144,.28))}
.component-callout-line::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(37,99,235,.18)}
#calloutLayer{position:absolute;inset:0;pointer-events:none;z-index:140}
#calloutLayer .callout-multi-container{position:absolute;inset:0;pointer-events:none}
#calloutLayer.is-visible .component-callout-line{opacity:1}
#calloutLayer.is-visible .component-callout-card{opacity:1;transform:translate(-50%,-50%) scale(1)}
#calloutLayer:not(.is-visible) .component-callout-card{pointer-events:none}
#calloutLayer.is-visible:not(.has-single)>#componentCalloutCard,#calloutLayer.is-visible:not(.has-single)>#componentCalloutLine{opacity:0;pointer-events:none}
.component-callout-card{position:absolute;min-width:240px;max-width:300px;background:rgba(255,255,255,.96);border:1px solid var(--border);box-shadow:0 10px 30px var(--shadow);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;pointer-events:auto;opacity:0;transform:translate(-50%,-50%) scale(.98);transition:opacity .2s ease,transform .2s ease}
.component-callout-card--compact{min-width:200px;max-width:240px;padding:10px}
.component-callout-thumb--compact{width:56px;height:56px}
.callout-multi-container .component-callout-card{pointer-events:none}
.component-callout-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.component-callout-title{display:flex;flex-direction:column;gap:4px}
.component-callout-variant{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:#f8fafc}
.component-callout-body{display:flex;align-items:center;gap:10px}
.component-callout-thumb{width:72px;height:72px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#f8fafc,#eef2ff);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.component-callout-thumb img{width:100%;height:100%;object-fit:cover}
.component-callout-thumb img.is-empty{opacity:0}
.component-callout-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.component-callout-desc{font-size:13px;color:var(--fg);line-height:1.5}
.component-callout-swapper{position:absolute;top:6px;right:6px;display:flex;gap:6px}
.component-callout-swap{background:var(--accent);color:#fff;border:none;border-radius:8px;width:28px;height:26px;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;box-shadow:0 6px 16px rgba(37,99,235,.25);transition:transform .1s ease,background .2s ease}
.component-callout-swap:hover{transform:translateY(-1px);background:#1d4ed8}
.component-callout-swap:disabled,.component-callout-swap.is-hidden{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;font-size:12px;border-radius:999px;border:1px solid var(--border);background:#f8fafc;color:#0b1220}.chip b{color:#0ea5e9}
.order-btn{background:linear-gradient(90deg,#2563eb,#1d4ed8);color:#fff;border-color:#1d4ed8;box-shadow:0 6px 18px rgba(37,99,235,.25)}
.order-btn:hover{background:linear-gradient(90deg,#1d4ed8,#1e40af);color:#fff}
.order-overlay{position:fixed;inset:0;background:rgba(11,17,28,.55);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:420;padding:24px;overflow:auto}
.order-overlay.is-open{display:flex}
body.order-open{overflow:hidden}
.order-sheet{width:min(1100px,96vw);background:rgba(255,255,255,.98);border:1px solid var(--border);border-radius:16px;box-shadow:0 16px 60px rgba(15,23,42,.25);display:flex;flex-direction:column;gap:18px;padding:20px}
.order-sheet__header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.order-sheet__subtitle{color:var(--muted);font-size:14px;margin-top:4px}
.order-sheet__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:980px){.order-sheet__grid{grid-template-columns:1fr}}
.order-card{border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;background:#fbfcff}
.order-card--summary{background:#fff}
.order-card__heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.file-loader{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px dashed var(--border);border-radius:8px;font-size:12px;color:var(--accent);cursor:pointer;white-space:nowrap}
.file-loader input{display:none}
.order-field{display:flex;flex-direction:column;gap:6px;font-size:14px}
.nested-toggle{margin-left:16px}
.order-field select{padding:8px 10px;border-radius:8px;border:1px solid var(--border)}
.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.option-grid--compact{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.option-grid label{display:flex;gap:8px;align-items:center;font-size:14px;padding:8px;border:1px solid var(--border);border-radius:10px;background:#fff}
.filename-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.stacked{display:flex;flex-direction:column;gap:6px;font-size:14px}
.stacked input{padding:8px 10px;border-radius:8px;border:1px solid var(--border)}
.order-toggles{display:flex;flex-direction:column;gap:8px}
.toggle-row{display:flex;gap:10px;align-items:center;font-size:14px}
.order-actions{display:flex;justify-content:flex-start;gap:8px;flex-wrap:wrap}
.order-actions .ghost:disabled{color:var(--muted);border-color:var(--border);opacity:.55;cursor:default}
.order-actions .ghost{background:transparent;border-style:dashed;color:var(--accent)}
.order-sheet__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border);flex-wrap:wrap}
.order-footer__actions{display:flex;gap:10px}
.order-summary{border:1px dashed var(--border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:10px;min-height:140px;background:#fff}
.order-summary__item{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:10px}
.order-summary__item svg,.order-summary__item img{width:80px;height:60px;border-radius:8px;border:1px solid var(--border);background:#f8fafc}
.order-summary__details{display:flex;flex-direction:column;gap:4px}
.order-summary__title{font-weight:700;font-size:14px}
.order-summary__meta{font-size:12px;color:var(--muted)}
.order-summary__parts{display:flex;flex-wrap:wrap;gap:6px;font-size:12px}
.order-summary__badge{padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:#f3f4f6}
.muted{color:var(--muted);font-size:13px}
.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.primary:hover{background:#1d4ed8;color:#fff}
/* View settings: compact layout. Opposite views stack in pairs with Iso
   beside them; lighting and background are one-row segmented controls. */
#cameraControls .panel-collapse-btn{padding:4px 2px;margin-bottom:4px}
#cameraControls .control-group{margin-bottom:0;padding:8px 0;border-top:1px solid var(--border)}
#cameraControls .control-group:first-child{border-top:none;padding-top:2px}
#cameraControls .control-group:last-child{padding-bottom:0}
#cameraControls .control-label{margin-bottom:4px;font-size:10px}
#cameraControls .control-group__head{margin-bottom:2px}
#cameraControls .control-buttons button{min-width:0;padding:4px 4px;font-size:12px;line-height:1.3}
#cameraControls .view-grid{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
#cameraControls .view-grid #viewIso{grid-row:span 2}
#cameraControls .control-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
#cameraControls .axis-row{margin:2px 0 0}
#cameraControls .slider-field{margin:6px 0 0}
#cameraControls .slider-field input[type=range]{margin:2px 0 0}