html,body{height:100%;margin:0;padding:0}#root{min-height:100vh}:root{--toolbar-bg:#18181b;--toolbar-border:#2a2a2e;--accent:#5b5fef;--accent-hover:#4a4edb;--canvas-bg:#f6f7f9;--text-light:#f4f4f5;--text-muted:#a1a1aa;--danger:#e5484d;--success:#3dd68c;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body{background:var(--canvas-bg);margin:0}.app-shell{flex-direction:column;min-height:100vh;display:flex}.toolbar{background:var(--toolbar-bg);border-bottom:1px solid var(--toolbar-border);flex-wrap:wrap;align-items:center;gap:14px;padding:10px 16px;display:flex}.toolbar-brand{color:var(--text-light);white-space:nowrap;margin-right:4px;font-size:14px;font-weight:600}.toolbar-room{color:var(--text-muted);margin-right:8px;font-size:12px}.toolbar-group{border-right:1px solid var(--toolbar-border);align-items:center;gap:4px;padding-right:14px;display:flex}.toolbar-group:last-of-type{border-right:none}.icon-btn{width:32px;height:32px;color:var(--text-light);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;transition:background .12s;display:flex}.icon-btn:hover:not(:disabled){background:#ffffff14}.icon-btn.active{background:var(--accent)}.icon-btn:disabled{color:#52525b;cursor:not-allowed}.text-btn{background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;border:none;border-radius:6px;align-items:center;gap:6px;height:32px;padding:0 10px;font-size:13px;font-weight:500;display:flex}.text-btn:hover:not(:disabled){background:var(--accent-hover)}.text-btn:disabled{color:#71717a;cursor:not-allowed;background:#3f3f46}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:20px;height:20px;padding:0}.swatch.selected{border-color:#fff}.swatch:disabled{opacity:.35;cursor:not-allowed}.status-dot{border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block}.status-dot.connected{background:var(--success)}.status-dot.disconnected{background:var(--danger)}.toolbar-status{color:var(--text-muted);align-items:center;font-size:12px;display:flex}.toolbar-spacer{flex:1}.zoom-label{color:var(--text-muted);text-align:center;min-width:40px;font-size:12px}.readonly-banner{color:var(--text-muted);background:#f0f0f3;border-bottom:1px solid #e4e4e7;padding:6px 16px;font-size:12px}.canvas-wrap{flex:1;justify-content:center;align-items:flex-start;padding:20px;display:flex;overflow:auto}.auth-panel{align-items:center;gap:8px;display:flex}.auth-user{color:var(--text-light);font-size:12px}.auth-input{height:28px;color:var(--text-light);background:#27272a;border:1px solid #3f3f46;border-radius:5px;width:120px;padding:0 8px;font-size:12px}.auth-input::placeholder{color:#71717a}.auth-link-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-size:12px;text-decoration:underline}.auth-error{color:var(--danger);margin:0;font-size:11px}