:root{--bg-primary: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #252525;--bg-hover: #2a2a2a;--border-color: #333;--text-primary: #e0e0e0;--text-secondary: #888;--accent: #3b82f6;--accent-hover: #2563eb;--success: #22c55e;--warning: #eab308;--error: #ef4444;--track-height: 80px;--touch-target-min: 44px;--mobile-header-height: 50px;--mobile-toolbar-height: 56px;--mobile-transport-height: 72px;--mobile-panel-width: 280px;--safe-area-top: env(safe-area-inset-top, 0px);--safe-area-bottom: env(safe-area-inset-bottom, 0px);--safe-area-left: env(safe-area-inset-left, 0px);--safe-area-right: env(safe-area-inset-right, 0px)}.loading-screen{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg-primary)}.loading-content{text-align:center}.loading-content h1{font-size:2.5rem;margin-bottom:1rem;background:linear-gradient(135deg,var(--accent),#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.loading-spinner{width:40px;height:40px;margin:1rem auto;border:3px solid var(--border-color);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.main-content{display:flex;flex:1;overflow:hidden}.workspace{display:flex;flex-direction:column;flex:1;overflow:hidden}.track-area{display:flex;flex:1;overflow:hidden}.header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.header-left{display:flex;align-items:center;gap:1rem}.header-logo{font-size:1.25rem;font-weight:700;background:linear-gradient(135deg,var(--accent),#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.header-logo.clickable{cursor:pointer;transition:opacity .15s ease}.header-logo.clickable:hover{opacity:.8}.project-name{color:var(--text-primary);font-weight:500}.project-name.clickable{cursor:pointer;padding:.25rem .5rem;margin:-.25rem -.5rem;border-radius:4px;transition:background-color .15s ease}.project-name.clickable:hover{background-color:var(--bg-tertiary)}.project-name-input{background:var(--bg-primary);border:1px solid var(--accent);border-radius:4px;color:var(--text-primary);font-size:inherit;font-weight:500;font-family:inherit;padding:.25rem .5rem;margin:-.25rem -.5rem;outline:none;min-width:100px;max-width:300px}.header-right{display:flex;align-items:center;gap:.75rem}.connection-status{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-secondary)}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--error)}.connection-dot.connected{background:var(--success)}.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem;overflow:hidden}.user-avatar img,.collaborator-avatar img,.preferences-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}.transport{display:flex;align-items:center;gap:.5rem}.transport-btn{width:36px;height:36px;border:none;border-radius:4px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background .15s}.transport-btn:hover{background:var(--bg-hover)}.transport-btn.active{background:var(--accent);color:#fff}.transport-btn.record{color:var(--error)}.transport-btn.record.active,.transport-btn.record.recording{background:var(--error);color:#fff;animation:pulse-record 1s ease-in-out infinite}.transport-btn.metronome{color:var(--text-secondary)}.transport-btn.metronome.active{background:var(--accent);color:#fff}.transport-btn.metronome svg{display:block}@keyframes pulse-record{0%,to{opacity:1}50%{opacity:.6}}.mini-meter{width:8px;height:36px;background:var(--bg-primary);border-radius:2px;overflow:hidden;position:relative}.mini-meter-fill{position:absolute;bottom:0;left:0;right:0;transition:height .05s}.time-display.recording{border-color:var(--error);color:var(--error)}.time-display{font-family:JetBrains Mono,monospace;font-size:.875rem;background:var(--bg-primary);padding:.5rem .75rem;border-radius:4px;border:1px solid var(--border-color);min-width:120px;text-align:center}.tempo-display{display:flex;align-items:center;gap:.5rem}.time-signature-display{display:flex;align-items:center}.time-signature-select{padding:.5rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-family:JetBrains Mono,monospace;font-size:.875rem;cursor:pointer}.snap-display{display:flex;align-items:center}.snap-select{padding:.5rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-family:JetBrains Mono,monospace;font-size:.875rem;cursor:pointer}.time-signature-select:focus{outline:none;border-color:var(--accent)}.time-signature-select:disabled{opacity:.5;cursor:not-allowed}.tempo-input{width:60px;padding:.5rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-family:JetBrains Mono,monospace;text-align:center}.toolbar-tools,.toolbar-actions{display:flex;align-items:center;gap:.5rem}.view-toggle{display:flex;background:var(--bg-secondary);border-radius:4px;overflow:hidden}.view-btn{padding:.5rem 1rem;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .15s}.view-btn.active{background:var(--accent);color:#fff}.track-list{position:relative;min-width:150px;max-width:400px;background:var(--bg-secondary);border-right:1px solid var(--border-color);overflow-y:auto;flex-shrink:0}.track-list-resize-handle{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:10}.track-list-resize-handle:hover,.track-list.resizing .track-list-resize-handle{background:var(--accent)}.track-list.resizing{-webkit-user-select:none;user-select:none}.track-list-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;border-bottom:1px solid var(--border-color)}.track-list-header h3{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text-secondary)}.add-track-btn{width:24px;height:24px;border:none;border-radius:4px;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem}.track-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--border-color);cursor:pointer;height:var(--track-height);transition:background .15s}.track-item:hover{background:var(--bg-hover)}.track-item.selected{background:#3b82f633}.track-color{width:4px;height:100%;border-radius:2px;background:var(--track-color, var(--accent));color:var(--track-color, var(--accent))}.track-info{flex:1;min-width:0}.track-name{font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-type{font-size:.75rem;color:var(--text-secondary)}.track-controls{display:flex;gap:.25rem}.track-btn{width:24px;height:24px;border:none;border-radius:2px;background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;font-size:.625rem;font-weight:600}.track-btn.active{background:var(--warning);color:var(--bg-primary)}.track-btn.mute.active{background:var(--error);color:#fff}.track-btn.solo.active{background:var(--success);color:#fff}.track-btn.arm{color:var(--error)}.track-btn.arm.active{background:var(--error);color:#fff;animation:pulse-record 1s ease-in-out infinite}.track-item.armed{background:#ef44441a;border-left:3px solid var(--error)}.recording-badge{display:inline-block;background:var(--error);color:#fff;font-size:.5rem;padding:1px 4px;border-radius:2px;margin-left:.5rem;animation:pulse-record 1s ease-in-out infinite;vertical-align:middle}.recording-badge.remote{background:var(--warning);color:#000}.track-item.locked{opacity:.7}.track-item.locked .track-btn.arm{cursor:not-allowed}.track-item.remote-recording{background:#eab3081a;border-left:3px solid var(--warning)}.locked-badge{display:inline-block;background:var(--bg-tertiary);color:var(--text-secondary);font-size:.5rem;padding:1px 4px;border-radius:2px;margin-left:.5rem;vertical-align:middle;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-btn.arm.locked{background:var(--bg-tertiary);color:var(--text-secondary);cursor:not-allowed}.timeline{flex:1;overflow:auto;background:var(--bg-primary);position:relative;touch-action:pan-x pan-y}.timeline-ruler{height:30px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:10}.ruler-marks{display:flex;height:100%;position:relative}.ruler-mark{position:absolute;bottom:0;font-size:.625rem;color:var(--text-secondary);transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:1px}.ruler-bar-number{font-weight:500;line-height:1}.ruler-time-label{font-size:.5rem;opacity:.7;line-height:1;white-space:nowrap}.ruler-mark:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:8px;background:var(--border-color)}.ruler-mark.negative{color:var(--text-secondary);opacity:.6}.timeline-zero-line{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);opacity:.5;z-index:4;pointer-events:none}.ruler-zero-line{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);opacity:.5}.ruler-comment-pin{position:absolute;top:0;transform:translate(-50%);background:none;border:none;padding:0 2px;font-size:.75rem;line-height:1;cursor:pointer;z-index:6;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}.ruler-comment-pin.resolved{opacity:.4}.timeline-tracks{position:relative}.timeline-track{height:var(--track-height);border-bottom:1px solid var(--border-color);position:relative}.timeline-track:hover{background:#ffffff05}.region{position:absolute;top:4px;bottom:4px;border-radius:4px;overflow:hidden;cursor:pointer;transition:box-shadow .15s;background:var(--track-color-alpha, rgba(var(--accent-rgb), .8))}.region:hover{box-shadow:0 0 0 2px #ffffff4d}.region.selected{box-shadow:0 0 0 2px var(--accent)}.region.dragging{opacity:.7;cursor:grabbing;z-index:100}.region-content{height:100%;padding:4px 8px;display:flex;flex-direction:column}.region-name{font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.region-waveform{flex:1;min-height:0;opacity:.6;position:relative;overflow:hidden}.region-fade-handle{position:absolute;top:0;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.6);transform:translate(-50%);cursor:ew-resize;z-index:2;opacity:0;transition:opacity .15s}.region:hover .region-fade-handle,.region.selected .region-fade-handle{opacity:.9}.region-waveform.loading svg path{animation:waveform-loading 1.5s ease-in-out infinite}@keyframes waveform-loading{0%,to{opacity:.3}50%{opacity:.6}}.recording-region{border:2px solid #ff4444;animation:recording-pulse 1s ease-in-out infinite;cursor:default}.recording-region:hover{box-shadow:0 0 0 2px #f44}.recording-region .region-waveform{opacity:.8}.recording-label{color:#f66;font-weight:600}@keyframes recording-pulse{0%,to{border-color:#f44;box-shadow:0 0 4px #ff444480}50%{border-color:#f66;box-shadow:0 0 8px #f44c}}.finalizing-region{border:2px dashed var(--accent);cursor:default;animation:finalizing-pulse 1.5s ease-in-out infinite}.finalizing-region:hover{box-shadow:0 0 0 2px var(--accent)}.finalizing-region .region-waveform{opacity:.7}.finalizing-label{display:flex;align-items:center;gap:.5rem;color:var(--accent);font-weight:500}.finalizing-spinner{display:inline-block;width:10px;height:10px;border:2px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}.finalizing-waveform{opacity:.6}@keyframes finalizing-pulse{0%,to{border-color:var(--accent);box-shadow:0 0 4px #3b82f64d}50%{border-color:#60a5fa;box-shadow:0 0 8px #3b82f680}}.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);z-index:20;cursor:grab;transition:transform .05s}.playhead:hover{transform:scaleX(1.5);background:#60a5fa}.playhead.dragging{cursor:grabbing;background:#60a5fa;transform:scaleX(2)}.playhead:before{content:"";position:absolute;top:0;left:-5px;width:12px;height:12px;background:inherit;clip-path:polygon(50% 100%,0 0,100% 0)}.loop-region{position:absolute;top:0;bottom:0;z-index:5;transition:background .15s}.loop-region.disabled{opacity:.5}.loop-region:hover{background:#8b5cf640!important}.audio-editor-modal{max-width:700px}.audio-editor-modal .modal-body{padding:1rem}.audio-editor-waveform{-webkit-user-select:none;user-select:none;touch-action:none}.collaborator-cursor{position:absolute;top:0;bottom:0;width:2px;z-index:15;pointer-events:none}.cursor-label{position:absolute;top:-20px;left:0;font-size:.625rem;padding:2px 6px;border-radius:3px;white-space:nowrap;color:#fff}.mixer{height:250px;min-height:250px;flex-shrink:0;background:var(--bg-secondary);border-top:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden}.mixer-channels{display:flex;overflow-x:auto;flex:1}.mixer-track-labels{position:relative;flex-shrink:0;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}.mixer-labels-row{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.mixer-labels-row::-webkit-scrollbar{display:none}.mixer-label-cell{width:80px;min-width:80px;display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.375rem .5rem;border-right:1px solid var(--border-color);box-sizing:border-box}.mixer-label-cell:hover{background:var(--bg-hover)}.mixer-label-color{width:4px;height:16px;border-radius:2px;flex-shrink:0;background:var(--track-color, var(--accent))}.mixer-label-name{flex:1;font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.mixer-labels-empty{display:flex;align-items:center;justify-content:center;padding:.5rem 1rem;color:var(--text-secondary);font-size:.75rem}.mixer-labels-resize-handle{position:absolute;bottom:0;left:0;right:0;height:6px;cursor:ns-resize;background:transparent;transition:background .15s;z-index:10}.mixer-labels-resize-handle:hover,.mixer-labels-resize-handle.active{background:var(--accent)}.mixer-channel{width:80px;min-width:80px;padding:.5rem;border-right:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;gap:.375rem}.channel-name{font-size:.75rem;font-weight:500;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.channel-meter{width:12px;height:100px;background:var(--bg-primary);border-radius:2px;position:relative;overflow:hidden}.meter-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,var(--success),var(--warning),var(--error));transition:height .05s}.channel-fader{width:100%}.fader-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.fader-input::-webkit-slider-runnable-track{width:4px;height:100%;background:var(--bg-primary);border-radius:2px}.fader-input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:12px;background:var(--text-primary);border-radius:2px;cursor:pointer;margin-left:-8px}.fader-input::-moz-range-track{width:4px;height:100%;background:var(--bg-primary);border-radius:2px}.fader-input::-moz-range-thumb{width:20px;height:12px;background:var(--text-primary);border-radius:2px;cursor:pointer;border:none}.channel-pan{width:100%;display:flex;justify-content:center}.channel-pan input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.channel-pan input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--bg-primary);border-radius:2px}.channel-pan input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--text-primary);border-radius:50%;cursor:pointer;margin-top:-4px}.channel-pan input[type=range]::-moz-range-track{height:4px;background:var(--bg-primary);border-radius:2px}.channel-pan input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--text-primary);border-radius:50%;cursor:pointer;border:none}.channel-controls{display:flex;gap:.25rem}.collaborator-panel{position:relative;min-width:200px;max-width:500px;background:var(--bg-secondary);border-left:1px solid var(--border-color);padding:1rem;overflow-y:auto;display:flex;flex-direction:column;flex-shrink:0}.collaborator-panel-resize-handle{position:absolute;left:0;top:0;bottom:0;width:3px;cursor:ew-resize;background:transparent;z-index:10}.collaborator-panel-resize-handle:hover,.collaborator-panel-resize-handle.active{background:var(--border-color)}.chat-form{display:flex;flex-direction:column;gap:.5rem}.chat-input{width:100%;padding:.5rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:.875rem}.chat-send-btn{padding:.5rem .75rem;width:100%}.audio-message{-webkit-user-select:none;user-select:none;transition:background .15s,transform .1s}.audio-message:hover{background:var(--bg-hover)!important}.audio-message:active{transform:scale(.98)}.audio-message[draggable=true]{cursor:grab}.audio-message[draggable=true]:active{cursor:grabbing}.chat-record-btn{transition:all .15s}.chat-record-btn:hover:not(:disabled){background:var(--bg-hover);transform:scale(1.05)}.chat-record-btn.recording{animation:pulse-record 1s ease-in-out infinite}.chat-record-btn:disabled{opacity:.5;cursor:not-allowed}.audio-recording-indicator{animation:recording-pulse 1s ease-in-out infinite}.qr-code-container{transition:all .2s ease}.qr-code-container:hover{box-shadow:0 4px 12px #0000004d}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.panel-header h3{font-size:.75rem;font-weight:600;text-transform:uppercase;color:var(--text-secondary)}.collaborator-list{display:flex;flex-direction:column;gap:.5rem}.collaborator-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--bg-tertiary);border-radius:4px}.collaborator-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:#fff;overflow:hidden}.collaborator-name{flex:1;font-size:.875rem}.collaborator-item.recording{background:#ef444414;border-radius:6px;padding:.375rem;margin:-.375rem}.collaborator-avatar.recording{animation:pulse-record 1s ease-in-out infinite}.collaborator-info-wrapper{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.collaborator-recording-status{display:flex;align-items:center;gap:.375rem;font-size:.6875rem;color:var(--error)}.collaborator-recording-status .recording-dot{width:6px;height:6px;border-radius:50%;background:var(--error);animation:pulse-record 1s ease-in-out infinite}.collaborator-recording-status .recording-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collaborator-rec-badge{font-size:.625rem;font-weight:700;color:#fff;background:var(--error);padding:.125rem .375rem;border-radius:3px;animation:pulse-record 1s ease-in-out infinite;flex-shrink:0}.panel-footer{margin-top:auto;padding-top:1rem;border-top:1px solid var(--border-color);text-align:center}.panel-footer .git-sha{font-size:.625rem;font-family:monospace;color:var(--text-secondary);opacity:.6}.login-container,.project-list-container{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg-primary)}.login-box,.project-list-box{width:400px;padding:2rem;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color);max-height:calc(100vh - 4rem);overflow-y:auto;-webkit-overflow-scrolling:touch}.login-box h1,.project-list-box h1{text-align:center;margin-bottom:.5rem;background:linear-gradient(135deg,var(--accent),#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.login-box p{text-align:center;color:var(--text-secondary);margin-bottom:1.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.875rem;margin-bottom:.5rem;color:var(--text-secondary)}.form-group input{width:100%;padding:.75rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:1rem}.form-group input:focus{outline:none;border-color:var(--accent)}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background .15s}.btn-primary{background:var(--accent);color:#fff;width:100%}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-hover)}.login-divider{display:flex;align-items:center;margin:1.5rem 0;color:var(--text-secondary)}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--border-color)}.login-divider span{padding:0 1rem;font-size:.875rem}.demo-btn{width:100%;background:var(--bg-tertiary)}.error-message{color:var(--error);font-size:.875rem;margin-bottom:1rem;text-align:center}.project-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.projects-grid{display:flex;flex-direction:column;gap:.75rem;max-height:400px;overflow-y:auto}.project-card{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--bg-tertiary);border-radius:4px;cursor:pointer;transition:background .15s}.project-card:hover{background:var(--bg-hover)}.project-card-info h3{font-size:1rem;margin-bottom:.25rem}.project-card-info p{font-size:.75rem;color:var(--text-secondary)}.empty-state{text-align:center;padding:2rem;color:var(--text-secondary)}.recording-panel{width:220px;background:var(--bg-secondary);border-left:1px solid var(--border-color);padding:0;overflow-y:auto}.recording-panel-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border-color)}.recording-panel-header h3{margin:0;font-size:.875rem}.recording-indicator{display:flex;align-items:center;gap:.25rem;color:var(--error);font-size:.75rem;font-weight:600}.recording-dot{width:8px;height:8px;background:var(--error);border-radius:50%;animation:pulse-record 1s ease-in-out infinite}.recording-section{padding:.75rem 1rem;border-bottom:1px solid var(--border-color)}.recording-section label{display:block;font-size:.75rem;color:var(--text-secondary);margin-bottom:.5rem}.input-select{flex:1;padding:.5rem 1.75rem .5rem .5rem;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:.75rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .625rem center}.input-select:focus{outline:none;border-color:var(--accent)}.input-select option{background:var(--bg-secondary);color:var(--text-primary)}.btn-icon{padding:.5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;font-size:.875rem}.btn-icon:hover{background:var(--bg-hover)}.input-meter-container{display:flex;align-items:center;gap:.5rem}.input-meter{flex:1;height:12px;background:var(--bg-primary);border-radius:6px;overflow:hidden}.input-meter-fill{height:100%;transition:width .05s}.level-value{font-size:.75rem;color:var(--text-secondary);min-width:32px;text-align:right}.btn-monitor{width:100%;padding:.5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;font-size:.75rem;transition:all .2s}.btn-monitor:hover{background:var(--bg-hover)}.btn-monitor.active{background:var(--accent);border-color:var(--accent);color:#fff}.btn-monitor:disabled{opacity:.5;cursor:not-allowed}.gain-control{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.gain-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:var(--bg-tertiary);border-radius:3px;outline:none}.gain-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform .1s}.gain-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.gain-slider::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;border:none}.gain-slider:disabled{opacity:.5}.gain-slider:disabled::-webkit-slider-thumb{cursor:not-allowed}.gain-value{font-size:.75rem;color:var(--text-secondary);min-width:45px;text-align:right;font-family:monospace}.btn-auto-gain{width:100%;padding:.4rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;font-size:.7rem;transition:all .2s}.btn-auto-gain:hover:not(:disabled){background:var(--bg-hover);border-color:var(--accent)}.btn-auto-gain:disabled{opacity:.5;cursor:not-allowed}.auto-gain-wizard{background:var(--bg-tertiary);border:1px solid var(--accent);border-radius:4px;padding:.75rem!important}.wizard-status{display:flex;align-items:center;gap:.5rem;font-size:.75rem;margin-bottom:.5rem}.wizard-dot{width:8px;height:8px;border-radius:50%}.wizard-dot.listening{background:var(--error);animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.wizard-level{font-size:.7rem;color:var(--text-secondary);margin-bottom:.5rem}.wizard-result{margin-bottom:.5rem}.wizard-peak{font-size:.7rem;color:var(--text-secondary);margin-bottom:.25rem}.wizard-suggestion{font-size:.8rem;color:var(--text-primary)}.wizard-suggestion strong{color:var(--accent)}.wizard-actions{display:flex;gap:.5rem}.btn-apply{flex:1;padding:.4rem;background:var(--accent);border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.7rem;font-weight:500}.btn-apply:hover{opacity:.9}.btn-cancel{flex:1;padding:.4rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;font-size:.7rem}.btn-cancel:hover{background:var(--bg-hover)}.latency-wizard-section{border-bottom:1px solid var(--border-color)}.latency-wizard-trigger{display:flex;flex-direction:column;gap:.25rem}.btn-latency-wizard{width:100%;padding:.4rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;font-size:.7rem;transition:all .2s}.btn-latency-wizard:hover:not(:disabled){background:var(--bg-hover);border-color:#8b5cf6}.btn-latency-wizard:disabled{opacity:.5;cursor:not-allowed}.latency-wizard{background:var(--bg-tertiary);border:1px solid #8b5cf6;border-radius:4px;padding:.75rem}.latency-wizard .wizard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.latency-wizard .wizard-header h4{margin:0;font-size:.8rem;color:#8b5cf6}.latency-wizard .btn-close{background:none;border:none;color:var(--text-secondary);font-size:1rem;cursor:pointer;padding:0;line-height:1}.latency-wizard .btn-close:hover{color:var(--text-primary)}.wizard-instruction{font-size:.7rem;color:var(--text-secondary);margin:0 0 .75rem;line-height:1.4}.track-select-group{margin-bottom:.75rem}.track-select-group label{display:block;font-size:.7rem;color:var(--text-secondary);margin-bottom:.25rem}.track-select{width:100%;padding:.4rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:.75rem}.track-select:focus{outline:none;border-color:#8b5cf6}.btn-analyze{flex:1;padding:.4rem;background:#8b5cf6;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.7rem;font-weight:500}.btn-analyze:hover:not(:disabled){background:#7c3aed}.btn-analyze:disabled{opacity:.5;cursor:not-allowed}.wizard-analyzing{text-align:center;position:relative;isolation:isolate}.wizard-processing-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;border-radius:4px;z-index:1;pointer-events:none;-webkit-animation:fadeIn .3s ease;animation:fadeIn .3s ease}.wizard-processing-content{position:relative;z-index:2;background:var(--bg-tertiary);padding:1rem;border-radius:6px;-webkit-transform:translateZ(0);transform:translateZ(0)}.wizard-processing-indicator{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.75rem;background-color:#8b5cf640;border-radius:6px;border:1px solid rgba(139,92,246,.5)}.wizard-spinner{width:24px;height:24px;border:2px solid rgba(139,92,246,.5);border-top-color:#a78bfa;border-radius:50%;-webkit-animation:spin .8s linear infinite;animation:spin .8s linear infinite}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.wizard-processing-label{font-size:.75rem;font-weight:600;color:#a78bfa;text-transform:uppercase;letter-spacing:.5px}.wizard-analyzing .wizard-status{justify-content:center;margin-bottom:.75rem}.wizard-dot.analyzing{background:#8b5cf6;animation:pulse 1s infinite}.progress-bar{height:4px;background:var(--bg-primary);border-radius:2px;overflow:hidden;margin-bottom:.5rem}.progress-fill{height:100%;background:linear-gradient(90deg,#8b5cf6,var(--accent));transition:width .3s ease}.wizard-detail{font-size:.65rem;color:var(--text-secondary);margin:0 0 .75rem}.wizard-error{text-align:center}.wizard-error .error-message{display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--error);font-size:.75rem;margin-bottom:.75rem;text-align:left}.wizard-error .error-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--error);color:#fff;border-radius:50%;font-size:.7rem;font-weight:700;flex-shrink:0}.wizard-complete .result-header{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:500;margin-bottom:.75rem;color:var(--success)}.wizard-dot.complete{background:var(--success)}.result-details{background:var(--bg-primary);border-radius:4px;padding:.5rem;margin-bottom:.75rem}.result-row{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;margin-bottom:.25rem}.result-row:last-child{margin-bottom:0}.result-label{color:var(--text-secondary)}.result-value{font-weight:500;font-family:monospace}.result-value.confidence-high{color:var(--success)}.result-value.confidence-medium{color:var(--warning)}.result-value.confidence-low{color:var(--error)}.result-row-secondary{opacity:.7;font-size:.65rem}.result-row-highlight{background:var(--bg-secondary);padding:.25rem .5rem;margin:.25rem -.5rem;border-radius:4px}.result-row-highlight .result-label{color:var(--text-primary);font-weight:500}.result-row-highlight .result-value{color:var(--accent);font-weight:600}.correction-section{margin-bottom:.75rem}.correction-section label{display:block;font-size:.7rem;color:var(--text-secondary);margin-bottom:.25rem}.correction-input-group{display:flex;align-items:center;gap:.25rem}.correction-input{flex:1;padding:.4rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:.8rem;font-family:monospace;text-align:center}.correction-input:focus{outline:none;border-color:#8b5cf6}.correction-unit{font-size:.7rem;color:var(--text-secondary)}.correction-hint{font-size:.65rem;color:var(--text-secondary);margin:.25rem 0 0;font-style:italic}.armed-track-display{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#ef44441a;border:1px solid var(--error);border-radius:4px;font-size:.875rem}.track-color-dot{width:10px;height:10px;border-radius:50%;background:var(--track-color, var(--accent))}.hint-text{font-size:.75rem;color:var(--text-secondary);margin:0;font-style:italic}.recording-tips{padding:.75rem 1rem}.recording-tips p{margin:0 0 .5rem;font-size:.75rem}.recording-tips ul{margin:0;padding-left:1rem;font-size:.7rem;color:var(--text-secondary)}.recording-tips li{margin-bottom:.25rem}.btn-share{padding:.5rem 1rem;background:var(--accent);color:#fff;border:none;border-radius:4px;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .15s}.btn-share:hover{background:var(--accent-hover)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color);max-width:500px;width:90%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border-color)}.modal-header h2{margin:0;font-size:1.25rem}.modal-close{background:none;border:none;color:var(--text-secondary);font-size:1.25rem;cursor:pointer;padding:.25rem;line-height:1}.modal-close:hover{color:var(--text-primary)}.modal-body{padding:1.5rem;overflow-y:auto}.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--border-color)}.latency-autocorrect-modal{max-width:450px}.autocorrect-content{display:flex;flex-direction:column;gap:1rem}.autocorrect-message{color:var(--text-primary);line-height:1.5;margin:0}.autocorrect-message strong{color:var(--accent)}.autocorrect-question{color:var(--text-secondary);margin:0}.autocorrect-note{color:var(--text-secondary);font-size:.85rem;margin:0}.autocorrect-warning{color:var(--warning, #f59e0b);font-size:.85rem;margin:0}.region-nudge-popover{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 16px #0006;min-width:260px;overflow:hidden}.nudge-header{padding:.5rem .75rem;font-size:.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border-color)}.nudge-content{padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.nudge-controls{display:flex;align-items:center;gap:.25rem}.nudge-btn{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-primary);padding:.25rem .5rem;border-radius:4px;cursor:pointer;font-size:.75rem;font-weight:500;min-width:32px;text-align:center;transition:background .1s}.nudge-btn:hover{background:var(--bg-hover)}.nudge-btn:active{background:var(--accent);color:#fff}.nudge-input-wrapper{display:flex;align-items:center;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;padding:.25rem .4rem;flex:1;min-width:0}.nudge-input{background:none;border:none;color:var(--text-primary);font-size:.875rem;width:60px;text-align:right;outline:none;-moz-appearance:textfield}.nudge-input::-webkit-outer-spin-button,.nudge-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.nudge-unit{color:var(--text-secondary);font-size:.75rem;margin-left:.25rem}.nudge-info{font-size:.75rem;color:var(--text-secondary);text-align:center}.nudge-beats{color:var(--text-tertiary, var(--text-secondary))}.nudge-warning{font-size:.75rem;color:var(--warning, #f59e0b);text-align:center}.nudge-gain{display:flex;align-items:center;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--border-color)}.nudge-gain label{font-size:.75rem;color:var(--text-secondary)}.nudge-gain input[type=range]{flex:1}.nudge-gain-value{font-size:.75rem;color:var(--text-secondary);min-width:4.5em;text-align:right}.nudge-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.5rem .75rem;border-top:1px solid var(--border-color)}.btn-sm{padding:.25rem .75rem;font-size:.8rem}.comment-thread-panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 16px #0006;min-width:260px;max-width:320px;overflow:hidden}.comment-thread-header{padding:.5rem .75rem;font-size:.8rem;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border-color);display:flex;align-items:center;gap:.5rem}.comment-resolved-badge{font-size:.6875rem;font-weight:500;color:var(--success);text-transform:uppercase}.comment-thread-content{padding:.75rem}.comment-thread-body{margin:0;font-size:.875rem;color:var(--text-primary);white-space:pre-wrap;word-break:break-word}.comment-thread-input{width:100%;resize:vertical;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-family:inherit;font-size:.875rem;padding:.5rem}.comment-thread-footer{display:flex;justify-content:flex-end;gap:.5rem;padding:.5rem .75rem;border-top:1px solid var(--border-color)}.recording-buffering-modal{max-width:400px;text-align:center}.recording-buffering-modal .modal-header{justify-content:center;border-bottom:none;padding-bottom:0}.recording-buffering-modal .modal-header h2{font-size:1.125rem;color:var(--error)}.buffering-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.buffering-message{font-size:1rem;color:var(--text-primary);min-height:1.5rem}.buffering-progress-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem}.buffering-progress-bar{width:100%;height:8px;background:var(--bg-tertiary);border-radius:4px;overflow:hidden}.buffering-progress-fill{height:100%;background:linear-gradient(90deg,var(--error),#ff6b6b);border-radius:4px;transition:width .2s ease-out}.buffering-progress-text{font-size:.875rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}.buffering-hint{font-size:.75rem;color:var(--text-secondary);margin-top:.5rem}.recording-buffering-overlay{animation:pulse-overlay 1.5s ease-in-out infinite}@keyframes pulse-overlay{0%,to{background:#000000b3}50%{background:#1e0000bf}}.count-in-overlay{background:#000000d9}.count-in-modal{max-width:320px;background:#141419f2;box-shadow:0 0 60px #000c,0 0 100px #ff525233;border:2px solid rgba(255,255,255,.15);border-radius:24px}.count-in-content{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 3rem}.count-in-beat{font-size:12rem;font-weight:800;color:#fff;line-height:1;animation:count-in-pulse .15s ease-out;text-shadow:0 0 30px rgba(255,255,255,.5),0 0 60px rgba(255,255,255,.3),0 4px 8px rgba(0,0,0,.5);-webkit-text-stroke:1px rgba(255,255,255,.3);paint-order:stroke fill;-webkit-text-fill-color:currentColor}.count-in-beat.downbeat{color:#ff5252;text-shadow:0 0 40px rgba(255,82,82,.8),0 0 80px rgba(255,82,82,.5),0 0 120px rgba(255,82,82,.3),0 4px 8px rgba(0,0,0,.5);-webkit-text-stroke:1px rgba(255,100,100,.5);paint-order:stroke fill;-webkit-text-fill-color:currentColor}.count-in-label{font-size:1.25rem;font-weight:500;color:#ffffffb3;margin-top:1.5rem;letter-spacing:.05em}@keyframes count-in-pulse{0%{transform:scale(1.3);opacity:.7}50%{opacity:1}to{transform:scale(1);opacity:1}}.share-modal{max-width:550px}.share-section{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.share-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.share-section h3{margin:0 0 .5rem;font-size:1rem}.share-description{color:var(--text-secondary);font-size:.875rem;margin:0 0 1rem}.share-options{display:flex;gap:1rem;margin-bottom:1rem}.share-option{flex:1}.share-option label{display:block;font-size:.75rem;color:var(--text-secondary);margin-bottom:.5rem}.share-links-list{display:flex;flex-direction:column;gap:.75rem}.share-link-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:var(--bg-tertiary);border-radius:4px;gap:1rem}.share-link-item.expired{opacity:.5}.share-link-info{flex:1;min-width:0}.share-link-role{font-weight:500;text-transform:capitalize}.share-link-meta{font-size:.75rem;color:var(--text-secondary)}.share-link-actions{display:flex;gap:.5rem}.btn-small{padding:.375rem .75rem;font-size:.75rem}.btn-danger{background:var(--error);color:#fff;border:none;border-radius:4px;cursor:pointer}.btn-danger:hover{background:#dc2626}.collaborators-list{display:flex;flex-direction:column;gap:.5rem}.collaborator-row{display:flex;align-items:center;gap:.75rem;padding:.5rem;background:var(--bg-tertiary);border-radius:4px}.collaborator-row .collaborator-avatar{width:32px;height:32px;flex-shrink:0}.collaborator-info{flex:1;min-width:0}.collaborator-row .collaborator-name{font-weight:500}.collaborator-meta{font-size:.75rem;color:var(--text-secondary)}.empty-message{color:var(--text-secondary);font-size:.875rem;font-style:italic}.loading-state{text-align:center;color:var(--text-secondary);padding:2rem}.join-project-container{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--bg-primary)}.join-project-box{width:400px;padding:2rem;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color);text-align:center}.join-project-box h1{background:linear-gradient(135deg,var(--accent),#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}.join-project-box h2{margin:0 0 1rem;font-size:1.25rem}.join-description{color:var(--text-secondary);margin-bottom:1.5rem}.join-error-description{color:var(--text-secondary);font-size:.875rem;margin-bottom:1.5rem}.join-project-info{background:var(--bg-tertiary);border-radius:8px;padding:1.5rem;margin-bottom:1.5rem}.join-project-name{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.join-project-owner{color:var(--text-secondary);margin-bottom:.75rem}.join-project-role{font-size:.875rem}.role-badge{display:inline-block;background:var(--accent);color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;text-transform:capitalize}.join-actions{display:flex;flex-direction:column;gap:.75rem}.share-login-notice{background:#3b82f61a;border:1px solid var(--accent);border-radius:4px;padding:.75rem;margin-bottom:1rem;font-size:.875rem;color:var(--accent)}.mobile-menu-toggle{display:none;width:var(--touch-target-min);height:var(--touch-target-min);border:none;background:var(--bg-secondary);color:var(--text-primary);border-radius:4px;cursor:pointer;align-items:center;justify-content:center;font-size:1.25rem;-webkit-tap-highlight-color:transparent}.mobile-menu-toggle:active{background:var(--bg-hover)}.panel-drawer-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;z-index:998;opacity:0;transition:opacity .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.panel-drawer-overlay.visible{opacity:1}.mobile-panel-drawer{position:fixed;top:0;right:-100%;width:var(--mobile-panel-width);max-width:85vw;height:100%;background:var(--bg-secondary);z-index:999;transition:right .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding-top:var(--safe-area-top);padding-bottom:var(--safe-area-bottom);box-shadow:-4px 0 20px #00000080}@supports (-webkit-touch-callout: none){.mobile-panel-drawer{width:100vw;width:100dvw;max-width:100vw;max-width:100dvw;height:100vh;height:100dvh;padding-top:var(--safe-area-top);padding-bottom:var(--safe-area-bottom);padding-left:var(--safe-area-left);padding-right:var(--safe-area-right);box-sizing:border-box}}.mobile-panel-drawer.open{right:0}.mobile-panel-drawer .panel-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border-color)}.mobile-panel-drawer .panel-drawer-close{width:var(--touch-target-min);height:var(--touch-target-min);border:none;background:var(--bg-tertiary);color:var(--text-primary);border-radius:4px;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.mobile-panel-drawer .panel-drawer-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.mobile-transport-bar{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--mobile-transport-height);background:var(--bg-secondary);border-top:1px solid var(--border-color);padding-bottom:var(--safe-area-bottom);z-index:100;justify-content:center;align-items:center;gap:.5rem}.mobile-transport-bar .transport-btn{width:52px;height:52px;font-size:1.25rem;border-radius:8px;-webkit-tap-highlight-color:transparent}.mobile-transport-bar .transport-btn.record{width:60px;height:60px;font-size:1.5rem;border-radius:50%}.mobile-time-display{display:none;font-family:JetBrains Mono,monospace;font-size:.875rem;background:var(--bg-primary);padding:.5rem .75rem;border-radius:4px;border:1px solid var(--border-color);min-width:100px;text-align:center}.mobile-time-display.recording{border-color:var(--error);color:var(--error)}@media (max-width: 1024px){.collaborator-panel,.recording-panel{display:none}.mobile-menu-toggle{display:flex}.toolbar{padding:.5rem;flex-wrap:wrap;gap:.5rem}.toolbar-tools,.tempo-display{gap:.25rem}.tempo-input{width:50px;padding:.375rem}.time-display{min-width:100px;padding:.375rem .5rem;font-size:.8125rem}.track-list{min-width:120px;max-width:250px}.mixer-channel,.mixer-label-cell{width:70px;min-width:70px}}@media (max-width: 768px){.app{padding-top:var(--safe-area-top);padding-left:var(--safe-area-left);padding-right:var(--safe-area-right);height:100vh;height:100dvh;height:-webkit-fill-available}.header{padding:.5rem;min-height:var(--mobile-header-height)}.header-left{gap:.5rem}.header-logo{font-size:1rem}.project-name{font-size:.875rem;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-right{gap:.5rem}.connection-status{display:none}.user-avatar{width:28px;height:28px;font-size:.75rem}.toolbar{padding:.375rem .5rem;min-height:var(--mobile-toolbar-height);justify-content:center;gap:.375rem}.toolbar-actions,.toolbar-tools{display:none}.transport{gap:.375rem;flex-wrap:wrap;justify-content:center}.transport-btn{width:var(--touch-target-min);height:var(--touch-target-min);font-size:1.125rem;border-radius:6px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.transport-btn:active{transform:scale(.95)}.time-display{min-width:90px;padding:.375rem .5rem;font-size:.75rem}.tempo-display,.time-signature-display,.snap-display,.mini-meter{display:none}.view-toggle{border-radius:6px}.view-btn{padding:.375rem .75rem;font-size:.75rem}.main-content{flex-direction:column;padding-bottom:calc(var(--mobile-transport-height) + var(--safe-area-bottom))}.track-area{flex-direction:column}.track-list{width:100%!important;max-width:none;min-width:none;border-right:none;border-bottom:1px solid var(--border-color);max-height:200px;overflow-y:auto;-webkit-overflow-scrolling:touch}.track-list-resize-handle{display:none}.track-list-header{padding:.5rem .75rem;position:sticky;top:0;background:var(--bg-secondary);z-index:5}.track-item{height:60px;padding:.375rem .5rem;gap:.375rem}.track-name{font-size:.8125rem}.track-type{font-size:.6875rem}.track-controls{gap:.125rem}.track-btn{width:var(--touch-target-min);height:32px;font-size:.5625rem;border-radius:4px;-webkit-tap-highlight-color:transparent}.add-track-btn{width:32px;height:32px;font-size:1.125rem}.timeline{flex:1;min-height:200px;-webkit-overflow-scrolling:touch}.timeline-ruler{height:24px}.ruler-mark{font-size:.5625rem}.timeline-track{height:60px}.region{top:3px;bottom:3px;min-width:40px;touch-action:manipulation}.region-content{padding:2px 4px}.region-name{font-size:.6875rem}.playhead{width:3px}.playhead:before{left:-8px;width:18px;height:18px}.mixer{height:auto;min-height:auto;max-height:180px;overflow-x:auto;-webkit-overflow-scrolling:touch}.mixer-channels{padding:.5rem}.mixer-channel{width:56px;min-width:56px;padding:.375rem;gap:.25rem}.mixer-label-cell{width:56px;min-width:56px;padding:.25rem}.channel-name{font-size:.625rem}.channel-meter{height:60px;width:10px}.channel-controls .track-btn{width:20px;height:20px;font-size:.5rem}.pan-knob{width:24px;height:24px}.mixer-labels-resize-handle{display:none}.mobile-transport-bar{display:flex}.panel-drawer-overlay{display:block}.login-container,.project-list-container,.join-project-container{padding:1rem;padding-top:calc(1rem + var(--safe-area-top));padding-bottom:calc(1rem + var(--safe-area-bottom));height:auto;min-height:100vh;min-height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;align-items:flex-start}.login-box,.project-list-box,.join-project-box{width:100%;max-width:400px;padding:1.5rem}.login-box h1,.project-list-box h1,.join-project-box h1{font-size:1.5rem}.form-group input{padding:.875rem;font-size:16px}.btn{padding:.875rem 1.5rem;min-height:var(--touch-target-min)}.modal-overlay{align-items:flex-end;padding:0}.modal{width:100%;max-width:none;max-height:85vh;border-radius:16px 16px 0 0;margin:0;padding-bottom:var(--safe-area-bottom)}.modal-header{padding:1rem}.modal-header h2{font-size:1.125rem}.modal-body{padding:1rem;-webkit-overflow-scrolling:touch}.modal-overlay:has(.share-modal){align-items:stretch;left:0;width:100vw;width:100dvw}.share-modal{width:100vw;width:100dvw;max-width:100vw;max-width:100dvw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;border-radius:0;padding-top:var(--safe-area-top);padding-bottom:var(--safe-area-bottom);padding-left:var(--safe-area-left);padding-right:var(--safe-area-right);display:flex;flex-direction:column;margin:0;box-sizing:border-box}.share-modal .modal-body{flex:1;overflow-y:auto}.share-options{flex-direction:column;gap:.75rem}.share-link-item{flex-direction:column;align-items:flex-start;gap:.75rem}.share-link-actions{width:100%;justify-content:flex-end}.projects-grid{max-height:50vh}.project-card{padding:.875rem}.project-card-info h3{font-size:.9375rem}}@media (max-width: 480px){.header{padding:.375rem .5rem}.header-logo{font-size:.9375rem}.project-name{max-width:80px;font-size:.8125rem}.toolbar{padding:.25rem .375rem}.transport-btn{width:40px;height:40px}.time-display{min-width:80px;font-size:.6875rem;padding:.25rem .375rem}.view-btn{padding:.25rem .5rem;font-size:.6875rem}.track-list{max-height:150px}.track-item{height:52px;padding:.25rem .375rem}.track-btn{width:36px;height:28px}.timeline-track{height:52px}.mixer{max-height:150px}.mixer-channel,.mixer-label-cell{width:48px;min-width:48px}.channel-meter{height:50px;width:8px}.mobile-transport-bar{height:64px;gap:.375rem}.mobile-transport-bar .transport-btn{width:46px;height:46px;font-size:1.125rem}.mobile-transport-bar .transport-btn.record{width:54px;height:54px}.login-box,.project-list-box,.join-project-box{padding:1rem}.form-group{margin-bottom:.75rem}}@media (max-width: 896px) and (orientation: landscape){.app{height:100vh;height:100dvh;height:-webkit-fill-available}.main-content{padding-bottom:0;padding-right:calc(var(--mobile-transport-height) + var(--safe-area-right))}.track-area{flex-direction:row}.track-list{width:120px!important;max-width:120px;min-width:100px;max-height:none;border-bottom:none;border-right:1px solid var(--border-color)}.mobile-transport-bar{top:0;left:auto;right:0;bottom:0;width:var(--mobile-transport-height);height:auto;flex-direction:column;padding-bottom:0;padding-right:var(--safe-area-right);border-top:none;border-left:1px solid var(--border-color)}.mobile-transport-bar .transport-btn{width:48px;height:48px}.mobile-transport-bar .transport-btn.record{width:56px;height:56px}.mixer{height:140px;max-height:140px}.track-item,.timeline-track{height:50px}}.app{overscroll-behavior:none}.timeline,.track-list,.mixer-channels,.projects-grid,.modal-body,.project-list-container{-webkit-overflow-scrolling:touch}.transport-btn,.track-btn,.view-btn,.btn,.region,.mobile-menu-toggle{-webkit-user-select:none;user-select:none}@supports (-webkit-touch-callout: none){input,select,textarea{font-size:16px}}@media (display-mode: standalone){.app{padding-top:var(--safe-area-top)}.header{padding-top:0}}button,a,.track-item,.region,.project-card,.collaborator-item{-webkit-tap-highlight-color:transparent}@media (hover: none) and (pointer: coarse){.transport-btn:active{background:var(--bg-hover);transform:scale(.95)}.transport-btn.active:active{opacity:.8}.track-btn:active{transform:scale(.9)}.btn:active{transform:scale(.98)}.track-item:active{background:var(--bg-hover)}.project-card:active{background:var(--bg-hover);transform:scale(.99)}.track-btn{min-width:36px;min-height:28px}}@media (max-width: 768px){.header.recording{border-bottom-color:var(--error);background:linear-gradient(to right,var(--bg-secondary),rgba(239,68,68,.1))}.mobile-transport-bar .transport-btn.record.active,.mobile-transport-bar .transport-btn.record.recording{background:var(--error);color:#fff;box-shadow:0 0 20px #ef444480;animation:pulse-record 1s ease-in-out infinite}.track-item.armed{background:#ef444426;border-left-width:4px}.recording-badge{font-size:.5rem;padding:2px 4px}}@media (prefers-color-scheme: dark){:root{--bg-primary: #000000;--bg-secondary: #0d0d0d;--bg-tertiary: #1a1a1a}}@media (prefers-contrast: high){:root{--border-color: #555;--text-secondary: #aaa}.track-item,.region,.modal{border-width:2px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.mobile-panel-drawer{transition:none}}@media (max-width: 768px){.header-close-btn,.header-logout-btn{display:none}.mobile-panel-drawer .recording-panel{display:block;width:100%;border:none;background:transparent}.mobile-panel-drawer .collaborator-panel{display:block;width:100%!important;border:none;background:transparent;overflow:visible;padding-bottom:calc(1rem + var(--safe-area-bottom))}.mobile-panel-drawer .recording-section{padding:1rem}.mobile-panel-drawer .recording-panel-header,.mobile-panel-drawer .panel-header{display:none}.mobile-panel-drawer .input-select{min-height:var(--touch-target-min);font-size:1rem;padding:.75rem 1.75rem .75rem .75rem}.mobile-panel-drawer .btn-monitor{min-height:var(--touch-target-min);font-size:1rem;padding:.75rem}.mobile-panel-drawer .btn-icon{min-width:var(--touch-target-min);min-height:var(--touch-target-min);font-size:1.25rem}.mobile-panel-drawer .recording-tips{padding:1rem}.mobile-panel-drawer .recording-tips p{font-size:.875rem}.mobile-panel-drawer .recording-tips ul{font-size:.8125rem}.mobile-panel-drawer .recording-tips li{margin-bottom:.5rem}.mobile-panel-drawer .input-meter{height:16px;border-radius:8px}.mobile-panel-drawer .collaborator-item{padding:.75rem;min-height:var(--touch-target-min)}.mobile-panel-drawer .collaborator-avatar{width:36px;height:36px;font-size:.875rem}.mobile-panel-drawer .collaborator-name{font-size:1rem}.mobile-panel-drawer .collaborator-item.recording{padding:.75rem;margin:0;background:#ef44441a}.mobile-panel-drawer .collaborator-recording-status{font-size:.75rem}.mobile-panel-drawer .collaborator-rec-badge{font-size:.6875rem;padding:.25rem .5rem}.mobile-panel-drawer .btn-share{min-height:var(--touch-target-min);font-size:1rem;padding:.75rem 1rem}}.mobile-view-toggle{display:none}@media (max-width: 768px){.mobile-view-toggle{display:flex}.mobile-view-toggle .view-btn{padding:.375rem .5rem;font-size:.75rem;min-width:36px}}.mobile-transport-bar .mobile-time-display{display:block}@media (max-width: 768px){.toolbar .time-display{display:none}}.transport.loading{position:relative}.transport.loading .transport-btn{opacity:.5;pointer-events:none}.transport-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1a1a1aeb;border-radius:6px;z-index:10;gap:.375rem;padding:.25rem .5rem}.transport-loading-bar{width:100%;max-width:200px;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.transport-loading-fill{height:100%;background:linear-gradient(90deg,var(--accent),#8b5cf6);border-radius:2px;transition:width .2s ease-out;animation:loading-shimmer 1.5s ease-in-out infinite}@keyframes loading-shimmer{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.transport-loading-text{font-size:.6875rem;color:var(--text-secondary);white-space:nowrap}.mobile-transport-bar.loading{position:relative}.mobile-transport-bar.loading .transport-btn{opacity:.5;pointer-events:none}.mobile-transport-loading-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5rem;background:#1a1a1af2;padding:.5rem 1rem;border-radius:8px;z-index:10}.mobile-transport-loading-overlay .transport-loading-bar{width:80px}.mobile-transport-loading-overlay .transport-loading-text{font-size:.75rem;min-width:2.5rem}.effects-rack-overlay{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;background:var(--bg-secondary);border-left:1px solid var(--border-color);z-index:1000;display:flex;flex-direction:column;box-shadow:-4px 0 20px #00000080;animation:slideIn .2s ease-out}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.effects-rack{display:flex;flex-direction:column;height:100%;overflow:hidden}.effects-rack-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color)}.effects-rack-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--text-primary)}.effects-close{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;line-height:1;border-radius:4px;transition:all .2s}.effects-close:hover{color:var(--text-primary);background:var(--bg-hover)}.effects-list{flex:1;overflow-y:auto;padding:.5rem}.no-effects{text-align:center;color:var(--text-secondary);padding:2rem;font-size:.875rem}.effect-slot{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;margin-bottom:.5rem;overflow:hidden;transition:all .2s}.effect-slot.bypassed{opacity:.5}.effect-slot.bypassed .effect-body{filter:grayscale(100%)}.effect-slot.dragging{opacity:.4}.effect-slot.drag-over{border-color:var(--accent)}.effect-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--bg-tertiary);cursor:pointer;-webkit-user-select:none;user-select:none}.effect-header:hover{background:var(--bg-hover)}.effect-drag-handle{cursor:grab;color:var(--text-secondary);margin-right:.5rem;letter-spacing:-2px}.effect-name{font-weight:500;color:var(--text-primary)}.effect-controls{display:flex;align-items:center;gap:.5rem}.effect-bypass{padding:.25rem .5rem;font-size:.625rem;font-weight:600;border-radius:3px;border:1px solid var(--border-color);background:var(--success);color:#fff;cursor:pointer;transition:all .2s}.effect-bypass.active{background:var(--error)}.effect-remove{padding:.25rem .5rem;font-size:1rem;border:none;background:none;color:var(--text-secondary);cursor:pointer;border-radius:3px;transition:all .2s}.effect-remove:hover{color:var(--error);background:#ef44441a}.effect-expand{color:var(--text-secondary);font-size:.625rem}.effect-body,.effects-add{padding:1rem;border-top:1px solid var(--border-color)}.add-effect-btn{width:100%;padding:.75rem;background:var(--bg-tertiary);border:1px dashed var(--border-color);border-radius:6px;color:var(--text-secondary);font-size:.875rem;cursor:pointer;transition:all .2s}.add-effect-btn:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}.add-effect-menu{display:flex;flex-wrap:wrap;gap:.5rem}.add-effect-menu button{flex:1;min-width:100px;padding:.75rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:all .2s}.add-effect-menu button:hover{background:var(--accent);border-color:var(--accent)}.add-effect-menu button:last-child{background:var(--bg-primary)}.add-effect-menu button:last-child:hover{background:var(--bg-hover)}.graphic-eq{display:flex;flex-direction:column;gap:1rem}.eq-spectrum{background:var(--bg-primary);border-radius:4px;overflow:hidden}.eq-canvas{width:100%;height:150px;display:block}.eq-bands{display:flex;justify-content:space-between;gap:.25rem}.eq-band{display:flex;flex-direction:column;align-items:center;flex:1}.band-gain-label{font-size:.625rem;color:var(--text-secondary);font-family:monospace;margin-bottom:.25rem;min-height:1rem}.band-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(to top,var(--bg-tertiary),var(--bg-tertiary));border-radius:4px;cursor:pointer}.band-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000004d}.band-slider::-moz-range-thumb{width:12px;height:12px;background:var(--accent);border-radius:50%;cursor:pointer;border:none}.band-freq-label{font-size:.625rem;color:var(--text-secondary);font-family:monospace;margin-top:.25rem}.eq-presets{display:flex;gap:.5rem;flex-wrap:wrap}.eq-preset{flex:1;min-width:60px;padding:.5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all .2s}.eq-preset:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}.reverb{display:flex;flex-direction:column;gap:1rem}.reverb-visual{background:var(--bg-primary);border-radius:4px;padding:.5rem}.reverb-graph{width:100%;height:60px}.reverb-controls{display:flex;flex-direction:column;gap:.75rem}.reverb-control{display:flex;align-items:center;gap:.75rem}.reverb-control label{width:80px;font-size:.75rem;color:var(--text-secondary)}.reverb-control input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--bg-tertiary);border-radius:2px;cursor:pointer}.reverb-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000004d}.reverb-control input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;border:none}.control-value{min-width:50px;font-size:.75rem;color:var(--text-primary);font-family:monospace;text-align:right}.reverb-control.wet-dry{flex-wrap:wrap}.mix-container{flex:1;display:flex;align-items:center;gap:.5rem}.mix-label{font-size:.625rem;color:var(--text-secondary)}.reverb-presets{display:flex;gap:.5rem;flex-wrap:wrap}.reverb-preset{flex:1;min-width:70px;padding:.5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-secondary);font-size:.6875rem;cursor:pointer;transition:all .2s}.reverb-preset:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--accent)}.effects-slot-btn:hover{background:var(--bg-hover)!important;color:var(--accent)!important;border-color:var(--accent)!important}@media (max-width: 768px){.effects-rack-overlay{width:100%}.eq-bands{flex-wrap:wrap;gap:.5rem}.eq-band{min-width:40px}.band-slider{height:80px!important}.reverb-control{flex-wrap:wrap}.reverb-control label{width:100%;margin-bottom:.25rem}.control-value{min-width:auto}}[data-theme=blue],:root{--accent: #3b82f6;--accent-hover: #2563eb;--accent-rgb: 59, 130, 246;--accent-glow: rgba(59, 130, 246, .3);--accent-subtle: rgba(59, 130, 246, .1);--accent-gradient: linear-gradient(135deg, #3b82f6, #8b5cf6);--success: #22c55e;--warning: #eab308;--error: #ef4444}[data-theme=green]{--accent: #33ff33;--accent-hover: #00cc00;--accent-rgb: 51, 255, 51;--accent-glow: rgba(51, 255, 51, .3);--accent-subtle: rgba(51, 255, 51, .1);--accent-gradient: linear-gradient(135deg, #33ff33, #00ff66);--success: #33ff33;--warning: #ccff00;--error: #ff3333;--bg-primary: #0a0f0a;--bg-secondary: #0f1a0f;--bg-tertiary: #152015;--bg-hover: #1a2a1a;--border-color: #1a3a1a;--text-primary: #ccffcc;--text-secondary: #66aa66}[data-theme=amber]{--accent: #ffaa00;--accent-hover: #cc8800;--accent-rgb: 255, 170, 0;--accent-glow: rgba(255, 170, 0, .3);--accent-subtle: rgba(255, 170, 0, .1);--accent-gradient: linear-gradient(135deg, #ffaa00, #ff6600);--success: #ffcc00;--warning: #ffaa00;--error: #ff4400;--bg-primary: #0f0a05;--bg-secondary: #1a1008;--bg-tertiary: #25180c;--bg-hover: #2a1f10;--border-color: #3a2810;--text-primary: #ffeedd;--text-secondary: #aa8855}[data-theme=green] .header-logo{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 20px var(--accent-glow)}[data-theme=green] .loading-content h1{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}[data-theme=green] .loading-spinner{border-top-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}[data-theme=green] .btn-primary{background:var(--accent);color:#000;text-shadow:none}[data-theme=green] .btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 15px var(--accent-glow)}[data-theme=green] .user-avatar{background:var(--accent);color:#000;box-shadow:0 0 10px var(--accent-glow)}[data-theme=green] .connection-dot.connected,[data-theme=green] .playhead{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}[data-theme=green] .transport-btn.active{background:var(--accent);color:#000;box-shadow:0 0 10px var(--accent-glow)}[data-theme=green] .track-item.armed .arm-indicator,[data-theme=green] .btn-arm.armed{background:var(--error);box-shadow:0 0 10px #ff333380}[data-theme=green] .input-meter-fill{background:linear-gradient(to top,var(--accent),var(--warning),var(--error))}[data-theme=green] .timeline-track:hover{background:#00140080}[data-theme=green] .region{--track-color-alpha: #0a0a0a !important;border:1px solid var(--accent);box-shadow:0 0 8px var(--accent-glow),inset 0 0 12px #33ff330d}[data-theme=green] .region:hover{box-shadow:0 0 12px var(--accent-glow),0 0 0 2px var(--accent),inset 0 0 12px #33ff3314}[data-theme=green] .region.selected{box-shadow:0 0 15px var(--accent-glow),0 0 0 2px var(--accent),inset 0 0 15px #33ff331a}[data-theme=green] .fader-thumb{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}[data-theme=green] input[type=range]::-webkit-slider-thumb{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}[data-theme=green] input[type=range]::-moz-range-thumb{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}[data-theme=green] .track-color,[data-theme=green] .track-color-dot{--track-color: var(--accent) !important;box-shadow:0 0 6px var(--accent-glow)}[data-theme=green] .mixer-label-color{--track-color: var(--accent) !important;box-shadow:0 0 4px var(--accent-glow)}[data-theme=green] .region-waveform svg path{fill:var(--accent);opacity:.8}[data-theme=green] .recording-region .region-waveform svg path{fill:var(--error)}[data-theme=green] .region-waveform.loading svg path{fill:var(--accent)}[data-theme=green] .finalizing-region{border-color:var(--accent)}[data-theme=green] .finalizing-region:hover{box-shadow:0 0 0 2px var(--accent)}[data-theme=green] .finalizing-label{color:var(--accent)}[data-theme=green] .finalizing-spinner{border-color:var(--accent);border-top-color:transparent}@keyframes finalizing-pulse-green{0%,to{border-color:var(--accent);box-shadow:0 0 4px var(--accent-glow)}50%{border-color:#6f6;box-shadow:0 0 8px #33ff3380}}[data-theme=green] .finalizing-region{animation:finalizing-pulse-green 1.5s ease-in-out infinite}[data-theme=green] .transport-loading-fill{background:linear-gradient(90deg,var(--accent),#00ff66);box-shadow:0 0 6px var(--accent-glow)}[data-theme=green] .transport-loading-overlay{background:#0a0f0aeb}[data-theme=green] .mobile-transport-loading-overlay{background:#0a0f0af2}[data-theme=green] .audio-editor-waveform{border-color:var(--accent)}[data-theme=amber] .header-logo{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 20px var(--accent-glow)}[data-theme=amber] .loading-content h1{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}[data-theme=amber] .loading-spinner{border-top-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}[data-theme=amber] .btn-primary{background:var(--accent);color:#000;text-shadow:none}[data-theme=amber] .btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 15px var(--accent-glow)}[data-theme=amber] .user-avatar{background:var(--accent);color:#000;box-shadow:0 0 10px var(--accent-glow)}[data-theme=amber] .connection-dot.connected,[data-theme=amber] .playhead{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}[data-theme=amber] .transport-btn.active{background:var(--accent);color:#000;box-shadow:0 0 10px var(--accent-glow)}[data-theme=amber] .track-item.armed .arm-indicator,[data-theme=amber] .btn-arm.armed{background:var(--error);box-shadow:0 0 10px #ff440080}[data-theme=amber] .input-meter-fill{background:linear-gradient(to top,var(--accent),var(--warning),var(--error))}[data-theme=amber] .timeline-track:hover{background:#140a0080}[data-theme=amber] .region{--track-color-alpha: #0a0a0a !important;border:1px solid var(--accent);box-shadow:0 0 8px var(--accent-glow),inset 0 0 12px #ffaa000d}[data-theme=amber] .region:hover{box-shadow:0 0 12px var(--accent-glow),0 0 0 2px var(--accent),inset 0 0 12px #ffaa0014}[data-theme=amber] .region.selected{box-shadow:0 0 15px var(--accent-glow),0 0 0 2px var(--accent),inset 0 0 15px #ffaa001a}[data-theme=amber] .fader-thumb{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}[data-theme=amber] input[type=range]::-webkit-slider-thumb{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}[data-theme=amber] input[type=range]::-moz-range-thumb{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}[data-theme=amber] .track-color,[data-theme=amber] .track-color-dot{--track-color: var(--accent) !important;box-shadow:0 0 6px var(--accent-glow)}[data-theme=amber] .mixer-label-color{--track-color: var(--accent) !important;box-shadow:0 0 4px var(--accent-glow)}[data-theme=amber] .region-waveform svg path{fill:var(--accent);opacity:.8}[data-theme=amber] .recording-region .region-waveform svg path{fill:var(--error)}[data-theme=amber] .region-waveform.loading svg path{fill:var(--accent)}[data-theme=amber] .finalizing-region{border-color:var(--accent)}[data-theme=amber] .finalizing-region:hover{box-shadow:0 0 0 2px var(--accent)}[data-theme=amber] .finalizing-label{color:var(--accent)}[data-theme=amber] .finalizing-spinner{border-color:var(--accent);border-top-color:transparent}@keyframes finalizing-pulse-amber{0%,to{border-color:var(--accent);box-shadow:0 0 4px var(--accent-glow)}50%{border-color:#fc6;box-shadow:0 0 8px #ffaa0080}}[data-theme=amber] .finalizing-region{animation:finalizing-pulse-amber 1.5s ease-in-out infinite}[data-theme=amber] .transport-loading-fill{background:linear-gradient(90deg,var(--accent),#ff6600);box-shadow:0 0 6px var(--accent-glow)}[data-theme=amber] .transport-loading-overlay{background:#0f0a05eb}[data-theme=amber] .mobile-transport-loading-overlay{background:#0f0a05f2}[data-theme=amber] .audio-editor-waveform{border-color:var(--accent)}.preferences-modal{max-width:450px}.preferences-modal .modal-body{padding:1.5rem}.preferences-section{margin-bottom:1.5rem}.preferences-section:last-child{margin-bottom:0}.preferences-section h3{font-size:.875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem}.theme-options{display:flex;gap:1rem;flex-wrap:wrap}.theme-option{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:100px;flex:1}.theme-option:hover{background:var(--bg-hover);border-color:var(--text-secondary)}.theme-option.active{border-color:var(--accent);background:var(--accent-subtle)}.theme-swatch{width:48px;height:48px;border-radius:50%;border:3px solid var(--bg-primary);box-shadow:0 2px 8px #0000004d}.theme-swatch.blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}.theme-swatch.green{background:linear-gradient(135deg,#3f3,#0c0);box-shadow:0 0 15px #3f36}.theme-swatch.amber{background:linear-gradient(135deg,#fa0,#c80);box-shadow:0 0 15px #fa06}.theme-option span{font-size:.875rem;color:var(--text-primary);font-weight:500}.theme-option.active span{color:var(--accent)}.user-avatar.clickable{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.user-avatar.clickable:hover{transform:scale(1.1);box-shadow:0 0 12px var(--accent-glow)}.preferences-user-info{display:flex;align-items:center;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color);margin-bottom:1.5rem}.preferences-avatar{width:48px;height:48px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:600;color:#fff;overflow:hidden}.preferences-avatar-button{border:none;padding:0;cursor:pointer;flex-shrink:0}.preferences-avatar-button:disabled{cursor:default;opacity:.7}.preferences-user-details h2{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin:0 0 .25rem}.preferences-user-details p{font-size:.875rem;color:var(--text-secondary);margin:0}body,.app,.header,.toolbar,.track-list,.timeline,.mixer,.recording-panel,.collaborator-panel,.modal-overlay,.modal,.modal-content,.btn,.track-item,.region{transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}@media (max-width: 768px){.theme-options{flex-direction:column}.theme-option{flex-direction:row;justify-content:flex-start;padding:.75rem 1rem;min-width:unset}.theme-swatch{width:36px;height:36px}.preferences-modal{max-width:100%}}