:root{--bg:#08090c;--panel:#121318;--panel2:#181a21;--line:#272a34;--text:#f7f7fa;--muted:#9296a2;--purple:#8d55ff;--green:#1ed760;--player:92px;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 72% -16%,#171326 0,transparent 34%),var(--bg);color:var(--text);padding-left:226px;padding-bottom:var(--player);overflow-x:hidden}button,input{font:inherit;color:inherit}button{cursor:pointer}
.sidebar{position:fixed;inset:0 auto var(--player) 0;width:226px;padding:25px 16px;background:rgba(8,9,12,.97);border-right:1px solid var(--line);z-index:20}.brand{font-size:22px;font-weight:900;margin:0 10px 34px;display:flex;gap:10px;align-items:center}.brand i{font-style:normal;color:var(--purple)}.nav{width:100%;height:45px;border:0;background:transparent;color:#9ca0aa;border-radius:11px;text-align:left;padding:0 13px;font-weight:750;margin:2px 0}.nav strong{font-size:20px;display:inline-block;width:27px;text-align:center}.nav span{margin-left:10px}.nav:hover,.nav.active{color:white;background:linear-gradient(90deg,rgba(141,85,255,.25),rgba(141,85,255,.06))}
main{max-width:1500px;margin:auto;padding:28px 40px 62px}header{display:flex;justify-content:space-between;align-items:center;gap:24px}header p{margin:0;color:#9c78ff;font-size:10px;font-weight:900;letter-spacing:2px}h1{font-size:32px;letter-spacing:-1.3px;margin:4px 0 0}.search{width:min(500px,47vw);height:48px;border-radius:999px;border:1px solid var(--line);background:#111218;display:flex;align-items:center;gap:10px;padding:0 17px}.search input{width:100%;border:0;outline:0;background:transparent}.search kbd{font-size:10px;color:#777b87;border:1px solid #393c46;border-radius:5px;padding:3px 6px}
.hero{height:300px;margin:27px 0 34px;border-radius:25px;overflow:hidden;border:1px solid #2a2d37;position:relative;background:#15161d}.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 42%;transform:scale(1.02)}.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,11,.97),rgba(7,8,11,.7) 46%,rgba(7,8,11,.06))}.hero-copy{position:relative;z-index:2;padding:42px;max-width:525px}.hero-copy small{color:#c3a9ff;font-weight:900;letter-spacing:2px}.hero-copy h2{font-size:56px;line-height:.98;letter-spacing:-2.8px;margin:13px 0}.hero-copy p{color:#c5c7ce}.primary{border:0;border-radius:999px;background:white;color:#101115;font-weight:900;padding:12px 20px}
.section-head{display:flex;justify-content:space-between;align-items:end;margin:31px 0 15px}.section-head h2{margin:0;font-size:23px}.section-head span{font-size:12px;color:var(--muted)}
.genre-grid{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:16px}.genre-card{position:relative;aspect-ratio:1.52;border-radius:18px;overflow:hidden;cursor:pointer;background:#161820;box-shadow:0 17px 35px #0007}.genre-card img{width:100%;height:100%;object-fit:cover;transition:.32s}.genre-card:hover img{transform:scale(1.055)}.genre-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,10,.85),rgba(5,6,10,.14) 75%)}.genre-copy{position:absolute;left:19px;right:18px;bottom:17px;z-index:2}.genre-copy h3{font-size:22px;letter-spacing:-.7px;margin:0 0 5px}.genre-copy p{font-size:11px;color:rgba(255,255,255,.74);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.library-entry{display:grid;grid-template-columns:50px 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);border-radius:16px;background:linear-gradient(90deg,#15161c,#111218);padding:15px 17px;cursor:pointer}.library-entry:hover{background:#191b22}.library-icon{width:48px;height:48px;border-radius:13px;background:rgba(141,85,255,.18);display:grid;place-items:center;font-size:24px}.library-entry b,.library-entry span{display:block}.library-entry span{font-size:12px;color:var(--muted);margin-top:4px}.chevron{font-size:28px;color:#acafb8}
.song-table{border:1px solid var(--line);border-radius:16px;overflow:hidden}.song-row{display:grid;grid-template-columns:32px 51px minmax(0,1fr) 44px;align-items:center;gap:12px;padding:10px 13px;border-bottom:1px solid #22242c;cursor:pointer}.song-row:last-child{border:0}.song-row:hover{background:#171920}.song-row img{width:44px;height:44px;border-radius:8px;object-fit:cover}.song-meta b,.song-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-meta span{font-size:12px;color:var(--muted);margin-top:3px}.song-number{font-size:12px;color:#737783;text-align:center}.song-more{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:#b8bbc3;font-weight:900}.song-more:hover{background:#292c35;color:white}
.horizontal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(155px,190px);gap:15px;overflow-x:auto;padding-bottom:7px;scrollbar-width:none}.horizontal::-webkit-scrollbar{display:none}.track-card{min-width:0;cursor:pointer}.track-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;box-shadow:0 15px 30px #0008;transition:.25s}.track-card:hover img{transform:translateY(-4px)}.track-card h3{font-size:14px;margin:10px 2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-card p{font-size:12px;color:var(--muted);margin:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{border:1px solid var(--line);background:#15161c;border-radius:99px;padding:9px 14px}.genre-head{display:flex;gap:25px;align-items:flex-end;margin:23px 0 28px}.genre-head img{width:190px;height:190px;border-radius:19px;object-fit:cover;box-shadow:0 25px 55px #000}.genre-head h2{font-size:46px;letter-spacing:-2px;margin:4px 0}.genre-head p{color:var(--muted)}
.playlist-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:25px 0 16px}.playlist-toolbar h2{margin:0;font-size:29px;letter-spacing:-1px}.toolbar-actions{display:flex;gap:10px}.soft-button{border:1px solid var(--line);background:#15161c;border-radius:999px;padding:10px 15px;font-weight:800}.soft-button.primary-soft{background:white;color:#111;border-color:white}.playlist-search{width:min(360px,100%);height:43px;border:1px solid var(--line);background:#121318;border-radius:12px;padding:0 13px;outline:0}
.playlist-list{border:1px solid var(--line);border-radius:16px;overflow:hidden}.playlist-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto 40px;gap:13px;align-items:center;padding:13px 15px;border-bottom:1px solid #22242c;cursor:pointer}.playlist-row:last-child{border:0}.playlist-row:hover{background:#171920}.playlist-note{width:44px;height:44px;border-radius:12px;background:#22242d;display:grid;place-items:center;font-size:21px}.playlist-row b,.playlist-row span{display:block}.playlist-row span{font-size:12px;color:var(--muted);margin-top:4px}.playlist-count{font-size:12px;color:#a4a7b0}.playlist-options{border:0;background:transparent;font-size:18px}.playlist-empty{padding:38px;border:1px dashed #31343e;border-radius:16px;text-align:center;color:var(--muted)}.playlist-empty h3{color:white;margin:0 0 8px}.playlist-detail-title{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin:25px 0}.playlist-detail-title h2{font-size:42px;letter-spacing:-1.7px;margin:0}.playlist-detail-title p{color:var(--muted);margin:6px 0 0}
.player{position:fixed;inset:auto 0 0 0;height:var(--player);z-index:40;background:rgba(15,16,21,.97);backdrop-filter:blur(20px);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;padding:0 24px;cursor:pointer}.now{display:flex;gap:12px;align-items:center;min-width:0}.now img{width:58px;height:58px;border-radius:9px;object-fit:cover}.now-text{min-width:0}.now b,.now span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now span{font-size:12px;color:var(--muted);margin-top:4px}.now button{border:0;background:transparent;font-size:21px}.controls{display:flex;justify-content:center;align-items:center;gap:18px}.controls button{border:0;background:transparent}.mainplay{width:40px;height:40px;border-radius:50%;background:var(--purple)!important}.timeline{display:grid;grid-template-columns:36px 1fr 36px;gap:8px;align-items:center;font-size:10px;color:var(--muted);margin-top:6px}.timeline input,.volume input{accent-color:var(--purple);width:100%}.volume{display:flex;width:160px;gap:10px;align-items:center;justify-self:end}.mobile-progress{display:none}
.now-playing{position:fixed;inset:0;z-index:80;background:#08090c;opacity:0;visibility:hidden;transform:translateY(100%);transition:.38s cubic-bezier(.22,.85,.24,1)}.now-playing.open{opacity:1;visibility:visible;transform:none}.now-playing-backdrop{position:absolute;inset:-35px;background-size:cover;background-position:center;filter:blur(55px) saturate(.75);opacity:.35}.now-playing-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,8,.25),#08090c 88%)}.now-playing-shell{position:relative;z-index:1;width:min(1180px,100%);height:100%;margin:auto;padding:24px 42px 38px;display:flex;flex-direction:column}.now-playing-header{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;text-align:center}.now-playing-header span,.now-playing-header b{display:block}.now-playing-header span{font-size:10px;letter-spacing:2px;color:#c5c7ce}.now-playing-header b{font-size:13px;margin-top:3px}.round-icon{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(9,10,14,.35);font-size:23px}.now-playing-content{flex:1;display:grid;grid-template-columns:minmax(310px,515px) minmax(360px,510px);justify-content:center;align-items:center;gap:clamp(45px,8vw,105px);padding:30px 0 15px}.large-cover{width:100%;aspect-ratio:1;border-radius:24px;overflow:hidden;box-shadow:0 35px 90px #000a}.large-cover img{width:100%;height:100%;object-fit:cover}.title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}.title-row h2{font-size:clamp(31px,4vw,54px);letter-spacing:-2px;line-height:1.02;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-row p{font-size:16px;color:#c5c7ce;margin:8px 0 0}.title-row button{border:0;background:transparent;font-size:31px}.waveform-panel{margin:25px 0 18px}.waveform-panel canvas{display:block;width:100%;height:110px;touch-action:none;cursor:pointer}.wave-times{display:flex;justify-content:space-between;font-size:11px;color:#c0c3cb}.large-controls{display:grid;grid-template-columns:44px 58px 78px 58px 44px;align-items:center;justify-content:center;gap:clamp(8px,2vw,21px)}.large-controls button{border:0;background:transparent;font-size:23px}.large-controls .large-play{width:76px;height:76px;border-radius:50%;background:white;color:#111}.large-controls button.active{color:var(--green)}
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;padding:18px}.modal-backdrop[hidden]{display:none}.modal-sheet{width:min(470px,100%);max-height:min(680px,86vh);overflow:auto;background:#17181e;border:1px solid #30333d;border-radius:20px;padding:20px;box-shadow:0 30px 90px #000}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.modal-head h3{margin:0;font-size:21px}.modal-close{border:0;background:#252831;border-radius:50%;width:34px;height:34px}.modal-input{width:100%;height:46px;border:1px solid #343741;border-radius:12px;background:#101116;padding:0 13px;outline:0}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}.modal-list{border:1px solid #30333b;border-radius:13px;overflow:hidden}.modal-list-row{width:100%;border:0;border-bottom:1px solid #292c34;background:transparent;text-align:left;padding:13px;display:flex;justify-content:space-between;align-items:center}.modal-list-row:last-child{border:0}.modal-list-row:hover{background:#20222a}.danger{color:#ff757c}.toast{position:fixed;right:24px;bottom:112px;z-index:120;background:white;color:#111;padding:12px 16px;border-radius:12px;font-weight:850;opacity:0;transform:translateY(8px);transition:.22s}.toast.show{opacity:1;transform:none}.empty{padding:27px;border:1px dashed #30333c;border-radius:15px;color:var(--muted)}
@media(max-width:1120px){.genre-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
  :root{--player:70px}body{padding-left:0;padding-bottom:calc(133px + env(safe-area-inset-bottom))}.sidebar{inset:auto 0 0 0;width:auto;height:63px;padding:6px 8px calc(5px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);display:block}.brand{display:none}.sidebar nav{display:grid;grid-template-columns:repeat(5,1fr);height:100%}.nav{height:52px;padding:4px;text-align:center;margin:0}.nav strong,.nav span{display:block;width:auto;margin:0}.nav strong{font-size:19px}.nav span{font-size:9px;margin-top:2px}
  main{padding:19px 14px 38px}header{display:block}h1{font-size:27px}.search{width:100%;margin-top:15px}.search kbd{display:none}.hero{height:265px;margin-top:20px;border-radius:19px}.hero-copy{padding:27px}.hero-copy h2{font-size:44px}.genre-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.genre-card{aspect-ratio:1.28;border-radius:14px}.genre-copy{left:14px;bottom:13px}.genre-copy h3{font-size:17px}.genre-copy p{display:none}.section-head{margin-top:27px}.section-head h2{font-size:20px}.section-head span{font-size:10px}
  .song-row{grid-template-columns:25px 47px minmax(0,1fr) 37px;padding:9px 9px;gap:9px}.song-row img{width:42px;height:42px}.playlist-toolbar{display:block}.toolbar-actions{margin-top:12px}.playlist-search{width:100%}.playlist-row{grid-template-columns:43px minmax(0,1fr) 32px}.playlist-count{display:none}.playlist-detail-title h2{font-size:32px}
  .genre-head{align-items:center;gap:15px}.genre-head img{width:110px;height:110px}.genre-head h2{font-size:30px}.genre-head p{font-size:12px}
  .player{bottom:63px;height:70px;grid-template-columns:1fr auto;padding:7px 11px}.mobile-progress{display:block;position:absolute;left:0;right:0;top:0;height:2px;background:#292c34}.mobile-progress span{display:block;height:100%;width:0;background:white}.now img{width:48px;height:48px}.now-text{max-width:calc(100vw - 180px)}.center .timeline,.volume,.controls button:not(.mainplay),.now #likeBtn{display:none}.mainplay{width:42px;height:42px}.now-playing-shell{padding:calc(12px + env(safe-area-inset-top)) 17px calc(22px + env(safe-area-inset-bottom))}.now-playing-content{display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:24px 0 0}.large-cover{width:min(78vw,390px);border-radius:18px}.now-playing-details{width:100%;margin-top:28px}.title-row h2{font-size:clamp(26px,7vw,36px)}.title-row p{font-size:14px}.waveform-panel{margin:17px 0 12px}.waveform-panel canvas{height:84px}.large-controls{grid-template-columns:38px 48px 68px 48px 38px}.large-controls .large-play{width:66px;height:66px}.modal-backdrop{align-items:flex-end;padding:0}.modal-sheet{width:100%;max-height:82vh;border-radius:22px 22px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}.toast{left:14px;right:14px;bottom:150px;text-align:center}
}
@media(max-width:390px){.genre-copy h3{font-size:15px}.now-playing-content{padding-top:13px}.large-cover{width:min(75vw,300px)}.now-playing-details{margin-top:20px}.waveform-panel canvas{height:72px}.large-controls{gap:7px}}