:root {
  --bg-dark: #0C0C0C;
  --bg-darker: #080808;
  --panel: #1C1C1C;
  --panel-elevated: #222222;
  --border: #2E2E2E;
  --border-subtle: #252525;
  --text: #E8E8E8;
  --text-bright: #FFFFFF;
  --text-muted: #8A8A8A;
  --text-dim: #5A5A5A;
  --primary: #4F8BFF;
  --primary-hover: #6B9FFF;
  --primary-active: #3A75E8;
  --success: #4ADE80;
  --danger: #EF4444;
  --warning: #F59E0B;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg-dark);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(12, 12, 12, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
  z-index: 50;
}

/* iOS Safari black-band test (31/07/26). backdrop-filter forces this sticky bar onto its own compositing
   layer, and iOS is known to leave regions beneath such a layer unpainted until a scroll forces a repaint —
   the symptom reported: a black band that vanishes when you scroll. Onboarding makes it likelier still,
   because that is the only mode where the bar RESIZES after first paint (the SIGN UP pill is ~10px taller
   than the "est. 2026" subtitle it replaces, and updateTopbarSubscribe runs post-render).
   Costs nothing visually: the background is already 95% opaque, so the blur only ever acted on the
   remaining 5%. Touch devices only — desktop keeps the effect. Remove this block if it isn't the cause. */
@media (pointer: coarse) {
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* The topbar had NO responsive rules at all: 40px of side padding on a 375px screen is 21% of the width,
   and with brand (~106px) + account icon (34px) + Run Scene (~141px) it was already over-full at 320px.
   Reclaim the padding and trim Run Scene's generous horizontal padding on phones. */
@media (max-width: 768px) {
  .topbar { padding: 14px 16px; }
  .btn--run { padding: 13px 20px; }
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand {
  cursor: pointer;
  transition: opacity 0.15s;
}
.brand:hover {
  opacity: 0.8;
}

/* Account menu (subscriber-only): icon button + dropdown */
.account { position: relative; }
.account__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel-elevated);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.account__btn:hover { background: #2A2A2A; border-color: #3A3A3A; }
.account__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 60;
}
.account__dropdown[hidden] { display: none; }
/* Most items here are <button>, but "Contact us" is an <a> to a real page — so it keeps middle-click and
   cmd-click, which a button-plus-window.open would throw away. These four extra declarations are what make
   an anchor sit flush with the buttons: no underline, inherited font (anchors don't inherit it from the
   panel), and block display so the row is clickable across its full width rather than just the text. */
.account__item {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  display: block;
  width: 100%;
}
.account__item:hover { background: rgba(255, 255, 255, 0.06); }
.account__item:disabled { opacity: 0.6; cursor: default; }

.brand__title { 
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.3px;
  color: var(--text-bright);
}

/* Wraps the clickable brand and the Subscribe pill in one column so they read as a single lockup while
   staying two separate hit areas — #brandHome exits onboarding (wiping the demo scene), so it must not
   share a target with a button that opens checkout. Column, so the pill still costs no horizontal width. */
.brand-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Free-user CTA, occupying the brand's second line in place of "est. 2026". Sized to stay INSIDE the
   title's footprint (~106px for "SelftapePal" at 20px bold) so it never widens the topbar — the whole point
   of putting it here rather than next to Run Scene. */
.brand__subscribe {
  display: inline-block;
  margin-top: 3px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-bright);
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.brand__subscribe:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.brand__subtitle {
  font-size: 11px;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 1px;
}

.layout {
  display: flex;
  justify-content: center;
  padding: 48px 32px 80px;
  min-height: calc(100vh - 80px);
}

@media (max-width: 980px) {
  .layout { padding: 32px 20px 80px; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 40px;
  box-shadow: var(--shadow-medium);
}

.panel--main {
  width: 100%;
  max-width: 960px;
  border-color: rgba(255, 255, 255, 0.25);
}

.panel__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.panel__title {
  font-size: 16px;
  margin: 0;
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-elevated);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
}

.btn:hover {
  background: #2A2A2A;
  border-color: #3A3A3A;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn--icon {
  padding: 8px 10px;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn--edit .btn__icon {
  display: none;
}

.btn--primary {
  background: var(--primary);
  color: var(--text-bright);
  border-color: var(--primary);
  font-weight: 700;
}

.btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.15);
}

.btn--danger {
  background: var(--danger);
  color: var(--text-bright);
  border-color: var(--danger);
  font-weight: 700;
}

.btn--danger:hover {
  background: #DC2626;
  border-color: #DC2626;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.btn--run {
  background: var(--primary);
  color: var(--text-bright);
  border-color: var(--primary);
  padding: 13px 36px;
  /* On a 375px phone this button came out ~141px wide with 72px of that being padding, leaving ~69px for
     text that needs ~74px — so "Run Scene" broke onto two lines inside a button that looked far too wide
     for its content. Never wrap; the mobile rule below trims the padding so it fits on one line instead. */
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.btn--run:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 0 0 4px rgba(79, 139, 255, 0.2), 0 4px 12px rgba(79, 139, 255, 0.3);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}

.scene-manager {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.scene-manager__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 0;
}

.scene-manager__name-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.scene-manager__name-input {
  flex: 1;
}

.scene-manager__list-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
}

.scene-manager__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--panel-elevated);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: all 0.15s ease;
}

.scene-manager__toggle:hover {
  background: #2A2A2A;
  border-color: #3A3A3A;
}

.scene-manager__toggle:active {
  transform: scale(0.98);
}

.scene-manager__toggle-icon {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.scene-manager__toggle-icon.expanded {
  transform: rotate(90deg);
}

.scene-manager__toggle-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.scene-manager__collapsible {
  margin-bottom: 12px;
}

.scene-manager__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.scene-manager__empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--panel-elevated);
  border: 1px dashed var(--border);
  border-radius: 6px;
  margin-bottom: 12px;
}

.scene-manager__slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}

.scene-manager__slot:hover {
  background: rgba(255, 255, 255, 0.06);
}

.scene-manager__slot--active {
  border-color: var(--primary);
  background: rgba(79, 139, 255, 0.08);
}

.scene-manager__slot-name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-manager__slot-date {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}

