:root {
  /* TranscriptMint light palette — vintage candy-tin aesthetic, cream tin
     face with sage edges and the brand mint accent. Dark variants live
     below in `prefers-color-scheme` and [data-theme="dark"] — both target
     the same set of variables so flipping themes is purely a redefinition. */
  --bg: #f4ebd0;            /* tin face cream */
  --card: #faf3df;          /* panel surface */
  --ink: #1c3d22;           /* deep forest, matches "Transcript" wordmark in light logo */
  --muted: #5b7a64;
  --border: #c5d8b3;        /* sage */
  --accent: #4caa30;        /* brand mint, slightly darker on cream for AA contrast */
  --accent-soft: #d8e8c5;
  --primary-hover: #3e8e26;
  --input-bg: #ffffff;
  --btn-bg: #ffffff;
  --btn-hover-bg: #ede4c5;
  --soft-bg: #ede4c5;
  --warn-bg: #fff5d8;
  --warn-border: #d9c47a;
  --warn-text: #6e5500;
  --err-bg: #fde7e3;
  --err-border: #e09a8d;
  --info-bg: #ecf5db;        /* sage-tinted, was blue */
  --info-border: #c5d8b3;
  --kbd-bg: #ede4c5;
  --kbd-border: #b9d4a6;
  --badge-bg: #ede4c5;
  --word-active-bg: #4caa30; /* karaoke highlight = brand mint */
  --word-active-fg: #ffffff;
  --free-color: #2a8550;
  /* speaker palette: shifted away from green so the brand accent stays distinct */
  --speaker-a: #2d6cd6;      /* blue */
  --speaker-b: #d65c3a;      /* coral */
  --speaker-c: #b8801f;      /* amber (was green — would clash with brand mint) */
  --speaker-d: #8240b8;      /* purple */
  --speaker-e: #1f8085;      /* teal (was amber) */
  --error: #c0392b;
  --shadow-sm: 0 1px 2px rgba(20,40,30,.06);
  --shadow-md: 0 4px 14px rgba(20,40,30,.10);
  --hover-bg: #ede4c5;
  --selected-bg: #d8e8c5;
  --danger: #c0392b;
  --danger-bg: #fdecea;
}

/* Dark palette — applied either when the user explicitly picks dark via
   the toggle (data-theme="dark"), or when the OS reports dark mode and
   the user hasn't picked light explicitly (no data-theme override). */
