: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}}.public-listener nav button:nth-child(3),.public-listener .listHead button,.public-listener .actions,.public-listener .logout{display:none!important}