.scene-manager__slot-delete {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.scene-manager__slot-delete:hover {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

.scene-manager__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* White borders on buttons within scene controls for clarity */
.scene-controls__content .btn,
.scene-controls__content .scene-manager__toggle {
  border-color: rgba(255, 255, 255, 0.25);
}

.builder__top-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.builder__add-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 32px;
}

@media (max-width: 768px) {
  .builder__add-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Guide is no longer hidden here — the half-width band (481–768) and phone
     (≤480) layouts below position it explicitly. */
}

.scene-defaults {
  background: var(--panel-elevated);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 32px;
}

.scene-defaults__title {
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.scene-defaults__row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
}

.scene-defaults__row:last-child {
  margin-bottom: 0;
}

.scene-defaults__label {
  font-size: 13px;
  font-weight: 600;
  min-width: 150px;
  color: var(--text);
  letter-spacing: 0.01em;
}

.mic-mode {
  background: var(--panel-elevated);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 32px;
}

.mic-mode__title {
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.mic-mode__row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 12px;
}

.mic-mode__label {
  font-size: 13px;
  font-weight: 600;
  min-width: 150px;
  color: var(--text);
  letter-spacing: 0.01em;
}

.mic-mode__hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.mic-mode__advanced-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 12px 0 0 0;
  margin-top: 8px;
}

.mic-mode__advanced-toggle:hover {
  color: var(--text);
}

.mic-mode__advanced-icon {
  font-size: 10px;
  transition: transform 0.2s;
}

.mic-mode__advanced-icon.open {
  transform: rotate(90deg);
}

.mic-mode__advanced {
  padding-top: 16px;
}

.mic-mode__slider {
  width: 120px;
  accent-color: #34C759;
}

.radio-group {
  display: flex;
  gap: 6px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  transition: all 0.15s ease;
  font-weight: 500;
}

.radio-option:hover {
  background: var(--panel-elevated);
  border-color: var(--border);
}

.radio-option input[type="radio"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  background: var(--panel-elevated);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}

.select:hover {
  border-color: var(--primary);
  background: var(--panel);
}

.select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.15);
}

.scene {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.line {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 6px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  transition: all 0.15s ease;
  position: relative;
  margin-left: 60px;
  cursor: move;
}

.line--actor {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3), inset 0 0 8px rgba(59, 130, 246, 0.1);
}

.line--partner {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3), inset 0 0 8px rgba(239, 68, 68, 0.1);
  cursor: move;
  user-select: none;
}

.line--partner * {
  cursor: move !important;
  user-select: none;
}

/* The `* { cursor: move !important }` rules above sweep up EVERY descendant of a draggable row, and the
   pointer rules below name only the button element — so the button's own children (the <span> holding
   "Edit", the <svg> bin icon) kept the move cursor. Hovering a button's padding gave a finger; moving one
   pixel onto the label gave four arrows. The play button escaped only because ▶ is set with textContent,
   which makes it a text node with no element for `*` to match. Actor lines were never affected: they have
   no `*` rule, so the button's normal `.btn { cursor: pointer }` inherits to its children as expected.
   Fixed 31/07/26 by naming the descendants too — `.line--x .btn *` (0,2,0) outranks `.line--x *` (0,1,0). */
.line--partner .btn,
.line--partner .btn *,
.line--partner button,
.line--partner button * {
  cursor: pointer !important;
}

.line--sfx {
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.3), inset 0 0 8px rgba(249, 115, 22, 0.1);
  cursor: move;
  user-select: none;
}

.line--sfx * {
  cursor: move !important;
  user-select: none;
}

.line--sfx .btn,
.line--sfx .btn *,
.line--sfx button,
.line--sfx button * {
  cursor: pointer !important;
}

.line--beat,
.line--pause {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3), inset 0 0 8px rgba(16, 185, 129, 0.1);
  cursor: move;
  user-select: none;
}

.line--beat *,
.line--pause * {
  cursor: move !important;
  user-select: none;
}

.line--beat .btn,
.line--beat .btn *,
.line--beat button,
.line--beat button *,
.line--pause .btn,
.line--pause .btn *,
.line--pause button,
.line--pause button * {
  cursor: pointer !important;
}

.line:hover {
  border-color: #3A3A3A;
  background: #252525;
}

.start-marker {
  position: absolute;
  left: -75px;  /* Adjust this value to move the marker left/right */
  top: 16px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
}

.start-marker * {
  cursor: pointer !important;
}

.start-marker__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #10B981;
  white-space: nowrap;
}

.start-marker__triangle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.2s ease;
  color: var(--border);
  border: 1.5px solid var(--border);
  background: transparent;
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
}

.start-marker:hover .start-marker__triangle {
  border-color: #3A3A3A;
  color: #666;
  transform: translateX(-50%) scale(1.1);
}

.start-marker--active .start-marker__triangle {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10B981;
  color: #10B981;
}

.start-marker--active:hover .start-marker__triangle {
  background: rgba(16, 185, 129, 0.3);
  border-color: #059669;
  color: #059669;
}

.badge {
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.badge--actor { 
  background: rgba(59, 130, 246, 0.2);
  color: #EAF2FF;
  border: 1px solid rgba(59, 130, 246, 0.4);
}
.badge--partner { 
  background: rgba(239, 68, 68, 0.2);
  color: #FFECEC;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.badge--sfx { 
  background: rgba(249, 115, 22, 0.2);
  color: #FFF1E8;
  border: 1px solid rgba(249, 115, 22, 0.4);
}
.badge--beat { 
  background: rgba(16, 185, 129, 0.2);
  color: #E7FFF4;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.line__text {
  white-space: pre-wrap;
  line-height: 1.65;
  font-size: 15px;
  color: var(--text-bright);
  font-weight: 400;
}

.actor-line-text {
  line-height: 1.8;
  user-select: none;
  cursor: pointer;
}

.actor-word {
  display: inline;
  transition: all 0.15s ease;
  cursor: pointer;
}

.actor-word:hover {
  background: rgba(79, 139, 255, 0.08);
  border-radius: 3px;
  padding: 1px 2px;
  margin: -1px -2px;
}

.actor-word--cue {
  background: rgba(79, 139, 255, 0.15);
  border: 1.5px solid var(--primary);
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
  font-weight: 500;
}

.actor-word--selecting {
  background: rgba(79, 139, 255, 0.25);
  border: 1.5px solid var(--primary-hover);
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.line__meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 8px;
  letter-spacing: 0.01em;
}

.line__actions {
  display: flex;
  gap: 8px;
  align-self: center;
}

.scene-controls {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.scene-controls__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
}

.scene-controls__toggle:hover {
  background: rgba(255, 255, 255, 0.03);
}

.scene-controls__title {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
  color: white;
}

.scene-controls__icon {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.scene-controls__toggle.collapsed .scene-controls__icon {
  transform: rotate(-90deg);
}

.scene-controls__content {
  padding: 16px 20px 20px 20px;
  display: block;
}

.scene-controls__content.hidden {
  display: none;
}

/* Landing screen */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.landing__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.landing__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 24px;
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  color: var(--text);
}

.landing__card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.15);
}

