:root{--background:#030303;--surface:#212121;--primary:#fff;--secondary:#aaa;--accent:#ff0050;--neon-blue:#00f0ff;--glass-bg:#ffffff14;--glass-border:#ffffff1a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--background);color:var(--primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:12px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--surface);border-radius:4px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-container{height:100vh;display:flex}.sidebar{background-color:var(--background);border-right:1px solid var(--surface);flex-direction:column;width:240px;padding:24px 16px 90px;display:flex}.main-content{flex-direction:column;flex:1;padding-bottom:90px;display:flex;overflow-y:auto}.header{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#030303cc;align-items:center;height:64px;padding:0 24px;display:flex;position:sticky;top:0}.search-bar{flex:1;align-items:center;max-width:250px;margin:0;transition:max-width .3s;display:flex;position:relative}.search-bar.focused{max-width:500px}.search-input{color:#fff;background-color:#212121;border:1px solid #333;border-radius:8px;outline:none;width:100%;padding:10px 48px;font-size:16px;transition:background-color .3s,border-color .3s}.search-input:focus{box-shadow:none;background-color:#2a2a2a;border-color:#555}.playlist-header{align-items:flex-end;gap:24px;padding:40px 24px 20px;display:flex}.playlist-cover{object-fit:cover;border-radius:8px;width:232px;height:232px;box-shadow:0 8px 24px #00000080}.playlist-info h1{margin-bottom:8px;font-size:48px;line-height:1.2}.playlist-info p{color:var(--secondary);font-size:14px}.track-list{flex-direction:column;gap:4px;padding:0 24px 24px;display:flex}.track-item{cursor:pointer;border-radius:8px;align-items:center;padding:8px 16px;transition:background-color .2s;display:flex}.track-item:hover{background-color:var(--surface)}.track-item img{border-radius:4px;width:40px;height:40px;margin-right:16px}.track-details{flex:1}.track-title{margin-bottom:4px;font-size:16px;font-weight:500}.track-artist{color:var(--secondary);font-size:14px}.play-button{color:var(--primary);cursor:pointer;opacity:0;background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:32px;transition:opacity .2s;display:flex}.track-item:hover .play-button{opacity:1}.player-bar{background-color:var(--surface);z-index:100;border-top:1px solid #ffffff1a;align-items:center;height:80px;padding:0 24px;display:flex;position:fixed;bottom:0;left:0;right:0}.player-info{align-items:center;width:30%;display:flex}.player-info img{border-radius:4px;width:48px;height:48px;margin-right:16px}.player-controls{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.main-controls{align-items:center;gap:24px;display:flex}.control-btn{color:var(--primary);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;font-size:24px;display:flex}.play-pause-btn{background:var(--primary);width:40px;height:40px;color:var(--background);border-radius:50%}.player-bar-inner{justify-content:space-between;align-items:center;height:72px;padding:0 24px;display:flex}.player-controls-left{flex:1;align-items:center;gap:16px;min-width:250px;display:flex}.player-track-center{flex:1;justify-content:center;align-items:center;min-width:200px;display:flex;overflow:hidden}.player-volume-right{color:#aaa;flex:1;justify-content:flex-end;align-items:center;gap:20px;min-width:250px;display:flex}.hover\:underline:hover{text-decoration:underline!important}.explore-buttons{gap:16px;padding:24px;display:flex}.explore-btn{color:#fff;background-color:#ffffff1a;border-radius:8px;flex:1;justify-content:flex-start;align-items:center;gap:12px;padding:16px 24px;font-size:20px;font-weight:700;text-decoration:none;transition:background-color .2s;display:flex}.explore-btn:hover{background-color:#fff3}.explore-btn-icon{font-size:24px}.playlist-row-container{padding:24px 24px 0}.playlist-row-title{margin-bottom:16px;font-size:24px;font-weight:700}.playlist-scroll-area{scrollbar-width:none;-ms-overflow-style:none;gap:16px;padding-bottom:16px;display:flex;overflow-x:auto}.playlist-scroll-area::-webkit-scrollbar{display:none}.playlist-card{border-radius:8px;flex-direction:column;min-width:160px;max-width:160px;padding:12px;transition:background-color .3s;display:flex}.playlist-card:hover{background-color:var(--surface)}.playlist-card-image-wrapper{aspect-ratio:1;border-radius:4px;width:100%;margin-bottom:12px;position:relative;overflow:hidden;box-shadow:0 4px 12px #0006}.playlist-card-image{object-fit:cover;width:100%;height:100%;transition:transform .3s}.playlist-card:hover .playlist-card-image{transform:scale(1.05)}.playlist-card-play-overlay{background-color:var(--accent);color:#fff;opacity:0;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;transition:all .3s;display:flex;position:absolute;bottom:8px;right:8px;transform:translateY(10px);box-shadow:0 4px 12px #00000080}.playlist-card:hover .playlist-card-play-overlay{opacity:1;transform:translateY(0)}.playlist-card-title{white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:14px;font-weight:700;overflow:hidden}.playlist-card-subtitle{color:var(--secondary);-webkit-line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;font-size:13px;display:-webkit-box;overflow:hidden}@media (max-width:768px){.app-container{flex-direction:column}.main-content{display:contents}.explore-buttons{display:none!important}.mobile-only-title{display:flex!important}.sidebar-title{display:none}.header{order:1;width:100%;margin-bottom:0;padding:12px 16px;position:relative;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--surface)!important}.sidebar{display:none}.login-btn-text,.login-user-info{display:none!important}.login-user-profile,.login-btn{padding:6px!important}.page-content{flex:1;order:3;padding-bottom:80px;overflow-y:auto}.mobile-menu-btn{color:#fff;cursor:pointer;background:0 0;border:none;align-items:center;margin-right:4px;padding:4px;display:flex}.mobile-menu-overlay{z-index:1000;background:#00000080;position:fixed;inset:0}.mobile-menu-drawer{background:var(--background);z-index:1001;flex-direction:column;width:280px;transition:transform .3s;display:flex;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%);box-shadow:4px 0 16px #00000080}.mobile-menu-drawer.open{transform:translate(0)}.mobile-menu-header{border-bottom:1px solid var(--surface);justify-content:space-between;align-items:center;padding:16px;display:flex}.mobile-menu-close-btn{color:#fff;cursor:pointer;background:0 0;border:none;padding:4px}.mobile-menu-content{flex:1;padding:16px 0;overflow-y:auto}.mobile-menu-content nav{align-items:flex-start;flex-direction:column!important}.search-bar{background:0 0;border:none;max-width:40px;margin-right:8px;overflow:hidden}.search-input{color:#0000;background:0 0;border:none;width:40px;padding-left:40px;padding-right:0}.search-input::placeholder{color:#0000}.search-bar.focused{z-index:50;background:var(--background);border-radius:0;align-items:center;margin:0;padding:0 8px;display:flex;position:absolute;inset:0;overflow:visible;max-width:100%!important}.search-bar.focused .search-input{color:#fff;background-color:#212121;border:1px solid #333;border-radius:20px;width:100%;height:40px;padding:0 40px}.search-bar.focused .search-input::placeholder{color:#aaa}.sidebar nav{justify-content:center;flex-direction:row!important}.playlist-header{text-align:center;flex-direction:column;align-items:center;padding:24px 16px 16px}.playlist-cover{width:180px;height:180px}.playlist-info h1{font-size:32px}.track-item{padding:8px}.track-item img{width:32px;height:32px}.track-title{font-size:14px}.player-info{width:auto}.player-info img{display:none}.player-controls{flex:1}.player-bar-inner{padding:0 12px}.player-controls-left{flex:unset;gap:8px;min-width:auto}.player-track-center{flex:1;justify-content:flex-start;min-width:auto;margin-left:12px}.player-volume-right{display:none}}