:root{
  --page:#f5f5f7;--stripe:transparent;--shell:#f5f5f7;--bg:#f5f5f7;--card:#fff;--text:#1d1d1f;--muted:#6e6e73;
  --line:rgba(0,0,0,.08);--hover:rgba(0,0,0,.045);--accent:#007aff;--seg:rgba(118,118,128,.12);--segon:#fff;
  --nav:rgba(255,255,255,.82);--sh:0 2px 12px rgba(0,0,0,.045);--song:#007aff;--song2:#5ac8fa;
  --nb:calc(76px + env(safe-area-inset-bottom))
}
:root[data-theme=light]{--page:#f5f5f7;--stripe:transparent;--shell:#f5f5f7;--bg:#f5f5f7;--card:#fff;--text:#1d1d1f;--muted:#6e6e73;--line:rgba(0,0,0,.08);--hover:rgba(0,0,0,.045);--seg:rgba(118,118,128,.12);--segon:#fff;--nav:rgba(255,255,255,.82);--sh:0 2px 12px rgba(0,0,0,.045)}
:root[data-theme=dark]{--page:#000;--stripe:transparent;--shell:#000;--bg:#000;--card:#1c1c1e;--text:#f5f5f7;--muted:#98989d;--line:rgba(255,255,255,.1);--hover:rgba(255,255,255,.07);--seg:rgba(118,118,128,.24);--segon:#3a3a3c;--nav:rgba(28,28,30,.82);--sh:0 2px 14px rgba(0,0,0,.18)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){--page:#000;--stripe:transparent;--shell:#000;--bg:#000;--card:#1c1c1e;--text:#f5f5f7;--muted:#98989d;--line:rgba(255,255,255,.1);--hover:rgba(255,255,255,.07);--seg:rgba(118,118,128,.24);--segon:#3a3a3c;--nav:rgba(28,28,30,.82);--sh:0 2px 14px rgba(0,0,0,.18)}
}

*{box-sizing:border-box;margin:0}
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
html{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background-color:var(--page);color:var(--text);line-height:1.45;min-height:100vh;min-height:100dvh;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
[hidden]{display:none!important}
.muted{color:var(--muted)}.small{font-size:.8rem}
.noanim *{transition:none!important;animation:none!important}

.ico{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;vertical-align:-.125em;flex:none}
.ico svg{width:100%;height:100%;display:block}
.ico svg:not([fill=none]){fill:currentColor}

.login{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.login-card{background:var(--card);border-radius:30px;padding:2.6rem 2.2rem;max-width:400px;text-align:center;display:grid;gap:1rem;justify-items:center;box-shadow:var(--sh)}
.login-card h1{font-size:2rem;font-weight:800;letter-spacing:-.03em}
.login-card p{color:var(--muted)}

.btn{padding:.7rem 1.4rem;border-radius:980px;font-weight:700;background:var(--card);box-shadow:var(--sh);display:inline-flex;gap:.45rem;align-items:center;transition:translate .25s,transform .2s,box-shadow .2s}
.btn:hover{box-shadow:0 14px 30px rgba(20,20,30,.12)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 45%,transparent)}
.btn:active{transform:scale(.96)}
.link{color:var(--accent);font-size:.9rem}

.amb{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.amb i{position:absolute;width:46vw;height:46vw;border-radius:50%;background-color:var(--song);filter:blur(110px);opacity:.055;transition:background-color 1.6s ease;animation:drift 24s ease-in-out infinite alternate}
.amb i:nth-child(1){left:-10vw;top:-14vw}
.amb i:nth-child(2){right:-14vw;top:22vh;background-color:var(--song2);animation-duration:30s}
.amb i:nth-child(3){left:26vw;bottom:-26vw;animation-duration:36s}
@keyframes drift{to{transform:translate(8vw,6vh) scale(1.2)}}

.shell{position:relative;z-index:1;width:100%;min-height:100vh;min-height:100dvh;margin:0;border-radius:0;background:var(--shell);display:grid;grid-template-columns:248px minmax(0,1fr);box-shadow:none}
.stage{min-width:0;display:flex;flex-direction:column}
.side{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:stretch;gap:2rem;padding:1.6rem 1rem;overflow-y:auto;border-right:1px solid var(--line);background:var(--shell)}
.logo{display:flex;align-items:center;gap:.7rem;padding:.1rem .75rem;font-weight:700;font-size:1rem;color:var(--text);flex:none}
.logo .bars{height:34px}
#tabs{display:flex;flex-direction:column;gap:.25rem;padding:.2rem}
#tabs button{position:relative;width:100%;height:44px;padding:0 .8rem;border-radius:12px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:flex-start;gap:.75rem;box-shadow:none;transition:background .2s,color .2s,transform .2s}
#tabs button>*{pointer-events:none}
#tabs button .ico{width:19px;height:19px}
#tabs button em{display:block;font-style:normal;font-size:.9rem;font-weight:600}
#tabs button:hover{background:var(--hover);color:var(--text);transform:none}
#tabs button.on{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);box-shadow:none;transform:none}

.top{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:.75rem;padding:1rem clamp(1.25rem,3vw,3rem);background:var(--nav);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.hello{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.035em;margin-right:auto;white-space:nowrap}
.hello b{color:var(--accent)}
.hello .ch{display:inline-block;white-space:pre;animation:chIn .8s cubic-bezier(.2,.9,.2,1) backwards;animation-delay:calc(var(--i)*40ms)}
@keyframes chIn{from{opacity:0;transform:translateY(.7em) rotate(8deg);filter:blur(6px)}}
.gs{display:flex;align-items:center;gap:.55rem;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.6rem .85rem;width:min(300px,34vw);box-shadow:none;color:var(--muted);transition:width .25s ease,box-shadow .2s}
.gs:focus-within{width:min(380px,44vw);box-shadow:0 0 0 2px var(--accent),var(--sh)}
.gs svg{width:18px;height:18px;flex:none}
.gs input{flex:1;min-width:0;background:none;border:0;outline:0;font:inherit;color:var(--text);font-size:.9rem}
.ib{width:42px;height:42px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:var(--sh);flex:none;transition:transform .3s cubic-bezier(.3,1.6,.4,1)}
.ib:hover{transform:scale(1.1) rotate(8deg)}
.ib svg,.ib .ico{width:18px;height:18px}
#avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:var(--seg);flex:none;box-shadow:var(--sh)}

main{width:100%;max-width:none;padding:clamp(1.4rem,3vw,2.8rem) clamp(1.25rem,3vw,3rem) 9rem;display:grid;gap:1.5rem;align-content:start;min-width:0}
body.hasbar .stage main{padding-bottom:10rem}
h2{font-size:2rem;font-weight:800;letter-spacing:-.03em}
h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem}
.head{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.ctrls{display:flex;gap:.5rem;flex-wrap:wrap}
.sub{color:var(--muted);margin-top:-.75rem}

.seg{display:inline-flex;background:var(--seg);border-radius:999px;padding:3px;gap:2px;overflow-x:auto;max-width:100%}
.seg button{padding:.35rem .9rem;border-radius:999px;font-size:.82rem;font-weight:600;transition:background .25s,color .25s,box-shadow .25s;white-space:nowrap}
.seg button.on{background:var(--accent);color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 40%,transparent)}
.seg.sm button{padding:.28rem .72rem;font-size:.78rem}
.seg button:disabled{opacity:.3;cursor:default}

.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:.6rem;box-shadow:var(--sh)}
.card.pad{padding:1.25rem}
.row{display:flex;align-items:center;gap:.9rem;padding:.55rem .75rem;border-radius:16px;transition:background .2s,transform .3s}
.row:hover{background:var(--hover);transform:translateX(3px)}
.rank{width:1.6rem;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.9rem}
.cover{width:48px;height:48px;border-radius:12px;background:var(--seg);flex:none;object-fit:cover;display:grid;place-items:center;color:var(--muted);font-weight:700;overflow:hidden;transition:transform .35s cubic-bezier(.3,1.5,.4,1),filter .25s}
.cover.round{border-radius:50%}
.cover[data-u],.cover[data-p]{cursor:pointer}
.cover[data-u]:hover,.cover[data-p]:hover{filter:brightness(.78);transform:scale(1.07)}
.meta{flex:1;min-width:0}
.t{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.row .v b{color:var(--text);font-size:1rem}
.empty{padding:2rem 1rem;text-align:center;color:var(--muted)}

.np{display:flex;gap:1.4rem;align-items:center;padding:1.3rem;cursor:pointer}
.np .cover{width:120px;height:120px;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.np .t{font-size:1.4rem;letter-spacing:-.02em}
.np .meta{display:grid;gap:.15rem}
.prog{height:5px;background:var(--seg);border-radius:5px;margin-top:.7rem;overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width 1s linear}
.status{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);margin-bottom:.2rem}

.bars{display:inline-flex;align-items:center;gap:2px;height:16px}
.bars i{width:3px;background:var(--accent);border-radius:3px;animation:eq 1s infinite;height:4px}
.bars i:nth-child(2){animation-delay:.2s}.bars i:nth-child(3){animation-delay:.4s}.bars i:nth-child(4){animation-delay:.6s}
.bars.big{height:48px;gap:5px}.bars.big i{width:7px;animation-name:eqbig}
.bars.paused i{animation:none}
@keyframes eq{0%,100%{height:3px}25%{height:8px}50%{height:15px}}
@keyframes eqbig{0%,100%{height:8px}25%{height:22px}50%{height:46px}}
.logo .bars{height:34px}
.logo .bars i{animation-name:eqlogo}
@keyframes eqlogo{0%,100%{height:8px}25%{height:18px}50%{height:32px}}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem}
.tile{position:relative;background:var(--card);border-radius:22px;padding:1.1rem 1.2rem;box-shadow:var(--sh)}
.tile b{display:block;font-size:1.8rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tile span{color:var(--muted);font-size:.85rem}
.chart{display:flex;align-items:flex-end;gap:3px;height:120px}
.chart div{flex:1;background:var(--accent);border-radius:4px 4px 0 0;min-height:2px;opacity:.92;height:0;transition:height 1s cubic-bezier(.2,.8,.2,1)}
.axis{display:flex;justify-content:space-between;color:var(--muted);font-size:.72rem;margin-top:.35rem}
.axis.wk span{flex:1;text-align:center}
.drop{border:1.5px dashed var(--line);border-radius:20px;padding:1.5rem;text-align:center;display:grid;gap:.6rem;justify-items:center;transition:border-color .2s,background .2s}
.drop.over{border-color:var(--accent);background:var(--hover)}
.drop input{display:none}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.75rem}

.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1.2rem}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.9rem}
.big{position:relative;background:var(--card);border-radius:26px;padding:1.3rem 1.4rem;box-shadow:var(--sh)}
.big b{display:block;font-size:2.4rem;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.1}
.big span{color:var(--muted);font-size:.88rem}
.feat{position:relative;display:flex;gap:1rem;align-items:center;background:var(--card);border-radius:26px;padding:1.1rem;box-shadow:var(--sh)}
.feat .cover{width:88px;height:88px;border-radius:18px;font-size:2rem;color:var(--muted)}
.feat .k{color:var(--muted);font-size:.8rem}
.feat .t{font-size:1.15rem;white-space:normal}
.feat .n{font-weight:800;color:var(--accent)}