.landing__card:first-child {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

.landing__card:first-child:hover {
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
}

.landing__card:last-child {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

.landing__card:last-child:hover {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
}

.landing__card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 6px;
}

.landing__card-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.landing__back {
  margin-top: 16px;
}

/* Browse screen */
.browse {
  margin-bottom: 24px;
}

.browse__back {
  margin-top: 16px;
  padding: 8px 16px;
  font-size: 14px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}

.browse__back:hover {
  background: var(--panel-elevated);
  border-color: var(--primary);
}

.browse__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0 0 16px 0;
}

.browse__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.browse__list:empty {
  display: none;
}

.browse__empty {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  background: var(--panel-elevated);
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
}

.browse__actions {
  display: flex;
  gap: 8px;
}

.builder__add-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

/* Hide individual Add buttons but keep Record Scene and Record Lines */
#btnAddActor,
#btnAddPartner,
#btnAddSfx,
#btnAddBeat {
  display: none;
}

/* Record actions — sits outside scene controls, above the scene */
.scene-controls__record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 16px;
}

/* Record buttons styling - red for Record Fresh Lines, blue for Record Over Lines */
#btnRecordScene {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

#btnRecordScene:hover {
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

#btnRecordLines {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

#btnRecordLines:hover {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

/* Collab with Friend — white border + glow (same treatment as the red/blue
   record buttons) so it stands out without introducing a new hue. */
#btnShareFriend {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
#btnShareFriend:hover {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

/* Dual button labels: full by default; short swapped in only on the cramped
   end of the half-width band (see media query). This default MUST precede the
   media query that shows .lbl-short — equal specificity, later source wins. */
.lbl-short { display: none; }

.log-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
}

.log-toggle {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  background: var(--panel-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 8px 20px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.log-toggle:hover {
  background: var(--panel);
  color: var(--text);
  padding-top: 10px;
}

.log-panel {
  background: var(--bg-darker);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-medium);
  max-height: 400px;
  max-width: 600px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-elevated);
}

.log-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

/* margin-left:auto keeps the title hard left and groups Copy next to the × on the right, rather
   than letting the header's space-between strand Copy in the middle. */
.log-copy {
  margin-left: auto;
  margin-right: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.log-copy:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.log-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.log-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.log {
  background: var(--bg-darker);
  color: var(--text-muted);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  line-height: 1.6;
  padding: 20px;
  margin: 0;
  overflow: auto;
  flex: 1;
}

.now {
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
}

.now__text {
  font-size: 22px;
  line-height: 1.2;
  margin-top: 10px;
}

.now__sub {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 13px;
}

.dlg::backdrop {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(2px);
}

.dlg {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  overflow: hidden;
}

.dlg__card {
  width: min(600px, calc(100vw - 28px));
  border: 2px solid white;
  border-radius: 8px;
  padding: 32px;
  background: var(--panel);
  box-shadow: var(--shadow-strong);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}

.dlg__title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 24px;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}

.field { display: block; }
.field__label { 
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.actor-token-display {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  min-height: 60px;
  line-height: 1.6;
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--text-bright);
}
.field__input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--panel-elevated);
  color: var(--text);
  transition: all 0.15s ease;
}

/* The line textareas are disabled while recording (deliberate — no editing mid-take), but WebKit greys
   disabled controls hard, so on iPhone the line you're supposed to be READING went dim the moment you hit
   Record. Desktop Chrome's default is far subtler, which is why it only showed on the phone.
   -webkit-text-fill-color is the property that actually controls it in Safari; `color` alone is ignored. */
.field__input:disabled {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  opacity: 1;
  background: var(--panel-elevated);
}

.field__input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--panel);
  box-shadow: 0 0 0 3px rgba(79, 139, 255, 0.15);
}

.dlg__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* Guide dialog: pin Further tips / Close to the bottom while the (often long)
   list scrolls between the header and the actions. Scoped to #dlgGuide so other
   dialogs keep scrolling as a whole. */
#dlgGuide .dlg__card {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* the inner list scrolls instead of the whole card */
}
#dlgGuide .guide__list {
  flex: 1 1 auto;
  min-height: 0;    /* let the flex child shrink so it can scroll */
  overflow-y: auto;
}
#dlgGuide .dlg__actions {
  flex-shrink: 0;
}

/* ── Import Script dialog ─────────────────────────────────────────────────── */

/* Styled to match the tutorial bubbles (.tut-bubble) so instructional bits look
   consistent across the app — white card, dark text, soft shadow. Can't reuse
   .tut-bubble directly here as that class is position:fixed. */
