@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";*,*:before,*:after{box-sizing:border-box}:root{--bg: #09090f;--bg-elev: #111119;--surface: #16161f;--surface-2: #1d1d28;--surface-hover: #242431;--surface-active: #2b2b3a;--border: rgba(255, 255, 255, .07);--border-strong: rgba(255, 255, 255, .13);--text: #f5f5fa;--text-muted: #a3a3b8;--text-subtle: #6f6f86;--accent: #8b5cf6;--accent-hover: #9d74f8;--accent-2: #ec4899;--accent-soft: rgba(139, 92, 246, .16);--accent-grad: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);--success: #22c55e;--success-soft: rgba(34, 197, 94, .12);--danger: #f43f5e;--danger-soft: rgba(244, 63, 94, .12);--warning: #f59e0b;--warning-soft: rgba(245, 158, 11, .12);--radius-xs: 6px;--radius-sm: 10px;--radius: 14px;--radius-lg: 20px;--radius-full: 999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow: 0 8px 30px rgba(0, 0, 0, .35);--shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);--header-h: 64px;--ease: cubic-bezier(.2, .8, .2, 1);color-scheme:dark}html{overflow-x:hidden;-webkit-text-size-adjust:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.5;background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}h1,h2,h3,h4,p{margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.icon{flex-shrink:0;display:block}.app{min-height:100vh;min-height:100dvh;background:radial-gradient(1200px 600px at 10% -10%,rgba(139,92,246,.14),transparent 60%),radial-gradient(900px 500px at 110% 10%,rgba(236,72,153,.1),transparent 60%),var(--bg);color:var(--text)}.card{background:#16161fd9;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--radius-full);border:1px solid transparent;font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s var(--ease),border-color .15s var(--ease),transform .1s var(--ease),opacity .15s;-webkit-user-select:none;user-select:none}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent-grad);color:#fff;box-shadow:0 6px 20px #8b5cf64d}.btn-primary:hover:not(:disabled){filter:brightness(1.08)}.btn-secondary{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}.btn-secondary:hover:not(:disabled){background:var(--surface-hover)}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}.btn-sm{height:32px;padding:0 12px;font-size:13px;gap:6px}.btn-lg{height:48px;padding:0 22px;font-size:15px}.btn-block{width:100%}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-muted);transition:background .15s var(--ease),color .15s var(--ease),transform .1s var(--ease);flex-shrink:0}@media(hover:hover){.icon-btn:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}}.icon-btn:active:not(:disabled){transform:scale(.92)}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.icon-btn-sm{width:30px;height:30px}.icon-btn.danger:hover:not(:disabled){color:var(--danger);background:var(--danger-soft)}.link-btn{background:none;border:none;padding:0;color:var(--accent-hover);font-weight:600}.link-btn:hover{text-decoration:underline}.input,.select{width:100%;height:44px;padding:0 14px;background:var(--bg-elev);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}.input::placeholder{color:var(--text-subtle)}.input:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.input:disabled{opacity:.6}.select{height:36px;font-size:13px;padding:0 32px 0 12px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}.form{display:flex;flex-direction:column;gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field>span{font-size:13px;font-weight:500;color:var(--text-muted)}.field em{font-style:normal;color:var(--text-subtle);font-weight:400}.form-intro h2{font-size:17px;font-weight:700}.form-intro p{color:var(--text-muted);font-size:13px;margin-top:2px}.form-row-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}.form-row-actions .btn{flex:1}.alert{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;border:1px solid;margin-top:14px}.alert-error{background:var(--danger-soft);border-color:#f43f5e4d;color:#fda4af}.alert-success{background:var(--success-soft);border-color:#22c55e4d;color:#86efac}.alert-warning{background:var(--warning-soft);border-color:#f59e0b4d;color:#fcd34d}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;gap:4px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-full);margin-bottom:20px}.segmented-btn{height:36px;border:none;border-radius:var(--radius-full);background:transparent;color:var(--text-muted);font-weight:600;font-size:14px;transition:background .2s var(--ease),color .2s var(--ease)}.segmented-btn:hover{color:var(--text)}.segmented-btn.active{background:var(--surface-active);color:var(--text);box-shadow:var(--shadow-sm)}.chip-row{display:flex;gap:8px;overflow-x:auto;padding:16px 20px 4px;scrollbar-width:none}.chip-row::-webkit-scrollbar{display:none}.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--radius-full);border:1px solid var(--border-strong);background:transparent;color:var(--text-muted);font-size:13px;font-weight:500;white-space:nowrap;flex-shrink:0;transition:background .15s,color .15s,border-color .15s}.chip:hover{color:var(--text);background:var(--surface-hover)}.chip.active{background:var(--text);border-color:var(--text);color:var(--bg)}.chip-static{cursor:default;height:28px;background:var(--surface-2);color:var(--text)}.count-pill{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 7px;border-radius:var(--radius-full);background:var(--surface-active);color:var(--text-muted);font-size:11px;font-weight:700}.avatar{--hue: 260;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,hsl(var(--hue) 70% 55%),hsl(calc(var(--hue) + 40) 75% 45%));color:#fff;font-weight:700;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.25)}.avatar-sm{width:28px;height:28px;font-size:12px}.avatar-lg{width:44px;height:44px;font-size:17px}@keyframes spin{to{transform:rotate(360deg)}}.spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;opacity:.8;flex-shrink:0}.spinner-lg{width:28px;height:28px;border-width:3px}@keyframes eq{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;flex-shrink:0}.eq span{width:3px;height:100%;border-radius:2px;background:var(--success);transform-origin:bottom;animation:eq .9s ease-in-out infinite}.eq span:nth-child(2){animation-delay:-.3s}.eq span:nth-child(3){animation-delay:-.6s}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);box-shadow:0 0 #f43f5e99;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 #f43f5e80}70%{box-shadow:0 0 0 8px #f43f5e00}to{box-shadow:0 0 #f43f5e00}}.range{--progress: 0%;-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;background:linear-gradient(to right,var(--text) var(--progress),rgba(255,255,255,.14) var(--progress)) center / 100% 4px no-repeat;border-radius:var(--radius-full);cursor:pointer;outline:none}.range:hover:not(:disabled),.range:focus-visible{background-image:linear-gradient(to right,var(--accent-hover) var(--progress),rgba(255,255,255,.18) var(--progress))}.range::-webkit-slider-runnable-track{height:20px;background:transparent}.range::-moz-range-track{height:4px;background:transparent}.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-top:3px;border-radius:50%;background:#fff;border:none;box-shadow:0 2px 6px #0006;transform:scale(0);transition:transform .15s var(--ease)}.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;box-shadow:0 2px 6px #0006;transform:scale(0);transition:transform .15s var(--ease)}.range:hover:not(:disabled)::-webkit-slider-thumb,.range:focus-visible::-webkit-slider-thumb,.range:active::-webkit-slider-thumb{transform:scale(1)}.range:hover:not(:disabled)::-moz-range-thumb,.range:focus-visible::-moz-range-thumb,.range:active::-moz-range-thumb{transform:scale(1)}.range:disabled{cursor:default}.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--text-muted);flex-shrink:0;position:relative}.switch input{position:absolute;opacity:0;width:1px;height:1px}.switch-track{width:34px;height:20px;border-radius:var(--radius-full);background:var(--surface-active);position:relative;transition:background .2s var(--ease)}.switch-track:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}.switch input:checked+.switch-track{background:var(--accent)}.switch input:checked+.switch-track:after{transform:translate(14px)}.switch input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:2px}.progress{flex:0 0 90px;height:6px;border-radius:var(--radius-full);background:var(--surface-active);overflow:hidden}.progress-fill{height:100%;background:var(--accent-grad);border-radius:inherit;transition:width .2s ease-out}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:40px 20px;color:var(--text-muted)}.empty-state p{font-weight:600;color:var(--text);font-size:15px}.empty-state span{font-size:13px;max-width:300px}.empty-state.small{padding:28px 16px}.empty-state.small p{font-size:14px}.empty-state>.icon{color:var(--text-subtle);margin-bottom:4px}.empty-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-hover);margin-bottom:8px}.loading-state{display:flex;align-items:center;justify-content:center;gap:10px;padding:36px 16px;color:var(--text-muted);font-size:13px}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-name{font-weight:800;font-size:16px;letter-spacing:-.01em;white-space:nowrap}.logo{display:block;flex-shrink:0;filter:drop-shadow(0 6px 16px rgba(139,92,246,.35))}.auth-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}.auth-card{width:100%;max-width:420px;padding:32px}.auth-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:28px}.auth-brand .logo{margin-bottom:8px}.auth-brand h1{font-size:26px;font-weight:800;letter-spacing:-.02em}.auth-brand p{color:var(--text-muted);font-size:14px}.auth-switch{text-align:center;margin-top:18px;font-size:13px;color:var(--text-muted)}.waitlist-confirmed .alert{margin:0 0 14px}.auth-card>.alert-success:first-of-type{margin:0 0 16px}.auth-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;font-size:12px;color:var(--text-subtle);text-align:center;max-width:100%}.auth-footer-server{overflow-wrap:anywhere}.footer-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);text-decoration:none;padding:6px 12px;border-radius:var(--radius-full);border:1px solid var(--border);transition:background .15s,color .15s}.footer-link:hover{color:var(--text);background:var(--surface-hover)}.room-layout{width:100%;max-width:460px;display:flex;flex-direction:column;gap:16px}.room-card{padding:24px 28px 28px}.room-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px}.room-greeting{margin-bottom:24px}.room-greeting h1{font-size:26px;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}.room-greeting p{color:var(--text-muted);margin-top:4px}.divider-text{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--text-subtle);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}.divider-text:before,.divider-text:after{content:"";flex:1;height:1px;background:var(--border-strong)}.join-form{display:flex;gap:10px}.code-input{flex:1;min-width:0;height:48px;text-align:center;text-transform:uppercase;letter-spacing:.3em;font-weight:700;font-size:18px;font-family:ui-monospace,SF Mono,Menlo,monospace}.code-input::placeholder{letter-spacing:.2em;font-size:14px;font-weight:600}.active-rooms{padding:20px}.active-rooms h2{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin-bottom:12px;padding:0 4px}.active-rooms-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}.active-room{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius);transition:background .15s}.active-room:hover{background:var(--surface-hover)}.active-room-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.active-room-head{display:flex;align-items:baseline;gap:10px;min-width:0}.active-room-code{font-family:ui-monospace,SF Mono,Menlo,monospace;font-weight:700;letter-spacing:.12em;font-size:15px}.active-room-meta{font-size:12px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-room-track{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);min-width:0}.jam-screen{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.app-header{flex-shrink:0;height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 20px;padding-top:env(safe-area-inset-top);box-sizing:content-box}.header-center{display:flex;align-items:center;gap:8px}.room-code{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--radius-full);background:var(--surface-2);border:1px solid var(--border-strong);color:var(--text-muted);transition:background .15s,color .15s}.room-code:hover{background:var(--surface-hover);color:var(--text)}.room-code-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-subtle)}.room-code-value{font-family:ui-monospace,SF Mono,Menlo,monospace;font-weight:700;letter-spacing:.12em;color:var(--text)}.role-pill{height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:var(--radius-full);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.role-host{background:#f59e0b24;color:#fbbf24}.role-cohost{background:var(--accent-soft);color:#c4b5fd}.role-listener{background:var(--surface-2);color:var(--text-muted)}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);flex-shrink:0}.conn-dot.online{background:var(--success);box-shadow:0 0 0 3px var(--success-soft)}.header-user{display:flex;align-items:center;gap:8px;min-width:0;font-weight:500;font-size:13px}.header-username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}.reconnect-banner{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px;margin:0 12px 12px;padding:8px 14px;border-radius:var(--radius-sm);background:var(--warning-soft);border:1px solid rgba(245,158,11,.3);color:#fcd34d;font-size:13px}.main-content{flex:1;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr) 320px;gap:12px;padding:0 12px 12px}.side-panel{display:flex;flex-direction:column;min-height:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.panel-header{display:flex;align-items:center;gap:8px;padding:16px 16px 12px;color:var(--text-muted)}.panel-header h3{font-size:14px;font-weight:700;color:var(--text);flex:1}.panel-body{flex:1;min-height:0;overflow-y:auto;padding:0 8px 12px}.center-panel{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px;border-radius:var(--radius-lg)}.row-info{display:flex;flex-direction:column;min-width:0;flex:1}.row-info strong{font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}.row-info span{font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-info span:empty{display:none}.room-setting{display:flex;flex-direction:column;gap:6px;padding:4px 8px 14px;margin-bottom:8px;border-bottom:1px solid var(--border)}.room-setting-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-subtle)}.room-setting .chip-static{align-self:flex-start}.people-list{list-style:none;padding:0;margin:0}.person{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-sm);min-height:48px}.person:hover{background:var(--surface-hover)}.person.is-away .avatar,.person.is-away .person-name{opacity:.5}.person-name{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.you-tag{font-size:11px;color:var(--text-subtle);font-weight:500}.role-badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--radius-full);font-size:11px;font-weight:700;flex-shrink:0}.queue-list{list-style:none;padding:0;margin:0}.queue-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-sm);min-height:52px}.queue-item:hover{background:var(--surface-hover)}.queue-num{width:22px;text-align:center;font-size:12px;font-weight:600;color:var(--text-subtle);font-variant-numeric:tabular-nums;flex-shrink:0}.queue-controls{display:flex;gap:0;flex-shrink:0;opacity:.55;transition:opacity .15s}.queue-item:hover .queue-controls,.queue-controls:focus-within{opacity:1}.now-playing-card{position:relative;flex-shrink:0;padding:24px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);overflow:hidden;isolation:isolate}.now-playing-card.has-cover:before{content:"";position:absolute;inset:-40px;background-image:var(--cover-url);background-size:cover;background-position:center;filter:blur(60px) saturate(1.4);opacity:.45;z-index:-2;transition:background-image .6s}.now-playing-card.has-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#09090f33,#09090fbf);z-index:-1}.now-playing{display:flex;align-items:flex-end;gap:24px;margin-bottom:20px}.cover-art{width:180px;height:180px;border-radius:var(--radius);object-fit:cover;flex-shrink:0;box-shadow:var(--shadow-lg);background:var(--surface-2)}.cover-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2a2340,#1d1d28);color:var(--text-subtle)}.track-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-bottom:4px}.track-eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:4px}.track-info h2{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.track-artist{font-size:16px;font-weight:600;color:var(--text);opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-album{font-size:13px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.like-btn{width:44px;height:44px;align-self:flex-end}.like-btn.active,.like-btn.active:hover{color:var(--accent-2)}.synced-audio-player{display:flex;flex-direction:column;gap:6px}.seek-row{display:flex;align-items:center;gap:12px}.seek-row .time{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:38px}.seek-row .time:last-child{text-align:right}.volume-control{display:flex;align-items:center;gap:10px;color:var(--text-muted);max-width:220px;margin-left:auto}.volume-value{font-size:12px;font-variant-numeric:tabular-nums;min-width:34px;text-align:right}.transport-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:8px}.transport-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--text-muted);position:relative;transition:color .15s,background .15s,transform .1s var(--ease)}@media(hover:hover){.transport-btn:hover:not(:disabled){color:var(--text);background:#ffffff0f}}.transport-btn:active:not(:disabled){transform:scale(.9)}.transport-btn:disabled{opacity:.3;cursor:not-allowed}.transport-btn.active{color:var(--accent-hover)}.transport-btn.active:after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}.transport-play-btn{width:60px;height:60px;background:var(--text);color:var(--bg);box-shadow:0 8px 24px #00000059}.transport-play-btn:hover:not(:disabled){background:#fff;color:var(--bg);transform:scale(1.05)}.listener-note{text-align:center;font-size:13px;color:var(--text-muted);margin-top:12px}.library-card{flex:1 0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);min-height:320px}.tabs{position:sticky;top:0;z-index:5;display:flex;gap:4px;padding:10px 12px 0;background:var(--surface);border-bottom:1px solid var(--border);border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:none;background:transparent;color:var(--text-muted);font-weight:600;font-size:14px;position:relative;white-space:nowrap;flex-shrink:0;transition:color .15s}.tab:hover,.tab.active{color:var(--text)}.tab.active:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent-grad)}.tab-count{min-width:20px;height:18px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--surface-active);font-size:11px;font-weight:700}.tab-content{padding-bottom:12px}.mobile-panel{padding:8px}.section-header{display:flex;align-items:center;gap:10px;padding:14px 20px 8px;flex-wrap:wrap}.section-header h4{font-size:14px;font-weight:700;flex:1;min-width:0}.section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-subtle);padding:8px 20px}.list,.track-list{list-style:none;padding:0 8px;margin:0}.list-row{display:flex;align-items:center;gap:14px;padding:8px 12px;border-radius:var(--radius-sm);min-height:60px;outline-offset:-2px}.list-row.clickable{cursor:pointer}.list-row:hover{background:var(--surface-hover)}.row-chevron{color:var(--text-subtle)}.tile-icon{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--accent-grad);color:#fff;flex-shrink:0}.tile-icon-lg{width:140px;height:140px;border-radius:var(--radius)}.track-row{display:flex;align-items:center;gap:14px;padding:6px 12px;border-radius:var(--radius-sm);min-height:56px}.track-row:hover{background:var(--surface-hover)}.track-row.is-current .row-info strong{color:var(--accent-hover)}.track-num{width:24px;text-align:center;font-size:13px;color:var(--text-subtle);font-variant-numeric:tabular-nums;flex-shrink:0}.track-thumb{width:44px;height:44px;border-radius:var(--radius-xs)}.track-duration{font-size:13px;color:var(--text-subtle);font-variant-numeric:tabular-nums;flex-shrink:0}.song-actions{display:flex;gap:2px;flex-shrink:0}@media(hover:hover){.track-row .song-actions,.list-row .song-actions{opacity:0;transition:opacity .15s}.track-row:hover .song-actions,.list-row:hover .song-actions,.song-actions:focus-within{opacity:1}}.cover{display:block;object-fit:cover;background:var(--surface-2);flex-shrink:0}.breadcrumb{display:flex;align-items:center;gap:4px;padding:12px 16px 0;font-size:13px;min-width:0;overflow:hidden}.crumb{background:none;border:none;padding:4px 6px;border-radius:var(--radius-xs);color:var(--text-muted);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}button.crumb:hover{color:var(--text);background:var(--surface-hover)}.crumb.current{color:var(--text);font-weight:600}.crumb-sep{color:var(--text-subtle)}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:12px}.album-card{display:flex;flex-direction:column;gap:2px;padding:10px;border:none;border-radius:var(--radius);background:transparent;text-align:left;min-width:0;transition:background .15s}.album-card:hover{background:var(--surface-hover)}.album-card-cover{width:100%;aspect-ratio:1;height:auto;border-radius:var(--radius-sm);margin-bottom:8px;box-shadow:0 6px 18px #00000059;transition:transform .2s var(--ease)}.album-card:hover .album-card-cover{transform:translateY(-2px)}.album-card strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.album-card span{font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collection-header{display:flex;align-items:flex-end;gap:20px;padding:16px 20px 12px}.collection-cover{width:140px;height:140px;border-radius:var(--radius);box-shadow:var(--shadow)}.collection-meta{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.collection-kind{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-subtle)}.collection-meta h3{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}.collection-meta>span:not(.collection-kind){font-size:13px;color:var(--text-muted)}.collection-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.section-header .collection-actions{margin-top:0}.search-form{display:flex;gap:8px;padding:16px 20px 8px}.search-input-wrap{position:relative;flex:1;min-width:0}.search-input-wrap .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-subtle);pointer-events:none}.search-input{padding-left:42px;border-radius:var(--radius-full)}.search-input::-webkit-search-cancel-button{filter:invert(.7)}.search-form .btn{height:44px;min-width:90px}.upload-panel{padding:16px 20px;display:flex;flex-direction:column;gap:8px}.dropzone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:32px 20px;border:2px dashed var(--border-strong);border-radius:var(--radius);background:var(--bg-elev);transition:border-color .15s,background .15s}.dropzone.dragover{border-color:var(--accent);background:var(--accent-soft)}.dropzone-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent-hover);margin-bottom:6px}.dropzone-title{font-weight:600;font-size:15px}.dropzone-sub{font-size:12px;color:var(--text-subtle)}.dropzone-formats{margin-top:8px;font-size:12px;color:var(--text-subtle)}.upload-section .section-header{padding:12px 0 8px}.upload-section .alert{margin-top:10px}.upload-queue-list,.my-uploads-list{list-style:none;margin:0;padding:4px;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);max-height:260px;overflow-y:auto}.upload-queue-item,.upload-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);font-size:13px}.upload-item:hover,.upload-queue-item:hover{background:var(--surface-hover)}.upload-queue-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-queue-status{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;font-size:12px;color:var(--text-muted);max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-queue-done .upload-queue-status{color:var(--success)}.upload-queue-error .upload-queue-status{color:var(--danger)}.upload-queue-pending .upload-queue-name{color:var(--text-muted)}.upload-quota{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}button.footer-link{background:transparent;font-size:inherit}.footer-install{color:var(--text);border-color:#8b5cf673;background:var(--accent-soft)!important}.footer-hint{display:inline-flex;align-items:center;gap:4px}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.toast{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 24px);padding:8px 8px 8px 16px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-full);box-shadow:var(--shadow-lg);color:var(--text);font-size:13px;animation:toast-in .25s var(--ease)}.toast>.icon{color:var(--accent-hover)}.toast-text{min-width:0}@media(max-width:640px){.toast{border-radius:var(--radius);flex-wrap:wrap}.toast-text{flex:1 1 60%}}.jam-screen *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}.jam-screen ::-webkit-scrollbar{width:10px;height:10px}.jam-screen ::-webkit-scrollbar-track{background:transparent}.jam-screen ::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:var(--radius-full);border:3px solid transparent;background-clip:padding-box}.jam-screen ::-webkit-scrollbar-thumb:hover{background-color:#ffffff38}.mobile-only{display:none}@media(max-width:1280px){.main-content{grid-template-columns:220px minmax(0,1fr) 280px}.cover-art{width:150px;height:150px}.track-info h2{font-size:26px}}@media(max-width:1024px){.main-content{grid-template-columns:minmax(0,1fr);padding:0 12px}.side-panel{display:none}.mobile-only{display:inline-flex}.desktop-only{display:none}.center-panel{border-radius:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}.queue-controls{opacity:1}}@media(max-width:640px){:root{--header-h: 56px}.app-header{grid-template-columns:auto 1fr auto;padding-left:12px;padding-right:8px;gap:8px}.brand-name,.header-username,.hide-sm{display:none}.header-center{justify-content:center;min-width:0}.room-code{padding:0 12px;gap:6px}.room-code-label,.role-pill{display:none}.header-actions{gap:6px}.header-actions .btn-sm{width:36px;padding:0}.main-content{padding:0 8px}.center-panel{gap:8px}.now-playing-card{padding:16px}.now-playing{align-items:center;gap:14px;margin-bottom:14px}.cover-art{width:88px;height:88px;border-radius:var(--radius-sm)}.track-info h2{font-size:18px;-webkit-line-clamp:2}.track-artist{font-size:14px}.track-album{font-size:12px}.track-eyebrow{font-size:10px;margin-bottom:0}.like-btn{align-self:center}.volume-control{max-width:none;margin-left:0}.transport-controls{justify-content:space-between;gap:4px;padding:0 4px}.transport-play-btn{width:56px;height:56px}.library-card{border-radius:var(--radius)}.tabs{padding:4px 4px 0;border-radius:var(--radius) var(--radius) 0 0}.tab{flex:1 1 0;justify-content:center;gap:6px;padding:0 6px;font-size:13px}.tab .icon{display:none}.tab.active:after{left:6px;right:6px}.chip-row{padding:12px 12px 4px}.list,.track-list{padding:0 4px}.track-row,.list-row{padding:6px 8px;gap:12px}.track-duration{display:none}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;gap:4px}.album-card{padding:8px}.collection-header{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 12px 8px}.collection-cover{width:120px;height:120px}.collection-meta h3{font-size:20px}.section-header{padding:12px 12px 6px}.section-title{padding:8px 12px}.search-form{padding:12px}.search-form .btn{min-width:0;padding:0 16px}.upload-panel{padding:12px}.auth-card{padding:24px 20px}.room-card{padding:20px}.auth-screen{justify-content:flex-start;padding-top:max(32px,env(safe-area-inset-top))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}