:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#090b0f;--surface:#12161d;--surface-muted:#171d26;--surface-sunken:#0d1117;--border:#26303d;--border-strong:#374151;--ink:#f3f6fb;--ink-soft:#cbd3df;--ink-muted:#9aa6b8;--ink-faint:#6f7b8d;--accent:#ff4058;--accent-hover:#ff6478;--accent-soft:#35151d;--ink-btn:#232a35;--ink-btn-hover:#2f3947;--ink-on-dark:#ffffffc7;--success:#31d0aa;--success-ink:#a8ffeb;--success-soft:#102a25;--success-border:#1d6d5f;--host:#f4bd61;--host-soft:#332412;--host-border:#8d6726;--violet:#b79aff;--violet-soft:#231a33;--violet-border:#5f4a8f;--danger:#ff7165;--danger-ink:#ffc9c3;--danger-soft:#351817;--danger-border:#842f2c;--r-xs:8px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;--shadow-xs:0 1px 2px #00000047;--shadow-sm:0 2px 10px #00000047;--shadow-md:0 14px 34px #00000057;--shadow-lg:0 28px 70px #0000006b;--shadow-accent:0 6px 18px #ff405840;--focus-ring:2px solid var(--accent);--focus-offset:2px;--ease:cubic-bezier(.2, .7, .2, 1);background:var(--bg);color:var(--ink);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(1100px 520px at 82% -8%, #ff405821, transparent 60%), radial-gradient(900px 460px at 8% -4%, #31d0aa1a, transparent 55%), linear-gradient(180deg, #0d1016 0, var(--bg) 300px);background-attachment:fixed;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed;opacity:.55}h1,h2,h3,p{margin:0}h1{letter-spacing:-.02em;font-size:24px;font-weight:850;line-height:1.12}:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}::selection{background:#e01d362e}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.busy-bar{z-index:50;background:linear-gradient(90deg, transparent, var(--accent), transparent);background-repeat:no-repeat;background-size:40% 100%;height:3px;animation:1.05s ease-in-out infinite busy-slide;position:fixed;inset:0 0 auto}@keyframes busy-slide{0%{background-position:-40% 0}to{background-position:140% 0}}.app-shell{width:min(1180px,100vw - 40px);margin:0 auto;padding:26px 0 56px}.topbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;min-height:76px;padding-bottom:18px;display:flex}.brand-lockup{align-items:center;gap:14px;min-width:0;display:flex}.brand-mark{width:48px;height:48px;box-shadow:var(--shadow-sm);background:#14161a;border-radius:14px;flex:none;place-items:center;display:grid;overflow:hidden}.brand-mark img{object-fit:cover;width:100%;height:100%;display:block}.brand-lockup h1{background:linear-gradient(90deg, var(--ink) 0%, #dbe4f0 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.brand-lockup>div{min-width:0}.topbar p{color:var(--ink-muted);white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:14px;font-weight:600;overflow:hidden}.room-name-row,.room-name-form{align-items:center;gap:6px;min-width:0;margin-top:3px;display:flex}.room-name-row p{min-width:0;margin-top:0}.room-name-form input{width:min(260px,40vw);min-height:34px;padding:0 10px;font-size:14px}.topbar-actions{flex-wrap:wrap;flex:none;justify-content:flex-end;align-items:center;gap:10px;display:flex}.sample-banner-ad{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);min-width:280px;max-width:640px;height:80px;box-shadow:var(--shadow-xs);flex:640px;position:relative;overflow:hidden}.sample-banner-ad a{width:100%;height:100%;display:block}.sample-banner-ad img{object-fit:cover;object-position:center;width:100%;height:100%;display:block}.sample-banner-close{color:#fff;width:28px;height:28px;box-shadow:var(--shadow-xs);cursor:pointer;transition:background-color .15s var(--ease), transform 80ms var(--ease);background:#0d1117b8;border:1px solid #ffffffb8;border-radius:50%;place-items:center;display:grid;position:absolute;top:6px;right:6px}.sample-banner-close:hover{background:#0d1117e6}.sample-banner-close:active{transform:translateY(1px)}.status-line{border-radius:var(--r-sm);box-shadow:var(--shadow-xs);animation:status-in .25s var(--ease);border:1px solid;align-items:center;gap:10px;margin:18px 0 0;padding:13px 16px;font-weight:650;display:flex}@keyframes status-in{0%{opacity:0;transform:translateY(-4px)}}.status-line svg{flex:none}.status-line span{overflow-wrap:anywhere;flex:1;min-width:0}.status-close-button{border-radius:var(--r-sm);width:32px;height:32px;min-height:32px;color:inherit;opacity:.78;cursor:pointer;transition:opacity .15s var(--ease), background-color .15s var(--ease), transform 80ms var(--ease);background:0 0;border:1px solid;flex:none;justify-content:center;align-items:center;margin-left:auto;display:inline-flex}.status-close-button:hover{opacity:1;background:#ffffff14}.status-close-button:active{transform:translateY(1px)}.status-line.error{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger-ink)}.status-line.notice{background:var(--success-soft);border-color:var(--success-border);color:var(--success-ink)}.lobby-grid,.room-grid{gap:18px;margin-top:22px;display:grid}.lobby-grid{grid-template-columns:minmax(300px,1fr) minmax(360px,1.25fr);grid-template-areas:"identity create""private rooms""library library";align-items:start}.room-grid{grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);grid-template-areas:"player members""queue members""queue settings""events events";align-items:start}.queue-only-grid{grid-template-areas:"queue members""events events"}.no-settings-grid{grid-template-areas:"player members""queue members""events events"}.control-panel,.player-surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}.control-panel{flex-direction:column;gap:14px;min-width:0;padding:18px;display:flex}.identity-panel{grid-area:identity}.create-panel{grid-area:create}.private-rooms{grid-area:private;min-height:280px}.public-rooms{grid-area:rooms;min-height:280px}.library-panel{grid-area:library}.panel-title,.player-header{align-items:center;gap:10px;display:flex}.panel-title{color:var(--ink)}.panel-title>svg{color:var(--ink-muted);flex:none}.panel-title h2,.player-header h2{letter-spacing:-.01em;font-size:17px;font-weight:800;line-height:1.2}.panel-title .icon-button{margin-left:auto}.identity-panel{background:linear-gradient(180deg, #e8223c0a, transparent 70%), var(--surface);gap:16px}.identity-head h2{letter-spacing:-.01em;font-size:19px;font-weight:850}.identity-head p{color:var(--ink-muted);margin-top:4px;font-size:14px;font-weight:550}.identity-row{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.identity-row .input-with-icon{flex:260px}.identity-avatar-row{align-items:center;gap:12px;display:flex}.identity-avatar-row .input-with-icon{flex:auto}.generated-name-note{border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface-muted);min-height:44px;color:var(--ink-soft);align-items:center;gap:9px;padding:0 13px;font-size:13px;font-weight:750;display:flex}.generated-name-note svg{color:var(--ink-muted);flex:none}.ready-pill{border-radius:var(--r-pill);white-space:nowrap;align-items:center;gap:7px;min-height:38px;padding:0 14px;font-size:13px;font-weight:800;display:inline-flex}.ready-pill.ok{background:var(--success-soft);color:var(--success);border:1px solid var(--success-border)}.ready-pill.wait{background:var(--surface-sunken);color:var(--ink-soft);border:1px solid var(--border-strong)}.ready-pill .dot{background:currentColor;border-radius:50%;width:8px;height:8px}.ready-pill.ok .dot{box-shadow:0 0 0 4px #0a7d6829}label{letter-spacing:.01em;color:var(--ink-soft);font-size:12.5px;font-weight:750}input{border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);width:100%;min-height:44px;color:var(--ink);transition:border-color .15s var(--ease), box-shadow .15s var(--ease);padding:0 13px}input::placeholder{color:var(--ink-muted)}input:hover:not(:disabled){border-color:var(--ink-faint)}input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e01d3626}.input-with-icon{border:1px solid var(--border-strong);border-radius:var(--r-sm);color:var(--ink-muted);background:var(--surface);transition:border-color .15s var(--ease), box-shadow .15s var(--ease);align-items:center;gap:10px;padding-left:13px;display:flex}.input-with-icon:focus-within{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px #e01d3626}.input-with-icon:has(:focus-visible){outline:var(--focus-ring);outline-offset:var(--focus-offset)}.input-with-icon:has(:focus-visible) input:focus-visible{outline:none}.input-with-icon input{box-shadow:none;border:0;outline:0;padding-left:0}.primary-button,.secondary-button,.icon-text-button,.icon-button,.segmented button{border-radius:var(--r-sm);letter-spacing:.01em;white-space:nowrap;min-height:44px;transition:background-color .15s var(--ease), border-color .15s var(--ease), transform 80ms var(--ease), box-shadow .15s var(--ease);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;font-weight:750;display:inline-flex}.primary-button{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent);padding:0 18px}.primary-button:hover:not(:disabled){background:var(--accent-hover);box-shadow:0 8px 20px #e01d3652}.primary-button:active:not(:disabled){box-shadow:var(--shadow-xs)}.secondary-button,.icon-text-button{background:var(--ink-btn);color:#fff;box-shadow:var(--shadow-xs);padding:0 16px}.secondary-button:hover:not(:disabled),.icon-text-button:hover:not(:disabled){background:var(--ink-btn-hover)}.primary-button:active:not(:disabled),.secondary-button:active:not(:disabled),.icon-text-button:active:not(:disabled),.icon-button:active:not(:disabled){transform:translateY(1px)}.icon-text-button.quiet{background:var(--surface);color:var(--ink);border-color:var(--border-strong);box-shadow:var(--shadow-xs)}.icon-text-button.quiet:hover:not(:disabled){background:var(--surface-muted);border-color:var(--ink-faint)}.icon-text-button.danger{color:var(--danger)}.icon-text-button.danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger-ink)}.icon-button{background:var(--surface);border-color:var(--border-strong);width:44px;height:44px;color:var(--ink-soft);box-shadow:var(--shadow-xs);flex:none}.icon-button.compact{width:34px;height:34px;min-height:34px}.icon-button:hover:not(:disabled){background:var(--surface-muted);border-color:var(--ink-faint);color:var(--ink)}.icon-button.danger{color:var(--danger)}.icon-button.danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger-border)}.segmented{border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface-sunken);grid-auto-columns:1fr;grid-auto-flow:column;gap:4px;padding:4px;display:grid}.segmented button{border-radius:calc(var(--r-sm) - 4px);min-width:0;min-height:38px;color:var(--ink-soft);background:0 0;border:0;font-weight:700}.segmented button:hover:not(:disabled):not(.active){background:#ffffff0f}.segmented button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs)}.room-list,.queue-list,.member-list,.song-history-list{flex-direction:column;gap:10px;display:flex}.room-card,.queue-item,.library-card,.song-history-item{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-muted);transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease), background-color .15s var(--ease);align-items:center;gap:12px;display:grid}.room-card:hover,.library-card:hover,.song-history-item:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);background:var(--surface);transform:translateY(-1px)}.room-card{grid-template-columns:minmax(0,1fr) auto;padding:14px}.room-card h3,.queue-main h3,.library-card h3{overflow-wrap:anywhere;letter-spacing:-.01em;font-size:15px;font-weight:750}.room-card p,.library-card p,.queue-main p,.song-history-item p{color:var(--ink-muted);font-size:13px;font-weight:550}.room-card p{margin-top:3px}.empty-state{border:1px dashed var(--border-strong);border-radius:var(--r-sm);background:var(--surface-muted);min-height:120px;color:var(--ink-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:22px 16px;font-size:14px;font-weight:600;display:flex}.empty-state svg{color:var(--ink-faint)}.library-list .empty-state{grid-column:1/-1}.library-publish-form{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-muted);grid-template-columns:minmax(160px,.9fr) minmax(180px,1.1fr) auto;gap:10px;padding:14px;display:grid}.library-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.library-card{grid-template-columns:minmax(0,1fr) auto;padding:14px}.import-mode{max-width:320px}.song-history{border-top:1px solid var(--border);gap:12px;margin-top:2px;padding-top:16px;display:grid}.song-history-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.song-history-item{grid-template-columns:minmax(0,1fr) auto;padding:12px}.song-history-item h3{overflow-wrap:anywhere;font-size:14px;font-weight:700}.player-surface{grid-area:player;padding:18px}.player-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.player-header>div{min-width:0}.player-header h2{overflow-wrap:anywhere;margin-top:4px;font-size:20px}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-size:11px;font-weight:850}.host-badge{border-radius:var(--r-pill);background:var(--host-soft);border:1px solid var(--host-border);min-height:32px;color:var(--host);flex:none;align-items:center;gap:6px;padding:0 13px;font-size:13px;font-weight:800;display:inline-flex}.control-badge{background:var(--success-soft);border-color:var(--success-border);color:var(--success)}.player-surface iframe,.player-empty,.yt-crossfade-shell{aspect-ratio:16/9;border-radius:var(--r-sm);background:#0c0d10;border:0;width:100%}.player-empty{color:var(--ink-on-dark);text-align:center;background:radial-gradient(420px 220px at 50% 30%,#e01d3629,#0000 70%),#0c0d10;place-items:center;gap:10px;padding:16px;font-size:14px;font-weight:600;display:grid}.yt-crossfade-shell{position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff0f}.yt-slot{z-index:0;opacity:0;pointer-events:none;transition:opacity var(--yt-fade-ms,.24s) linear;position:absolute;inset:0}.yt-slot.active{z-index:1;opacity:1;pointer-events:auto}.yt-slot.active.outgoing{opacity:0;pointer-events:none}.yt-slot.fading{z-index:2;opacity:1}.yt-player-target,.yt-slot iframe{width:100%;height:100%}.crossfade-controls{border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-muted);grid-template-columns:minmax(0,1fr) minmax(130px,auto) minmax(130px,auto) 88px auto auto auto;align-items:end;gap:10px;margin-top:16px;padding:14px;display:grid}.crossfade-pair{min-width:0;color:var(--ink-soft);gap:4px;font-size:12px;font-weight:750;display:grid}.crossfade-pair span{text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SF Mono,Cascadia Code,monospace;overflow:hidden}.crossfade-source{min-width:130px}.crossfade-controls output{color:var(--ink-muted);white-space:nowrap;font-size:13px;font-weight:800}.member-panel{grid-area:members}@media (width>=921px){.member-panel{overscroll-behavior:contain;scrollbar-gutter:stable;max-height:clamp(420px,62vh,640px);overflow-y:auto}}.member-row{border-radius:var(--r-xs);min-width:0;min-height:70px;transition:background-color .15s var(--ease);flex-wrap:wrap;align-items:center;gap:12px;padding:8px;display:flex}.member-row .member-avatar{flex:none}.member-row .member-name{flex:auto}.member-row:hover{background:var(--surface-muted)}.member-avatar{background:var(--surface-sunken);border:1px solid var(--border-strong);width:56px;height:56px;color:var(--ink-soft);border-radius:50%;flex:none;place-items:center;font-size:16px;font-weight:800;display:grid;position:relative;overflow:hidden}.member-avatar.active{background:var(--success-soft);border-color:var(--success-border);color:var(--success)}.member-avatar img{z-index:1;object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.member-avatar-initials{z-index:0;position:relative}.member-avatar img+.member-avatar-initials{color:#0000}.member-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ink);font-size:14px;font-weight:700;overflow:hidden}.member-name.inactive{color:var(--ink-muted);font-weight:600}.permission-badge{border-radius:var(--r-pill);background:var(--success-soft);border:1px solid var(--success-border);color:var(--success);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;padding:4px 10px;font-size:11px;font-weight:850}.permission-toggle{min-height:30px;color:var(--ink-muted);align-items:center;gap:8px;font-size:13px;font-weight:650;display:inline-flex}.permission-toggle input{width:18px;height:18px;min-height:18px;accent-color:var(--success);cursor:pointer}.member-actions{flex-wrap:wrap;flex:100%;justify-content:space-between;align-items:center;gap:10px;display:flex}.member-profile-form{flex:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:8px;width:100%;min-width:0;max-width:100%;display:grid}.member-profile-form input,.member-profile-form .icon-button{width:100%;min-width:0}.member-rename-button{flex:none}.you-tag{color:var(--ink-faint);font-size:12px;font-weight:600}.member-kick-button,.member-ban-button,.member-clear-songs-button{min-height:34px;padding:0 10px;font-size:12px}.inactive-member-list{border-top:1px solid var(--border);gap:10px;margin-top:8px;padding-top:14px;display:grid}.inactive-member-list-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.inactive-member-list-header h3{color:var(--ink-soft);font-size:13px;font-weight:850}.inactive-member-list-header span{color:var(--ink-muted);font-size:12px;font-weight:800}.inactive-member-list-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.inactive-kick-all-button{min-height:32px;padding:0 10px;font-size:12px}.ban-list{border-top:1px solid var(--border);gap:10px;margin-top:8px;padding-top:14px;display:grid}.ban-list-header,.ban-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.ban-list-header h3{color:var(--ink-soft);font-size:13px;font-weight:850}.ban-list-header span{color:var(--ink-muted);font-size:12px;font-weight:800}.ban-list-items{gap:8px;display:grid}.ban-row{border:1px solid var(--border);border-radius:var(--r-xs);background:var(--surface-muted);padding:9px}.ban-row div{gap:2px;min-width:0;display:grid}.ban-row strong{text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.ban-row small,.ban-list-empty{color:var(--ink-muted);font-size:12px;font-weight:650}.queue-panel{grid-area:queue}.queue-form{grid-template-columns:minmax(0,1fr) auto;gap:10px;display:grid}.queue-disabled-note{color:var(--ink-muted);font-size:13px;font-weight:650}.queue-preview{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-muted);gap:12px;padding:14px;display:grid}.queue-preview-loading,.queue-preview-error{color:var(--ink-muted);align-items:center;gap:8px;font-size:14px;font-weight:650;display:flex}.queue-preview-error{color:var(--danger-ink)}.preview-video-card{grid-template-columns:132px minmax(0,1fr);align-items:center;gap:14px;display:grid}.preview-video-card img,.preview-playlist-item img{aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xs);background:var(--surface-sunken);width:100%;display:block}.preview-video-card h3,.preview-playlist-head h3{overflow-wrap:anywhere;font-size:15px;font-weight:800}.preview-video-card p:not(.eyebrow),.preview-playlist-head p:not(.eyebrow),.preview-playlist-item small{color:var(--ink-muted);font-size:13px;font-weight:600}.preview-playlist{gap:12px;display:grid}.preview-playlist-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.preview-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.preview-playlist-list{gap:8px;max-height:360px;padding-right:4px;display:grid;overflow:auto}.preview-playlist-item{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);grid-template-columns:auto 96px minmax(0,1fr);align-items:center;gap:10px;padding:9px;display:grid}.preview-playlist-item input{width:18px;height:18px;min-height:18px;accent-color:var(--accent)}.preview-playlist-item span{gap:3px;min-width:0;display:grid}.preview-playlist-item strong{overflow-wrap:anywhere;font-size:14px;line-height:1.25}.queue-item{grid-template-columns:36px minmax(0,1fr) auto;min-height:66px;padding:11px 12px}.queue-item.read-only{grid-template-columns:36px minmax(0,1fr)}.queue-item.current{border-color:var(--accent);background:linear-gradient(90deg, #e8223c0f, transparent 55%), var(--surface);box-shadow:0 0 0 1px #e8223c2e, var(--shadow-xs)}.queue-item[draggable=true],.overflow-item[draggable=true]{cursor:grab}.queue-item.dragging,.overflow-item.dragging{opacity:.55}.queue-main{min-width:0}.queue-main h3{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.queue-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.queue-vote-button{min-width:92px}.now-tag{border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-hover);letter-spacing:.05em;text-transform:uppercase;align-items:center;gap:5px;padding:2px 8px;font-size:10px;font-weight:850;display:inline-flex}.queue-rank{border-radius:var(--r-xs);background:var(--surface-sunken);border:1px solid var(--border);width:36px;height:36px;color:var(--ink-soft);place-items:center;font-size:14px;font-weight:800;display:grid}.queue-rank.draggable{grid-template-rows:10px 1fr;gap:1px}.queue-item.current .queue-rank{background:var(--accent);border-color:var(--accent);color:#fff}.score{text-align:center;min-width:22px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:850}.settings-panel{grid-area:settings}.mode-control{grid-auto-flow:row}.settings-panel output{color:var(--ink-muted);font-weight:700}.setting-hint{color:var(--ink-muted);margin:-4px 0 0;font-size:13px;font-weight:600;line-height:1.4}.setting-toggle{color:var(--ink-soft);align-items:center;gap:9px;font-size:14px;font-weight:800;display:flex}.setting-toggle input{width:18px;height:18px;min-height:18px;accent-color:var(--success)}.overflow-strip{border-radius:var(--r-sm);border:1px solid var(--violet-border);background:var(--violet-soft);color:var(--violet);text-align:left;cursor:pointer;align-items:center;gap:8px;width:100%;padding:11px 14px;font-size:13px;font-weight:750;display:flex}.overflow-strip:hover{border-color:var(--violet);background:#b79aff2e}.modal-backdrop{z-index:20;background:#11131785;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.overflow-modal{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);width:min(720px,100%);max-height:min(760px,100vh - 48px);box-shadow:var(--shadow-lg);grid-template-rows:auto minmax(0,1fr);gap:18px;padding:20px;display:grid;overflow:hidden}.join-name-modal{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);width:min(420px,100%);box-shadow:var(--shadow-lg);gap:16px;padding:20px;display:grid}.join-name-modal .modal-header>svg{color:var(--ink-muted);flex:none}.join-name-modal .input-with-icon{min-height:48px}.join-name-modal .primary-button{width:100%}.modal-header{justify-content:space-between;align-items:flex-start;gap:14px;display:flex}.modal-header h2{font-size:22px}.overflow-groups{gap:16px;min-height:0;padding-right:4px;display:grid;overflow:auto}.overflow-group{gap:10px;display:grid}.overflow-group h3{color:var(--ink-soft);font-size:13px;font-weight:800}.overflow-list{gap:10px;display:grid}.overflow-item{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-muted);grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:62px;padding:11px 12px;display:grid}.overflow-remove-button{flex:none;min-height:34px;padding:0 10px}.modal-header-actions{flex:none;align-items:center;gap:8px;display:flex}.event-line{flex-wrap:wrap;grid-area:events;gap:8px;display:flex}.event-line:empty{display:none}.room-event{border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-soft);box-shadow:var(--shadow-xs);padding:7px 13px;font-size:13px;font-weight:650}.room-event.warning{border-color:var(--host-border);background:var(--host-soft);color:var(--host)}.room-event.error{border-color:var(--danger-border);background:var(--danger-soft);color:var(--danger-ink)}@media (width<=920px){.lobby-grid,.room-grid{grid-template-columns:1fr}.lobby-grid{grid-template-areas:"identity""create""private""rooms""library"}.room-grid{grid-template-areas:"player""queue""members""settings""events"}.no-settings-grid{grid-template-areas:"player""queue""members""events"}.queue-only-grid{grid-template-areas:"queue""members""events"}}@media (width<=620px){.app-shell{width:min(100% - 24px,1180px);padding-top:14px}.topbar{flex-direction:column;align-items:flex-start;padding-bottom:16px}.sample-banner-ad{flex-basis:auto;width:100%;min-width:0;max-width:none;height:64px}.topbar-actions{justify-content:stretch;width:100%}.topbar-actions .icon-text-button{flex:1}.identity-row .input-with-icon{flex-basis:100%}.identity-avatar-row{align-items:flex-start}.queue-form,.library-publish-form,.room-card,.preview-video-card,.song-history-item{grid-template-columns:1fr}.preview-playlist-head{flex-direction:column;align-items:flex-start}.preview-actions{justify-content:stretch;width:100%}.preview-actions .icon-text-button{flex:1}.preview-playlist-item{grid-template-columns:auto 82px minmax(0,1fr)}.library-list,.crossfade-controls{grid-template-columns:1fr}.queue-item{grid-template-columns:36px minmax(0,1fr)}.queue-actions{grid-column:1/-1;justify-content:stretch}.queue-actions .icon-button,.queue-actions .icon-text-button{flex:1}.member-profile-form{flex-basis:100%;grid-template-columns:minmax(0,1fr) auto auto}.member-profile-form input:first-child,.member-profile-form input:nth-child(2){grid-column:1/-1}.segmented:not(.mode-control){grid-auto-flow:row}}.queue-search-input{min-height:44px}.queue-search-input input{background:0 0;flex:auto;width:100%;min-width:0}.queue-tabs{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-muted);gap:4px;padding:4px;display:flex}.queue-tabs button{border-radius:var(--r-xs);min-height:36px;color:var(--ink-muted);cursor:pointer;transition:background-color .15s var(--ease), color .15s var(--ease);background:0 0;border:0;flex:1;justify-content:center;align-items:center;gap:6px;padding:0 10px;font-size:13px;font-weight:750;display:inline-flex}.queue-tabs button:hover:not(.active){color:var(--ink-soft)}.queue-tabs button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs)}.room-history{gap:10px;display:grid}.history-tag{border-radius:var(--r-pill);letter-spacing:.02em;text-transform:uppercase;vertical-align:middle;margin-left:8px;padding:2px 8px;font-size:11px;font-weight:800}.history-tag.skipped{background:var(--host-soft);border:1px solid var(--host-border);color:var(--host)}.trim-controls{border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-muted);grid-template-columns:minmax(0,1fr) 132px minmax(96px,120px) minmax(96px,120px) auto auto;align-items:end;gap:10px;margin-top:16px;padding:14px;display:grid}.trim-head{min-width:0;color:var(--ink-soft);align-items:center;gap:8px;font-size:12px;font-weight:750;display:flex}.trim-head span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.trim-unit-toggle{min-width:132px}.trim-unit-toggle button{min-height:42px}.trim-field{gap:6px;min-width:0;display:grid}.trim-field label{color:var(--ink-soft);font-size:12px;font-weight:800}.trim-field input{width:100%}@media (width<=620px){.trim-controls{grid-template-columns:1fr 1fr}.trim-head,.trim-unit-toggle{grid-column:1/-1}.trim-unit-toggle{width:100%}.trim-controls>.secondary-button,.trim-controls>.icon-text-button{grid-column:1/-1}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}
