@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap";html{font-size:16px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background:#f5f6f5;color:#141820;width:100%;overflow-x:hidden}nav{background:#141820;color:#fff;padding:.5rem 1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;height:3.5rem;box-shadow:0 1px 3px #0003;width:100%;overflow-x:hidden}.nav-left{display:flex;align-items:center;gap:1.5rem}nav .logo{font-size:1.4rem;font-weight:600;color:#fff;text-decoration:none}.nav-links{display:flex;gap:1.25rem}nav a{color:#bdc3c7;text-decoration:none;font-size:1rem;font-weight:400;display:flex;align-items:center;transition:color .2s ease;white-space:nowrap}nav a:hover{color:#3498db}.nav-icon{margin-right:.75rem;font-size:1.2rem}.profile-bubble{width:30px;height:30px;border-radius:50%;background-color:#434957;transition:transform .2s ease;margin:0 auto}.profile-bubble:hover{transform:scale(1.05)}h2{font-family:Inter,sans-serif;font-size:1.5em;font-weight:700}.filter-container{background:#fff;border-radius:6px;box-shadow:0 2px 8px #0000001a;padding:1rem;transition:max-height .3s ease,opacity .2s ease;margin:0 auto;width:100%;overflow:hidden}.filter-container.visible{overflow:visible}.filter-container.rank-mode{width:100%;max-width:700px;margin:0 auto;overflow:visible}.filter-container.rerank-mode{max-width:700px}.filter-container.hidden{max-height:0;opacity:0;padding:0 1rem}.filter-container.visible{max-height:200px;opacity:1;overflow:visible}select{padding:8px 10px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;color:#141820;font-size:.9rem;font-weight:400;transition:border-color .2s ease}select:hover,select:focus{border-color:#3498db;outline:none}button{background:#3498db;color:#fff;border:none;padding:8px 12px;border-radius:.5rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s ease}button:hover{background:#2980b9}button[style*="background: #e74c3c"]{background:#e74c3c!important}button[style*="background: #e74c3c"]:hover{background:#c0392b!important}.filter-toggle{background:transparent;border:none;padding:.3rem;cursor:pointer;transition:all .2s ease}.filter-toggle:hover .filter-line{fill:#3498db}.song-ranker-container,.rankings-container{padding:.1rem;width:100%;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;align-items:center}.song-ranker-wrapper,.rankings-wrapper{width:100%}.song-pair{display:flex;justify-content:center;gap:3rem;flex-wrap:nowrap;min-width:808px;margin:0 auto}.song-card-container{display:flex;flex-direction:column;align-items:center;width:358px;max-width:100%;overflow-x:hidden}.song-ranker-container .song-box,.rankings-container .song-box{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:.5rem;padding:1.2rem;box-shadow:0 2px 6px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.song-ranker-container .song-box{width:358px;text-align:center;display:flex;flex-direction:column;align-items:center}.rankings-container .song-box{display:flex;flex-direction:row;align-items:center;gap:1.5rem;width:100%}.song-ranker-container .filter-toggle,.rankings-container .filter-toggle{margin-top:.5rem}.song-ranker-container .song-box:hover{transform:translateY(-2px) scale(1.025);box-shadow:0 4px 12px #0000001a}.rankings-container .song-box:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 4px 12px #0000001a}.song-ranker-container .album-cover{width:100%;max-width:320px;height:auto;border-radius:.5rem;margin-top:0;margin-bottom:1.2rem;display:block;margin-left:auto;margin-right:auto}.rankings-container .album-cover{width:80px;height:80px;border-radius:.5rem;flex-shrink:0}.song-ranker-container .song-details{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;margin-bottom:0rem}.rankings-container .song-details{flex:1;display:flex;flex-direction:column;gap:.25rem}.song-ranker-container .song-name,.rankings-container .song-name{font-size:1.4rem;font-weight:600;color:#141820;margin:0}.song-ranker-container .song-artist,.rankings-container .song-artist{font-size:1.3rem;color:#7f8c8d;margin:0}.rankings-container .song-ranking{font-size:.9rem;color:#3498db;margin:0}.song-ranker-container .custom-audio-player{max-width:100%;width:320px;margin:0 auto;margin-top:1.5rem;display:block;margin-left:auto;margin-right:auto}.rankings-container .custom-audio-player{width:100%;border-radius:.5rem;background-color:#f4f7fa;padding:5px;box-shadow:0 2px 4px #0000001a;margin-top:.5rem}.rankings-container .custom-audio-player::-webkit-media-controls-panel{background-color:#f4f7fa;border-radius:.5rem}.song-ranker-container .preview-unavailable,.rankings-container .preview-unavailable{display:none;color:#e74c3c;font-size:.9rem}.rankings-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;list-style:none;padding:0}.rankings-container .song-left{display:flex;flex-direction:row;align-items:center;gap:.75rem;min-width:0}.rankings-container .rank-position{font-size:1.5rem;font-weight:700;color:#3498db;min-width:2rem;text-align:center}.refresh-icon-btn{background:transparent;border:none;padding:.23rem;cursor:pointer;position:relative;transition:all .2s ease;margin-top:.5rem}.refresh-icon-btn svg{fill:#bdc3c7;width:25px;height:25px}.refresh-icon-btn:hover svg{fill:#3498db}.refresh-icon-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#3498db33;border-radius:50%;transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease;z-index:-1}button.refresh-icon-btn:hover:before{width:32px!important;height:32px!important}.refresh-icon-btn:disabled svg{fill:#7f8c8d;cursor:not-allowed}.auth-container{padding:2rem;max-width:400px;margin:0 auto;text-align:center;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:.5rem;box-shadow:0 2px 8px #0000001a}.auth-title{font-size:1.75rem;font-weight:400;color:#141820;margin-bottom:1.5rem}.auth-form{display:flex;flex-direction:column;gap:1rem}.auth-input{padding:.75rem;border:1px solid #e0e0e0;border-radius:.5rem;font-size:.9rem;color:#141820;background:#fff;transition:border-color .2s ease}.auth-input:hover,.auth-input:focus{border-color:#3498db;outline:none}.auth-button{padding:.75rem;border:none;border-radius:.5rem;font-size:.9rem;font-weight:500;cursor:pointer;transition:background .2s ease}.auth-button-primary{background:#3498db;color:#fff}.auth-button-primary:hover{background:#2980b9}.auth-button-secondary{background:#7f8c8d;color:#fff}.auth-button-secondary:hover{background:#6c757d}.auth-button-google{background:#4285f4;color:#fff;display:flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.5rem}.auth-button-google:hover{background:#357abd}.auth-button-google img{width:20px;height:20px;border-radius:10px}.auth-error{color:#e74c3c;font-size:.9rem;margin-top:.5rem}footer{height:3.5rem;display:flex;align-items:center;padding:0 1rem;font-size:.8rem}@media (max-width: 1024px){nav{height:3.25rem}nav .logo{font-size:1.3rem}nav a{font-size:.95rem}.nav-icon{font-size:1.1rem}.profile-bubble{width:30px;height:30px}footer{height:3.25rem;font-size:.75rem}.song-ranker-container,.rankings-container{max-width:700px}.song-pair{gap:2rem;flex-wrap:wrap;min-width:0;margin:0 auto;justify-content:center}.song-ranker-container .song-box,.song-card-container{width:300px;margin:0 auto}.song-ranker-container .album-cover,.song-ranker-container .song-details{max-width:280px}.song-ranker-container .song-name{font-size:1.2rem}.song-ranker-container .song-artist{font-size:1.1rem}.song-ranker-container .custom-audio-player{width:280px;height:40px}.filter-container{max-width:700px}.song-ranker-container .filter-container{background:#fff;border-radius:6px;box-shadow:0 2px 8px #0000001a;padding:1rem;transition:max-height .3s ease,opacity .2s ease;margin:0 auto;width:100%!important;max-width:1100px!important;box-sizing:border-box;overflow:visible}.song-ranker-container .filter-rerank{max-width:500px}.song-ranker-container .filter-rank .song-filter-container{flex-direction:column!important;gap:.5rem;align-items:stretch}.song-ranker-container .filter-rank .song-filter-container select,.song-ranker-container .filter-rank .song-filter-container button{width:100%;margin-right:0;font-size:.85rem;padding:6px 8px}.song-ranker-container .filter-rank .song-filter-container button{padding:8px}}@media (max-width: 768px){.rankings-container ul{grid-template-columns:1fr}nav{height:3.5rem;padding:.6rem 1.2rem}nav .logo{display:none}.nav-links{gap:1.5rem;flex-wrap:wrap;justify-content:space-between;width:100%}nav a{font-size:.9rem}.nav-icon{margin-right:.6rem;font-size:.9rem}.profile-bubble{width:30px;height:30px}footer{height:3rem;font-size:.7rem;padding:0 .9rem}.song-ranker-container,.rankings-container{max-width:400px}.song-pair{flex-direction:column;align-items:center;gap:1rem;min-width:0;margin:0 auto;justify-content:center}.song-ranker-container .song-box{width:90%;max-width:350px;margin:0 auto}.song-card-container{width:100%;max-width:350px;margin:0 auto}.rankings-list{grid-template-columns:1fr}.rankings-container .song-box{transition:transform .2s ease}.rankings-container .custom-audio-player{width:100%}.rankings-container .custom-audio-player::-moz-range-track{background-color:#f4f7fa}.rankings-container .song-left{width:100%;justify-content:flex-start}.filter-container{max-width:100%;padding:.5rem}.song-ranker-container .filter-container,.song-ranker-container .filter-rerank{max-width:100%}.song-filter-container{flex-direction:column!important;gap:.5rem;align-items:stretch}.song-filter-container select,.song-filter-container button{width:100%;margin-right:0;font-size:.85rem;padding:6px 8px}.song-filter-container button{padding:8px}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}