@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jbmono-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:JetBrains Mono;font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fonts/jbmono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg: #09090b;--bg-0: #09090b;--bg-1: #0d0d10;--bg-2: #111114;--bg-3: #16161a;--surface: rgba(255, 255, 255, .035);--surface-2: rgba(255, 255, 255, .06);--surface-3: rgba(255, 255, 255, .09);--solid: #131316;--solid-2: #18181c;--line: rgba(255, 255, 255, .07);--line-2: rgba(255, 255, 255, .12);--border: var(--line);--border-strong: var(--line-2);--hairline: rgba(255, 255, 255, .05);--ink: #f5f5f4;--ink-2: #a8a8ad;--ink-3: #717179;--ink-4: #4a4a52;--text: var(--ink);--text-2: var(--ink-2);--text-3: var(--ink-3);--text-4: var(--ink-4);--accent: #FF6A2B;--accent-up: #ff8652;--accent-down: #e8541a;--accent-2: #ff4d6d;--accent-3: #2dd4a8;--accent-ink: #ffffff;--accent-soft: rgba(255, 106, 43, .13);--accent-soft-2: rgba(255, 106, 43, .22);--grad: linear-gradient(135deg, #FF6A2B 0%, #ff8652 100%);--grad-2: linear-gradient(135deg, #2dd4a8 0%, #FF6A2B 100%);--grad-3: linear-gradient(135deg, #ff4d6d 0%, #FF6A2B 100%);--sh-sm: 0 1px 2px rgba(0,0,0,.5);--sh-md: 0 8px 24px -6px rgba(0,0,0,.55);--sh-lg: 0 24px 60px -18px rgba(0,0,0,.8);--sh-xl: 0 40px 90px -24px rgba(0,0,0,.9);--sh-accent: 0 8px 32px -8px rgba(255, 106, 43, .55);--glow: 0 0 0 1px rgba(255,106,43,.25), 0 0 36px -6px rgba(255,106,43,.35);--shadow-lg: var(--sh-lg);--shadow-glow: var(--sh-accent);--r-sm: 10px;--r-md: 14px;--r-lg: 20px;--r-xl: 28px;--r-pill: 999px;--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--display: "Inter", -apple-system, sans-serif;--mono: "JetBrains Mono", "SF Mono", Consolas, monospace;--ease: cubic-bezier(.22, .61, .36, 1);--ease-bounce: cubic-bezier(.34, 1.4, .5, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--sidebar-w: 276px;--player-h: 84px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{margin:0;padding:0;box-sizing:border-box}html{height:100%;overflow:hidden;background:var(--bg)}body{height:100%;overflow:hidden}::selection{background:#ff6a2b59;color:#fff}body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01";letter-spacing:-.011em;display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:1fr 0;grid-template-areas:"sidebar main" "player  player";position:relative}body:not(.no-player) .main{padding-bottom:calc(var(--player-h) + 30px)}body.guest-mode{grid-template-columns:1fr;grid-template-areas:"main" "player"}body.guest-mode .sidebar,body.guest-mode .sidebar-backdrop,body.guest-mode .topbar{display:none!important}body.guest-mode .main{grid-area:main}body.guest-mode .content{padding:0;max-width:none;width:100%;min-height:calc(100dvh - var(--player-h))}.content:has(>.welcome-view){padding:0;max-width:none}.main .welcome-view{min-height:calc(100dvh - var(--player-h))}body.no-player{--player-h: 0px}body.no-player .player{display:none}.player{animation:playerIn .5s cubic-bezier(.22,1,.36,1)}@keyframes playerIn{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}button{font-family:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#fff3;background-clip:padding-box;border:3px solid transparent}::-webkit-scrollbar-track{background:transparent}.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(58% 42% at 82% -8%,rgba(255,106,43,.13),transparent 65%),radial-gradient(42% 38% at -6% 18%,rgba(255,106,43,.05),transparent 60%),radial-gradient(50% 45% at 50% 118%,rgba(45,212,168,.05),transparent 65%)}.ambient:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");opacity:.035;mix-blend-mode:overlay}.sidebar{grid-area:sidebar;display:flex;flex-direction:column;padding:24px 14px 20px 20px;position:relative;z-index:40;overflow-y:auto;border-right:1px solid var(--hairline);background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 30%)}.sidebar-backdrop{display:none;position:fixed;inset:0;background:#05050799;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:90;opacity:0;transition:opacity .3s var(--ease)}.sidebar-backdrop.open{opacity:1}.logo{display:flex;align-items:center;gap:12px;padding:4px 10px 24px}.logo-icon{width:40px;height:40px;border-radius:12px;overflow:hidden;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--sh-accent)}.logo-icon-lg{width:56px;height:56px;border-radius:16px;margin:0 auto 16px}.brand-icon{width:100%;height:100%;display:block;object-fit:cover}.logo-icon svg{width:22px;height:22px}.logo-copy{display:flex;flex-direction:column;line-height:1.05}.logo-text{font-size:19px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}.logo-tag{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:3px}.nav{flex:1;display:flex;flex-direction:column;gap:28px;padding-top:4px}.nav-section{display:flex;flex-direction:column;gap:2px}.nav-title{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-4);padding:0 12px;margin-bottom:10px}.nav-title:before,.nav-title:after{display:none}.nav-item{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500;letter-spacing:-.01em;border-radius:var(--r-sm);transition:color .18s var(--ease),background .18s var(--ease)}.nav-item:before{display:none}.nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.75;transition:opacity .18s,transform .25s var(--ease-bounce)}.nav-item:hover{color:var(--ink);background:var(--surface)}.nav-item:hover svg{opacity:1;transform:translate(1px)}.nav-item.active{color:var(--ink);background:var(--surface-2);font-weight:600}.nav-item.active svg{opacity:1;color:var(--accent)}.nav-item.active:after{content:"";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 12px #ff6a2bb3;display:block}.badge{margin-left:auto;background:var(--surface-3);color:var(--ink-3);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 8px;border-radius:var(--r-pill)}.badge-new{background:var(--accent-soft-2);color:var(--accent-up)}.nav-wave .badge-new{background:var(--accent-soft-2);color:var(--accent-up);font-size:12px;line-height:1.3}.sidebar-footer{padding-top:18px;display:flex;flex-direction:column;gap:12px}.sidebar-footer .user-area{margin-left:0;width:100%;display:flex;align-items:center;gap:10px}.sidebar-footer .profile-wrap{flex:1 1 auto;min-width:0}.sidebar-footer .btn-join,.sidebar-footer .btn-login{flex:1 1 auto;justify-content:center}.sidebar-footer .icon-btn{flex-shrink:0;margin-left:auto}.sidebar-footer .profile-menu{top:auto;bottom:calc(100% + 12px);left:0;right:auto;transform:translateY(8px) scale(.97)}.sidebar-footer .profile-menu.open{transform:translateY(0) scale(1)}.powered{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:500;color:var(--ink-3);padding:11px 14px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md)}.powered strong{color:var(--ink);font-weight:700}.powered-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 10px var(--accent-3);animation:blink 2.4s infinite;flex-shrink:0}.main{grid-area:main;overflow-y:auto;overflow-x:hidden;position:relative;z-index:1}.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;padding:calc(16px + var(--safe-top)) calc(36px + var(--safe-right)) 16px calc(36px + var(--safe-left));background:#09090bb8;backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);border-bottom:1px solid var(--hairline)}@media (min-width: 961px){.topbar{display:none}}.menu-btn{display:none;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;align-items:center;justify-content:center;transition:all .18s var(--ease);flex-shrink:0}.menu-btn svg{width:18px;height:18px}.menu-btn:hover{color:var(--ink);background:var(--surface-2)}.nav-arrows{display:flex;gap:6px}.arrow-btn{width:34px;height:34px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s var(--ease)}.arrow-btn svg{width:15px;height:15px}.arrow-btn:hover{color:var(--ink);background:var(--surface-2);border-color:var(--line-2)}.arrow-btn:active{transform:scale(.92)}.search-page-box{position:relative;display:flex;align-items:center;max-width:620px;margin:6px 0 26px}.search-page-icon{position:absolute;left:18px;width:18px;height:18px;color:var(--ink-3);pointer-events:none;transition:color .2s}.search-page-box:focus-within .search-page-icon{color:var(--accent)}#pageSearch{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:15px 20px 15px 50px;border-radius:var(--r-pill);font-size:15px;font-family:var(--sans);font-weight:450;outline:none;transition:border-color .2s var(--ease),background .2s,box-shadow .2s}#pageSearch::placeholder{color:var(--ink-3)}#pageSearch:focus{border-color:#ff6a2b80;background:var(--surface-2);box-shadow:0 0 0 3px var(--accent-soft)}.user-area{margin-left:auto;display:flex;align-items:center;gap:10px}.icon-btn{position:relative;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);width:37px;height:37px;border-radius:var(--r-pill);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s var(--ease)}.icon-btn svg{width:16px;height:16px}.icon-btn:hover{color:var(--ink);background:var(--surface-2);transform:translateY(-1px)}.icon-btn:active{transform:translateY(0) scale(.94)}.avatar{width:37px;height:37px;border-radius:var(--r-pill);background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;cursor:pointer;border:none;color:#fff;box-shadow:var(--sh-accent);transition:transform .2s var(--ease-bounce),box-shadow .2s}button.avatar:hover{transform:scale(1.07);box-shadow:var(--glow)}.content{padding:26px 32px 64px;max-width:1560px}.hero{position:relative;margin:2px 0 32px;padding:clamp(32px,4vw,56px) 24px;min-height:300px;border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2vw,20px);text-align:center;isolation:isolate;background:radial-gradient(80% 70% at 50% 0%,rgba(255,106,43,.32),transparent 60%),radial-gradient(70% 60% at 50% 100%,rgba(124,77,255,.12),transparent 60%),linear-gradient(180deg,#1a1411,#120e0d 52%,#0b0b0e);border:1px solid rgba(255,255,255,.08);box-shadow:var(--sh-lg),inset 0 1px #ffffff0f}.hero-inner{position:relative;z-index:1;width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}.hero-inner>*{margin:0;animation:waveRise .7s cubic-bezier(.22,1,.36,1) backwards}.hero-inner>:nth-child(1){animation-delay:.02s}.hero-inner>:nth-child(2){animation-delay:.1s}.hero-inner>:nth-child(3){animation-delay:.18s}.hero-inner>:nth-child(4){animation-delay:.26s}.hero-inner>:nth-child(5){animation-delay:.34s}.hero-brand{width:48px;height:48px;border-radius:14px;overflow:hidden;margin:0 0 14px;box-shadow:var(--sh-accent),0 0 0 1px #ffffff14;position:relative}.hero-brand:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px #ffffff38;pointer-events:none}.hero-brand .brand-icon{width:100%;height:100%}.hero:before{content:"";position:absolute;top:-240px;left:50%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,43,.42),rgba(255,106,43,.1) 42%,transparent 72%);filter:blur(44px);animation:heroOrb 9s ease-in-out infinite;z-index:-1;pointer-events:none}.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(85% 85% at 50% 35%,black,transparent 78%);-webkit-mask-image:radial-gradient(85% 85% at 50% 35%,black,transparent 78%);z-index:-1;pointer-events:none}@keyframes heroOrb{0%,to{transform:translate(-50%) translate(0) scale(1);opacity:.85}50%{transform:translate(-50%) translate(-24px,20px) scale(1.07);opacity:1}}.hero>*{position:relative}.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;width:fit-content;background:#ffffff0f;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);padding:6px 14px;border-radius:var(--r-pill);font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--ink-2);margin:0 0 12px}.hero-eyebrow:before{display:none}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:blink 1.8s infinite}@keyframes blink{50%{opacity:.3}}.hero h1{font-family:var(--display);font-size:clamp(28px,3.2vw,42px);font-weight:900;line-height:1.03;letter-spacing:-.045em;max-width:none;margin:0 0 12px;background:linear-gradient(180deg,#fff 30%,#ffffffb8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero h1:first-letter{color:inherit}.hero h1 span{background:linear-gradient(115deg,#ff6a2b 10%,#ffb38f,#ff6a2b 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:titleShimmer 5s ease-in-out infinite}.hero p{font-size:14px;font-weight:450;color:var(--ink-2);line-height:1.6;max-width:420px;margin:0 0 20px}.hero-actions{display:flex;gap:12px;align-items:center;justify-content:flex-start;flex-wrap:wrap}.hero-actions .btn-primary{display:inline-flex;align-items:center;gap:8px}.hero-actions .btn-primary svg{width:18px;height:18px}.hero-actions .btn-primary{padding:12px 26px;font-size:14px;font-weight:700;border-radius:var(--r-pill);box-shadow:var(--sh-accent),0 16px 40px -14px #ff6a2b8c;transition:transform .22s var(--ease-bounce),box-shadow .22s}.hero-actions .btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--glow),0 20px 48px -12px #ff6a2b9e}.btn{border:none;cursor:pointer;font-weight:600;font-size:14px;letter-spacing:-.01em;padding:13px 26px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:9px;transition:transform .2s var(--ease-bounce),box-shadow .25s var(--ease),background .2s;will-change:transform}.btn svg{width:17px;height:17px}.btn:active{transform:scale(.97)}.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--sh-accent),inset 0 1px #ffffff40}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--glow),0 16px 40px -10px #ff6a2b8c}.btn-ghost{background:#ffffff0f;color:var(--ink);border:1px solid var(--line-2);backdrop-filter:blur(8px)}.btn-ghost:hover{background:#ffffff1a;transform:translateY(-2px)}.modal .btn-primary,.settings-footer .btn-primary,.auth-form .btn-primary{background:var(--grad);color:#fff;box-shadow:var(--sh-accent)}.modal .btn-ghost,.settings-footer .btn-ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}.modal .btn-ghost:hover{background:var(--surface-3)}.section{margin-bottom:42px}.section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;gap:24px}.section-title{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.035em;color:var(--ink)}.section-subtitle{color:var(--ink-3);font-size:13px;font-weight:450;margin-top:5px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:20px}.card{position:relative;background:var(--surface);border:1px solid var(--hairline);padding:14px;border-radius:var(--r-lg);cursor:pointer;overflow:hidden;transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s var(--ease);will-change:transform}.card:before{content:"";position:absolute;inset:0;background:radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),rgba(255,106,43,.1),transparent 65%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none;display:block;z-index:0}.card:hover:before{opacity:1}.card:hover{transform:translateY(-6px);border-color:#ff6a2b40;box-shadow:var(--sh-lg),0 0 40px -12px #ff6a2b40}.card>*{position:relative;z-index:1}.card-cover{position:relative;width:100%;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;margin-bottom:14px;background:var(--solid-2)}.card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out),filter .4s}.card:hover .card-cover img{transform:scale(1.07)}.card-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5));opacity:0;transition:opacity .3s}.card:hover .card-cover:after{opacity:1}.card-play{position:absolute;bottom:12px;right:12px;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transform:translateY(14px) scale(.8);opacity:0;transition:all .32s var(--ease-bounce);box-shadow:var(--sh-accent),inset 0 1px #ffffff4d;z-index:2}.card-play svg{width:19px;height:19px;margin-left:2px}.card:hover .card-play{transform:translateY(0) scale(1);opacity:1}.card-play:hover{transform:scale(1.12)!important;background:var(--accent-up)}.card-play:active{transform:scale(.95)!important}.card-title{font-weight:600;font-size:14.5px;letter-spacing:-.015em;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}.card-meta{font-size:12.5px;font-weight:450;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 32px}.chart-col{display:flex;flex-direction:column;gap:2px}.chart-row{display:grid;grid-template-columns:44px 1fr auto 44px;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-md);cursor:pointer;transition:background .15s var(--ease)}.chart-row:hover{background:var(--surface-2)}.chart-row.playing{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}.chart-row.playing .chart-title{color:var(--accent-up)}.chart-cover{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--surface-2)}.chart-meta{min-width:0}.chart-title{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-artist{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.chart-fav{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--ink-3);border-radius:50%;cursor:pointer;transition:color .15s,background .15s}.chart-fav svg{width:18px;height:18px}.chart-fav:hover{color:var(--accent);background:var(--surface-2)}.chart-fav.active{color:var(--accent-2)}.chart-dur{font-family:var(--mono);font-size:12px;color:var(--ink-4);text-align:right;font-variant-numeric:tabular-nums}.track-list{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:10px;backdrop-filter:blur(10px)}.track-row{display:grid;grid-template-columns:40px 52px 1fr 220px 64px auto;align-items:center;gap:16px;padding:9px 12px;border-radius:var(--r-md);cursor:pointer;transition:background .15s var(--ease)}.track-row:hover{background:var(--surface-2)}.track-row.playing{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}.track-row.playing .track-name{color:var(--accent-up);-webkit-text-fill-color:var(--accent-up);background:none}.track-num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-4);font-size:12.5px;text-align:center}.track-row:hover .track-num.has-play{display:none}.track-row .play-icon{display:none;color:var(--accent);cursor:pointer}.track-row:hover .play-icon{display:block;margin:0 auto}.play-icon svg{width:15px;height:15px}.track-cover{width:46px;height:46px;border-radius:10px;object-fit:cover;box-shadow:var(--sh-sm)}.track-info{min-width:0}.track-name{font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}.track-artist{font-size:12.5px;font-weight:450;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-album{font-size:13px;font-weight:450;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-duration{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink-3);text-align:right}.track-fav{background:none;border:none;color:var(--ink-4);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .18s,transform .2s var(--ease-bounce)}.track-fav svg{width:17px;height:17px}.track-fav:hover{color:var(--accent-2);transform:scale(1.2)}.track-fav.active{color:var(--accent-2)}.track-fav.active svg{fill:var(--accent-2)}.list-header{display:grid;grid-template-columns:40px 52px 1fr 220px 64px auto;gap:16px;padding:6px 12px 12px;border-bottom:1px solid var(--hairline);margin-bottom:6px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4)}.list-header span:nth-child(1){text-align:center}.list-header span:nth-child(5){text-align:right}.featured-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.featured-card{display:flex;align-items:center;min-width:0;gap:14px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:12px;cursor:pointer;transition:all .22s var(--ease)}.featured-card:hover{background:var(--surface-2);border-color:var(--line-2);transform:translateY(-2px)}.featured-card img{width:54px;height:54px;border-radius:11px;object-fit:cover;flex-shrink:0}.featured-info{min-width:0;flex:1}.featured-title{font-weight:600;font-size:14px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.featured-artist{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.featured-play{width:38px;height:38px;border-radius:50%;background:var(--accent-soft);color:var(--accent-up);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s var(--ease-bounce)}.featured-play:hover{background:var(--accent);color:#fff;transform:scale(1.1);box-shadow:var(--sh-accent)}.featured-play svg{width:14px;height:14px;margin-left:1px}.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.genre-card{position:relative;height:130px;border-radius:var(--r-lg);padding:22px;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font-size:20px;font-weight:700;letter-spacing:-.03em;color:#fff;isolation:isolate;transition:transform .3s var(--ease-out),box-shadow .3s;box-shadow:var(--sh-md)}.genre-card:hover{transform:translateY(-4px) scale(1.015);box-shadow:var(--sh-lg)}.genre-card:before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,var(--g1),var(--g2));opacity:.88;z-index:-2;transition:opacity .3s}.genre-card:hover:before{opacity:1}.genre-card:after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 100% 0%,rgba(255,255,255,.2),transparent 55%),linear-gradient(180deg,transparent 40%,rgba(0,0,0,.35));z-index:-1}.genre-card>*{text-shadow:0 2px 14px rgba(0,0,0,.35)}.spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--surface-3);border-top-color:var(--accent);animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.empty{text-align:center;padding:72px 20px;color:var(--ink-3)}.empty-brand-icon{width:64px;height:64px;margin:0 auto 18px;border-radius:18px;overflow:hidden;box-shadow:var(--sh-accent)}.empty-brand-icon .brand-icon{width:100%;height:100%}.empty h3{font-family:var(--display);font-weight:700;color:var(--ink);font-size:21px;letter-spacing:-.03em;margin-bottom:8px}.empty p{font-size:13.5px;color:var(--ink-3)}.player{grid-area:player;position:fixed;left:0;right:0;bottom:16px;z-index:100;justify-self:center;align-self:center;width:min(860px,calc(100vw - 32px));margin:0 auto;padding:8px 12px;border-radius:20px;background:linear-gradient(180deg,#1c1c22db,#0f0f13e6);backdrop-filter:saturate(1.8) blur(28px);-webkit-backdrop-filter:saturate(1.8) blur(28px);border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 54px -24px #000000d9,0 2px 10px #0000004d,inset 0 1px #ffffff12;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;overflow:hidden}.player:before{content:"";position:absolute;top:0;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,106,43,.45),transparent);pointer-events:none}.player-track{display:flex;align-items:center;gap:12px;min-width:0}#playerCover{width:46px;height:46px;border-radius:10px;object-fit:cover;background:var(--solid-2);box-shadow:var(--sh-md);flex-shrink:0}#playerCover:not([src]),#playerCover[src=""]{background:var(--solid-2)}#playerCover[src*="assets/icon"]{object-fit:cover;background:transparent}.player-info{min-width:0;flex:0 1 auto}.player-title{font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}.player-artist{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.like-btn{background:none;border:none;color:var(--ink-4);cursor:pointer;padding:6px;transition:color .18s,transform .2s var(--ease-bounce)}.like-btn svg{width:17px;height:17px}.like-btn:hover{color:var(--accent-2);transform:scale(1.2)}.like-btn.active{color:var(--accent-2)}.like-btn.active svg{fill:var(--accent-2)}.player-controls{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;padding:2px 0;width:min(46vw,460px);max-width:460px;margin:0 auto;min-width:0}.control-buttons{display:flex;align-items:center;gap:14px}.ctrl-btn{position:relative;background:none;border:none;color:var(--ink-2);cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;transition:color .18s,transform .15s var(--ease)}.ctrl-btn svg{width:16px;height:16px}.ctrl-btn:hover{color:var(--ink);transform:scale(1.1)}.ctrl-btn:active{transform:scale(.92)}.ctrl-btn.active{color:var(--accent)}.ctrl-btn.active:after{content:"";position:absolute;bottom:-3px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}.play-btn{width:40px;height:40px;border-radius:50%;background:#fff;color:#0b0b0d;box-shadow:0 6px 20px #0006;transition:transform .22s var(--ease-bounce),background .2s,box-shadow .25s}.play-btn svg{width:18px;height:18px;color:#0b0b0d;transition:color .2s}.play-btn:hover{transform:scale(1.08);background:var(--accent);box-shadow:var(--sh-accent)}.play-btn:hover svg{color:#fff}.play-btn:active{transform:scale(.96)}.progress-wrap{display:flex;align-items:center;gap:10px;width:100%;min-width:0}.time{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ink-3);min-width:34px;flex-shrink:0;text-align:center}.progress{flex:1;height:4px;background:var(--surface-3);border-radius:999px;position:relative;cursor:pointer;transition:height .15s}.progress:hover{height:6px}.progress-fill{height:100%;background:var(--ink-2);border-radius:999px;width:0;transition:width .1s linear,background .2s;position:relative}.progress:hover .progress-fill{background:var(--accent);box-shadow:0 0 12px #ff6a2b80}.progress-handle{position:absolute;top:50%;left:0;transform:translate(-50%,-50%) scale(0);width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 6px #00000080;transition:transform .18s var(--ease-bounce);pointer-events:none}.progress:hover .progress-handle{transform:translate(-50%,-50%) scale(1)}.player-extras{display:flex;align-items:center;justify-content:flex-end;gap:10px}.player-loading{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#0c0c0ec7;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}.player-loading.active{opacity:1;visibility:visible;pointer-events:auto}.player-loading-inner{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:13px;font-weight:500;padding:0 16px;text-align:center}.spinner-sm{width:22px;height:22px;border-width:2px;flex-shrink:0}.player.is-loading .ctrl-btn:not(#playBtn){opacity:.45;pointer-events:none}.now-playing{position:fixed;inset:0;z-index:300;pointer-events:none;visibility:hidden}.now-playing.open{pointer-events:auto;visibility:visible}.now-playing-backdrop{position:absolute;inset:0;background:#0000008c;opacity:0;transition:opacity .28s ease}.now-playing.open .now-playing-backdrop{opacity:1}.now-playing-sheet{position:absolute;left:0;right:0;bottom:0;max-height:92vh;padding:8px 20px calc(20px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:#0e0e11f5;backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);border:1px solid var(--line);border-bottom:none;box-shadow:0 -20px 60px #00000080;transform:translateY(105%);transition:transform .34s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;align-items:center;gap:18px;touch-action:pan-y}.now-playing.open .now-playing-sheet{transform:translateY(0)}body.now-playing-open{overflow:hidden;touch-action:none}.now-playing-grab{width:36px;height:4px;border-radius:999px;background:#ffffff2e;margin:4px auto 0}.now-playing-close{position:absolute;top:14px;right:16px;width:40px;height:40px;border:none;border-radius:50%;background:var(--surface-2);color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer}.now-playing-close svg{width:20px;height:20px}.now-playing-art{position:relative;width:min(72vw,280px);aspect-ratio:1;margin-top:8px;touch-action:pan-y}.now-playing-art img{width:100%;height:100%;border-radius:20px;object-fit:cover;box-shadow:var(--sh-xl),0 0 0 1px #ffffff0f}.now-playing-art.swipe-left img{animation:npSwipeLeft .22s ease}.now-playing-art.swipe-right img{animation:npSwipeRight .22s ease}@keyframes npSwipeLeft{0%{transform:translate(0);opacity:1}50%{transform:translate(-18px);opacity:.5}to{transform:translate(0);opacity:1}}@keyframes npSwipeRight{0%{transform:translate(0);opacity:1}50%{transform:translate(18px);opacity:.5}to{transform:translate(0);opacity:1}}.now-playing-swipe-hint{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-size:11px;color:var(--ink-4);letter-spacing:.02em}.now-playing-meta{text-align:center;width:100%;padding:0 8px;margin-top:10px}.now-playing-title{font-size:clamp(20px,5.5vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-artist{font-size:15px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-progress{display:flex;align-items:center;gap:12px;width:100%;padding:0 4px}.now-playing-progress .progress{height:6px}.now-playing-progress .progress-handle{transform:translate(-50%,-50%) scale(1)}.now-playing-controls{display:flex;align-items:center;justify-content:center;gap:36px;width:100%;padding:8px 0 4px}.np-btn{width:56px;height:56px;border:none;border-radius:50%;background:var(--surface-2);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s var(--ease),background .15s;-webkit-tap-highlight-color:transparent}.np-btn svg{width:24px;height:24px}.np-btn:active{transform:scale(.92)}.np-btn.np-play{width:72px;height:72px;background:#fff;color:#0b0b0d;box-shadow:0 8px 28px #00000073}.np-btn.np-play svg{width:30px;height:30px}.now-playing-actions{display:flex;justify-content:center;padding-bottom:4px}.np-like{width:48px;height:48px;border:none;border-radius:50%;background:transparent;color:var(--ink-3);display:flex;align-items:center;justify-content:center}.np-like svg{width:24px;height:24px}.np-like.active{color:var(--accent-2)}.np-like.active svg{fill:var(--accent-2)}@media (min-width: 721px){.now-playing{display:none}}.volume input[type=range]{-webkit-appearance:none;appearance:none;width:90px;height:4px;background:var(--surface-3);border-radius:999px;outline:none;cursor:pointer}.volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink);cursor:pointer;transition:transform .15s,background .15s}.volume input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--accent)}.volume input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:none;cursor:pointer}.toast{position:fixed;bottom:122px;left:50%;transform:translate(-50%) translateY(16px) scale(.97);background:#18181ceb;backdrop-filter:blur(16px);border:1px solid var(--line-2);padding:12px 22px;border-radius:var(--r-pill);font-size:13px;font-weight:550;color:var(--ink);opacity:0;pointer-events:none;transition:all .32s var(--ease-bounce);z-index:1000;box-shadow:var(--sh-xl)}.toast.show{opacity:1;transform:translate(-50%) translateY(0) scale(1)}.page-title{font-family:var(--display);font-size:clamp(26px,3.2vw,36px);font-weight:800;letter-spacing:-.04em;margin:4px 0 6px;color:var(--ink)}.page-sub{color:var(--ink-3);font-size:13px;font-weight:450;margin-bottom:26px}.eq{display:inline-flex;align-items:flex-end;gap:2px;height:13px}.eq span{width:2.5px;background:var(--accent);border-radius:2px;animation:eq .9s ease-in-out infinite}.eq span:nth-child(1){height:50%;animation-delay:-.55s}.eq span:nth-child(2){height:100%;animation-delay:-.38s}.eq span:nth-child(3){height:70%;animation-delay:-.2s}.eq span:nth-child(4){height:90%}@keyframes eq{0%,to{transform:scaleY(.35)}50%{transform:scaleY(1)}}.btn-login{background:var(--grad);color:#fff;border:none;cursor:pointer;font-weight:600;font-size:13px;letter-spacing:-.01em;padding:10px 20px;border-radius:var(--r-pill);box-shadow:var(--sh-accent);transition:transform .2s var(--ease-bounce),box-shadow .25s}.btn-login:hover{transform:translateY(-1px);box-shadow:var(--glow)}.btn-login:active{transform:scale(.96)}.btn-join{background:var(--grad);color:#fff;border:none;cursor:pointer;font-weight:700;font-size:13px;letter-spacing:-.01em;padding:10px 18px;border-radius:var(--r-pill);box-shadow:var(--sh-accent);transition:transform .2s var(--ease-bounce),box-shadow .25s;white-space:nowrap;animation:joinPulse 3.2s ease-in-out infinite}.btn-join:hover{transform:translateY(-1px);box-shadow:var(--glow);animation:none}.btn-join:active{transform:scale(.96)}@keyframes joinPulse{0%,to{box-shadow:var(--sh-accent)}50%{box-shadow:0 0 28px #ff6a2b8c}}.btn-login{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);box-shadow:none}.btn-login:hover{box-shadow:none;background:#ffffff1f}.profile-wrap{position:relative}.profile-menu{position:absolute;top:calc(100% + 10px);right:0;width:280px;background:#16161aeb;backdrop-filter:blur(24px);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:16px;opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;transition:all .22s var(--ease-bounce);box-shadow:var(--sh-xl);z-index:200}.profile-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.profile-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}.avatar-lg{width:48px;height:48px;font-size:18px}.profile-name{font-weight:700;font-size:15px;letter-spacing:-.02em;margin-bottom:2px}.profile-status{font-size:12px;color:var(--ink-3)}.profile-divider{height:1px;background:var(--line);margin:12px 0}.profile-item{width:100%;background:none;border:none;color:var(--ink-2);font-size:13.5px;font-weight:500;padding:10px 12px;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:12px;transition:background .15s,color .15s}.profile-item:hover{background:var(--surface-2);color:var(--ink)}.profile-item svg{width:16px;height:16px}.modal-overlay{position:fixed;inset:0;background:#050507b3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:500;padding:24px;opacity:0;pointer-events:none;transition:opacity .28s var(--ease)}.modal-overlay.open{opacity:1;pointer-events:auto}.modal{background:#141418f2;backdrop-filter:blur(30px);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:36px;width:100%;max-width:440px;position:relative;box-shadow:var(--sh-xl),inset 0 1px #ffffff0f;transform:scale(.95) translateY(18px);transition:transform .34s var(--ease-bounce);max-height:calc(100vh - 48px);overflow-y:auto}.modal-overlay.open .modal{transform:scale(1) translateY(0)}.modal-close{position:absolute;top:18px;right:18px;width:32px;height:32px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease)}.modal-close svg{width:14px;height:14px}.modal-close:hover{background:var(--surface-3);color:var(--ink);transform:rotate(90deg)}.auth-hero{text-align:center;margin-bottom:26px}.auth-hero .logo-icon{margin:0 auto 16px}.auth-hero h2{font-weight:800;font-size:25px;letter-spacing:-.035em;margin-bottom:7px}.auth-hero p{color:var(--ink-3);font-size:13.5px;line-height:1.55}.auth-tabs{position:relative;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;margin-bottom:24px}.auth-tab{flex:1;background:none;border:none;color:var(--ink-3);font-weight:600;font-size:13px;padding:10px 16px;border-radius:var(--r-pill);cursor:pointer;transition:color .2s;position:relative;z-index:2}.auth-tab.active{color:#fff}.tab-indicator{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);background:var(--grad);border-radius:var(--r-pill);transition:transform .32s var(--ease-bounce);z-index:1;box-shadow:var(--sh-accent)}.auth-tabs[data-active=register] .tab-indicator{transform:translate(100%)}.auth-form{display:flex;flex-direction:column;gap:16px}.form-field{display:flex;flex-direction:column;gap:7px}.form-field label{font-size:12px;font-weight:600;color:var(--ink-2)}.form-field input{background:var(--surface);border:1px solid var(--line);color:var(--ink);padding:13px 15px;border-radius:var(--r-md);font-family:var(--sans);font-size:16px;outline:none;transition:all .18s var(--ease)}.form-field input:focus{border-color:#ff6a2b8c;background:var(--surface-2);box-shadow:0 0 0 3px var(--accent-soft)}.form-field input::placeholder{color:var(--ink-4)}.pwd-wrap{position:relative}.pwd-wrap input{width:100%;padding-right:44px}.pwd-toggle{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:none;border:none;color:var(--ink-3);cursor:pointer;padding:4px}.pwd-toggle svg{width:17px;height:17px}.pwd-toggle:hover{color:var(--ink)}.form-error{color:#ff7a64;font-size:13px;padding:11px 14px;background:#ff4d4014;border:1px solid rgba(255,77,64,.25);border-radius:var(--r-md);display:none}.form-error.show{display:block}.btn-block{width:100%;justify-content:center;padding:14px;font-size:14.5px}.auth-footer{text-align:center;margin-top:8px;font-size:13px;color:var(--ink-3)}.auth-footer a{color:var(--accent-up);font-weight:600;text-decoration:none;margin-left:6px}.auth-footer a:hover{text-decoration:underline}.settings-modal{max-width:580px}.modal-title{font-weight:800;font-size:25px;letter-spacing:-.035em;margin-bottom:6px}.modal-sub{color:var(--ink-3);font-size:13.5px;margin-bottom:24px}.settings-list{display:flex;flex-direction:column;gap:4px;margin-bottom:24px}.setting-row{display:flex;align-items:center;gap:20px;padding:15px 16px;border-radius:var(--r-md);transition:background .15s}.setting-row:hover{background:var(--surface)}.setting-info{flex:1}.setting-name{font-weight:600;font-size:14px;margin-bottom:4px;display:flex;align-items:center;gap:9px;letter-spacing:-.01em}.setting-desc{font-size:12.5px;color:var(--ink-3);line-height:1.5}.switch{position:relative;display:inline-block;width:44px;height:26px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:var(--surface-3);border:1px solid var(--line);border-radius:999px;transition:all .25s var(--ease)}.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .28s var(--ease-bounce);box-shadow:0 1px 4px #0006}.switch input:checked+.slider{background:var(--accent);border-color:var(--accent);box-shadow:0 0 14px #ff6a2b66}.switch input:checked+.slider:before{transform:translate(18px)}.settings-footer{display:flex;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid var(--line)}.setting-info code{background:var(--surface-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-family:var(--mono);font-size:11px;color:var(--ink-2)}.provider-unconfigured{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:56px;text-align:center;margin:24px 0}.provider-unconfigured h3{font-weight:700;font-size:21px;margin-bottom:8px;letter-spacing:-.025em}.provider-unconfigured p{color:var(--ink-3);font-size:13.5px;max-width:460px;margin:0 auto 20px;line-height:1.55}.welcome-view{position:relative;width:100%;margin:0;padding:calc(32px + var(--safe-top)) calc(24px + var(--safe-right)) 48px calc(24px + var(--safe-left));min-height:calc(100dvh - var(--player-h));overflow-x:hidden;overflow-y:auto;background:#07070a;display:flex;align-items:center;justify-content:center}body.guest-mode .ambient{display:none}body.guest-mode .welcome-view{min-height:calc(100dvh - var(--player-h))}.welcome-view:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,106,43,.16) 0%,rgba(255,106,43,.05) 14%,transparent 42%),linear-gradient(118deg,transparent 38%,rgba(124,77,255,.07) 58%,transparent 78%),linear-gradient(248deg,transparent 55%,rgba(255,77,109,.05) 72%,transparent 88%);pointer-events:none;animation:welcomeAurora 14s ease-in-out infinite alternate}@keyframes welcomeAurora{0%{opacity:.75;filter:hue-rotate(0deg)}to{opacity:1;filter:hue-rotate(8deg)}}.welcome-view:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 45%,transparent 85%);mask-image:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.15) 45%,transparent 85%);pointer-events:none}.welcome-shell{position:relative;z-index:1;width:100%;max-width:960px;margin:0 auto;padding:24px 0 32px;text-align:center;color:#fff}.welcome-shell>*{animation:waveRise .7s cubic-bezier(.22,1,.36,1) backwards}.welcome-shell>:nth-child(2){animation-delay:.08s}.welcome-shell>:nth-child(3){animation-delay:.16s}.welcome-shell>:nth-child(4){animation-delay:.24s}.welcome-shell>:nth-child(5){animation-delay:.3s}.welcome-shell>:nth-child(6){animation-delay:.4s}.welcome-shell>:nth-child(7){animation-delay:.48s}.welcome-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--ink-2);margin-bottom:18px;padding:6px 14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-pill);backdrop-filter:blur(12px)}.welcome-title{font-size:clamp(38px,6vw,76px);font-weight:900;line-height:1.02;letter-spacing:-.045em;margin-bottom:16px}.welcome-title span{background:linear-gradient(115deg,#ff6a2b 10%,#ffb38f,#ff6a2b 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;animation:titleShimmer 5s ease-in-out infinite}@keyframes titleShimmer{0%,to{background-position:0% 0}50%{background-position:100% 0}}.welcome-sub{color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:540px;margin:0 auto 34px}.vibe-explorer-shell{max-width:1080px}.vibe-explorer-head{text-align:center;margin-bottom:26px}.vibe-explorer-head .welcome-title{margin-bottom:12px}.vibe-explorer-head .welcome-sub{margin-bottom:0}.vibe-explorer{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;width:100%;max-width:100%;margin:0 auto 24px;align-items:stretch;text-align:left}.vibe-preview,.vibe-menu{min-width:0}.vibe-preview{position:relative;min-height:460px;border-radius:28px;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(22px,3vw,34px);box-shadow:0 30px 70px -34px #000000e6;background:#0c0c12}.vibe-preview-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 80% at 78% -8%,color-mix(in srgb,var(--v1) 70%,transparent),transparent 58%),linear-gradient(155deg,var(--g1, var(--v1)) -10%,var(--g2, #0a0a12) 82%);animation:vibePreviewIn .5s ease}.vibe-preview-glow{position:absolute;inset:0;z-index:1;background:radial-gradient(80% 55% at 75% 6%,color-mix(in srgb,var(--v1) 65%,white),transparent 55%);opacity:.5;mix-blend-mode:screen;pointer-events:none}.vibe-preview:after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(195deg,transparent 36%,rgba(0,0,0,.62) 100%);pointer-events:none}.vibe-preview-cutout{position:absolute;z-index:3;right:clamp(-6%,-1vw,0%);bottom:-1%;height:102%;width:auto;max-width:74%;object-fit:contain;object-position:bottom right;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 99%);mask-image:linear-gradient(180deg,#000 80%,transparent 99%);filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));animation:vibeCutoutIn .55s var(--ease-bounce);pointer-events:none}.vibe-preview-emoji{position:absolute;z-index:3;top:clamp(22px,3vw,34px);right:clamp(22px,3vw,34px);width:76px;height:76px;display:flex;align-items:center;justify-content:center;font-size:40px;line-height:1;border-radius:22px;background:#00000047;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px #ffffff24;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:vibeCutoutIn .5s var(--ease-bounce)}.vibe-preview-body{position:relative;z-index:4}.vibe-preview-body>*{animation:vibeTextIn .45s ease backwards}.vibe-preview-body>:nth-child(2){animation-delay:.05s}.vibe-preview-body>:nth-child(3){animation-delay:.1s}.vibe-preview-body>:nth-child(4){animation-delay:.16s}.vibe-preview-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#ffffffbf;margin-bottom:8px}.vibe-preview-title{font-size:clamp(34px,4.6vw,56px);font-weight:900;letter-spacing:-.035em;line-height:.98;margin-bottom:8px;overflow-wrap:anywhere;text-shadow:0 4px 24px rgba(0,0,0,.4)}.vibe-preview-chip{font-size:clamp(14px,1.4vw,17px);font-weight:600;color:#ffffffd9;margin-bottom:20px;text-shadow:0 2px 12px rgba(0,0,0,.5)}.vibe-preview-play{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border:none;border-radius:var(--r-pill);background:#fff;color:#0a0a0f;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 14px 34px -14px #000000b3;transition:transform .2s var(--ease-bounce),box-shadow .2s ease}.vibe-preview-play svg{width:17px;height:17px}.vibe-preview-play:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 18px 40px -14px #000c}.vibe-preview-play:active{transform:scale(.97)}@keyframes vibePreviewIn{0%{opacity:.35}to{opacity:1}}@keyframes vibeCutoutIn{0%{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}@keyframes vibeTextIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.vibe-menu{display:flex;flex-direction:column;gap:9px}.vibe-row{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:14px;width:100%;min-height:62px;padding:11px 16px;border-radius:14px;cursor:pointer;color:#fff;text-align:left;background:radial-gradient(140% 120% at 100% 50%,color-mix(in srgb,var(--v1) 14%,transparent),transparent 60%),#ffffff09;border:1px solid color-mix(in srgb,var(--v1) 14%,rgba(255,255,255,.06));transition:transform .22s var(--ease-bounce),background .22s ease,border-color .22s ease,box-shadow .22s ease;animation:waveRise .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(.06s + var(--i) * 35ms)}.vibe-row-emoji{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:13px;font-size:23px;line-height:1;background:linear-gradient(150deg,color-mix(in srgb,var(--v1) 55%,transparent),color-mix(in srgb,var(--v2) 38%,rgba(0,0,0,.3)));border:1px solid color-mix(in srgb,var(--v1) 40%,rgba(255,255,255,.1));box-shadow:inset 0 1px #ffffff1f,0 5px 14px -6px color-mix(in srgb,var(--v1) 70%,transparent);transition:transform .24s var(--ease-bounce)}.vibe-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.vibe-row-label{font-size:15.5px;font-weight:700;letter-spacing:-.015em}.vibe-row-chip{font-size:12px;font-weight:500;color:#ffffff9e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vibe-row-arrow{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;background:color-mix(in srgb,var(--v1) 55%,transparent);border:1px solid color-mix(in srgb,var(--v1) 40%,rgba(255,255,255,.15));box-shadow:0 6px 16px -6px color-mix(in srgb,var(--v1) 80%,transparent);opacity:0;transform:scale(.55) translate(-6px);transition:opacity .22s ease,transform .22s var(--ease-bounce)}.vibe-row-arrow svg{width:13px;height:13px;margin-left:1px}.vibe-row:hover,.vibe-row:focus-visible,.vibe-row.active{background:radial-gradient(150% 130% at 100% 50%,color-mix(in srgb,var(--v1) 42%,transparent),transparent 60%),linear-gradient(90deg,color-mix(in srgb,var(--v1) 30%,rgba(22,22,28,.4)),#14141a26);border-color:color-mix(in srgb,var(--v1) 55%,transparent);transform:translate(5px);box-shadow:0 12px 30px -18px color-mix(in srgb,var(--v1) 85%,transparent)}.vibe-row:hover .vibe-row-emoji,.vibe-row.active .vibe-row-emoji{transform:scale(1.08) rotate(-3deg)}.vibe-row:hover .vibe-row-arrow,.vibe-row:focus-visible .vibe-row-arrow,.vibe-row.active .vibe-row-arrow{opacity:1;transform:scale(1)}.vibe-row.active{border-color:color-mix(in srgb,var(--v1) 65%,white);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v1) 45%,transparent),0 14px 32px -18px color-mix(in srgb,var(--v1) 90%,transparent)}@media (max-width: 820px){.vibe-explorer{grid-template-columns:1fr;gap:16px}.vibe-preview{min-height:300px}.vibe-menu{max-height:none;overflow:visible;padding-right:0}}@media (min-width: 821px){.vibe-explorer-view{height:calc(100dvh - var(--player-h));min-height:0;overflow:hidden;padding-top:calc(16px + var(--safe-top));padding-bottom:18px}.vibe-explorer-shell{display:flex;flex-direction:column;justify-content:center;height:100%;max-height:100%;padding:0}.vibe-explorer-head{flex:none;margin-bottom:clamp(10px,2vh,18px)}.vibe-explorer-head .welcome-eyebrow{margin-bottom:clamp(6px,1.4vh,14px)}.vibe-explorer-head .welcome-title{font-size:clamp(30px,3.6vw,48px);margin-bottom:6px}.vibe-explorer-head .welcome-sub{font-size:13.5px;margin:0 auto}.vibe-explorer{flex:1;min-height:0;margin-bottom:0;gap:18px}.vibe-menu{height:100%;gap:clamp(5px,.9vh,9px)}.vibe-row{flex:1 1 0;min-height:0;padding:clamp(6px,1vh,12px) 15px}.vibe-row-emoji{width:clamp(34px,4.4vh,46px);height:clamp(34px,4.4vh,46px);font-size:clamp(18px,2.4vh,23px)}.vibe-preview{min-height:0}}.welcome-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px}.welcome-join{padding:15px 30px!important;font-size:15px!important;animation:joinPulse 3.2s ease-in-out infinite}.welcome-note{margin-top:16px;font-size:12px;color:var(--ink-3)}.welcome-login-link{background:none;border:none;padding:0;color:var(--accent-up);font-size:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.welcome-login-link:hover{color:var(--accent)}@media (max-width: 720px){.welcome-view{padding:calc(8px + var(--safe-top)) calc(16px + var(--safe-right)) 24px calc(16px + var(--safe-left))}body.guest-mode .welcome-view{min-height:calc(100dvh - var(--player-h))}.welcome-shell{padding:2px 0 12px}.welcome-sub{font-size:14px}.vibe-explorer-head{margin-bottom:12px}.vibe-preview{min-height:260px;border-radius:22px}.vibe-preview-emoji{width:60px;height:60px;font-size:32px;border-radius:18px}.vibe-row{padding:10px 12px}.vibe-row-arrow{opacity:0;transform:scale(.6)}.vibe-row.active .vibe-row-arrow{opacity:1;transform:scale(1)}.welcome-join{width:100%;justify-content:center}.btn-join{font-size:11px;padding:8px 12px}}@keyframes waveVortex{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes waveRise{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes wpSpin{to{transform:rotate(360deg)}}@keyframes wpRipple{0%{transform:scale(.55);opacity:0}12%{opacity:.85}to{transform:scale(1.28);opacity:0}}@keyframes wpBreath{0%,to{transform:scale(1)}50%{transform:scale(1.055)}}@keyframes wpEq{0%,to{transform:scaleY(.28)}50%{transform:scaleY(1)}}.wave-now{position:relative;display:grid;grid-template-columns:minmax(250px,330px) 1fr;gap:52px;align-items:center;padding:22px 0 14px;animation:waveRise .7s cubic-bezier(.22,1,.36,1) backwards}@keyframes wdRipple{0%{transform:scale(.92);opacity:0}14%{opacity:.7}to{transform:scale(1.32);opacity:0}}@keyframes wdSpin{to{transform:rotate(360deg)}}.vibe-transition{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;overflow:hidden;opacity:0;background:#07070a;transition:opacity .5s var(--ease),transform .6s var(--ease);--g1: #ff6a2b;--g2: #7c4dff}.vibe-transition.is-in{opacity:1;animation:vtIn .6s var(--ease-out) backwards}.vibe-transition.is-out{opacity:0;transform:scale(1.08);pointer-events:none}@keyframes vtIn{0%{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}.vt-bg{position:absolute;inset:-20%;background:radial-gradient(40% 50% at 50% 42%,color-mix(in srgb,var(--g1) 75%,transparent),transparent 70%),radial-gradient(60% 60% at 78% 80%,color-mix(in srgb,var(--g2) 55%,transparent),transparent 72%),radial-gradient(50% 50% at 18% 24%,color-mix(in srgb,var(--g1) 40%,transparent),transparent 70%),linear-gradient(160deg,#0c0b10,#07070a 60%);filter:blur(8px) saturate(1.2);animation:vtDrift 6s ease-in-out infinite alternate}@keyframes vtDrift{0%{transform:scale(1) translate(0)}to{transform:scale(1.12) translate(-2%,-2%)}}.vt-rings{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.vt-rings span{position:absolute;top:50%;left:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--g1) 70%,#fff 10%);opacity:0;animation:vtRing 2.6s var(--ease-out) infinite}.vt-rings span:nth-child(2){animation-delay:.7s}.vt-rings span:nth-child(3){animation-delay:1.4s}@keyframes vtRing{0%{opacity:.55;transform:scale(.4)}80%{opacity:0}to{opacity:0;transform:scale(2.4)}}.vt-core{position:relative;z-index:1;width:132px;height:132px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--g1) 85%,#fff 5%),color-mix(in srgb,var(--g2) 80%,#000 5%));box-shadow:0 0 0 1px #ffffff24,0 20px 60px -10px color-mix(in srgb,var(--g1) 60%,transparent),inset 0 2px 10px #ffffff40;animation:vtPulse 1.5s ease-in-out infinite,vtCoreIn .7s var(--ease-bounce) backwards}@keyframes vtCoreIn{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes vtPulse{0%,to{box-shadow:0 0 0 1px #ffffff24,0 18px 50px -12px color-mix(in srgb,var(--g1) 55%,transparent),inset 0 2px 10px #ffffff40;transform:scale(1)}50%{box-shadow:0 0 0 1px #fff3,0 26px 80px -8px color-mix(in srgb,var(--g1) 80%,transparent),inset 0 2px 12px #ffffff59;transform:scale(1.06)}}.vt-emoji{font-size:58px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));animation:vtSpinPop 3s var(--ease) infinite}@keyframes vtSpinPop{0%,to{transform:rotate(0) scale(1)}50%{transform:rotate(8deg) scale(1.12)}}.vt-text{position:relative;z-index:1;text-align:center}.vt-eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--g1) 35%,#fff 65%);margin-bottom:8px;animation:vtFadeUp .6s var(--ease-out) .25s backwards}.vt-title{font-family:var(--display, var(--sans));font-size:clamp(34px,6vw,60px);font-weight:900;letter-spacing:-.03em;line-height:1;background:linear-gradient(120deg,#fff 20%,color-mix(in srgb,var(--g1) 60%,#fff) 60%,#fff 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:vtFadeUp .7s var(--ease-out) .35s backwards}@keyframes vtFadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.vt-eq{display:flex;align-items:flex-end;justify-content:center;gap:5px;height:30px;margin-top:18px}.vt-eq span{width:5px;border-radius:3px;background:linear-gradient(180deg,color-mix(in srgb,var(--g1) 80%,#fff 10%),var(--g2));animation:vtEq .9s ease-in-out infinite}.vt-eq span:nth-child(1){animation-delay:-.1s}.vt-eq span:nth-child(2){animation-delay:-.5s}.vt-eq span:nth-child(3){animation-delay:-.2s}.vt-eq span:nth-child(4){animation-delay:-.7s}.vt-eq span:nth-child(5){animation-delay:-.3s}.vt-eq span:nth-child(6){animation-delay:-.6s}.vt-eq span:nth-child(7){animation-delay:-.15s}@keyframes vtEq{0%,to{height:8px}50%{height:30px}}.vt-progress{position:absolute;left:50%;bottom:clamp(48px,12vh,110px);transform:translate(-50%);width:min(260px,60vw);height:4px;border-radius:4px;background:#ffffff1f;overflow:hidden;z-index:1}.vt-progress span{display:block;height:100%;width:100%;border-radius:4px;background:linear-gradient(90deg,var(--g1),var(--g2));transform-origin:left;animation:vtBar 3s var(--ease) forwards}@keyframes vtBar{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (prefers-reduced-motion: reduce){.vibe-transition .vt-bg,.vibe-transition .vt-rings span,.vibe-transition .vt-core,.vibe-transition .vt-emoji,.vibe-transition .vt-eq span,.vibe-transition .vt-progress span{animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (max-width: 1280px){.content{padding:24px 26px 60px}.topbar{padding:calc(14px + var(--safe-top)) calc(26px + var(--safe-right)) 14px calc(26px + var(--safe-left))}}@media (max-width: 1200px){.grid{grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:16px}.track-row,.list-header{grid-template-columns:40px 52px 1fr 64px auto}.track-row>.track-album,.list-header>:nth-child(4){display:none}.hero{padding:clamp(24px,3vw,34px) 22px}}@media (max-width: 960px){body{grid-template-columns:1fr;grid-template-areas:"main" "player"}.sidebar{position:fixed;top:0;left:0;bottom:0;width:min(300px,84vw);z-index:100;background:#0d0d10f7;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-right:1px solid var(--line-2);transform:translate(-105%);transition:transform .34s var(--ease-out);box-shadow:var(--sh-xl);padding:calc(24px + var(--safe-top)) calc(18px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(18px + var(--safe-left))}.sidebar.open{transform:translate(0)}.sidebar-backdrop.open{display:block}body.nav-open{overflow:hidden}.nav-item.active:after{left:-18px}.menu-btn{display:flex;pointer-events:auto}.nav-arrows{display:none}.topbar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:none;pointer-events:none}.main:has(.welcome-view) .topbar{position:absolute;top:0;left:0;right:0}.wave-now{grid-template-columns:1fr;gap:26px;text-align:center}.chart-grid{grid-template-columns:1fr;gap:2px}}@media (max-width: 720px){:root{--player-h: calc(160px + var(--safe-bottom))}body:not(.no-player){grid-template-rows:1fr 0}body:not(.no-player) .main{padding-bottom:var(--player-h)}#pageSearch{font-size:16px}.topbar{padding:calc(12px + var(--safe-top)) calc(16px + var(--safe-right)) 12px calc(16px + var(--safe-left));gap:10px}.main{-webkit-overflow-scrolling:touch}.content{padding:22px 16px 28px}.welcome-view{min-height:calc(100dvh - var(--player-h));overflow-x:hidden;overflow-y:auto;align-items:flex-start;padding:calc(8px + var(--safe-top)) calc(16px + var(--safe-right)) 24px calc(16px + var(--safe-left));-webkit-overflow-scrolling:touch}.welcome-shell{padding:2px 0 12px}body.guest-mode .content{min-height:calc(100dvh - var(--player-h));padding-bottom:0}body.guest-mode .welcome-view{min-height:calc(100dvh - var(--player-h))}.hero{padding:26px 18px 24px;margin-bottom:28px;border-radius:var(--r-lg)}.hero h1{font-size:clamp(24px,7vw,32px)}.hero p{font-size:13px}.hero:before{width:300px;height:300px;top:-150px}.hero-inner{max-width:100%}.hero-actions .btn-primary{padding:12px 22px;font-size:14px}.section{margin-bottom:44px}.section-title{font-size:19px}.grid{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:13px}.card{padding:11px}.genre-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.genre-card{height:110px;font-size:17px;padding:16px}.page-title{font-size:28px}.page-sub{margin-bottom:26px}.player{position:fixed;left:0;right:0;bottom:0;width:100%;max-width:none;margin:0;z-index:120;display:grid;grid-template-areas:"track track track" "progress progress progress" "controls controls controls";grid-template-rows:auto auto auto;gap:9px;padding:12px 16px;padding-bottom:max(12px,var(--safe-bottom));border:none;border-top:1px solid rgba(255,255,255,.1);border-radius:20px 20px 0 0;background:linear-gradient(180deg,#211f28f0,#0e0e12f7);backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);box-shadow:0 -14px 44px -8px #000000b3,inset 0 1px #ffffff12}.player:before{display:block;left:28%;right:28%;top:0;background:linear-gradient(90deg,transparent,rgba(255,106,43,.5),transparent)}.player-track{grid-area:track;width:100%;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0;gap:10px}.player-track:after{content:"";width:22px;height:22px;margin-left:2px;flex-shrink:0;opacity:.55;background:center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23717179' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.player-info{flex:1;min-width:0}.like-btn{flex-shrink:0;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center}.like-btn svg{width:18px;height:18px}.player-controls{display:contents}.progress-wrap{grid-area:progress;max-width:none;padding:0 2px;gap:8px}.control-buttons{grid-area:controls;justify-content:center;gap:28px;padding:0 0 2px}.player-extras{display:none}#playerCover{width:44px;height:44px;border-radius:9px}.player-title{font-size:13.5px;margin-bottom:2px}.player-artist{font-size:11.5px}#shuffleBtn,#repeatBtn{display:none}.ctrl-btn:not(.play-btn){width:40px;height:40px;padding:0;border-radius:50%;background:#ffffff0d}.ctrl-btn:not(.play-btn) svg{width:19px;height:19px}.play-btn{width:46px;height:46px}.play-btn svg{width:19px;height:19px}.progress{height:3px}.time{font-size:10px;min-width:30px}.track-row,.list-header{grid-template-columns:30px 1fr auto;gap:12px}.track-row>.track-cover{display:none}.track-row>.track-album,.track-row>.track-duration,.list-header>:nth-child(2),.list-header>:nth-child(4),.list-header>:nth-child(5){display:none}.featured-strip{grid-template-columns:minmax(0,1fr)}.wave-now{gap:20px;padding-top:12px}.modal{padding:26px 22px;border-radius:var(--r-lg)}.toast{bottom:calc(var(--player-h) + 8px);max-width:calc(100vw - 32px);text-align:center}}@media (max-width: 400px){.content{padding:18px 12px 48px}.grid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:11px}.hero h1{font-size:26px}.page-title{font-size:25px}.section-title{font-size:17px}.hero-actions .btn{padding:11px 18px;font-size:13px}}@media (hover: none){.card-play{opacity:1;transform:translateY(0) scale(1)}.card:hover{transform:none}.progress{height:8px}.progress-handle{transform:translate(-50%,-50%) scale(1)}.player-track:active{opacity:.85}.vibe-row.active .vibe-row-arrow{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.content:has(>.vibe-stage){padding:0;max-width:none}body.vibe-immersive{--player-h: 0px}body.vibe-immersive .player,body.vibe-immersive .topbar{display:none!important}body.vibe-immersive .main,body.vibe-immersive .content{height:100%;min-height:0!important;max-height:100%;overflow:hidden!important;padding:0!important}body.vibe-immersive .vibe-stage{height:100%}.vibe-stage{position:relative;width:100%;height:calc(100dvh - var(--player-h));overflow:hidden;display:flex;isolation:isolate;--g1: #e11d2a;--g2: #1a0406;background:var(--g2);animation:vibeStageIn .6s cubic-bezier(.22,1,.36,1)}@keyframes vibeStageIn{0%{opacity:0}to{opacity:1}}.vibe-stage-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 50% 18%,color-mix(in srgb,var(--g1) 78%,transparent) 0%,transparent 60%),radial-gradient(100% 120% at 50% 120%,color-mix(in srgb,var(--g1) 45%,transparent) 0%,transparent 55%),linear-gradient(180deg,color-mix(in srgb,var(--g1) 30%,var(--g2)) 0%,var(--g2) 70%)}.vibe-stage-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 40%,transparent 40%,rgba(0,0,0,.45) 100%)}.vibe-stage-grain{position:absolute;inset:0;z-index:1;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.vibe-cutout-wrap{position:absolute;z-index:2;left:50%;bottom:0;transform:translate(-50%);height:102%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}.vibe-cutout{height:100%;width:auto;max-width:100vw;object-fit:contain;object-position:bottom center;filter:none;animation:vibeCutoutIn .8s cubic-bezier(.22,1,.36,1);-webkit-mask-image:linear-gradient(to bottom,#000 48%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.12) 88%,transparent 97%);mask-image:linear-gradient(to bottom,#000 48%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.12) 88%,transparent 97%)}@keyframes vibeCutoutIn{0%{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.vibe-cutout-fallback,.vibe-stage.no-cutout .vibe-cutout{display:none}.vibe-stage.no-cutout .vibe-cutout-fallback{display:grid;place-items:center;width:min(46vw,360px);aspect-ratio:1;margin-bottom:8%;border-radius:50%;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--g1) 60%,transparent),transparent 70%)}.vibe-stage.no-cutout .vibe-cutout-fallback span{font-size:clamp(80px,22vw,200px);filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}.vibe-overlay{position:relative;z-index:3;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(clamp(14px,2.5vh,26px) + env(safe-area-inset-top));padding-right:calc(clamp(16px,4vw,56px) + env(safe-area-inset-right));padding-bottom:calc(clamp(16px,3vh,32px) + env(safe-area-inset-bottom));padding-left:calc(clamp(16px,4vw,56px) + env(safe-area-inset-left));pointer-events:none}.vibe-overlay>*{pointer-events:auto}.vibe-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex:none}.vibe-stack{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(10px,2vh,22px);width:100%}.vibe-back{display:inline-flex;align-items:center;gap:6px;padding:9px 16px 9px 11px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:#00000047;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;font:600 13px/1 var(--font, inherit);white-space:nowrap;cursor:pointer;transition:background .2s,transform .2s}.vibe-back svg{width:16px;height:16px}.vibe-back:hover{background:#00000073;transform:translate(-2px)}.vibe-tools{display:flex;align-items:center;gap:10px;padding:7px;border-radius:999px;background:#00000047;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.vibe-volume{display:none;width:104px;height:6px;margin:0 6px 0 2px;-webkit-appearance:none;appearance:none;background:#ffffff47;border-radius:999px;outline:none;cursor:pointer;accent-color:#fff}.vibe-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0006;cursor:pointer}.vibe-volume::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;background:#fff;box-shadow:0 2px 8px #0006;cursor:pointer}@media (min-width: 921px){.vibe-volume{display:inline-block}}.vibe-top{text-align:center;margin-top:0;display:flex;flex-direction:column;align-items:center;gap:14px}.vibe-headline{margin:0;max-width:14ch;color:#fff;font-weight:800;font-size:clamp(34px,6.2vw,72px);line-height:1.02;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,0,0,.55)}.vibe-bottom{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,18px);width:100%}.vibe-side-btn{flex:none;width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:#ffffff12;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#ffffffeb;cursor:pointer;transition:background .2s,transform .15s,color .2s}.vibe-side-btn svg{width:20px;height:20px}.vibe-side-btn:hover{background:#ffffff29;transform:scale(1.06)}.vibe-side-btn.active{color:#fff;background:color-mix(in srgb,var(--g1) 70%,transparent);border-color:transparent}.vibe-like.active{color:#f57;background:#ff4d6d2e;border-color:#ff4d6d66}.vibe-like.active svg{fill:#f57;stroke:#f57}.vibe-pill{display:block;box-sizing:border-box;min-width:160px;max-width:min(560px,88vw);height:52px;line-height:52px;padding:0 30px;border-radius:999px;background:#ffffff1f;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#fff;font-weight:800;font-size:clamp(17px,2.1vw,22px);letter-spacing:.3px;text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vibe-progress{display:flex;align-items:center;gap:16px;width:min(720px,94%)}.vibe-time{flex:none;min-width:50px;color:#ffffffeb;font-variant-numeric:tabular-nums;font-size:clamp(15px,1.8vw,18px);font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.5)}.vibe-time:last-child{text-align:right}.vibe-bar{position:relative;flex:1;height:12px;border-radius:999px;background:#fff3;cursor:pointer;box-shadow:0 2px 12px #00000040}.vibe-bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:999px;background:#fff;box-shadow:0 0 14px #ffffff80}.vibe-bar-handle{position:absolute;top:50%;left:0;width:20px;height:20px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 10px #00000073;opacity:1;transition:transform .12s}.vibe-bar:hover .vibe-bar-handle{transform:translate(-50%,-50%) scale(1.15)}.vibe-transport{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,34px)}.vibe-tr-btn{width:54px;height:54px;display:grid;place-items:center;border:none;border-radius:50%;background:transparent;color:#ffffffe6;cursor:pointer;transition:transform .15s,color .2s}.vibe-tr-btn svg{width:28px;height:28px}.vibe-tr-btn:hover{color:#fff;transform:scale(1.1)}.vibe-play{width:76px;height:76px;background:#fff;color:#111;box-shadow:0 14px 40px #0006}.vibe-play svg{width:34px;height:34px}.vibe-play:hover{background:#fff;color:#000;transform:scale(1.06)}.vibe-ai{display:flex;align-items:center;gap:12px;max-width:min(680px,92%);padding:12px 18px;border-radius:18px;background:#0a0a0c6b;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#ffffffeb;font-size:clamp(13px,1.5vw,15px);line-height:1.45;text-align:left}.vibe-ai-badge{flex:none;display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:10px;background:linear-gradient(135deg,var(--v1, #a855f7),var(--v2, #ec4899));color:#fff;font-weight:800;font-size:12px;letter-spacing:.4px}.vibe-ai-badge svg{width:13px;height:13px}@media (min-width: 921px){.vibe-stage-bg{background:radial-gradient(90% 80% at 72% 42%,color-mix(in srgb,var(--g1) 80%,transparent) 0%,transparent 58%),radial-gradient(120% 100% at 100% 100%,color-mix(in srgb,var(--g1) 42%,transparent) 0%,transparent 55%),linear-gradient(120deg,var(--g2) 0%,color-mix(in srgb,var(--g1) 26%,var(--g2)) 100%)}.vibe-cutout-wrap{left:auto;right:clamp(24px,7vw,160px);transform:none;height:100%;align-items:flex-end}.vibe-cutout{max-width:44vw}.vibe-stack{justify-content:center;align-items:flex-start;max-width:min(560px,52%);gap:clamp(22px,3.4vh,44px);text-align:left}.vibe-top{align-items:flex-start;text-align:left}.vibe-headline{text-align:left;max-width:13ch;font-size:clamp(46px,4.6vw,80px);line-height:1}.vibe-bottom{align-items:flex-start;gap:clamp(16px,2.4vh,28px)}.vibe-pill{margin:0}.vibe-progress{width:100%;max-width:540px}.vibe-transport{justify-content:flex-start;gap:clamp(20px,2vw,30px)}.vibe-ai{text-align:left;max-width:520px}}@media (max-width: 720px){.vibe-overlay{padding-top:calc(12px + env(safe-area-inset-top));padding-right:calc(12px + env(safe-area-inset-right));padding-bottom:calc(16px + env(safe-area-inset-bottom));padding-left:calc(12px + env(safe-area-inset-left))}.vibe-stack{gap:10px}.vibe-top{margin-top:clamp(28px,7vh,64px);gap:8px}.vibe-headline{font-size:clamp(24px,7.5vw,40px);max-width:16ch}.vibe-back{padding:8px 13px 8px 9px;font-size:12px}.vibe-cutout-wrap{height:86%}.vibe-tools{gap:7px;padding:6px}.vibe-side-btn{width:40px;height:40px}.vibe-side-btn svg{width:18px;height:18px}.vibe-pill{height:46px;line-height:46px;min-width:130px;font-size:16px;padding:0 22px}.vibe-progress{gap:12px}.vibe-bar{height:9px}.vibe-time{min-width:42px;font-size:14px}.vibe-play{width:62px;height:62px}.vibe-play svg{width:28px;height:28px}.vibe-tr-btn{width:46px;height:46px}.vibe-ai{padding:9px 13px;font-size:12.5px}.vibe-ai-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}.page-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}.page-head-row .btn{flex-shrink:0}.page-head-row .btn svg{width:18px;height:18px}.empty-sm{padding:36px 20px}.empty-sm .btn{margin-top:18px;display:inline-flex;align-items:center;gap:8px}.empty-sm .btn svg{width:18px;height:18px}.pl-card .card-cover{position:relative}.pl-card-badge{position:absolute;bottom:8px;right:8px;background:#09090bbd;backdrop-filter:blur(8px);color:var(--ink);font-size:11px;font-weight:600;padding:4px 9px;border-radius:var(--r-pill);border:1px solid var(--line)}.track-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px}.track-act{background:none;border:none;color:var(--ink-4);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:8px;transition:color .15s var(--ease),transform .15s var(--ease),background .15s var(--ease)}.track-act svg{width:17px;height:17px}.track-act:hover{color:var(--accent);transform:scale(1.18)}.track-rm:hover{color:var(--accent-2)}.pl-detail-head{display:flex;align-items:flex-end;gap:26px;margin-bottom:30px}.pl-detail-cover{width:200px;height:200px;border-radius:var(--r-lg);object-fit:cover;box-shadow:var(--sh-lg);flex-shrink:0}.pl-detail-meta{min-width:0;display:flex;flex-direction:column;gap:8px}.pl-detail-kind{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}.pl-detail-name{font-family:var(--display);font-weight:800;font-size:clamp(30px,5vw,54px);line-height:1.04;margin:0}.pl-detail-sub{color:var(--ink-2);font-size:14px;margin:0}.pl-detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.pl-danger-btn{background:var(--accent-2)!important}.pl-modal{max-width:460px}.pl-pick-list{display:flex;flex-direction:column;gap:4px;margin-top:12px;max-height:46vh;overflow-y:auto}.pl-pick-item{display:flex;align-items:center;gap:13px;width:100%;padding:9px 10px;border-radius:var(--r-md);background:none;border:none;cursor:pointer;text-align:left;color:var(--ink);transition:background .15s var(--ease)}.pl-pick-item:hover{background:var(--surface-2)}.pl-pick-new{margin-top:8px;border:1px dashed var(--line-2)}.pl-pick-cover{width:46px;height:46px;border-radius:10px;object-fit:cover;flex-shrink:0}.pl-pick-plus{display:flex;align-items:center;justify-content:center;background:var(--surface-3);color:var(--accent)}.pl-pick-plus svg{width:20px;height:20px}.pl-pick-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.pl-pick-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pl-pick-count{font-size:12px;color:var(--ink-3)}.share-row{display:flex;gap:8px;margin-top:8px}.share-row input{flex:1;min-width:0;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);font-size:13px;font-family:var(--mono)}.share-row .btn{flex-shrink:0}.share-hint{margin-top:12px;font-size:12.5px;color:var(--ink-3);text-align:center}@media (max-width: 720px){.pl-detail-head{flex-direction:column;align-items:flex-start;gap:18px}.pl-detail-cover{width:150px;height:150px}}.pl-created{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#09090b80;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);pointer-events:none;animation:plCreatedFade .25s var(--ease) both}.pl-created.out{animation:plCreatedFade .3s var(--ease) reverse forwards}.pl-created-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 44px 30px;border-radius:var(--r-xl);background:linear-gradient(180deg,#1c1c22f0,#0f0f13f5);border:1px solid var(--line-2);box-shadow:var(--sh-xl),var(--glow);animation:plCreatedPop .5s cubic-bezier(.22,1,.36,1) both}.pl-created-check{position:relative;width:78px;height:78px;margin-bottom:6px}.pl-created-check svg{width:100%;height:100%;overflow:visible}.pl-created-circle{stroke:var(--accent);stroke-width:3;stroke-dasharray:145;stroke-dashoffset:145;animation:plDraw .5s var(--ease) .05s forwards}.pl-created-tick{stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:plDraw .32s var(--ease) .46s forwards}.pl-created-burst{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:plBurst .7s ease-out .5s}.pl-created-burst-2{animation-delay:.62s;border-color:var(--accent-2)}.pl-created-title{font-weight:700;font-size:18px;letter-spacing:-.01em}.pl-created-name{font-size:13.5px;color:var(--ink-2);max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes plDraw{to{stroke-dashoffset:0}}@keyframes plCreatedFade{0%{opacity:0}to{opacity:1}}@keyframes plCreatedPop{0%{transform:scale(.82);opacity:0}60%{transform:scale(1.04)}to{transform:scale(1);opacity:1}}@keyframes plBurst{0%{opacity:.55;transform:scale(.65)}to{opacity:0;transform:scale(1.9)}}@media (prefers-reduced-motion: reduce){.pl-created-card,.pl-created-circle,.pl-created-tick,.pl-created-burst{animation-duration:.01ms!important;animation-delay:0s!important}}.fav-pop{position:relative;animation:favPop .5s cubic-bezier(.22,1,.36,1)}.fav-pop:after{content:"";position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--accent-2);pointer-events:none;animation:favBurst .5s ease-out forwards}@keyframes favPop{0%{transform:scale(1)}35%{transform:scale(1.45)}60%{transform:scale(.88)}to{transform:scale(1)}}@keyframes favBurst{0%{opacity:.7;transform:scale(.5)}to{opacity:0;transform:scale(2.3)}}@media (prefers-reduced-motion: reduce){.fav-pop,.fav-pop:after{animation:none!important}}
