*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#1a1a1a;color:#fff;margin:0}.app{display:flex;min-height:100vh;background-color:#1a1a1a}.container{display:grid;grid-template-columns:300px 1fr;gap:1.5rem;margin-left:240px;flex:1;background-color:#1a1a1a;padding:1.5rem;min-height:100vh}.mobile-header{display:none;background-color:#212121;padding:12px 16px;border-bottom:1px solid #333;align-items:center;gap:16px;position:fixed;top:0;left:0;right:0;z-index:1001}.hamburger{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:3px;padding:8px}.hamburger span{width:18px;height:2px;background-color:#fff;transition:.3s}.mobile-logo{display:flex;align-items:center;gap:8px}.logo-icon{background-color:red;color:#fff;width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:14px}.logo-text{font-size:20px;font-weight:400;color:#fff}.sidebar{background-color:#212121;width:240px;height:100vh;padding:8px 0;position:fixed;left:0;top:0;overflow-y:auto;border-right:1px solid #333}.sidebar-header{padding:12px 16px 16px}.logo{display:flex;align-items:center;gap:8px}.sidebar-nav{padding:0 12px}.nav-item{display:flex;align-items:center;gap:24px;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background-color .2s;text-decoration:none}.nav-item:hover{background-color:#333;text-decoration:none}.nav-item:focus{text-decoration:none;outline:none}.nav-icon{font-size:20px;width:24px;text-align:center}.nav-text{font-size:14px;color:#fff;font-weight:400}.playlist-section{margin-top:16px;padding:0}.section-divider{border-top:1px solid #333;margin:8px 0 16px}.playlist-list{list-style:none;padding:0}.playlist-item{display:flex;align-items:center;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background-color .2s;margin-bottom:2px;background:none;border:none;width:100%;text-align:left;text-decoration:none}.playlist-item:hover{background-color:#333;text-decoration:none}.playlist-item:focus{text-decoration:none;outline:none}.playlist-item.active{background-color:#333;text-decoration:none}.playlist-item.active .playlist-text{color:#fff;font-weight:500}.playlist-text{font-size:14px;color:#aaa;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-btn{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;display:none}.container .playlist-info{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem;background-color:#2a2a2a;border-radius:12px;height:fit-content}.container .playlist-image{width:200px;height:200px;object-fit:cover;border-radius:8px;margin-bottom:1rem}.playlist-details h1{color:#fff;font-size:1.5rem;font-weight:600;margin:0 0 .5rem;word-break:break-word}.playlist-meta{color:#888;font-size:.9rem;margin:0}.songs-container{display:flex;flex-direction:column;height:100%}.songs-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:0 .5rem}.song-list-header{color:#fff;font-size:1.5rem;font-weight:600;margin:0}.platform-selector{position:relative;display:flex;align-items:center}.platform-selector-button{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#404040;border:1px solid #555;border-radius:6px;color:#fff;cursor:pointer;font-size:.8rem;transition:all .2s ease;min-width:150px;justify-content:space-between}.platform-selector-button:hover{background-color:#404040;border-color:#555}.platform-icon{font-size:1rem;flex-shrink:0;display:flex;align-items:center;width:16px;height:16px}.platform-name{flex-grow:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.platform-arrow{font-size:12px;opacity:.7;transition:transform .2s ease}.platform-dropdown{position:absolute;top:100%;left:0;right:0;background:#2a2a2a;border:1px solid #555;border-radius:8px;box-shadow:0 4px 12px #0006;z-index:1000;margin-top:4px;display:none;overflow:hidden}.platform-dropdown-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.75rem;background:transparent;border:none;color:#fff;cursor:pointer;font-size:.8rem;transition:background-color .2s ease;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.platform-dropdown-item:hover{background-color:#404040}.platform-dropdown-item.selected{background-color:#353535;color:#1ed760}.platform-dropdown-icon{display:flex;align-items:center;width:14px;height:14px;flex-shrink:0}.platform-dropdown-name{flex-grow:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem}.platform-dropdown-checkmark{margin-left:auto;color:#1ed760;flex-shrink:0;font-size:.75rem}.songs-list{display:flex;flex-direction:column;gap:.5rem;flex-grow:1;overflow-y:auto;padding-right:.25rem}.songs-list::-webkit-scrollbar{width:6px}.songs-list::-webkit-scrollbar-track{background:#1a1a1a;border-radius:3px}.songs-list::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.songs-list::-webkit-scrollbar-thumb:hover{background:#777}.song-item{display:flex;align-items:center;gap:1rem;padding:.75rem;background-color:#2a2a2a;border-radius:8px;transition:background-color .2s ease}.song-item:hover{background-color:#333}.song-details{flex-grow:1;min-width:0}.song-title{color:#fff;font-size:1rem;font-weight:500;margin:0 0 .25rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-artist{color:#b3b3b3;font-size:.875rem;font-weight:400;margin:0;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vote-controls{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.vote-btn,.menu-btn{background:none;border:none;padding:.5rem;border-radius:4px;cursor:pointer;font-size:1.1rem;transition:all .2s ease;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}.menu-btn:hover{background-color:#404040;transform:scale(1.1)}.vote-btn{filter:grayscale(1);opacity:.6}.vote-btn:hover{background-color:#404040;transform:scale(1.1);filter:grayscale(.5);opacity:.8}.vote-btn.active{filter:grayscale(0);transform:scale(1.1);opacity:1}.menu-btn{color:#888;font-weight:700}.menu-btn:hover{color:#fff}.song-item.clickable{cursor:pointer}.song-item.clickable:hover{background-color:#353535}.thumbnail-container{position:relative;width:50px;height:50px;flex-shrink:0}.song-thumbnail{width:100%;height:100%;object-fit:cover;border-radius:4px}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border:none;border-radius:50%;background-color:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;transition:all .3s ease;opacity:0;scale:.8;z-index:2;display:flex;align-items:center;justify-content:center}.play-button.visible{opacity:1;scale:1}.play-button:hover{background-color:#000c;scale:1.1}.play-button:disabled{cursor:not-allowed;opacity:.7}.play-icon{width:0;height:0;border-left:8px solid #1ed760;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px}.pause-icon{display:flex;gap:2px;align-items:center}.pause-bar{width:3px;height:12px;background-color:#1ed760;border-radius:1px}.loading-spinner{width:16px;height:16px;border:2px solid transparent;border-top:2px solid #1ed760;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.no-preview{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background-color:#888c;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;z-index:1}.thumbnail-container:hover .no-preview{opacity:1}.no-preview span{color:#fff;font-size:10px}.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background-color:#2a2a2a;border-radius:12px;width:90%;max-width:400px;max-height:80vh;overflow:hidden;box-shadow:0 20px 60px #00000080}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #404040}.modal-title{color:#fff;font-size:1.25rem;font-weight:600;margin:0}.modal-close-btn{background:none;border:none;color:#888;font-size:1.5rem;cursor:pointer;padding:.25rem;border-radius:4px;transition:color .2s ease}.modal-close-btn:hover{color:#fff}.modal-song-info{display:flex;align-items:center;gap:1rem;padding:1.5rem;border-bottom:1px solid #404040}.modal-song-details{flex-grow:1}.modal-thumbnail{width:50px;height:50px;object-fit:cover;border-radius:6px;flex-shrink:0}.modal-song-title{color:#fff;font-size:1rem;font-weight:500;margin:0 0 .25rem;line-height:1.3}.modal-song-artist{color:#b3b3b3;font-size:.875rem;font-weight:400;margin:0;line-height:1.2}.modal-platforms{padding:1rem}.modal-platform-btn{display:flex;align-items:center;gap:1rem;width:100%;padding:1rem;background:none;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease;text-align:left}.modal-platform-btn:hover{background-color:#404040}.modal-platform-icon{font-size:1.5rem;flex-shrink:0}.modal-platform-name{color:#fff;font-size:1rem;font-weight:500}.modal-vote-actions{display:flex;gap:.5rem;align-items:center;flex-shrink:0}.modal-vote-btn{background:none;border:none;padding:.5rem;border-radius:4px;cursor:pointer;font-size:1.1rem;transition:all .2s ease;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;filter:grayscale(1)}.modal-vote-btn:hover{background-color:#404040;transform:scale(1.1);filter:grayscale(.5)}.modal-vote-btn.active{filter:grayscale(0);transform:scale(1.1)}.song-list-empty{padding:40px;text-align:center;color:#b3b3b3}.playlist-selection{padding:2rem 0}.playlist-selection-header{color:#fff;font-size:2.5rem;font-weight:600;margin:0 0 2rem;text-align:left}.playlist-grid{display:flex;gap:1.5rem;max-width:100%}.playlist-card{background-color:#2a2a2a;border-radius:12px;padding:2.25rem;transition:all .2s ease;text-decoration:none;color:inherit;display:block;flex:1;min-width:240px;max-width:380px}.playlist-card:hover{background-color:#333;transform:translateY(-2px);box-shadow:0 8px 25px #0000004d;text-decoration:none;color:inherit}.playlist-card:focus{text-decoration:none;outline:none;color:inherit}.playlist-card-image{width:100%;aspect-ratio:1;margin-bottom:1rem;border-radius:8px;overflow:hidden}.playlist-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}.playlist-card:hover .playlist-card-image img{transform:scale(1.05)}.playlist-card-content{text-align:left}.playlist-card-title{color:#fff;font-size:1.375rem;font-weight:600;margin:0 0 .5rem;line-height:1.3;text-transform:uppercase;letter-spacing:.5px}.playlist-card-meta{color:#b3b3b3;font-size:1rem;font-weight:400;margin:0;line-height:1.2}@media (max-width: 1024px){.playlist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.playlist-card{flex:none;min-width:auto}}@media (max-width: 768px){.playlist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.playlist-card{max-width:none}}@media (max-width: 480px){.playlist-grid{display:grid;grid-template-columns:1fr;gap:.75rem}}@media (max-width: 767px){.mobile-header{display:flex}.close-btn{display:block}.sidebar{transform:translate(-100%);transition:transform .3s ease;z-index:1000;top:56px;height:calc(100vh - 56px)}.sidebar.open{transform:translate(0)}.container{display:block;margin-left:0;padding:1rem;padding-top:80px;width:100%;max-width:100%;overflow-x:hidden}.playlist-selection{padding:1rem 0}.playlist-selection-header{font-size:2rem;margin-bottom:1.5rem}.playlist-card{padding:1.25rem}.playlist-card-title{font-size:1.1rem}.container .playlist-info{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.5rem;background-color:#2a2a2a;border-radius:12px;margin-bottom:1.5rem;width:100%;box-sizing:border-box}.container .playlist-image{width:120px;height:120px}.playlist-details{width:100%;max-width:100%}.playlist-details h1{font-size:1.25rem;word-wrap:break-word;overflow-wrap:break-word}.songs-container{width:100%;max-width:100%}.song-item{padding:1rem;width:100%;max-width:100%;box-sizing:border-box}.song-details{flex-grow:1;min-width:0;max-width:calc(100% - 120px)}}.homepage-container{background:#121212;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;padding:20px;margin-left:240px;min-height:100vh;flex:1}.homepage-container .header{margin-bottom:30px}.homepage-container .header h1{font-size:2.5rem;font-weight:700;margin-bottom:10px}.homepage-container .playlist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1400px}.homepage-container .playlist-card{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s ease;background:#1a1a1a;display:block;text-decoration:none;color:inherit}.homepage-container .playlist-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px #0009}.homepage-container .playlist-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,transparent 0%,transparent 50%,rgba(0,0,0,.3) 70%,rgba(0,0,0,.8) 100%);z-index:2;transition:opacity .3s ease}.homepage-container .playlist-card:hover:before{opacity:.9}.homepage-container .playlist-image{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.homepage-container .playlist-card:hover .playlist-image{transform:scale(1.05)}.homepage-container .playlist-info{position:absolute;bottom:0;left:0;right:0;padding:24px;z-index:3;text-align:center}.homepage-container .playlist-title{font-size:1.5rem;font-weight:700;margin-bottom:4px;text-shadow:0 2px 8px rgba(0,0,0,.8)}.homepage-container .playlist-count{font-size:.9rem;opacity:.9;font-weight:500;text-shadow:0 1px 4px rgba(0,0,0,.8)}@media (max-width: 768px){.homepage-container .playlist-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.homepage-container .playlist-info{padding:20px}.homepage-container .playlist-title{font-size:1.3rem}.homepage-container .playlist-count{font-size:.85rem}}@media (max-width: 480px){.homepage-container .playlist-grid{grid-template-columns:1fr 1fr;gap:12px}.homepage-container .playlist-info{padding:16px}.homepage-container .playlist-title{font-size:1.1rem}.homepage-container .playlist-count{font-size:.8rem}}@media (max-width: 767px){.homepage-container{margin-left:0;padding:1rem;padding-top:80px}}