body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;overflow-x:hidden}body{background:#0a0a0f;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.app{min-height:100vh;overflow:hidden;position:relative}.background-animation{animation:gradientShift 30s ease infinite;background:linear-gradient(135deg,#000,#0a0a0a 25%,#141414 50%,#0a0a0a 75%,#000);background-size:400% 400%;height:100%;left:0;position:fixed;top:0;width:100%;z-index:-2}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.wave{animation:waveRotate 20s linear infinite;background:#ffffff08;border-radius:45%;height:200%;position:absolute;width:200%}.wave1{animation-duration:25s;left:-50%;top:-50%}.wave2{animation-direction:reverse;animation-duration:18s;left:-40%;top:-60%}.wave3{animation-duration:22s;left:-60%;top:-40%}@keyframes waveRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.particles{height:100%;left:0;pointer-events:none;position:fixed;top:0;width:100%;z-index:-1}.particle{animation:particleFloat 8s ease-in-out infinite;background:#fff9;border-radius:50%;height:4px;position:absolute;width:4px}.particle-1{animation-delay:0s;left:10%;top:20%}.particle-2{animation-delay:1s;left:20%;top:40%}.particle-3{animation-delay:2s;left:80%;top:60%}.particle-4{animation-delay:3s;left:70%;top:80%}.particle-5{animation-delay:4s;left:90%;top:30%}.particle-6{animation-delay:5s;left:15%;top:70%}.particle-7{animation-delay:6s;left:60%;top:10%}.particle-8{animation-delay:7s;left:40%;top:90%}.particle-9{animation-delay:1.5s;left:50%;top:25%}.particle-10{animation-delay:2.5s;left:30%;top:55%}.particle-11{animation-delay:3.5s;left:75%;top:35%}.particle-12{animation-delay:4.5s;left:85%;top:75%}@keyframes particleFloat{0%,to{opacity:.6;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-20px) scale(1.2)}}.container{display:flex;flex-direction:column;min-height:100vh;opacity:0;position:relative;transform:translateY(30px);transition:all 1s cubic-bezier(.4,0,.2,1);z-index:1}.container.loaded{opacity:1;transform:translateY(0)}.header{display:flex;justify-content:space-between;padding:1rem 2rem;z-index:100}.header,.logo{align-items:center;position:relative}.logo{display:inline-flex}.logo-text{-webkit-text-fill-color:#0000;animation:logoShimmer 3s ease-in-out infinite;background:linear-gradient(135deg,#ff6b6b,#4ecdc4,#45b7d1,#96ceb4);-webkit-background-clip:text;background-clip:text;background-size:300% 300%;font-size:1.8rem;font-weight:700}.logo-pulse{animation:logoPulse 2s ease-in-out infinite;background:#ffffff1a;border-radius:10px;height:100%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}@keyframes logoShimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes logoPulse{0%,to{opacity:0;transform:translate(-50%,-50%) scale(1)}50%{opacity:.3;transform:translate(-50%,-50%) scale(1.1)}}.test-connection-btn:hover{background:#fff3!important;transform:translateY(-2px)}.main{align-items:center;display:flex;flex:1 1;justify-content:center;padding:2rem}.hero-section{grid-gap:4rem;align-items:center;display:grid;gap:4rem;grid-template-columns:1fr 1fr;max-width:1400px;width:100%}.hero-content{animation:slideInLeft 1s cubic-bezier(.4,0,.2,1) .3s both}.hero-visual{animation:slideInRight 1s cubic-bezier(.4,0,.2,1) .5s both}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}.headline{font-size:3.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:1.5rem}.headline-part{display:block;margin-bottom:.5rem}.gradient-text{-webkit-text-fill-color:#0000;animation:gradientText 5s ease-in-out infinite;background:linear-gradient(135deg,#6366f1,#8b5cf6,#a855f7);-webkit-background-clip:text;background-clip:text;background-size:200% 200%}@keyframes gradientText{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.subtext{font-size:1.25rem;line-height:1.6;margin-bottom:3rem;max-width:500px;opacity:.9}.input-recording-container{align-items:center;display:flex;flex-direction:column;gap:1.5rem;margin:0 auto;max-width:600px;width:100%}.text-input-container{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:2px solid #fff3;border-radius:50px;box-shadow:0 8px 25px #0000001a;display:flex;gap:.75rem;padding:.75rem 1rem;transition:all .3s cubic-bezier(.4,0,.2,1);width:100%}.text-input-container:focus-within{background:#ffffff26;border-color:#667eea80;box-shadow:0 8px 30px #667eea33}input{font-size:16px!important}.text-input{background:#0000;border:none;color:#fff;flex:1 1;font-family:inherit;font-size:1rem;outline:none;padding:.5rem 0}.text-input::placeholder{color:#fff9;font-style:italic}.text-input:disabled{cursor:not-allowed;opacity:.6}.send-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50%;box-shadow:0 4px 15px #667eea4d;color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:45px;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);width:45px}.send-button:hover:not(:disabled){background:linear-gradient(135deg,#764ba2,#667eea);box-shadow:0 6px 20px #667eea66;transform:translateY(-2px) scale(1.05)}.send-button:disabled{box-shadow:0 4px 15px #667eea33;cursor:not-allowed;opacity:.5;transform:none}.send-button:active:not(:disabled){transform:translateY(0) scale(.95)}.send-icon{font-size:1.2rem;transform:rotate(-45deg)}.input-divider{align-items:center;color:#fff9;display:flex;font-size:.9rem;font-weight:500;gap:1rem;width:100%}.input-divider:after,.input-divider:before{background:linear-gradient(90deg,#0000,#ffffff4d,#0000);content:"";flex:1 1;height:1px}.input-divider span{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;padding:.25rem 1rem}@media (max-width:768px){.input-recording-container{gap:1.25rem;max-width:90%}.text-input-container{padding:.6rem .8rem}.text-input{font-size:.95rem}.send-button{height:40px;width:40px}.send-icon{font-size:1.1rem}}@media (max-width:480px){.input-recording-container{gap:1rem}.text-input{font-size:.9rem}.text-input::placeholder{font-size:.85rem}.send-button{height:38px;width:38px}.input-divider{font-size:.85rem}}.text-input-container.processing{opacity:.7;pointer-events:none}.send-button.processing{animation:sendingPulse 1.5s ease-in-out infinite}@keyframes sendingPulse{0%,to{box-shadow:0 4px 15px #667eea4d;transform:scale(1)}50%{box-shadow:0 6px 25px #667eea80;transform:scale(1.1)}}.cta-button{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;box-shadow:0 10px 30px #667eea4d;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;margin-bottom:2rem;min-width:200px;overflow:hidden;padding:1.25rem 2.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.cta-button:hover{box-shadow:0 15px 40px #667eea66;transform:translateY(-3px)}.cta-button.recording{animation:pulse 2s ease-in-out infinite;background:linear-gradient(135deg,#ff6b6b,#ee5a52)}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.button-content{align-items:center;display:flex;gap:.75rem;justify-content:center}.mic-icon{font-size:1.3rem}.recording-indicator{height:15px;position:absolute;right:-5px;top:-5px;width:15px}.pulse{animation:recordingPulse 1s ease-in-out infinite;background:#f44;border-radius:50%;height:100%;width:100%}@keyframes recordingPulse{0%{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(2)}}.recording-results{margin-bottom:2rem;width:100%}.playback-controls{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;margin-bottom:2rem;padding:2rem}.play-button{align-items:center;background:linear-gradient(135deg,#4ecdc4,#45b7d1);border:none;border-radius:50px;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;margin-bottom:1.5rem;padding:1rem 2rem;transition:all .3s ease}.play-button:hover{box-shadow:0 10px 25px #4ecdc44d;transform:translateY(-2px)}.recording-actions{display:flex;flex-wrap:wrap;gap:1rem}.action-button{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:25px;color:#fff;cursor:pointer;display:flex;font-size:.9rem;gap:.5rem;padding:.75rem 1.5rem;transition:all .3s ease}.action-button:hover{background:#fff3;transform:translateY(-2px)}.transcription-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;margin-top:1rem;padding:2rem}.transcription-section h3{align-items:center;color:#fff;display:flex;font-size:1.5rem;gap:.5rem;margin-bottom:1.5rem}.transcription-section h3:before{content:"📝";font-size:1.3rem}.transcription-loading{align-items:center;display:flex;gap:1rem;justify-content:center;padding:2rem;text-align:center}.loading-spinner{border:3px solid #ffffff4d;height:30px;width:30px}.transcription-loading p{color:#ffffffe6;font-size:1rem;margin:0}.transcription-error{background:#ff6b6b33;border:1px solid #ff6b6b66;border-radius:12px;padding:1.5rem;text-align:center}.transcription-error p{color:#ff6b6b;font-weight:500;margin:0 0 1rem}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.transcription-text{margin-bottom:1rem}.transcription-actions{display:flex;gap:1rem;justify-content:center}.features{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:3rem}.feature{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;display:flex;gap:1rem;padding:1.5rem;transition:all .3s ease}.feature-icon{filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));font-size:2rem}.sound-wave{align-items:center;display:flex;gap:18px;height:500px;justify-content:center;position:relative;z-index:2}.wave-bar{animation:waveAnimation 3s ease-in-out infinite;background:linear-gradient(0deg,#667eea,#764ba2);border-radius:6px;width:19px}.wave-bar:first-child{animation-delay:0s;height:180px}.wave-bar:nth-child(2){animation-delay:.1s;height:220px}.wave-bar:nth-child(3){animation-delay:.2s;height:200px}.wave-bar:nth-child(4){animation-delay:.3s;height:280px}.wave-bar:nth-child(5){animation-delay:.4s;height:220px}.wave-bar:nth-child(6){animation-delay:.5s;height:200px}.wave-bar:nth-child(7){animation-delay:.6s;height:220px}.wave-bar:nth-child(8){animation-delay:.7s;height:180px}@keyframes waveAnimation{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.5)}}.microphone-glow{animation:microphoneGlow 3s ease-in-out infinite;background:radial-gradient(circle,#667eea4d 0,#0000 70%);border-radius:50%;height:150px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:150px;z-index:1}@keyframes microphoneGlow{0%,to{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.2)}}.footer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0003;border-top:1px solid #ffffff1a;padding:2rem;text-align:center}.auth-success-banner{align-items:center;background:linear-gradient(135deg,#1ed7601a,#1ed7600d);border:1px solid #1ed76033;border-radius:12px;display:flex;gap:1rem;margin:1rem 0;padding:1rem 1.5rem}.auth-success-banner .success-icon{font-size:1.5rem}.auth-success-banner .success-content h4{color:#1ed760;font-size:1rem;margin:0 0 .25rem}.auth-success-banner .success-content p{color:#fffc;font-size:.9rem;margin:0}.footer-content p{font-size:.9rem;opacity:.8}@media (max-width:768px){.hero-section{gap:3rem;grid-template-columns:1fr;text-align:center}.headline{font-size:2.5rem}.subtext{font-size:1.1rem}.features{grid-template-columns:1fr}.header,.recording-actions{flex-direction:column}.header{gap:1rem;padding:1rem;text-align:center}.header-actions{flex-direction:column;width:100%}.user-greeting{margin:1rem 0;padding:.75rem 1rem}.user-greeting p{font-size:.9rem}.transcription-actions{flex-direction:column}}@media (max-width:480px){.header,.main{padding:1rem}.plan-indicator{margin-top:.75rem}.plan-badge{font-size:.9rem;padding:.5rem 1rem}.playback-controls,.transcription-section{padding:1.5rem}.headline{font-size:2rem}.subtext{font-size:1rem}}.processing-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;margin-top:1rem;padding:2rem}.processing-section h3{align-items:center;color:#fff;display:flex;font-size:1.5rem;gap:.5rem;margin-bottom:1.5rem}.processing-section h3:before{content:"🎵";font-size:1.3rem}.processing-loading{align-items:center;display:flex;flex-direction:column;gap:1.5rem;padding:2rem;text-align:center}.processing-steps{display:flex;flex-direction:column;gap:.5rem}.processing-steps p{animation:fadeInStep .5s ease-out forwards;color:#ffffffe6;font-size:.95rem;margin:0;opacity:0}.processing-steps p:first-child{animation-delay:0s}.processing-steps p:nth-child(2){animation-delay:.5s}.processing-steps p:nth-child(3){animation-delay:1s}.processing-steps p:nth-child(4){animation-delay:1.5s}@keyframes fadeInStep{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.processing-error{background:#ff6b6b33;border:1px solid #ff6b6b66;border-radius:12px;padding:1.5rem;text-align:center}.processing-error p{color:#ff6b6b;font-weight:500;margin:0 0 1rem}.transcription-result{animation:fadeInUp .5s ease-out;margin-bottom:2rem}.transcription-result h4{color:#fff;font-size:1.1rem;margin-bottom:1rem}.transcription-text{border-left:4px solid #4ecdc4;border-radius:8px;padding:1.5rem}.transcription-text p{color:#fff;font-size:1.1rem;font-style:italic;line-height:1.6;margin:0}.playlist-summary{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:15px;margin:2rem 0;padding:1.5rem}.summary-stats{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:1fr 1fr;text-align:center}.stat{align-items:center;display:flex;flex-direction:column;gap:.5rem}.stat-number{color:#4ecdc4;display:block;font-size:2rem;font-weight:700}.stat-label{color:#fffc;display:block;font-size:.9rem}.spotify-playlist{margin-top:2rem}.spotify-playlist h4{align-items:center;color:#fff;display:flex;font-size:1.3rem;gap:.5rem;margin-bottom:1.5rem}.spotify-playlist h4:before{content:"🎧";font-size:1.2rem}.tracks-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-bottom:2rem}@media (min-width:1200px){.tracks-grid{gap:2rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}@media (min-width:769px) and (max-width:1199px){.tracks-grid{gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}.track-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:15px;display:flex;flex-direction:column;height:100%;min-height:280px;padding:1.5rem;transition:all .3s ease}@media (min-width:769px){.track-card{align-items:stretch;flex-direction:column}.track-image{border-radius:8px;height:200px;margin-bottom:1rem;object-fit:cover;width:100%}.track-info{display:flex;flex:1 1;flex-direction:column;gap:.5rem}.track-actions{display:flex;gap:.5rem;justify-content:space-between;margin-top:auto;padding-top:1rem}}.track-card:hover{background:#ffffff26;border-color:#ffffff4d;transform:translateY(-5px)}.track-image{border-radius:8px;flex-shrink:0;height:80px;object-fit:cover;width:80px}.track-info{display:flex;flex:1 1;flex-direction:column;gap:.5rem}.track-name{color:#fff;font-size:1rem;font-weight:600;line-height:1.3;margin:0}.track-artist{color:#4ecdc4;font-size:.9rem;font-weight:500;margin:0}.track-album{color:#ffffffb3;font-size:.85rem;margin:0}.track-reason{color:#fffc;font-size:.8rem;font-style:italic;line-height:1.4;margin:.5rem 0 0}.track-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.preview-button,.spotify-link{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:15px;color:#fff;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.75rem;font-weight:inherit;gap:.3rem;justify-content:center;padding:.4rem .8rem;text-decoration:none;transition:all .3s ease}.preview-button:hover,.spotify-link:hover{background:#fff3;transform:translateY(-1px)}.spotify-link{background:#1ed76033;border-color:#1ed76066}.spotify-link:hover{background:#1ed7604d}.playlist-actions{border-top:1px solid #ffffff1a;justify-content:center;margin-top:2rem;padding-top:2rem}@media (max-width:768px){.tracks-grid{grid-template-columns:1fr}.track-card{flex-direction:column;text-align:center}.track-image{align-self:center}.summary-stats{gap:1rem;grid-template-columns:1fr}.playback-controls,.processing-section{padding:1.5rem}.track-actions{justify-content:center}}@media (max-width:480px){.processing-steps{font-size:.85rem}.track-card{padding:1rem}.track-image{height:60px;width:60px}.track-name{font-size:.9rem}.track-artist{font-size:.8rem}.track-album{font-size:.75rem}}.preview-sources{margin:.5rem 0}.preview-source{border-radius:10px;display:inline-block;font-size:.7rem;font-weight:500;padding:.2rem .5rem}.preview-source.spotify{background:#1ed76033;border:1px solid #1ed7604d;color:#1ed760}.preview-source.youtube{background:#f003;border:1px solid #ff00004d;color:#f44}.preview-source.none{background:#ffffff1a;border:1px solid #fff3;color:#ffffff80}.preview-button.playing{animation:pulse-spotify 2s ease-in-out infinite;background:#1ed7604d;border-color:#1ed76099}@keyframes pulse-spotify{0%,to{box-shadow:0 0 0 0 #1ed76066}50%{box-shadow:0 0 0 10px #1ed76000}}.youtube-modal-overlay{align-items:center;animation:fadeIn .3s ease;background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.youtube-modal{animation:slideIn .3s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#141414f2;border:1px solid #fff3;border-radius:20px;max-height:90vh;max-width:90vw;overflow:hidden;padding:0}.modal-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:1.5rem}.modal-header h4{color:#fff;font-size:1.2rem;font-weight:600;margin:0}.modal-content{padding:1.5rem}.modal-content iframe{border-radius:12px;height:315px;width:100%}.youtube-link{align-items:center;background:#f003;border:1px solid #f006;border-radius:15px;color:#fff;cursor:pointer;display:inline-flex;font-family:inherit;font-size:.75rem;font-weight:inherit;gap:.3rem;padding:.4rem .8rem;text-decoration:none;transition:all .3s ease}.youtube-link:hover{background:#ff00004d;transform:translateY(-1px)}.preview-button{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:15px;color:#fff;cursor:pointer;display:inline-flex;font-size:.75rem;gap:.3rem;justify-content:center;min-width:100px;padding:.4rem .8rem;text-decoration:none;transition:all .3s ease}.preview-button:hover{background:#fff3;transform:translateY(-1px)}.preview-button:disabled{cursor:not-allowed;opacity:.6;transform:none}.no-preview{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:15px;color:#ffffff80;font-size:.75rem;font-style:italic;padding:.4rem .8rem}@media (max-width:768px){.track-actions{align-items:stretch;flex-direction:column;gap:.75rem}.preview-button{min-width:0;min-width:auto}.youtube-modal{margin:1rem;max-width:calc(100vw - 2rem)}.modal-content iframe{height:250px}.summary-stats{gap:1rem;grid-template-columns:repeat(2,1fr)}.preview-sources{text-align:center}}@media (max-width:480px){.modal-content iframe{height:200px}.modal-content,.modal-header{padding:1rem}.modal-header h4{font-size:1rem}.summary-stats{grid-template-columns:1fr}}.spotify-auth-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border:1px solid #fff3;border-radius:20px;margin-top:2rem;padding:2rem}.auth-prompt{text-align:center}.auth-prompt h4{color:#fff;font-size:1.3rem;font-weight:600;margin-bottom:.5rem}.auth-prompt p{color:#fffc;font-size:1rem;margin-bottom:1.5rem}.spotify-login-button{align-items:center;background:linear-gradient(135deg,#1ed760,#1db954);border:none;border-radius:50px;box-shadow:0 4px 15px #1ed7604d;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:600;gap:.5rem;padding:.875rem 2rem;transition:all .3s ease}.spotify-login-button:hover{background:linear-gradient(135deg,#1fdf63,#1ed760);box-shadow:0 6px 20px #1ed76066;transform:translateY(-2px)}.spotify-login-button:disabled{box-shadow:0 4px 15px #1ed76033;cursor:not-allowed;opacity:.6;transform:none}.auth-success{display:flex;flex-direction:column;gap:1.5rem}.user-info{border:1px solid #ffffff1a;border-radius:15px;justify-content:space-between;padding:1rem 1.5rem}.user-greeting{background:#1ed7601a;border:1px solid #1ed76033;border-radius:12px;margin:1.5rem 0;padding:1rem 1.5rem;text-align:center}.user-greeting p{color:#ffffffe6;font-size:1rem;margin:0 0 .5rem}.user-greeting strong{color:#1ed760;font-weight:600}.plan-indicator{display:flex;justify-content:center;margin-top:.5rem}.plan-badge{display:inline-block;font-size:.8rem;padding:.375rem .75rem}.welcome-text{color:#fff;font-size:1rem;font-weight:500}.loading-screen{align-items:center;background:linear-gradient(135deg,#0a0a0a,#1a1a2e);color:#fff;display:flex;flex-direction:column;height:100vh;justify-content:center}.loading-spinner{border-top-color:#1ed760;margin-bottom:1rem}.feature:has(.feature-icon){transition:all .3s ease}.feature:last-child{background:#1ed7601a;border:1px solid #1ed76033;border-radius:8px}.logout-button{background:#ffffff1a;border:1px solid #fff3;border-radius:20px;color:#fff;cursor:pointer;font-size:.875rem;padding:.5rem 1rem;transition:all .3s ease}.playlist-creation{text-align:center}.create-playlist-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;box-shadow:0 4px 15px #764ba24d;color:#fff;cursor:pointer;display:inline-flex;font-size:1.1rem;font-weight:600;gap:.5rem;justify-content:center;min-width:200px;padding:1rem 2.5rem;transition:all .3s ease}.create-playlist-button:hover{background:linear-gradient(135deg,#7289f0,#8659b8);box-shadow:0 6px 20px #764ba266;transform:translateY(-2px)}.create-playlist-button:disabled{box-shadow:0 4px 15px #764ba233;cursor:not-allowed;opacity:.6;transform:none}.creation-success{background:#4cd9641a;border:1px solid #4cd9644d;border-radius:15px;margin-top:1rem;padding:1.5rem;text-align:center}.creation-success p{color:#4cd964;font-weight:500;margin:0 0 1rem}.creation-error{background:#ff6b6b1a;border:1px solid #ff6b6b4d;border-radius:15px;margin-top:1rem;padding:1.5rem;text-align:center}.creation-error p{color:#ff6b6b;font-weight:500;margin:0}.playlist-link{background:linear-gradient(135deg,#1ed760,#1db954);border:none;border-radius:25px;color:#fff;display:inline-block;font-family:inherit;font-size:.95rem;font-weight:600;margin:.5rem 0;padding:.75rem 1.5rem;text-decoration:none;transition:all .3s ease}.track-count{color:#ffffffb3;font-size:.9rem;margin:.5rem 0 0}@media (max-width:768px){.spotify-auth-section{margin-top:1rem;padding:1.5rem}.user-info{flex-direction:column;gap:1rem;text-align:center}.create-playlist-button{font-size:1rem;min-width:0;min-width:auto;padding:.875rem 2rem;width:100%}.spotify-login-button{max-width:280px;padding:.75rem 1.5rem;width:100%}}@media (max-width:480px){.auth-prompt h4{font-size:1.1rem}.auth-prompt p,.welcome-text{font-size:.9rem}}.feedback-modal-overlay{align-items:center;animation:fadeIn .3s ease;background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.feedback-modal{animation:slideIn .3s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#141414f2;border:1px solid #fff3;border-radius:20px;max-height:90vh;max-width:500px;overflow:hidden;padding:0;width:90vw}.feedback-modal .modal-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:1.5rem}.feedback-modal .modal-header h4{color:#fff;font-size:1.2rem;font-weight:600;margin:0}.feedback-modal .close-button{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:40px;justify-content:center;transition:all .3s ease;width:40px}.feedback-modal .close-button:hover{background:#fff3;transform:scale(1.1)}.feedback-modal .modal-content{padding:1.5rem}.feedback-form{display:flex;flex-direction:column;gap:1.5rem}.form-group label{font-weight:500}.feedback-input{background:#ffffff1a;border:1px solid #fff3;border-radius:12px;color:#fff;font-size:.9rem;padding:.75rem 1rem;transition:all .3s ease}.feedback-input:focus{background:#ffffff26;border-color:#1ed76099;box-shadow:0 0 0 3px #1ed76033;outline:none}.feedback-input::placeholder{color:#ffffff80}.feedback-textarea{background:#ffffff1a;border:1px solid #fff3;border-radius:12px;color:#fff;font-family:inherit;font-size:.9rem;min-height:120px;padding:1rem;resize:vertical;transition:all .3s ease}.feedback-textarea:focus{background:#ffffff26;border-color:#1ed76099;box-shadow:0 0 0 3px #1ed76033;outline:none}.feedback-textarea::placeholder,.textarea-hint{color:#ffffff80}.textarea-hint{font-size:.75rem;margin-top:.25rem}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:1rem}.cancel-button{background:#ffffff1a;border:1px solid #fff3;border-radius:25px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:500;padding:.75rem 1.5rem;transition:all .3s ease}.cancel-button:hover:not(:disabled){background:#fff3;transform:translateY(-1px)}.cancel-button:disabled{cursor:not-allowed;opacity:.6}.submit-button{background:linear-gradient(135deg,#1ed760,#1db954);border:none;border-radius:25px;box-shadow:0 4px 15px #1ed7604d;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.submit-button:hover:not(:disabled){background:linear-gradient(135deg,#1fdf63,#1ed760);box-shadow:0 6px 20px #1ed76066;transform:translateY(-2px)}.submit-button:disabled{box-shadow:0 4px 15px #1ed76033;cursor:not-allowed;opacity:.6;transform:none}.feedback-success{padding:2rem 1rem;text-align:center}.success-icon{font-size:3rem;margin-bottom:1rem}.feedback-success h3{color:#fff;font-size:1.5rem;font-weight:600;margin:0 0 .5rem}.feedback-success p{color:#fffc;font-size:1rem;margin:0}.feedback-error{background:#ff6b6b1a;border:1px solid #ff6b6b4d;border-radius:12px;margin-top:1rem;padding:.75rem}.feedback-error p{color:#ff6b6b;font-size:.9rem;margin:0}.feedback-trigger-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:50px;bottom:2rem;box-shadow:0 4px 15px #667eea4d;color:#fff;cursor:pointer;display:flex;font-size:.9rem;font-weight:600;gap:.5rem;padding:.875rem 1.25rem;position:fixed;right:2rem;transition:all .3s ease;z-index:100}.feedback-trigger-button:hover{background:linear-gradient(135deg,#5a67d8,#667eea);box-shadow:0 6px 20px #667eea66;transform:translateY(-2px)}@media (max-width:768px){.feedback-modal{margin:1rem;max-width:calc(100vw - 2rem)}.feedback-modal .modal-content,.feedback-modal .modal-header{padding:1rem}.form-actions{flex-direction:column}.cancel-button,.submit-button{justify-content:center;width:100%}.feedback-trigger-button{bottom:1rem;font-size:.8rem;padding:.75rem 1rem;right:1rem}}@media (max-width:480px){.feedback-modal .modal-header h4{font-size:1rem}.feedback-textarea{min-height:100px}.form-group{gap:.25rem}}.auth-modal-overlay{align-items:center;animation:fadeIn .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.auth-modal{animation:slideIn .3s ease;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffffff1a;border-radius:20px;box-shadow:0 20px 50px #000000b3;max-height:90vh;max-width:440px;overflow-y:auto;width:90%}.auth-modal-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:2rem 2rem 1rem}.auth-modal-header h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fff,#a0a0a0);-webkit-background-clip:text;background-clip:text;color:#fff;font-size:1.75rem;font-weight:700;margin:0}.close-button{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1.5rem;height:40px;justify-content:center;transition:all .3s ease;width:40px}.close-button:hover{background:#fff3;transform:scale(1.1)}.auth-modal-content{padding:2rem}.auth-form{gap:1.5rem}.auth-form,.form-group{display:flex;flex-direction:column}.form-group{gap:.5rem}.form-group label{color:#ffffffe6;font-size:.9rem;font-weight:600;margin-bottom:.25rem}.auth-input{background:#ffffff1a;border:2px solid #fff3;border-radius:12px;color:#fff;font-size:1rem;outline:none;padding:1rem 1.25rem;transition:all .3s ease}.auth-input:focus{background:#ffffff26;border-color:#1ed76099;box-shadow:0 0 0 3px #1ed76033}.auth-input::placeholder{color:#ffffff80}.auth-input.error{background:#ff6b6b1a;border-color:#ff6b6b99}.auth-input.error:focus{box-shadow:0 0 0 3px #ff6b6b33}.error-text{align-items:center;color:#ff6b6b;display:flex;font-size:.85rem;gap:.25rem;margin-top:.25rem}.password-hint{color:#fff9;font-size:.8rem;margin-top:.25rem}.auth-error{background:#ff6b6b1a;border:1px solid #ff6b6b4d;border-radius:12px;margin:1rem 0;padding:.75rem 1rem}.auth-error span{color:#ff6b6b;font-size:.9rem}.auth-submit-button{background:linear-gradient(135deg,#1ed760,#1db954);border:none;border-radius:12px;box-shadow:0 4px 15px #1ed7604d;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;margin-top:.5rem;padding:1rem 1.5rem;transition:all .3s ease}.auth-submit-button:hover:not(:disabled){background:linear-gradient(135deg,#1fdf63,#1ed760);box-shadow:0 6px 20px #1ed76066;transform:translateY(-2px)}.auth-submit-button:disabled{box-shadow:0 4px 15px #1ed76033;cursor:not-allowed;opacity:.6;transform:none}.auth-switch{border-top:1px solid #ffffff1a;margin-top:2rem;padding-top:1.5rem;text-align:center}.auth-switch p{color:#ffffffb3;font-size:.9rem;margin:0}.switch-mode-button{background:none;border:none;color:#1ed760;cursor:pointer;font-weight:600;text-decoration:underline;transition:color .3s ease}.switch-mode-button:hover:not(:disabled){color:#1fdf63}.switch-mode-button:disabled{cursor:not-allowed;opacity:.6}.plan-info{background:#1ed7601a;border:1px solid #1ed76033;border-radius:12px;margin-top:1.5rem;padding:1.5rem}.plan-badge{align-items:center;display:flex;gap:.5rem;margin-bottom:.75rem}.plan-icon{font-size:1.25rem}.plan-badge span{color:#fff;font-size:.9rem;font-weight:600}.plan-description{color:#fffc;font-size:.85rem;line-height:1.4;margin:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width:768px){.auth-modal{margin:1rem;max-width:calc(100vw - 2rem)}.auth-modal-content,.auth-modal-header{padding:1.5rem}.auth-modal-header h2{font-size:1.5rem}.auth-input{padding:.875rem 1rem}.plan-info{padding:1rem}}@media (max-width:480px){.auth-modal-content,.auth-modal-header{padding:1rem}.auth-form{gap:1.25rem}}.user-menu{display:inline-block;position:relative}.user-menu-trigger{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:50px;color:#fff;cursor:pointer;display:flex;font-size:.9rem;gap:.75rem;padding:.5rem 1rem;transition:all .3s ease}.user-menu-trigger:hover{background:#ffffff26;box-shadow:0 4px 15px #ffffff1a;transform:translateY(-1px)}.user-avatar{align-items:center;background:linear-gradient(135deg,#1ed760,#1db954);border-radius:50%;color:#fff;display:flex;font-size:.9rem;font-weight:600;height:32px;justify-content:center;width:32px}.user-name{font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.plan-badge{border-radius:12px;font-size:.75rem;font-weight:600;padding:.25rem .5rem}.plan-badge.free{background:#80808033;color:#ccc}.plan-badge.premium{background:#ffd70033;color:gold}.user-menu-dropdown{animation:slideDown .2s ease;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #ffffff1a;border-radius:16px;box-shadow:0 20px 50px #000000b3;min-width:280px;overflow:hidden;position:absolute;right:0;top:calc(100% + .5rem);z-index:1000}.user-info{background:#ffffff0d;gap:1rem;padding:1.5rem}.user-avatar-large,.user-info{align-items:center;display:flex}.user-avatar-large{background:linear-gradient(135deg,#1ed760,#1db954);border-radius:50%;color:#fff;flex-shrink:0;font-size:1.25rem;font-weight:700;height:48px;justify-content:center;width:48px}.user-name-large{color:#fff;font-size:1rem;font-weight:600;margin-bottom:.25rem}.user-email{color:#fff9;font-size:.85rem;margin-bottom:.5rem}.plan-status{border-radius:12px;display:inline-block;font-size:.8rem;font-weight:600;padding:.375rem .75rem}.plan-status.free{background:#80808033;color:#ccc}.plan-status.premium{background:#ffd70033;color:gold}.menu-divider{background:#ffffff1a;height:1px;margin:0}.menu-items{padding:.5rem 0}.menu-item{align-items:center;background:none;border:none;color:#fffc;cursor:pointer;display:flex;font-size:.9rem;gap:.75rem;padding:.75rem 1.5rem;text-align:left;transition:all .2s ease;width:100%}.menu-item:hover{background:#ffffff1a;color:#fff}.menu-item.upgrade{color:gold}.menu-item.upgrade:hover{background:#ffd7001a}.menu-item.signout{color:#ff6b6bcc}.menu-item.signout:hover{background:#ff6b6b1a;color:#ff6b6b}.menu-icon{font-size:1rem;text-align:center;width:20px}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.user-menu-trigger{gap:.5rem;padding:.5rem}.plan-badge,.user-name{display:none}.user-menu-dropdown{min-width:260px;right:-1rem}.user-info{padding:1rem}.menu-item{font-size:1rem;padding:1rem 1.25rem}}@media (max-width:480px){.user-menu-dropdown{left:-2rem;min-width:auto;right:-2rem}}.auth-buttons{align-items:center;display:flex;gap:1rem}.auth-btn{align-items:center;border:none;border-radius:25px;cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:600;justify-content:center;min-width:100px;padding:.75rem 1.5rem;text-decoration:none;transition:all .3s ease}.signin-btn{background:#ffffff1a;border:1px solid #fff3;color:#fff}.signin-btn:hover{background:#fff3;box-shadow:0 4px 15px #ffffff1a;transform:translateY(-1px)}.signup-btn{background:linear-gradient(135deg,#1ed760,#1db954);box-shadow:0 4px 15px #1ed7604d;color:#fff}.signup-btn:hover{background:linear-gradient(135deg,#1fdf63,#1ed760);box-shadow:0 6px 20px #1ed76066;transform:translateY(-2px)}@media (max-width:768px){.auth-buttons{gap:.75rem}.auth-btn{font-size:.85rem;min-width:80px;padding:.625rem 1.25rem}}@media (max-width:480px){.auth-buttons{flex-direction:column;gap:.5rem;width:100%}.auth-btn{justify-content:center;width:100%}}.playlist-history-page{background:linear-gradient(135deg,#0a0a0a,#1a1a2e,#16213e);color:#fff;min-height:100vh}.page-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0000004d;border-bottom:1px solid #ffffff1a;padding:1rem 0;position:-webkit-sticky;position:sticky;top:0;z-index:100}.header-content{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1200px;padding:0 2rem}.logo-section h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#4ecdc4,#44a08d);-webkit-background-clip:text;font-size:1.8rem;margin:0}.tagline{color:#ffffffb3;font-size:.9rem;margin:0}.header-actions{align-items:center;display:flex;gap:1rem}.back-button{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:20px;color:#fff;display:inline-flex;font-size:.9rem;gap:.5rem;padding:.5rem 1rem;text-decoration:none;transition:all .3s ease}.back-button:hover{background:#fff3;transform:translateY(-1px)}.main-content{margin:0 auto;max-width:1200px;padding:2rem}.page-title{margin-bottom:3rem;text-align:center}.page-title h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#4ecdc4,#44a08d);-webkit-background-clip:text;font-size:2.5rem;margin:0 0 .5rem}.page-title p{color:#ffffffb3;font-size:1.1rem;margin:0}.loading-state{padding:4rem 2rem;text-align:center}.loading-spinner{animation:spin 1s linear infinite;border:3px solid #ffffff1a;border-radius:50%;border-top-color:#4ecdc4;height:40px;margin:0 auto 1rem;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error-state{padding:4rem 2rem;text-align:center}.error-icon{font-size:4rem;margin-bottom:1rem}.error-state h3{color:#ff6b6b;margin-bottom:1rem}.retry-button{background:linear-gradient(135deg,#ff6b6b,#ee5a52);border:none;border-radius:25px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:.75rem 1.5rem;transition:all .3s ease}.retry-button:hover{box-shadow:0 8px 20px #ff6b6b4d;transform:translateY(-2px)}.empty-state{padding:4rem 2rem;text-align:center}.empty-icon{font-size:5rem;margin-bottom:1.5rem;opacity:.6}.empty-state h3{color:#ffffffe6;font-size:1.8rem;margin-bottom:1rem}.empty-state p{color:#ffffffb3;font-size:1.1rem;margin-bottom:2rem}.create-first-button{background:linear-gradient(135deg,#4ecdc4,#44a08d);border:none;border-radius:30px;color:#fff;display:inline-block;font-size:1rem;font-weight:600;padding:1rem 2rem;text-decoration:none;transition:all .3s ease}.create-first-button:hover{box-shadow:0 8px 20px #4ecdc44d;transform:translateY(-2px)}.auth-required{padding:4rem 2rem;text-align:center}.auth-icon{font-size:4rem;margin-bottom:1.5rem;opacity:.6}.auth-required h2{color:#ffffffe6;font-size:1.8rem;margin-bottom:1rem}.home-link{background:linear-gradient(135deg,#4ecdc4,#44a08d);border:none;border-radius:25px;color:#fff;display:inline-block;font-size:.9rem;font-weight:600;margin-top:1rem;padding:.75rem 1.5rem;text-decoration:none;transition:all .3s ease}.home-link:hover{box-shadow:0 8px 20px #4ecdc44d;transform:translateY(-2px)}.playlists-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));margin-top:2rem}.playlist-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;padding:1.5rem;transition:all .3s ease}.playlist-card:hover{border-color:#4ecdc44d;box-shadow:0 15px 35px #0000004d;transform:translateY(-5px)}.playlist-header{margin-bottom:1rem}.playlist-name{color:#fff;font-size:1.3rem;font-weight:600;margin:0 0 .5rem}.playlist-meta{align-items:center;color:#fff9;display:flex;font-size:.85rem;justify-content:space-between}.track-count{background:#4ecdc433;border-radius:10px;color:#4ecdc4;font-weight:500;padding:.25rem .5rem}.created-date{color:#ffffff80}.playlist-content{margin-bottom:1.5rem}.transcription-section h4{color:#ffffffb3;font-size:.9rem;font-weight:500;margin:0 0 .5rem}.transcription-text{background:#ffffff0d;border-left:3px solid #4ecdc4;border-radius:10px;color:#fffc;font-style:italic;line-height:1.4;margin:0 0 1rem;padding:.75rem}.playlist-description{color:#ffffffb3;font-size:.9rem;line-height:1.4;margin:0}.playlist-actions{align-items:center;display:flex;flex-wrap:wrap;gap:.75rem}.spotify-link{align-items:center;background:linear-gradient(135deg,#1ed760,#1db954);border:none;border-radius:20px;color:#fff;display:inline-flex;flex:1 1;font-size:.8rem;font-weight:600;gap:.3rem;justify-content:center;min-width:140px;padding:.5rem 1rem;text-decoration:none;transition:all .3s ease}.spotify-link:hover{box-shadow:0 4px 15px #1ed76066;transform:translateY(-1px)}.no-spotify{color:#ffffff80;flex:1 1;font-size:.8rem;font-style:italic;text-align:center}.view-details-button{background:#ffffff1a;border:1px solid #fff3;border-radius:20px;color:#fff;cursor:pointer;font-size:.8rem;font-weight:500;min-width:100px;padding:.5rem 1rem;transition:all .3s ease}.view-details-button:hover{background:#fff3;transform:translateY(-1px)}@media (max-width:768px){.header-content{flex-direction:column;gap:1rem;padding:0 1rem;text-align:center}.header-actions{justify-content:center;width:100%}.main-content{padding:1.5rem 1rem}.page-title h2{font-size:2rem}.playlists-grid{gap:1rem;grid-template-columns:1fr}.playlist-card{padding:1.25rem}.playlist-meta{align-items:flex-start}.playlist-actions,.playlist-meta{flex-direction:column;gap:.5rem}.spotify-link{min-width:auto;width:100%}.view-details-button{width:100%}}@media (max-width:480px){.page-title h2{font-size:1.8rem}.playlist-card{padding:1rem}.playlist-name{font-size:1.1rem}.back-button{font-size:.8rem;padding:.4rem .8rem}}
/*# sourceMappingURL=main.d34f2061.css.map*/