:root{--brand: #2ECFB0;--brand-dark: #25A98F;--bg-base: #0D1017;--bg-surface: #151921;--bg-panel: #1A1F2B;--text-primary: #E2E8F0;--text-secondary: rgba(255, 255, 255, .6);--text-muted: rgba(255, 255, 255, .4);--border: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .15)}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-base);color:var(--text-primary)}#topbar{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:10}.topbar-left,.topbar-center,.topbar-right{display:flex;align-items:center;gap:8px}.logo{font-size:18px;font-weight:700;color:var(--text-primary)}.logo span{color:var(--brand)}.topbar-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-secondary);font-size:13px;font-family:inherit;cursor:pointer;transition:all .15s ease;white-space:nowrap}.topbar-btn:hover{background:#ffffff0d;color:var(--text-primary);border-color:var(--border-hover)}.topbar-btn.primary{background:#2ecfb01f;border-color:#2ecfb04d;color:var(--brand);cursor:pointer}.topbar-btn.primary:hover{background:#2ecfb033}.topbar-btn.active{background:#2ecfb026;border-color:var(--brand);color:var(--brand)}.status-text{font-size:12px;color:var(--text-muted)}#main{display:flex;height:calc(100% - 48px);position:relative}#viewport{flex:1;position:relative;background:var(--bg-base)}#viewport canvas{width:100%!important;height:100%!important;outline:none}#sidebar,#propsPanel{width:280px;background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:width .2s ease,opacity .2s ease}#propsPanel{border-right:none;border-left:1px solid var(--border)}#sidebar.hidden,#propsPanel.hidden{width:0;opacity:0;pointer-events:none}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text-primary);flex-shrink:0}.panel-close{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:transparent;color:var(--text-muted);font-size:12px;cursor:pointer}.panel-close:hover{background:#ffffff1a;color:var(--text-primary)}.panel-body{flex:1;overflow-y:auto;padding:12px;font-size:13px}.panel-body::-webkit-scrollbar{width:4px}.panel-body::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.empty-state{color:var(--text-muted);font-size:13px;text-align:center;padding:24px 12px}.tree-item{padding:6px 8px;border-radius:4px;cursor:pointer;font-size:12px;color:var(--text-secondary);transition:background .1s ease;display:flex;align-items:center;gap:6px}.tree-item:hover{background:#ffffff0d;color:var(--text-primary)}.tree-item.selected{background:#2ecfb01f;color:var(--brand)}.tree-toggle{width:16px;text-align:center;font-size:10px;color:var(--text-muted);flex-shrink:0}.tree-children{padding-left:16px}.tree-children.collapsed{display:none}.props-group{margin-bottom:16px}.props-group-title{font-size:11px;font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.5px;padding:6px 0;border-bottom:1px solid var(--border);margin-bottom:6px}.props-row{display:flex;justify-content:space-between;padding:4px 0;font-size:12px;border-bottom:1px solid rgba(255,255,255,.03)}.props-key{color:var(--text-muted);flex-shrink:0;margin-right:8px}.props-value{color:var(--text-primary);text-align:right;word-break:break-word}#loadingOverlay{position:fixed;inset:0;background:#0d1017e6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center}#loadingOverlay.hidden{display:none}.loading-content{text-align:center}.spinner{width:40px;height:40px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}#loadingText{color:var(--text-secondary);font-size:14px;margin-bottom:16px}.progress-bar{width:240px;height:4px;background:var(--border);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--brand);border-radius:2px;width:0%;transition:width .3s ease}#dropZone{position:fixed;inset:0;background:#2ecfb014;border:3px dashed var(--brand);z-index:200;display:flex;align-items:center;justify-content:center}#dropZone.hidden{display:none}.drop-content{text-align:center}.drop-icon{font-size:48px;display:block;margin-bottom:12px}.drop-content p{font-size:18px;color:var(--brand);font-weight:600}