.audio-editor-container{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-primary);z-index:10000;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;padding-bottom:100px;overflow-y:auto;max-width:100vw;box-sizing:border-box}.audio-editor-loading{display:flex;align-items:center;justify-content:center;height:100vh;color:var(--text-primary)}.audio-editor-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:transparent;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s}.audio-editor-close:hover{background:var(--bg-secondary)}.audio-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.audio-editor-filename{font-size:1.25rem;font-weight:600;color:var(--text-primary);flex:1}.audio-editor-metadata{display:flex;gap:1.5rem;font-size:.9rem;color:var(--text-secondary)}.audio-tracks{display:flex;flex-direction:column;gap:.75rem;margin:0 auto;padding-bottom:1.5rem;max-width:100%;width:100%;overflow-x:hidden;position:relative}.unified-time-indicator .unified-time-display{position:absolute;top:-35px;left:1px;transform:translate(-50%);background:#000000b3;color:#fff;padding:4px 12px;border-radius:12px;font-size:.875rem;font-weight:500;white-space:nowrap;z-index:20;font-variant-numeric:tabular-nums}.audio-track{display:flex;flex-direction:row;align-items:center;gap:1rem;width:100%;margin-bottom:.5rem}.track-controls{display:flex;flex-direction:row;align-items:center;gap:1rem;min-width:200px;flex-shrink:0}.track-label{color:#fff;font-weight:600;font-size:1rem;min-width:60px;text-align:left}.volume-slider-wrapper{position:relative;width:120px;height:20px;display:flex;align-items:center}.volume-slider{width:100%;height:4px;background:#aea9a933;border-radius:2px;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;position:relative;z-index:2}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:20px;background:#fff;border-radius:0;cursor:pointer;position:relative;z-index:3}.volume-slider::-moz-range-thumb{width:12px;height:20px;background:#fff;border-radius:0;cursor:pointer;border:none;position:relative;z-index:3}.volume-slider-fill{position:absolute;top:50%;height:4px;background:#e7e0e066;border-radius:2px;pointer-events:none;z-index:1;transform:translateY(-50%);transition:width .1s ease}.music-track .volume-slider-fill,.vocal-track .volume-slider-fill{left:0}.volume-slider-track{position:relative;width:120px;height:4px;background:#fff3;border-radius:2px;cursor:pointer;overflow:visible}.volume-slider-inner{position:absolute;top:0;left:0;height:100%;background:#ffffff80;border-radius:2px;transition:width .1s ease;pointer-events:none}.music-track .volume-slider-inner,.vocal-track .volume-slider-inner{left:0}.volume-slider-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:20px;background:#fff;border-radius:10px;cursor:pointer;pointer-events:none;transition:left .1s ease,box-shadow .2s ease}.volume-slider-handle.active{box-shadow:0 0 8px #6496ffcc,0 0 12px #6496ff99}.volume-slider-value{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:8px;background:#3c3c3ce6;color:#fff;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:600;white-space:nowrap;opacity:1;pointer-events:none}.audio-track.music-track .waveform-wrapper{background:#19653f}.audio-track.vocal-track .waveform-wrapper{background:#4f2963}.waveform-wrapper{position:relative;border-radius:16px;padding:.5rem .75rem;cursor:pointer;flex:1;min-width:0;height:120px;display:flex;align-items:center;overflow:hidden}.waveform-container{width:100%;height:100%;max-width:100%}.waveform-canvas{width:100%;height:80%;display:block;max-width:100%}.unified-time-indicator{position:absolute;top:40px;bottom:40px;width:1px;background:#fff;pointer-events:none;z-index:10}.time-indicator{position:absolute;top:0;bottom:0;width:1px;background:#fff;pointer-events:none;transform:translate(-50%)}.time-display{position:absolute;top:-25px;left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:2px 6px;border-radius:4px;font-size:.75rem;white-space:nowrap}.time-display-bottom{position:absolute;bottom:8px;right:12px;color:#fff;font-size:.875rem;font-weight:500;background:#0000004d;padding:2px 6px;border-radius:3px}.audio-metadata{display:flex;gap:2rem;padding:1rem 0;color:var(--text-secondary);font-size:.9rem;justify-content:flex-end;align-items:center}.audio-editor-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;border-top:1px solid var(--border-color);background:var(--bg-primary);z-index:10001}.playback-controls{display:flex;gap:1rem;align-items:center;justify-content:center}.play-button{width:108px;height:58px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:30px;color:var(--text-primary);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.play-button:hover{background:var(--bg-card);transform:scale(1.05)}.skip-back-button{width:58px;height:58px;background:transparent;border:1px solid var(--border-color);border-radius:50%;color:var(--text-primary);font-size:2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.skip-back-button:hover{background:var(--bg-secondary)}.save-controls{display:flex;gap:1rem;align-items:center}.format-select{padding:.5rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.9rem;cursor:pointer}.save-button{padding:.75rem 1rem;background:var(--text-primary);color:var(--bg-primary);border-radius:50%;font-size:1.5rem;font-weight:600;cursor:pointer;border:none;transition:all .2s}.save-button:hover{opacity:.9;transform:translateY(-1px)}@media (max-width: 768px){.audio-editor-container{padding:1rem}.audio-editor-controls{flex-direction:column;gap:1rem;align-items:stretch}.save-controls{width:100%;justify-content:space-between}}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden}.confetti-piece{position:absolute;top:-50px;font-size:20px;animation:confetti-fall linear forwards;-webkit-user-select:none;user-select:none}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.confetti-piece:nth-child(odd){animation-name:confetti-fall-left}.confetti-piece:nth-child(2n){animation-name:confetti-fall-right}@keyframes confetti-fall-left{0%{transform:translateY(0) translate(0) rotate(0);opacity:1}to{transform:translateY(100vh) translate(-100px) rotate(720deg);opacity:0}}@keyframes confetti-fall-right{0%{transform:translateY(0) translate(0) rotate(0);opacity:1}to{transform:translateY(100vh) translate(100px) rotate(-720deg);opacity:0}}.login-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:10000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.login-modal-content{background:var(--bg-card);border-radius:16px;padding:32px 40px;box-shadow:0 20px 60px #00000080;max-width:400px;width:90%;text-align:center;position:relative;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.login-modal-close{position:absolute;top:16px;right:16px;background:transparent;border:none;color:var(--text-secondary);font-size:28px;line-height:1;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.login-modal-close:hover{background:#ffffff1a;color:var(--text-primary)}.login-modal-header h2{margin:0 0 12px;font-size:24px;font-weight:700;color:var(--text-primary)}.login-modal-header p{margin:0 0 32px;font-size:14px;color:var(--text-secondary);line-height:1.5}.google-login-button-modal{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px 24px;background:#fff;border:1px solid #dadce0;border-radius:8px;font-size:16px;font-weight:500;color:#3c4043;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000001a}.google-login-button-modal:hover{box-shadow:0 2px 4px #00000026;background:#f8f9fa}.google-login-button-modal:active{box-shadow:0 1px 2px #0000001a;background:#f1f3f4}.google-icon{flex-shrink:0}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #17171e;--bg-secondary: #1e1e26;--bg-card: #252530;--text-primary: #eeeeee;--text-secondary: #b0b0b0;--text-muted: #808080;--accent-color: #4a90e2;--accent-hover: #357abd;--border-color: #2d2d3a;--success-color: #4caf50;--error-color: #f44336;--nav-bg: rgb(30, 30, 38)}body{font-family:Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6}.app{min-height:100vh;display:flex;position:relative}.navigation{position:fixed;left:0;top:0;width:260px;height:100vh;background:var(--nav-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;z-index:1000;transition:transform .3s ease;overflow-y:auto}.nav-tools{flex:1;padding:1rem 0}.nav-link{display:flex;align-items:center;padding:.875rem 1.5rem;color:var(--text-secondary);text-decoration:none;transition:all .2s ease;border-left:3px solid transparent;gap:.75rem}.nav-link:hover{background:#ffffff0d;color:var(--text-primary)}.nav-link.active{background:#4a90e21a;border-left-color:var(--accent-color);color:var(--accent-color)}.nav-icon{font-size:1.5rem;width:2.5em;height:1.7em;display:flex;align-items:center;justify-content:center}.nav-text{font-size:.95rem;font-weight:500}.nav-footer{border-top:1px solid var(--border-color);padding:.5rem 0}.nav-user-info{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;margin-bottom:.5rem;background:#ffffff08;border-radius:8px;margin-left:.5rem;margin-right:.5rem}.nav-user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--border-color)}.nav-user-name{font-size:.875rem;color:var(--text-primary);font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.help-link,.logout-link{color:var(--text-muted)}.logout-link:hover{color:var(--error-color)}.menu-toggle{position:fixed;top:1rem;left:1rem;width:40px;height:40px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;z-index:1001;transition:all .3s ease}.menu-toggle span{width:20px;height:2px;background:var(--text-primary);transition:all .3s ease}.menu-toggle:hover{background:var(--bg-card)}.nav-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:999}.main-content{flex:1;margin-left:260px;padding:2rem;max-width:none;width:calc(100% - 260px);min-height:100vh}.top-menu{text-align:center;margin-bottom:1.5rem}.top-menu menu{list-style:none;display:inline-flex;gap:1rem;padding:0}.top-menu a{color:var(--text-secondary);text-decoration:none;font-size:.9rem;padding:.5rem 1rem;border-radius:6px;transition:all .2s ease}.top-menu a:hover{background:#ffffff0d;color:var(--text-primary)}.how-it-works{margin:2rem auto;max-width:800px}.how-it-works-toggle{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:.95rem;padding:.5rem 1rem;display:flex;align-items:center;gap:.5rem;margin:0 auto;transition:color .2s}.how-it-works-toggle:hover{color:var(--text-primary)}.arrow{font-size:.7rem;transition:transform .3s}.arrow.open{transform:rotate(180deg)}.how-it-works-content{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:2rem;margin-top:1rem;color:var(--text-secondary);line-height:1.8}.how-it-works-content h3{color:var(--text-primary);margin-top:1.5rem;margin-bottom:.75rem;font-size:1.1rem}.how-it-works-content h3:first-child{margin-top:0}.how-it-works-content ol,.how-it-works-content ul{margin-left:1.5rem;margin-bottom:1rem}.how-it-works-content li,.how-it-works-content p{margin-bottom:.5rem}.hero-section{text-align:center;margin-bottom:3rem;padding:2rem 0}.hero-title{font-size:3rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem;line-height:1.2}.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:2rem;font-weight:400}.upload-section{background:var(--bg-card);border-radius:16px;padding:3rem 2rem;border:1px solid var(--border-color);margin-bottom:3rem;max-width:800px;margin-left:auto;margin-right:auto}.upload-area{border:3px dashed var(--border-color);border-radius:12px;padding:4rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:#ffffff05;margin-bottom:2rem}.upload-area:hover{border-color:var(--accent-color);background:#4a90e20d}.upload-area.drag-active{border-color:var(--accent-color);background:#4a90e21a}.upload-label{cursor:pointer;display:block;width:100%}.upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-icon{font-size:4rem;opacity:.6}.upload-placeholder p{color:var(--text-secondary);font-size:1rem;margin:0}.upload-hint{font-size:.875rem!important;color:var(--text-muted)!important}.file-info{display:flex;flex-direction:column;align-items:center;gap:.75rem}.file-icon{font-size:3rem}.file-name{font-size:1.1rem;color:var(--text-primary);font-weight:500}.file-size{color:var(--text-secondary);font-size:.9rem}.mode-selector-group{margin-bottom:2rem;text-align:left}.mode-selector-label{display:block;font-size:.95rem;font-weight:500;color:var(--text-primary);margin-bottom:.75rem}.mode-selector-select{width:100%;padding:.875rem 1rem;font-size:1rem;border:2px solid var(--border-color);border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:border-color .2s}.mode-selector-select:hover{border-color:var(--accent-color)}.mode-selector-select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #4a90e233}.mode-description{margin-top:.5rem;font-size:.875rem;color:var(--text-secondary);line-height:1.5}.action-button{width:100%;padding:1rem 2rem;font-size:1.1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent-color) 0%,var(--accent-hover) 100%);border:none;border-radius:10px;cursor:pointer;transition:all .2s ease}.action-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 16px #4a90e24d}.action-button:active:not(:disabled){transform:translateY(0)}.action-button:disabled{opacity:.6;cursor:not-allowed}.upload-button-large{display:block;margin:2rem auto 0;padding:1rem 3rem;font-size:1.1rem;font-weight:600;color:#fff;background:#4a90e2;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.upload-button-large:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 12px #4a90e266}.upload-button-large:active:not(:disabled){transform:translateY(0)}.progress-section{background:var(--bg-card);border-radius:16px;padding:3rem 2rem;border:1px solid var(--border-color);text-align:center;margin-bottom:2rem;max-width:800px;margin-left:auto;margin-right:auto;display:block}.progress-header{margin-bottom:1.5rem}.progress-status{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.progress-percent{font-size:1.1rem;font-weight:600;color:var(--accent-color)}.progress-bar{width:100%;height:32px;background:var(--bg-secondary);border-radius:16px;overflow:hidden;margin-top:1rem;border:1px solid var(--border-color)}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-color) 0%,var(--accent-hover) 100%);transition:width .3s ease;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.875rem;font-weight:600}.download-section-wrapper{max-width:900px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;gap:1.5rem}.download-completion-banner{background:var(--bg-card);border-radius:16px;padding:1.5rem 2rem;border:1px solid var(--border-color);text-align:center}.download-completion-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin:0}.download-section{background:var(--bg-card);border-radius:16px;padding:2.5rem 2rem;border:1px solid var(--border-color)}.download-header{text-align:center;margin-bottom:2rem}.download-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.download-subtitle{color:var(--text-secondary);font-size:.95rem}.download-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:0}@media (max-width: 768px){.download-grid{grid-template-columns:1fr}}.download-card{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:12px;padding:2rem 1.5rem;text-align:center;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-height:200px}.download-card:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.download-card-icon{font-size:3rem;margin-bottom:1rem;filter:grayscale(0)}.download-card-label{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:1.5rem;flex-grow:1;display:flex;align-items:center;justify-content:center}.download-button{width:100%;padding:1rem 1.5rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent-color) 0%,var(--accent-hover) 100%);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;margin-top:auto}.download-button:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0006}.download-button:active{transform:translateY(0)}.download-button.vocals{background:linear-gradient(90deg,#ff6b9d,#ff4757)}.download-button.vocals:hover{box-shadow:0 6px 12px #ff6b9d66}.download-button.accompaniment{background:linear-gradient(90deg,#4facfe,#00f2fe)}.download-button.accompaniment:hover{box-shadow:0 6px 12px #4facfe66}.download-button.drums{background:linear-gradient(135deg,#fa709a,#fee140)}.download-button.bass{background:linear-gradient(135deg,#30cfd0,#330867)}.download-button.other{background:linear-gradient(135deg,#a8edea,#fed6e3);color:#333}.info-section{background:var(--bg-card);border-radius:16px;padding:3rem 2rem;border:1px solid var(--border-color);margin-top:3rem;max-width:800px;margin-left:auto;margin-right:auto}.info-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:1rem;text-align:center}.info-content{color:var(--text-secondary);line-height:1.8;font-size:.95rem}.info-content p{margin-bottom:1rem}.error-message{background:#f443361a;border:2px solid var(--error-color);border-radius:12px;padding:1.5rem;text-align:center;margin:2rem 0;max-width:800px;margin-left:auto;margin-right:auto}.error-message p{color:var(--error-color);font-size:1rem;margin-bottom:1rem}.reset-button{display:block;width:100%;padding:.875rem 1.5rem;font-size:1rem;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;transition:all .2s ease;margin:0;box-sizing:border-box}.reset-button:hover{background:var(--bg-card);border-color:var(--accent-color);color:var(--text-primary)}@media (max-width: 1024px){.navigation{transform:translate(-100%)}.navigation.open{transform:translate(0)}.nav-overlay{display:block}.menu-toggle{display:flex}.main-content{margin-left:0;padding:4rem 1rem 1rem}}@media (max-width: 768px){.hero-title{font-size:2rem}.hero-subtitle{font-size:1rem}.upload-section,.progress-section,.download-section,.info-section{padding:2rem 1.5rem}.download-grid{grid-template-columns:1fr}}@media (max-width: 480px){.hero-title{font-size:1.75rem}.upload-area{padding:3rem 1.5rem}.navigation{width:240px}}.waveform-section{background:var(--bg-card);border-radius:16px;padding:2rem;border:1px solid var(--border-color);margin-bottom:2rem;max-width:900px;margin-left:auto;margin-right:auto}.waveform-filename{color:var(--text-primary);font-size:.9rem;margin-bottom:1rem;text-align:center;word-break:break-all}.waveform-canvas{width:100%;height:120px;cursor:pointer;border-radius:8px;background:var(--bg-secondary)}.waveform-time{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:.75rem;color:var(--text-secondary);font-size:.9rem;font-family:Courier New,monospace}.controls-section{background:var(--bg-card);border-radius:16px;padding:3rem 2rem;border:1px solid var(--border-color);margin-bottom:2rem;max-width:800px;margin-left:auto;margin-right:auto}.pitch-speed-controls{display:flex;flex-direction:column;gap:2.5rem}.control-group{display:flex;flex-direction:column;gap:1rem}.control-header{display:flex;justify-content:space-between;align-items:center}.control-label{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.control-value{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.value-main{font-size:1.25rem;font-weight:700;color:var(--accent-color);font-family:Courier New,monospace}.value-secondary{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-secondary)}.key-label{font-size:.85rem}.key-value,.bpm-value{font-weight:600;color:var(--text-primary)}.control-slider{width:100%;height:8px;border-radius:4px;background:var(--bg-secondary);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent-color);cursor:pointer;border:2px solid var(--bg-card);box-shadow:0 2px 4px #0000004d}.control-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent-color);cursor:pointer;border:2px solid var(--bg-card);box-shadow:0 2px 4px #0000004d}.control-slider::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.1)}.control-slider::-moz-range-thumb:hover{background:var(--accent-hover);transform:scale(1.1)}.control-options{margin-top:.5rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary);font-size:.9rem;cursor:pointer}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--accent-color)}.control-actions{margin-top:2rem}.player-section{background:var(--bg-card);border-radius:16px;padding:2rem;border:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;max-width:900px;margin-left:auto;margin-right:auto;margin-bottom:2rem}.audio-player{display:flex;align-items:center;gap:1rem}.player-controls{display:flex;gap:.75rem}.player-button{width:48px;height:48px;border-radius:50%;background:var(--bg-secondary);border:2px solid var(--border-color);color:var(--text-primary);font-size:1.25rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.player-button:hover{background:var(--bg-card);border-color:var(--accent-color);transform:scale(1.05)}.player-button:active{transform:scale(.95)}.save-controls{display:flex;align-items:center;gap:1.5rem}.format-selector{display:flex;align-items:center;gap:.75rem;color:var(--text-secondary);font-size:.95rem}.format-select{padding:.5rem 1rem;font-size:.95rem;border:2px solid var(--border-color);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:border-color .2s}.format-select:hover{border-color:var(--accent-color)}.format-select:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px #4a90e233}.save-button{padding:.75rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#9b59b6,#8e44ad);border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.save-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #9b59b666}.save-button:active{transform:translateY(0)}@media (max-width: 768px){.player-section{flex-direction:column;gap:1.5rem}.save-controls{width:100%;justify-content:space-between}.waveform-canvas{height:80px}.controls-section{padding:2rem 1.5rem}}