/* ============================================================
   EZ Worship — operator UI
   EasyWorship-style: light gray, boxed components, square corners,
   segoe UI chrome, source serif for projected text.
   ============================================================ */

:root {
  --bg:        #e9ebee;       /* window chrome */
  --bg-2:      #f1f3f6;
  --panel:     #ffffff;
  --panel-2:   #fafbfc;
  --panel-3:   #f5f6f8;

  --ink:       #202428;
  --ink-2:     #3d444c;
  --ink-3:     #6b7380;
  --ink-4:     #9199a3;

  --border:    #cfd4dc;
  --border-2:  #dde1e8;
  --border-3:  #e6e9ee;

  --menubar:   #2f3842;
  --menubar-ink: #e9ebef;
  --menubar-ink-dim: #9aa4b0;

  --blue:      #1f7ac9;
  --blue-h:    #2688dc;
  --blue-d:    #155999;
  --blue-soft: #dfebf6;
  --blue-ink:  #0d3f6e;

  --preview:   #3a9ad9;
  --red:       #e84545;
  --red-h:     #f55858;
  --red-d:     #b82d2d;
  --red-soft:  #fbe4e4;
  --green:     #2fa56d;
  --amber:     #d98324;

  --radius:    3px;
  --radius-sm: 2px;

  --shadow-1:  0 1px 2px rgba(20,30,50,0.08);
  --shadow-2:  0 4px 18px rgba(20,30,50,0.18);
  --shadow-menu: 0 8px 24px rgba(20,30,50,0.20);

  --sans:  'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono:  ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
}

button { font-family: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; color: inherit; }

.flex { flex: 1; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-4); }

/* =============================================================
   Body layout — vertical stack of fixed-height chrome rows
   ============================================================= */

body {
  display: flex;
  flex-direction: column;
}

/* -------- Menu bar (28px, dark) -------- */

.menubar {
  height: 28px;
  background: var(--menubar);
  color: var(--menubar-ink);
  display: flex;
  align-items: stretch;
  padding: 0 6px;
  font-size: 12px;
  flex: 0 0 auto;
  user-select: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px 0 4px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.brand-mark {
  width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--blue) 0%, #134a7d 100%);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.brand-name {
  font-weight: 600;
  color: var(--menubar-ink);
  letter-spacing: 0.02em;
}

.menu { display: flex; align-items: center; }
.kb-modal { padding: 4px 0; gap: 8px 14px; }
.menu-item {
  background: transparent;
  border: 0;
  padding: 0 11px;
  color: var(--menubar-ink);
  font-size: 12px;
  cursor: pointer;
}
.menu-item:hover { background: rgba(255,255,255,0.08); }
.menu-item.open  { background: var(--panel); color: var(--ink); }

.menu-right {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 9px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  font-family: var(--sans);
}
.pill .dot {
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
  display: inline-block;
}
.pill-mute { background: rgba(255,255,255,0.06); color: var(--menubar-ink-dim); }
.pill-ok   { background: rgba(47,165,109,0.16); color: #69d79c; }
.pill-live { background: rgba(232,69,69,0.18); color: #ff8a8a; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(232,69,69,0.6); } 50% { box-shadow: 0 0 0 6px rgba(232,69,69,0); } }

/* -------- Menu dropdowns -------- */

.menu-dropdown {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-menu);
  min-width: 220px;
  padding: 4px 0;
  z-index: 250;
}
.menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 14px 7px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 12.5px;
  color: var(--ink);
}
.menu-dropdown button:hover { background: var(--blue); color: #fff; }
.menu-dropdown .sep { height: 1px; margin: 4px 0; background: var(--border-2); }
.menu-dropdown .shortcut { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.menu-dropdown button:hover .shortcut { color: rgba(255,255,255,0.7); }

/* -------- Verses recap (menubar button + dropdown) -------- */

/* The "Verses" menubar button lights gold once verses have played live. */
.menu-verses { display: inline-flex; align-items: center; gap: 6px; }
.menu-verses.has-recap { color: var(--gold, #C89D4A); }
.menu-verses .verses-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--gold, #C89D4A); color: #08090f;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
}

.verses-dropdown { min-width: 320px; max-width: 380px; padding: 0; overflow: hidden; }
.verses-recap-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; border-bottom: 1px solid var(--border-2);
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.verses-recap-head .verses-recap-n {
  font-family: var(--mono); color: var(--gold, #C89D4A);
  letter-spacing: 0; font-size: 11px;
}
.verses-list { max-height: 340px; overflow-y: auto; padding: 4px 0; }
/* Multi-line recap row — override the generic single-line dropdown button. */
.verses-dropdown .verses-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "ref time" "snippet snippet";
  gap: 1px 10px;
  padding: 8px 14px;
}
.verses-dropdown .verses-row:hover { background: var(--blue); color: #fff; }
.verses-ref { grid-area: ref; font-weight: 600; color: var(--gold, #C89D4A); font-size: 12.5px; }
.verses-time { grid-area: time; font-family: var(--mono); font-size: 10px; color: var(--ink-4); white-space: nowrap; }
.verses-snippet {
  grid-area: snippet; font-size: 11.5px; color: var(--ink-3);
  font-family: var(--serif, Georgia, serif); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.verses-dropdown .verses-row:hover .verses-ref,
.verses-dropdown .verses-row:hover .verses-time { color: rgba(255,255,255,0.85); }
.verses-dropdown .verses-row:hover .verses-snippet { color: rgba(255,255,255,0.78); }
.verses-empty {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 16px; text-align: center; font-size: 12.5px; color: var(--ink-2);
}
.verses-empty span { font-size: 11px; color: var(--ink-4); }
.verses-dropdown .verses-clear {
  width: 100%; justify-content: center;
  padding: 9px 14px; border-top: 1px solid var(--border-2);
  font-size: 11.5px; color: var(--ink-3); font-weight: 600;
  letter-spacing: 0.04em;
}
.verses-dropdown .verses-clear:hover { background: rgba(232,69,69,0.12); color: #e84545; }

/* -------- Toolbar (36px, light) -------- */

.toolbar {
  height: 40px;
  background: linear-gradient(to bottom, #fafbfc 0%, #eef0f3 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 6px;
  gap: 0;
  flex: 0 0 auto;
}

.tbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  height: 100%;
  border-right: 1px solid var(--border-2);
}
.tbar-group:last-child, .tbar-group.tbar-ghost { border-right: 0; }

.tbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;       /* uniform look: center content so labels align */
  gap: 6px;
  height: 30px;                  /* single shared height across every toolbar button */
  min-width: 130px;              /* uniform min-width so short + long labels line up */
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
}
.tbar-btn:hover { background: #f3f6fa; border-color: #b3bcc9; }
.tbar-btn:active { background: #e7ecf2; }
.tbar-btn .tb-ico { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); }
.tbar-btn:hover .tb-ico { color: var(--blue); }

/* "Add" dropdown — richer rows than the motion picker (label + hint
   subtext) so the consolidated entry is self-documenting. */
.add-dropdown { padding: 4px; }
.add-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}
.add-menu-item:hover { background: #f3f6fa; }
.add-menu-ico {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: var(--panel-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  flex: 0 0 auto;
}
.add-menu-ico svg { width: 14px; height: 14px; }
.add-menu-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.add-menu-label { font-weight: 600; font-size: 13px; color: var(--ink); }
.add-menu-hint { font-size: 11.5px; color: var(--ink-3); }

/* =============================================================
   Responsive toolbar — gracefully fit every PC monitor width.
   The viewport meta locks layout to 1366+; this still helps when the
   user opens the app at a smaller browser width (split-screen, tablet
   sideloaded PWA, embedded panel), and keeps the buttons proportional
   on ultra-wide displays.
   ============================================================= */
.tb-label {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Motion's label can balloon ("Motion: Neon Burst Plus") — let it
   truncate before everything else cascades down. */
#tb-motion-label { max-width: 140px; }

@media (max-width: 1480px) {
  .tbar-btn { min-width: 110px; padding: 0 10px; gap: 5px; font-size: 12px; }
  #tb-motion-label { max-width: 120px; }
}
@media (max-width: 1300px) {
  .tbar-btn { min-width: 92px; padding: 0 8px; font-size: 11.5px; }
  .tbar-btn .tb-ico { width: 13px; height: 13px; }
  #tb-motion-label { max-width: 96px; }
}
@media (max-width: 1180px) {
  /* Secondary action buttons collapse to icon-only — keep the tooltip
     via data-tip + add an accessible aria-label so screen readers
     still announce the action. */
  .tbar-btn { min-width: 0; padding: 0 8px; }
  #tb-announcement .tb-label,
  #tb-birthday .tb-label,
  #tb-clear .tb-label,
  #tb-blackout .tb-label,
  #tb-mobile-remote .tb-label {
    display: none;
  }
  #tb-motion-label { max-width: 84px; }
  /* Hide the chevron on Add too if super tight. */
  #tb-add .tb-motion-chev { display: none; }
}
@media (max-width: 1040px) {
  /* Last-ditch: also hide labels on Countdown + Add, and drop the
     Motion label to just the swatch + chevron. The data-tip tooltips
     remain. */
  #tb-add .tb-label,
  #tb-countdown .tb-label,
  #tb-motion-label {
    display: none;
  }
}

.tbar-primary {
  background: var(--blue);
  border-color: var(--blue-d);
  color: #fff;
  font-weight: 600;
}
.tbar-primary:hover { background: var(--blue-h); border-color: var(--blue-d); }
.tbar-primary .tb-ico, .tbar-primary:hover .tb-ico { color: #fff; }

.tbar-danger {
  background: var(--red);
  border-color: var(--red-d);
  color: #fff;
  font-weight: 600;
}
.tbar-danger:hover { background: var(--red-h); border-color: var(--red-d); }
.tbar-danger .tb-ico, .tbar-danger:hover .tb-ico { color: #fff; }

.hint {
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.08em;
}

/* -------- Schedule bar (92px) -------- */

.schedule-bar-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 120px;
  overflow: hidden;
}
.schedule-label {
  padding: 7px 10px 5px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-2);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.schedule-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: stretch;
}
.sched-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  border: 0;
}
.sched-section-label {
  font: 600 9px/1 var(--mono);
  color: var(--ink-4);
  letter-spacing: 0.18em;
  padding: 6px 2px 2px;
  flex: 0 0 auto;
}
.schedule-bar .sched-card {
  flex: 0 0 auto;
  width: 100%;
}
.schedule-empty {
  color: var(--ink-4);
  font-style: italic;
  font-size: 12.5px;
  padding: 20px 6px;
}

.sched-card {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid #bfc6d0;
  border-radius: var(--radius);
  padding: 6px 28px 6px 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.1s, box-shadow 0.1s;
  user-select: none;
  min-width: 0;
}
.sched-card:hover { box-shadow: var(--shadow-1); }
.sched-card.selected { border-color: var(--blue); border-left-color: var(--blue); }
.sched-card.live     { border-color: var(--red);  border-left-color: var(--red);  background: #fff7f7; }
.sched-card.dragging { opacity: 0.4; }
.sched-card.drag-over { box-shadow: -3px 0 0 var(--blue); }

.sched-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sched-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
.sched-sub {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.sched-count {
  font: 500 10px/1 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.05em;
  flex: 0 0 auto;
  white-space: nowrap;
}
.sched-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px; height: 16px;
  background: rgba(0,0,0,0.04);
  border: 0;
  border-radius: 50%;
  color: var(--ink-3);
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
}
.sched-card:hover .sched-remove { display: flex; }
.sched-remove:hover { background: var(--red); color: #fff; }

.sched-live-badge {
  font-family: var(--mono);
  font-size: 8.5px;
  color: #fff;
  background: var(--red);
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.1em;
  flex: 0 0 auto;
}

/* =============================================================
   Workspace — 3 columns
   ============================================================= */

.workspace {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 280px 1fr 360px;
  min-height: 0;
  background: var(--bg);
}

/* The center column is now wrapped so the Motion button can float
   absolutely at the top-right of the workspace head (the spot
   vacated by the old "Add to Schedule" button). The wrap inherits
   the grid cell's sizing and exposes a positioning context. */
.center-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Critical: without this the center grid track can't shrink below its
     content's min-width, so a wide header pushes the whole layout past the
     window and the right (monitors) column gets clipped off-screen. */
  min-width: 0;
}
.center-wrap > .center {
  flex: 1 1 auto;
  min-height: 0;
}
/* Workspace Motion button — sits at the top-right corner of the
   workspace center area, aligned vertically with .center-head.
   Styled to look NATIVE to the workspace head (subtle dark surface,
   gold accent on hover) rather than a floating toolbar pill.
   `!important` on position/width/etc. so no late-cascading flex or
   button rule can stretch this back to full column width. */
button.workspace-motion {
  position: absolute !important;
  /* .center-head has padding 9px 14px and font-size 15px → ~36px tall.
     Anchor the button at exactly that vertical center. */
  top: 6px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: 280px;
  z-index: 4;
  height: 30px !important;
  min-height: 0 !important;
  padding: 0 10px 0 6px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: linear-gradient(180deg, rgba(24, 28, 42, 0.96), rgba(14, 17, 27, 0.96)) !important;
  border: 1px solid rgba(200, 157, 74, 0.45) !important;
  border-radius: 8px !important;
  color: var(--ink-2) !important;
  font-family: var(--sans);
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.2s ease,
    transform 0.12s ease;
  box-shadow:
    0 2px 8px -2px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.2);
}
.workspace-motion:hover {
  background: linear-gradient(180deg, rgba(30, 34, 50, 1), rgba(22, 26, 38, 1));
  border-color: rgba(200, 157, 74, 0.7);
  color: var(--ink);
  box-shadow:
    0 4px 14px -2px rgba(200, 157, 74, 0.25),
    0 0 0 1px rgba(200, 157, 74, 0.15);
}
.workspace-motion:active { transform: translateY(1px); }
.workspace-motion .tb-motion-swatch {
  /* Slightly smaller swatch for the compact workspace context. */
  width: 22px;
  height: 14px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.workspace-motion .tb-motion-label {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.workspace-motion:hover .tb-motion-label { color: var(--ink); }
.workspace-motion .tb-motion-chev {
  color: rgba(200, 157, 74, 0.7);
  font-size: 10px;
  margin-left: -2px;
  flex: 0 0 auto;
}
.workspace-motion:hover .tb-motion-chev { color: var(--gold, #C89D4A); }

/* -------- Library -------- */

.library {
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lib-tabs {
  display: flex;
  background: var(--panel-3);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.lib-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border-2);
  font-size: 11.5px;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-tab:last-child { border-right: 0; }
.lib-tab:hover { color: var(--ink); background: var(--panel-2); }
.lib-tab.active {
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
}
.lib-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--blue);
}
.lib-tab [data-icon] { width: 14px; height: 14px; }

.lib-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lib-search {
  padding: 8px;
  border-bottom: 1px solid var(--border-2);
  background: var(--panel-2);
  flex: 0 0 auto;
}

/* Music language chips — two toggle pills above the music search box.
   Selected chip gets the brand gold treatment; the other is muted
   until clicked. Click switches the music-language filter (en / tl)
   and persists it across reloads. */
.lib-music-langs {
  display: flex;
  gap: 6px;
  padding: 8px 8px 4px;
  background: var(--panel-2);
  flex: 0 0 auto;
}
.lib-music-lang {
  flex: 1;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  color: var(--ink-2);
  font: 700 11px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.lib-music-lang:hover {
  background: var(--panel-3, var(--panel));
  border-color: var(--border);
  color: var(--ink);
}
.lib-music-lang.active {
  background: linear-gradient(180deg, rgba(200, 157, 74, 0.22), rgba(200, 157, 74, 0.08));
  border-color: rgba(200, 157, 74, 0.65);
  color: var(--gold, #C89D4A);
  box-shadow:
    0 2px 8px -2px rgba(200, 157, 74, 0.35),
    0 0 0 1px rgba(200, 157, 74, 0.05) inset;
}
.lib-music-lang:active { transform: translateY(1px); }
.search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  color: var(--ink-4);
}
.search-box:focus-within { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(31,122,201,0.18); }
.search-box input {
  background: transparent;
  border: 0;
  outline: none;
  flex: 1;
  font-size: 13px;
  color: var(--ink);
}
.search-box [data-icon] { width: 14px; height: 14px; }

.lib-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.lib-row {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.lib-row:hover { background: var(--panel-3); }
.lib-row.active { background: var(--blue-soft); border-color: var(--blue-soft); }
.lib-row-ico {
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  background: var(--panel-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.lib-row.active .lib-row-ico { background: #fff; color: var(--blue); }
.lib-row-body { min-width: 0; flex: 1; }
.lib-row-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-row-sub {
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-row-del {
  opacity: 0;
  background: transparent;
  border: 0;
  width: 24px;
  height: 24px;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
}
.lib-row:hover .lib-row-del,
.lib-row.active .lib-row-del { opacity: 1; }
.lib-row-del:hover { background: rgba(220, 70, 70, 0.12); color: var(--red); }
.lib-row-del svg { width: 14px; height: 14px; display: block; }

.confirm-msg { font-size: 13.5px; color: var(--ink); line-height: 1.4; margin: 0; }

.lib-actions {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border-2);
  background: var(--panel-2);
  flex: 0 0 auto;
}
.lib-actions .btn { flex: 1; }

/* -------- Buttons -------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 12.5px;
  box-shadow: var(--shadow-1);
}
.btn:hover { background: #f3f6fa; border-color: #b3bcc9; }
.btn-primary {
  background: var(--blue);
  border-color: var(--blue-d);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--blue-h); border-color: var(--blue-d); }
.btn-danger {
  background: #fff;
  border-color: var(--border);
  color: var(--red-d);
}
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-solid-danger {
  background: var(--red);
  border-color: var(--red-d);
  color: #fff;
  font-weight: 600;
}
.btn-solid-danger:hover { background: var(--red-h); }
.btn-sm { height: 24px; padding: 0 8px; font-size: 12px; }
.btn-xs { height: 20px; padding: 0 6px; font-size: 11px; }
.btn > svg { width: 14px; height: 14px; flex: 0 0 auto; }
.btn-sm > svg { width: 12px; height: 12px; }
.btn-xs > svg { width: 11px; height: 11px; }

/* -------- Bible panel -------- */

.bible-controls {
  padding: 8px;
  border-bottom: 1px solid var(--border-2);
  background: var(--panel-2);
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 0 0 auto;
}
.bible-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.select {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(31,122,201,0.18); }
.select-sm { flex: 0 0 70px; }

.bible-pager { gap: 8px; }
.bible-pager-label {
  font: 600 10.5px/1 var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex: 1;
}
.bible-pager .select-sm { flex: 0 0 56px; }

.trans-chips {
  display: flex;
  gap: 3px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.trans-chip {
  flex: 1;
  padding: 4px 0;
  background: transparent;
  border: 0;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.trans-chip:hover { background: var(--panel-3); color: var(--ink); }
.trans-chip.active {
  background: var(--blue);
  color: #fff;
}

.bible-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  min-height: 0;
}
.verse-row {
  padding: 7px 10px 7px 38px;
  border-bottom: 1px solid var(--border-3);
  cursor: pointer;
  position: relative;
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.38;
  color: var(--ink);
  user-select: none;
}
.verse-row:hover { background: var(--panel-3); }
.verse-row.active { background: var(--blue-soft); }
.verse-num {
  position: absolute;
  left: 10px;
  top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--blue);
  font-weight: 600;
}

.bible-state {
  padding: 24px 14px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
}
.bible-state.error { color: var(--red-d); }
.bible-state .mono { display: block; margin-bottom: 6px; color: var(--ink-4); }
.bible-state .btn { margin-top: 12px; }

/* -------- Center workspace -------- */

.center {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel-3);
  overflow: hidden;
}

.center-head {
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  /* Big right padding reserves the corner for the floating Motion button so
     NO header content (title, controls, buttons) can ever slip under it. */
  padding: 9px 232px 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  /* Never wrap. The header stays a single, stable row so the controls and
     buttons keep a FIXED position no matter how long the song title is —
     the title truncates with an ellipsis instead of bumping them to a new row. */
  flex-wrap: nowrap;
}
.center-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Shrink/truncate to whatever space is left so the controls stay put. */
  flex: 0 1 auto;
  min-width: 0;
}
.center-meta {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;
}
/* The controls/buttons group is pinned to the right (just inside the Motion
   reserve), so it occupies the SAME position for every song and view. */
.center-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: nowrap; flex: 0 0 auto; }

.center-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.slide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 14px;
}
.slide-card {
  background: #fff;
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform 0.08s, border-color 0.1s;
}
.slide-card:hover { border-color: var(--border); }
.slide-card.selected { border-color: var(--blue); }
.slide-card.live     { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), var(--shadow-1); }

.slide-preview {
  aspect-ratio: 16 / 9;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.slide-preview.image { padding: 0; background: #000; }
.slide-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.slide-preview pre {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.22;
  white-space: pre-wrap;
  max-height: 100%;
  overflow: hidden;
}
.slide-preview.song pre {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
}
.slide-preview .slide-ref {
  position: absolute;
  bottom: 5px;
  right: 7px;
  font-family: var(--mono);
  font-size: 8px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.14em;
}

.slide-foot {
  padding: 5px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-top: 1px solid var(--border-3);
}
.slide-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.slide-card.live .slide-label { color: var(--red-d); }
.slide-num { font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.08em; }

/* =============================================================
   Section color-coding for song slides — the whole card gets tinted
   in the section's color so the operator can see at a glance which
   section each slide belongs to. The same palette is mirrored on
   the mobile remote.
   ============================================================= */
:root {
  --sec-verse:      #2f7ed8;   /* blue       */
  --sec-chorus:     #16a34a;   /* green — freed gold for the LIVE blink */
  --sec-prechorus:  #14b8a6;   /* teal — moved off green to make room   */
  --sec-bridge:     #8a5cf0;   /* purple     */
  --sec-tag:        #e69138;   /* orange     */
  --sec-intro:      #6b7387;   /* grey (instrumental/interlude) */
  --sec-outro:      #c14a3a;   /* crimson    */
}

/* Blinking gold animation used for the currently-LIVE slide — works
   on any section color because the gold pulses on top of whatever
   colored band the card has. */
@keyframes liveBlink {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(200, 157, 74, 0.55),
      0 0 14px rgba(200, 157, 74, 0.35),
      var(--shadow-1);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(200, 157, 74, 1),
      0 0 26px rgba(200, 157, 74, 0.7),
      var(--shadow-1);
  }
}

/* Translucent section tints — same visual approach as the mobile
   remote's slide rows. Identifiable without being overpowering. */
.slide-card[class*="section-"] { border-width: 3px; }
/* --live-tint mirrors the section tint so the LIVE rule below can
   re-apply the same colour INSIDE its gradient border (otherwise the
   live card goes flat dark and loses its section identity at a
   glance). Same trick used in app/remote.html for the phone.
   Backgrounds are now OPAQUE — a layered background (tint over a
   solid --panel base). Cards were previously rgba(...) only, which
   meant the workspace verse watermark behind them bled through. */
.slide-card.section-verse     { background: linear-gradient(rgba(47, 126, 216, 0.20),  rgba(47, 126, 216, 0.20)),  var(--panel); border-color: rgba(47, 126, 216, 0.65);  --live-tint: rgba(47, 126, 216, 0.20);  }
.slide-card.section-chorus    { background: linear-gradient(rgba(22, 163, 74, 0.20),   rgba(22, 163, 74, 0.20)),   var(--panel); border-color: rgba(22, 163, 74, 0.65);   --live-tint: rgba(22, 163, 74, 0.20);   }
.slide-card.section-prechorus { background: linear-gradient(rgba(20, 184, 166, 0.20),  rgba(20, 184, 166, 0.20)),  var(--panel); border-color: rgba(20, 184, 166, 0.65);  --live-tint: rgba(20, 184, 166, 0.20);  }
.slide-card.section-bridge    { background: linear-gradient(rgba(138, 92, 240, 0.20),  rgba(138, 92, 240, 0.20)),  var(--panel); border-color: rgba(138, 92, 240, 0.65);  --live-tint: rgba(138, 92, 240, 0.20);  }
.slide-card.section-tag       { background: linear-gradient(rgba(230, 145, 56, 0.20),  rgba(230, 145, 56, 0.20)),  var(--panel); border-color: rgba(230, 145, 56, 0.65);  --live-tint: rgba(230, 145, 56, 0.20);  }
.slide-card.section-intro     { background: linear-gradient(rgba(107, 115, 135, 0.22), rgba(107, 115, 135, 0.22)), var(--panel); border-color: rgba(107, 115, 135, 0.65); --live-tint: rgba(107, 115, 135, 0.22); }
.slide-card.section-outro     { background: linear-gradient(rgba(193, 74, 58, 0.20),   rgba(193, 74, 58, 0.20)),   var(--panel); border-color: rgba(193, 74, 58, 0.65);   --live-tint: rgba(193, 74, 58, 0.20);   }

/* Footer picks up a slightly stronger tint of the same section, plus
   white text — matches the mobile's "soft translucent band" look.
   Same opaque layering as the card so the watermark can't bleed
   through the footer area either. */
.slide-card[class*="section-"] .slide-foot { color: #fff; border-top: 0; }
.slide-card.section-verse     .slide-foot { background: linear-gradient(rgba(47, 126, 216, 0.45),  rgba(47, 126, 216, 0.45)),  var(--panel-2, var(--panel)); }
.slide-card.section-chorus    .slide-foot { background: linear-gradient(rgba(22, 163, 74, 0.45),   rgba(22, 163, 74, 0.45)),   var(--panel-2, var(--panel)); }
.slide-card.section-prechorus .slide-foot { background: linear-gradient(rgba(20, 184, 166, 0.45),  rgba(20, 184, 166, 0.45)),  var(--panel-2, var(--panel)); }
.slide-card.section-bridge    .slide-foot { background: linear-gradient(rgba(138, 92, 240, 0.45),  rgba(138, 92, 240, 0.45)),  var(--panel-2, var(--panel)); }
.slide-card.section-tag       .slide-foot { background: linear-gradient(rgba(230, 145, 56, 0.45),  rgba(230, 145, 56, 0.45)),  var(--panel-2, var(--panel)); }
.slide-card.section-intro     .slide-foot { background: linear-gradient(rgba(107, 115, 135, 0.50), rgba(107, 115, 135, 0.50)), var(--panel-2, var(--panel)); }
.slide-card.section-outro     .slide-foot { background: linear-gradient(rgba(193, 74, 58, 0.45),   rgba(193, 74, 58, 0.45)),   var(--panel-2, var(--panel)); }

/* Label + slide number always read white on the tint */
.slide-card[class*="section-"] .slide-label,
.slide-card[class*="section-"] .slide-num { color: #fff !important; }

/* Pencil button — translucent-white outline against the tint */
.slide-card[class*="section-"] .slide-rename-btn {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.slide-card[class*="section-"] .slide-rename-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

/* Selected (preview) — solid blue ring on top of the section. */
.slide-card.selected[class*="section-"] {
  box-shadow: 0 0 0 3px var(--blue), var(--shadow-1);
}
/* LIVE — pulsing gold halo so it's unmistakable on top of ANY section
   color (verse-blue, chorus-green, bridge-purple, etc.). Replaces the
   solid red border so live + chorus is no longer indistinguishable. */
.slide-card.live,
.slide-card.live[class*="section-"] {
  animation: liveBlink 1.4s ease-in-out infinite;
  border-color: var(--brand) !important;
}

/* Slide footer: pencil-only at rest. When the operator taps the pencil,
   .slide-foot.editing reveals the input and hides everything else.   */
.slide-rename-btn {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--border-3);
  border-radius: 5px;
  color: var(--blue);
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.slide-rename-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.slide-rename-btn:active { transform: scale(0.92); }

.slide-label-edit {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--blue);
  background: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: text;
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 122, 201, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* While editing, the input expands; pencil + slide number tuck away */
.slide-foot.editing .slide-rename-btn,
.slide-foot.editing .slide-num { display: none; }
.slide-foot.editing .slide-label-edit { margin: 0; }

/* Rename Slides bulk-edit modal */
.rs-hint {
  margin: 0 0 12px;
  color: var(--ink-3);
  font-size: 12px;
}
.rs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
}
.rs-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rs-num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.1em;
  width: 26px;
  flex-shrink: 0;
}
.rs-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-3);
  border-radius: 6px;
  font: 500 13px 'Inter', sans-serif;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.rs-input:focus {
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 122, 201, 0.18);
}

.center-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 40px;
  text-align: center;
  color: var(--ink-3);
}
.center-empty .big-ico {
  width: 48px; height: 48px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-4);
}
.center-empty h3 {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.center-empty p { margin: 0; font-size: 12.5px; }

/* -------- Song editor -------- */

.song-editor {
  padding: 18px 24px 40px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}
.song-title-field input {
  width: 100%;
  font-size: 22px;
  font-weight: 600;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 6px 0 8px;
  background: transparent;
  outline: none;
  color: var(--ink);
}
.song-title-field input:focus { border-bottom-color: var(--blue); }

.song-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 18px;
}
.meta-field { display: flex; flex-direction: column; gap: 3px; }
.meta-field label {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--ink-4);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.meta-field input {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
}
.meta-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(31,122,201,0.18); }

.sections-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}

.sec-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
.sec-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--panel-3);
  border-bottom: 1px solid var(--border-2);
}
.sec-label-in {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue-d);
  text-transform: uppercase;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  width: 160px;
  outline: none;
}
.sec-label-in:hover, .sec-label-in:focus { border-color: var(--border); background: #fff; }
.sec-actions { margin-left: auto; display: flex; gap: 2px; }
.icon-btn {
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: #fff; border-color: var(--border); color: var(--ink); }
.icon-btn.danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red-d); }
.icon-btn [data-icon] { width: 14px; height: 14px; display: inline-flex; }

.sec-body textarea {
  width: 100%;
  border: 0;
  outline: none;
  padding: 10px 14px 14px;
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  min-height: 110px;
  resize: vertical;
}

.add-section-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* =============================================================
   Right panel — monitors + transport
   ============================================================= */

.monitors {
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
}

.monitor-wrap {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.monitor-preview { border-color: var(--preview); }
.monitor-live    { border-color: var(--red); }
.monitor-preview .monitor-title { color: var(--preview); }
.monitor-live .monitor-title { color: var(--red-d); }

.monitor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}
.monitor-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.monitor-title .live-dot {
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
  color: var(--red);
}
.monitor-ref {
  font-size: 9.5px;
  color: var(--ink-4);
  letter-spacing: 0.08em;
  /* Long slide references (e.g. "COME THOU FOUNT OF EVERY BLESSING · 6/12")
     used to wrap onto a second line inside the preview head and bleed
     down over the slide image. Lock to a single line + ellipsis so the
     reference always reads cleanly along the right edge of the head. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.monitor-edit {
  margin-left: auto;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8a89a;
  background: rgba(193, 74, 58, 0.12);
  border: 1px solid rgba(193, 74, 58, 0.45);
  border-radius: 3px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.monitor-edit:hover {
  background: rgba(193, 74, 58, 0.22);
  border-color: rgba(193, 74, 58, 0.7);
  color: #ffd2c4;
}
.monitor-edit .icon,
.monitor-edit [data-icon] {
  width: 11px;
  height: 11px;
  display: inline-flex;
}
.monitor-edit .icon svg,
.monitor-edit [data-icon] svg {
  width: 100%;
  height: 100%;
}
.monitor-edit.hidden { display: none; }

.monitor-frame {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.monitor-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  text-align: center;
  color: #fff;
}
.monitor-stage pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.22;
  font-family: var(--sans);
  font-weight: 600;
  max-height: 100%;
  overflow: hidden;
}
.monitor-stage.scripture pre { font-family: var(--serif); font-weight: 500; }

/* Verse numbers inside multi-verse scripture output (slide cards + monitors) */
.slide-preview.scripture pre .vnum,
.monitor-stage.scripture pre .vnum {
  color: #e6b652;
  font-size: 0.55em;
  font-weight: 700;
  vertical-align: super;
  letter-spacing: 0.02em;
  margin: 0 0.1em 0 0.1em;
  opacity: 0.95;
}
.monitor-stage .mref {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  color: rgba(255,234,210,0.82);
  text-transform: uppercase;
}
.monitor-stage.image { padding: 0; }
.monitor-stage.image img { width: 100%; height: 100%; object-fit: contain; }

.monitor-live.blackout .monitor-stage { opacity: 0; }
.monitor-live.blackout .monitor-frame::after {
  content: 'BLACKOUT';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--red-h);
}

.transport {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 6px;
}
.tp-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: var(--shadow-1);
}
.tp-btn:hover { background: #f3f6fa; border-color: #b3bcc9; }
.tp-btn [data-icon] { width: 13px; height: 13px; color: var(--ink-3); }
.tp-btn:hover [data-icon] { color: var(--blue); }
.tp-go {
  background: var(--red);
  border-color: var(--red-d);
  color: #fff;
}
.tp-go:hover { background: var(--red-h); border-color: var(--red-d); }
.tp-go [data-icon], .tp-go:hover [data-icon] { color: #fff; }

/* -------- Tips card -------- */

.tips {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px 8px;
  margin-top: auto;
}
.tips-title {
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.18em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tips-toggle {
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #fff;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tips-toggle:hover { background: var(--panel-3); }
.tips.collapsed { padding-bottom: 8px; }
.tips.collapsed .kb { display: none; }
.tips.collapsed .tips-title { margin-bottom: 0; }
.kb {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  font-size: 12px;
}
.kb dt {
  font-family: var(--mono);
  font-size: 10.5px;
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  border-radius: 2px;
  padding: 1px 6px;
  color: var(--ink-2);
  justify-self: start;
}
.kb dd { margin: 0; color: var(--ink-3); }

/* -------- Status bar -------- */

.statusbar {
  height: 22px;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  flex: 0 0 auto;
}
.statusbar-sep {
  width: 1px;
  height: 12px;
  background: var(--border);
}
.statusbar-credit {
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 2px rgba(47,165,109,0.2);
}

/* =============================================================
   Modal
   ============================================================= */

#modal-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 300;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(32,40,52,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.12s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  width: 560px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  animation: rise 0.14s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.modal-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.modal-close {
  background: transparent;
  border: 0;
  width: 24px; height: 24px;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover { background: var(--panel-3); color: var(--ink); }
.modal-body {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-body textarea {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  outline: none;
  min-height: 220px;
  resize: vertical;
}
.modal-body textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(31,122,201,0.18); }
.modal-body input[type=text] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 14px;
  outline: none;
  color: var(--ink);
}
.modal-body input[type=text]:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(31,122,201,0.18); }
.modal-body .help {
  color: var(--ink-3);
  font-size: 12px;
}
.modal-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--border-2);
  background: var(--panel-2);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* =============================================================
   Mobile Remote modal
   ============================================================= */
.mr-modal {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mr-warn {
  background: #fff8e6;
  border: 1px solid #f0d28a;
  color: #6a4f00;
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
}
.mr-warn code {
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}
.mr-grid {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 18px;
  align-items: start;
}
/* Left column: QR (smaller) with the copy link + status stacked beneath it. */
.mr-qr-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 232px;
}
.mr-qr {
  position: relative;
  width: 232px;
  height: 232px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}
.mr-qr-box img,
.mr-qr-box canvas {
  display: block;
  width: 208px !important;
  height: 208px !important;
  image-rendering: pixelated;       /* keep QR edges crisp at all DPIs */
  image-rendering: crisp-edges;
}
.mr-qr-fallback {
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  padding: 10px;
}
.mr-spinner {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius);
  color: var(--ink-3);
  font-size: 12px;
}
.mr-spin {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.mr-spin.failed {
  border-top-color: var(--red);
  animation: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mr-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.mr-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}
.mr-num {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.mr-url-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.mr-url-row input[type=text] {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: var(--radius);
  color: var(--ink);
}
.mr-copy {
  height: 30px;
  width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mr-copy svg { width: 14px; height: 14px; }
.mr-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  font-size: 12px;
  align-self: flex-start;
  margin-top: 4px;
}
.mr-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
}
.mr-status.waiting .mr-status-dot {
  background: #e0b144;
  animation: pulseDotMr 1.2s ease-in-out infinite;
}
.mr-status.paired .mr-status-dot {
  background: #36b76d;
  animation: none;
}
.mr-status.paired {
  border-color: rgba(54,183,109,0.45);
  background: rgba(54,183,109,0.08);
}
@keyframes pulseDotMr {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
.mr-device {
  font-size: 11.5px;
  color: var(--ink-3);
}

/* Pairing code — the headline element of the modal so an operator can
   read it out loud across a room. */
.mr-code-block {
  background: linear-gradient(135deg, rgba(46,115,109,0.06), rgba(200,157,74,0.04));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.mr-code-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.mr-code {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.mr-code:hover { background: rgba(0,0,0,0.04); }
.mr-code:active { transform: scale(0.98); }
.mr-code-hint {
  font-size: 11px;
  color: var(--ink-3);
}
.mr-code-host {
  font-family: var(--mono);
  color: var(--ink-2);
}

/* Connected devices list — pending rows show Allow/Deny, approved rows
   show a Log-out button. */
.mr-devices-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border-2);
  padding-top: 10px;
}
.mr-devices-head {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

/* Hybrid-transport status block — sits below the devices list and
   shows which channel is currently carrying the link (P2P Trystero
   or cloud relay), the measured round-trip latency, and the active
   phone count. Includes an inline field for the operator to point
   at a Socket.IO relay server they're hosting. */
.mr-conn-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border-2);
  padding-top: 10px;
}
.mr-conn-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.mr-conn-mode {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel-2, #1a1f2e);
  border: 1px solid var(--border-2, #232c42);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 700;
  color: var(--ink-3);
}
.mr-conn-mode.trystero {
  border-color: #4ade80;
  color: #4ade80;
  background: rgba(74,222,128,0.08);
}
.mr-conn-mode.relay {
  border-color: #C89D4A;
  color: #C89D4A;
  background: rgba(200,157,74,0.10);
}
.mr-conn-mode.connecting { color: #e0b144; border-color: rgba(224,177,68,0.5); }
.mr-conn-mode.disconnected,
.mr-conn-mode.offline {
  color: #c14a3a;
  border-color: rgba(193,74,58,0.5);
  background: rgba(193,74,58,0.10);
}

.mr-conn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mr-conn-cell {
  background: var(--panel-2, #1a1f2e);
  border: 1px solid var(--border-2, #232c42);
  border-radius: 10px;
  padding: 8px 12px;
}
.mr-conn-cell-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.mr-conn-cell-value {
  margin-top: 2px;
  font: 600 14px/1.2 'Inter', monospace;
  color: var(--ink, #edf0f5);
}
.mr-conn-relay {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 0;
}
.mr-conn-relay-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
.mr-conn-relay-row {
  display: flex;
  gap: 6px;
}
.mr-conn-relay-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  background: var(--panel-2, #1a1f2e);
  border: 1px solid var(--border-2, #232c42);
  border-radius: 8px;
  color: var(--ink, #edf0f5);
  font: 500 13px/1.2 'Inter', monospace;
}
.mr-conn-relay-row input:focus { outline: none; border-color: #C89D4A; }
.mr-conn-relay-info {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
}
.mr-devices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mr-dev-empty {
  font-size: 12px;
  color: var(--ink-3);
  padding: 12px;
  text-align: center;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.mr-dev {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.mr-dev-pending {
  background: rgba(224,177,68,0.08);
  border-color: rgba(224,177,68,0.4);
  animation: mr-pending-pulse 2s ease-in-out infinite;
}
@keyframes mr-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,177,68,0); }
  50%      { box-shadow: 0 0 0 4px rgba(224,177,68,0.10); }
}
.mr-dev-ok {
  background: rgba(54,183,109,0.06);
  border-color: rgba(54,183,109,0.3);
}
.mr-dev-icon {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--panel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.mr-dev-icon svg { width: 16px; height: 16px; }
.mr-dev-text {
  flex: 1;
  min-width: 0;
}
.mr-dev-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mr-dev-tag {
  display: inline-block;
  background: rgba(54,183,109,0.18);
  color: #1d7a47;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  vertical-align: middle;
}
.mr-dev-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mr-dev-role {
  flex: 0 0 auto;
  font: 600 11.5px/1.2 inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  max-width: 130px;
}
.mr-dev-role:hover { border-color: rgba(200,157,74,0.5); }
.mr-dev-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mr-dev-btn svg { width: 14px; height: 14px; }
.mr-dev-btn:hover { background: var(--panel-2); }
.mr-dev-btn.allow {
  background: #36b76d;
  border-color: #2ea05f;
  color: #fff;
}
.mr-dev-btn.allow:hover { background: #2ea05f; }
.mr-dev-btn.deny {
  color: var(--red, #c14a3a);
  border-color: rgba(193,74,58,0.5);
}
.mr-dev-btn.deny:hover { background: rgba(193,74,58,0.08); }
.mr-dev-btn.kick {
  color: var(--ink-2);
}
.mr-dev-btn.kick:hover {
  background: rgba(193,74,58,0.08);
  border-color: rgba(193,74,58,0.5);
  color: var(--red, #c14a3a);
}

/* Trusted devices footnote */
.mr-trusted {
  font-size: 11.5px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.mr-trusted-count { font-weight: 600; color: var(--ink-2); }
.mr-trusted-clear {
  color: var(--blue);
  text-decoration: none;
}
.mr-trusted-clear:hover { text-decoration: underline; }

/* Status pill — "attention" variant when devices need approval */
.mr-status.attn .mr-status-dot {
  background: #e0b144;
  animation: pulseDotMr 1.2s ease-in-out infinite;
}
.mr-status.attn {
  border-color: rgba(224,177,68,0.55);
  background: rgba(224,177,68,0.10);
  color: #6a4f00;
}
.mr-help {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
  border-top: 1px solid var(--border-2);
  padding-top: 10px;
}
.mr-help p { margin: 0 0 8px; }
.mr-help p:last-child { margin-bottom: 0; }
.mr-help b { color: var(--ink); }
.mr-help-sub { color: var(--ink-3); font-size: 11.5px; }
.mr-help-aside { color: var(--ink-3); font-size: 11px; margin-left: 4px; }
.mr-rotate {
  color: var(--blue);
  text-decoration: none;
  font-size: 11.5px;
}
.mr-rotate:hover { text-decoration: underline; }
.mr-disconnect {
  margin-right: auto;
}
.mr-lan {
  background: #fff8e6;
  border: 1px solid #f0d28a;
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mr-lan-title {
  font-size: 12px;
  font-weight: 600;
  color: #6a4f00;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mr-lan-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.mr-lan-row input[type=text] {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius);
  color: var(--ink);
}
.mr-lan-apply {
  height: 30px;
}
.mr-lan-info {
  font-size: 11.5px;
  color: #6a4f00;
  line-height: 1.5;
}
.mr-lan-info code {
  background: rgba(0,0,0,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
}

/* =============================================================
   Toasts
   ============================================================= */

#toast-stack {
  position: fixed;
  top: 72px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 400;
  pointer-events: none;
}
.toast {
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--ink);
  min-width: 240px;
  max-width: 360px;
  box-shadow: var(--shadow-2);
  animation: slideIn 0.22s cubic-bezier(0.2,0.9,0.4,1);
  pointer-events: all;
}
.toast.ok    { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.info  { border-left-color: var(--blue); }
.toast.closing { animation: slideOut 0.2s ease forwards; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

/* =============================================================
   Scrollbars (thin, rounded)
   ============================================================= */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #b3bcc9;
  background-clip: padding-box;
  border: 2px solid transparent;
}

.schedule-bar::-webkit-scrollbar { height: 8px; }

/* =============================================================
   Icons (inline SVG hydrated via data-icon)
   ============================================================= */

[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
[data-icon] svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* =============================================================
   Media load row
   ============================================================= */

.media-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
}
.media-empty .mono { display: block; margin-bottom: 6px; color: var(--ink-4); }
.media-tip {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(240, 184, 56, 0.12);
  border: 1px solid rgba(240, 184, 56, 0.35);
  border-radius: 5px;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.45;
  text-align: left;
}
.media-tip b { color: var(--ink); }

.slide-preview.video-thumb { position: relative; }
.slide-preview.video-thumb .video-play,
.monitor-stage .video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.75);
  pointer-events: none;
  opacity: 0.85;
}
.monitor-stage .video-play { font-size: 28px; }
.video-detail { padding: 16px; }

/* =============================================================
   Song style panel
   ============================================================= */

.style-panel {
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.style-title {
  font: 600 11px/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.style-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: center;
}
.style-row > label {
  font-size: 12px;
  color: var(--ink-2);
}
.style-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.style-controls input[type="color"] {
  width: 32px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.style-controls select {
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  /* Dark-theme surface + readable text. The previous `background: #fff`
     produced light-on-light because the global `select` rule sets
     `color: var(--ink)` (a light value in dark mode). */
  background: var(--panel-2);
  color: var(--ink);
}
.style-controls select option {
  background: var(--panel-2);
  color: var(--ink);
}
.style-controls input[type="range"] { flex: 1; min-width: 100px; }
.style-val { font: 500 11px/1 ui-monospace, monospace; color: var(--ink-3); min-width: 36px; text-align: right; }

.theme-chips, .align-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.theme-chip, .align-chip {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px;
  text-transform: capitalize;
  cursor: pointer;
  background: #fff;
  color: var(--ink);
}
.theme-chip {
  border-color: rgba(0,0,0,0.2);
}
.theme-chip.active, .align-chip.active {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  font-weight: 600;
}
.align-chip:hover { background: #f3f6fa; }

.bg-thumb {
  width: 140px;
  height: 80px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: #000;
}
.bg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Background motion-video indicator in the STYLE panel. */
.bg-thumb-vid { position: relative; display: flex; align-items: center; justify-content: center; }
.bg-thumb-tag {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3px 6px;
  font: 700 9px/1.2 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.72));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================
   v2 Polish — micro-interactions, smooth transitions, modern scrollbars.
   Layered additions — zero structural changes to the operator UI.
   ============================================================= */

/* Soft focus + transition defaults */
button, .tbar-btn, .tp-btn, .lib-tab, .lib-row, .sched-card, .mock-btn,
.theme-chip, .align-chip, .trans-chip, .mock-chip {
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .15s ease,
    box-shadow .2s ease !important;
}

/* Buttons — subtle lift on hover, firm press-down on active */
.tbar-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.tbar-btn:active:not(:disabled) { transform: translateY(0); }

.tp-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.tp-btn:active:not(:disabled) { transform: translateY(0); }
.tp-btn.tp-go:hover:not(:disabled) {
  box-shadow: 0 6px 18px -4px rgba(232, 69, 69, 0.55);
}

/* Library rows — gentle hover shift + gradient active highlight */
.lib-row {
  position: relative;
  overflow: hidden;
}
.lib-row::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--blue), var(--preview));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .22s cubic-bezier(.3,.1,.2,1);
}
.lib-row:hover {
  background: linear-gradient(90deg, rgba(31, 122, 201, 0.04), transparent);
}
.lib-row.active::before { transform: scaleY(1); }
.lib-row.active {
  background: linear-gradient(90deg, rgba(31, 122, 201, 0.12), rgba(31, 122, 201, 0.02));
}

/* Schedule cards — lift + soft shadow on hover, active = gradient accent */
.sched-card {
  overflow: visible;
}
.sched-card:hover:not(.live) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(20, 30, 50, 0.18);
  border-color: var(--blue-soft);
}
.sched-card.selected {
  box-shadow: 0 0 0 2px rgba(31, 122, 201, 0.25), 0 4px 14px -4px rgba(31, 122, 201, 0.3);
}
.sched-card.live {
  animation: liveCardPulse 2.4s ease-in-out infinite;
}
@keyframes liveCardPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 69, 69, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(232, 69, 69, 0); }
}

/* Library tabs — smooth underline slide instead of instant swap */
.lib-tab { position: relative; }
.lib-tab::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s cubic-bezier(.3,.1,.2,1);
}
.lib-tab.active::after { transform: scaleX(1); }

/* Transport Go button — breathing idle glow so the eye finds it fast */
.tp-btn.tp-go {
  position: relative;
  animation: goIdle 3.5s ease-in-out infinite;
}
@keyframes goIdle {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 69, 69, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(232, 69, 69, 0.15); }
}

/* Monitor frames — soft glow when live item is on air */
.monitor-live.on-air .monitor-frame {
  box-shadow: 0 0 0 1px var(--red), 0 0 22px -4px rgba(232, 69, 69, 0.35);
}

/* Menu dropdown — smoother in */
.menu-dropdown {
  animation: menuSlide .16s cubic-bezier(.3,.1,.2,1);
  transform-origin: top left;
}
@keyframes menuSlide {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Pills (projector / live) — pulse while live */
.pill.pill-live {
  animation: pillLive 2s ease-in-out infinite;
}
@keyframes pillLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 69, 69, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(232, 69, 69, 0); }
}
.pill.pill-ok .dot {
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 165, 109, 0.6); }
  50%      { box-shadow: 0 0 0 4px rgba(47, 165, 109, 0); }
}

/* Toast — nicer entrance */
.toast {
  animation: toastIn .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal — smooth fade+scale */
.modal-backdrop { animation: backdropIn .18s ease; }
.modal          { animation: modalIn .28s cubic-bezier(.34,1.56,.64,1); }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modern scrollbars — thin, on-brand */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(107, 115, 128, 0.4) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(107, 115, 128, 0.35);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .2s;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(31, 122, 201, 0.55);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Slide cards in the center workspace — hover glow + smooth border.
   NB: no transform/translate on hover. A live verse card sits next to the
   cursor; lifting it shifted its hit-box out from under the pointer at the
   top/bottom edge, which un-hovered → snapped back → visible flicker loop.
   Shadow + border give the same affordance without moving the hit-box. */
.slide-card {
  transition: box-shadow .25s, border-color .2s;
}
.slide-card:hover {
  box-shadow: 0 8px 20px -8px rgba(20, 30, 50, 0.25);
  border-color: var(--blue);
}
.slide-card.selected {
  box-shadow: 0 0 0 2px var(--preview), 0 4px 12px -4px rgba(58, 154, 217, 0.4);
}
.slide-card.live {
  box-shadow: 0 0 0 2px var(--red), 0 4px 12px -4px rgba(232, 69, 69, 0.45);
  animation: liveCardPulse 2.4s ease-in-out infinite;
}

/* Verse rows — background-only hover, anchor ring on active.
   NB: hover must NOT change padding, size, or position. Base padding-left is
   38px (clears the absolutely-positioned verse number); anything that shifts
   padding/transform reflows or moves the row, which flickers at the edges.
   A plain background tint is the hover cue — nothing that affects layout. */
.verse-row { transition: background .15s ease; }
.verse-row:hover:not(.active) { background: var(--blue-soft); }
.verse-row.active {
  background: linear-gradient(90deg, var(--blue-soft), rgba(223, 235, 246, 0.4));
  box-shadow: inset 3px 0 0 var(--blue);
}

/* Translation chips — active gets subtle gradient */
.trans-chip.active {
  background: linear-gradient(135deg, var(--blue), var(--preview));
  border-color: var(--blue);
  color: #fff;
}

/* Brand mark in menu bar — subtle shimmer */
.brand-mark {
  position: relative;
  overflow: hidden;
}
.brand-mark::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: brandShimmer 6s ease-in-out infinite;
}
@keyframes brandShimmer {
  0%, 80% { transform: translateX(-120%); }
  90%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}

/* Disable hover lifts on touch devices */
@media (hover: none) {
  .tbar-btn:hover, .tp-btn:hover, .sched-card:hover, .slide-card:hover {
    transform: none !important;
  }
}

/* =============================================================
   v3 Polish — professional form controls + focus + typography.
   ============================================================= */

/* Accessible focus rings — consistent across every control */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.lib-tab:focus-visible,
.lib-row:focus-visible,
.sched-card:focus-visible,
.slide-card:focus-visible,
.trans-chip:focus-visible,
.theme-chip:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Text inputs — refined rest + focus states */
input[type="text"],
input[type="search"],
input[type="color"],
input[type="file"],
textarea,
select {
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}
/* Hover / focus DOES NOT flip to a white background anymore — in dark
   mode that produced light-on-light, hiding the value (e.g. the Font
   <select> in the song-editor style panel). We lift the surface a
   step instead, keeping `color: var(--ink)` legible throughout. */
input[type="text"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: var(--border);
  background: var(--panel-2);
  color: var(--ink);
}
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--panel-2);
  color: var(--ink);
  box-shadow:
    0 0 0 3px rgba(31, 122, 201, 0.15),
    inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
/* Native <option> dropdowns inherit the OS chrome on most browsers,
   but where the browser honours CSS (Chromium on Windows does), give
   them the same dark surface so the popup list isn't unreadable. */
select option {
  background: var(--panel-2);
  color: var(--ink);
}

/* Search box in library — pill shape, icon alignment */
.search-box {
  position: relative;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.search-box:focus-within {
  box-shadow: 0 0 0 3px rgba(31, 122, 201, 0.18);
  border-radius: 6px;
}

/* Select — custom chevron */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 28px;
  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='%236b7380' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Checkbox / radio (if any) — larger, branded */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--blue);
  width: 15px; height: 15px;
  cursor: pointer;
}

/* Primary buttons — refined typography + weight */
.btn, .tbar-btn, .tp-btn {
  font-weight: 500;
  letter-spacing: 0.005em;
}
.btn-primary, .tbar-primary, .tbar-danger {
  font-weight: 600;
}

/* Dividers between toolbar groups — subtler */
.tbar-group + .tbar-group {
  border-left: 1px solid var(--border-3);
  padding-left: 8px;
  margin-left: 4px;
}

/* Section labels in schedule bar — more refined */
.sched-section-label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

/* Textarea — slight serif fallback + better line-height */
textarea {
  font-family: var(--sans);
  line-height: 1.55;
  padding: 10px 12px;
  min-height: 90px;
  resize: vertical;
}

/* Placeholders — softer */
::placeholder { color: var(--ink-4); opacity: 1; }

/* Small decorative dot before labels (mono style) */
.mono {
  position: relative;
}

/* Sharper kbd style for shortcut hints */
.shortcut {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-4);
  padding: 2px 6px;
  border: 1px solid var(--border-3);
  border-radius: 3px;
  background: var(--panel-3);
}

/* Select disabled state */
select:disabled, input:disabled, button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Smooth app-level transitions on panel backgrounds */
.library, .monitors, .center {
  transition: background-color .25s ease;
}

/* Status bar — higher contrast on the credit line */
.statusbar-credit {
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* =============================================================
   v4 — Modern Dark Theme
   Full design-system refresh. Matches the landing page aesthetic:
   deep navy chrome, glass panels, gradient accents, soft elevation.
   ============================================================= */

:root {
  /* Surfaces */
  --bg:          #08090f;
  --bg-2:        #0c1019;
  --panel:       #141824;
  --panel-2:     #1a1f2e;
  --panel-3:     #1f2638;

  /* Ink */
  --ink:         #eef1f7;
  --ink-2:       #c8cfdc;
  --ink-3:       #8b93a6;
  --ink-4:       #5d6579;

  /* Borders */
  --border:      #2a3348;
  --border-2:    #222a3c;
  --border-3:    #1a2134;

  /* Menubar chrome */
  --menubar:     #0a0e17;
  --menubar-ink: #eef1f7;
  --menubar-ink-dim: #8b93a6;

  /* Accents — Myrtle green + antique gold theme */
  --blue:        #2E736D;   /* Myrtle green (primary accent) */
  --blue-h:      #3A8B85;   /* hover */
  --blue-d:      #1F5B56;   /* pressed / deep */
  --blue-soft:   rgba(46, 115, 109, 0.16);
  --blue-ink:    #6CB5AF;   /* light myrtle for text on dark */

  --preview:     #4A9691;   /* lighter myrtle for preview ring */
  --red:         #c14a3a;   /* warm brick — harmonizes with gold */
  --red-h:       #d46350;
  --red-d:       #9a3a2e;
  --red-soft:    rgba(193, 74, 58, 0.16);
  --green:       #2E736D;   /* success also uses myrtle */
  --amber:       #C89D4A;   /* Antique gold */

  /* Shape */
  --radius:      6px;
  --radius-sm:   4px;

  /* Elevation */
  --shadow-1:    0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-2:    0 10px 32px rgba(0, 0, 0, 0.6);
  --shadow-menu: 0 12px 40px rgba(0, 0, 0, 0.7);
}

/* Hardcoded whites — override everywhere they appear for dark theme */
.sched-card,
.verse-row.active,
.lib-row.active .lib-row-ico {
  background: var(--panel) !important;
  color: var(--ink);
}
.sched-card.live {
  background: linear-gradient(90deg, rgba(193, 74, 58, 0.14), rgba(193, 74, 58, 0.05)) !important;
}
.sched-card.selected {
  background: linear-gradient(90deg, rgba(46, 115, 109, 0.14), rgba(46, 115, 109, 0.05)) !important;
}

/* Any explicit-white modal/panel bg fallback */
.modal, .modal-head, .modal-foot,
.style-panel, .meta-field input, .sec-card,
.song-title-field input, .sec-bar,
.sec-body textarea,
.search-box, .search-box input {
  background: var(--panel-2);
  color: var(--ink);
  border-color: var(--border-2);
}
.sec-body textarea,
.song-title-field input,
.meta-field input,
.sec-label-in {
  background: var(--panel) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Body + html baseline */
html, body { background: var(--bg); color: var(--ink); }

/* Chrome rows — menubar + toolbar + statusbar */
.menubar {
  background:
    linear-gradient(180deg, #0c1019, #0a0e17);
  border-bottom: 1px solid var(--border-3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02);
}
.toolbar {
  /* INFINITE continuous flow:
     A single repeating gradient that contains BOTH a gold spot and
     a green spot, sliding continuously across the bar. Nothing
     parks, nothing snaps — by the time one color reaches the right
     edge, the next color is already entering from the left, and
     when the pattern slides one full cycle it lines up perfectly
     with where it started (because the first and last color stops
     are identical, both transparent).

     Pattern stops (one cycle = 200% of toolbar width):
        0%   transparent  (matches 100% for seamless repeat)
        25%  GOLD peak    → centered on the left half
        50%  transparent  (gap between gold and green)
        75%  GREEN peak   → centered on the right half
        100% transparent  (matches 0%)

     Over a 12s cycle, the gradient slides left by exactly one full
     200% pattern — so the visual loop is mathematically seamless
     and there is never a moment when the bar feels "stopped". */
  background:
    linear-gradient(
      90deg,
      rgba(220, 175, 95, 0.00)   0%,
      rgba(220, 175, 95, 0.20)  25%,
      rgba(220, 175, 95, 0.00)  50%,
      rgba(74, 150, 145, 0.20)  75%,
      rgba(74, 150, 145, 0.00) 100%
    ) 0 0 / 200% 100% repeat-x,
    linear-gradient(180deg, #0f131e, #0c1019);
  border-bottom: 1px solid var(--border-3);
  animation: toolbarWashFlow 12s linear infinite;
}
/* Slide the gradient left by exactly one full pattern width. Because
   the pattern's first and last stops are identical and `repeat-x` is
   set, position 0 and position -200% paint the same pixels — the
   loop is seamless. */
@keyframes toolbarWashFlow {
  0%   { background-position:    0% 0, 0 0; }
  100% { background-position: -200% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .toolbar { animation: none; }
}
.statusbar {
  background: #0a0e17;
  border-top: 1px solid var(--border-3);
  color: var(--ink-3);
}

/* Workspace shell — glass panels with soft separators */
.workspace { background: var(--bg); }

.library,
.center,
.monitors {
  background: var(--bg-2);
  border-color: var(--border-3);
}

/* Center panel — elevated glass feel */
.center {
  background:
    radial-gradient(circle at 50% 0%, rgba(46, 115, 109, 0.06), transparent 40%),
    var(--bg-2);
}
.center-head {
  background: rgba(20, 24, 36, 0.6);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border-3);
}
.center-title { color: var(--ink); }
.center-meta { color: var(--ink-3); }
.center-empty { color: var(--ink-3); }
.center-empty .big-ico { color: var(--ink-4); }

/* Toolbar buttons — modernized pills */
.tbar-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink-2);
  border-radius: 6px;
}
.tbar-btn:hover:not(:disabled) {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--ink);
}
.tbar-btn.tbar-primary {
  background: linear-gradient(180deg, var(--blue), var(--blue-d));
  border-color: var(--blue-d);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(46, 115, 109, 0.5);
}
.tbar-btn.tbar-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--blue-h), var(--blue));
  box-shadow: 0 6px 20px -4px rgba(46, 115, 109, 0.7);
}

