: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;
}

.brand {
  cursor: pointer;
  transition: opacity 0.15s;
}
.brand:hover {
  opacity: 0.8;
}

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

.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;
  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;
}

.line--partner .btn,
.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 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 button,
.line--pause .btn,
.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);
}

.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;
}

.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. */
body.free-user:not(.friend-mode) #btnRecordScene::after,
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) #btnAddActor::after,
body.free-user:not(.friend-mode) #btnAddPartner::after,
body.free-user:not(.friend-mode) #btnAddSfx::after,
body.free-user:not(.friend-mode) #btnAddBeat::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 {
  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);
}

/* 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;
}

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

.login-box {
  text-align: center;
  padding: 40px;
  max-width: 380px;
  width: 100%;
}

.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;
}

.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;
}

/* ── Public pitch landing (first-time visitors) ───────────────────────────── */
.pitch {
  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; }
.pitch__login { padding: 8px 20px; font-size: 14px; }

.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(--text-muted);
  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);
  border: 1px solid var(--border);
  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(--text-muted); 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;
}

/* 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);
}

.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%;
  z-index: 900;
  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; }

/* 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; }
}

/* Friend tutorial opt-in — fixed overlay, same visual style as tut-bubble */
.tut-optin {
  position: fixed;
  width: 180px;
  background: #fff;
  color: #111;
  border-radius: 10px;
  padding: 14px 36px 14px 14px;
  font-size: 14px;
  line-height: 1.45;
  z-index: 9999;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}
.tut-optin__no {
  display: block;
  margin-top: 6px;
  background: none;
  border: none;
  color: #888;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}
.tut-optin__no:hover { color: #333; }
.tut-optin__confirm {
  font-size: 13px;
  color: #888;
  line-height: 1.5;
  font-style: italic;
  margin-top: 8px;
}