:root[data-theme="dark"] {
  --bg: #0a1410;            /* near-black, faint green undertone */
  --card: #15201a;          /* tin body */
  --ink: #f2e8c8;           /* cream, matches "Transcript" wordmark in dark logo */
  --muted: #a3b59c;
  --border: #2a3d33;
  --accent: #5fc73b;        /* brand mint, brighter on dark for AA contrast */
  --accent-soft: #2c5d20;
  --primary-hover: #6fd44d;
  --input-bg: #0f1813;
  --btn-bg: #1a2620;
  --btn-hover-bg: #243429;
  --soft-bg: #101a14;
  --warn-bg: #2e2618;
  --warn-border: #5a4820;
  --warn-text: #d8c081;
  --err-bg: #3a1d1d;
  --err-border: #6b3030;
  --info-bg: #15281a;
  --info-border: #2c3d2c;
  --kbd-bg: #1a2620;
  --kbd-border: #2a3d33;
  --badge-bg: #1a2620;
  --word-active-bg: #5fc73b;
  --word-active-fg: #0a1410;
  --free-color: #5fc183;
  --speaker-a: #7ea2ff;
  --speaker-b: #ff9173;
  --speaker-c: #e8b65a;     /* amber (was green) */
  --speaker-d: #c891ff;
  --speaker-e: #5cd4d9;     /* teal (was amber) */
  --error: #ee6b62;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 4px 14px rgba(0,0,0,.55);
  --hover-bg: #1a2920;
  --selected-bg: #2c5d20;
  --danger: #ee6b62;
  --danger-bg: #3a1d1d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1410;
    --card: #15201a;
    --ink: #f2e8c8;
    --muted: #a3b59c;
    --border: #2a3d33;
    --accent: #5fc73b;
    --accent-soft: #2c5d20;
    --primary-hover: #6fd44d;
    --input-bg: #0f1813;
    --btn-bg: #1a2620;
    --btn-hover-bg: #243429;
    --soft-bg: #101a14;
    --warn-bg: #2e2618;
    --warn-border: #5a4820;
    --warn-text: #d8c081;
    --err-bg: #3a1d1d;
    --err-border: #6b3030;
    --info-bg: #15281a;
    --info-border: #2c3d2c;
    --kbd-bg: #1a2620;
    --kbd-border: #2a3d33;
    --badge-bg: #1a2620;
    --word-active-bg: #5fc73b;
    --word-active-fg: #0a1410;
    --free-color: #5fc183;
    --speaker-a: #7ea2ff;
    --speaker-b: #ff9173;
    --speaker-c: #e8b65a;
    --speaker-d: #c891ff;
    --speaker-e: #5cd4d9;
    --error: #ee6b62;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 4px 14px rgba(0,0,0,.55);
    --hover-bg: #1a2920;
    --selected-bg: #2c5d20;
    --danger: #ee6b62;
    --danger-bg: #3a1d1d;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* The HTML `hidden` attribute is supposed to imply display:none, but author
   styles like `.modal { display: flex }` win the cascade tie. Force it. */
[hidden] { display: none !important; }
body {
  font: 15px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.topbar {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 1.2rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { font-weight: 600; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; padding: 0; }
/* TranscriptMint logo — two PNGs, swapped by theme. The default state hides
   the dark logo; the prefers-color-scheme rule shows it under system-dark
   when the user hasn't picked light explicitly; the [data-theme] rules win
   over the media query and let the toggle override the system preference. */
.brand-logo { height: 160px; width: auto; display: block; }
.brand-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo-dark { display: block; }
}
:root[data-theme="light"] .brand-logo-light { display: block; }
:root[data-theme="light"] .brand-logo-dark { display: none; }
:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: block; }

/* Brand-tinted text selection across the app. */
::selection { background: var(--accent-soft); color: var(--ink); }
.topbar-file { font-weight: 500; }
.topbar-model { margin-left: auto; }

main { max-width: 1400px; margin: 0 auto; padding: 1.4rem; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.card.center { text-align: center; }
h1 { margin: 0 0 1rem; font-size: 1.4rem; }
h2 { margin: 0 0 .8rem; font-size: 1.15rem; }
h3 { margin: 0 0 .6rem; font-size: 1rem; }

label.row { display: block; margin-bottom: .9rem; }
label.row > span { display: block; font-weight: 500; margin-bottom: .25rem; }

input[type="text"], input[type="file"], input[type="url"], select, textarea {
  font: inherit;
  padding: .45rem .55rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--input-bg);
  color: var(--ink);
  width: 100%;
}
button {
  font: inherit;
  padding: .5rem .9rem;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--ink);
  border-radius: 5px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--btn-hover-bg); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
