*{padding:0;margin:0}.primary-container{margin:0;background:linear-gradient(0deg,#ff5121d8,#0051ffd4)}.container-header{width:100%;height:100vh;height:100dvh;position:relative}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.header-text{position:absolute;text-align:center;top:50%;width:100%;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.6);z-index:10}.header-text span{display:inline-block;font-family:Outfit,sans-serif;font-size:80px;font-weight:700;letter-spacing:4px;text-transform:uppercase;animation:fadeInUp 1.2s ease-out forwards}.banner{width:100%;height:100%;object-fit:cover;object-position:90%}.title{text-align:center}.container{display:flex;flex-wrap:wrap;justify-content:center;gap:30px}.container>.card-img>img{border-radius:8px;width:100%;max-width:850px;height:550px;object-fit:cover;box-shadow:0 0 30px #000}.container>.card-img{position:relative}.container>.card-img>.img-info{position:absolute;top:0%;width:100%;height:99%;border-radius:8px;background-color:#0000006c;box-shadow:0 0 30px #000;color:#fff;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;opacity:0;transition:.3s}.container>.card-img>.img-info>.img-info_container{margin:0 30px;display:flex;flex-direction:column;gap:15px}.container>.card-img>.img-info>.img-info_container>a{color:#fff}.container>.card-img>.img-info>.img-info_container>a:visited{color:#fff}.container>.card-img>.img-info:hover{opacity:1}.main-body{margin:35px 10%}.footer{width:100%;height:auto;background-color:#000;text-align:center;padding:10px 0}.footer>p{color:#fff;font-size:30px}.footer>img{border-radius:200px}.footer>span{color:#fff;font-size:18px}@media(max-width:530px){.container>.card-img>img{height:350px}}@media(max-width:514px){.header-text{top:60%}.header-text span{font-size:50px}}@media(max-width:400px){.header-text{top:60%}.header-text span{font-size:40px}}:root{--bg-primary: #121212;--bg-secondary: #181818;--bg-highlight: #282828;--text-primary: #FFFFFF;--text-secondary: #B3B3B3;--accent-color: #1DB954;--accent-hover: #1ED760;--error-color: #E91429;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--transition-speed: .3s;--border-radius: 8px;--shadow-soft: 0 4px 60px rgba(0, 0, 0, .5)}body{margin:0;font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-wrapper{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:2rem;background:linear-gradient(180deg,#1e1e1e 0%,var(--bg-primary) 100%)}.app-container{width:100%;max-width:1200px;margin:0 auto}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;background:radial-gradient(circle at center,#2a2a2a 0%,var(--bg-primary) 100%)}.login-container h1{font-size:3rem;font-weight:800;margin-bottom:1rem;letter-spacing:-.04em}.login-container p{color:var(--text-secondary);font-size:1.2rem;margin-bottom:3rem}.login-button{background-color:var(--accent-color);color:#000;font-weight:700;padding:1rem 2.5rem;border-radius:500px;font-size:1rem;border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;transition:transform .2s,background-color .2s}.login-button:hover{background-color:var(--accent-hover);transform:scale(1.05)}.now-playing-container{background-color:var(--bg-secondary);padding:1.5rem;border-radius:var(--border-radius);margin-bottom:2rem;text-align:center;box-shadow:0 8px 24px #0003;border:1px solid #333}.song-item-ghost{opacity:.5;padding:1.2rem 4rem;border-radius:500px;font-size:1.2rem;border:none;cursor:pointer;text-align:center;box-shadow:0 8px 24px #0003;border:1px solid #333}.now-playing-container h2{font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin:0 0 .5rem}.now-playing-details{margin-top:.5rem}.now-playing-name{font-size:1.5rem;font-weight:700;margin:0;color:var(--accent-color)}.now-playing-artist{font-size:1rem;color:var(--text-secondary);margin:.25rem 0 0}.search-container{margin-bottom:2rem;position:relative}.search-container input{width:100%;background-color:#fff;color:#000;border-radius:500px;padding:1rem 2rem;border:none;font-size:1rem;box-sizing:border-box;transition:box-shadow .2s}.search-container input:focus{outline:none;box-shadow:0 0 0 4px #1db9544d}.search-results{position:absolute;z-index:100;width:100%;margin-top:.5rem;background-color:var(--bg-highlight);border-radius:var(--border-radius);box-shadow:var(--shadow-soft);max-height:300px;overflow-y:auto;border:1px solid #333}.search-result-item{padding:.75rem 1.5rem;cursor:pointer;display:flex;flex-direction:column;border-bottom:1px solid #333;transition:background-color .2s}.search-result-item:last-child{border-bottom:none}.search-result-item:hover{background-color:#3e3e3e}.search-result-item .song-name{font-weight:600;color:var(--text-primary)}.search-result-item .song-artist{font-size:.85rem;color:var(--text-secondary)}.lists-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.list-container{background-color:var(--bg-secondary);padding:1.5rem;border-radius:var(--border-radius);box-shadow:0 4px 12px #0000004d;display:flex;flex-direction:column;height:100%}.list-container h3{font-weight:700;font-size:1.5rem;margin:0 0 1.5rem;border-bottom:2px solid var(--accent-color);padding-bottom:.5rem;display:inline-block}.song-list{display:flex;flex-direction:column;gap:.75rem;min-height:200px;flex-grow:1}.song-item{background-color:var(--bg-highlight);padding:.75rem 1rem;border-radius:4px;display:flex;justify-content:space-between;align-items:center;cursor:grab;transition:background-color .2s,transform .1s;border-left:4px solid transparent}.song-item:hover{background-color:#333;border-left-color:var(--accent-color)}.song-item:active{cursor:grabbing}.song-info{overflow:hidden;flex:1;margin-right:1rem}.song-name{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.2rem}.song-artist{font-size:.8rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-button{color:var(--text-secondary);font-size:1.5rem;background:none;border:none;cursor:pointer;padding:0;line-height:1;transition:color .2s}.remove-button:hover{color:var(--error-color)}.song-item-ghost{opacity:.5;padding:1.2rem 4rem;border-radius:500px;font-size:1.2rem;border:none;cursor:pointer;text-transform:uppercase;box-shadow:0 8px 24px #0003;border:1px solid #333}.play-button-container{display:flex;justify-content:center;margin-top:3rem;padding-bottom:2rem}.play-button{background-color:var(--accent-color);color:#000;font-weight:800;padding:1.2rem 3.5rem;border-radius:500px;font-size:1.1rem;border:none;cursor:pointer;text-transform:uppercase;letter-spacing:.15em;transition:all .2s ease-in-out;box-shadow:0 4px 12px #1db9544d}.play-button:hover{background-color:var(--accent-hover);transform:scale(1.05) translateY(-2px);box-shadow:0 12px 24px #1db95499}.play-button:active{transform:scale(.98)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:#555;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#777}@media(max-width:768px){.app-wrapper{padding:1rem}.login-container h1{font-size:2rem}.play-button{width:100%;padding:1rem;font-size:1rem}.song-item{padding:1rem}.remove-button{padding:.5rem}}