:root{--bg:#090b10;--panel:#12151e;--text:#f7f6fb;--muted:#a6a8b7;--green:#a3ff52;--pink:#ff74ba;--violet:#9c7bff}*{box-sizing:border-box}body{margin:0;background:#090b10;color:var(--text);font:14px 'DM Sans',sans-serif;min-height:100vh;overflow:hidden}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}.sidebar{position:fixed;top:0;bottom:90px;left:0;width:255px;background:#11141d;padding:24px 13px 18px;z-index:4}.spotify-brand{color:#fff;text-decoration:none;font:800 24px Manrope;display:flex;align-items:center;gap:7px;letter-spacing:-1.4px}.spotify-mark{width:27px;height:27px;background:var(--green);border-radius:50%;display:grid;align-content:center;gap:3px;padding:0 5px}.spotify-mark i{display:block;height:3px;border-radius:10px;background:#10130e;transform:skewY(-9deg)}.spotify-mark i:nth-child(1){margin-left:4px}.spotify-mark i:nth-child(2){margin-left:2px}.side-nav{display:grid;gap:5px;margin:28px 0}.side-nav button{padding:11px 13px;text-align:left;border-radius:8px;color:#b1b4c0;font-size:19px;display:flex;gap:13px;align-items:center}.side-nav button span{font-size:13px;font-weight:700}.side-nav button.active,.side-nav button:hover{background:#242937;color:#fff}.library-head{display:flex;align-items:center;padding:10px 13px;color:#bfc3ce}.library-head strong{font-size:13px;margin-right:auto}.library-head button{font-size:19px;color:#bdc1cd;margin-left:9px}.filters{display:flex;gap:6px;padding:10px 5px}.filters button{font-size:11px;background:#272d3a;padding:7px 10px;border-radius:20px}.playlist-list{overflow-y:auto;height:calc(100vh - 300px);padding:4px}.playlist-list::-webkit-scrollbar{width:5px}.playlist-list::-webkit-scrollbar-thumb{background:#333b4c}.playlist{width:100%;display:flex;gap:10px;text-align:left;align-items:center;padding:8px;border-radius:8px}.playlist:hover,.playlist.selected{background:#202633}.playlist-cover{width:40px;height:40px;border-radius:4px;flex:0 0 40px;background-size:cover;background-position:center}.liked-cover{display:grid;place-items:center;background:linear-gradient(135deg,#7a5df3,#e393ff);font-size:17px}.p1{background-image:linear-gradient(130deg,#1917296b,#ea6599aa),url('https://images.pexels.com/photos/1308881/pexels-photo-1308881.jpeg?auto=compress&cs=tinysrgb&w=150')}.p2{background-image:linear-gradient(130deg,#6690ef55,#ffb45caa),url('https://images.pexels.com/photos/1051075/pexels-photo-1051075.jpeg?auto=compress&cs=tinysrgb&w=150')}.p3{background-image:linear-gradient(130deg,#e6317e77,#f8b852aa),url('https://images.pexels.com/photos/164743/pexels-photo-164743.jpeg?auto=compress&cs=tinysrgb&w=150')}.p4{background-image:url('https://images.pexels.com/photos/169193/pexels-photo-169193.jpeg?auto=compress&cs=tinysrgb&w=150')}.p5{background-image:url('https://images.pexels.com/photos/1261728/pexels-photo-1261728.jpeg?auto=compress&cs=tinysrgb&w=150')}.p6{background-image:url('https://images.pexels.com/photos/1647962/pexels-photo-1647962.jpeg?auto=compress&cs=tinysrgb&w=150')}.p7{background-image:url('https://images.pexels.com/photos/1763075/pexels-photo-1763075.jpeg?auto=compress&cs=tinysrgb&w=150')}.playlist strong,.playlist small{display:block}.playlist strong{font-size:12px}.playlist small{font-size:10px;color:#969aab;margin-top:3px}main{position:absolute;left:255px;right:0;top:0;bottom:90px;overflow-y:auto;padding:0 36px 40px;background:radial-gradient(circle at 82% 0,#3c1e58 0,transparent 35%),radial-gradient(circle at 24% 10%,#173e49 0,transparent 28%),#10131a}.main-header{height:76px;display:flex;align-items:center;gap:18px}.history{display:flex;gap:8px}.history button{height:31px;width:31px;border-radius:50%;background:#090b0e;font-size:24px;line-height:10px}.welcome{font:700 23px Manrope;display:none}.welcome span{color:var(--green)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.header-actions button{background:#171b24;border-radius:18px;height:32px}.install{padding:0 13px;font-size:11px;font-weight:700}.bell{width:32px;font-size:17px}.user-avatar{width:32px;background-size:cover!important;background-position:center!important}.hero{min-height:325px;display:grid;grid-template-columns:1fr 410px;gap:20px;align-items:center;position:relative}.hero-copy{padding:25px 0}.hero-copy>p:first-child{color:var(--green);font-size:10px;font-weight:700;letter-spacing:1.8px}.hero h1{font:800 clamp(38px,4.4vw,65px)/.96 Manrope;margin:10px 0 18px;letter-spacing:-3px}.hero h1 em{font-style:normal;background:linear-gradient(90deg,#d8f574,#ff92ce);-webkit-background-clip:text;color:transparent}.hero-desc{color:#b7b9c7;max-width:390px;line-height:1.55}.play-hero{background:var(--green);color:#11160d;border-radius:24px;padding:12px 18px;font-weight:800;margin-top:12px;box-shadow:0 8px 24px #a3ff5240}.hero-art{height:280px;position:relative}.hero-art img{position:absolute;width:250px;height:250px;object-fit:cover;right:44px;top:15px;border-radius:48% 48% 18px 18px;box-shadow:0 25px 50px #0008;filter:saturate(1.2)}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-one{width:190px;height:190px;right:0;top:0;background:#ff75b077}.orb-two{width:120px;height:120px;right:220px;bottom:10px;background:#9a82ff80}.hero-sticker{position:absolute;right:4px;bottom:7px;width:65px;height:65px;border-radius:50%;background:var(--green);color:#10150e;display:grid;place-items:center;text-align:center;font:800 10px Manrope;transform:rotate(15deg)}.section-title{display:flex;justify-content:space-between;align-items:center;margin:22px 0 14px}.section-title h2{font:800 22px Manrope;margin:0;letter-spacing:-.6px}.section-title button{color:#a8adba;font-size:11px;font-weight:700}.album-row{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:13px}.album-card{padding:11px;background:#1a1e28;text-align:left;border-radius:11px;position:relative;transition:.25s}.album-card:hover{background:#292f3b;transform:translateY(-4px)}.album-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;margin-bottom:9px}.album-card strong,.album-card small{display:block}.album-card strong{font-size:13px}.album-card small{color:#a6a9b5;font-size:10px;line-height:1.35;margin-top:4px}.album-card i{font-style:normal;display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:var(--green);color:#12180f;position:absolute;right:16px;bottom:58px;opacity:0;transform:translateY(7px);transition:.25s}.album-card:hover i{opacity:1;transform:none}.track-section{margin-top:27px;padding-bottom:10px}.track-list{border-top:1px solid #ffffff12}.track{height:56px;display:grid;grid-template-columns:32px 42px minmax(170px,1fr) minmax(100px,.6fr) 35px 42px;gap:10px;align-items:center;padding:0 12px;border-radius:7px;color:#c4c7d1}.track:hover{background:#ffffff12}.track-number{color:#9297a5;font-size:11px;text-align:center}.track img{width:38px;height:38px;object-fit:cover;border-radius:4px}.track .track-name strong,.track .track-name small{display:block}.track .track-name strong{font-size:12px}.track .track-name small,.track .album-name{font-size:11px;color:#969baa}.track .favourite{color:#a7adbb;font-size:19px}.track .favourite.liked{color:var(--green)}.track .track-play{font-size:15px;color:var(--green);opacity:0}.track:hover .track-play{opacity:1}.player{height:90px;position:fixed;bottom:0;left:0;right:0;background:#151923f5;border-top:1px solid #2c3342;z-index:7;display:flex;align-items:center;padding:0 20px;gap:25px;backdrop-filter:blur(15px)}.now-playing{display:flex;align-items:center;gap:10px;width:30%}.now-playing img{width:55px;height:55px;object-fit:cover;border-radius:5px}.now-playing strong,.now-playing small{display:block}.now-playing strong{font-size:12px}.now-playing small{font-size:10px;color:#a1a6b6;margin-top:3px}.now-playing button{font-size:22px;color:#aeb4bf;margin-left:8px}.now-playing button.liked{color:var(--green)}.player-controls{width:40%;display:flex;flex-direction:column;align-items:center;gap:7px}.player-controls>div:first-child{display:flex;align-items:center;gap:17px}.player-controls button{color:#b4b8c3;font-size:17px}.play-main{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#f7f7f9!important;color:#101217!important;font-size:12px!important}.progress{height:3px;background:#4c5260;width:min(450px,95%);border-radius:3px}.progress span{height:100%;width:29%;background:#e9ecf4;display:block;border-radius:3px}.player-extra{width:30%;display:flex;justify-content:flex-end;align-items:center;gap:12px;color:#abb1c0}.volume{width:85px;height:3px;background:#4c5260}.volume i{display:block;width:62%;height:100%;background:#ddd}.mobile-top,.mobile-nav{display:none}dialog{border:0;padding:0;background:#141822;border-radius:14px;width:min(760px,94vw);box-shadow:0 30px 100px #000b;color:#fff;overflow:hidden}dialog::backdrop{background:#03050aa8;backdrop-filter:blur(4px)}.close-video{position:absolute;right:10px;top:7px;z-index:2;font-size:28px}.video-title{padding:17px 48px 14px 20px;font-weight:700}.video-title small{display:block;color:#a9afbd;font-size:11px;margin-top:3px}.video-wrap{position:relative;padding-top:56.25%}.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.toast{position:fixed;z-index:20;bottom:105px;left:50%;transform:translate(-50%,120px);background:var(--green);color:#11150e;border-radius:8px;padding:10px 14px;font-weight:700;transition:.3s}.toast.show{transform:translate(-50%,0)}@media(max-width:1050px){.album-row{grid-template-columns:repeat(4,minmax(130px,1fr))}.album-card:nth-child(5){display:none}.hero{grid-template-columns:1fr 300px}.hero-art img{width:220px;height:220px}.track{grid-template-columns:32px 42px minmax(150px,1fr) 35px 42px}.track .album-name{display:none}}@media(max-width:720px){body{overflow:auto;padding-bottom:138px}.sidebar{display:none}.mobile-top{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:#10131a}.mobile-top .spotify-brand{font-size:21px}.mobile-top button{font-size:18px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:58px;background:#151923fa;border-top:1px solid #2c3342;z-index:9;justify-content:space-around}.mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:19px;color:#aeb4bf}.mobile-nav button small{font-size:9px}.mobile-nav .active{color:#fff}main{position:static;overflow:visible;padding:0 14px 12px;background:radial-gradient(circle at 90% 0,#3c1e58 0,transparent 35%),#10131a}.main-header{display:none}.hero{min-height:360px;display:block}.hero-copy{padding-top:26px;position:relative;z-index:1}.hero h1{font-size:45px}.hero-desc{max-width:270px}.hero-art{position:absolute;right:5px;top:92px;width:185px;height:250px;opacity:.82}.hero-art img{width:160px;height:160px;right:3px;top:35px}.orb-two{right:110px}.hero-sticker{right:0;bottom:22px}.album-row{display:flex;overflow-x:auto;margin-right:-14px;padding-right:14px}.album-card{min-width:145px}.album-card:nth-child(5){display:block}.section-title h2{font-size:19px}.track-section{margin-top:22px}.track{grid-template-columns:25px 40px minmax(100px,1fr) 28px;height:59px;padding:0 3px}.track .track-play{display:none}.track .album-name{display:none}.track .favourite{font-size:17px}.player{height:80px;bottom:58px;padding:0 11px;background:#252b39}.now-playing{width:75%;gap:8px}.now-playing img{width:49px;height:49px}.player-controls{width:auto;margin-left:auto}.player-controls>div:first-child button:not(.play-main),.progress,.player-extra{display:none}.play-main{width:35px;height:35px}.toast{bottom:148px}}