.import-intro {
  background: #fff;
  color: #111;
  margin: 0 0 16px;
  padding: 14px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.import-intro__gotit {
  display: block;
  width: fit-content;
  margin: 12px 0 0 auto;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
}
.import-intro__gotit:hover { background: #333; }

.import-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* Primary import action — the free, on-device path the user should reach for first. */
.import-row--primary {
  margin-bottom: 16px;
}
.import-row--primary .btn {
  font-size: 15px;
  padding: 10px 22px;
}

/* Muted subtitle sitting to the right of a secondary option's button. */
.import-row__sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* "Other options" disclosure toggle — a compact caret + label rather than a
   button, so it stays visually quiet. The caret rotates when the section opens. */
.import-details > summary.import-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer;
}
.import-details > summary.import-toggle:hover { color: #fff; }
.import-toggle__caret {
  display: inline-block;
  transition: transform 0.15s ease;
  font-size: 12px;
}
details[open] > summary.import-toggle .import-toggle__caret { transform: rotate(90deg); }

.import-details {
  margin-bottom: 12px;
}

.import-details > summary {
  cursor: pointer;
  list-style: none;
}

.import-details > summary::-webkit-details-marker {
  display: none;
}

.import-details > summary .import-row__hint {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--panel-elevated);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.import-details > summary:hover .import-row__hint {
  background: #2A2A2A;
  border-color: #3A3A3A;
}

/* Blue outline for the paste option — matches the actor/private = blue, AI = red
   convention used on the fallback doors and elsewhere. The paste control is a
   styled <summary> (not a .btn), so it needs its own rule rather than reusing
   .btn--outline-blue (which would lose to this selector's specificity). */
.import-details > summary .import-row__hint--blue {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}
.import-details > summary:hover .import-row__hint--blue {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
  background: var(--panel-elevated);
}

.import-details__body {
  padding: 10px 0 0;
}

.import-row__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.import-row__hint {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.3;
}

.import-row__hint--bold {
  font-weight: 600;
  color: #fff;
  font-size: 14px;
}

.import-row__note {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.3;
}

.btn--outline-red {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.btn--outline-red:hover {
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.btn--outline-blue {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.btn--outline-blue:hover {
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.btn--outline-green {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.btn--outline-green:hover {
  border-color: rgba(16, 185, 129, 0.8);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.btn--outline-orange {
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.3);
}

.btn--outline-orange:hover {
  border-color: rgba(249, 115, 22, 0.8);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
}

/* Guide dialog — menu of feature walkthroughs */
.guide__intro {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}
.guide__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.guide__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-elevated);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.guide__item:hover {
  background: #2A2A2A;
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}
.guide__item-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.guide__item-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.3;
}
.guide__group {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 6px 0 -2px;
}
.guide__group:first-child {
  margin-top: 0;
}
.guide__note {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

.import-fallback {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 12px;
  line-height: 1.4;
  text-align: center;
}

.import-status {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
}

#characterSelection .field__label,
#characterSelection {
  color: var(--text);
}

.advanced-section {
  margin-top: 16px;
  margin-bottom: 16px;
}

.advanced-section__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.advanced-section__toggle:hover {
  background: var(--panel);
  border-color: var(--primary);
}

.advanced-section__icon {
  font-size: 10px;
  transition: transform 0.2s ease;
  color: var(--text-muted);
}

.advanced-section__icon.expanded {
  transform: rotate(90deg);
}

.advanced-section__title {
  flex: 1;
  text-align: left;
}

.advanced-section__badge {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--bg);
  border-radius: 4px;
}

.advanced-section__content {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
}

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

.toggle-switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 31px;
}

.toggle-switch__slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 23px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-switch__slider {
  background-color: #34C759;
}

.toggle-switch input:checked + .toggle-switch__slider:before {
  transform: translateX(20px);
}

.toggle-switch__slider:hover {
  opacity: 0.9;
}

.recorder__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.recorder__audio {
  width: 100%;
}

.sfx-instruction {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 16px;
  background: var(--panel);
  border-radius: 6px;
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
}

.sfx-countdown-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--panel);
  border-radius: 6px;
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
}

.sfx-countdown-icon {
  font-size: 18px;
  line-height: 1;
}

.sfx-countdown-text {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

/* Insert zones and drag-and-drop */
.insert-zone {
  position: relative;
  height: 16px;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.insert-zone__line {
  position: absolute;
  width: 100%;
  height: 2px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0;
}

.insert-zone:hover .insert-zone__line {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 0 16px rgba(255, 255, 255, 0.2);
  opacity: 1;
}

.insert-zone__plus {
  background: rgba(255, 255, 255, 0.95);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  transform: scale(0.8);
  opacity: 0;
  position: relative;
}

.insert-zone__plus::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: #1A1A1A;
  border-radius: 50%;
  z-index: 1;
}

.insert-zone__plus::after {
  content: '+';
  color: white;
  font-size: 20px;
  font-weight: 400;
  line-height: 0;
  z-index: 2;
  position: absolute;
  top: 43%;  /* ADJUST THIS: Lower % = move up, Higher % = move down */
  left: 49%;  /* ADJUST THIS: Lower % = move left, Higher % = move right */
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.insert-zone:hover .insert-zone__plus {
  transform: scale(1);
  opacity: 1;
}

/* Guide-only: reveal the ⊕ without a hover (the insert-lines walkthrough points at it). */
.insert-zone.tut-reveal .insert-zone__line {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 0 0 16px rgba(255, 255, 255, 0.2);
  opacity: 1;
}
.insert-zone.tut-reveal .insert-zone__plus {
  transform: scale(1);
  opacity: 1;
}

/* Blue line only shows on targeted insert zone via .drag-over class */

.insert-zone.drag-over {
  background: rgba(79, 139, 255, 0.1);
  border-radius: 4px;
}

.insert-zone.drag-over .insert-zone__line {
  background: rgba(79, 139, 255, 0.8);
  box-shadow: 0 0 12px rgba(79, 139, 255, 0.6);
  opacity: 1;
  height: 3px;
}

.insert-zone.drag-over .insert-zone__plus {
  background: rgba(79, 139, 255, 0.95);
  color: white;
  transform: scale(1.1);
  opacity: 1;
}

/* ── Free-user lock: a small lock cue on subscriber-only buttons ─────────────
   Full-strength styling (enticing, not "disabled") + a 🔒 so it reads as
   "unlock this", and clicking shows the subscribe nudge.

   29/07/26 — the ADD buttons and #btnRecordScene were removed from this list: #btnRecordScene,
   #btnAddActor, #btnAddPartner, #btnAddSfx, #btnAddBeat. A free user's scene may now grow to six lines
   (four from the guided demo, two more whenever they like), so all five genuinely work until the ceiling
   is reached — a permanent 🔒 on a button that usually opens is worse than no 🔒 at all. #btnAddBeat was
   the starkest case: pauses are never capped, so it always worked. Hitting the ceiling is explained by the
   nudge instead (FREE_CEILING_MSG in app.js), which can say *why* in a way a glyph can't.

   What's left here is genuinely subscriber-only for a free user in any scene state. */
body.free-user:not(.friend-mode) #btnImportScript::after,
body.free-user:not(.friend-mode) #btnImportScene::after,
body.free-user:not(.friend-mode) #btnNewScene::after,
body.free-user:not(.friend-mode):not(.demo-shareable) #btnShareFriend::after,
body.free-user:not(.friend-mode) #btnExportScene::after,
body.free-user:not(.friend-mode) #btnSaveSceneSlot::after {
  content: '🔒';
  font-size: 0.8em;
  margin-left: 6px;
  opacity: 0.85;
  vertical-align: baseline;
}

/* Empty-state shown in the builder when a scene is deleted down to nothing */
.scene-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
  padding: 48px 16px;
}
/* ─────────────────────────────────────────────────────────────────────────── */

.line.dragging {
  opacity: 0.5;
  transform: scale(0.98);
}

.line__text {
  cursor: text;
}

.line--beat .line__text,
.line--pause .line__text {
  cursor: move !important;
}

/* Autocue Overlay */
.autocue-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.autocue-window {
  background: var(--panel);
  border-radius: 8px;
  box-shadow: var(--shadow-strong);
  width: 100%;
  height: 80vh;
  max-width: var(--half-screen, 50vw);
  min-width: 320px;
  min-height: 250px;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  cursor: move;
  border: 1px solid var(--border);
  position: relative;
}

.autocue-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  z-index: 10;
  border-radius: 0 0 8px 0;
}

.autocue-resize-handle::before,
.autocue-resize-handle::after {
  content: '';
  position: absolute;
  background: var(--text-dim);
  border-radius: 1px;
}

.autocue-resize-handle::before {
  width: 10px;
  height: 2px;
  bottom: 6px;
  right: 4px;
  transform: rotate(-45deg);
}

.autocue-resize-handle::after {
  width: 6px;
  height: 2px;
  bottom: 4px;
  right: 2px;
  transform: rotate(-45deg);
}

.autocue-resize-handle:hover::before,
.autocue-resize-handle:hover::after {
  background: var(--primary);
}

.still-there-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 8px;
}

.still-there-box {
  text-align: center;
  padding: 32px 40px;
}

.still-there-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 8px 0;
}

