:root{--bg:#0f0f14;--card:#1a1a24;--card-2:#22222e;--text:#e8e8ee;--muted:#8a8a99;--accent:#1db954;--accent-hover:#1ed760;--border:#2c2c3a;--error:#e05260}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5}#root{min-height:100vh}button{font:inherit;cursor:pointer;background:var(--accent);color:#06210f;border:none;border-radius:999px;padding:.5rem 1.1rem;font-weight:600;transition:background .15s}button:hover{background:var(--accent-hover)}button:disabled{opacity:.5;cursor:default}input{font:inherit;background:var(--card-2);border:1px solid var(--border);color:var(--text);border-radius:999px;outline:none;padding:.5rem 1rem}input:focus{border-color:var(--accent)}a{color:var(--accent)}h1{margin:0;font-size:1.6rem}h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .75rem;font-size:1rem}.app-bg{z-index:-1;filter:blur(22px);will-change:opacity;opacity:0;pointer-events:none;background-position:50%;background-size:cover;animation:1.2s forwards bg-fade-in;position:fixed;inset:0;transform:scale(1.15)translateZ(0)}@keyframes bg-fade-in{to{opacity:.35}}.app{flex-direction:column;gap:1rem;width:100%;max-width:1250px;height:100vh;margin:0 auto;padding:1rem 1.5rem 0;display:flex;overflow:hidden}.header{flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.logout-btn{position:absolute;top:50%;right:0;transform:translateY(-50%)}.brand{align-items:center;gap:.65rem;display:flex}.brand-icon{filter:drop-shadow(0 2px 8px #1db95459);display:block}.brand h1{letter-spacing:-.02em;font-size:2.1rem}.brand-accent{color:var(--accent)}.link{color:var(--muted);background:0 0;padding:.25rem .5rem;font-weight:400}.link:hover{color:var(--text);background:0 0}.home{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1.5rem;padding-bottom:10vh;display:flex}.home-lead{color:var(--muted);margin:0;font-size:1.15rem}.home-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.home-form{flex-direction:column;align-items:center;gap:1rem;display:flex}.big-btn{padding:.9rem 2.4rem;font-size:1.15rem}.big-btn.secondary{background:var(--card-2);color:var(--text);border:1px solid var(--border)}.big-btn.secondary:hover{background:var(--border)}.code-input{text-align:center;letter-spacing:.5em;text-transform:uppercase;width:11rem;padding-left:1.4rem;font-size:2rem}.home .login-form{justify-content:center}.home .hint{text-align:center;max-width:480px}.room-bar{flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:1rem;display:flex}.room-code{color:var(--muted);font-size:.95rem}.room-code strong{color:var(--accent);letter-spacing:.15em;margin-left:.2rem;font-size:1.15rem}.room-url{margin-left:.6rem;font-size:.85rem}.members{flex-wrap:wrap;gap:.4rem;display:flex}.member-chip{background:var(--card-2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:.15rem .7rem;font-size:.82rem}.member-chip.host{border-color:var(--accent);color:var(--accent)}.connect-banner{background:var(--card);border:1px solid var(--border);border-radius:14px;flex-shrink:0;padding:1rem 1.25rem}.connect-banner p{margin:0 0 .6rem}.login-form{flex-wrap:wrap;gap:.5rem;display:flex}.login-form input{flex:1;min-width:200px}.hint{color:var(--muted);margin:.75rem 0 0;font-size:.8rem}.hint code{background:var(--card-2);border-radius:4px;padding:.1rem .35rem}.columns{flex:1;grid-template-rows:minmax(0,1fr);grid-template-columns:2.4fr 1fr;gap:1.25rem;min-height:0;display:grid}@media (width<=700px){.columns{grid-template-columns:1fr}}.panel{background:var(--card);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:.75rem;min-height:0;padding:1rem 1.1rem;display:flex}.panel-head{align-items:center;gap:.6rem;display:flex}.panel-head h2{align-items:center;gap:.45rem;margin:0;display:inline-flex}.panel-head h2 svg{color:var(--accent)}.badge{background:var(--accent);color:#06210f;border-radius:999px;padding:.05rem .55rem;font-size:.75rem;font-weight:700}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.panel-scroll{scrollbar-width:thin;scrollbar-color:var(--border) transparent;flex:1;min-height:0;overflow-y:auto}.search-bar{flex-shrink:0;width:100%;max-width:640px;margin:0 auto;position:relative}.search-box{background:var(--card-2);border:1px solid var(--border);color:var(--muted);border-radius:999px;align-items:center;gap:.6rem;padding:0 1.1rem;display:flex}.search-box:focus-within{border-color:var(--accent);color:var(--text)}.search-box input{background:0 0;border:none;flex:1;padding:.65rem 0}.search-results{z-index:30;background:var(--card);border:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--border) transparent;border-radius:14px;max-height:55vh;padding:.5rem;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow-y:auto;box-shadow:0 12px 40px #0000008c}.empty-state{text-align:center;margin:0;padding:2rem 1rem}.track-list{flex-direction:column;gap:.4rem;margin:0;padding:0 .15rem 0 0;list-style:none;display:flex}.track-row{background:var(--card-2);border-radius:10px;align-items:center;gap:.75rem;padding:.45rem .7rem;display:flex}.art{object-fit:cover;border-radius:6px;flex-shrink:0}.art-empty{background:var(--card-2);color:var(--muted);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.t-info{flex:1;min-width:0}.t-name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.t-artist{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.t-dur{color:var(--muted);flex-shrink:0;font-size:.8rem}.t-meta{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:.2rem;display:flex}.t-by{color:var(--accent);white-space:nowrap;text-overflow:ellipsis;background:#1db9541f;border-radius:999px;max-width:8rem;padding:.05rem .5rem;font-size:.72rem;overflow:hidden}.q-item{flex-direction:column;gap:.4rem;display:flex}.q-sep{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:.6rem;margin:.35rem 0;font-size:.75rem;display:flex}.q-sep:before,.q-sep:after{content:"";background:var(--border);flex:1;height:1px}.q-sep span{flex-shrink:0;align-items:center;gap:.35rem;display:inline-flex}.q-num{color:var(--muted);text-align:right;flex-shrink:0;width:1.4rem;font-size:.85rem}.add-btn{flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;padding:0;font-size:1.2rem;line-height:1;display:inline-flex}.add-btn.added{background:var(--card);color:var(--accent);border:1px solid var(--accent)}.now-playing{flex-shrink:0;padding:.5rem 0 1rem}.np-card{background:linear-gradient(135deg, var(--card), var(--card-2));border:1px solid var(--border);border-radius:14px;align-items:center;gap:1rem;padding:1.2rem 1.4rem;display:flex;position:relative;overflow:hidden}.np-info{flex:1;min-width:0}.np-top{align-items:center;gap:.5rem;display:flex}.np-name{white-space:nowrap;text-overflow:ellipsis;font-size:1.3rem;font-weight:700;overflow:hidden}.np-artist{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:1.05rem;overflow:hidden}.np-progress-row{align-items:center;gap:.6rem;margin-top:.5rem;display:flex}.np-time{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8rem}.progress{background:var(--border);border-radius:3px;flex:1;height:6px;overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--accent), var(--accent-hover));border-radius:3px;height:100%;transition:width 1s linear}.paused-badge{color:var(--muted);border:1px solid var(--border);border-radius:999px;flex-shrink:0;padding:.15rem .6rem;font-size:.72rem}.np-empty p{margin:0}.lyrics-scroll{scroll-behavior:smooth}.lyrics-scroll.no-scroll{overflow:hidden}.lyrics-synced{flex-direction:column;align-items:center;gap:.35rem;padding:22vh .5rem;display:flex}.lyric-line{color:var(--muted);text-align:center;opacity:.55;transform-origin:50%;border-radius:10px;margin:0;padding:.35rem 1rem;font-size:2rem;font-weight:700;line-height:1.35;transition:color .55s cubic-bezier(.22,1,.36,1),opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);transform:scale(1)}.lyric-line.past{opacity:.28}.lyric-line.active{color:var(--text);opacity:1;transform:scale(1.04)}.lyrics-plain{font:inherit;color:var(--text);white-space:pre-wrap;text-align:center;margin:0;padding:.25rem;font-size:1.25rem;line-height:2}.eq{flex-shrink:0;align-items:flex-end;gap:2px;height:14px;display:flex}.eq span{background:var(--accent);border-radius:1px;width:3px;animation:1s ease-in-out infinite bounce}.eq span:first-child{animation-delay:0s}.eq span:nth-child(2){animation-delay:.25s}.eq span:nth-child(3){animation-delay:.5s}.eq span:nth-child(4){animation-delay:.12s}.eq-paused span{animation-play-state:paused;height:30%!important}@keyframes bounce{0%,to{height:25%}50%{height:100%}}.muted{color:var(--muted)}.app.tv{max-width:none}.app.tv .search-bar,.app.tv .connect-banner{display:none}.app.tv .lyric-line{font-size:2.4rem}.app.tv .lyric-line.active{transform:scale(1.05)}.app.tv .t-name{font-size:1.1rem}.app.tv .t-artist{font-size:1rem}.app.tv .np-name{font-size:1.35rem}.app.tv .np-artist{font-size:1.1rem}.toast{background:var(--accent);color:#06210f;z-index:10;border-radius:999px;max-width:90vw;padding:.6rem 1.25rem;font-weight:600;animation:.25s ease-out toast-in;position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #00000080}.toast.error{background:var(--error);color:#fff}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}