button.primary:hover:not(:disabled) {
  background: var(--primary-hover);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.muted { color: var(--muted); }
.small { font-size: .85em; }
.hint { color: var(--muted); font-size: .9em; margin-top: .5rem; }
kbd {
  background: var(--kbd-bg);
  border: 1px solid var(--kbd-border);
  border-radius: 3px;
  padding: 0 .35em;
  font-size: .9em;
  font-family: ui-monospace, monospace;
}

.banner {
  padding: .6rem .9rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
}
.banner-error { background: var(--err-bg); border-color: var(--err-border); color: var(--error); }

.file-info {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: 5px;
  padding: .5rem .7rem;
  margin: .2rem 0 .9rem;
  font-size: .95em;
}

/* ---- Drop zone (file upload) ---- */
.drop-zone {
  display: block;
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--soft-bg);
  padding: 1.6rem 1.2rem;
  margin-bottom: .9rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, transform 140ms;
}
.drop-zone:hover {
  border-color: var(--accent-soft);
  background: var(--hover-bg);
}
.drop-zone.dragover {
  border-color: var(--accent);
  border-style: solid;
  background: var(--hover-bg);
  transform: scale(1.005);
}
.drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.drop-zone .drop-icon {
  width: 38px;
  height: 38px;
  color: var(--muted);
  margin-bottom: .4rem;
  transition: color 140ms;
}
.drop-zone:hover .drop-icon,
.drop-zone.dragover .drop-icon { color: var(--accent); }
.drop-zone-primary {
  font-weight: 600;
  font-size: 1.05em;
  color: var(--ink);
}
.drop-zone-secondary {
  color: var(--muted);
  margin-top: .15rem;
}
.drop-zone-secondary .link-like {
  color: var(--accent);
  text-decoration: underline;
}
.drop-zone-formats {
  margin-top: .5rem;
  letter-spacing: .02em;
}

.drop-zone.has-file {
  border-style: solid;
  border-color: var(--accent-soft);
  background: var(--hover-bg);
  padding: 1rem 1.2rem;
  text-align: left;
}
.drop-zone-filled {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.drop-icon-sm {
  width: 28px;
  height: 28px;
  color: var(--accent);
  flex-shrink: 0;
}
.drop-zone-meta {
  flex: 1;
  min-width: 0;
}
.drop-zone-filename {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop-zone-clear {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  font-size: .85em;
  flex-shrink: 0;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.drop-zone-clear:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--danger);
}
.drop-zone:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- URL input + metadata preview ---- */
.url-row {
  display: block;
  margin-bottom: .9rem;
}
.url-row-label {
  display: block;
  font-size: .8em;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .35rem;
}
.url-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.url-input-icon {
  position: absolute;
  left: .85rem;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
  transition: color 140ms;
}
.url-input-large {
  width: 100%;
  height: 52px;
  padding: 0 2.6rem 0 2.7rem;
  font-size: 1.05em;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: border-color 140ms, box-shadow 140ms;
}
.url-input-large:hover { border-color: var(--accent-soft); }
.url-input-large:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(45,92,219,.18);
}
.url-input-wrap:focus-within .url-input-icon { color: var(--accent); }
.url-input-spinner {
  position: absolute;
  right: 1rem;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}

