:root{--pink:#ff0040;--pink2:#ff4773;--bg:#000;--panel:#121212;--panel2:#181818;--soft:#242424;--line:#303030;--text:#fff;--muted:#aaa;--player:92px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;height:100%;overflow:hidden}
button,input{font:inherit}
.hidden{display:none!important}
button{color:inherit}
.boot{position:fixed;inset:0;z-index:100;display:grid;place-content:center;justify-items:center;gap:16px;background:#060606}
.boot img{width:72px;height:72px;border-radius:22px}
.boot p{color:#aaa;letter-spacing:.08em}
.spinner{width:30px;height:30px;border:2px solid #333;border-top-color:var(--pink);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
.login{height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:radial-gradient(circle at 18% 75%,#ff004025,transparent 38%),#080808}
.login-hero{padding:42px 7vw;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #272727}
.brand{display:flex;align-items:center;gap:12px;letter-spacing:.18em}
.brand img,.top-logo img{width:43px;height:43px;border-radius:13px}
.overline{color:var(--pink2);font-weight:800;letter-spacing:.18em;font-size:11px}
.login h1{font:800 clamp(48px,6vw,88px)/.96 Manrope;margin:17px 0}
.login h1 em{font-style:normal;color:var(--pink)}
.login-hero p{color:#aaa;font-size:19px;max-width:530px}
.login-hero small{color:#777}
.login-card{align-self:center;justify-self:center;width:min(430px,90%);padding:40px;background:#151515;border:1px solid #303030;border-radius:24px;box-shadow:0 30px 90px #000}
.login-card>img{width:58px;height:58px;border-radius:18px}
.login-card h2{font:800 30px Manrope;margin:18px 0 5px}
.login-card p{color:#999;margin:0 0 26px}
.login-card label{display:block;font-size:13px;font-weight:700;margin:16px 0 7px}
.login-card input{width:100%;padding:14px;border-radius:8px;border:1px solid #3b3b3b;background:#0e0e0e;color:#fff;outline:none}
.login-card input:focus{border-color:var(--pink);box-shadow:0 0 0 3px #ff00401c}
.accent{width:100%;margin-top:22px;padding:14px;border:0;border-radius:30px;background:var(--pink);font-weight:800;cursor:pointer}
.error{color:#ff718f;font-size:13px;margin-top:12px}
.app{height:100vh;display:grid;grid-template-columns:390px minmax(500px,1fr) 0;grid-template-rows:78px 1fr var(--player);gap:9px;padding:8px;background:#000}
.top{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:0 14px;background:#090909;position:relative}
.top-logo{display:grid;place-items:center;margin-right:auto;cursor:pointer}
.round{border:0;background:#242424;width:45px;height:45px;border-radius:50%;cursor:pointer;font-size:20px}
.home-button{font-size:25px}
.global-search{height:48px;width:min(560px,45vw);border-radius:28px;background:#242424;display:flex;align-items:center;padding:0 18px;gap:12px;border:1px solid transparent}
.global-search:focus-within{border-color:#666;background:#2b2b2b}
.global-search span{font-size:25px;color:#bbb}
.global-search input{background:transparent;border:0;outline:0;color:#fff;font-size:15px;width:100%}
.top-actions{display:flex;align-items:center;gap:9px;margin-left:auto}
.admin-button{background:#fff;color:#111;border:0;border-radius:22px;padding:10px 18px;font-weight:800;cursor:pointer}
.profile{border:0;background:#202020;border-radius:24px;padding:4px 12px 4px 4px;display:flex;align-items:center;gap:8px;cursor:pointer}
.profile span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--pink) center/cover;font-weight:800}
.profile i{font-style:normal;color:#999}
.profile-menu{position:absolute;right:15px;top:67px;z-index:60;width:180px;padding:6px;background:#282828;border-radius:9px;box-shadow:0 16px 45px #000}
.profile-menu button{width:100%;border:0;background:transparent;padding:12px;text-align:left;border-radius:6px;cursor:pointer}
.profile-menu button:hover{background:#3a3a3a}
.library{grid-column:1;grid-row:2;background:var(--panel);border-radius:10px;padding:16px 10px;overflow:hidden;display:flex;flex-direction:column}
.library-head{display:flex;align-items:center;justify-content:space-between;padding:0 8px}
.library-head h2{font-size:16px}
.library-head .round{background:transparent}
.chips{display:flex;gap:7px;padding:14px 7px}
.chips button{border:0;background:#292929;border-radius:18px;padding:8px 13px;cursor:pointer}
.chips button.active,.chips button:hover{background:#3a3a3a}
.library-list{overflow:auto;padding-right:2px}
.library-row{display:grid;grid-template-columns:52px 1fr auto;gap:11px;align-items:center;padding:8px;border-radius:7px;cursor:pointer}
.library-row:hover{background:#242424}
.library-row img{width:52px;height:52px;object-fit:cover;border-radius:7px;background:#333}
.library-row strong,.library-row span{display:block}
.library-row span{color:#aaa;font-size:12px;margin-top:3px}
.view{grid-column:2;grid-row:2;background:linear-gradient(#202020,#121212 320px);border-radius:10px;overflow:auto;min-width:0}
.view-pad{padding:22px 25px 120px}
.hero{min-height:310px;padding:38px 28px 25px;display:flex;align-items:end;gap:25px;background:linear-gradient(160deg,var(--hero,#5b3340),#181818)}
.hero img{width:220px;height:220px;object-fit:cover;border-radius:8px;box-shadow:0 20px 50px #0008}
.hero small{font-weight:700}
.hero h1{font:800 clamp(38px,6vw,80px)/.98 Manrope;margin:8px 0}
.hero p{color:#ddd;margin:5px 0}
.hero-actions{display:flex;align-items:center;gap:15px;padding:22px 26px}
.big-play{border:0;background:var(--pink);color:white;border-radius:50%;width:58px;height:58px;font-size:22px;cursor:pointer}
.ghost{border:1px solid #777;background:transparent;border-radius:22px;padding:9px 16px;cursor:pointer}
.section{margin:20px 0 32px}
.section-head{display:flex;align-items:end;justify-content:space-between}
.section h2{font:800 23px Manrope;margin:0 0 15px}
.section-head button{border:0;background:transparent;color:#aaa;font-weight:700;cursor:pointer}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:15px}
.card{background:#181818;padding:12px;border-radius:9px;cursor:pointer;position:relative;transition:.2s;min-width:0}
.card:hover{background:#292929;transform:translateY(-2px)}
.card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:#333}
.card.artist img{border-radius:50%}
.card strong,.card span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card strong{margin-top:10px}
.card span{color:#a5a5a5;font-size:12px;margin-top:5px}
.card .hover-play{position:absolute;right:20px;bottom:54px;width:45px;height:45px;border:0;border-radius:50%;background:var(--pink);opacity:0;transform:translateY(8px);transition:.2s;cursor:pointer}
.card:hover .hover-play{opacity:1;transform:none}
.greeting{font:800 31px Manrope;margin:0 0 22px}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.quick-item{display:flex;align-items:center;gap:12px;background:#ffffff16;border-radius:6px;overflow:hidden;cursor:pointer;font-weight:700}
.quick-item:hover{background:#ffffff25}
.quick-item img{width:64px;height:64px;object-fit:cover}
.track-list{padding:0 26px 130px}
.track-head,.song-row{display:grid;grid-template-columns:38px minmax(250px,1fr) minmax(130px,.5fr) 70px 36px;gap:10px;align-items:center;padding:10px;border-bottom:1px solid #ffffff10}
.track-head{color:#999;font-size:12px}
.song-row{border:0;border-radius:6px}
.song-row:hover{background:#ffffff0e}
.song-main{display:flex;align-items:center;gap:11px;min-width:0}
.song-main img{width:42px;height:42px;border-radius:4px;object-fit:cover}
.song-main strong,.song-main span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-main span,.song-row>span{font-size:12px;color:#aaa}
.song-row button{border:0;background:transparent;cursor:pointer}
.song-row .row-play{font-size:17px}
.empty{padding:80px 20px;text-align:center;color:#aaa}
.empty b{display:block;color:#fff;font-size:22px;margin-bottom:6px}
.queue{position:fixed;z-index:55;right:0;top:0;bottom:var(--player);width:min(410px,90vw);background:#171717;box-shadow:-20px 0 50px #000a;padding:20px;overflow:auto}
.queue header{display:flex;justify-content:space-between;align-items:center}
.queue header small{color:var(--pink);font-weight:800}
.queue header h2{margin:4px 0 15px}
.queue header button,.now-head button{border:0;background:transparent;font-size:25px}
.queue-item{display:grid;grid-template-columns:42px 1fr 24px;gap:10px;align-items:center;padding:9px;border-radius:7px;cursor:pointer}
.queue-item:hover,.queue-item.active{background:#292929}
.queue-item img{width:42px;height:42px;object-fit:cover;border-radius:5px}
.queue-item strong,.queue-item span{display:block}
.queue-item span{font-size:11px;color:#aaa}
.now-panel{display:none}
.player{position:fixed;z-index:50;left:0;right:0;bottom:0;height:var(--player);background:#090909;border-top:1px solid #292929;display:grid;grid-template-columns:minmax(230px,1fr) minmax(360px,1.4fr) minmax(200px,1fr);align-items:center;padding:10px 17px}
.track{display:grid;grid-template-columns:58px minmax(0,1fr) 35px;gap:11px;align-items:center}
.track img{width:58px;height:58px;object-fit:cover;border-radius:5px}
.track strong,.track span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track span{color:#aaa;font-size:12px}
.track button,.transport button,.tools button{border:0;background:transparent;cursor:pointer}
.track button{font-size:23px}
.transport>div:first-child{display:flex;justify-content:center;align-items:center;gap:18px}
.transport button{color:#aaa;font-size:17px}
.transport .play{width:38px;height:38px;border-radius:50%;background:#fff;color:#111}
.timeline{display:grid;grid-template-columns:38px 1fr 38px;gap:8px;align-items:center;color:#aaa;font-size:10px;margin-top:5px}
.timeline input,.tools input{accent-color:var(--pink);height:4px}
.tools{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.tools input{width:105px}
.mobile{display:none}
#toast{position:fixed;z-index:100;right:20px;bottom:110px}
.toast{background:#eee;color:#111;padding:12px 16px;border-radius:8px;box-shadow:0 10px 35px #000;margin-top:8px;font-size:13px}
*{scrollbar-width:thin;scrollbar-color:#777 #202020}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#202020}
*::-webkit-scrollbar-thumb{background:#777;border:2px solid #202020;border-radius:8px}
@media(max-width:1050px){.app{grid-template-columns:300px 1fr}
.global-search{width:42vw}
.quick-grid{grid-template-columns:repeat(2,1fr)}
.player{grid-template-columns:1fr 1.3fr}
.tools{display:none}
}
@media(max-width:760px){html,body{overflow:auto}
.login{grid-template-columns:1fr}
.login-hero{display:none}
.login-card{margin:auto}
.app{display:block;padding:0}
.top{position:fixed;top:0;left:0;right:0;z-index:40;height:68px}
.top-logo,.home-button,#queue-top,.profile b,.profile i{display:none}
.mobile{display:block}
.global-search{width:auto;flex:1}
.admin-button{padding:8px 12px}
.library{position:fixed;z-index:45;left:0;top:68px;bottom:78px;width:88vw;transform:translateX(-105%);transition:.25s;border-radius:0}
.library.open{transform:none}
.view{margin-top:68px;border-radius:0;min-height:calc(100vh - 146px)}
.view-pad{padding:18px 15px 110px}
.hero{min-height:280px;padding:25px 18px;align-items:end}
.hero img{width:135px;height:135px}
.hero h1{font-size:36px}
.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quick-grid{grid-template-columns:1fr}
.track-head{display:none}
.track-list{padding:0 10px 100px}
.song-row{grid-template-columns:28px 1fr 32px}
.song-row>span{display:none}
.player{height:78px;grid-template-columns:1fr 105px;padding:8px 10px;background:#171717}
.track{grid-template-columns:48px 1fr 28px}
.track img{width:48px;height:48px}
.transport>div:first-child button:not(.play){display:none}
.timeline,.tools{display:none}
.profile{padding:3px}
.profile span{width:38px;height:38px}
.player-title{max-width:140px}
}

.app{--player-space:0px;grid-template-rows:78px minmax(0,1fr) var(--player-space)}
.app.player-open{--player-space:var(--player)}
.app.now-open{grid-template-columns:390px minmax(500px,1fr) 350px}
.app.now-open .now-panel{display:block}
.now-panel{grid-column:3;grid-row:2;background:var(--panel);border-radius:10px;padding:20px;overflow:auto;min-width:0}
.now-head{display:flex;align-items:center;justify-content:space-between}.now-head h2{font-size:16px;margin:0}.now-panel>img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;margin-top:20px;background:#292929}.now-panel h2{font:800 25px Manrope;margin:18px 0 4px}.now-panel>p{color:var(--muted);margin:0}.now-panel .mini-queue{margin-top:25px;border-top:1px solid var(--line);padding-top:15px}
.queue{bottom:0}.player-open .queue{bottom:var(--player)}
.library-toggle{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;cursor:pointer;flex:none}.library-toggle:hover{background:#2b2b2b}.library-toggle svg{width:23px;height:23px;fill:#c7c7c7;transition:transform .2s}
.app.library-compact{grid-template-columns:82px minmax(500px,1fr) 0}.app.library-compact.now-open{grid-template-columns:82px minmax(500px,1fr) 350px}.app.library-compact .library{padding:12px 7px}.app.library-compact .library-head{justify-content:center}.app.library-compact .library-head h2,.app.library-compact .library-head #new-playlist,.app.library-compact .chips,.app.library-compact .library-row>div,.app.library-compact .library-row>i{display:none}.app.library-compact .library-list{padding:0}.app.library-compact .library-row{display:grid;grid-template-columns:1fr;padding:7px}.app.library-compact .library-row img{width:52px;height:52px;border-radius:50%;margin:auto}.app.library-compact .library-toggle svg{transform:rotate(180deg)}
.hot-list{background:#151515;border-radius:12px;padding:6px}.hot-row{display:grid;grid-template-columns:45px 54px minmax(0,1fr) auto 42px;gap:12px;align-items:center;padding:9px 12px;border-radius:8px;cursor:pointer}.hot-row:hover{background:#292929}.hot-row>b{font:800 21px Manrope;color:var(--pink)}.hot-row img{width:52px;height:52px;object-fit:cover;border-radius:6px}.hot-row strong,.hot-row span{display:block}.hot-row span{font-size:12px;color:var(--muted);margin-top:3px}.hot-row em{font-style:normal;color:var(--muted);font-size:12px}.hot-row button{border:0;width:36px;height:36px;border-radius:50%;background:var(--pink);cursor:pointer}
.news-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.news-card{background:#181818;border-radius:10px;overflow:hidden;cursor:pointer;transition:.2s}.news-card:hover{background:#292929;transform:translateY(-2px)}.news-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#292929}.news-card>div{padding:14px}.news-card small{color:var(--pink2);font-weight:800}.news-card strong{display:block;font:750 17px Manrope;margin:8px 0}.news-card p{margin:0;color:var(--muted);font-size:13px}.news-body{max-width:900px;margin:0 auto;padding:38px 32px 140px;color:#ddd;font-size:17px;line-height:1.75}
@media(max-width:1300px){.app.now-open{grid-template-columns:300px minmax(440px,1fr) 300px}.app.library-compact.now-open{grid-template-columns:82px minmax(440px,1fr) 300px}.now-panel{padding:15px}}
@media(max-width:1050px){.app.now-open{grid-template-columns:300px minmax(420px,1fr) 0}.app.now-open .now-panel{display:none}.app.library-compact.now-open{grid-template-columns:82px minmax(420px,1fr) 0}.news-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.app,.app.player-open{--player-space:0}.app.library-compact{display:block}.library-toggle{display:none}.news-grid{grid-template-columns:1fr}.hot-row{grid-template-columns:34px 48px minmax(0,1fr) 36px}.hot-row em{display:none}.now-panel{display:none!important}.player-open .queue{bottom:78px}}

.compact-cards{grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}
.hot-card,.news-card{background:#181818;padding:12px;border-radius:9px;overflow:visible}
.hot-card img,.news-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;background:#333}
.hot-card .rank-number{position:absolute;left:18px;top:18px;z-index:2;width:auto;margin:0;padding:5px 8px;border-radius:14px;background:#090909d9;color:#fff;font-size:12px;font-weight:800;box-shadow:0 3px 12px #0008}
.hot-card .hover-play{bottom:54px}
.news-card>div{padding:0}.news-card small,.news-card p{display:none}.news-card strong{font:700 16px 'DM Sans',sans-serif;margin:10px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.news-card span{display:block;color:#a5a5a5;font-size:12px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}