:root {
  color-scheme: dark;
  --color-bg-app: #08111f;
  --color-surface-1: #101c2b;
  --color-surface-2: #162436;
  --color-text-primary: #f5f7fa;
  --color-text-secondary: #b7c1cf;
  --color-text-muted: #76869a;
  --color-accent: #2563eb;
  --color-accent-hover: #4f7cf0;
  --color-accent-active: #1d4ed8;
  --color-on-accent: #fff;
  --color-accent-focus: #6f95ff;
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-soft-hover: color-mix(in srgb, var(--color-accent) 18%, transparent);
  --color-accent-border: color-mix(in srgb, var(--color-accent) 55%, transparent);
  --background-primary: #061018;
  --background-secondary: #091923;
  --panel-background: rgba(10, 29, 41, .91);
  --panel-background-hover: rgba(13, 39, 54, .96);
  --panel-solid: #0c2230;
  --accent-primary: var(--color-accent);
  --accent-secondary: var(--color-accent-hover);
  --accent-soft: var(--color-accent-soft);
  --border-color: rgba(73, 181, 230, .34);
  --border-strong: rgba(99, 202, 245, .68);
  --text-primary: #eef9ff;
  --text-secondary: #94bdcf;
  --text-dim: #62899b;
  --status-success: #4fd19b;
  --status-warning: #f2c15c;
  --status-error: #f06b78;
  --grid-line: rgba(82, 164, 198, .08);
  --shadow-panel: 0 18px 50px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .025);
  --glow-accent: 0 0 24px rgba(56, 174, 232, .14);
  --radius-panel: 10px;
  --radius-control: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font-ui: "Avenir Next", Avenir, "Segoe UI Variable", "Segoe UI", sans-serif;
  --font-tech: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