/* Live Output — projector is OPEN.
   When the operator's projector window is up we paint a calm pulsing
   halo on the button so a glance at the toolbar tells you the output
   is connected. The base button styles still apply; we only add a glow
   ring on top via box-shadow animation (no layout shift). */
@keyframes liveOutputPulse {
  0%, 100% {
    box-shadow:
      0 4px 14px -4px rgba(46, 115, 109, 0.5),
      0 0 0 0 rgba(46, 115, 109, 0.55);
  }
  50% {
    box-shadow:
      0 6px 20px -4px rgba(46, 115, 109, 0.75),
      0 0 0 8px rgba(46, 115, 109, 0);
  }
}
.tbar-btn.tbar-primary.is-live {
  animation: liveOutputPulse 1.8s ease-in-out infinite;
  border-color: #4ade80;
}
.tbar-btn.tbar-primary.is-live::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  .tbar-btn.tbar-primary.is-live { animation: none; }
}

/* Head action buttons (.btn-head-action) — Edit Song's action row
   (Add to Schedule · Delete · Save · Close) now sits INLINE inside
   .center-head, not in the old right-aligned .center-actions group.
   This frees the right side of the head for the floating Motion
   button (which lives permanently in that corner). The buttons
   inherit their semantic colors from .btn-primary / .btn-danger /
   default .btn — this class only fixes spacing + caps the row from
   running into the Motion button. */
.btn-head-action {
  margin-left: 4px;
}
/* Pin the editor's action-button group to the right, matching the preview /
   live views, so buttons don't shift between viewing and editing a song. */
.center-head > .btn-head-action:first-of-type {
  margin-left: auto;
}
/* Header buttons keep their natural width and NEVER shrink or wrap their label
   onto two lines — the title/meta truncate to make room instead. */
.center-head > .btn,
.center-head .song-seg {
  flex: 0 0 auto;
}
.center-head > .btn,
.center-head > .btn span {
  white-space: nowrap;
}

/* Motion-button clearance is now handled by .center-head's right padding
   (so it covers every element on every row, not just the last button). The
   old per-element margin-right would double up against that padding. */
.center-head > button:last-of-type,
.center-head > .center-actions {
  margin-right: 0;
}

/* Inline edit button — lives in .center-head next to the title/meta,
   not in the right-aligned .center-actions group. It needs to read as
   "this is a button" at a glance, so we give it a bordered gold accent
   instead of inheriting the flat .btn default. */
.btn-inline-edit {
  margin-left: 4px;
  background: linear-gradient(180deg, rgba(200, 157, 74, 0.14), rgba(200, 157, 74, 0.04));
  border: 1px solid rgba(200, 157, 74, 0.55);
  color: var(--gold, #C89D4A);
  font-weight: 600;
  box-shadow:
    0 2px 6px -2px rgba(200, 157, 74, 0.35),
    0 0 0 2px rgba(200, 157, 74, 0.05);
  transition: background .15s, border-color .15s, box-shadow .2s, transform .12s;
}
.btn-inline-edit:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(200, 157, 74, 0.28), rgba(200, 157, 74, 0.10));
  border-color: rgba(200, 157, 74, 0.85);
  color: var(--gold, #C89D4A);
  box-shadow:
    0 4px 12px -2px rgba(200, 157, 74, 0.5),
    0 0 0 3px rgba(200, 157, 74, 0.08);
}
.btn-inline-edit:active:not(:disabled) { transform: translateY(1px); }
.btn-inline-edit svg { color: currentColor; }

