:root{--bg:#f6f8fd;--surface:#fff;--panel:#f9fbff;--ink:#18233a;--muted:#7b8599;--line:#e9eef6;--blue:#3779ef;--blue2:#68a8ff;--soft:#eaf2ff;--shadow:0 10px 38px rgba(42,71,122,.055);--radius:22px;--bar:82px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:14px}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}button{border:0;background:none;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}button[disabled]{opacity:.4;cursor:not-allowed}.hidden{display:none!important}
.app{display:grid;grid-template-columns:226px minmax(400px,1fr) 260px;min-height:100vh;max-width:1920px;margin:auto;padding-bottom:var(--bar)}.sidebar{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:32px 17px 20px;position:sticky;top:0;height:calc(100vh - var(--bar));min-height:650px}.brand{display:flex;align-items:center;gap:9px;margin:0 12px 47px;color:var(--ink)}.brand strong,.mobile-logo{font-family:Outfit,sans-serif;letter-spacing:-2.5px;font-weight:900;font-size:33px;line-height:1}.brand strong span,.mobile-logo span{color:var(--blue)}.brand-symbol{width:30px;height:30px;border-radius:11px;color:#fff;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:29px;line-height:1}.side-label{color:#9ca8bd;font-weight:800;font-size:10px;letter-spacing:1.5px;padding:0 15px;margin:0 0 14px}.side-label.mt{margin-top:31px}.side-nav{display:flex;flex-direction:column;gap:5px}.nav{width:100%;padding:13px 14px;display:flex;align-items:center;gap:14px;font-weight:700;color:#69768c;border-radius:12px;text-align:left}.nav:hover{color:var(--blue);background:var(--soft)}.nav.active{background:var(--soft);color:var(--blue)}.nav b{margin-left:auto;background:#dceaff;padding:3px 7px;border-radius:20px;font-size:11px}.side-playlists{overflow:auto;max-height:145px;display:grid;gap:3px}.side-playlists button{color:var(--muted);padding:8px 14px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-bottom{margin-top:auto;padding-top:20px}.listen-card{padding:18px;border-radius:17px;background:linear-gradient(150deg,#ebf4ff,#eff5ff);color:#314e7c;line-height:1.45}.listen-icon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--blue);color:white;font-size:25px;margin-bottom:12px}.listen-card b{display:block;font-family:Outfit;font-size:16px}.listen-card p{font-size:12px;color:#6b88b3}.subtle-btn{display:flex;gap:8px;align-items:center;font-weight:800;color:var(--blue);padding:0}.subtle-btn svg{width:15px}.credit{margin:25px 5px 0;font-size:9px;letter-spacing:1px;color:#b4bfd2;text-align:center}
.main-col{min-width:0}.topbar{height:90px;padding:18px 34px;display:flex;align-items:center;gap:13px;position:sticky;top:0;background:rgba(246,248,253,.93);backdrop-filter:blur(18px);z-index:5}.search-input{height:49px;width:min(500px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:12px;color:#9ca7bc;padding:0 16px;box-shadow:var(--shadow)}.search-input input{border:0;background:none;min-width:0;width:100%;height:100%;outline:none;color:var(--ink)}.search-input:focus-within{border-color:#90b6ff;box-shadow:0 0 0 3px rgba(55,121,239,.08)}.search-input input::placeholder{color:#a5afc0}.round-btn,.avatar,.icon-btn{display:grid;place-items:center;flex:none}.round-btn{margin-left:auto;width:43px;height:43px;border:1px solid var(--line);border-radius:50%;background:var(--surface)}.round-btn:hover,.icon-btn:hover{background:var(--soft);color:var(--blue)}.avatar{width:42px;height:42px;border-radius:50%;color:white;background:linear-gradient(135deg,#7aaafc,#226cda);font-family:Outfit;font-weight:800}.hamburger,.mobile-logo{display:none}.content{padding:2px 34px 70px;min-height:calc(100vh - 155px)}.footnote{margin:35px 34px 0;border-top:1px solid var(--line);padding:18px 0;font-size:11px;color:#aab3c3}
h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{font-family:Outfit,sans-serif;letter-spacing:-.65px}h1{font-size:36px;line-height:1.18;margin-bottom:10px}h2{font-size:23px}h3{font-size:18px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--blue);text-transform:uppercase}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin:37px 0 16px}.section-heading h2{margin:0}.section-heading p{margin:5px 0 0;color:var(--muted);font-size:13px}.see-all{color:var(--blue);font-weight:800;font-size:12px;white-space:nowrap}.see-all:hover{text-decoration:underline}.hello{display:flex;align-items:center;justify-content:space-between;margin:5px 0 22px}.hello p{margin:0;color:var(--muted)}.hero{border-radius:25px;overflow:hidden;min-height:245px;background:linear-gradient(120deg,#a6d8fb 0,#9da9f2 55%,#b5b2f3 100%);position:relative;display:flex;align-items:center;padding:36px;color:#1d315c;isolation:isolate}.hero:before,.hero:after{content:'';position:absolute;border:2px solid rgba(255,255,255,.22);border-radius:50%;z-index:-1}.hero:before{width:380px;height:380px;right:-90px;top:-115px}.hero:after{width:260px;height:260px;right:10px;top:-45px}.hero-copy{max-width:58%;z-index:1}.hero h1{font-size:clamp(28px,3vw,45px);line-height:1.07;margin:13px 0 12px}.hero p{line-height:1.65;max-width:320px;margin-bottom:20px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.btn-primary{background:var(--blue);color:#fff;border-radius:12px;padding:13px 21px;font-weight:800}.btn-primary:hover{background:#2265cf}.btn-light{background:#fff;color:#315daa;border-radius:12px;padding:13px 18px;font-weight:800}.hero-art{position:absolute;right:7%;top:11%;width:190px;height:190px;background:linear-gradient(135deg,#d6e4ff,#6e9fee);border:12px solid #fff9;box-shadow:0 22px 50px #36559c3d;border-radius:50%;display:grid;place-items:center;font-size:100px;color:white;transform:rotate(-13deg)}.hero-art:after{content:'';position:absolute;width:40px;height:40px;border-radius:50%;background:#b5ccf3;border:9px solid white}.feature-chips{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 5px}.chip{padding:10px 15px;background:var(--surface);border:1px solid var(--line);border-radius:99px;color:#7486a1;font-weight:800;font-size:12px;white-space:nowrap}.chip:hover,.chip.active{background:var(--blue);color:#fff;border-color:var(--blue)}.genre-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.genre-card{min-height:125px;border-radius:18px;padding:17px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;text-align:left;isolation:isolate;color:#fff;box-shadow:var(--shadow)}.genre-card:after{content:'♪';font-size:90px;font-weight:900;transform:rotate(18deg);position:absolute;right:-9px;bottom:-37px;opacity:.22;z-index:-1}.genre-card strong{font-family:Outfit;font-size:17px;line-height:1.2}.genre-card small{opacity:.85;font-size:11px}.genre-card:hover{transform:translateY(-3px);transition:transform .2s}.gradient-0{background:linear-gradient(135deg,#5d86c9,#83a7dd)}.gradient-1{background:linear-gradient(135deg,#eb79a4,#be719f)}.gradient-2{background:linear-gradient(135deg,#b67ad6,#858ae8)}.gradient-3{background:linear-gradient(135deg,#5daea7,#63c1b7)}.gradient-4{background:linear-gradient(135deg,#ee9d56,#df7c80)}.gradient-5{background:linear-gradient(135deg,#6b93cc,#4d76b4)}.gradient-6{background:linear-gradient(135deg,#be7e96,#e1a7ad)}.gradient-7{background:linear-gradient(135deg,#6372bd,#7d8ae5)}.gradient-8{background:linear-gradient(135deg,#e49775,#dc797b)}
.song-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.song-tile{border-radius:17px;background:var(--surface);padding:10px;text-align:left;box-shadow:var(--shadow);min-width:0;border:1px solid var(--line)}.song-tile:hover{box-shadow:0 12px 28px rgba(55,121,239,.13);transform:translateY(-2px);transition:all .2s}.song-tile .cover{width:100%;aspect-ratio:1;border-radius:12px;margin-bottom:10px}.song-tile b,.song-tile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-tile b{font-size:12px}.song-tile small{font-size:11px;color:var(--muted);margin-top:4px}.cover{background:#e8f0fc;object-fit:cover;display:block}.row-list{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:8px 13px;box-shadow:var(--shadow)}.song-row{display:grid;grid-template-columns:32px 52px minmax(0,1fr) auto;gap:13px;align-items:center;padding:9px 2px;border-radius:12px}.song-row+.song-row{border-top:1px solid var(--line)}.song-row:hover{background:var(--panel)}.row-number{color:var(--muted);text-align:center;font-size:12px}.song-row img{width:50px;height:50px;border-radius:11px}.row-text{min-width:0;text-align:left}.row-text b,.row-text small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.row-text small{color:var(--muted);margin-top:4px;font-size:11px}.row-actions{display:flex;align-items:center;gap:3px}.row-actions .icon-btn{width:36px;height:36px}.active-heart{color:#ee6488!important}.icon-btn{width:36px;height:36px;border-radius:10px}.icon-btn svg{width:19px;height:19px}.pill{border-radius:99px;padding:5px 10px;font-size:11px;font-weight:800;background:var(--soft);color:var(--blue)}.source-note{margin-top:15px;color:var(--muted);font-size:12px;line-height:1.6}.empty,.loading,.error-box{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:30px;text-align:center;color:var(--muted);line-height:1.65}.empty h3,.error-box h3{color:var(--ink)}.error-box{background:#fff5f2;border-color:#fce0d7;color:#a65e4b}.empty svg{width:32px;height:32px;color:var(--blue)}.search-hero{margin:10px 0 22px}.search-hero h1{font-size:31px}.search-hero p{color:var(--muted)}.big-search{font-size:19px}.back-row{display:flex;gap:15px;align-items:center;margin:9px 0 23px}.playlist-banner{border-radius:22px;padding:32px;background:linear-gradient(120deg,#c5dcff,#edf1ff);display:flex;align-items:center;gap:25px;min-height:210px;margin-bottom:25px}.playlist-banner .playlist-cover{display:grid;place-items:center;width:150px;height:150px;background:linear-gradient(135deg,#528ae9,#94b2ed);color:white;font-size:90px;box-shadow:0 16px 28px #4676bd30;border-radius:18px;flex:none}.playlist-banner h1{font-size:34px}.playlist-banner p{margin:4px 0 15px;color:#4a6593}.library-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.library-card{border-radius:20px;padding:20px 12px;min-height:130px;color:white;text-align:left;display:flex;flex-direction:column;justify-content:space-between}.library-card svg{width:25px;height:25px}.library-card strong{font-size:14px}.playlist-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.playlist-card{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);padding:14px;border-radius:15px;text-align:left;min-width:0}.playlist-card b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-card span{width:44px;height:44px;border-radius:11px;background:var(--soft);color:var(--blue);display:grid;place-items:center}.playlist-card small{color:var(--muted)}
.right-col{border-left:1px solid var(--line);background:var(--surface);padding:31px 20px 85px;position:sticky;top:0;height:calc(100vh - var(--bar));overflow-y:auto}.panel-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.4px;color:var(--muted);font-weight:900}.right-art{width:100%;aspect-ratio:1;border-radius:17px;margin:25px 0 16px;object-fit:cover}.right-title{font-family:Outfit;font-size:19px;margin:0 0 4px}.right-artist{font-size:12px;color:var(--muted)}.right-source{display:inline-block;margin-top:14px}.upnext{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}.upnext h4{font-size:12px}.upnext .song-row{grid-template-columns:37px minmax(0,1fr);gap:9px}.upnext .song-row img{width:37px;height:37px}.upnext .row-actions,.upnext .row-number{display:none}
.mini-player{height:var(--bar);background:rgba(255,255,255,.96);backdrop-filter:blur(20px);position:fixed;bottom:0;left:0;right:0;z-index:12;display:flex;align-items:center;justify-content:space-between;padding:8px 24px 21px;box-shadow:0 -8px 26px rgba(19,39,79,.075);border-top:1px solid var(--line)}.mini-song{display:flex;gap:12px;text-align:left;align-items:center;min-width:0;width:27%;padding:0}.mini-song img{height:49px;width:49px;border-radius:9px;object-fit:cover}.mini-song span{min-width:0}.mini-song b,.mini-song small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mini-song b{font-size:13px}.mini-song small{font-size:11px;color:var(--muted);margin-top:4px}.player-actions{display:flex;align-items:center;gap:3px}.play-btn{border-radius:50%;width:44px;height:44px;background:var(--blue);color:white;display:grid;place-items:center}.play-btn:hover{background:#235fc8}.play-btn svg{width:21px;height:21px;stroke-width:2.5}.player-extra{display:flex;gap:7px;align-items:center;justify-content:flex-end;width:27%}.player-extra svg{width:17px}.player-extra input{width:90px}.mini-progress{position:absolute;bottom:3px;left:29%;right:29%;display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}input[type=range]{appearance:none;-webkit-appearance:none;cursor:pointer;background:#dde7f5;height:4px;border-radius:8px;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;background:var(--blue);border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px var(--blue)}.mini-progress input{flex:1;min-width:10px}.bottom-nav{display:none}
.full-player{position:fixed;z-index:40;inset:0;display:flex;align-items:center;justify-content:center;background:var(--surface);overflow:auto}.full-background{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(70px);opacity:.22;transform:scale(1.15);pointer-events:none}.full-content{width:min(460px,100%);position:relative;padding:20px 25px 40px;margin:auto}.full-top{display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:10px;letter-spacing:1px;margin-bottom:18px}.full-content>img{width:min(100%,360px);aspect-ratio:1;display:block;margin:0 auto;border-radius:22px;object-fit:cover;box-shadow:0 28px 70px rgba(13,52,120,.18)}.full-song-details{display:flex;align-items:center;justify-content:space-between;margin:29px 0 20px}.full-song-details h2{font-size:23px;margin:0 0 5px}.full-song-details p{color:var(--muted);margin:0}.waveform{display:flex;gap:3px;height:30px;justify-content:center;align-items:center;margin:0 0 20px}.waveform span{width:3px;min-height:3px;background:var(--blue);opacity:.8;border-radius:4px;transition:height .25s}.waveform.playing span{animation:wave 1.2s ease-in-out infinite alternate}.waveform.playing span:nth-child(3n){animation-duration:1.5s}.waveform.playing span:nth-child(5n){animation-duration:.75s}@keyframes wave{from{transform:scaleY(.6)}to{transform:scaleY(1.1)}}.full-seek input{width:100%}.full-seek div{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:8px}.full-controls{display:flex;justify-content:space-around;align-items:center;margin:25px 0 20px}.play-btn.large{width:64px;height:64px}.play-btn.large svg{width:28px;height:28px}.full-extras{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;gap:6px}.full-extras button{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:10px;padding:4px}.full-extras button svg{width:21px;height:21px}.full-extras button:hover{color:var(--blue)}.queue-panel{position:fixed;right:0;top:0;bottom:0;width:min(390px,100vw);z-index:50;background:var(--surface);box-shadow:-14px 0 35px #23396318;overflow:auto;padding:25px}.queue-panel header{display:flex;align-items:center;justify-content:space-between}.queue-panel .row-list{padding:0}.backdrop{position:fixed;inset:0;background:rgba(15,32,64,.38);z-index:44}.sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);z-index:55;border-radius:25px 25px 0 0;background:var(--surface);box-shadow:0 -12px 45px #25345624;padding:22px 18px 28px;max-height:85vh;overflow:auto}.sheet h3{margin:3px 8px 19px}.sheet-item{width:100%;display:flex;align-items:center;gap:14px;padding:14px;border-radius:13px;font-weight:700;text-align:left}.sheet-item:hover{background:var(--soft)}.sheet-item svg{width:21px;height:21px;color:var(--blue)}.sheet input[type=text]{width:100%;padding:13px;border:1px solid var(--line);border-radius:10px;margin-bottom:13px;background:var(--panel);color:var(--ink)}.toast{position:fixed;z-index:80;bottom:calc(var(--bar) + 20px);left:50%;transform:translateX(-50%) translateY(130px);opacity:0;pointer-events:none;background:#1e3760;color:#fff;border-radius:11px;padding:12px 20px;transition:.2s;font-size:12px;max-width:min(400px,95vw);text-align:center}.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
[data-theme=dark]{--bg:#0d1220;--surface:#151c2c;--panel:#1b2437;--ink:#f2f6ff;--muted:#9eabc1;--line:#29354a;--soft:#1d3353;--shadow:0 10px 32px rgba(0,0,0,.15)}[data-theme=dark] .topbar{background:#0d1220ed}[data-theme=dark] .mini-player{background:#151c2cfa}[data-theme=dark] .hero{color:#20335d}[data-theme=dark] .error-box{background:#332524}[data-theme=dark] .playlist-banner{color:#283b63}[data-theme=dark] .playlist-banner h1{color:#183362}
@media(max-width:1360px){.app{grid-template-columns:205px minmax(0,1fr) 235px}.genre-grid{grid-template-columns:repeat(3,1fr)}.song-grid{grid-template-columns:repeat(4,1fr)}.topbar{padding-inline:24px}.content{padding-inline:24px}}
@media(max-width:1120px){.app{grid-template-columns:205px minmax(0,1fr)}.right-col{display:none}.song-grid{grid-template-columns:repeat(4,1fr)}.genre-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:780px){:root{--bar:72px}.app{display:block;padding-bottom:calc(var(--bar) + 72px)}.sidebar,.right-col{display:none}.topbar{height:85px;padding:15px 19px;gap:10px}.hamburger,.mobile-logo{display:grid}.hamburger{margin-right:1px}.mobile-logo{font-family:Outfit;font-weight:900;font-size:25px;letter-spacing:-2px}.search-input{flex:1;border-radius:13px;height:48px;padding:0 12px;gap:8px}.search-input input{font-size:12px}.round-btn,.avatar{display:none}.content{padding:4px 18px 55px}.footnote{margin-inline:18px}.hero{padding:26px;min-height:228px}.hero-copy{max-width:85%}.hero h1{font-size:32px}.hero-art{right:-65px;top:5%;opacity:.34;width:215px;height:215px}.genre-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.song-tile{padding:8px}.section-heading{margin-top:28px}.section-heading h2{font-size:22px}.library-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.playlist-list{grid-template-columns:1fr 1fr}.mini-player{bottom:65px;height:64px;background:var(--surface);border:1px solid var(--line);border-radius:14px;left:10px;right:10px;padding:8px 12px 12px;box-shadow:0 9px 35px #101b3526}.mini-song{width:auto;flex:1}.mini-song img{width:42px;height:42px}.player-actions{gap:0}.player-actions .icon-btn{width:31px}.player-actions .play-btn{width:37px;height:37px}.hide-sm,.player-extra{display:none}.mini-progress{left:8px;right:8px;bottom:0;gap:0}.mini-progress input{height:2px}.mini-progress span{display:none}.bottom-nav{height:65px;position:fixed;z-index:13;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom)}.bottom-nav button{font-size:10px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 13px}.bottom-nav button.active{color:var(--blue);font-weight:800}.bottom-nav svg{width:21px;height:21px}.full-content{padding-top:max(20px,env(safe-area-inset-top));padding-bottom:25px}.full-content>img{width:min(100%,310px)}.toast{bottom:148px}.song-row{grid-template-columns:24px 46px minmax(0,1fr) auto;gap:8px}.song-row img{width:44px;height:44px}.row-actions .icon-btn{width:30px;height:30px}.row-actions .icon-btn:first-child{display:none}.row-actions .icon-btn svg{width:17px}.row-list{padding-inline:9px}.playlist-banner{padding:22px;gap:17px;min-height:165px}.playlist-banner .playlist-cover{height:110px;width:110px;font-size:55px}.playlist-banner h1{font-size:24px}.playlist-banner p{font-size:11px}.hello h1{font-size:29px}}
@media(max-width:380px){.content{padding-inline:13px}.topbar{padding-inline:11px}.hero h1{font-size:27px}.hero-copy{max-width:90%}.genre-card{min-height:105px}.genre-card strong{font-size:15px}.playlist-list{grid-template-columns:1fr}.song-tile b{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:after,*:before{animation:none!important;scroll-behavior:auto!important;transition:none!important}}