.still-there-subtitle {
  font-size: 15px;
  color: var(--text-dim);
  margin: 0 0 24px 0;
}

.still-there-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.autocue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-elevated);
  border-radius: 7px 7px 0 0;
}

.autocue-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--text-bright);
  letter-spacing: -0.01em;
}

.autocue-close {
  background: transparent;
  border: 1px solid var(--border);
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.autocue-close:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-bright);
}

.autocue-content {
  padding: 0 48px;
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.autocue-placeholder {
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 32px;
}

/* Autocue anchor layout: actor line fixed at 40% from top */
.autocue-anchor-layout {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
}

.autocue-context-zone {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 12px 0;
}

.autocue-context-zone .autocue-line-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: left;
}

.autocue-actor-zone {
  position: absolute;
  top: 28%;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding-bottom: 24px;
}

.autocue-actor-zone__scroll {
  width: 100%;
  height: 100%;
  overflow: visible;
  position: relative;
  /* Push content start down so the eye-line is still at ~40% of the full layout */
  padding-top: 16.7%;
}

.autocue-actor-zone__track {
  position: absolute;
  left: 0;
  right: 0;
  will-change: transform;
}

/* Crossfade transition wrapper */
.autocue-fade {
  animation: autocueFadeIn 0.35s ease-out;
}

@keyframes autocueFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Sticky header: label + timer row inside the actor line. During scrolling,
   a counter-transform keeps it pinned while text flows behind it. Needs
   position:relative + z-index + background to sit above the scrolling text. */
.autocue-line-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel-elevated);
  margin: -20px -24px 8px;
  padding: 14px 24px 8px;
  border-radius: 4px 4px 0 0;
  will-change: transform;
}

.autocue-line-header .autocue-line-label {
  margin-bottom: 0;
}

.autocue-line {
  padding: 20px 24px;
  border-radius: 6px;
}

.autocue-line--context {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  opacity: 0.85;
}

.autocue-line--current {
  background: var(--panel-elevated);
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 4px rgba(79, 139, 255, 0.1);
}

.autocue-line--actor { border-color: rgba(59, 130, 246, 0.5); }
.autocue-line--actor.autocue-line--current { box-shadow: 0 0 8px rgba(59, 130, 246, 0.2); }

.autocue-line--partner { border-color: rgba(239, 68, 68, 0.5); }
.autocue-line--partner.autocue-line--current { box-shadow: 0 0 8px rgba(239, 68, 68, 0.2); }

.autocue-line--sfx { border-color: rgba(249, 115, 22, 0.5); }
.autocue-line--sfx.autocue-line--current { box-shadow: 0 0 8px rgba(249, 115, 22, 0.2); }

.autocue-line--pause { border-color: rgba(16, 185, 129, 0.5); }
.autocue-line--pause.autocue-line--current { box-shadow: 0 0 8px rgba(16, 185, 129, 0.2); }

.autocue-line-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 8px;
}

.autocue-line--current .autocue-line-label {
  color: var(--primary);
}

.autocue-line--context .autocue-line-label {
  color: var(--text-muted);
}

.autocue-line--actor .autocue-line-label { color: rgba(59, 130, 246, 0.9); }
.autocue-line--partner .autocue-line-label { color: rgba(239, 68, 68, 0.9); }
.autocue-line--sfx .autocue-line-label { color: rgba(249, 115, 22, 0.9); }
.autocue-line--pause .autocue-line-label { color: rgba(16, 185, 129, 0.9); }

.autocue-line-text {
  line-height: 1.6;
  color: var(--text);
}

.autocue-line--current .autocue-line-text {
  line-height: 1.7;
  color: var(--text-bright);
  font-weight: 500;
}

.autocue-line-text--partner {
  font-style: italic;
  color: var(--text-muted);
}

.autocue-line--current .autocue-line-text--partner {
  color: var(--text);
}

.autocue-line-text--sfx,
.autocue-line-text--pause {
  font-style: italic;
  color: var(--text-dim);
}

.autocue-line--current .autocue-line-text--sfx,
.autocue-line--current .autocue-line-text--pause {
  color: var(--text-muted);
  font-weight: 500;
}

/* Cue word underline */
.autocue-cue-word {
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* Failsafe timer display */
.autocue-timer {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin-top: 0;
  font-variant-numeric: tabular-nums;
}

/* Settings panel */
.autocue-settings {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  background: var(--panel-elevated);
  border-radius: 0 0 7px 7px;
}

.autocue-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.autocue-settings__row + .autocue-settings__row {
  border-top: 1px solid var(--border-subtle);
}

.autocue-settings__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 140px;
}

.autocue-settings__control {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: flex-end;
}

.autocue-settings__slider {
  width: 140px;
  accent-color: var(--primary);
  cursor: pointer;
}

.autocue-settings__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 55px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.autocue-settings__control input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}

.autocue-settings__control .select {
  min-width: 180px;
}

/* Record Scene dialog */
.rs-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.rs-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rs-step-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 4px 10px;
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.rs-header__options {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.rs-header__spacer {
  flex: 1;
}

.rs-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
}

.rs-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.rs-btn-small {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
}

.rs-type-selector {
  display: flex;
  gap: 8px;
}

.rs-type-btn {
  flex: 1;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.rs-type-btn--active {
  background: var(--primary);
  color: var(--text-bright);
  border-color: var(--primary);
}

.rs-type-btn--active:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.rs-view {
  min-height: 0;
}

/* Keep-original bar shown after transcription overwrites existing text */
.rs-original {
  position: relative; /* anchors the always-visible keep-original checkbox to the bottom-right */
  margin-top: 6px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: var(--panel-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 72px; /* Reserve space for text + button with border to prevent button jumps */
}

.rs-original__text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  max-height: 80px;
  overflow-y: auto;
  margin-bottom: 6px;
}

.rs-original__label {
  font-weight: 600;
  color: var(--text);
}

.rs-original__btn {
  padding: 4px 10px;
  font-size: 12px;
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 0 6px rgba(249, 115, 22, 0.2);
}

.rs-original__btn:hover {
  border-color: rgba(249, 115, 22, 0.8);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.3);
}

/* The keep-original setting. Absolutely positioned so it sits in the bottom-right of the bar whether or
   not the "Original:" content above it is showing, and so it never adds to the reserved 72px height.
   Deliberately quiet — muted grey, small, grey tick rather than the primary blue. It's a standing setting,
   not a call to action, and it shares the bar with a button that IS one. */
.rs-original__keep {
  position: absolute;
  right: 12px;
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

/* Hand-drawn rather than native: an unchecked native checkbox paints solid white on this dark panel,
   which is the single most eye-catching thing in the bar — the opposite of what this control wants to be.
   Unchecked is a dim hollow outline; checked is a muted grey fill with the tick knocked out in the panel
   colour. accent-color can't do this, since it only styles the checked state. */
.rs-original__keep input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 13px;
  height: 13px;
  margin: 0;
  border: 1px solid var(--text-dim);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}

