handler-playable-sdk 0.3.2 → 0.3.4

package/dist/index.css

@@ -1 +1,4537 @@
-:root{--ui-bg: #0f1218;--ui-bg-2: #101520;--ui-surface: #171c25;--ui-surface-2: #1f2530;--ui-border: #2b3544;--ui-text: #e8edf3;--ui-muted: #9aa7b4;--ui-accent: #3dd6c6;--ui-accent-2: #ff9f43;--ui-accent-3: #6f8cff;--ui-danger: #ff5c70;--ui-shadow: 0 18px 40px rgba(5, 10, 18, .45)}.preview-shell{height:100vh;width:100vw;background:radial-gradient(circle at top left,#182033 0%,var(--ui-bg) 45%,#0c1018 100%);color:var(--ui-text);font-family:Avenir Next,Avenir,Futura,Gill Sans,Trebuchet MS,sans-serif;display:flex;flex-direction:column;box-sizing:border-box}.preview-stage{height:100%;display:flex;flex-direction:column}.preview-toolbar{height:54px;background:linear-gradient(135deg,var(--ui-bg-2),#121926 50%,#141b28 100%);border-bottom:1px solid var(--ui-border);display:flex;align-items:center;justify-content:flex-start;padding:0 12px;z-index:10;gap:10px;width:100%;box-sizing:border-box;overflow:hidden;flex-shrink:0}.zoom-controls{display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0}.device-dropdown{flex-shrink:1;min-width:0;max-width:100%}.preview-btn{flex-shrink:0;white-space:nowrap}@media(max-width:768px){.preview-toolbar{padding:0 4px;height:50px;gap:4px}.device-dropdown{font-size:11px;padding:2px 4px;min-width:100px}.preview-btn{padding:3px 6px;font-size:11px}.zoom-label{font-size:11px;min-width:30px}@media(max-width:480px){#refresh-btn,#debug-toggle,#console-toggle{display:none}}}.device-frame{box-shadow:0 0 0 1px #ffffff14,0 18px 40px #0000008c;border-radius:14px;background-color:#000;transition:width .3s ease,height .3s ease;overflow:hidden;position:relative}.console-panel{position:absolute;bottom:0;left:0;right:0;height:200px;background:#10141cf5;border-top:1px solid var(--ui-border);display:flex;flex-direction:column;transition:opacity .3s ease,visibility .3s ease;z-index:100}.console-panel.closed{opacity:0;visibility:hidden;pointer-events:none}.console-msg{font-family:Consolas,Monaco,monospace;font-size:12px;padding:4px 8px;border-bottom:1px solid #333}.console-msg.type-warn{color:#feca57}.preview-toolbar-left{display:flex;align-items:center}.preview-logo{font-weight:700;font-size:13px;color:var(--ui-text);letter-spacing:1.2px;text-transform:uppercase}.preview-toolbar-center,.preview-toolbar-right{display:flex;align-items:center;gap:8px}.view-toggle{display:flex;align-items:center;gap:6px;padding:2px;background:#121826;border:1px solid var(--ui-border);border-radius:999px}.view-toggle-btn{border:none;background:transparent;color:var(--ui-muted);font-size:11px;padding:6px 12px;border-radius:999px;cursor:pointer;transition:all .2s ease}.view-toggle-btn.active{color:var(--ui-text);background:#263146;box-shadow:inset 0 0 0 1px #6f8cff66}.device-selector-wrapper{position:relative}.device-dropdown{background-color:#1d2430;color:var(--ui-text);border:1px solid var(--ui-border);border-radius:8px;padding:6px 10px;font-size:12px;min-width:150px;max-width:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis}.device-dropdown:focus{outline:none;border-color:var(--ui-accent-3)}.preview-btn{background-color:#202836;color:var(--ui-text);border:1px solid var(--ui-border);border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.preview-btn:hover{background-color:#2a3446;border-color:#3b475c}.preview-btn:active{background-color:#343f55}.preview-btn:disabled,.device-dropdown:disabled{opacity:.5;cursor:not-allowed}.icon-btn{padding:6px;width:30px;height:30px;justify-content:center}@media(max-width:768px){.icon-btn{padding:3px;width:24px;height:24px}.icon-btn svg{width:12px;height:12px}}.icon-btn svg{width:16px;height:16px}.toolbar-divider{width:1px;height:20px;background-color:#555;margin:0 4px}.zoom-label{font-size:12px;color:var(--ui-muted);min-width:35px;text-align:center}.console-toggle{position:relative}.console-badge{background-color:#ff6b6b;color:#fff;font-size:10px;padding:2px 4px;border-radius:8px;margin-left:4px;display:none}.console-badge.has-errors{display:inline-block}.preview-main{flex:1;position:relative;overflow:hidden;background:radial-gradient(circle at 30% 20%,rgba(61,214,198,.1),transparent 45%),radial-gradient(circle at 70% 80%,rgba(111,140,255,.14),transparent 50%),#0e1118}.preview-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.frame-wrapper{display:flex;justify-content:center;align-items:center;transform-origin:center center;transition:transform .2s cubic-bezier(.25,.46,.45,.94);filter:drop-shadow(0 12px 24px rgba(0,0,0,.45))}.game-container{width:100%;height:100%;position:relative}.console-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--ui-border);background-color:#141a24}.console-title{font-weight:600;font-size:14px;color:var(--ui-text)}.console-actions{display:flex;gap:8px}.console-action-btn{background-color:transparent;color:var(--ui-muted);border:1px solid var(--ui-border);border-radius:3px;padding:4px 8px;font-size:11px;cursor:pointer;transition:all .2s ease}.console-action-btn:hover{background-color:#243041;color:var(--ui-text)}.console-messages{flex:1;overflow-y:auto;padding:4px 0}.console-msg{font-family:Consolas,Monaco,monospace;font-size:12px;padding:4px 12px;border-bottom:1px solid #333;word-wrap:break-word}.console-msg .time{color:#888;margin-right:8px;font-size:11px}.console-msg.type-log{color:#fff}.console-msg.type-info{color:#74c0fc}.console-msg.type-error{color:#ff6b6b;background:#ff00001a}.console-msg.type-warn{color:#feca57;background:#ffc1071a}.debug-overlay{position:absolute;inset:0;z-index:200;pointer-events:none}.debug-overlay.hidden{display:none}.scene-panel{position:absolute;width:320px;max-height:78vh;background:#12161ef5;border:1px solid var(--ui-border);border-radius:14px;box-shadow:var(--ui-shadow);pointer-events:auto;overflow:hidden;box-sizing:border-box}.scene-panel.scene-objects{width:300px}.scene-panel.scene-tools{max-height:46vh}.scene-panel.scene-tools .scene-panel-body{max-height:calc(46vh - 44px)}.customize-panel{width:320px}.customize-list{display:flex;flex-direction:column;gap:8px}.customize-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.customize-row{display:flex;align-items:center;gap:8px;background:#141a24b3;border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:6px 8px}.customize-key{flex:0 0 120px;font-size:11px;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customize-input{flex:1;background-color:#1d2430;color:var(--ui-text);border:1px solid var(--ui-border);border-radius:6px;padding:4px 6px;font-size:11px;font-family:JetBrains Mono,SF Mono,Consolas,Monaco,monospace}.customize-actions{display:flex;align-items:center;gap:6px}.customize-icon-btn{width:28px;height:28px;border-radius:8px;border:1px solid rgba(111,140,255,.4);background:#19202ccc;color:var(--ui-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.customize-icon-btn svg{width:14px;height:14px;fill:currentColor}.customize-icon-btn.ai{font-size:10px;font-weight:700;letter-spacing:.05em;padding:4px 6px}.customize-file{display:none}.customize-color-field{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:8px;background:#141a24b3;border:1px solid rgba(255,255,255,.05);font-size:11px;color:var(--ui-muted)}.customize-color-field input[type=color]{width:100%;height:28px;padding:0;border:none;background:transparent}.customize-color-text{background-color:#1d2430;color:var(--ui-text);border:1px solid var(--ui-border);border-radius:6px;padding:4px 6px;font-size:11px;font-family:JetBrains Mono,SF Mono,Consolas,Monaco,monospace}.customize-help{margin-top:6px;font-size:10px;color:var(--ui-muted)}.customize-empty{font-size:11px;color:var(--ui-muted);padding:6px 0}.batch-ai-label{font-size:11px;color:var(--ui-muted)}.batch-ai-input,.batch-ai-textarea,.batch-ai-select{width:100%;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#0a0e14d9;color:var(--ui-text);font-size:12px}.batch-ai-textarea{min-height:70px;resize:vertical}.batch-ai-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.batch-ai-actions{margin-top:6px}.batch-ai-btn{border:1px solid var(--ui-border);background:#19202ccc;color:var(--ui-text);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer}.batch-ai-btn.primary{border-color:#bf7eff99;background:#bf7eff33}.batch-ai-file{display:none}.batch-ai-file-name,.batch-ai-status{font-size:11px;color:var(--ui-muted)}.batch-ai-dna{margin-top:8px;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:#10141c99}.batch-ai-palette{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.batch-ai-swatch{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.2)}.batch-ai-muted{font-size:11px;color:var(--ui-muted)}.batch-ai-asset-list{margin-top:10px;display:flex;flex-direction:column;gap:10px}.batch-ai-item{border-radius:10px;border:1px solid rgba(255,255,255,.06);background:#0c1016b3;padding:8px;display:flex;flex-direction:column;gap:8px}.batch-ai-item-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.batch-ai-toggle{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ui-text)}.batch-ai-item-body{display:flex;flex-direction:column;gap:8px}.batch-ai-thumb{width:100%;max-height:140px;object-fit:contain;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#080a0e99}.batch-ai-thumb.hidden{display:none}.batch-ai-item-status{font-size:11px;color:var(--ui-muted)}.batch-ai-item-actions{display:flex;gap:8px;flex-wrap:wrap}.batch-ai-empty{font-size:11px;color:var(--ui-muted);padding:6px 0}.brand-dna-label{font-size:11px;color:var(--ui-muted)}.brand-dna-input,.brand-dna-textarea,.brand-dna-select{width:100%;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#0a0e14d9;color:var(--ui-text);font-size:12px}.brand-dna-textarea{min-height:70px;resize:vertical}.brand-dna-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.brand-dna-btn{border:1px solid var(--ui-border);background:#19202ccc;color:var(--ui-text);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer}.brand-dna-btn.primary{border-color:#6f8cff99;background:#6f8cff33}.brand-dna-file{display:none}.brand-dna-file-name,.brand-dna-status{font-size:11px;color:var(--ui-muted)}.brand-dna-meta{margin-top:8px}.brand-dna-prompt{margin:6px 0 0;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:#0c1016b3;color:var(--ui-text);font-size:11px;white-space:pre-wrap}.brand-dna-output{margin-top:8px;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:#10141c99}.brand-dna-palette{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.brand-dna-swatch{width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.2)}.brand-dna-muted{font-size:11px;color:var(--ui-muted)}.brand-dna-object-list{margin-top:10px;display:flex;flex-direction:column;gap:10px}.brand-dna-object{border-radius:10px;border:1px solid rgba(255,255,255,.06);background:#0c1016b3;padding:8px;display:flex;flex-direction:column;gap:8px}.brand-dna-object-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.brand-dna-object-title{font-size:11px;color:var(--ui-text);word-break:break-all}.brand-dna-object-status{font-size:11px;color:var(--ui-muted)}.brand-dna-empty{font-size:11px;color:var(--ui-muted);padding:6px 0}.ai-panel{display:flex;flex-direction:column;gap:10px;padding:8px;border-radius:10px;border:1px solid rgba(255,255,255,.06);background:#10141c99}.ai-modal{position:fixed;inset:0;background:#060a10d1;display:flex;align-items:center;justify-content:center;z-index:10080}.ai-modal-card{width:min(760px,92vw);max-height:90vh;overflow:auto;background:#10141cfa;border:1px solid var(--ui-border);border-radius:16px;box-shadow:0 20px 50px #00000073}.ai-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.06)}.ai-modal-actions{display:inline-flex;align-items:center;gap:8px}.ai-modal-title{font-size:14px;font-weight:700;color:var(--ui-text)}.ai-modal-subtitle{font-size:11px;color:var(--ui-muted);margin-top:3px}.ai-modal-close,.ai-modal-gallery{border:1px solid var(--ui-border);background:#19202ccc;color:var(--ui-text);border-radius:8px;padding:4px 12px;font-size:11px;cursor:pointer}.ai-loading{display:none;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:linear-gradient(120deg,#58a3ff1a,#ff639424);border:1px solid rgba(88,163,255,.25)}.ai-loading.active{display:flex}.ai-loading-ring{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:#58a3ffe6;animation:ai-spin .9s linear infinite}.ai-loading-bar{flex:1;height:8px;border-radius:999px;background:linear-gradient(90deg,#58a3ff33,#ff6394b3,#58a3ff33);background-size:200% 100%;animation:ai-bar 1.4s ease infinite}.ai-loading-text{font-size:11px;color:var(--ui-text)}@keyframes ai-spin{to{transform:rotate(360deg)}}@keyframes ai-bar{0%{background-position:0% 50%}to{background-position:100% 50%}}.ai-label{font-size:11px;color:var(--ui-muted)}.ai-input,.ai-select,.ai-textarea{width:100%;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:#0a0e14d9;color:var(--ui-text);font-size:12px}.ai-textarea{min-height:70px;resize:vertical}.ai-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ai-strength{gap:10px}.ai-strength input[type=range]{flex:1;min-width:160px}.ai-strength-value{font-size:11px;color:var(--ui-text);min-width:20px;text-align:right}.ai-gallery{border-radius:10px;border:1px solid rgba(255,255,255,.06);background:#0c1016a6;padding:8px}.ai-gallery.hidden{display:none}.ai-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}.ai-gallery-item{border:1px solid rgba(255,255,255,.08);background:#080a0eb3;border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:6px;cursor:pointer;text-align:left}.ai-gallery-item.active{border-color:#6f8cff99;box-shadow:0 0 0 1px #6f8cff40}.ai-gallery-thumb{width:100%;height:70px;object-fit:contain;border-radius:6px;background:#06080cb3;border:1px solid rgba(255,255,255,.08)}.ai-gallery-label{font-size:10px;color:var(--ui-text);word-break:break-all}.ai-gallery-empty{font-size:11px;color:var(--ui-muted)}.ai-btn{border:1px solid var(--ui-border);background:#19202ccc;color:var(--ui-text);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer}.ai-file{display:none}.ai-file-name{font-size:11px;color:var(--ui-muted)}.ai-toggles label{font-size:11px;color:var(--ui-text);display:inline-flex;align-items:center;gap:6px}.ai-actions .debug-btn{flex:1}.ai-status{font-size:11px;color:var(--ui-muted)}.ai-preview{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#080a0e99;padding:8px;display:flex;justify-content:center;align-items:center;min-height:140px}.ai-preview img{max-width:100%;max-height:220px;object-fit:contain}.asset-preview-modal{position:fixed;inset:0;background:#080a0eb8;display:flex;align-items:center;justify-content:center;z-index:10050}.asset-preview-card{width:min(720px,92vw);max-height:82vh;background:#10141cfa;border:1px solid var(--ui-border);border-radius:14px;box-shadow:var(--ui-shadow);display:flex;flex-direction:column}.asset-preview-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--ui-text)}.asset-preview-title{font-size:12px;font-weight:600;word-break:break-all}.asset-preview-close{border:1px solid var(--ui-border);background:#19202ccc;color:var(--ui-text);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer}.asset-preview-meta{padding:0 14px 10px;color:var(--ui-muted);font-size:11px;word-break:break-all;border-bottom:1px solid rgba(255,255,255,.06)}.asset-preview-actions{display:flex;align-items:center;gap:8px}.asset-preview-change,.asset-preview-ai{border:1px solid var(--ui-border);background:#19202ccc;color:var(--ui-text);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer}.asset-preview-body{padding:12px;overflow:auto;display:flex;align-items:center;justify-content:center}.asset-preview-ai-output{border-top:1px solid rgba(255,255,255,.06);padding:10px 12px 14px}.asset-preview-ai-output.hidden{display:none}.asset-preview-ai-label{font-size:11px;color:var(--ui-muted);margin-bottom:6px}.asset-preview-ai-image{width:100%;max-height:200px;object-fit:contain;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:#080a0e99}.asset-preview-body img{max-width:100%;max-height:60vh;object-fit:contain}.asset-preview-body audio{width:100%}.asset-preview-body pre{width:100%;white-space:pre-wrap;color:var(--ui-text);font-family:JetBrains Mono,SF Mono,Consolas,Monaco,monospace;font-size:12px}.asset-crop-modal{position:fixed;inset:0;background:#080a0ec7;display:flex;align-items:center;justify-content:center;z-index:10060}.asset-crop-card{width:min(860px,96vw);background:#10141cfa;border:1px solid var(--ui-border);border-radius:14px;box-shadow:var(--ui-shadow);display:flex;flex-direction:column}.asset-crop-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);color:var(--ui-text)}.asset-crop-title{font-size:13px;font-weight:600}.asset-crop-subtitle{font-size:11px;color:var(--ui-muted);margin-top:2px}.asset-crop-close{border:1px solid var(--ui-border);background:#19202ccc;color:var(--ui-text);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer}.asset-crop-body{padding:16px;display:flex;justify-content:center;gap:16px;flex-wrap:nowrap;align-items:flex-start}.asset-crop-column{display:flex;flex-direction:column;gap:8px;align-items:center;min-width:0}.asset-crop-label{font-size:11px;color:var(--ui-muted);text-transform:uppercase;letter-spacing:.08em}.asset-crop-canvas{border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#080a0e8c;cursor:grab}.asset-crop-preview{border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#080a0e8c}.asset-crop-canvas:active{cursor:grabbing}.asset-crop-controls{display:flex;align-items:center;gap:12px;padding:0 16px 12px;color:var(--ui-text);font-size:12px}.asset-crop-controls label{min-width:42px}.asset-crop-zoom{flex:1}.asset-crop-zoom-value{min-width:50px;text-align:right;color:var(--ui-muted)}.asset-crop-reset{border:1px solid var(--ui-border);background:#19202ccc;color:var(--ui-text);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer}.asset-crop-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 16px 16px}.asset-crop-actions button{border-radius:10px;padding:6px 14px;font-size:12px;border:1px solid var(--ui-border);background:#1c2432d9;color:var(--ui-text);cursor:pointer}.asset-crop-apply{background:var(--ui-accent);border-color:transparent;color:#10151f;font-weight:600}@media(max-width:720px){.customize-grid{grid-template-columns:1fr}}.scene-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background-color:#181c26f2;color:var(--ui-text);font-size:12px;user-select:none;cursor:move;border-bottom:1px solid rgba(255,255,255,.05)}.scene-panel-actions{display:flex;align-items:center;gap:8px}.scene-panel-action{border:1px solid var(--ui-border);border-radius:6px;background:#1f2633;color:var(--ui-muted);font-size:11px;padding:4px 8px;cursor:pointer}.scene-panel-action:hover{border-color:#ff9f4399;color:var(--ui-text)}.scene-panel-toggle{border:none;background:transparent;color:var(--ui-muted);font-size:14px;cursor:pointer;transition:transform .2s ease}.panel-title{display:flex;align-items:center;gap:8px}.panel-pill{padding:2px 8px;border-radius:999px;background:#3dd6c61f;color:var(--ui-accent);font-size:10px;text-transform:uppercase;letter-spacing:.6px}.panel-accent-blue .panel-pill{background:#6f8cff24;color:var(--ui-accent-3)}.panel-accent-amber .panel-pill{background:#ff9f4329;color:var(--ui-accent-2)}.panel-accent-violet .panel-pill{background:#bf7eff2e;color:#d6b7ff}.panel-title-text{font-weight:700;font-size:12px;letter-spacing:.4px}.panel-accent-teal{border-color:#3dd6c659}.panel-accent-blue{border-color:#6f8cff59}.panel-accent-amber{border-color:#ff9f4366}.panel-accent-violet{border-color:#bf7eff59}.scene-panel-body{padding:12px 14px 16px;overflow-y:auto;max-height:calc(78vh - 44px)}.scene-panel.collapsed .scene-panel-body{display:none}.scene-panel.collapsed .scene-panel-toggle{transform:rotate(-90deg)}.scene-panel-search input{width:100%;background-color:#1d2430;color:var(--ui-text);border:1px solid var(--ui-border);border-radius:6px;padding:6px 8px;font-size:12px}.scene-panel-search input:focus{outline:none;border-color:var(--ui-accent);box-shadow:0 0 0 2px #3dd6c633}.scene-panel-filters{display:flex;gap:6px;margin-top:10px}.filter-chip{border:1px solid rgba(111,140,255,.3);background:#131822b3;color:var(--ui-muted);font-size:11px;border-radius:999px;padding:4px 10px;cursor:pointer;transition:all .2s ease}.filter-chip.active{color:var(--ui-text);border-color:#3dd6c680;background:#3dd6c626}.scene-object-list{margin-top:12px;display:flex;flex-direction:column;gap:12px}.scene-object-group-title{font-size:11px;color:var(--ui-muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}.scene-object-count{margin-left:6px;padding:2px 6px;border-radius:999px;background:#ffffff14;color:var(--ui-text);font-size:10px}.scene-object-group-items{display:flex;flex-direction:column;gap:6px}.scene-object-item{width:100%;text-align:left;border:1px solid rgba(255,255,255,.06);border-radius:6px;background-color:#191e28e6;color:var(--ui-text);font-size:12px;padding:6px 8px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.scene-object-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-object-badge{font-size:10px;padding:2px 6px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px;border:1px solid rgba(255,255,255,.1)}.scene-object-badge.ui{background:#3dd6c61f;color:var(--ui-accent)}.scene-object-badge.scene{background:#6f8cff1f;color:var(--ui-accent-3)}.scene-object-item:hover{border-color:#3dd6c680;color:var(--ui-text)}.scene-object-item.selected{border-color:#3dd6c6b3;color:var(--ui-text);box-shadow:inset 0 0 0 1px #3dd6c666}.scene-edit-selected{font-size:12px;color:var(--ui-muted);margin-bottom:10px}.debug-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #444;background-color:#252525;border-radius:8px 8px 0 0;cursor:move;user-select:none}.debug-tabs{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid #333;background-color:#1f1f1f}.debug-tab{flex:1;border:1px solid #444;border-radius:6px;background-color:#262626;color:#bfc3c7;font-size:12px;padding:6px 10px;cursor:pointer;transition:all .2s ease}.debug-tab.active{background-color:#323232;color:#fff;border-color:#ffb43b;box-shadow:inset 0 0 0 1px #ffb43b59}.debug-hint{font-size:11px;color:#9aa0a6;margin-bottom:10px}.debug-tab-panel{display:none}.debug-tab-panel.active{display:block}.debug-collapsible{border:1px solid rgba(255,255,255,.08);border-radius:10px;background-color:#151a24d9;overflow:hidden;margin-bottom:12px}.debug-collapsible-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background-color:#181e2ae6;border:none;color:var(--ui-text);font-size:12px;cursor:pointer}.debug-collapsible-body{padding:10px 12px}.debug-collapsible-icon{transition:transform .2s ease}.debug-collapsible.collapsed .debug-collapsible-body{display:none}.debug-collapsible.collapsed .debug-collapsible-icon{transform:rotate(-90deg)}.debug-nudge.hidden{display:none}.debug-arrow-pad{display:grid;grid-template-columns:repeat(3,36px);grid-auto-rows:32px;gap:6px;justify-content:center;margin-top:8px}.debug-arrow-btn{border:1px solid #444;border-radius:6px;background-color:#2b2b2b;color:#e7e7e7;font-size:14px;cursor:pointer;transition:all .15s ease}.debug-arrow-btn:hover{border-color:#ffb43b;color:#fff}.debug-arrow-btn:active{transform:translateY(1px)}.debug-arrow-btn[data-nudge=up]{grid-column:2}.debug-arrow-btn[data-nudge=left]{grid-column:1}.debug-arrow-btn[data-nudge=down]{grid-column:2}.debug-arrow-btn[data-nudge=right]{grid-column:3}.debug-info-grid{display:flex;flex-direction:column;gap:8px;padding:8px;border-radius:6px;background-color:#191e28cc;border:1px solid rgba(255,255,255,.08)}.debug-info-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px}.debug-info-label{color:#9aa0a6}.debug-info-value{color:#f1f3f5;font-weight:600}.debug-title{font-weight:600;font-size:14px;color:#fff}.debug-actions{display:flex;gap:8px}.debug-action-btn{background-color:transparent;color:#ccc;border:1px solid #555;border-radius:3px;padding:4px 8px;font-size:11px;cursor:pointer;transition:all .2s ease}.debug-action-btn:hover{background-color:#444;color:#fff}.debug-content{flex:1;overflow-y:auto;padding:12px 16px}.debug-section{margin-bottom:20px}.panel-section{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.06)}.panel-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.panel-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ui-muted);margin-bottom:8px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}@media(max-width:520px){.field-grid{grid-template-columns:1fr}}.debug-section-title{font-size:12px;font-weight:600;color:var(--ui-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:4px}.debug-field{margin-bottom:12px}.debug-field label{display:block;font-size:11px;color:#aaa;margin-bottom:4px;font-weight:500}.debug-field input,.debug-field select{width:100%;background-color:#1d2430;color:var(--ui-text);border:1px solid var(--ui-border);border-radius:4px;padding:6px 8px;font-size:12px;font-family:JetBrains Mono,SF Mono,Consolas,Monaco,monospace;transition:border-color .2s ease}.debug-field input:focus,.debug-field select:focus{outline:none;border-color:var(--ui-accent-3);box-shadow:0 0 0 2px #6f8cff33}.debug-field input[type=range]{-webkit-appearance:none;appearance:none;height:6px;background:#555;border-radius:3px;outline:none}.debug-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--ui-accent-3);cursor:pointer}.debug-field input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--ui-accent-3);cursor:pointer;border:none}.debug-field input[type=checkbox]{width:auto;margin-right:8px}.debug-field.checkbox-field{display:flex;align-items:center;gap:8px}.debug-field.checkbox-field label{margin-bottom:0;flex:1}.debug-value-display{display:inline-block;margin-left:8px;font-size:11px;color:var(--ui-muted);font-family:JetBrains Mono,SF Mono,Consolas,Monaco,monospace}.debug-btn-group{display:flex;gap:6px;margin-top:8px}.debug-btn{flex:1;background-color:#444;color:#fff;border:1px solid #666;border-radius:4px;padding:6px 8px;font-size:11px;cursor:pointer;transition:all .2s ease}.debug-btn:hover{background-color:#555;border-color:#888}.debug-btn.primary{background-color:#2a5bd7;border-color:#2a5bd7}.debug-btn.primary:hover{background-color:#2147a7;border-color:#2147a7}.debug-btn.danger{background-color:#dc3545;border-color:#dc3545}.debug-btn.danger:hover{background-color:#c82333;border-color:#c82333}.debug-btn.secondary{background-color:#3dd6c61a;border-color:#3dd6c64d;color:#3dd6c6}.debug-btn.secondary:hover{background-color:#3dd6c633;border-color:#3dd6c666}.config-editor{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px;margin-top:8px;background-color:#191e28d9}.debug-select{width:100%;background-color:#1d2430;color:var(--ui-text);border:1px solid var(--ui-border);border-radius:4px;padding:6px 8px;font-size:11px}.debug-select:focus{outline:none;border-color:var(--ui-accent-3);box-shadow:0 0 0 2px #6f8cff33}.debug-select option{background-color:#333;color:#fff}.json-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;z-index:10000;display:flex;align-items:center;justify-content:center}.json-modal-content{background-color:#1e1e1e;border:1px solid #555;border-radius:8px;width:80%;max-width:800px;max-height:80%;display:flex;flex-direction:column}.json-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #444}.json-modal-header h3{margin:0;color:#fff;font-size:16px;font-weight:600}.json-modal-body{flex:1;padding:16px 20px;overflow-y:auto}.json-modal-body pre{margin:0;color:#fff;font-family:Consolas,Monaco,monospace;font-size:12px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word}.debug-toggle{position:relative}.debug-toggle-badge{background-color:#28a745;color:#fff;font-size:10px;padding:2px 4px;border-radius:8px;margin-left:4px;display:none}.debug-toggle-badge.active{display:inline-block}.preview-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.preview-stage.hidden{display:none}.compare-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:8px;box-sizing:border-box}.compare-viewport{display:flex;flex-direction:column;background:#141820e6;border:1px solid rgba(111,140,255,.2);border-radius:14px;box-shadow:var(--ui-shadow);overflow:hidden;position:relative}.compare-viewport.is-active{border-color:#3dd6c699;box-shadow:0 0 0 1px #3dd6c666,var(--ui-shadow)}.compare-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#121720e6;border-bottom:1px solid rgba(255,255,255,.06);color:var(--ui-text)}.compare-title{display:flex;flex-direction:column;gap:2px}.compare-title-text{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}.compare-meta{font-size:11px;color:var(--ui-muted)}.compare-focus{border:1px solid rgba(111,140,255,.5);background:#1e2638b3;color:var(--ui-text);border-radius:999px;padding:4px 10px;font-size:11px;cursor:pointer}.compare-viewport.is-active .compare-focus{border-color:#3dd6c699;background:#3dd6c62e;color:#e9fff9}.compare-body{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:10px;box-sizing:border-box}.compare-slot,.compare-ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.compare-ghost.hidden{display:none}.compare-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--ui-muted);background:#0a0d1259;opacity:0;transition:opacity .2s ease;pointer-events:none}.compare-viewport:not(.is-active) .compare-overlay{opacity:1}.snapshot-canvas{width:100%;height:100%;display:block;background:#000}@media(max-width:1100px){.compare-grid{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr)}}@media(max-width:720px){.scene-panel.scene-tools{width:calc(100% - 32px);left:16px!important;right:auto}}.panel-resize-handle{position:absolute;top:0;right:0;width:10px;height:100%;cursor:ew-resize}.panel-resize-handle:after{content:"";position:absolute;top:30%;right:3px;width:2px;height:40%;border-radius:2px;background:#ffffff1f}.debug-workbench{position:absolute;width:350px;height:600px;min-width:250px;min-height:200px;background:#12161ef5;border:1px solid var(--ui-border);border-radius:14px;box-shadow:var(--ui-shadow);pointer-events:auto;display:flex;flex-direction:column;overflow:hidden;z-index:1000}.workbench-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background-color:#181c26f2;border-bottom:1px solid rgba(255,255,255,.05);cursor:move;flex-shrink:0}.workbench-tabs{display:flex;background:#0c1018e6;padding:4px;gap:4px;border-bottom:1px solid var(--ui-border);flex-shrink:0;overflow-x:auto}.workbench-tab{flex:1;padding:6px 10px;font-size:11px;font-weight:600;color:var(--ui-muted);background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .2s ease;text-align:center}.workbench-tab:hover{background:#ffffff0d;color:var(--ui-text)}.workbench-tab.active{background:#3dd6c61f;color:var(--ui-accent);border-color:#3dd6c64d}.workbench-content{flex:1;overflow-y:auto;padding:0}.workbench-tab-panel{display:none}.workbench-tab-panel.active{display:block}.workbench-resize-handle{position:absolute;bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--ui-border) 50%,var(--ui-border) 75%,transparent 75%,transparent 85%,var(--ui-border) 85%);z-index:10}.workbench-content .scene-panel{position:static;width:100%!important;max-height:none!important;border:none;background:transparent;box-shadow:none;border-radius:0}.workbench-content .scene-panel-header{display:none}.workbench-content .scene-panel-body{max-height:none;padding:12px}.library-panel{border-color:#3dd6c659}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:12px}.library-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#191e28cc}.library-item:hover{border-color:#3dd6c680;background:#3dd6c61a}.library-item.selected{border-color:#3dd6c6cc;background:#3dd6c626;box-shadow:0 0 0 1px #3dd6c666}.library-thumbnail{width:60px;height:40px;object-fit:cover;border-radius:4px;border:1px solid rgba(255,255,255,.1)}.library-label{font-size:11px;color:var(--ui-muted);text-align:center;word-break:break-all}.library-selected{font-size:12px;color:var(--ui-text);margin:12px 0;padding:8px;background:#191e28cc;border-radius:6px;border:1px solid rgba(255,255,255,.08)}.library-empty{font-size:11px;color:var(--ui-muted);padding:20px;text-align:center;grid-column:1 / -1}.library-category-tabs{display:flex;background:#0c1018e6;padding:4px;gap:2px;border-bottom:1px solid var(--ui-border);margin-bottom:12px}.library-category-tab{flex:1;padding:6px 8px;font-size:11px;font-weight:600;color:var(--ui-muted);background:transparent;border:1px solid transparent;border-radius:6px;cursor:pointer;white-space:nowrap;text-align:center;transition:all .2s ease}.library-category-tab:hover{background:#ffffff0d;color:var(--ui-text)}.library-category-tab.active{background:#3dd6c61f;color:var(--ui-accent);border-color:#3dd6c64d}
+/* Auto-generated from CSS modules - DO NOT EDIT DIRECTLY */
+/* Edit files in css-modules/ directory instead */
+
+/* Import Inter Font - Main Site Typography */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+/* ========== 01-variables.css ========== */
+/* 01 Variables */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* preview.css - Scene editor preview UI */
+
+:root {
+  /* HANDLER Base Colors - LOCKED */
+  --ui-bg: #F6F3EF;
+  --ui-bg-2: #EFEAE5;
+  --ui-surface: #FFFFFF;
+  --ui-surface-2: #F9F7F5;
+  --ui-border: #D4CFC8;
+  --ui-text: #1E1E1E;
+  --ui-text-white: #FFFFFF;
+  --ui-muted: #8E8A84;
+
+  /* HANDLER Accent Colors - LOCKED */
+  --ui-accent: #E38A5A;
+  --ui-accent-2: #C9A28C;
+  --ui-accent-3: #E38A5A;
+  /* No purple - using primary accent */
+  --ui-danger: #D97558;
+  /* Muted danger color */
+  --ui-success: #5F8F6B;
+  /* Status green */
+
+  /* Terracotta Button System - Main Site Style */
+  --ui-terracotta: #E38A5A;
+  --ui-terracotta-hover: #D77A4A;
+  --ui-terracotta-active: #C66A3A;
+
+  /* Dark Panel - For code/inspector */
+  --ui-dark-panel: #1A1A1A;
+  --ui-dark-text: #E8E8E8;
+
+  /* HANDLER Shadow System */
+  --ui-shadow: 0 2px 8px rgba(30, 30, 30, 0.08);
+  --ui-shadow-hover: 0 4px 12px rgba(30, 30, 30, 0.12);
+
+  /* Background Texture */
+  --ui-noise-opacity: 0.05;
+
+  /* Animation Timing - HANDLER Approved */
+  --ui-ease: ease-in-out;
+  --ui-duration-fast: 150ms;
+  --ui-duration-normal: 300ms;
+  --ui-duration-slow: 600ms;
+
+  /* Spacing - Main Site Style (generous) */
+  --ui-space-xs: 4px;
+  --ui-space-sm: 8px;
+  --ui-space-md: 16px;
+  --ui-space-lg: 24px;
+  --ui-space-xl: 32px;
+  --ui-space-2xl: 48px;
+
+  /* Typography - Main Site Style */
+  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Icon Stroke */
+  --ui-icon-stroke: 1.25px;
+
+  /* Hover States - HANDLER Approved */
+  --ui-hover-darken: 0.92;
+  --ui-hover-lift: -2px;
+  --ui-hover-shadow-increase: 0.04;
+}
+
+.preview-shell {
+  height: 100vh;
+  width: 100vw;
+  background: var(--ui-bg);
+  color: var(--ui-text);
+  font-family: var(--font-primary);
+  font-weight: var(--font-weight-normal);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Subtle noise texture overlay - HANDLER industrial aesthetic */
+.preview-shell::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
+  pointer-events: none;
+  opacity: var(--ui-noise-opacity);
+  z-index: 0;
+}
+
+.preview-shell>* {
+  position: relative;
+  z-index: 1;
+}
+
+.preview-stage {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.preview-toolbar {
+  height: 54px;
+  background: var(--ui-bg-2);
+  border-bottom: 1px solid var(--ui-border);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 12px;
+  z-index: 10;
+  gap: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.device-dropdown {
+  flex-shrink: 1;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.preview-btn {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/* ========== 02-base.css ========== */
+/* 02 Base */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Main Content Area */
+.preview-main {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: var(--ui-bg);
+}
+
+.preview-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+/* Preview Stage Layouts */
+.preview-stage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.preview-stage.hidden {
+  display: none;
+}
+
+.hidden {
+  display: none !important;
+}
+
+.compare-grid {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.compare-viewport {
+  display: flex;
+  flex-direction: column;
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: 14px;
+  box-shadow: var(--ui-shadow);
+  overflow: hidden;
+  position: relative;
+}
+
+.compare-viewport.is-active {
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 1px rgba(227, 138, 90, 0.3), var(--ui-shadow);
+}
+
+.compare-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  background: var(--ui-bg-2);
+  border-bottom: 1px solid var(--ui-border);
+  color: var(--ui-text);
+}
+
+.compare-title {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.compare-title-text {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+}
+
+.compare-meta {
+  font-size: 11px;
+  color: var(--ui-muted);
+}
+
+.compare-focus {
+  border: 1px solid var(--ui-border);
+  background: var(--ui-bg);
+  color: var(--ui-text);
+  border-radius: 999px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: background var(--ui-duration-fast) var(--ui-ease);
+}
+
+.compare-focus:hover {
+  background: var(--ui-bg-2);
+}
+
+.compare-viewport.is-active .compare-focus {
+  border-color: var(--ui-accent);
+  background: rgba(227, 138, 90, 0.12);
+  color: var(--ui-text);
+}
+
+.compare-body {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.compare-slot,
+.compare-ghost {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.compare-ghost.hidden {
+  display: none;
+}
+
+.compare-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  color: var(--ui-muted);
+  background: rgba(246, 243, 239, 0.5);
+  opacity: 0;
+  transition: opacity var(--ui-duration-normal) var(--ui-ease);
+  pointer-events: none;
+}
+
+.compare-viewport:not(.is-active) .compare-overlay {
+  opacity: 1;
+}
+
+.snapshot-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: #000;
+}
+
+@media (max-width: 1100px) {
+  .compare-grid {
+    grid-template-columns: 1fr;
+    grid-auto-rows: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 720px) {
+  .scene-panel.scene-tools {
+    width: calc(100% - 32px);
+    left: 16px !important;
+    right: auto;
+  }
+}
+
+.panel-resize-handle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+  z-index: 10;
+  opacity: 0.4;
+  transition: opacity var(--ui-duration-normal) var(--ui-ease);
+}
+
+.panel-resize-handle:hover {
+  opacity: 1;
+}
+
+.panel-resize-handle::after {
+  content: '';
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid var(--ui-muted);
+  border-bottom: 2px solid var(--ui-muted);
+  border-radius: 0 0 2px 0;
+}
+
+
+/* ========== 03-toolbar.css ========== */
+/* 03 Toolbar */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Toolbar Layout - MUST BE OUTSIDE MEDIA QUERY */
+.preview-toolbar-left {
+  display: flex;
+  align-items: center;
+}
+
+.preview-logo {
+  font-weight: 700;
+  font-size: 13px;
+  color: var(--ui-text);
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+}
+
+.preview-toolbar-center {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.preview-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.view-toggle {
+  display: flex;
+  flex-direction: row;
+  /* Ensure horizontal alignment */
+  align-items: center;
+  gap: 6px;
+  padding: 2px;
+  background: var(--ui-bg-2);
+  border: 1px solid var(--ui-border);
+  border-radius: 999px;
+}
+
+.view-toggle-btn {
+  border: none;
+  background: transparent;
+  color: var(--ui-muted);
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  padding: 6px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
+
+/* Terracotta active state - Main Site Style */
+.view-toggle-btn.active {
+  color: var(--ui-text-white);
+  background: var(--ui-terracotta);
+}
+
+/* Responsive toolbar - width responsive, height fixed */
+/* Scene Panel Styles - MUST BE OUTSIDE MEDIA QUERY */
+.scene-panel.collapsed .scene-panel-toggle {
+  transform: rotate(-90deg);
+}
+
+.scene-panel-search input {
+  width: 100%;
+  background-color: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: 6px;
+  padding: 6px 8px;
+  font-size: 12px;
+}
+
+.scene-panel-search input:focus {
+  outline: none;
+  border-color: var(--ui-accent);
+  box-shadow: 0 0 0 2px rgba(61, 214, 198, 0.2);
+}
+
+.scene-panel-filters {
+  display: flex;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.filter-chip {
+  border: 1px solid rgba(111, 140, 255, 0.3);
+  background: rgba(19, 24, 34, 0.7);
+  color: var(--ui-muted);
+  font-size: 11px;
+  border-radius: 999px;
+  padding: 4px 10px;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
+
+.filter-chip.active {
+  color: var(--ui-text-white);
+  border-color: var(--ui-terracotta);
+  background: var(--ui-terracotta);
+  font-weight: var(--font-weight-semibold);
+}
+
+.scene-object-list {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.scene-object-group-title {
+  font-size: 11px;
+  color: var(--ui-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  margin-bottom: 6px;
+}
+
+.scene-object-count {
+  margin-left: 6px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--ui-text);
+  font-size: 10px;
+}
+
+.scene-object-group-items {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.scene-object-item {
+  width: 100%;
+  text-align: left;
+  border: 1px solid var(--ui-border);
+  border-radius: 4px;
+  background-color: var(--ui-surface-2);
+  /* Warm surface */
+  color: var(--ui-text);
+  font-size: 11px;
+  font-weight: var(--font-weight-medium);
+  padding: 6px 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
+
+.scene-object-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.scene-object-badge {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.scene-object-badge.ui {
+  background: rgba(227, 138, 90, 0.12);
+  /* Terracotta tint */
+  color: var(--ui-terracotta);
+}
+
+.scene-object-badge.scene {
+  background: rgba(201, 162, 140, 0.12);
+  /* Dusty clay tint */
+  color: var(--ui-accent-2);
+}
+
+.scene-object-item:hover {
+  border-color: var(--ui-terracotta);
+  background: rgba(227, 138, 90, 0.08);
+  /* Light terracotta wash */
+}
+
+.scene-object-item.selected {
+  border-color: var(--ui-terracotta);
+  background: rgba(227, 138, 90, 0.15);
+  box-shadow: 0 0 0 1px rgba(227, 138, 90, 0.3);
+}
+
+/* Debug Toggle Button in Toolbar */
+.debug-toggle {
+  position: relative;
+}
+
+.debug-toggle-badge {
+  background-color: #28a745;
+  color: var(--ui-text);
+  font-size: 10px;
+  padding: 2px 4px;
+  border-radius: 8px;
+  margin-left: 4px;
+  display: none;
+}
+
+.debug-toggle-badge.active {
+  display: inline-block;
+}
+
+/* Inspector Image Property - Premium Layout */
+.inspector-property-image {
+  margin-bottom: 16px;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 10px;
+  padding: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.inspector-property-image .property-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.inspector-image-container {
+  display: flex;
+  gap: 14px;
+}
+
+.inspector-image-preview {
+  position: relative;
+  width: 100px;
+  height: 80px;
+  background: #0d1117;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  cursor: zoom-in;
+  flex-shrink: 0;
+}
+
+.inspector-image-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: transform var(--ui-duration-fast);
+}
+
+.inspector-image-preview:hover img {
+  transform: scale(1.1);
+}
+
+.inspector-image-details {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--space-md);
+}
+
+.inspector-input-path {
+  font-family: inherit;
+  font-size: 11px !important;
+  color: var(--ui-muted) !important;
+  background: rgba(0, 0, 0, 0.2) !important;
+  border-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+.inspector-image-actions {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.inspector-image-actions .inspector-btn {
+  padding: 6px 10px;
+  font-size: 11px;
+}
+
+.inspector-image-actions .inspector-btn.primary {
+  background: #6d5dfc;
+  color: white;
+  font-weight: 600;
+}
+
+.highlight-pulse {
+  animation: pulse-border 1s infinite alternate;
+  border-color: #6d5dfc !important;
+  /* Removed glow effect - HANDLER forbids glows */
+}
+
+@keyframes pulse-border {
+  from {
+    border-color: rgba(109, 93, 252, 0.3);
+  }
+
+  to {
+    border-color: rgba(109, 93, 252, 1);
+  }
+}
+
+.property-badge {
+  font-size: 9px;
+  font-weight: 800;
+  background: rgba(61, 214, 198, 0.15);
+  color: var(--ui-accent);
+  padding: 2px 5px;
+  border-radius: 4px;
+  text-transform: uppercase;
+}
+
+
+@media (max-width: 768px) {
+  .preview-toolbar {
+    padding: 0 4px;
+    height: 50px;
+    gap: 4px;
+  }
+
+  .device-dropdown {
+    font-size: 11px;
+    padding: 2px 4px;
+    min-width: 100px;
+  }
+
+  .preview-btn {
+    padding: 3px 6px;
+    font-size: 11px;
+  }
+
+  .zoom-label {
+    font-size: 11px;
+    min-width: 30px;
+  }
+}
+
+/* Toolbar Elements */
+.toolbar-divider {
+  width: 1px;
+  height: 20px;
+  background-color: #555;
+  margin: 0 4px;
+}
+
+.zoom-label {
+  font-size: 12px;
+  color: var(--ui-muted);
+  min-width: 35px;
+  text-align: center;
+}
+
+/* 2D Debug Overlay Panel */
+.debug-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 200;
+  pointer-events: none;
+}
+
+.debug-overlay.hidden {
+  display: none;
+}
+
+.scene-panel {
+  position: absolute;
+  width: 320px;
+  max-height: 78vh;
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: 14px;
+  box-shadow: var(--ui-shadow);
+  pointer-events: auto;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+}
+
+.scene-panel.scene-objects {
+  width: 300px;
+}
+
+.scene-panel.scene-objects {
+  left: 16px;
+  top: 72px;
+}
+
+/* Higher z-index during drag to stay above everything */
+.scene-panel.dragging {
+  z-index: 9999 !important;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  opacity: 0.95;
+}
+
+.scene-panel.scene-tools {
+  max-height: 46vh;
+}
+
+.scene-panel.scene-tools .scene-panel-body {
+  max-height: calc(46vh - 44px);
+}
+
+.customize-panel {
+  width: 320px;
+}
+
+.customize-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.customize-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-md);
+}
+
+.customize-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
+  border-radius: 8px;
+  padding: 6px 8px;
+}
+
+.customize-key {
+  flex: 0 0 120px;
+  font-size: 11px;
+  color: var(--ui-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.customize-input {
+  flex: 1;
+  background-color: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: 6px;
+  padding: 4px 6px;
+  font-size: 11px;
+  font-family: "JetBrains Mono", "SF Mono", "Consolas", "Monaco", monospace;
+}
+
+.customize-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.customize-icon-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.customize-icon-btn:hover {
+  border-color: rgba(227, 138, 90, 0.55);
+  background: rgba(227, 138, 90, 0.08);
+}
+
+.customize-icon-btn svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.customize-icon-btn.ai {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  padding: 4px 6px;
+}
+
+.customize-file {
+  display: none;
+}
+
+.customize-color-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  border-radius: 8px;
+  background: rgba(20, 26, 36, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  font-size: 11px;
+  color: var(--ui-muted);
+}
+
+.customize-color-field input[type="color"] {
+  width: 100%;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.customize-color-text {
+  background-color: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: 6px;
+  padding: 4px 6px;
+  font-size: 11px;
+  font-family: "JetBrains Mono", "SF Mono", "Consolas", "Monaco", monospace;
+}
+
+.customize-help {
+  margin-top: 6px;
+  font-size: 10px;
+  color: var(--ui-muted);
+}
+
+.customize-empty {
+  font-size: 11px;
+  color: var(--ui-muted);
+  padding: 6px 0;
+}
+
+  .batch-ai-label {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .batch-ai-input,
+  .batch-ai-textarea,
+  .batch-ai-select {
+    width: 100%;
+    padding: 6px 8px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(10, 14, 20, 0.85);
+    color: var(--ui-text);
+    font-size: 12px;
+  }
+
+  .batch-ai-textarea {
+    min-height: 70px;
+    resize: vertical;
+  }
+
+  .batch-ai-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .batch-ai-actions {
+    margin-top: 6px;
+  }
+
+  .batch-ai-btn {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 4px 10px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .batch-ai-btn.primary {
+    border-color: rgba(191, 126, 255, 0.6);
+    background: rgba(191, 126, 255, 0.2);
+  }
+
+  .batch-ai-file {
+    display: none;
+  }
+
+  .batch-ai-file-name {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .batch-ai-status {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .batch-ai-dna {
+    margin-top: 8px;
+    padding: 8px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(16, 20, 28, 0.6);
+  }
+
+  .batch-ai-palette {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 6px;
+  }
+
+  .batch-ai-swatch {
+    width: 22px;
+    height: 22px;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .batch-ai-muted {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .batch-ai-asset-list {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .batch-ai-item {
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(12, 16, 22, 0.7);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .batch-ai-item-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .batch-ai-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: var(--ui-text);
+  }
+
+  .batch-ai-item-body {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .batch-ai-thumb {
+    width: 100%;
+    max-height: 140px;
+    object-fit: contain;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(8, 10, 14, 0.6);
+  }
+
+  .batch-ai-thumb.hidden {
+    display: none;
+  }
+
+  .batch-ai-item-status {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .batch-ai-item-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .batch-ai-empty {
+    font-size: 11px;
+    color: var(--ui-muted);
+    padding: 6px 0;
+  }
+
+  .brand-dna-label {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .brand-dna-input,
+  .brand-dna-textarea,
+  .brand-dna-select {
+    width: 100%;
+    padding: 6px 8px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(10, 14, 20, 0.85);
+    color: var(--ui-text);
+    font-size: 12px;
+  }
+
+  .brand-dna-textarea {
+    min-height: 70px;
+    resize: vertical;
+  }
+
+  .brand-dna-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .brand-dna-btn {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 4px 10px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .brand-dna-btn.primary {
+    border-color: rgba(111, 140, 255, 0.6);
+    background: rgba(111, 140, 255, 0.2);
+  }
+
+  .brand-dna-file {
+    display: none;
+  }
+
+  .brand-dna-file-name {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .brand-dna-status {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .brand-dna-meta {
+    margin-top: 8px;
+  }
+
+  .brand-dna-prompt {
+    margin: 6px 0 0;
+    padding: 8px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(12, 16, 22, 0.7);
+    color: var(--ui-text);
+    font-size: 11px;
+    white-space: pre-wrap;
+  }
+
+  .brand-dna-output {
+    margin-top: 8px;
+    padding: 8px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(16, 20, 28, 0.6);
+  }
+
+  .brand-dna-palette {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 6px;
+  }
+
+  .brand-dna-swatch {
+    width: 22px;
+    height: 22px;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+
+  .brand-dna-muted {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .brand-dna-object-list {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .brand-dna-object {
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(12, 16, 22, 0.7);
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .brand-dna-object-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .brand-dna-object-title {
+    font-size: 11px;
+    color: var(--ui-text);
+    word-break: break-all;
+  }
+
+  .brand-dna-object-status {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .brand-dna-empty {
+    font-size: 11px;
+    color: var(--ui-muted);
+    padding: 6px 0;
+  }
+
+  .ai-panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    padding: 8px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(16, 20, 28, 0.6);
+  }
+
+  .ai-modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(6, 10, 16, 0.82);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10080;
+  }
+
+  .ai-modal-card {
+    width: min(760px, 92vw);
+    max-height: 90vh;
+    overflow: auto;
+    background: rgba(16, 20, 28, 0.98);
+    border: 1px solid var(--ui-border);
+    border-radius: 16px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+  }
+
+  .ai-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  .ai-modal-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .ai-modal-title {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--ui-text);
+  }
+
+  .ai-modal-subtitle {
+    font-size: 11px;
+    color: var(--ui-muted);
+    margin-top: 3px;
+  }
+
+  .ai-modal-close {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 4px 12px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .ai-modal-gallery {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 4px 12px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .ai-loading {
+    display: none;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border-radius: 10px;
+    background: linear-gradient(120deg, rgba(88, 163, 255, 0.1), rgba(255, 99, 148, 0.14));
+    border: 1px solid rgba(88, 163, 255, 0.25);
+  }
+
+  .ai-loading.active {
+    display: flex;
+  }
+
+  .ai-loading-ring {
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.15);
+    border-top-color: rgba(88, 163, 255, 0.9);
+    animation: ai-spin 0.9s linear infinite;
+  }
+
+  .ai-loading-bar {
+    flex: 1;
+    height: 8px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, rgba(88, 163, 255, 0.2), rgba(255, 99, 148, 0.7), rgba(88, 163, 255, 0.2));
+    background-size: 200% 100%;
+    animation: ai-bar 1.4s var(--ui-ease) infinite;
+  }
+
+  .ai-loading-text {
+    font-size: 11px;
+    color: var(--ui-text);
+  }
+
+  @keyframes ai-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes ai-bar {
+    0% {
+      background-position: 0% 50%;
+    }
+
+    100% {
+      background-position: 100% 50%;
+    }
+  }
+
+  .ai-label {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .ai-input,
+  .ai-select,
+  .ai-textarea {
+    width: 100%;
+    padding: 6px 8px;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(10, 14, 20, 0.85);
+    color: var(--ui-text);
+    font-size: 12px;
+  }
+
+  .ai-textarea {
+    min-height: 70px;
+    resize: vertical;
+  }
+
+  .ai-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .ai-strength {
+    gap: var(--space-md);
+  }
+
+  .ai-strength input[type="range"] {
+    flex: 1;
+    min-width: 160px;
+  }
+
+  .ai-strength-value {
+    font-size: 11px;
+    color: var(--ui-text);
+    min-width: 20px;
+    text-align: right;
+  }
+
+  .ai-gallery {
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(12, 16, 22, 0.65);
+    padding: 8px;
+  }
+
+  .ai-gallery.hidden {
+    display: none;
+  }
+
+  .ai-gallery-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+    gap: 8px;
+  }
+
+  .ai-gallery-item {
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(8, 10, 14, 0.7);
+    border-radius: 10px;
+    padding: 6px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .ai-gallery-item.active {
+    border-color: rgba(111, 140, 255, 0.6);
+    box-shadow: 0 0 0 1px rgba(111, 140, 255, 0.25);
+  }
+
+  .ai-gallery-thumb {
+    width: 100%;
+    height: 70px;
+    object-fit: contain;
+    border-radius: 6px;
+    background: rgba(6, 8, 12, 0.7);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .ai-gallery-label {
+    font-size: 10px;
+    color: var(--ui-text);
+    word-break: break-all;
+  }
+
+  .ai-gallery-empty {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .ai-btn {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 4px 10px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .ai-file {
+    display: none;
+  }
+
+  .ai-file-name {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .ai-toggles label {
+    font-size: 11px;
+    color: var(--ui-text);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .ai-actions .debug-btn {
+    flex: 1;
+  }
+
+  .ai-status {
+    font-size: 11px;
+    color: var(--ui-muted);
+  }
+
+  .ai-preview {
+    width: 100%;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(8, 10, 14, 0.6);
+    padding: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 140px;
+  }
+
+  .ai-preview img {
+    max-width: 100%;
+    max-height: 220px;
+    object-fit: contain;
+  }
+
+  /* Asset Editor Modal */
+  .asset-editor-modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(6, 10, 16, 0.82);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10060;
+  }
+
+  .asset-editor-card {
+    width: min(680px, 90vw);
+    max-height: 85vh;
+    background: rgba(16, 20, 28, 0.98);
+    border: 1px solid var(--ui-border);
+    border-radius: 16px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .asset-editor-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  .asset-editor-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--ui-text);
+  }
+
+  .asset-editor-subtitle {
+    font-size: 12px;
+    color: var(--ui-muted);
+    margin-top: 4px;
+  }
+
+  .asset-editor-close {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 6px 12px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.15s var(--ui-ease);
+  }
+
+  .asset-editor-close:hover {
+    background: rgba(25, 32, 44, 1);
+  }
+
+  .asset-editor-tabs {
+    display: flex;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  .asset-editor-tab {
+    flex: 1;
+    padding: 12px 16px;
+    text-align: center;
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--ui-muted);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.15s var(--ui-ease);
+  }
+
+  .asset-editor-tab.active {
+    color: var(--ui-text);
+    border-bottom-color: var(--ui-accent);
+  }
+
+  .asset-editor-tab:hover:not(.active) {
+    color: var(--ui-text);
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .asset-editor-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+  }
+
+  .asset-editor-tab-panel {
+    display: none;
+  }
+
+  .asset-editor-tab-panel.active {
+    display: block;
+  }
+
+  .asset-editor-hint {
+    font-size: 12px;
+    color: var(--ui-muted);
+    text-align: center;
+    padding: 20px;
+    line-height: 1.5;
+  }
+
+  .asset-editor-ai-controls {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    padding: 20px;
+  }
+
+  .asset-editor-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  .asset-preview-modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(8, 10, 14, 0.72);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10050;
+  }
+
+  .asset-preview-card {
+    width: min(720px, 92vw);
+    max-height: 82vh;
+    background: rgba(16, 20, 28, 0.98);
+    border: 1px solid var(--ui-border);
+    border-radius: 14px;
+    box-shadow: var(--ui-shadow);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .asset-preview-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 14px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    color: var(--ui-text);
+  }
+
+  .asset-preview-title {
+    font-size: 12px;
+    font-weight: 600;
+    word-break: break-all;
+  }
+
+  .asset-preview-close {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 4px 10px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .asset-preview-meta {
+    padding: 0 14px 10px;
+    color: var(--ui-muted);
+    font-size: 11px;
+    word-break: break-all;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  .asset-preview-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .asset-preview-change {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 4px 10px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .asset-preview-ai {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 4px 10px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .asset-preview-body {
+    padding: 12px;
+    overflow: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .asset-preview-ai-output {
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 10px 12px 14px;
+  }
+
+  .asset-preview-ai-output.hidden {
+    display: none;
+  }
+
+  .asset-preview-ai-label {
+    font-size: 11px;
+    color: var(--ui-muted);
+    margin-bottom: 6px;
+  }
+
+  .asset-preview-ai-image {
+    width: 100%;
+    max-height: 200px;
+    object-fit: contain;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(8, 10, 14, 0.6);
+  }
+
+  .asset-preview-body img {
+    max-width: 100%;
+    max-height: 60vh;
+    object-fit: contain;
+  }
+
+  .asset-preview-body audio {
+    width: 100%;
+  }
+
+  .asset-preview-body pre {
+    width: 100%;
+    white-space: pre-wrap;
+    color: var(--ui-text);
+    font-family: "JetBrains Mono", "SF Mono", "Consolas", "Monaco", monospace;
+    font-size: 12px;
+  }
+
+  .asset-crop-modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(8, 10, 14, 0.78);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10060;
+  }
+
+  .asset-crop-card {
+    width: min(860px, 96vw);
+    background: rgba(16, 20, 28, 0.98);
+    border: 1px solid var(--ui-border);
+    border-radius: 14px;
+    box-shadow: var(--ui-shadow);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .asset-crop-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    color: var(--ui-text);
+  }
+
+  .asset-crop-title {
+    font-size: 13px;
+    font-weight: 600;
+  }
+
+  .asset-crop-subtitle {
+    font-size: 11px;
+    color: var(--ui-muted);
+    margin-top: 2px;
+  }
+
+  .asset-crop-close {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 4px 10px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .asset-crop-body {
+    padding: 16px;
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+  }
+
+  .asset-crop-column {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    min-width: 0;
+  }
+
+  .asset-crop-label {
+    font-size: 11px;
+    color: var(--ui-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .asset-crop-canvas {
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(8, 10, 14, 0.55);
+    cursor: grab;
+  }
+
+  .asset-crop-preview {
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(8, 10, 14, 0.55);
+  }
+
+  .asset-crop-canvas:active {
+    cursor: grabbing;
+  }
+
+  .asset-crop-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 16px 12px;
+    color: var(--ui-text);
+    font-size: 12px;
+  }
+
+  .asset-crop-controls label {
+    min-width: 42px;
+  }
+
+  .asset-crop-zoom {
+    flex: 1;
+  }
+
+  .asset-crop-zoom-value {
+    min-width: 50px;
+    text-align: right;
+    color: var(--ui-muted);
+  }
+
+  .asset-crop-reset {
+    border: 1px solid var(--ui-border);
+    background: rgba(25, 32, 44, 0.8);
+    color: var(--ui-text);
+    border-radius: 8px;
+    padding: 4px 10px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+
+  .asset-crop-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-md);
+    padding: 0 16px 16px;
+  }
+
+  .asset-crop-actions button {
+    border-radius: 10px;
+    padding: 6px 14px;
+    font-size: 12px;
+    border: 1px solid var(--ui-border);
+    background: rgba(28, 36, 50, 0.85);
+    color: var(--ui-text);
+    cursor: pointer;
+  }
+
+  .asset-crop-apply {
+    background: var(--ui-accent);
+    border-color: transparent;
+    color: #10151f;
+    font-weight: 600;
+  }
+
+  @media (max-width: 720px) {
+    .customize-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .scene-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 14px;
+    background-color: rgba(24, 28, 38, 0.95);
+    color: var(--ui-text);
+    font-size: 12px;
+    user-select: none;
+    cursor: move;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  }
+
+  .scene-panel-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .scene-panel-action {
+    border: 1px solid var(--ui-border);
+    border-radius: 6px;
+    background: #1f2633;
+    color: var(--ui-muted);
+    font-size: 11px;
+    padding: 4px 8px;
+    cursor: pointer;
+  }
+
+  .scene-panel-action:hover {
+    border-color: rgba(255, 159, 67, 0.6);
+    color: var(--ui-text);
+  }
+
+  .scene-panel-toggle {
+    border: none;
+    background: transparent;
+    color: var(--ui-muted);
+    font-size: 14px;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 6px;
+    transition: all var(--ui-duration-fast) var(--ui-ease);
+  }
+
+  /* Terracotta hover for close button */
+  .scene-panel-toggle:hover {
+    background: rgba(227, 138, 90, 0.15);
+    color: var(--ui-terracotta);
+  }
+
+  .panel-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .panel-pill {
+    padding: 2px 8px;
+    border-radius: 999px;
+    background: rgba(61, 214, 198, 0.12);
+    color: var(--ui-accent);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+  }
+
+  .panel-accent-blue .panel-pill {
+    background: rgba(111, 140, 255, 0.14);
+    color: var(--ui-accent-3);
+  }
+
+  .panel-accent-amber .panel-pill {
+    background: rgba(255, 159, 67, 0.16);
+    color: var(--ui-accent-2);
+  }
+
+  .panel-accent-violet .panel-pill {
+    background: rgba(191, 126, 255, 0.18);
+    color: #d6b7ff;
+  }
+
+  .panel-title-text {
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: 0.4px;
+  }
+
+  .panel-accent-teal {
+    border-color: rgba(61, 214, 198, 0.35);
+  }
+
+  .panel-accent-blue {
+    border-color: rgba(111, 140, 255, 0.35);
+  }
+
+  .panel-accent-amber {
+    border-color: rgba(255, 159, 67, 0.4);
+  }
+
+  .panel-accent-violet {
+    border-color: rgba(191, 126, 255, 0.35);
+  }
+
+  .scene-panel-body {
+    padding: 12px 14px 16px;
+    overflow-y: auto;
+    max-height: calc(78vh - 44px);
+  }
+
+  .scene-panel.collapsed .scene-panel-body {
+    display: none;
+  }
+
+
+/* ========== 04-device-frame.css ========== */
+/* 04 Device Frame */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Device Frame Styling - The "Phone" Look */
+.device-frame {
+  box-shadow: 0 0 0 1px rgba(30, 30, 30, 0.08), 0 8px 20px rgba(30, 30, 30, 0.15);
+  border-radius: 14px;
+  background-color: #000;
+  transition: width var(--ui-duration-normal) var(--ui-ease), height var(--ui-duration-normal) var(--ui-ease);
+  overflow: hidden;
+  position: relative;
+}
+
+/* Frame Wrapper */
+.frame-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform-origin: center center;
+  transition: transform var(--ui-duration-normal) cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  filter: drop-shadow(0 6px 16px rgba(30, 30, 30, 0.12));
+}
+
+/* ========== 05-console.css ========== */
+/* 05 Console */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Hide less important buttons on very small screens */
+@media (max-width: 480px) {
+
+  #refresh-btn,
+  #debug-toggle,
+  #console-toggle {
+    display: none;
+  }
+}
+
+/* Console Panel - Bottom Drawer Style */
+.console-panel {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 200px;
+  background: var(--ui-surface);
+  border-top: 1px solid var(--ui-border);
+  display: flex;
+  flex-direction: column;
+  transition: opacity var(--ui-duration-normal) var(--ui-ease), visibility var(--ui-duration-normal) var(--ui-ease);
+  z-index: 100;
+}
+
+.console-panel.closed {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.console-msg {
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 12px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.console-msg.type-error {
+  color: var(--ui-danger);
+  background: rgba(217, 117, 88, 0.1);
+}
+
+.console-msg.type-warn {
+  color: var(--ui-accent-2);
+}
+
+/* Console Toggle */
+.console-toggle {
+  position: relative;
+}
+
+.console-badge {
+  background-color: var(--ui-danger);
+  color: var(--ui-surface);
+  font-size: 10px;
+  padding: 2px 4px;
+  border-radius: 8px;
+  margin-left: 4px;
+  display: none;
+}
+
+.console-badge.has-errors {
+  display: inline-block;
+}
+
+/* Console Panel Elements */
+.console-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--ui-border);
+  background-color: var(--ui-bg-2);
+}
+
+.console-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--ui-text);
+}
+
+.console-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.console-action-btn {
+  background-color: transparent;
+  color: var(--ui-muted);
+  border: 1px solid var(--ui-border);
+  border-radius: 3px;
+  padding: 4px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: background var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
+}
+
+.console-action-btn:hover {
+  background-color: var(--ui-bg);
+  color: var(--ui-text);
+}
+
+.console-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.console-msg {
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 12px;
+  padding: 4px 12px;
+  border-bottom: 1px solid var(--ui-border);
+  word-wrap: break-word;
+}
+
+.console-msg .time {
+  color: var(--ui-muted);
+  margin-right: 8px;
+  font-size: 11px;
+}
+
+.console-msg.type-log {
+  color: var(--ui-text);
+}
+
+.console-msg.type-info {
+  color: var(--ui-accent);
+}
+
+.console-msg.type-error {
+  color: var(--ui-danger);
+  background: rgba(217, 117, 88, 0.1);
+}
+
+.console-msg.type-warn {
+  color: var(--ui-accent-2);
+  background: rgba(201, 162, 140, 0.1);
+}
+
+/* ========== 06-debug-overlay.css ========== */
+/* 06 Debug Overlay */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Debug Workbench */
+.debug-workbench {
+  position: absolute;
+  width: 350px;
+  height: 600px;
+  min-width: 250px;
+  min-height: 200px;
+  right: 16px;
+  top: 72px;
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: 14px;
+  box-shadow: var(--ui-shadow);
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 1000;
+}
+
+.workbench-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-sm) var(--space-md);
+  background-color: var(--ui-bg-2);
+  border-bottom: 1px solid var(--ui-border);
+  cursor: move;
+  flex-shrink: 0;
+}
+
+.workbench-tabs {
+  display: flex;
+  background: var(--ui-bg);
+  padding: var(--space-xs);
+  gap: var(--space-xs);
+  border-bottom: 1px solid var(--ui-border);
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+
+.workbench-tab {
+  flex: 1;
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--ui-muted);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+  text-align: center;
+}
+
+.workbench-tab:hover {
+  background: var(--ui-surface-2);
+  color: var(--ui-text);
+}
+
+/* Terracotta Active Tab - Main Site Style */
+.workbench-tab.active {
+  background: var(--ui-terracotta);
+  color: var(--ui-text-white);
+  font-weight: var(--font-weight-semibold);
+}
+
+.workbench-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-md);
+}
+
+.workbench-tab-panel {
+  display: none;
+}
+
+.workbench-tab-panel.active {
+  display: block;
+}
+
+.workbench-resize-handle {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 16px;
+  height: 16px;
+  cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, var(--ui-border) 50%, var(--ui-border) 75%, transparent 75%, transparent 85%, var(--ui-border) 85%);
+  z-index: 10;
+}
+
+
+/* ========== 07-panels.css ========== */
+/* 07 Panels */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Text preview snippet */
+.scene-object-text-preview {
+  font-size: 10px;
+  color: var(--ui-muted);
+  font-style: italic;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 4px;
+}
+
+.override-status {
+  margin-bottom: 12px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.override-status[data-state="diff"] {
+  color: #ffd36b;
+  border-color: rgba(255, 211, 107, 0.4);
+}
+
+.override-status[data-state="match"] {
+  color: #9fe7c5;
+  border-color: rgba(159, 231, 197, 0.4);
+}
+
+.override-status[data-state="saved"] {
+  color: #9fc4ff;
+  border-color: rgba(159, 196, 255, 0.35);
+}
+
+.debug-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #444;
+  background-color: #252525;
+  border-radius: 8px 8px 0 0;
+  cursor: move;
+  user-select: none;
+}
+
+.debug-tabs {
+  display: flex;
+  gap: 6px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #333;
+  background-color: #1f1f1f;
+}
+
+.debug-tab {
+  flex: 1;
+  border: 1px solid #444;
+  border-radius: 6px;
+  background-color: #262626;
+  color: #bfc3c7;
+  font-size: 12px;
+  padding: 6px 10px;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
+
+.debug-tab.active {
+  background-color: #323232;
+  color: var(--ui-text);
+  border-color: #ffb43b;
+  box-shadow: inset 0 0 0 1px rgba(255, 180, 59, 0.35);
+}
+
+.debug-hint {
+  font-size: 11px;
+  color: #9aa0a6;
+  margin-bottom: 10px;
+}
+
+.debug-tab-panel {
+  display: none;
+}
+
+.debug-tab-panel.active {
+  display: block;
+}
+
+.debug-collapsible {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  background-color: rgba(21, 26, 36, 0.85);
+  overflow: hidden;
+  margin-bottom: 12px;
+}
+
+.debug-collapsible-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  background-color: rgba(24, 30, 42, 0.9);
+  border: none;
+  color: var(--ui-text);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.debug-collapsible-body {
+  padding: 10px 12px;
+}
+
+.debug-collapsible-icon {
+  transition: transform var(--ui-duration-fast) var(--ui-ease);
+}
+
+.debug-collapsible.collapsed .debug-collapsible-body {
+  display: none;
+}
+
+.debug-collapsible.collapsed .debug-collapsible-icon {
+  transform: rotate(-90deg);
+}
+
+.debug-nudge.hidden {
+  display: none;
+}
+
+.debug-arrow-pad {
+  display: grid;
+  grid-template-columns: repeat(3, 36px);
+  grid-auto-rows: 32px;
+  gap: 6px;
+  justify-content: center;
+  margin-top: 8px;
+}
+
+.debug-arrow-btn {
+  border: 1px solid #444;
+  border-radius: 6px;
+  background-color: #2b2b2b;
+  color: #e7e7e7;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.15s var(--ui-ease);
+}
+
+.debug-arrow-btn:hover {
+  border-color: #ffb43b;
+  color: var(--ui-text);
+}
+
+.debug-arrow-btn:active {
+  transform: translateY(1px);
+}
+
+.debug-arrow-btn[data-nudge="up"] {
+  grid-column: 2;
+}
+
+.debug-arrow-btn[data-nudge="left"] {
+  grid-column: 1;
+}
+
+.debug-arrow-btn[data-nudge="down"] {
+  grid-column: 2;
+}
+
+.debug-arrow-btn[data-nudge="right"] {
+  grid-column: 3;
+}
+
+.debug-info-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 6px;
+  background-color: rgba(25, 30, 40, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.debug-info-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 11px;
+}
+
+.debug-info-label {
+  color: #9aa0a6;
+}
+
+.debug-info-value {
+  color: #f1f3f5;
+  font-weight: 600;
+}
+
+.debug-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--ui-text);
+}
+
+.debug-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.debug-action-btn {
+  background-color: transparent;
+  color: #ccc;
+  border: 1px solid #555;
+  border-radius: 3px;
+  padding: 4px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
+
+/* Brand Vision Mapper */
+.brand-vision-panel .inspector-row {
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.brand-vision-panel .vision-flat-preview img {
+  max-width: 140px;
+  max-height: 140px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.brand-vision-panel .vision-raw-block {
+  margin-bottom: 12px;
+}
+
+.brand-vision-panel .vision-raw-textarea {
+  height: 120px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.brand-vision-panel .vision-mapping-item {
+  padding: 10px;
+  border: 1px solid var(--ui-border);
+  border-radius: 12px;
+  margin-bottom: 10px;
+  background: var(--ui-surface-2);
+}
+
+.brand-vision-panel .vision-mapping-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+}
+
+.brand-vision-panel .vision-mapping-object {
+  font-weight: 700;
+  font-size: 12px;
+  color: var(--ui-text);
+}
+
+.brand-vision-panel .vision-mapping-select {
+  max-width: 140px;
+}
+
+.brand-vision-panel .vision-mapping-prompt {
+  height: 72px;
+}
+
+.brand-vision-panel .vision-mapping-row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  margin-top: 10px;
+}
+
+.brand-vision-panel .vision-mapping-current {
+  flex: 1;
+  min-width: 0;
+}
+
+.brand-vision-panel .vision-mapping-preview {
+  width: 110px;
+  flex: 0 0 110px;
+}
+
+.brand-vision-panel .vision-mapping-preview img {
+  width: 110px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.brand-vision-panel .vision-mapping-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.brand-vision-panel .vision-mapping-status {
+  margin-left: auto;
+  opacity: 0.9;
+}
+
+.debug-action-btn:hover {
+  background-color: #444;
+  color: var(--ui-text);
+}
+
+.debug-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+.debug-section {
+  margin-bottom: 20px;
+}
+
+.panel-section {
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.panel-section:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.panel-section-title {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--ui-muted);
+  margin-bottom: 8px;
+}
+
+.field-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+@media (max-width: 520px) {
+  .field-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.debug-section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ui-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding-bottom: 4px;
+}
+
+.debug-field {
+  margin-bottom: 12px;
+}
+
+.debug-field label {
+  display: block;
+  font-size: 11px;
+  color: #aaa;
+  margin-bottom: 4px;
+  font-weight: 500;
+}
+
+.debug-field input,
+.debug-field select {
+  width: 100%;
+  background-color: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+  font-family: "JetBrains Mono", "SF Mono", "Consolas", "Monaco", monospace;
+  transition: border-color var(--ui-duration-fast) var(--ui-ease);
+}
+
+.debug-field input:focus,
+.debug-field select:focus {
+  outline: none;
+  border-color: var(--ui-accent-3);
+  box-shadow: 0 0 0 2px rgba(111, 140, 255, 0.2);
+}
+
+.debug-field input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 6px;
+  background: #555;
+  border-radius: 3px;
+  outline: none;
+}
+
+.debug-field input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--ui-accent-3);
+  cursor: pointer;
+}
+
+.debug-field input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--ui-accent-3);
+  cursor: pointer;
+  border: none;
+}
+
+.debug-field input[type="checkbox"] {
+  width: auto;
+  margin-right: 8px;
+}
+
+.debug-field.checkbox-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.debug-field.checkbox-field label {
+  margin-bottom: 0;
+  flex: 1;
+}
+
+.debug-value-display {
+  display: inline-block;
+  margin-left: 8px;
+  font-size: 11px;
+  color: var(--ui-muted);
+  font-family: "JetBrains Mono", "SF Mono", "Consolas", "Monaco", monospace;
+}
+
+.debug-btn-group {
+  display: flex;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.debug-btn {
+  flex: 1;
+  background-color: #444;
+  color: var(--ui-text);
+  border: 1px solid #666;
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
+
+.debug-btn:hover {
+  background-color: #555;
+  border-color: var(--ui-muted);
+}
+
+.debug-btn.primary {
+  background-color: #2a5bd7;
+  border-color: #2a5bd7;
+}
+
+.debug-btn.primary:hover {
+  background-color: #2147a7;
+  border-color: #2147a7;
+}
+
+.debug-btn.danger {
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
+.debug-btn.danger:hover {
+  background-color: #c82333;
+  border-color: #c82333;
+}
+
+.debug-btn.secondary {
+  background-color: rgba(61, 214, 198, 0.1);
+  border-color: rgba(61, 214, 198, 0.3);
+  color: var(--ui-accent);
+}
+
+.debug-btn.secondary:hover {
+  background-color: rgba(61, 214, 198, 0.2);
+  border-color: rgba(61, 214, 198, 0.4);
+}
+
+/* -------------------------------------------------------------------------- */
+/* Workbench embedded panels                                                   */
+/* -------------------------------------------------------------------------- */
+/*
+  Panels (like CustomizeSettingsPanel) are rendered inside the Workbench tab panels.
+  The old override stripped ALL styling (border/background/shadow), which made the
+  embedded panels look unstyled / invisible.
+
+  Keep the key change (static positioning + full width), but preserve panel visuals.
+*/
+.workbench-content .scene-panel {
+  position: static;
+  width: 100% !important;
+  max-height: none !important;
+
+  /* Preserve “card” styling so embedded panels don't look unstyled */
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: 12px;
+  box-shadow: var(--ui-shadow);
+  overflow: hidden;
+}
+
+.workbench-content .scene-panel-header {
+  display: none;
+
+/* Hide individual panel headers */
+}
+
+.workbench-content .scene-panel-body {
+  max-height: none;
+  padding: 12px;
+}
+
+/* Resize handles don't make sense inside the workbench layout */
+.workbench-content .scene-panel .panel-resize-handle {
+  display: none;
+}
+
+/* Library Panel */
+.library-panel {
+  border-color: rgba(61, 214, 198, 0.35);
+}
+
+.library-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.library-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+  background: rgba(25, 30, 40, 0.8);
+}
+
+.library-item:hover {
+  border-color: rgba(61, 214, 198, 0.5);
+  background: rgba(61, 214, 198, 0.1);
+}
+
+.library-item.selected {
+  border-color: rgba(61, 214, 198, 0.8);
+  background: rgba(61, 214, 198, 0.15);
+  box-shadow: 0 0 0 1px rgba(61, 214, 198, 0.4);
+}
+
+.library-thumbnail {
+  width: 60px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.library-label {
+  font-size: 11px;
+  color: var(--ui-muted);
+  text-align: center;
+  word-break: break-all;
+}
+
+.library-selected {
+  font-size: 12px;
+  color: var(--ui-text);
+  margin: 12px 0;
+  padding: 8px;
+  background: rgba(25, 30, 40, 0.8);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.library-empty {
+  font-size: 11px;
+  color: var(--ui-muted);
+  padding: 20px;
+  text-align: center;
+  grid-column: 1 / -1;
+}
+
+/* ========================================
+   Library Panel - Slot-Based UI
+   ======================================== */
+
+.library-panel {
+  width: 340px;
+}
+
+.library-subtitle {
+  font-size: 11px;
+  color: var(--ui-muted);
+  margin-bottom: 12px;
+  padding: 0 4px;
+}
+
+.library-slots {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.library-category {
+  margin-bottom: 12px;
+}
+
+.library-category-header {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  color: var(--ui-accent);
+  padding: 6px 8px;
+  background: rgba(61, 214, 198, 0.08);
+  border-radius: 6px;
+  margin-bottom: 8px;
+}
+
+.library-category-slots {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+/* Panel accent color */
+.panel-accent-purple {
+  border-left: 3px solid #a855f7;
+}
+
+/* ========================================
+   Inspector Panel Styles
+   ======================================== */
+
+.inspector-panel {
+  width: 340px;
+  max-width: 90vw;
+}
+
+.inspector-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.inspector-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--ui-muted);
+}
+
+.inspector-empty-icon {
+  font-size: 48px;
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+
+.inspector-empty-text {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.inspector-header {
+  padding: 12px;
+  background: rgba(24, 30, 42, 0.9);
+  border-radius: 8px;
+  border: 1px solid rgba(191, 126, 255, 0.2);
+}
+
+.inspector-object-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--ui-text);
+  margin-bottom: 4px;
+}
+
+.inspector-object-category {
+  font-size: 11px;
+  color: var(--ui-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.inspector-section {
+  background: rgba(21, 26, 36, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.inspector-section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: rgba(24, 30, 42, 0.9);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  cursor: pointer;
+  user-select: none;
+}
+
+.inspector-section-icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.inspector-section-title {
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--ui-text);
+}
+
+.inspector-section-body {
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* AI Tools Panel - Unified Suite */
+.ai-tools-panel {
+  min-width: 420px;
+}
+
+.ai-tabs {
+  display: flex;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 4px;
+  margin-bottom: 16px;
+  gap: 4px;
+}
+
+.ai-tab-btn {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: #a0a0a0;
+  padding: 8px;
+  border-radius: 6px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.ai-tab-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.ai-tab-btn.active {
+  background: #6d5dfc;
+  color: white;
+  box-shadow: 0 4px 12px rgba(109, 93, 252, 0.3);
+}
+
+.ai-tab-content {
+  display: none;
+}
+
+.ai-tab-content.active {
+  display: block;
+}
+
+.ai-palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.ai-swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: help;
+}
+
+.ai-asset-list,
+.ai-object-list {
+  margin-top: 12px;
+  max-height: 400px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.ai-batch-item,
+.ai-obj-item {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  padding: 10px;
+  margin-bottom: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.ai-item-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ai-item-label,
+.ai-obj-title {
+  flex: 1;
+  font-weight: 500;
+  color: #eee;
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ai-item-status,
+.ai-obj-status {
+  font-size: 11px;
+  color: var(--ui-muted);
+  background: rgba(0, 0, 0, 0.3);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+/* AI Creative Suite - Premium Styles */
+.ai-tools-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.ai-tabs {
+  display: flex;
+  gap: 2px;
+  background: rgba(0, 0, 0, 0.3);
+  padding: 4px;
+  border-radius: 12px;
+  margin-bottom: 20px;
+}
+
+.ai-tab-btn {
+  flex: 1;
+  padding: 10px 14px;
+  border: none;
+  background: transparent;
+  color: var(--ui-muted);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: all var(--ui-duration-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.ai-tab-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--ui-text);
+}
+
+.ai-tab-btn.active {
+  background: #6d5dfc;
+  color: var(--ui-text);
+  box-shadow: 0 4px 12px rgba(109, 93, 252, 0.3);
+}
+
+.ai-tab-content {
+  display: none;
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.ai-tab-content.active {
+  display: block;
+}
+
+.panel-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.panel-section-title {
+  font-size: 11px;
+  font-weight: 800;
+  text-transform: uppercase;
+  color: #6d5dfc;
+  letter-spacing: 0.05em;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.inspector-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: #aaa;
+  margin-bottom: 8px;
+}
+
+.inspector-input,
+.inspector-textarea {
+  width: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: var(--ui-text);
+  font-family: inherit;
+  font-size: 13px;
+  margin-bottom: 16px;
+  transition: border-color var(--ui-duration-fast);
+}
+
+.inspector-input:focus,
+.inspector-textarea:focus {
+  outline: none;
+  border-color: #6d5dfc;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.inspector-textarea {
+  min-height: 80px;
+  resize: vertical;
+}
+
+.ai-swatch {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: transform var(--ui-duration-fast);
+}
+
+.ai-batch-item,
+.ai-obj-item {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 10px 12px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  margin-bottom: 8px;
+}
+
+.ai-item-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ai-item-status {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--ui-muted);
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+/* Config Persistence Panel - Enhanced UI */
+.config-persistence-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 16px;
+  padding: 16px;
+  color: var(--ui-text);
+  box-sizing: border-box;
+}
+
+.persistence-status-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border-radius: 10px;
+  background: rgba(30, 35, 45, 0.4);
+  border: 1px solid var(--ui-border);
+}
+
+.persistence-status-bar.has-changes {
+  background: rgba(255, 159, 67, 0.1);
+  border-color: rgba(255, 159, 67, 0.3);
+}
+
+.persistence-status-bar.no-changes {
+  background: rgba(61, 214, 198, 0.05);
+  border-color: rgba(61, 214, 198, 0.2);
+}
+
+.status-box {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.status-badge {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  background: var(--ui-accent-2);
+  color: #000;
+}
+
+.status-badge.success {
+  background: var(--ui-accent);
+}
+
+.status-text {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.status-action-hint {
+  font-size: 11px;
+  color: var(--ui-muted);
+  margin-top: 2px;
+}
+
+.persistence-main-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.persistence-btn.primary-action {
+  flex: 1;
+  padding: 12px;
+  background: linear-gradient(135deg, var(--ui-accent), #2eb0a3);
+  color: #000;
+  border: none;
+  border-radius: 10px;
+  font-weight: 800;
+  font-size: 11px;
+  letter-spacing: 0.03em;
+  cursor: pointer;
+  box-shadow: 0 4px 15px rgba(61, 214, 198, 0.25);
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
+
+.persistence-btn.primary-action:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(61, 214, 198, 0.35);
+}
+
+.persistence-btn.primary-action:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.persistence-btn.primary-action:disabled {
+  background: var(--ui-border);
+  color: var(--ui-muted);
+  box-shadow: none;
+  cursor: not-allowed;
+  filter: grayscale(1);
+  opacity: 0.5;
+}
+
+
+/* ========== 08-inspector.css ========== */
+/* 08 Inspector */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Config Editor */
+.config-editor {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  padding: 12px;
+  margin-top: 8px;
+  background-color: rgba(25, 30, 40, 0.85);
+}
+
+.debug-select {
+  width: 100%;
+  background-color: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 11px;
+}
+
+.debug-select:focus {
+  outline: none;
+  border-color: var(--ui-accent-3);
+  box-shadow: 0 0 0 2px rgba(111, 140, 255, 0.2);
+}
+
+.debug-select option {
+  background-color: #333;
+  color: var(--ui-text);
+}
+
+/* Simple subsection with title and inline row of children */
+.inspector-subsection {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.inspector-subsection-title {
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--ui-muted);
+  text-transform: uppercase;
+  min-width: 50px;
+}
+
+.inspector-subsection-content {
+  display: flex;
+  gap: 4px;
+  flex: 1;
+}
+
+.inspector-footer {
+  margin-top: 20px;
+  padding: 16px 12px;
+  border-top: 1px solid var(--ui-border);
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.inspector-add-component {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.inspector-component-select {
+  flex: 1;
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  color: var(--ui-text);
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 12px;
+  outline: none;
+}
+
+.inspector-component-select:focus {
+  border-color: var(--ui-accent-3);
+}
+
+.inspector-property {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+}
+
+.inspector-property-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--ui-muted);
+  text-transform: capitalize;
+  width: 80px;
+  flex-shrink: 0;
+}
+
+.inspector-input {
+  flex: 1;
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: 4px;
+  padding: 4px 6px;
+  font-size: 11px;
+  font-family: 'JetBrains Mono', 'SF Mono', monospace;
+  transition: border-color var(--ui-duration-fast) var(--ui-ease);
+}
+
+.inspector-input:focus {
+  outline: none;
+  border-color: rgba(227, 138, 90, 0.7);
+  box-shadow: 0 0 0 2px rgba(227, 138, 90, 0.18);
+}
+
+.inspector-checkbox {
+  margin-right: 8px;
+}
+
+.inspector-property-boolean label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--ui-text);
+}
+
+.inspector-image-preview {
+  width: 100%;
+  max-height: 120px;
+  border-radius: 6px;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface-2);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.inspector-image-preview img {
+  max-width: 100%;
+  max-height: 120px;
+  object-fit: contain;
+}
+
+.inspector-image-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.inspector-btn {
+  flex: 1;
+  background: var(--ui-bg-2);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: 6px;
+  padding: 6px 10px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
+
+.inspector-btn:hover {
+  border-color: rgba(227, 138, 90, 0.55);
+  background: rgba(227, 138, 90, 0.08);
+}
+
+.inspector-btn.primary {
+  background: var(--ui-terracotta);
+  border-color: transparent;
+  color: var(--ui-text-white);
+  font-weight: 700;
+}
+
+.inspector-btn.primary:hover {
+  background: var(--ui-terracotta-hover);
+}
+
+.inspector-btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  background: rgba(212, 207, 200, 0.55);
+}
+
+.inspector-btn-sm {
+  padding: 5px 8px;
+  font-size: 10px;
+}
+
+.inspector-color-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.inspector-color-picker {
+  width: 40px;
+  height: 32px;
+  border: 1px solid var(--ui-border);
+  border-radius: 6px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.inspector-color-text {
+  flex: 1;
+}
+
+.inspector-object-header {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--ui-text);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.inspector-object-body {
+  padding-left: 12px;
+  border-left: 2px solid rgba(191, 126, 255, 0.2);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Collapsible Sections */
+.inspector-section-header {
+  cursor: pointer;
+  user-select: none;
+}
+
+.inspector-section-arrow {
+  display: inline-block;
+  margin-right: 6px;
+  transition: transform var(--ui-duration-fast) var(--ui-ease);
+  font-size: 10px;
+  color: var(--ui-muted);
+}
+
+.inspector-section.collapsed .inspector-section-arrow {
+  transform: rotate(-90deg);
+}
+
+.inspector-section.collapsed .inspector-section-body {
+  display: none;
+}
+
+/* Array Properties */
+.inspector-array-list {
+  padding: 8px 10px;
+  background: rgba(8, 10, 14, 0.4);
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.inspector-array-item {
+  font-size: 11px;
+  color: var(--ui-text);
+  padding: 4px 0;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.inspector-array-empty {
+  font-size: 11px;
+  color: var(--ui-muted);
+  font-style: italic;
+  padding: 6px 10px;
+}
+
+/* Inspector Input Group & Action Buttons */
+.inspector-input-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+}
+
+.inspector-input-group .inspector-input {
+  flex: 1;
+  margin-bottom: 0 !important;
+}
+
+.inspector-input-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.inspector-btn-icon {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--ui-text);
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all var(--ui-duration-fast);
+  padding: 0;
+}
+
+.inspector-btn-icon:hover {
+  background: rgba(109, 93, 252, 0.2);
+  border-color: #6d5dfc;
+  transform: translateY(-1px);
+}
+
+.inspector-property-actions-row {
+  margin-top: 6px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ai-simple-btn {
+  width: 100%;
+  justify-content: center;
+  gap: 6px;
+  font-weight: 600;
+  background: linear-gradient(135deg, rgba(82, 196, 26, 0.2), rgba(111, 140, 255, 0.2)) !important;
+  border: 1px solid rgba(82, 196, 26, 0.4) !important;
+}
+
+.ai-simple-btn:hover {
+  background: linear-gradient(135deg, rgba(82, 196, 26, 0.3), rgba(111, 140, 255, 0.3)) !important;
+  border-color: rgba(82, 196, 26, 0.6) !important;
+}
+
+
+/* ========== 09-library.css ========== */
+/* 09 Library */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Library Category Tabs */
+.library-category-tabs {
+  display: flex;
+  background: var(--ui-bg-2);
+  padding: 4px;
+  gap: 2px;
+  border-bottom: 1px solid var(--ui-border);
+  margin-bottom: 12px;
+}
+
+.library-category-tab {
+  flex: 1;
+  padding: 6px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--ui-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  text-align: center;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
+
+.library-category-tab:hover {
+  background: rgba(227, 138, 90, 0.08);
+  color: var(--ui-text);
+}
+
+.library-category-tab.active {
+  background: rgba(227, 138, 90, 0.12);
+  color: var(--ui-accent);
+  border-color: rgba(227, 138, 90, 0.35);
+}
+
+/* Individual Slot */
+.library-slot {
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: 10px;
+  overflow: hidden;
+  transition: all var(--ui-duration-fast) var(--ui-ease);
+}
+
+.library-slot:hover {
+  border-color: rgba(227, 138, 90, 0.5);
+}
+
+.library-slot.expanded {
+  border-color: rgba(227, 138, 90, 0.55);
+  background: var(--ui-surface-2);
+}
+
+/* Library Items Grid */
+.slot-library {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 8px;
+  padding: 10px;
+  background: var(--ui-bg);
+  border-top: 1px solid var(--ui-border);
+}
+
+.library-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 6px;
+  border-radius: 8px;
+  border: 1px solid rgba(212, 207, 200, 0.8);
+  background: var(--ui-surface);
+  cursor: pointer;
+  transition: all 0.15s var(--ui-ease);
+}
+
+.library-item:hover {
+  background: rgba(227, 138, 90, 0.08);
+  border-color: rgba(227, 138, 90, 0.45);
+}
+
+.library-item:active {
+  transform: scale(0.96);
+}
+
+.library-thumbnail {
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 6px;
+  border: 1px solid var(--ui-border);
+  background: var(--ui-bg-2);
+}
+
+.library-label {
+  font-size: 9px;
+  color: var(--ui-muted);
+  text-align: center;
+  word-break: break-word;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.library-info {
+  font-size: 11px;
+  color: var(--ui-muted);
+  padding: 16px;
+  text-align: center;
+}
+
+
+/* ========== 10-ai-tools.css ========== */
+/* 10 Ai Tools */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Game Container */
+.game-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+/* Enhanced Hierarchy Visual Elements */
+.scene-object-icon {
+  font-size: 16px;
+  line-height: 1;
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+
+.scene-object-thumbnail {
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(8, 10, 14, 0.6);
+  flex-shrink: 0;
+  margin-right: 6px;
+}
+
+.scene-object-color-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  flex-shrink: 0;
+  margin-left: 6px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+}
+
+.scene-object-meta {
+  font-size: 9px;
+  color: var(--ui-muted);
+  opacity: 0.7;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  margin-left: auto;
+  white-space: nowrap;
+  padding-left: 8px;
+}
+
+.scene-object-item:hover .scene-object-meta {
+  opacity: 1;
+}
+
+.scene-edit-selected {
+  font-size: 12px;
+  color: var(--ui-muted);
+  margin-bottom: 10px;
+}
+
+/* Slot Header */
+.slot-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  cursor: pointer;
+  transition: background 0.15s var(--ui-ease);
+}
+
+.slot-header:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.slot-current {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.slot-thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.slot-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.slot-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ui-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.slot-asset {
+  font-size: 10px;
+  color: var(--ui-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.slot-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.slot-reset {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--ui-muted);
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s var(--ui-ease);
+}
+
+.slot-reset:hover {
+  background: rgba(255, 90, 90, 0.15);
+  border-color: rgba(255, 90, 90, 0.4);
+  color: var(--ui-danger);
+}
+
+.slot-expand-icon {
+  font-size: 10px;
+  color: var(--ui-muted);
+  width: 16px;
+  text-align: center;
+}
+
+/* Scrollbar for staging list */
+.staging-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.staging-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.staging-list::-webkit-scrollbar-thumb {
+  background: var(--ui-border);
+  border-radius: 10px;
+}
+
+.staging-group {
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  overflow: hidden;
+}
+
+.staging-group-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.group-icon {
+  font-size: 14px;
+}
+
+.group-id {
+  color: var(--ui-accent-3);
+  font-family: 'JetBrains Mono', 'Consolas', monospace;
+}
+
+.staging-items {
+  padding: 4px 8px;
+}
+
+.staging-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 4px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.02);
+}
+
+.staging-item:last-child {
+  border-bottom: none;
+}
+
+.item-path {
+  flex: 0 0 110px;
+  font-size: 10px;
+  color: var(--ui-muted);
+  font-family: 'JetBrains Mono', 'Consolas', monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-value {
+  flex: 1;
+  font-size: 11px;
+  color: var(--ui-text);
+  background: rgba(0, 0, 0, 0.2);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'JetBrains Mono', 'Consolas', monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item-remove {
+  background: transparent;
+  border: none;
+  color: var(--ui-muted);
+  font-size: 16px;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0 4px;
+}
+
+.item-remove:hover {
+  color: var(--ui-danger);
+  transform: scale(1.2);
+}
+
+
+
+/* ========== 11-modals.css ========== */
+/* 11 Modals */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* JSON Modal */
+.json-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.json-modal-content {
+  background-color: #1e1e1e;
+  border: 1px solid #555;
+  border-radius: 8px;
+  width: 80%;
+  max-width: 800px;
+  max-height: 80%;
+  display: flex;
+  flex-direction: column;
+}
+
+.json-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #444;
+}
+
+.json-modal-header h3 {
+  margin: 0;
+  color: var(--ui-text);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.json-modal-body {
+  flex: 1;
+  padding: 16px 20px;
+  overflow-y: auto;
+}
+
+.json-modal-body pre {
+  margin: 0;
+  color: var(--ui-text);
+  font-family: 'Consolas', 'Monaco', monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+
+
+/* ========== 12-responsive.css ========== */
+/* 12 Responsive */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Responsive icon buttons */
+@media (max-width: 768px) {
+  .icon-btn {
+    padding: 3px;
+    width: 24px;
+    height: 24px;
+  }
+
+  .icon-btn svg {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.icon-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+
+
+/* ========== 99-misc.css ========== */
+/* 99 Misc */
+/* Auto-generated from preview.css */
+/* Updated to HANDLER Design System v1.0 */
+
+/* Device Selector */
+.device-selector-wrapper {
+  position: relative;
+}
+
+.device-dropdown {
+  background-color: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: 8px;
+  padding: 6px 10px;
+  font-size: 12px;
+  min-width: 150px;
+  max-width: 100%;
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.device-dropdown:focus {
+  outline: none;
+  border-color: var(--ui-accent);
+}
+
+/* Buttons */
+.preview-btn {
+  background-color: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: background var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.preview-btn:hover {
+  background-color: var(--ui-bg);
+}
+
+.preview-btn:active {
+  background-color: var(--ui-bg-2);
+}
+
+/* Primary Button - Solid Terracotta (Main Site Style) */
+.preview-btn-primary,
+.workbench-panel-apply-btn,
+.persistence-apply-btn,
+.ai-generate-btn,
+.debug-toggle
+
+/* Scene Edit Panel button */
+  {
+  background: var(--ui-terracotta);
+  color: var(--ui-text-white);
+  border: none;
+  font-weight: var(--font-weight-medium);
+}
+
+.preview-btn-primary:hover,
+.workbench-panel-apply-btn:hover,
+.persistence-apply-btn:hover,
+.ai-generate-btn:hover,
+.debug-toggle:hover {
+  background: var(--ui-terracotta-hover);
+}
+
+.preview-btn-primary:active,
+.workbench-panel-apply-btn:active,
+.persistence-apply-btn:active,
+.ai-generate-btn:active,
+.debug-toggle:active {
+  background: var(--ui-terracotta-active);
+}
+
+.preview-btn:disabled,
+.device-dropdown:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.icon-btn {
+  padding: 6px;
+  width: 30px;
+  height: 30px;
+  justify-content: center;
+}
+
+/* Unused/hidden objects styling */
+.scene-object-item.unused {
+  opacity: 0.4;
+  font-style: italic;
+}
+
+.scene-object-item.unused:hover {
+  opacity: 0.7;
+}
+
+.unused-group {
+  border-top: 1px dashed rgba(255, 255, 255, 0.1);
+  margin-top: 8px;
+  padding-top: 8px;
+}
+
+.unused-group .scene-object-group-title {
+  color: var(--ui-muted);
+  font-style: italic;
+}
+
+/* Staging Area */
+.staging-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  gap: 10px;
+}
+
+.staging-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11px;
+  color: var(--ui-muted);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.staging-clear-all {
+  background: transparent;
+  border: 1px solid rgba(217, 117, 88, 0.3);
+  color: var(--ui-danger);
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
+}
+
+.staging-clear-all:hover {
+  background: rgba(217, 117, 88, 0.1);
+  border-color: var(--ui-danger);
+}
+
+.staging-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-right: 4px;
+}
+
+/* Empty State */
+.persistence-empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 12px;
+  opacity: 0.6;
+}
+
+.empty-icon {
+  font-size: 40px;
+  filter: grayscale(1);
+}
+
+.persistence-empty-state p {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.empty-hint {
+  font-size: 11px;
+  color: var(--ui-muted);
+  max-width: 200px;
+  line-height: 1.4;
+}
+
+/* Footer */
+.persistence-footer {
+  padding-top: 12px;
+  border-top: 1px solid var(--ui-border);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.footer-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+}
+
+.footer-label {
+  color: var(--ui-muted);
+}
+
+.footer-value {
+  color: var(--ui-text);
+  font-weight: 600;
+}
+
+.footer-secondary-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.footer-btn {
+  flex: 1;
+  padding: 6px;
+  font-size: 10px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--ui-border);
+  border-radius: 6px;
+  color: var(--ui-text);
+  cursor: pointer;
+}
+
+.footer-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.footer-btn.danger {
+  color: var(--ui-danger);
+  border-color: rgba(255, 92, 112, 0.3);
+}
+
+.footer-btn.danger:hover {
+  background: rgba(255, 92, 112, 0.1);
+  border-color: var(--ui-danger);
+}
+
+.footer-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.persistence-info {
+  font-size: 10px;
+  color: var(--ui-muted);
+  line-height: 1.4;
+  background: rgba(227, 138, 90, 0.08);
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.persistence-info strong {
+  color: var(--ui-accent);
+}
+
+/* Notification Popup */
+.persistence-notification {
+  position: fixed;
+  top: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-accent);
+  box-shadow: var(--ui-shadow-hover);
+  border-radius: 12px;
+  padding: 12px 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  z-index: 9999;
+  animation: notify-in var(--ui-duration-slow) var(--ui-ease) forwards;
+}
+
+.persistence-notification.out {
+  animation: notify-out var(--ui-duration-slow) var(--ui-ease) forwards;
+}
+
+.notify-icon {
+  font-size: 24px;
+}
+
+.notify-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.notify-content strong {
+  color: var(--ui-accent);
+  font-size: 14px;
+}
+
+.notify-content span {
+  color: var(--ui-muted);
+  font-size: 12px;
+}
+
+@keyframes notify-in {
+  from {
+    transform: translateX(-50%) translateY(-100px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes notify-out {
+  from {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(-50%) translateY(-100px);
+    opacity: 0;
+  }
+}
+
+/* Tab Highlight */
+.workbench-tab.has-pending-changes::after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 8px;
+  height: 8px;
+  background: var(--ui-accent-2);
+  border-radius: 50%;
+  /* Removed glow - HANDLER forbids glow effects */
+  animation: pulse-dot 2s var(--ui-ease) infinite;
+}
+
+@keyframes pulse-dot {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(1.4);
+    opacity: 0.6;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}