.url-preview {
  display: flex;
  gap: .9rem;
  padding: .8rem;
  margin-bottom: .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  animation: url-preview-fade 220ms ease-out;
}
@keyframes url-preview-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.url-preview-thumb-link {
  flex-shrink: 0;
  display: block;
  width: 180px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: var(--badge-bg);
}
.url-preview-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.url-preview-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.url-preview-title {
  font-weight: 600;
  font-size: 1.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
.url-preview-sub {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.url-preview-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  margin-top: .15rem;
}
.url-preview-cost {
  margin-top: auto;
  padding-top: .35rem;
  font-size: .95em;
}
.url-preview-cost strong { color: var(--accent); }

.url-preview-error {
  padding: .55rem .8rem;
  margin-bottom: .9rem;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: 6px;
  color: var(--warn-text);
  font-size: .9em;
}

@media (max-width: 600px) {
  .url-preview { flex-direction: column; }
  .url-preview-thumb-link { width: 100%; }
}

.deepgram-options,
.source-mode,
.produce,
.autosave {
  background: var(--soft-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .7rem .9rem .5rem;
  margin: 0 0 .9rem;
}
.source-mode legend,
.produce legend,
.autosave legend {
  font-weight: 600;
  font-size: .92em;
  color: var(--muted);
  padding: 0 .35rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.source-mode label.check,
.produce label.check,
.autosave label.check {
  display: inline-flex;
  gap: .4rem;
  margin: .2rem .8rem .2rem 0;
  cursor: pointer;
}
.autosave-formats,
.autosave-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-bottom: .4rem;
}
.deepgram-options label.check {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: .25rem 0;
  cursor: pointer;
}
.deepgram-options input[type="checkbox"]:disabled + * {
  opacity: .5;
}

ul.recent {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
ul.recent li.recent-group {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .55rem .8rem .6rem;
  background: var(--card);
  transition: border-color 120ms, box-shadow 120ms;
}
ul.recent li.recent-group:hover {
  border-color: var(--accent-soft);
  box-shadow: var(--shadow-sm);
}
ul.recent li.removing {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 180ms, transform 180ms;
}
ul.recent .recent-group-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .45rem .6rem;
  margin-bottom: .3rem;
}
ul.recent .recent-filename {
  font-weight: 600;
  color: var(--ink);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
ul.recent .recent-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  font-size: .85em;
  color: var(--muted);
  align-items: baseline;
}
ul.recent .recent-group-meta a { color: var(--accent); text-decoration: none; }
ul.recent .recent-group-meta a:hover { text-decoration: underline; }
ul.recent .badge {
  display: inline-block;
  padding: 1px .5rem;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--muted);
  font-size: .92em;
  white-space: nowrap;
}
ul.recent .badge.warn { background: var(--warn-bg); color: var(--warn-text); }

ul.recent-variants {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
ul.recent-variants > li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .35rem;
  border-radius: 4px;
  font-size: .95em;
  flex-wrap: wrap;
  transition: background 120ms;
}
ul.recent-variants > li:hover { background: var(--hover-bg); }
ul.recent-variants .recent-variant-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
ul.recent-variants .recent-variant-link:hover { text-decoration: underline; }
ul.recent-variants .recent-variant-cost {
  color: var(--muted);
  font-size: .9em;
  flex-shrink: 0;
}
ul.recent-variants .row-delete { margin-left: auto; }
ul.recent-variants .recent-variant-cost.is-free {
  color: var(--free-color);
  font-weight: 500;
}
ul.recent-variants .row-error {
  font-size: .85em;
  color: var(--danger);
  margin: .15rem 0 0;
  flex-basis: 100%;
}

.row-delete, .dropdown-delete {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: .3rem .45rem;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  font-size: 1em;
  line-height: 1;
  transition: opacity 120ms, background 120ms, color 120ms;
}
ul.recent-variants > li:hover .row-delete,
.dropdown-item-row:hover .dropdown-delete,
.row-delete:focus-visible,
.dropdown-delete:focus-visible {
  opacity: 1;
}
.row-delete:hover,
.dropdown-delete:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 1rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Editor layout ---- */
.editor-grid {
  display: grid;
  grid-template-columns: minmax(360px, 38%) 1fr;
  gap: 1.2rem;
  align-items: start;
}
.player-pane {
  position: sticky;
  top: 60px;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.player-pane video {
  width: 100%;
  background: #000;
  border-radius: 8px;
  max-height: 50vh;
}
.player-controls {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}
.player-controls label { display: flex; align-items: center; gap: .35rem; }
.player-controls select { width: auto; }
.player-controls .sync-divider { color: var(--border); margin: 0 .15rem; }
.player-controls .sync-label { color: var(--muted); font-size: .9em; }
.player-controls .sync-readout {
  font-variant-numeric: tabular-nums;
  min-width: 4.5em;
  text-align: center;
  font-size: .9em;
}

.speakers-card, .export-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .8rem 1rem;
}
.speakers-card .speaker-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .3rem 0;
}
.speakers-card .speaker-row .swatch {
  width: 12px; height: 12px; border-radius: 50%;
  flex-shrink: 0;
}
.speakers-card input { flex: 1; }
.speakers-card .speaker-merge-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  padding: 0 .3rem;
  color: var(--muted);
  flex-shrink: 0;
}
.speakers-card .speaker-merge-btn:hover { color: var(--ink); }

