:root{color:#f4f4f6;font-synthesis:none;background:#0b0b0e;font-family:Inter,Segoe UI,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.splash{color:#8b5cf6;place-items:center;height:100vh;font-size:64px;display:grid}.login{background:radial-gradient(circle at 50% 0,#34215d,#0b0b0e 45%);place-items:center;height:100vh;display:grid}.login form{background:#17171d;border:1px solid #2a2931;border-radius:24px;width:min(400px,90vw);padding:42px;box-shadow:0 28px 80px #0008}.brandMark,.logo b{background:linear-gradient(135deg,#8b5cf6,#d946ef);border-radius:14px;place-items:center;display:grid}.brandMark{width:54px;height:54px;font-size:28px}.login h1{margin:22px 0 6px}.login p,.login label{color:#92929e}.login label{margin:20px 0 7px;display:block}.login input{color:#fff;background:#0f0f13;border:1px solid #34333d;border-radius:10px;width:100%;margin-top:7px;padding:13px;display:block}.login button{color:#fff;background:#8b5cf6;border:0;border-radius:10px;width:100%;margin-top:14px;padding:13px;font-weight:700}.error{color:#f87171}.app{min-height:100vh;padding-bottom:100px}aside{background:#101014;border-right:1px solid #24242b;width:230px;padding:24px 16px;position:fixed;top:0;bottom:100px;left:0}.logo{align-items:center;gap:10px;padding:0 8px 28px;font-size:18px;display:flex}.logo b{width:34px;height:34px}nav button,.playlist,.logout{text-align:left;color:#a4a4ad;cursor:pointer;background:0 0;border:0;border-radius:9px;width:100%;margin:3px 0;padding:12px;display:block}.active,nav button:hover,.playlist:hover{color:#b79aff!important;background:#24202f!important}.listHead{color:#777783;text-transform:uppercase;justify-content:space-between;padding:26px 10px 8px;font-size:12px;display:flex}.listHead button{color:#aaa;background:0 0;border:0}.playlist small{float:right}.logout{position:absolute;bottom:15px}.content{margin-left:230px;padding:38px 4vw}header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}h1{margin:0;font-size:30px}header p{color:#858590;margin:7px 0}.search{color:#fff;background:#17171d;border:1px solid #2c2c34;border-radius:12px;width:310px;padding:12px 16px}.tracks{border:1px solid #23232a;border-radius:14px;overflow:hidden}.track{color:#9d9da7;border-top:1px solid #202027;grid-template-columns:35px minmax(240px,2fr) minmax(150px,1fr) 70px 145px;align-items:center;gap:14px;min-height:70px;padding:8px 18px;display:grid}.track:first-child{border:0}.heading{color:#696974;background:#131318;min-height:45px;font-size:12px}.track:hover,.track.now{background:#17151e}.track.now{color:#a98cff}.song,.playingSong{color:#eee;align-items:center;gap:12px;display:flex}.song small,.playingSong small{color:#858590;margin-top:4px;display:block}.cover{background:linear-gradient(135deg,#37303f,#202026);border-radius:8px;flex:0 0 46px;place-items:center;width:46px;height:46px;display:grid;overflow:hidden}.cover img{object-fit:cover;width:100%;height:100%}.actions{opacity:0;display:flex}.track:hover .actions{opacity:1}.actions button,.controls button{color:#aaa;cursor:pointer;background:0 0;border:0;font-size:18px}.empty{text-align:center;color:#70707b;padding:70px}.uploadBox{text-align:center;background:#121217;border:2px dashed #37333f;border-radius:20px;place-items:center;min-height:390px;display:grid;position:relative}.uploadBox input{opacity:0;cursor:pointer;position:absolute;inset:0}.uploadBox label strong{color:#9a72f8;font-size:50px}.uploadBox p{color:#858590}.notice{color:#b79aff;position:absolute;bottom:30px}footer{z-index:3;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#15151aee;border-top:1px solid #2b2b33;grid-template-columns:1fr 2fr 1fr;align-items:center;height:100px;padding:12px 28px;display:grid;position:fixed;bottom:0;left:0;right:0}.controls{text-align:center}.controls>div:first-child{justify-content:center;align-items:center;gap:18px;display:flex}.controls .play{color:#111;background:#fff;border-radius:50%;width:42px;height:42px}.timeline{color:#777;grid-template-columns:36px 1fr 36px;align-items:center;gap:10px;font-size:11px;display:grid!important}.timeline input,.volume input{accent-color:#9a72f8;width:100%}.volume{justify-self:end;gap:8px;width:150px;display:flex}.playingSong{min-width:0}.playingSong strong,.playingSong small{white-space:nowrap;text-overflow:ellipsis;max-width:220px;overflow:hidden}@media (width<=800px){aside{width:auto;height:70px;padding:10px;display:flex;position:static;bottom:auto;overflow-x:auto}.logo span,.listHead,.playlist,.logout{display:none}nav{display:flex}.content{margin:0;padding:25px 14px 130px}header{display:block}.search{width:100%;margin-top:15px}.track{grid-template-columns:26px 1fr 54px;padding:8px}.track>span:nth-child(3),.track>.actions,.heading span:nth-child(3){display:none}footer{grid-template-columns:1fr 2fr;height:120px;padding:10px}.volume{display:none}.playingSong .cover{flex-basis:40px;width:40px;height:40px}.playingSong strong,.playingSong small{max-width:90px}.controls>div:first-child{gap:10px}}:root{--player-accent:#a78bfa}.splash.small{font-size:18px}.track{cursor:pointer}.footerSong{text-align:left;cursor:pointer;background:0 0;border:0;padding:0}.footerSong:disabled{cursor:default}.detailOpen{background:radial-gradient(circle at 22% 28%,#342250 0,#0000 34%),linear-gradient(135deg,#111016,#09090c);min-height:100vh;padding:0}.playerDetail{min-height:100vh;padding:28px clamp(24px,5vw,76px);position:relative}.back{color:#d5d2dd;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff1d;border-radius:999px;padding:10px 16px}.back:hover{background:#ffffff14}.detailGrid{grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr);align-items:center;gap:clamp(45px,8vw,130px);max-width:1300px;height:calc(100vh - 90px);margin:auto;display:grid}.albumPanel{text-align:center;max-width:520px}.cover.large{border-radius:28px;width:min(54vh,480px);height:min(54vh,480px);margin:0 auto 28px;font-size:100px;box-shadow:0 36px 90px #0009}.albumPanel .eyebrow{color:#aa8cf6;text-transform:uppercase;letter-spacing:.18em;margin:0 0 9px;font-size:11px;font-weight:700}.albumPanel h1{font-size:clamp(30px,4vw,52px);line-height:1.05}.albumPanel>p:not(.eyebrow){color:#9b97a6;margin:10px 0 26px}.albumPanel .controls{max-width:520px;margin:auto}.albumPanel .controls>div:first-child{gap:26px}.albumPanel .controls .play{width:58px;height:58px;font-size:21px}.albumPanel .timeline{margin-top:14px}.detailVolume{color:#817d8a;align-items:center;gap:12px;max-width:250px;margin:18px auto 0;font-size:12px;display:flex}.detailVolume input{accent-color:#9a72f8;width:100%}.lyricsPanel{height:min(76vh,760px);min-height:500px;position:relative;overflow:hidden}.lyricsPanel:before,.lyricsPanel:after{content:"";z-index:2;pointer-events:none;height:80px;position:absolute;left:0;right:0}.lyricsPanel:before{background:linear-gradient(#0e0d12,#0000);top:52px}.lyricsPanel:after{background:linear-gradient(#0000,#0e0d12);bottom:0}.lyricsTitle{border-bottom:1px solid #ffffff12;align-items:start;height:55px;display:flex}.lyricsTitle span{font-size:20px;font-weight:700}.lyricsTitle small{color:#6f6a78;margin-left:12px}.lyricsScroll{scrollbar-width:none;height:calc(100% - 55px);padding:42% 8px;overflow:auto}.lyricsScroll::-webkit-scrollbar{display:none}.lyricsScroll button{color:#77727e;text-align:left;cursor:pointer;background:0 0;border:0;width:100%;padding:15px 0;font-size:clamp(21px,2.1vw,31px);font-weight:650;line-height:1.35;transition:all .25s;display:block}.lyricsScroll button:hover{color:#bbb5c4}.lyricsScroll button.current{color:#fff;text-shadow:0 0 30px #ad7cff77;transform:translate(12px)}.plainLyrics{white-space:pre-wrap;color:#c3bec8;font-size:20px;line-height:2}.lyricMessage{text-align:center;color:#77727e;place-items:center;height:100%;font-size:18px;display:grid}@media (width<=800px){.playerDetail{padding:18px 16px 0}.detailGrid{height:auto;display:block}.albumPanel{padding:24px 0}.cover.large{border-radius:20px;width:min(68vw,330px);height:min(68vw,330px)}.albumPanel h1{font-size:30px}.lyricsPanel{height:62vh;min-height:440px}.lyricsPanel:before{top:50px}.lyricsScroll{padding:40% 3px}.lyricsScroll button{text-align:center;padding:12px 0;font-size:22px}.lyricsScroll button.current{transform:scale(1.04)}.detailOpen{padding-bottom:0}}.public-listener nav button:nth-child(3),.public-listener .listHead button,.public-listener .actions,.public-listener .logout{display:none!important}
