:root {
	color-scheme:dark;
	--bg:#070925;
	--surface:#171b39;
	--raised:#20253e;
	--line:#ffffff18;
	--text:#f2f3fa;
	--muted:#b3bad1;
	--accent:#a199ff;
	--accent-solid:#8278f5;
	--highlight:#ff0050;
	--danger:#ffabb7;
	--scroll-thumb:#8278f5;
	--scroll-thumb-hover:#a199ff;
	font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	font-size:16px;
	line-height:1.5;
}
* { box-sizing:border-box; }
/* Keep native scrolling and let high-contrast mode use system colours. */
@media (forced-colors:none) {
	* { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }
	@supports selector(::-webkit-scrollbar) {
		* { scrollbar-width:auto; scrollbar-color:auto; }
		::-webkit-scrollbar { width:12px; height:12px; }
		::-webkit-scrollbar-track { background:transparent; }
		::-webkit-scrollbar-thumb { min-height:36px; min-width:36px; border:3px solid transparent; border-radius:999px; background:var(--scroll-thumb); background-clip:padding-box; }
		::-webkit-scrollbar-thumb:hover { background-color:var(--scroll-thumb-hover); }
		::-webkit-scrollbar-thumb:active { background-color:var(--accent); }
		::-webkit-scrollbar-corner { background:transparent; }
	}
}
body { margin:0; background:var(--bg); color:var(--text); }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; border:0; background:none; }
button:disabled { opacity:.42; cursor:default; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin:0; }
h1 { font-size:46px; line-height:1.15; letter-spacing:-1.8px; font-weight:600; }
h2 { font-size:21px; font-weight:600; line-height:1.35; }
h3 { font-size:18px; font-weight:600; }
p { color:var(--muted); }
small { font-size:14px; line-height:1.5; }
svg { width:22px; height:22px; display:block; flex:none; }
[data-icon] { display:inline-flex; align-items:center; justify-content:center; flex:none; }
[hidden] { display:none!important; }
.admin-view { padding:34px 42px 48px; min-width:0; }
.admin-view .library-heading { padding:0; align-items:center; }
.admin-view>.form-message { margin-bottom:12px; }
.admin-intro { margin-top:12px; }
.admin-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:28px 0; }
.admin-stats>div { display:flex; flex-direction:column; padding:20px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,#252148a0,#171b3950); }
.admin-stats strong { font-size:32px; font-weight:600; line-height:1.25; }
.admin-stats span { margin-top:4px; color:var(--muted); font-size:14px; }
.admin-tabs,.admin-actions,.admin-pagination { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.admin-tabs { padding-bottom:20px; border-bottom:1px solid var(--line); }
.admin-search { display:flex; gap:12px; margin-top:24px; align-items:center; flex-wrap:wrap; }
.admin-search input { flex:1; min-width:180px; width:auto; margin:0; }
.admin-list { display:grid; gap:12px; }
.admin-row { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px; background:#ffffff04; border:1px solid var(--line); border-radius:12px; }
.admin-row-info { min-width:0; overflow-wrap:anywhere; }
.admin-row h2 { font-size:18px; }
.admin-row p { margin-top:4px; }
.admin-row-meta { display:flex; flex-direction:column; gap:4px; margin-top:10px; color:var(--muted); font-size:14px; }
.admin-row .admin-actions { flex-shrink:0; }
.admin-pagination { margin-top:24px; justify-content:flex-end; }
.admin-pagination span { color:var(--muted); font-size:14px; }
.admin-note { margin-top:20px; max-width:70ch; }
.admin-confirm textarea { width:100%; box-sizing:border-box; font:inherit; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:12px; resize:vertical; }
.admin-confirm .admin-actions { justify-content:flex-end; }
@media(max-width:1100px){.admin-row{align-items:flex-start;flex-direction:column}.admin-view{padding:28px 24px 40px}}
@media(max-width:600px){.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.admin-stats>div{padding:16px}.admin-view{padding:24px 18px 32px}.admin-row{padding:16px}.admin-view h1{font-size:36px}.admin-tabs{gap:8px}}
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.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; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:12px; background:var(--raised); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.primary,.secondary,.sidebar-create { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:11px 18px; border-radius:8px; font-size:15px; font-weight:600; line-height:1.4; }
.primary { background:var(--accent-solid); color:#fff; }
.primary:hover:not(:disabled) { background:#9389ff; }
.secondary,.sidebar-create { background:#252b47; border:1px solid #434b70; color:var(--text); }
.secondary:hover:not(:disabled),.sidebar-create:hover { background:#303758; }
.compact { min-height:42px; padding:9px 14px; }
.full { width:100%; }
.icon-button { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:7px; color:var(--muted); flex:none; }
.icon-button:hover:not(:disabled) { background:#ffffff0c; color:#fff; }
.text-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:7px 4px; font-size:14px; font-weight:550; color:var(--muted); }
.text-button:hover { color:#fff; }
.muted { color:var(--muted); font-size:14px; }
.app-shell { display:grid; grid-template-columns:246px minmax(0,1fr); min-height:100dvh; padding-bottom:132px; }
.sidebar { position:fixed; top:0; left:0; bottom:120px; width:246px; padding:30px 20px 20px; background:linear-gradient(180deg,#1c243c,#171c32 65%); display:flex; flex-direction:column; overflow:auto; }
.brand { display:flex; gap:11px; align-items:center; font-size:22px; font-weight:600; letter-spacing:-.7px; margin:0 0 38px 3px; }
.brand img { border-radius:10px; }
.nav-item { display:flex; align-items:center; gap:13px; width:100%; min-height:48px; padding:10px 13px; margin-bottom:7px; text-align:left; border-radius:7px; font-size:15px; color:var(--muted); }
.nav-item.active { color:#fff; background:#303750; }
.nav-item:hover { background:#2a304a; color:#fff; }
.section-label,.eyebrow { color:var(--muted); font-size:14px; font-weight:550; line-height:1.4; letter-spacing:.6px; }
.room-label { display:flex; align-items:center; justify-content:space-between; margin:24px 4px 6px; }
.saved-rooms { display:grid; gap:4px; min-width:0; }
.saved-room { display:flex; align-items:center; gap:11px; width:100%; min-width:0; padding:11px 8px; text-align:left; border-radius:7px; }
.saved-room:hover,.saved-room.selected { background:#ffffff09; }
.saved-room-art { display:grid; place-items:center; width:39px; height:43px; border-radius:5px; background:#373757; color:#ccc7ff; flex:none; }
.saved-room>span:last-child { min-width:0; }
.saved-room strong,.saved-room small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.saved-room strong { font-size:15px; font-weight:550; }
.saved-room small { color:var(--muted); font-size:14px; margin-top:2px; }
.empty-saved { font-size:15px; line-height:1.7; padding:20px 8px; }
.sidebar-create { margin:20px 0; padding:10px; width:100%; background:transparent; }
.sidebar-bottom { margin-top:auto; padding:26px 8px 0; color:var(--muted); }
.about-version { color:var(--accent); font-variant-numeric:tabular-nums; }
.workspace { grid-column:2; padding:0 42px 36px; min-width:0; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:92px; border-bottom:1px solid #ffffff09; }
.breadcrumb { display:flex; align-items:center; gap:12px; font-size:15px; color:var(--muted); min-width:0; }
#breadcrumb { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.small-brand { display:none; }
.top-actions { display:flex; align-items:center; justify-content:flex-end; gap:12px; flex:none; }
.connection { color:#f2c99d; font-size:14px; }
.welcome { padding-bottom:24px; }
.library-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:48px 0 90px; }
.library-heading h1 { margin-top:12px; }
.library-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
.library-columns { display:flex; justify-content:space-between; padding:14px 4px 14px 104px; border-bottom:1px solid var(--line); font-size:14px; letter-spacing:.8px; color:var(--muted); }
.library-columns span:last-child { width:184px; text-align:center; }
.account-rooms { display:grid; }
.library-group { margin:0 0 24px; }
.library-group h2 { padding:20px 4px 14px; border-bottom:1px solid var(--line); font-size:24px; }
.library-empty { padding:24px 4px; color:var(--muted); }
.account-room { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:24px; align-items:center; padding:23px 4px; border-bottom:1px solid #ffffff0b; }
.playlist-thumbnail { display:grid; place-items:center; width:72px; height:72px; background:#2c3154; border-radius:7px; overflow:hidden; color:#c7c1ff; }
.playlist-thumbnail img { width:100%; height:100%; object-fit:cover; }
.playlist-thumbnail svg { width:30px; height:30px; }
.account-room h3 { margin-bottom:6px; overflow-wrap:anywhere; }
.account-room p { font-size:14px; }
.account-room-actions { display:flex; gap:16px; align-items:center; }
#legacy-rooms { margin-top:44px; }
#legacy-rooms>p { margin-top:10px; }
#legacy-room-list .account-room { grid-template-columns:1fr auto; }
.welcome-heading { position:relative; isolation:isolate; margin-inline:calc(-1 * var(--workspace-pad)); padding:42px var(--workspace-pad) 52px; }
.welcome-heading::before { content:""; position:absolute; z-index:-1; inset:-82px 0 0; background:radial-gradient(ellipse at 94% 8%,#ff005035,transparent 58%),radial-gradient(ellipse at 37% 24%,#9591a589,transparent 48%),linear-gradient(105deg,#272b5399,#473b6177 52%,#4b204cbb); pointer-events:none; }
.welcome-heading h1 { margin:12px 0 14px; font-size:clamp(36px,4.4vw,60px); line-height:1.12; text-wrap:balance; }
.welcome-heading p:last-child { font-size:clamp(17px,1.5vw,20px); line-height:1.6; max-width:64ch; text-wrap:balance; }
.welcome-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px; }
.entry-card { padding:28px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.entry-card p { margin:14px 0 24px; max-width:430px; font-size:16px; }
.app-promo { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:36px; padding:28px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(120deg,#8278f51c,#ff005008); }
.app-promo>img { flex:none; border-radius:16px; }
.app-promo-copy { flex:1 1 260px; }
.app-promo-copy p { margin-top:10px; max-width:60ch; }
.app-platforms { display:flex; flex:1 1 100%; flex-wrap:wrap; gap:16px; }
.app-platforms p { flex:1 1 200px; padding:16px 20px; background:var(--bg); border-radius:8px; }
.app-platforms strong,.app-platforms span { display:block; }
.app-platforms strong { color:var(--text); font-weight:600; }
.app-platforms span { margin-top:4px; font-size:14px; }
.app-platforms a { margin-top:10px; }
.native-shell .app-promo { display:none; }
.input-button { display:flex; align-items:center; gap:8px; background:#101527; border:1px solid #4a5274; border-radius:11px; padding:6px; transition:border-color .3s ease,box-shadow .3s ease; }
.input-button:focus-within { border-color:#b7afff; box-shadow:0 0 0 3px #a79eff24; }
#quick-code { flex:1; margin:0; min-height:48px; padding:10px 12px; border:0; border-radius:5px; background:transparent; box-shadow:none; outline:none; }
.input-button .icon-button { width:48px; height:48px; flex:0 0 48px; border-radius:7px; background:var(--accent-solid); color:#fff; }
.input-button .icon-button:focus-visible { outline-color:#fff; outline-offset:-4px; }
#login-button { background:var(--highlight); color:#fff; }
#login-button:hover:not(:disabled) { background:#df0046; }
.room-heading { display:flex; align-items:center; gap:30px; padding:42px; margin:0 -42px 32px; background:linear-gradient(112deg,#2c3454 0%,#272943 54%,#30274d 100%); }
.playlist-cover { display:grid; place-items:center; width:166px; height:166px; border-radius:9px; background-color:#424566; background-size:cover; background-position:center; box-shadow:0 12px 32px #080a1738; flex:none; }
.playlist-heading-text { min-width:0; }
.room-heading h1 { margin:12px 0 13px; font-size:clamp(34px,4.1vw,56px); overflow-wrap:anywhere; }
.room-subtitle { display:flex; gap:12px; flex-wrap:wrap; font-size:15px; color:#d1d2e4; }
.room-actions { display:flex; align-items:center; gap:10px; margin-top:20px; }
.room-actions .secondary { background:#ffffff0a; border-color:#a5a2d151; }
#room-code { letter-spacing:1.1px; }
.room-grid { display:grid; grid-template-columns:minmax(0,1fr) 308px; gap:34px; align-items:start; }
.music-column { min-width:0; }
.now-playing { display:grid; grid-template-columns:minmax(235px,1fr) minmax(0,1fr); gap:23px; margin-bottom:30px; align-items:center; }
.now-playing:not(.has-local-player) { display:block; }
.now-playing:not(.has-local-player) .now-visual { display:none; }
.now-visual { position:relative; aspect-ratio:16/9; min-height:200px; background:#090c18; border-radius:7px; overflow:hidden; }
#youtube-wrap { position:absolute; inset:0; width:100%; height:100%; }
#youtube-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.player-art { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--muted); font-size:14px; }
.player-art svg { width:38px; height:38px; color:#9797c7; }
.now-info { min-width:0; }
.now-info h2 { font-size:23px; margin:9px 0 7px; overflow-wrap:anywhere; }
.now-info>p { font-size:15px; }
.now-info .secondary { margin-top:18px; }
.player-notice { margin-top:12px; line-height:1.5; font-size:14px!important; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:19px; }
.section-heading h2 { display:flex; align-items:center; gap:10px; }
.count-badge { font-size:15px; color:var(--muted); font-weight:400; }
.queue-labels,.track-row { display:grid; grid-template-columns:24px minmax(0,1fr) 64px 78px; gap:13px; align-items:center; }
.queue-labels { padding:13px 3px; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; letter-spacing:.4px; }
.queue-labels>span:nth-child(3) { text-align:center; }
.track-row { min-height:86px; border-bottom:1px solid #ffffff0a; padding:12px 3px; }
.track-row:hover { background:#ffffff03; }
.track-number { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }
.track-main { display:flex; align-items:center; min-width:0; gap:14px; text-align:left; padding:0; }
.track-main:disabled { opacity:1; }
.track-main img { width:48px; height:48px; object-fit:cover; border-radius:5px; flex:none; }
.track-main>span { min-width:0; }
.track-main strong,.track-main small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track-main strong { font-size:16px; font-weight:550; }
.track-main small { font-size:14px; color:var(--muted); margin-top:4px; }
.vote-button { display:flex; align-items:center; justify-content:center; gap:4px; height:42px; border:1px solid transparent; border-radius:7px; color:var(--muted); font-size:15px; }
.vote-button:hover:not(:disabled),.vote-button.voted { background:#8278f51a; border-color:#8278f555; color:#cac5ff; }
.vote-button svg { width:20px; }
.track-tools { display:flex; justify-content:flex-end; gap:2px; }
.track-tools .icon-button { width:37px; }
.empty-queue { padding:42px 10px; text-align:center; }
.empty-queue h3 { font-size:18px; font-weight:550; margin-bottom:10px; }
.empty-queue p { font-size:16px; }
.room-side { min-width:0; border-left:1px solid #ffffff0c; padding-left:28px; }
.room-side h2 { font-size:20px; }
label { display:block; font-size:15px; margin:19px 0 8px; color:#dce0ef; }
input:not([type=range]):not([type=radio]):not([type=checkbox]),select { display:block; width:100%; min-width:0; min-height:46px; border:1px solid #434c6a; border-radius:7px; background:#101528; color:var(--text); padding:11px 13px; outline-offset:3px; font-size:16px; }
input::placeholder { color:#a6afc9; opacity:1; }
input[readonly] { color:var(--muted); }
input[type=range] { min-width:0; width:100%; accent-color:var(--accent); cursor:pointer; height:5px; }
.add-card .full { margin-top:15px; }
.youtube-search { display:flex; align-items:center; margin-top:22px; gap:4px; }
.youtube-search input { padding-left:11px!important; font-size:15px!important; }
.add-card>small { display:block; color:var(--muted); margin-top:10px; }
.people-section { margin-top:34px; padding-top:25px; border-top:1px solid var(--line); }
.person { display:flex; align-items:center; gap:12px; padding:11px 0; flex-wrap:wrap; }
.person-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#343c60; color:#dedaff; font-size:15px; flex:none; }
.person-info { min-width:0; flex:1; }
.person-info strong,.person-info small { display:block; overflow-wrap:anywhere; }
.person-info strong { font-size:15px; font-weight:550; }
.person-info small { color:var(--muted); font-size:14px; margin-top:2px; }
.person .text-button { margin-left:50px; min-height:30px; padding:0; }
.focus-link { margin-top:30px; }
.player-bar { position:fixed; z-index:20; bottom:12px; left:12px; right:12px; display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,1.25fr) minmax(180px,1fr); align-items:center; gap:32px; min-height:104px; padding:16px 24px; background:linear-gradient(105deg,#252b47,#242840 50%,#2c264a); border:1px solid #424767; border-radius:10px; box-shadow:0 -8px 32px #06091430; }
.bar-track { display:flex; align-items:center; gap:14px; min-width:0; padding:0; text-align:left; border-radius:5px; }
.bar-track>:last-child { min-width:0; }
.bar-cover { display:grid; place-items:center; width:54px; height:54px; border-radius:5px; background:#393d62 center/cover; color:#c7c2fa; flex:none; }
.bar-track strong,.bar-track small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track strong { font-size:15px; font-weight:550; }
.bar-track small { font-size:14px; color:#bec4da; margin-top:5px; }
.transport { min-width:0; }
.transport-buttons { display:flex; justify-content:center; align-items:center; gap:20px; }
.play-button { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:#e4e0ff; color:#252240; }
.play-button svg { width:21px; height:21px; }
.play-button:hover:not(:disabled) { background:#fff; }
.seek-row { display:flex; align-items:center; justify-content:center; gap:12px; font-size:14px; color:#c1c7df; margin-top:8px; font-variant-numeric:tabular-nums; }
.seek-row span { min-width:38px; }
.seek-row span:last-child { text-align:right; }
.volume-controls { display:flex; align-items:center; justify-content:flex-end; gap:12px; color:#c7cce1; }
.volume-controls input { max-width:112px; }
dialog { border:1px solid #444d70; background:#1a2037; color:var(--text); border-radius:12px; padding:30px; width:min(520px,calc(100% - 32px)); max-height:calc(100dvh - 48px); overflow:auto; box-shadow:0 24px 80px #0008; }
dialog::backdrop { background:#060917b8; backdrop-filter:blur(5px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.dialog-heading h2 { font-size:26px; letter-spacing:-.5px; }
dialog p { font-size:16px; line-height:1.65; }
dialog .full { margin-top:18px; }
dialog details { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
summary { cursor:pointer; font-size:15px; color:#d6d6eb; }
details>p { margin-top:12px; }
.form-message { margin-top:15px; overflow-wrap:anywhere; color:#d4ceff; }
.form-message:empty { display:none; }
#login-form>p:last-child { margin-top:20px; font-size:15px; }
#account-email,#login-confirm-email { overflow-wrap:anywhere; }
.mode-choice { border:0; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mode-choice legend { margin-bottom:9px; font-size:15px; }
.mode-choice label { position:relative; margin:0; }
.mode-choice input { position:absolute; opacity:0; }
.mode-choice label>span { display:flex; flex-direction:column; align-items:flex-start; gap:10px; height:100%; padding:18px; border:1px solid #444d70; border-radius:8px; }
.mode-choice strong { font-size:16px; font-weight:600; }
.mode-choice small { font-size:14px; color:var(--muted); }
.mode-choice input:checked+span { border-color:var(--accent); background:#8278f517; }
.mode-choice input:focus-visible+span { outline:2px solid var(--accent); outline-offset:3px; }
.danger { min-height:46px; padding:12px 16px; border:1px solid #8a475a; border-radius:7px; color:#ffc2cf; background:#522b3d40; font-size:15px; }
.about-copy p+p { margin-top:20px; }
.about-information { display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:24px; }
.about-information a { color:var(--text); text-underline-offset:4px; }
.about-footer { display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:28px; padding-bottom:8px; }
.about-footer .about-version { margin:0; }
.about-credit { margin-top:8px; color:var(--muted); font-size:14px; text-decoration:none; }
.about-credit:hover { color:var(--text); }
.toast { position:fixed; bottom:135px; left:50%; transform:translateX(-50%); z-index:100; width:max-content; max-width:calc(100vw - 32px); border:1px solid #59628a; border-radius:8px; padding:14px 20px; background:#303752; box-shadow:0 10px 40px #0005; color:#fff; font-size:15px; }
.side-hidden .room-grid { grid-template-columns:1fr; }
.side-hidden .room-side { display:none; }
.restore-side { position:fixed; right:14px; top:115px; z-index:15; background:#353a5d; color:#fff; }

/* The playlist canvas follows the supplied Winamp composition. */
body { background:radial-gradient(ellipse at 2% 60%,#23344e 0,transparent 48%),#070925; }
.app-shell { grid-template-columns:240px minmax(0,1fr); padding-bottom:128px; }
.sidebar { width:240px; bottom:0; padding:30px 22px 145px; background:linear-gradient(155deg,#345263c9,#262a49b8 48%,#171c36b8); border-right:1px solid #ffffff0c; backdrop-filter:blur(24px); }
.brand { margin-bottom:38px; }
.nav-item.active { background:#d7e2ff12; }
.sidebar-create { border-color:#c5c7ee3d; }
.saved-room-art { width:30px; height:34px; background:transparent; }
.saved-room small { display:none; }
.workspace { position:relative; isolation:isolate; padding:0 40px 44px; background:linear-gradient(120deg,#12364c30,transparent 48%),#070925b8; }
.workspace::before { content:""; position:absolute; z-index:-1; inset:0 0 auto; height:305px; background:radial-gradient(ellipse at 94% 8%,#ff005035,transparent 58%),radial-gradient(ellipse at 37% 24%,#9591a589,transparent 48%),linear-gradient(105deg,#272b5399,#473b6177 52%,#4b204cbb); }
.workspace:has(#welcome:not([hidden]) #public-intro:not([hidden]))::before { display:none; }
.topbar { position:relative; z-index:2; min-height:82px; border:0; background:transparent; }
.top-actions .secondary { background:#d6dcff0c; border-color:#ffffff18; }
.room-heading { position:relative; min-height:230px; margin:0 -40px; padding:34px 40px 46px; align-items:flex-end; gap:28px; background:none; isolation:isolate; }
.room-heading::before { content:""; position:absolute; z-index:-1; inset:-82px 0 0; background-image:linear-gradient(95deg,#18265165,#33305a70 50%,#45215d99),var(--playlist-art); background-position:center; background-size:cover; filter:blur(28px); opacity:.4; clip-path:inset(0); }
.playlist-cover { width:172px; height:172px; border-radius:4px; box-shadow:0 14px 36px #0005; }
.room-heading h1 { font-size:clamp(36px,4.2vw,64px); letter-spacing:-1.7px; font-weight:600; line-height:1.08; margin:6px 0; }
.room-heading .eyebrow { color:#ddd9ed; letter-spacing:.3px; }
.room-subtitle { font-size:16px; color:#d4d6ea; }
.playlist-toolbar { display:flex; align-items:center; gap:14px; min-height:94px; padding:14px 0 22px; }
.playlist-play { min-width:116px; background:var(--highlight); color:#fff; font-weight:600; }
.playlist-play,#listen-button { min-height:44px; padding:10px 14px; font-size:15px; line-height:22px; border:1px solid transparent; }
.playlist-play>span,#listen-button>span { display:inline-flex; align-items:center; }
.playlist-play:hover:not(:disabled) { background:#ff3975; }
.playlist-tools { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-left:auto; }
.playlist-tools .secondary,.playlist-toolbar>.secondary { border-color:#b4b6e42e; background:#ffffff06; }
#member-count { white-space:nowrap; }
#room-code { font-size:14px; letter-spacing:.7px; }
.player-notice { margin:0; }
.player-notice:not(:empty) { padding:0 0 20px; }
.room-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:30px; }
.has-player .room-grid { grid-template-columns:minmax(0,1fr) 356px; }
.now-playing,.now-playing:not(.has-local-player) { display:block; margin:0; }
.now-playing { padding-top:13px; }
.now-info { padding:17px 0; }
.now-info h2 { font-size:17px; line-height:1.5; margin:8px 0; }
.now-info>p { font-size:14px; }
.now-visual { min-height:200px; border-radius:5px; }
.track-search { margin:0 0 30px; max-width:850px; }
.track-search>label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); margin:0; }
.search-input { display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 6px 6px 18px; background:#bec9ff0b; border:1px solid #b4bce038; border-radius:9px; }
.search-input:focus-within { border-color:#b7afff; box-shadow:0 0 0 3px #a79eff13; }
.search-input>span { color:#cac7e9; }
.search-input input { background:none!important; border:0!important; outline:none; padding:8px 0!important; box-shadow:none; min-height:42px!important; }
.search-input .primary { min-width:88px; min-height:42px; padding:9px 16px; }
#search-hint { font-size:14px; padding:9px 2px 0; color:#b5b7cf; }
.search-panel { padding:22px; margin:0 0 30px; background:#bac0ff09; border:1px solid #c6caff21; border-radius:10px; }
.search-panel .section-heading { margin-bottom:10px; }
#search-results { max-height:min(50dvh,450px); overflow:auto; overscroll-behavior:contain; padding-right:18px; }
#search-message { font-size:15px; }
#search-message:empty { display:none; }
.search-result { display:grid; grid-template-columns:88px minmax(0,1fr) auto; align-items:center; gap:16px; padding:15px 0; border-top:1px solid #ffffff12; }
.search-result:first-child { border:0; }
.search-result img { width:88px; aspect-ratio:16/9; object-fit:cover; border-radius:4px; }
.search-result h3 { font-size:16px; line-height:1.45; font-weight:550; overflow-wrap:anywhere; }
.search-result p { font-size:14px; margin-top:4px; }
.search-result button { background:#ffffff08; }
.queue-section>.section-heading { margin:0 0 12px; }
.queue-labels,.track-row { grid-template-columns:25px minmax(0,1fr) minmax(100px,.3fr) 60px 78px; gap:16px; }
.queue-labels { padding:15px 8px; font-size:14px; letter-spacing:0; }
.queue-labels>span:nth-child(3) { text-align:left; }
.queue-labels>span:nth-child(4) { text-align:center; }
.track-row { min-height:76px; padding:12px 8px; border-bottom:1px solid #ffffff09; border-radius:5px; }
.track-row:hover { background:#b3b1ff08; }
.track-main strong { font-size:16px; font-weight:500; }
.track-main small { display:none; }
.track-main img { width:42px; height:42px; border-radius:3px; }
.track-creator { font-size:15px; color:#c2c4d9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.current-track { background:linear-gradient(100deg,#a69dff15,#aba3ff0e 45%); }
.current-track .track-main strong,.current-track .track-number { color:#c7bfff; }
.current-track .track-main small { display:block; font-size:14px; color:#b1abd5; margin-top:3px; }
.track-number svg { width:20px; height:20px; }
.player-bar { bottom:16px; left:16px; right:16px; min-height:94px; padding:13px 24px; border:1px solid #dfddff24; border-top-color:#eeeaff3d; border-radius:10px; background:radial-gradient(ellipse at 100% 100%,#ff005024,transparent 55%),linear-gradient(100deg,#4c568d55,#33376177 48%,#55396c70); backdrop-filter:blur(28px) saturate(145%); -webkit-backdrop-filter:blur(28px) saturate(145%); box-shadow:0 14px 38px #0004,inset 0 1px #ffffff06; }
.bar-cover { width:48px; height:48px; border-radius:4px; background-color:#a99ce019; }
.play-button { background:#f2eeff; width:40px; height:40px; }
.transport-buttons { gap:19px; }
.seek-row { margin-top:5px; }
input[type=range] { appearance:none; -webkit-appearance:none; height:4px; border-radius:4px; background:#dbd6ff4a; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#d8d0ff; border:0; }
input[type=range]::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:#d8d0ff; border:0; }
#seek { height:28px; border:0; background:transparent; }
#seek::-webkit-slider-runnable-track { height:4px; border:0; border-radius:4px; background:#dbd6ff4a; }
#seek::-moz-range-track { height:4px; border:0; border-radius:4px; background:#dbd6ff4a; }
#seek::-webkit-slider-thumb { box-sizing:border-box; width:24px; height:24px; margin-top:-10px; background:var(--highlight); border:4px solid #f0dce8; box-shadow:none; }
#seek::-moz-range-thumb { box-sizing:border-box; width:24px; height:24px; background:var(--highlight); border:4px solid #f0dce8; box-shadow:none; }
.video-stage { min-width:0; container-type:inline-size; }
.video-surface { position:absolute; inset:0; z-index:1; width:100%; height:100%; padding:0; border:0; border-radius:inherit; background:transparent; touch-action:manipulation; }
.video-surface:disabled { pointer-events:none; }
.video-surface:focus-visible { outline-offset:-4px; }
.video-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding-top:10px; }
.video-actions .secondary { background:#d5ceff0b; border-color:#c5c3ef30; font-size:14px; padding:9px 12px; }
@container (max-width:319px) { .video-actions { grid-template-columns:minmax(0,1fr); } }
@container (min-width:640px) { .video-actions { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.video-actions [aria-pressed=true] { background:#ff005019; border-color:#ff005080; }
#video-expand { scroll-margin-bottom:170px; }
.video-transport { display:none; width:48px; height:48px; border-radius:10px; background:var(--highlight); color:#fff; }
.video-transport:hover:not(:disabled) { background:#ff3975; color:#fff; }
.has-player.video-expanded .room-grid { grid-template-columns:minmax(0,1fr); gap:0; }
.has-player.video-expanded .now-playing { position:absolute; inset:0 0 auto; width:100%; padding:0; max-width:none; z-index:auto; }
.has-player.video-expanded .video-stage:not(:fullscreen) { container-type:normal; }
.has-player.video-expanded .video-stage:not(:fullscreen) .now-visual { z-index:0; aspect-ratio:auto; height:var(--backdrop-stage-height,var(--backdrop-video-height)); border-radius:0; }
.has-player.video-expanded .video-stage:not(:fullscreen) #youtube-wrap iframe { position:absolute; left:50%; width:max(100%,calc(var(--backdrop-stage-height,var(--backdrop-video-height)) * 16 / 9)); height:100%; transform:translateX(-50%); }
.has-player.video-expanded .now-info { display:none; }
.has-player.video-expanded .room-heading { z-index:1; padding-bottom:92px; margin-top:max(0px,calc(var(--backdrop-video-height,500px) - 220px)); background:linear-gradient(0deg,#070925da,#07092580 50%,#07092500); }
.has-player.video-expanded .room-heading::before { display:none; }
.has-player.video-expanded .playlist-toolbar,.has-player.video-expanded .music-column,.has-player.video-expanded .player-notice { position:relative; z-index:1; }
.has-player.video-expanded .video-actions { position:absolute; z-index:3; bottom:24px; right:var(--workspace-pad); width:auto; grid-template-columns:repeat(4,44px); padding:0; }
.has-player.video-expanded .video-actions .secondary { background:#101426c9; backdrop-filter:blur(18px); border-color:#ffffff30; }
@media(min-width:1550px) {
	.has-player.video-expanded .room-heading { padding-bottom:24px; padding-right:calc(var(--workspace-pad) + 232px); align-items:flex-end; }
}
.has-player.video-expanded .topbar { margin-inline:calc(-1 * var(--workspace-pad)); padding-inline:var(--workspace-pad); background:linear-gradient(180deg,#07092591,#07092533 68%,#07092500); backdrop-filter:none; }
#youtube-wrap,#youtube-wrap iframe { pointer-events:none; user-select:none; }
#start-audio { position:relative; z-index:2; margin-bottom:20px; }
.video-stage:fullscreen { display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; background:#000; padding:0 0 12px; container-type:normal; }
.video-stage:fullscreen .now-visual { flex:1; min-height:0; width:100%; max-width:calc((100dvh - 64px)*16/9); max-height:calc(100vw*9/16); margin:auto; border-radius:0; }
.video-stage:fullscreen .video-actions { position:static!important; display:flex; align-items:center; flex-wrap:wrap; flex:none; justify-content:center; min-height:52px; width:auto; }
.video-stage:fullscreen .video-transport { display:inline-flex; }
.video-stage:fullscreen #video-expand { display:none; }
dialog { background:linear-gradient(145deg,#262740f5,#141830fa); border-color:#b9b8e135; border-radius:16px; box-shadow:0 30px 100px #0008; }
#settings-dialog { width:min(650px,calc(100% - 32px)); }
.settings-group { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.settings-group h3 { margin:0 0 18px; font-size:17px; font-weight:600; }
.settings-group>.setting-choice:first-of-type { margin-top:0; }
.settings-note { margin:12px 0 0; font-size:14px; }
#vote-access .choice-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
#order .choice-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:740px) {
	#vote-access .choice-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
	#order .choice-options { display:grid; grid-template-columns:1fr; }
}
.queue-section.voting-off .vote-button,.queue-section.voting-off .votes-label { visibility:hidden; }
#queue-order { text-align:right; line-height:1.45; }
.setting-choice { border:0; padding:0; margin:25px 0 0; min-width:0; }
.setting-choice legend { font-size:16px; margin-bottom:11px; }
.choice-options { display:flex; gap:8px; }
.choice-options label { position:relative; flex:1; min-width:0; margin:0; cursor:pointer; }
.choice-options input { position:absolute; opacity:0; width:1px; height:1px; }
.choice-options label>span { display:flex; flex-direction:column; gap:5px; justify-content:center; min-height:67px; height:100%; padding:13px 14px; border:1px solid #a6accc35; border-radius:8px; background:#ffffff03; }
.choice-options strong { font-size:15px; font-weight:550; }
.choice-options small { font-size:14px; color:#bbbdd3; }
.choice-options input:checked+span { background:#9d90ff1f; border-color:#b8acff; box-shadow:inset 0 0 0 1px #b8acff33; }
.choice-options input:checked+span strong { color:#e6e0ff; }
.choice-options input:focus-visible+span { outline:2px solid var(--accent); outline-offset:3px; }
.choice-options input:disabled+span { opacity:.5; cursor:not-allowed; }
.setting-choice:disabled { opacity:.55; }
.settings-footer { display:flex; justify-content:flex-end; gap:12px; padding-top:28px; }
#participants-dialog .person { padding:17px 0; border-top:1px solid #ffffff12; }
#participants-dialog .person:first-child { border:0; }
@media(min-width:1700px) { .workspace { padding-left:54px; padding-right:54px; } .room-heading { margin-left:-54px; margin-right:-54px; padding-left:54px; padding-right:54px; } .playlist-cover { width:192px; height:192px; } .room-heading { min-height:248px; } .workspace::before { height:318px; } .has-player .room-grid { grid-template-columns:minmax(0,1fr) 356px; } }
@media(max-width:1250px) { .app-shell { grid-template-columns:210px minmax(0,1fr); } .sidebar { width:210px; padding:28px 16px 145px; } .brand { font-size:19px; } .workspace { padding:0 28px 36px; } .room-heading { margin:0 -28px; padding-left:28px; padding-right:28px; } .playlist-cover { width:150px; height:150px; } .has-player .room-grid { grid-template-columns:minmax(0,1fr) 285px; gap:24px; } .playlist-toolbar { flex-wrap:wrap; } .playlist-tools { gap:5px; } .queue-labels,.track-row { grid-template-columns:22px minmax(0,1fr) 52px 72px; gap:12px; } .track-creator,.creator-label { display:none; } .track-main small { display:block; } .player-bar { grid-template-columns:minmax(0,1fr) minmax(270px,1.1fr) 200px; gap:20px; } .volume-controls { gap:8px; } .library-heading { flex-wrap:wrap; } .account-room-actions { gap:10px; } }
@media(max-width:1050px) { .has-player .room-grid { grid-template-columns:1fr; } .now-playing { max-width:400px; } .playlist-tools { margin-left:0; } .volume-controls { display:none; } .player-bar { grid-template-columns:minmax(0,1fr) minmax(260px,1.1fr); } .welcome-grid { grid-template-columns:1fr; } .account-room { grid-template-columns:64px minmax(0,1fr); } .account-room-actions { grid-column:2; } .library-columns span:last-child { display:none; } }
@media(max-width:740px) {
	.sidebar { display:none; } .app-shell { grid-template-columns:1fr; padding-bottom:160px; } .workspace { grid-column:1; padding:0 18px 26px; } .workspace::before { height:265px; } .small-brand { display:inline-flex; }
	.topbar { min-height:76px; gap:10px; flex-wrap:wrap; padding:12px 0; } .breadcrumb { font-size:14px; gap:8px; } .top-actions { gap:5px; margin-left:auto; } .top-actions .compact { font-size:14px; padding:8px 10px; } #focus-button { width:32px; }
	.room-heading { margin:0 -18px; padding:23px 18px 32px; min-height:185px; gap:18px; } .playlist-cover { width:112px; height:112px; } .playlist-cover img { width:44px; height:44px; } .room-heading h1 { font-size:34px; letter-spacing:-1px; margin:6px 0; } .eyebrow { font-size:14px; } .room-subtitle { font-size:14px; gap:7px; }
	.playlist-toolbar { gap:10px; padding:14px 0 20px; } .playlist-tools { width:100%; justify-content:flex-start; gap:5px; } #participants-button { margin-right:auto; } .playlist-toolbar>.secondary { font-size:14px; } .playlist-tools .secondary { padding:8px 10px; } .playlist-tools .icon-button { width:34px; } #room-code { font-size:14px; }
	.search-input { gap:9px; padding-left:12px; } .search-input>span { display:none; } .search-input input { font-size:16px; } .search-input .primary { min-width:72px; font-size:14px; padding:10px; } #search-hint { font-size:14px; }
	.track-search { margin-bottom:25px; } .queue-labels,.track-row { grid-template-columns:18px minmax(0,1fr) 44px 34px; gap:8px; padding-left:2px; padding-right:2px; } .track-main { gap:9px; } .track-main img { width:36px; height:42px; } .track-main strong { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:15px; } .track-main small { font-size:14px; } .track-tools [data-action=up] { display:none; } .track-tools .icon-button { width:34px; } .vote-button { gap:0; font-size:14px; } .section-heading { gap:10px; } .section-heading h2 { font-size:20px; } #queue-order { font-size:14px; }
	.search-panel { padding:15px; } .search-result { grid-template-columns:64px minmax(0,1fr) 42px; gap:10px; } .search-result img { width:64px; } .search-result .secondary { width:42px; padding:8px; } .search-result button>span { display:none; } .search-result h3 { font-size:15px; }
	.player-bar { left:8px; right:8px; bottom:8px; min-height:130px; padding:14px 16px; grid-template-columns:minmax(0,1fr) auto; gap:12px; } .bar-track { gap:10px; } .bar-cover { width:42px; height:42px; } .bar-track strong { font-size:14px; } .transport { display:contents; } .transport-buttons { gap:8px; } .transport-buttons .icon-button { width:30px; } #restart-button { display:none; } .seek-row { grid-column:1/-1; margin:0; } .toast { bottom:152px; }
	dialog { padding:22px; } .dialog-heading h2 { font-size:25px; } .choice-options { gap:6px; } .choice-options label>span { padding:11px 9px; } .choice-options strong { font-size:14px; } #add-access .choice-options,#vote-access .choice-options { flex-wrap:wrap; } #add-access label,#vote-access label { flex-basis:30%; } .settings-footer>* { flex:1; }
	.library-heading { padding:30px 0; align-items:flex-start; } h1 { font-size:36px; } .library-actions { justify-content:flex-start; gap:10px; } .library-actions button { font-size:14px; padding:10px; } .account-room { gap:16px; } .playlist-thumbnail { width:64px; height:64px; } .library-columns { padding-left:84px; } .welcome-heading { padding-top:35px; } .entry-card { padding:24px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.brand .brand-wordmark { display:block; width:100%; max-width:196px; height:auto; border-radius:0; }
.sidebar-bottom { display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.sidebar-bottom .text-button { min-height:34px; padding-block:4px; }
.library-group .account-room { grid-template-columns:minmax(0,1fr) auto; padding-block:13px; }
.account-room-open { display:flex; align-items:center; gap:24px; min-width:0; width:100%; padding:2px 0; border:0; background:none; text-align:left; border-radius:6px; }
.account-room-open:hover { background:#ffffff05; }
.account-room-open>span:last-child { min-width:0; }
.account-room-open .playlist-thumbnail { flex:none; display:grid; place-items:center; }
.account-room-open strong { display:block; font-size:20px; font-weight:600; overflow-wrap:anywhere; margin-bottom:6px; }
.account-room-open small { display:block; font-size:16px; color:var(--muted); }
.notifications { position:fixed; z-index:80; right:24px; bottom:130px; width:min(430px,calc(100vw - 32px)); display:grid; gap:12px; pointer-events:none; }
.notification { position:relative; padding:23px; background:linear-gradient(125deg,#2b2d4df2,#171a33fa); border:1px solid #d1d0f02b; border-radius:14px; backdrop-filter:blur(24px); box-shadow:0 16px 55px #0006; pointer-events:auto; }
.notification.is-dismissing { animation:notification-dismiss .3s ease forwards; pointer-events:none; }
@keyframes notification-dismiss { to { opacity:0; transform:translateY(24px); } }
.notification-copy strong { display:block; font-size:18px; margin:0 22px 7px 0; }
.notification-copy p { margin:0; color:#d1d0e4; font-size:16px; line-height:1.5; }
.notification-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:18px; }
.notification-close { position:absolute; top:6px; right:6px; border:0; border-radius:8px; width:36px; height:36px; background:none; color:#dbd7ef; font-size:26px; }
.notification[data-tone=error] .notification-copy strong { color:#ff91b2; }
.mobile-only { display:none; }
button,a.primary,a.secondary,.choice-options label>span,.mode-choice label>span { transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,opacity .3s ease,translate .3s ease,scale .3s ease; }
button:hover:not(:disabled),a.primary:hover,a.secondary:hover { translate:0 -1px; }
button:active:not(:disabled),a.primary:active,a.secondary:active { translate:0 0; scale:.97; }
.workspace { --workspace-pad:40px; }
@media(min-width:1700px) { .workspace { --workspace-pad:54px; } }
@media(max-width:1250px) { .workspace { --workspace-pad:28px; } }
@media(max-width:1050px) { .library-group .account-room { grid-template-columns:1fr; } .library-group .account-room-actions { grid-column:1; padding-left:88px; } }
@media(max-width:740px) {
	.mobile-only { display:inline-flex; }
	.workspace { --workspace-pad:18px; }
	#breadcrumb { display:none; }
	.notifications { right:16px; bottom:156px; }
	.notification { padding:19px; }
	.account-room-open { gap:16px; }
	.account-room-open strong { font-size:18px; }
	.library-group .account-room-actions { padding-left:80px; }
	.has-player.video-expanded .room-heading { margin-top:max(104px,calc(var(--backdrop-video-height,220px) - 220px)); }
}

/* Shared screen tools and restrained typography. */
strong,b,h1,h2,h3,h4,h5,h6 { font-weight:600; }
.video-actions { gap:8px; }
#cast-dialog { width:min(620px,calc(100% - 32px)); }
.cast-method { margin-top:12px; padding:0; border:1px solid #b8b6e32c; border-radius:10px; overflow:hidden; }
.cast-method summary { display:flex; align-items:center; gap:14px; padding:16px; cursor:pointer; list-style:none; font-size:18px; font-weight:600; background:#9389e90a; }
.cast-method summary::-webkit-details-marker { display:none; }
.cast-method summary>span:first-child { color:#c8c0ff; }
.cast-method summary>span:nth-child(2) { flex:1; }
.cast-method summary small { display:block; color:var(--muted); font-size:14px; font-weight:400; margin-top:4px; }
.cast-method summary>span:last-child { transition:rotate .3s ease; }
.cast-method[open] summary>span:last-child { rotate:90deg; }
.cast-method summary:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.cast-guide { padding:0 20px 16px; }
.cast-guide ol { padding-left:22px; }
.cast-guide li { padding-left:4px; margin:12px 0; line-height:1.55; }
.cast-guide p { font-size:15px; line-height:1.6; }
.cast-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.has-player.video-expanded .topbar { text-shadow:0 1px 8px #000b; }
.video-stage:fullscreen .video-actions { transition:opacity .3s ease,visibility .3s ease; }
.video-controls-hidden .video-stage:fullscreen { cursor:none; }
.video-controls-hidden .video-stage:fullscreen .video-surface { cursor:none; }
.video-controls-hidden .video-stage:fullscreen .video-actions { opacity:0; visibility:hidden; pointer-events:none; }
.listener-status { display:block; margin-top:8px; text-align:center; color:var(--muted); font-size:14px; }
.player-bar.party-guest { grid-template-columns:minmax(0,1fr) auto; }
.radio-listener .volume-controls>input,.radio-listener .volume-controls>span { display:block; }
#mode-change-note { margin-top:12px; font-size:15px; line-height:1.55; }
@media(max-width:1050px) {
 .volume-controls { display:flex; grid-column:1/-1; justify-content:flex-end; }
 .volume-controls>span,.volume-controls>input { display:none; }
}
@media(max-width:740px) {
 .listener-status { grid-column:1/-1; margin-top:0; }
 .radio-listener .volume-controls>input { width:100px; }
 .volume-controls { position:absolute; right:12px; bottom:10px; gap:2px; }
 .volume-controls .icon-button { width:32px; height:32px; }
 .player-bar { padding-bottom:44px; }
 .cast-actions>* { flex:1; }
 .cast-method summary { padding:13px; }
}

/* Guest transport stays beside the track, including on narrow screens. */
.player-bar.party-guest,.player-bar.radio-listener { padding:10px 16px; gap:4px 20px; }
.player-bar.party-guest { min-height:70px; grid-template-columns:minmax(0,1fr) auto; }
.party-guest .bar-track { grid-area:1/1; }
.party-guest .volume-controls { grid-area:1/2; position:static; }
.player-bar.radio-listener { min-height:100px; grid-template-columns:minmax(0,1fr) minmax(210px,280px); grid-template-rows:auto auto; }
.radio-listener .bar-track { grid-area:1/1/3/2; }
.radio-listener .transport { grid-area:1/2; display:flex; align-items:center; justify-content:flex-end; gap:12px; }
.radio-listener .transport-buttons { flex:none; }
.radio-listener .listener-status { order:-1; margin:0; text-align:right; line-height:1.35; }
.radio-listener .volume-controls { grid-area:2/2; position:static; gap:8px; }
.radio-listener .volume-controls>input { width:100px; }
@media(max-width:740px) {
	.player-bar.party-guest,.player-bar.radio-listener { padding:9px 12px; gap:4px 12px; }
	.player-bar.party-guest { min-height:62px; }
	.player-bar.radio-listener { grid-template-columns:minmax(0,1fr) 180px; min-height:96px; }
	.radio-listener .volume-controls { gap:6px; }
	.radio-listener .volume-controls>input { width:66px; }
	.radio-listener .transport { gap:8px; }
}
@media(max-width:520px) {
	.radio-listener .bar-cover { display:none; }
	.radio-listener .bar-track strong { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
}
@media(max-width:360px) {
	.player-bar.radio-listener { grid-template-columns:minmax(0,1fr) 160px; }
	.radio-listener .volume-controls>input { width:46px; }
}

/* Reserve only the space occupied by the current transport, including safe areas. */
.compact-dialog { width:min(460px,calc(100vw - 32px)); }
.compact-dialog .dialog-heading { margin-bottom:18px; }
.dialog-actions { display:flex; gap:12px; margin-top:26px; }
.dialog-actions>button { flex:1; }
.library-link { width:100%; justify-content:space-between; margin-top:6px; padding:10px 8px; }
.playlist-label { display:flex; align-items:center; gap:12px; min-width:0; }
.playlist-label strong { min-width:0; }
.playback-indicator { display:inline-flex; align-items:flex-end; justify-content:center; gap:3px; width:20px; height:20px; flex:none; color:#c5bbff; }
.playback-indicator i { display:block; width:3px; height:14px; border-radius:2px; background:currentColor; transform-origin:bottom; transform:scaleY(.35); }
.playback-indicator i:nth-child(2) { height:20px; }
.playback-indicator.playing i { animation:playlist-level .85s ease-in-out infinite alternate; }
.playback-indicator.playing i:nth-child(2) { animation-delay:-.4s; animation-duration:.65s; }
.playback-indicator.playing i:nth-child(3) { animation-delay:-.2s; animation-duration:1.05s; }
.saved-room.selected .saved-room-art>svg { display:none; }
.account-room.selected .playlist-label strong,.saved-room.selected strong { color:#c5bbff; }
@keyframes playlist-level { from { transform:scaleY(.3); } to { transform:scaleY(1); } }
@media(prefers-reduced-motion:reduce) { .playback-indicator.playing i { animation:none; transform:scaleY(.7); } }
@media(max-width:740px) { .search-panel #search-results { padding-right:14px; } }
body { --player-space:0px; }
.app-shell { padding-bottom:var(--player-space); }
.sidebar { padding-bottom:calc(20px + var(--player-space)); }
.notifications { bottom:calc(16px + var(--player-space)); }
.player-bar { bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
.room-heading h1 { overflow-wrap:anywhere; }
#volume { height:28px; padding:0; background:transparent; touch-action:pan-y; }
#volume::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:#dbd6ff4a; }
#volume::-moz-range-track { height:4px; border-radius:4px; background:#dbd6ff4a; }
#volume::-webkit-slider-thumb { margin-top:-6px; width:16px; height:16px; }
#volume::-moz-range-thumb { width:16px; height:16px; }
@media(max-width:1050px) {
	.player-bar:not(.party-guest):not(.radio-listener) { gap:8px 20px; }
	.player-bar:not(.party-guest):not(.radio-listener) .volume-controls { grid-column:2; }
	.volume-controls>span,.volume-controls>input { display:block; }
	.volume-controls>input { width:90px; }
}
@media(max-width:740px) {
	.player-bar { bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
	.player-bar:not(.party-guest):not(.radio-listener) { min-height:0; padding:10px 12px; gap:6px 10px; }
	.player-bar:not(.party-guest):not(.radio-listener) .volume-controls { position:static; grid-column:1/-1; gap:10px; }
	.volume-controls .icon-button { width:40px; height:40px; }
	.playlist-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
	.playlist-toolbar>.primary,.playlist-toolbar>.secondary { min-width:0; width:100%; padding-inline:10px; }
	.playlist-tools { grid-column:1/-1; }
	input:not([type=radio]):not([type=range]) { font-size:16px; }
	.library-group .account-room-actions { padding-left:0; }
	.library-group .account-room-actions>button:first-child { flex:1; }
	.choice-options { flex-wrap:wrap; }
	#add-access label,#vote-access label { flex-basis:100%; }
	.mode-choice label>span { padding:13px; }
	.room-heading { gap:14px; }
	.welcome-heading { padding-top:28px; padding-bottom:36px; }
	.welcome-heading::before { top:-76px; }
	.welcome-grid { margin-top:20px; }
	.room-heading h1 { font-size:28px; }
	.playlist-cover { width:96px; height:96px; }
	.video-stage:not(:fullscreen) .now-visual { width:100%; min-height:0; }
	.notification { padding:16px; }
	.notification-copy strong { font-size:16px; }
	.notification-copy p { font-size:14px; }
	.notification-actions { margin-top:12px; }
}

/* Shared screen controls keep their labels in the compact player. */
.has-player.video-expanded .video-actions>button,.video-stage:fullscreen .video-actions>button { width:44px; min-width:44px; height:44px; min-height:44px; padding:10px; }
.has-player.video-expanded .video-actions>button>span:not([data-icon]),.video-stage:fullscreen .video-actions>button>span:not([data-icon]) { display:none; }
.video-stage:fullscreen .video-actions [data-cast-open="pip"] { display:none; }
.site-tooltip { position:fixed; z-index:200; width:max-content; max-width:min(300px,calc(100vw - 16px)); padding:8px 12px; border:1px solid #c5c3ef40; border-radius:8px; background:#292d4f; color:#fff; box-shadow:0 4px 18px #0005; font-size:14px; font-weight:400; line-height:1.4; text-align:center; overflow-wrap:anywhere; pointer-events:auto; }
.sidebar-toggle { display:none; }
@media(min-width:741px) {
	body { --sidebar-width:240px; --sidebar-space:var(--sidebar-width); }
	.app-shell { grid-template-columns:var(--sidebar-space) minmax(0,1fr); transition:grid-template-columns .3s ease; }
	.sidebar { width:var(--sidebar-width); transition:transform .3s ease,visibility .3s ease; }
	.sidebar-toggle { display:flex; align-items:center; justify-content:center; position:fixed; z-index:16; top:1rem; left:var(--sidebar-space); width:28px; height:48px; padding:3px; border:1px solid #c5c3ef30; border-left:0; border-radius:0 8px 8px 0; background:#292d4f; color:var(--muted); transition:left .3s ease,background .3s ease,color .3s ease; }
	.sidebar-toggle:hover { color:#fff; background:#363b63; }
	.sidebar-toggle svg { transform:rotate(180deg); transition:transform .3s ease; }
	.sidebar-collapsed { --sidebar-space:0px; }
	.sidebar-collapsed .sidebar { transform:translateX(-100%); visibility:hidden; }
	.sidebar-collapsed .sidebar-toggle svg { transform:rotate(0); }
}
@media(min-width:741px) and (max-width:1250px) { body { --sidebar-width:210px; } }
#remove-track-dialog { position:fixed; margin:0; width:min(340px,calc(100vw - 32px)); padding:20px; border-radius:12px; }
#remove-track-dialog::backdrop { background:#06091735; backdrop-filter:none; }
#remove-track-dialog h2 { font-size:19px; }
#remove-track-name { margin-top:10px; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
#remove-track-dialog .dialog-actions { margin-top:20px; gap:10px; }
#remove-track-dialog .dialog-actions>button { flex:1; padding-inline:12px; }
#remove-track-dialog .primary { background:var(--highlight); }
#remove-track-dialog .primary:hover { background:#ff3975; }
.drag-handle.icon-button { width:100%; min-width:24px; height:44px; padding:0; touch-action:none; cursor:grab; }
.queue-dragging,.queue-dragging * { cursor:grabbing!important; user-select:none; }
.track-dragging { opacity:.45; }
.queue-drop-marker { position:fixed; z-index:45; height:3px; border-radius:3px; background:var(--highlight); pointer-events:none; }
#queue[aria-busy=true] .drag-handle { opacity:.45; cursor:progress; }

/* Independent listening and the saved playlist use the existing controls. */
.personal-tools { margin-bottom:24px; }
.personal-actions { display:flex; flex-wrap:wrap; gap:10px; }
.personal-tools p { margin:12px 0 0; font-size:14px; }
#personal-shuffle[aria-pressed="true"],#edit-playlist[aria-pressed="true"] { background:#ff005024; border-color:#ff0050; color:#fff; }
#settings-mode .choice-options,#copy-mode .choice-options,.mode-choice { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:740px) { #settings-mode .choice-options,#copy-mode .choice-options,.mode-choice { grid-template-columns:1fr; } }

.person-safety{display:flex;flex-wrap:wrap;gap:4px}.person{flex-wrap:wrap}#safety-form select,#safety-form textarea{width:100%;font:inherit;color:inherit;background:var(--surface,#191d38);border:1px solid #727b9d;border-radius:8px;padding:10px;margin:8px 0 16px}#blocks-list .person{justify-content:space-between}

.playlist-tools { flex-wrap:wrap; }
.person-safety .text-button { margin-left:0; padding:6px 10px; }
@media(min-width:1251px) { .queue-labels,.track-row { grid-template-columns:25px minmax(0,1fr) minmax(100px,.3fr) 60px 116px; } }
@media(min-width:741px) and (max-width:1250px) { .queue-labels,.track-row { grid-template-columns:22px minmax(0,1fr) 52px 116px; } }
@media(max-width:740px) { .queue-labels,.track-row { grid-template-columns:18px minmax(0,1fr) 44px 70px; } .track-tools .icon-button { flex:none; } }