.export-card label { display: block; margin-bottom: .5rem; font-weight: 500; }
.download-video-link {
  display: inline-block;
  margin-top: .5rem;
  padding: .45rem .8rem;
  font: inherit;
  color: var(--ink);
  background: var(--btn-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.download-video-link:hover {
  background: var(--btn-hover-bg);
  border-color: var(--accent-soft);
}

.transcript-pane {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-size: 17px;
  min-height: 60vh;
}

#transcript .utterance {
  border-left: 4px solid transparent;
  padding: .55rem .7rem;
  margin: 0 0 .35rem -.7rem;
  border-radius: 0 5px 5px 0;
}
#transcript .utterance.active {
  background: var(--hover-bg);
  border-left-color: var(--accent);
}
#transcript .utt-meta {
  font-size: .9em;
  color: var(--muted);
  display: flex;
  gap: .6rem;
  align-items: center;
  margin-bottom: .15rem;
}
#transcript .timestamp {
  font-family: ui-monospace, "Consolas", monospace;
  cursor: pointer;
}
#transcript .speaker-pill {
  font-weight: 600;
  cursor: pointer;
}
#transcript .speaker-pill[data-speaker="A"] { color: var(--speaker-a); }
#transcript .speaker-pill[data-speaker="B"] { color: var(--speaker-b); }
#transcript .speaker-pill[data-speaker="C"] { color: var(--speaker-c); }
#transcript .speaker-pill[data-speaker="D"] { color: var(--speaker-d); }
#transcript .speaker-pill[data-speaker="E"] { color: var(--speaker-e); }
#transcript .menu-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  padding: 0 .3rem;
  color: var(--muted);
}
#transcript .menu-btn:hover { color: var(--ink); }
#transcript .utt-body {
  line-height: 1.65;
  outline: none;
  /* Suppress double-tap-to-zoom on touch — needed for our double-tap-to-edit
     gesture to land cleanly. Panning/scrolling stay intact. */
  touch-action: manipulation;
}
#transcript .utt-body:focus-within {
  background: var(--soft-bg);
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: 4px;
}
#transcript .word {
  padding: 0 1px;
  border-radius: 2px;
  transition: background-color 80ms;
}
#transcript .word.active {
  background: var(--word-active-bg);
  color: var(--word-active-fg);
  border-radius: 2px;
  padding: 0 1px;
}
#transcript textarea.edit-text {
  width: 100%;
  min-height: 4em;
  font: inherit;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: .4rem;
  resize: vertical;
}

.menu-popover {
  position: absolute;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  padding: .3rem 0;
  z-index: 50;
  min-width: 160px;
}
.menu-popover button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: .4rem .8rem;
  cursor: pointer;
  border-radius: 0;
}
.menu-popover button:hover { background: var(--hover-bg); }

.modal,
.split-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-inner {
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  min-width: min(380px, calc(100vw - 2rem));
  max-width: min(520px, calc(100vw - 2rem));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.modal-inner h3 { margin: 0 0 .9rem; font-size: 1.1rem; }
.modal-inner label.check {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .5rem;
  cursor: pointer;
}
.modal-inner label.row { margin-bottom: .8rem; }
.modal-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.split-modal .inner {
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  padding: 1.2rem;
  max-width: min(600px, calc(100vw - 2rem));
  max-height: 80vh;
  overflow: auto;
}
.split-modal .word-pick {
  cursor: pointer;
  padding: 2px 3px;
  border-radius: 3px;
}
.split-modal .word-pick:hover { background: var(--hover-bg); }
.split-modal .word-pick.split-marker {
  background: var(--danger-bg);
  border-left: 2px solid var(--error);
  padding-left: 4px;
}

/* ---- Siblings of this video ---- */
.siblings-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  align-items: baseline;
  padding: .4rem .6rem;
  margin-bottom: .6rem;
  background: var(--soft-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: .92em;
}
.siblings-label { font-weight: 500; }
.sibling-item { display: inline-flex; align-items: baseline; gap: 0; }
.sibling-item a { color: var(--accent); text-decoration: none; font-weight: 500; }
.sibling-item a:hover { text-decoration: underline; }
.sibling-item .current-sibling { font-weight: 500; }
.sibling-state-transcribing,
.sibling-state-downloading,
.sibling-state-awaiting_signin { color: var(--warn-text); }
.sibling-state-error { color: var(--error); }

.sibling-toast {
  position: fixed;
  top: 56px;
  right: 1.5rem;
  background: var(--accent);
  color: #ffffff;
  padding: .55rem .8rem;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.sibling-toast a { color: white; text-decoration: underline; font-weight: 500; }
.sibling-toast .toast-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,.6);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  font-size: 1em;
  line-height: 1;
}
.sibling-toast .toast-close:hover { background: rgba(255,255,255,.2); }

