:root{--panel-width: 280px;--topbar-height: 48px;--color-bg: #f7f5f2;--color-panel: #ffffff;--color-border: #e2ddd7;--color-text: #2c2c2c;--color-text-secondary: #6b6560;--color-accent: #3a6ea5;--color-accent-hover: #2d5a8a;--color-accent-light: rgba(58, 110, 165, .08);--color-swatch-ring: #3a6ea5;--color-danger: #c0392b;--color-danger-light: rgba(192, 57, 43, .08);--radius: 6px;--radius-sm: 4px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;height:100vh}#topbar{display:flex;align-items:center;justify-content:space-between;height:var(--topbar-height);padding:0 16px;background:var(--color-panel);border-bottom:1px solid var(--color-border);flex-shrink:0;z-index:10}.topbar-left{display:flex;align-items:center}.topbar-brand{height:30px;width:auto;display:block}.topbar-right{display:flex;gap:6px;align-items:center}.topbar-btn{padding:6px 12px;font-size:12px;font-weight:500;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-panel);color:var(--color-text);cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}.topbar-btn:hover{background:var(--color-bg);border-color:#ccc}.topbar-btn:disabled{opacity:.5;cursor:default}.topbar-btn--secondary{color:var(--color-text-secondary);font-weight:400}#workspace{display:flex;flex:1;overflow:hidden}#panel{width:var(--panel-width);background:var(--color-panel);border-right:1px solid var(--color-border);overflow-y:auto;flex-shrink:0}#panel::-webkit-scrollbar{width:4px}#panel::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}#panel-content{padding:14px 14px 20px}.panel-toggle{display:none}.panel-section{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--color-border)}.panel-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.panel-section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--color-text-secondary);margin-bottom:10px}.swatch-grid{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .1s;position:relative}.swatch:hover{transform:scale(1.12)}.swatch.active{border-color:var(--color-swatch-ring);box-shadow:0 0 0 2px var(--color-panel),0 0 0 4px var(--color-swatch-ring)}.swatch-label{font-size:11px;color:var(--color-text-secondary);margin-top:8px}.material-cards{display:flex;flex-direction:column;gap:6px}.material-card{display:flex;align-items:center;gap:10px;padding:7px 8px;border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;transition:border-color .15s,background .15s}.material-card:hover{background:var(--color-bg)}.material-card.active{border-color:var(--color-accent);background:var(--color-accent-light)}.material-thumb{width:36px;height:36px;border-radius:var(--radius-sm);background-size:cover;background-position:center;flex-shrink:0}.material-name{font-size:13px;font-weight:500}.preset-group{display:flex;gap:5px}.preset-btn{flex:1;padding:7px 0;font-size:12px;font-weight:500;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-panel);color:var(--color-text);cursor:pointer;transition:background .15s,border-color .15s,color .15s}.preset-btn:hover{background:var(--color-bg)}.preset-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.product-item{display:flex;flex-direction:column;gap:5px;padding:7px 0;border-bottom:1px solid var(--color-border)}.product-item:last-child{border-bottom:none}.product-header{display:flex;align-items:center;justify-content:space-between}.product-name{font-size:13px;font-weight:500}.toggle{position:relative;width:34px;height:18px;flex-shrink:0}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background:#ccc;border-radius:9px;cursor:pointer;transition:background .2s}.toggle-slider:before{content:"";position:absolute;width:14px;height:14px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:transform .2s}.toggle input:checked+.toggle-slider{background:var(--color-accent)}.toggle input:checked+.toggle-slider:before{transform:translate(16px)}.style-select{font-size:12px;padding:4px 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-panel);color:var(--color-text);cursor:pointer}.summary-list{list-style:none}.summary-list li{display:flex;justify-content:space-between;padding:4px 0;font-size:12px;border-bottom:1px solid var(--color-border)}.summary-list li:last-child{border-bottom:none}.summary-label{color:var(--color-text-secondary)}.summary-value{font-weight:500}.furn-sublabel{font-size:11px;font-weight:500;color:var(--color-text-secondary);margin-bottom:6px;margin-top:4px}.furn-catalog{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:14px}.furn-catalog-item{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-panel);cursor:pointer;transition:background .15s,border-color .15s;text-align:left;font-family:inherit}.furn-catalog-item:hover{background:var(--color-accent-light);border-color:var(--color-accent)}.furn-icon{width:18px;height:18px;flex-shrink:0;color:var(--color-text-secondary)}.furn-icon svg{width:100%;height:100%}.furn-catalog-label{font-size:11px;font-weight:500;color:var(--color-text);line-height:1.2}.furn-placed-list{margin-bottom:8px}.furn-empty{font-size:12px;color:var(--color-text-secondary);padding:8px 0;font-style:italic}.furn-placed-row{display:flex;align-items:center;justify-content:space-between;padding:5px 6px;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s}.furn-placed-row:hover{background:var(--color-bg)}.furn-placed-row.selected{background:var(--color-accent-light)}.furn-placed-name{font-size:12px;font-weight:500}.furn-placed-actions{display:flex;gap:2px}.furn-action-btn{width:26px;height:26px;border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:background .12s,color .12s;padding:4px}.furn-action-btn:hover{background:var(--color-border);color:var(--color-text)}.furn-action-btn--danger:hover{background:var(--color-danger-light);color:var(--color-danger)}.furn-action-btn svg{width:16px;height:16px}.furn-controls{background:var(--color-bg);border-radius:var(--radius);padding:10px;margin-top:6px}.furn-controls-title{font-size:12px;font-weight:600;margin-bottom:8px}.furn-controls-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.furn-controls-label{font-size:12px;color:var(--color-text-secondary)}.furn-rot-group{display:flex;align-items:center;gap:4px}.furn-rot-btn{width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-panel);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text);transition:background .12s;padding:0}.furn-rot-btn:hover{background:var(--color-border)}.furn-rot-btn svg{width:16px;height:16px}.furn-rot-value{font-size:11px;font-weight:500;min-width:36px;text-align:center;color:var(--color-text-secondary)}.furn-controls-actions{display:flex;gap:5px;margin-top:8px}.furn-ctrl-btn{flex:1;padding:5px 0;font-size:11px;font-weight:500;font-family:inherit;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-panel);color:var(--color-text);cursor:pointer;transition:background .12s,border-color .12s,color .12s}.furn-ctrl-btn:hover{background:var(--color-bg)}.furn-ctrl-btn--danger{color:var(--color-danger);border-color:var(--color-danger)}.furn-ctrl-btn--danger:hover{background:var(--color-danger-light)}.furn-hint{font-size:10px;color:var(--color-text-secondary);margin-top:8px;text-align:center;letter-spacing:.2px}#viewport{flex:1;position:relative;overflow:hidden}#viewport canvas{display:block;width:100%;height:100%}@media(max-width:1024px){.topbar-right{gap:4px}.topbar-brand{height:24px}.topbar-btn{padding:5px 8px;font-size:11px}#panel{position:fixed;top:var(--topbar-height);left:0;bottom:0;z-index:20;transform:translate(-100%);transition:transform .25s ease;box-shadow:none}#panel.open{transform:translate(0);box-shadow:4px 0 20px #0000001a}.panel-toggle{display:block;position:fixed;top:calc(var(--topbar-height) + 12px);left:12px;z-index:15;padding:8px 14px;font-size:13px;font-weight:500;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-panel);color:var(--color-text);cursor:pointer;box-shadow:0 2px 8px #00000014}#panel.open~.panel-toggle,.panel-toggle.hidden{display:none}}#viewport-loader{position:absolute;inset:0;background:#f6f6f4;display:flex;align-items:center;justify-content:center;z-index:5;opacity:1;transition:opacity .4s ease}#viewport-loader.loaded{opacity:0}.loader-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 52px;background:#fff;border-radius:12px;box-shadow:0 2px 24px #0000000f}.loader-icon{width:52px;height:52px}.loader-brand{display:flex;flex-direction:column;align-items:center;gap:2px}.loader-title{font-size:22px;font-weight:600;color:#2f2f2f;letter-spacing:-.3px}.loader-subtitle{font-size:15px;font-weight:400;color:#6f6f6f}.loader-text{font-size:12px;color:#999;letter-spacing:.3px;margin-top:4px}#toast-container{position:fixed;bottom:20px;right:20px;z-index:100;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{padding:10px 18px;background:var(--color-text);color:var(--color-panel);font-size:13px;font-weight:500;border-radius:var(--radius);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}.toast.visible{opacity:1;transform:translateY(0)}.category-tabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}.category-tab{padding:4px 10px;font-size:11px;font-weight:500;border:1px solid var(--color-border);border-radius:12px;background:var(--color-panel);color:var(--color-text-secondary);cursor:pointer;transition:all .15s;font-family:inherit}.category-tab:hover{background:var(--color-bg);color:var(--color-text)}.category-tab.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.color-search{width:100%;padding:7px 10px;font-size:12px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-panel);color:var(--color-text);margin-bottom:8px;font-family:inherit;outline:none;transition:border-color .15s}.color-search:focus{border-color:var(--color-accent)}.color-search::placeholder{color:var(--color-text-secondary);opacity:.6}.color-tabs{margin-bottom:6px}.color-tabs .category-tab{padding:3px 8px;font-size:10px}.color-list{max-height:200px;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius)}.color-list::-webkit-scrollbar{width:4px}.color-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:2px}.color-item{display:flex;align-items:center;gap:8px;padding:6px 8px;cursor:pointer;transition:background .12s;border-bottom:1px solid rgba(0,0,0,.04)}.color-item:last-child{border-bottom:none}.color-item:hover{background:var(--color-bg)}.color-item.active{background:var(--color-accent-light)}.color-item-swatch{width:22px;height:22px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.1)}.color-item-name{font-size:12px;font-weight:500;flex:1}.color-item-hex{font-size:10px;color:var(--color-text-secondary);font-family:monospace}