body{background:linear-gradient(to right,#fdfbfb,#ebedee);font-family:Poppins,sans-serif;min-height:100vh;margin:0;padding:0}.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #00000026;transition:all .3s ease}.btn-primary{background:linear-gradient(45deg,#ff6a00,#ee0979);border:none;transition:all .3s ease}.btn-primary:hover{opacity:.9;transform:scale(1.05)}h3{font-weight:600;color:#333;margin-bottom:1rem}.list-group-item{border:none;border-radius:10px;margin-bottom:.5rem;box-shadow:0 2px 8px #0000000d;transition:all .2s ease-in-out}.list-group-item:hover{background:#fff0f5;transform:translate(5px)}.container{padding-left:1rem;padding-right:1rem}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--success-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .8);--text-muted: rgba(255, 255, 255, .6);--shadow-light: 0 8px 32px rgba(0, 0, 0, .1);--shadow-heavy: 0 20px 60px rgba(0, 0, 0, .2);--border-radius: 20px;--border-radius-small: 12px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0a0a0a;color:var(--text-primary);overflow-x:hidden}.app{min-height:100vh;position:relative;background:linear-gradient(135deg,#0c0c0c,#1a1a2e,#16213e)}.animated-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden}.gradient-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.3;animation:float 20s ease-in-out infinite}.orb-1{width:400px;height:400px;background:var(--primary-gradient);top:-100px;left:-100px;animation-delay:0s}.orb-2{width:300px;height:300px;background:var(--secondary-gradient);top:50%;right:-50px;animation-delay:-7s}.orb-3{width:250px;height:250px;background:var(--accent-gradient);bottom:-50px;left:50%;animation-delay:-14s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-30px) rotate(120deg)}66%{transform:translateY(20px) rotate(240deg)}}.floating-particles{position:absolute;width:100%;height:100%}.particle{position:absolute;width:4px;height:4px;background:#ffffff4d;border-radius:50%;animation:particle-float var(--duration) ease-in-out infinite;animation-delay:var(--delay)}@keyframes particle-float{0%,to{transform:translateY(100vh) translate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(-100px) translate(100px);opacity:0}}.app-header{padding:2rem 0;text-align:center;position:relative;z-index:10}.header-content{max-width:800px;margin:0 auto;padding:0 2rem}.logo-container{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}.logo-icon{width:60px;height:60px;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;box-shadow:var(--shadow-light);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.app-title{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#fff,#a8edea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;flex-direction:column;align-items:center;gap:.5rem}.title-main{font-size:4rem;letter-spacing:-.02em}.title-sub{font-size:2rem;font-weight:600;opacity:.8}.app-subtitle{font-size:1.2rem;color:var(--text-secondary);margin-top:1rem;font-weight:400}.app-main{position:relative;z-index:10}.content-container{max-width:1200px;margin:0 auto;padding:0 2rem}.upload-section{margin-bottom:3rem}.results-section{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--border-radius);padding:2rem;margin-bottom:2rem;box-shadow:var(--shadow-heavy);animation:slideUp .6s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.results-header{text-align:center;margin-bottom:2rem}.results-title{font-size:2rem;font-weight:700;margin-bottom:1.5rem;background:linear-gradient(135deg,#fff,#a8edea);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tab-navigation{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}.tab-button{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--border-radius-small);padding:.75rem 1.5rem;color:var(--text-secondary);font-weight:500;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.5rem;font-size:.9rem}.tab-button:hover{background:#ffffff26;transform:translateY(-2px);box-shadow:var(--shadow-light)}.tab-button.active{background:var(--primary-gradient);color:#fff;border-color:transparent;box-shadow:var(--shadow-light)}.tab-icon{font-size:1.1rem}.tab-content{animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.songs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.loading-container{text-align:center;color:#fff}.loading-spinner{position:relative;width:80px;height:80px;margin:0 auto 2rem}.spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.spinner-ring:nth-child(2){width:70%;height:70%;top:15%;left:15%;border-top-color:#764ba2;animation-delay:-.3s}.spinner-ring:nth-child(3){width:40%;height:40%;top:30%;left:30%;border-top-color:#f093fb;animation-delay:-.6s}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text{font-size:1.2rem;font-weight:500;margin-bottom:1rem}.loading-dots{display:flex;justify-content:center;gap:.5rem}.loading-dots span{width:8px;height:8px;background:#667eea;border-radius:50%;animation:dots 1.4s ease-in-out infinite both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes dots{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}.app-footer{text-align:center;padding:2rem 0;color:var(--text-muted);font-size:.9rem;position:relative;z-index:10}.footer-content{max-width:1200px;margin:0 auto;padding:0 2rem}@media (max-width: 768px){.app-title{font-size:2.5rem}.title-main{font-size:3rem}.title-sub{font-size:1.5rem}.content-container{padding:0 1rem}.tab-navigation{flex-direction:column;align-items:center}.tab-button{width:200px;justify-content:center}.songs-grid{grid-template-columns:1fr}.results-section{padding:1.5rem}}@media (max-width: 480px){.app-title{font-size:2rem}.title-main{font-size:2.5rem}.title-sub{font-size:1.2rem}.logo-icon{width:50px;height:50px;font-size:20px}.results-title{font-size:1.5rem}}.photo-uploader{margin-bottom:2rem}.upload-container{max-width:600px;margin:0 auto}.upload-area{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px dashed var(--glass-border);border-radius:var(--border-radius);padding:3rem 2rem;text-align:center;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden}.upload-area:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s}.upload-area:hover:before{left:100%}.upload-area:hover{border-color:#fff6;background:#ffffff26;transform:translateY(-2px);box-shadow:var(--shadow-heavy)}.upload-area.drag-active{border-color:#667eea;background:#667eea1a;transform:scale(1.02)}.upload-content{display:flex;flex-direction:column;align-items:center;gap:1rem;position:relative;z-index:1}.upload-icon{width:80px;height:80px;background:var(--primary-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2rem;margin-bottom:1rem;box-shadow:var(--shadow-light);animation:pulse 2s ease-in-out infinite}.upload-icon svg{width:40px;height:40px}.upload-area h3{font-size:1.8rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.upload-area p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:1.5rem}.upload-features{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem;color:var(--text-muted)}.upload-features span{display:flex;align-items:center;justify-content:center;gap:.5rem}.file-preview{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--shadow-heavy);animation:slideUp .6s ease-out}.preview-container{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem}.preview-image-container{position:relative;width:100px;height:100px;border-radius:var(--border-radius-small);overflow:hidden;background:var(--primary-gradient)}.preview-image{width:100%;height:100%;object-fit:cover}.preview-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0000004d;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}.preview-image-container:hover .preview-overlay{opacity:1}.preview-icon{color:#fff;font-size:1.5rem}.preview-icon svg{width:30px;height:30px}.file-info h4{font-size:1.2rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.file-info p{color:var(--text-secondary);font-size:.9rem}.preview-actions{display:flex;gap:1rem;justify-content:center}.btn-analyze,.btn-remove{padding:.75rem 1.5rem;border:none;border-radius:var(--border-radius-small);font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.5rem;font-size:.95rem;min-width:140px;justify-content:center}.btn-analyze{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow-light)}.btn-analyze:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.btn-analyze:disabled{opacity:.7;cursor:not-allowed;transform:none}.btn-remove{background:#ffffff1a;color:var(--text-secondary);border:1px solid var(--glass-border)}.btn-remove:hover:not(:disabled){background:#ffffff26;color:var(--text-primary);transform:translateY(-2px)}.btn-remove:disabled{opacity:.7;cursor:not-allowed;transform:none}.spinner-icon{animation:spin 1s linear infinite}.spinner-icon svg{width:20px;height:20px}@media (max-width: 768px){.upload-area{padding:2rem 1rem}.upload-icon{width:60px;height:60px;font-size:1.5rem}.upload-icon svg{width:30px;height:30px}.upload-area h3{font-size:1.5rem}.upload-area p{font-size:1rem}.preview-actions{flex-direction:column}.btn-analyze,.btn-remove{width:100%}.preview-container{flex-direction:column;text-align:center}.preview-image-container{width:120px;height:120px}}@media (max-width: 480px){.upload-area{padding:1.5rem 1rem}.upload-icon{width:50px;height:50px;font-size:1.2rem}.upload-icon svg{width:25px;height:25px}.upload-area h3{font-size:1.3rem}.upload-area p{font-size:.9rem}.upload-features{font-size:.8rem}.file-preview{padding:1.5rem}.preview-image-container{width:100px;height:100px}}.song-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--shadow-light);transition:var(--transition);animation:slideUp .6s ease-out both;position:relative;overflow:hidden}.song-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);opacity:0;transition:var(--transition)}.song-card:hover:before{opacity:1}.song-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-heavy);border-color:#ffffff4d}.song-image-container{position:relative;width:100%;height:200px;border-radius:var(--border-radius-small);overflow:hidden;background:var(--primary-gradient);margin-bottom:1rem}.song-image{width:100%;height:100%;object-fit:cover;transition:var(--transition)}.song-card:hover .song-image{transform:scale(1.05)}.song-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fffc;font-size:3rem}.song-placeholder svg{width:60px;height:60px}.song-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}.song-card:hover .song-overlay{opacity:1}.play-button{background:#ffffffe6;color:#333;border:none;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-light)}.play-button:hover{background:#fff;transform:scale(1.1);box-shadow:0 8px 25px #0000004d}.play-button svg{width:24px;height:24px}.song-content{position:relative;z-index:1}.song-info{margin-bottom:1.5rem}.song-title{font-size:1.2rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.song-artist{color:var(--text-secondary);font-size:1rem;font-weight:500;margin-bottom:.25rem}.song-album{color:var(--text-muted);font-size:.9rem;font-style:italic}.song-actions{display:flex;gap:.75rem}.spotify-button,.copy-button{flex:1;padding:.75rem 1rem;border:none;border-radius:var(--border-radius-small);font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem;text-decoration:none}.spotify-button{background:linear-gradient(135deg,#1db954,#1ed760);color:#fff;box-shadow:0 4px 15px #1db9544d}.spotify-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #1db95466;color:#fff;text-decoration:none}.spotify-button svg{width:18px;height:18px}.copy-button{background:#ffffff1a;color:var(--text-secondary);border:1px solid var(--glass-border)}.copy-button:hover{background:#ffffff26;color:var(--text-primary);transform:translateY(-2px)}.copy-button.copied{background:var(--success-gradient);color:#fff;border-color:transparent}.copy-button svg{width:16px;height:16px}@media (max-width: 768px){.song-card{padding:1rem}.song-image-container{height:150px}.song-title{font-size:1.1rem}.song-artist{font-size:.9rem}.song-album{font-size:.8rem}.song-actions{flex-direction:column}.spotify-button,.copy-button{width:100%}.play-button{width:50px;height:50px}.play-button svg{width:20px;height:20px}}@media (max-width: 480px){.song-image-container{height:120px}.song-title{font-size:1rem}.song-artist{font-size:.85rem}.song-album{font-size:.75rem}.spotify-button,.copy-button{padding:.6rem .8rem;font-size:.8rem}.spotify-button svg,.copy-button svg{width:14px;height:14px}}.captions-container,.bios-container{width:100%}.captions-grid,.bios-grid{display:flex;flex-direction:column;gap:1rem}.caption-card,.bio-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--shadow-light);transition:var(--transition);animation:slideUp .6s ease-out both;position:relative;overflow:hidden}.caption-card:before,.bio-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);opacity:0;transition:var(--transition)}.caption-card:hover:before,.bio-card:hover:before{opacity:1}.caption-card:hover,.bio-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-heavy);border-color:#ffffff4d}.caption-content,.bio-content{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1rem;position:relative;z-index:1}.caption-icon,.bio-icon{width:40px;height:40px;background:var(--primary-gradient);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:var(--shadow-light)}.caption-icon svg,.bio-icon svg{width:20px;height:20px}.caption-text,.bio-text{flex:1}.caption-text p,.bio-text p{color:var(--text-primary);line-height:1.6;margin:0;font-size:1rem}.copy-btn{background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--border-radius-small);padding:.75rem 1.5rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);display:flex;align-items:center;gap:.5rem;width:100%;justify-content:center;position:relative;z-index:1}.copy-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea66}.copy-btn.copied{background:var(--success-gradient)}.copy-btn svg{width:16px;height:16px}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.empty-icon{width:80px;height:80px;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;color:var(--text-muted)}.empty-icon svg{width:40px;height:40px}.empty-state h3{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.empty-state p{font-size:1rem;color:var(--text-secondary)}@media (max-width: 768px){.caption-card,.bio-card{padding:1rem}.caption-content,.bio-content{gap:.75rem}.caption-icon,.bio-icon{width:35px;height:35px}.caption-icon svg,.bio-icon svg{width:18px;height:18px}.caption-text p,.bio-text p{font-size:.9rem}.copy-btn{padding:.6rem 1rem;font-size:.8rem}.copy-btn svg{width:14px;height:14px}.empty-icon{width:60px;height:60px}.empty-icon svg{width:30px;height:30px}.empty-state h3{font-size:1.3rem}.empty-state p{font-size:.9rem}}@media (max-width: 480px){.caption-card,.bio-card{padding:.75rem}.caption-content,.bio-content{gap:.5rem}.caption-icon,.bio-icon{width:30px;height:30px}.caption-icon svg,.bio-icon svg{width:16px;height:16px}.caption-text p,.bio-text p{font-size:.85rem}.copy-btn{padding:.5rem .8rem;font-size:.75rem}.copy-btn svg{width:12px;height:12px}.empty-icon{width:50px;height:50px}.empty-icon svg{width:25px;height:25px}.empty-state h3{font-size:1.1rem}.empty-state p{font-size:.8rem}}