.rs-original__keep input[type="checkbox"]:checked {
  background: var(--text-muted);
  border-color: var(--text-muted);
}

.rs-original__keep input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3.5px;
  top: 0.5px;
  width: 3px;
  height: 6px;
  border: solid var(--panel-elevated);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rs-original__keep:hover input[type="checkbox"] {
  border-color: var(--text-muted);
}

.rs-original__keep:hover {
  color: var(--text);
}

/* Lead-in line shown above partner text in partner-only mode */
.rs-lead-in {
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--panel-elevated);
  border-left: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
.rs-lead-in--actor  { border-left-color: rgba(59, 130, 246, 0.6); }
.rs-lead-in--partner { border-left-color: rgba(239, 68, 68, 0.6); }

.rs-lead-in__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.rs-lead-in__play {
  font-size: 11px;
  padding: 2px 8px;
}

.rs-lead-in__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rs-lead-in__text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  font-style: italic;
  height: 1.5em;
  min-height: 1.5em;
  overflow-y: auto;
  resize: vertical;
}

.rs-lead-in__text--empty {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Spacer in partner view to match collapsed Advanced Settings height */
.rs-partner-spacer {
  margin-top: 16px;
  margin-bottom: 16px;
  height: 40px; /* matches .advanced-section__toggle: 10px padding*2 + 1px border*2 + ~18px line */
}

/* ── Login overlay ── */
.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow-y: auto; /* short screens (e.g. iPhone SE): let the box scroll instead of clipping top/bottom */
  -webkit-overflow-scrolling: touch;
}

.login-overlay.hidden {
  display: none;
}

.login-box {
  text-align: center;
  padding: 40px;
  max-width: 380px;
  width: 100%;
  margin: auto; /* centres when it fits; when taller than the screen, top+bottom stay reachable via scroll */
  box-sizing: border-box;
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 8px 0;
}

.login-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 28px 0;
}
/* The cross-links between Log in and Sign up. Muted grey made them read as fine print, and they are the
   only route between the two panels — someone on the wrong one has nowhere else to go. The <a> inside
   uses color:inherit, so lifting the paragraph brightens the question and the link together. */
.login-subtitle--prompt { color: var(--text-bright); }

.login-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-family: inherit;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  text-align: center;
  letter-spacing: 0.5px;
}

.login-input:focus {
  border-color: var(--primary);
}

.login-btn {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  font-size: 15px;
}

.login-error {
  color: var(--danger);
  font-size: 13px;
  margin: 12px 0 0 0;
  min-height: 18px;
}

/* Subscribe-page plan buttons: main price line + a smaller value/framing sub-line */
.sp-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  line-height: 1.25;
}
.sp-plan__sub {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}
.sp-trust {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 14px 0 0 0;
}

/* Stripe's badge is a fixed lockup (150x34) and must not be recoloured or distorted — brand terms. Sized
   down proportionally and centred on its own line; it is not designed to sit inline in a sentence. */
.sp-stripe-badge {
  display: block;
  width: 119px;
  height: auto;
  margin: 10px auto 0;
  opacity: 0.75;
}

/* ── Public pitch landing (first-time visitors) ───────────────────────────── */
.pitch {
  /* Landing-page body copy sits one notch brighter than --text-muted (#8A8A8A). That grey is right for
     in-app secondary labels, where the user is already committed; on the landing page it's the only thing
     a stranger has to read, so it needs to be comfortable rather than merely legible. Scoped to .pitch
     deliberately — do NOT lift --text-muted globally, it's used throughout the app. */
  --pitch-copy: #ABABAB;
  position: fixed;
  inset: 0;
  background: var(--bg-dark);
  z-index: 9998;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.pitch.hidden { display: none; }

.pitch__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pitch__brand-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: var(--text-bright); }
.pitch__brand-sub   { font-size: 11px; font-weight: 500; color: var(--primary); letter-spacing: 1px; text-transform: uppercase; opacity: 0.8; margin-top: 1px; }
/* nowrap: the label grew from "Log in" (~84px) to "Log in / Sign up" (~155px), and .btn has no wrapping
   rule — same trap that had Run Scene breaking onto two lines inside an over-wide button.
   White outline (not the shared .btn--tips grey) so the only route to signing up reads as a real control —
   scoped here so the Guide/Feedback buttons that share .btn--tips keep their quieter treatment. */
/* Two classes deliberately: .btn--tips is defined LATER in this file with equal specificity, and its
   `border:` shorthand would reset border-color. .btn.pitch__login outranks it. */
.btn.pitch__login {
  padding: 8px 20px;
  font-size: 14px;
  white-space: nowrap;
  border-color: var(--text-bright);
  color: var(--text-bright);
}

/* .pitch__bar had no responsive rules either, and 40px of side padding on a 375px screen is 21% of it.
   With the longer login label (brand ~106px + button ~155px = ~261px) it would have overflowed a 320px
   phone outright. Reclaiming the padding leaves headroom at both 320px and 375px. */
@media (max-width: 768px) {
  .pitch__bar { padding: 14px 16px; }
}

.pitch__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  padding: 48px 32px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.pitch__hero { flex: 1 1 auto; max-width: 540px; }
.pitch__headline {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0 0 28px 0;
}
.pitch__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pitch__benefits li {
  font-size: 16px;
  line-height: 1.5;
  color: var(--pitch-copy);
  padding-left: 24px;
  position: relative;
}
.pitch__benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.pitch__cta { flex: 0 0 340px; }
.pitch__cta-card {
  background: var(--panel);
  /* White border rather than var(--border): this is the one box on the landing page that must be seen
     first. Everything else on the page uses the subtle #2E2E2E edge, so white reads as "this one". */
  border: 2px solid #FFFFFF;
  border-radius: 12px;
  padding: 32px;
  box-shadow: var(--shadow-medium);
  text-align: center;
}
.pitch__cta-title { font-size: 22px; font-weight: 700; color: var(--text-bright); margin-bottom: 8px; }
.pitch__cta-sub { font-size: 14px; color: var(--pitch-copy); line-height: 1.5; margin-bottom: 24px; }
.pitch__cta-btn { width: 100%; padding: 14px; font-size: 16px; }

@media (max-width: 760px) {
  .pitch__body {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
    padding: 32px 20px;
  }
  .pitch__headline { font-size: 30px; }
  .pitch__cta { flex: 1 1 auto; width: 100%; max-width: 400px; margin: 0 auto; }
}

/* Custom confirm/alert dialog */
.confirm-message {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 8px 0;
  white-space: pre-line;
}