/* ---- Topbar dropdown (Transcripts menu) ---- */
.topbar-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .3rem .65rem;
  font-size: .9em;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.topbar-btn:hover {
  background: var(--hover-bg);
  border-color: var(--accent-soft);
  color: var(--accent);
}

.dropdown {
  position: absolute;
  top: 48px;
  left: 1.2rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  min-width: 380px;
  max-width: 540px;
  max-height: 60vh;
  overflow: auto;
  z-index: 50;
  padding: .35rem;
}
.dropdown-item-row {
  display: flex;
  align-items: center;
  gap: .25rem;
  border-radius: 6px;
  margin-bottom: .15rem;
  transition: background 120ms;
}
.dropdown-item-row:last-child { margin-bottom: 0; }
.dropdown-item-row:hover { background: var(--hover-bg); }
.dropdown-item-row.current-row { background: var(--selected-bg); }
.dropdown-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .5rem .7rem;
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
  min-width: 0;
}
.dropdown-item .filename {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-item .meta { color: var(--muted); }
.dropdown-empty {
  padding: .6rem .8rem;
  color: var(--muted);
  font-size: .9em;
}

@media (max-width: 900px) {
  /* Mobile layout: flatten the player-pane into the grid so the video
     element can sticky-position relative to the full document scroll
     (and stays pinned while the transcript scrolls past). The topbar
     becomes non-sticky so the video has clean access to viewport top:0
     once the user scrolls — otherwise the sticky topbar would cover it. */
  .topbar { position: static; }
  .editor-grid {
    display: flex;
    flex-direction: column;
    gap: .8rem;
  }
  .player-pane {
    display: contents;
  }
  #player {
    position: sticky;
    top: 0;
    z-index: 5;
    max-height: 30vh;
    background: #000;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    border-radius: 0;
  }
  html.mobile-playback-mode,
  body.mobile-playback-mode {
    overflow: hidden;
  }
  body.mobile-playback-mode .topbar {
    display: none;
  }
  body.mobile-playback-mode #player,
  #player.mobile-player-pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 40;
  }
  body.mobile-playback-mode .transcript-pane {
    position: fixed;
    top: var(--mobile-player-height, 30vh);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100dvh - var(--mobile-player-height, 30vh));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 30;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  /* Order: speakers / export / playback controls live above the video so
     they're immediately reachable on mobile (where the player-pane would
     otherwise dump them all the way below the transcript). During playback
     the transcript pane owns scrolling, so these controls are paused-only. */
  .speakers-card { order: 1; }
  .export-card { order: 2; }
  .player-controls { order: 3; }
  #player { order: 4; }
  #video-error { order: 5; }
  .transcript-pane { order: 6; }
  .player-pane > .hint { order: 7; }

  /* On touch the body starts non-editable and a double-tap activates
     edit mode — make the active line unmistakably distinct so the user
     knows which one will accept input. */
  #transcript .utterance,
  #transcript .utt-body {
    scroll-margin-top: calc(30vh + 16px);
  }
  #transcript .utt-body:focus-within {
    box-shadow: inset 0 0 0 2px var(--accent);
  }
}

