:root{--bg: #08080a;--bg-grad: radial-gradient(120% 80% at 50% -10%, #1a1a24 0%, #08080a 60%);--surface: #131318;--surface-2: #1c1c23;--surface-3: #26262f;--line: #2a2a33;--text: #f4f4f6;--text-dim: #a4a4b0;--text-mute: #6c6c7a;--accent: #00c2ff;--accent-soft: rgba(0, 194, 255, .14);--accent-2: #8b5cf6;--danger: #ef4444;--ok: #22c55e;--warn: #f59e0b;--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--r-full: 999px;--shadow-1: 0 2px 8px rgba(0, 0, 0, .4);--shadow-2: 0 12px 32px rgba(0, 0, 0, .55);--ease: cubic-bezier(.22, 1, .36, 1);--player-h: 92px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;color:var(--text);font-family:Inter,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:none;background:none}button:disabled{cursor:not-allowed;opacity:.5}a{color:var(--accent)}img{display:block;max-width:100%}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:var(--r-full);border:3px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#3a3a46;background-clip:content-box}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{max-width:1240px;margin:0 auto;padding:20px 20px calc(var(--player-h) + 40px)}.row{display:flex;align-items:center;gap:12px}.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}.grow{flex:1;min-width:0}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:28px 0 14px}.section-title h2{margin:0;font-size:1.05rem;letter-spacing:.01em}.section-title small{color:var(--text-mute);font-size:.75rem}.topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;margin-bottom:4px;background:linear-gradient(to bottom,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.topbar .brand{display:flex;align-items:center;gap:12px;min-width:0}.topbar .brand img{height:42px;width:auto}.topbar .who{display:flex;flex-direction:column;min-width:0}.topbar .who strong{font-size:.9rem}.topbar .who span{font-size:.75rem;color:var(--text-mute)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--r-full);background:var(--surface-2);color:var(--text);font-size:.85rem;font-weight:600;transition:background .18s var(--ease),transform .18s var(--ease),color .18s}.btn:hover{background:var(--surface-3)}.btn:active{transform:scale(.96)}.btn.primary{background:var(--accent);color:#04121a}.btn.primary:hover{background:#35d0ff}.btn.ghost{background:transparent;color:var(--text-dim)}.btn.ghost:hover{background:var(--surface-2);color:var(--text)}.btn.danger{background:transparent;color:var(--danger)}.btn.danger:hover{background:#ef44441f}.btn.icon{padding:9px;width:38px;height:38px;border-radius:var(--r-full)}.tabs{display:flex;gap:6px;padding:4px;background:var(--surface);border-radius:var(--r-full);margin:8px 0 4px}.tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px 12px;border-radius:var(--r-full);font-size:.85rem;font-weight:600;color:var(--text-dim);transition:background .2s var(--ease),color .2s}.tabs button:hover{color:var(--text)}.tabs button[aria-selected=true]{background:var(--surface-3);color:var(--text)}.tabs button[aria-selected=true].accent{background:var(--accent);color:#04121a}.field{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);padding:0 16px;transition:border-color .2s}.field:focus-within{border-color:var(--accent)}.field svg{color:var(--text-mute);flex-shrink:0}.field input,.field select{flex:1;min-width:0;background:transparent;border:none;outline:none;padding:11px 0;font-size:.9rem}.field select{cursor:pointer}.field select option{background:var(--surface-2)}input::placeholder{color:var(--text-mute)}.cover{position:relative;aspect-ratio:1;width:100%;border-radius:var(--r-md);overflow:hidden;background:var(--surface-2);flex-shrink:0}.cover img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s var(--ease)}.cover img.ready{opacity:1}.cover.loading:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.055) 50%,transparent 80%);background-size:220% 100%;animation:shimmer 1.4s infinite linear}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-60% 0}}.carousel{position:relative}.carousel .track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.carousel .track::-webkit-scrollbar{display:none}.card{scroll-snap-align:start;flex:0 0 156px;min-width:0;overflow:hidden;background:var(--surface);border-radius:var(--r-lg);padding:10px;text-align:left;transition:background .2s var(--ease),transform .2s var(--ease)}.card:hover{background:var(--surface-2);transform:translateY(-3px)}.card .cover{margin-bottom:10px}.card b{display:block;max-width:100%;font-size:.82rem;font-weight:600;margin-bottom:2px}.card span{display:block;font-size:.72rem;color:var(--text-mute)}.card .play-badge{position:absolute;right:8px;bottom:8px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#04121a;font-size:15px;box-shadow:var(--shadow-1);opacity:0;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease)}.card:hover .play-badge,.card:focus-within .play-badge{opacity:1;transform:translateY(0)}.carousel .nav{position:absolute;top:38%;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#0c0c10e6;border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow-1);opacity:0;transition:opacity .2s;z-index:2}.carousel:hover .nav{opacity:1}.carousel .nav.left{left:-10px}.carousel .nav.right{right:-10px}@media (hover: none){.carousel .nav{display:none}}.tracklist{display:flex;flex-direction:column}.track-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;width:100%;padding:8px 10px;border-radius:var(--r-md);text-align:left;transition:background .15s}.track-row:hover{background:var(--surface)}.track-row .cover{width:44px;border-radius:var(--r-sm)}.track-row .folder-icon{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--surface-2);color:var(--warn);font-size:18px}.track-row b{display:block;font-size:.88rem;font-weight:500}.track-row small{display:block;font-size:.76rem;color:var(--text-mute)}.track-row.active b{color:var(--accent)}.eq{display:flex;align-items:flex-end;gap:2px;height:14px}.eq i{width:3px;background:var(--accent);border-radius:2px;animation:eq .9s ease-in-out infinite}.eq i:nth-child(2){animation-delay:.18s}.eq i:nth-child(3){animation-delay:.36s}.eq.paused i{animation-play-state:paused;height:4px}@keyframes eq{0%,to{height:4px}50%{height:14px}}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}.grid.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.player{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#0e0e12db;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}.player .inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:16px}.player .meta{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.player .meta .cover{width:52px;border-radius:var(--r-sm);cursor:pointer}.player .meta b{display:block;font-size:.85rem}.player .meta small{display:block;font-size:.75rem;color:var(--text-mute)}.player .center{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1.6;min-width:0}.player .transport{display:flex;align-items:center;gap:10px}.player .transport button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--text-dim);font-size:15px;transition:color .15s,background .15s,transform .15s var(--ease)}.player .transport button:hover{color:var(--text);background:var(--surface-2)}.player .transport button:active{transform:scale(.9)}.player .transport button.on{color:var(--accent)}.player .transport .play{width:42px;height:42px;background:var(--text);color:#08080a;font-size:16px}.player .transport .play:hover{background:#fff;color:#08080a;transform:scale(1.06)}.player .right{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex:1}.player .volume{width:90px}.scrub{display:flex;align-items:center;gap:10px;width:100%}.scrub time{font-size:.7rem;color:var(--text-mute);font-variant-numeric:tabular-nums;width:38px;text-align:center;flex-shrink:0}.bar{position:relative;flex:1;height:14px;display:flex;align-items:center;cursor:pointer;touch-action:none}.bar .rail{position:absolute;left:0;right:0;height:4px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}.bar .buffered{position:absolute;left:0;top:0;bottom:0;background:#45454f;transition:width .3s linear}.bar .played{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}.bar .knob{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transform:translate(-50%);opacity:0;transition:opacity .15s;pointer-events:none}.bar:hover .knob,.bar.dragging .knob{opacity:1}.bar.dragging .played,.bar:hover .played{background:var(--accent)}.net-chip{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:var(--r-full);background:#f59e0b26;color:var(--warn)}.net-chip.err{background:#ef444426;color:var(--danger)}.now{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}.now .backdrop{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background-size:cover;background-position:center;filter:blur(60px) saturate(1.5) brightness(.5);transform:scale(1.2);transition:background-image .6s var(--ease)}.now .scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#08080a66,#08080aeb)}.now .body{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px calc(24px + env(safe-area-inset-left)) calc(34px + env(safe-area-inset-bottom));max-width:460px;margin:0 auto;width:100%}.now .art{width:min(78vw,340px);border-radius:var(--r-lg);box-shadow:var(--shadow-2)}.now .titles{text-align:center;width:100%}.now .titles h2{margin:0 0 6px;font-size:1.25rem;line-height:1.3}.now .titles p{margin:0;color:var(--text-dim);font-size:.9rem}.now .transport{display:flex;align-items:center;justify-content:center;gap:22px;width:100%}.now .transport button{color:var(--text-dim);font-size:22px;transition:color .15s,transform .15s var(--ease)}.now .transport button:hover{color:var(--text)}.now .transport button:active{transform:scale(.9)}.now .transport button.on{color:var(--accent)}.now .transport .play{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:#08080a;font-size:24px}.now .close{position:absolute;top:calc(16px + env(safe-area-inset-top));left:16px;z-index:2;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#ffffff14;color:var(--text);font-size:20px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:grid;place-items:center;padding:20px;background:#000000b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade .2s var(--ease)}.dialog{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-2);animation:pop .22s var(--ease)}.dialog h3{margin:0 0 4px;font-size:1.05rem}.dialog p.hint{margin:0 0 16px;font-size:.8rem;color:var(--text-mute)}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:translateY(12px) scale(.98)}}.empty{text-align:center;padding:48px 20px;color:var(--text-mute);font-size:.9rem}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;left:50%;bottom:calc(var(--player-h) + 20px);transform:translate(-50%);z-index:400;display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:var(--r-full);background:var(--surface-3);border:1px solid var(--line);box-shadow:var(--shadow-2);font-size:.83rem;max-width:min(92vw,460px);animation:pop .22s var(--ease)}.toast.ok{border-color:#22c55e80}.toast.err{border-color:#ef444480}.auth{min-height:100dvh;display:grid;place-items:center;padding:24px}.auth form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}.auth img{height:64px;width:auto;margin:0 auto 8px}.auth h1{text-align:center;font-size:1.3rem;margin:0 0 4px}.auth p.sub{text-align:center;color:var(--text-mute);font-size:.82rem;margin:0 0 20px}.auth .field{background:var(--surface-2)}.auth .foot{text-align:center;margin-top:18px;font-size:.83rem;color:var(--text-mute)}.player .meta .expand{display:grid;place-items:center;color:var(--text-dim)}@media (max-width: 780px){:root{--player-h: 72px}.app{padding:12px 14px calc(var(--player-h) + 28px)}.player{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}.player .inner{gap:10px}.player .right{display:none}.player .meta{flex:1;min-width:0;cursor:pointer}.player .meta .cover{width:44px}.player .meta .expand{display:none}.player .center{flex:0 0 auto}.player .transport{gap:2px}.player .transport .side{display:none}.player .scrub{position:absolute;left:0;right:0;top:0;gap:0}.player .scrub time{display:none}.player .bar{height:3px}.player .bar .rail{height:3px;border-radius:0}.player .bar .knob{display:none}.player .net-chip{position:absolute;left:50%;transform:translate(-50%);top:-30px}.tabs button span.label{display:none}.card{flex-basis:132px}.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.now .transport{gap:16px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.btn{text-decoration:none}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:var(--r-full);background:var(--surface-3);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text);box-shadow:var(--shadow-1)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--text)}input[type=range]:hover::-webkit-slider-thumb{background:var(--accent)}input[type=range]:hover::-moz-range-thumb{background:var(--accent)}input[type=search]::-webkit-search-cancel-button{filter:invert(.6);cursor:pointer}