/* Stacked CTA links inside a confirm-dialog body (friend "Out of runs"). Explicit column so the
   order never depends on the dialog width wrapping them. */
.runout-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
}

.runout-ctas .btn {
  text-decoration: none;
}

/* Tips button — same size as record buttons */
.btn--tips {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn--tips:hover {
  color: var(--text-bright);
  border-color: var(--primary);
  background: rgba(79, 139, 255, 0.08);
}

/* Feedback sits inside Scene Controls next to full-strength buttons, where btn--tips' muted grey made it
   read as disabled. Targeted by id rather than changing .btn--tips, which is shared with the Guide
   buttons — those are deliberately quiet, this one shouldn't be. */
#feedbackBtn {
  color: var(--text);
}

/* Buttons that have to sit inside the landing legal strip and pass as links — the strip is one line by
   design, so these must match the anchors around them exactly rather than look like controls. */
.pitch__legal-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Voluntary-contribution button on the landing page. White outline, matching .btn.pitch__login — amber was
   tried first and read as a warning, too stark for something this optional. Deliberately NOT --primary
   blue: that's the conversion colour ("Build a quick scene", "Get full access"), and an ask for money from
   someone who hasn't tried the app yet must never compete with the ask that pays the bills. */
.pitch__support-row {
  text-align: center;
  padding: 8px 18px 0;
}
.pitch__support {
  background: transparent;
  /* Border deliberately left to inherit .btn's var(--border) grey. White text on a grey outline reads as
     present-but-optional; a white border made it compete with the pitch CTA above it. */
  color: var(--text-bright);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
}
.pitch__support:hover {
  background: rgba(255, 255, 255, 0.08);
}

.btn--tutorial {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  width: 36px;
  height: 36px;
  min-width: unset;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}
.btn--tutorial:hover {
  color: var(--text-bright);
  border-color: var(--primary);
  background: rgba(79, 139, 255, 0.08);
}

/* Dialog tutorial button pushed to far left */
#rsTutorial {
  margin-right: auto;
}

/* Fixed tutorial button — bottom-left of screen */
#btnTutorial {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 200;
}

/* Tips + Feedback buttons in record-actions row — pushed right, wider */
#btnTips {
  margin-left: auto;
  min-width: 120px;
  /* Match a normal .btn (Import Scene etc.) — the elevated bg makes the border
     read clearly — but keep bright white text (override .btn--tips's transparent
     bg + muted grey). */
  background: var(--panel-elevated);
  color: var(--text-bright);
  border-color: var(--border);
}
#btnTips:hover {
  background: #2A2A2A;
  border-color: #3A3A3A;
  color: var(--text-bright);
}

#feedbackBtn {
  min-width: 120px;
}

/* Tips button on landing page — centred beneath cards */
.landing__tips {
  display: block;
  margin: 48px auto 0;
  color: var(--text-bright);
  border-color: rgba(255, 255, 255, 0.45);
  padding: 12px 32px;
  font-size: 15px;
}
.landing__tips:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

/* Friend landing */
.friend-landing__content {
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  padding: 40px 20px;
}
.friend-landing__title {
  font-size: 22px;
  color: var(--text-bright);
  margin-bottom: 16px;
}
.friend-landing__text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 28px;
}
.friend-landing__text code {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
}
.friend-landing__btn {
  font-size: 17px;
  padding: 14px 36px;
}
.friend-landing__hint {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 16px;
  font-style: italic;
}

/* Tips footer */
.tips-footer {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin: 4px 0 8px 0;
  line-height: 1.5;
}

/* Tips dialog */
.tips-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  max-height: 60vh;
  overflow-y: auto;
}