.rings{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.rings svg{width:150px;height:150px;transform:rotate(-90deg);flex:none}
.rings circle{fill:none;stroke-linecap:round}
.rings .fg{transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1)}
.rl{display:grid;gap:.7rem}
.rl div{display:flex;gap:.6rem;align-items:center;font-size:.9rem}
.rl i{width:10px;height:10px;border-radius:50%}
.rl b{font-variant-numeric:tabular-nums}
.lvl{display:grid;gap:.5rem;align-content:center}
.lvl .n{font-size:3.4rem;font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--accent)}
.xp{height:12px;border-radius:12px;background:var(--seg);overflow:hidden}
.xp i{display:block;height:100%;width:0;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--song2));transition:width 1.3s cubic-bezier(.2,.8,.2,1)}
.bar{height:6px;border-radius:6px;background:var(--seg);margin-top:.4rem;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:6px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}

.hero{position:relative;overflow:hidden;border-radius:32px;padding:2rem;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#2a0508))}
.hero .hl{font-weight:600;opacity:.85}
.hero h1{font-size:clamp(2.4rem,7vw,4.6rem);font-weight:900;letter-spacing:-.045em;line-height:1;margin:.4rem 0 .8rem}
.hero .hs{font-size:1.15rem}
.hero .hs b{font-size:1.6rem;font-variant-numeric:tabular-nums}
.hero .hr{opacity:.85;font-size:.9rem;margin-top:.5rem}
.hero .cover{width:clamp(110px,22vw,200px);height:clamp(110px,22vw,200px);font-size:3rem;box-shadow:0 18px 40px rgba(0,0,0,.3);background:rgba(255,255,255,.2);color:#fff}

.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(53,1fr);gap:3px}
.heat i{aspect-ratio:1;border-radius:3px;background:color-mix(in srgb,var(--accent) calc(var(--l)*100%),var(--seg))}
.heat i.x{background:none}

.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem}
.badge{position:relative;display:grid;gap:.25rem;justify-items:center;text-align:center;padding:1rem .6rem;border-radius:20px;background:var(--bg)}
.badge .bico{width:2rem;height:2rem;color:var(--accent);display:grid;place-items:center}
.badge .bico .ico{width:100%;height:100%}
.badge b{font-size:.9rem}
.badge span{font-size:.75rem;color:var(--muted)}
.badge.off{opacity:.35;filter:grayscale(1)}