:root[data-accent-color="violet"] { --color-accent: #7c5cfc; --color-accent-hover: #9a84ff; --color-accent-active: #6244dd; --color-accent-focus: #b2a3ff; --color-on-accent: #fff; }
:root[data-accent-color="cyan"] { --color-accent: #22b8cf; --color-accent-hover: #52cadb; --color-accent-active: #1593a7; --color-accent-focus: #79d9e7; --color-on-accent: #07101c; }
:root[data-accent-color="green"] { --color-accent: #35b96f; --color-accent-hover: #62ca91; --color-accent-active: #278d55; --color-accent-focus: #83dda8; --color-on-accent: #07101c; }
:root[data-accent-color="orange"] { --color-accent: #f28c38; --color-accent-hover: #f6ab67; --color-accent-active: #cf6d1f; --color-accent-focus: #ffc18a; --color-on-accent: #07101c; }
:root[data-accent-color="pink"] { --color-accent: #ec5b8f; --color-accent-hover: #f285ad; --color-accent-active: #c33d70; --color-accent-focus: #f5a1bd; --color-on-accent: #07101c; }

* { box-sizing: border-box; }
html { background: var(--background-primary); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text-primary);
  font-family: var(--font-ui);
  background-color: var(--background-primary);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    radial-gradient(circle at 35% 15%, rgba(29, 112, 151, .13), transparent 34rem),
    radial-gradient(circle at 100% 100%, rgba(32, 105, 137, .08), transparent 28rem);
  background-size: 70px 70px, 70px 70px, auto, auto;
  background-attachment: fixed;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, rgba(1, 8, 12, .18), rgba(1, 8, 12, .62));
}
body.sidebar-open { overflow: hidden; }
body.modal-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, audio:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-secondary);
  outline-offset: 3px;
}
button:disabled { cursor: wait; opacity: .62; }
svg { display: block; }
.button-tooltip{position:fixed;z-index:200;left:0;top:0;max-width:min(280px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow-y:auto;padding:7px 9px;border:1px solid rgba(73,181,230,.38);border-radius:6px;color:var(--text-primary);background:#06141e;box-shadow:0 8px 28px rgba(0,0,0,.42);font:10px/1.35 var(--font-tech);overflow-wrap:anywhere;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(2px);transition:opacity .12s,transform .12s,visibility .12s}.button-tooltip.visible{opacity:1;visibility:visible;transform:none}

.dashboard-shell {
  width: min(1880px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 26px clamp(18px, 2.5vw, 48px) 22px;
}
.dashboard-header {
  min-height: 74px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  position: relative;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--border-color);
}

.brand-lockup { display: flex; align-items: center; gap: 15px; }
.brand-lockup strong { display: block; font-size: clamp(22px, 2vw, 30px); font-weight: 520; letter-spacing: -.035em; }
.brand-lockup > div > span { display: block; margin-top: 3px; color: var(--text-dim); font: 10px/1.2 var(--font-tech); letter-spacing: .16em; text-transform: uppercase; }
.brand-signal { width: 42px; height: 42px; display: block; flex: 0 0 auto; }
.brand-signal img { display: block; width: 100%; height: 100%; object-fit: contain; }
.header-end { display: flex; align-items: center; gap: 12px; }
.date-time { padding-top: 8px; color: var(--text-secondary); font-size: clamp(13px, 1.1vw, 17px); letter-spacing: .01em; white-space: nowrap; }
.account-menu-container { position: relative; }
.account-menu-button[aria-expanded="true"] { color: var(--color-accent); border-color: var(--color-accent-border); background: var(--color-accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-focus) 45%, transparent); }
.account-menu { position: absolute; z-index: 90; top: calc(100% + 10px); right: 0; width: min(240px, calc(100vw - 24px)); overflow: hidden; border: 1px solid #d8dee7; border-radius: 12px; background: #f8fafc; color: #101827; box-shadow: 0 20px 50px rgba(2, 12, 27, .32); }
.account-menu[hidden] { display: none; }
.account-menu-summary { display: grid; gap: 4px; padding: 15px 16px 13px; }
.account-menu-summary > span:first-child { color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.account-menu-summary strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-version { color: #64748b; font-size: 10px; }
.account-logout-button { width: 100%; min-height: 42px; padding: 0 16px; border: 0; border-top: 1px solid #d8dee7; color: #b42318; background: #fff; font-weight: 700; text-align: left; cursor: pointer; }
.account-logout-button:hover, .account-logout-button:focus-visible { background: #fef2f2; }
.account-logout-button:disabled { opacity: .55; cursor: wait; }
:root[data-theme="dark"] .account-menu { border-color: #32465e; background: #102238; color: #eef5ff; }
:root[data-theme="dark"] .account-menu-summary > span:first-child, :root[data-theme="dark"] .account-menu-version { color: #aebdd0; }
:root[data-theme="dark"] .account-logout-button { border-color: #32465e; color: #ff9aa4; background: #0b1929; }
:root[data-theme="dark"] .account-logout-button:hover, :root[data-theme="dark"] .account-logout-button:focus-visible { background: #42232a; }
.icon-button {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--border-color); border-radius: var(--radius-control);
  background: rgba(9, 28, 40, .94); cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.icon-button:hover { border-color: var(--border-strong); background: var(--panel-background-hover); transform: translateY(-1px); }
.icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.dashboard-layout {
  display: grid;
  grid-template-columns: 176px minmax(0,1fr) minmax(320px,360px);
  gap: 24px;
  padding-top: 26px;
  align-items: start;
}
.dashboard-main { min-width: 0; }
.primary-navigation { position: sticky; top: 20px; min-height: calc(100dvh - 140px); display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--color-border-subtle, var(--border-color)); border-radius: 16px; background: var(--color-bg-sidebar, #07101c); }
.primary-navigation-item { min-height: 48px; width: 100%; padding: 0 14px; border: 0; border-radius: 10px; color: var(--color-text-secondary); background: transparent; text-align: left; cursor: pointer; transition: color 120ms, background 120ms; }
.primary-navigation-item:hover:not(:disabled) { color: var(--color-text-primary); background: var(--color-surface-2); }
.primary-navigation-item[aria-current="page"] { color: var(--color-accent); background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent); }
.primary-navigation-item:disabled { opacity: .48; cursor: not-allowed; }

.context-navigation { height: 40px; display: flex; gap: 4px; overflow-x: auto; margin-bottom: 20px; border-bottom: 1px solid var(--color-border-subtle, var(--border-color)); scrollbar-width: none; }
.context-navigation::-webkit-scrollbar { display: none; }
.context-navigation button { position: relative; flex: 0 0 auto; min-width: 96px; padding: 0 16px; border: 0; color: var(--color-text-secondary); background: transparent; cursor: pointer; }
.context-navigation button[aria-current="page"] { color: var(--color-accent); }
.context-navigation button[aria-current="page"]::after { content: ""; position: absolute; inset: auto 12px -1px; height: 2px; background: var(--color-accent); }
.context-navigation button:disabled { opacity: .48; cursor: not-allowed; }
.global-settings-button[aria-expanded="true"] { color: var(--color-accent); border-color: var(--color-accent-border); background: var(--color-accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-focus) 45%, transparent); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.eyebrow, .panel-index { color: var(--accent-primary); font: 10px/1 var(--font-tech); letter-spacing: .18em; }

.room-count { color: var(--text-dim); font: 11px/1.3 var(--font-tech); text-align: right; }
.group-mode-banner { display:flex;align-items:center;gap:12px;margin:-2px 0 16px;padding:11px 14px;border:1px solid rgba(79,209,155,.46);border-radius:var(--radius-control);background:rgba(79,209,155,.07);box-shadow:0 0 24px rgba(79,209,155,.06); }
.group-mode-banner[hidden] { display:none!important; }.group-mode-chain{color:var(--status-success);font:18px/1 var(--font-tech)}.group-mode-copy{flex:1;min-width:0}.group-mode-banner strong,.group-mode-banner span{display:block}.group-mode-banner strong{font-size:12px}.group-mode-copy>span{margin-top:3px;color:var(--text-secondary);font-size:10px}
.group-all-toggle{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 10px;border:1px solid rgba(79,209,155,.4);border-radius:999px;color:var(--text-secondary);background:rgba(5,20,28,.7);font:10px/1 var(--font-tech);cursor:pointer}.group-all-toggle i{position:relative;width:28px;height:16px;border-radius:999px;background:rgba(132,152,162,.3)}.group-all-toggle i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#8498a2;transition:.18s}.group-all-toggle[aria-checked="true"]{color:var(--status-success)}.group-all-toggle[aria-checked="true"] i{background:rgba(79,209,155,.32)}.group-all-toggle[aria-checked="true"] i::after{transform:translateX(12px);background:var(--status-success)}
.room-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: clamp(14px, 1.35vw, 22px);
}

.room-card {
  container-type: inline-size;
  position: relative;
  min-width: 0;
  min-height: 306px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: var(--panel-background);
  box-shadow: var(--shadow-panel);
  transition: border-color .22s, background .22s, transform .22s var(--ease), box-shadow .22s;
}
.room-card::before, .room-card::after { content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none; opacity: .6; }
.room-card:hover { transform: translateY(-2px); background: var(--panel-background-hover); border-color: var(--border-strong); box-shadow: var(--shadow-panel), var(--glow-accent); }
.room-card.selected { border-color: var(--accent-secondary); box-shadow: var(--shadow-panel), 0 0 0 1px rgba(120, 210, 246, .22), var(--glow-accent); }
.room-card.grouping { cursor:pointer; }.room-card.grouping:hover{border-color:rgba(79,209,155,.65)}
.room-card.unreachable { filter: saturate(.55); }
.room-card.busy { border-color: rgba(104, 195, 234, .46); }
.room-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 17px 18px 12px; }
.room-heading { min-width: 0; }
.room-name-row { min-width: 0; display: flex; align-items: center; gap: 8px; }
.room-name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; font-weight: 540; letter-spacing: -.025em; }
.room-icon { flex: 0 0 auto; display: inline-block; width: 22px; height: 22px; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
.room-name-row > .room-icon { color: var(--color-accent); }
.room-icon--bathroom { -webkit-mask-image: url('/assets/room-icons/room-bathroom.svg'); mask-image:url('/assets/room-icons/room-bathroom.svg'); }
.room-icon--bedroom { -webkit-mask-image: url('/assets/room-icons/room-bedroom.svg'); mask-image:url('/assets/room-icons/room-bedroom.svg'); }
.room-icon--gaming { -webkit-mask-image: url('/assets/room-icons/room-gaming.svg'); mask-image:url('/assets/room-icons/room-gaming.svg'); }
.room-icon--kids { -webkit-mask-image: url('/assets/room-icons/room-kids.svg'); mask-image:url('/assets/room-icons/room-kids.svg'); }
.room-icon--kitchen { -webkit-mask-image: url('/assets/room-icons/room-kitchen.svg'); mask-image:url('/assets/room-icons/room-kitchen.svg'); }
.room-icon--livingroom { -webkit-mask-image: url('/assets/room-icons/room-livingroom.svg'); mask-image:url('/assets/room-icons/room-livingroom.svg'); }
.room-icon--music { -webkit-mask-image: url('/assets/room-icons/room-music.svg'); mask-image:url('/assets/room-icons/room-music.svg'); }
.room-icon--office { -webkit-mask-image: url('/assets/room-icons/room-office.svg'); mask-image:url('/assets/room-icons/room-office.svg'); }
.room-icon--sports { -webkit-mask-image: url('/assets/room-icons/room-sports.svg'); mask-image:url('/assets/room-icons/room-sports.svg'); }
.room-icon--terrace { -webkit-mask-image: url('/assets/room-icons/room-terrace.svg'); mask-image:url('/assets/room-icons/room-terrace.svg'); }
.room-settings-header-actions { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.room-icon-menu-container { position: relative; }
.settings-dialog.app-dialog { overflow: visible; }
.app-dialog-header .room-icon-menu-button { color: var(--color-accent); }
.room-icon-menu-button .room-icon { width: 24px; height: 24px; }
.room-icon-empty { font-size: 24px; font-weight: 400; line-height: 1; }
.room-icon-menu { position: absolute; z-index: 5; top: calc(100% + 8px); right: 0; width: min(292px, calc(100vw - 28px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 8px; border: 1px solid var(--dialog-input-border, var(--border-color)); border-radius: 10px; color: var(--dialog-text, var(--text-primary)); background: var(--dialog-surface-raised, #102238); box-shadow: 0 16px 42px rgba(0,0,0,.32); }
.room-icon-menu[hidden] { display: none; }
.room-icon-menu button { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid transparent; border-radius: 7px; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.room-icon-menu button:hover, .room-icon-menu button:focus-visible { border-color: var(--color-accent-border); background: var(--color-accent-soft); outline: none; }
.room-icon-menu button[aria-checked="true"] { color: var(--color-accent); border-color: var(--color-accent-border); background: var(--color-accent-soft); }
.room-icon-menu button .room-icon { width: 25px; height: 25px; }
.room-icon-menu button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-sleep-timer { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 3px 6px; border: 1px solid rgba(255,157,166,.42); border-radius: 5px; color: #ff9da6; background: rgba(240,107,120,.07); font: 9px/1 var(--font-tech); letter-spacing: .03em; }
.room-sleep-timer svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.room-status-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.reachability { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; color: var(--text-secondary); font-size: 10px; }
.room-settings-button, .room-alarm-button, .room-search-button, .room-group-button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(73,181,230,.24); border-radius: 50%; color: var(--text-secondary); background: rgba(9,28,40,.66); cursor: pointer; transition: .18s; position: relative; }
.room-settings-button:hover, .room-alarm-button:hover, .room-search-button:hover, .room-group-button:hover { color: var(--accent-secondary); border-color: var(--border-strong); background: var(--accent-soft); }
.room-settings-button svg, .room-alarm-button svg, .room-search-button svg, .room-group-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.room-settings-button:disabled, .room-alarm-button:disabled, .room-search-button:disabled, .room-group-button:disabled { opacity: .45; cursor: not-allowed; }
.alarm-active-dot{position:absolute;right:-2px;top:-2px;width:8px;height:8px;border-radius:50%;background:var(--status-success);box-shadow:0 0 9px rgba(79,209,155,.65);border:1px solid var(--background-primary)}.alarm-active-dot[hidden]{display:none}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-success); box-shadow: 0 0 9px rgba(79, 209, 155, .55); }
.unreachable .status-dot { background: var(--status-error); box-shadow: 0 0 9px rgba(240, 107, 120, .5); }
.room-media { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 15px; padding: 0 18px 12px; align-items: center; }
.room-operation-layer { position: absolute; z-index: 4; inset: 0 18px 12px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 14px 16px; overflow: hidden; border: 1px solid rgba(104,195,234,.42); border-radius: 7px; background: rgba(6,18,27,.96); box-shadow: inset 0 0 24px rgba(56,174,232,.08); }
.room-operation-layer strong { overflow: hidden; color: var(--text-primary); font-size: 14px; line-height: 1.35; text-overflow: ellipsis; }
.room-operation-layer > span:not(.room-operation-label) { color: var(--text-dim); font: 10px/1.2 var(--font-tech); }
.room-operation-label { color: var(--accent-secondary); font: 9px/1 var(--font-tech); letter-spacing: .1em; text-transform: uppercase; }
.room-operation-layer.success { border-color: rgba(79,209,155,.5); }.room-operation-layer.success .room-operation-label{color:var(--status-success)}
.room-operation-layer.warning,.room-operation-layer.error { border-color: rgba(240,107,120,.48); }.room-operation-layer.warning .room-operation-label,.room-operation-layer.error .room-operation-label{color:#ff9da6}
.room-operation-progress { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(104,195,234,.16); }
.room-operation-progress i { display: block; width: var(--operation-progress); height: 100%; border-radius: inherit; background: var(--accent-secondary); transition: width .2s ease; }
.cover-frame {
  position: relative; width: 108px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(104, 195, 234, .28); border-radius: 7px; background: #07141d;
}
.cover-frame img { width: 100%; height: 100%; object-fit: cover; }
.cover-frame .speaker-fallback { width: 62%; height: 72%; color: var(--accent-secondary); opacity: .8; filter: drop-shadow(0 0 12px rgba(56,174,232,.22)); }
.cover-frame .soundbar-fallback { width: 82%; height: 44%; }
.tv-mode-icon { width: 70%; height: 70%; display:grid;place-items:center;color:var(--accent-secondary);filter:drop-shadow(0 0 14px rgba(56,174,232,.32)); }
.tv-mode-icon svg { width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round; }
.sidebar-tv-mode-icon{width:64%;height:64%}
.playing-pulse { position: absolute; inset: auto 7px 7px auto; height: 24px; display: flex; align-items: end; gap: 2px; padding: 5px 6px; border: 1px solid var(--border-color); border-radius: 5px; background: rgba(2, 10, 15, .88); }
.playing-pulse i { width: 2px; height: 11px; background: var(--accent-secondary); animation: equalize .72s ease-in-out infinite alternate; transform-origin: bottom; }
.playing-pulse i:nth-child(2) { animation-delay: -.34s; }.playing-pulse i:nth-child(3) { animation-delay: -.53s; }.playing-pulse i:nth-child(4) { animation-delay: -.17s; }
@keyframes equalize { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.track-copy { min-width: 0; }
.track-status { margin-bottom: 8px; color: var(--accent-secondary); font: 10px/1 var(--font-tech); letter-spacing: .11em; text-transform: uppercase; }
.track-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0; font-size: 17px; line-height: 1.25; font-weight: 560; }
.current-title-button { max-width: 100%; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.current-title-button:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 3px; border-radius: 2px; }
.source-artist-row { display: flex; align-items: center; min-width: 0; max-width: 100%; gap: 5px; margin-top: 5px; color: var(--text-secondary); font-size: 12px; line-height: 1.25; }
.source-icon { width: 20px; height: 20px; flex: 0 0 auto; display: inline-flex; color: var(--text-secondary); }
.source-icon.youtube { width: 20px; height: 20px; }
.source-icon:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; border-radius: 3px; }
.source-icon img { width: 100%; height: 100%; object-fit: contain; }
.source-icon-mask { width: 100%; height: 100%; display: block; background: currentColor; opacity: .78; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.source-icon.local_library .source-icon-mask { -webkit-mask-image: url('/assets/source-icons/database.svg'); mask-image: url('/assets/source-icons/database.svg'); }
.source-icon.web_radio .source-icon-mask { -webkit-mask-image: url('/assets/source-icons/web-radio.svg'); mask-image: url('/assets/source-icons/web-radio.svg'); }
.source-icon.unknown .source-icon-mask { -webkit-mask-image: url('/assets/source-icons/unknown-source.svg'); mask-image: url('/assets/source-icons/unknown-source.svg'); }
.source-separator { flex: 0 0 auto; color: var(--text-dim); }
.source-artist { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-album { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; color: var(--text-secondary); font-size: 12px; }
.track-album { color: var(--text-dim); }
.room-badges { min-height: 31px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 0 18px 9px; }
.room-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 7px; border: 1px solid rgba(86, 181, 222, .23); border-radius: 4px; color: var(--text-secondary); background: rgba(36, 115, 151, .07); font: 9px/1.2 var(--font-tech); letter-spacing: .03em; }
.room-badge.muted { color: var(--status-warning); }
.room-badge.group-link.available{color:#8498a2;border-color:rgba(132,152,162,.35)}.room-badge.group-link.master{color:var(--status-success);border-color:rgba(79,209,155,.48);background:rgba(79,209,155,.08)}.room-badge.group-link.slave{color:#f29a52;border-color:rgba(242,154,82,.48);background:rgba(242,154,82,.07)}
.room-badge.group-link:is(button){cursor:pointer}.room-badge.group-link:is(button):hover{filter:brightness(1.25)}.room-badge.group-link:is(button):focus-visible{outline:2px solid var(--accent-secondary);outline-offset:2px}
.room-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: 0 0 auto; }
.progress-block { padding: 0 18px 10px; }
.progress-track { position: relative; height: 4px; overflow: visible; border-radius: 4px; background: rgba(126, 190, 216, .14); cursor: pointer; touch-action: none; }
.progress-track i { display: block; width: var(--progress, 0%); height: 100%; background: var(--accent-primary); box-shadow: 0 0 8px rgba(56, 174, 232, .55); }
.seek-position-overlay { position: absolute; z-index: 2; left: var(--seek-overlay, 0%); bottom: calc(100% + 6px); padding: 3px 5px; border: 1px solid rgba(73, 181, 230, .34); border-radius: 4px; color: var(--text-secondary); background: #06141e; font: 9px/1 var(--font-tech); white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.progress-track.seeking .seek-position-overlay { display: block; }
.seek-position-overlay[hidden] { display: none; }
.progress-track:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; border-radius: 4px; }
.progress-track.seeking { cursor: grabbing; }
.progress-track[aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; }
.progress-times { display: flex; justify-content: space-between; margin-top: 5px; color: var(--text-dim); font: 9px/1 var(--font-tech); }
.tv-progress-block{min-height:26px;display:flex;align-items:center}.tv-progress-block span{color:var(--text-dim);font:9px/1 var(--font-tech);letter-spacing:.14em;text-transform:uppercase}
.room-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 18px; border-top: 1px solid rgba(73, 181, 230, .15); }
.transport-controls { display: flex; align-items: center; gap: 6px; }
.control-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(73, 181, 230, .24); border-radius: 50%; background: rgba(9, 28, 40, .7); cursor: pointer; transition: .18s; }
.control-button:hover { color: var(--accent-secondary); border-color: var(--border-strong); background: var(--accent-soft); }
.control-button.primary { width: 46px; height: 46px; color: #04121a; border-color: var(--accent-secondary); background: var(--accent-secondary); box-shadow: 0 0 17px rgba(56, 174, 232, .2); }
.control-button.active { color: var(--status-warning); border-color: rgba(242,193,92,.5); }
.control-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.control-button.primary svg { fill: currentColor; stroke: none; }
.tv-mode .room-controls{align-items:center}.tv-mode-controls{display:flex;align-items:center;gap:6px;flex:0 0 auto}.tv-toggle-button{width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid rgba(73,181,230,.26);border-radius:50%;color:var(--text-secondary);background:rgba(9,28,40,.72);cursor:pointer;transition:.18s}.tv-toggle-button:hover{color:var(--accent-secondary);border-color:var(--border-strong);background:var(--accent-soft)}.tv-toggle-button.active{color:var(--status-success);border-color:rgba(79,209,155,.55);background:rgba(79,209,155,.1)}.tv-toggle-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.tv-toggle-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.tv-toggle-button:disabled{cursor:not-allowed;opacity:.45}.standard-volume-row,.tv-volume-row{min-width:0;flex:1;display:flex}
.volume-control { min-width: 0; flex: 1; display: grid; grid-template-columns: 24px minmax(62px, 1fr) 27px; align-items: center; gap: 6px; margin-left: 5px; }
.volume-mute-button{width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;color:var(--text-dim);background:transparent;cursor:pointer;transition:.18s}.volume-mute-button:hover{color:var(--accent-secondary);background:var(--accent-soft)}.volume-mute-button.active{color:var(--status-warning)}.volume-mute-button:disabled{cursor:not-allowed}.volume-mute-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;stroke-linecap:round;stroke-linejoin:round }
.volume-control output { color: var(--text-secondary); font: 10px/1 var(--font-tech); text-align: right; }
.volume-slider { width: 100%; height: 24px; margin: 0; accent-color: var(--accent-primary); cursor: pointer; background: transparent; -webkit-appearance: none; appearance: none; }
.volume-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: rgba(126,190,216,.18); }
.volume-slider::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -5.5px; border: 2px solid #fff; border-radius: 50%; -webkit-appearance: none; appearance: none; box-sizing: border-box; background: var(--accent-secondary); box-shadow: 0 0 8px rgba(56,174,232,.4); }
.volume-slider::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(126,190,216,.18); }.volume-slider::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #07141d; border-radius: 50%; background: var(--accent-secondary); }

@container (max-width: 340px) {
  .room-controls { flex-direction: column; align-items: stretch; }
  .transport-controls { justify-content: center; }
  .volume-control { width: 100%; margin-left: 0; grid-template-columns: 24px minmax(0, 1fr) 30px; }
}

.skeleton-card { min-height: 330px; background: linear-gradient(110deg, rgba(10,29,41,.88) 30%, rgba(24,59,76,.82) 46%, rgba(10,29,41,.88) 62%); background-size: 240% 100%; animation: shimmer 1.5s linear infinite; }
@keyframes shimmer { to { background-position-x: -240%; } }
.dashboard-sidebar { position: sticky; top: 20px; display: grid; gap: 15px; min-width: 0; max-height: calc(100vh - 42px); padding-top: 38px; }
.system-settings-entry{min-height:62px;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--border-color);border-radius:var(--radius-panel);color:var(--text-primary);background:var(--panel-background);box-shadow:var(--shadow-panel);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--ease)}.system-settings-entry:hover{border-color:var(--border-strong);background:var(--panel-background-hover);transform:translateY(-1px)}.system-settings-entry:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:3px}.system-settings-entry svg{width:22px;height:22px;fill:none;stroke:var(--accent-secondary);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.system-settings-entry strong,.system-settings-entry small{display:block}.system-settings-entry strong{font-size:12px;font-weight:560}.system-settings-entry small{margin-top:3px;color:var(--text-dim);font-size:9px;line-height:1.35}
.sidebar-mobile-header { display: none; }
.panel { position: relative; min-width: 0; border: 1px solid var(--border-color); border-radius: var(--radius-panel); background: var(--panel-background); box-shadow: var(--shadow-panel); }
.panel-heading { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 15px; border-bottom: 1px solid rgba(73,181,230,.18); }
.panel-heading h2 { margin: 0; font-size: 14px; font-weight: 540; letter-spacing: .02em; }
.status-content { min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 15px; }
.status-content strong, .status-content span { display: block; }.status-content strong { font-size: 14px; }.status-content div span { margin-top: 5px; color: var(--text-secondary); font-size: 11px; }
.status-orb { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; background: var(--status-success); box-shadow: 0 0 0 6px rgba(79,209,155,.08), 0 0 16px rgba(79,209,155,.35); }
.status-orb.partial { background: var(--status-warning); box-shadow: 0 0 0 6px rgba(242,193,92,.08), 0 0 16px rgba(242,193,92,.3); }.status-orb.error { background: var(--status-error); box-shadow: 0 0 0 6px rgba(240,107,120,.08), 0 0 16px rgba(240,107,120,.3); }.status-orb.loading { background: var(--accent-primary); animation: statusPulse 1.1s ease-in-out infinite alternate; }
@keyframes statusPulse { to { opacity: .35; transform: scale(.72); } }
.now-playing-panel { min-height: 390px; overflow: hidden; }
.now-playing-content { min-height: 344px; }
.empty-state { min-height: 330px; display: grid; align-content: center; justify-items: center; padding: 30px; text-align: center; }
.empty-disc { width: 68px; height: 68px; border: 1px solid var(--border-color); border-radius: 50%; background: radial-gradient(circle, var(--background-primary) 0 8px, transparent 9px), repeating-radial-gradient(circle, rgba(120,210,246,.16) 0 1px, transparent 2px 5px); }
.empty-state p { margin: 20px 0 5px; font-size: 14px; }.empty-state > span:last-child { color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.sidebar-track { padding: 15px; }
.sidebar-cover { width: 100%; aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(73,181,230,.25); border-radius: 6px; background: #06131b; }
.sidebar-cover img { width: 100%; height: 100%; object-fit: cover; }.sidebar-cover svg { width: 38%; height: 58%; color: var(--accent-secondary); opacity: .62; }
.selected-room-label { margin-top: 13px; color: var(--accent-secondary); font: 9px/1 var(--font-tech); letter-spacing: .13em; text-transform: uppercase; }
.sidebar-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 7px 0 0; font-size: 20px; line-height: 1.2; font-weight: 550; }
.sidebar-track > .source-artist-row { margin-top: 5px; }.sidebar-album { margin: 3px 0 0; color: var(--text-dim); font-size: 11px; }
.sidebar-progress { margin-top: 14px; }
.sidebar-progress .progress-track { height: 4px; }
.sidebar-tv-summary{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:5px 9px;margin-top:15px;padding:12px;border:1px solid rgba(73,181,230,.22);border-radius:7px;background:rgba(56,174,232,.06)}.sidebar-tv-summary>span{grid-row:1/3;color:var(--accent-secondary)}.sidebar-tv-summary svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}.sidebar-tv-summary strong{font-size:12px}.sidebar-tv-summary small{color:var(--text-dim);font-size:10px;line-height:1.4}
.queue-heading { display: flex; justify-content: space-between; margin: 15px 0 8px; color: var(--text-dim); font: 9px/1 var(--font-tech); letter-spacing: .1em; text-transform: uppercase; }
.queue-list { max-height: 112px; overflow-y: auto; display: grid; gap: 2px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
.queue-item { width: 100%; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 7px 6px; border: 0; border-top: 1px solid rgba(73,181,230,.1); color: inherit; background: transparent; text-align: left; cursor: pointer; transition: .16s; }
.queue-item:hover { color: var(--accent-secondary); background: rgba(56,174,232,.08); }.queue-item.active { background: rgba(79,209,155,.07); }.queue-item:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: -2px; }
.queue-item > span { color: var(--text-dim); font: 9px/1.4 var(--font-tech); }.queue-item strong,.queue-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.queue-item strong { font-size:11px;font-weight:500; }.queue-item small { margin-top:2px;color:var(--text-dim);font-size:9px; }.queue-item > i { color: var(--status-success); font: 7px/1 var(--font-tech); letter-spacing: .07em; font-style: normal; }
.queue-state { padding: 14px 8px; color: var(--text-dim); font-size: 10px; line-height: 1.45; }.queue-state.error { color: #ff9da6; }

.alarm-card-actions{display:flex;align-items:center;align-self:start;gap:10px}
.alarm-edit-button{position:static;width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;padding:0;border:1px solid rgba(73,181,230,.24);border-radius:50%;color:var(--text-secondary);background:rgba(9,28,40,.7);cursor:pointer;transition:.18s}
.alarm-edit-button:hover{color:var(--accent-secondary);border-color:var(--border-strong);background:var(--accent-soft)}
.alarm-edit-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.modal-backdrop.alarm-edit-backdrop{padding:12px}
.alarm-edit-dialog{width:min(480px,100%);height:min(696px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-strong);border-radius:12px;background:#081a25;box-shadow:0 28px 100px rgba(0,0,0,.58),var(--glow-accent);transform:translateY(12px) scale(.99);transition:.22s}
.modal-backdrop.open .alarm-edit-dialog{transform:none}
.alarm-edit-content{flex:1 1 0;min-height:0;overflow:hidden}
.alarm-edit-form{height:100%;min-height:0;display:flex;flex-direction:column}
.alarm-edit-fields{overflow-y:auto;min-height:0;display:grid;gap:18px;padding:18px 20px 8px;scrollbar-gutter:stable}
.alarm-edit-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.alarm-edit-label{color:var(--text-secondary);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.alarm-time-label{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px}
.alarm-time-label input{height:42px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-control);color:var(--text-primary);background:#06151e;font:14px/1 var(--font-tech)}
.weekday-toggles{display:flex;gap:5px}
.weekday-toggle{flex:1;min-width:34px;height:34px;border:1px solid rgba(73,181,230,.24);border-radius:6px;color:var(--text-dim);background:rgba(9,28,40,.66);font:10px/1 var(--font-tech);cursor:pointer;transition:.18s}
.weekday-toggle.active,.weekday-toggle[aria-pressed="true"]{color:var(--accent-secondary);border-color:rgba(56,174,232,.55);background:var(--accent-soft)}
.alarm-setting-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--text-secondary);cursor:pointer}
.alarm-setting-toggle>span{min-width:0}
.alarm-setting-toggle strong,.alarm-setting-toggle small{display:block}
.alarm-setting-toggle>span>small{margin-top:4px;color:var(--text-dim);font-size:10px;line-height:1.35}
.alarm-setting-toggle input{position:absolute;opacity:0;pointer-events:none}
.alarm-setting-toggle>i{position:relative;width:38px;height:21px;flex:0 0 auto;border:1px solid rgba(73,181,230,.34);border-radius:20px;background:rgba(92,128,143,.16);transition:.18s}
.alarm-setting-toggle>i::after{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--text-dim);transition:.18s}
.alarm-setting-toggle input:checked+i{border-color:rgba(79,209,155,.58);background:rgba(79,209,155,.15)}
.alarm-setting-toggle input:checked+i::after{left:20px;background:var(--status-success);box-shadow:0 0 8px rgba(79,209,155,.5)}
.duration-presets{display:flex;gap:5px}
.duration-preset{flex:1;min-width:42px;height:42px;border:1px solid rgba(73,181,230,.24);border-radius:6px;color:var(--text-secondary);background:rgba(9,28,40,.7);font:10px/1 var(--font-tech);cursor:pointer;transition:.18s}
.duration-preset.active,.duration-preset[aria-pressed="true"]{color:var(--status-success);border-color:rgba(79,209,155,.58);background:rgba(79,209,155,.12)}
.alarm-edit-volume-label{display:flex;flex-direction:column;gap:6px;flex:1;color:var(--text-secondary)}
.alarm-edit-volume-label>span{display:flex;justify-content:space-between;align-items:baseline}
.alarm-edit-volume-label>span>small{color:var(--text-dim);font-size:11px}
.alarm-edit-volume-label input{accent-color:var(--accent-primary);cursor:pointer}
.alarm-edit-volume-label output{padding-left:8px;color:var(--text-secondary);font:10px/1 var(--font-tech)}
.alarm-program-section{display:grid;gap:12px;padding-top:16px;border-top:1px solid rgba(73,181,230,.12)}
.alarm-program-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}
.alarm-program-search-button{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;padding:0;border:1px solid rgba(73,181,230,.34);border-radius:50%;color:var(--accent-secondary);background:rgba(9,28,40,.7);cursor:pointer;transition:.18s}
.alarm-program-search-button:hover{border-color:var(--border-strong);background:var(--accent-soft)}
.alarm-program-search-button:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:2px}
.alarm-program-search-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.alarm-program-selection{min-width:0;padding:11px 12px;border:1px solid rgba(73,181,230,.18);border-radius:7px;background:rgba(6,21,30,.72);transition:.18s}
.alarm-program-selection strong,.alarm-program-selection small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alarm-program-selection strong{font-size:13px;font-weight:540}.alarm-program-selection small{margin-top:4px;color:var(--text-dim);font-size:10px}
.alarm-program-selection.inactive{opacity:.55}
.alarm-buzzer-toggle{padding-top:2px}
.alarm-program-validation{margin:0;color:#ff9da6;font-size:10px;line-height:1.45}
.alarm-search-select-button{width:40px;height:40px;display:grid;place-items:center;flex:0 0 40px;padding:0;border:1px solid rgba(79,209,155,.5);border-radius:50%;color:var(--status-success);background:rgba(79,209,155,.1);cursor:pointer;transition:.18s}
.alarm-search-select-button:hover{background:rgba(79,209,155,.18)}
.alarm-search-select-button:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:2px}
.alarm-search-select-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.alarm-edit-actions{flex:0 0 auto;display:flex;justify-content:flex-end;padding:14px 20px 18px;border-top:1px solid rgba(73,181,230,.12);background:var(--panel-background)}
.alarm-edit-actions .primary-action-button{display:inline-flex;align-items:center;gap:8px}
.alarm-edit-actions .primary-action-button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.settings-toggle-row{flex-direction:column;align-items:stretch;gap:14px;border-top:1px solid rgba(73,181,230,.12);border-bottom:1px solid rgba(73,181,230,.12);padding:14px 0}

.group-confirm-button{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(79,209,155,.55);border-radius:50%;color:#06140f;background:var(--status-success);cursor:pointer;transition:.18s;box-shadow:0 0 14px rgba(79,209,155,.3);flex:0 0 auto}
.group-confirm-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.group-confirm-button:disabled{opacity:.55;cursor:not-allowed;filter:none;transform:none}
.group-confirm-button svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.dashboard-footer { min-height: 94px; display:flex;align-items:end;justify-content:space-between;gap:20px;padding-top:22px;margin-top:6px;border-bottom:1px solid var(--border-color); }
.refresh-status { display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding-bottom:12px; }
.last-updated,.app-version,.connection-status { color:var(--text-dim);font:10px/1.3 var(--font-tech); }.app-version,.connection-status{padding-left:12px;border-left:1px solid var(--border-color);letter-spacing:.04em}.connection-status{display:inline-flex;align-items:center;gap:7px}.connection-status .status-orb{width:7px;height:7px;box-shadow:0 0 8px rgba(79,209,155,.55)}
.sidebar-backdrop { position:fixed;inset:0;z-index:40;background:rgba(0,7,11,.72);opacity:0;visibility:hidden;transition:.25s;backdrop-filter:blur(3px); }
.modal-backdrop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:clamp(12px,3vw,36px);background:rgba(0,7,11,.82);backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.22s}.modal-backdrop.open{opacity:1;visibility:visible}.alarm-dialog{width:min(980px,100%);max-height:min(860px,calc(100vh - 24px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-strong);border-radius:12px;background:#081a25;box-shadow:0 28px 100px rgba(0,0,0,.58),var(--glow-accent);transform:translateY(12px) scale(.99);transition:.22s}.modal-backdrop.open .alarm-dialog{transform:none}.alarm-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--border-color)}.alarm-dialog-header h2{margin:5px 0 0;font-size:28px;font-weight:500}.alarm-dialog-status{padding:10px 20px;color:var(--text-dim);border-bottom:1px solid rgba(73,181,230,.12);font:10px/1.3 var(--font-tech)}.alarm-list{min-height:180px;overflow-y:auto;padding:18px 20px 24px}.alarm-room+.alarm-room{margin-top:22px}.alarm-room>h3{margin:0 0 10px;color:var(--accent-secondary);font:11px/1 var(--font-tech);letter-spacing:.13em;text-transform:uppercase}.alarm-room-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.alarm-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:13px;padding:15px;border:1px solid rgba(73,181,230,.25);border-radius:9px;background:rgba(9,31,44,.82)}.alarm-card.enabled{border-color:rgba(79,209,155,.46);box-shadow:inset 3px 0 0 rgba(79,209,155,.75)}.alarm-time time{display:block;font:26px/1 var(--font-tech);letter-spacing:-.04em}.alarm-time span{display:block;margin-top:6px;color:var(--text-secondary);font-size:10px}.alarm-toggle{display:flex;align-items:center;gap:8px;align-self:start;color:var(--text-secondary);font-size:10px;cursor:pointer}.alarm-toggle input{position:absolute;opacity:0;pointer-events:none}.alarm-toggle i{position:relative;width:38px;height:21px;border:1px solid var(--border-color);border-radius:20px;background:#06131b;transition:.2s}.alarm-toggle i::after{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--text-dim);transition:.2s}.alarm-toggle input:checked+i{border-color:rgba(79,209,155,.65);background:rgba(79,209,155,.15)}.alarm-toggle input:checked+i::after{left:20px;background:var(--status-success);box-shadow:0 0 8px rgba(79,209,155,.5)}.alarm-toggle input:focus-visible+i{outline:2px solid var(--accent-secondary);outline-offset:3px}.alarm-toggle input:disabled+i{opacity:.45}.alarm-days{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.alarm-days span{display:grid;place-items:center;height:25px;border:1px solid rgba(73,181,230,.16);border-radius:4px;color:var(--text-dim);font:9px/1 var(--font-tech)}.alarm-days span.active{color:var(--accent-secondary);border-color:rgba(56,174,232,.45);background:var(--accent-soft)}.alarm-details{grid-column:1/-1;display:grid;grid-template-columns:2fr repeat(4,1fr);gap:7px;margin:0;padding-top:2px}.alarm-details div{min-width:0;padding-top:8px;border-top:1px solid rgba(73,181,230,.1)}.alarm-details dt{color:var(--text-dim);font:8px/1.2 var(--font-tech);text-transform:uppercase}.alarm-details dd{overflow:hidden;margin:4px 0 0;color:var(--text-secondary);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.alarm-empty{min-height:180px;display:grid;place-items:center;padding:30px;color:var(--text-secondary);text-align:center}.alarm-empty.error{color:var(--status-error)}.alarm-loading{height:220px;border-radius:9px;background:linear-gradient(110deg,rgba(10,29,41,.88) 30%,rgba(24,59,76,.82) 46%,rgba(10,29,41,.88) 62%);background-size:240% 100%;animation:shimmer 1.5s linear infinite}
.settings-dialog { width: min(560px, 100%); max-height: calc(100dvh - 24px); position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 10px; background: #081a25; box-shadow: 0 20px 64px rgba(0,0,0,.52), var(--glow-accent); transform: translateY(8px) scale(.99); transition: .18s; }
.system-settings-dialog{width:min(520px,100%);max-height:calc(100dvh - 24px);overflow-x:hidden;overflow-y:auto;border:1px solid var(--border-strong);border-radius:12px;background:#081a25;box-shadow:0 28px 100px rgba(0,0,0,.58),var(--glow-accent);transform:translateY(12px) scale(.99);transition:.22s}.modal-backdrop.open .system-settings-dialog{transform:none}.system-settings-content{min-width:0;padding:18px}.system-settings-placeholder{margin:16px 0 0;color:var(--text-secondary);font-size:13px;line-height:1.55}.system-settings-tabs{display:flex;gap:8px;min-width:0;border-bottom:1px solid var(--border-color);padding-bottom:14px}.system-settings-tabs button{flex:1 1 0;min-width:0;border:1px solid var(--border-color);border-radius:7px;background:transparent;color:var(--text-secondary);padding:8px 6px;overflow-wrap:anywhere;cursor:pointer}.system-settings-tabs button[aria-current="page"],.system-settings-tabs button[aria-selected="true"]{background:transparent;border-color:transparent;color:var(--accent-secondary)}.system-settings-tabs button:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.system-settings-form{display:grid;gap:14px;min-width:0;margin-top:16px}.system-settings-form label{display:grid;gap:6px;min-width:0;color:var(--text-secondary);font-size:13px}.system-settings-form input,.system-settings-form select{width:100%;min-width:0;max-width:100%;border:1px solid var(--border-color);border-radius:7px;background:#06151d;color:var(--text-primary);padding:9px}.system-settings-form input:focus-visible,.system-settings-form select:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.system-settings-form small{color:var(--text-secondary);line-height:1.4}.accent-color-fieldset{display:grid;gap:10px;margin:0;padding:0;border:0}.accent-color-fieldset legend{font-weight:600}.accent-swatch-list{display:flex;flex-wrap:wrap;gap:10px}.accent-swatch{position:relative;width:44px;height:44px;display:grid!important;place-items:center!important;cursor:pointer}.accent-swatch input{position:absolute;opacity:0;inset:0;cursor:pointer}.accent-swatch span:first-of-type{width:28px;height:28px;display:grid;place-items:center;border:2px solid transparent;border-radius:50%;color:transparent;background:var(--color-accent)}.accent-swatch-blue span:first-of-type{background:#2563eb}.accent-swatch input:checked+span{border-color:var(--color-on-accent);color:var(--color-on-accent);box-shadow:0 0 0 3px var(--color-accent-focus)}.accent-swatch input:focus-visible+span{outline:2px solid var(--color-accent-focus);outline-offset:3px}.accent-swatch-violet span:first-of-type{background:#7c5cfc}.accent-swatch-cyan span:first-of-type{background:#22b8cf}.accent-swatch-green span:first-of-type{background:#35b96f}.accent-swatch-orange span:first-of-type{background:#f28c38}.accent-swatch-pink span:first-of-type{background:#ec5b8f}.system-settings-form .system-settings-switch{display:flex;align-items:center;justify-content:space-between;gap:16px}.system-settings-switch span{min-width:0}.system-settings-switch strong,.system-settings-switch small{display:block}.system-settings-switch input[type="checkbox"]{width:20px;height:20px;flex:0 0 auto;padding:0;accent-color:var(--accent-primary)}.system-settings-error{min-height:18px;margin:0;color:var(--status-error);font-size:12px;line-height:1.4}.system-settings-actions{display:flex;justify-content:flex-end;margin-top:4px}.system-settings-actions .primary-action-button{display:inline-flex;align-items:center;justify-content:center}.system-settings-actions button:disabled{opacity:.6;cursor:wait}
.sleep-fade-preview{display:block;min-width:0;max-width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:7px;background:rgba(73,181,230,.06);color:var(--text-secondary);font-size:12px;line-height:1.5;overflow-wrap:anywhere}.system-settings-form[hidden]{display:none}
.modal-backdrop.open .settings-dialog { transform: none; }
.settings-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--border-color); }
.settings-dialog-header h2 { margin: 4px 0 0; font-size: 19px; font-weight: 520; }
.settings-content { min-height: 0; overflow-y: auto; padding: 4px 14px 12px; }
.settings-tabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 0 14px; padding: 8px 0 6px; border-bottom: 1px solid var(--border-color); }
.settings-tabs button { min-width: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 6px; color: var(--text-dim); background: transparent; font: 11px/1.2 var(--font-tech); cursor: pointer; }
.settings-tabs button[aria-selected="true"] { color: var(--accent-secondary); border-color: var(--border-strong); background: rgba(73,181,230,.1); }
.settings-tabs button:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; }
.settings-tabs button:disabled { cursor: not-allowed; opacity: .5; }
.settings-content [role="tabpanel"][hidden], .settings-dialog [role="tabpanel"][hidden] { display: none; }
.equalizer-controls { display: grid; padding-top: 5px; }
.equalizer-control { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(73,181,230,.11); }
.equalizer-control > span:first-child { min-width: 0; }
.equalizer-control strong, .equalizer-control small { display: block; }
.equalizer-control strong { font-size: 12px; font-weight: 540; }
.equalizer-control small { margin-top: 3px; color: var(--text-dim); font-size: 9px; line-height: 1.3; }
.equalizer-range { width: 160px; flex: 0 0 auto; display: grid; grid-template-columns: minmax(0,1fr) 28px; align-items: center; gap: 8px; }
.equalizer-range input { min-width: 0; width: 100%; accent-color: var(--accent-primary); cursor: pointer; }
.equalizer-range output { color: var(--text-secondary); font: 10px/1 var(--font-tech); text-align: right; }
.equalizer-loudness { position: relative; }
.equalizer-loudness [data-equalizer-loudness] { position: absolute; opacity: 0; pointer-events: none; }
.equalizer-loudness > i { position: relative; width: 38px; height: 21px; flex: 0 0 auto; border: 1px solid rgba(105,164,189,.34); border-radius: 20px; background: rgba(92,128,143,.16); cursor: pointer; transition: .18s; }
.equalizer-loudness > i::after { content: ""; position: absolute; width: 15px; height: 15px; left: 2px; top: 2px; border-radius: 50%; background: var(--text-dim); transition: .18s; }
.equalizer-loudness [data-equalizer-loudness]:checked + i { border-color: rgba(79,209,155,.58); background: rgba(79,209,155,.18); }
.equalizer-loudness [data-equalizer-loudness]:checked + i::after { transform: translateX(17px); background: var(--status-success); box-shadow: 0 0 8px rgba(79,209,155,.38); }
.equalizer-loudness [data-equalizer-loudness]:focus-visible + i { outline: 2px solid var(--accent-secondary); outline-offset: 3px; }
.equalizer-loudness [data-equalizer-loudness]:disabled + i, .equalizer-range input:disabled { cursor: not-allowed; opacity: .5; }
.equalizer-status { min-height: 18px; margin: 8px 0 0; color: var(--text-dim); font: 9px/1.4 var(--font-tech); }
.equalizer-status[role="alert"] { color: var(--status-error); }
.equalizer-placeholder { display: grid; gap: 12px; justify-items: start; padding: 24px 0; color: var(--text-dim); font-size: 12px; }
.equalizer-placeholder button { min-height: 34px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text-primary); background: rgba(73,181,230,.08); cursor: pointer; }
.settings-list { display: grid; }
.settings-row { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; position: relative; }
.settings-row + .settings-row { border-top: 1px solid rgba(73,181,230,.11); }
.settings-row > span, .sleep-setting-copy > span { min-width: 0; }
.settings-row strong, .settings-row small { display: block; }
.settings-row strong { font-size: 12px; font-weight: 540; }
.settings-row small { margin-top: 3px; color: var(--text-dim); font-size: 9px; line-height: 1.3; }
.settings-row.unavailable { opacity: .5; }
.settings-row input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.settings-row > i { position: relative; width: 38px; height: 21px; flex: 0 0 auto; border: 1px solid rgba(105,164,189,.34); border-radius: 20px; background: rgba(92,128,143,.16); cursor: pointer; transition: .18s; }
.settings-row > i::after { content: ""; position: absolute; width: 15px; height: 15px; left: 2px; top: 2px; border-radius: 50%; background: var(--text-dim); transition: .18s; }
.settings-row input:checked + i { border-color: rgba(79,209,155,.58); background: rgba(79,209,155,.18); }
.settings-row input:checked + i::after { transform: translateX(17px); background: var(--status-success); box-shadow: 0 0 8px rgba(79,209,155,.38); }
.settings-row input:focus-visible + i { outline: 2px solid var(--accent-secondary); outline-offset: 3px; }
.settings-divider { height: 1px; margin: 4px 0; border: 0; background: linear-gradient(90deg, transparent, rgba(73,181,230,.35), transparent); }
.volume-limit-row { min-height: 66px; }
.volume-limit-control { width: 135px; flex: 0 0 auto; display: grid; grid-template-columns: minmax(0,1fr) 30px; align-items: center; gap: 6px; }
.volume-limit-control input { width: 100%; accent-color: var(--accent-primary); cursor: pointer; }
.volume-limit-control output { color: var(--text-secondary); font: 9px/1 var(--font-tech); text-align: right; }
.sleep-settings-row { align-items: stretch; flex-direction: column; gap: 7px; padding: 9px 0 3px; }
.sleep-setting-copy { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sleep-remaining.active { color: var(--status-error); }
.sleep-presets { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; }
.sleep-presets button { height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(73,181,230,.24); border-radius: 5px; color: var(--text-secondary); background: rgba(9,28,40,.66); font: 9px/1 var(--font-tech); cursor: pointer; transition: .18s; }
.sleep-presets button:hover { color: var(--accent-secondary); border-color: var(--border-strong); }
.sleep-presets button.active { color: var(--status-success); border-color: rgba(79,209,155,.58); background: rgba(79,209,155,.12); }
.sleep-presets button.off.active { color: var(--status-error); border-color: rgba(239,103,115,.55); background: rgba(239,103,115,.1); }
.sleep-presets button:disabled { cursor: not-allowed; opacity: .5; }
.sleep-presets button:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; }
.sleep-presets svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sleep-fade-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 0 2px; border-top: 1px solid rgba(73,181,230,.11); position: relative; }
.sleep-fade-row > span { min-width: 0; }
.sleep-fade-row strong, .sleep-fade-row small { display: block; }
.sleep-fade-row strong { font-size: 13px; font-weight: 540; }
.sleep-fade-row small { margin-top: 4px; color: var(--text-dim); font-size: 10px; line-height: 1.35; }
.sleep-fade-row .sleep-fade-status { color: var(--text-secondary); }
.sleep-fade-row.active .sleep-fade-status { color: var(--status-success); }
.sleep-fade-row.off .sleep-fade-status { color: var(--status-error); }
.sleep-fade-row [data-sleep-fade-toggle] { position: absolute; opacity: 0; pointer-events: none; }
.sleep-fade-row > i { position: relative; width: 38px; height: 21px; flex: 0 0 auto; border: 1px solid rgba(105,164,189,.34); border-radius: 20px; background: rgba(92,128,143,.16); cursor: pointer; transition: .18s; }
.sleep-fade-row > i::after { content: ""; position: absolute; width: 15px; height: 15px; left: 2px; top: 2px; border-radius: 50%; background: var(--text-dim); transition: .18s; }
.sleep-fade-row [data-sleep-fade-toggle]:checked + i { border-color: rgba(79,209,155,.58); background: rgba(79,209,155,.18); }
.sleep-fade-row [data-sleep-fade-toggle]:checked + i::after { transform: translateX(17px); background: var(--status-success); box-shadow: 0 0 8px rgba(79,209,155,.38); }
.sleep-fade-row [data-sleep-fade-toggle]:focus-visible + i { outline: 2px solid var(--accent-secondary); outline-offset: 3px; }
.sleep-fade-row [data-sleep-fade-toggle]:disabled + i { cursor: not-allowed; opacity: .48; }
.loop-mode-control { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 36px); gap: 4px; }
.loop-mode-control button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(73,181,230,.24); border-radius: 6px; color: var(--text-dim); background: rgba(9,28,40,.66); cursor: pointer; transition: .18s; }
.loop-mode-control button:hover { color: var(--accent-secondary); border-color: var(--border-strong); }.loop-mode-control button.active { color: var(--status-success); border-color: rgba(79,209,155,.58); background: rgba(79,209,155,.12); box-shadow: inset 0 0 0 1px rgba(79,209,155,.1); }.loop-mode-control button:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; }.loop-mode-control button:disabled { cursor: not-allowed; opacity: .5; }
.loop-mode-control svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.queue-dialog { width: min(620px, 100%); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 12px; background: #081a25; box-shadow: 0 28px 100px rgba(0,0,0,.58), var(--glow-accent); transform: translateY(12px) scale(.99); transition: .22s; }
.modal-backdrop.open .queue-dialog { transform: none; }
.queue-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 18px; border-bottom: 1px solid var(--border-color); }
.queue-dialog-header h2 { margin: 5px 0 0; font-size: 22px; font-weight: 520; }
.queue-modal-status { padding: 10px 18px; color: var(--text-dim); border-bottom: 1px solid rgba(73,181,230,.12); font: 10px/1.3 var(--font-tech); }
.queue-modal-list { min-height: 120px; overflow-y: auto; padding: 8px 10px 14px; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
.modal-queue-item { min-height: 54px; padding: 9px 10px; border-radius: 5px; }.modal-queue-item strong { font-size: 13px; }.modal-queue-item small { font-size: 10px; }

.settings-link-row { width: 100%; padding: 0; border: 0; color: var(--text-primary); background: transparent; text-align: left; cursor: pointer; }.settings-link-row > span:last-child { color: var(--accent-secondary); font-size: 24px; }.settings-link-row:hover strong { color: var(--accent-secondary); }.settings-link-row:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 3px; }
.playlist-snapshot-dialog { width: min(720px, 100%); max-height: calc(100dvh - 24px); position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 12px; background: #081a25; box-shadow: 0 28px 100px rgba(0,0,0,.58), var(--glow-accent); transform: translateY(12px) scale(.99); transition: .22s; }.modal-backdrop.open .playlist-snapshot-dialog { transform: none; }
.playlist-snapshot-content { min-height: 0; overflow-y: auto; padding: 10px 14px 18px; }.playlist-save-form { display: grid; gap: 8px; }.playlist-save-form > label, .playlist-snapshot-toolbar label > span { color: var(--text-dim); font: 10px/1.3 var(--font-tech); text-transform: uppercase; letter-spacing: .08em; }.playlist-save-form > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; }.playlist-save-form input, .playlist-snapshot-toolbar select { min-width: 0; height: 42px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); background: rgba(4,18,27,.8); padding: 0 12px; font: 13px var(--font-body); }.playlist-save-form input:focus-visible, .playlist-snapshot-toolbar select:focus-visible { outline: 2px solid var(--accent-secondary); outline-offset: 2px; }
.playlist-snapshot-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 16px; }.playlist-snapshot-toolbar label { display: grid; gap: 6px; }.playlist-snapshot-status { min-height: 28px; margin: 12px 0 0; color: var(--text-dim); font: 10px/1.4 var(--font-tech); }.playlist-snapshot-list { display: grid; gap: 8px; }.playlist-snapshot-row { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(73,181,230,.14); border-radius: 7px; background: rgba(5,24,35,.64); }.playlist-snapshot-row > div:first-child { min-width: 0; }.playlist-snapshot-row strong, .playlist-snapshot-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.playlist-snapshot-row strong { font-size: 13px; }.playlist-snapshot-row small { margin-top: 5px; color: var(--text-dim); font-size: 10px; }.playlist-snapshot-empty { padding: 28px 12px; color: var(--text-dim); text-align: center; }.playlist-snapshot-empty.error { color: var(--status-error); }
.playlist-share-icon { flex: 0 0 auto; }
.playlist-share-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.playlist-snapshot-row.renaming { display: block; }.playlist-rename-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }.playlist-rename-form input { min-width: 0; height: 42px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text-primary); background: #06151e; }.playlist-rename-form button { min-height: 42px; padding-inline: 12px; }
.playlist-action-menu { position: relative; flex: 0 0 auto; }.playlist-more-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-dim); background: rgba(7,23,33,.9); cursor: pointer; }.playlist-more-button svg { width: 19px; height: 19px; fill: currentColor; }.playlist-menu-popover { width: 190px; position: absolute; z-index: 4; top: calc(100% + 6px); right: 0; display: grid; padding: 5px; border: 1px solid var(--border-strong); border-radius: 7px; background: #0a202d; box-shadow: 0 16px 38px rgba(0,0,0,.48); }.playlist-menu-popover[hidden] { display: none; }.playlist-menu-popover button { min-height: 34px; padding: 6px 9px; border: 0; border-radius: 4px; color: var(--text-primary); background: transparent; text-align: left; cursor: pointer; }.playlist-menu-popover button:hover, .playlist-menu-popover button:focus-visible { color: var(--accent-secondary); background: rgba(73,181,230,.1); outline: 0; }.playlist-menu-popover button.danger { color: #ff8e8e; }
.playlist-share-overlay { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2,10,15,.88); backdrop-filter: blur(8px); }.playlist-share-overlay[hidden] { display: none; }.playlist-share-panel { width: min(500px, 100%); max-height: 100%; overflow-y: auto; display: grid; gap: 14px; padding: 20px; border: 1px solid var(--border-strong); border-radius: 10px; background: #0a202d; box-shadow: 0 22px 60px rgba(0,0,0,.52); }.playlist-share-panel h3, .playlist-share-panel p { margin: 0; }.playlist-share-panel p { color: var(--text-dim); font-size: 12px; }.playlist-share-targets, .playlist-share-modes { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 8px; }.playlist-share-targets button { min-height: 42px; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); background: rgba(5,24,35,.72); cursor: pointer; }.playlist-share-targets button[aria-checked="true"] { color: var(--status-success); border-color: rgba(79,209,155,.58); background: rgba(79,209,155,.11); }

.announcement-dialog{width:min(540px,100%);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-strong);border-radius:12px;background:#081a25;box-shadow:0 28px 100px rgba(0,0,0,.58),var(--glow-accent);transform:translateY(12px) scale(.99);transition:.22s}.modal-backdrop.open .announcement-dialog{transform:none}.announcement-content{display:grid;gap:9px;padding:20px}.announcement-content>label{font-size:13px;font-weight:560}.announcement-content textarea{width:100%;min-height:126px;resize:vertical;padding:12px;border:1px solid var(--border-strong);border-radius:8px;color:var(--text-primary);background:#06151e;line-height:1.5}.announcement-content>p{margin:0;color:var(--text-dim);font-size:10px;line-height:1.45}.announcement-content .announcement-status{min-height:1.45em;color:var(--text-secondary)}.announcement-content audio{width:100%;margin-top:5px;accent-color:var(--accent-primary)}.announcement-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px 18px;border-top:1px solid rgba(73,181,230,.14);background:rgba(6,21,30,.72)}.announcement-recording-controls{display:flex;align-items:center;gap:10px}.announcement-record-button{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--border-strong);border-radius:50%;color:var(--accent-secondary);background:var(--accent-soft);cursor:pointer;transition:.18s}.announcement-record-button:hover{filter:brightness(1.18)}.announcement-record-button.recording{color:#fff;border-color:var(--status-error);background:var(--status-error);box-shadow:0 0 18px rgba(240,107,120,.34)}.announcement-record-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.announcement-record-button.recording svg{fill:currentColor;stroke:none}.announcement-recording-controls time{color:var(--text-secondary);font:11px/1 var(--font-tech);font-variant-numeric:tabular-nums}.announcement-footer .primary-action-button{min-width:118px}

.search-dialog,.album-dialog{width:min(760px,100%);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border-strong);border-radius:12px;background:#081a25;box-shadow:0 28px 100px rgba(0,0,0,.58),var(--glow-accent);transform:translateY(12px) scale(.99);transition:.22s}.modal-backdrop.open .search-dialog,.modal-backdrop.open .album-dialog{transform:none}.album-backdrop{z-index:95}.search-dialog-header,.album-dialog-header{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border-color)}.search-dialog-header h2,.album-dialog-header h2{margin:4px 0 0;font-size:22px;font-weight:520}.album-dialog-header h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-controls{display:grid;gap:10px;padding:14px 18px 10px;border-bottom:1px solid rgba(73,181,230,.12)}.search-input-label{height:44px;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:9px;padding:0 12px;border:1px solid var(--border-strong);border-radius:7px;background:#06151e}.search-input-label:focus-within{box-shadow:0 0 0 2px rgba(120,210,246,.2)}.search-input-label svg{width:20px;height:20px;fill:none;stroke:var(--accent-secondary);stroke-width:1.8}.search-input-label input{min-width:0;height:100%;border:0;outline:0;color:var(--text-primary);background:transparent;font:14px/1 var(--font-body)}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.search-categories{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.search-categories::-webkit-scrollbar{display:none}.search-hint{margin:0;color:var(--text-dim);font-size:10px}.search-status{min-height:34px;padding:10px 18px 8px;color:var(--text-dim);font:10px/1.3 var(--font-tech)}.search-results,.album-content{min-height:0;overflow-x:hidden;overflow-y:auto;padding:0 12px 18px;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.search-source-separator{display:flex;align-items:center;gap:12px;margin:10px 4px 5px;color:var(--accent-secondary);font:9px/1 var(--font-tech);letter-spacing:.11em;text-transform:uppercase}.search-source-separator::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--border-color),transparent)}.search-result-row,.album-track-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 38px;align-items:center;gap:10px;min-height:62px;padding:7px 5px;border-bottom:1px solid rgba(73,181,230,.1)}.search-result-art{width:48px;height:48px;object-fit:cover;border-radius:5px;background:#07141d}.search-art-fallback{display:grid;place-items:center;color:var(--text-dim)}.search-art-fallback svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}.search-result-copy{min-width:0;display:grid;gap:3px}.search-result-copy strong,.album-track-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.search-result-copy small,.album-track-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font-size:10px}.album-detail-button{justify-self:start;padding:0;border:0;color:var(--accent-secondary);background:transparent;font-size:10px;cursor:pointer}.search-action-menu{position:relative;justify-self:end}.search-more-button{width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:50%;color:var(--text-secondary);background:transparent;cursor:pointer}.search-more-button:hover,.search-more-button[aria-expanded="true"]{border-color:var(--border-strong);background:var(--accent-soft)}.search-more-button svg{width:20px;height:20px;fill:currentColor;stroke:none}.search-menu-popover{position:absolute;z-index:6;right:0;top:39px;width:max-content;min-width:190px;padding:5px;border:1px solid var(--border-strong);border-radius:7px;background:#0b2635;box-shadow:0 14px 34px rgba(0,0,0,.48)}.search-menu-popover[hidden]{display:none}.search-menu-popover button{width:100%;min-height:38px;padding:0 10px;border:0;border-radius:4px;color:var(--text-secondary);background:transparent;text-align:left;font-size:11px;cursor:pointer}.search-menu-popover button:hover,.search-menu-popover button:focus-visible{color:var(--text-primary);background:var(--accent-soft);outline:none}.search-menu-popover button:disabled{opacity:.5;cursor:wait}.search-source-hint,.search-empty{margin:18px 5px;padding:15px;border:1px solid rgba(73,181,230,.15);border-radius:6px;color:var(--text-dim);background:rgba(9,28,40,.5);font-size:11px;text-align:center}.search-empty.error{color:var(--status-error)}.search-loading{width:24px;height:24px;margin:32px auto;border:2px solid rgba(73,181,230,.2);border-top-color:var(--accent-secondary);border-radius:50%;animation:spin .8s linear infinite}.album-back-button{min-height:38px;display:flex;align-items:center;gap:5px;padding:0 7px;border:0;color:var(--accent-secondary);background:transparent;cursor:pointer}.album-back-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2}.album-summary{display:grid;grid-template-columns:128px minmax(0,1fr) 40px;align-items:center;gap:18px;padding:20px 8px;border-bottom:1px solid var(--border-color)}.album-cover{width:128px;height:128px;object-fit:cover;border-radius:7px;background:#07141d}.album-summary h3{margin:7px 0 5px;font-size:22px}.album-summary p{margin:0 0 6px;color:var(--text-secondary);font-size:12px}.album-summary small{color:var(--text-dim);font-size:10px}.album-track-row{grid-template-columns:32px minmax(0,1fr) 38px}.album-track-number{color:var(--text-dim);font:10px/1 var(--font-tech);text-align:center}

.search-source-more-row{width:100%;min-height:42px;margin:4px 0 8px;border:1px solid rgba(73,181,230,.18);border-radius:7px;color:var(--accent-secondary);background:rgba(73,181,230,.06);font:11px/1 var(--font-tech);text-align:center;cursor:pointer}.search-source-more-row:hover,.search-source-more-row:focus-visible{border-color:var(--border-strong);background:rgba(73,181,230,.12);outline:0}

.search-direct-play-button{width:40px;height:40px;display:grid;place-items:center;padding:0;border:1px solid rgba(79,209,155,.55);border-radius:50%;color:#06140f;background:var(--status-success);cursor:pointer;transition:filter .18s,box-shadow .18s,transform .18s}.search-direct-play-button svg{width:20px;height:20px;fill:currentColor}.search-direct-play-button:hover{filter:brightness(1.12);transform:translateY(-1px)}.search-direct-play-button:focus-visible{outline:2px solid var(--accent-secondary);outline-offset:3px;box-shadow:0 0 18px rgba(79,209,155,.28)}.search-direct-play-button:disabled{opacity:.55;cursor:wait;filter:none;transform:none}

.album-track-copy{min-width:0;display:grid;gap:4px}
.album-track-duration{margin-left:6px;color:var(--text-secondary)}

.group-all-dialog{width:min(480px,100%);max-height:calc(100dvh - 24px);overflow-y:auto;border:1px solid var(--border-strong);border-radius:12px;background:#081a25;box-shadow:0 28px 100px rgba(0,0,0,.58),var(--glow-accent);transform:translateY(12px) scale(.99);transition:.22s}.modal-backdrop.open .group-all-dialog{transform:none}.group-all-content{display:grid;gap:20px;padding:20px}.group-all-content p{margin:0;color:var(--text-secondary);font-size:13px;line-height:1.6}.group-all-content label{display:grid;gap:8px;color:var(--text-secondary);font-size:11px}.group-all-content select{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-control);color:var(--text-primary);background:#06151e}.group-all-actions{display:flex;justify-content:flex-end;gap:10px}.secondary-button,.primary-action-button{min-height:42px;padding:0 18px;border-radius:var(--radius-control);font-weight:600;cursor:pointer}.secondary-button{border:1px solid var(--border-color);color:var(--text-secondary);background:transparent}.primary-action-button{border:1px solid rgba(79,209,155,.55);color:#06140f;background:var(--status-success)}.primary-action-button:disabled{opacity:.55;cursor:wait}

.toast { position:fixed;left:50%;bottom:24px;z-index:100;max-width:min(90vw,460px);padding:12px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-control);background:#0b2635;box-shadow:var(--shadow-panel),var(--glow-accent);font-size:12px;text-align:center;opacity:0;visibility:hidden;transform:translate(-50%,16px);transition:.22s; }.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* Global system settings: desktop surface, tablet sheet, mobile fullscreen. */
.system-settings-backdrop {
  padding: 0;
  place-items: stretch end;
  background: transparent;
  backdrop-filter: none;
}
.system-settings-dialog {
  width: 360px;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border-right: 0;
  transform: translateX(100%);
}
.modal-backdrop.open .system-settings-dialog { transform: translateX(0); }
.system-settings-dialog .settings-dialog-header { min-height: 64px; flex: 0 0 auto; padding: 13px 18px; }
.system-settings-content { flex: 1 1 auto; overflow-y: auto; padding: 18px; }

@media (min-width: 1600px) {
  .system-settings-dialog { width: 400px; }
}

@media (max-width: 1320px) {
  .dashboard-layout { grid-template-columns: 136px minmax(0,1fr) 320px; gap: 16px; }
  .room-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
  .room-card { min-height: 300px; }
}
@media (max-width: 1199px) {
  .system-settings-backdrop { padding: 16px; place-items: center end; background: rgba(0,7,11,.82); backdrop-filter: blur(7px); }
  .system-settings-dialog { width: min(400px,52vw); height: calc(100dvh - 32px); max-height: calc(100dvh - 32px); border: 1px solid var(--border-strong); border-radius: 12px; }
  .dashboard-layout { grid-template-columns: 72px minmax(0,1fr); gap: 16px; }
  .primary-navigation { min-height: calc(100dvh - 124px); padding: 6px; }
  .primary-navigation-item { min-height: 48px; overflow: hidden; padding: 0 6px; font-size: 10px; text-align: center; text-overflow: ellipsis; }
  .dashboard-sidebar { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(390px, 92vw); max-height: none; padding: 15px; overflow-y: auto; background: #07141d; border-left: 1px solid var(--border-strong); transform: translateX(105%); transition: transform .3s var(--ease); box-shadow: -24px 0 60px rgba(0,0,0,.48); }
  .dashboard-sidebar.open { transform: translateX(0); }
  .dashboard-sidebar[aria-hidden="true"] { visibility: hidden; }
  .sidebar-mobile-header { display: flex; align-items: center; justify-content: space-between; height: 52px; padding-left: 4px; color: var(--text-secondary); font: 10px/1 var(--font-tech); letter-spacing: .12em; text-transform: uppercase; }
  .sidebar-backdrop.open { opacity: 1; visibility: visible; }
}
@media (max-width: 920px) {
  .dashboard-shell { padding: 18px 16px 24px; }
  .dashboard-header { min-height: 64px; align-items: center; padding-bottom: 14px; }
  .brand-lockup strong { font-size: 21px; }.brand-lockup > div > span { display:none; }.brand-signal{width:38px;height:38px;padding:9px}
  .date-time { max-width: 150px; padding: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; text-align: right; }
  .dashboard-layout { display: grid; grid-template-columns: 72px minmax(0,1fr); padding-top: 20px; }
  .dashboard-sidebar { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(390px, 92vw); max-height: none; padding: 15px; overflow-y: auto; background: #07141d; border-left:1px solid var(--border-strong); transform: translateX(105%); transition: transform .3s var(--ease); box-shadow:-24px 0 60px rgba(0,0,0,.48); }
  .dashboard-sidebar.open { transform: translateX(0); }
  .dashboard-sidebar[aria-hidden="true"] { visibility: hidden; }
  .sidebar-mobile-header { display:flex;align-items:center;justify-content:space-between;height:52px;padding-left:4px;color:var(--text-secondary);font:10px/1 var(--font-tech);letter-spacing:.12em;text-transform:uppercase; }
  .sidebar-backdrop.open { opacity:1;visibility:visible; }
  .now-playing-panel { min-height:390px; }.dashboard-footer{margin-bottom:8px}
  .current-title-button { color: inherit; text-decoration: none; }
}
@media (max-width: 650px) {
  body { background-size: 44px 44px,44px 44px,auto,auto; }
  .dashboard-shell { padding: 14px 11px 22px; }
  .dashboard-header { gap:9px; }.brand-lockup{gap:9px}.brand-lockup strong{font-size:18px}.brand-signal{width:35px;height:35px}.header-end{gap:7px}.date-time{max-width:112px;font-size:10px}.icon-button{width:42px;height:42px}
  .section-heading { margin-bottom: 13px; }.room-count{max-width:135px;font-size:9px}
  .room-grid { grid-template-columns: 1fr; gap: 12px; }
  .room-card { min-height: 300px; }
  .room-media { grid-template-columns: 94px minmax(0,1fr); gap:12px; }.room-operation-layer{left:14px;right:14px}.cover-frame{width:94px}.room-card-header,.room-media,.room-badges,.progress-block{padding-left:14px;padding-right:14px}.room-controls{padding:9px 13px}.control-button{width:42px;height:42px}.control-button.primary{width:46px;height:46px}.transport-controls{gap:4px}.volume-control{grid-template-columns:20px minmax(50px,1fr) 25px;gap:4px;margin-left:1px}
  .dashboard-footer { align-items:center; }.last-updated{max-width:120px}
  .modal-backdrop{padding:0;place-items:stretch}.alarm-dialog{width:100%;max-height:100dvh;height:100dvh;border-radius:0;border-left:0;border-right:0}.alarm-dialog-header{padding:14px}.alarm-list{min-height:0;padding:14px}.alarm-list::after{content:"";display:block;height:max(32px,env(safe-area-inset-bottom))}.alarm-room-list{grid-template-columns:1fr}.alarm-card+.alarm-card{margin-top:16px}.alarm-details{grid-template-columns:2fr repeat(2,1fr)}.alarm-details div:nth-child(4),.alarm-details div:nth-child(5){grid-column:auto}.alarm-time time{font-size:24px}
  .alarm-card-actions{gap:8px}
  .alarm-edit-backdrop{padding:12px;place-items:center}
  .alarm-edit-dialog{width:min(420px,100%);height:min(696px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);border-left:1px solid var(--border-strong);border-right:1px solid var(--border-strong);border-radius:12px}
  .alarm-edit-dialog .settings-dialog-header{padding:14px 16px}
  .alarm-edit-dialog .settings-dialog-header h2{font-size:20px;line-height:1.2}
  .alarm-edit-content{overflow-x:hidden}
  .alarm-edit-fields{gap:14px;padding:12px 14px 8px}
  .alarm-time-label{justify-content:space-between;gap:16px}
  .alarm-time-label input{width:128px;flex:0 0 128px;text-align:center}
  .weekday-row,.duration-row{flex-direction:column;align-items:stretch;gap:8px}
  .weekday-toggles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
  .weekday-toggle{min-width:0;height:38px}
  .settings-toggle-row{gap:12px;padding:12px 0}
  .alarm-setting-toggle{gap:16px}
  .duration-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .duration-preset{min-width:0;height:44px;padding:0 3px}
  .volume-row{align-items:stretch}
  .alarm-edit-volume-label{width:100%;min-width:0}
  .alarm-edit-actions{padding:12px 14px max(16px,env(safe-area-inset-bottom))}
  .alarm-edit-actions .primary-action-button{width:100%;justify-content:center}
  .settings-backdrop { padding: 0; place-items: stretch; }
  .settings-dialog { width: 100%; height: 100dvh; max-height: 100dvh; overflow-y: auto; border-radius: 0; border-left: 0; border-right: 0; }
  .settings-dialog-header { padding: 14px; }
  .settings-content { padding: 6px 14px 14px; }
  .sleep-fade-row { gap: 12px; }
  .sleep-fade-row > span { overflow-wrap: anywhere; }
  .queue-backdrop { padding: 0; place-items: stretch; }
  .queue-dialog { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; }
  .queue-dialog-header { padding: 14px; }
  .queue-modal-list { padding: 6px 8px max(18px, env(safe-area-inset-bottom)); }
  .playlist-snapshot-backdrop { padding: 0; place-items: stretch; }.playlist-snapshot-dialog { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; }.playlist-snapshot-content { padding: 14px max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }.playlist-snapshot-toolbar { align-items: stretch; flex-direction: column; }.playlist-snapshot-toolbar label { width: 100%; }.playlist-snapshot-toolbar select { width: 100%; }.playlist-share-overlay { padding: 12px; }.playlist-share-modes { grid-template-columns: 1fr; }.playlist-rename-form { grid-template-columns: 1fr 1fr; }.playlist-rename-form input { grid-column: 1 / -1; }
  .announcement-backdrop{padding:12px;place-items:center}.announcement-dialog{width:100%;max-height:calc(100dvh - 24px)}.announcement-content{padding:16px}.announcement-footer{padding:12px 16px max(16px,env(safe-area-inset-bottom))}
  .search-backdrop,.album-backdrop{padding:0;place-items:stretch}
  .search-dialog,.album-dialog{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border-left:0;border-right:0}
  .search-dialog-header,.album-dialog-header{min-height:62px;padding:10px 12px}
  .search-dialog-header h2,.album-dialog-header h2{font-size:18px}
  .search-controls{padding:10px 12px 8px}
  .search-categories{gap:4px}
  .search-status{padding:8px 12px 6px}
  .search-results,.album-content{width:100%;min-width:0;padding:0 7px max(32px,env(safe-area-inset-bottom))}
  .search-results::after,.album-content::after{content:"";display:block;height:max(24px,env(safe-area-inset-bottom))}
  .search-result-row{grid-template-columns:44px minmax(0,1fr) 38px;gap:8px;padding-left:3px;padding-right:3px}
  .search-result-art{width:44px;height:44px}
  .search-menu-popover{position:fixed;left:10px;right:10px;top:auto;bottom:max(10px,env(safe-area-inset-bottom));width:auto}
  .search-menu-popover button{min-height:46px}
  .album-back-button span{display:none}
  .album-summary{grid-template-columns:88px minmax(0,1fr) 38px;gap:10px;padding:14px 4px}
  .album-cover{width:88px;height:88px}
  .album-summary h3{font-size:18px}
  .album-track-row{grid-template-columns:26px minmax(0,1fr) 38px;gap:7px;padding-left:1px;padding-right:1px}
  .group-mode-banner{align-items:flex-start;flex-wrap:wrap}.group-all-toggle{margin-left:auto}.group-all-backdrop{padding:12px;place-items:center}.group-all-dialog{width:100%}
}
@media (max-width: 767px) {
  .system-settings-backdrop { padding: 0; place-items: stretch; }
  .system-settings-dialog { width: 100dvw; height: 100dvh; max-height: 100dvh; border-radius: 0; border-right: 0; border-left: 0; }
  .system-settings-dialog .settings-dialog-header { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left)); }
  .system-settings-content { padding: 16px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .dashboard-shell { padding-inline: 12px; }
  .dashboard-layout { display: flex; flex-direction: column; gap: 12px; padding-top: 0; }
  .primary-navigation { position: static; order: 0; width: calc(100% + 24px); min-height: 44px; margin-inline: -12px; padding: 0 12px; flex-direction: row; gap: 2px; overflow-x: auto; border: 0; border-bottom: 1px solid var(--color-border-subtle, var(--border-color)); border-radius: 0; scrollbar-width: none; }
  .primary-navigation::-webkit-scrollbar { display: none; }
  .primary-navigation-item { width: auto; min-width: max-content; min-height: 44px; padding: 0 12px; font-size: 12px; text-align: center; }
  .primary-navigation-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-accent); }

  .dashboard-main { order: 1; width: 100%; }
  .dashboard-sidebar { order: 2; }
  .context-navigation { width: calc(100% + 24px); margin-inline: -12px; padding-inline: 12px; }
  .room-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; }
}

.search-capability-hint{color:var(--text-dim);font-size:.72rem;line-height:1.25}

/* Authentication and user management */
.login-page{min-height:100dvh;background:#eef2f6;color:#101827}
.login-shell{min-height:100dvh}
.login-header{position:relative;inset:auto;max-width:none;padding-inline:clamp(18px,5vw,72px)}
.login-main{display:grid;place-items:start center;padding:clamp(44px,10vh,110px) 18px}
.login-panel{width:min(100%,430px);padding:30px;border:1px solid #d8dee7;border-radius:18px;background:#f8fafc;color:#101827;box-shadow:0 18px 55px rgba(18,42,68,.14)}
.login-panel h1{margin:5px 0 8px;color:inherit;font-size:28px}.login-intro{margin:0 0 24px;color:#536070}
.login-panel form{display:grid;gap:10px}.login-panel label{color:inherit;font-weight:700;font-size:.86rem}
.login-panel input[type="text"],.login-panel input[type="password"]{width:100%;height:46px;padding:0 13px;border:1px solid #cbd4df;border-radius:10px;background:#fff;color:#101827}
.login-remember{display:flex;align-items:center;gap:9px;margin-top:5px;font-weight:500!important}.login-remember input{width:18px;height:18px;accent-color:var(--color-accent)}
.login-status{min-height:22px;margin:3px 0;color:var(--danger-color,#b42318);font-size:.82rem}.login-submit{width:100%;justify-content:center}
:root[data-theme="dark"] .login-page{background:#081522;color:#eef5ff}:root[data-theme="dark"] .login-panel{background:#102238;color:#eef5ff;border-color:#32465e}:root[data-theme="dark"] .login-intro{color:#aebdd0}:root[data-theme="dark"] .login-panel input{background:#0b1929;color:#eef5ff;border-color:#48617d}
.users-backdrop,.user-edit-backdrop{place-items:center;padding:20px}.users-dialog{width:min(900px,calc(100vw - 40px));max-height:min(760px,calc(100dvh - 40px));overflow:hidden;border:1px solid #d8dee7;border-radius:16px;background:#f8fafc;color:#101827;box-shadow:0 24px 70px rgba(18,42,68,.24);display:flex;flex-direction:column}.users-dialog .settings-dialog-header h2,.user-edit-dialog .settings-dialog-header h2{color:#101827}.users-dialog .settings-dialog-header .icon-button,.user-edit-dialog .settings-dialog-header .icon-button{border:0;color:#536070;background:transparent;box-shadow:none}.users-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 20px}.users-toolbar p{margin:0;color:#536070}.users-table-wrap{overflow:auto;padding:0 20px 20px;background:#f8fafc}.users-table{width:100%;border-collapse:collapse}.users-table th,.users-table td{padding:12px 10px;text-align:left;border-bottom:1px solid #d8dee7}.users-table th{font-size:.72rem;text-transform:uppercase;color:#657386}.user-disabled-badge{display:inline-flex;padding:3px 8px;border-radius:999px;background:#e2e5e9;color:#5d6670;font-size:.7rem;font-weight:700}.user-active-badge{font-size:.74rem;color:#18794e;font-weight:700}.user-color-dot{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--user-color,#3b82f6);box-shadow:0 0 0 2px #f8fafc,0 0 0 3px #cbd4df}.user-actions{position:relative;display:flex;justify-content:flex-end}.user-more-button{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:inherit}.user-menu{position:absolute;z-index:20;right:0;top:38px;min-width:150px;padding:5px;border:1px solid #d8dee7;border-radius:10px;background:#fff;color:#101827;box-shadow:0 14px 36px rgba(18,42,68,.2)}.user-menu button{display:block;width:100%;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:inherit;text-align:left}.user-menu button:hover{background:#edf2f7}.user-menu button.danger{color:var(--danger-color,#b42318)}
.user-edit-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #d8dee7;border-radius:16px;background:#f8fafc;color:#101827;box-shadow:0 24px 70px rgba(18,42,68,.24)}.user-edit-form{display:grid;gap:14px;padding:20px}.user-edit-form label{display:grid;gap:6px;font-weight:700}.user-edit-form input,.user-edit-form select{height:42px;padding:0 11px;border:1px solid #cbd4df;border-radius:9px;background:#fff;color:inherit}.user-edit-form small{font-weight:400;color:#536070}
:root[data-theme="dark"] .users-dialog,:root[data-theme="dark"] .user-edit-dialog{border-color:#32465e;background:#102238;color:#eef5ff}:root[data-theme="dark"] .users-dialog .settings-dialog-header h2,:root[data-theme="dark"] .user-edit-dialog .settings-dialog-header h2{color:#eef5ff}:root[data-theme="dark"] .users-dialog .settings-dialog-header .icon-button,:root[data-theme="dark"] .user-edit-dialog .settings-dialog-header .icon-button,:root[data-theme="dark"] .users-toolbar p,:root[data-theme="dark"] .user-edit-form small{color:#aebdd0}:root[data-theme="dark"] .users-table-wrap{background:#102238}:root[data-theme="dark"] .users-table th,:root[data-theme="dark"] .users-table td{border-color:#32465e}:root[data-theme="dark"] .users-table th{color:#9fb0c4}:root[data-theme="dark"] .user-color-dot{box-shadow:0 0 0 2px #102238,0 0 0 3px #48617d}:root[data-theme="dark"] .user-menu{border-color:#32465e;background:#0b1929;color:#eef5ff}:root[data-theme="dark"] .user-menu button:hover{background:#172a3f}:root[data-theme="dark"] .user-edit-form input,:root[data-theme="dark"] .user-edit-form select{border-color:#48617d;background:#0b1929;color:#eef5ff}
@media(max-width:767px){.login-panel{padding:22px}.users-backdrop{padding:0;place-items:stretch}.users-dialog{width:100%;height:100dvh;max-height:100dvh;border-radius:0}.users-table{min-width:680px}.user-edit-backdrop{padding:12px}.users-toolbar{align-items:stretch;flex-direction:column}}

/* Central workspace: user management */
#roomsWorkspace[hidden],.users-workspace[hidden],.browse-workspace[hidden],#playlistWorkspace[hidden],.workspace-legend[hidden]{display:none!important}
.browse-workspace{min-width:0;color:var(--mock-card-text,#101827)}
.browse-section-heading h1{margin:4px 0 0;font-size:1.35rem}
.browse-breadcrumbs{display:flex;gap:8px;align-items:center;min-height:32px;margin:0 0 10px;font-size:.82rem;color:var(--text-secondary)}
.browse-breadcrumbs button{border:0;background:transparent;color:var(--color-accent);padding:0;cursor:pointer}
.browse-status{min-height:20px;margin:0 0 12px;color:var(--mock-card-muted,#536070);font-size:.82rem}
.browse-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.browse-catalog-search{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding:14px;border:1px solid var(--border-color,#d6dfeb);border-radius:12px;background:var(--card-bg,#fff)}.browse-catalog-search label{display:grid;gap:6px;min-width:0;font-size:.78rem;color:var(--text-secondary)}.browse-catalog-search input{box-sizing:border-box;width:100%;min-width:0;height:40px;padding:0 12px;border:1px solid var(--border-color,#d6dfeb);border-radius:9px;background:var(--input-bg,var(--card-bg,#fff));color:inherit;font:inherit}.browse-catalog-search button{min-width:96px;flex-shrink:0;height:40px;padding:0 16px;border:0;border-radius:9px;background:var(--color-accent);color:#fff;font:inherit;font-weight:700;cursor:pointer}.browse-catalog-search input:focus-visible,.browse-catalog-search button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.browse-source-card,.browse-node{padding:16px;border:1px solid var(--border-color,#d6dfeb);border-radius:12px;background:var(--card-bg,#fff)}
.browse-source-card button{display:grid;gap:5px;width:100%;border:0;background:transparent;text-align:left;color:inherit;cursor:pointer}
.browse-node{min-width:0;overflow-wrap:anywhere}.browse-node button{display:grid;gap:5px;width:100%;min-width:0;padding:0;border:0;background:transparent;text-align:left;color:inherit;cursor:pointer}.browse-node button:focus-visible{outline:2px solid var(--color-accent);outline-offset:5px}.browse-node strong,.browse-node small{min-width:0;overflow-wrap:anywhere}
.browse-node-media{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;min-width:0}.browse-node-copy{min-width:0}.browse-node-art{width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--border-color,#d6dfeb)}.browse-node-duration{align-self:end;color:var(--text-secondary);font-size:.75rem;font-variant-numeric:tabular-nums}
.browse-source-areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.browse-source-areas button{width:auto;border:1px solid var(--border-color,#d6dfeb);border-radius:999px;background:var(--card-bg,#fff);padding:7px 11px}
.browse-source-card small,.browse-node small{display:block;margin-top:6px;color:var(--text-secondary);font-size:.78rem}
.browse-source-card.is-disabled{opacity:.62}
.browse-node-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.browse-node .browse-node-actions button{display:inline-flex;width:auto;padding:7px 10px;border:1px solid var(--border-color,#d6dfeb);border-radius:8px;background:var(--card-bg,#fff);color:inherit;font-size:.76rem;font-weight:700}.browse-room-dialog{width:min(520px,100%);max-height:calc(100dvh - 24px);overflow-y:auto}.browse-room-content{display:grid;gap:14px;padding:20px}.browse-room-content>p{margin:0;color:var(--text-secondary);font-size:.82rem;line-height:1.5}.browse-room-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.browse-room-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:12px;border:1px solid var(--border-color,#d6dfeb);border-radius:10px;background:var(--card-bg,#fff);color:inherit;text-align:left}.browse-room-card span{min-width:0}.browse-room-card strong,.browse-room-card small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.browse-room-card small{margin-top:3px;color:var(--text-secondary)}.browse-room-card em{color:var(--color-accent);font-size:.72rem;font-style:normal;font-weight:800}.browse-room-card.is-selected{border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}.browse-room-card.is-master{background:color-mix(in srgb,var(--color-accent) 10%,var(--card-bg,#fff))}.browse-room-actions{display:flex;justify-content:flex-end;gap:10px}.browse-room-actions button{min-height:40px}.browse-room-content [role="alert"]{min-height:20px;margin:0;color:var(--text-secondary);font-size:.8rem}@media(max-width:520px){.browse-room-cards{grid-template-columns:1fr}}
[data-theme="dark"] .browse-room-card{border-color:#36516a;background:#122a3d;color:#eef5ff}[data-theme="dark"] .browse-room-card small{color:#b9c9d9}[data-theme="dark"] .browse-room-card.is-master{background:#183d62}
.browse-page-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:7px;padding:10px 0}.browse-page-actions button{display:inline-flex;padding:7px 10px;border:1px solid var(--border-color,#d6dfeb);border-radius:8px;background:var(--card-bg,#fff);color:inherit;font-size:.76rem;font-weight:700}
.users-workspace{min-width:0;color:var(--mock-card-text,#101827)}
.users-section-heading{align-items:center}
.users-status{min-height:20px;margin:0 0 12px;color:var(--mock-card-muted,#536070);font-size:.78rem}
.users-list{display:grid;min-width:0;overflow-x:visible;border:1px solid var(--mock-card-border,#d8dee7);border-radius:14px;background:var(--mock-card,#f8fafc);box-shadow:0 12px 32px rgba(18,42,68,.08)}
.user-list-row{position:relative;display:grid;grid-template-columns:minmax(190px,1fr) 24px 42px;align-items:center;gap:14px;min-width:0;padding:15px 16px;color:var(--mock-card-text,#101827)}
.user-list-row+.user-list-row{border-top:1px solid var(--mock-card-border,#d8dee7)}
.user-list-identity{min-width:0;display:grid;gap:5px}
.user-list-identity strong{overflow:hidden;color:inherit;font-size:1rem;font-weight:720;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.user-list-identity small{display:flex;align-items:center;gap:5px;min-width:0;color:var(--mock-card-muted,#536070);font-size:.76rem;line-height:1.35}
.user-list-identity .user-active-badge,.user-list-identity .user-disabled-badge{display:inline;color:#18794e;background:transparent;padding:0;font-size:inherit;font-weight:700}
.user-list-identity .user-disabled-badge{color:#7a5960}
.user-color-dot{justify-self:center}
.user-more-button{display:grid;place-items:center}
.workspace-legend{min-height:100%}
.workspace-legend-content{padding:24px 22px;color:var(--text-secondary)}
.workspace-legend-content ul{display:grid;gap:20px;margin:20px 0 0;padding:0;list-style:none}
.workspace-legend-content li{position:relative;padding-left:21px;font-size:.82rem;line-height:1.58}
.workspace-legend-content li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 12px var(--color-accent-focus)}
.user-accent-fieldset{min-width:0}
.user-edit-form .user-accent-fieldset .accent-swatch-list{display:flex;flex-wrap:wrap;gap:10px}
.user-edit-form .user-accent-fieldset .accent-swatch{display:grid!important;width:44px;height:44px;font-weight:400}
.user-edit-form .user-accent-fieldset .accent-swatch input{width:100%;height:100%;padding:0;border:0;background:transparent}
:root[data-theme="dark"] .users-workspace{color:#eef5ff}
:root[data-theme="dark"] .users-status{color:#aebdd0}
:root[data-theme="dark"] .users-list{border-color:#32465e;background:#102238;box-shadow:0 14px 38px rgba(0,0,0,.24)}
:root[data-theme="dark"] .user-list-row{color:#eef5ff}
:root[data-theme="dark"] .user-list-row+.user-list-row{border-color:#32465e}
:root[data-theme="dark"] .user-list-identity small{color:#aebdd0}
:root[data-theme="dark"] .user-list-identity .user-active-badge{color:#69dfa4}
:root[data-theme="dark"] .user-list-identity .user-disabled-badge{color:#c9a3aa}

@media (max-width: 650px) {
  .users-section-heading{align-items:stretch;gap:12px}.users-section-heading .primary-action-button{width:100%;justify-content:center}
  .users-status{margin-bottom:10px}
  .users-list{border-radius:12px}
  .user-list-row{grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding:14px 12px}
  .user-list-identity strong{font-size:.96rem}.user-list-identity small{flex-wrap:wrap;font-size:.72rem}
  .user-color-dot{width:15px;height:15px}
  .user-more-button{width:42px;height:42px}
  .user-menu{top:44px;right:0;max-width:min(210px,calc(100vw - 52px))}
}

/* Shared application dialog shell, based on the user-management surface. */
.app-dialog{
  --dialog-surface:#f8fafc;
  --dialog-surface-raised:#fff;
  --dialog-text:#101827;
  --dialog-muted:#536070;
  --dialog-border:#d8dee7;
  --dialog-input-border:#cbd4df;
  --dialog-control-surface:#edf2f7;
  --dialog-control-disabled:#e3e9f0;
  --dialog-selected:#e8f1ff;
  --dialog-selected-text:#2563eb;
  max-height:min(760px,calc(100dvh - 40px));
  min-height:0;
  overflow:hidden;
  border:1px solid var(--dialog-border);
  border-radius:16px;
  color:var(--dialog-text);
  background:var(--dialog-surface);
  box-shadow:0 24px 70px rgba(18,42,68,.24);
  display:flex;
  flex-direction:column;
  transform:translateY(10px) scale(.99);
  transition:transform .2s ease,opacity .2s ease;
  --text-primary:var(--dialog-text);
  --text-secondary:var(--dialog-muted);
  --text-dim:var(--dialog-muted);
  --border-color:var(--dialog-border);
  --border-strong:var(--dialog-input-border);
}
.modal-backdrop.open .app-dialog{transform:none}
.app-dialog--compact{width:min(480px,calc(100vw - 32px));justify-self:center;align-self:center}
.app-dialog--medium{width:min(620px,calc(100vw - 40px))}
.app-dialog--wide{width:min(900px,calc(100vw - 40px))}
.app-dialog-header{
  min-height:70px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  border-bottom:1px solid var(--dialog-border);
  background:var(--dialog-surface);
}
.app-dialog-header>div{min-width:0}
.app-dialog-header .eyebrow{display:none}
.app-dialog-header h2{margin:0;color:var(--dialog-text);font:700 20px/1.2 var(--font-ui)}
.app-dialog-header .icon-button{flex:0 0 auto;border:0;color:var(--dialog-muted);background:transparent;box-shadow:none}
.app-dialog-header .icon-button:hover{border:0;color:var(--dialog-text);background:rgba(83,96,112,.08);box-shadow:none}
.app-dialog-header--navigation{display:grid;grid-template-columns:minmax(42px,1fr) minmax(0,2fr) minmax(42px,1fr)}
.app-dialog-header--navigation h2{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.app-dialog-header--navigation>.icon-button{justify-self:end}
.app-dialog-body{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  min-height:0;
  overflow:auto;
  color:var(--dialog-text);
  background:var(--dialog-surface);
  scrollbar-width:thin;
  scrollbar-color:rgba(101,115,134,.46) transparent;
}
.app-dialog-body::-webkit-scrollbar{width:8px;height:8px}
.app-dialog-body::-webkit-scrollbar-track{background:transparent}
.app-dialog-body::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:99px;background:rgba(101,115,134,.46);background-clip:padding-box}
.app-dialog-footer{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px 18px;
  border-top:1px solid var(--dialog-border);
  background:var(--dialog-surface);
}
.app-dialog :is(input:not([type="range"]),select,textarea){border-color:var(--dialog-input-border);color:var(--dialog-text);background:var(--dialog-surface-raised)}
.app-dialog .search-input-label{border-color:var(--dialog-input-border);background:var(--dialog-surface-raised)}
.app-dialog .search-input-label input{border:0;background:transparent}
.app-dialog .secondary-button{color:var(--dialog-text);border-color:var(--dialog-input-border);background:var(--dialog-surface-raised)}
.app-dialog .alarm-card{border-color:var(--dialog-border);background:var(--dialog-surface-raised);box-shadow:none}
.app-dialog .alarm-card.enabled{border-color:#8dd9ba;box-shadow:inset 3px 0 0 #33b87c}
.app-dialog .alarm-time time{color:var(--dialog-text);font-family:var(--font-ui)}
.app-dialog .alarm-time span,.app-dialog .alarm-toggle,.app-dialog .alarm-details dd{color:var(--dialog-muted)}
.app-dialog .modal-queue-item strong{color:var(--dialog-text)}
.app-dialog .alarm-edit-button{border-color:var(--dialog-input-border);color:var(--dialog-text);background:var(--dialog-control-surface)}
.app-dialog .alarm-edit-button:hover{border-color:var(--color-accent-border);color:var(--color-accent);background:var(--dialog-selected)}
.app-dialog .alarm-toggle i{border-color:var(--dialog-input-border);background:var(--dialog-control-surface)}
.app-dialog .alarm-toggle i::after{background:var(--dialog-muted)}
.app-dialog .alarm-toggle input:checked+i{border-color:#79d7b2;background:#e7f8f1}
.app-dialog .alarm-toggle input:checked+i::after{background:#15965f;box-shadow:none}
.app-dialog .alarm-program-search-button{border-color:var(--dialog-input-border);color:var(--dialog-text);background:var(--dialog-control-surface)}
.app-dialog .alarm-program-search-button:hover{border-color:var(--color-accent-border);color:var(--color-accent);background:var(--dialog-selected)}
.app-dialog .alarm-program-selection{border-color:var(--dialog-input-border);color:var(--dialog-text);background:var(--dialog-surface-raised)}
.app-dialog .alarm-program-selection small{color:var(--dialog-muted)}
.app-dialog .alarm-details div{border-top-color:var(--dialog-border)}
.app-dialog .alarm-details dt{color:var(--dialog-muted)}
.app-dialog .alarm-days span,.app-dialog .weekday-toggle,.app-dialog .duration-preset,.app-dialog .sleep-presets button,.app-dialog .loop-mode-control button{
  border-color:var(--dialog-input-border);
  color:var(--dialog-muted);
  background:var(--dialog-control-surface);
}
.app-dialog .alarm-days span.active,.app-dialog .weekday-toggle[aria-pressed="true"]{
  border-color:#8eb8ff;
  color:var(--dialog-selected-text);
  background:var(--dialog-selected);
}
.app-dialog .duration-preset[aria-pressed="true"],.app-dialog .sleep-presets button.active,.app-dialog .loop-mode-control button.active{
  border-color:#79d7b2;
  color:#15965f;
  background:#e7f8f1;
}
.app-dialog .sleep-presets button.off.active{border-color:#ff9aa4;color:#df4454;background:#fff0f2}
.app-dialog :is(.weekday-toggle,.duration-preset,.sleep-presets button,.loop-mode-control button):disabled{
  border-color:var(--dialog-border);
  color:var(--dialog-muted);
  background:var(--dialog-control-disabled);
  opacity:.62;
}
.app-dialog .alarm-edit-actions{border-top-color:var(--dialog-border);background:var(--dialog-surface)}
.app-dialog .search-menu-popover{border-color:var(--dialog-input-border);color:var(--dialog-text);background:var(--dialog-surface-raised);box-shadow:0 14px 34px rgba(18,42,68,.2)}
.app-dialog .search-menu-popover button{color:var(--dialog-text);background:transparent}
.app-dialog .search-menu-popover button:hover,.app-dialog .search-menu-popover button:focus-visible{color:var(--dialog-text);background:var(--dialog-selected)}
.alarm-dialog-body,.queue-dialog-body,.search-dialog-body,.users-dialog-body{display:flex;flex-direction:column;overflow:hidden}
.alarm-dialog-body .alarm-list,.queue-dialog-body .queue-modal-list,.search-dialog-body .search-results,.users-dialog-body .users-table-wrap{flex:1 1 auto;min-height:0;overflow:auto}
.search-dialog-body{overflow:auto}
.search-dialog-body .search-results{flex:0 0 auto;overflow:visible}
.users-dialog-body .users-table-wrap{width:100%;min-width:0;max-width:100%;background:var(--dialog-surface)}
:root[data-theme="dark"] .app-dialog{
  --dialog-surface:#102238;
  --dialog-surface-raised:#0b1929;
  --dialog-text:#eef5ff;
  --dialog-muted:#aebdd0;
  --dialog-border:#32465e;
  --dialog-input-border:#48617d;
  --dialog-control-surface:#172a3f;
  --dialog-control-disabled:#26384b;
  --dialog-selected:#17395f;
  --dialog-selected-text:#8bb7ff;
  box-shadow:0 28px 80px rgba(0,0,0,.46);
}
:root[data-theme="dark"] .app-dialog .duration-preset[aria-pressed="true"],:root[data-theme="dark"] .app-dialog .sleep-presets button.active,:root[data-theme="dark"] .app-dialog .loop-mode-control button.active{border-color:#3b936f;color:#72dfb1;background:#173d31}
:root[data-theme="dark"] .app-dialog .sleep-presets button.off.active{border-color:#9b4c57;color:#ff9aa4;background:#42232a}
:root[data-theme="dark"] .app-dialog .alarm-toggle input:checked+i{border-color:#3b936f;background:#173d31}
:root[data-theme="dark"] .app-dialog .alarm-toggle input:checked+i::after{background:#72dfb1}
@media(max-width:650px){
  .app-dialog-header{min-height:62px;padding:10px 14px}
  .app-dialog-header h2{font-size:18px}
  .app-dialog--compact{width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
  .app-dialog--full-mobile{width:100%;height:100dvh;max-height:100dvh;border-left:0;border-right:0;border-radius:0;align-self:stretch;justify-self:stretch}
}

.dashboard-main{grid-template-columns:minmax(0,1fr)}
.dashboard-main>.room-section{width:100%;max-width:100%;min-width:0}
.scenes-workspace{width:100%;max-width:100%;min-width:0}
.scenes-section-heading{margin-bottom:10px}
.scenes-status{min-height:22px;margin:0 0 12px;color:var(--text-secondary,#607086)}
.scenes-table-shell{position:relative;width:100%;max-width:100%;overflow-x:hidden;border:1px solid var(--border-subtle,rgba(88,108,132,.2));border-radius:14px;background:var(--surface-raised,#fff)}
.scenes-table{width:100%;border-collapse:collapse;table-layout:fixed}
.scenes-table :is(th,td):nth-child(1){width:18%}
.scenes-table :is(th,td):nth-child(2){width:24%}
.scenes-table :is(th,td):nth-child(3){width:23%}
.scenes-table :is(th,td):nth-child(4){width:10%}
.scenes-table :is(th,td):nth-child(5){width:10%}
.scenes-table :is(th,td):nth-child(6){width:15%}
.scenes-table :is(th,td){padding:14px 12px;border-bottom:1px solid var(--border-subtle,rgba(88,108,132,.16));text-align:left;vertical-align:middle;overflow-wrap:anywhere}
.scenes-table thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary,#607086)}
.scenes-table tbody tr:last-child :is(th,td){border-bottom:0}
.scenes-table td>span,.scenes-table th>strong{display:block}
.scene-warning{display:block;margin-top:4px;color:#b54343;font-weight:650}
.scene-muted{color:var(--text-secondary,#607086)}
.scene-features{display:flex!important;gap:6px}
.scene-feature{display:inline-grid!important;place-items:center;width:25px;height:25px;border-radius:50%;color:var(--color-accent,#236ed8);background:var(--color-accent-soft,rgba(35,110,216,.12));font-size:11px;font-weight:800}
.scene-schedule{display:grid!important;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--color-accent,#236ed8);background:var(--color-accent-soft,rgba(35,110,216,.12));font-size:18px}
.scene-schedule-status{display:block;margin-top:4px}
.scene-actions{position:relative;display:flex;justify-content:flex-end;gap:6px}
.scene-play-button,.scene-more-button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border-subtle,rgba(88,108,132,.25));border-radius:9px;color:var(--text-primary,#142237);background:var(--surface,#fff)}
.scene-play-button svg,.scene-more-button svg{width:18px;height:18px}
.scene-play-button svg{fill:currentColor;stroke:none}
.scene-more-button svg{fill:currentColor;stroke:currentColor;stroke-width:1.8}
.scene-play-button:disabled{cursor:not-allowed;opacity:.48}
.scene-menu{position:absolute;right:0;top:39px;z-index:12;min-width:132px;padding:5px;border:1px solid var(--border-subtle,rgba(88,108,132,.25));border-radius:10px;background:var(--surface-raised,#fff);box-shadow:0 12px 30px rgba(15,29,46,.2)}
.scene-menu button{display:block;width:100%;padding:8px 10px;border:0;border-radius:7px;text-align:left;color:var(--text-primary,#142237);background:transparent}
.scene-menu button:hover,.scene-menu button:focus-visible{background:var(--color-accent-soft,rgba(35,110,216,.12))}
.scene-menu button.danger{color:#b54343}
:root[data-theme="dark"] .scenes-table-shell,:root[data-theme="dark"] .scene-menu,:root[data-theme="dark"] .scene-play-button,:root[data-theme="dark"] .scene-more-button{background:#102238;color:#eef5ff;border-color:#32465e}
.scene-editor-backdrop{place-items:center;padding:12px}
.scene-editor-dialog{display:flex;flex-direction:column;width:min(720px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:hidden}
.scene-editor-tabs{display:flex;gap:4px;padding:8px 16px 0;border-bottom:1px solid var(--dialog-border)}
.scene-editor-tabs button{min-height:38px;padding:0 14px;border:0;border-bottom:2px solid transparent;color:var(--dialog-muted);background:transparent}
.scene-editor-tabs button[aria-selected="true"]{border-color:var(--color-accent,#236ed8);color:var(--dialog-text);font-weight:750}
.scene-editor-form{display:flex;min-height:0;flex:1 1 auto;flex-direction:column}
.scene-editor-body{min-width:0;overflow:auto}
.scene-editor-body section{display:grid;gap:14px;min-width:0}
.scene-editor-body section[hidden]{display:none}
.scene-editor-body label{display:grid;gap:6px;min-width:0}
.scene-editor-body label:has(> input[type="radio"]){display:flex;align-items:center;gap:8px}
.scene-editor-body label:has(> input[type="checkbox"]){display:flex;align-items:center;gap:8px}
.scene-editor-body label:has(> input[type="radio"])>input,.scene-editor-body label:has(> input[type="checkbox"])>input{flex:0 0 auto;margin:0}
.scene-editor-body :is(input[type="text"],input[type="number"],input[type="time"],select,textarea){width:100%;min-width:0;box-sizing:border-box;padding:10px;border:1px solid var(--dialog-input-border);border-radius:9px;color:var(--dialog-text);background:var(--dialog-control-surface)}
.scene-editor-body fieldset{display:grid;gap:10px;min-width:0;margin:0;padding:12px;border:1px solid var(--dialog-border);border-radius:10px}
.scene-media-picker{display:flex;align-items:center;gap:10px;min-width:0}.scene-media-picker span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene-media-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.scene-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.scene-weekdays button{min-width:0;padding:8px 2px;border:1px solid var(--dialog-border);border-radius:8px;background:var(--dialog-control-surface);color:var(--dialog-text)}.scene-weekdays button[aria-pressed="true"]{border-color:var(--color-accent,#236ed8);background:var(--dialog-selected)}
.scene-editor-room-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.scene-editor-room-card{display:flex;align-items:center;justify-content:space-between;min-width:0;padding:11px;border:1px solid var(--dialog-border);border-radius:10px;color:var(--dialog-text);background:var(--dialog-control-surface);text-align:left}.scene-editor-room-card span{display:grid;min-width:0}.scene-editor-room-card small{color:var(--dialog-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scene-editor-room-card.is-selected{border-color:var(--color-accent,#236ed8);background:var(--dialog-selected)}.scene-editor-room-card em{font-style:normal;font-size:11px;font-weight:750;color:var(--color-accent,#236ed8)}
.scene-group-warning{margin:0;padding:10px;border-radius:9px;background:#fff4d6;color:#6f5100}.scene-editor-error{min-height:20px;margin:0;color:#b54343;font-weight:650}.scene-editor-footer{flex:0 0 auto;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--dialog-border)}
.scene-media-choice{margin-left:auto;flex:0 0 auto}
@media(max-width:650px){.scene-editor-backdrop{place-items:center!important;padding:8px}.scene-editor-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);align-self:center!important;justify-self:center!important}.scene-media-options,.scene-editor-room-cards{grid-template-columns:1fr}.scene-editor-tabs{overflow-x:auto;padding-inline:8px}.scene-editor-tabs button{padding-inline:10px}.scene-weekdays{gap:3px}}