/* Inline "Add to Schedule" button — same inline behaviour as edit but
   tinted blue (action vs. edit) so the two buttons sitting next to
   the title don't blur into each other. */
.btn-inline-add {
  margin-left: 4px;
  background: linear-gradient(180deg, rgba(46, 115, 109, 0.18), rgba(46, 115, 109, 0.05));
  border: 1px solid rgba(46, 115, 109, 0.55);
  color: #6CB5AF;
  font-weight: 600;
  box-shadow:
    0 2px 6px -2px rgba(46, 115, 109, 0.35),
    0 0 0 2px rgba(46, 115, 109, 0.05);
  transition: background .15s, border-color .15s, box-shadow .2s, transform .12s;
}
.btn-inline-add:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(46, 115, 109, 0.32), rgba(46, 115, 109, 0.12));
  border-color: rgba(46, 115, 109, 0.85);
  color: #8ed1cb;
  box-shadow:
    0 4px 12px -2px rgba(46, 115, 109, 0.5),
    0 0 0 3px rgba(46, 115, 109, 0.08);
}
.btn-inline-add:active:not(:disabled) { transform: translateY(1px); }
.btn-inline-add svg { color: currentColor; }

/* Remote button — gold-accented to set it apart from the gray Add
   button it sits next to in the top-left toolbar. Both are still
   pill-shaped so they read as a pair; the color signals that Remote
   opens a pairing flow. Switched from gold to VIOLET to avoid
   stepping on the gold accent used by Motion / the traveling-light
   sweep — violet reads as a fresh "wireless / mobile" hue and
   contrasts cleanly with the gray Add button beside it. */
.tbar-btn.tbar-remote {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.22), rgba(139, 92, 246, 0.06));
  border-color: rgba(139, 92, 246, 0.65);
  color: #c4b1fb;
  font-weight: 600;
  box-shadow:
    0 2px 8px -2px rgba(139, 92, 246, 0.35),
    0 0 0 2px rgba(139, 92, 246, 0.05);
}
.tbar-btn.tbar-remote:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.38), rgba(139, 92, 246, 0.14));
  border-color: rgba(167, 139, 250, 0.95);
  color: #ddd2ff;
  box-shadow:
    0 4px 14px -2px rgba(139, 92, 246, 0.55),
    0 0 0 3px rgba(139, 92, 246, 0.10);
}
.tbar-btn.tbar-remote .tb-ico,
.tbar-btn.tbar-remote:hover .tb-ico { color: #c4b1fb; }

/* Status bar — the credit ("Created by: <name>") now anchors the
   bottom-LEFT corner. The author's name itself is gold (brand) so
   it stands out from the dim meta line around it. */
.statusbar-credit-name {
  color: var(--gold, #C89D4A);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.tbar-btn.tbar-danger {
  background: linear-gradient(180deg, var(--red), var(--red-d));
  border-color: var(--red-d);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(193, 74, 58, 0.5);
}
.tbar-btn.tbar-danger:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--red-h), var(--red));
  box-shadow: 0 6px 20px -4px rgba(193, 74, 58, 0.7);
}

/* Transport buttons */
.tp-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink-2);
  border-radius: 6px;
}
.tp-btn:hover:not(:disabled) { background: var(--panel-2); color: var(--ink); }
.tp-btn.tp-go {
  background: linear-gradient(180deg, var(--red), var(--red-d));
  border-color: var(--red-d);
  color: #fff;
}

/* Menu items */
.menu-item { color: var(--menubar-ink-dim); }
.menu-item:hover { color: var(--menubar-ink); background: rgba(255,255,255,0.05); }
.menu-item.open { background: var(--panel-2); color: var(--menubar-ink); }

.menu-dropdown {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-menu);
}
.menu-dropdown button { color: var(--ink-2); }
.menu-dropdown button:hover { background: var(--panel-2); color: var(--ink); }

/* Library tabs */
.lib-tabs {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-3);
}
.lib-tab { color: var(--ink-3); background: transparent; }
.lib-tab:hover { color: var(--ink); background: var(--panel); }
.lib-tab.active {
  color: var(--ink);
  background: var(--panel-2);
  border-color: var(--border-3);
  border-bottom-color: transparent;
}

/* Library rows — dark cards */
.lib-body { background: var(--bg-2); }
.lib-row {
  background: transparent;
  border-bottom: 1px solid var(--border-3);
  color: var(--ink-2);
}
.lib-row:hover {
  background: var(--panel);
}
.lib-row.active {
  background: linear-gradient(90deg, rgba(46, 115, 109, 0.14), transparent);
  color: var(--ink);
}
.lib-row-title { color: var(--ink); }
.lib-row-sub { color: var(--ink-3); }
.lib-row-ico {
  background: rgba(46, 115, 109, 0.12);
  color: var(--blue-ink);
  border-radius: 6px;
}
.lib-row.active .lib-row-ico {
  background: var(--blue) !important;
  color: #fff;
}

/* Library search box */
.lib-search { background: var(--bg-2); border-bottom: 1px solid var(--border-3); }
.search-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink);
}
.search-box:focus-within {
  background: var(--panel-2);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 115, 109, 0.2);
}
.search-box input {
  background: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
}

/* Library action bar */
.lib-actions {
  background: var(--bg-2);
  border-top: 1px solid var(--border-3);
}
.btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink-2);
  border-radius: 6px;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .2s ease;
}
.btn:hover:not(:disabled) { background: var(--panel-2); color: var(--ink); }
.btn.btn-primary {
  background: linear-gradient(180deg, var(--blue), var(--blue-d));
  border-color: var(--blue-d);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(46, 115, 109, 0.45);
}
.btn.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--blue-h), var(--blue));
  box-shadow: 0 6px 20px -4px rgba(46, 115, 109, 0.65);
}
.btn.btn-danger, .btn.btn-solid-danger {
  background: linear-gradient(180deg, var(--red), var(--red-d));
  border-color: var(--red-d);
  color: #fff;
}

/* Schedule bar */
.schedule-bar-wrap {
  background: var(--bg-2);
  border-top: 1px solid var(--border-3);
}
.schedule-label { color: var(--ink-3); }
.schedule-bar { background: var(--bg); border: 1px solid var(--border-3); }
.schedule-empty { color: var(--ink-4); }

.sched-section { border-bottom: 1px solid var(--border-3); }
.sched-section-label { color: var(--ink-3); }

.sched-card {
  border-radius: 6px;
  border: 1px solid var(--border-2) !important;
  color: var(--ink-2);
}
.sched-card:hover:not(.live) {
  background: var(--panel-2) !important;
  border-color: var(--border) !important;
  color: var(--ink);
}
.sched-card.selected {
  border-color: var(--blue) !important;
  color: var(--ink);
}
.sched-card.live {
  border-color: var(--red) !important;
  color: var(--ink);
}
.sched-title { color: var(--ink); font-weight: 500; }
.sched-sub { color: var(--ink-3); }
.sched-count { color: var(--ink-4); }
.sched-live-badge {
  background: var(--red);
  color: #fff;
  padding: 2px 7px;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  border-radius: 3px;
}
.sched-remove { color: var(--ink-4); }
.sched-remove:hover { color: var(--red); background: rgba(193, 74, 58, 0.12); }

/* Monitors */
.monitor-head {
  background: rgba(20, 24, 36, 0.8);
  border-bottom: 1px solid var(--border-3);
}
.monitor-title { color: var(--ink-3); }
.monitor-ref   { color: var(--ink-4); }
.monitor-frame {
  background: #000;
  border: 1px solid var(--border-3);
  border-radius: 6px;
}
.monitor-stage { background: #000; }
.transport { background: transparent; }

.monitor-live.on-air .monitor-head { color: #e8a89a; }
.monitor-live.on-air .monitor-frame {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 0 24px -4px rgba(193, 74, 58, 0.4);
}

/* Pills */
.pill {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink-3);
  border-radius: 999px;
}
.pill.pill-ok { background: rgba(16, 185, 129, 0.14); color: #34d399; border-color: rgba(16, 185, 129, 0.3); }
.pill.pill-ok .dot { background: var(--green); }
.pill.pill-mute { background: var(--panel); color: var(--ink-4); }
.pill.pill-mute .dot { background: var(--ink-4); }
.pill.pill-live { background: rgba(193, 74, 58, 0.16); color: #e8a89a; border-color: rgba(193, 74, 58, 0.4); }
.pill.pill-live .dot { background: var(--red); }

/* Brand mark — actual RW logo */
.brand-mark {
  background: url('../../assets/logo.svg?v=3') center/cover no-repeat !important;
  border-radius: 3px;
  width: 18px !important;
  height: 18px !important;
  box-shadow: 0 0 0 1px rgba(200, 157, 74, 0.2);
}
.brand-name { color: var(--ink); font-weight: 600; }

/* Slide cards (center grid) */
.slide-card {
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  color: var(--ink-2);
}
.slide-card:hover {
  background: var(--panel-2);
  border-color: var(--blue);
  color: var(--ink);
}
.slide-preview { background: #000; }
.slide-foot {
  background: var(--panel-2);
  border-top: 1px solid var(--border-3);
}
.slide-label { color: var(--ink-3); }
.slide-num { color: var(--ink-4); }

/* Editor — song editor */
.song-editor { color: var(--ink); }
.song-title-field input { font-size: 22px; font-weight: 600; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; padding: 10px 0 !important; }
.song-title-field input:focus { border-bottom-color: var(--blue) !important; }

.meta-field label { color: var(--ink-3); }
.sec-card {
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 8px;
}
.sec-bar { background: var(--panel-2); border-bottom: 1px solid var(--border-3); }
.sec-label-in { border: 1px solid var(--border) !important; background: var(--panel) !important; color: var(--ink) !important; border-radius: 4px; padding: 5px 9px; }
.sec-body textarea {
  border: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  padding: 14px !important;
}

.sections-label { color: var(--ink-3); }

/* Style panel in editor */
.style-panel {
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 8px;
}
.style-title { color: var(--ink-3); }
.style-row label { color: var(--ink-3); }
.style-val { color: var(--ink-2); }
.theme-chip { border: 1px solid var(--border); }
.theme-chip.active { box-shadow: 0 0 0 2px var(--blue); }
.align-chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--ink-2); border-radius: 4px; }
.align-chip:hover { background: var(--panel-3); color: var(--ink); }
.align-chip.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Bible tab */
.bible-controls { background: var(--bg-2); border-bottom: 1px solid var(--border-3); }

/* Bible book + chapter selects — restore dark theme + chevron */
.bible-controls .select,
.bible-controls .select-sm {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--panel);
  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='%238b93a6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 26px;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.bible-controls .select:hover,
.bible-controls .select-sm:hover {
  background-color: var(--panel-2);
  border-color: var(--border);
}
.bible-controls .select:focus,
.bible-controls .select-sm:focus {
  background-color: var(--panel-2);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 115, 109, 0.2);
}
.bible-controls .select optgroup,
.bible-controls .select option {
  background: var(--panel);
  color: var(--ink);
}

/* Translation chips container — dark, not white */
.trans-chips {
  background: var(--panel);
  border-color: var(--border);
  flex-wrap: wrap;
}
/* Verses/slide label */
.bible-pager-label {
  color: var(--ink-3);
}
.trans-chip {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink-3);
  border-radius: 4px;
}
.trans-chip:hover { background: var(--panel-2); color: var(--ink); }
.trans-chip.active {
  background: linear-gradient(180deg, var(--blue), var(--blue-d));
  border-color: var(--blue-d);
  color: #fff;
}

.verse-row {
  background: transparent;
  border-bottom: 1px solid var(--border-3);
  color: var(--ink-2);
}
.verse-row:hover:not(.active) {
  background: var(--panel) !important;
  color: var(--ink);
}
.verse-row.active {
  background: linear-gradient(90deg, rgba(46, 115, 109, 0.14), transparent) !important;
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--blue);
}
.verse-num { color: var(--blue-ink); font-weight: 600; }

.bible-state { color: var(--ink-3); }

/* Modals */
.modal-backdrop { background: rgba(0, 0, 0, 0.72); }
.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--ink);
  box-shadow: var(--shadow-2);
  border-radius: 10px;
}
.modal-head { background: var(--panel-2); border-bottom: 1px solid var(--border-3); border-radius: 10px 10px 0 0; }
.modal-foot { background: var(--panel-2); border-top: 1px solid var(--border-3); border-radius: 0 0 10px 10px; }
.modal-title { color: var(--ink); }
.modal-close { color: var(--ink-3); }
.modal-close:hover { color: var(--ink); background: rgba(255,255,255,0.06); }
.modal-body { color: var(--ink-2); }
.confirm-msg { color: var(--ink-2); }

/* Toasts */
.toast {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-2);
}
.toast.ok    { border-left: 3px solid var(--green); }
.toast.error { border-left: 3px solid var(--red);   }
.toast.info  { border-left: 3px solid var(--blue);  }

/* Inputs in dark theme */
input[type="text"],
input[type="search"],
input[type="color"],
input[type="file"],
input[type="range"],
textarea,
select {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--border);
}
input[type="text"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  background: var(--panel-3);
  border-color: var(--border);
}
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  background: var(--panel-2);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 115, 109, 0.2);
}
select {
  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='%238b93a6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Scrollbars — dark theme tuned */
*::-webkit-scrollbar-thumb {
  background: rgba(139, 147, 166, 0.25);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(46, 115, 109, 0.6);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Dragging feedback — lift + shadow */
.sched-card.dragging {
  opacity: 0.75;
  transform: rotate(-1.5deg) scale(1.02);
  box-shadow: 0 14px 26px rgba(0,0,0,0.55);
  z-index: 10;
}
.sched-card.drag-over {
  border-color: var(--blue) !important;
  background: var(--blue-soft) !important;
}

/* Global font smoothing on dark bg */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle grain for film texture (optional cosmetic) */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(46, 115, 109, 0.05), transparent 40%),
    radial-gradient(circle at 85% 50%, rgba(46, 115, 109, 0.05), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(200, 157, 74, 0.03), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.menubar, .toolbar, .workspace, .statusbar { position: relative; z-index: 1; }

/* =============================================================
   Initial app loader — branded splash shown for ~3.5s on boot.
   ============================================================= */
.app-loader {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(46, 115, 109, 0.18), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(200, 157, 74, 0.12), transparent 55%),
    var(--bg);
  opacity: 1;
  transition: opacity .7s cubic-bezier(.3, .1, .2, 1), visibility 0s linear .7s;
}
.app-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.app-loader .loader-content {
  text-align: center;
  padding: 40px;
}
.app-loader .loader-logo-wrap {
  position: relative;
  width: 110px; height: 110px;
  margin: 0 auto 28px;
}
.app-loader .loader-ring {
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 2px solid rgba(200, 157, 74, 0.1);
  border-top-color: #C89D4A;
  border-right-color: #2E736D;
  animation: loaderRingSpin 1.6s linear infinite;
}
.app-loader .loader-ring.inner {
  inset: 10px;
  border: 2px solid rgba(46, 115, 109, 0.12);
  border-bottom-color: #2E736D;
  animation: loaderRingSpin 2.4s linear infinite reverse;
}
@keyframes loaderRingSpin { to { transform: rotate(360deg); } }

.app-loader .loader-logo {
  position: absolute; inset: 18px;
  border-radius: 18px;
  background: url('../../assets/logo.svg?v=3') center/cover no-repeat, #C89D4A;
  box-shadow:
    0 0 60px rgba(200, 157, 74, 0.55),
    0 0 120px rgba(46, 115, 109, 0.25);
  animation: loaderLogoPulse 2s ease-in-out infinite;
}
@keyframes loaderLogoPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 60px rgba(200, 157, 74, 0.5),  0 0 120px rgba(46, 115, 109, 0.2); }
  50%      { transform: scale(1.06); box-shadow: 0 0 90px rgba(200, 157, 74, 0.75), 0 0 160px rgba(46, 115, 109, 0.35); }
}

.app-loader .loader-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 36px; font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.app-loader .loader-tagline {
  color: var(--ink-3);
  margin: 0 0 34px;
  font-size: 14px;
  font-family: var(--sans);
}
.app-loader .loader-bar {
  width: 240px; height: 3px;
  background: rgba(200, 157, 74, 0.12);
  border-radius: 3px;
  margin: 0 auto 18px;
  overflow: hidden;
  position: relative;
}
.app-loader .loader-bar-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C89D4A, #2E736D, #C89D4A);
  background-size: 200% 100%;
  animation:
    loaderBarFill 3.2s cubic-bezier(.3,.1,.25,1) forwards,
    loaderBarShimmer 1.5s linear infinite;
  border-radius: 3px;
}
@keyframes loaderBarFill    { to { width: 100%; } }
@keyframes loaderBarShimmer { to { background-position: 200% 0; } }

.app-loader .loader-status {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-4);
  margin: 0;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
  min-height: 14px;
}
.app-loader .loader-status.step-change { animation: loaderStatusFade .5s cubic-bezier(.22, .61, .36, 1); }
@keyframes loaderStatusFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hide loader in demo/embed mode (iframe on landing) */
body.no-loader .app-loader { display: none; }

/* =============================================================
   Login gate — credential prompt shown before the app unlocks.
   Highest z-index, full-screen overlay.
   ============================================================= */
.login-gate {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 25% 20%, rgba(46, 115, 109, 0.2), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(200, 157, 74, 0.14), transparent 55%),
    var(--bg);
  font-family: var(--sans);
  opacity: 1;
  transition: opacity .45s cubic-bezier(.3,.1,.2,1), visibility 0s linear .45s;
}
.login-gate.hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: rgba(20, 24, 36, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px 32px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  animation: loginIn .5s cubic-bezier(.22,.61,.36,1);
}
@keyframes loginIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-card.shake {
  animation: loginShake .5s cubic-bezier(.36, .07, .19, .97);
}
@keyframes loginShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.login-brand {
  text-align: center;
  margin-bottom: 28px;
}
.login-mark {
  width: 68px; height: 68px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: url('../../assets/logo.svg?v=3') center/cover no-repeat;
  box-shadow:
    0 0 40px rgba(200, 157, 74, 0.45),
    0 0 0 1px rgba(200, 157, 74, 0.25);
  animation: loginMarkPulse 2.8s ease-in-out infinite;
}
@keyframes loginMarkPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(200, 157, 74, 0.4); }
  50%      { box-shadow: 0 0 60px rgba(200, 157, 74, 0.65); }
}
.login-brand h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 28px; font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}
.login-brand p {
  color: var(--ink-3);
  margin: 0;
  font-size: 13px;
}

.login-field {
  margin-bottom: 16px;
}
.login-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.login-field input {
  width: 100%;
  background: rgba(12, 16, 25, 0.7) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  color: var(--ink) !important;
  font-size: 14px;
  transition: border-color .2s, background-color .2s, box-shadow .2s !important;
}
.login-field input:hover {
  border-color: var(--border) !important;
  background: rgba(12, 16, 25, 0.9) !important;
}
.login-field input:focus {
  outline: none;
  border-color: var(--blue) !important;
  background: rgba(12, 16, 25, 1) !important;
  box-shadow: 0 0 0 3px rgba(46, 115, 109, 0.2) !important;
}

.login-error {
  min-height: 18px;
  color: #e8a89a;
  font-size: 12px;
  font-weight: 500;
  margin: 6px 0 10px;
  text-align: center;
  transition: opacity .2s;
}

.login-submit {
  width: 100%;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #fff;
  border: 1px solid var(--blue-d);
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(46, 115, 109, 0.5);
  transition: transform .15s, box-shadow .2s, filter .2s;
  margin-top: 6px;
  position: relative; overflow: hidden;
}
.login-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -6px rgba(46, 115, 109, 0.7);
  filter: brightness(1.08);
}
.login-submit:active { transform: translateY(0); }
.login-submit svg { width: 16px; height: 16px; transition: transform .2s; }
.login-submit:hover svg { transform: translateX(3px); }
.login-submit::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.login-submit:hover::before { transform: translateX(120%); }

.login-hint {
  text-align: center;
  margin: 20px 0 0;
  color: var(--ink-4);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Hide gate in demo mode (iframe embed) */
body.no-loader .login-gate { display: none; }

/* =============================================================
   v5 — Signature Polish
   Layered brand character: gold hairlines, broadcast-grade monitor
   chrome, serif titles, tactile elevation, ornamental flourishes.
   Zero layout changes — pure visual refinement.
   ============================================================= */

:root {
  --gold:        #C89D4A;
  --gold-h:      #E0B560;
  --gold-soft:   rgba(200, 157, 74, 0.16);
  --myrtle:      #2E736D;
  --myrtle-h:    #3A8B85;

  --hairline-gold:   linear-gradient(90deg,
                      transparent 0%,
                      rgba(200, 157, 74, 0.0) 6%,
                      rgba(200, 157, 74, 0.55) 50%,
                      rgba(200, 157, 74, 0.0) 94%,
                      transparent 100%);
  --hairline-myrtle: linear-gradient(90deg,
                      transparent 0%,
                      rgba(46, 115, 109, 0.5) 50%,
                      transparent 100%);

  --shadow-sunk:   inset 0 2px 6px rgba(0, 0, 0, 0.55),
                   inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --shadow-raise:  0 1px 0 rgba(255, 255, 255, 0.04) inset,
                   0 6px 18px -8px rgba(0, 0, 0, 0.6);
}

/* -------- Menubar — gold hairline + serif brand ------------- */
.menubar {
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 1px 0 rgba(0,0,0,0.4);
}
.menubar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--hairline-gold);
  pointer-events: none;
  opacity: 0.7;
}

.brand {
  border-right: 1px solid rgba(200, 157, 74, 0.12);
}
.brand-name {
  font-family: var(--serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  background: linear-gradient(180deg, #f5ead0 0%, #d4b57a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-mark {
  box-shadow:
    0 0 0 1px rgba(200, 157, 74, 0.35),
    0 0 14px rgba(200, 157, 74, 0.28) !important;
}

/* Pills in menubar — sharper ------------------------------- */
.pill {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0 10px;
  height: 18px;
  text-transform: uppercase;
}

/* Run-mode pill — only the variant matching the current run mode
   is shown. `data-mode-only` filters; the active variant gets a
   coloured background so it stands out at a glance. */
.pill-mode { display: none; }
html.mode-app    .pill-mode[data-mode-only="app"]     { display: inline-flex; }
html.mode-browser .pill-mode[data-mode-only="browser"] { display: inline-flex; }
.pill-mode-app {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.20), rgba(74, 222, 128, 0.06));
  border: 1px solid rgba(74, 222, 128, 0.55);
  color: #86efac;
  align-items: center;
  border-radius: 999px;
}
.pill-mode-browser {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.20), rgba(139, 92, 246, 0.06));
  border: 1px solid rgba(139, 92, 246, 0.55);
  color: #c4b1fb;
  align-items: center;
  border-radius: 999px;
}

/* CSS-side hooks for future feature differences. Anything that
   should ONLY appear when running as the installed app:
       html.mode-app  .app-only      { display: ...; }
       html.mode-browser .browser-only { display: ...; }
   Anything that should be HIDDEN in app mode (e.g. "Get the app"
   promos) can target html.mode-browser the same way. Leaving the
   selector hooks empty here so they don't accidentally affect
   anything until you add real rules. */

/* -------- Toolbar — tactile buttons ----------------------- */
.toolbar {
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.025) inset,
    0 -1px 0 rgba(0,0,0,0.3) inset;
  /* The traveling lights render outside the toolbar's bounds while
     they're absolutely positioned, so we clip to the toolbar so they
     don't bleed into the menubar or workspace. */
  overflow: hidden;
  /* `isolation: isolate` creates a stacking context so the ::before /
     ::after light layers can sit at z-index 0 (background) and the
     button children — promoted to z-index 1 below — always paint
     above them. */
  isolation: isolate;
  /* No static border-bottom — the animated flowing strip on ::before
     is the visual divider between toolbar and workspace. */
}
/* Lift toolbar contents above the traveling-light layers. */
.toolbar > * {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------------
   Iridescent flowing borders — instead of a single traveling spot,
   the TOP and BOTTOM edges of the toolbar are continuously lit
   along their ENTIRE length, with gold and green colors that flow
   across them in waves. Always visible, no fade-in/out moments —
   the bar reads as a glowing neon trim that's permanently alive.

   Implementation: each edge is a 2px-tall strip whose background
   is a long repeating gold→green→gold gradient. We animate
   background-position so the colors slide across the strip.
   Box-shadow + filter add an outer glow so the trim looks like
   light spilling onto the toolbar.

   The top strip flows LEFT (background slides right → left), the
   bottom strip flows RIGHT (slides left → right), so the two
   borders feel like they're rotating around the bar in unison.
   ---------------------------------------------------------------- */

/* TOP edge — slim 2px iridescent strip, flows leftward. Quiet trim,
   not a competing light source: lower color opacities (peaks at 0.55
   instead of 1.0) and a fainter glow. */
.toolbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(
    90deg,
    rgba(200, 157, 74, 0.40) 0%,
    rgba(220, 175, 95, 0.55)  8%,
    rgba(200, 157, 74, 0.40) 16%,
    rgba(46, 115, 109, 0.40) 33%,
    rgba(74, 150, 145, 0.55) 42%,
    rgba(46, 115, 109, 0.40) 50%,
    rgba(200, 157, 74, 0.40) 66%,
    rgba(220, 175, 95, 0.55) 75%,
    rgba(200, 157, 74, 0.40) 83%,
    rgba(46, 115, 109, 0.40) 100%
  );
  background-size: 300% 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  animation: toolbarFlowTop 12s linear infinite;
  will-change: background-position;
  /* Very subtle inner glow only — no big halo to spill onto buttons. */
  box-shadow: 0 1px 3px rgba(200, 157, 74, 0.10);
}
@keyframes toolbarFlowTop {
  0%   { background-position:   0% 0; }
  100% { background-position: -300% 0; }
}

/* BOTTOM edge — same toned-down gradient, flows rightward. */
.toolbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(
    90deg,
    rgba(46, 115, 109, 0.40) 0%,
    rgba(74, 150, 145, 0.55)  8%,
    rgba(46, 115, 109, 0.40) 16%,
    rgba(200, 157, 74, 0.40) 33%,
    rgba(220, 175, 95, 0.55) 42%,
    rgba(200, 157, 74, 0.40) 50%,
    rgba(46, 115, 109, 0.40) 66%,
    rgba(74, 150, 145, 0.55) 75%,
    rgba(46, 115, 109, 0.40) 83%,
    rgba(200, 157, 74, 0.40) 100%
  );
  background-size: 300% 100%;
  background-repeat: repeat-x;
  background-position: 0 0;
  animation: toolbarFlowBottom 12s linear infinite;
  will-change: background-position;
  /* Very subtle inner glow only — no big halo to spill onto buttons. */
  box-shadow: 0 -1px 3px rgba(74, 150, 145, 0.10);
}
@keyframes toolbarFlowBottom {
  0%   { background-position:    0% 0; }
  100% { background-position:  300% 0; }
}

/* Honor reduced-motion — freeze the flow but keep the colored
   strips visible so the toolbar still has its trim. */
@media (prefers-reduced-motion: reduce) {
  .toolbar::before,
  .toolbar::after { animation: none; }
}

.tbar-btn {
  background: linear-gradient(180deg, #1a1f2e 0%, #141824 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 1px 2px rgba(0,0,0,0.35);
  font-weight: 500;
}
.tbar-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #222a3d 0%, #1a1f2e 100%);
  border-color: rgba(200, 157, 74, 0.28);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 4px 14px -4px rgba(200, 157, 74, 0.2),
    0 1px 2px rgba(0,0,0,0.4);
}
.tbar-btn .tb-ico { color: var(--ink-3); }
.tbar-btn:hover .tb-ico { color: var(--gold-h); }

/* ============================================================
   Solid GREEN stroke on every neutral button. Themed buttons
   (Live Output green-teal, Save green-teal, Remote violet) keep
   their own colors. When the button's action engages — JS adds
   the .tbar-live class — the existing tbarLiveBlink animation
   above (line ~7470) takes over and the stroke pulses GOLD.
   So the visual contract is:
       neutral  →  green static stroke
       engaged  →  gold blinking stroke
   ============================================================ */
.tbar-btn:not(.tbar-primary):not(.tbar-remote):not(.tbar-live) {
  border-color: rgba(46, 115, 109, 0.6);
}
/* Hover keeps the gold accent so the click target still gives
   feedback; without this our green default would beat the hover
   rule above by specificity. */
.tbar-btn:not(.tbar-primary):not(.tbar-remote):not(.tbar-live):hover:not(:disabled) {
  border-color: rgba(200, 157, 74, 0.45);
}
/* Transport (Prev / Next) — green stroke; Go button keeps its red
   so it stands out as the "push live" action. */
.tp-btn:not(.tp-go) {
  border-color: rgba(46, 115, 109, 0.6);
}
.tp-btn:not(.tp-go):hover:not(:disabled) {
  border-color: rgba(200, 157, 74, 0.45);
}
/* Workspace head action buttons (Edit Song row): Add to Schedule,
   Close, etc. The themed ones (.btn-primary Save, .btn-danger Delete)
   keep their semantic colors. */
.btn.btn-head-action:not(.btn-primary):not(.btn-danger):not(.btn-solid-danger) {
  border-color: rgba(46, 115, 109, 0.6);
}
.btn.btn-head-action:not(.btn-primary):not(.btn-danger):not(.btn-solid-danger):hover:not(:disabled) {
  border-color: rgba(200, 157, 74, 0.45);
}

.tbar-btn.tbar-primary {
  background: linear-gradient(180deg, #3A8B85 0%, #1F5B56 100%);
  border-color: #1F5B56;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(200, 157, 74, 0.2),
    0 6px 18px -6px rgba(46, 115, 109, 0.6);
}
.tbar-btn.tbar-primary:hover:not(:disabled) {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 0 0 1px rgba(200, 157, 74, 0.5),
    0 8px 24px -6px rgba(46, 115, 109, 0.8);
}
.tbar-btn.tbar-primary .tb-ico,
.tbar-btn.tbar-primary:hover .tb-ico { color: #fff; }

.tbar-btn.tbar-danger {
  background: linear-gradient(180deg, #d46350 0%, #9a3a2e 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 0 0 1px rgba(193, 74, 58, 0.4),
    0 6px 18px -6px rgba(193, 74, 58, 0.5);
}
.tbar-btn.tbar-danger:hover:not(:disabled) {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 0 0 1px rgba(232, 120, 95, 0.6),
    0 8px 24px -6px rgba(193, 74, 58, 0.8);
}

.tbar-group + .tbar-group {
  border-left: 1px solid rgba(200, 157, 74, 0.08);
}

/* -------- Library tabs — gold accent on active ------------ */
.lib-tab.active {
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
}
.lib-tab.active::after {
  height: 2px;
  background: linear-gradient(90deg,
    rgba(200, 157, 74, 0.0) 0%,
    #C89D4A 50%,
    rgba(200, 157, 74, 0.0) 100%);
  box-shadow: 0 0 8px rgba(200, 157, 74, 0.5);
}
.lib-tab [data-icon] { color: currentColor; }
.lib-tab.active [data-icon] { color: var(--gold); }

/* -------- Library rows — refined active state ------------- */
.lib-row::before {
  background: linear-gradient(180deg, var(--gold), var(--myrtle)) !important;
  width: 2px !important;
}
.lib-row.active {
  background: linear-gradient(90deg,
    rgba(200, 157, 74, 0.10) 0%,
    rgba(46, 115, 109, 0.06) 40%,
    transparent 100%) !important;
}
.lib-row.active .lib-row-ico {
  background: linear-gradient(135deg, var(--gold), var(--myrtle)) !important;
  box-shadow: 0 0 0 1px rgba(200, 157, 74, 0.3);
}
.lib-row-ico {
  background: rgba(46, 115, 109, 0.12);
  transition: background .18s ease, transform .18s ease;
}
.lib-row:hover .lib-row-ico {
  transform: scale(1.06);
  background: rgba(200, 157, 74, 0.14);
  color: var(--gold-h);
}

/* -------- Search box — gold focus accent ------------------ */
.search-box:focus-within {
  border-color: var(--gold) !important;
  box-shadow:
    0 0 0 3px rgba(200, 157, 74, 0.18),
    0 2px 12px -4px rgba(200, 157, 74, 0.3) !important;
}
.search-box [data-icon] { color: var(--ink-4); transition: color .2s; }
.search-box:focus-within [data-icon] { color: var(--gold-h); }

/* -------- Bible verses — serif number, hanging indent ----- */
.verse-row {
  padding-left: 44px;
}
.verse-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold) !important;
  top: 7px;
  left: 12px;
}
.verse-row.active .verse-num { color: var(--gold-h) !important; }

.trans-chip.active {
  background: linear-gradient(135deg, var(--myrtle), var(--myrtle-h)) !important;
  box-shadow:
    0 0 0 1px rgba(200, 157, 74, 0.3),
    0 2px 8px -2px rgba(46, 115, 109, 0.5);
}

/* -------- Center workspace — serif title, gold meta ------- */
.center {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(200, 157, 74, 0.04), transparent 50%),
    radial-gradient(ellipse at 50% 110%, rgba(46, 115, 109, 0.04), transparent 50%),
    var(--bg-2) !important;
}
.center-head {
  position: relative;
}
.center-head::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 0;
  height: 1px;
  background: var(--hairline-gold);
  opacity: 0.35;
  pointer-events: none;
}
.center-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
}
.center-meta {
  color: var(--gold) !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-size: 9.5px;
}