/* ---- Theme toggle ---- */
.theme-toggle {
  margin-left: auto;
  font-size: 1.05em;
  line-height: 1;
  padding: .25rem .5rem;
  min-width: 2rem;
}
/* When the editor's topbar already has a model badge with margin-left:auto,
   demote the theme toggle's auto-margin so both end up on the right edge. */
.topbar .topbar-model + .theme-toggle,
.topbar-model ~ .theme-toggle { margin-left: .35rem; }

/* ---- Mobile / narrow-viewport adjustments ---- */
@media (max-width: 600px) {
  main { padding: .9rem; }
  .topbar {
    flex-wrap: wrap;
    row-gap: .35rem;
    padding: .55rem .8rem;
    gap: .5rem;
  }
  .topbar-file {
    font-size: .9em;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-model { display: none; }
  .topbar-btn { padding: .4rem .55rem; font-size: .85em; }
  .theme-toggle { margin-left: auto; }

  .card { padding: .9rem 1rem; }
  h1 { font-size: 1.2rem; }
  h2 { font-size: 1.05rem; }

  .player-pane video { max-height: 35vh; }
  .transcript-pane { padding: .7rem .8rem; font-size: 16px; }
  #transcript .utterance { padding: .45rem .55rem; margin: 0 0 .3rem -.55rem; }

  .url-input-large { height: 46px; font-size: 1em; }
  .url-preview { padding: .65rem; gap: .65rem; }

  .sibling-toast {
    top: auto;
    bottom: 1rem;
    right: .8rem;
    left: .8rem;
    font-size: .9em;
  }
}

/* Touch devices: hover-to-reveal doesn't apply; expose delete affordances
   at low opacity so they're discoverable, and bump tap-target padding. */
@media (pointer: coarse) {
  .topbar-btn,
  .menu-popover button,
  .row-delete,
  .dropdown-delete {
    min-height: 32px;
    padding: .5rem .7rem;
  }
  .row-delete,
  .dropdown-delete { opacity: .55; }
  ul.recent-variants > li:hover .row-delete,
  .dropdown-item-row:hover .dropdown-delete { opacity: 1; }
}

/* =====================================================================
   Module 6: Billing — credit balance pill, pack picker, history table
   ===================================================================== */

/* Topbar balance pill. Lives between "Account" button and email; only
   rendered on HTML routes that called _page_context (so polling routes
   don't trigger the DB SUM). */
.topbar-pill {
  display: inline-flex;
  align-items: center;
  padding: .3rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--ink);
  font-size: .85em;
  font-weight: 500;
  text-decoration: none;
  margin-right: .35rem;
  transition: background .12s ease;
}
.topbar-pill:hover {
  background: var(--btn-hover-bg);
  text-decoration: none;
}

/* Anchor styled as a button. Existing convention is `button.primary`;
   this matches it for `<a>` links. */
.btn-link {
  display: inline-block;
  padding: .5rem .9rem;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--ink);
  border-radius: 5px;
  text-decoration: none;
  font: inherit;
}
.btn-link:hover {
  background: var(--btn-hover-bg);
  text-decoration: none;
}
.btn-link.primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-link.primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-sm);
}

