*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Theme tokens — consumed by shared chrome (add-ons modal, progress popup) and
   available to add-on stylesheets so they can match the active theme. */
:root {
  --bg-input:   #2a2a2a;
  --bg-modal:   #1e1e1e;
  --text:       #e0e0e0;
  --text-muted: #888888;
  --border:     #3a3a3a;
  --accent:     #3a6ea8;
  --danger:     #e05555;
}
.light-mode {
  --bg-input:   #ffffff;
  --bg-modal:   #f5f5f5;
  --text:       #1a1a1a;
  --text-muted: #888888;
  --border:     #c8c8c8;
  --accent:     #4a8fd0;
  --danger:     #c0392b;
}

body {
  background: #2a2a2a;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e0e0e0;
}

/* ── Top utility bar ── */
.topbar {
  width: 100%;
  height: 34px;
  background: #111;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 300;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topbar-menu {
  position: relative;
}

.topbar-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #999;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}

.topbar-btn:hover,
.topbar-btn.active {
  background: #1e1e1e;
  border-color: #333;
  color: #ddd;
}

/* Session toggle: a live-session ("End Session") state gets a red record dot. */
.session-btn.session-on {
  background: #2a1414;
  border-color: #6e2a2a;
  color: #ff9d9d;
}

.session-btn.session-on:hover {
  background: #331919;
  border-color: #8a3535;
  color: #ffb5b5;
}

.session-btn.session-on::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e05555;
  box-shadow: 0 0 6px rgba(224, 85, 85, 0.8);
  flex-shrink: 0;
}

.topbar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 7px;
  list-style: none;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  z-index: 400;
  padding: 4px;
}

.topbar-dropdown.open { display: block; }

.topbar-dropdown li {
  padding: 7px 12px;
  font-size: 0.82rem;
  color: #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}

.topbar-dropdown li:hover {
  background: #252525;
  color: #eee;
}

.topbar-dropdown .dropdown-separator {
  height: 1px;
  background: #2a2a2a;
  margin: 3px 4px;
  padding: 0 !important;
  cursor: default;
  pointer-events: none;
}

.topbar-dropdown .dropdown-separator:hover {
  background: #2a2a2a !important;
}

.light-mode .topbar-dropdown .dropdown-separator,
.light-mode .topbar-dropdown .dropdown-separator:hover {
  background: #ddd !important;
}

/* Per-add-on section header in the settings dropdown */
.topbar-dropdown .dropdown-section-label {
  padding: 6px 12px 3px !important;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #5a5a5a;
  cursor: default;
  pointer-events: none;
}

.topbar-dropdown .dropdown-section-label:hover {
  background: transparent !important;
  color: #5a5a5a !important;
}

.light-mode .topbar-dropdown .dropdown-section-label,
.light-mode .topbar-dropdown .dropdown-section-label:hover {
  color: #999 !important;
}

/* ── Quick Play panel ── */
.quick-play-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #13141a;
  border: 1px solid #26272f;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.85);
  z-index: 400;
  min-width: 240px;
  max-width: 340px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.quick-play-panel.open { display: block; }

.qp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 0.82rem;
  color: #c8c8c8;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qp-item:hover { background: #1e2028; color: #eee; }

.qp-item.playing {
  color: #7de0a0;
  background: #0d1f10;
}

.qp-item.playing::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4caf6e;
  flex-shrink: 0;
}

.qp-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qp-empty {
  padding: 18px 14px;
  font-size: 0.78rem;
  color: #444;
  text-align: center;
}

