:root{--bg: #0b0f0c;--card: rgba(255, 255, 255, .06);--card2: rgba(255, 255, 255, .08);--text: rgba(255, 255, 255, .92);--muted: rgba(255, 255, 255, .68);--muted2: rgba(255, 255, 255, .55);--green: #1db954;--green2: rgba(29, 185, 84, .65);--accent: #1db954;--accent2: rgba(29, 185, 84, .55);--accent3: rgba(29, 185, 84, .2);--bg-art-url: none;--shadow: 0 10px 30px rgba(0,0,0,.35);--shadowStrong: 0 18px 50px rgba(0,0,0,.55);--radius: 18px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";background:radial-gradient(800px 400px at 20% 10%,rgba(29,185,84,.18),transparent 55%),radial-gradient(700px 400px at 80% 20%,rgba(29,185,84,.1),transparent 55%),var(--bg);color:var(--text);overflow-x:hidden}body.vibe:before{content:"";position:fixed;top:-40px;right:-40px;bottom:-40px;left:-40px;background-image:var(--bg-art-url);background-size:cover;background-position:center;filter:blur(90px) saturate(1.2) brightness(.22);opacity:.9;z-index:-2}body.vibe:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(900px 520px at 50% 10%,var(--accent3),transparent 60%),radial-gradient(900px 520px at 15% 35%,rgba(255,255,255,.04),transparent 60%),radial-gradient(900px 520px at 85% 45%,rgba(255,255,255,.03),transparent 60%),linear-gradient(180deg,#0006,#000000c2);z-index:-1}*{transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease,transform .28s ease,opacity .28s ease,filter .28s ease}.page{max-width:1100px;margin:0 auto;padding:18px 14px 40px}a.link,.linkLike{color:#fff;text-decoration:none}a.link:hover,.linkLike:hover{color:#ffffffc7;text-decoration:underline}.card{background:linear-gradient(180deg,#ffffff14,#ffffff0d);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}body.vibe .card{background:#11182794;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}@media (max-width: 920px){.grid{grid-template-columns:1fr}}h2{margin:0 0 10px;font-size:16px;letter-spacing:.2px}.muted{color:var(--muted)}.btn{border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:var(--text);padding:8px 10px;border-radius:14px;cursor:pointer;font-weight:800;letter-spacing:.2px}.btn:hover{background:#ffffff1a;transform:translateY(-1px)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn.primary{background:#1db95438;border-color:#1db95459}.btn.primary:hover{background:#1db95447}.btn.accent{background:color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.06));border-color:color-mix(in srgb,var(--accent) 45%,rgba(255,255,255,.12))}.btn.accent:hover{background:color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.08))}.btn.danger{background:#ff50501f;border-color:#ff505040}.btn.ghost{background:#ffffff0f}.moreBtn{margin-top:12px;width:100%}.thumb{width:46px;height:46px;border-radius:12px;object-fit:cover;background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.thumb.fallback{background:#ffffff0f}.headerBar{display:grid;grid-template-columns:1fr minmax(0,1.4fr) auto;gap:12px;align-items:center;margin-bottom:14px;padding:12px;border-radius:18px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow)}body.vibe .headerBar{background:#11182780;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}@media (max-width: 920px){.headerBar{grid-template-columns:1fr}}.headerLeft{display:flex;align-items:center;gap:12px;position:relative;min-width:0}.brandStack{display:flex;flex-direction:column;gap:3px;min-width:0}.brandName{font-weight:950;letter-spacing:.7px;font-size:14px;color:#ffffffeb;text-transform:uppercase}.brandTag{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerCenter{display:flex;align-items:center;justify-content:center;min-width:0}.nowLine{width:100%;max-width:560px;padding:10px 12px;border-radius:16px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;min-width:0}.nowPill{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#ffffffd9;white-space:nowrap}.nowPill.playing{border-color:color-mix(in srgb,var(--accent) 60%,rgba(255,255,255,.12));box-shadow:0 0 16px var(--accent3)}.nowText{min-width:0;display:flex;flex-direction:column;gap:2px}.nowTitle{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nowSub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.headerRight{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.avatarBtn{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;padding:0;cursor:pointer}.brandAvatar{width:44px;height:44px;border-radius:14px;object-fit:cover;box-shadow:0 10px 25px #00000073;border:1px solid rgba(255,255,255,.1);background:#ffffff0f}.brandAvatarFallback{width:44px;height:44px;border-radius:14px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.dropdown{position:absolute;top:54px;left:0;width:min(420px,calc(100vw - 28px));z-index:50;border-radius:18px;padding:12px;background:#111827c7;border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px #0009;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.dropdownHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.dropdownTitle{font-weight:950;letter-spacing:.5px}.dropdownSub{font-size:12px;color:var(--muted);margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.friendRow{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08)}.friendRow:hover{background:#ffffff12;transform:translate(4px)}.friendMeta{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}.friendName{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friendStatus{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.friendActions{display:flex;gap:8px;flex:0 0 auto}.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;color:#ffffffd1}.playerCard{margin:0 auto;max-width:980px;position:relative;overflow:hidden}body.vibe .playerCard{box-shadow:var(--shadowStrong);border-color:#ffffff1f}body.vibe .playerCard:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:radial-gradient(650px 280px at 30% 10%,var(--accent3),transparent 60%),radial-gradient(650px 280px at 80% 50%,rgba(255,255,255,.04),transparent 60%);z-index:0;pointer-events:none}.playerCard>*{position:relative;z-index:1}.playerCard .playerRow{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}.playerLeft{display:flex;gap:16px;align-items:center;min-width:320px}.playerMeta{display:flex;flex-direction:column;gap:6px;min-width:0}.playerControls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}body.paused .playerCard{filter:saturate(.85) brightness(.92)}.deviceRow{display:flex;gap:10px;margin-top:14px}select{background:#ffffff0f;color:var(--text);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px}.nowCoverWrap{position:relative;width:240px;height:240px;display:grid;place-items:center}.nowCoverWrap .thumb{width:240px;height:240px;border-radius:18px;position:relative;z-index:2;box-shadow:0 14px 40px #0000008c;border:1px solid rgba(255,255,255,.12)}body.vibe .nowCoverWrap .thumb{box-shadow:0 0 0 1px #ffffff14,0 18px 60px #000000a6,0 0 26px var(--accent2)}.nowCoverWrap.playing .thumb{animation:slowPulse 6s ease-in-out infinite}@keyframes slowPulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.bgBars{position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;padding:12px 14px;border-radius:22px;background:#ffffff0d;overflow:hidden;border:1px solid rgba(255,255,255,.08)}.bgBars span{width:4px;height:12px;border-radius:2px;background:var(--accent2);opacity:.55;transform:scaleY(.6)}.bgBars.on span{opacity:.95;animation:bgBarBounce 1.05s infinite ease-in-out}.bgBars.on span:nth-child(2){animation-delay:.12s}.bgBars.on span:nth-child(3){animation-delay:.22s}.bgBars.on span:nth-child(4){animation-delay:.06s}.bgBars.on span:nth-child(5){animation-delay:.18s}.bgBars.on span:nth-child(6){animation-delay:.28s}.bgBars.on span:nth-child(7){animation-delay:.1s}.bgBars.on span:nth-child(8){animation-delay:.24s}.bgBars.on span:nth-child(9){animation-delay:.14s}.bgBars.on span:nth-child(10){animation-delay:.3s}.bgBars.on span:nth-child(11){animation-delay:.08s}.bgBars.on span:nth-child(12){animation-delay:.2s}.bgBars.on span:nth-child(13){animation-delay:.26s}.bgBars.on span:nth-child(14){animation-delay:.16s}.bgBars.on span:nth-child(15){animation-delay:.32s}.bgBars.on span:nth-child(16){animation-delay:.04s}.bgBars.on span:nth-child(17){animation-delay:.27s}.bgBars.on span:nth-child(18){animation-delay:.11s}@keyframes bgBarBounce{0%{transform:scaleY(.55)}50%{transform:scaleY(2.35)}to{transform:scaleY(.75)}}.waveWrap{display:flex;align-items:center;gap:10px;margin-top:2px}.waveCanvas{width:100%;height:46px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #0003}body.vibe .waveCanvas{box-shadow:inset 0 0 0 1px #00000040,0 0 18px #00000059}.seekWrap{margin-top:4px;display:grid;gap:8px}.seekRow{display:flex;align-items:center;gap:10px}.seekTime{font-size:12px;color:var(--muted);min-width:48px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.seek{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,255,255,.1);outline:none;box-shadow:inset 0 0 0 1px #00000040}.seek[data-fill="1"]{background:linear-gradient(90deg,var(--accent2) 0%,var(--accent) var(--pct),rgba(255,255,255,.08) var(--pct),rgba(255,255,255,.08) 100%)}.seek::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:999px;background:var(--accent);border:1px solid rgba(255,255,255,.18);box-shadow:0 0 18px var(--accent2),0 6px 20px #00000073;cursor:pointer}.seek::-moz-range-thumb{width:18px;height:18px;border-radius:999px;background:var(--accent);border:1px solid rgba(255,255,255,.18);box-shadow:0 0 18px var(--accent2),0 6px 20px #00000073;cursor:pointer}.list{list-style:none;padding:0;margin:0;display:grid;gap:10px}.row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);width:100%;min-width:0}.row:hover{background:#ffffff0f;transform:translate(4px)}.row.active{border-color:color-mix(in srgb,var(--accent) 52%,rgba(255,255,255,.12));box-shadow:0 0 0 1px #ffffff0f,0 0 18px var(--accent3)}.rowMeta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}.rowTitle{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rowTitle a,.rowMeta .muted{display:block;max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viz{display:inline-flex;gap:3px;align-items:flex-end;height:18px;padding:6px 8px;border-radius:12px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.viz span{width:3px;height:6px;border-radius:2px;background:var(--accent);opacity:.65}.viz.on span{opacity:.95;animation:vizBounce .9s infinite ease-in-out}.viz.on span:nth-child(2){animation-delay:.1s}.viz.on span:nth-child(3){animation-delay:.2s}.viz.on span:nth-child(4){animation-delay:.05s}.viz.on span:nth-child(5){animation-delay:.18s}.viz.on span:nth-child(6){animation-delay:.12s}.viz.on span:nth-child(7){animation-delay:.25s}.viz.on span:nth-child(8){animation-delay:.08s}@keyframes vizBounce{0%{transform:scaleY(.6)}50%{transform:scaleY(2.2)}to{transform:scaleY(.7)}}.footer{margin-top:18px;display:flex;justify-content:center;padding:8px}.cardHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.fadeIn{animation:fadeInUp .35s ease both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}