.center-empty {
  padding: 80px 40px !important;
}
.center-empty .big-ico {
  width: 64px !important; height: 64px !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(200, 157, 74, 0.12), transparent 70%),
    var(--panel) !important;
  border: 1px solid rgba(200, 157, 74, 0.18) !important;
  border-radius: 50% !important;
  color: var(--gold) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4) inset,
    0 0 40px rgba(200, 157, 74, 0.08),
    0 12px 30px -10px rgba(0, 0, 0, 0.6);
}
.center-empty .big-ico svg { width: 28px; height: 28px; }
.center-empty h3 {
  font-family: var(--serif);
  font-size: 20px !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  margin-top: 8px !important;
}
.center-empty p {
  font-size: 13px !important;
  color: var(--ink-3) !important;
  max-width: 380px;
}

/* =============================================================
   Workspace verse watermark — sits BEHIND the slide cards.
   Slides are always on top; the verse shows in the empty space
   around them (and fills the workspace entirely when no item is
   selected). Achieved by hoisting the workspace background up to
   .center-wrap, making .center transparent, and parking the verse
   at z-index 0 in .center-wrap so the .center content sits over
   it. Slide cards and the editor still have their own opaque
   backgrounds and naturally cover the verse where they sit.
   ============================================================= */

/* Move the panel background ONTO .center-wrap so .center can go
   transparent without the operator seeing any colour shift. */
.center-wrap {
  background:
    radial-gradient(circle at 50% 0%, rgba(46, 115, 109, 0.06), transparent 40%),
    var(--bg-2, #0c111a);
}
/* .center itself needs to be transparent so the verse beneath it
   shows through the empty space between slide cards. Slide cards
   inside .center keep their opaque section colours, so they
   visually cover the watermark wherever they sit. */
.center-wrap > .center {
  background: transparent !important;
  position: relative;
  z-index: 1;                 /* above the verse (z-index: 0) */
}

.workspace-verse-bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 32px;
  margin: 0;
  pointer-events: none;       /* clicks pass through */
  user-select: none;
  z-index: 0;                 /* behind .center and its slide cards */
  color: var(--ink-3, #6b7380);
  opacity: 0;
  animation: workspaceVerseIn 1.2s cubic-bezier(.22, .61, .36, 1) 0.4s forwards;
}
.workspace-verse-bg blockquote {
  font-family: var(--serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-2, #b2bccc);
  margin: 0 0 22px;
  max-width: 980px;
  text-wrap: balance;
  /* Drop shadow gives the text just enough contrast to read over
     light slide cards (chorus = green) AND dark surface alike. */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.workspace-verse-bg figcaption {
  font-family: var(--serif, 'Source Serif 4', Georgia, serif);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 20px);
  letter-spacing: 0.04em;
  color: var(--gold, #C89D4A);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
/* Single opacity for every workspace state — the operator chose
   to keep the verse fully visible whether slides are showing or
   not. Same level of presence, no per-state fading. */
@keyframes workspaceVerseIn {
  to { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-verse-bg { animation: none; opacity: 0.85; }
}

/* Empty workspace: the background verse watermark is the focal point, so the
   guidance is a single subtle line anchored at the bottom — clear of the
   centered verse it used to collide with. */
.center-body--empty { position: relative; }
.center-empty-hint {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0; padding: 0 18px;
  text-align: center;
  font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--ink-3); opacity: 0.7;
}
.center-empty-ico { display: inline-flex; flex: 0 0 auto; opacity: 0.75; }
.center-empty-ico svg { width: 16px; height: 16px; }

/* -------- Lyric Backgrounds dock + gallery --------
   The dock is a persistent strip below #center (see index.html #bg-dock),
   so the picker stays visible through every workspace view — empty, song
   slides, scripture — instead of vanishing when a song is opened. */
.bg-dock { flex: 0 0 auto; min-width: 0; }
.bg-gallery {
  border-top: 1px solid rgba(200, 157, 74, 0.18);
  padding: 10px 14px 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.12));
}
.bg-gallery-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 2px 10px;
}
.bg-gallery-title {
  font-family: var(--serif);
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--ink);
}
.bg-gallery-sub { font-size: 11.5px; color: var(--ink-3); }
.bg-gallery-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 157, 74, 0.4) transparent;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
.bg-gallery-grid::-webkit-scrollbar { height: 8px; }
.bg-gallery-grid::-webkit-scrollbar-track { background: transparent; }
.bg-gallery-grid::-webkit-scrollbar-thumb { background: rgba(200, 157, 74, 0.3); border-radius: 999px; }
.bg-gallery-grid:hover::-webkit-scrollbar-thumb { background: rgba(200, 157, 74, 0.5); }
.bg-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: center;
  scroll-snap-align: start;
  /* Off-screen tiles in the horizontal strip skip render/animation work. */
  content-visibility: auto;
  contain-intrinsic-size: 132px 96px;
}
.bg-tile-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.bg-tile:hover .bg-tile-thumb { transform: translateY(-2px); border-color: rgba(200, 157, 74, 0.55); }
.bg-tile:focus-visible { outline: none; }
.bg-tile:focus-visible .bg-tile-thumb { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(200, 157, 74, 0.5); }
/* Uploaded clip thumbnail — poster frame fills the tile. */
.bg-tile-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-tile-vidtag {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: rgba(255, 255, 255, 0.5); background: #0c0f16;
}
/* Action tiles: Upload (dashed gold) + None (muted hatch). */
.bg-tile-thumb--upload {
  display: flex; align-items: center; justify-content: center;
  background: rgba(200, 157, 74, 0.10);
  border-style: dashed; border-color: rgba(200, 157, 74, 0.5);
  color: var(--gold);
}
.bg-tile-thumb--upload svg { width: 22px; height: 22px; }
.bg-tile-thumb--none {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #15171d 0 8px, #11131a 8px 16px);
  color: var(--ink-3);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
}
/* Remove (×) — only on uploaded tiles, top-right, reveals on hover/focus. */
.bg-tile-del {
  position: absolute; top: 3px; right: 3px; z-index: 4;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; color: #fff;
  background: rgba(18, 12, 12, 0.72);
  opacity: 0; transition: opacity 120ms ease, background 120ms ease;
  cursor: pointer;
}
.bg-tile:hover .bg-tile-del, .bg-tile:focus-within .bg-tile-del { opacity: 1; }
.bg-tile-del:hover { background: #c0392b; }
.bg-tile-name {
  font-size: 11px; line-height: 1.2; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 132px;
}
.bg-tile.active .bg-tile-thumb {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200, 157, 74, 0.4), 0 6px 18px -6px rgba(200, 157, 74, 0.5);
}
.bg-tile.active .bg-tile-name { color: var(--gold); font-weight: 600; }
/* Active check sits top-LEFT so it never collides with the top-right ×. */
.bg-tile.active .bg-tile-thumb::after {
  content: '✓';
  position: absolute; top: 4px; left: 5px; z-index: 3;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #1a1206;
  background: var(--gold);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* -------- Slide cards — vignette + refined label ---------- */
.slide-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 8px rgba(0,0,0,0.35);
}
.slide-preview::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.slide-preview.image::after { opacity: 0.6; }
.slide-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--gold) !important;
}
.slide-card.live .slide-label { color: #e8a89a !important; }
.slide-num {
  font-family: var(--mono);
  color: var(--ink-4) !important;
}
.slide-card.selected {
  border-color: var(--gold) !important;
  box-shadow:
    0 0 0 2px rgba(200, 157, 74, 0.35),
    0 8px 24px -8px rgba(200, 157, 74, 0.4) !important;
}

/* =============================================================
   LIVE slide — rotating gold + green border light.
   The slide's BORDER itself is replaced by a conic-gradient
   ring (via `border: transparent` + dual background-clip), and
   the conic gradient's `from` angle is animated so two glowing
   spots — gold and green, 180° apart — orbit the card's stroke.
   Much more visible than the previous ::before+mask trick: the
   light IS the border, not just behind it.
   ============================================================= */

/* CSS custom property registered with @property so it can be
   animated as a real <angle>. Without this, browsers treat the
   value as a string and skip interpolation, giving a hard jump
   from 0deg to 360deg instead of a smooth rotation. */
@property --slide-live-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Selector list includes the `[class*="section-"]` variant so this
   wins the cascade over the older `.slide-card.live[class*="section-"]`
   rule (which set a solid gold border + liveBlink animation that
   would clobber our gradient stroke and rotation). */
.slide-card.live,
.slide-card.live[class*="section-"] {
  position: relative;
  /* Old red-pulse + gold-blink animations off — the new rotating
     border takes their place. */
  animation: slideLiveBorderSpin 3s linear infinite !important;
  /* The 4px transparent border is the "canvas" the conic gradient
     paints on. background-clip: border-box draws the gradient
     across the whole box (including the border), and the inner
     linear-gradient is clipped to padding-box so it covers
     everything INSIDE the border, leaving only the border area
     showing the conic gradient. */
  border: 4px solid transparent !important;
  /* THREE background-image layers (top → bottom in paint order):
       1. --live-tint  → padding-box  : the section colour, kept
          visible inside the gradient border so the live card still
          reads as Verse/Chorus/etc. Falls back to transparent when
          no section class is present.
       2. #0c121f      → padding-box  : opaque dark cover beneath
          the tint so the conic gradient doesn't bleed through the
          inside of the card (it stays only on the border).
       3. conic        → border-box   : the actual gold + green
          rotating ring on the 4px stroke. */
  background-color: #0c121f !important;
  background-image:
    linear-gradient(var(--live-tint, transparent), var(--live-tint, transparent)),
    linear-gradient(#0c121f, #0c121f),
    conic-gradient(
      from var(--slide-live-angle),
      transparent 0%,
      rgba(220, 175, 95, 0.0)  6%,
      rgba(220, 175, 95, 1.0) 11%,
      rgba(255, 240, 200, 1.0) 15%,     /* gold core peak */
      rgba(220, 175, 95, 1.0) 19%,
      rgba(220, 175, 95, 0.0) 26%,
      transparent 49%,
      rgba(74, 150, 145, 0.0) 56%,
      rgba(74, 150, 145, 1.0) 61%,
      rgba(180, 230, 220, 1.0) 65%,     /* green core peak */
      rgba(74, 150, 145, 1.0) 69%,
      rgba(74, 150, 145, 0.0) 76%,
      transparent 100%
    ) !important;
  background-origin: border-box !important;
  background-clip: padding-box, padding-box, border-box !important;
  /* Outer halo so the gold/green spill slightly past the stroke
     onto the page — sells "real light", not just a coloured edge. */
  box-shadow:
    0 0 14px rgba(220, 175, 95, 0.55),
    0 0 22px rgba(74, 150, 145, 0.40),
    0 8px 24px rgba(0, 0, 0, 0.55) !important;
  /* Suppress the legacy gold-border-color from the older rule. */
  border-color: transparent !important;
}
@keyframes slideLiveBorderSpin {
  to { --slide-live-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .slide-card.live,
  .slide-card.live[class*="section-"] { animation: none !important; }
}

/* -------- Monitor frames — broadcast chrome --------------- */
.monitor-wrap {
  position: relative;
  background: linear-gradient(180deg, #1a1f2e 0%, #0f131e 100%) !important;
  border: 1px solid rgba(200, 157, 74, 0.15) !important;
  border-radius: 8px;
  padding: 6px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 10px 30px -10px rgba(0, 0, 0, 0.6);
}
.monitor-preview {
  border-color: rgba(74, 150, 145, 0.5) !important;
}
.monitor-live {
  border-color: rgba(193, 74, 58, 0.5) !important;
}

.monitor-head {
  background: transparent !important;
  padding: 4px 8px !important;
  border-bottom: 0 !important;
}
.monitor-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.22em;
}
.monitor-title::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(200, 157, 74, 0.7);
  flex: 0 0 auto;
}
.monitor-live .monitor-title::before {
  background: var(--red);
  box-shadow: 0 0 8px rgba(232, 80, 60, 0.7);
  animation: monTitleDot 1.4s ease-in-out infinite;
}
@keyframes monTitleDot {
  0%, 100% { box-shadow: 0 0 6px rgba(232, 80, 60, 0.5); }
  50%      { box-shadow: 0 0 14px rgba(232, 80, 60, 0.9); }
}
.monitor-preview .monitor-title { color: #6CB5AF !important; }
.monitor-live .monitor-title { color: #e8a89a !important; }
.monitor-title .live-dot { display: none; }

.monitor-ref {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--gold) !important;
  opacity: 0.85;
  text-transform: uppercase;
}

.monitor-frame {
  border-radius: 4px !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.6),
    inset 0 2px 6px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.04);
}
/* Four corner marks — broadcast monitor tick feel */
.monitor-frame::before,
.monitor-frame::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-color: rgba(200, 157, 74, 0.35);
  border-style: solid;
  pointer-events: none;
  z-index: 2;
}
.monitor-frame::before {
  top: 6px; left: 6px;
  border-width: 1px 0 0 1px;
}
.monitor-frame::after {
  bottom: 6px; right: 6px;
  border-width: 0 1px 1px 0;
}
.monitor-live.on-air .monitor-frame {
  box-shadow:
    inset 0 0 0 1px rgba(232, 80, 60, 0.6),
    inset 0 2px 8px rgba(0,0,0,0.6),
    0 0 0 1px var(--red),
    0 0 28px -4px rgba(193, 74, 58, 0.45) !important;
}
.monitor-live.on-air .monitor-frame::before,
.monitor-live.on-air .monitor-frame::after {
  border-color: rgba(232, 120, 95, 0.6);
}

.monitor-stage pre {
  font-family: var(--serif);
  font-weight: 500;
}
.monitor-stage.song pre {
  font-family: var(--sans);
  font-weight: 600;
}
.monitor-stage .mref {
  color: var(--gold) !important;
  opacity: 0.85;
  font-weight: 700;
}

/* -------- Transport — Go button with inner ring glow ------ */
.transport { gap: 8px !important; }
.tp-btn {
  background: linear-gradient(180deg, #1a1f2e 0%, #141824 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 6px rgba(0,0,0,0.4);
  font-weight: 600;
}
.tp-btn:hover:not(:disabled) {
  border-color: rgba(200, 157, 74, 0.3) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 4px 14px -4px rgba(200, 157, 74, 0.25);
}
.tp-btn.tp-go {
  background: linear-gradient(180deg, #d46350 0%, #9a3a2e 100%) !important;
  border-color: #9a3a2e !important;
  /* No !important on box-shadow — the v6 blink animation needs to own it. */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 0 0 1px rgba(232, 120, 95, 0.4),
    0 6px 20px -6px rgba(193, 74, 58, 0.55);
  position: relative;
  overflow: hidden;
}
.tp-btn.tp-go::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  pointer-events: none;
}
.tp-btn.tp-go:hover:not(:disabled) {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 0 0 1px rgba(255, 180, 140, 0.5),
    0 10px 30px -4px rgba(232, 80, 60, 0.55) !important;
  transform: translateY(-1px);
}

/* -------- Schedule — section labels, card stripe ---------- */
.schedule-bar-wrap {
  border-radius: 8px !important;
  background: linear-gradient(180deg, #141824 0%, #0c1019 100%) !important;
  border: 1px solid rgba(200, 157, 74, 0.12) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 4px 14px rgba(0,0,0,0.3);
}
.schedule-label {
  background: transparent !important;
  border-bottom: 0 !important;
  color: var(--gold) !important;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 9.5px !important;
  letter-spacing: 0.24em !important;
  padding: 9px 12px 5px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.schedule-label::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(200, 157, 74, 0.6);
}
.schedule-bar { background: transparent !important; border: 0 !important; }
.schedule-empty {
  color: var(--ink-4) !important;
  font-family: var(--serif);
  font-style: italic;
}

.sched-section-label {
  color: var(--gold) !important;
  opacity: 0.7;
  font-family: var(--mono) !important;
  letter-spacing: 0.2em !important;
}
.sched-section-label::before {
  content: '·  ';
  color: var(--gold);
  opacity: 0.6;
}

.sched-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%) !important;
  border-left: 3px solid rgba(200, 157, 74, 0.25) !important;
  border-radius: 6px;
  padding: 8px 28px 8px 12px !important;
}
.sched-card:hover:not(.live) {
  border-left-color: var(--gold) !important;
  background: linear-gradient(180deg, var(--panel-2) 0%, #1f2638 100%) !important;
}
.sched-card.selected {
  border-left-color: var(--myrtle) !important;
  box-shadow:
    0 0 0 1px rgba(46, 115, 109, 0.4),
    0 6px 16px -6px rgba(46, 115, 109, 0.4) !important;
}
.sched-card.live {
  border-left-color: var(--red) !important;
  background: linear-gradient(90deg,
    rgba(193, 74, 58, 0.18) 0%,
    rgba(193, 74, 58, 0.04) 100%) !important;
}
.sched-title { font-weight: 600 !important; letter-spacing: 0.002em; }
.sched-live-badge {
  background: linear-gradient(180deg, var(--red), var(--red-d)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 0 0 1px rgba(193, 74, 58, 0.5);
}

/* -------- Song editor — serif title, gold section labels -- */
.song-title-field input {
  font-family: var(--serif) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.meta-field label {
  color: var(--gold) !important;
  opacity: 0.85;
  font-weight: 700;
}
.sections-label {
  color: var(--gold) !important;
  font-weight: 700;
  letter-spacing: 0.22em !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sections-label::before {
  content: '';
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.sections-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0.4;
}

.sec-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 4px 12px -4px rgba(0,0,0,0.4);
}
.sec-label-in {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* -------- Style panel — better chips ---------------------- */
.style-title {
  color: var(--gold) !important;
  letter-spacing: 0.22em !important;
  font-weight: 700 !important;
}
.theme-chip.active {
  outline: 2px solid var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(200, 157, 74, 0.18) !important;
}
.align-chip.active {
  background: linear-gradient(135deg, var(--myrtle), var(--myrtle-h)) !important;
  border-color: var(--myrtle) !important;
  box-shadow: 0 0 0 1px rgba(200, 157, 74, 0.3);
}

/* -------- Status bar — richer indicator ------------------- */
.statusbar {
  position: relative;
  background: linear-gradient(180deg, #0c1019 0%, #08090f 100%) !important;
}
.statusbar::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px; top: 0;
  height: 1px;
  background: var(--hairline-gold);
  opacity: 0.35;
  pointer-events: none;
}
.status-dot {
  background: var(--gold) !important;
  box-shadow:
    0 0 0 2px rgba(200, 157, 74, 0.15),
    0 0 8px rgba(200, 157, 74, 0.5) !important;
  animation: statusDot 3s ease-in-out infinite;
}
@keyframes statusDot {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200, 157, 74, 0.15), 0 0 8px rgba(200, 157, 74, 0.5); }
  50%      { box-shadow: 0 0 0 3px rgba(200, 157, 74, 0.25), 0 0 14px rgba(200, 157, 74, 0.8); }
}
.statusbar-credit {
  font-family: var(--serif) !important;
  font-style: italic;
  letter-spacing: 0.04em !important;
  color: var(--ink-4) !important;
  opacity: 0.85;
}

/* -------- Tips — refined kbd ------------------------------ */
.tips {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%) !important;
  border: 1px solid rgba(200, 157, 74, 0.12) !important;
  border-radius: 8px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 4px 12px -4px rgba(0,0,0,0.4);
}
.tips-title {
  color: var(--gold) !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
}
.kb dt {
  background: linear-gradient(180deg, #1f2638 0%, #141824 100%) !important;
  border: 1px solid rgba(200, 157, 74, 0.18) !important;
  color: var(--gold-h) !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 3px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 2px 3px rgba(0,0,0,0.3);
}

/* -------- Modal — serif title, gold hairline -------------- */
.modal-head {
  position: relative;
}
.modal-head::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px;
  background: var(--hairline-gold);
  opacity: 0.45;
  pointer-events: none;
}
.modal-title {
  font-family: var(--serif);
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
}

/* -------- Scrollbars — myrtle/gold on hover --------------- */
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--gold) 0%, var(--myrtle) 100%) !important;
  background-clip: padding-box !important;
  border: 2px solid transparent;
}

/* -------- Loader — refine typography on title ------------- */
.app-loader .loader-title {
  background: linear-gradient(180deg, #f5ead0 0%, #c89d4a 60%, #8a6a2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(200, 157, 74, 0.2);
}
.app-loader .loader-tagline {
  font-style: italic;
  font-family: var(--serif);
  font-size: 15px !important;
  letter-spacing: 0.01em;
}
.app-loader .loader-status {
  color: var(--gold) !important;
  opacity: 0.75;
}

/* -------- Login — gold-accented title --------------------- */
.login-brand h1 {
  background: linear-gradient(180deg, #f5ead0 0%, #c89d4a 60%, #8a6a2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-brand p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px !important;
}
.login-hint {
  color: var(--gold) !important;
  opacity: 0.55;
}
.login-submit {
  background: linear-gradient(135deg, var(--myrtle-h) 0%, var(--myrtle) 50%, #1F5B56 100%) !important;
  border-color: #1F5B56 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(200, 157, 74, 0.25),
    0 10px 28px -6px rgba(46, 115, 109, 0.55) !important;
}
.login-submit:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 0 0 1px rgba(200, 157, 74, 0.55),
    0 14px 34px -6px rgba(46, 115, 109, 0.75) !important;
}

/* -------- Toast — serif on subtle ------------------------- */
.toast {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 32px -8px rgba(0,0,0,0.6) !important;
}

/* -------- Go live pulse — on status pill ------------------ */
.pill.pill-live {
  background: linear-gradient(180deg, rgba(193, 74, 58, 0.24) 0%, rgba(193, 74, 58, 0.12) 100%) !important;
  border-color: rgba(232, 120, 95, 0.5) !important;
  color: #f5c0b2 !important;
  font-weight: 700 !important;
}
.pill.pill-ok {
  background: linear-gradient(180deg, rgba(46, 115, 109, 0.22) 0%, rgba(46, 115, 109, 0.1) 100%) !important;
  border-color: rgba(108, 181, 175, 0.5) !important;
  color: #9cd9d4 !important;
}

/* -------- Drag-over — gold instead of blue ---------------- */
.sched-card.drag-over {
  border-color: var(--gold) !important;
  background: rgba(200, 157, 74, 0.12) !important;
  box-shadow: -3px 0 0 var(--gold) !important;
}

/* -------- Bible "Jump to Reference" autocomplete ----------- */
.jump-search { position: relative; }
.jump-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 14px 32px -8px rgba(0, 0, 0, 0.6);
  max-height: 280px;
  overflow-y: auto;
  z-index: 10;
  padding: 4px;
}
.jump-sugg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s, color .12s;
}
.jump-sugg-item:hover {
  background: var(--panel-2);
  color: var(--ink);
}
.jump-sugg-item.active {
  background: linear-gradient(180deg, rgba(46,115,109,0.35), rgba(46,115,109,0.18));
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(200, 157, 74, 0.28);
}
.jump-sugg-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jump-sugg-item.active .jump-sugg-name {
  color: var(--gold-h);
  font-weight: 600;
}
.jump-sugg-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

/* -------- Library language toggle (Songs tab) -------------------- */
.lib-lang-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 8px 8px 0;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-2);
}
.lib-lang-btn {
  padding: 7px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.lib-lang-btn:hover {
  background: var(--panel-3);
  color: var(--ink);
  border-color: rgba(200, 157, 74, 0.35);
}
.lib-lang-btn.active {
  background: linear-gradient(180deg, var(--myrtle-h), var(--myrtle));
  border-color: var(--myrtle);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(200, 157, 74, 0.3),
    0 4px 12px -4px rgba(46, 115, 109, 0.45);
}

/* Songs-tab filter row: [Worship] [Hymns] [Language ▾] on one line. */
.lib-filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 8px 8px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border-2);
}
.lib-cat-btn,
.lib-lang-trigger {
  padding: 7px 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  min-width: 0;
}
.lib-cat-btn:hover,
.lib-lang-trigger:hover {
  background: var(--panel-3);
  color: var(--ink);
  border-color: rgba(200, 157, 74, 0.35);
}
.lib-cat-btn.active {
  background: linear-gradient(180deg, rgba(200, 157, 74, 0.28), rgba(200, 157, 74, 0.18));
  border-color: rgba(200, 157, 74, 0.6);
  color: var(--amber, #C89D4A);
  box-shadow:
    0 0 0 1px rgba(200, 157, 74, 0.25),
    0 4px 12px -4px rgba(200, 157, 74, 0.35);
}

/* Language dropdown */
.lib-lang-dd { position: relative; min-width: 0; }
.lib-lang-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}
.lib-lang-trigger[aria-expanded="true"] {
  border-color: var(--myrtle, #2E736D);
  color: var(--ink);
}
.lib-lang-trigger #lib-lang-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.lib-lang-chev {
  font-size: 9px;
  color: var(--ink-3);
  transform: translateY(1px);
}
.lib-lang-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lib-lang-menu.hidden { display: none; }
.lib-lang-item {
  padding: 7px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.lib-lang-item:hover {
  background: var(--panel-3);
  color: var(--ink);
}
.lib-lang-item.active {
  color: var(--myrtle-h, #3A8B85);
  background: rgba(46, 115, 109, 0.12);
  border-color: rgba(46, 115, 109, 0.3);
}

/* Music library — upload button + track rows */
.lib-music-upload {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border-2);
}
.lib-music-row {
  display: grid;
  grid-template-columns: 34px 1fr 28px;
  align-items: center;
  gap: 8px;
}
.lib-music-play {
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.lib-music-play:hover {
  background: var(--amber, #C89D4A);
  border-color: var(--amber, #C89D4A);
  color: #1a1a1a;
}
.lib-music-play:active { transform: scale(0.95); }
.lib-music-play svg { width: 14px; height: 14px; }

/* Song editor language chips — same look as the library toggle */
.meta-field-wide { grid-column: 1 / -1; }
.meta-lang-chips {
  display: flex;
  gap: 4px;
}
.meta-lang-chip {
  flex: 0 0 auto;
  padding: 6px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.meta-lang-chip:hover {
  background: var(--panel-3);
  color: var(--ink);
  border-color: rgba(200, 157, 74, 0.35);
}
.meta-lang-chip.active {
  background: linear-gradient(180deg, var(--myrtle-h), var(--myrtle));
  border-color: var(--myrtle);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(200, 157, 74, 0.3);
}

/* -------- Searchable book combobox ------------------------------- */
.book-combo {
  position: relative;
  flex: 1;
  min-width: 0;
}
.book-combo-button {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px 6px 10px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  outline: none;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.book-combo-button:hover {
  background: var(--panel-2);
  border-color: rgba(200, 157, 74, 0.4);
}
.book-combo-button:focus-visible,
.book-combo-button[aria-expanded="true"] {
  border-color: var(--gold);
  background: var(--panel-2);
  box-shadow: 0 0 0 3px rgba(200, 157, 74, 0.18);
}
.book-combo-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.book-combo-chev {
  font-size: 10px;
  color: var(--ink-3);
  transition: transform .18s ease;
  flex: 0 0 auto;
}
.book-combo-button[aria-expanded="true"] .book-combo-chev {
  transform: rotate(180deg);
  color: var(--gold);
}

.book-combo-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  /* Let the menu size to its widest book name (e.g. "1 Thessalonians")
     instead of being constrained to the button width. Min-width keeps
     it comfortable; cap with max so it never runs off the viewport. */
  min-width: 240px;
  max-width: 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 18px 40px -12px rgba(0, 0, 0, 0.65);
  z-index: 20;
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow: hidden;
  animation: bookComboIn .14s cubic-bezier(.3,.1,.2,1);
  transform-origin: top;
}
@keyframes bookComboIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.book-combo-search-wrap {
  padding: 6px;
  border-bottom: 1px solid var(--border-2);
  background: var(--panel-2);
}
.book-combo-search {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.book-combo-search:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200, 157, 74, 0.2);
}

.book-combo-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px;
}
.book-combo-group-label {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.22em;
  padding: 10px 10px 4px;
  text-transform: uppercase;
}
.book-combo-group-label.hidden { display: none; }
.book-combo-item {
  display: block;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  border-radius: 4px;
  transition: background .1s, color .1s;
  /* Keep each book on a single line — names like "1 Thessalonians" must
     not wrap. Anything that's truly too long gets an ellipsis. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book-combo-item:hover,
.book-combo-item.hovered {
  background: var(--panel-2);
  color: var(--ink);
}
.book-combo-item.active {
  color: var(--gold-h);
  font-weight: 600;
  background: rgba(200, 157, 74, 0.1);
}
.book-combo-item.active.hovered {
  background: rgba(200, 157, 74, 0.18);
}
.book-combo-item.hidden { display: none; }

/* -------- Chapter combobox ---------------------------------------
   Reuses the book-combo button + menu container styles. The menu
   content is a 6-column grid of chapter numbers for fast picking.
   Button itself stays compact — the grid menu is wider than the button. */
.chapter-combo {
  position: relative;
  flex: 0 0 64px;
  min-width: 0;
}
.chapter-combo-button {
  padding-left: 8px;
  padding-right: 6px;
  gap: 4px;
}
.chapter-combo-button .book-combo-label {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.chapter-combo-menu {
  /* Wider than the button so the grid has room. */
  min-width: 260px;
  right: auto;
  transform: translateX(-50%);
  left: 50%;
  max-height: 320px;
}
.chapter-combo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  overflow-y: auto;
  max-height: 320px;
  outline: none;
}
.chapter-combo-item {
  padding: 7px 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink-2);
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: background .1s, border-color .1s, color .1s;
}
.chapter-combo-item:hover,
.chapter-combo-item.hovered {
  background: var(--panel);
  border-color: rgba(200, 157, 74, 0.45);
  color: var(--ink);
}
.chapter-combo-item.active {
  background: linear-gradient(180deg, rgba(200, 157, 74, 0.28), rgba(200, 157, 74, 0.14));
  border-color: var(--gold);
  color: var(--gold-h);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(200, 157, 74, 0.3);
}
.chapter-combo-item.active.hovered {
  background: linear-gradient(180deg, rgba(200, 157, 74, 0.4), rgba(200, 157, 74, 0.22));
}
.verse-combo-empty {
  grid-column: 1 / -1;
  padding: 20px 12px;
  text-align: center;
  color: var(--ink-4);
  font-size: 12px;
  font-style: italic;
}

/* -------- Workspace scripture pager -----------------------------
   Compact "VERSES / SLIDE" control shown in the top-right of the
   workspace head only when a scripture schedule item is live. */
.center-pager {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--panel-2);
  border: 1px solid rgba(200, 157, 74, 0.25);
  border-radius: 6px;
}

/* Scripture edit buttons — compact icon-style controls next to the
   "Verses / slide" pager. Size button shows current % as a small sub-label;
   color button shows the current swatch. */
.ctr-scr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  min-height: 28px;
}
.ctr-scr-btn .ctr-scr-glyph {
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--gold);
}
.ctr-scr-btn .ctr-scr-sub {
  font-size: 10.5px;
  font-family: var(--mono);
  color: var(--ink-2, #b7bdca);
  letter-spacing: 0.04em;
}
.ctr-scr-btn .ctr-scr-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}

