.notification{position:fixed;top:20px;right:20px;z-index:10003;min-width:300px;max-width:500px;padding:1rem;border-radius:8px;box-shadow:0 4px 12px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translate(100%);opacity:0;transition:all .3s ease}.notification.show{transform:translate(0);opacity:1}.notification.hide{transform:translate(100%);opacity:0}.notification-content{display:flex;align-items:center;gap:.75rem}.notification-icon{font-size:1.25rem;flex-shrink:0}.notification-message{flex:1;color:#fff;font-size:.95rem;line-height:1.4}.notification-close{background:none;border:none;color:#ffffffb3;font-size:1.5rem;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease;flex-shrink:0}.notification-close:hover{background:#ffffff1a;color:#fff}.notification-success{background:linear-gradient(135deg,#22c55ee6,#16a34ae6);border:1px solid rgba(34,197,94,.3)}.notification-error{background:linear-gradient(135deg,#ef4444e6,#dc2626e6);border:1px solid rgba(239,68,68,.3)}.notification-warning{background:linear-gradient(135deg,#f59e0be6,#d97706e6);border:1px solid rgba(245,158,11,.3)}.notification-info{background:linear-gradient(135deg,#3b82f6e6,#2563ebe6);border:1px solid rgba(59,130,246,.3)}@media (max-width: 768px){.notification{top:10px;right:10px;left:10px;min-width:auto;max-width:none}}.confirm-dialog-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10002;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.confirm-dialog{background:linear-gradient(135deg,#1a1a1a,#2d1b1b,#1a1a1a);border:1px solid rgba(220,38,38,.3);border-radius:12px;padding:0;max-width:400px;width:90%;color:#fecaca;box-shadow:0 8px 32px #0006;animation:dialogSlideIn .3s ease-out}@keyframes dialogSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.confirm-dialog-header{padding:1.5rem 1.5rem 1rem;border-bottom:1px solid rgba(220,38,38,.2)}.confirm-dialog-header h3{margin:0;color:#fecaca;font-size:1.25rem;font-weight:600}.confirm-dialog-body{padding:1.5rem}.confirm-dialog-body p{margin:0;color:#d1d5db;line-height:1.5;font-size:1rem}.confirm-dialog-actions{padding:1rem 1.5rem 1.5rem;display:flex;gap:1rem;justify-content:flex-end}.confirm-dialog-cancel,.confirm-dialog-confirm{padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;min-width:80px}.confirm-dialog-cancel{background:#6b7280;color:#fff}.confirm-dialog-cancel:hover{background:#4b5563}.confirm-dialog-confirm{color:#fff}.confirm-dialog-danger{background:linear-gradient(135deg,#dc2626,#b91c1c)}.confirm-dialog-danger:hover{background:linear-gradient(135deg,#b91c1c,#991b1b)}.confirm-dialog-success{background:linear-gradient(135deg,#22c55e,#16a34a)}.confirm-dialog-success:hover{background:linear-gradient(135deg,#16a34a,#15803d)}.confirm-dialog-warning{background:linear-gradient(135deg,#f59e0b,#d97706)}.confirm-dialog-warning:hover{background:linear-gradient(135deg,#d97706,#b45309)}@media (max-width: 768px){.confirm-dialog{margin:1rem;width:calc(100% - 2rem)}.confirm-dialog-actions{flex-direction:column}.confirm-dialog-cancel,.confirm-dialog-confirm{width:100%}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-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:linear-gradient(135deg,#1a1a1a,#2d1b1b,#1a1a1a);min-height:100vh}.app-container{min-height:100vh;display:flex;flex-direction:column}.app-header{background:#dc26261a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(220,38,38,.3);position:relative;z-index:10001}.header-content{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1200px;margin:0 auto}.logo{color:#fecaca;font-size:1.5rem;font-weight:700;text-decoration:none}.header-nav{display:flex;gap:1rem}.nav-button{background:none;border:none;color:#fecacacc;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s;font-size:1rem}.nav-button:hover{background:#dc262633;color:#fecaca}.header-actions{display:flex;align-items:center;gap:1rem;color:#fff}.hamburger-menu{display:none;flex-direction:column;background:none;border:none;cursor:pointer;padding:.5rem;z-index:10002;position:relative}.hamburger-line{width:25px;height:3px;background:#fecaca;margin:3px 0;transition:all .3s ease;border-radius:2px}.hamburger-line.open:nth-child(1){transform:rotate(45deg) translate(6px,6px)}.hamburger-line.open:nth-child(2){opacity:0}.hamburger-line.open:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.mobile-menu-backdrop{position:fixed;inset:0;background:#0000004d;z-index:9999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.mobile-menu{position:absolute;top:100%;left:0;right:0;background:#1a1a1afa;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(220,38,38,.3);padding:1rem;z-index:10000;animation:slideDown .3s ease-out;box-shadow:0 4px 20px #00000080}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.mobile-nav{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.mobile-nav-button{background:none;border:none;color:#fecacacc;padding:.75rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s;font-size:1rem;text-align:left}.mobile-nav-button:hover{background:#dc262633;color:#fecaca}.mobile-actions{display:flex;flex-direction:column;gap:1rem;padding-top:1rem;border-top:1px solid rgba(220,38,38,.2)}.mobile-user-email{font-size:.9rem;opacity:.8;color:#fff}.mobile-logout-button{background:#dc262633;border:1px solid rgba(220,38,38,.4);color:#fecaca;padding:.75rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s;font-size:1rem;text-align:left}.mobile-logout-button:hover{background:#dc26264d}.user-email{font-size:.9rem;opacity:.8}.logout-button{background:#dc262633;border:1px solid rgba(220,38,38,.4);color:#fecaca;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s}.logout-button:hover{background:#dc26264d}.landing-page{min-height:100vh;color:#fff}.hero{display:flex;align-items:center;justify-content:space-between;padding:4rem 2rem;max-width:1200px;margin:0 auto;min-height:80vh}.hero-content{flex:1;max-width:600px}.hero h1{font-size:4rem;font-weight:800;margin-bottom:1rem;background:linear-gradient(45deg,#fecaca,#dc2626,#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:1.5rem;margin-bottom:1rem;opacity:.9}.hero-description{font-size:1.1rem;line-height:1.6;margin-bottom:2rem;opacity:.8}.cta-buttons{display:flex;gap:1rem;flex-wrap:wrap}.cta-primary,.cta-secondary{padding:1rem 2rem;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s;border:none}.cta-primary{background:linear-gradient(45deg,#dc2626,#b91c1c);color:#fff;box-shadow:0 4px 15px #dc262666}.cta-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #dc262699}.cta-secondary{background:#dc26261a;color:#fecaca;border:2px solid rgba(220,38,38,.3)}.cta-secondary:hover{background:#dc262633;transform:translateY(-2px)}.hero-visual{flex:1;display:flex;justify-content:center;align-items:center}.music-visualizer{display:flex;align-items:end;gap:4px;height:200px}.bar{width:8px;background:linear-gradient(to top,#dc2626,#fecaca);border-radius:4px;animation:bounce 1.5s ease-in-out infinite}.bar:nth-child(1){height:60px;animation-delay:0s}.bar:nth-child(2){height:120px;animation-delay:.1s}.bar:nth-child(3){height:80px;animation-delay:.2s}.bar:nth-child(4){height:160px;animation-delay:.3s}.bar:nth-child(5){height:100px;animation-delay:.4s}.bar:nth-child(6){height:140px;animation-delay:.5s}.bar:nth-child(7){height:90px;animation-delay:.6s}.bar:nth-child(8){height:110px;animation-delay:.7s}@keyframes bounce{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1)}}.features{padding:4rem 2rem;background:#dc26260d}.container{max-width:1200px;margin:0 auto}.features h2{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#fff}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.feature-card{background:#dc26261a;padding:2rem;border-radius:16px;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(220,38,38,.2);transition:transform .3s}.feature-card:hover{transform:translateY(-5px)}.feature-icon{font-size:3rem;margin-bottom:1rem}.feature-card h3{font-size:1.5rem;margin-bottom:1rem;color:#fff}.feature-card p{color:#fffc;line-height:1.6}.how-it-works{padding:4rem 2rem}.how-it-works h2{text-align:center;font-size:2.5rem;margin-bottom:3rem;color:#fff}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.step{text-align:center;padding:2rem}.step-number{width:60px;height:60px;background:linear-gradient(45deg,#dc2626,#b91c1c);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;margin:0 auto 1rem}.step h3{font-size:1.3rem;margin-bottom:1rem;color:#fff}.step p{color:#fffc;line-height:1.6}.footer{padding:2rem;text-align:center;color:#fff9;border-top:1px solid rgba(255,255,255,.1)}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;width:100%}.auth-container .auth-card{width:100%;max-width:400px}.auth-card{background:#dc26261a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;border-radius:16px;border:1px solid rgba(220,38,38,.2);text-align:center}.auth-card h2{color:#fff;font-size:2rem;margin-bottom:.5rem}.auth-card p{color:#fffc;margin-bottom:2rem}.auth-form{margin-bottom:1.5rem}.form-group{margin-bottom:1rem;text-align:left}.form-group label{display:block;color:#fff;margin-bottom:.5rem;font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid rgba(220,38,38,.3);border-radius:8px;background:#dc26261a;color:#fff;font-size:1rem}.form-group input::placeholder{color:#ffffff80}.auth-button,.google-button{width:100%;padding:.75rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:.5rem}.auth-button{background:linear-gradient(45deg,#dc2626,#b91c1c);color:#fff}.auth-button:hover{transform:translateY(-1px)}.google-button{background:#dc26261a;color:#fecaca;border:1px solid rgba(220,38,38,.3)}.google-button:hover{background:#dc262633}.divider{position:relative;margin:1.5rem 0;text-align:center;color:#fff9}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#dc26264d}.divider span{background:#dc26261a;padding:0 1rem}.auth-switch{color:#fffc}.link-button{background:none;border:none;color:#fecaca;cursor:pointer;text-decoration:underline;font-size:inherit}.error-message{background:#dc262633;color:#fecaca;padding:.75rem;border-radius:8px;margin-bottom:1rem;border:1px solid rgba(220,38,38,.3)}.dashboard{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.dashboard-content{padding-top:2rem}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.dashboard-header h1{color:#fff;font-size:2.5rem}.new-track-button{background:linear-gradient(45deg,#dc2626,#b91c1c);color:#fff;border:none;padding:1rem 2rem;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s}.new-track-button:hover{transform:translateY(-2px);box-shadow:0 4px 15px #dc262666}.empty-state{text-align:center;padding:4rem 2rem;color:#fff}.empty-icon{font-size:4rem;margin-bottom:1rem}.empty-state h2{font-size:2rem;margin-bottom:1rem}.empty-state p{font-size:1.1rem;margin-bottom:2rem;opacity:.8}.tracks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.track-card{background:#dc26261a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.5rem;border-radius:12px;border:1px solid rgba(220,38,38,.2);transition:transform .3s}.track-card:hover{transform:translateY(-2px)}.track-info h3{color:#fff;margin-bottom:.5rem}.track-description{color:#fffc;margin-bottom:1rem}.track-meta{display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.track-meta span{background:#ffffff1a;padding:.25rem .75rem;border-radius:20px;font-size:.9rem;color:#ffffffe6}.track-actions{display:flex;gap:.5rem}.action-button{padding:.5rem 1rem;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-button.play{background:linear-gradient(45deg,#4ecdc4,#44a08d);color:#fff}.action-button.download{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3)}.action-button:hover{transform:translateY(-1px)}.music-studio{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.studio-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.back-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.5rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s}.back-button:hover{background:#fff3}.studio-header h1{color:#fff;font-size:2.5rem}.studio-content{display:flex;flex-direction:column;gap:2rem}.prompt-section{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;border-radius:16px;border:1px solid rgba(255,255,255,.2)}.prompt-section h2{color:#fff;margin-bottom:1rem}.prompt-input{display:flex;flex-direction:column;gap:1rem}.prompt-input textarea{width:100%;padding:1rem;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:#ffffff1a;color:#fff;font-size:1rem;resize:vertical;min-height:100px}.prompt-input textarea::placeholder{color:#ffffff80}.generate-button{background:linear-gradient(45deg,#ff6b6b,#ee5a24);color:#fff;border:none;padding:1rem 2rem;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s;align-self:flex-start}.generate-button:hover{transform:translateY(-2px)}.generate-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.instructions-section{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;border-radius:16px;border:1px solid rgba(255,255,255,.2)}.instructions-section h3{color:#fff;margin-bottom:1rem}.instructions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.instruction-item{background:#ffffff0d;padding:1rem;border-radius:8px;color:#fff}.player-section{background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem;border-radius:16px;border:1px solid rgba(255,255,255,.2)}.player-section h3{color:#fff;margin-bottom:1rem}.music-player{color:#fff;flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.player-content{padding-top:2rem}.audio-player{background:#dc26261a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:2rem;border:1px solid rgba(220,38,38,.2);margin-bottom:2rem}.track-info-header{display:flex;align-items:center;margin-bottom:2rem;gap:1rem}.track-artwork{width:80px;height:80px;border-radius:12px;overflow:hidden;background:linear-gradient(45deg,#dc2626,#b91c1c);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #dc26264d}.artwork-placeholder{font-size:2rem;color:#fff}.music-note-icon{width:2rem;height:2rem;color:#fff}.track-details-header h3{font-size:1.5rem;margin:0 0 .5rem;color:#fecaca}.track-artist{color:#fecacacc;margin:0;font-size:1rem}.progress-container{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}.time-display{font-size:.9rem;color:#fecacacc;min-width:40px;text-align:center}.progress-bar{flex:1;height:6px;background:#fecaca33;border-radius:3px;cursor:pointer;position:relative;transition:all .2s}.progress-bar:hover{height:8px}.progress-fill{height:100%;background:linear-gradient(90deg,#dc2626,#fecaca);border-radius:3px;transition:width .1s}.progress-handle{position:absolute;top:50%;width:16px;height:16px;background:#fecaca;border:2px solid #dc2626;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;opacity:0;transition:opacity .2s}.progress-bar:hover .progress-handle{opacity:1}.player-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}.control-btn{background:none;border:none;color:#fecaca;font-size:1.2rem;cursor:pointer;padding:.5rem;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center;width:40px;height:40px}.control-btn .icon{width:1.2rem;height:1.2rem;fill:currentColor}.control-btn .main-icon{width:1.5rem;height:1.5rem}.control-btn:hover{background:#dc262633;transform:scale(1.1)}.main-play-btn{background:linear-gradient(45deg,#dc2626,#b91c1c);color:#fff;font-size:1.5rem;width:60px;height:60px;box-shadow:0 4px 15px #dc262666}.main-play-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #dc262699}.main-play-btn.playing{background:linear-gradient(45deg,#b91c1c,#991b1b)}.player-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem}.volume-control{display:flex;align-items:center;gap:.5rem;flex:1}.volume-icon{font-size:1.2rem;color:#fecaca;width:1.2rem;height:1.2rem;fill:currentColor}.volume-slider{flex:1;height:4px;background:#fecaca33;border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:#fecaca;border-radius:50%;cursor:pointer;border:2px solid #dc2626}.volume-slider::-moz-range-thumb{width:16px;height:16px;background:#fecaca;border-radius:50%;cursor:pointer;border:2px solid #dc2626}.export-dropdown{position:relative}.export-btn{background:linear-gradient(45deg,#dc2626,#b91c1c);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:.5rem}.export-btn .icon{width:1rem;height:1rem;fill:currentColor}.export-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #dc262666}.export-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.export-menu{position:absolute;top:100%;right:0;background:#1a1a1af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(220,38,38,.3);border-radius:8px;padding:.5rem;min-width:180px;z-index:1000;box-shadow:0 8px 25px #0000004d}.export-option{display:flex;align-items:center;gap:.5rem;width:100%;background:none;border:none;color:#fecaca;padding:.75rem 1rem;text-align:left;cursor:pointer;border-radius:4px;transition:all .2s}.export-option .icon-small{width:.875rem;height:.875rem;fill:currentColor}.export-option:hover{background:#dc262633}.record-btn{background:#dc262633;color:#fecaca;border:1px solid rgba(220,38,38,.3);padding:.75rem 1.5rem;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.5rem}.record-btn .icon{width:1rem;height:1rem;fill:currentColor}.record-btn:hover{background:#dc26264d}.record-btn.recording{background:linear-gradient(45deg,#dc2626,#b91c1c);animation:pulse 1s infinite}.player-controls{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.play-button,.record-button,.export-button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.play-button{background:linear-gradient(45deg,#4ecdc4,#44a08d);color:#fff}.play-button.playing{background:linear-gradient(45deg,#ff6b6b,#ee5a24)}.record-button{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3)}.record-button.recording{background:linear-gradient(45deg,#ff6b6b,#ee5a24);animation:pulse 1s infinite}.export-button{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff}.play-button:hover,.record-button:hover,.export-button:hover{transform:translateY(-1px)}.play-button:disabled,.record-button:disabled,.export-button:disabled{opacity:.6;cursor:not-allowed;transform:none}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.waveform-container{margin-bottom:2rem;display:flex;justify-content:center}.waveform{border-radius:8px;background:#ffffff0d}.track-info{background:#ffffff0d;padding:1.5rem;border-radius:8px}.track-info h4{color:#fff;margin-bottom:1rem}.track-details{display:flex;gap:1rem;flex-wrap:wrap}.track-details span{background:#ffffff1a;padding:.5rem 1rem;border-radius:20px;font-size:.9rem;color:#ffffffe6}.loading{text-align:center;color:#fff;font-size:1.2rem;padding:2rem}@media (max-width: 768px){.hero{flex-direction:column;text-align:center;padding:2rem 1rem}.hero h1{font-size:2.5rem}.cta-buttons{justify-content:center}.dashboard-header{flex-direction:column;gap:1rem;align-items:stretch}.studio-header{flex-direction:column;align-items:stretch}.player-controls,.track-details{flex-direction:column}}.player-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.player-actions{display:flex;align-items:center;gap:1rem}.saving-indicator{color:#fecaca;font-size:.9rem;opacity:.8}.discard-button{background:#dc262633;color:#fecaca;border:1px solid rgba(220,38,38,.4);padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .2s;font-size:.9rem}.discard-button:hover{background:#dc262666;transform:translateY(-1px)}.action-button.delete{background:#dc262633;border:1px solid rgba(220,38,38,.4);color:#fecaca}.action-button.delete:hover{background:#dc262666}.dashboard-actions{display:flex;gap:1rem;align-items:center}.refresh-button{background:#ffffff1a;color:#fecaca;border:1px solid rgba(255,255,255,.3);padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .2s;font-size:.9rem}.refresh-button:hover{background:#fff3;transform:translateY(-1px)}.error-message{background:#dc262633;color:#fecaca;border:1px solid rgba(220,38,38,.4);padding:1rem;border-radius:8px;margin-bottom:1rem;text-align:center}.error-message small{opacity:.8;font-size:.8rem}.playing-controls{display:flex;gap:.5rem;flex-wrap:wrap}.playing-controls button{flex:1;min-width:120px}.current-note{background:#dc26261a;border:1px solid rgba(220,38,38,.3);border-radius:8px;padding:1rem;margin:1rem 0;text-align:center}.current-note p{color:#fecaca;font-size:1.1rem;margin:0}.current-note strong{color:#fbbf24;font-size:1.2rem}.pause-button{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.pause-button:hover{background:linear-gradient(135deg,#d97706,#b45309);transform:translateY(-2px)}.resume-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease}.resume-button:hover{background:linear-gradient(135deg,#059669,#047857);transform:translateY(-2px)}@media (max-width: 1024px){.desktop-nav,.desktop-actions{display:none}.hamburger-menu{display:flex}.header-content{justify-content:space-between}}@media (max-width: 768px){.player-controls{gap:.5rem;flex-wrap:wrap;justify-content:center}.control-btn{width:35px;height:35px;font-size:1rem}.control-btn .icon{width:1rem;height:1rem}.control-btn .main-icon{width:1.2rem;height:1.2rem}.main-play-btn{width:50px;height:50px;font-size:1.2rem}.player-actions{flex-direction:column;gap:1rem}.volume-control{width:100%;justify-content:center}.export-dropdown{width:100%}.export-btn{width:100%;justify-content:center}}@media (max-width: 480px){.player-controls{gap:.25rem}.control-btn{width:30px;height:30px;font-size:.9rem}.control-btn .icon{width:.9rem;height:.9rem}.control-btn .main-icon{width:1rem;height:1rem}.main-play-btn{width:45px;height:45px;font-size:1rem}.audio-player{padding:1rem}.track-info-header{flex-direction:column;text-align:center;gap:1rem}.progress-container{flex-direction:column;gap:.5rem}.progress-bar{order:1}.time-display{order:2;font-size:.8rem}}@media (max-width: 768px){.playing-controls{flex-direction:column}.playing-controls button{width:100%}}.save-button{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #10b9814d}.save-button:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.save-button:disabled{background:#6b7280;cursor:not-allowed;transform:none;box-shadow:none}.download-section{margin-top:2rem;padding:1.5rem;background:#3b82f61a;border-radius:12px;border:1px solid rgba(59,130,246,.3);text-align:center}.download-controls{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}.format-selector{background:#ffffff1a;color:#fecaca;border:1px solid rgba(59,130,246,.3);border-radius:8px;padding:.75rem 1rem;font-size:1rem;cursor:pointer;transition:all .3s ease}.format-selector:hover{background:#ffffff26;border-color:#3b82f680}.format-selector:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.download-button{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #3b82f64d}.download-button:hover:not(:disabled){background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:translateY(-2px);box-shadow:0 6px 20px #3b82f666}.download-button:disabled{background:#6b7280;cursor:not-allowed;transform:none;box-shadow:none}.download-help{margin-top:.5rem;color:#d1d5db;font-size:.9rem;opacity:.8}.track-type{background:#3b82f633;color:#60a5fa;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:linear-gradient(135deg,#1a1a1a,#2d1b1b,#1a1a1a);border:1px solid rgba(220,38,38,.3);border-radius:12px;padding:2rem;max-width:400px;width:90%;color:#fecaca}.modal h3{margin:0 0 1rem;color:#fecaca;font-size:1.5rem}.modal p{margin:0 0 1rem;color:#d1d5db}.modal-input{width:100%;padding:.75rem;border:1px solid rgba(220,38,38,.3);border-radius:8px;background:#ffffff1a;color:#fecaca;font-size:1rem;margin-bottom:1rem}.modal-input:focus{outline:none;border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.modal-input::placeholder{color:#9ca3af}.format-selection{margin-bottom:1rem}.format-selection label{display:block;margin-bottom:.5rem;color:#d1d5db;font-weight:500}.modal-select{width:100%;padding:.75rem;border:1px solid rgba(220,38,38,.3);border-radius:8px;background:#ffffff1a;color:#fecaca;font-size:1rem}.modal-select:focus{outline:none;border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.modal-actions{display:flex;gap:1rem;justify-content:flex-end}.modal-cancel{background:#6b7280;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.modal-cancel:hover{background:#4b5563}.modal-confirm{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.modal-confirm:hover:not(:disabled){background:linear-gradient(135deg,#b91c1c,#991b1b)}.modal-confirm:disabled{background:#6b7280;cursor:not-allowed}