:root{--bg: #171719;--panel: #1e1f22;--panel-hi: #2a2b2f;--text: #ececee;--muted: #8f8f97;--accent: #d4a373;--accent-2: #c9a67a;--line: #2f3035;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}#app{display:grid;grid-template-columns:1fr 360px;height:100vh;width:100vw}#stage{position:relative}#scene{display:block;width:100%;height:100%}#hud{position:absolute;inset:20px 20px auto 20px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;gap:12px}.project-tabs{display:flex;gap:4px;background:#1414168c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);padding:4px;border-radius:10px;pointer-events:auto}.project-tabs .tab{background:transparent;border:none;color:var(--muted);padding:8px 14px;border-radius:7px;font-size:13px;cursor:pointer;transition:all .15s;font-weight:500}.project-tabs .tab:hover{color:var(--text);background:#ffffff0d}.project-tabs .tab.active{background:var(--accent);color:#1a1a1c}.brand{background:#1414168c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);padding:10px 16px;border-radius:10px;pointer-events:auto}.brand-mark{font-size:10px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;font-weight:600}#model-name{font-size:16px;margin-top:2px;letter-spacing:-.01em}.views{display:flex;gap:4px;background:#1414168c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);padding:4px;border-radius:10px;pointer-events:auto}.views button{background:transparent;border:none;color:var(--muted);width:36px;height:36px;border-radius:7px;font-size:15px;cursor:pointer;transition:all .15s}.views button:hover{background:#ffffff14;color:var(--text)}#panel{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}#panel header{padding:24px 24px 16px;border-bottom:1px solid var(--line)}#panel h1{font-size:18px;margin:0 0 4px;font-weight:600;letter-spacing:-.01em}.subtitle{color:var(--muted);font-size:13px;margin:0}#controls{flex:1;overflow-y:auto;padding:8px 0}.group{padding:16px 24px;border-bottom:1px solid var(--line)}.group-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 12px;font-weight:600}.model-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.model-card{background:var(--panel-hi);border:1px solid transparent;color:var(--text);padding:10px 12px;border-radius:10px;text-align:left;cursor:pointer;transition:all .15s}.model-card:hover{background:#33343a}.model-card.active{border-color:var(--accent);background:#d4a3731f}.model-name{font-size:14px;font-weight:600;margin-bottom:2px}.model-tag{font-size:11px;color:var(--muted);line-height:1.3}.field{margin-bottom:12px}.field:last-child{margin-bottom:0}.field-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}.field-label .value{color:var(--muted);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent)}.swatch-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(52px,1fr));gap:8px}.swatch{aspect-ratio:1;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s}.swatch:hover{transform:scale(1.05)}.swatch.active{border-color:var(--accent)}.swatch-label{font-size:10px;color:var(--muted);text-align:center;margin-top:4px;display:block;line-height:1.2}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.06);cursor:pointer}.toggle-row:last-child{border-bottom:none}.toggle-title{font-size:13px}.toggle-price{font-size:11px;color:var(--muted);margin-top:2px}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:40px;height:22px;background:var(--panel-hi);border-radius:12px;position:relative;cursor:pointer;transition:background .15s;flex-shrink:0}input[type=checkbox]:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--muted);border-radius:50%;transition:all .15s}input[type=checkbox]:checked{background:var(--accent)}input[type=checkbox]:checked:after{background:#fff;left:20px}#panel footer{padding:16px 24px;border-top:1px solid var(--line);background:var(--panel-hi)}.price-row{display:flex;justify-content:space-between;align-items:baseline}.price-row strong{font-size:22px;color:var(--accent);font-variant-numeric:tabular-nums}.model-selector{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px 24px;border-bottom:1px solid var(--line)}.model-selector .model-card{background:var(--panel-hi);border:1px solid transparent;color:var(--text);padding:12px;border-radius:10px;text-align:left;cursor:pointer;transition:all .15s}.model-selector .model-card:hover{background:#33343a}.model-selector .model-card.active{border-color:var(--accent);background:#d4a3731f}.model-selector .model-name{font-size:13px;font-weight:600;margin-bottom:2px}.model-selector .model-tag{font-size:10px;color:var(--muted);line-height:1.3;margin-bottom:6px}.model-selector .model-price{font-size:11px;color:var(--accent);font-weight:500}.accordion{border-bottom:1px solid var(--line)}.accordion-title{padding:14px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;list-style:none;color:var(--text);-webkit-user-select:none;user-select:none}.accordion-title::-webkit-details-marker{display:none}.accordion-title .chev{color:var(--muted);transition:transform .15s;font-size:10px}.accordion[open] .accordion-title .chev{transform:rotate(180deg)}.accordion-body{padding:4px 24px 16px}.dropdown{width:100%;padding:10px 12px;background:var(--panel-hi);color:var(--text);border:1px solid var(--line);border-radius:8px;font-size:13px;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a9aa2' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.swatch-btn{display:inline-flex;flex-direction:column;align-items:center;background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 4px;cursor:pointer;width:68px;transition:all .15s}.swatch-btn .swatch{width:40px;height:40px;border-radius:8px;display:block;border:2px solid transparent;transition:transform .15s}.swatch-btn .swatch-label{font-size:10px;color:var(--muted);text-align:center;margin-top:6px;line-height:1.2}.swatch-btn:hover .swatch{transform:scale(1.05)}.swatch-btn.active .swatch{border-color:var(--accent)}.swatch-btn.active .swatch-label{color:var(--text)}.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px}.icon-card{background:var(--panel-hi);border:1px solid transparent;color:var(--text);padding:10px 8px 8px;border-radius:10px;cursor:pointer;text-align:center;transition:all .15s;position:relative}.icon-card:hover{background:#33343a}.icon-card.active{border-color:var(--accent);background:#d4a37314}.icon-card .icon-radio{position:absolute;top:6px;left:8px;font-size:11px;color:var(--accent)}.icon-card.active .icon-radio{color:var(--accent)}.icon-card:not(.active) .icon-radio{color:var(--muted)}.icon-card .icon-glyph{font-size:20px;color:var(--muted);margin:6px 0 4px;line-height:1}.icon-card.active .icon-glyph{color:var(--accent)}.icon-card .icon-name{font-size:11px;color:var(--text);line-height:1.2}.icon-card .icon-price{font-size:10px;color:var(--muted);margin-top:2px}@media (max-width: 720px){#app{grid-template-columns:1fr;grid-template-rows:1fr auto}#panel{border-left:none;border-top:1px solid var(--line);max-height:52vh}}