/* Color-swatch popup */
.scripture-color-dropdown .scr-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 28px);
  gap: 6px;
  padding: 10px;
}
.scr-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  transition: transform 0.08s ease;
}
.scr-color-swatch:hover { transform: scale(1.08); }
.scr-color-swatch.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--gold);
}
.scripture-size-dropdown .countdown-menu-item.active {
  background: rgba(200, 157, 74, 0.18);
}
.center-pager .mono {
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  white-space: nowrap;
}
.center-pager select {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 22px 2px 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* The verse combo matches the chapter combo's compact width. */
.verse-combo {
  flex: 0 0 64px;
}

/* =============================================================
   Motion backgrounds — mirrored for slide cards + monitor stages
   Applied via motion-<name> class on:
     .slide-preview  (center panel thumbnails)
     .monitor-stage  (preview + live monitors)
   Projector window has its own copy in projector.css.
   ============================================================= */

/* Only override overflow here — do NOT touch `position`. The base
   .slide-preview is already position: relative and .monitor-stage is
   position: absolute; inset: 0 (both are valid containing blocks for
   our absolutely-positioned motion pseudos). Setting position: relative
   here would collapse the monitor-stage to its text-content size, making
   the motion pseudo-layer tiny and its animation invisible. */
.slide-preview[class*="motion-"],
.monitor-stage[class*="motion-"] {
  overflow: hidden;
}
.slide-preview[class*="motion-"] > *,
.monitor-stage[class*="motion-"] > * {
  position: relative;
  z-index: 1;
}

/* ---- Ken Burns ---- */
.slide-preview.motion-kenburns,
.monitor-stage.motion-kenburns { background-image: none !important; }
.slide-preview.motion-kenburns::before,
.monitor-stage.motion-kenburns::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  transform-origin: center;
  animation: kenBurns 32s ease-in-out infinite alternate;
  will-change: transform;
  z-index: 0;
}
@keyframes kenBurns {
  0%   { transform: scale(1.00) translate(0%, 0%); }
  50%  { transform: scale(1.10) translate(-2%, -1%); }
  100% { transform: scale(1.16) translate(2%, 1%); }
}

/* ---- Drift ---- */
.slide-preview.motion-drift::after,
.monitor-stage.motion-drift::after {
  content: '';
  position: absolute; inset: -15%;
  background:
    radial-gradient(ellipse at 25% 35%, rgba(255, 250, 230, 0.32), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(220, 230, 255, 0.26), transparent 55%),
    radial-gradient(ellipse at 55% 20%, rgba(255, 230, 180, 0.20), transparent 55%);
  animation: driftMotion 18s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
@keyframes driftMotion {
  0%   { transform: translate(-7%, -5%) rotate(0deg);  }
  100% { transform: translate( 7%,  5%) rotate(12deg); }
}

/* ---- Bokeh: many orbs across two independent layers ---- */
.slide-preview.motion-bokeh::before,
.slide-preview.motion-bokeh::after,
.monitor-stage.motion-bokeh::before,
.monitor-stage.motion-bokeh::after {
  content: '';
  position: absolute; inset: -10%;
  background-repeat: no-repeat;
  filter: blur(9px);
  opacity: 0.95;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-bokeh::before,
.monitor-stage.motion-bokeh::before {
  background-image:
    radial-gradient(circle at 18% 28%, rgba(255, 230, 180, 0.95), transparent 24%),
    radial-gradient(circle at 72% 18%, rgba(255, 210, 150, 0.88), transparent 22%),
    radial-gradient(circle at 38% 78%, rgba(255, 240, 200, 0.92), transparent 26%),
    radial-gradient(circle at 88% 62%, rgba(227, 185, 110, 0.85), transparent 22%),
    radial-gradient(circle at 10% 55%, rgba(255, 200, 160, 0.88), transparent 20%),
    radial-gradient(circle at 55% 45%, rgba(255, 235, 195, 0.78), transparent 24%);
  background-size: 55% 55%, 50% 50%, 60% 60%, 45% 45%, 40% 40%, 50% 50%;
  animation: bokehFloatA 16s ease-in-out infinite alternate;
}
.slide-preview.motion-bokeh::after,
.monitor-stage.motion-bokeh::after {
  background-image:
    radial-gradient(circle at 30% 12%, rgba(255, 220, 170, 0.88), transparent 24%),
    radial-gradient(circle at 80% 40%, rgba(200, 157, 74,  0.80), transparent 22%),
    radial-gradient(circle at 60% 88%, rgba(255, 245, 220, 0.85), transparent 26%),
    radial-gradient(circle at 15% 82%, rgba(255, 245, 190, 0.90), transparent 22%),
    radial-gradient(circle at 92% 15%, rgba(227, 185, 110, 0.82), transparent 20%);
  background-size: 50% 50%, 45% 45%, 55% 55%, 40% 40%, 48% 48%;
  animation: bokehFloatB 22s ease-in-out infinite alternate;
}
@keyframes bokehFloatA {
  0%   { background-position:  0%   0%,  100% 10%,   0% 100%, 100% 100%,   0% 50%,  50% 50%; }
  50%  { background-position:  35% 20%,   70% 45%,  45% 75%,   60% 60%,  40% 30%,  30% 70%; }
  100% { background-position:  100% 100%,  0% 100%, 100%   0%,  0%  0%, 100%   0%,  80% 30%; }
}
@keyframes bokehFloatB {
  0%   { background-position:  20%   0%,  100% 50%,  60% 100%,   0% 100%, 100%   0%; }
  50%  { background-position:  60%  40%,   40% 20%,  30%  60%,  70%  50%,  40%  70%; }
  100% { background-position: 100% 100%,   0%  0%, 100%   0%, 100% 100%,   0% 100%; }
}

/* ---- Rays ---- */
.slide-preview.motion-rays::after,
.monitor-stage.motion-rays::after {
  content: '';
  position: absolute;
  top: -40%; left: -40%;
  width: 180%; height: 180%;
  background: conic-gradient(from 0deg,
    rgba(255, 245, 220, 0.45) 0deg,
    transparent 22deg,
    rgba(255, 235, 200, 0.40) 48deg,
    transparent 78deg,
    rgba(255, 245, 220, 0.42) 114deg,
    transparent 150deg,
    rgba(255, 230, 190, 0.38) 192deg,
    transparent 232deg,
    rgba(255, 245, 220, 0.42) 276deg,
    transparent 320deg,
    rgba(255, 245, 220, 0.45) 360deg);
  transform-origin: center;
  animation: raysSpin 38s linear infinite;
  filter: blur(10px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,0.6) 40%, transparent 80%);
  mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,0.6) 40%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }

/* ---- Glow ---- */
.slide-preview.motion-glow::after,
.monitor-stage.motion-glow::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 55%,
    rgba(255, 240, 215, 0.18) 0%,
    rgba(255, 220, 170, 0.10) 28%,
    transparent 70%);
  animation: glowPulse 8s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.8; transform: scale(1.00); }
  50%      { opacity: 1.0; transform: scale(1.10); }
}