.prof{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.prof .cover{width:96px;height:96px;font-size:2.2rem}
.prof h2{font-size:2rem}

.set{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem .5rem;border-bottom:1px solid var(--line)}
.set:last-child{border:0}
.set small{display:block;color:var(--muted)}
.sws{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.sw{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 3px var(--card),0 0 0 2px transparent;transition:transform .25s cubic-bezier(.3,1.6,.4,1)}
.sw:hover{transform:scale(1.15)}
.sw.on{box-shadow:inset 0 0 0 3px var(--card),0 0 0 2px var(--text)}
input[type=color]{width:38px;height:32px;border:0;background:none;padding:0;cursor:pointer}
input[type=number]{width:80px;padding:.4rem .6rem;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
.sw2{width:51px;height:31px;border-radius:31px;background:var(--seg);position:relative;transition:background .2s;flex:none}
.sw2::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.3,1.5,.4,1)}
.sw2.on{background:#34c759}.sw2.on::after{transform:translateX(20px)}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;z-index:80;padding:1rem;animation:fade .3s}
.sheet{background:var(--card);border-radius:30px;max-width:500px;width:100%;max-height:86vh;overflow:auto;padding:1.5rem;display:grid;gap:1rem;animation:pop .45s cubic-bezier(.2,1.2,.3,1)}
.sheet .top{display:flex;gap:1rem;align-items:center;padding:0}
.sheet .cover{width:84px;height:84px}
.sheet h2{font-size:1.6rem}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.94)}}