.light-mode .quick-play-panel {
  background: #f5f5f5;
  border-color: #d0d0d0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.light-mode .qp-item { color: #333; }
.light-mode .qp-item:hover { background: #e8e8e8; color: #000; }
.light-mode .qp-item.playing { color: #1b5e30; background: #e8f5e9; }
.light-mode .qp-empty { color: #aaa; }

/* ── Toolbar ── */
.toolbar {
  width: 100%;
  height: 220px;
  background: #181818;
  border-bottom: 2px solid #111;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 22px;
  flex-shrink: 0;
}

.toolbar-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
}

.toolbar-logo {
  height: 144px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── Now-playing display ── */
.now-playing {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #0c0c0c;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 0 22px;
  height: 144px;
  width: 480px;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
}

/* Offline warning pill, floated at the top edge of the now-playing box so it
   never shifts the track/time layout. */
.offline-notice {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  line-height: 1.4;
  padding: 2px 10px;
  border-radius: 999px;
  background: #2e2410;
  border: 1px solid #8a6d1a;
  color: #e8c15a;
}
.offline-notice[hidden] { display: none; }

.light-mode .offline-notice {
  background: #fdf6e3;
  border-color: #d8b84a;
  color: #8a6d1a;
}

/* Intercom on-air pill — same float slot as the offline notice (the intercom
   needs connectivity, so the two are all but mutually exclusive; this one is
   later in the DOM and paints on top for the brief overlap window). */
.intercom-live {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 0.7rem;
  line-height: 1.4;
  padding: 2px 10px;
  border-radius: 999px;
  background: #3a1512;
  border: 1px solid #c0392b;
  color: #ff8a7a;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.intercom-live[hidden] { display: none; }
.intercom-live .ic-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e74c3c;
  animation: icPulse 1.1s ease-in-out infinite;
}
@keyframes icPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .intercom-live .ic-dot { animation: none; }
}
.light-mode .intercom-live {
  background: #fdecea;
  border-color: #c0392b;
  color: #a93226;
}

.np-track {
  width: 100%;
  font-size: 1.4rem; /* default; JS overrides when playing */
  font-weight: 600;
  color: #d8d8d8;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
}

.np-time {
  font-family: "Courier New", Courier, monospace;
  font-size: 2.2rem;
  font-weight: 700;
  color: #00e676;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Transport state of the clock. JS toggles these instead of writing an inline
   colour, so themes can restyle it. */
.np-time.np-idle    { color: #555555; }
.np-time.np-paused  { color: #f59e0b; }
.np-time.np-playing { color: #00e676; }

/* ── Toolbar right ── */
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: column;
}

/* ── Output volume fader ──────────────────────────────────────────────────
   Speaker level only — the WebRTC Output tap sits upstream of this node. */
.volume-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 144px;
  padding: 8px 10px;
  background: #0c0c0c;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  flex-shrink: 0;
}

.volume-value {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.volume-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #666;
}

.volume-slider {
  flex: 1 1 auto;
  width: 24px;
  min-height: 0;
  margin: 0;
  writing-mode: vertical-lr;
  direction: rtl;                     /* full level at the top */
  -webkit-appearance: slider-vertical; /* older WebKit/Blink */
  appearance: slider-vertical;
  accent-color: #3a6ea8;
  cursor: pointer;
}

/* ── Transport buttons ── */
.tb-btn {
  height: 56px;
  width: 110px;
  padding: 0;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: filter 0.1s, opacity 0.15s;
  white-space: nowrap;
}

.tb-btn:hover { filter: brightness(1.15); }
.tb-btn:active { filter: brightness(0.9); }

.tb-btn:disabled {
  opacity: 0.35;
  cursor: default;
  filter: none;
}

.tb-stop    { background: #c0392b; color: #fff; }
.tb-fadeout { background: #8e2317; color: #ffcccc; }
.tb-pause   { background: #d97706; color: #fff; font-size: 1.6rem; }

/* ── Settings menu container ── */
.settings-menu { position: relative; }

/* ── Deck tab bar ── */
.deck-bar {
  width: 100%;
  height: 36px;
  background: #222;
  border-bottom: 2px solid #111;
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  padding: 0 8px;
}

.deck-side-btn {
  display: none;
  height: calc(100% - 8px);
  width: 28px;
  padding: 0;
  background: #1a2a3a;
  border: 1px solid #2a4a6a;
  border-radius: 4px;
  color: #7abfe0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.deck-side-btn.visible {
  display: flex;
}

.deck-side-btn:hover {
  background: #1e3a5a;
  border-color: #4a8fd0;
  color: #c0e4ff;
}

.deck-side-btn:active {
  background: #4a8fd0;
  color: #fff;
}

.lock-btn {
  margin-left: auto;
  height: calc(100% - 8px);
  width: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.12s, color 0.12s;
}

.lock-btn:hover { border-color: #555; color: #888; }

.lock-btn.unlocked { border-color: #d97706; color: #d97706; }
.lock-btn.unlocked:hover { border-color: #f59e0b; color: #f59e0b; }

.light-mode .lock-btn { border-color: #c8c8c8; color: #888; }
.light-mode .lock-btn:hover { border-color: #999; color: #555; }
.light-mode .lock-btn.unlocked { border-color: #d97706; color: #d97706; }

/* ── Drag-and-drop cell states ── */
.board.unlocked .cell { cursor: grab; }

.cell.dragging {
  opacity: 0.35;
  cursor: grabbing;
}

.cell.drag-over {
  box-shadow: inset 0 0 0 2px #4a8fd0 !important;
}

.deck-select {
  background: transparent;
  border: none;
  border-bottom: 3px solid #4a8fd0;
  border-radius: 0;
  padding: 0 22px 0 10px;
  height: 100%;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e8e8e8;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.deck-select option {
  background: #222;
  color: #e8e8e8;
}

/* ── Board area ── */
.board-area {
  flex: 1;
  /* The board never scrolls — pads shrink so every one fits the window. */
  overflow: hidden;
  background: #2a2a2a;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* JS overrides per deck */
  grid-template-rows: repeat(8, 1fr);      /* JS overrides per deck */
  gap: 5px;
  flex: 1;
  /* 0 (not min-content) so the grid is capped at the board-area's height and
     rows compress to fit rather than growing past the window. */
  min-height: 0;
  padding: 8px;
}

/* Density steps (set by JS from per-pad space): fixed spacing shrinks so a
   large grid in a small window still fits every pad on screen. */
.board.dense { gap: 3px; padding: 4px; }
.board.dense .cell { padding: 2px 5px; }
.board.tight { gap: 1px; padding: 2px; }
.board.tight .cell { padding: 0 2px; border-radius: 3px; }
.board.tight .cell-companion,
.board.tight .cell-time { display: none; }

/* ── Cells ── */
.cell {
  background: linear-gradient(to bottom, #323232 0%, #272727 100%);
  border: 1px solid #3d3d3d;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  position: relative;
  transition: background 0.08s, border-color 0.08s, box-shadow 0.08s;
}

.cell:hover {
  background: linear-gradient(to bottom, #3c3c3c 0%, #313131 100%);
  border-color: #4e4e4e;
}

.cell:active {
  background: linear-gradient(to bottom, #252525 0%, #1e1e1e 100%);
}

.cell.assigned {
  background: linear-gradient(to bottom, #303030 0%, #252525 100%);
  border-color: #404040;
}

.cell.assigned:hover {
  background: linear-gradient(to bottom, #3a3a3a 0%, #2e2e2e 100%);
  border-color: #505050;
}

.cell.playing {
  background: linear-gradient(to bottom, #1a3a1e 0%, #122816 100%);
  border-color: #4caf6e;
  box-shadow: inset 0 0 0 1px #4caf6e, 0 0 10px rgba(76, 175, 110, 0.35);
}

.cell.playing:hover {
  background: linear-gradient(to bottom, #1e4222 0%, #162e1a 100%);
}

.cell.fading {
  background: linear-gradient(to bottom, #38280a 0%, #2c1e06 100%);
  border-color: #e6a020;
  box-shadow: inset 0 0 0 1px #e6a020;
}

/* Cell content */
.cell-name {
  font-size: 1rem; /* JS overrides this via fitCellName() */
  font-weight: 700;
  text-align: center;
  color: #d8d8d8;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.2;
  flex-shrink: 0; /* never flex-squash the name to zero height in short cells */
}

.cell-companion {
  font-size: 0.58rem;
  color: #666;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  flex: 0 1 auto;   /* the secondary line yields before the name does */
  min-height: 0;
  overflow: hidden;
}

/* Track length, anchored to the pad's corner so it never squeezes the name. */
.cell-time {
  position: absolute;
  bottom: 3px;
  right: 5px;
  font-size: 0.55rem;
  color: #606060;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  pointer-events: none;
}

/* Session "already played" check, corner-anchored like .cell-time. Stays
   visible even on tight boards — it's the session's whole point. */
.cell.session-played::after {
  content: '✓';
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  color: #58b97c;
  pointer-events: none;
}

.cell.playing.session-played::after { color: #7de0a0; }
.board.tight .cell.session-played::after { font-size: 0.5rem; top: 1px; right: 2px; }

/* Preference (Preferences → Display, body.played-red): pads already played
   this session turn red, not just the corner check. Live playing/fading
   colors must still win, hence the :not() guards. */
body.played-red .cell.session-played:not(.playing):not(.fading) {
  background: linear-gradient(to bottom, #402020 0%, #2e1616 100%);
  border-color: #8a4040;
}
body.played-red .cell.session-played:not(.playing):not(.fading):hover {
  background: linear-gradient(to bottom, #4a2626 0%, #361c1c 100%);
  border-color: #9c4a4a;
}
body.played-red .cell.session-played:not(.playing):not(.fading)::after { color: #e89090; }

.cell.playing .cell-name  { color: #7de0a0; }
.cell.playing .cell-companion { color: #4caf6e; }
.cell.playing .cell-time  { color: #4caf6e; }

.cell.fading .cell-name { color: #d4a030; }
.cell.fading .cell-companion { color: #b07820; }
.cell.fading .cell-time { color: #b07820; }

.cell-empty-hint {
  font-size: 0.6rem;
  color: #484848;
  font-style: italic;
}

/* ── Modals shared wide class ── */
.modal.modal-wide {
  width: min(96vw, 920px);
}

/* ── Decks modal ── */
.modal.modal-medium {
  width: min(94vw, 460px);
}

.decks-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 380px;
  overflow-y: auto;
  margin-bottom: 10px;
  padding-right: 2px;
}

/* grid: drag-handle | badge | name-input-or-label | remove-btn */
/* Five tracks: handle · badge · name · size editor (deck rows only; collapses
   to zero on category rows) · remove. minmax(0,1fr) lets the name shrink. */
.deck-config-row {
  display: grid;
  grid-template-columns: 20px 46px minmax(0, 1fr) auto 28px;
  gap: 8px;
  align-items: center;
  padding: 3px 4px;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: border-color 0.1s;
}

.deck-config-row.drag-over-top    { border-top-color:    #4a8fd0; }
.deck-config-row.drag-over-bottom { border-bottom-color: #4a8fd0; }
.deck-config-row.dragging         { opacity: 0.4; }

.deck-config-row--category { background: #1e2820; }
.deck-config-row--deck      { background: #1c1c24; }

.deck-row-handle {
  color: #444;
  cursor: grab;
  font-size: 1rem;
  user-select: none;
  text-align: center;
  line-height: 1;
}
.deck-row-handle:hover { color: #888; }

.deck-row-badge {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
}

.deck-row-badge--category {
  background: #243024;
  color: #7aaa7a;
  border: 1px solid #3a5a3a;
}

.deck-row-badge--deck {
  background: #22223a;
  color: #7a9acc;
  border: 1px solid #3a3a6a;
}

.deck-row-input {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 0.83rem;
  color: #e0e0e0;
  outline: none;
  transition: border-color 0.15s;
}
.deck-row-input:focus { border-color: #3a6ea8; }

.deck-row-size {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.deck-row-size input {
  width: 46px;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 5px;
  padding: 5px 4px 5px 8px;
  font-size: 0.83rem;
  color: #e0e0e0;
  outline: none;
  transition: border-color 0.15s;
  color-scheme: dark;   /* native number spinners match the theme */
}

.deck-row-size input:focus { border-color: #3a6ea8; }

.deck-row-size-x {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.deck-row-remove {
  grid-column: 5;   /* pin to the last track so category and deck rows align */
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  color: #555;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.deck-row-remove:hover {
  border-color: #c0392b;
  color: #e07070;
  background: #2a1515;
}

.decks-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.decks-add-btn {
  flex: 1;
  padding: 7px;
  background: transparent;
  border: 1px dashed #333;
  border-radius: 6px;
  color: #555;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.decks-add-btn:hover { border-color: #4a6a8a; color: #7aaccc; }

/* ── Modals (shared) ── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 24px;
  width: min(90vw, 360px);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.85);
}

.modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.form-group input[type="text"] {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.9rem;
  color: #e0e0e0;
  outline: none;
  transition: border-color 0.15s;
}

.form-group input[type="text"]:focus {
  border-color: #3a6ea8;
}

.form-group input[type="text"].invalid {
  border-color: #c0392b;
}

.form-group select {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.9rem;
  color: #e0e0e0;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s;
}

.form-group select:focus {
  border-color: #3a6ea8;
}

.form-group select option {
  background: #2a2a2a;
  color: #e0e0e0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: #ccc;
  font-size: 0.88rem;
}

.checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #3a6ea8;
  cursor: pointer;
  flex-shrink: 0;
}

.field-hint {
  font-size: 0.7rem;
  color: #555;
  margin-top: 4px;
  display: block;
}

.field-hint strong {
  color: #888;
  font-weight: 600;
}

/* Companion status variables — the reference list in the Companion IP modal. */
.cv-var-list {
  margin-top: 8px;
  max-height: 148px;
  overflow-y: auto;
  border: 1px solid #2e2e2e;
  border-radius: 4px;
  background: #232323;
}

.cv-var {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
}

.cv-var + .cv-var { border-top: 1px solid #2a2a2a; }

.cv-var code {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  color: #7fb2e5;
  user-select: all;
}

.cv-var span {
  font-size: 0.68rem;
  color: #777;
  text-align: right;
  margin-left: auto;
}

.file-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-name {
  flex: 1;
  font-size: 0.8rem;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-name.has-file {
  color: #4a8fd0;
}

.file-btn {
  flex-shrink: 0;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  color: #aaa;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.file-btn:hover {
  background: #333;
  border-color: #4a4a4a;
  color: #e0e0e0;
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

/* ── Media library modal ── */
.media-header {
  display: grid;
  grid-template-columns: 1fr 1fr 28px;
  gap: 10px;
  padding: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.media-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 380px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr 28px;
  gap: 10px;
  align-items: center;
}

.media-name-input {
  width: 100%;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.85rem;
  color: #e0e0e0;
  outline: none;
  transition: border-color 0.15s;
}

.media-name-input:focus { border-color: #3a6ea8; }

.media-file-name {
  font-size: 0.75rem;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-delete-btn {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  color: #555;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  flex-shrink: 0;
}

.media-delete-btn:hover {
  border-color: #c0392b;
  color: #e07070;
  background: #2a1515;
}

.media-add-btn {
  display: block;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px dashed #333;
  border-radius: 6px;
  color: #555;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: center;
  margin-bottom: 16px;
  transition: border-color 0.15s, color 0.15s;
}

.media-add-btn:hover { border-color: #4a6a8a; color: #7aaccc; }

.media-empty {
  color: #555;
  font-size: 0.82rem;
  text-align: center;
  padding: 20px 0;
}

.light-mode .media-name-input { background: #fff; border-color: #c8c8c8; color: #1a1a1a; }
.light-mode .media-name-input:focus { border-color: #4a8fd0; }
.light-mode .media-file-name { color: #888; }
.light-mode .media-delete-btn { border-color: #c8c8c8; color: #888; }
.light-mode .media-delete-btn:hover { border-color: #c0392b; color: #c0392b; background: #fce8e8; }
.light-mode .media-add-btn { border-color: #c0c0c0; color: #888; }
.light-mode .media-add-btn:hover { border-color: #5a8ab0; color: #2a5a80; }
.light-mode .media-empty { color: #999; }
.light-mode .media-header { color: #888; }

/* ── Preferences modal ── */
.prefs-section {
  margin-bottom: 20px;
}

.prefs-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.btn-primary, .btn-danger, .btn-secondary {
  flex: 1;
  padding: 9px 0;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary {
  background: #2a5a8a;
  color: #e0e0e0;
}

.btn-primary:hover {
  background: #3568a0;
}

.btn-danger {
  background: #5a2020;
  color: #e0a0a0;
}

.btn-danger:hover {
  background: #722828;
}

.btn-secondary {
  background: #2a2a2a;
  color: #888;
  border: 1px solid #3a3a3a;
}

.btn-secondary:hover {
  background: #333;
  color: #aaa;
}

/* ── Theme toggle menu item ── */
.menu-toggle-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  cursor: default !important;
  border-top: 1px solid #222;
  margin-top: 3px;
  padding-top: 10px !important;
}

.menu-toggle-item:hover {
  background: transparent !important;
  color: #ccc !important;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 19px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #3a3a3a;
  border-radius: 19px;
  transition: background 0.2s;
  border: 1px solid #555;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background: #777;
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: #4a8fd0;
  border-color: #5a9fe0;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(15px);
  background: #fff;
}

/* ── Light mode ── */
.light-mode,
body.light-mode {
  background: #e8e8e8;
  color: #1a1a1a;
}

.light-mode .topbar {
  background: #d0d0d0;
  border-bottom-color: #b4b4b4;
}

.light-mode .topbar-btn { color: #444; }

.light-mode .topbar-btn:hover,
.light-mode .topbar-btn.active {
  background: #c0c0c0;
  border-color: #aaa;
  color: #111;
}

.light-mode .topbar-dropdown {
  background: #f0f0f0;
  border-color: #ccc;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.light-mode .topbar-dropdown li { color: #333; }
.light-mode .topbar-dropdown li:hover { background: #e0e0e0; color: #000; }

.light-mode .menu-toggle-item { border-top-color: #ccc; }
.light-mode .menu-toggle-item:hover { color: #333 !important; }

.light-mode .toggle-slider { background: #c0c0c0; border-color: #aaa; }
.light-mode .toggle-slider::before { background: #fff; }
.light-mode .toggle-switch input:checked + .toggle-slider { background: #4a8fd0; border-color: #5a9fe0; }

.light-mode .toolbar {
  background: #dcdcdc;
  border-bottom-color: #b8b8b8;
}

.light-mode .now-playing {
  background: #f2f2f2;
  border-color: #c8c8c8;
}

.light-mode .np-track { color: #222; }

.light-mode .deck-bar {
  background: #d0d0d0;
  border-bottom-color: #b0b0b0;
}

.light-mode .deck-select { color: #1a1a1a; }
.light-mode .deck-select option { background: #e8e8e8; color: #1a1a1a; }

.light-mode .deck-side-btn {
  background: #c8d8e8;
  border-color: #9ab8d8;
  color: #2a5a80;
}

.light-mode .deck-side-btn:hover {
  background: #b8c8de;
  border-color: #5a8ab0;
}

.light-mode .board-area { background: #d8d8d8; }

.light-mode .modal-backdrop { background: rgba(0,0,0,0.35); }

.light-mode .modal {
  background: #f5f5f5;
  border-color: #d0d0d0;
  box-shadow: 0 16px 48px rgba(0,0,0,0.2);
}

.light-mode .modal-title { color: #1a1a1a; }
.light-mode .form-group label { color: #666; }

.light-mode .form-group input[type="text"],
.light-mode .form-group select {
  background: #fff;
  border-color: #c8c8c8;
  color: #1a1a1a;
}

.light-mode .form-group input[type="text"]:focus,
.light-mode .form-group select:focus { border-color: #4a8fd0; }

.light-mode .form-group input[type="text"].invalid { border-color: #c0392b; }

.light-mode .checkbox-label { color: #333; }
.light-mode .field-hint { color: #888; }
.light-mode .cv-var-list { background: #f4f4f4; border-color: #d8d8d8; }
.light-mode .cv-var + .cv-var { border-top-color: #e2e2e2; }
.light-mode .cv-var code { color: #2a6090; }
.light-mode .cv-var span { color: #888; }
.light-mode .file-name { color: #888; }
.light-mode .file-name.has-file { color: #2a6090; }

.light-mode .file-btn {
  background: #e8e8e8;
  border-color: #c8c8c8;
  color: #555;
}

.light-mode .file-btn:hover { background: #ddd; border-color: #bbb; color: #222; }

.light-mode .btn-primary { background: #3a7ab0; color: #fff; }
.light-mode .btn-primary:hover { background: #2e6a9e; }
.light-mode .btn-secondary { background: #e0e0e0; border-color: #c8c8c8; color: #444; }
.light-mode .btn-secondary:hover { background: #d4d4d4; color: #222; }

.light-mode .deck-config-row--category     { background: #eaf4ea; }
.light-mode .deck-config-row--deck         { background: #eaeaf4; }
.light-mode .deck-row-handle               { color: #bbb; }
.light-mode .deck-row-handle:hover         { color: #888; }
.light-mode .deck-row-badge--category      { background: #d4ead4; color: #3a703a; border-color: #aacaaa; }
.light-mode .deck-row-badge--deck          { background: #d4d4ea; color: #3a3a80; border-color: #aaaacaa; }
.light-mode .deck-row-input                { background: #fff; border-color: #c8c8c8; color: #1a1a1a; }
.light-mode .deck-row-input:focus          { border-color: #4a8fd0; }
.light-mode .deck-row-size input           { background: #fff; border-color: #c8c8c8; color: #1a1a1a; color-scheme: light; }
.light-mode .deck-row-size input:focus     { border-color: #4a8fd0; }
.light-mode .deck-row-remove               { border-color: #c8c8c8; color: #888; }
.light-mode .deck-row-remove:hover         { border-color: #c0392b; color: #c0392b; background: #fce8e8; }
.light-mode .decks-add-btn                 { border-color: #c0c0c0; color: #888; }
.light-mode .decks-add-btn:hover           { border-color: #5a8ab0; color: #2a5a80; }

.light-mode .prefs-section-title { color: #888; }

/* ── Light mode: cells ── */
.light-mode .cell {
  background: linear-gradient(to bottom, #f7f7f7 0%, #e4e4e4 100%);
  border-color: #bbb;
}
.light-mode .cell:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #ececec 100%);
  border-color: #999;
}
.light-mode .cell:active {
  background: linear-gradient(to bottom, #e0e0e0 0%, #d0d0d0 100%);
}
.light-mode .cell.assigned {
  background: linear-gradient(to bottom, #f9f9f9 0%, #e6e6e6 100%);
  border-color: #aaa;
}
.light-mode .cell.assigned:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
  border-color: #888;
}
.light-mode .cell.playing {
  background: linear-gradient(to bottom, #e8f5e9 0%, #c8e6c9 100%);
}
.light-mode .cell.playing:hover {
  background: linear-gradient(to bottom, #eef7ef 0%, #d0ecd2 100%);
}
.light-mode .cell.fading {
  background: linear-gradient(to bottom, #fff8e1 0%, #ffe0b2 100%);
}

.light-mode .cell-name       { color: #1a1a1a; }
.light-mode .cell-companion  { color: #888; }
.light-mode .cell-time       { color: #a0a0a0; }
.light-mode .cell-empty-hint { color: #c0c0c0; }

.light-mode .cell.playing .cell-name      { color: #1b4d2a; }
.light-mode .cell.playing .cell-companion { color: #3a8a55; }
.light-mode .cell.playing .cell-time      { color: #3a8a55; }
.light-mode .cell.fading  .cell-name      { color: #4a3000; }
.light-mode .cell.fading  .cell-companion { color: #9a6a10; }
.light-mode .cell.fading  .cell-time      { color: #9a6a10; }

.light-mode .cell.session-played::after         { color: #2f9457; }
.light-mode .cell.playing.session-played::after { color: #1b5e30; }

/* Descendant (.light-mode …), not compound: at boot only <html> carries
   .light-mode (the head script runs before <body> exists), while .played-red
   sits on <body>. */
.light-mode .played-red .cell.session-played:not(.playing):not(.fading) {
  background: linear-gradient(to bottom, #fbe4e4 0%, #f0c4c4 100%);
  border-color: #c66;
}
.light-mode .played-red .cell.session-played:not(.playing):not(.fading):hover {
  background: linear-gradient(to bottom, #fdeaea 0%, #f4cece 100%);
  border-color: #b95c5c;
}
.light-mode .played-red .cell.session-played:not(.playing):not(.fading)::after { color: #a83232; }

.light-mode .session-btn.session-on {
  background: #fdeaea;
  border-color: #e8b8b8;
  color: #a83232;
}

.light-mode .session-btn.session-on:hover {
  background: #fadcdc;
  border-color: #d8a0a0;
  color: #8f2525;
}

/* ── Cell context menu ── */
.cell-context-menu {
  position: fixed;
  display: none;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 7px;
  padding: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.75);
  z-index: 500;
  min-width: 130px;
}

.cell-context-menu.open { display: block; }

.ccm-item {
  padding: 7px 12px;
  font-size: 0.82rem;
  color: #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
}

.ccm-item:hover {
  background: #252525;
  color: #eee;
}

.ccm-item-danger { color: #c07070; }
.ccm-item-danger:hover { background: #2a1515; color: #e08080; }

.light-mode .cell-context-menu {
  background: #f0f0f0;
  border-color: #ccc;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.light-mode .ccm-item { color: #333; }
.light-mode .ccm-item:hover { background: #e0e0e0; color: #000; }
.light-mode .ccm-item-danger { color: #c0392b; }
.light-mode .ccm-item-danger:hover { background: #fce8e8; color: #a02020; }

/* ── Queue bar ── */
.queue-bar {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #161616;
  border-bottom: 1px solid #111;
  flex-shrink: 0;
  overflow-x: auto;
  min-height: 34px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.queue-bar.visible {
  display: flex;
}

.queue-bar-label {
  font-size: 0.65rem;
  font-weight: 600;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  margin-right: 2px;
}

.queue-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #1a2a3a;
  border: 1px solid #2a4a6a;
  border-radius: 12px;
  padding: 3px 10px 3px 6px;
  font-size: 0.72rem;
  color: #7abfe0;
  white-space: nowrap;
  flex-shrink: 0;
}

.queue-chip-remove {
  background: none;
  border: none;
  color: #3a6a8a;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 1px;
  transition: color 0.1s;
  display: flex;
  align-items: center;
}

.queue-chip-remove:hover { color: #d07070; }

.queue-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: #1a4a22;
  border: 1px solid #4caf6e;
  border-radius: 50%;
  color: #7de0a0;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.queue-play-btn:hover {
  background: #1e5828;
  border-color: #5dc97e;
  color: #a0eeb8;
}

.light-mode .queue-play-btn {
  background: #c8e8d0;
  border-color: #4caf6e;
  color: #1a5a2a;
}

.light-mode .queue-play-btn:hover {
  background: #b0dcc0;
  border-color: #3a9a5e;
}

.light-mode .queue-bar {
  background: #d0d0d0;
  border-bottom-color: #b8b8b8;
}

.light-mode .queue-bar-label { color: #999; }

.light-mode .queue-chip {
  background: #dde8f5;
  border-color: #9ab8d8;
  color: #2a5a80;
}

.light-mode .queue-chip-remove { color: #8ab0cc; }
.light-mode .queue-chip-remove:hover { color: #c0392b; }

/* ── Toast notifications ── */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  max-width: 340px;
  pointer-events: auto;
  animation: toast-in 0.18s ease, toast-out 0.3s ease 3.9s forwards;
}

.toast--error {
  background: #2a1515;
  border: 1px solid #8b2222;
  color: #f08888;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(6px); }
}

.light-mode .toast--error {
  background: #fdf0f0;
  border-color: #e08080;
  color: #b03030;
}

/* Update toast: persistent (no auto-dismiss animation) with a reload button. */
.toast--update {
  background: #14222e;
  border: 1px solid #2e6da4;
  color: #9fc6e8;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toast-in 0.18s ease;
}

.toast-update-btn {
  background: #2e6da4;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 0.78rem;
  padding: 4px 10px;
  cursor: pointer;
  flex-shrink: 0;
}
.toast-update-btn:hover { background: #3a80bd; }

.light-mode .toast--update {
  background: #eef5fb;
  border-color: #7fb1dc;
  color: #2a5d8a;
}

/* ── Export progress popup ── */
.export-progress-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.export-progress-popup.visible {
  display: flex;
}

.export-progress-card {
  background: var(--bg-modal, #1e1e1e);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1rem;
  color: var(--text, #e8e8e8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.export-progress-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border, #444);
  border-top-color: var(--accent, #00e676);
  border-radius: 50%;
  flex-shrink: 0;
  animation: export-spin 0.7s linear infinite;
}

@keyframes export-spin {
  to { transform: rotate(360deg); }
}

.light-mode .export-progress-card {
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ── Add-ons modal ── */
.addon-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.addon-add-row input {
  flex: 1;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 0.85rem;
}

.addon-add-row input:focus {
  outline: none;
  border-color: var(--accent);
}

.addons-installed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 4px;
}

.addons-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 0;
  margin: 0;
}

.addon-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.addon-code-badge {
  font-size: 0.7rem;
  font-family: monospace;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--text-muted);
  white-space: nowrap;
}

.addon-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.addon-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.addon-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.addon-select {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.82rem;
  cursor: pointer;
}

.addon-select:focus {
  outline: none;
  border-color: var(--accent);
}

.addon-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 6px 0 0;
}

.light-mode .addon-item {
  background: #f7f8fa;
}

.addon-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.addon-remove-btn {
  background: transparent;
  color: var(--danger, #e05555);
  border: 1px solid var(--danger, #e05555);
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 0.78rem;
  cursor: pointer;
}

.addon-remove-btn:hover {
  background: rgba(224, 85, 85, 0.15);
}

/* ── WebRTC Output ───────────────────────────────────────────────────────── */
.wo-status {
  margin: 2px 0 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Scannable link to the phone remote. Always a light card with a dark code —
   a QR needs that contrast in either theme, and the quiet zone is baked into
   the canvas by SB_QR. */
.rc-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.rc-qr[hidden] { display: none; }

.rc-qr canvas {
  background: #fff;
  border-radius: 6px;
  display: block;
}

.rc-qr-caption {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
}

/* Cautionary line inside a modal (e.g. "anyone with this ID can ..."). */
.modal-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid #d99a2b;
  background: rgba(217, 154, 43, 0.08);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-muted);
}

/* ── What's New ───────────────────────────────────────────────────────────── */
.wn-current {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: -6px 0 14px;
}
.whats-new-body {
  max-height: 56vh;
  overflow-y: auto;
  padding-right: 6px;
}
.wn-release {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.wn-release:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.wn-release-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.wn-version {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.wn-date {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.wn-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 999px;
  margin: 8px 0 2px;
}
.wn-added    { background: rgba(52, 199, 89, 0.16);  color: #3bbf63; }
.wn-improved { background: rgba(58, 110, 168, 0.18); color: var(--accent); }
.wn-fixed    { background: rgba(245, 166, 35, 0.16); color: #d98a18; }
.wn-list {
  margin: 4px 0;
  padding-left: 20px;
}
.wn-list li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  margin: 3px 0;
}



/* ══ High visibility mode ═══════════════════════════════════════════════════
   Preferences → Display → "High visibility mode". `.high-vis` rides on both
   <html> (set by the head loader, before first paint) and <body> (set by
   app.js), exactly like `.light-mode`, so `.light-mode.high-vis` compounds at
   every point in the boot. Dark rules come first; every light counterpart is
   prefixed `.light-mode.high-vis`, which is always one class more specific
   than its dark twin and therefore always wins.

   The goal is maximum legibility at a glance from across a room: pure
   black/white grounds, ~2px borders on every box, near-white / near-black
   text instead of the muted greys, larger secondary type, and saturated
   state colours. Add-on stylesheets that consume the theme tokens below get
   most of this for free.  */

/* ── Tokens (also picked up by add-on stylesheets) ── */
.high-vis {
  --bg-input:   #101010;
  --bg-modal:   #0a0a0a;
  --text:       #ffffff;
  --text-muted: #d5d5d5;
  --border:     #8a8a8a;
  --accent:     #4da3ff;
  --danger:     #ff6b6b;
}
/* `.light-mode .high-vis` covers <body> (which carries .high-vis but not
   .light-mode until the theme is toggled at runtime); `.light-mode.high-vis`
   covers <html>, where the head loader puts both. Without the first selector
   <body> re-declares the dark tokens and every token-driven element — modals,
   What's New, add-on panels — goes white-on-white in light + high visibility. */
.light-mode .high-vis,
.light-mode.high-vis {
  --bg-input:   #ffffff;
  --bg-modal:   #ffffff;
  --text:       #000000;
  --text-muted: #333333;
  --border:     #4a4a4a;
  --accent:     #0a5fa8;
  --danger:     #a5241a;
}

/* ── Page ground ── */
html.high-vis,
.high-vis body {
  background: #000;
  color: #fff;
}
.light-mode.high-vis,
.light-mode.high-vis body {
  background: #fff;
  color: #000;
}

.high-vis ::selection            { background: #ffd54f; color: #000; }
.light-mode.high-vis ::selection { background: #0a5fa8; color: #fff; }

/* Keyboard focus is otherwise invisible — several controls set outline:none. */
.high-vis *:focus-visible {
  outline: 3px solid #ffd54f !important;
  outline-offset: 2px;
}
.light-mode.high-vis *:focus-visible {
  outline: 3px solid #0a4f8a !important;
}

.high-vis            { scrollbar-color: #999 #1a1a1a; }
.light-mode.high-vis { scrollbar-color: #555 #dcdcdc; }
.high-vis .quick-play-panel,
.high-vis .queue-bar                     { scrollbar-color: #999 #1a1a1a; }
.light-mode.high-vis .quick-play-panel,
.light-mode.high-vis .queue-bar          { scrollbar-color: #555 #dcdcdc; }

/* ── Topbar ── */
.high-vis .topbar {
  background: #000;
  border-bottom: 2px solid #8a8a8a;
}
.light-mode.high-vis .topbar {
  background: #fff;
  border-bottom: 2px solid #333;
}

.high-vis .topbar-btn {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  border-color: #6a6a6a;
}
.high-vis .topbar-btn:hover,
.high-vis .topbar-btn.active {
  background: #2e2e2e;
  border-color: #fff;
  color: #fff;
}
.light-mode.high-vis .topbar-btn {
  color: #000;
  border-color: #777;
}
.light-mode.high-vis .topbar-btn:hover,
.light-mode.high-vis .topbar-btn.active {
  background: #d8d8d8;
  border-color: #000;
  color: #000;
}

.high-vis .session-btn.session-on {
  background: #5a0d0d;
  border-color: #ff5d52;
  color: #ffd7d4;
}
.high-vis .session-btn.session-on:hover {
  background: #7a1212;
  border-color: #ff8a80;
  color: #fff;
}
.high-vis .session-btn.session-on::before {
  width: 9px;
  height: 9px;
  background: #ff2d1f;
  box-shadow: 0 0 8px rgba(255, 45, 31, 0.95);
}
.light-mode.high-vis .session-btn.session-on {
  background: #ffdedb;
  border-color: #a5241a;
  color: #7a0e05;
}
.light-mode.high-vis .session-btn.session-on:hover {
  background: #ffcbc6;
  border-color: #7a0e05;
  color: #5c0a03;
}

/* ── Settings dropdown ── */
.high-vis .topbar-dropdown {
  background: #000;
  border: 2px solid #8a8a8a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.95);
}
.high-vis .topbar-dropdown li {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}
.high-vis .topbar-dropdown li:hover { background: #3a3a3a; color: #fff; }

.light-mode.high-vis .topbar-dropdown {
  background: #fff;
  border: 2px solid #333;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.light-mode.high-vis .topbar-dropdown li      { color: #000; }
.light-mode.high-vis .topbar-dropdown li:hover { background: #cfcfcf; color: #000; }

.high-vis .topbar-dropdown .dropdown-separator,
.high-vis .topbar-dropdown .dropdown-separator:hover {
  background: #8a8a8a !important;
  height: 2px;
}
.light-mode.high-vis .topbar-dropdown .dropdown-separator,
.light-mode.high-vis .topbar-dropdown .dropdown-separator:hover {
  background: #333 !important;
}

.high-vis .topbar-dropdown .dropdown-section-label,
.high-vis .topbar-dropdown .dropdown-section-label:hover {
  color: #e8e8e8 !important;
  font-size: 0.68rem;
}
.light-mode.high-vis .topbar-dropdown .dropdown-section-label,
.light-mode.high-vis .topbar-dropdown .dropdown-section-label:hover {
  color: #222 !important;
}

/* ── Quick Play panel ── */
.high-vis .quick-play-panel {
  background: #000;
  border: 2px solid #8a8a8a;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.95);
}
.high-vis .qp-item        { color: #fff; font-size: 0.9rem; font-weight: 600; }
.high-vis .qp-item:hover  { background: #3a3a3a; color: #fff; }
.high-vis .qp-item.playing { color: #00ff85; background: #04331b; }
.high-vis .qp-item.playing::before {
  width: 8px;
  height: 8px;
  background: #00ff85;
  box-shadow: 0 0 6px rgba(0, 255, 133, 0.9);
}
.high-vis .qp-empty { color: #d5d5d5; font-size: 0.86rem; }

.light-mode.high-vis .quick-play-panel {
  background: #fff;
  border: 2px solid #333;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}
.light-mode.high-vis .qp-item         { color: #000; }
.light-mode.high-vis .qp-item:hover   { background: #cfcfcf; color: #000; }
.light-mode.high-vis .qp-item.playing { color: #043d18; background: #b9f0c8; }
.light-mode.high-vis .qp-item.playing::before { background: #0a7a34; box-shadow: none; }
.light-mode.high-vis .qp-empty        { color: #333; }

/* ── Toolbar / now playing / volume ── */
.high-vis .toolbar {
  background: #0a0a0a;
  border-bottom: 3px solid #8a8a8a;
}
.light-mode.high-vis .toolbar {
  background: #f0f0f0;
  border-bottom: 3px solid #333;
}

.high-vis .now-playing,
.high-vis .volume-strip {
  background: #000;
  border: 2px solid #8a8a8a;
}
.light-mode.high-vis .now-playing,
.light-mode.high-vis .volume-strip {
  background: #fff;
  border: 2px solid #333;
}

.high-vis .np-track                { color: #fff; font-weight: 800; }
.high-vis .np-time                 { font-size: 2.6rem; }
.high-vis .np-time.np-idle         { color: #b0b0b0; }
.high-vis .np-time.np-paused       { color: #ffb020; }
.high-vis .np-time.np-playing      { color: #00ff85; }
.light-mode.high-vis .np-track          { color: #000; }
.light-mode.high-vis .np-time.np-idle   { color: #4a4a4a; }
.light-mode.high-vis .np-time.np-paused { color: #6b3800; }
.light-mode.high-vis .np-time.np-playing { color: #046e2f; }

.high-vis .offline-notice {
  background: #4a3800;
  border: 2px solid #ffc837;
  color: #ffd75e;
  font-size: 0.76rem;
  font-weight: 700;
}
.light-mode.high-vis .offline-notice {
  background: #fff2c9;
  border: 2px solid #7a5a00;
  color: #4a3600;
}

.high-vis .intercom-live {
  background: #4a0e08;
  border: 2px solid #ff5a45;
  color: #ff9c8c;
  font-size: 0.76rem;
  font-weight: 700;
}
.light-mode.high-vis .intercom-live {
  background: #ffe3de;
  border: 2px solid #8f1d10;
  color: #6e150b;
}

.high-vis .volume-value            { color: #fff; font-size: 0.8rem; font-weight: 700; }
.high-vis .volume-label            { color: #fff; font-size: 0.7rem; }
.light-mode.high-vis .volume-value { color: #000; }
.light-mode.high-vis .volume-label { color: #000; }

.high-vis .volume-slider            { width: 30px; accent-color: #4da3ff; }
.light-mode.high-vis .volume-slider { accent-color: #0a5fa8; }

/* ── Transport buttons ── */
.high-vis .tb-btn {
  font-size: 1rem;
  font-weight: 900;
  border: 2px solid;
}
.high-vis .tb-btn:disabled            { opacity: 0.55; }
.light-mode.high-vis .tb-btn:disabled { opacity: 0.7; }

.high-vis .tb-stop    { background: #e02010; border-color: #ff9a92; color: #fff; }
.high-vis .tb-fadeout { background: #a01810; border-color: #ff9a92; color: #ffe0dd; }
.high-vis .tb-pause   { background: #e07b00; border-color: #ffd08a; color: #000; }

.light-mode.high-vis .tb-stop    { background: #c81a0c; border-color: #5c0a03; color: #fff; }
.light-mode.high-vis .tb-fadeout { background: #7a1208; border-color: #3a0703; color: #fff; }
.light-mode.high-vis .tb-pause   { background: #a85400; border-color: #4a2400; color: #fff; }

/* ── Deck bar ── */
.high-vis .deck-bar {
  background: #0a0a0a;
  border-bottom: 3px solid #8a8a8a;
}
.light-mode.high-vis .deck-bar {
  background: #eaeaea;
  border-bottom: 3px solid #333;
}

.high-vis .deck-select {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  border-bottom: 4px solid #4da3ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.high-vis .deck-select option { background: #000; color: #fff; }

.light-mode.high-vis .deck-select {
  color: #000;
  border-bottom-color: #0a5fa8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.light-mode.high-vis .deck-select option { background: #fff; color: #000; }

.high-vis .deck-side-btn {
  background: #0d2740;
  border: 2px solid #4da3ff;
  color: #b8e0ff;
}
.high-vis .deck-side-btn:hover { background: #17456f; border-color: #9fd4ff; color: #fff; }
.light-mode.high-vis .deck-side-btn {
  background: #d6e9fa;
  border: 2px solid #0a5fa8;
  color: #043a6a;
}
.light-mode.high-vis .deck-side-btn:hover { background: #b8d9f5; border-color: #043a6a; color: #000; }

.high-vis .lock-btn                     { border: 2px solid #8a8a8a; color: #e8e8e8; }
.high-vis .lock-btn:hover               { border-color: #fff; color: #fff; }
.high-vis .lock-btn.unlocked            { border-color: #ffa726; color: #ffa726; }
.high-vis .lock-btn.unlocked:hover      { border-color: #ffc837; color: #ffc837; }
.light-mode.high-vis .lock-btn          { border: 2px solid #4a4a4a; color: #1a1a1a; }
.light-mode.high-vis .lock-btn:hover    { border-color: #000; color: #000; }
.light-mode.high-vis .lock-btn.unlocked { border-color: #a35a00; color: #a35a00; }

/* ── Board and pads ─────────────────────────────────────────────────────────
   Empty pads go dashed and assigned pads go solid + brighter, so "is anything
   on this button" reads instantly from a distance. */
.high-vis .board-area            { background: #000; }
.light-mode.high-vis .board-area { background: #fff; }

.high-vis .cell {
  background: #0a0a0a;
  border: 2px dashed #6a6a6a;
}
.high-vis .cell:hover  { background: #1f1f1f; border-color: #b0b0b0; }
.high-vis .cell:active { background: #303030; }

.high-vis .cell.assigned {
  background: linear-gradient(to bottom, #3a3a3a 0%, #1e1e1e 100%);
  border: 2px solid #c8c8c8;
}
.high-vis .cell.assigned:hover {
  background: linear-gradient(to bottom, #4c4c4c 0%, #2c2c2c 100%);
  border-color: #fff;
}

.high-vis .cell.playing {
  background: linear-gradient(to bottom, #0a5c2c 0%, #04331b 100%);
  border: 2px solid #00ff85;
  box-shadow: inset 0 0 0 2px #00ff85, 0 0 16px rgba(0, 255, 133, 0.55);
}
.high-vis .cell.playing:hover {
  background: linear-gradient(to bottom, #0d7038 0%, #064023 100%);
}

.high-vis .cell.fading {
  background: linear-gradient(to bottom, #6b4300 0%, #3a2600 100%);
  border: 2px solid #ffb020;
  box-shadow: inset 0 0 0 2px #ffb020, 0 0 16px rgba(255, 176, 32, 0.45);
}

.high-vis .cell-name       { color: #fff; }
.high-vis .cell-companion  { color: #d5d5d5; font-size: 0.64rem; font-weight: 700; }
/* The track length is corner-anchored and absolutely positioned, so
   fitCellName() ignores it — it can grow without shrinking the pad name.
   Once pads drop under ~50px the centred name reaches the corner and the two
   collide (this predates high visibility mode and happens at the base size
   too), so the badge gets its own backing plate: where it lands on the name it
   reads as a chip instead of a smear. Padding on an absolutely-positioned box
   shifts nothing else. */
.high-vis .cell-time {
  color: #d5d5d5;
  font-size: 0.86rem;
  font-weight: 800;
  bottom: 3px;
  right: 4px;
  padding: 0 3px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.72);
}
/* A full-size badge would swamp a pad on a crowded board. */
.high-vis .board.dense .cell-time { font-size: 0.68rem; bottom: 2px; right: 3px; }
.high-vis .cell-empty-hint { color: #a8a8a8; font-style: normal; font-weight: 600; font-size: 0.68rem; }

.high-vis .cell.playing .cell-name      { color: #7dffb8; }
.high-vis .cell.playing .cell-companion { color: #00ff85; }
.high-vis .cell.playing .cell-time      { color: #00ff85; }
.high-vis .cell.fading  .cell-name      { color: #ffcf70; }
.high-vis .cell.fading  .cell-companion { color: #ffb020; }
.high-vis .cell.fading  .cell-time      { color: #ffb020; }

.high-vis .cell.session-played::after {
  color: #00ff85;
  font-size: 0.8rem;
  font-weight: 900;
}
.high-vis .cell.playing.session-played::after { color: #ffffff; }
.high-vis .board.tight .cell.session-played::after { font-size: 0.62rem; }

.light-mode.high-vis .cell {
  background: #fff;
  border: 2px dashed #999;
}
.light-mode.high-vis .cell:hover  { background: #ececec; border-color: #444; }
.light-mode.high-vis .cell:active { background: #d8d8d8; }

.light-mode.high-vis .cell.assigned {
  background: linear-gradient(to bottom, #ffffff 0%, #dcdcdc 100%);
  border: 2px solid #222;
}
.light-mode.high-vis .cell.assigned:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #cacaca 100%);
  border-color: #000;
}

.light-mode.high-vis .cell.playing {
  background: linear-gradient(to bottom, #cdf7d8 0%, #9fe8b4 100%);
  border: 2px solid #0a7a34;
  box-shadow: inset 0 0 0 2px #0a7a34, 0 0 14px rgba(10, 122, 52, 0.45);
}
.light-mode.high-vis .cell.playing:hover {
  background: linear-gradient(to bottom, #bdf2cb 0%, #8ee0a5 100%);
}

.light-mode.high-vis .cell.fading {
  background: linear-gradient(to bottom, #ffeec2 0%, #ffd98a 100%);
  border: 2px solid #8a4a00;
  box-shadow: inset 0 0 0 2px #8a4a00, 0 0 14px rgba(138, 74, 0, 0.35);
}

.light-mode.high-vis .cell-name       { color: #000; }
.light-mode.high-vis .cell-companion  { color: #333; }
.light-mode.high-vis .cell-time       { color: #333; background: rgba(255, 255, 255, 0.85); }
.light-mode.high-vis .cell-empty-hint { color: #5a5a5a; }

.light-mode.high-vis .cell.playing .cell-name      { color: #043d18; }
.light-mode.high-vis .cell.playing .cell-companion { color: #0a5c26; }
.light-mode.high-vis .cell.playing .cell-time      { color: #0a5c26; }
.light-mode.high-vis .cell.fading  .cell-name      { color: #3a1f00; }
.light-mode.high-vis .cell.fading  .cell-companion { color: #6b3800; }
.light-mode.high-vis .cell.fading  .cell-time      { color: #6b3800; }

.light-mode.high-vis .cell.session-played::after         { color: #0a7a34; }
.light-mode.high-vis .cell.playing.session-played::after { color: #043d18; }

.high-vis .cell.drag-over { box-shadow: inset 0 0 0 4px #4da3ff !important; }
.light-mode.high-vis .cell.drag-over { box-shadow: inset 0 0 0 4px #0a5fa8 !important; }

/* Played-red preference, cranked. `.played-red` lives on <body> and
   `.high-vis` on <html>, so these stay descendant selectors. */
.high-vis .played-red .cell.session-played:not(.playing):not(.fading) {
  background: linear-gradient(to bottom, #8a1410 0%, #4a0a08 100%);
  border: 2px solid #ff5d52;
}
.high-vis .played-red .cell.session-played:not(.playing):not(.fading):hover {
  background: linear-gradient(to bottom, #a81a15 0%, #5e0d0a 100%);
  border-color: #ff9a92;
}
.high-vis .played-red .cell.session-played:not(.playing):not(.fading)::after      { color: #fff; }
.high-vis .played-red .cell.session-played:not(.playing):not(.fading) .cell-name  { color: #ffd7d4; }

.light-mode.high-vis .played-red .cell.session-played:not(.playing):not(.fading) {
  background: linear-gradient(to bottom, #ffd9d5 0%, #ffb3ac 100%);
  border: 2px solid #a5241a;
}
.light-mode.high-vis .played-red .cell.session-played:not(.playing):not(.fading):hover {
  background: linear-gradient(to bottom, #ffc9c3 0%, #ffa199 100%);
  border-color: #7a0e05;
}
.light-mode.high-vis .played-red .cell.session-played:not(.playing):not(.fading)::after     { color: #7a0e05; }
.light-mode.high-vis .played-red .cell.session-played:not(.playing):not(.fading) .cell-name { color: #5c0a03; }

/* ── Modals (shared) ── */
.high-vis .modal-backdrop            { background: rgba(0, 0, 0, 0.85); }
.light-mode.high-vis .modal-backdrop { background: rgba(0, 0, 0, 0.5); }

.high-vis .modal {
  background: #0a0a0a;
  border: 2px solid #8a8a8a;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.95);
}
.light-mode.high-vis .modal {
  background: #fff;
  border: 2px solid #333;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.4);
}

.high-vis .modal-title            { color: #fff; font-size: 1.15rem; font-weight: 800; }
.light-mode.high-vis .modal-title { color: #000; }

.high-vis .form-group label            { color: #fff; font-size: 0.8rem; font-weight: 800; }
.light-mode.high-vis .form-group label { color: #000; }

.high-vis .form-group input[type="text"],
.high-vis .form-group select {
  background-color: #101010;
  border: 2px solid #8a8a8a;
  color: #fff;
  font-size: 0.95rem;
}
.high-vis .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.high-vis .form-group select option { background: #101010; color: #fff; }
.high-vis .form-group input[type="text"]:focus,
.high-vis .form-group select:focus   { border-color: #4da3ff; }
.high-vis .form-group input[type="text"].invalid { border-color: #ff5d52; }
.high-vis .form-group input::placeholder { color: #9a9a9a; }

.light-mode.high-vis .form-group input[type="text"],
.light-mode.high-vis .form-group select {
  background-color: #fff;
  border: 2px solid #4a4a4a;
  color: #000;
}
.light-mode.high-vis .form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.light-mode.high-vis .form-group select option { background: #fff; color: #000; }
.light-mode.high-vis .form-group input[type="text"]:focus,
.light-mode.high-vis .form-group select:focus   { border-color: #0a5fa8; }
.light-mode.high-vis .form-group input[type="text"].invalid { border-color: #a5241a; }
.light-mode.high-vis .form-group input::placeholder { color: #5a5a5a; }

.high-vis .checkbox-label            { color: #fff; font-size: 0.95rem; font-weight: 600; }
.light-mode.high-vis .checkbox-label { color: #000; }
.high-vis .checkbox-label input[type="checkbox"] {
  width: 19px;
  height: 19px;
  accent-color: #4da3ff;
}
.light-mode.high-vis .checkbox-label input[type="checkbox"] { accent-color: #0a5fa8; }

.high-vis .field-hint                   { color: #cfcfcf; font-size: 0.78rem; }
.high-vis .field-hint strong            { color: #fff; }
.light-mode.high-vis .field-hint        { color: #333; }
.light-mode.high-vis .field-hint strong { color: #000; }

.high-vis .prefs-section-title            { color: #fff; font-size: 0.78rem; font-weight: 800; }
.light-mode.high-vis .prefs-section-title { color: #000; }

.high-vis .file-name                   { color: #d5d5d5; font-size: 0.86rem; font-weight: 600; }
.high-vis .file-name.has-file          { color: #6ec1ff; }
.high-vis .file-btn                    { background: #1a1a1a; border: 2px solid #8a8a8a; color: #fff; font-size: 0.86rem; }
.high-vis .file-btn:hover              { background: #333; border-color: #fff; color: #fff; }
.light-mode.high-vis .file-name        { color: #333; }
.light-mode.high-vis .file-name.has-file { color: #0a4f8a; }
.light-mode.high-vis .file-btn         { background: #ececec; border: 2px solid #4a4a4a; color: #000; }
.light-mode.high-vis .file-btn:hover   { background: #dcdcdc; border-color: #000; color: #000; }

.high-vis .modal-note {
  border-left-width: 5px;
  border-left-color: #ffb020;
  background: rgba(255, 176, 32, 0.16);
  font-size: 0.82rem;
}
.light-mode.high-vis .modal-note {
  border-left-color: #8a4a00;
  background: rgba(138, 74, 0, 0.12);
}

/* ── Action buttons ── */
.high-vis .btn-primary,
.high-vis .btn-secondary,
.high-vis .btn-danger {
  font-size: 0.92rem;
  font-weight: 800;
  border: 2px solid;
}
.high-vis .btn-primary        { background: #1a6fc4; border-color: #9fd4ff; color: #fff; }
.high-vis .btn-primary:hover  { background: #2a86e0; border-color: #fff; }
.high-vis .btn-secondary      { background: #1a1a1a; border-color: #b0b0b0; color: #fff; }
.high-vis .btn-secondary:hover{ background: #333; border-color: #fff; color: #fff; }
.high-vis .btn-danger         { background: #a81a15; border-color: #ff9a92; color: #fff; }
.high-vis .btn-danger:hover   { background: #c62018; border-color: #ffd7d4; }

.light-mode.high-vis .btn-primary         { background: #0a5fa8; border-color: #043a6a; color: #fff; }
.light-mode.high-vis .btn-primary:hover   { background: #084d8a; border-color: #022a4e; }
.light-mode.high-vis .btn-secondary       { background: #ececec; border-color: #333; color: #000; }
.light-mode.high-vis .btn-secondary:hover { background: #d8d8d8; border-color: #000; color: #000; }
.light-mode.high-vis .btn-danger          { background: #a5241a; border-color: #5c0a03; color: #fff; }
.light-mode.high-vis .btn-danger:hover    { background: #8a1a12; border-color: #3a0703; }

/* ── Toggle switch (shared chrome, used by add-on panels) ── */
.high-vis .toggle-switch                { width: 42px; height: 24px; }
.high-vis .toggle-slider                { background: #333; border: 2px solid #b0b0b0; }
.high-vis .toggle-slider::before        { height: 16px; width: 16px; background: #fff; }
.high-vis .toggle-switch input:checked + .toggle-slider          { background: #1a6fc4; border-color: #9fd4ff; }
.high-vis .toggle-switch input:checked + .toggle-slider::before  { transform: translateX(18px); background: #fff; }
.light-mode.high-vis .toggle-slider     { background: #b0b0b0; border-color: #333; }
.light-mode.high-vis .toggle-slider::before { background: #fff; }
.light-mode.high-vis .toggle-switch input:checked + .toggle-slider { background: #0a5fa8; border-color: #043a6a; }

.high-vis .menu-toggle-item             { border-top: 2px solid #8a8a8a; }
.high-vis .menu-toggle-item:hover       { color: #fff !important; }
.light-mode.high-vis .menu-toggle-item  { border-top-color: #333; }
.light-mode.high-vis .menu-toggle-item:hover { color: #000 !important; }

/* ── Decks modal ── */
.high-vis .deck-config-row--category { background: #0d2a14; border-color: #2e6b3d; }
.high-vis .deck-config-row--deck     { background: #101a33; border-color: #2e4a8a; }
.high-vis .deck-row-handle           { color: #cfcfcf; font-size: 1.15rem; }
.high-vis .deck-row-handle:hover     { color: #fff; }
.high-vis .deck-row-badge            { font-size: 0.64rem; }
.high-vis .deck-row-badge--category  { background: #0d2a14; color: #7dffb8; border: 2px solid #00ff85; }
.high-vis .deck-row-badge--deck      { background: #101a33; color: #b8e0ff; border: 2px solid #4da3ff; }
.high-vis .deck-row-input,
.high-vis .deck-row-size input       { background: #101010; border: 2px solid #8a8a8a; color: #fff; font-size: 0.9rem; }
.high-vis .deck-row-input:focus,
.high-vis .deck-row-size input:focus { border-color: #4da3ff; }
.high-vis .deck-row-size-x           { color: #fff; font-weight: 700; }
.high-vis .deck-row-remove           { border: 2px solid #8a8a8a; color: #e8e8e8; }
.high-vis .deck-row-remove:hover     { border-color: #ff5d52; color: #fff; background: #5a0d0d; }
.high-vis .decks-add-btn             { border: 2px dashed #8a8a8a; color: #e8e8e8; font-size: 0.88rem; font-weight: 700; }
.high-vis .decks-add-btn:hover       { border-color: #4da3ff; color: #b8e0ff; }
.high-vis .deck-config-row.drag-over-top    { border-top-color: #4da3ff; }
.high-vis .deck-config-row.drag-over-bottom { border-bottom-color: #4da3ff; }

.light-mode.high-vis .deck-config-row--category { background: #dcf2e0; border-color: #0a7a34; }
.light-mode.high-vis .deck-config-row--deck     { background: #dbe7f8; border-color: #0a5fa8; }
.light-mode.high-vis .deck-row-handle           { color: #333; }
.light-mode.high-vis .deck-row-handle:hover     { color: #000; }
.light-mode.high-vis .deck-row-badge--category  { background: #c4ecce; color: #04381a; border: 2px solid #0a7a34; }
.light-mode.high-vis .deck-row-badge--deck      { background: #cadff5; color: #043a6a; border: 2px solid #0a5fa8; }
.light-mode.high-vis .deck-row-input,
.light-mode.high-vis .deck-row-size input       { background: #fff; border: 2px solid #4a4a4a; color: #000; }
.light-mode.high-vis .deck-row-input:focus,
.light-mode.high-vis .deck-row-size input:focus { border-color: #0a5fa8; }
.light-mode.high-vis .deck-row-size-x           { color: #000; }
.light-mode.high-vis .deck-row-remove           { border: 2px solid #4a4a4a; color: #1a1a1a; }
.light-mode.high-vis .deck-row-remove:hover     { border-color: #a5241a; color: #7a0e05; background: #ffdedb; }
.light-mode.high-vis .decks-add-btn             { border: 2px dashed #4a4a4a; color: #1a1a1a; }
.light-mode.high-vis .decks-add-btn:hover       { border-color: #0a5fa8; color: #0a4f8a; }

/* ── Media library modal ── */
.high-vis .media-header      { color: #fff; font-size: 0.78rem; font-weight: 800; }
.high-vis .media-name-input  { background: #101010; border: 2px solid #8a8a8a; color: #fff; font-size: 0.92rem; }
.high-vis .media-name-input:focus { border-color: #4da3ff; }
.high-vis .media-file-name   { color: #cfcfcf; font-size: 0.82rem; }
.high-vis .media-delete-btn  { border: 2px solid #8a8a8a; color: #e8e8e8; }
.high-vis .media-delete-btn:hover { border-color: #ff5d52; color: #fff; background: #5a0d0d; }
.high-vis .media-add-btn     { border: 2px dashed #8a8a8a; color: #e8e8e8; font-size: 0.9rem; font-weight: 700; }
.high-vis .media-add-btn:hover { border-color: #4da3ff; color: #b8e0ff; }
.high-vis .media-empty       { color: #cfcfcf; font-size: 0.9rem; }

.light-mode.high-vis .media-header     { color: #000; }
.light-mode.high-vis .media-name-input { background: #fff; border: 2px solid #4a4a4a; color: #000; }
.light-mode.high-vis .media-name-input:focus { border-color: #0a5fa8; }
.light-mode.high-vis .media-file-name  { color: #333; }
.light-mode.high-vis .media-delete-btn { border: 2px solid #4a4a4a; color: #1a1a1a; }
.light-mode.high-vis .media-delete-btn:hover { border-color: #a5241a; color: #7a0e05; background: #ffdedb; }
.light-mode.high-vis .media-add-btn    { border: 2px dashed #4a4a4a; color: #1a1a1a; }
.light-mode.high-vis .media-add-btn:hover { border-color: #0a5fa8; color: #0a4f8a; }
.light-mode.high-vis .media-empty      { color: #333; }

/* ── Companion status-variable list ── */
.high-vis .cv-var-list          { background: #101010; border: 2px solid #8a8a8a; }
.high-vis .cv-var + .cv-var     { border-top-color: #6a6a6a; }
.high-vis .cv-var code          { color: #6ec1ff; font-size: 0.76rem; font-weight: 700; }
.high-vis .cv-var span          { color: #d5d5d5; font-size: 0.76rem; }
.light-mode.high-vis .cv-var-list      { background: #fff; border: 2px solid #4a4a4a; }
.light-mode.high-vis .cv-var + .cv-var { border-top-color: #999; }
.light-mode.high-vis .cv-var code      { color: #0a4f8a; }
.light-mode.high-vis .cv-var span      { color: #333; }

/* ── Queue bar ── */
.high-vis .queue-bar {
  background: #000;
  border-bottom: 2px solid #8a8a8a;
}
.high-vis .queue-bar-label { color: #fff; font-size: 0.72rem; font-weight: 800; }
.high-vis .queue-chip {
  background: #0d2740;
  border: 2px solid #4da3ff;
  color: #cfe9ff;
  font-size: 0.8rem;
  font-weight: 600;
}
.high-vis .queue-chip-remove        { color: #9fd4ff; font-size: 1.15rem; }
.high-vis .queue-chip-remove:hover  { color: #ff9a92; }
.high-vis .queue-play-btn {
  width: 28px;
  height: 28px;
  background: #0a5c2c;
  border: 2px solid #00ff85;
  color: #7dffb8;
}
.high-vis .queue-play-btn:hover { background: #0d7038; border-color: #7dffb8; color: #fff; }

.light-mode.high-vis .queue-bar {
  background: #f0f0f0;
  border-bottom: 2px solid #333;
}
.light-mode.high-vis .queue-bar-label { color: #000; }
.light-mode.high-vis .queue-chip {
  background: #dbe7f8;
  border: 2px solid #0a5fa8;
  color: #043a6a;
}
.light-mode.high-vis .queue-chip-remove       { color: #0a5fa8; }
.light-mode.high-vis .queue-chip-remove:hover { color: #a5241a; }
.light-mode.high-vis .queue-play-btn {
  background: #b9f0c8;
  border: 2px solid #0a7a34;
  color: #043d18;
}
.light-mode.high-vis .queue-play-btn:hover { background: #9fe8b4; border-color: #043d18; }

/* ── Cell context menu ── */
.high-vis .cell-context-menu {
  background: #000;
  border: 2px solid #8a8a8a;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.95);
}
.high-vis .ccm-item              { color: #fff; font-size: 0.9rem; font-weight: 600; }
.high-vis .ccm-item:hover        { background: #3a3a3a; color: #fff; }
.high-vis .ccm-item-danger       { color: #ff9a92; }
.high-vis .ccm-item-danger:hover { background: #5a0d0d; color: #fff; }

.light-mode.high-vis .cell-context-menu {
  background: #fff;
  border: 2px solid #333;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.light-mode.high-vis .ccm-item              { color: #000; }
.light-mode.high-vis .ccm-item:hover        { background: #cfcfcf; color: #000; }
.light-mode.high-vis .ccm-item-danger       { color: #a5241a; }
.light-mode.high-vis .ccm-item-danger:hover { background: #ffdedb; color: #7a0e05; }

/* ── Toasts and progress ── */
.high-vis .toast          { font-size: 0.9rem; font-weight: 600; }
.high-vis .toast--error   { background: #5a0d0d; border: 2px solid #ff5d52; color: #ffd7d4; }
.high-vis .toast--update  { background: #062036; border: 2px solid #4da3ff; color: #cfe9ff; }
.high-vis .toast-update-btn { background: #1a6fc4; border: 2px solid #9fd4ff; color: #fff; font-weight: 800; }
.high-vis .toast-update-btn:hover { background: #2a86e0; }

.light-mode.high-vis .toast--error  { background: #ffdedb; border: 2px solid #a5241a; color: #5c0a03; }
.light-mode.high-vis .toast--update { background: #dbe7f8; border: 2px solid #0a5fa8; color: #043a6a; }
.light-mode.high-vis .toast-update-btn { background: #0a5fa8; border: 2px solid #043a6a; color: #fff; }

.high-vis .export-progress-popup { background: rgba(0, 0, 0, 0.85); }
.high-vis .export-progress-card  { border-width: 2px; font-weight: 700; }
.high-vis .export-progress-spinner { border-width: 3px; border-top-color: #00ff85; }
.light-mode.high-vis .export-progress-popup { background: rgba(0, 0, 0, 0.5); }
.light-mode.high-vis .export-progress-spinner { border-top-color: #046e2f; }

/* ── Add-ons modal ── */
.high-vis .addon-add-row input,
.high-vis .addon-select      { border-width: 2px; font-size: 0.9rem; }
.high-vis .addon-item        { border-width: 2px; background: #141414; }
.high-vis .addon-name        { font-size: 0.98rem; font-weight: 800; }
.high-vis .addon-desc        { font-size: 0.84rem; }
.high-vis .addon-code-badge  { border-width: 2px; font-size: 0.74rem; color: #fff; }
.high-vis .addon-remove-btn  { border-width: 2px; font-weight: 700; }
.high-vis .addons-empty      { font-size: 0.9rem; }
.light-mode.high-vis .addon-item { background: #f2f2f2; }

/* ── What's New ── */
.high-vis .wn-version     { font-size: 1.15rem; font-weight: 800; }
.high-vis .wn-date        { font-size: 0.84rem; }
.high-vis .wn-current     { font-size: 0.86rem; }
.high-vis .wn-release     { border-bottom-width: 2px; }
.high-vis .wn-list li     { font-size: 0.92rem; }
.high-vis .wn-tag         { font-size: 0.74rem; border: 2px solid currentColor; }
.high-vis .wn-added       { background: rgba(0, 255, 133, 0.16);  color: #00ff85; }
.high-vis .wn-improved    { background: rgba(77, 163, 255, 0.18); color: #6ec1ff; }
.high-vis .wn-fixed       { background: rgba(255, 176, 32, 0.18); color: #ffb020; }
.light-mode.high-vis .wn-added    { background: rgba(10, 122, 52, 0.14); color: #06531f; }
.light-mode.high-vis .wn-improved { background: rgba(10, 95, 168, 0.14); color: #043a6a; }
.light-mode.high-vis .wn-fixed    { background: rgba(138, 74, 0, 0.14);  color: #6b3800; }

/* ── Remote / WebRTC bits ── */
.high-vis .wo-status,
.high-vis .rc-qr-caption            { font-size: 0.86rem; font-weight: 600; }
.high-vis .rc-qr canvas             { outline: 3px solid #fff; outline-offset: 0; }
.light-mode.high-vis .rc-qr canvas  { outline-color: #000; }