*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;color:#333;line-height:1.6}.container{max-width:480px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column}header{text-align:center;color:#fff;margin-bottom:20px;padding:10px 0}header h1{font-size:1.8rem;margin-bottom:5px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.subtitle{font-size:.9rem;opacity:.9}main{flex:1}.section{background:#fffffff2;border-radius:20px;padding:30px;box-shadow:0 10px 30px #0003;margin-bottom:20px}.hidden{display:none!important}.flip-card-container{perspective:1000px;margin:20px 0 30px}.flip-card{background-color:transparent;width:100%;height:40vh;position:relative}.flip-card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .6s;transform-style:preserve-3d}.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:linear-gradient(145deg,#f0f0f0,#fff);border-radius:15px;padding:20px;display:flex;flex-direction:column;box-shadow:0 4px 8px #0000001a;cursor:pointer}.flip-card-front{background:linear-gradient(145deg,#e8e8e8,#f5f5f5);justify-content:center}.flip-card-back{background:linear-gradient(145deg,#f0f0f0,#fff);transform:rotateY(180deg)}.flip-card-front:hover{box-shadow:0 8px 16px #0003}.flip-card-front .song-ranking{color:#999;opacity:.5;font-size:2.5rem;font-weight:700;margin-bottom:15px}.flip-card-front .song-title{color:#667eea;font-size:1.3rem;margin-bottom:10px;font-weight:600}.flip-card-front .song-artist{color:#999;opacity:.5;font-size:1.2rem;margin-bottom:10px}.flip-card-front .song-year{color:#999;opacity:.5;font-size:1.8rem;font-weight:700;margin-top:10px}.song-ranking{font-size:2.5rem;color:#667eea;font-weight:700;margin-bottom:15px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.song-title{font-size:1.5rem;color:#333;margin-bottom:10px;font-weight:700;min-height:2rem;line-height:1.4}.song-artist{font-size:1.2rem;color:#666;margin-bottom:10px;min-height:1.6rem;line-height:1.4}.song-year{font-size:1.8rem;color:#667eea;font-weight:700;margin-top:10px;padding:10px;background:#667eea1a;border-radius:10px}.btn{border:none;padding:15px 30px;font-size:1.1rem;font-weight:600;border-radius:50px;cursor:pointer;transition:all .3s ease;display:inline-block;text-decoration:none;margin:5px}.btn-primary{background:#1db954;color:#fff;box-shadow:0 4px 15px #1db9544d;width:100%}.btn-primary:hover{background:#1ed760;box-shadow:0 6px 20px #1db95466}.btn-secondary{background:#667eea;color:#fff;box-shadow:0 4px 15px #667eea4d}.btn-secondary:hover{background:#764ba2;box-shadow:0 6px 20px #764ba266}.btn:active{box-shadow:0 2px 10px #0003}.btn:disabled{background:#ccc;cursor:not-allowed;box-shadow:none;opacity:.6}.controls{display:flex;justify-content:center;gap:10px;margin:0 0 25px;flex-wrap:wrap}#spotify-player{display:none}.status-message{padding:15px;border-radius:10px;text-align:center;margin:20px 0;font-size:1rem;display:none}.status-message.show{display:block}.status-message.error{background:#f44;color:#fff}.status-message.success{background:#4caf50;color:#fff}.status-message.warning{background:#ff9800;color:#fff}.info-text{text-align:center;color:#666;margin-top:15px;font-size:.95rem}footer{text-align:center;color:#fff;padding:20px;font-size:.9rem;opacity:.8}#login-section{text-align:center;padding:50px 30px}#login-section .btn{margin-bottom:20px}@media(max-width:480px){header h1{font-size:1.5rem}.subtitle{display:none}.section{padding:20px}.btn{padding:12px 25px;font-size:1rem}.song-ranking{font-size:2rem}.flip-card-front .song-title{font-size:1.1rem}.song-title{font-size:1.3rem}.song-artist{font-size:1.1rem}}.loading{display:inline-block;width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.section{animation:fadeIn .5s ease-out}