.glass{background:color-mix(in srgb,var(--card) 72%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line)}

.sc{position:relative;width:100%;height:100%;border-radius:26px;padding:1.6rem;color:#fff;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45)}

.home{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.6rem;align-items:stretch}
.hfeat{position:relative;overflow:hidden;border-radius:32px;min-height:310px;padding:2.2rem;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:.85rem;isolation:isolate;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 50%,#120305),color-mix(in srgb,var(--accent) 88%,#2a0508));box-shadow:0 26px 54px color-mix(in srgb,var(--accent) 32%,transparent)}
.hfeat .ghost{position:absolute;right:-2%;bottom:-8%;font-size:clamp(6rem,14vw,12rem);font-weight:900;letter-spacing:-.06em;color:rgba(0,0,0,.2);z-index:-1;line-height:.8;white-space:nowrap;text-transform:uppercase;pointer-events:none}
.hfeat img.fi{position:absolute;right:0;top:0;height:100%;width:58%;object-fit:cover;z-index:-1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48%);mask-image:linear-gradient(90deg,transparent,#000 48%);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.hfeat:hover img.fi{transform:scale(1.07)}
.pill{display:inline-flex;gap:.4rem;align-items:center;align-self:flex-start;background:rgba(255,255,255,.16);border-radius:999px;padding:.32rem .8rem;font-size:.74rem;font-weight:700;backdrop-filter:blur(8px)}
.hfeat h2{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.04;max-width:58%;font-weight:900}
.hfeat p{opacity:.82;font-size:.9rem;max-width:44%}
.hplay{align-self:flex-start;background:#fff;color:#111;padding:.7rem 1.5rem;border-radius:999px;font-weight:800;display:inline-flex;gap:.5rem;align-items:center;margin-top:.4rem;transition:translate .25s,transform .2s,box-shadow .3s;box-shadow:0 12px 26px rgba(0,0,0,.25)}
.hplay .ico{width:14px;height:14px}
.hplay:active{transform:scale(.95)}
.sech{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.sech h3{margin:0;font-size:1rem;color:var(--muted);font-weight:700}
.sech button{font-size:.82rem;font-weight:700;color:var(--text);opacity:.75;transition:opacity .2s,transform .2s}
.sech button:hover{opacity:1;transform:translateX(3px)}
.hlist{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1rem}
.hrow{display:flex;align-items:center;gap:.7rem;cursor:pointer;padding:.25rem;border-radius:18px;transition:background .2s,transform .3s cubic-bezier(.3,1.4,.4,1)}
.hrow:hover{background:var(--hover);transform:translateX(4px)}
.hrow .cover{width:50px;height:50px}
.hrow .t{font-size:.9rem}
.hrow .s{font-size:.78rem}
.chev{color:var(--muted);font-size:1.3rem;line-height:1;padding-right:.2rem}
.hgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.hcard{position:relative;cursor:pointer;display:grid;gap:.15rem;align-content:start;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s cubic-bezier(.2,.9,.2,1)}
.hcard .imgw{position:relative;margin-bottom:.55rem}
.hcard .cover{width:100%;height:auto;aspect-ratio:1;border-radius:28px;box-shadow:0 20px 44px rgba(0,0,0,.28);font-size:3rem}
.hcard .pp{position:absolute;right:.9rem;bottom:.9rem;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;opacity:0;transform:translateY(10px) scale(.7);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.4,1);pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.hcard .pp .ico{width:18px;height:18px}
.hcard:hover .pp{opacity:1;transform:none}
.hcard .t{font-size:.95rem}
.hfeat{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.9,.2,1)}

.card::after,.big::after,.tile::after,.hfeat::after,.badge::after,.feat::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%)}
.hfeat::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 60%)}
.card:hover::after,.big:hover::after,.tile:hover::after,.hfeat:hover::after,.badge:hover::after,.feat:hover::after{opacity:1}

