:root{--bg-app:#0f0f1a;--bg-header:#151525;--bg-sidebar:#12121f;--bg-content:#1a1a2e;--bg-input:#1e1e38;--bg-hover:#252545;--bg-active:#2a2a50;--border:#3a3a5c;--border-focus:#5c5cff;--text-primary:#e8e8f0;--text-secondary:#a0a0c0;--text-muted:#606080;--accent:#6c63ff;--accent-hover:#7b73ff;--accent-glow:#6c63ff26;--success:#34d399;--error:#f87171;--radius:8px;--radius-sm:6px;--transition:.18s ease}.studio-app[data-v-63bfa0dc]{background:var(--bg-app);height:100vh;color:var(--text-primary);flex-direction:column;font-size:14px;line-height:1.5;display:flex}.header[data-v-63bfa0dc]{background:var(--bg-header);border-bottom:1px solid var(--border);z-index:10;flex-shrink:0;align-items:center;gap:16px;height:56px;padding:0 20px;display:flex}.header-left[data-v-63bfa0dc]{align-items:center;gap:12px;min-width:180px;display:flex}.sidebar-toggle[data-v-63bfa0dc]{border:1px solid var(--border);border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:0 0;justify-content:center;align-items:center;font-size:10px;display:flex}.sidebar-toggle[data-v-63bfa0dc]:hover{background:var(--bg-hover);color:var(--text-secondary);border-color:var(--text-muted)}.brand[data-v-63bfa0dc]{-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.brand-logo[data-v-63bfa0dc]{color:var(--accent);font-size:18px}.brand-name[data-v-63bfa0dc]{letter-spacing:-.3px;color:var(--text-primary);font-size:15px;font-weight:600}.brand-accent[data-v-63bfa0dc]{color:var(--accent);font-weight:500}.header-center[data-v-63bfa0dc]{flex:1;justify-content:center;max-width:560px;margin:0 auto;display:flex}.connect-bar[data-v-63bfa0dc]{gap:8px;width:100%;display:flex}.url-input[data-v-63bfa0dc]{background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius-sm);height:36px;color:var(--text-primary);transition:border-color var(--transition), box-shadow var(--transition);outline:none;flex:1;padding:0 14px;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:13px}.url-input[data-v-63bfa0dc]::placeholder{color:var(--text-secondary);opacity:.7}.url-input[data-v-63bfa0dc]:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}.connect-btn[data-v-63bfa0dc]{background:var(--accent);border-radius:var(--radius-sm);color:#fff;cursor:pointer;height:36px;transition:background var(--transition);white-space:nowrap;border:none;padding:0 20px;font-size:13px;font-weight:500}.connect-btn[data-v-63bfa0dc]:hover:not(:disabled){background:var(--accent-hover)}.connect-btn[data-v-63bfa0dc]:disabled{opacity:.5;cursor:not-allowed}.connected-badge[data-v-63bfa0dc]{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;height:36px;transition:all var(--transition);align-items:center;gap:8px;max-width:100%;padding:0 14px;display:flex}.connected-badge[data-v-63bfa0dc]:hover{border-color:var(--error)}.connected-badge:hover .disconnect-hint[data-v-63bfa0dc]{opacity:1;color:var(--error)}.connected-url[data-v-63bfa0dc]{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:13px;overflow:hidden}.disconnect-hint[data-v-63bfa0dc]{color:var(--text-muted);opacity:0;transition:all var(--transition);margin-left:4px;font-size:16px}.header-right[data-v-63bfa0dc]{justify-content:flex-end;align-items:center;min-width:140px;display:flex}.status-badge[data-v-63bfa0dc],.error-badge[data-v-63bfa0dc]{background:var(--bg-input);border:1px solid var(--border);border-radius:20px;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:500;display:flex}.status-badge.muted[data-v-63bfa0dc]{color:var(--text-muted)}.error-badge[data-v-63bfa0dc]{color:var(--error);border-color:#f871714d}.status-dot[data-v-63bfa0dc]{border-radius:50%;flex-shrink:0;width:7px;height:7px}.status-dot.connected[data-v-63bfa0dc]{background:var(--success);box-shadow:0 0 6px #34d39966}.status-dot.idle[data-v-63bfa0dc]{background:var(--text-muted)}.status-dot.error[data-v-63bfa0dc]{background:var(--error);box-shadow:0 0 6px #f8717166}.body[data-v-63bfa0dc]{flex:1;display:flex;overflow:hidden}.sidebar[data-v-63bfa0dc]{background:var(--bg-sidebar);border-right:1px solid var(--border);width:220px;transition:width var(--transition);flex-direction:column;flex-shrink:0;display:flex;overflow:hidden}.sidebar-collapsed .sidebar[data-v-63bfa0dc]{width:56px}.nav-list[data-v-63bfa0dc]{flex-direction:column;gap:2px;padding:12px 8px;list-style:none;display:flex}.nav-item[data-v-63bfa0dc]{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);color:var(--text-secondary);white-space:nowrap;align-items:center;gap:12px;padding:10px 12px;display:flex;overflow:hidden}.nav-item[data-v-63bfa0dc]:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active[data-v-63bfa0dc]{background:var(--bg-active);color:var(--text-primary);box-shadow:inset 3px 0 0 var(--accent)}.nav-icon[data-v-63bfa0dc]{text-align:center;flex-shrink:0;width:24px;font-size:16px}.nav-label[data-v-63bfa0dc]{transition:opacity var(--transition);font-size:13px;font-weight:500}.sidebar-collapsed .nav-label[data-v-63bfa0dc]{opacity:0;width:0}.sidebar-footer[data-v-63bfa0dc]{border-top:1px solid var(--border);margin-top:auto;padding:12px 16px}.version[data-v-63bfa0dc]{color:var(--text-muted);font-family:SF Mono,Fira Code,monospace;font-size:11px}.sidebar-collapsed .version[data-v-63bfa0dc]{display:none}.content[data-v-63bfa0dc]{background:var(--bg-content);flex:1;overflow-y:auto}@media (width<=768px){.header-left[data-v-63bfa0dc]{min-width:auto}.brand-name[data-v-63bfa0dc]{display:none}.header-right[data-v-63bfa0dc]{min-width:auto}.sidebar[data-v-63bfa0dc]{width:56px}.nav-label[data-v-63bfa0dc]{opacity:0;width:0}.sidebar-footer .version[data-v-63bfa0dc]{display:none}}.welcome[data-v-63bfa0dc]{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;display:flex}.welcome-icon[data-v-63bfa0dc]{color:var(--accent);opacity:.6;margin-bottom:1rem;font-size:48px}.welcome-title[data-v-63bfa0dc]{color:var(--text-primary);margin:0 0 .5rem;font-size:22px;font-weight:600}.welcome-text[data-v-63bfa0dc]{color:var(--text-secondary);max-width:420px;margin:0 0 1.5rem;font-size:14px;line-height:1.6}.welcome-connect[data-v-63bfa0dc]{gap:8px;width:100%;max-width:480px;margin-bottom:1rem;display:flex}.welcome-input[data-v-63bfa0dc]{background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius);height:42px;color:var(--text-primary);transition:border-color var(--transition), box-shadow var(--transition);outline:none;flex:1;padding:0 16px;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:14px}.welcome-input[data-v-63bfa0dc]::placeholder{color:var(--text-secondary);opacity:.6}.welcome-input[data-v-63bfa0dc]:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}.welcome-btn[data-v-63bfa0dc]{border-radius:var(--radius);height:42px;padding:0 24px;font-size:14px}.welcome-error[data-v-63bfa0dc]{color:var(--error);margin:0 0 1rem;font-size:13px}.welcome-examples[data-v-63bfa0dc]{align-items:center;gap:8px;margin-top:.5rem;display:flex}.welcome-examples-label[data-v-63bfa0dc]{color:var(--text-muted);font-size:12px}.example-link[data-v-63bfa0dc]{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--accent);cursor:pointer;transition:all var(--transition);background:0 0;padding:4px 12px;font-size:12px}.example-link[data-v-63bfa0dc]:hover{background:var(--accent-glow);border-color:var(--accent)}