/* Banner variants alongside the existing .banner / .banner-error. */
.banner-ok {
  background: var(--ok-bg, #e6f4ea);
  border-color: var(--ok-border, #b5d8c1);
  color: var(--ok-text, #1d6f3a);
}
.banner-info {
  background: var(--info-bg);
  border-color: var(--info-border);
  color: var(--ink);
}
.banner-warn {
  background: var(--warn-bg, #fff4d6);
  border-color: var(--warn-border, #e4ce8a);
  color: var(--warn-text, #6b4f0f);
}

/* /account credits section + /account/credits header card. */
.billing-summary .balance-large {
  font-size: 2rem;
  font-weight: 600;
  margin: .25rem 0 .6rem;
}
.billing-summary .balance-large .muted {
  font-weight: 400;
  margin-left: .35rem;
}
.billing-actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Module 9: per-page top action strip (e.g. "Back to dashboard" or
   "+ New transcription"). Sits above the h1 inside the card. */
.page-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
}

/* ---------- Module 9: public landing page (landing.html) ----------
   Brand-aligned (cream/forest light, near-black/cream dark, mint
   accent). No card outlines on the landing — sections breathe on
   the bg directly. */
.landing-hero {
  padding: 3rem 1rem 1rem;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.landing-headline {
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .8rem;
  color: var(--ink);
}
.landing-tagline {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--muted);
  margin: 0 auto 1.6rem;
  max-width: 580px;
  line-height: 1.5;
}
.landing-cta-row {
  margin: 0 0 1rem;
}
.landing-features {
  max-width: 1040px;
  margin: 2.5rem auto;
  padding: 0 1rem;
}
.landing-section-title {
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 1.4rem;
  color: var(--ink);
}
.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.landing-feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.landing-feature-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 .4rem;
  color: var(--ink);
}
.landing-feature-card p {
  margin: 0;
  line-height: 1.5;
}
.landing-pricing {
  max-width: 760px;
  margin: 2.5rem auto;
  padding: 0 1rem;
  text-align: center;
}
.landing-pricing-sub {
  margin: 0 auto 1.4rem;
  max-width: 540px;
}
.landing-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 540px;
  margin: 0 auto;
}
.landing-pack-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.4rem 1.1rem;
  text-align: center;
}
.landing-pack-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.landing-pack-credits {
  font-size: 1rem;
  color: var(--ink);
  margin-top: .4rem;
}
.landing-pack-per-min {
  margin-top: .3rem;
}
.landing-free-tier {
  margin-top: 1.4rem;
}
.landing-cta-quiet {
  text-align: center;
  margin: 2.5rem auto 4rem;
}

/* ---------- Module 9: account-page mutation forms ----------
   Used by the change-email form and the delete-account form on
   /app/account. */
.account-mutation-form {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: .8rem;
  max-width: 380px;
}
.account-mutation-form label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.account-mutation-form input[type="email"] {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--ink);
  border-radius: 6px;
}
.account-mutation-form button.primary,
.account-mutation-form button.danger {
  width: max-content;
}
button.danger,
.btn-link.danger {
  background: var(--input-bg);
  color: var(--error, #b03a3a);
  border: 1px solid var(--error, #b03a3a);
  padding: .55rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}
button.danger:hover:not(:disabled),
.btn-link.danger:hover {
  background: var(--error, #b03a3a);
  color: var(--card);
}
button.danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.account-danger h2 {
  color: var(--error, #b03a3a);
}

/* Pack picker grid: three tiles side-by-side on wide screens, stacked
   on narrow. */
.pack-picker .pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: .8rem 0;
}
@media (max-width: 640px) {
  .pack-picker .pack-grid {
    grid-template-columns: 1fr;
  }
}
.pack-tile {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem .9rem;
  background: var(--card-bg, transparent);
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-align: center;
}
.pack-tile h3 { margin: 0 0 .25rem; }
.pack-tile .pack-price { font-size: 1.6rem; font-weight: 600; margin: 0; }
.pack-tile .pack-credits { color: var(--muted); margin: 0; }
.pack-tile .pack-bonus {
  color: var(--accent);
  font-weight: 500;
  margin: 0;
}
.pack-tile button { margin-top: .5rem; }

/* Transaction history table. */
.tx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92em;
}
.tx-table th, .tx-table td {
  text-align: left;
  padding: .4rem .55rem;
  border-bottom: 1px solid var(--border);
}
.tx-table th.right, .tx-table td.right { text-align: right; }
.tx-table tr.tx-refund td { color: var(--muted); }
.tx-table tr.tx-adjustment td { font-style: italic; }