@keyframes rise{from{opacity:0;transform:translateY(28px) scale(.97);filter:blur(7px)}}
@keyframes rises{from{opacity:0;transform:translateY(12px)}}
.rise{animation:rise .8s cubic-bezier(.2,.9,.2,1) backwards;animation-delay:calc(var(--i,0)*48ms)}
.rise-s{animation:rises .5s cubic-bezier(.2,.9,.2,1) backwards;animation-delay:calc(var(--i,0)*28ms)}

.toast{position:fixed;left:50%;bottom:7.5rem;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:.65rem 1.2rem;border-radius:980px;font-size:.88rem;font-weight:600;z-index:120;animation:toastIn .45s cubic-bezier(.2,1.3,.3,1)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,20px) scale(.9)}}
.banner{position:relative;z-index:5;background:var(--accent);color:#fff;padding:.6rem 1rem;display:flex;gap:1rem;align-items:center;justify-content:center;font-size:.9rem;font-weight:600}
.banner button{background:rgba(255,255,255,.25);padding:.3rem .9rem;border-radius:980px;font-weight:700}
.inp{width:100%;padding:.9rem 1.2rem;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:1.05rem;box-shadow:var(--sh);outline:0;transition:box-shadow .25s}
.inp:focus{box-shadow:0 0 0 2px var(--accent)}
.dl{font-size:.75rem;font-weight:700;margin-left:.4rem}
.dl.up{color:#30d158}.dl.dn{color:#ff453a}
.devrow{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-radius:14px;width:100%;text-align:left}
.devrow:hover{background:var(--hover)}
.devrow.on{color:var(--accent);font-weight:700}

body #pbar{position:fixed;left:50%;right:auto;bottom:1.5rem;width:min(1180px,calc(100vw - 9rem));transform:translateX(calc(-50% + 48px));z-index:40;border:0;border-radius:999px;background:var(--nav);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);box-shadow:0 22px 56px rgba(0,0,0,.18),0 0 0 1px var(--line);padding:.55rem 1.2rem .55rem .6rem;grid-template-columns:minmax(0,1fr) minmax(300px,1.9fr) minmax(0,1fr);gap:1.2rem;animation:pbIn .7s cubic-bezier(.2,1.1,.3,1)}
@keyframes pbIn{from{opacity:0;transform:translate(calc(-50% + 48px),40px) scale(.96)}}
body #pbar::before{content:"";position:absolute;left:8%;right:8%;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--song),var(--song2),transparent);opacity:.8;filter:blur(.5px)}
body #pbar .l{display:flex;gap:.8rem;align-items:center;min-width:0;cursor:pointer}
body #pbar .l .cover{width:52px;height:52px;border-radius:50%;box-shadow:0 8px 20px rgba(0,0,0,.28);animation:spin 14s linear infinite;animation-play-state:paused}
body.isplaying #pbar .l .cover{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
body #pbar .l .t{font-size:.92rem}
body #pbar .c{display:grid;gap:.15rem;justify-items:center}
body #pbar .k{display:flex;gap:.45rem;align-items:center}
body #pbar .k button,body #pbar .r button,body #pbar #plk{width:34px;height:34px;border-radius:50%;color:var(--muted);display:grid;place-items:center;transition:background .2s,color .2s,transform .25s cubic-bezier(.3,1.6,.4,1)}
body #pbar .k button:hover,body #pbar .r button:hover,body #pbar #plk:hover{background:var(--hover);color:var(--text);transform:scale(1.12)}
body #pbar .k button.on,body #pbar .r button.on,body #pbar #plk.on{color:var(--accent)}
body #pbar button .ico{width:16px;height:16px}
body #pbar #pp{background:var(--accent);color:#fff;width:42px;height:42px;box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 50%,transparent);transition:translate .25s,transform .2s}
body #pbar #pp .ico{width:18px;height:18px}
body #pbar #pp:hover{background:var(--accent);color:#fff;transform:scale(1.08)}
body #pbar .sk{display:flex;gap:.6rem;align-items:center;width:100%;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
body #pbar .r{display:flex;gap:.25rem;align-items:center;justify-content:flex-end}
body #pbar .r input{max-width:90px}
@media(max-width:1100px){
  .hfeat h2{max-width:70%}.hfeat p{max-width:55%}
  .hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home{grid-template-columns:1fr}
  body #pbar{grid-template-columns:minmax(0,1fr) minmax(260px,1.6fr);}
  body #pbar .r{display:none}
}

@media(max-width:820px){
  body{background-image:none;background-color:var(--shell)}
  .shell{margin:0;border-radius:0;display:block;min-height:100vh;box-shadow:none;background:transparent}
  .side{position:static;height:auto;max-height:none;padding:0;display:block;overflow:visible}
  .logo{display:none}
  #tabs{position:fixed;left:.6rem;right:.6rem;bottom:calc(.6rem + env(safe-area-inset-bottom));z-index:45;flex-direction:row;overflow-x:auto;gap:.15rem;padding:.35rem;border-radius:28px;background:var(--nav);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 14px 44px rgba(0,0,0,.2),0 0 0 1px var(--line);scroll-snap-type:x proximity}
  #tabs button{flex:0 0 auto;width:auto;min-width:60px;height:52px;border-radius:20px;background:none;box-shadow:none;display:flex;flex-direction:column;gap:3px;padding:0 .55rem;align-items:center;justify-content:center;scroll-snap-align:center}
  #tabs button em{display:block;font-style:normal;font-size:.62rem;font-weight:700;opacity:.75}
  #tabs button:hover{transform:none}
  #tabs button.on{transform:none;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 45%,transparent)}
  #tabs button.on em{opacity:1}
  .top{padding:1.1rem 1rem 0;flex-wrap:wrap;gap:.6rem}
  .hello{font-size:1.7rem}
  .gs,.gs:focus-within{order:5;width:100%}
  main{padding:1.1rem 1rem calc(var(--nb) + 1.5rem);gap:1.1rem}
  body.hasbar .stage main{padding-bottom:calc(var(--nb) + 6.2rem)}
  h2{font-size:1.6rem}
  .card.pad{padding:1.1rem}
  .np{flex-direction:column;align-items:flex-start;text-align:left}
  .np .cover{width:100%;height:auto;aspect-ratio:1}
  .np .meta{width:100%}
  .home{gap:1.1rem}
  .hfeat{min-height:260px;padding:1.6rem}
  .hfeat h2{max-width:78%;font-size:1.8rem}
  .hfeat p{max-width:70%}
  .hlist{grid-template-columns:1fr}
  .hgrid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin:0 -1rem;padding:0 1rem .4rem}
  .hcard{flex:0 0 64%;scroll-snap-align:start}
  .hcard .pp{opacity:1;transform:none;width:40px;height:40px}
  .hero{flex-direction:column-reverse;align-items:flex-start;padding:1.5rem}
  .row{padding:.5rem .4rem;gap:.7rem}
  .rank{width:1.2rem}
  .big b{font-size:2rem}
  .rings{justify-content:center}
  .set{flex-wrap:wrap}
  .sws{justify-content:flex-start}
  .toast{bottom:calc(var(--nb) + 6rem)}
  body #pbar{left:.6rem;right:.6rem;width:auto;bottom:calc(var(--nb) + .2rem);transform:none;border-radius:26px;padding:.55rem .8rem;grid-template-columns:minmax(0,1fr) auto;gap:.3rem .6rem;animation-name:pbInM}
  @keyframes pbInM{from{opacity:0;transform:translateY(40px) scale(.96)}}
  body #pbar .c{display:contents}
  body #pbar .k{grid-column:2;grid-row:1;gap:.1rem}
  body #pbar .sk{grid-column:1/-1;grid-row:2}
  body #pbar #psh,body #pbar #prp{display:none}
  body #pbar .l .cover{width:44px;height:44px}
  body #pbar #plk{display:none}
}

@media(max-width:420px){
  .hello{font-size:1.5rem}
  .hfeat h2{font-size:1.6rem;max-width:88%}
  .hfeat p{max-width:88%}
  .hcard{flex-basis:72%}
  body #pbar .sk span{display:none}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Full-viewport, system-native layout */
.login-card{border:1px solid var(--line);border-radius:24px;box-shadow:0 12px 40px rgba(0,0,0,.08)}
.shell{grid-template-columns:248px minmax(0,1fr)}
.side{z-index:16}
.logo .bars i{width:4px}
.top .ib{background:transparent;box-shadow:none}
.top .ib:hover{background:var(--hover);transform:none}
.top #logoutBtn{margin-left:-.35rem}
.hello{font-size:clamp(1.45rem,2.2vw,2rem);font-weight:700;letter-spacing:-.04em}
main{max-width:none}
.card.pad{border:1px solid var(--line)}
.big,.tile,.feat{border:1px solid var(--line);box-shadow:var(--sh)}
.row{transition:background .18s ease}
.row:hover{transform:none}
.hfeat{min-height:320px;border-radius:24px;box-shadow:var(--sh);background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 78%,#17171b),color-mix(in srgb,var(--accent) 52%,#17171b))}
.hfeat h2{font-size:clamp(1.8rem,2.8vw,2.55rem);font-weight:750}
.hfeat p{max-width:48%}
.hfeat .ghost{opacity:.45}
.hfeat .hplay{box-shadow:none}
.hcard,.hfeat{transform:none;transition:box-shadow .25s ease,filter .25s ease}
.hcard:hover{transform:translateY(-3px)}
.hcard .cover{border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.hcard .pp{box-shadow:0 4px 14px rgba(0,0,0,.2)}
.hrow{transition:background .18s ease}
.hrow:hover{transform:none}
.wrapped-card{border-radius:22px;box-shadow:0 10px 24px rgba(0,0,0,.12);transition:transform .22s ease,box-shadow .22s ease}
.wrapped-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(0,0,0,.16)}
.gs:focus-within{box-shadow:0 0 0 2px var(--accent)}
:where(button,a,input,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,transparent);outline-offset:3px}

body #pbar{left:calc(248px + (100vw - 248px)/2);right:auto;bottom:1.25rem;width:min(1180px,calc(100vw - 296px));transform:translateX(-50%);border:1px solid var(--line);border-radius:20px;background:var(--nav);box-shadow:0 12px 40px rgba(0,0,0,.12);padding:.65rem .9rem;gap:1rem}
body #pbar::before{left:8%;right:8%;opacity:.55}
body #pbar .l .cover{border-radius:12px;animation:none}
body.isplaying #pbar .l .cover{animation:none}
body #pbar #pp{background:var(--text);color:var(--bg);box-shadow:none}
body #pbar #pp:hover{background:var(--text);color:var(--bg)}
body #pbar .sk{font-size:.7rem}
body #pbar .r{gap:.15rem}
body #pbar .r button{border-radius:10px}
body #pbar .r input{accent-color:var(--song)}
@keyframes pbIn{from{opacity:0;transform:translate(-50%,18px)}}

body #pbar{min-height:78px;border-radius:18px}
body #pbar .l{gap:.7rem}
body #pbar .l .cover{width:48px;height:48px;border-radius:10px}
body #pbar .l .meta{display:grid;gap:.12rem}
body #pbar .l .t{font-size:.88rem;font-weight:650}
body #pbar .l .s{font-size:.76rem}
body #pbar .k{gap:.55rem}
body #pbar .k button{width:32px;height:32px}
body #pbar #pp{width:38px;height:38px}
body #pbar .sk{gap:.55rem;margin-top:.1rem}
body #pbar #psk{appearance:none;-webkit-appearance:none;height:4px;padding:0;border:0;border-radius:999px;background:linear-gradient(90deg,var(--song) 0%,var(--song) var(--progress,0%),color-mix(in srgb,var(--text) 13%,transparent) var(--progress,0%),color-mix(in srgb,var(--text) 13%,transparent) 100%);cursor:pointer;touch-action:pan-y}
body #pbar #psk::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border:2px solid var(--nav);border-radius:50%;background:var(--song);box-shadow:0 1px 4px rgba(0,0,0,.2);opacity:0;transition:opacity .15s,transform .15s}
body #pbar #psk::-moz-range-thumb{width:8px;height:8px;border:2px solid var(--nav);border-radius:50%;background:var(--song);box-shadow:0 1px 4px rgba(0,0,0,.2);opacity:0;transition:opacity .15s,transform .15s}
body #pbar:hover #psk::-webkit-slider-thumb,body #pbar #psk:focus-visible::-webkit-slider-thumb{opacity:1}
body #pbar:hover #psk::-moz-range-thumb,body #pbar #psk:focus-visible::-moz-range-thumb{opacity:1}
body #pbar #psk:focus-visible{outline:2px solid var(--song);outline-offset:3px}
body #pbar .r{gap:.3rem}
body #pbar .r button{width:32px;height:32px}
body #pbar .r input{accent-color:var(--song)}

.nhx-bg .tint{background:linear-gradient(145deg,color-mix(in srgb,var(--song) 18%,transparent),transparent 70%);opacity:.72}
.nhx-aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.nhx-aura i{position:absolute;display:block;width:min(70vw,760px);aspect-ratio:1;border-radius:50%;filter:blur(85px);opacity:.24;background:radial-gradient(circle,color-mix(in srgb,var(--aura-color,var(--song)) 72%,transparent),transparent 68%)}
.nhx-aura i:first-child{top:-30%;left:-20%}
.nhx-aura i:last-child{right:-22%;bottom:-38%;background:radial-gradient(circle,color-mix(in srgb,var(--song2) 58%,transparent),transparent 68%)}
.nhx-bg .vig{z-index:1}

@media(max-width:1100px) and (min-width:821px){
  .shell{grid-template-columns:220px minmax(0,1fr)}
  .side{padding-inline:.75rem}
  main{padding-inline:1.6rem}
  .top{padding-inline:1.6rem}
  body #pbar{left:calc(220px + (100vw - 220px)/2);width:min(920px,calc(100vw - 260px));grid-template-columns:minmax(0,1fr) minmax(240px,1.4fr)}
  body #pbar .r{display:none}
}

@media(max-width:820px){
  .shell{display:block;min-height:100vh;min-height:100dvh}
  .side{position:static;height:auto;padding:0;border:0;background:transparent}
  #tabs{left:.65rem;right:.65rem;bottom:calc(.55rem + env(safe-area-inset-bottom));gap:.15rem;padding:.3rem;border:1px solid var(--line);border-radius:18px;background:var(--nav);box-shadow:0 8px 30px rgba(0,0,0,.14)}
  #tabs button{min-width:60px;height:50px;border-radius:12px;padding:0 .45rem}
  #tabs button.on{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:none}
  #tabs button em{font-size:.61rem;font-weight:600;white-space:nowrap}
  .top{position:relative;padding:1rem 1rem .75rem;gap:.45rem}
  .hello{font-size:1.5rem}
  .top .ib{width:38px;height:38px}
  .gs,.gs:focus-within{width:100%;border-radius:12px}
  main{padding:1.1rem 1rem calc(var(--nb) + 1.4rem);gap:1.1rem}
  body.hasbar .stage main{padding-bottom:calc(var(--nb) + 6.4rem)}
  .home{grid-template-columns:minmax(0,1fr);gap:1rem}
  .hfeat{min-height:270px;padding:1.5rem;border-radius:20px}
  .hfeat h2{max-width:76%;font-size:clamp(1.6rem,6vw,2rem)}
  .hfeat p{max-width:66%}
  .hlist{grid-template-columns:minmax(0,1fr)}
  .hgrid{gap:.8rem}
  body #pbar{left:.65rem;right:.65rem;bottom:calc(var(--nb) + .25rem);width:auto;transform:none;border-radius:18px;padding:.5rem .65rem;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .45rem}
  body #pbar .l .cover{width:42px;height:42px}
  body #pbar .l{gap:.55rem}
  body #pbar .l .t{font-size:.82rem}
  body #pbar .l .s{font-size:.72rem}
  body #pbar .c{display:contents}
  body #pbar .k{grid-column:2;grid-row:1;gap:0}
  body #pbar .k button{width:32px;height:36px}
  body #pbar .k #psh,body #pbar .k #prp{display:none}
  body #pbar #pp{width:38px;height:38px}
  body #pbar .sk{grid-column:1/-1;grid-row:2;gap:.45rem}
  body #pbar .r{display:none}
  body #pbar #plk{display:none}
  body #pbar #psk::-webkit-slider-thumb{opacity:1;width:9px;height:9px}
  body #pbar #psk::-moz-range-thumb{opacity:1;width:6px;height:6px}
  .toast{bottom:calc(var(--nb) + 6.8rem)}
}

@media(max-width:560px){
  .top{gap:.35rem}
  .hello{font-size:1.35rem}
  main{padding-inline:.85rem}
  .card.pad{padding:1rem}
  .hfeat{min-height:245px;padding:1.25rem}
  .hfeat h2{max-width:88%;font-size:1.55rem}
  .hfeat p{max-width:82%;font-size:.85rem}
  .hfeat img.fi{width:64%;opacity:.75}
  .hgrid{margin-inline:-.85rem;padding-inline:.85rem}
  .hcard{flex-basis:68%}
  .nhx-body{align-items:stretch}
}

@media(max-width:380px){
  #tabs button{min-width:56px;padding-inline:.3rem}
  #tabs button em{font-size:.57rem}
  .top #avatar{width:34px;height:34px}
  .top .ib{width:34px;height:34px}
  body #pbar .k button{width:29px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .amb i{animation:none}
  .nhx-aura i{transform:none!important}
}