:root{color:#f1f7f2;font-synthesis:none;text-rendering:optimizelegibility;--green:#8de5a6;--muted:#94a29a;--panel:#111813;--line:#dcf4e317;--soft:#18221b;background:#080c09;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(at 80% 0,#467e5224,#0000 36%),#080c09;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit}.app-shell{min-height:100vh;padding-bottom:100px}.sidebar{border-right:1px solid var(--line);z-index:5;background:#0c120e;flex-direction:column;width:248px;padding:28px 20px;display:flex;position:fixed;inset:0 auto 96px 0}.brand{text-align:left;letter-spacing:-1.2px;background:0 0;border:0;align-items:center;gap:12px;margin:3px 0 48px;padding:0;font:800 23px Manrope,sans-serif;display:flex}.brand-icon{color:#0a1b10;background:linear-gradient(145deg,#b0f2c0,#43ab70);border-radius:14px;place-items:center;width:42px;height:42px;font-size:26px;display:grid;box-shadow:0 8px 28px #7de09c24}.brand-soft{color:var(--green)}.brand small{letter-spacing:1.45px;color:#829188;margin-top:3px;font:600 8px DM Sans,sans-serif;display:block}.nav-label,.playlist-title span{letter-spacing:1.5px;color:#718078;margin:0 0 12px;font-size:10px;font-weight:700}.nav-link{color:#aab6ad;text-align:left;background:0 0;border:0;border-radius:10px;align-items:center;gap:13px;width:100%;margin:3px 0;padding:12px 13px;font-size:14px;display:flex}.nav-link:first-letter{font-size:18px}.nav-link.selected,.nav-link:hover{color:#a2edb5;background:#1a281e}.sidebar-divider{background:var(--line);height:1px;margin:24px 0}.playlist-title{justify-content:space-between;align-items:center;display:flex}.playlist-title span{margin:0}.playlist-title button{color:#b4c3b8;background:0 0;border:0;font-size:24px}.side-playlists{flex-direction:column;gap:6px;margin-top:12px;display:flex;overflow:auto}.side-playlists button{text-align:left;color:#acb7af;background:0 0;border:0;padding:8px 4px;font-size:13px}.side-playlists p{color:#75847a;font-size:12px;line-height:1.7}.side-bottom{border:1px solid var(--line);background:linear-gradient(145deg,#16251a,#101612);border-radius:14px;margin-top:auto;padding:16px 14px}.side-bottom b,.side-bottom span,.side-bottom em{display:block}.side-bottom b{letter-spacing:1px;color:var(--green);font-size:10px}.side-bottom span{color:#adbbb0;margin:7px 0 14px;font-size:12px}.side-bottom em{color:#819087;font-size:10px;font-style:normal}.main-panel{min-height:calc(100vh - 96px);margin-left:248px}.topbar{border-bottom:1px solid var(--line);z-index:4;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#080c09c7;justify-content:space-between;align-items:center;height:76px;padding:0 38px;display:flex;position:sticky;top:0}.top-search{border:1px solid var(--line);color:#a6b5aa;background:#111914;border-radius:24px;align-items:center;gap:12px;width:min(430px,55%);height:42px;padding:0 15px;display:flex}.top-search span{font-size:21px}.top-search input,.big-search input{color:#f2f7f3;background:0 0;border:0;outline:0;width:100%;font-size:13px}.top-search input::placeholder,.big-search input::placeholder{color:#77867c}.top-actions{align-items:center;gap:14px;display:flex}.beta-badge{letter-spacing:1px;color:#9ae6ad;background:#193021;border:1px solid #73ca8d50;border-radius:20px;padding:6px 9px;font-size:9px}.ghost-button{color:#b6c1b8;background:0 0;border:0;padding:8px 10px;font-size:13px}.ghost-button:hover{color:#fff}.primary-button{color:#092011;background:linear-gradient(135deg,#a6efb8,#69cc8b);border:0;border-radius:24px;padding:12px 21px;font-size:13px;font-weight:800;box-shadow:0 8px 28px #6bcc8b23}.primary-button:hover{filter:brightness(1.06);transform:translateY(-1px)}.primary-button.small{padding:10px 17px}.primary-button.full{width:100%;margin-top:8px}.primary-button:disabled{opacity:.6;cursor:wait}.avatar{color:#b0efbe;background:#274b31;border-radius:50%;place-items:center;width:31px;height:31px;font-weight:700;display:grid}.username{color:#c7d2ca;font-size:12px}.content{max-width:1280px;margin:0 auto;padding:36px 40px 60px}.hero{background:radial-gradient(at 78%,#31593c70,#0000 40%),linear-gradient(120deg,#14231a,#0e1711 65%,#19261b);border:1px solid #b2eac21c;border-radius:24px;justify-content:space-between;align-items:center;min-height:280px;padding:40px 48px;display:flex;overflow:hidden}.eyebrow{letter-spacing:1.7px;color:#89d99c;margin:0 0 14px;font-size:9px;font-weight:700}.hero h1,.page-section h1{letter-spacing:-2.5px;color:#f0f6f1;margin:0;font:800 clamp(36px,4.4vw,60px)/1.05 Manrope,sans-serif}.hero h1 span,.page-section h1 span{color:var(--green)}.hero p:not(.eyebrow){color:#a9b7ad;margin:16px 0 25px;font-size:14px}.hero-art{place-items:center;width:220px;height:220px;display:grid;position:relative}.hero-art>span{color:#c2f4cd;text-shadow:0 0 24px #85e49c;z-index:1;font-size:54px;position:absolute}.vinyl{background:repeating-radial-gradient(circle,#141b17 0 3px,#354239 4px 5px,#111712 6px 8px);border:1px solid #b1e7bb2b;border-radius:50%;place-items:center;width:196px;height:196px;animation:20s linear infinite slowspin;display:grid;box-shadow:0 22px 54px #0008}.vinyl i{background:radial-gradient(circle,#0a120c 0 14%,#8bcf9d 16% 18%,#284a31 20% 100%);border:6px solid #1d3022;border-radius:50%;width:62px;height:62px}@keyframes slowspin{to{transform:rotate(360deg)}}.section{margin-top:38px}.section-heading{justify-content:space-between;align-items:end;margin-bottom:18px;display:flex}.section-heading .eyebrow{margin-bottom:6px}.section h2{letter-spacing:-.7px;margin:0;font:700 23px Manrope,sans-serif}.text-button{color:#9fe4b1;background:0 0;border:0;font-size:12px}.mix-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.mix-card{border:1px solid var(--line);text-align:left;background:linear-gradient(135deg,#223c2a,#17241b);border-radius:16px;flex-direction:column;justify-content:space-between;align-items:flex-start;min-height:135px;padding:17px;transition:all .18s;display:flex}.mix-card:hover{border-color:#8ee5a65c;transform:translateY(-3px)}.mix-card>span{color:#d0f2d6;font-size:29px}.mix-card b{font-size:13px}.mix-card small{color:#c0d3c4;font-size:10px}.mix-1{background:linear-gradient(135deg,#4b4022,#252217)}.mix-2{background:linear-gradient(135deg,#332b51,#191725)}.mix-3{background:linear-gradient(135deg,#254452,#17232a)}.track-count{color:#829087;font-size:11px}.track-list{border-top:1px solid var(--line)}.track-head,.track-line{grid-template-columns:36px minmax(190px,2fr) minmax(100px,1fr) minmax(80px,.7fr) 36px;align-items:center;gap:12px;display:grid}.track-head{border-bottom:1px solid var(--line);color:#7e8c82;height:36px;font-size:10px}.track-line{color:#9eaca2;border-bottom:1px solid #dcefe210;min-height:67px;font-size:11px}.track-line:hover,.track-line.current{background:#ffffff06}.track-index{text-align:center;color:#8b9b8f}.track-info{text-align:left;background:0 0;border:0;align-items:center;gap:12px;min-width:0;padding:8px 0;display:flex}.track-cover,.album-art{color:#b7efc4;background:linear-gradient(140deg,#294f35,#182b20);border-radius:9px;flex-shrink:0;place-items:center;width:42px;height:42px;font-size:20px;display:grid}.track-info b,.track-info small,.now-playing b,.now-playing small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.track-info b{color:#e8efe9;font-size:12px}.track-info small{color:#89978e;margin-top:4px;font-size:10px}.heart{color:#74837a;background:0 0;border:0;font-size:18px}.heart:hover,.heart.liked{color:#8be5a4}.page-section{margin-top:10px}.page-section h1{margin-bottom:25px;font-size:46px}.big-search{border:1px solid var(--line);background:#111a14;border-radius:12px;align-items:center;gap:13px;height:54px;margin-bottom:20px;padding:0 16px;display:flex}.big-search span{color:#9ce5ad;font-size:23px}.filter-list{flex-wrap:wrap;gap:8px;margin:20px 0 27px;display:flex}.filter-chip{border:1px solid var(--line);color:#9caaa0;background:#131b15;border-radius:22px;padding:8px 13px;font-size:11px}.filter-chip.active,.filter-chip:hover{color:#b5f0c2;background:#193021;border-color:#73cf8c80}.empty-state{text-align:center;color:#89978e;border:1px dashed #8aa49338;border-radius:17px;padding:42px}.empty-state span{font-size:30px}.empty-state b{color:#ecf4ed;margin:10px;display:block}.empty-state p{font-size:12px}.library-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;display:grid}.library-card{border:1px solid var(--line);text-align:left;background:#121a14;border-radius:15px;flex-direction:column;justify-content:space-between;align-items:flex-start;min-height:160px;padding:20px;display:flex}.library-card span{color:#9fe7b0;font-size:34px}.library-card b{font-size:14px}.library-card small,.library-hint{color:#8b998f;font-size:11px}.library-hint{margin-top:30px}.player{z-index:8;background:#0d130f;border-top:1px solid #d9f5df18;grid-template-columns:minmax(220px,1fr) minmax(300px,1.2fr) minmax(130px,.7fr);align-items:center;gap:30px;height:96px;padding:0 30px;display:grid;position:fixed;inset:auto 0 0}.now-playing{align-items:center;gap:12px;min-width:0;display:flex}.album-art{width:48px;height:48px}.now-playing b{color:#e8f1ea;max-width:180px;font-size:12px}.now-playing small{color:#87958b;margin-top:5px;font-size:10px}.player-controls{width:100%;max-width:440px;margin:auto}.control-buttons{justify-content:center;align-items:center;gap:22px;height:42px;display:flex}.control-buttons button{color:#97a69b;background:0 0;border:0;font-size:16px}.control-buttons button:hover,.control-buttons button.control-on{color:var(--green)}.control-buttons .play-button{color:#0c1b11;background:#a0eab1;border-radius:50%;width:35px;height:35px;font-size:14px}.progress-row{color:#87958b;align-items:center;gap:10px;font-size:9px;display:flex}.progress-row input,.volume-control input{accent-color:#8fdfa5;flex:1;min-width:0}.volume-control{color:#94a197;justify-content:end;align-items:center;gap:10px;display:flex}.volume-control input{max-width:110px}.overlay{-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);z-index:20;background:#020603c9;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.dialog{background:linear-gradient(145deg,#19251c,#101711);border:1px solid #b5e6c22b;border-radius:22px;width:min(420px,100%);padding:31px;position:relative;box-shadow:0 25px 90px #0009}.dialog .close{color:#9eaca1;background:0 0;border:0;font-size:25px;position:absolute;top:13px;right:16px}.dialog-logo{color:#0c1d11;background:#9ce8ae;border-radius:15px;place-items:center;width:46px;height:46px;margin-bottom:20px;font-size:25px;display:grid}.dialog h2{margin:0;font:700 24px Manrope,sans-serif}.dialog-copy{color:#9daaa0;margin:10px 0 22px;font-size:12px;line-height:1.6}.dialog label{color:#b8c5bb;margin:14px 0;font-size:11px;display:block}.dialog label input{color:#f0f8f1;background:#0b120d;border:1px solid #d5edde22;border-radius:9px;outline:none;width:100%;height:43px;margin-top:7px;padding:0 12px;display:block}.dialog label input:focus{border-color:#83d99b}.form-error{color:#ffaca8;font-size:11px}.switch-auth{text-align:center;color:#9aa79e;margin:18px 0 0;font-size:11px}.switch-auth button{color:#a1eab3;background:0 0;border:0;font-weight:700}.toast{z-index:30;color:#102217;background:#e0f5e5;border-radius:25px;padding:12px 18px;font-size:12px;font-weight:700;position:fixed;bottom:115px;left:50%;transform:translate(-50%);box-shadow:0 10px 40px #0008}.mobile-nav{display:none}@media (width<=1100px){.sidebar{width:210px;padding:24px 16px}.main-panel{margin-left:210px}.content{padding:30px 25px}.topbar{padding:0 25px}.player{grid-template-columns:minmax(160px,1fr) minmax(260px,1.4fr) 120px;gap:18px;padding:0 20px}.mix-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.app-shell{padding-bottom:154px}.sidebar{display:none}.main-panel{min-height:calc(100vh - 154px);margin:0}.topbar{gap:10px;height:64px;padding:0 15px}.top-search{width:100%;height:39px}.top-actions{gap:5px}.username,.beta-badge{display:none}.content{padding:23px 16px 38px}.hero{min-height:245px;padding:27px 23px}.hero h1{font-size:39px}.hero-art,.vinyl{width:105px;height:105px}.vinyl i{border-width:3px;width:34px;height:34px}.hero-art>span{font-size:31px}.mix-grid{gap:9px}.mix-card{min-height:115px;padding:13px}.mix-card b{font-size:11px}.track-head,.track-line{grid-template-columns:25px minmax(150px,1fr) 30px;gap:7px}.track-head span:nth-child(3),.track-head span:nth-child(4),.track-line>span:nth-child(3),.track-line>span:nth-child(4){display:none}.track-info{gap:8px}.track-cover{width:37px;height:37px}.player{grid-template-columns:minmax(0,1fr) auto;gap:9px;height:92px;padding:0 12px;bottom:62px}.now-playing{gap:8px}.album-art{width:38px;height:38px}.now-playing b{max-width:130px;font-size:11px}.now-playing small{font-size:9px}.player-controls{width:148px}.control-buttons{gap:10px;height:37px}.control-buttons button{font-size:13px}.control-buttons .play-button{width:32px;height:32px}.progress-row{gap:5px}.progress-row input{max-width:100px}.volume-control{display:none}.mobile-nav{z-index:9;border-top:1px solid var(--line);background:#0d130f;justify-content:space-around;align-items:center;height:62px;display:flex;position:fixed;inset:auto 0 0}.mobile-nav button{color:#95a39a;background:0 0;border:0;flex-direction:column;align-items:center;gap:3px;font-size:18px;display:flex}.mobile-nav span{font-size:9px}.page-section h1{font-size:36px}.dialog{padding:26px 22px}.toast{white-space:nowrap;max-width:90%;bottom:170px}}@media (width<=390px){.hero-art{display:none}.hero{min-height:220px}.top-search input{font-size:11px}.player{grid-template-columns:minmax(0,1fr) 128px}.track-index{font-size:10px}}