.tip {
  background: var(--panel);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.tip[open] {
  border-color: white;
}

.tip__title {
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-bright);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tip__title::-webkit-details-marker { display: none; }

.tip__title::before {
  content: '▶';
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}

.tip[open] > .tip__title::before {
  transform: rotate(90deg);
}

.tip__body {
  padding: 0 14px 14px 30px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}

.tip__body strong {
  color: var(--text-bright);
}

.tip__body ul {
  margin: 4px 0 0 0;
}

.tip__body li {
  margin-bottom: 4px;
}

/* ── Feedback widget ── */
.feedback-widget {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Above .pitch (9998), .tut-bubble (9999) and the insert menu (10000/10001). Was 900, which was fine
     while the only way in was from Scene Controls — but the landing page is a fixed, opaque, full-screen
     layer at 9998, so the Feedback link added there on 31/07/26 opened the widget completely hidden
     behind it: the click worked, the panel rendered, and nothing appeared. Raising it is safe because the
     backdrop is pointer-events:none, so it never intercepts clicks meant for the page underneath. */
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.feedback-widget .feedback-widget__panel {
  pointer-events: auto;
}

.feedback-widget__panel {
  width: 340px;
  background: var(--panel);
  border: 2px solid white;
  border-radius: 12px;
  box-shadow: var(--shadow-strong);
  padding: 16px;
}

.feedback-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
}

.feedback-widget__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.feedback-widget__close:hover {
  color: var(--text);
}

.feedback-widget__prompt {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.feedback-widget__textarea {
  width: 100%;
  background: var(--bg-dark);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 80px;
}

.feedback-widget__textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.feedback-widget__actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.feedback-widget__status {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  padding: 6px;
  border-radius: 6px;
}

.feedback-widget__status--success {
  color: var(--success);
  background: rgba(74, 222, 128, 0.1);
}

.feedback-widget__status--error {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

/* Half-width band: Collab stays on the top row with the record buttons (pushed
   right by the 1fr spacer column), and Guide sits directly beneath Collab.
   Upper bound is 900 (not 768) so this clean 2-row layout covers the zone where
   the one-line flex row can't yet fit all four buttons — without that, the flex
   wrapped badly (Guide top-right, Collab dropping to a second line on the left).
   Above 900 the default one-line row has room for all four. */
@media (min-width: 481px) and (max-width: 900px) {
  .scene-controls__record-actions {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 12px;
  }
  #btnRecordScene { grid-column: 1; grid-row: 1; }
  #btnRecordLines { grid-column: 2; grid-row: 1; }
  #btnShareFriend { grid-column: 4; grid-row: 1; margin-left: 0; }
  #btnTips        { grid-column: 4; grid-row: 2; margin-left: 0; min-width: 0; }
}

/* Narrow end of the band: swap the wide record labels for short ones so the top
   row doesn't overflow. (Placed after the default `.lbl-short { display:none }`,
   so this wins within its range.) */
@media (min-width: 481px) and (max-width: 600px) {
  .lbl-full  { display: none; }
  .lbl-short { display: inline; }
}

/* ── Mobile (phones in portrait) ── */
@media (max-width: 480px) {
  .dlg__card {
    padding: 20px;
    width: min(600px, calc(100vw - 20px));
  }

  /* Main panel: reduce padding so content has more room */
  .panel--main {
    padding: 20px;
  }

  /* Scene manager actions: stack Import/Export/Share/New buttons vertically */
  .scene-manager__actions {
    flex-direction: column;
  }
  .scene-manager__actions .btn {
    width: 100%;
    text-align: center;
  }

  /* Scene defaults and mic settings: stack control below its label */
  .scene-defaults__row,
  .mic-mode__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .scene-defaults__label,
  .mic-mode__label {
    min-width: unset;
  }

  /* Record-actions row: 2-column grid so buttons don't scrunch.
     Record Fresh | Record Over on top, Collab full-width, then Guide full-width
     directly below it (order overrides DOM, where Guide precedes Collab).
     (Half-width 481–768 still hides Guide for now — handled separately.) */
  .scene-controls__record-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #btnShareFriend {
    grid-column: span 2;
    margin-left: 0;
    order: 3;
  }
  #btnTips {
    display: block;
    grid-column: span 2;
    margin-left: 0;
    min-width: 0;
    order: 4;
  }

  /* Scene line boxes: two-row layout on mobile — badge + actions top, text below */
  .line {
    margin-left: 44px;
    margin-bottom: 4px;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "badge actions"
      "text  text";
    gap: 6px 12px;
  }
  .insert-zone {
    height: 8px;
  }
  .badge {
    grid-area: badge;
    align-self: center;
  }
  .line__text {
    grid-area: text;
  }
  .line__actions {
    grid-area: actions;
    justify-self: end;
    flex-wrap: wrap;
  }

  /* Edit button: show pencil icon, hide text */
  .btn--edit {
    padding: 8px 10px;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn--edit .btn__label { display: none; }
  .btn--edit .btn__icon { display: inline-flex; align-items: center; }

  /* Start Here marker: narrower column so lines have more horizontal room */
  .start-marker {
    left: -50px;
    width: 36px;
    height: 64px;
  }
  .start-marker__label {
    white-space: normal;
    text-align: center;
    line-height: 1.1;
    width: 100%;
  }
  .start-marker__triangle {
    top: 30px;
  }

  /* Import Script: full width to match the stacked buttons above it */
  #btnImportScript {
    width: 100%;
  }

  /* Friend landing: tighten vertical spacing on small screens */
  .friend-landing__content {
    padding: 20px;
  }
  .friend-landing__text {
    margin-bottom: 16px;
  }

  /* Autocue: full screen on mobile */
  .autocue-window {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    min-width: unset;
    min-height: unset;
    border-radius: 0;
    cursor: default;
  }
  .autocue-resize-handle {
    display: none;
  }
  .autocue-content {
    padding: 0 16px;
  }
  .autocue-line {
    margin-bottom: 12px;
  }
  .autocue-actor-zone__scroll {
    padding-top: calc(12dvh + 5px);
  }
}


/* Autocue: full screen on landscape phones */
@media (max-height: 500px) and (pointer: coarse) {
  .autocue-window {
    width: 100% !important;
    height: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    min-width: unset;
    min-height: unset;
    border-radius: 0;
    cursor: default;
  }
  .autocue-resize-handle {
    display: none;
  }
  .autocue-content {
    padding: 0 16px;
  }
  .autocue-actor-zone__scroll {
    padding-top: calc(12dvh + 5px);
  }
}

/* ── Toast notifications ── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #1e1e2e;
  color: #e2e2f0;
  border: 1px solid #3a3a5c;
  padding: 0.75rem 1.25rem;
  border-radius: 0.6rem;
  font-size: 0.875rem;
  max-width: min(90vw, 420px);
  text-align: center;
  z-index: 9999;
  line-height: 1.4;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.toast--hidden {
  opacity: 0;
}

/* --- Tutorial --- */

.tut-highlight {
  outline: 3px solid rgba(255, 255, 255, 0.85) !important;
  outline-offset: 3px;
  animation: tut-pulse 1.4s ease-in-out infinite;
}

@keyframes tut-pulse {
  0%, 100% { outline-color: rgba(255, 255, 255, 0.9); }
  50%       { outline-color: #4F8BFF; }
}

.tut-bubble {
  position: fixed;
  background: #fff;
  color: #111;
  border-radius: 10px;
  padding: 14px 36px 14px 14px;
  font-size: 15px;
  line-height: 1.45;
  z-index: 9999;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  /* Hard cap so the bubble never overflows on small screens. */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  /* Subtle fade in/out between tutorial steps (toggled via --visible) */
  opacity: 0;
  transition: opacity 150ms ease;
}

.tut-bubble--visible { opacity: 1; }

/* Post-import "Happy?" check — reuses the tutorial-bubble look but is pinned to
   the side (not anchored to a scrolling scene row) so it stays put while the
   user scrolls through the imported lines to decide. */
.import-happy {
  right: 20px;
  left: auto;
  top: 96px;
  width: min(260px, calc(100vw - 40px));
}

.tut-bubble__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 4px;
}

.tut-bubble__close:hover { color: #333; }

.tut-bubble__text { margin: 0; }

.tut-bubble__next {
  display: block;
  margin-top: 10px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
}
.tut-bubble__next:hover { background: #333; }

.tut-bubble__alt {
  display: block;
  margin-top: 6px;
  background: none;
  border: none;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
  width: 100%;
}
.tut-bubble__alt:hover { color: #333; }

/* De-emphasised "Don't show the tutorial" escape link, offered on the first friend-tutorial bubble. */
.tut-bubble__optout {
  display: block;
  margin-top: 10px;
  background: none;
  border: none;
  color: #888;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
  width: 100%;
  text-align: center;
}
.tut-bubble__optout:hover { color: #333; }

/* Equal-weight options (e.g. the post-run "what next?" choices): a filled button with a
   brief description line beneath it. */
.tut-bubble__optbtn {
  display: block;
  width: 100%;
  margin-top: 12px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.tut-bubble__optbtn:hover { background: #333; }
.tut-bubble__optdesc {
  margin: 5px 2px 0;
  font-size: 13px;
  color: #666;
  line-height: 1.35;
}

/* Restart notification toast */
.tut-restart-notif {
  position: fixed;
  bottom: 70px;
  left: 20px;
  background: #fff;
  color: #111;
  border-radius: 10px;
  padding: 12px 12px 12px 14px;
  font-size: 13px;
  line-height: 1.4;
  z-index: 200;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  max-width: 160px;
  animation: slideUp 0.3s ease-out;
}

.tut-restart-notif--in-dialog {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10001;
}

.tut-restart-notif__text {
  margin: 0 0 8px 0;
  font-weight: 500;
}

.tut-restart-notif__qmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.tut-restart-notif__button {
  display: block;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
}

.tut-restart-notif__button:hover { background: #333; }

.tut-restart-notif--fade {
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}