:root {
  --caption-size: 30px;
  --line-height: 1.5;
  --box-width: 60rem;
  --brand-primary: #2563eb;
  --brand-bg: #0b1020;
  --brand-text: #f8fafc;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body[data-theme="dark"] {
  --bg: #0b1020; --surface: #151c30; --text: #f8fafc; --muted: #a7b0c4; --accent: #7aa7ff;
  --partial: #c9d3e8; --border: #2a3450;
}
body[data-theme="light"] {
  --bg: #ffffff; --surface: #f1f4f9; --text: #0f172a; --muted: #475569; --accent: #1d4ed8;
  --partial: #334155; --border: #d5dbe6;
}
body[data-theme="high-contrast"] {
  --bg: #000000; --surface: #111111; --text: #ffff00; --muted: #ffffff; --accent: #00ffff;
  --partial: #ffffff; --border: #ffffff;
}
body[data-theme="sepia"] {
  --bg: #f4ecd8; --surface: #eadfc4; --text: #3b2f1e; --muted: #6b5a40; --accent: #8a4b12;
  --partial: #5a4a33; --border: #cdbf9f;
}
body[data-theme="brand"] {
  --bg: var(--brand-bg); --surface: color-mix(in srgb, var(--brand-bg) 85%, var(--brand-text));
  --text: var(--brand-text); --muted: color-mix(in srgb, var(--brand-text) 70%, var(--brand-bg));
  --accent: var(--brand-primary); --partial: color-mix(in srgb, var(--brand-text) 80%, var(--brand-bg));
  --border: color-mix(in srgb, var(--brand-text) 25%, var(--brand-bg));
}

body[data-font="serif"] { --font: Georgia, "Iowan Old Style", "Times New Roman", serif; }
body[data-font="rounded"] { --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif; }
body[data-font="mono"] { --font: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
body[data-font="hyperlegible"] { --font: "Atkinson Hyperlegible", Verdana, Tahoma, "Segoe UI", sans-serif; letter-spacing: 0.01em; }

body[data-width="narrow"] { --box-width: 36rem; }
body[data-width="medium"] { --box-width: 60rem; }
body[data-width="full"] { --box-width: 100%; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  -webkit-text-size-adjust: 100%;
}

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--surface); color: var(--text); padding: .5rem 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: max(env(safe-area-inset-top), .6rem) 1rem .6rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: 2;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand img { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
.brand-text { min-width: 0; }
.brand h1 { font-size: 1.05rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand p { font-size: .8rem; margin: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand p:empty { display: none; }
.top-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

.status {
  font-size: .8rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.status.live { color: #fff; background: #dc2626; border-color: #dc2626; }
.status.live::before { content: "● "; }

.icon-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; min-width: 44px; padding: 0 .8rem;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.announcement {
  margin: .75rem 1rem 0; padding: .75rem 1rem; border-radius: 12px;
  background: var(--accent); color: var(--bg); font-weight: 700; font-size: 1.1rem; text-align: center;
}
body[data-theme="high-contrast"] .announcement { color: #000; }

.captions {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 1rem 1rem 30vh;
  font-size: var(--caption-size);
  line-height: var(--line-height);
  scroll-behavior: smooth;
}
.captions:focus { outline: none; }
.lines, .captions > .partial { max-width: var(--box-width); margin-inline: auto; }

.welcome { color: var(--muted); font-size: max(1rem, calc(var(--caption-size) * .7)); text-align: center; margin-top: 2em; }
.welcome:empty { display: none; }

.line { margin: 0 0 .45em; overflow-wrap: anywhere; }
.line .translated-pending { opacity: .55; }
.line .lang-tag {
  display: inline-block; font-size: .5em; font-weight: 800; letter-spacing: .05em;
  vertical-align: middle; margin-right: .5em; padding: .1em .45em; border-radius: .4em;
  border: 1px solid var(--border); color: var(--muted);
}
.line .original { display: block; font-size: .62em; color: var(--muted); margin-top: .15em; }
.speaker {
  display: block; font-size: max(.8rem, .5em); font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; margin-top: .9em; margin-bottom: .1em;
  color: var(--spk, var(--accent));
}
.partial { color: var(--partial); font-style: italic; min-height: 1em; }
.partial:empty { display: none; }
.partial::after { content: " ▍"; animation: blink 1s steps(2) infinite; font-style: normal; }
@keyframes blink { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .partial::after { animation: none; }
  .captions { scroll-behavior: auto; }
}

body[data-mode="focus"] .captions { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 2rem; }
body[data-mode="focus"] .lines .line:not(.recent),
body[data-mode="focus"] .lines .speaker:not(.recent) { display: none; }

.jump {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 3.5rem);
  min-height: 48px; padding: 0 1.25rem; border-radius: 999px; border: none;
  background: var(--accent); color: var(--bg); font: inherit; font-weight: 800; font-size: 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); cursor: pointer; z-index: 3;
}

.bottom {
  padding: .4rem 1rem calc(env(safe-area-inset-bottom) + .4rem);
  font-size: .75rem; color: var(--muted); text-align: center; border-top: 1px solid var(--border);
}
.bottom:has(span:empty) { display: none; }

/* ---------- settings dialog ---------- */
.settings {
  width: min(32rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem);
  border: 1px solid var(--border); border-radius: 18px; padding: 0;
  background: var(--surface); color: var(--text); font-family: system-ui, sans-serif;
}
.settings::backdrop { background: rgba(0,0,0,.55); }
.settings form { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.settings-head { display: flex; align-items: center; justify-content: space-between; }
.settings h2 { font-size: 1.25rem; margin: 0; }
.field { display: flex; flex-direction: column; gap: .4rem; border: 0; padding: 0; margin: 0; font-weight: 600; }
.field legend { padding: 0; margin-bottom: .4rem; }
.field select, .stepper button {
  min-height: 44px; font: inherit; font-size: 1rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 0 .75rem;
}
.stepper { display: flex; align-items: center; gap: .6rem; }
.stepper input { flex: 1; accent-color: var(--accent); height: 44px; }
.stepper button { font-weight: 800; min-width: 52px; cursor: pointer; }
.swatches, .seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.swatches input, .seg input { position: absolute; opacity: 0; }
.sw, .seg span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border-radius: 10px;
  border: 2px solid var(--border); cursor: pointer; font-weight: 700;
}
.seg span { background: var(--bg); }
.sw-dark { background: #0b1020; color: #f8fafc; }
.sw-light { background: #fff; color: #0f172a; }
.sw-hc { background: #000; color: #ff0; }
.sw-sepia { background: #f4ecd8; color: #3b2f1e; }
.sw-brand { background: var(--brand-bg); color: var(--brand-text); }
.swatches input:checked + .sw, .seg input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.swatches input:focus-visible + .sw, .seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.toggle { display: flex; align-items: center; gap: .75rem; min-height: 44px; font-weight: 600; cursor: pointer; }
.toggle input { width: 24px; height: 24px; accent-color: var(--accent); }
.hint { font-size: .85rem; color: var(--muted); margin: 0; }
.link-btn { align-self: flex-start; background: none; border: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; padding: .5rem 0; }

@media (max-width: 480px) {
  .brand img { height: 32px; }
  .btn-label { display: none; }
}