/* ---- Aurora ---- */
.slide-preview.motion-aurora::after,
.monitor-stage.motion-aurora::after {
  content: '';
  position: absolute; inset: -10%;
  background:
    linear-gradient(100deg,
      transparent 14%,
      rgba(46, 115, 109, 0.62) 34%,
      rgba(200, 157, 74, 0.50) 52%,
      rgba(145, 100, 180, 0.42) 70%,
      transparent 92%),
    linear-gradient(80deg,
      transparent 12%,
      rgba(60, 140, 180, 0.45) 40%,
      rgba(255, 200, 160, 0.36) 66%,
      transparent 96%),
    linear-gradient(120deg,
      transparent 10%,
      rgba(74, 150, 145, 0.38) 48%,
      transparent 88%);
  background-size: 260% 260%, 220% 220%, 200% 200%;
  mix-blend-mode: screen;
  filter: blur(16px);
  animation: auroraFlow 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes auroraFlow {
  0%   { background-position: 0% 0%,   100% 100%, 50% 0%;    }
  50%  { background-position: 60% 30%,  40% 60%,  20% 70%;   }
  100% { background-position: 100% 50%, 0% 40%,   80% 100%;  }
}

/* ---- Starfield: blinking stars, crisp on/off ---- */
.slide-preview.motion-starfield::before,
.slide-preview.motion-starfield::after,
.monitor-stage.motion-starfield::before,
.monitor-stage.motion-starfield::after {
  content: '';
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-starfield::before,
.monitor-stage.motion-starfield::before {
  background-image:
    radial-gradient(4px 4px   at 12% 18%, #fff,    transparent 65%),
    radial-gradient(3.5px 3.5px at 78% 32%, #F8ECD0, transparent 65%),
    radial-gradient(5px 5px   at 88% 78%, #fff,    transparent 65%),
    radial-gradient(4px 4px   at 28% 72%, #E3B96E, transparent 65%),
    radial-gradient(3.5px 3.5px at 52% 8%,  #fff,    transparent 65%),
    radial-gradient(4px 4px   at 45% 90%, #fff,    transparent 65%),
    radial-gradient(3.5px 3.5px at 65% 52%, #F8ECD0, transparent 65%),
    radial-gradient(5px 5px   at 20% 50%, #fff,    transparent 65%),
    radial-gradient(3.5px 3.5px at 94% 14%, #fff,    transparent 65%),
    radial-gradient(3px 3px   at 5%  82%, #fff,    transparent 65%),
    radial-gradient(4px 4px   at 38% 24%, #fff,    transparent 65%),
    radial-gradient(3px 3px   at 72% 66%, #E3B96E, transparent 65%);
  animation: starfieldTwinkleA 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}
.slide-preview.motion-starfield::after,
.monitor-stage.motion-starfield::after {
  background-image:
    radial-gradient(3.5px 3.5px at 38% 58%, #fff,    transparent 65%),
    radial-gradient(5px 5px   at 8%  48%, #F8ECD0, transparent 65%),
    radial-gradient(3.5px 3.5px at 62% 42%, #fff,    transparent 65%),
    radial-gradient(4px 4px   at 82% 12%, #fff,    transparent 65%),
    radial-gradient(3px 3px   at 18% 36%, #E3B96E, transparent 65%),
    radial-gradient(5px 5px   at 68% 82%, #fff,    transparent 65%),
    radial-gradient(4px 4px   at 92% 55%, #fff,    transparent 65%),
    radial-gradient(3.5px 3.5px at 35% 30%, #fff,    transparent 65%),
    radial-gradient(3px 3px   at 55% 74%, #fff,    transparent 65%),
    radial-gradient(4px 4px   at 2%  22%, #fff,    transparent 65%),
    radial-gradient(3px 3px   at 98% 88%, #F8ECD0, transparent 65%),
    radial-gradient(3.5px 3.5px at 48% 50%, #fff,    transparent 65%);
  animation: starfieldTwinkleB 2.2s ease-in-out infinite -0.5s;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.8));
}
@keyframes starfieldTwinkleA {
  0%, 100% { opacity: 1.0; }
  50%      { opacity: 0.25; }
}
@keyframes starfieldTwinkleB {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.35; }
}

/* ---- Embers: mixed sizes — big glowing coals + small sparks ---- */
.slide-preview.motion-embers::before,
.slide-preview.motion-embers::after,
.monitor-stage.motion-embers::before,
.monitor-stage.motion-embers::after {
  content: '';
  position: absolute; inset: 0;
  background-repeat: repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-embers::before,
.monitor-stage.motion-embers::before {
  background-image:
    radial-gradient(8px 8px   at 20% 70%, rgba(255, 140, 60, 0.95),  transparent 65%),
    radial-gradient(10px 10px at 65% 40%, rgba(255, 110, 40, 0.85),  transparent 65%),
    radial-gradient(7px 7px   at 82% 80%, rgba(255, 180, 90, 0.90),  transparent 65%),
    radial-gradient(9px 9px   at 40% 30%, rgba(255, 155, 70, 0.92),  transparent 65%),
    radial-gradient(6px 6px   at 10% 50%, rgba(255, 200, 110, 0.85), transparent 65%);
  background-size: 140px 240px, 170px 280px, 120px 220px, 130px 230px, 110px 200px;
  filter: blur(2px);
  animation: embersRiseBig 22s linear infinite;
}
.slide-preview.motion-embers::after,
.monitor-stage.motion-embers::after {
  background-image:
    radial-gradient(2px 2px   at 15% 60%, rgba(255, 220, 150, 1),    transparent 70%),
    radial-gradient(1.5px 1.5px at 50% 80%, rgba(255, 200, 130, 0.95), transparent 70%),
    radial-gradient(3px 3px   at 75% 50%, rgba(255, 180, 100, 0.9),  transparent 70%),
    radial-gradient(1.5px 1.5px at 35% 25%, rgba(255, 230, 170, 0.95), transparent 70%),
    radial-gradient(3.5px 3.5px at 90% 15%, rgba(255, 160, 80, 0.85),  transparent 70%),
    radial-gradient(2px 2px   at 5%  35%, rgba(255, 210, 140, 0.95), transparent 70%);
  background-size: 90px 200px, 70px 170px, 110px 220px, 75px 180px, 100px 210px, 60px 150px;
  filter: blur(0.3px);
  animation: embersRiseSmall 12s linear infinite;
}
@keyframes embersRiseBig {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 20px -240px, -25px -280px, 30px -220px, -20px -230px, 15px -200px; }
}
@keyframes embersRiseSmall {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 10px -200px, -18px -170px, 22px -220px, -14px -180px, 18px -210px, -7px -150px; }
}

/* ---- Mist ---- */
.slide-preview.motion-mist::after,
.monitor-stage.motion-mist::after {
  content: '';
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse at 22% 40%, rgba(255, 255, 255, 0.32), transparent 45%),
    radial-gradient(ellipse at 72% 62%, rgba(255, 255, 255, 0.26), transparent 50%),
    radial-gradient(ellipse at 50% 85%, rgba(255, 245, 225, 0.24), transparent 55%),
    radial-gradient(ellipse at 15% 80%, rgba(255, 255, 255, 0.22), transparent 50%);
  animation: mistDrift 22s ease-in-out infinite alternate;
  filter: blur(16px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
@keyframes mistDrift {
  0%   { transform: translate(-14%,  3%) scale(1.0); }
  100% { transform: translate( 14%, -3%) scale(1.15); }
}

/* ---- Waves ---- */
.slide-preview.motion-waves::before,
.slide-preview.motion-waves::after,
.monitor-stage.motion-waves::before,
.monitor-stage.motion-waves::after {
  content: '';
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-waves::before,
.monitor-stage.motion-waves::before {
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(46, 115, 109, 0.48) 40%,
      rgba(74, 150, 145, 0.62) 50%,
      rgba(46, 115, 109, 0.48) 60%,
      transparent 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(200, 157, 74, 0.42) 64%,
      rgba(227, 185, 110, 0.56) 72%,
      rgba(200, 157, 74, 0.42) 80%,
      transparent 100%);
  background-size: 100% 320%, 100% 320%;
  animation: wavesMoveA 9s linear infinite;
  filter: blur(4px);
}
.slide-preview.motion-waves::after,
.monitor-stage.motion-waves::after {
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(255, 245, 220, 0.30) 28%,
      rgba(255, 245, 220, 0.44) 34%,
      rgba(255, 245, 220, 0.30) 40%,
      transparent 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(46, 115, 109, 0.30) 88%,
      transparent 100%);
  background-size: 100% 300%, 100% 280%;
  animation: wavesMoveB 14s linear infinite;
  filter: blur(3px);
}
@keyframes wavesMoveA {
  0%   { background-position: 0 -35%, 0  40%; }
  100% { background-position: 0  65%, 0 -60%; }
}
@keyframes wavesMoveB {
  0%   { background-position: 0  50%, 0 -10%; }
  100% { background-position: 0 -50%, 0  90%; }
}

/* ---- Random Particles: multi-colored dots wandering independently ---- */
.slide-preview.motion-particles::before,
.slide-preview.motion-particles::after,
.monitor-stage.motion-particles::before,
.monitor-stage.motion-particles::after {
  content: '';
  position: absolute; inset: 0;
  background-repeat: repeat;
  mix-blend-mode: screen;
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-particles::before,
.monitor-stage.motion-particles::before {
  background-image:
    radial-gradient(7px 7px at 20% 35%, rgba(227, 185, 110, 0.95), transparent 65%),  /* light gold */
    radial-gradient(5px 5px at 60% 70%, rgba(255, 255, 255, 0.92), transparent 65%),  /* white      */
    radial-gradient(9px 9px at 85% 25%, rgba(200, 157, 74,  0.90), transparent 65%),  /* gold       */
    radial-gradient(6px 6px at 35% 80%, rgba(248, 236, 208, 0.90), transparent 65%);  /* cream      */
  background-size: 160px 210px, 130px 180px, 190px 240px, 140px 195px;
  animation: particlesWanderA 22s linear infinite;
}
.slide-preview.motion-particles::after,
.monitor-stage.motion-particles::after {
  background-image:
    radial-gradient(8px 8px at 75% 55%, rgba(255, 255, 255, 0.90), transparent 65%),  /* white      */
    radial-gradient(5px 5px at 10% 60%, rgba(227, 185, 110, 0.92), transparent 65%),  /* light gold */
    radial-gradient(7px 7px at 50% 15%, rgba(200, 157, 74,  0.90), transparent 65%);  /* gold       */
  background-size: 175px 220px, 125px 170px, 155px 205px;
  animation: particlesWanderB 31s linear infinite;
}
@keyframes particlesWanderA {
  0%   { background-position:   0    0,    0    0,    0    0,    0    0; }
  25%  { background-position:  55px  80px,  -80px -40px,  110px  25px,  -70px  85px; }
  50%  { background-position:  -70px 150px, 120px 110px,  -55px -120px,  95px -65px; }
  75%  { background-position:  110px -55px,  40px 160px, -140px  80px, -120px  40px; }
  100% { background-position:   0    0,    0    0,    0    0,    0    0; }
}
@keyframes particlesWanderB {
  0%   { background-position:   0    0,    0    0,    0    0; }
  33%  { background-position:  -95px 120px, 110px -80px,  -60px -135px; }
  66%  { background-position:   85px -160px, -95px  90px,  130px   50px; }
  100% { background-position:   0    0,    0    0,    0    0; }
}

/* ---- Fire Flux: flickering flame base + rising embers ---- */
.slide-preview.motion-fireflux::before,
.slide-preview.motion-fireflux::after,
.monitor-stage.motion-fireflux::before,
.monitor-stage.motion-fireflux::after {
  content: '';
  position: absolute; inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-fireflux::before,
.monitor-stage.motion-fireflux::before {
  background:
    radial-gradient(ellipse at 30% 110%, rgba(255, 80, 30, 0.75), transparent 42%),
    radial-gradient(ellipse at 60% 110%, rgba(255, 150, 50, 0.88), transparent 48%),
    radial-gradient(ellipse at 85% 110%, rgba(255, 210, 90, 0.72), transparent 40%);
  background-size: 130% 140%, 150% 160%, 110% 130%;
  background-repeat: no-repeat;
  filter: blur(12px);
  transform-origin: center bottom;
  animation: fireFluxBase 2.2s ease-in-out infinite;
}
@keyframes fireFluxBase {
  0%, 100% { transform: translateY(0)    scaleY(1);    opacity: 0.78; }
  25%      { transform: translateY(-2%)  scaleY(1.08); opacity: 1.0;  }
  50%      { transform: translateY(-1%)  scaleY(0.95); opacity: 0.85; }
  75%      { transform: translateY(-3%)  scaleY(1.12); opacity: 1.0;  }
}
.slide-preview.motion-fireflux::after,
.monitor-stage.motion-fireflux::after {
  background-image:
    radial-gradient(1.5px 1.5px at 25% 75%, rgba(255, 220, 140, 1), transparent),
    radial-gradient(2px 2px     at 55% 60%, rgba(255, 180, 90, 0.95), transparent),
    radial-gradient(1px 1px     at 80% 70%, rgba(255, 200, 110, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255, 160, 80, 0.95), transparent);
  background-size: 75px 160px, 95px 190px, 60px 140px, 85px 175px;
  background-repeat: repeat;
  animation: fireSparks 6s linear infinite;
}
@keyframes fireSparks {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 10px -160px, -14px -190px, 18px -140px, -8px -175px; }
}

/* ---- Breathe ---- */
.slide-preview.motion-breathe,
/* ---- Blue Rain (monitor + preview thumbnail) — falling bokeh ---- */
.slide-preview.motion-bluebokeh,
.monitor-stage.motion-bluebokeh {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(25, 70, 140, 0.45), transparent 65%),
    linear-gradient(180deg, #020818 0%, #000510 100%);
}
.slide-preview.motion-bluebokeh::before,
.slide-preview.motion-bluebokeh::after,
.monitor-stage.motion-bluebokeh::before,
.monitor-stage.motion-bluebokeh::after {
  content: '';
  position: absolute; inset: 0;
  background-repeat: repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-bluebokeh::before,
.monitor-stage.motion-bluebokeh::before {
  background-image:
    radial-gradient(15px 15px at 12% 20%, rgba(80, 180, 255, 0.85),  transparent 60%),
    radial-gradient(18px 18px at 62% 32%, rgba(100, 200, 255, 0.80), transparent 60%),
    radial-gradient(12px 12px at 82% 72%, rgba(120, 210, 255, 0.75), transparent 60%),
    radial-gradient(16px 16px at 30% 78%, rgba(60, 160, 240, 0.80),  transparent 60%),
    radial-gradient(13px 13px at 52% 48%, rgba(100, 190, 255, 0.72), transparent 60%),
    radial-gradient(14px 14px at 88% 18%, rgba(80, 180, 255, 0.78),  transparent 60%);
  background-size: 180px 260px, 210px 290px, 160px 230px, 195px 270px, 170px 240px, 200px 280px;
  filter: blur(9px);
  animation: blueRainBig 22s linear infinite;
}
.slide-preview.motion-bluebokeh::after,
.monitor-stage.motion-bluebokeh::after {
  background-image:
    radial-gradient(3px 3px at 18% 32%, rgba(180, 230, 255, 1),    transparent 62%),
    radial-gradient(2.5px 2.5px at 55% 62%, rgba(210, 240, 255, 0.95), transparent 62%),
    radial-gradient(3.5px 3.5px at 82% 22%, rgba(120, 210, 255, 0.98), transparent 62%),
    radial-gradient(2px 2px at 35% 88%, rgba(200, 235, 255, 0.92), transparent 62%),
    radial-gradient(3px 3px at 70% 48%, rgba(140, 220, 255, 0.95), transparent 62%),
    radial-gradient(2.5px 2.5px at 10% 72%, rgba(210, 240, 255, 0.95), transparent 62%),
    radial-gradient(3.5px 3.5px at 92% 82%, rgba(120, 210, 255, 0.92), transparent 62%),
    radial-gradient(2px 2px at 45% 15%, rgba(180, 230, 255, 0.95), transparent 62%),
    radial-gradient(3px 3px at 60% 78%, rgba(160, 220, 255, 0.93), transparent 62%);
  background-size: 100px 140px, 85px 120px, 110px 155px, 75px 110px, 95px 135px, 90px 125px, 105px 145px, 80px 115px, 100px 140px;
  filter: drop-shadow(0 0 5px rgba(120, 200, 255, 0.75));
  animation: blueRainSmall 11s linear infinite;
}
@keyframes blueRainBig {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 260px, 0 290px, 0 230px, 0 270px, 0 240px, 0 280px; }
}
@keyframes blueRainSmall {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 0 140px, 0 120px, 0 155px, 0 110px, 0 135px, 0 125px, 0 145px, 0 115px, 0 140px; }
}

/* ---- Blue Halo (monitor + preview thumbnail) — light from above ---- */
.slide-preview.motion-bluerise,
.monitor-stage.motion-bluerise {
  background: linear-gradient(180deg, #020818 0%, #000308 100%);
}
.slide-preview.motion-bluerise::before {
  content: '';
  position: absolute;
  top: -5%;
  left: 50%;
  width: 160%;
  height: 120%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 55% 90% at 50% 0%, rgba(120, 200, 255, 0.55), transparent 58%),
    radial-gradient(ellipse 35% 70% at 50% 0%, rgba(180, 230, 255, 0.50), transparent 50%),
    radial-gradient(ellipse 18% 55% at 50% 0%, rgba(220, 245, 255, 0.55), transparent 45%);
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: blueHaloBreathe 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.monitor-stage.motion-bluerise::before {
  content: '';
  position: absolute;
  top: -5%;
  left: 50%;
  width: 160%;
  height: 120%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 55% 90% at 50% 0%, rgba(120, 200, 255, 0.55), transparent 58%),
    radial-gradient(ellipse 35% 70% at 50% 0%, rgba(180, 230, 255, 0.50), transparent 50%),
    radial-gradient(ellipse 18% 55% at 50% 0%, rgba(220, 245, 255, 0.55), transparent 45%);
  filter: blur(14px);
  mix-blend-mode: screen;
  animation: blueHaloBreathe 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-bluerise::after,
.monitor-stage.motion-bluerise::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 45% 12%, rgba(220, 240, 255, 0.95), transparent 70%),
    radial-gradient(1.5px 1.5px at 55% 28%, rgba(180, 220, 255, 0.9), transparent 70%),
    radial-gradient(2.5px 2.5px at 48% 45%, rgba(200, 235, 255, 0.95), transparent 70%),
    radial-gradient(1.5px 1.5px at 52% 62%, rgba(150, 210, 255, 0.9), transparent 70%),
    radial-gradient(2px 2px at 46% 82%, rgba(200, 235, 255, 0.9), transparent 70%),
    radial-gradient(1.5px 1.5px at 58% 15%, rgba(180, 220, 255, 0.88), transparent 70%),
    radial-gradient(2px 2px at 40% 35%, rgba(220, 240, 255, 0.92), transparent 70%);
  background-repeat: repeat;
  background-size: 70px 190px, 55px 170px, 80px 210px, 60px 180px, 75px 200px, 50px 160px, 65px 185px;
  filter: drop-shadow(0 0 4px rgba(150, 210, 255, 0.6));
  mix-blend-mode: screen;
  animation: blueHaloDust 16s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes blueHaloBreathe {
  0%, 100% { opacity: 0.80; transform: translateX(-50%) scale(1)    skewX(0deg); }
  50%      { opacity: 1.00; transform: translateX(-50%) scale(1.04) skewX(-1.2deg); }
}
@keyframes blueHaloDust {
  from { background-position: 0 -190px, 0 -170px, 0 -210px, 0 -180px, 0 -200px, 0 -160px, 0 -185px; }
  to   { background-position: 0  190px, 0  170px, 0  210px, 0  180px, 0  200px, 0  160px, 0  185px; }
}

.monitor-stage.motion-breathe {
  animation: breathePulse 9s ease-in-out infinite;
}
@keyframes breathePulse {
  0%, 100% { filter: brightness(0.82) saturate(0.9); }
  50%      { filter: brightness(1.18) saturate(1.15); }
}

/* ---- Blue Fire (monitor + preview thumbnail) ---- */
.slide-preview.motion-bluefire,
.monitor-stage.motion-bluefire { background-color: #020814; }
.slide-preview.motion-bluefire::before,
.slide-preview.motion-bluefire::after,
.monitor-stage.motion-bluefire::before,
.monitor-stage.motion-bluefire::after {
  content: '';
  position: absolute; inset: 0;
  background-repeat: repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-bluefire::before,
.monitor-stage.motion-bluefire::before {
  background-image:
    radial-gradient(6px 6px at 20% 70%, rgba(100, 200, 255, 0.95), transparent 65%),
    radial-gradient(8px 8px at 65% 40%, rgba(60, 160, 255, 0.90),  transparent 65%),
    radial-gradient(5px 5px at 82% 80%, rgba(180, 230, 255, 0.92), transparent 65%),
    radial-gradient(7px 7px at 40% 30%, rgba(80, 180, 255, 0.92),  transparent 65%),
    radial-gradient(5px 5px at 10% 50%, rgba(200, 230, 255, 0.88), transparent 65%);
  background-size: 120px 220px, 140px 260px, 100px 190px, 110px 200px, 95px 180px;
  filter: blur(2px);
  animation: blueFireBig 22s linear infinite;
}
.slide-preview.motion-bluefire::after,
.monitor-stage.motion-bluefire::after {
  background-image:
    radial-gradient(2px 2px at 15% 60%, rgba(230, 245, 255, 1),    transparent 70%),
    radial-gradient(1.5px 1.5px at 50% 80%, rgba(180, 220, 255, 0.95), transparent 70%),
    radial-gradient(2.5px 2.5px at 75% 50%, rgba(120, 200, 255, 0.92), transparent 70%),
    radial-gradient(1.5px 1.5px at 35% 25%, rgba(220, 240, 255, 0.95), transparent 70%),
    radial-gradient(3px 3px at 90% 15%, rgba(60, 160, 255, 0.88), transparent 70%);
  background-size: 80px 170px, 60px 140px, 100px 200px, 65px 150px, 90px 185px;
  animation: blueFireSmall 11s linear infinite;
}
@keyframes blueFireBig {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 30px -400px, -40px -480px, 50px -360px, -30px -380px, 20px -320px; }
}
@keyframes blueFireSmall {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 15px -300px, -25px -240px, 35px -340px, -20px -260px, 25px -320px; }
}

/* ---- Neon Burst (monitor + preview thumbnail) ---- */
.slide-preview.motion-neonburst,
.monitor-stage.motion-neonburst { background-color: #05030f; }
.slide-preview.motion-neonburst::before,
.monitor-stage.motion-neonburst::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 220%; height: 220%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at 30% 40%, rgba(0, 200, 255, 0.42), transparent 42%),
    radial-gradient(ellipse at 70% 55%, rgba(200, 80, 255, 0.36), transparent 42%),
    radial-gradient(ellipse at 55% 75%, rgba(255, 80, 180, 0.32), transparent 38%),
    radial-gradient(ellipse at 20% 70%, rgba(120, 220, 255, 0.28), transparent 40%);
  filter: blur(22px);
  animation: neonNebula 14s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-neonburst::after,
.monitor-stage.motion-neonburst::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2.5px 2.5px at 12% 22%, #00f0ff, transparent 65%),
    radial-gradient(2px 2px at 32% 68%, #ffffff, transparent 65%),
    radial-gradient(3px 3px at 52% 18%, #ff50e0, transparent 65%),
    radial-gradient(1.5px 1.5px at 72% 45%, #00f0ff, transparent 65%),
    radial-gradient(2.5px 2.5px at 88% 75%, #ffffff, transparent 65%),
    radial-gradient(2px 2px at 18% 85%, #ff50e0, transparent 65%),
    radial-gradient(1.5px 1.5px at 45% 55%, #ffffff, transparent 65%),
    radial-gradient(2.5px 2.5px at 62% 82%, #00f0ff, transparent 65%),
    radial-gradient(2px 2px at 78% 10%, #ffffff, transparent 65%),
    radial-gradient(1.5px 1.5px at 8% 55%, #00f0ff, transparent 65%),
    radial-gradient(2px 2px at 92% 32%, #ff50e0, transparent 65%);
  background-repeat: repeat;
  background-size:
    210px 260px, 180px 230px, 240px 290px, 160px 210px,
    200px 250px, 190px 235px, 170px 220px, 230px 280px,
    175px 215px, 195px 245px, 205px 255px;
  animation:
    neonDrift 7s linear infinite,
    neonTwinkle 2.6s ease-in-out infinite;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.6));
  pointer-events: none;
  z-index: 0;
}
@keyframes neonNebula { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes neonTwinkle {
  0%, 100% { opacity: 1.00; }
  50%      { opacity: 0.45; }
}
@keyframes neonDrift {
  from {
    background-position:
       0  0,  0  0,  0  0,  0  0,
       0  0,  0  0,  0  0,  0  0,
       0  0,  0  0,  0  0;
  }
  to {
    background-position:
       210px -260px,  -180px  230px,  240px  290px,  -160px -210px,
      -200px  250px,   190px -235px, -170px  220px,   230px -280px,
       175px -215px,  -195px  245px,  205px -255px;
  }
}

/* ---- Blue Embers (monitor + preview thumbnail) ---- */
.slide-preview.motion-blueembers,
.monitor-stage.motion-blueembers { background-color: #020812; }
.slide-preview.motion-blueembers::before,
.slide-preview.motion-blueembers::after,
.monitor-stage.motion-blueembers::before,
.monitor-stage.motion-blueembers::after {
  content: '';
  position: absolute; inset: 0;
  background-repeat: repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.slide-preview.motion-blueembers::before,
.monitor-stage.motion-blueembers::before {
  background-image:
    radial-gradient(6px 6px at 20% 70%, rgba(60, 180, 255, 0.95),  transparent 65%),
    radial-gradient(8px 8px at 65% 40%, rgba(40, 150, 240, 0.88),  transparent 65%),
    radial-gradient(5px 5px at 82% 80%, rgba(150, 220, 255, 0.92), transparent 65%),
    radial-gradient(7px 7px at 40% 30%, rgba(70, 170, 255, 0.92),  transparent 65%),
    radial-gradient(5px 5px at 10% 50%, rgba(180, 230, 255, 0.88), transparent 65%);
  background-size: 120px 220px, 140px 260px, 100px 190px, 110px 200px, 95px 180px;
  filter: blur(1.5px);
  animation: blueEmbersBig 22s linear infinite;
}
.slide-preview.motion-blueembers::after,
.monitor-stage.motion-blueembers::after {
  background-image:
    radial-gradient(2px 2px at 15% 60%, rgba(220, 240, 255, 1),    transparent 70%),
    radial-gradient(1.5px 1.5px at 50% 80%, rgba(180, 220, 255, 0.95), transparent 70%),
    radial-gradient(2.5px 2.5px at 75% 50%, rgba(120, 200, 255, 0.9),  transparent 70%),
    radial-gradient(1.5px 1.5px at 35% 25%, rgba(210, 235, 255, 0.95), transparent 70%),
    radial-gradient(3px 3px at 90% 15%, rgba(80, 170, 255, 0.88),  transparent 70%);
  background-size: 80px 170px, 60px 140px, 100px 200px, 65px 150px, 90px 185px;
  animation: blueEmbersSmall 12s linear infinite;
}
@keyframes blueEmbersBig {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 30px -400px, -40px -480px, 50px -360px, -30px -380px, 20px -320px; }
}
@keyframes blueEmbersSmall {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 15px -300px, -25px -240px, 35px -340px, -20px -260px, 25px -320px; }
}

/* ============================================================
   PREMIUM MOTION PACK (preview mirror) — same 12 backgrounds as
   projector.css, tuned with softer blur for the small operator
   previews and the Lyric Backgrounds gallery tiles (which reuse
   .slide-preview.motion-*). Keyframes are redefined here because
   the operator window doesn't load projector.css.
   ============================================================ */

/* 1. Flowing Silk */
.slide-preview.motion-silk,
.monitor-stage.motion-silk { background: radial-gradient(120% 120% at 50% 0%, #0c141a, #05070b 70%); }
.slide-preview.motion-silk::before, .slide-preview.motion-silk::after,
.monitor-stage.motion-silk::before, .monitor-stage.motion-silk::after {
  content: ''; position: absolute; inset: -25%;
  mix-blend-mode: screen; pointer-events: none; z-index: 0; filter: blur(26px);
}
.slide-preview.motion-silk::before, .monitor-stage.motion-silk::before {
  background:
    radial-gradient(42% 52% at 32% 36%, rgba(200, 157, 74, 0.62), transparent 70%),
    radial-gradient(46% 56% at 70% 62%, rgba(46, 115, 109, 0.55), transparent 72%);
  animation: silkA 19s ease-in-out infinite alternate;
}
.slide-preview.motion-silk::after, .monitor-stage.motion-silk::after {
  background:
    radial-gradient(38% 48% at 64% 30%, rgba(224, 181, 96, 0.50), transparent 70%),
    radial-gradient(52% 52% at 34% 72%, rgba(58, 139, 133, 0.46), transparent 72%);
  animation: silkB 25s ease-in-out infinite alternate;
}
@keyframes silkA { 0% { transform: translate(-8%, -6%) rotate(0deg) scale(1); } 100% { transform: translate(8%, 6%) rotate(9deg) scale(1.18); } }
@keyframes silkB { 0% { transform: translate(7%, 9%) rotate(0deg) scale(1.12); } 100% { transform: translate(-7%, -9%) rotate(-11deg) scale(1); } }

/* 2. Golden Dust */
.slide-preview.motion-golddust,
.monitor-stage.motion-golddust { background: radial-gradient(ellipse at 50% 120%, #1b1409, #05060a 72%); }
.slide-preview.motion-golddust::before, .slide-preview.motion-golddust::after,
.monitor-stage.motion-golddust::before, .monitor-stage.motion-golddust::after {
  content: ''; position: absolute; inset: 0;
  background-repeat: repeat; mix-blend-mode: screen; pointer-events: none; z-index: 0;
}
.slide-preview.motion-golddust::before, .monitor-stage.motion-golddust::before {
  background-image:
    radial-gradient(2px 2px at 18% 30%, rgba(255, 226, 160, 0.95), transparent 60%),
    radial-gradient(2.5px 2.5px at 62% 70%, rgba(230, 188, 110, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 22%, rgba(255, 240, 200, 0.95), transparent 60%),
    radial-gradient(2px 2px at 38% 84%, rgba(224, 181, 96, 0.9), transparent 60%);
  background-size: 150px 230px, 180px 260px, 130px 210px, 160px 240px;
  filter: blur(0.6px) drop-shadow(0 0 4px rgba(230, 190, 110, 0.6));
  animation: goldDustA 28s linear infinite;
}
.slide-preview.motion-golddust::after, .monitor-stage.motion-golddust::after {
  background-image:
    radial-gradient(1.5px 1.5px at 28% 60%, rgba(255, 244, 214, 1), transparent 65%),
    radial-gradient(1px 1px at 72% 40%, rgba(255, 230, 170, 0.95), transparent 65%),
    radial-gradient(2px 2px at 52% 15%, rgba(230, 190, 110, 0.9), transparent 65%);
  background-size: 110px 180px, 90px 150px, 120px 200px;
  filter: drop-shadow(0 0 3px rgba(255, 220, 150, 0.7));
  animation: goldDustB 17s linear infinite;
}
@keyframes goldDustA { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 30px -460px, -40px -520px, 20px -420px, -25px -480px; } }
@keyframes goldDustB { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -20px -360px, 25px -300px, -15px -400px; } }

/* 3. Worship Nebula */
.slide-preview.motion-nebula,
.monitor-stage.motion-nebula { background: radial-gradient(130% 100% at 50% 40%, #0a0a1c, #04040c 75%); }
.slide-preview.motion-nebula::before, .monitor-stage.motion-nebula::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 200%; height: 200%; transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at 32% 40%, rgba(46, 115, 109, 0.45), transparent 45%),
    radial-gradient(ellipse at 68% 55%, rgba(120, 90, 200, 0.38), transparent 45%),
    radial-gradient(ellipse at 52% 72%, rgba(200, 157, 74, 0.32), transparent 42%);
  filter: blur(26px); mix-blend-mode: screen; pointer-events: none; z-index: 0;
  animation: nebulaSpin 48s linear infinite;
}
.slide-preview.motion-nebula::after, .monitor-stage.motion-nebula::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent 60%),
    radial-gradient(1px 1px at 32% 68%, rgba(220, 230, 255, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 18%, #fff, transparent 60%),
    radial-gradient(1px 1px at 78% 52%, rgba(255, 240, 210, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 78%, #fff, transparent 60%),
    radial-gradient(1px 1px at 22% 85%, rgba(220, 230, 255, 0.85), transparent 60%);
  background-repeat: repeat;
  background-size: 120px 120px, 100px 100px, 140px 140px, 110px 110px, 130px 130px, 95px 95px;
  mix-blend-mode: screen; pointer-events: none; z-index: 0;
  animation: nebulaTwinkle 4s ease-in-out infinite;
}
@keyframes nebulaSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes nebulaTwinkle { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.4; } }

/* 4. Cinematic Light Leaks */
.slide-preview.motion-lightleak,
.monitor-stage.motion-lightleak { background: #0a0805; }
.slide-preview.motion-lightleak::before, .slide-preview.motion-lightleak::after,
.monitor-stage.motion-lightleak::before, .monitor-stage.motion-lightleak::after {
  content: ''; position: absolute; inset: -30%;
  mix-blend-mode: screen; pointer-events: none; z-index: 0; filter: blur(24px);
}
.slide-preview.motion-lightleak::before, .monitor-stage.motion-lightleak::before {
  background: linear-gradient(115deg, transparent 20%, rgba(255, 180, 90, 0.55) 40%, rgba(255, 120, 60, 0.35) 52%, transparent 70%);
  background-size: 250% 250%;
  animation: leakSweepA 14s ease-in-out infinite alternate;
}
.slide-preview.motion-lightleak::after, .monitor-stage.motion-lightleak::after {
  background:
    linear-gradient(75deg, transparent 30%, rgba(255, 210, 130, 0.45) 55%, transparent 80%),
    radial-gradient(ellipse at 80% 10%, rgba(255, 150, 80, 0.4), transparent 55%);
  background-size: 220% 220%, 100% 100%;
  animation: leakSweepB 19s ease-in-out infinite alternate;
}
@keyframes leakSweepA { 0% { background-position: 0% 0%; opacity: 0.7; } 100% { background-position: 100% 100%; opacity: 1; } }
@keyframes leakSweepB { 0% { background-position: 100% 0%, 0 0; opacity: 0.8; } 100% { background-position: 0% 100%, 0 0; opacity: 1; } }

/* 5. Aurora Mesh */
.slide-preview.motion-mesh,
.monitor-stage.motion-mesh { background: #070b12; }
.slide-preview.motion-mesh::before, .monitor-stage.motion-mesh::before {
  content: ''; position: absolute; inset: -20%;
  pointer-events: none; z-index: 0; filter: blur(24px); mix-blend-mode: screen;
  background:
    radial-gradient(40% 40% at 20% 25%, rgba(46, 115, 109, 0.6), transparent 70%),
    radial-gradient(45% 45% at 80% 30%, rgba(70, 110, 200, 0.5), transparent 70%),
    radial-gradient(50% 50% at 30% 80%, rgba(200, 157, 74, 0.5), transparent 70%),
    radial-gradient(45% 45% at 75% 78%, rgba(150, 90, 190, 0.45), transparent 70%);
  background-size: 200% 200%;
  animation: meshMorph 22s ease-in-out infinite alternate;
}
@keyframes meshMorph {
  0%   { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%; }
  50%  { background-position: 40% 30%, 60% 40%, 30% 60%, 70% 50%; }
  100% { background-position: 100% 100%, 0% 100%, 100% 0%, 0% 0%; }
}

/* 6. Deep Ocean */
.slide-preview.motion-oceandeep,
.monitor-stage.motion-oceandeep { background: linear-gradient(180deg, #03101f 0%, #010a15 100%); }
.slide-preview.motion-oceandeep::before, .monitor-stage.motion-oceandeep::before {
  content: ''; position: absolute; inset: -20%;
  pointer-events: none; z-index: 0; mix-blend-mode: screen; filter: blur(16px);
  background:
    radial-gradient(60% 30% at 30% 20%, rgba(60, 160, 220, 0.4), transparent 60%),
    radial-gradient(50% 25% at 70% 35%, rgba(90, 200, 230, 0.32), transparent 60%);
  animation: oceanLight 16s ease-in-out infinite alternate;
}
.slide-preview.motion-oceandeep::after, .monitor-stage.motion-oceandeep::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: 0.5;
  background: repeating-linear-gradient(100deg, transparent 0 22px, rgba(120, 210, 255, 0.07) 22px 26px);
  background-size: 200% 100%; filter: blur(1.5px);
  animation: oceanCaustic 12s linear infinite;
}
@keyframes oceanLight { 0% { transform: translate(-6%, -3%) scale(1); } 100% { transform: translate(6%, 3%) scale(1.12); } }
@keyframes oceanCaustic { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* 7. Royal Glow */
.slide-preview.motion-royalglow,
.monitor-stage.motion-royalglow { background: radial-gradient(120% 120% at 50% 25%, #160d28, #08040f 75%); }
.slide-preview.motion-royalglow::before, .monitor-stage.motion-royalglow::before {
  content: ''; position: absolute; inset: -15%;
  pointer-events: none; z-index: 0; mix-blend-mode: screen; filter: blur(26px);
  background:
    radial-gradient(45% 50% at 35% 35%, rgba(140, 90, 210, 0.55), transparent 70%),
    radial-gradient(45% 50% at 70% 60%, rgba(200, 157, 74, 0.45), transparent 70%);
  animation: royalPulse 9s ease-in-out infinite;
}
.slide-preview.motion-royalglow::after, .monitor-stage.motion-royalglow::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0; mix-blend-mode: screen;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 235, 190, 0.25) 50%, transparent 65%);
  background-size: 250% 250%;
  animation: royalSheen 11s linear infinite;
}
@keyframes royalPulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes royalSheen { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* 8. Sunbeams */
.slide-preview.motion-sunbeam,
.monitor-stage.motion-sunbeam { background: radial-gradient(100% 80% at 50% 0%, #1a1308, #07060a 70%); }
.slide-preview.motion-sunbeam::before, .monitor-stage.motion-sunbeam::before {
  content: ''; position: absolute; top: -40%; left: 50%;
  width: 140%; height: 170%; transform: translateX(-50%); transform-origin: 50% 0%;
  background: conic-gradient(from 180deg at 50% 0%,
    transparent 0deg, rgba(255, 235, 190, 0.5) 8deg, transparent 16deg,
    rgba(255, 225, 170, 0.4) 26deg, transparent 36deg,
    rgba(255, 240, 200, 0.5) 50deg, transparent 60deg,
    rgba(255, 225, 170, 0.4) 74deg, transparent 84deg);
  filter: blur(6px); mix-blend-mode: screen; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  animation: sunbeamSway 12s ease-in-out infinite alternate;
}
.slide-preview.motion-sunbeam::after, .monitor-stage.motion-sunbeam::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 0%, rgba(255, 225, 160, 0.35), transparent 70%);
  mix-blend-mode: screen; pointer-events: none; z-index: 0;
  animation: sunbeamGlow 6s ease-in-out infinite;
}
@keyframes sunbeamSway { 0% { transform: translateX(-50%) rotate(-4deg); } 100% { transform: translateX(-50%) rotate(4deg); } }
@keyframes sunbeamGlow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* 9. Gentle Snow */
.slide-preview.motion-snowfall,
.monitor-stage.motion-snowfall { background: linear-gradient(180deg, #0a1018 0%, #05080e 100%); }
.slide-preview.motion-snowfall::before, .slide-preview.motion-snowfall::after,
.monitor-stage.motion-snowfall::before, .monitor-stage.motion-snowfall::after {
  content: ''; position: absolute; inset: 0;
  background-repeat: repeat; pointer-events: none; z-index: 0;
}
.slide-preview.motion-snowfall::before, .monitor-stage.motion-snowfall::before {
  background-image:
    radial-gradient(2.5px 2.5px at 20% 20%, rgba(255, 255, 255, 0.95), transparent 65%),
    radial-gradient(2px 2px at 60% 50%, rgba(230, 240, 255, 0.9), transparent 65%),
    radial-gradient(2px 2px at 80% 30%, rgba(255, 255, 255, 0.92), transparent 65%),
    radial-gradient(2px 2px at 40% 75%, rgba(220, 235, 255, 0.9), transparent 65%);
  background-size: 150px 160px, 130px 140px, 170px 180px, 140px 150px;
  filter: blur(0.5px);
  animation: snowFallA 14s linear infinite;
}
.slide-preview.motion-snowfall::after, .monitor-stage.motion-snowfall::after {
  background-image:
    radial-gradient(1.5px 1.5px at 30% 40%, rgba(255, 255, 255, 0.85), transparent 65%),
    radial-gradient(1px 1px at 70% 60%, rgba(220, 235, 255, 0.8), transparent 65%),
    radial-gradient(1.5px 1.5px at 50% 15%, rgba(255, 255, 255, 0.85), transparent 65%);
  background-size: 100px 110px, 85px 95px, 110px 120px;
  animation: snowFallB 9s linear infinite;
}
@keyframes snowFallA { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 20px 320px, -15px 280px, 25px 360px, -20px 300px; } }
@keyframes snowFallB { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -15px 220px, 20px 190px, -10px 240px; } }

/* 10. Rising Lanterns */
.slide-preview.motion-lanterns,
.monitor-stage.motion-lanterns { background: radial-gradient(ellipse at 50% 120%, #1a1206, #060509 72%); }
.slide-preview.motion-lanterns::before, .slide-preview.motion-lanterns::after,
.monitor-stage.motion-lanterns::before, .monitor-stage.motion-lanterns::after {
  content: ''; position: absolute; inset: 0;
  background-repeat: repeat; mix-blend-mode: screen; pointer-events: none; z-index: 0;
}
.slide-preview.motion-lanterns::before, .monitor-stage.motion-lanterns::before {
  background-image:
    radial-gradient(10px 10px at 18% 30%, rgba(255, 190, 90, 0.85), transparent 62%),
    radial-gradient(14px 14px at 64% 55%, rgba(255, 170, 70, 0.8), transparent 62%),
    radial-gradient(9px 9px at 84% 25%, rgba(255, 210, 120, 0.85), transparent 62%),
    radial-gradient(11px 11px at 40% 78%, rgba(255, 180, 80, 0.8), transparent 62%);
  background-size: 180px 260px, 220px 300px, 160px 230px, 200px 280px;
  filter: blur(3px);
  animation: lanternsA 26s linear infinite;
}
.slide-preview.motion-lanterns::after, .monitor-stage.motion-lanterns::after {
  background-image:
    radial-gradient(5px 5px at 30% 50%, rgba(255, 220, 150, 0.9), transparent 62%),
    radial-gradient(4px 4px at 72% 35%, rgba(255, 200, 110, 0.85), transparent 62%),
    radial-gradient(6px 6px at 52% 80%, rgba(255, 190, 90, 0.85), transparent 62%);
  background-size: 120px 190px, 100px 160px, 130px 210px;
  filter: blur(1.5px) drop-shadow(0 0 6px rgba(255, 180, 90, 0.6));
  animation: lanternsB 18s linear infinite;
}
@keyframes lanternsA { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 25px -520px, -30px -600px, 20px -460px, -25px -560px; } }
@keyframes lanternsB { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -20px -380px, 25px -320px, -15px -420px; } }

/* 11. Drifting Haze */
.slide-preview.motion-haze,
.monitor-stage.motion-haze { background: linear-gradient(180deg, #0b1016 0%, #060a10 100%); }
.slide-preview.motion-haze::before, .slide-preview.motion-haze::after,
.monitor-stage.motion-haze::before, .monitor-stage.motion-haze::after {
  content: ''; position: absolute; inset: -30%;
  pointer-events: none; z-index: 0; mix-blend-mode: screen; filter: blur(26px);
}
.slide-preview.motion-haze::before, .monitor-stage.motion-haze::before {
  background:
    radial-gradient(45% 35% at 30% 50%, rgba(120, 150, 180, 0.3), transparent 70%),
    radial-gradient(40% 30% at 70% 45%, rgba(90, 120, 160, 0.26), transparent 70%);
  animation: hazeA 30s ease-in-out infinite alternate;
}
.slide-preview.motion-haze::after, .monitor-stage.motion-haze::after {
  background: radial-gradient(50% 40% at 55% 60%, rgba(140, 160, 190, 0.24), transparent 70%);
  animation: hazeB 38s ease-in-out infinite alternate;
}
@keyframes hazeA { 0% { transform: translate(-10%, 0) scale(1); } 100% { transform: translate(10%, 3%) scale(1.1); } }
@keyframes hazeB { 0% { transform: translate(8%, 2%) scale(1.05); } 100% { transform: translate(-8%, -2%) scale(1); } }

/* 12. Gold Shimmer */
.slide-preview.motion-shimmer,
.monitor-stage.motion-shimmer { background: radial-gradient(120% 120% at 50% 30%, #14100a, #07060a 75%); }
.slide-preview.motion-shimmer::before, .monitor-stage.motion-shimmer::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 225, 160, 0.35) 48%, rgba(255, 240, 200, 0.5) 50%, rgba(255, 225, 160, 0.35) 52%, transparent 62%);
  background-size: 300% 300%;
  animation: shimmerSweep 7s linear infinite;
}
.slide-preview.motion-shimmer::after, .monitor-stage.motion-shimmer::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0; mix-blend-mode: screen;
  background-image:
    radial-gradient(1.5px 1.5px at 22% 30%, rgba(255, 240, 200, 0.95), transparent 60%),
    radial-gradient(1px 1px at 58% 62%, rgba(255, 225, 160, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 80% 40%, rgba(255, 245, 210, 0.95), transparent 60%),
    radial-gradient(1px 1px at 38% 80%, rgba(255, 225, 160, 0.85), transparent 60%);
  background-repeat: repeat;
  background-size: 110px 110px, 90px 90px, 130px 130px, 100px 100px;
  animation: shimmerTwinkle 3.4s ease-in-out infinite;
}
@keyframes shimmerSweep { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@keyframes shimmerTwinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .slide-preview[class*="motion-"]::before,
  .slide-preview[class*="motion-"]::after,
  .monitor-stage[class*="motion-"]::before,
  .monitor-stage[class*="motion-"]::after,
  .slide-preview.motion-breathe,
  .monitor-stage.motion-breathe {
    animation: none !important;
  }
}

/* =============================================================
   Motion chips — style panel
   Each chip has a tiny animated swatch that previews its preset.
   ============================================================= */

.motion-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.motion-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px 0 6px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.motion-chip:hover {
  background: var(--panel-3);
  color: var(--ink);
  border-color: rgba(200, 157, 74, 0.3);
}
.motion-chip.active {
  background: linear-gradient(180deg, var(--myrtle-h), var(--myrtle));
  border-color: var(--myrtle);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(200, 157, 74, 0.35),
    0 4px 12px -4px rgba(46, 115, 109, 0.5);
}

.motion-chip-swatch {
  position: relative;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  background: #0b1530;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  flex: 0 0 auto;
}
/* none: static flat */
.motion-chip-swatch.motion-none {
  background: linear-gradient(135deg, #1a2340 0%, #0b1530 100%);
}
/* kenburns: simulated bg image ping-pong */
.motion-chip-swatch.motion-kenburns {
  background:
    linear-gradient(135deg, rgba(200, 157, 74, 0.5), transparent 70%),
    linear-gradient(315deg, rgba(46, 115, 109, 0.5), transparent 70%),
    #0b1530;
  background-size: 150% 150%;
  animation: chipKenBurns 4s ease-in-out infinite alternate;
}
@keyframes chipKenBurns {
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 60% 40%, 40% 60%, 0 0; }
}
/* drift: radial highlight moving */
.motion-chip-swatch.motion-drift {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 245, 220, 0.6), transparent 55%),
    #0b1530;
  animation: chipDrift 3s ease-in-out infinite alternate;
}
@keyframes chipDrift {
  0%   { background-position: 0% 0%, 0 0; }
  100% { background-position: 80% 70%, 0 0; }
}
/* bokeh: blurred dots floating */
.motion-chip-swatch.motion-bokeh {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 230, 180, 0.9), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(220, 200, 255, 0.7), transparent 28%),
    #0b1530;
  filter: blur(0.5px);
  animation: chipBokeh 3s ease-in-out infinite alternate;
}
@keyframes chipBokeh {
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 50% 50%, 50% 50%, 0 0; }
}
/* rays: conic spinning */
.motion-chip-swatch.motion-rays {
  background: conic-gradient(from 0deg,
    rgba(255, 245, 220, 0.4) 0deg,
    transparent 30deg,
    rgba(255, 245, 220, 0.3) 90deg,
    transparent 140deg,
    rgba(255, 245, 220, 0.4) 220deg,
    transparent 280deg,
    rgba(255, 245, 220, 0.4) 360deg), #0b1530;
  animation: chipRays 5s linear infinite;
}
@keyframes chipRays { to { transform: rotate(360deg); } }
/* glow: pulsing spot */
.motion-chip-swatch.motion-glow {
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 240, 215, 0.8), transparent 60%), #0b1530;
  animation: chipGlow 2.5s ease-in-out infinite;
}
@keyframes chipGlow {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* =============================================================
   Toolbar motion picker — operator-level session motion.
   Shows an animated swatch + current preset name; click opens a
   dropdown of the 6 presets.
   ============================================================= */

.tbar-btn.tbar-motion {
  padding-left: 6px !important;
  gap: 8px;
}
.tb-motion-swatch {
  position: relative;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  background: #0b1530;
  border: 1px solid rgba(255,255,255,0.08);
  flex: 0 0 auto;
  display: inline-block;
}
/* Reuse the motion-<name> backgrounds defined for the style-panel chips */
.tb-motion-swatch.motion-none {
  background: linear-gradient(135deg, #1a2340 0%, #0b1530 100%);
}
.tb-motion-swatch.motion-kenburns {
  background:
    linear-gradient(135deg, rgba(200, 157, 74, 0.5), transparent 70%),
    linear-gradient(315deg, rgba(46, 115, 109, 0.5), transparent 70%),
    #0b1530;
  background-size: 150% 150%;
  animation: chipKenBurns 4s ease-in-out infinite alternate;
}
.tb-motion-swatch.motion-drift {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 245, 220, 0.6), transparent 55%),
    #0b1530;
  animation: chipDrift 3s ease-in-out infinite alternate;
}
.tb-motion-swatch.motion-bokeh {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 230, 180, 0.9), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(220, 200, 255, 0.7), transparent 28%),
    #0b1530;
  animation: chipBokeh 3s ease-in-out infinite alternate;
}
.tb-motion-swatch.motion-rays {
  background: conic-gradient(from 0deg,
    rgba(255, 245, 220, 0.4) 0deg,
    transparent 30deg,
    rgba(255, 245, 220, 0.3) 90deg,
    transparent 140deg,
    rgba(255, 245, 220, 0.4) 220deg,
    transparent 280deg,
    rgba(255, 245, 220, 0.4) 360deg), #0b1530;
  animation: chipRays 5s linear infinite;
}
.tb-motion-swatch.motion-glow {
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 240, 215, 0.8), transparent 60%), #0b1530;
  animation: chipGlow 2.5s ease-in-out infinite;
}
.tb-motion-swatch.motion-aurora {
  background:
    linear-gradient(100deg,
      transparent 10%,
      rgba(46, 115, 109, 0.8) 35%,
      rgba(200, 157, 74, 0.7) 55%,
      rgba(145, 100, 180, 0.6) 75%,
      transparent 95%),
    #0b1530;
  background-size: 200% 100%;
  animation: chipAurora 3s ease-in-out infinite alternate;
}
@keyframes chipAurora {
  0%   { background-position: 0% 0%, 0 0; }
  100% { background-position: 100% 0%, 0 0; }
}
.tb-motion-swatch.motion-starfield {
  background:
    radial-gradient(0.8px 0.8px at 15% 20%, #fff, transparent),
    radial-gradient(0.8px 0.8px at 70% 30%, #fff, transparent),
    radial-gradient(1px 1px at 40% 70%, #fff, transparent),
    radial-gradient(0.8px 0.8px at 85% 60%, #fff, transparent),
    radial-gradient(0.8px 0.8px at 25% 55%, #fff, transparent),
    #0b1530;
  animation: chipStarfield 2s ease-in-out infinite;
}
@keyframes chipStarfield {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1.0; }
}
.tb-motion-swatch.motion-embers {
  background:
    radial-gradient(1px 1px at 30% 60%, rgba(255, 170, 100, 1), transparent),
    radial-gradient(0.8px 0.8px at 65% 40%, rgba(255, 140, 80, 1), transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(255, 200, 130, 0.9), transparent),
    #1a0f0a;
  background-size: 100% 200%;
  animation: chipEmbers 2s linear infinite;
}
@keyframes chipEmbers {
  from { background-position: 0 100%, 0 100%, 0 100%, 0 0; }
  to   { background-position: 0 -100%, 0 -100%, 0 -100%, 0 0; }
}
.tb-motion-swatch.motion-mist {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.6), transparent 55%),
    #0b1530;
  background-size: 150% 100%;
  animation: chipMist 3.5s ease-in-out infinite alternate;
}
@keyframes chipMist {
  0%   { background-position: 0% 0%, 0 0; }
  100% { background-position: 80% 0%, 0 0; }
}
.tb-motion-swatch.motion-waves {
  background:
    linear-gradient(180deg,
      transparent 30%,
      rgba(46, 115, 109, 0.9) 45%,
      transparent 60%),
    linear-gradient(180deg,
      transparent 60%,
      rgba(200, 157, 74, 0.7) 72%,
      transparent 82%),
    #0b1530;
  background-size: 100% 250%, 100% 250%;
  animation: chipWaves 3s ease-in-out infinite alternate;
}
@keyframes chipWaves {
  0%   { background-position: 0 -30%, 0 20%; }
  100% { background-position: 0 30%, 0 -20%; }
}
.tb-motion-swatch.motion-breathe {
  background: linear-gradient(135deg, #2a3550 0%, #0b1530 100%);
  animation: chipBreathe 2.5s ease-in-out infinite;
}
@keyframes chipBreathe {
  0%, 100% { filter: brightness(0.8); }
  50%      { filter: brightness(1.2); }
}
.tb-motion-swatch.motion-particles {
  background:
    radial-gradient(1px 1px at 15% 30%, #E3B96E, transparent),
    radial-gradient(0.8px 0.8px at 60% 70%, #ffffff, transparent),
    radial-gradient(1px 1px at 80% 25%, #C89D4A, transparent),
    radial-gradient(0.8px 0.8px at 35% 75%, #F8ECD0, transparent),
    radial-gradient(1px 1px at 70% 50%, #ffffff, transparent),
    #0b1530;
  background-size: 100% 200%, 100% 200%, 100% 200%, 100% 200%, 100% 200%;
  animation: chipParticles 2.6s linear infinite;
}
@keyframes chipParticles {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 40% -200%, -40% 200%, 50% 200%, -30% -200%, 60% 0; }
}
.tb-motion-swatch.motion-fireflux {
  background:
    radial-gradient(ellipse at 30% 100%, rgba(255, 80, 30, 0.9), transparent 60%),
    radial-gradient(ellipse at 60% 100%, rgba(255, 160, 50, 0.95), transparent 60%),
    radial-gradient(ellipse at 85% 100%, rgba(255, 220, 100, 0.8), transparent 55%),
    #1a0805;
  animation: chipFireflux 1.3s ease-in-out infinite;
}
@keyframes chipFireflux {
  0%, 100% { filter: brightness(1) saturate(1); transform: scaleY(1); }
  50%      { filter: brightness(1.25) saturate(1.2); transform: scaleY(1.08); }
}

/* Swatches for the new blue presets. Shared across the toolbar chip
   and the dropdown menu icon so both match what hits the projector. */
.tb-motion-swatch.motion-bluefire,
.motion-menu-swatch.motion-bluefire {
  background:
    radial-gradient(1px 1px at 20% 80%, #64c8ff, transparent),
    radial-gradient(0.8px 0.8px at 55% 60%, #afeeee, transparent),
    radial-gradient(1px 1px at 80% 40%, #1E90FF, transparent),
    radial-gradient(0.8px 0.8px at 35% 30%, #DBF0FF, transparent),
    radial-gradient(1px 1px at 70% 15%, #64c8ff, transparent),
    #020814;
  background-size: 100% 200%, 100% 200%, 100% 200%, 100% 200%, 100% 200%;
  animation: chipBlueFire 2.4s linear infinite;
}
@keyframes chipBlueFire {
  from { background-position: 0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0; }
  to   { background-position: 0 -100%, 0 -100%, 0 -100%, 0 -100%, 0 -100%, 0 0; }
}

.tb-motion-swatch.motion-neonburst,
.motion-menu-swatch.motion-neonburst {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(0, 220, 255, 0.65), transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(255, 70, 200, 0.55), transparent 50%),
    radial-gradient(1px 1px at 20% 70%, #fff, transparent),
    radial-gradient(0.8px 0.8px at 60% 30%, #fff, transparent),
    radial-gradient(1px 1px at 80% 60%, #00f0ff, transparent),
    radial-gradient(0.8px 0.8px at 40% 55%, #ff50e0, transparent),
    #05030f;
  animation: chipNeonBurst 2.5s ease-in-out infinite;
}
@keyframes chipNeonBurst {
  0%, 100% { opacity: 1.0; filter: brightness(1); }
  50%      { opacity: 0.7; filter: brightness(1.25); }
}

.tb-motion-swatch.motion-blueembers,
.motion-menu-swatch.motion-blueembers {
  background:
    radial-gradient(1px 1px at 30% 60%, rgba(120, 200, 255, 1), transparent),
    radial-gradient(0.8px 0.8px at 65% 40%, rgba(60, 170, 255, 1), transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(200, 230, 255, 0.95), transparent),
    #021026;
  background-size: 100% 200%;
  animation: chipBlueEmbers 2s linear infinite;
}
@keyframes chipBlueEmbers {
  from { background-position: 0 100%, 0 100%, 0 100%, 0 0; }
  to   { background-position: 0 -100%, 0 -100%, 0 -100%, 0 0; }
}

/* Blue Rain chip: bokeh dots falling (background-position scrolls down) */
.tb-motion-swatch.motion-bluebokeh,
.motion-menu-swatch.motion-bluebokeh {
  background:
    radial-gradient(3px 3px at 25% 35%, rgba(80, 180, 255, 0.75), transparent 55%),
    radial-gradient(2px 2px at 70% 60%, rgba(120, 210, 255, 0.75), transparent 55%),
    radial-gradient(1px 1px at 45% 20%, rgba(200, 230, 255, 0.95), transparent),
    radial-gradient(0.8px 0.8px at 85% 25%, rgba(180, 230, 255, 0.95), transparent),
    radial-gradient(0.8px 0.8px at 15% 70%, rgba(140, 220, 255, 0.9), transparent),
    #020818;
  background-size: 100% 200%, 100% 200%, 100% 200%, 100% 200%, 100% 200%, 100% 100%;
  animation: chipBlueRain 2.2s linear infinite;
}
@keyframes chipBlueRain {
  from { background-position: 0 -100%, 0 -100%, 0 -100%, 0 -100%, 0 -100%, 0 0; }
  to   { background-position: 0 100%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0; }
}

/* Blue Halo chip: a light cone from the top that breathes */
.tb-motion-swatch.motion-bluerise,
.motion-menu-swatch.motion-bluerise {
  background:
    radial-gradient(ellipse 70% 120% at 50% 0%, rgba(140, 210, 255, 0.7), transparent 55%),
    radial-gradient(ellipse 35% 90% at 50% 0%, rgba(220, 245, 255, 0.6), transparent 45%),
    #020818;
  animation: chipBlueHalo 3s ease-in-out infinite alternate;
}
@keyframes chipBlueHalo {
  0%   { filter: brightness(0.85); }
  100% { filter: brightness(1.20); }
}

/* Swatches for the premium motion pack — compact representative
   gradients so the toolbar chip + dropdown match the projector vibe. */
.tb-motion-swatch.motion-silk, .motion-menu-swatch.motion-silk {
  background: radial-gradient(60% 60% at 30% 35%, rgba(200,157,74,0.9), transparent 70%),
              radial-gradient(60% 60% at 70% 65%, rgba(46,115,109,0.85), transparent 72%), #0c141a;
}
.tb-motion-swatch.motion-golddust, .motion-menu-swatch.motion-golddust {
  background: radial-gradient(1px 1px at 25% 35%, rgba(255,235,180,0.95), transparent),
              radial-gradient(1px 1px at 60% 65%, rgba(230,190,110,0.95), transparent),
              radial-gradient(1px 1px at 80% 25%, rgba(255,240,200,0.95), transparent),
              radial-gradient(ellipse at 50% 120%, #1b1409, #06060a 75%);
}
.tb-motion-swatch.motion-nebula, .motion-menu-swatch.motion-nebula {
  background: radial-gradient(ellipse at 30% 40%, rgba(46,115,109,0.6), transparent 50%),
              radial-gradient(ellipse at 70% 60%, rgba(120,90,200,0.55), transparent 50%),
              radial-gradient(1px 1px at 50% 30%, #fff, transparent),
              radial-gradient(1px 1px at 80% 70%, #fff, transparent), #06061a;
}
.tb-motion-swatch.motion-lightleak, .motion-menu-swatch.motion-lightleak {
  background: linear-gradient(115deg, transparent 25%, rgba(255,180,90,0.8) 50%, rgba(255,120,60,0.5) 60%, transparent 80%), #0a0805;
}
.tb-motion-swatch.motion-mesh, .motion-menu-swatch.motion-mesh {
  background: radial-gradient(50% 50% at 20% 25%, rgba(46,115,109,0.85), transparent 70%),
              radial-gradient(50% 50% at 80% 30%, rgba(70,110,200,0.75), transparent 70%),
              radial-gradient(50% 50% at 30% 80%, rgba(200,157,74,0.75), transparent 70%),
              radial-gradient(50% 50% at 78% 78%, rgba(150,90,190,0.7), transparent 70%), #070b12;
}
.tb-motion-swatch.motion-oceandeep, .motion-menu-swatch.motion-oceandeep {
  background: radial-gradient(70% 50% at 35% 25%, rgba(60,160,220,0.7), transparent 65%),
              radial-gradient(60% 40% at 70% 40%, rgba(90,200,230,0.55), transparent 65%),
              linear-gradient(180deg, #03101f, #010a15);
}
.tb-motion-swatch.motion-royalglow, .motion-menu-swatch.motion-royalglow {
  background: radial-gradient(55% 60% at 35% 35%, rgba(140,90,210,0.8), transparent 70%),
              radial-gradient(55% 60% at 70% 62%, rgba(200,157,74,0.65), transparent 70%), #100a20;
}
.tb-motion-swatch.motion-sunbeam, .motion-menu-swatch.motion-sunbeam {
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(255,235,190,0.7) 12deg, transparent 24deg, rgba(255,235,190,0.6) 48deg, transparent 64deg),
              radial-gradient(60% 50% at 50% 0%, rgba(255,225,160,0.5), transparent 70%), #14100a;
}
.tb-motion-swatch.motion-snowfall, .motion-menu-swatch.motion-snowfall {
  background: radial-gradient(1.4px 1.4px at 25% 30%, #fff, transparent),
              radial-gradient(1.2px 1.2px at 65% 55%, rgba(230,240,255,0.95), transparent),
              radial-gradient(1.4px 1.4px at 80% 25%, #fff, transparent),
              linear-gradient(180deg, #0a1018, #05080e);
}
.tb-motion-swatch.motion-lanterns, .motion-menu-swatch.motion-lanterns {
  background: radial-gradient(5px 5px at 30% 40%, rgba(255,200,110,0.95), transparent 62%),
              radial-gradient(4px 4px at 70% 60%, rgba(255,180,80,0.9), transparent 62%),
              radial-gradient(ellipse at 50% 120%, #1a1206, #060509 75%);
}
.tb-motion-swatch.motion-haze, .motion-menu-swatch.motion-haze {
  background: radial-gradient(60% 50% at 35% 50%, rgba(140,160,190,0.55), transparent 70%),
              radial-gradient(50% 45% at 70% 50%, rgba(100,130,170,0.45), transparent 70%),
              linear-gradient(180deg, #0b1016, #060a10);
}
.tb-motion-swatch.motion-shimmer, .motion-menu-swatch.motion-shimmer {
  background: linear-gradient(115deg, transparent 38%, rgba(255,230,170,0.8) 50%, transparent 62%), #14100a;
}

.tb-motion-label {
  font-weight: 500;
  color: var(--ink-2);
}
.tbar-btn.tbar-motion:hover .tb-motion-label { color: var(--ink); }
.tb-motion-chev {
  font-size: 9px;
  color: var(--ink-3);
  margin-left: 2px;
}

/* Dropdown variant — motion items with animated swatches */
.motion-dropdown .motion-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.motion-dropdown .motion-menu-item:hover {
  background: var(--panel-2);
  color: var(--ink);
}
.motion-dropdown .motion-menu-item.active {
  color: var(--gold-h);
  font-weight: 600;
}
.motion-menu-swatch {
  position: relative;
  width: 26px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  background: #0b1530;
  border: 1px solid rgba(255,255,255,0.1);
  flex: 0 0 auto;
}
/* Animated swatches for the dropdown — identical visuals */
.motion-menu-swatch.motion-none {
  background: linear-gradient(135deg, #1a2340 0%, #0b1530 100%);
}
.motion-menu-swatch.motion-kenburns {
  background:
    linear-gradient(135deg, rgba(200, 157, 74, 0.5), transparent 70%),
    linear-gradient(315deg, rgba(46, 115, 109, 0.5), transparent 70%),
    #0b1530;
  background-size: 150% 150%;
  animation: chipKenBurns 4s ease-in-out infinite alternate;
}
.motion-menu-swatch.motion-drift {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 245, 220, 0.6), transparent 55%),
    #0b1530;
  animation: chipDrift 3s ease-in-out infinite alternate;
}
.motion-menu-swatch.motion-bokeh {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 230, 180, 0.9), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(220, 200, 255, 0.7), transparent 28%),
    #0b1530;
  animation: chipBokeh 3s ease-in-out infinite alternate;
}
.motion-menu-swatch.motion-rays {
  background: conic-gradient(from 0deg,
    rgba(255, 245, 220, 0.4) 0deg,
    transparent 30deg,
    rgba(255, 245, 220, 0.3) 90deg,
    transparent 140deg,
    rgba(255, 245, 220, 0.4) 220deg,
    transparent 280deg,
    rgba(255, 245, 220, 0.4) 360deg), #0b1530;
  animation: chipRays 5s linear infinite;
}
.motion-menu-swatch.motion-glow {
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 240, 215, 0.8), transparent 60%), #0b1530;
  animation: chipGlow 2.5s ease-in-out infinite;
}
.motion-menu-swatch.motion-aurora {
  background:
    linear-gradient(100deg,
      transparent 10%,
      rgba(46, 115, 109, 0.8) 35%,
      rgba(200, 157, 74, 0.7) 55%,
      rgba(145, 100, 180, 0.6) 75%,
      transparent 95%),
    #0b1530;
  background-size: 200% 100%;
  animation: chipAurora 3s ease-in-out infinite alternate;
}
.motion-menu-swatch.motion-starfield {
  background:
    radial-gradient(0.8px 0.8px at 15% 20%, #fff, transparent),
    radial-gradient(0.8px 0.8px at 70% 30%, #fff, transparent),
    radial-gradient(1px 1px at 40% 70%, #fff, transparent),
    radial-gradient(0.8px 0.8px at 85% 60%, #fff, transparent),
    radial-gradient(0.8px 0.8px at 25% 55%, #fff, transparent),
    #0b1530;
  animation: chipStarfield 2s ease-in-out infinite;
}
.motion-menu-swatch.motion-embers {
  background:
    radial-gradient(1px 1px at 30% 60%, rgba(255, 170, 100, 1), transparent),
    radial-gradient(0.8px 0.8px at 65% 40%, rgba(255, 140, 80, 1), transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(255, 200, 130, 0.9), transparent),
    #1a0f0a;
  background-size: 100% 200%;
  animation: chipEmbers 2s linear infinite;
}
.motion-menu-swatch.motion-mist {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.6), transparent 55%),
    #0b1530;
  background-size: 150% 100%;
  animation: chipMist 3.5s ease-in-out infinite alternate;
}
.motion-menu-swatch.motion-waves {
  background:
    linear-gradient(180deg,
      transparent 30%,
      rgba(46, 115, 109, 0.9) 45%,
      transparent 60%),
    linear-gradient(180deg,
      transparent 60%,
      rgba(200, 157, 74, 0.7) 72%,
      transparent 82%),
    #0b1530;
  background-size: 100% 250%, 100% 250%;
  animation: chipWaves 3s ease-in-out infinite alternate;
}
.motion-menu-swatch.motion-breathe {
  background: linear-gradient(135deg, #2a3550 0%, #0b1530 100%);
  animation: chipBreathe 2.5s ease-in-out infinite;
}
.motion-menu-swatch.motion-particles {
  background:
    radial-gradient(1px 1px at 15% 30%, #E3B96E, transparent),
    radial-gradient(0.8px 0.8px at 60% 70%, #ffffff, transparent),
    radial-gradient(1px 1px at 80% 25%, #C89D4A, transparent),
    radial-gradient(0.8px 0.8px at 35% 75%, #F8ECD0, transparent),
    radial-gradient(1px 1px at 70% 50%, #ffffff, transparent),
    #0b1530;
  background-size: 100% 200%, 100% 200%, 100% 200%, 100% 200%, 100% 200%;
  animation: chipParticles 2.6s linear infinite;
}
.motion-menu-swatch.motion-fireflux {
  background:
    radial-gradient(ellipse at 30% 100%, rgba(255, 80, 30, 0.9), transparent 60%),
    radial-gradient(ellipse at 60% 100%, rgba(255, 160, 50, 0.95), transparent 60%),
    radial-gradient(ellipse at 85% 100%, rgba(255, 220, 100, 0.8), transparent 55%),
    #1a0805;
  animation: chipFireflux 1.3s ease-in-out infinite;
}

/* -------- Countdown dropdown ------------------------------------- */
.countdown-dropdown {
  padding: 6px !important;
}
.countdown-end-field {
  padding: 4px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.countdown-end-field label {
  font: 600 10px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.countdown-end-input {
  width: 100%;
  padding: 7px 9px;
  font-size: 12.5px;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.countdown-end-input:focus {
  border-color: var(--gold, #C89D4A);
  box-shadow: 0 0 0 2px rgba(200, 157, 74, 0.18);
}
.countdown-divider {
  height: 1px;
  margin: 4px 2px;
  background: var(--border-2, var(--border));
}

/* Stop-countdown button — sits at the top of the countdown menu
   only when a timer is currently running. SOLID red so it reads
   unambiguously as a real button (the prior gradient + thin
   border was reading as a label, not a clickable target). */
.countdown-stop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 4px 0 10px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #d8554a 0%, #b53a30 100%);
  border: 1px solid #8d2c25;
  border-radius: 8px;
  color: #fff;
  font: 700 12.5px/1 'Inter', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 4px 12px -2px rgba(193, 74, 58, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.4);
  transition: background .15s ease, box-shadow .2s ease, transform .12s ease, filter .15s ease;
}
.countdown-stop-btn:hover {
  background: linear-gradient(180deg, #e36359 0%, #c2433a 100%);
  filter: brightness(1.05);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 6px 18px -2px rgba(193, 74, 58, 0.75),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.countdown-stop-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 -1px 0 rgba(0, 0, 0, 0.3) inset,
    0 2px 6px -2px rgba(193, 74, 58, 0.5);
}
.countdown-stop-btn svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}

/* ============================================================
   Floating Stop-Countdown pill — fixed at the top-center of the
   window whenever a countdown is on air. Always visible (no
   need to dig into a menu), pulses subtly to draw the eye.
   ============================================================ */
.countdown-float {
  /* Same shape as the music-float widget — pure pixel positioning,
     NO centering transform. Initial pixel center is computed in
     JS the first time the pill becomes visible (see
     _positionCountdownFloat). Without a transform, drag updates
     to left/top render instantly without any compositor fight,
     matching the music-float's smoothness exactly. */
  position: fixed;
  top: 56px;
  z-index: 95;                  /* above modals' backdrops, under modals */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  background: linear-gradient(180deg, #d8554a 0%, #b53a30 100%);
  border: 1px solid #8d2c25;
  border-radius: 999px;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 10px 24px -6px rgba(193, 74, 58, 0.60),
    0 2px 8px rgba(0, 0, 0, 0.35);
  /* Removed the keyframe fade-in — it animated `transform` which
     would briefly conflict with the explicit pixel positioning JS
     applies on first show. The pulse stays, but on box-shadow
     only (already conflict-free). */
  animation: countdownFloatPulse 2.4s ease-in-out infinite;
  user-select: none;
  cursor: grab;
  touch-action: none;
  will-change: left, top;
}
.countdown-float.hidden { display: none; }
/* While actively dragging, freeze the pulse so the box-shadow
   stays steady (otherwise the shadow grows/shrinks every 2.4s
   while the operator is also moving the pill, which looks like
   the very glitch they were complaining about). */
.countdown-float.dragging {
  cursor: grabbing;
  animation: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(0, 0, 0, 0.28) inset,
    0 18px 40px -4px rgba(193, 74, 58, 0.85),
    0 5px 16px rgba(0, 0, 0, 0.55);
}
/* Interactive widgets inside keep their own cursors. */
.countdown-float button { cursor: pointer; }

.countdown-float-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.countdown-float-eyebrow {
  font: 700 8.5px/1 'Inter', sans-serif;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.countdown-float-time {
  margin-top: 3px;
  font: 700 15px/1 ui-monospace, SFMono-Regular, 'Cascadia Mono', monospace;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
}

.countdown-float-stop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font: 700 10.5px/1 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.countdown-float-stop:hover {
  background: rgba(255, 255, 255, 0.30);
  border-color: rgba(255, 255, 255, 0.55);
}
.countdown-float-stop:active { transform: translateY(1px); }
.countdown-float-stop svg { flex: 0 0 auto; }

@keyframes countdownFloatPulse {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12) inset,
      0 -1px 0 rgba(0, 0, 0, 0.25) inset,
      0 12px 30px -6px rgba(193, 74, 58, 0.65),
      0 3px 10px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.16) inset,
      0 -1px 0 rgba(0, 0, 0, 0.25) inset,
      0 16px 36px -4px rgba(193, 74, 58, 0.9),
      0 4px 14px rgba(0, 0, 0, 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .countdown-float { animation: none; }
}
.countdown-sound-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 2px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.countdown-sound-toggle input {
  width: 14px; height: 14px;
  accent-color: var(--gold, #C89D4A);
  cursor: pointer;
}
.countdown-sound-toggle:hover { color: var(--ink); }
.countdown-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 12.5px;
  transition: background .12s, color .12s;
}
.countdown-menu-item:hover {
  background: var(--panel-2);
  color: var(--ink);
}
.countdown-menu-label { font-weight: 500; }
.countdown-menu-duration {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* -------- Countdown rendering on operator live/preview monitor --- */
.monitor-stage.countdown {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  transition: background 0.5s ease;
}
.monitor-stage.countdown .cd-label {
  font-family: var(--serif);
  font-size: 10px;
  color: #f3c867;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.4s ease;
}
.monitor-stage.countdown.ended {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200, 157, 74, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #08090f 0%, #0a0f1a 100%);
}
.monitor-stage.countdown .cd-ended {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.15;
  color: #F8ECD0;
  text-align: center;
  padding: 0 8px;
  max-width: 95%;
  overflow: hidden;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: monCdEndedBreathe 4.2s ease-in-out infinite;
}
.monitor-stage.countdown .cd-ended-text {
  white-space: pre-wrap;
}
.monitor-stage.countdown .cd-ended-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 3px;
  background: currentColor;
  vertical-align: -0.08em;
  border-radius: 1px;
  animation: cdCursorBlinkMon 1s step-end infinite;
  transition: opacity .4s ease;
}
.monitor-stage.countdown .cd-ended-cursor.done { opacity: 0; }
@keyframes cdCursorBlinkMon {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@keyframes monCdEndedBreathe {
  0%, 100% { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0  8px rgba(200, 157, 74, 0.25); }
  50%      { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 22px rgba(200, 157, 74, 0.6);  }
}

@media (prefers-reduced-motion: reduce) {
  .monitor-stage.countdown .cd-ended,
  .monitor-stage.countdown .cd-ended-cursor { animation: none !important; }
}
.monitor-stage.countdown .cd-time {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  animation: cdMonIdleGlow 3.5s ease-in-out infinite;
  transition: color 0.4s ease;
}
@keyframes cdMonIdleGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(200, 157, 74, 0.15); }
  50%      { text-shadow: 0 0 22px rgba(200, 157, 74, 0.45); }
}

.monitor-stage.countdown.final {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 60, 40, 0.18) 0%, transparent 70%),
    #000;
}
.monitor-stage.countdown.final .cd-label { color: #ffb06b; }
.monitor-stage.countdown.final .cd-time {
  color: #ffcb7a;
  text-shadow: 0 0 26px rgba(255, 120, 60, 0.6);
  animation: none;
}
.monitor-stage.countdown.final .cd-time.beat {
  animation: cdMonBeat 1s cubic-bezier(.2, .7, .25, 1);
}
@keyframes cdMonBeat {
  0%   { transform: scale(1);    filter: brightness(1); }
  12%  { transform: scale(1.07); filter: brightness(1.4); }
  28%  { transform: scale(1.02); filter: brightness(1.1); }
  100% { transform: scale(1);    filter: brightness(1); }
}

.monitor-stage.countdown.final.critical {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 40, 20, 0.28) 0%, transparent 70%),
    #000;
}
.monitor-stage.countdown.final.critical .cd-time {
  color: #ff6a4a;
  text-shadow: 0 0 28px rgba(255, 80, 40, 0.8);
}

/* Layout refinement — 2 columns of items with the check mark on the right */
.motion-dropdown {
  padding: 5px !important;
}
.motion-menu-item {
  border-radius: 4px;
}
.motion-menu-label { flex: 1; }
.motion-menu-check {
  color: var(--gold);
  font-weight: 700;
  margin-left: auto;
}

/* =============================================================
   v6 — Live / Go button blinking stroke light
   The button outline blinks with a bright red-hot glow, like a neon
   LIVE sign, so the operator's eye finds the Go action instantly.
   Uses layered box-shadow (outline + halo) so nothing is clipped by
   the button's rounded corners or overflow.
   ============================================================= */

.tp-btn.tp-go {
  animation: goStrokeBlink 1.1s steps(1, end) infinite !important;
}

/* Two-step blink: stroke clearly ON for ~55% of the cycle, clearly OFF
   for the rest. steps(1, end) holds each state flat (no tween), which is
   what makes it read as a crisp "blink" rather than a soft pulse. */
@keyframes goStrokeBlink {
  /* OFF — base shadow only, no stroke light, no halo. */
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.22) inset,
      0 0 0 1px rgba(232, 120, 95, 0.4),
      0 6px 20px -6px rgba(193, 74, 58, 0.55);
  }
  /* ON — bright white-red stroke + glowing halo. */
  45% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.45) inset,
      0 0 0 2px #ffd7c2,
      0 0 0 4px rgba(255, 140, 110, 0.85),
      0 0 18px 2px rgba(255, 110, 80, 0.95),
      0 6px 20px -6px rgba(193, 74, 58, 0.6);
  }
}

/* Interaction: stop the blink so hover / press feel responsive */
.tp-btn.tp-go:hover:not(:disabled),
.tp-btn.tp-go:active:not(:disabled) {
  animation: none !important;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 0 0 1px rgba(255, 180, 140, 0.65),
    0 12px 32px -4px rgba(232, 80, 60, 0.75) !important;
}

.tp-btn.tp-go:disabled {
  animation: none !important;
  opacity: 0.55;
  filter: grayscale(0.3);
}

@media (prefers-reduced-motion: reduce) {
  .tp-btn.tp-go { animation: none !important; }
}

/* =============================================================
   Announcement + Birthday — modal fields, operator monitor
   preview, and shared scaffolding.
   ============================================================= */

/* --- modal field rows ---------------------------------------- */
.ez-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
}
.ez-field-label {
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 11.5px;
  text-transform: uppercase;
}
.ez-field input[type=text] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 14px;
  outline: none;
  color: var(--ink);
}
.ez-field input[type=text]:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(31,122,201,0.18);
}

/* --- announcement modal: slide rows -------------------------- */
.ann-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}
.ann-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ann-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ann-row-num {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ann-row-title {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13.5px;
  outline: none;
  color: var(--ink);
  min-width: 0;
}
.ann-row-title:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(31,122,201,0.18);
}
.ann-row-message {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  outline: none;
  min-height: 90px;
  resize: vertical;
}
.ann-row-message:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(31,122,201,0.18);
}
.ann-row-remove {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink-3);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.ann-row-remove:hover:not(:disabled) {
  background: #fff0f0;
  border-color: #e48585;
  color: #c24a4a;
}
.ann-row-remove:disabled { opacity: 0.35; cursor: not-allowed; }
.ann-row-remove svg { width: 14px; height: 14px; }
.ann-add-row {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 12px;
  padding: 6px 10px;
}

/* --- birthday modal: celebrant rows -------------------------- */
.bday-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.bday-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.bday-row-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 6px;
  min-width: 0;
}
.bday-row-fields input[type=text] {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13.5px;
  outline: none;
  color: var(--ink);
  min-width: 0;
}
.bday-row-fields input[type=text]:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(31,122,201,0.18);
}
.bday-row-remove {
  width: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink-3);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.bday-row-remove:hover:not(:disabled) {
  background: #fff0f0;
  border-color: #e48585;
  color: #c24a4a;
}
.bday-row-remove:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.bday-row-remove svg { width: 14px; height: 14px; }
.bday-add-row {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 12px;
  padding: 6px 10px;
}
@media (max-width: 520px) {
  .bday-row-fields { grid-template-columns: 1fr; }
}

/* --- birthday modal: per-slide pill selector ----------------- */
.bday-perslide {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.bday-perslide-opt {
  min-width: 36px;
  padding: 6px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  font-variant-numeric: tabular-nums;
}
.bday-perslide-opt:hover:not(.active) {
  background: var(--panel-3);
  border-color: var(--border);
  color: var(--ink);
}
.bday-perslide-opt.active {
  background: var(--blue);
  border-color: var(--blue-d, var(--blue));
  color: #fff;
}
.bday-perslide-hint {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* Song animation controls (Lines / Background / Entrance) — minimal, light
   inline controls in the workspace head. Small muted labels + clean compact
   selects, no heavy boxes, so they sit quietly next to the title. */
.song-anim-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  /* Pin to the right so the controls sit in a fixed spot regardless of the
     song title's length (it truncates on the left instead). */
  margin-left: auto;
  flex: 0 0 auto;
}
.song-ctl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.song-ctl-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.song-ctl-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--panel-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%239aa3bd' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 24px 4px 9px;
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.song-ctl-select:hover,
.song-ctl-select:focus { outline: none; border-color: var(--gold, #C89D4A); }
/* compact 1 / 2 segmented toggle */
.song-seg { display: inline-flex; gap: 3px; }
.song-seg-opt {
  min-width: 22px;
  height: 26px;
  padding: 0 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .12s, border-color .12s, color .12s;
}
.song-seg-opt:hover:not(.active) { background: var(--panel-3); color: var(--ink); }
.song-seg-opt.active { background: var(--blue); border-color: var(--blue-d, var(--blue)); color: #fff; }

/* --- announcement / birthday modal: text style pickers ------- */
.slide-style-field .slide-style-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: flex-start;
}
.slide-style-sub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.slide-style-sublabel {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.slide-size-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.slide-size-opt {
  min-width: 44px;
  padding: 5px 9px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  font-variant-numeric: tabular-nums;
}
.slide-size-opt:hover:not(.active) {
  background: var(--panel-3);
}
.slide-size-opt.active {
  background: var(--blue);
  border-color: var(--blue-d, var(--blue));
  color: #fff;
}
.slide-color-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.slide-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.slide-color-swatch:hover { transform: scale(1.1); }
.slide-color-swatch.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--blue);
}
.slide-color-default-mark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1;
}
.slide-color-swatch[data-color=""] {
  background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 4px, var(--panel-3) 4px, var(--panel-3) 8px) !important;
}

/* --- operator monitor — announcement preview ----------------- */
.monitor-stage.announcement {
  background: #0a0f1a;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  overflow: hidden;
  text-align: center;
}
.monitor-stage.announcement .ann-title {
  font-family: var(--serif);
  /* Title is the hero — sized above the body. */
  font-size: calc(18px * var(--slide-text-scale, 1));
  font-weight: 700;
  /* Title stays gold — see projector.css for rationale. */
  color: #f3c867;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.1;
  max-width: 94%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monitor-stage.announcement .ann-message {
  font-family: var(--sans);
  font-size: calc(11px * var(--slide-text-scale, 1));
  font-weight: 500;
  line-height: 1.3;
  color: var(--slide-text-color, #fff);
  white-space: pre-wrap;
  max-width: 96%;
  max-height: 70%;
  overflow: hidden;
  margin: 0;
}

/* --- operator monitor — birthday preview --------------------- */
.monitor-stage.birthday {
  background: radial-gradient(ellipse at 50% 40%, #3b1c5e 0%, #160a2b 60%, #0a0419 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding: 6px;
}
.monitor-stage.birthday .bday-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 96%;
  width: 96%;
  padding: 4px;
  text-align: center;
}
.monitor-stage.birthday .bday-greeting {
  font-family: var(--serif);
  font-size: calc(11px * var(--slide-text-scale, 1));
  /* Greeting stays gold — only the celebrant names respond to the picker. */
  color: #ffd27a;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 8px rgba(255, 180, 90, 0.35);
  line-height: 1.1;
}
.monitor-stage.birthday .bday-people {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  max-height: 80%;
  overflow: hidden;
}
.monitor-stage.birthday.bday-count-few .bday-people,
.monitor-stage.birthday.bday-count-many .bday-people,
.monitor-stage.birthday.bday-count-lots .bday-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6px;
}
.monitor-stage.birthday.bday-count-lots .bday-people {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.monitor-stage.birthday .bday-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  line-height: 1.05;
}
.monitor-stage.birthday .bday-name {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--slide-text-color, #fff8e6);
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 8px rgba(255, 200, 140, 0.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.monitor-stage.birthday.bday-count-1  .bday-name { font-size: calc(18px * var(--slide-text-scale, 1)); }
.monitor-stage.birthday.bday-count-2  .bday-name { font-size: calc(15px * var(--slide-text-scale, 1)); }
.monitor-stage.birthday.bday-count-3  .bday-name { font-size: calc(13px * var(--slide-text-scale, 1)); }
.monitor-stage.birthday.bday-count-few  .bday-name { font-size: calc(11px * var(--slide-text-scale, 1)); }
.monitor-stage.birthday.bday-count-many .bday-name { font-size: calc(10px * var(--slide-text-scale, 1)); }
.monitor-stage.birthday.bday-count-lots .bday-name { font-size: calc(9px  * var(--slide-text-scale, 1)); }
.monitor-stage.birthday .bday-date {
  font-family: var(--mono);
  font-size: calc(8px * var(--slide-text-scale, 1));
  color: var(--slide-text-color, #f3c867);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.monitor-stage.birthday.bday-count-many .bday-date,
.monitor-stage.birthday.bday-count-lots .bday-date { display: none; }
/* tiny twinkles on the monitor preview so the operator can tell at a
   glance that the birthday slide is animated — without paying the cost
   of running the full projector confetti rig at this scale. */
.monitor-stage.birthday::before,
.monitor-stage.birthday::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 20%, #ffd27a, transparent 60%),
    radial-gradient(1px 1px at 78% 28%, #ff9ebf, transparent 60%),
    radial-gradient(1px 1px at 40% 70%, #9ec9ff, transparent 60%),
    radial-gradient(1px 1px at 85% 80%, #a8ffc6, transparent 60%),
    radial-gradient(1px 1px at 22% 88%, #ffd27a, transparent 60%),
    radial-gradient(1px 1px at 60% 12%, #ff9ebf, transparent 60%);
  animation: monBdaySparkleA 2.4s steps(1, end) infinite;
  z-index: 1;
  pointer-events: none;
}
.monitor-stage.birthday::after {
  animation: monBdaySparkleB 3.1s steps(1, end) infinite -0.8s;
  filter: hue-rotate(40deg);
}
@keyframes monBdaySparkleA {
  0%, 45%  { opacity: 0.95; }
  50%,100% { opacity: 0.15; }
}
@keyframes monBdaySparkleB {
  0%, 55%  { opacity: 0.9; }
  60%,100% { opacity: 0.2; }
}

/* =============================================================
   Toolbar live indicator — a gold blink applied by JS to whichever
   live-control button matches the current projector state. Lets
   the operator see at a glance what is on air (countdown / ann /
   birthday / blackout).
   ============================================================= */
.tbar-btn.tbar-live {
  border-color: rgba(200, 157, 74, 0.6) !important;
  color: #ffd27a !important;
  animation: tbarLiveBlink 1.1s steps(1, end) infinite;
  position: relative;
  z-index: 1;
}
.tbar-btn.tbar-live .tb-ico {
  color: #ffd27a !important;
}

/* Two-step blink: clearly ON for half the cycle, clearly OFF for the
   rest — steps() makes it read as a crisp "LIVE" indicator rather
   than a soft fade. Matches the LIVE transport button's cadence. */
@keyframes tbarLiveBlink {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 0 0 1px rgba(200, 157, 74, 0.35),
      0 0 10px -2px rgba(200, 157, 74, 0.35);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.12) inset,
      0 0 0 2px rgba(255, 215, 125, 0.85),
      0 0 18px 2px rgba(255, 180, 80, 0.85),
      0 6px 20px -6px rgba(200, 157, 74, 0.6);
  }
}

/* Hover / active states override the blink so the button still feels
   responsive when the operator clicks it. */
.tbar-btn.tbar-live:hover:not(:disabled),
.tbar-btn.tbar-live:active:not(:disabled) {
  animation: none;
  border-color: rgba(255, 215, 125, 0.85) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 0 0 1px rgba(255, 215, 125, 0.7),
    0 8px 24px -6px rgba(200, 157, 74, 0.7) !important;
}

/* Blackout has its own warning color — red pulse instead of gold so it
   reads as an "alert" state (projector is dark). */
.tbar-btn.tbar-live#tb-blackout {
  border-color: rgba(232, 120, 95, 0.6) !important;
  color: #ffc0a8 !important;
  animation: tbarLiveBlinkAlert 1.1s steps(1, end) infinite;
}
.tbar-btn.tbar-live#tb-blackout .tb-ico {
  color: #ffc0a8 !important;
}
@keyframes tbarLiveBlinkAlert {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 0 0 1px rgba(232, 120, 95, 0.35),
      0 0 10px -2px rgba(232, 120, 95, 0.4);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255,255,255,0.12) inset,
      0 0 0 2px rgba(255, 180, 150, 0.9),
      0 0 18px 2px rgba(255, 110, 80, 0.9),
      0 6px 20px -6px rgba(193, 74, 58, 0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbar-btn.tbar-live,
  .tbar-btn.tbar-live#tb-blackout {
    animation: none !important;
  }
}

/* "Attention needed" toolbar state — gold pulse with a small dot in the
   corner. Used by the Mobile Remote button when there's a phone waiting
   for admission. Distinct from tbar-live (which says "this is on air"). */
.tbar-btn.tbar-attn {
  border-color: rgba(224, 177, 68, 0.6) !important;
  color: #ffd27a !important;
  animation: tbarAttnPulse 1.2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
.tbar-btn.tbar-attn::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0b144;
  box-shadow: 0 0 6px rgba(224,177,68,0.8);
}
@keyframes tbarAttnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,177,68,0); }
  50%      { box-shadow: 0 0 0 4px rgba(224,177,68,0.15); }
}
@media (prefers-reduced-motion: reduce) {
  .tbar-btn.tbar-attn { animation: none !important; }
}

/* Floating music player — sits at the bottom-right, visible across
   every library tab while a track is loaded. */
.music-float {
  position: fixed;
  right: 16px;
  bottom: 36px;
  z-index: 90;
  min-width: 460px;
  max-width: 640px;
  padding: 10px 12px;
  display: grid;
  /* Columns left → right: GRIP | controls | main | volume | stop */
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(26, 31, 46, 0.97), rgba(15, 19, 30, 0.97));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(200, 157, 74, 0.12) inset;
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: musicFloatIn .3s cubic-bezier(.34, 1.56, .64, 1);
  /* The widget's body is NO LONGER the drag handle — the explicit
     grip on the left is. This stops the cursor from looking "grabby"
     over buttons/sliders that aren't draggable, and prevents the
     drag listener from intercepting near-misses on the seek/volume. */
  cursor: default;
  user-select: none;
  /* Buttons and sliders need full pointer access for clicks and
     drags. Only the grip needs to suppress browser gestures. */
  touch-action: auto;
}
.music-float.dragging {
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(200, 157, 74, 0.3) inset;
  transition: box-shadow .15s ease;
}
.music-float button,
.music-float input { cursor: pointer; }
.music-float.hidden { display: none; }

/* Drag handle — a 6-dot grip on the left of the widget. ONLY this
   element starts a drag; pointerdown anywhere else passes through.
   Made deliberately visible (gold tint, hoverable, with a hint
   label) because invisible drag handles are the #1 complaint with
   floating widgets. */
.music-float-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 36px;
  color: rgba(200, 157, 74, 0.85);
  background: rgba(200, 157, 74, 0.10);
  border: 1px solid rgba(200, 157, 74, 0.30);
  cursor: grab;
  touch-action: none;
  flex: 0 0 auto;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.music-float-grip:hover {
  color: var(--gold, #C89D4A);
  background: rgba(200, 157, 74, 0.22);
  border-color: rgba(200, 157, 74, 0.65);
}
.music-float.dragging .music-float-grip {
  cursor: grabbing;
  background: rgba(200, 157, 74, 0.32);
  border-color: rgba(200, 157, 74, 0.85);
}
.music-float-grip svg { width: 16px; height: 16px; }

/* Range inputs: a fatter track + thumb so the operator can grab them
   even with a coarse pointer / sweaty service-day fingers. */
.music-float input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(200, 157, 74, 0.15);
  border-radius: 999px;
  outline: none;
}
.music-float input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold, #C89D4A);
  border: 2px solid #1a1f2e;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.music-float input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold, #C89D4A);
  border: 2px solid #1a1f2e;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
@keyframes musicFloatIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.music-float-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.music-float-btn,
.music-float-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .1s, filter .15s, background .15s, color .15s, border-color .15s;
}
.music-float-btn {
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
}
.music-float-btn:hover { color: var(--ink); border-color: var(--amber, #C89D4A); }
.music-float-btn:active { transform: scale(0.94); }
.music-float-btn svg { width: 14px; height: 14px; }

.music-float-toggle {
  width: 34px; height: 34px;
  background: var(--amber, #C89D4A);
  border: 1px solid var(--amber, #C89D4A);
  color: #1a1a1a;
}
.music-float-toggle:hover { filter: brightness(1.08); }
.music-float-toggle:active { transform: scale(0.94); }
.music-float-toggle svg { width: 15px; height: 15px; }

.music-float-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.music-float-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.music-float-main .music-float-name { margin-bottom: 1px; }
.music-float-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.music-float-time {
  font: 600 10.5px/1 var(--mono, ui-monospace, monospace);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
}
.music-float-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--panel-3);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.music-float-seek::-webkit-slider-runnable-track {
  height: 4px; background: transparent; border-radius: 999px;
}
.music-float-seek::-moz-range-track {
  height: 4px; background: var(--panel-3); border-radius: 999px;
}
.music-float-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--amber, #C89D4A);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.music-float-seek::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--amber, #C89D4A);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.music-float-seek:disabled { opacity: 0.5; cursor: default; }

/* Video floating bar — same structure as the music bar, different accent
   to make the mode obvious at a glance. */
.music-float.media-float {
  bottom: 110px; /* sit above the music bar when both are on-screen */
}
.music-float.media-float .music-float-toggle,
.music-float.media-float .music-float-seek::-webkit-slider-thumb,
.music-float.media-float .music-float-seek::-moz-range-thumb {
  border-color: var(--myrtle, #2E736D);
}
.music-float.media-float .music-float-toggle {
  background: var(--myrtle, #2E736D);
  border-color: var(--myrtle, #2E736D);
  color: #fff;
}
.video-float-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 6px;
  font: 700 9px/1.3 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.14em;
  color: var(--myrtle-h, #3A8B85);
  background: rgba(46, 115, 109, 0.16);
  border: 1px solid rgba(46, 115, 109, 0.4);
  border-radius: 999px;
  vertical-align: middle;
}
/* Source-swap styling removed — mutual exclusion makes a swap button
   unnecessary. Starting one source automatically stops the other. */

/* Inline animated equalizer next to the title of the currently-playing
   music row — obvious at-a-glance indicator. */
.lib-music-row .lib-row-title {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.lib-music-row .lib-row-title > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-music-row .lib-music-eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-left: 8px;
  flex-shrink: 0;
}
.lib-music-row.playing .lib-music-eq { display: inline-flex; }
.lib-music-row .lib-music-eq i {
  display: block;
  width: 3px;
  height: 4px;
  background: var(--amber, #C89D4A);
  border-radius: 1px;
  animation: musicEqBounce 0.9s ease-in-out infinite;
}
.lib-music-row .lib-music-eq i:nth-child(2) { animation-delay: 0.15s; }
.lib-music-row .lib-music-eq i:nth-child(3) { animation-delay: 0.30s; }
@keyframes musicEqBounce {
  0%, 100% { height: 4px;  }
  50%      { height: 12px; }
}
.lib-music-row.playing {
  box-shadow: inset 3px 0 0 var(--amber, #C89D4A);
  background: rgba(200, 157, 74, 0.06);
}
.lib-music-row.playing .lib-music-play {
  background: var(--amber, #C89D4A);
  border-color: var(--amber, #C89D4A);
  color: #1a1a1a;
}

.music-float-vol {
  display: inline-grid;
  grid-template-columns: 18px 120px 26px;
  align-items: center;
  gap: 6px;
}
.music-float-vol-ico {
  font-size: 13px;
  line-height: 1;
  color: var(--ink-2);
  user-select: none;
  text-align: center;
}
.music-float-vol-num {
  font: 600 10.5px/1 var(--mono, ui-monospace, monospace);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.music-float-vol-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--panel-3);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.music-float-vol-range::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border-radius: 999px;
}
.music-float-vol-range::-moz-range-track {
  height: 4px;
  background: var(--panel-3);
  border-radius: 999px;
}
.music-float-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--amber, #C89D4A);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.music-float-vol-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--amber, #C89D4A);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.music-float-stop {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.music-float-stop:hover {
  color: #e7948a;
  border-color: #e48585;
  background: rgba(193, 74, 58, 0.12);
}
.music-float-stop svg { width: 12px; height: 12px; }

@media (max-width: 720px) {
  .music-float {
    left: 8px;
    right: 8px;
    min-width: 0;
    max-width: none;
    grid-template-columns: auto 1fr auto;
  }
  .music-float-vol { display: none; } /* drop the slider on narrow screens */
}

/* Monitor music stage — compact Now Playing preview for the operator
   side. Matches the projector look: black palette + full logo badge. */
.monitor-stage.music {
  background: linear-gradient(180deg, #000 0%, #060606 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  color: #ffffff;
  overflow: hidden;
}
.monitor-stage.music .mon-music-disc {
  width: 42px; height: 42px;
  /* Rounded-square badge so the full brand mark shows, matching the
     projector "Now Playing" tile (a circular clip cropped the cross). */
  border-radius: 22%;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow:
    0 0 0 1.5px rgba(200, 157, 74, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.8);
}
.monitor-stage.music .mon-music-disc-logo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}
.monitor-stage.music.paused .mon-music-disc { animation-play-state: paused; }
@keyframes monMusicSpin { to { transform: rotate(360deg); } }
.monitor-stage.music .mon-music-text { text-align: center; line-height: 1.15; }
.monitor-stage.music .mon-music-kicker {
  font: 600 9px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 157, 74, 0.75);
  margin-bottom: 4px;
}
.monitor-stage.music .mon-music-title {
  font: 600 13px/1.2 var(--serif, 'Source Serif 4', Georgia, serif);
  color: #ffffff;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monitor-stage.music .mon-music-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  margin-top: 2px;
}
.monitor-stage.music .mon-music-bar {
  display: block;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #E3B96E, #C89D4A);
  border-radius: 2px;
  transform-origin: bottom center;
  animation: monMusicBar 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.14s);
}
.monitor-stage.music.paused .mon-music-bar { animation-play-state: paused; transform: scaleY(0.3); }
@keyframes monMusicBar {
  0%, 100% { transform: scaleY(0.25); }
  25%      { transform: scaleY(0.75); }
  50%      { transform: scaleY(1); }
  75%      { transform: scaleY(0.55); }
}

/* Draft indicator in the song-editor header */
.center-title .draft-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  vertical-align: middle;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--amber, #C89D4A);
  background: rgba(200, 157, 74, 0.1);
  border: 1px solid rgba(200, 157, 74, 0.35);
  border-radius: 999px;
}

/* =============================================================
   First-run welcome modal
   ============================================================= */
.welcome-gate {
  position: fixed; inset: 0;
  z-index: 2000;
  background: rgba(4, 6, 12, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 32px 20px;
  animation: welcomeFadeIn .35s var(--ease-out, ease-out) both;
}
.welcome-gate.hidden { display: none; }
.welcome-gate.hiding { animation: welcomeFadeOut .28s ease-in forwards; }

@keyframes welcomeFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcomeFadeOut { from { opacity: 1; } to { opacity: 0; } }

.welcome-card {
  width: min(760px, 100%);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: linear-gradient(180deg, #141824 0%, #0f131e 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  color: var(--ink);
  padding: 32px 36px 28px;
  animation: welcomePop .42s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes welcomePop {
  from { transform: translateY(16px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

.welcome-head { text-align: center; margin-bottom: 22px; }
.welcome-mark {
  width: 52px; height: 52px;
  margin: 0 auto 12px;
  background: url('../../assets/logo.svg?v=3') center/contain no-repeat;
  filter: drop-shadow(0 4px 12px rgba(200, 157, 74, 0.25));
}
.welcome-kicker {
  display: inline-block;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber, #C89D4A);
  padding: 3px 10px;
  background: rgba(200, 157, 74, 0.12);
  border: 1px solid rgba(200, 157, 74, 0.3);
  border-radius: 999px;
  margin-bottom: 10px;
}
.welcome-head h1 {
  font-family: var(--serif, 'Source Serif 4', Georgia, serif);
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.welcome-sub {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  max-width: 560px;
  margin: 0 auto;
}

.welcome-tips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 22px 0 20px;
}
.welcome-tip {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border-3);
  border-radius: 10px;
}
.welcome-tip-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue, #2E736D), var(--blue-h, #3A8B85));
  box-shadow: 0 4px 10px rgba(46, 115, 109, 0.4);
}
.welcome-tip-body h3 {
  margin: 2px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.welcome-tip-body p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.welcome-tip-body kbd {
  display: inline-block;
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--ink);
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  margin: 0 1px;
}
.welcome-tip-body b { color: var(--ink); font-weight: 600; }

.welcome-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-3);
  flex-wrap: wrap;
}
.welcome-skip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  user-select: none;
}
.welcome-skip input {
  width: 14px; height: 14px;
  accent-color: var(--blue, #2E736D);
  cursor: pointer;
}
.welcome-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--blue, #2E736D), var(--blue-h, #3A8B85));
  border: 1px solid var(--blue-d, #1F5B56);
  border-radius: 8px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 16px rgba(46, 115, 109, 0.35);
}
.welcome-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(46, 115, 109, 0.45);
}
.welcome-cta svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .welcome-card { padding: 24px 20px 20px; }
  .welcome-tips { grid-template-columns: 1fr; }
  .welcome-head h1 { font-size: 24px; }
}

/* =============================================================
   Hover tooltips (data-tip)
   — progressive enhancement: styled tooltip on hover-capable
     devices; fall back to native title if we ever add it.
   ============================================================= */
@media (hover: hover) and (pointer: fine) {
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: max-content;
    max-width: 260px;
    padding: 7px 11px;
    font: 500 11.5px/1.45 var(--sans, 'Segoe UI', system-ui, sans-serif);
    letter-spacing: 0.01em;
    color: var(--ink);
    background: #0a0e17;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
    white-space: normal;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease-out .25s, transform .15s ease-out .25s;
    z-index: 1500;
  }
  [data-tip]::before {
    content: '';
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    border: 5px solid transparent;
    border-bottom-color: var(--border);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease-out .25s, transform .15s ease-out .25s;
    z-index: 1500;
  }
  [data-tip]:hover::after,
  [data-tip]:focus-visible::after,
  [data-tip]:hover::before,
  [data-tip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  /* Tooltips above the element for anything near the top edge */
  .toolbar [data-tip]::after,
  .menubar [data-tip]::after {
    top: auto;
    bottom: calc(100% + 8px);
  }
  .toolbar [data-tip]::before,
  .menubar [data-tip]::before {
    top: auto;
    bottom: calc(100% + 3px);
    border: 5px solid transparent;
    border-top-color: var(--border);
  }
}

/* ============================================================
   Window Controls Overlay — installed app only.
   When the PWA runs in window-controls-overlay display mode, the OS draws
   ONLY the min/maximize/close buttons and NO address/URL bar — a clean
   desktop title bar. We turn the menubar into that title bar: it becomes the
   drag region, constrained to the OS-provided titlebar area so the window
   buttons (top-right on Windows) never overlap our pills, and every
   interactive control opts out of dragging. Scoped to this display mode only
   — browser and plain standalone are completely unaffected.
   ============================================================ */
@media (display-mode: window-controls-overlay) {
  .menubar {
    height: env(titlebar-area-height, 33px);
    margin-left: env(titlebar-area-x, 0px);
    width: env(titlebar-area-width, 100%);
    -webkit-app-region: drag;
  }
  .menubar .brand,
  .menubar .menu,
  .menubar .menu-item,
  .menubar .menu-right,
  .menubar .pill,
  .menubar button,
  .menubar a {
    -webkit-app-region: no-drag;
  }
}

/* ============================================================
   Mobile Remote modal — uniform action buttons + collapsible panels.
   Keeps the modal compact: Help and Cloud relay are tucked behind toggle
   buttons; Clear trusted list / Reset pairing code are real, uniform buttons.
   ============================================================ */
.mr-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.mr-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--border-3, #232c42);
  border-radius: 10px;
  background: #1a1f2e;
  color: #edf0f5;
  font: 600 12.5px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  text-align: center;
}
.mr-action:hover { background: #222a3c; border-color: rgba(200, 157, 74, 0.5); }
.mr-action:active { transform: translateY(1px); }
.mr-action svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }
.mr-action.active { border-color: #C89D4A; background: rgba(200, 157, 74, 0.14); color: #f3e6cb; }
.mr-action-count { opacity: .65; font-weight: 500; }

.mr-panel {
  margin-top: 10px;
  padding: 13px 15px;
  border: 1px solid var(--border-3, #232c42);
  border-radius: 10px;
  background: rgba(10, 14, 23, 0.55);
}
.mr-panel[hidden] { display: none; }
.mr-panel-title {
  font: 600 12px/1.3 'Inter', system-ui, sans-serif;
  color: #9ba4b8;
  margin-bottom: 9px;
}
.mr-panel p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.55; color: #c7cede; }
.mr-panel p:last-child { margin-bottom: 0; }
.mr-panel .mr-help-sub { color: #8b93a7; font-size: 11.5px; }

@media (max-width: 460px) {
  .mr-actions { grid-template-columns: 1fr; }
}

/* Clear trusted list / Reset pairing code — stacked under the pairing code box
   in the right column, each with its own accent color. */
.mr-info-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.mr-info-actions .mr-action { width: 100%; }
.mr-action-trusted {
  background: rgba(193, 74, 58, 0.16);
  border-color: rgba(193, 74, 58, 0.55);
  color: #eaa093;
}
.mr-action-trusted:hover { background: rgba(193, 74, 58, 0.26); border-color: rgba(193, 74, 58, 0.85); color: #f4b9ae; }
.mr-action-reset {
  background: rgba(46, 115, 109, 0.20);
  border-color: rgba(74, 150, 145, 0.6);
  color: #7fd8cb;
}
.mr-action-reset:hover { background: rgba(46, 115, 109, 0.30); border-color: rgba(74, 150, 145, 0.9); color: #9ee6da; }

/* Live-service safety controls (Force-sync / Lock / Revoke all). Shown
   only once a phone is paired. Mirrors the .mr-conn-block framing. */
.mr-safety-block {
  margin-top: 14px;
  padding: 13px 15px;
  border: 1px solid var(--border-3, #232c42);
  border-radius: 10px;
  background: rgba(10, 14, 23, 0.55);
}
.mr-safety-head {
  font: 700 11px/1.3 'Inter', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9ba4b8;
  margin-bottom: 10px;
}
.mr-safety-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.mr-safety-info {
  margin-top: 9px;
  font: 500 11.5px/1.5 'Inter', system-ui, sans-serif;
  color: #8b93a7;
}
/* Locked state reuses .mr-action.active (gold). Danger = revoke all. */
.mr-action-danger {
  background: rgba(193, 74, 58, 0.16);
  border-color: rgba(193, 74, 58, 0.55);
  color: #eaa093;
}
.mr-action-danger:hover { background: rgba(193, 74, 58, 0.26); border-color: rgba(193, 74, 58, 0.85); color: #f4b9ae; }
.mr-safety-session {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--border-2, #232c42);
  flex-wrap: wrap;
}
.mr-sess-label {
  font: 600 12px/1.2 'Inter', system-ui, sans-serif;
  color: #9ba4b8;
}
.mr-safety-session #mr-session-hours { max-width: 170px; }
.mr-safety-session #mr-end-session { margin-left: auto; }
@media (max-width: 460px) {
  .mr-safety-row { grid-template-columns: 1fr; }
  .mr-safety-session #mr-end-session { margin-left: 0; width: 100%; }
}

/* Sunday-mode readiness panel — glanceable service health strip at the top
   of the Mobile Remote modal. */
.mr-sunday {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border-3, #232c42);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(200,157,74,0.06), rgba(10,14,23,0.55));
}
.mr-sunday-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 700 11px/1.3 'Inter', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ba4b8;
  margin-bottom: 11px;
}
.mr-sunday-health {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel-2, #1a1f2e);
  border: 1px solid var(--border-2, #232c42);
  font: 700 10.5px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-3, #9ba4b8);
}
.mr-sunday-health.ok   { color: #4ade80; border-color: rgba(74,222,128,0.45); background: rgba(74,222,128,0.08); }
.mr-sunday-health.warn { color: #e0b144; border-color: rgba(224,177,68,0.5);  background: rgba(224,177,68,0.10); }
.mr-sunday-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 9px 14px;
}
.mr-sun-cell { min-width: 0; }
.mr-sun-wide { grid-column: span 2; }
.mr-sun-lbl {
  font: 600 9.5px/1.2 'Inter', system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3, #6b7387);
  margin-bottom: 3px;
}
.mr-sun-val {
  font: 600 13px/1.3 'Inter', system-ui, sans-serif;
  color: var(--ink, #edf0f5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mr-sun-val.ok   { color: #4ade80; }
.mr-sun-val.warn { color: #e0b144; }

/* Pairing-code conflict banner. */
.mr-conflict {
  margin-bottom: 12px;
  padding: 10px 13px;
  border: 1px solid rgba(193,74,58,0.55);
  border-radius: 10px;
  background: rgba(193,74,58,0.12);
  color: #f4b9ae;
  font: 500 12.5px/1.5 'Inter', system-ui, sans-serif;
}
.mr-conflict[hidden] { display: none; }
.mr-conflict strong { color: #f4d0c8; }

/* Internal session ID (small footnote under the pairing code). */
.mr-session-id {
  margin-top: 6px;
  font: 500 10px/1.3 ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color: var(--ink-3, #6b7387);
  word-break: break-all;
}
@media (max-width: 460px) {
  .mr-sunday-grid { grid-template-columns: 1fr 1fr; }
  .mr-sun-wide { grid-column: span 2; }
}

/* =========================================================
   Lyric vertical position
   - .vpos is the wrapper around the lyric (and its reference /
     animation layers) on the slide thumbnails and operator
     monitors. It's absolutely placed at --pos-y (0–100 %) via
     top + a counter translate, mirroring the projector, so the
     lyric can sit anywhere from the top edge to the bottom edge.
   - Defined at the end of the file so it wins the equal-specificity
     tie against the `[class*="motion-"] > *` rules (which would
     otherwise force position:relative when a motion preset is on).
   - The STYLE panel's Position control is a small vertical drag
     slider that writes the same value.
   ========================================================= */
.slide-preview .vpos {
  position: absolute;
  left: 10px; right: 10px;
  top: var(--pos-y, 50%);
  transform: translateY(calc(var(--pos-y, 50%) * -1));
  max-height: 100%;
  overflow: hidden;
  z-index: 2;
}
.monitor-stage .vpos {
  position: absolute;
  left: 14px; right: 14px;
  top: var(--pos-y, 50%);
  transform: translateY(calc(var(--pos-y, 50%) * -1));
  max-height: 100%;
  overflow: hidden;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Grab affordance while the operator can drag the lyric on the Preview. */
.monitor-stage.pos-draggable { cursor: grab; }
.monitor-stage.pos-draggable:active { cursor: grabbing; }

/* ---- STYLE panel: Position drag slider ---- */
.vpos-ctrl {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  user-select: none;
}
.vpos-cap {
  font: 600 9px/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vpos-track {
  position: relative;
  width: 8px;
  height: 72px;
  background: var(--panel-3, #f0f1f4);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  touch-action: none;
}
.vpos-track:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.vpos-fill {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 50%;
  background: linear-gradient(180deg, var(--myrtle, #2e7d6b), var(--myrtle-h, #256457));
  border-radius: 5px 5px 0 0;
  pointer-events: none;
}
.vpos-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid var(--myrtle, #2e7d6b);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: grab;
  pointer-events: none;
}
.vpos-track:active .vpos-knob { cursor: grabbing; }
.vpos-val {
  font: 500 11px/1 ui-monospace, monospace;
  color: var(--ink-3);
}

/* =========================================================
   Quick-style flyout — docked tab on the monitor column's left edge.
   The container is position:fixed and its top/height/right are set in JS to
   track the .monitors column; with only `right` pinned and width auto, it
   grows leftward, so the panel opens over the workspace while the tab stays
   on the divider.
   ========================================================= */
.qstyle {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 55;
  pointer-events: none; /* only the tab + panel take pointer events */
}
.qstyle > * { pointer-events: auto; }

.qstyle-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 26px;
  padding: 14px 0;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(180deg, var(--myrtle, #2e7d6b), var(--myrtle-h, #256457));
  color: #fff;
  cursor: pointer;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.35);
  transition: width .15s ease, filter .15s ease;
}
.qstyle-tab:hover { filter: brightness(1.08); width: 28px; }
.qstyle-tab-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font: 700 10px/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.22em;
}
/* Slide chevron — ‹ when closed (click to open the panel leftward),
   › when open (click to close). */
.qstyle-tab-chev {
  display: block;
  margin-bottom: 10px;
  line-height: 1;
}
.qstyle-tab-chev::before {
  content: '\2039'; /* ‹ */
  font-size: 18px;
  font-weight: 800;
}
.qstyle.open .qstyle-tab-chev::before { content: '\203A'; /* › */ }
.qstyle.open .qstyle-tab { filter: brightness(1.08); }

.qstyle-panel {
  width: 0;
  max-height: 100%;
  overflow: hidden;
  opacity: 0;
  background: var(--panel, #11151f);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 10px 0 0 10px;
  box-shadow: -10px 0 34px rgba(0, 0, 0, 0.5);
  transition: width .18s ease, opacity .18s ease;
}
.qstyle.open .qstyle-panel {
  width: 300px;
  overflow-y: auto;
  opacity: 1;
}
.qstyle-panel .qstyle-target {
  font: 600 11px/1.3 'Segoe UI', system-ui, sans-serif;
  color: var(--ink-2);
  padding: 12px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qstyle-headrow { display: flex; align-items: center; gap: 7px; }
.qstyle-applyto { display: flex; align-items: center; gap: 8px; }
.qstyle-applyto-lbl {
  font: 600 9px/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* "Push to Live" — apply the Preview sandbox edits to the on-air output. */
.qstyle-push {
  margin-left: auto;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--myrtle, #2e7d6b);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--myrtle, #2e7d6b), var(--myrtle-h, #256457));
  color: #fff;
  font: 700 10px/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.qstyle-push:hover { filter: brightness(1.08); }
.qstyle-panel .qstyle-target strong { color: var(--ink); font-weight: 700; }
.qstyle-kind {
  font: 700 8.5px/1 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.14em;
  color: var(--myrtle, #2e7d6b);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
}
.qstyle-target-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3, #6b7387);
  flex: none;
}
.qstyle-target-dot.live { background: #e5484d; box-shadow: 0 0 0 3px rgba(229,72,77,0.18); }
.qstyle-empty {
  padding: 18px 16px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}
/* The reused .style-panel sits flush inside the flyout (it already carries its
   own surface + rows); just trim its default outer margin here. */
.qstyle-panel .style-panel { margin: 10px; }

/* A STYLE row whose control doesn't apply to the current kind (e.g. Lines /
   Animation / Entrance while styling scripture, or Verses/slide while styling
   a song) — greyed + non-interactive, but still present (panel layout never
   changes between songs and scripture). */
.style-row--off { opacity: 0.55; }
.style-row--off label,
.style-row--off .song-seg-opt,
.style-row--off select { cursor: not-allowed; }
.song-seg-opt:disabled { cursor: not-allowed; }
/* "(song only)" / "(scripture only)" note next to a greyed control so the
   operator knows why it's disabled. */
.style-hint {
  font: 600 9px/1.2 'Segoe UI', system-ui, sans-serif;
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* =========================================================
   Library tabs as real (segmented) buttons — Lyrics · Media ·
   Scripture · Audio. Same footprint as before (unchanged padding /
   font), but each tab now reads as a distinct button: border, rounded
   corners, a filled active state, and a small gap between them — instead
   of the old flat underline tabs.
   ========================================================= */
.lib-tabs {
  gap: 5px;
  padding: 6px;
  align-items: stretch;
}
.lib-tab {
  border: 1px solid var(--border) !important;
  border-radius: 7px;
  background: var(--panel-2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}
.lib-tab:hover { background: var(--panel-3); }
.lib-tab.active {
  background: linear-gradient(180deg, var(--myrtle, #2e7d6b), var(--myrtle-h, #256457)) !important;
  border-color: var(--myrtle, #2e7d6b) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(46, 115, 109, 0.35);
}
.lib-tab.active [data-icon] { color: #fff !important; }
/* Buttons show selection by fill, not the old underline indicator. */
.lib-tab::after { display: none !important; }