:root{color-scheme:dark;--bg:#0d0f14;--panel:#161920;--line:#272a34;--muted:#9195a5;--text:#f1f1f7;--accent:#bea7ff;--accent2:#84d9c6;font-family:Inter,"Segoe UI","Yu Gothic UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:14px}button,input,select{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit;border:0;background:none}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}input:not([type=range]),select{width:100%;background:#1a1d25;border:1px solid #343744;border-radius:10px;color:var(--text);padding:13px 15px;outline:none}input:focus{border-color:var(--accent)}input[type=range]{accent-color:var(--accent);height:4px;cursor:pointer}h1,h2,h3,p{margin-top:0}h1{font-size:36px;line-height:1.4;letter-spacing:-1px}h2{font-size:25px;letter-spacing:-.7px}h3{font-size:18px}.muted,small{color:var(--muted)}.brand{display:flex;gap:10px;align-items:center;font-weight:750;font-size:25px;letter-spacing:-.8px;color:var(--accent)}.brand span{color:var(--text);font-size:22px}.eyebrow{display:block;color:var(--accent);font-size:10px;font-weight:700;letter-spacing:2.6px;margin-bottom:18px}.primary{border-radius:30px;background:var(--accent);color:#221833;padding:13px 24px;font-weight:700;display:inline-flex;align-items:center;gap:22px}.primary:hover{background:#d1bfff}.wide{width:100%;justify-content:space-between}.ghost{border:1px solid #464151;border-radius:24px;padding:11px 20px}.icon{display:inline-grid;place-items:center;min-width:32px;min-height:32px;color:#b9bdcc;font-size:21px;border-radius:7px}.icon:hover{color:white;background:#ffffff0d}.icon.on{color:var(--accent)}[hidden]{display:none!important}.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}.auth-art{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#392855 0%,#1b192e 47%,#12131b 78%);padding:42px}.auth-copy{position:absolute;left:11%;bottom:9%}.auth-copy h1{font-size:46px}.auth-copy p{color:#b1adbf;line-height:2}.record{position:absolute;width:380px;height:380px;border-radius:50%;top:13%;right:-50px;background:repeating-radial-gradient(circle,#292038 0,#181923 3px,#2a233c 4px,#181820 6px);box-shadow:0 0 100px #b398ff2b;transform:rotate(-25deg)}.record>div{position:absolute;inset:35%;border-radius:50%;background:linear-gradient(135deg,#d1b4ff,#716391)}.record>div:after{content:'';position:absolute;inset:40%;border-radius:50%;background:#15151e}.auth-form{display:grid;place-items:center;padding:48px}.login-wrap{max-width:380px;width:100%}.login-wrap h2{font-size:30px}.login-wrap label{display:block;margin:22px 0;font-size:12px;color:#b6b8c5}.login-wrap label input{margin-top:8px}.auth-note{margin-top:32px;color:#747988;font-size:12px;line-height:2}#auth-error{color:#ff9d9d;font-size:13px;min-height:20px;margin-top:15px}.app{display:flex;min-height:100vh}.sidebar{position:fixed;width:232px;top:0;bottom:96px;padding:32px 18px;border-right:1px solid var(--line);background:#101218;display:flex;flex-direction:column}.sidebar .brand{margin:0 12px 42px}.nav-label{font-size:10px;letter-spacing:1.8px;color:#6d7284;font-weight:700;margin-left:14px}.nav{display:flex;align-items:center;gap:17px;width:100%;text-align:left;border-radius:10px;margin-top:7px;padding:12px 17px;color:#9da1b0;font-size:13px;font-weight:600}.nav>span{font-size:23px;width:23px}.nav.active{background:#bca6ff16;color:var(--accent)}.nav:hover{background:#ffffff08}.playlist-label{display:flex;align-items:center;justify-content:space-between;margin-top:32px}.playlist-link{display:block;width:100%;text-align:left;color:#a4a8b7;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:12px 17px}.playlist-link:before{content:'≋';color:#656b7e;margin-right:16px}.sidebar-bottom{margin-top:auto;display:grid;grid-template-columns:9px 1fr;gap:7px;align-items:center;border-top:1px solid var(--line);padding:22px 12px 0;font-size:11px;color:#b6b9c8}.sidebar-bottom small{grid-column:2;font-size:10px}.status-dot{background:var(--accent2);width:5px;height:5px;border-radius:50%}.workspace{margin-left:232px;width:calc(100% - 232px);padding-bottom:110px}header{height:88px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;font-size:12px}.crumb{color:#757b8c}.crumb-sep{margin:0 13px;color:#414554}.header-actions{display:flex;align-items:center;gap:22px}.upload-button{border:1px solid #303441;border-radius:22px;padding:9px 18px;font-size:12px}.upload-button:hover{background:#20232b}.avatar{border:1px solid #60516d;background:#332a3d;width:34px;height:34px;border-radius:50%;color:#d8bcdf;font-weight:700}main{max-width:1500px;margin:auto;padding:20px 42px 35px}.greeting{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.greeting h1{font-size:29px;margin-bottom:6px}.greeting p{font-size:12px;color:var(--muted);margin:0}.date{font-size:12px;color:#777e90}.hero{position:relative;overflow:hidden;background:linear-gradient(110deg,#282039,#30243f 40%,#292c3c);border:1px solid #51405c80;border-radius:18px;padding:34px 36px;min-height:250px;margin-bottom:32px}.hero-copy{position:relative;z-index:1}.hero h2{font-size:34px;letter-spacing:-1.5px;line-height:1.5;margin-bottom:12px}.hero p{color:#c0b6cf;font-size:12px;margin-bottom:23px}.hero .eyebrow{font-size:9px;margin-bottom:10px}.hero-disc{position:absolute;right:8%;top:17px;width:270px;height:270px;border-radius:50%;background:repeating-radial-gradient(circle at center,#272430 0,#171b27 3px,#34303b 4px,#1d202c 6px);box-shadow:0 4px 50px #0007;transform:rotate(-22deg)}.hero-disc:before{content:'';position:absolute;inset:28%;background:linear-gradient(135deg,#9fc8c1,#67627c 55%,#c397b2);border-radius:50%}.hero-disc:after{content:'';position:absolute;inset:46%;background:#252535;border:5px solid #b2a1b050;border-radius:50%}.section-title{display:flex;justify-content:space-between;align-items:center;margin:32px 0 18px}.section-title h2{margin:0;font-size:19px}.section-title button,.section-title span{color:#9298aa;font-size:12px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:20px}.music-card{text-align:left;min-width:0;padding:0}.cover{position:relative;aspect-ratio:1;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#6f667d,#b69cbd 50%,#48435c);color:#fff9;font-size:55px;margin-bottom:13px;box-shadow:inset 0 0 30px #0002}.cover:before{content:'';position:absolute;inset:22%;border:1px solid #ffffff3c;border-radius:50%;box-shadow:0 0 0 15px #ffffff0c,0 0 0 30px #ffffff08}.tone-1{background:linear-gradient(150deg,#193d45,#86bba6 58%,#cbcfad)}.tone-2{background:linear-gradient(145deg,#463b4b,#b57d72 55%,#ebbf9a)}.tone-3{background:linear-gradient(150deg,#243054,#7389b3 58%,#b8c8df)}.tone-4{background:linear-gradient(145deg,#4c4628,#939463 50%,#d4c8a4)}.tone-5{background:linear-gradient(145deg,#283a37,#578481 58%,#b3d1c8)}.cover .cover-play{position:absolute;bottom:12px;right:12px;font-size:15px;color:#15151e;background:#f6f2fb;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;opacity:0;transition:opacity .15s}.music-card:hover .cover-play{opacity:1}.music-card strong{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:13px;margin-bottom:6px}.music-card small{font-size:11px}.row{display:flex;align-items:center;gap:15px;padding:11px 8px;border-bottom:1px solid #24273080;min-width:0}.row:hover{background:#ffffff04}.row .row-play{color:#8b8d9f;font-size:12px;width:24px;flex:none}.row-art{width:43px;height:43px;border-radius:8px;display:grid;place-items:center;background:#40394d;color:#c8b0ed;font-size:18px;flex:none}.row-info{flex:1;min-width:0}.row-info strong,.row-info small{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.row-info strong{font-size:13px;font-weight:500}.row-info small{font-size:11px;margin-top:5px}.row-side{color:#888fa1;font-size:11px;min-width:60px;text-align:right}.badge{font-size:10px;background:#83d8c518;border:1px solid #83d8c53c;color:var(--accent2);border-radius:4px;padding:2px 5px}.toolbar{display:flex;gap:10px;align-items:center;margin:22px 0;flex-wrap:wrap}.chip{padding:9px 18px;border:1px solid #353945;border-radius:22px;font-size:12px;color:#a1a6b9}.chip.selected{background:#e3d8fb;color:#261b37;border-color:#e3d8fb}.searchbox{position:relative;margin:8px 0 25px}.searchbox input{padding:17px 22px;border-radius:15px;background:#181b23;font-size:15px}.empty{padding:45px 25px;border:1px dashed #393744;border-radius:16px;text-align:center;color:#9498ac;line-height:2}.empty .empty-icon{font-size:38px;color:var(--accent);margin-bottom:12px}.empty h3{color:#e0deea;margin-bottom:5px}.empty p{font-size:12px;margin-bottom:18px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.stat{padding:22px;background:#181b23;border:1px solid #2b2d39;border-radius:13px}.stat small{font-size:11px}.stat strong{display:block;font-size:23px;margin-top:12px}.dropzone{padding:35px;border:1px dashed #55516d;background:#b398ff05;border-radius:15px;text-align:center}.dropzone.drag{background:#b398ff22}.dropzone p{font-size:12px;color:#8e94a8}.progress{height:4px;background:#313447;border-radius:8px;overflow:hidden;margin-top:9px}.progress progress{width:100%;height:4px;display:block;accent-color:var(--accent)}.player{position:fixed;bottom:0;left:0;right:0;height:96px;background:#14161def;backdrop-filter:blur(20px);border-top:1px solid #30303b;display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:40px;padding:14px 30px;align-items:center;z-index:10}.now{display:flex;align-items:center;gap:13px;min-width:0}.now>div:nth-child(2){min-width:0;flex:1}.now strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now small{display:block;font-size:10px;margin-top:7px}.mini-cover{width:53px;height:53px;background:linear-gradient(135deg,#473656,#9d899f);border-radius:7px;display:grid;place-items:center;font-size:25px;flex:none}.transport-buttons{display:flex;gap:20px;align-items:center;justify-content:center;margin-bottom:7px}.transport-buttons .icon{font-size:17px;min-height:26px}.play-button{border-radius:50%;width:35px;height:35px;background:#eeecf4;color:#101218;padding-left:8px}.seek{display:flex;align-items:center;gap:12px}.seek input{flex:1;width:100%}.seek small{font-size:9px;min-width:25px}.player-right{display:flex;align-items:center;justify-content:flex-end;gap:16px}.player-right input{width:95px}.player-right span{color:#9ca2b2}#toast{position:fixed;bottom:115px;left:50%;transform:translateX(-50%) translateY(12px);background:#eeebf6;color:#251e33;padding:13px 23px;border-radius:10px;box-shadow:0 8px 30px #0007;opacity:0;pointer-events:none;transition:.2s;z-index:30;max-width:90vw;font-size:13px}#toast.show{opacity:1;transform:translateX(-50%)}dialog{width:min(480px,90vw);background:#191c25;border:1px solid #494251;border-radius:18px;padding:30px;color:#e8e8f2}dialog::backdrop{background:#05060abc;backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:12px;top:12px}.dialog-list{display:block;width:100%;padding:15px;text-align:left;border-bottom:1px solid var(--line);border-radius:6px}.dialog-list:hover{background:#272633}.dialog-form label{display:block;margin:15px 0;color:#a9aec0;font-size:12px}.dialog-form input{margin-top:7px}.dialog-form .primary{margin-top:10px}.history-date{font-size:10px;color:#9096a8}.error-note{color:#f6acac;font-size:12px}.offline-banner{background:#bea7ff12;border:1px solid #bea7ff30;padding:12px 18px;border-radius:10px;color:#c5b4e6;margin-bottom:25px;font-size:12px}
@media(min-width:1550px){.hero-disc{right:16%}.hero{min-height:275px}.hero h2{font-size:38px}.cards{grid-template-columns:repeat(6,1fr)}}
@media(max-width:1050px){.sidebar{width:196px}.workspace{margin-left:196px;width:calc(100% - 196px)}.sidebar .brand{font-size:22px}.brand span{font-size:19px}main{padding:15px 26px}header{padding:0 26px}.hero-disc{right:-70px;opacity:.55}.hero h2{font-size:28px}.player{gap:16px;padding:14px 20px;grid-template-columns:1fr 1.2fr .5fr}.player-right input{display:none}.cards{gap:16px;grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}.auth-copy h1{font-size:38px}.record{width:310px;height:310px}}
@media(max-width:700px){.auth{display:block}.auth-art{height:180px;padding:25px}.auth-copy{display:none}.record{width:230px;height:230px;top:45px;right:-10px}.auth-form{padding:35px 25px}.sidebar{position:fixed;top:auto;bottom:0;height:62px;width:100%;padding:0;border-right:0;border-top:1px solid var(--line);z-index:12;background:#12151c}.sidebar .brand,.sidebar .nav-label,.playlist-label,#sidebar-playlists,.sidebar-bottom{display:none}.sidebar nav{display:flex;justify-content:space-around}.nav{margin:0;display:flex;flex-direction:column;gap:0;font-size:8px;padding:8px 6px;width:20%;border-radius:0}.nav span{text-align:center;height:25px;font-size:23px}.workspace{margin-left:0;width:100%;padding-bottom:155px}header{height:70px;padding:0 20px}.header-actions{gap:12px}.upload-button{font-size:11px;padding:7px 12px}main{padding:16px 20px}.date{display:none}.greeting h1{font-size:24px}.hero{padding:25px;min-height:225px;margin-bottom:28px}.hero h2{font-size:27px}.hero-disc{width:220px;height:220px;right:-90px;top:40px;opacity:.4}.cards{grid-template-columns:repeat(2,1fr);gap:20px 16px}.cards .music-card:nth-child(n+5){display:none}.section-title{margin-top:26px}.player{bottom:62px;height:72px;padding:10px 15px;display:flex;gap:10px}.now{flex:1}.mini-cover{width:43px;height:43px}.now .icon,.player-right,.seek,#shuffle,#repeat,#previous{display:none}.transport-buttons{gap:10px;margin:0}.player .now strong{max-width:180px}.stat-grid{gap:9px}.stat{padding:15px 10px}.stat strong{font-size:18px}.stat small{font-size:9px}.row{gap:9px}.row-side{display:none}.row .row-play{width:15px}.row .icon{min-width:28px;font-size:19px}#toast{bottom:150px}.auth-note{margin-top:20px}}