/* Tempo — shared console surfaces, controls and responsive layouts. */
:root {
  color-scheme: dark;
  --bg: #101113;
  --surface: #191a1d;
  --surface-2: #222327;
  --surface-3: #2c2e33;
  --text: #f2efe9;
  --muted: #97999f;
  --line: #303136;
  --accent: #efbc91;
  --accent-strong: #ffd3af;
  --warm: #efbc91;
  --green: #a6d2b3;
  --shadow: 0 28px 100px #0008;
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); transition: background 150ms, border-color 150ms, color 150ms, transform 150ms; }
button:hover:not(:disabled) { background-color: var(--surface-3); border-color: #55565c; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled, input:disabled, select:disabled { opacity: .35; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button, input, select { -webkit-tap-highlight-color: transparent; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
a { color: var(--accent); text-underline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
.icon-sprite, .mobile-brand-header, .mobile-page-tabs, .mobile-system-button, .mobile-now-stack { display: none; }
* { scrollbar-width: thin; scrollbar-color: #424349 transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: #424349; border-radius: 10px; }
.app-shell { max-width: 1800px; height: 100dvh; margin: auto; padding: 0 28px 24px; display: flex; flex-direction: column; }
.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 94px; padding: 20px 2px; flex-shrink: 0; }
.brand-block, .brand-row, .brand-title, .top-actions { display: flex; align-items: center; }
.brand-block { gap: 26px; min-width: 0; }
.brand-row { gap: 20px; }
.brand-title { gap: 8px; font-size: 18px; font-weight: 600; letter-spacing: -.7px; white-space: nowrap; }
.brand-title span { border-left: 1px solid #5a5b60; padding-left: 10px; font-weight: 400; }
.brand-logo { width: 112px; height: auto; object-fit: contain; }
.system-link { padding: 7px 10px; background: transparent; border-color: transparent; border-radius: 8px; font-size: 12px; color: var(--muted); }
#connection-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; max-width: 340px; }
#connection-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
#connection-status[data-tone="error"] { color: #f3a09c; }
#connection-status[data-tone="error"]::before { background: #f3a09c; }
#connection-status[data-tone="busy"]::before { background: #e5a84b; animation: pulse 1s infinite; }
.top-actions { gap: 8px; }
.icon-button, .round-button { display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; padding: 0; border-radius: 50%; background: transparent; }
.spotify-trigger { display: flex; gap: 9px; width: auto; padding: 0 15px; border-radius: 10px; background: transparent; color: var(--text); border-color: var(--line); font-size: 12px; font-weight: 600; }
.spotify-trigger svg { width: 24px; height: 24px; }
.spotify-trigger:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.mobile-system-button { display: none; }
.workspace { flex: 1; min-width: 0; min-height: 0; display: flex; }
.main-grid { display: grid; grid-template-areas: "groups now queue"; grid-template-columns: 250px minmax(300px, 1fr) minmax(290px, .78fr); gap: 18px; width: 100%; min-height: 0; }
.groups-panel { min-width: 0; grid-area: groups; display: flex; flex-direction: column; min-height: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; flex-shrink: 0; }
.section-heading h2 { font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
.count-badge { color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 400; }
.groups-list { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 10px; overflow-y: auto; align-content: start; min-height: 0; padding: 2px 4px 12px 0; }
.zone-card { min-width: 0; background: #18191c; border: 1px solid #28292e; border-radius: 14px; padding: 12px; transition: border-color 150ms, background 150ms; }
.zone-card[data-active="true"] { background: #24201e; border-color: #87694f; }
.zone-select { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; padding: 0; text-align: left; background: none; border: 0; border-radius: 6px; }
.zone-select:hover:not(:disabled) { background: transparent; color: var(--accent); }
.zone-art { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 9px; background: var(--surface-3) center / cover; color: var(--muted); }
.zone-copy { min-width: 0; }
.zone-rooms { display: grid; gap: 3px; min-width: 0; }
.zone-rooms strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.zone-copy strong { display: block; overflow-wrap: anywhere; font-size: 13px; font-weight: 550; line-height: 1.35; }
.zone-copy small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; overflow-wrap: anywhere; }
.zone-track { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; color: var(--text); min-width: 0; }
.zone-track .zone-art { width: 44px; height: 44px; border-radius: 7px; }
.zone-footer { display: flex; align-items: center; gap: 9px; }
.zone-state { display: flex; align-items: center; gap: 6px; color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .7px; }
.zone-state::before { content: ""; height: 4px; width: 4px; background: #77797e; border-radius: 50%; }
.zone-card[data-playing="true"] .zone-state { color: var(--green); }
.zone-card[data-playing="true"] .zone-state::before { background: var(--green); }
.zone-volume { display: flex; gap: 5px; align-items: center; margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.zone-volume svg { width: 13px; height: 13px; }
.zone-footer .icon-button { width: 28px; height: 28px; border: 0; color: var(--muted); }
.zone-footer .icon-button svg { width: 16px; height: 16px; }
.now-playing-panel { grid-area: now; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg, #242326 0%, #1b1b1e 45%, #18191b 100%); min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 18px 28px 22px; gap: 18px; }
.player-heading { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.eyebrow { text-transform: uppercase; font: 10px var(--mono); letter-spacing: 1.5px; color: var(--muted); }
.player-heading .icon-button { width: 30px; height: 30px; border: 0; color: var(--muted); }
.album-art { width: min(100%, 340px, 32vh); aspect-ratio: 1; flex-shrink: 0; background: linear-gradient(140deg, #393a40, #252529); background-size: cover; background-position: center; border-radius: 12px; box-shadow: 0 20px 44px #0005; position: relative; }
.album-art[data-empty="true"]::after { content: "tempo"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; font-style: normal; font-weight: 500; letter-spacing: -2px; color: #ffffff20; }
.track-copy { width: 100%; text-align: center; min-width: 0; }
#active-group { color: var(--accent); font: 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
#track-title { font-size: clamp(23px, 2.5vw, 36px); line-height: 1.12; letter-spacing: -1px; font-weight: 650; overflow-wrap: anywhere; }
#track-meta { color: #c5c3c0; font-size: 13px; line-height: 1.5; margin-top: 10px; }
#next-track { font-size: 11px; color: var(--muted); margin-top: 9px; line-height: 1.5; }
.metadata-link { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 2px; color: inherit; background: none; font: inherit; text-align: inherit; }
.metadata-link:hover:not(:disabled) { background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.album-name, .meta-separator { color: var(--muted); }
.playback-controls { width: min(100%, 480px); margin-top: auto; display: grid; gap: 16px; padding-top: 4px; }
.transport { width: min(100%, 300px); justify-self: center; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.transport .round-button { border: 0; }
.round-button.primary { width: 60px; height: 60px; background: var(--accent); border-color: var(--accent); color: #26201c; box-shadow: 0 5px 22px #efbc9114; }
.round-button.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.play-toggle-button svg { width: 25px; height: 25px; }
.mode-button { position: relative; color: var(--muted); }
.mode-button[data-active="true"], .tv-mode-button[data-active="true"] { color: var(--accent); background: #efbc9110; }
.repeat-badge { position: absolute; right: 3px; bottom: 3px; font: 9px var(--mono); background: var(--accent); color: #111; border-radius: 5px; padding: 1px 3px; }
.volume-control { display: grid; grid-template-columns: 32px 25px minmax(0, 1fr); align-items: center; gap: 10px; }
.volume-control .icon-button { border: 0; width: 32px; height: 32px; color: var(--muted); }
output { font: 11px var(--mono); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; min-width: 0; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
[data-muted="true"] { color: var(--accent) !important; background: #efbc9115 !important; }
.tv-controls { display: flex; gap: 8px; }
.tv-mode-button { flex: 1; border-radius: 10px; font-size: 12px; }
.queue-panel { grid-area: queue; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 0 0 6px; }
.queue-panel .section-heading { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 8px 0 16px; }
.heading-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel-caption { color: var(--accent); font-size: 11px; margin-bottom: 7px; }
.queue-search { position: relative; }
.queue-search label { display: none; }
.control { min-width: 0; width: 100%; height: 42px; padding: 0 13px; border: 1px solid var(--line); border-radius: 10px; background: #141517; color: var(--text); outline: none; font-size: 13px; }
.control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #efbc910b; }
.control::placeholder { color: #767980; }
.select-control { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2397999f' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.queue-search .control { height: 36px; background: #1a1b1e; font-size: 12px; padding-right: 34px; }
.queue-search-clear { position: absolute; right: 5px; top: 3px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; }
.queue-search-clear svg { width: 14px; height: 14px; }
.queue-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.queue-list { list-style: none; padding: 0 5px 0 0; margin: 0; overflow-y: auto; min-height: 0; display: grid; grid-auto-rows: max-content; align-content: start; gap: 2px; }
.queue-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 6px 9px; min-height: 58px; align-items: center; border: 1px solid transparent; border-radius: 10px; cursor: pointer; scroll-margin: 12px; }
.queue-item:hover { background: var(--surface-2); }
.queue-item[data-current="true"] { background: #efbc9110; border-color: #efbc9125; }
.queue-artwork { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-size: 22px; }
.queue-artwork img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.queue-item strong { display: block; font-size: 13px; font-weight: 550; line-height: 1.35; overflow-wrap: anywhere; }
.queue-item small { display: block; font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.queue-item[data-busy="true"] { opacity: .45; pointer-events: none; }
.queue-modal-close { display: none; }
/* Shared overlay system */
.modal-backdrop, .drawer-backdrop { position: fixed; inset: 0; z-index: 40; padding: 28px; background: #08090caa; backdrop-filter: blur(14px); display: grid; place-items: center; }
.system-modal, .spotify-drawer { width: min(760px, 100%); max-height: calc(100dvh - 56px); overflow-y: auto; border: 1px solid #414247; border-radius: 22px; padding: 26px; background: #1a1b1e; box-shadow: var(--shadow); }
.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.modal-heading p { color: var(--accent); text-transform: uppercase; font: 10px var(--mono); letter-spacing: 1.2px; margin: 2px 0 9px; }
.modal-heading h2 { font-size: 26px; font-weight: 550; letter-spacing: -.8px; }
.modal-heading .icon-button { background: #242529; width: 34px; height: 34px; color: var(--muted); }
.system-details { display: grid; gap: 20px; }
.system-details h3 { font-size: 13px; font-weight: 500; color: #c0bec0; }
.system-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.info-tile { padding: 14px; border-radius: 12px; background: #222327; border: 1px solid var(--line); display: grid; gap: 9px; }
.info-tile[data-variant="wide"] { grid-column: span 2; }
.info-tile span { color: var(--muted); font-size: 10px; }
.info-tile strong { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.system-facts { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 9px 18px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; font: 11px/1.5 var(--mono); }
.system-facts dt, .system-device dt, .room-device-details dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.system-devices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.system-device { border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; background: #1e1f23; display: grid; gap: 9px; }
.system-device strong { display: block; font-size: 13px; font-weight: 550; }
.system-device span { color: var(--muted); font-size: 11px; }
.system-device dl, .room-device-details dl { display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: 6px 10px; margin: 6px 0 0; font: 10px/1.5 var(--mono); }
.room-title-row { display: grid; gap: 12px; }
.room-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.summary-pill { display: inline-flex; gap: 7px; font-size: 10px; padding: 5px 8px; border-radius: 6px; background: var(--surface-2); }
.summary-pill span { color: var(--muted); }
.room-device { padding: 0; display: block; }
.room-device summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; cursor: pointer; list-style: none; }
.room-device summary::-webkit-details-marker { display: none; }
.room-device summary::after { content: "+"; color: var(--accent); }
.room-device[open] summary::after { content: "−"; }
.room-device summary > span { font: 9px var(--mono); }
.room-device-details { border-top: 1px solid var(--line); padding: 12px 15px; }
.group-settings-modal { max-width: 610px; }
.group-settings-modal .group-header strong { display: none; }
.group-card { display: grid; gap: 18px; }
.group-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: 0; text-align: left; padding: 0; }
.group-header:hover:not(:disabled) { background: none; }
.group-header strong { font-size: 15px; }
.group-header small { display: block; color: var(--muted); font-size: 11px; margin-top: 6px; }
.volume-pill { font: 13px var(--mono); padding: 10px; background: #efbc9110; color: var(--accent); border-radius: 9px; }
.member-list { display: grid; gap: 8px; }
.member-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .8fr) 60px; gap: 10px; align-items: center; padding: 12px; background: #222327; border: 1px solid var(--line); border-radius: 12px; }
.room-membership { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.room-membership > span { font-size: 13px; overflow-wrap: anywhere; }
.room-membership input { appearance: none; display: grid; place-content: center; width: 19px; height: 19px; margin: 0; flex-shrink: 0; border: 1px solid #5a5b62; border-radius: 5px; background: #16171a; cursor: pointer; }
.room-membership input:checked { background: var(--accent); border-color: var(--accent); }
.room-membership input:checked::after { content: ""; width: 8px; height: 4px; border: solid #221c18; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.room-membership input:disabled { opacity: .65; cursor: not-allowed; }
.member-row[data-included="false"] { background: transparent; }
.member-row[data-volumes="false"] .room-membership { grid-column: 1 / 3; min-height: 28px; }
.member-actions { display: flex; justify-content: flex-end; gap: 4px; grid-column: 3; }
.member-coordinator-button { width: 28px; height: 28px; border: 0; color: var(--muted); }
.member-coordinator-button svg { width: 16px; height: 16px; }
.member-coordinator-button[data-active="true"] { color: var(--accent); opacity: 1; }
.room-membership > span { min-width: 0; }
.member-row .room-playback-status { display: block; font: 9px/1.5 var(--mono); color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.member-row .room-playback-status[data-playing="true"] { color: var(--green); }
.outside-volume-toggle { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; cursor: pointer; }
.outside-volume-toggle input { appearance: none; margin: 0; width: 30px; height: 18px; padding: 3px; border: 1px solid #55565c; border-radius: 20px; background: #141517; cursor: pointer; }
.outside-volume-toggle input::after { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transition: transform 150ms; }
.outside-volume-toggle input:checked { border-color: var(--accent); background: #efbc9120; }
.outside-volume-toggle input:checked::after { background: var(--accent); transform: translateX(12px); }
.member-details-button { width: 28px; height: 28px; border: 0; color: var(--muted); }
.member-details-button svg { width: 15px; height: 15px; }
.member-row .coordinator-badge { display: table; color: var(--accent); font-size: 8px; border: 1px solid #efbc9130; border-radius: 4px; padding: 2px 5px; margin-top: 5px; }
.member-row small { display: block; font: 9px var(--mono); color: var(--muted); margin-top: 5px; }
.member-volume-control { display: grid; grid-template-columns: 28px 24px minmax(0, 1fr); gap: 7px; align-items: center; min-width: 0; }
.member-mute-button, .remove-button { width: 28px; height: 28px; border: 0; color: var(--muted); }
.member-mute-button svg, .remove-button svg { width: 15px; height: 15px; }
.group-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.add-label { font-size: 11px; color: var(--muted); }
.everywhere-button { display: flex; justify-content: center; gap: 7px; width: auto; border-radius: 10px; padding: 0 12px; font-size: 11px; }
.everywhere-button svg { width: 16px; }
.field { display: grid; gap: 8px; font-size: 11px; color: var(--muted); }
.spotify-url-modal { max-width: 560px; }
.spotify-url-form { display: grid; gap: 20px; }
.button-row { display: grid; gap: 8px; }
.button-row-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.action-button { min-height: 42px; border-radius: 10px; font-size: 11px; font-weight: 600; padding: 8px; }
.action-button-primary { background: var(--accent); color: #221c18; border-color: var(--accent); }
.action-button-primary:hover:not(:disabled) { background: var(--accent-strong); }
.action-button-secondary { background: transparent; }
.spotify-url-error { font-size: 12px; color: #f3a09c; line-height: 1.5; }
.empty-state { border: 1px dashed #3d3e44; border-radius: 12px; padding: 24px 18px; font-size: 12px; line-height: 1.6; color: var(--muted); }
/* Music browser uses the same panel and control tokens. */
.drawer-backdrop { z-index: 50; opacity: 0; pointer-events: none; transition: opacity 180ms; }
.drawer-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
.spotify-drawer { position: relative; width: min(900px, 100%); height: min(850px, calc(100dvh - 56px)); overflow: hidden; padding: 28px; }
.drawer-close { position: absolute; right: 24px; top: 24px; z-index: 3; width: 34px; height: 34px; background: var(--surface-2); }
.spotify-view { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 20px; }
.spotify-view > :not(.spotify-content) { flex-shrink: 0; }
.spotify-topline { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-right: 48px; min-width: 0; }
.spotify-topline strong { display: block; font-size: 26px; font-weight: 550; letter-spacing: -.8px; }
#spotify-status { display: block; font-size: 10px; line-height: 1.5; color: var(--muted); margin-top: 6px; overflow-wrap: anywhere; }
.spotify-target { display: grid; gap: 5px; font: 9px var(--mono); text-transform: uppercase; letter-spacing: .6px; color: var(--muted); min-width: 140px; }
.spotify-target select { height: 36px; text-transform: none; letter-spacing: normal; }
.spotify-subtabs { display: flex; gap: 4px; padding: 4px; background: #121315; border: 1px solid var(--line); border-radius: 11px; }
.spotify-subtabs button { flex: 1; padding: 9px 8px; border: 0; border-radius: 7px; color: var(--muted); background: none; font-size: 12px; white-space: nowrap; }
.spotify-subtabs button[aria-selected="true"] { background: var(--surface-3); color: var(--text); box-shadow: 0 2px 4px #0003; }
.spotify-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.spotify-search-button, .spotify-play-button, .spotify-open-button, .spotify-back-button { min-height: 36px; border-radius: 8px; padding: 0 13px; font-size: 11px; background: var(--accent); color: #221c18; border-color: transparent; font-weight: 550; }
.spotify-open-button, .spotify-back-button { background: var(--surface-2); color: var(--text); border-color: var(--line); }
.spotify-back-button { justify-self: start; }
.spotify-content { flex: 1; overflow-y: auto; min-height: 0; padding-right: 4px; }
.spotify-section { margin-bottom: 22px; }
.spotify-section h3 { font: 10px var(--mono); color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.spotify-results { display: grid; gap: 5px; }
.spotify-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid transparent; border-radius: 11px; background: #ffffff03; }
.spotify-item[data-clickable="true"] { cursor: pointer; }
.spotify-item:hover { background: var(--surface-2); }
.spotify-item strong { display: block; font-size: 12px; font-weight: 550; }
.spotify-item span, .spotify-item small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.spotify-item > div { min-width: 0; }
.spotify-art, .spotify-detail-art { background: var(--surface-3) center / cover; border-radius: 7px; aspect-ratio: 1; }
.spotify-art { width: 46px; }
.spotify-art[data-empty="true"]::after, .spotify-detail-art[data-empty="true"]::after { content: "♫"; display: grid; place-items: center; height: 100%; color: var(--muted); }
.spotify-item-actions { display: flex; gap: 6px; }
.spotify-send-split { position: relative; display: flex; }
.spotify-send-split .spotify-play-button { border-radius: 8px 0 0 8px; }
.spotify-send-menu-button { width: 28px; border: 0; border-left: 1px solid #221c1833; border-radius: 0 8px 8px 0; background: var(--accent); color: #221c18; display: grid; place-items: center; }
.spotify-send-menu-button svg { width: 14px; height: 14px; }
.spotify-send-menu { position: absolute; right: 0; top: 100%; z-index: 4; min-width: 200px; border: 1px solid var(--line); background: #292a2e; border-radius: 10px; padding: 4px; box-shadow: var(--shadow); }
.spotify-send-menu button { display: block; width: 100%; min-height: 38px; padding: 8px; text-align: left; border: 0; background: none; border-radius: 6px; font-size: 11px; }
.spotify-detail { display: grid; gap: 20px; }
.spotify-detail-hero { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; background: var(--surface-2); border-radius: 14px; }
.spotify-detail-art { width: 100px; }
.spotify-detail-copy { min-width: 0; }
.spotify-detail-copy > span { font: 9px var(--mono); text-transform: uppercase; color: var(--accent); }
.spotify-detail-copy h3 { font-size: 25px; line-height: 1.15; letter-spacing: -.7px; margin-top: 8px; }
.spotify-detail-copy p { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 10px; }
.spotify-detail-copy a { display: inline-block; font-size: 10px; margin-top: 8px; }
.spotify-detail-actions { grid-column: 2; }
.spotify-detail-notice { color: var(--accent); }
@keyframes pulse { 50% { opacity: .35; } }
@media (min-width: 1500px) { .main-grid { grid-template-columns: 290px minmax(380px, 1fr) minmax(350px, .8fr); gap: 28px; } .app-shell { padding-inline: 40px; } .album-art { width: min(100%, 430px, 36vh); } }
@media (min-width: 861px) and (max-width: 1100px) { .app-shell { padding-inline: 16px; } .main-grid { grid-template-columns: 205px minmax(270px, 1fr) minmax(240px, .8fr); gap: 12px; } .now-playing-panel { padding: 16px; } .brand-block { gap: 12px; } .zone-card { padding: 11px; } }
/* Mobile is the same console, organized as directly controllable zone cards. */
@media (max-width: 860px) {
  .app-shell { padding: 0; }
  .mobile-brand-header { display: flex; align-items: center; justify-content: space-between; padding: max(18px, env(safe-area-inset-top)) 20px 18px; flex-shrink: 0; }
  .mobile-brand-header { gap: 16px; }
  .brand-title { font-size: 14px; }
  .brand-logo { width: 98px; }
  .top-bar { order: 2; min-height: 70px; padding: 12px 18px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); gap: 12px; background: #151619; }
  .top-bar .brand-row { display: none; }
  .top-bar .brand-block { display: none; }
  #connection-status { font-size: 10px; max-width: 160px; justify-content: flex-end; text-align: right; }
  .top-actions { width: 100%; justify-content: center; gap: 24px; }
  .top-actions .icon-button { width: 44px; height: 44px; }
  .spotify-trigger { padding: 0; display: grid; border-radius: 50%; }
  .spotify-trigger span { display: none; }
  .mobile-system-button { display: grid; }
  #refresh-button { display: none; }
  .workspace { order: 1; overflow: hidden; }
  .main-grid { display: block; overflow: hidden; }
  .groups-panel { display: none; }
  .now-playing-panel { display: block; height: 100%; border: 0; border-radius: 0; padding: 0; background: none; overflow: hidden; }
  .now-playing-panel > .album-art, .now-playing-panel > .track-copy, .now-playing-panel > .playback-controls, .player-heading { display: none; }
  .mobile-now-stack { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 20px; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
  .mobile-now-card { flex-shrink: 0; position: relative; background: #1e1f23; border: 1px solid #36373c; border-radius: 20px; overflow: hidden; }
  .mobile-now-card[data-active="true"] { border-color: #89715d; }
  .mobile-now-card-inner { position: relative; }
  .mobile-now-face-front { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 18px 14px; padding: 55px 18px 18px; isolation: isolate; }
  .mobile-now-face-front::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(150deg, rgb(var(--mobile-now-tint, 239 188 145) / .16), transparent 65%); }
  .mobile-now-art { width: 66px; height: 66px; background: #303137 center / cover; border-radius: 10px; box-shadow: 0 5px 15px #0003; }
  .mobile-now-art[data-empty="true"]::after { content: "♫"; display: grid; height: 100%; place-items: center; font-size: 26px; color: #ffffff35; }
  .mobile-now-copy { min-width: 0; align-self: center; }
  .mobile-now-copy > p:first-child { position: absolute; top: 21px; left: 18px; right: 55px; color: #dedad5; font: 10px/1.4 var(--mono); letter-spacing: .5px; }
  .mobile-now-copy h2 { font-size: 21px; font-weight: 600; letter-spacing: -.65px; line-height: 1.12; overflow-wrap: anywhere; }
  .mobile-now-copy > p:not(:first-child) { color: #b3b1b0; font-size: 11px; line-height: 1.5; margin-top: 7px; }
  .mobile-now-copy .mobile-now-next { color: #7f8188; font-size: 10px; }
  .mobile-now-status-playing { color: var(--green); }
  .mobile-now-eq { display: none; }
  .mobile-now-settings-button { position: relative; width: 32px; height: 32px; border: 0; color: var(--muted); }
  .mobile-now-settings-button svg { width: 17px; height: 17px; }
  .mobile-now-controls { grid-column: 1 / -1; display: grid; gap: 13px; border-top: 0; padding-top: 15px; min-width: 0; }
  .mobile-now-transport { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .mobile-now-button-group { display: flex; align-items: center; gap: 5px; }
  .mobile-now-button { width: 35px; height: 35px; border: 0; color: #b2b3b9; }
  .mobile-now-button svg { width: 18px; height: 18px; }
  .mobile-now-button.primary { width: 46px; height: 46px; color: #221c18; }
  .mobile-now-button[data-active="true"], .mobile-now-tv-button[data-active="true"] { background: #efbc9115; color: var(--accent); }
  .mobile-now-volume { display: grid; grid-template-columns: 30px 24px minmax(0, 1fr) 30px; gap: 9px; align-items: center; min-width: 0; }
  .mobile-now-volume .icon-button { width: 30px; height: 30px; border: 0; color: var(--muted); }
  .mobile-now-volume svg { width: 17px; height: 17px; }
  .mobile-now-tv-controls { display: flex; gap: 8px; }
  .mobile-now-tv-button { flex: 1; min-height: 38px; border-radius: 9px; font-size: 12px; }
  .queue-panel { display: none; position: fixed; inset: 14px; z-index: 35; background: #1a1b1e; border: 1px solid #414247; border-radius: 20px; padding: 20px; box-shadow: 0 0 0 100vmax #08090cd9; }
  body.queue-modal-open .queue-panel { display: flex; }
  .queue-panel .section-heading { padding-top: 4px; }
  .queue-panel .heading-title { padding-right: 46px; }
  .queue-modal-close { display: grid; position: absolute; right: 15px; top: 14px; width: 32px; height: 32px; }
  .queue-item { min-height: 58px; padding: 6px 8px; }
  .queue-item strong { font-size: 13px; }
  .queue-item small { font-size: 11px; }
  .modal-backdrop, .drawer-backdrop { padding: 14px; }
  .system-modal, .spotify-drawer { max-height: calc(100dvh - 28px); padding: 20px; border-radius: 20px; }
  .modal-heading { margin-bottom: 24px; }
  .modal-heading h2 { font-size: 24px; }
  .system-devices { grid-template-columns: 1fr; }
  .system-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-facts { grid-template-columns: 70px minmax(0, 1fr); font-size: 10px; gap: 9px; }
  .member-row { grid-template-columns: minmax(0, 1fr) 60px; padding: 12px; }
  .member-row .room-membership, .member-row[data-volumes="false"] .room-membership { grid-column: 1; }
  .member-row .member-actions { grid-row: 1; grid-column: 2; }
  .member-volume-control { grid-row: 2; grid-column: 1 / -1; }
  .everywhere-button { grid-column: 1 / -1; }
  .spotify-drawer { height: calc(100dvh - 28px); }
  .drawer-close { top: 18px; right: 18px; }
  .spotify-view { gap: 15px; }
  .spotify-topline { display: grid; gap: 15px; padding: 0; }
  .spotify-topline > div { padding-right: 42px; }
  .spotify-target { display: flex; align-items: center; gap: 12px; }
  .spotify-target select { flex: 1; }
  .spotify-subtabs { gap: 2px; padding: 3px; }
  .spotify-subtabs button { font-size: 10px; padding: 9px 5px; }
  .spotify-search-row { grid-template-columns: minmax(0, 1fr) 62px; }
  .spotify-search-row input { font-size: 11px; }
  .spotify-search-button { padding: 0 8px; }
  .spotify-item { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 10px 6px; }
  .spotify-art { width: 40px; }
  .spotify-item > .spotify-send-split, .spotify-item > .spotify-item-actions, .spotify-item > .spotify-open-button { grid-column: 2; justify-self: start; }
  .spotify-detail-hero { grid-template-columns: 70px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .spotify-detail-art { width: 70px; }
  .spotify-detail-copy h3 { font-size: 21px; }
  .button-row-three { grid-template-columns: 1fr; }
  .action-button { min-height: 44px; }
}
@media (max-width: 360px) {
  .mobile-now-stack { padding-inline: 10px; }
  .mobile-now-face-front { padding-inline: 14px; grid-template-columns: 52px minmax(0, 1fr); gap: 15px 11px; }
  .mobile-now-art { width: 52px; height: 52px; }
  .mobile-now-copy h2 { font-size: 19px; }
  .mobile-now-button-group { gap: 2px; }
  .mobile-now-button { width: 31px; height: 34px; }
  .mobile-now-button.primary { width: 44px; height: 44px; }
  .system-modal, .spotify-drawer { padding: 16px; }
  .spotify-subtabs button { font-size: 9px; padding-inline: 3px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Error feedback remains readable inside an active overlay. */
.dialog-status { margin: 12px 0 0; padding: 12px 14px; color: #ffb4ab; background: #3b2022; border: 1px solid #754043; border-radius: 12px; overflow-wrap: anywhere; }
.dialog-status[hidden] { display: none; }

.queue-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 12px 0; }
.queue-pagination[hidden] { display: none; }
.queue-pagination .action-button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.queue-pagination span { color: var(--muted); font-size: 12px; }

/* Compact transport stays attached to the room whose queue is open. */
.queue-player { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 12px 0; }
.queue-player-art { width: 40px; height: 40px; border-radius: 7px; background: var(--surface-2) center / cover; display: grid; place-items: center; color: var(--muted); }
.queue-player-copy { min-width: 0; }
.queue-player-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#queue-player-title { font-size: 12px; font-weight: 550; }
#queue-player-artist { font-size: 11px; color: var(--muted); margin-top: 4px; }
.queue-player-controls { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 16px; }
.queue-player-controls .icon-button { width: 36px; height: 36px; border: 0; }
.queue-player-controls [data-queue-action="playpause"] { background: var(--accent); color: #26201c; }
@media (max-width: 860px) { .queue-player-controls .icon-button { width: 44px; height: 44px; } }

.track-progress { width: 100%; min-width: 0; min-height: 25px; padding: 2px 0; }
.track-progress[data-unavailable="true"] { visibility: hidden; pointer-events: none; }
.track-progress progress { display: block; appearance: none; width: 100%; height: 3px; overflow: hidden; border: 0; border-radius: 3px; background: var(--surface-3); color: var(--accent); }
.track-progress progress::-webkit-progress-bar { background: var(--surface-3); border-radius: 3px; }
.track-progress progress::-webkit-progress-value { background: var(--accent); border-radius: 3px; }
.track-progress progress::-moz-progress-bar { background: var(--accent); border-radius: 3px; }
.track-times { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font: 10px/12px var(--mono); min-height: 12px; font-variant-numeric: tabular-nums; }
#queue-progress { margin-bottom: 7px; }
@media (max-width: 860px) { #player-progress { display: none; } }

.track-time-toggle { border: 0; background: transparent; color: inherit; font: inherit; padding: 8px 10px; margin: -8px -10px; min-width: 44px; text-align: left; touch-action: manipulation; }
.track-time-toggle:hover:not(:disabled) { background: transparent; color: var(--text); }

.settings-section-title { margin: 4px 0 16px; font-size: 13px; font-weight: 600; color: var(--text); }
.sound-settings { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 22px; }
.sound-room-label { display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: 12px; margin-bottom: 16px; }
.sound-room-label select { flex: 1; }
.sound-eq-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 0; font-size: 13px; }
.sound-eq-row input { grid-column: 1 / -1; }
.sound-eq-row output { color: var(--accent); }
.sound-loudness { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 13px; }
.sound-loudness input { accent-color: var(--accent); width: 20px; height: 20px; }
.sound-actions { display: flex; gap: 10px; margin-top: 4px; }
.sound-notice { color: var(--muted); font-size: 12px; margin-top: 12px; }

/* Global system settings and room grouping affordance. */
.group-speaker-button { overflow:visible; }
.group-speaker-button:not(.mobile-now-settings-button) { position:relative; }
.room-count-badge { position:absolute; right:-4px; top:-3px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border-radius:20px; background:#c93640; color:#fff; font-size:10px; font-weight:700; line-height:1; border:2px solid #191b1d; }
#global-settings-button { flex-shrink:0; }
.global-settings-modal { width:min(580px,100%); display:flex; flex-direction:column; overflow:hidden; }
.global-settings-heading { display:flex; align-items:center; gap:12px; flex-shrink:0; padding-bottom:18px; }
.global-settings-heading h2 { flex:1; margin:0; font-size:23px; }
[data-settings-content] { overflow-y:auto; min-height:0; padding:0 3px 8px; }
.settings-block { margin:0 0 25px; }
.settings-block h3 { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#a5a5ac; margin:0 0 12px; }
.settings-nav { display:flex; align-items:center; gap:14px; width:100%; min-height:64px; padding:13px 14px; text-align:left; border:1px solid #34363a; background:#202225; border-radius:12px; color:inherit; margin-bottom:8px; cursor:pointer; }
.settings-nav > span:first-of-type { flex:1; }
.settings-nav svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.5; }
.settings-nav strong,.settings-nav small { display:block; }
.settings-nav small { color:#999da4; margin-top:5px; font-size:12px; }
.settings-hint { color:#aaaeb5; font-size:13px; line-height:1.6; }
.settings-error { color:#ff8c8c; font-size:13px; }
.settings-error:empty { display:none; }
.settings-form, [data-rename] { display:grid; gap:16px; }
.settings-form label:not(.settings-toggle),[data-rename] label { display:grid; gap:8px; }
.settings-form .control,[data-rename] .control { width:100%; min-width:0; }
.settings-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; }
.settings-toggle input { width:20px; height:20px; accent-color:#e8ad80; flex-shrink:0; }
.settings-form fieldset { border:1px solid #34363a; border-radius:12px; }
.settings-balance { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.settings-balance output,.settings-balance span:last-child { text-align:right; }
.settings-balance input { grid-column:1/-1; width:100%; accent-color:#e8ad80; }
.global-settings-modal details { padding:14px 0; border-bottom:1px solid #34363a; }
.global-settings-modal summary { cursor:pointer; }
.global-settings-modal dl { display:grid; grid-template-columns:80px 1fr; font-size:12px; gap:10px; overflow-wrap:anywhere; }
.global-settings-modal dd { margin:0; color:#aaaeb5; }
.global-settings-modal .sound-settings { padding-top:0; border-top:0; margin-bottom:22px; }
.global-settings-modal .action-button { min-height:42px; }
@media (max-width:860px) {
 .mobile-brand-header #connection-status { margin-left:auto; }
 .mobile-brand-header #global-settings-button { order:3; margin-left:10px; width:38px; height:38px; }
 .global-settings-modal { max-height:calc(100dvh - 30px); padding:22px; }
}

.global-settings-modal .settings-section-title { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#a5a5ac; }
.global-settings-modal .settings-nav:hover { background:#292b2f; }
.global-settings-modal .settings-nav:focus-visible { outline:2px solid #e8ad80; outline-offset:2px; }

.mobile-now-settings-button.group-speaker-button svg { width:22px; height:22px; }
.mobile-now-settings-button .room-count-badge { right:-2px; top:-2px; }

/* Pending grouping stays local to each row; close remains usable. */
.group-spinner { display:inline-block; flex:0 0 18px; width:18px; height:18px; border:2px solid #efbc9140; border-top-color:var(--accent); border-radius:50%; animation:group-spin .8s linear infinite; }
@keyframes group-spin { to { transform:rotate(360deg); } }
.member-row[data-pending="true"] { background:#ffffff04; }
.member-row[data-pending="true"] .room-membership > span:not(.group-spinner),
.member-row[data-pending="true"] .member-volume-control,
.member-row[data-pending="true"] .member-actions { opacity:.45; }
.room-membership input[hidden] { display:none; }
.group-room-error { display:block; white-space:normal; color:#ed9696; font-size:11px; line-height:1.4; margin-top:6px; }
#group-settings-close-button.is-grouping svg { display:none; }
#group-settings-close-button.is-grouping::after { content:""; width:20px; height:20px; border:2px solid #efbc9140; border-top-color:var(--accent); border-radius:50%; animation:group-spin .8s linear infinite; }
@media (prefers-reduced-motion:reduce) { .group-spinner,#group-settings-close-button.is-grouping::after { animation-duration:2s; } }
.group-settings-modal .modal-heading { position:sticky; top:0; z-index:3; background:#1a1b1e; padding-bottom:12px; box-shadow:0 -26px 0 #1a1b1e; }

/* Queue controls are useful only when the main player is out of view. */
@media (min-width:861px) { #queue-player, #queue-progress { display:none !important; } }
.queue-player-controls { gap:10px; }
.queue-volume-control,.queue-tv-controls { grid-column:1 / -1; width:100%; }
.queue-tv-controls .tv-mode-button { width:auto; min-height:38px; }
.queue-volume-control { margin-top:2px; }

/* Group access flanks the main volume row opposite mute. */
.playback-controls > .volume-control, .queue-volume-control { grid-template-columns: 32px 25px minmax(0, 1fr) 32px; }

/* Playback emphasis stays distinct from the selected-zone outline. */
.zone-card[data-playing="false"] { background:#151619; }
.zone-card[data-playing="false"] .zone-art,
.zone-card[data-playing="false"] .zone-copy,
.zone-card[data-playing="false"] .zone-track { opacity:.78; }
.zone-card[data-playing="true"] { background:linear-gradient(135deg,#252a26,#1c201e); border-color:#526458; }
.zone-card[data-active="true"] { border-color:#a38367; }
.playing-eq { display:inline-flex; align-items:flex-end; gap:2px; height:12px; margin-left:7px; vertical-align:baseline; color:var(--green); }
.playing-eq > span { width:2px; height:10px; background:currentColor; border-radius:2px; transform-origin:50% 100%; animation:playing-bar 1.94s linear infinite; }
.playing-eq > span:nth-child(2) { animation:playing-bar-b 2.26s linear -.86s infinite; height:7px; }
.playing-eq > span:nth-child(3) { animation:playing-bar-c 1.66s linear -.54s infinite; height:12px; }
.playing-eq > span:nth-child(4) { animation:playing-bar 2.14s linear -1.42s infinite reverse; height:8px; }
.playing-eq > span:nth-child(5) { animation:playing-bar-b 1.78s linear -1.18s infinite reverse; }
.zone-card[data-playing="true"] .zone-state { align-items:baseline; }
.zone-card[data-playing="true"] .zone-state::before { display:none; }
.zone-state .playing-eq { margin-left:0; }
@keyframes playing-bar {
  0%,100% { transform:scaleY(.4); } 12% { transform:scaleY(.95); }
  27% { transform:scaleY(.25); } 39% { transform:scaleY(.65); }
  54% { transform:scaleY(.35); } 66% { transform:scaleY(1); }
  81% { transform:scaleY(.5); } 92% { transform:scaleY(.75); }
}
@keyframes playing-bar-b {
  0%,100% { transform:scaleY(.8); } 16% { transform:scaleY(.3); }
  29% { transform:scaleY(.6); } 43% { transform:scaleY(1); }
  57% { transform:scaleY(.45); } 73% { transform:scaleY(.7); }
  86% { transform:scaleY(.2); }
}
@keyframes playing-bar-c {
  0%,100% { transform:scaleY(.3); } 14% { transform:scaleY(.7); }
  31% { transform:scaleY(.45); } 46% { transform:scaleY(.9); }
  62% { transform:scaleY(.25); } 79% { transform:scaleY(1); }
  91% { transform:scaleY(.55); }
}
@media (max-width:860px) {
  .mobile-now-card[data-playing="true"] { border-color:#65796a; box-shadow:0 0 0 1px #a6d2b308; }
  .mobile-now-card[data-playing="false"] { background:#191a1d; }
  .mobile-now-card[data-playing="false"] .mobile-now-art,
  .mobile-now-card[data-playing="false"] .mobile-now-copy { opacity:.78; }
  .mobile-now-card[data-playing="false"] .mobile-now-face-front::before { opacity:.4; }
}
@media (prefers-reduced-motion:reduce) { .playing-eq > span { animation:none; } }

.diagnostics-panel { position:fixed; z-index:100; right:8px; bottom:8px; max-width:min(520px,95vw); max-height:70vh; overflow:auto; background:#16191c; border:1px solid #555; padding:10px; font:11px monospace; }
.diagnostics-panel pre { white-space:pre-wrap; }

/* Vertical panels must never acquire an implicit horizontal scrollbar. */
.groups-list, .now-playing-panel, .queue-list, .mobile-now-stack,
.system-modal, .spotify-content, [data-settings-content], .diagnostics-panel {
  overflow-x: hidden;
}

/* Expanded mobile zones use the available app viewport, not browser fullscreen. */
@media (max-width: 860px) {
  .mobile-now-expand { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; color: var(--muted); z-index: 1; }
  .mobile-now-expand svg { width: 19px; height: 19px; }
  .mobile-now-stack[data-expanded="true"] { padding-block: 0 12px; gap: 12px; scroll-snap-type: y mandatory; container-type: size; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-card { flex: 0 0 100%; height: 100%; min-height: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-card-inner { height: 100%; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-face-front { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 16px; padding: 58px 11px 22px; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-art { width: min(100%, calc(21cqh + 50% + 11px)); height: auto; max-height: 100%; aspect-ratio: 1; justify-self: center; align-self: center; border-radius: 16px; box-shadow: 0 16px 38px #0005; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-copy { text-align: center; width: 100%; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-copy > p:first-child { text-align: left; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-copy h2 { font-size: clamp(23px, 6vw, 32px); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-copy > p:not(:first-child) { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-copy .mobile-now-next { font-size: 11px; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-controls { gap: 18px; border: 0; padding-top: 0; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-button { width: 40px; height: 44px; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-button.primary { width: 58px; height: 58px; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-button svg { width: 22px; height: 22px; }
}
@media (max-width: 860px) and (max-height: 650px) {
  .mobile-now-stack[data-expanded="true"] .mobile-now-art { width: min(100%, 40cqh); }
  .mobile-now-stack[data-expanded="true"] .mobile-now-face-front { padding: 48px 8px 12px; gap: 8px; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-controls { gap: 8px; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-copy .mobile-now-next { display: none; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-button.primary { width: 44px; height: 44px; }
}
@media (max-width: 860px) and (max-height: 500px) {
  .mobile-now-stack[data-expanded="true"] .mobile-now-face-front { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .mobile-now-stack[data-expanded="true"] .mobile-now-art { width: min(100%, 20cqh); }
  .mobile-now-stack[data-expanded="true"] .mobile-now-copy h2 { font-size: 19px; }
}

.playback-badges { display: inline-flex; align-items: center; gap: 6px; margin-right: 7px; vertical-align: middle; white-space: nowrap; }
.playback-service { display: inline-flex; align-items: center; color: inherit; }
.playback-service svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.playback-quality { display: inline-block; font: 500 9px/1.5 var(--sans, sans-serif); letter-spacing: .15px; padding: 1px 6px; border-radius: 10px; background: rgb(255 255 255 / 7%); color: #c5c3c0; }

/* Volume changes must start on the thumb, including touch gestures. */
input.volume-drag-only { touch-action: none; cursor: default; }

#group-volumes-modal { position: fixed; z-index: 70; }
.group-volumes-dialog { width: 100%; max-width: 360px; padding: 18px; border-radius: 20px; max-height: min(80dvh, 600px); overflow-y: auto; }
.group-volumes-dialog .modal-heading { margin-bottom: 12px; gap: 12px; }
.group-volumes-dialog h2 { font-size: 16px; }
#group-volumes-rows { display: grid; gap: 14px; }
.group-volume-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; font-size: 13px; }
.group-volume-row > span { overflow-wrap: anywhere; }
.group-volume-row output { font: 12px/1.5 var(--mono); color: var(--muted); }
.group-volume-row input { grid-column: 1 / -1; }