/* MeetScribe — the meeting desk, in pine.
   Deep pine ink and green "glass" on quiet neutrals; one amber tally light for whatever is live right now
   (recording, the start button). Booth's system, with one change: Onest for text and headings (it has Cyrillic,
   Figtree and Bricolage don't), Bricolage Grotesque only in the wordmark, JetBrains Mono for timecodes. */

:root {
  --bg: #f4f7f6;
  --surface: #ffffff;
  --surface-2: #eef3f1;
  --soft: #e1e8e5;
  --text: #0f2620;
  --text-2: #34473f;
  --muted: #4c5e57;
  --dim: #8d9b95;
  --line: rgba(15, 38, 32, 0.08);
  --line-2: rgba(15, 38, 32, 0.14);

  /* brand scale: pine glass (400) to desk pine (700) */
  --brand-50: #e9f2ef;
  --brand-100: #d1e5de;
  --brand-300: #86b5a6;
  --brand-400: #2d6e5e;
  --brand-500: #23594c;
  --brand-700: #0f2620;
  --sky-400: #7db3a3;
  --sky-500: #4a8a79;
  /* the tally light, and a darker amber for amber text on light grounds */
  --orange: #f0a21b;
  --amber-ink: #8a5a00;
  --ok: #19a463;
  --warn: #d9480f;

  --grad: linear-gradient(0deg, var(--brand-700), var(--brand-700));
  --grad-deep: linear-gradient(160deg, #0f2620 0%, #173b33 100%);
  --display: "Onest", "Segoe UI", system-ui, sans-serif;

  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;

  --shadow-1: 0 1px 2px rgba(6, 22, 18, 0.04), 0 4px 16px rgba(6, 22, 18, 0.04);
  --shadow-2: 0 2px 6px rgba(6, 22, 18, 0.05), 0 18px 48px rgba(15, 38, 32, 0.10);

  --font: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Motion: one curve, three speeds. Hover and tints are quick; small pieces (menus, chips, errors)
     take a beat; anything that moves the layout (panels, heights, pages) takes the longest, so the eye
     can follow it. Exits are a bit faster than entrances. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-hover: 0.2s;
  --t-ui: 0.3s;
  --t-layout: 0.42s;
  --t-exit: 0.22s;
}

/* Large screens: the layout is drawn for about 1340 × 860 px, so on a 2K or 4K monitor everything
   would sit small in the middle. Zoom the whole page in steps, keeping at least 1340 × 860 of room.
   Viewport heights inside the zoomed page are divided by --z so they still match the window. */
:root { --z: 1; }
@media (min-width: 1800px) and (min-height: 1000px) { :root { --z: 1.15; } }
@media (min-width: 2200px) and (min-height: 1150px) { :root { --z: 1.3; } }
@media (min-width: 2500px) and (min-height: 1350px) { :root { --z: 1.5; } }
@media (min-width: 3000px) and (min-height: 1600px) { :root { --z: 1.75; } }
html { zoom: var(--z); scrollbar-gutter: stable; } /* a scrollbar appearing never shifts the page */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--brand-500); }
h1, h2, h3 { margin: 0; letter-spacing: -0.015em; font-family: var(--display); font-weight: 700; text-wrap: balance; }
h1 { font-size: 32px; line-height: 1.2; font-weight: 600; }
h2 { font-size: 26px; line-height: 1.25; font-weight: 600; }
h3 { font-size: 17px; line-height: 1.35; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-feature-settings: "zero" 0; }
.link { color: var(--brand-500); text-decoration: underline; text-underline-offset: 3px; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- ambient background ---------- */


.view { position: relative; z-index: 1; min-height: calc(100vh / var(--z)); }

/* ---------- reveal ---------- */

.reveal { animation: reveal 0.5s var(--ease) both; animation-delay: calc(var(--d, 0ms) * 0.7); }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- buttons ---------- */

.btn {
  --h: 44px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 20px; border: 0; border-radius: var(--r-sm);
  font: 500 15px/1 var(--font); color: var(--text); background: transparent; cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s, color 0.2s, opacity 0.2s;
  overflow: hidden; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.btn--lg { --h: 52px; font-size: 16px; padding: 0 24px; }
.btn--sm { --h: 34px; font-size: 13px; padding: 0 12px; border-radius: 10px; }
.btn--block { width: 100%; white-space: normal; height: auto; min-height: var(--h); padding-block: 10px; line-height: 1.2; }

.btn--primary { color: #fff; background: var(--grad); box-shadow: 0 6px 20px -6px rgba(45, 110, 94, 0.55); }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.16) 55%, transparent 75%);
}
.btn--primary:hover { box-shadow: 0 10px 28px -8px rgba(45, 110, 94, 0.75); transform: translateY(-1px); }
/* A soft, slow sheen once per hover. */
.btn--primary:hover::after { transform: translateX(110%); transition: transform 1.6s cubic-bezier(0.45, 0, 0.25, 1); }
.btn--primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn--primary:disabled::after { display: none; }

.btn--soft { background: var(--soft); }
.btn--soft:hover { background: #e4e4e8; }
.btn--ghost { background: transparent; border: 1px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--brand-300); color: var(--brand-500); background: var(--brand-50); }

.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::before {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff; animation: spin 0.7s linear infinite;
}
.btn--soft.is-loading::before { border-color: rgba(0, 0, 0, 0.15); border-top-color: var(--brand-500); }
.oauth-block { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.oauth-block .btn--primary { margin-top: 0; }
.g-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  border: 0; background: transparent; color: var(--text-2); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.icon-btn:hover { background: var(--soft); color: var(--text); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn--lg { width: 48px; height: 48px; border-radius: 50%; color: #fff; background: var(--text); }
.icon-btn--lg:hover { background: var(--brand-500); color: #fff; }

/* ---------- inputs ---------- */

.field {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(45, 110, 94, 0.12); }
.field-icon { color: var(--dim); display: grid; }
.field input { flex: 1; border: 0; outline: 0; font: 400 15px var(--font); background: transparent; color: var(--text); min-width: 0; }
.field input::placeholder { color: var(--dim); }

.select { position: relative; display: block; flex: 1; min-width: 0; }
.settings > .select { flex: none; } /* in the card's column it must keep its own height (and fold smoothly) */
.select-label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px 2px; }

/* language picker */
.lp { position: relative; }
.lp-btn {
  width: 100%; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
  font: 500 15px var(--font); cursor: pointer; text-align: left; transition: border-color 0.2s, box-shadow 0.2s;
}
.lp-btn:hover { border-color: var(--brand-300); }
.lp-btn:focus-visible, .lp.is-open .lp-btn { outline: 0; border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(45, 110, 94, 0.12); }
.lp-flag { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--soft); box-shadow: 0 0 0 1px var(--line); }
.lp-flag.is-missing { visibility: hidden; }
.lp-text { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; overflow: hidden; white-space: nowrap; }
.lp-text .lp-label { overflow: hidden; text-overflow: ellipsis; }
.lp-text .lp-native { display: none; }
.lp-chev { flex: none; color: var(--muted); transition: transform var(--t-ui) var(--ease); }
.lp.is-open .lp-chev { transform: rotate(180deg); }
.lp.bump .lp-btn .lp-flag { animation: pop-flag 0.4s var(--spring); }
@keyframes pop-flag { from { transform: scale(0.6); } }

.lp-pop {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: max(100%, 300px);
  padding: 8px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 2px 6px rgba(6, 22, 18, 0.06), 0 24px 56px rgba(15, 38, 32, 0.16);
  border: 1px solid var(--line); transform-origin: top left; animation: lp-in 0.28s var(--ease);
}
.lang-row .select:last-child .lp-pop { left: auto; right: 0; transform-origin: top right; }
.lp-pop { max-width: calc(100vw - 32px); }
.lp-pop.is-up { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; animation-name: lp-in-up; }
.lang-row .select:last-child .lp-pop.is-up { transform-origin: bottom right; }
@keyframes lp-in-up { from { opacity: 0; transform: translateY(6px) scale(0.97); } }
@keyframes lp-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.lp-search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: 6px;
  border-radius: 10px; background: var(--surface-2); color: var(--muted);
}
.lp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px var(--font); color: var(--text); }
.lp-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ced6df transparent; }
.lp-list li[data-code] {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  font-size: 14px; animation: lp-item 0.3s var(--ease) both; animation-delay: calc(var(--i) * 12ms);
}
@keyframes lp-item { from { opacity: 0; transform: translateX(-4px); } }
.lp-list li .lp-flag { width: 20px; height: 20px; }
.lp-list li .lp-label { font-weight: 500; white-space: nowrap; }
.lp-list li .lp-native { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-list li .lp-code { font-size: 11px; color: var(--dim); }
.lp-list li.is-active { background: var(--brand-50); }
.lp-list li[aria-selected="true"] .lp-label { color: var(--brand-500); }
.lp-list li[aria-selected="true"]::after {
  content: ""; width: 6px; height: 10px; margin: -3px 2px 0 0; border: solid var(--brand-500); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.lp-empty { padding: 16px 10px; color: var(--muted); font-size: 14px; text-align: center; }

/* voice picker */
.vp.is-locked .vp-btn { cursor: not-allowed; background: var(--surface-2); border-style: dashed; }
.vp.is-locked .vp-btn:hover { border-color: var(--line-2); }
.vp.is-locked .lp-chev { opacity: 0.3; }
.vp.is-locked .vp-avatar { background: var(--brand-400); }
.vp-row { display: flex; gap: 8px; }
.vp-row .vp-btn { flex: 1; min-width: 0; }
.vp-btn .lp-text { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
.vp-sub { font-size: 12px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vp-avatar, .vp-play {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-500); font-size: 12px; font-weight: 600;
}
.vp-btn .vp-avatar { background: var(--grad); color: #fff; }
.vp-play { border: 0; cursor: pointer; position: relative; transition: background 0.2s, color 0.2s, transform 0.2s var(--spring); }
.vp-play:hover { background: var(--grad); color: #fff; transform: scale(1.08); }
.vp-play--lg { width: 52px; height: 52px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-2); color: var(--brand-500); }
.vp-play--lg:hover { border-color: var(--brand-300); transform: none; }
.vp-play .eq { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.vp-play .eq i { width: 3px; border-radius: 2px; background: currentColor; animation: eqb 0.9s ease-in-out infinite; }
.vp-play .eq i:nth-child(2) { animation-delay: -0.3s; }
.vp-play .eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eqb { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.vp-play.is-playing { background: var(--grad); color: #fff; }
.vp-play.is-playing .i-play { display: none; }
.vp-play.is-playing .eq { display: flex; }
.vp-pop { width: max(100%, 360px); }
.vp-list { max-height: 340px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ced6df transparent; }
.vp-group { padding: 12px 10px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.vp-hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.vp-item {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 10px; cursor: pointer;
  animation: lp-item 0.3s var(--ease) both; animation-delay: calc(var(--i) * 12ms);
}
.vp-item:hover { background: var(--brand-50); }
.vp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.vp-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-meta { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-item .lp-code { font-size: 11px; color: var(--dim); }
.vp-item[aria-selected="true"] .vp-name { color: var(--brand-500); }
.vp-item[aria-selected="true"]::after {
  content: ""; flex: none; width: 6px; height: 10px; margin: -3px 4px 0 0; border: solid var(--brand-500); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.vp-more {
  width: 100%; margin-top: 6px; padding: 10px; border: 1px dashed var(--line-2); border-radius: 10px; background: transparent;
  font: 500 13px var(--font); color: var(--brand-500); cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.vp-more:hover { background: var(--brand-50); border-color: var(--brand-300); }

.switch { position: relative; flex: none; width: 44px; height: 26px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #d9d9de; transition: background 0.25s; }
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.35s var(--spring);
}
.switch input:checked + span { background: var(--orange); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--brand-400); outline-offset: 2px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); font-size: 14px; font-weight: 500;
}
.chip--brand { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px;
  background: var(--brand-50); color: var(--brand-500); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}

.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }

/* ============================================================
   SIGN IN
   ============================================================ */

.view--signin { display: grid; grid-template-columns: minmax(420px, 720px) 1fr; }
.signin-card {
  position: relative; margin: 8px; min-height: calc(100vh / var(--z) - 16px); padding: 40px 24px 28px;
  background: var(--surface); border-radius: var(--r-xl); display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--shadow-1); animation: reveal 0.6s var(--ease) both;
}
.signin-body { width: 100%; max-width: 360px; margin: auto 0; display: flex; flex-direction: column; gap: 16px; text-align: center; padding: 40px 0; }
.signin-body h1 { margin-bottom: -6px; }
.signin-body .btn--primary { margin-top: 18px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.keys summary { list-style: none; width: 100%; }
.keys summary::-webkit-details-marker { display: none; }
.keys[open] summary { background: transparent; color: var(--muted); height: 32px; font-size: 14px; }
.keys-form { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; text-align: left; }
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.form-error {
  padding: 12px 14px; border-radius: var(--r-sm); background: #fff1ec; color: var(--warn);
  font-size: 14px; text-align: left; animation: shake 0.45s var(--ease);
}
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.signin-foot { font-size: 13px; }

.signin-hero { display: flex; flex-direction: column; justify-content: center; }
.hero-sub { max-width: 460px; font-size: 16px; }

@keyframes floaty { 50% { transform: translateY(-6px); } }
@keyframes eq { 0%, 100% { height: 14%; opacity: 0.55; } 50% { height: 92%; opacity: 1; } }
@keyframes nudge { 50% { transform: translateX(4px); } }

.features { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 680px; }
.features li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.feat-ico { color: var(--brand-500); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); }

/* ============================================================
   APP
   ============================================================ */

.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  height: 64px; padding: 0 24px; background: rgba(242, 242, 242, 0.72); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent;
}
.topbar-spacer { flex: 1; }
/* Back from a run to the main screen, next to the logo; only while a run's screen is up. */
.topbar-home { gap: 6px; background: var(--surface-2); border-color: var(--line-2); font-weight: 600; flex: none; white-space: nowrap; }
.topbar-home[hidden] { display: none; }
/* On a phone the top bar has no room for words: a clear house icon in its own pill. */
@media (max-width: 640px) {
  .topbar-home { width: 40px; height: 36px; padding: 0; justify-content: center; border-radius: 10px; }
  .topbar-home span { display: none; }
  .topbar-home svg { width: 20px; height: 20px; }
}
.balance {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--text-2);
  white-space: nowrap; animation: reveal 0.5s var(--ease) both; min-width: 0; overflow: hidden;
}
.balance > span { overflow: hidden; text-overflow: ellipsis; }
/* Nothing in the top bar may widen the page: every item can shrink, the user block first. */
.topbar > * { min-width: 0; }
.user { min-width: 0; flex: 0 1 auto; }
html { overflow-x: clip; }
.balance svg { color: var(--brand-500); }
.balance-sub { color: var(--muted); font-weight: 400; }
.balance.is-low { background: #fff1ec; border-color: #ffd2c2; color: var(--warn); }
.balance.is-low svg { color: var(--warn); }
.user { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 4px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--grad); color: #fff; font-size: 12px; font-weight: 600;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-name { font-size: 14px; font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stage { max-width: 1320px; margin: 0 auto; padding: 24px 24px 48px; }

/* ---------- setup ---------- */

.setup-head { display: flex; flex-direction: column; }
.setup-grid { display: grid; align-items: stretch; }

.dropzone {
  --mx: 50%; --my: 50%;
  position: relative; place-items: center;
  outline: none; overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dropzone::before {
  content: ""; position: absolute; inset: 12px; border-radius: 18px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--brand-300) 50%, transparent 0) top / 14px 1.5px repeat-x,
    linear-gradient(90deg, var(--brand-300) 50%, transparent 0) bottom / 14px 1.5px repeat-x,
    linear-gradient(0deg, var(--brand-300) 50%, transparent 0) left / 1.5px 14px repeat-y,
    linear-gradient(0deg, var(--brand-300) 50%, transparent 0) right / 1.5px 14px repeat-y;
  opacity: 0.55; transition: opacity 0.3s;
}
.dropzone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(45, 110, 94, 0.10), transparent 70%);
}
.dropzone:hover::after, .dropzone:focus-visible::after { opacity: 1; }
.dropzone:hover::before { opacity: 0.9; animation: march 1s linear infinite; }
.dropzone.is-drag { transform: scale(1.01); box-shadow: var(--shadow-2); }
.dropzone.is-drag::before { opacity: 1; animation: march 0.5s linear infinite; }
.dropzone.is-drag .dz-icon { transform: translateY(-6px) scale(1.06); }
.dropzone.has-file::before { opacity: 0; animation: none; }
@keyframes march {
  to { background-position: 14px 0, -14px 100%, 0 -14px, 100% 14px; }
}
.dz-empty { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; width: min(480px, 100%); align-self: stretch; }
.dz-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; padding-bottom: 36px; animation: reveal 0.3s var(--ease) both; }
.dz-panel[hidden] { display: none; }
.dz-panel .dz-url, .dz-panel .dz-url-hint, .dz-panel .dz-url-error { width: 100%; max-width: none; }
.dz-src button[hidden] { display: none; } /* #dz-src-tab outside Chromium */
.dz-icon {
  width: 88px; height: 88px; border-radius: 26px; display: grid; place-items: center; margin-bottom: 6px;
  color: #fff; background: var(--grad); box-shadow: 0 16px 36px -12px rgba(45, 110, 94, 0.6);
  transition: transform 0.4s var(--spring);
}
.dz-icon svg { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }

.dz-url {
  display: flex; align-items: center; gap: 6px; width: min(460px, 100%); height: 44px; padding: 0 5px 0 12px; cursor: text;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); transition: border-color 0.2s, box-shadow 0.2s;
}
.dz-url:focus-within { border-color: var(--brand-400); box-shadow: 0 0 0 4px rgba(45, 110, 94, 0.12); }
.dz-url.is-error { border-color: #f3a58c; animation: shake 0.45s var(--ease); }
.dz-url-icon { display: grid; color: var(--dim); }
.dz-url input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 14px var(--font); color: var(--text); }
.dz-url .btn { flex: none; }
.dz-url-hint { max-width: 460px; font-size: 12px; }
.dz-url-error { max-width: 460px; padding: 10px 12px; border-radius: 10px; background: #fff1ec; color: var(--warn); font-size: 13px; text-align: left; animation: reveal 0.3s var(--ease) both; }
.dz-file { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; gap: 18px; animation: reveal 0.5s var(--ease) both; }
.dz-preview {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden;
  background: var(--grad-deep); display: grid; place-items: center;
}
.dz-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-audio-art { color: rgba(255, 255, 255, 0.85); }
.dz-duration {
  position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; backdrop-filter: blur(6px);
}
.dz-meta { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.dz-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-meta .btn { grid-row: 1 / 3; grid-column: 2; }

.settings { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.lang-row { display: flex; align-items: flex-end; gap: 8px; }
.swap {
  flex: none; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.swap:hover { border-color: var(--brand-300); color: var(--brand-500); }
.swap.spin svg { animation: swapspin 0.5s var(--ease); }
@keyframes swapspin { from { transform: rotate(-180deg); } }

.opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.adv { border-top: 1px solid var(--line); margin-top: -14px; }
.adv summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 0; list-style: none; cursor: pointer; user-select: none;
}
.adv summary::-webkit-details-marker { display: none; }
.adv-title { font-weight: 500; }
.adv-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.adv-chip { height: 22px; padding: 0 8px; border-radius: 7px; background: var(--brand-50); color: var(--brand-500); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; animation: pop-flag 0.35s var(--spring); }
.adv-chev { color: var(--muted); transition: transform 0.3s var(--ease); }
.adv[open] .adv-chev { transform: rotate(180deg); }
.adv[open]:not(.is-closing) .adv-chips { opacity: 0; }
.adv-chips { transition: opacity 0.25s; }
.adv.is-closing .adv-chev { transform: none; }
.adv-body { padding-bottom: 2px; }
.adv-body .opt:first-child { border-top: 0; padding-top: 0; }
.opt-title { font-weight: 500; }

/* ---------- live ---------- */

.stage--live { padding-top: 16px; padding-bottom: 24px; }
.live-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; height: calc(100vh / var(--z) - 64px - 40px); min-height: 600px; }
.player-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }

.player {
  position: relative; flex: 1; min-height: 280px; overflow: hidden; background: #06100d; border-radius: var(--r-lg);
  animation: reveal 0.6s var(--ease) both; box-shadow: var(--shadow-2);
}
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
}
.audio-only-art {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 15% 10%;
  background: radial-gradient(70% 90% at 20% 10%, rgba(125, 179, 163, 0.45), transparent 60%), var(--grad-deep);
}
.audio-only-art canvas { width: 100%; height: 60%; }

.player-top { position: absolute; z-index: 3; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; }
.status-pill, .lang-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 10px;
  background: rgba(6, 16, 13, 0.72); color: #fff; font-size: 13px; font-weight: 500;
}
.lang-pill { font-size: 12px; letter-spacing: 0.06em; }
.player-top-right { display: inline-flex; align-items: center; gap: 8px; }
.replay-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px;
  background: rgba(240, 162, 27, 0.95); color: #0f2620; font-size: 12.5px; font-weight: 500;
  animation: reveal 0.5s var(--ease) both;
}
.status-pill[data-state="replay"] .live-dot { background: var(--orange); }
.status-pill[data-state="replay"] .live-dot::after { animation: none; opacity: 0; }
.player.is-replay .progress-bar, .is-replay-controls .progress-bar { cursor: pointer; }
.progress-track { position: relative; padding: 6px 0; margin: -6px 0; }
.is-replay-controls .progress-track { cursor: pointer; touch-action: none; }
.is-replay-controls .progress-bar { transition: height var(--t-hover) var(--ease); }
.is-replay-controls .progress-track:hover .progress-bar { height: 8px; }
.progress-tip {
  position: absolute; bottom: calc(100% + 2px); transform: translateX(-50%); padding: 3px 7px; border-radius: 6px;
  background: var(--text); color: #fff; font-size: 11px; pointer-events: none; opacity: 0; transition: opacity var(--t-hover) var(--ease); white-space: nowrap;
}
.is-replay-controls .progress-track:hover .progress-tip { opacity: 1; }
.is-replay-controls #progress-play::after {
  content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(15, 38, 32, 0.3); opacity: 0; transition: opacity var(--t-hover) var(--ease);
}
.is-replay-controls .progress-track:hover #progress-play::after { opacity: 1; }
.progress-bar { overflow: visible; }
.is-replay-controls #progress-sent { background: var(--soft); }
.transcript.is-replay .tr-item { cursor: pointer; }
.transcript.is-replay .tr-item:hover { background: var(--surface-2); }
.tr-item.is-current { background: var(--brand-50); }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #f0a21b; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: pulse 1.6s infinite; will-change: transform, opacity; }
.status-pill[data-state="connecting"] .live-dot, .status-pill[data-state="buffering"] .live-dot, .status-pill[data-state="rebuffering"] .live-dot, .status-pill[data-state="finishing"] .live-dot { background: var(--sky-400); }
.status-pill[data-state="connecting"] .live-dot::after, .status-pill[data-state="buffering"] .live-dot::after, .status-pill[data-state="rebuffering"] .live-dot::after, .status-pill[data-state="finishing"] .live-dot::after { animation-name: pulse-blue; }
.status-pill[data-state="paused"] .live-dot { background: #ffcc00; }
.status-pill[data-state="paused"] .live-dot::after { animation: none; opacity: 0; }
.status-pill[data-state="done"] .live-dot { background: #34c759; }
.status-pill[data-state="done"] .live-dot::after { animation: none; opacity: 0; }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(3); opacity: 0; } }
@keyframes pulse-blue { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(3); opacity: 0; } }

/* warm-up overlay */
.warmup {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 40px;
  background: radial-gradient(60% 80% at 30% 20%, rgba(45, 110, 94, 0.55), transparent 70%), rgba(7, 8, 26, 0.86);
  color: #fff; transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.warmup.is-done { opacity: 0; visibility: hidden; }
.warmup-ring { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.warmup-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.warmup-ring circle { fill: none; stroke-width: 6; }
.ring-bg { stroke: rgba(255, 255, 255, 0.12); }
.ring-fg { stroke: var(--sky-400); stroke-linecap: round; stroke-dasharray: 80 400; transform-origin: center; animation: ringspin 1.4s linear infinite; }
.warmup:has(#warmup-count:not(:empty)) .ring-fg { animation: none; transition: stroke-dashoffset 0.15s linear; }
@keyframes ringspin { to { transform: rotate(360deg); } }
#warmup-count { font-size: 38px; font-weight: 500; }
.warmup-note { min-height: 18px; margin: 2px 0 0 34px; font-size: 12px; color: var(--sky-400); }
.warmup-note.is-call {
  margin-left: 0; padding: 12px 16px; border-radius: 12px; font: 600 15px var(--font); color: #fff;
  background: var(--grad); box-shadow: 0 10px 28px -10px rgba(45, 110, 94, 0.7); animation: callpulse 1.6s ease-in-out infinite;
}
@keyframes callpulse { 50% { transform: scale(1.03); } }
.warmup-logo { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: 0.75; } }
.warmup-steps { display: flex; flex-direction: column; gap: 14px; }
.wstep { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, 0.4); transition: color 0.4s; }
.wstep i { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.25); transition: border-color 0.4s var(--ease), background 0.4s var(--ease); }
.wstep.is-active { color: #fff; }
.wstep.is-active i { border-color: var(--sky-400); border-top-color: transparent; animation: spin 0.8s linear infinite; }
.wstep.is-done { color: rgba(255, 255, 255, 0.85); }
.wstep.is-done i { border-color: transparent; background: var(--grad); }
.wstep.is-done i::after {
  content: ""; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg); animation: pop 0.35s var(--spring);
}
@keyframes pop { from { transform: rotate(45deg) scale(0); } }

/* subtitles */
.subtitle {
  position: absolute; z-index: 3; left: 6%; right: 6%; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); pointer-events: none;
}
.subtitle.is-visible { opacity: 1; transform: none; }
.subtitle-src { color: rgba(255, 255, 255, 0.78); font-size: 15px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); max-width: min(100%, 60em); }
.subtitle-src:empty, .subtitle-dst:empty { display: none; }
.subtitle-dst {
  /* ≈ 50 characters a line: grows with the font, so in full screen it spans most of the picture */
  max-width: min(100%, 50em); padding: 8px 16px; border-radius: 12px; background: rgba(8, 10, 20, 0.74);
  color: #fff; font-size: clamp(17px, 1.7vw, 24px); font-weight: 500; line-height: 1.35; box-decoration-break: clone;
}
.w { display: inline-block; opacity: 0; transform: translateY(6px); }
.is-in .w, .tr-dst .w { animation: word 0.45s var(--ease) forwards; animation-delay: calc(var(--i) * 28ms); }
@keyframes word { to { opacity: 1; transform: none; } }

/* controls */
.controls { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: var(--r-md); animation: reveal 0.6s var(--ease) both; animation-delay: 80ms; }
#btn-play .i-play { display: none; }
#btn-play.is-paused .i-play { display: block; }
#btn-play.is-paused .i-pause { display: none; }
.progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.progress-bar { position: relative; height: 6px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.progress-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transition: width 0.25s linear; }
#progress-sent { background: var(--brand-100); }
#progress-play { background: var(--brand-400); }
.progress-time { display: flex; justify-content: space-between; color: var(--muted); }

.mix { position: relative; display: inline-flex; padding: 3px; border-radius: 12px; background: var(--soft); }
.seg {
  position: relative; z-index: 1; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent;
  font: 500 13.5px var(--font); color: var(--muted); cursor: pointer; transition: color 0.25s; min-width: 98px;
}
.seg.is-active { color: var(--text); }
.seg-glider {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px; background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); transition: transform 0.4s var(--spring);
}
.mix[data-mix="dub"] .seg-glider { transform: translateX(100%); }

.meters { display: grid; grid-template-columns: 1fr 1fr 130px 130px; gap: 14px; animation: reveal 0.6s var(--ease) both; animation-delay: 140ms; }
.meter { padding: 12px 14px; border-radius: var(--r-md); display: flex; flex-direction: column; gap: 8px; }
.meter-head { display: flex; justify-content: space-between; align-items: center; }
.meter canvas { width: 100%; height: 34px; display: block; }
.stat { justify-content: space-between; }
.vol { display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
.vol svg { flex: none; transition: color 0.2s; }
.vol:hover svg { color: var(--brand-500); }
.vol.is-muted .vol-wave { opacity: 0.2; }
.vol-val { width: 34px; text-align: right; color: var(--text-2); }
.vol input {
  --p: 50%;
  flex: 1; min-width: 0; height: 18px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
}
.vol input::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--brand-400), var(--sky-400)) 0 / var(--p) 100% no-repeat, var(--soft); }
.vol input::-moz-range-track { height: 4px; border-radius: 99px; background: var(--soft); }
.vol input::-moz-range-progress { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--brand-400), var(--sky-400)); }
.vol input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(15, 38, 32, 0.25); transition: transform 0.2s var(--spring);
}
.vol input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 2px 6px rgba(15, 38, 32, 0.25); }
.vol input:hover::-webkit-slider-thumb, .vol input:active::-webkit-slider-thumb { transform: scale(1.25); }
.vol input:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; border-radius: 4px; }
.stat-val { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }

/* transcript */
.transcript { display: flex; flex-direction: column; min-height: 0; overflow: hidden; animation: reveal 0.6s var(--ease) both; animation-delay: 120ms; }
.transcript-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 18px 12px; border-bottom: 1px solid var(--line); }
.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--soft); }
.tab { height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; font: 500 12.5px var(--font); color: var(--muted); cursor: pointer; transition: color var(--t-hover), background var(--t-hover), box-shadow var(--t-hover); }
.tab.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

.transcript-body { position: relative; flex: 1; overflow-y: auto; padding: 8px 10px 20px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #ced6df transparent; }
.transcript-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }

.tr-item {
  position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 8px; row-gap: 4px;
  padding: 12px 10px; border-radius: 14px; animation: slidein 0.5s var(--ease) both;
}
.tr-item.flash { animation: slidein 0.5s var(--ease) both, flash 1.6s var(--ease); }
@keyframes slidein { from { opacity: 0; transform: translateY(10px); } }
@keyframes flash { 0% { background: var(--brand-50); } 100% { background: transparent; } }
.tr-time { grid-row: 1 / 3; padding-top: 2px; font-size: 11.5px; color: var(--dim); }
.tr-src { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.tr-dst { font-size: 15.5px; color: var(--text); font-weight: 500; line-height: 1.45; min-height: 22px; }
.tr-item:not(.has-dst) .tr-dst { opacity: 0.8; }
.is-partial {
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--brand-300) 50%, var(--muted) 60%, var(--muted) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 1.8s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* A translation still being rebuilt (real time): muted until the confirmed one locks it in. */
.is-partial-dst { color: var(--muted); font-weight: 500; }
.is-partial-dst .w { opacity: 1; transform: none; animation: none; }
.is-partial-dst .w-shift { animation: shuffle 0.28s var(--ease) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes shuffle { from { opacity: 0.15; filter: blur(2px); transform: translateY(3px); } to { opacity: 1; filter: none; transform: none; } }
.subtitle-dst.is-partial-dst { color: rgba(255, 255, 255, 0.72); }
@media (prefers-reduced-motion: reduce) { .is-partial-dst .w-shift { animation: none; } }

.transcript-body[data-view="dst"] .tr-src { display: none; }
.transcript-body[data-view="src"] .tr-dst { display: none; }
.transcript-body[data-view="src"] .tr-src { color: var(--text); font-size: 15px; }

.typing { display: inline-flex; gap: 4px; align-items: center; height: 22px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-300); animation: dot 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

.transcript-foot { padding: 12px 14px; border-top: 1px solid var(--line); }
.dl { display: flex; flex-wrap: wrap; gap: 6px; }

/* done sheet */
.done-sheet {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; place-items: safe center; padding: 16px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(242, 242, 242, 0.55); backdrop-filter: blur(10px); animation: fade 0.4s var(--ease) both;
}
@keyframes fade { from { opacity: 0; } }
.done-card {
  width: min(480px, 100%); padding: 36px 32px 28px; border-radius: var(--r-xl); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: var(--shadow-2);
  animation: popin 0.55s var(--spring) both;
}
@keyframes popin { from { opacity: 0; transform: scale(0.92) translateY(10px); } }
.done-check { width: 72px; height: 72px; margin-bottom: 6px; }
.done-check svg { width: 100%; height: 100%; }
.done-check circle { fill: none; stroke: var(--brand-400); stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 0.7s var(--ease) 0.15s forwards; }
.done-check path { fill: none; stroke: var(--brand-400); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.45s var(--ease) 0.7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* rewind during live */
.player-top-left { display: inline-flex; align-items: center; gap: 8px; }
.golive {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer;
  background: #f0a21b; color: #0f2620; font: 600 13px var(--font); box-shadow: 0 6px 18px -6px rgba(240, 162, 27, 0.7);
  animation: reveal 0.4s var(--ease) both; transition: transform 0.2s var(--spring);
}
.golive:hover { transform: scale(1.04); }
.golive .live-dot { background: #fff; }
.status-pill[data-state="timeshift"] .live-dot { background: var(--orange); }
.status-pill[data-state="timeshift"] .live-dot::after { animation: none; opacity: 0; }
#progress-live {
  position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #f0a21b;
  box-shadow: 0 0 0 3px rgba(240, 162, 27, 0.25); pointer-events: none;
}
.is-live-seekable .progress-track { cursor: pointer; touch-action: none; }
.is-live-seekable .progress-track:hover .progress-bar { height: 8px; }
.is-live-seekable .progress-track:hover .progress-tip { opacity: 1; }
.transcript { position: relative; }
.tr-live {
  position: absolute; z-index: 5; left: 50%; bottom: 72px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--text); color: #fff; font: 500 13px var(--font); box-shadow: 0 10px 28px -8px rgba(6, 22, 18, 0.5);
  animation: trlive 0.35s var(--spring) both;
}
.tr-live:hover { background: var(--brand-500); }
@keyframes trlive { from { opacity: 0; transform: translate(-50%, 10px) scale(0.92); } }

/* speakers */
.spk-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.spk-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--soft); }
.spk { height: 26px; min-width: 36px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; font: 500 12.5px var(--font); color: var(--muted); cursor: pointer; transition: color var(--t-hover), background var(--t-hover), box-shadow var(--t-hover); }
.spk.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

.field-eye { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--dim); cursor: pointer; }
.field-eye:hover, .field-eye.is-on { color: var(--brand-500); background: var(--brand-50); }
a.btn { text-decoration: none; }
a.btn:hover { color: inherit; }

/* export */
.export-card { text-align: left; align-items: stretch; width: min(520px, 100%); }
.export-card h2, .export-card > p { text-align: center; }
.export-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.xopt {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px;
  cursor: pointer; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.xopt:hover { border-color: var(--brand-300); }
.xopt input { position: absolute; opacity: 0; pointer-events: none; }
.xopt:has(input:checked) { border-color: var(--brand-400); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(45, 110, 94, 0.12); }
.xopt:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.xopt-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--soft); color: var(--brand-500); transition: background 0.2s, color 0.2s; }
.xopt:has(input:checked) .xopt-ico { background: var(--grad); color: #fff; }
.xopt-text { display: flex; flex-direction: column; line-height: 1.35; }
.xopt-text b { font-weight: 500; }
.xprogress { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; animation: reveal 0.35s var(--ease) both; }
.xprogress-label { display: flex; justify-content: space-between; font-size: 13.5px; }
.xprogress .progress-bar { height: 8px; }
#xbar { background: var(--brand-400); }
#xbar.is-indeterminate { width: 30% !important; animation: indet 1.2s ease-in-out infinite; }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.export-card .done-actions { justify-content: flex-end; }

/* still-watching */
.still-ring { position: relative; width: 84px; height: 84px; display: grid; place-items: center; margin-bottom: 4px; }
.still-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.still-ring circle { fill: none; stroke-width: 7; }
.still-ring .ring-bg { stroke: var(--soft); }
.still-fg { stroke: var(--brand-400); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.still-ring span { font-size: 22px; font-weight: 500; }
#file-duration.is-live { background: #f0a21b; color: #0f2620; }

/* exits */
.lp-pop.is-leaving { animation: lp-out var(--t-exit) var(--ease-in) forwards; pointer-events: none; }
@keyframes lp-out { to { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.done-sheet.is-leaving { animation: fade-out 0.22s ease-in forwards; pointer-events: none; }
.done-sheet.is-leaving .done-card { animation: pop-out 0.22s ease-in forwards; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-out { to { opacity: 0; transform: scale(0.96) translateY(6px); } }

/* skeletons */
.skel {
  border-radius: var(--r-sm); color: transparent !important;
  background: linear-gradient(90deg, #e6ebf1 0%, #f2f5f8 40%, #e6ebf1 80%) 0 0 / 200% 100%;
  animation: skel 1.3s ease-in-out infinite;
}
@keyframes skel { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.skel-row { height: 44px; border-radius: 12px; }
.skel-row + .skel-row { margin-top: 6px; }

.select > select { display: none; } /* the language pickers stand in for the native selects */
.lp-skel { height: 52px; }
.user.is-loading .user-name { color: transparent; border-radius: 6px; background: linear-gradient(90deg, #e6ebf1, #f2f5f8, #e6ebf1) 0 0 / 200% 100%; animation: skel 1.3s ease-in-out infinite; }
.user.is-loading .avatar { background: #e6ebf1; color: transparent; }
.balance.is-loading span { color: transparent; border-radius: 6px; background: linear-gradient(90deg, #e6ebf1, #f2f5f8, #e6ebf1) 0 0 / 200% 100%; animation: skel 1.3s ease-in-out infinite; }
.dz-preview.is-loading::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%) 0 0 / 200% 100%;
  animation: skel 1.1s ease-in-out infinite;
}
.vp-play.is-loading .i-play, .vp-play.is-loading .eq { display: none; }
.vp-play.is-loading::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }

/* toast */
.toast {
  position: fixed; z-index: 100; left: 50%; bottom: 24px; max-width: min(560px, calc(100vw / var(--z) - 32px));
  padding: 12px 18px; border-radius: 14px; background: var(--text); color: #fff; font-size: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); transform: translate(-50%, 20px); opacity: 0;
  transition: transform 0.35s var(--spring), opacity 0.25s;
}
.toast.is-in { transform: translate(-50%, 0); opacity: 1; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1100px) {
  .view--signin { grid-template-columns: 1fr; }
  .signin-card { min-height: auto; }
  .live-grid { grid-template-columns: 1fr; height: auto; }
  .player { min-height: 0; aspect-ratio: 16 / 9; flex: none; }
  .transcript { height: 520px; }
}

@media (max-width: 820px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meters { grid-template-columns: 1fr 1fr; }
  .controls { flex-wrap: wrap; }
  .progress { order: 3; flex-basis: 100%; }
  .user-name, .tag { display: none; }
  .topbar { padding: 0 12px; gap: 8px; }
  .balance { padding: 0 9px; }
  .signin-card { margin: 6px; padding: 28px 14px 22px; }
  .stage { padding-left: 16px; padding-right: 16px; }
  .warmup { flex-direction: column; gap: 20px; }
  .lang-row { flex-direction: column; align-items: stretch; }
  .lang-row .select { width: 100%; }
  .swap { align-self: center; margin: 0; transform: rotate(90deg); }
  .warmup-ring { width: 84px; height: 84px; }
  #warmup-count { font-size: 28px; }
  .wstep { font-size: 13px; }
}

@media (max-width: 520px) {
  .topbar .logo img + img { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* Loading indicators keep telling that something is going on — slowly, without travel. */
  .btn.is-loading::before, .wstep.is-active i, .ring-fg, .vp-play.is-loading::after { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* Something that just appeared because the layout changed (see smoothLayout in ui.js). */
.fade-in { animation: appear var(--t-layout) var(--ease) both; }
@keyframes appear { from { opacity: 0; } }

/* Exits for things that animate in (hidden through leave() in ui.js). */
.replay-pill.is-leaving, #tr-live.is-leaving, #btn-golive.is-leaving, .dz-url-error.is-leaving, .xprogress.is-leaving {
  animation: fade-down var(--t-exit) var(--ease-in) forwards; pointer-events: none;
}
@keyframes fade-down { to { opacity: 0; transform: translateY(6px); } }

/* ---------- accounts (email + password) ---------- */
.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: var(--soft); margin-top: 6px; }
.auth-tab {
  position: relative; z-index: 1; height: 38px; border: 0; background: transparent; border-radius: 9px;
  font: 500 14px var(--font); color: var(--muted); cursor: pointer; transition: color 0.25s;
}
.auth-tab.is-active { color: var(--text); }
.auth-glider {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px; background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); transition: transform 0.4s var(--spring);
}
.auth-tabs[data-mode="register"] .auth-glider { transform: translateX(100%); }
.auth-form .btn--primary { margin-top: 6px; }
.balance-sub { color: var(--muted); font-weight: 400; }

/* ---------- Booth wordmark ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.wordmark { font-family: "Bricolage Grotesque", var(--display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.045em; }
.logo--lg .wordmark { font-size: 34px; }
.logo:hover { color: var(--text); }
/* the start button carries the tally light */
#btn-start svg { color: var(--orange); }

/* ---------- sign-in extras, top bar links ---------- */
.btn--google { gap: 10px; text-decoration: none; color: var(--text); }
.oauth-block { display: flex; flex-direction: column; gap: 14px; }
.site-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.site-links a { color: var(--muted); text-decoration: none; }
.site-links a:hover { color: var(--brand-400); text-decoration: underline; }
.topbar-link { font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; padding: 8px 10px; border-radius: 10px; }
.topbar-link:hover { background: var(--surface); color: var(--brand-400); }

/* ---------- account sheet, reset ---------- */
.user[role="button"] { cursor: pointer; }
.account-card { max-width: 440px; text-align: left; align-items: stretch; gap: 14px; }
.account-card h2 { text-align: left; }
.account-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.account-rows > div { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; }
.account-rows b { font-size: 17px; color: var(--text); }
.account-danger { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.account-danger summary { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--warn); font-weight: 600; font-size: 14px; list-style: none; }
.account-danger summary::-webkit-details-marker { display: none; }
.account-danger summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-ui) var(--ease); }
.account-danger[open]:not(.is-closing) summary::after { transform: translateY(1px) rotate(225deg); }
.account-danger[open] { gap: 10px; }
.account-danger-body { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.btn--danger { color: #9a3412; }
.btn--danger:not(:disabled):hover { background: #fde4dc; }
.auth-forgot { text-align: center; }
.free-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; margin-left: 8px; border-radius: 99px; background: var(--orange); color: var(--brand-700); font-size: 12px; font-weight: 700; }

/* ---------- subtitles / AI dubbing choice ---------- */
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-card {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 13px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--surface); color: var(--text);
  font: inherit; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.mode-card:hover { border-color: var(--brand-300); }
.mode-card:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.mode-card.is-active { border-color: var(--brand-700); background: var(--brand-50); box-shadow: 0 0 0 3px rgba(15, 38, 32, 0.06); }
.mode-head { display: flex; align-items: center; gap: 8px; }
.mode-head b { font-size: 15.5px; white-space: nowrap; }
.mode-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--soft); color: var(--brand-400); flex: none; }
.mode-card.is-active .mode-ico { background: var(--brand-700); color: var(--orange); }
.mode-desc { font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 520px) { .mode-pick { grid-template-columns: 1fr; } }

/* ---------- share a tab ---------- */
.dz-tab #tab-hint { font-size: 12px; }
.tab-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.tab-mode { position: relative; cursor: pointer; display: flex; }
.tab-mode input { position: absolute; opacity: 0; pointer-events: none; }
.tab-mode span {
  flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); transition: border-color 0.2s, background 0.2s;
}
.tab-mode b { font-weight: 600; font-size: 14px; }
.tab-mode small { font-size: 12px; line-height: 1.4; color: var(--muted); }
.tab-mode:hover span { border-color: var(--brand-300); }
.tab-mode input:checked + span { border-color: var(--brand-500); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-500); }
.tab-mode input:focus-visible + span { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ---------- wide view: the player across the page, one row of controls under it ---------- */
.wide-btn .i-narrow { display: none; }
.is-wide .wide-btn .i-wide { display: none; }
.is-wide .wide-btn .i-narrow { display: block; }
.wide-btn[aria-pressed="true"] { color: var(--brand-400); background: var(--brand-50); }
.is-wide .live-grid { grid-template-columns: minmax(0, 1fr); }
.is-wide .transcript, .is-wide .meters .stat { display: none; }
.is-wide .player-col { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; }
.is-wide .player { grid-column: 1 / -1; min-height: 0; }
.is-wide .controls { grid-column: 1; }
.is-wide .meters { grid-column: 2; grid-template-columns: repeat(2, 220px); gap: 10px; animation: none; }
.is-wide .meter { padding: 8px 12px; gap: 4px; justify-content: center; }
.is-wide .meter canvas { height: 18px; }

/* ---------- subtitles only: no translated voice to mix or turn up ---------- */
.is-subs .mix, .is-subs .meter--dst { display: none; }
.is-subs .meters { grid-template-columns: 1fr 130px 130px; }
.is-subs.is-wide .meters { grid-template-columns: 220px; }

@media (max-width: 1100px) {
  .is-wide .player-col { grid-template-columns: minmax(0, 1fr); }
  .is-wide .controls, .is-wide .meters { grid-column: 1; }
  .is-wide .meters { grid-template-columns: 1fr 1fr; }
}

/* ---------- full screen: the player (video + subtitles) fills the screen, controls float over it ---------- */
.fs-btn .i-fs-off { display: none; }
.player.is-fs .fs-btn .i-fs-on { display: none; }
.player.is-fs .fs-btn .i-fs-off { display: block; }
.player:fullscreen { width: calc(100vw / var(--z)); height: calc(100vh / var(--z)); border-radius: 0; box-shadow: none; animation: none; }
.player.is-fs .controls {
  position: absolute; z-index: 5; left: 24px; right: 24px; bottom: 20px; animation: none;
  background: rgba(10, 21, 38, 0.9); color: #e1e8e5; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.player.is-fs .controls .progress-time, .player.is-fs .controls .icon-btn:not(.icon-btn--lg) { color: #e1e8e5; }
.player.is-fs .controls .icon-btn:not(.icon-btn--lg):hover { background: rgba(255, 255, 255, 0.12); }
.player.is-fs .controls .mix { background: rgba(255, 255, 255, 0.12); }
.player.is-fs .controls .seg { color: #b9c6d6; }
.player.is-fs .controls .seg.is-active { color: var(--text); }
.player.is-fs .controls .wide-btn { display: none; }
.player.is-fs .subtitle { bottom: 112px; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), bottom 0.3s var(--ease); }
.player.is-fs .subtitle-dst { font-size: clamp(22px, 2.2vw, 40px); }
.player.is-fs .subtitle-src { font-size: clamp(15px, 1.3vw, 24px); }
.player.is-fs.is-idle { cursor: none; }
.player.is-fs.is-idle .controls { opacity: 0; transform: translateY(12px); pointer-events: none; }
.player.is-fs.is-idle .subtitle { bottom: 48px; }

/* First-visit tips: hand-drawn notes that walk a newcomer through the setup without getting in the way
   (no dialogs). They go away by themselves after two translations, or with "hide tips". */
/* The hand-written tips: Caveat in four pieces, each fetched only for the letters a page uses (the Latin
   piece alone left Cyrillic and Polish tips in a fallback font). */
@font-face { font-family: "Caveat"; src: url("../assets/fonts/caveat-600-cyrillic-ext.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Caveat"; src: url("../assets/fonts/caveat-600-cyrillic.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Caveat"; src: url("../assets/fonts/caveat-600-latin-ext.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat"; src: url("../assets/fonts/caveat-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.doodle {
  display: inline-flex; align-items: flex-end; gap: 4px; pointer-events: none; color: var(--brand-400);
  font: 600 25px/1 "Caveat", "Comic Sans MS", cursive; white-space: nowrap; transition: opacity 0.3s, color 0.3s;
}
.doodle-arrow { flex: none; width: auto; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.doodle-x {
  pointer-events: auto; align-self: center; margin-left: 10px; padding: 2px 6px; border: 0; border-radius: 6px; background: none;
  font: 500 11.5px var(--font); color: var(--dim); cursor: pointer; text-decoration: underline dotted;
}
.doodle-x:hover { color: var(--text); }
.dz-src-wrap { position: relative; }
.doodle--1 { position: absolute; top: calc(100% + 2px); left: 34%; transform: rotate(-3deg); }
.doodle--1 span { margin-bottom: -6px; }
.settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-height: 30px; }
.doodle--2 { transform: rotate(2deg) translateY(4px); margin-right: 30%; }
.doodle--2 .doodle-arrow { transform: scaleX(-1) translateY(10px); }
.doodle--2 span { margin-bottom: 14px; }
.doodle--start { align-self: flex-end; margin: -8px 18px -10px 0; transform: rotate(-3deg); }
.doodle--3 span { margin-bottom: 18px; }
.no-tips .doodle { display: none; }
@media (max-width: 720px) { .doodle { display: none; } }

/* Interface language: the page stays hidden for a moment until it's translated (see i18n-boot.js). */
html.i18n-wait body, html.fonts-wait body { visibility: hidden; }
.lang-switch { position: relative; display: inline-flex; vertical-align: middle; }
.ls-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 9px 0 7px; border: 1px solid transparent; border-radius: 9px;
  background: none; cursor: pointer; font: 500 13px var(--font); color: var(--muted); transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ls-btn:hover, .ls-btn[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }
.ls-flag { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.ls-badge { display: inline-grid; place-items: center; font: 700 8.5px var(--font); letter-spacing: 0.02em; color: #fff; background: var(--brand-400); }
.ls-chev { width: 12px; height: 12px; opacity: 0.6; transition: transform var(--t-ui) var(--ease); }
.ls-btn[aria-expanded="true"] .ls-chev { transform: rotate(180deg); }
.ls-menu {
  position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; min-width: 180px; padding: 6px; display: grid; gap: 2px;
  border-radius: 12px; background: var(--surface); box-shadow: 0 2px 6px rgba(6, 22, 18, 0.06), 0 18px 44px rgba(15, 38, 32, 0.16);
  transform-origin: top right; animation: lp-in 0.28s var(--ease);
}
.ls-menu.is-leaving { animation: lp-out var(--t-exit) var(--ease-in) forwards; pointer-events: none; }
.lang-switch.is-up .ls-menu { transform-origin: bottom center; animation-name: lp-in-up; }
.lang-switch.is-up .ls-menu { top: auto; bottom: calc(100% + 6px); }
.signin-foot .ls-menu, .site-foot .ls-menu { right: auto; left: 50%; translate: -50% 0; }
.lang-switch.is-left .ls-menu { right: auto; left: 0; translate: 0 0; transform-origin: top left; }
.lang-switch.is-left.is-up .ls-menu { transform-origin: bottom left; }
.ls-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: 500 14px var(--font); color: var(--text); text-align: left;
}
.ls-item:hover, .ls-item:focus-visible { background: var(--surface-2); outline: none; }
.ls-item[aria-selected="true"] { color: var(--brand-500); background: var(--brand-50); }
.site-links { align-items: center; }
#btn-pip[aria-pressed="true"] { color: var(--brand-400); }

/* Phones: the top bar keeps only what fits — logo, language (flag only), balance, account. Pricing and
   admin stay reachable from the account menu and the sign-in page. */
@media (max-width: 640px) {
  .topbar .topbar-link { display: none; }
  .topbar .ls-btn > span:not(.ls-flag) { display: none; }
  .topbar .balance-sub { display: none; }
  .topbar .wordmark { display: none; }
  .ls-menu { right: 0; left: auto; translate: 0 0; }
}

/* ---------- Setup screen: what (source cards) → its details → how → summary with the one action ---------- */
.stage--setup { max-width: 1120px; padding-top: 18px; padding-bottom: 16px; }
.eyebrow { font: 500 13px var(--mono); color: var(--brand-400); letter-spacing: 0.04em; text-transform: uppercase; }
.stage--setup .setup-head { text-align: left; max-width: none; margin: 0 0 14px; gap: 4px; }
.stage--setup .setup-head h1 { font-size: 34px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; }

.dz-src.src-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.dz-src .src-card {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px;
  border: 2px solid var(--soft); border-radius: 20px; background: var(--surface); text-align: left; font: inherit; color: var(--text); cursor: pointer;
  transition: border-color var(--t-ui) var(--ease), box-shadow var(--t-ui) var(--ease), transform var(--t-hover) var(--ease);
}
.dz-src .src-card:hover { border-color: var(--brand-300); transform: translateY(-1px); }
.dz-src .src-card[aria-selected="true"] { border-color: var(--brand-400); background: var(--surface); box-shadow: 0 12px 32px -16px rgba(45, 110, 94, 0.45); }
.src-ico { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-400); transition: background var(--t-ui) var(--ease), color var(--t-ui) var(--ease); }
.src-card[aria-selected="true"] .src-ico { background: var(--brand-400); color: #fff; }
.src-card b { font-size: 17px; font-weight: 700; align-self: end; }
.src-desc { font-size: 13px; line-height: 1.35; color: var(--muted); align-self: start; }
.src-chip { position: absolute; top: 10px; right: 12px; padding: 2px 8px; font-size: 11px !important; border-radius: 999px; background: #fff3dc; color: var(--amber-ink); font-size: 12px; font-weight: 600; }

/* The chosen source's details: a drop row for files, the link field, the tab modes, or the picked file. */
.stage--setup .dropzone { min-height: 0; display: block; margin: 12px 0 14px; padding: 12px 14px; cursor: default; }
.stage--setup .dropzone:not(:has(.dz-panel--file:not([hidden])))::before,
.stage--setup .dropzone:not(:has(.dz-panel--file:not([hidden])))::after { display: none; }
.stage--setup .dropzone:has(.dz-panel--file:not([hidden])) { cursor: pointer; }
.stage--setup .dz-empty { width: 100%; align-items: stretch; text-align: left; gap: 0; }
.stage--setup .dz-panel { padding: 0; align-items: stretch; justify-content: flex-start; gap: 10px; }
.dz-panel--file { flex-direction: row; align-items: center !important; gap: 16px !important; padding: 6px 10px !important; }
.dz-panel--file .dz-icon { width: 44px; height: 44px; border-radius: 13px; margin: 0; flex: none; }
.dz-panel--file .dz-icon svg { width: 22px; height: 22px; }
.dz-text h3 { margin: 0 0 4px; font-size: 18px; }
.dz-text p { margin: 0; }
.stage--setup .dz-panel .dz-url { height: 46px; width: 100%; }
.stage--setup .dz-file { flex-direction: row; align-items: center; gap: 20px; }
.stage--setup .dz-preview { width: 144px; flex: none; border-radius: 12px; }
.stage--setup .dz-meta { flex: 1; min-width: 0; }

.stage--setup .setup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; }
.stage--setup .settings { padding: 22px; gap: 14px; }
.settings-head .eyebrow { align-self: center; }

.card.summary { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 22px; background: var(--brand-700); color: #fff; box-shadow: var(--shadow-2); }
.summary .eyebrow { color: #8cc4b3; }
.sum-title { font-size: 22px; font-weight: 700; line-height: 1.25; }
.summary .estimate { color: #b9cfc7; font-size: 14px; line-height: 1.45; }
.summary .estimate b { color: #fff; font-weight: 600; }
.summary .estimate.is-warn { color: #f7c56b; }
.sum-space { flex: 1; }
.summary .btn--primary { background: var(--orange); color: var(--brand-700); box-shadow: 0 10px 28px -10px rgba(240, 162, 27, 0.6); }
.summary .btn--primary:hover { box-shadow: 0 14px 32px -10px rgba(240, 162, 27, 0.75); }
.sum-note { margin: 0; font-size: 13px; line-height: 1.45; color: #93aaa1; text-align: center; }
.sum-note:empty { display: none; }

/* Tips, placed for this layout. */
.stage--setup .dz-src-wrap { position: relative; }
.stage--setup .doodle--1 { top: -64px; left: auto; right: 2%; }
.stage--setup .doodle--1 .doodle-arrow { transform: scaleY(-1) translateY(-14px); }
.stage--setup .doodle--1 span { margin-bottom: 26px; }
.summary .doodle { color: #8cc4b3; }
/* Once a source is in, step 1 is done: it fades and the last step takes the colour. */
.stage--setup:has(.dropzone.has-file) .doodle--1 { opacity: 0; }
.stage--setup:has(.dropzone.has-file) .summary .doodle--start { color: var(--orange); }

@media (max-width: 900px) {
  .stage--setup .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .stage--setup .setup-head h1 { font-size: 32px; }
}
@media (max-width: 640px) {
  .stage--setup .dz-file { flex-direction: column; align-items: stretch; }
  .stage--setup .dz-preview { width: 100%; }
  .dz-src .src-card .src-chip { display: none; }
}
.mode-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 2px 0; font-size: 14px; color: var(--muted); }
.price-chip { padding: 3px 9px; border-radius: 8px; background: var(--orange); color: var(--brand-700); font: 600 13px var(--mono); }

/* ---------- Translation screen: dark, the picture first (the palette flips; components follow) ---------- */
body:has(#stage-live:not([hidden])) {
  --bg: #08130f; --surface: #10211b; --surface-2: #162d25; --soft: #1f3d33;
  --text: #ffffff; --text-2: #c9dbd4; --muted: #93aaa1; --dim: #6b8a7f;
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16);
  --brand-50: rgba(140, 196, 179, 0.12); --brand-100: rgba(140, 196, 179, 0.22); --brand-300: #5fa08d; --brand-500: #8cc4b3;
  --grad: linear-gradient(0deg, #2d6e5e, #2d6e5e);
  --shadow-1: none; --shadow-2: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  background: var(--bg); color: var(--text);
}
body:has(#stage-live:not([hidden])) .topbar { background: transparent; border-color: var(--line); }
body:has(#stage-live:not([hidden])) .card { border-color: var(--line); }
body:has(#stage-live:not([hidden])) .transcript-body .tr-item.is-current { background: rgba(140, 196, 179, 0.12); box-shadow: inset 0 0 0 1px rgba(140, 196, 179, 0.35); }
.warmup-note.is-call { background: #2d6e5e; }

/* The result card stays light over the dark screen. */
.done-card {
  --bg: #f4f7f6; --surface: #ffffff; --surface-2: #eef3f1; --soft: #e1e8e5; --text: #0f2620; --text-2: #34473f; --muted: #4c5e57; --dim: #8d9b95;
  --line: rgba(15, 38, 32, 0.08); --line-2: rgba(15, 38, 32, 0.14); --brand-50: #e9f2ef; --brand-100: #d1e5de; --brand-300: #86b5a6; --brand-500: #23594c;
  --grad: linear-gradient(0deg, #0f2620, #0f2620);
  color: var(--text);
}
.done-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; width: 100%; margin-top: 4px; }
.done-stats:empty { display: none; }
.done-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--surface-2); text-align: left; }
.done-stat b { font-size: 22px; font-weight: 700; }
.done-stat span { font-size: 13px; color: var(--muted); }
body:has(#stage-live:not([hidden])) .icon-btn--lg { background: #ffffff; color: #0f2620; }
body:has(#stage-live:not([hidden])) .icon-btn--lg:hover { background: #8cc4b3; color: #0f2620; }
body:has(#stage-live:not([hidden])) .done-sheet { background: rgba(5, 10, 20, 0.6); }
.transcript-head { flex-wrap: wrap; }
.transcript-head h3 { flex: 1 1 auto; }

/* ---------- Account sheet: the balance up front, top-ups right there ---------- */
.acc-balance { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 20px; background: #0f2620; color: #fff; }
.acc-balance .eyebrow { color: #8cc4b3; }
.acc-balance > b { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; }
.acc-sub { font-size: 14px; color: #b9cfc7; }
.acc-topup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.acc-topup:empty { display: none; }
.acc-pack {
  position: relative; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #fff;
  font: 600 14px var(--font); cursor: pointer; transition: background var(--t-hover), border-color var(--t-hover);
}
.acc-pack:hover { background: rgba(255, 255, 255, 0.08); }
.acc-pack.is-featured { border: 0; background: var(--orange); color: #0f2620; font-weight: 700; }
.acc-pack.is-loading { opacity: 0.6; pointer-events: none; }
.account-rows { grid-template-columns: 1fr; }
/* A promo code, folded under the top-ups. */
.acc-promo summary { cursor: pointer; list-style: none; font-size: 14px; color: #8cc4b3; width: fit-content; }
.acc-promo summary::-webkit-details-marker { display: none; }
.acc-promo summary:hover { color: #fff; }
.acc-promo-wrap { padding-top: 10px; }
.acc-promo-body { display: flex; gap: 8px; }
/* The answer under the field glides open (height) and fades in; nothing shakes. */
.acc-promo-msg-box { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t-layout) var(--ease), opacity var(--t-ui) var(--ease); }
.acc-promo-wrap.has-msg .acc-promo-msg-box { grid-template-rows: 1fr; opacity: 1; }
.acc-promo-msg { overflow: hidden; min-height: 0; margin: 0; padding-top: 8px; font-size: 14px; line-height: 1.4; color: #ffb4a0; }

.acc-promo-body input {
  flex: 1 1 auto; width: 0; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06); color: #fff; font: 600 15px var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.acc-promo-body input::placeholder { color: #93aaa1; text-transform: none; letter-spacing: 0; font-family: var(--font); font-weight: 400; }
.acc-promo-body input { transition: border-color var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease); }
.acc-promo-body input:focus { outline: 2px solid #8cc4b3; outline-offset: 1px; }
.acc-promo-body input.is-bad { border-color: #ff8f73; background: rgba(255, 143, 115, 0.1); }
.acc-promo-body input.is-bad:focus { outline-color: #ff8f73; }
/* Minutes added: the card glows once, a badge rises beside the figure. */
.acc-balance { position: relative; }
.acc-balance.is-gain { animation: acc-glow 1.8s var(--ease); }
@keyframes acc-glow {
  0% { box-shadow: 0 0 0 0 rgba(240, 162, 27, 0); }
  30% { box-shadow: 0 0 0 6px rgba(240, 162, 27, 0.35), 0 12px 40px rgba(240, 162, 27, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(240, 162, 27, 0); }
}
.acc-gain {
  position: absolute; top: 18px; right: 18px; padding: 6px 12px; border-radius: 99px; background: var(--orange); color: #0f2620;
  font: 800 16px var(--font); animation: acc-gain-in 0.6s var(--ease) both; transition: opacity var(--t-exit) var(--ease-in), transform var(--t-exit) var(--ease-in);
}
.acc-gain.is-out { opacity: 0; transform: translateY(-6px); }
@keyframes acc-gain-in { from { opacity: 0; transform: translateY(12px) scale(0.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acc-balance.is-gain, .acc-gain { animation: none; } }
.acc-promo-body .btn { height: 40px; background: #fff; color: #0f2620; }
.acc-promo-body .btn:hover { background: #8cc4b3; }
/* On the sign-in card: the promo link someone opened, waiting for the sign-in. */
.promo-banner { margin: 0; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--orange) 18%, transparent); font-size: 14px; line-height: 1.4; }
.promo-banner.is-bad { background: var(--surface-2); color: var(--muted); }

/* ---------- Sign-in: the right side is the dark showcase ---------- */
.signin-hero {
  --text: #ffffff; --text-2: #c9dbd4; --muted: #b9cfc7; --dim: #93aaa1; --line: rgba(255, 255, 255, 0.1);
  --brand-50: rgba(255, 255, 255, 0.08); --brand-100: rgba(255, 255, 255, 0.14); --brand-700: #ffffff;
  margin: 8px 8px 8px 0; border-radius: var(--r-xl); background: var(--hero-bg, #0f2620); color: var(--text);
  align-items: flex-start; text-align: left; padding: 44px 56px; gap: 18px;
}
.signin-hero .hero-title { font-weight: 800; letter-spacing: -0.035em; font-size: 46px; line-height: 1.04; max-width: 600px; }
.signin-hero .grad-text { background: none; -webkit-text-fill-color: #8cc4b3; color: #8cc4b3; }
.signin-hero .hero-sub { color: #b9cfc7; font-size: 18px; max-width: 540px; }
.signin-hero .features { display: flex; flex-wrap: wrap; gap: 10px; max-width: 100%; margin-top: 4px; }
.signin-hero .features li { flex-direction: row; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 13.5px; color: #fff; text-align: left; }
.signin-hero .feat-ico { width: auto; height: auto; background: none; box-shadow: none; color: #8cc4b3; }
.signin-hero .feat-ico svg { width: 18px; height: 18px; }
.signin-hero .chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.signin-hero .chip--brand { background: rgba(140, 196, 179, 0.18); border-color: rgba(140, 196, 179, 0.3); }
@media (max-width: 900px) { .signin-hero { margin: 0 8px 8px; padding: 32px 20px; } .signin-hero .hero-title { font-size: 34px; } }

/* The selection frame glides from card to card (Motion board: "the frame flows to the chosen card"). */
.src-cards { position: relative; }
.src-frame {
  position: absolute; z-index: 1; top: 0; left: 0; border: 2px solid var(--brand-400); border-radius: 20px; pointer-events: none;
  box-shadow: 0 12px 32px -16px rgba(45, 110, 94, 0.45);
  transition: transform var(--t-layout) var(--ease), width var(--t-layout) var(--ease), height var(--t-layout) var(--ease);
}
.src-cards.has-frame .src-card[aria-selected="true"] { border-color: var(--soft); box-shadow: none; }

/* Compact setup: everything fits a laptop screen; one motion per change (the layout glide, no extra reveal). */
.stage--setup .dz-panel { animation: none; }
.sum-title { font-size: 20px; }

.stage--setup .tab-mode span { padding: 10px 12px; }
.dz-src .src-chip { top: -9px; right: 14px; }
.stage--setup .settings-head { min-height: 0; position: relative; }
.stage--setup .settings-head .doodle--2 { position: absolute; left: 46%; top: -14px; margin: 0; }
.stage--setup .settings { gap: 12px; }
.stage--setup .mode-card { padding: 11px 13px; gap: 4px; }

.stage--setup .tab-mode span { padding: 9px 12px; gap: 2px; }
.dz-src .src-chip { z-index: 2; }

/* The source details row keeps one height whatever the source, so switching File / Website / Stream never
   moves the rest of the page: only its inside changes (it can still grow for a long error message). */
.stage--setup .dropzone { min-height: 112px; display: flex; align-items: center; box-sizing: border-box; }
.stage--setup .dropzone > .dz-empty, .stage--setup .dropzone > .dz-file { width: 100%; }
.stage--setup .dz-panel .dz-url-hint, .stage--setup .tab-modes + #tab-hint { margin: 0; }
.stage--setup .dz-panel { gap: 8px; }
/* Step and title on one line. */
.stage--setup .setup-head { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 16px; }
.stage--setup .setup-head .eyebrow { order: 2; }
.stage--setup { padding-top: 12px; }
.stage--setup .doodle--1 { top: -46px; }

/* ---------- "How it works": three looping scenes (js/howto.js switches data-scene) ---------- */
.howto { width: min(540px, 100%); display: flex; flex-direction: column; gap: 14px; }
.howto-screen {
  position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #23466e 0%, #18304f 55%, #12253d 100%); color: #fff;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.hs { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; opacity: 0; transform: translateY(8px); transition: opacity var(--t-layout) var(--ease), transform var(--t-layout) var(--ease); pointer-events: none; }
.howto[data-scene="1"] .hs-1, .howto[data-scene="2"] .hs-2, .howto[data-scene="3"] .hs-3 { opacity: 1; transform: none; }

/* 1 · choose: a cursor picks "Website or call", the shared tab appears */
.hs-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.hs-cards > * { min-width: 0; flex: 1 1 120px; }
.hs-card {
  width: 118px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.07); border: 2px solid rgba(255, 255, 255, 0.12); font-size: 12.5px; text-align: center;
}
.hs-card b { font-weight: 600; }
.hs-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: #8cc4b3; }
.hs-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); font-size: 13px; opacity: 0; }
.hs-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: #f0a21b; }
.hs-cursor { position: absolute; left: 80%; top: 86%; width: 26px; height: 26px; opacity: 0; }
.howto[data-scene="1"] .hs-cursor { animation: hs-cursor 2s var(--ease) 0.3s forwards; }
.howto[data-scene="1"] .hs-card--tab { animation: hs-pick 0.5s var(--ease) 1.75s forwards; }
.howto[data-scene="1"] .hs-card--tab .hs-ico { animation: hs-pick-ico 0.5s var(--ease) 1.75s forwards; }
.howto[data-scene="1"] .hs-tab { animation: hs-up 0.5s var(--ease) 2.4s forwards; }
@keyframes hs-cursor {
  0% { opacity: 0; left: 80%; top: 86%; }
  15% { opacity: 1; }
  70% { left: 29%; top: 60%; transform: none; }
  80% { left: 29%; top: 60%; transform: scale(0.82); }
  100% { opacity: 1; left: 29%; top: 60%; transform: none; }
}
@keyframes hs-pick { to { border-color: #8cc4b3; background: rgba(140, 196, 179, 0.16); transform: translateY(-2px); } }
@keyframes hs-pick-ico { to { background: #2d6e5e; color: #fff; } }
@keyframes hs-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 2 · languages and voice: the target language decodes in, the switch flips to the voice */
.hs-langs { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; }
.hs-lang { padding: 9px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); min-width: 4ch; text-align: center; }
.hs-lang--to { background: rgba(140, 196, 179, 0.18); border-color: rgba(140, 196, 179, 0.35); }
.hs-arrow { color: #8cc4b3; }
.hs-mode { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); font-size: 13.5px; font-weight: 600; }
.hs-seg { position: relative; z-index: 1; padding: 8px 18px; text-align: center; color: rgba(255, 255, 255, 0.6); }
.hs-glider { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; background: #fff; }
.hs-seg:first-child { color: #0f2620; }
.howto[data-scene="2"] .hs-glider { animation: hs-glide 0.5s var(--spring) 2.2s forwards; }
.howto[data-scene="2"] .hs-seg:first-child { animation: hs-off 0.3s ease 2.25s forwards; }
.howto[data-scene="2"] .hs-seg:last-child { animation: hs-on 0.3s ease 2.25s forwards; }
@keyframes hs-glide { to { transform: translateX(100%); background: #f0a21b; } }
@keyframes hs-off { to { color: rgba(255, 255, 255, 0.6); } }
@keyframes hs-on { to { color: #0f2620; } }

/* 3 · watch: the sound plays, the original line, then the translation word by word and the voice */
.hs-3 { justify-content: flex-end; padding-bottom: 7%; }
.hs-wave { position: absolute; left: 0; right: 0; top: 24%; display: flex; justify-content: center; align-items: center; gap: 5px; height: 64px; }
.hs-wave i { width: 4px; height: 100%; border-radius: 4px; background: rgba(255, 255, 255, 0.55); transform: scaleY(0.25); }
.howto[data-scene="3"] .hs-wave i { animation: hs-bar 1.1s ease-in-out infinite; }
.hs-wave i:nth-child(3n) { animation-duration: 0.85s !important; }
.hs-wave i:nth-child(4n+1) { animation-duration: 1.3s !important; }
.hs-wave i:nth-child(5n+2) { animation-duration: 0.7s !important; }
@keyframes hs-bar { 50% { transform: scaleY(1); } }
.hs-live { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); font: 600 11px var(--mono); }
.hs-delay { position: absolute; top: 14px; right: 14px; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); font-size: 11px; color: #b9cfc7; }
.hs-voice { position: absolute; right: 16px; bottom: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f0a21b; color: #0f2620; opacity: 0; }
.howto[data-scene="3"] .hs-voice { animation: hs-up 0.4s var(--ease) 1.6s forwards, hs-pulse 1.4s ease-in-out 2s infinite; }
@keyframes hs-pulse { 50% { box-shadow: 0 0 0 8px rgba(240, 162, 27, 0.25); } }
.hs-sub { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 86%; text-align: center; }
.hs-src { font-size: 13px; color: rgba(255, 255, 255, 0.75); opacity: 0; }
.hs-dst { padding: 7px 14px; border-radius: 10px; background: rgba(8, 10, 20, 0.78); font-size: 17px; font-weight: 600; line-height: 1.35; }
.hs-dst span { display: inline-block; opacity: 0; transform: translateY(5px); }
.howto[data-scene="3"] .hs-src { animation: hs-up 0.4s var(--ease) 0.3s forwards; }
.howto[data-scene="3"] .hs-dst span { animation: word 0.45s var(--ease) forwards; animation-delay: calc(1.4s + var(--i) * 110ms); }

/* captions and dots */
.howto-cap { display: none; align-items: flex-start; gap: 12px; animation: hs-up var(--t-ui) var(--ease); }
.howto[data-scene="1"] .howto-cap[data-s="1"], .howto[data-scene="2"] .howto-cap[data-s="2"], .howto[data-scene="3"] .howto-cap[data-s="3"] { display: flex; }
.howto-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #f0a21b; color: #0f2620; font: 700 14px var(--font); }
.howto-cap b { display: block; font-size: 16px; }
.howto-cap span:not(.howto-n) { font-size: 14px; color: var(--muted); }
.howto-dots { display: flex; gap: 6px; }
.howto-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line-2); cursor: pointer; transition: width var(--t-ui) var(--ease), background var(--t-ui); }
.howto-dots button[aria-selected="true"] { width: 22px; background: #f0a21b; }
@media (max-width: 640px) { .hs-card { width: 92px; font-size: 11px; } .hs-langs { font-size: 15px; } .hs-dst { font-size: 14px; } }
.howto-wrap { width: min(540px, 100%); }
.howto-wrap .howto, .hs-voice { bottom: auto; top: 46px; right: 14px; }

/* "?" in the top bar and the guide sheet */
.help-btn { width: 38px; height: 38px; color: var(--muted); }
.help-btn:hover { color: var(--text); }
.guide-card { width: min(640px, 100%); max-width: none; align-items: stretch; text-align: left; gap: 16px; }
.guide-card h2 { text-align: left; }
.guide-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.guide-tabs button { flex: 1 1 auto; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; font: 500 13.5px var(--font); color: var(--muted); cursor: pointer; transition: background var(--t-hover), color var(--t-hover); }
.guide-tabs button:hover { color: var(--text); }
.guide-tabs button { position: relative; z-index: 1; }
.guide-tabs button[aria-selected="true"] { color: var(--text); }
/* The white pill under the chosen tab glides from tab to tab (app.js sets its box). */
.guide-pill {
  position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 9px; background: var(--surface); box-shadow: 0 1px 3px rgba(15, 38, 32, 0.12);
  transition: transform var(--t-layout) var(--ease), width var(--t-layout) var(--ease), height var(--t-layout) var(--ease);
}
/* All panels share one grid cell: the card is as tall as the tallest and never changes size on a switch. */
.guide-panels { display: grid; }
.guide-panel {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity var(--t-layout) var(--ease), visibility 0s linear var(--t-layout);
}
.guide-panel.is-on { opacity: 1; visibility: visible; transition: opacity var(--t-layout) var(--ease), visibility 0s; }
.guide-panels.is-instant .guide-panel { transition: none; }
@media (prefers-reduced-motion: reduce) { .guide-pill, .guide-panel, .guide-panel.is-on { transition: none; } }
.guide-steps, .guide-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guide-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.guide-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-400); font: 700 13px var(--font); margin-top: 1px; }
.guide-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; color: var(--muted); }
.guide-keys li { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 14px; align-items: baseline; font-size: 14.5px; color: var(--text-2); }
.guide-keys kbd, .guide-key { justify-self: start; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); font: 600 13px var(--mono); color: var(--text); box-shadow: 0 1px 0 var(--line-2); }
@media (max-width: 640px) { .guide-keys li { grid-template-columns: 1fr; gap: 4px; } }
.guide-key { font: 600 13px var(--font) !important; }

/* Sign in / Create account: the notes under the button share one grid cell (see index.html). */
.auth-note { display: grid; }
.auth-note > * { grid-area: 1 / 1; transition: opacity var(--t-layout) var(--ease), visibility 0s; }
.auth-note > .is-off { opacity: 0; visibility: hidden; transition: opacity var(--t-exit) var(--ease-in), visibility 0s linear var(--t-exit); }
.auth-reg-note { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.auth-reg-note a { color: inherit; }

/* Feedback: thumbs on the done card (ask ↔ thanks share one cell, so the card keeps its size), the form. */
.done-rate { display: grid; justify-items: center; margin-top: 4px; }
.done-rate > * { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted);
  transition: opacity var(--t-layout) var(--ease), visibility 0s; }
.done-rate > .is-off { opacity: 0; visibility: hidden; transition: opacity var(--t-exit) var(--ease-in), visibility 0s linear var(--t-exit); }
.rate-btn { width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }
.rate-btn:hover { background: var(--brand-50); color: var(--brand-500); border-color: var(--brand-300); }
.link-btn { border: 0; padding: 0; background: none; font: inherit; color: var(--brand-400); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.feedback-card { max-width: 480px; text-align: left; align-items: stretch; gap: 12px; }
.feedback-card h2 { text-align: left; }
.feedback-attach { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.feedback-attach input { margin: 3px 0 0; flex: none; accent-color: var(--blue); }
.feedback-attach small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.feedback-card textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px; padding: 12px 14px; border: 1px solid var(--line-2);
  border-radius: 14px; background: var(--surface); color: var(--text); font: 400 15px/1.5 var(--font); transition: border-color var(--t-hover) var(--ease); }
.feedback-card textarea:focus { outline: 0; border-color: var(--brand-300); }
.feedback-card .done-actions { justify-content: flex-end; }
.summary .sum-note.is-warn { color: #f7c56b; font-weight: 600; }

/* ---------- Listening with the microphone (phones): big subtitles over a calm field, then the transcript ---------- */
/* Listening around you: the phone is the subtitles. The player layout is hidden, the mic view takes the
   screen: the current line big, the previous one dimmed above it, the original small below, one button
   for the voice in the ear, Stop in the corner. Speakers, when told apart, get tints. */
.stage--live.is-mic .live-grid { display: none; }
/* The listening view owns the whole screen: the page header is hidden under it (see .is-mic .topbar), it
   carries its own Main screen button. */
.stage--live.is-mic ~ *, body:has(.stage--live.is-mic:not([hidden])) .topbar { display: none; }
.mic-view { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: radial-gradient(80% 70% at 30% 0%, rgba(125, 179, 163, 0.35), transparent 65%), var(--grad-deep); color: #fff; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
.mic-view[hidden] { display: none; }
.mic-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mic-homebtn { width: 40px; height: 36px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.mic-homebtn:hover { background: rgba(255, 255, 255, 0.24); }
/* While the pipeline starts: the current step, with the same ring as the player shows. */
.mic-boot { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.75); font-size: 15px; }
.mic-boot::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 0.9s linear infinite; flex: none; }
.mic-boot[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.mic-pill { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.14); }
/* The dot swells with the sound the microphone picks up (--lvl 0…1), so "hearing" is visible. */
.mic-pill .live-dot { transform: scale(calc(1 + var(--lvl, 0) * 1.4)); transition: transform 0.08s linear; box-shadow: 0 0 0 calc(var(--lvl, 0) * 6px) rgba(255, 200, 80, 0.25); }
/* Under the thumb: Stop while listening; Start again once stopped. */
.mic-stopbtn { flex: 1 1 120px; max-width: 240px; min-height: 60px; border: 0; border-radius: 99px; background: #e5484d; color: #fff; font: 600 17px/1 var(--font); cursor: pointer; transition: transform 0.2s var(--ease), background 0.2s var(--ease); }
.mic-stopbtn:active { transform: scale(0.97); }
.mic-stopbtn[hidden] { display: none; }
.mic-restart { background: rgba(255, 255, 255, 0.92); color: #0f2620; border-color: transparent; }
.mic-restart[hidden] { display: none; }
.mic-done { display: grid; gap: 10px; padding: 12px 4px 4px; border-top: 1px solid rgba(255, 255, 255, 0.14); animation: rise 0.32s var(--ease) both; }
.mic-done[hidden] { display: none; }
.mic-done-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mic-done .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.mic-done .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* The feed: every phrase a block, newest at the bottom, the whole history scrollable with a finger. */
.mic-feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; padding: 6px 4px 12px; scroll-behavior: smooth; }
.mic-feed::before { content: ""; flex: 1; } /* keeps a short history at the bottom */
.mic-item { display: grid; gap: 4px; }
.mic-meta { display: flex; gap: 10px; align-items: baseline; font: 500 12px/1 var(--mono); color: rgba(255, 255, 255, 0.5); letter-spacing: 0.02em; }
.mic-spk { font-family: var(--font); font-weight: 600; font-size: 12.5px; letter-spacing: 0; }
.mic-dst { font-size: clamp(22px, 5.8vw, 34px); line-height: 1.22; font-weight: 600; letter-spacing: -0.01em; text-wrap: pretty; }
.mic-dst.is-partial-dst { color: rgba(255, 255, 255, 0.7); }
.mic-dst .w { opacity: 1; transform: none; animation: none; }
.mic-dst.is-in .w { animation: word 0.45s var(--ease) forwards; opacity: 0; transform: translateY(4px); animation-delay: calc(var(--i) * 28ms); }
.mic-dst .w-shift { animation: shuffle 0.28s var(--ease) both; animation-delay: calc(var(--i) * 22ms); }
.mic-src { font-size: 14.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.55); }
.mic-src:empty { display: none; }
.mic-item[data-spk="1"] .mic-spk, .mic-item[data-spk="1"] .mic-dst { color: #ffe08a; }
.mic-item[data-spk="2"] .mic-spk, .mic-item[data-spk="2"] .mic-dst { color: #9fd8f5; }
.mic-item[data-spk="3"] .mic-spk, .mic-item[data-spk="3"] .mic-dst { color: #bfe8a0; }
.mic-item[data-spk="4"] .mic-spk, .mic-item[data-spk="4"] .mic-dst { color: #f7b4cf; }
.mic-item[data-spk] .mic-dst.is-partial-dst { opacity: 0.72; }
@media (prefers-reduced-motion: reduce) { .mic-dst.is-in .w { animation: none; opacity: 1; transform: none; } .mic-feed { scroll-behavior: auto; } }
.mic-bottom { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mic-mute { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 22px; flex: 1 1 170px; max-width: 320px; min-width: 0; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.14); color: #fff; font: 600 17px/1 var(--font); cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.mic-mute:active { transform: scale(0.97); }
.mic-mute .i-off { display: none; }
.mic-mute[aria-pressed="true"] { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); }
.mic-mute[aria-pressed="true"] .i-on { display: none; }
.mic-mute[aria-pressed="true"] .i-off { display: inline; }
.mic-mute[hidden] { display: none; }
.stage--live.is-mic .live-grid-unused { display: flex; flex-direction: column; height: auto; min-height: 0; gap: 14px; }
.stage--live.is-mic .live-grid { height: calc(100dvh - 104px); }
.stage--live.is-mic .player-col { flex: 0 0 44%; min-height: 0; }
.stage--live.is-mic .player { flex: 1; min-height: 0; }
.stage--live.is-mic .player video, .stage--live.is-mic .player::after { display: none; }
.stage--live.is-mic .audio-only-art { padding: 0; background: radial-gradient(80% 70% at 30% 0%, rgba(125, 179, 163, 0.35), transparent 65%), var(--grad-deep); }
.stage--live.is-mic .audio-only-art > * { display: none; }
.stage--live.is-mic .subtitle { top: 64px; bottom: 20px; left: 16px; right: 16px; justify-content: center; }
.stage--live.is-mic .subtitle-dst { background: none; padding: 0; font-size: clamp(22px, 6.4vw, 34px); font-weight: 600; line-height: 1.3; }
.stage--live.is-mic .subtitle-src { font-size: 15px; }
.stage--live.is-mic .controls, .stage--live.is-mic .meters { display: none !important; }
.stage--live.is-mic .transcript { flex: 1; min-height: 0; }
.mic-stop { display: none; }
.stage--live.is-mic .mic-stop { display: inline-flex; background: rgba(255, 255, 255, 0.14); color: #fff; border: 0; }
.stage--live.is-mic .mic-stop:hover { background: rgba(255, 255, 255, 0.24); }

/* Sheets over the dark live screen are dark too (a white card at night hurts, above all on a phone). */
body:has(#stage-live:not([hidden])) .done-card {
  --bg: #08130f; --surface: #10211b; --surface-2: #162d25; --soft: #1f3d33;
  --text: #ffffff; --text-2: #c9dbd4; --muted: #93aaa1; --dim: #6b8a7f;
  --line: rgba(255, 255, 255, 0.08); --line-2: rgba(255, 255, 255, 0.16);
  --brand-50: rgba(140, 196, 179, 0.12); --brand-100: rgba(140, 196, 179, 0.22); --brand-300: #5fa08d; --brand-500: #8cc4b3;
  --grad: linear-gradient(0deg, #2d6e5e, #2d6e5e);
  background: var(--surface); color: var(--text); border-color: var(--line);
}
body:has(#stage-live:not([hidden])) .done-card .btn--primary { background: #ffffff; color: #0f2620; }
/* A close cross in the corner of the result card. */
#done .done-card { position: relative; }
.sheet-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 12px; background: var(--surface-2);
  color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.sheet-x:hover { color: var(--text); background: var(--soft); }
.btn--google.is-waiting { pointer-events: none; opacity: 0.8; }
.btn--google.is-waiting .g-logo { animation: pulse-soft 1.6s var(--ease) infinite; }
@keyframes pulse-soft { 50% { opacity: 0.45; } }

/* The minutes left sit inside the account button (its left part), set off by a thin line. */
.user .balance { height: 30px; padding: 0 10px 0 8px; margin-right: 2px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: none; animation: none; }
.user .balance.is-low { background: none; color: var(--warn); }
.user { cursor: pointer; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease); }
.user:hover { border-color: var(--brand-300); }

/* The previous subtitle line, kept above the new one until it has been read. */
.subtitle-prev {
  max-width: min(100%, 50em); padding: 6px 14px; border-radius: 12px; background: rgba(8, 10, 20, 0.6);
  color: rgba(255, 255, 255, 0.72); font-size: clamp(14px, 1.35vw, 19px); line-height: 1.35;
  animation: appear var(--t-ui) var(--ease) both;
}
.subtitle-prev:empty { display: none; }
.stage--live.is-mic .subtitle-prev { background: none; padding: 0; font-size: 16px; }
/* Reconnecting: shown in the status pill (amber, pulsing), not as a toast. */
.status-pill[data-state="reconnecting"] .live-dot { background: #f0a21b; }
.status-pill[data-state="reconnecting"] .live-dot::after { animation-name: pulse-blue; }
/* Toasts keep their own colors: on the dark live screen the palette's "text" is white. */
.toast { background: #0f2620; color: #ffffff; }
body:has(#stage-live:not([hidden])) .toast { background: #e8eef6; color: #0f2620; }

/* ---------- Setup screen background: a lava lamp ----------
   Five pale drops on their own slow loops, stretching and turning as they go. Only transform is animated
   (the GPU moves the layers, nothing is repainted); off on the dark translation screen and under
   reduced motion. */
.lava { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
body:has(#stage-live:not([hidden])) .lava { display: none; }
.lava i { position: absolute; border-radius: 50%; will-change: transform; animation: var(--n) var(--d) ease-in-out infinite; }
.lava .l1 { --n: lava1; --d: 22s; width: 38vw; height: 30vw; left: 2vw; top: 4vh; background: radial-gradient(closest-side, rgba(186,212,242,.7), rgba(186,212,242,0)); }
.lava .l2 { --n: lava2; --d: 27s; width: 34vw; height: 30vw; left: 52vw; top: 46vh; background: radial-gradient(closest-side, rgba(170,198,240,.42), rgba(170,198,240,0)); }
.lava .l3 { --n: lava3; --d: 31s; width: 30vw; height: 26vw; left: 60vw; top: -6vh; background: radial-gradient(closest-side, rgba(208,226,248,.75), rgba(208,226,248,0)); }
.lava .l4 { --n: lava4; --d: 25s; width: 28vw; height: 24vw; left: 18vw; top: 58vh; background: radial-gradient(closest-side, rgba(201,207,244,.55), rgba(201,207,244,0)); }
.lava .l5 { --n: lava2; --d: 35s; width: 26vw; height: 22vw; left: 36vw; top: 18vh; background: radial-gradient(closest-side, rgba(205,234,242,.55), rgba(205,234,242,0)); animation-direction: reverse; }
@keyframes lava1 { 0%,100% { transform: translate3d(0,0,0) rotate(0) scale(1,1); } 25% { transform: translate3d(18vw,22vh,0) rotate(20deg) scale(1.25,.85); } 50% { transform: translate3d(30vw,8vh,0) rotate(-10deg) scale(.9,1.2); } 75% { transform: translate3d(10vw,-6vh,0) rotate(12deg) scale(1.15,.95); } }
@keyframes lava2 { 0%,100% { transform: translate3d(0,0,0) rotate(0) scale(1,1); } 30% { transform: translate3d(-24vw,-18vh,0) rotate(-24deg) scale(.85,1.25); } 60% { transform: translate3d(-8vw,-34vh,0) rotate(16deg) scale(1.2,.9); } 80% { transform: translate3d(6vw,-12vh,0) rotate(-6deg) scale(1,1.1); } }
@keyframes lava3 { 0%,100% { transform: translate3d(0,0,0) rotate(0) scale(1,1); } 35% { transform: translate3d(-16vw,30vh,0) rotate(28deg) scale(1.3,.8); } 70% { transform: translate3d(8vw,44vh,0) rotate(-14deg) scale(.85,1.2); } }
@keyframes lava4 { 0%,100% { transform: translate3d(0,0,0) rotate(0) scale(1,1); } 40% { transform: translate3d(26vw,-20vh,0) rotate(-18deg) scale(1.2,.85); } 75% { transform: translate3d(40vw,4vh,0) rotate(10deg) scale(.9,1.15); } }
@media (prefers-reduced-motion: reduce) { .lava i { animation: none; } }
/* Phones and tablets: five moving gradient layers made the page crawl, so there the background is plain. */
@media (hover: none), (max-width: 760px) { .lava { display: none; } }

/* Inverted pills ("Back to live", the progress tooltip) take the palette's text color as their background:
   on the dark translation screen that is white, so they get explicit light-on-dark colors there. */
body:has(#stage-live:not([hidden])) .tr-live { background: #ffffff; color: #0f2620; }
body:has(#stage-live:not([hidden])) .tr-live:hover { background: #8cc4b3; color: #0f2620; }
body:has(#stage-live:not([hidden])) .progress-tip { background: #ffffff; color: #0f2620; }
body:has(#stage-live:not([hidden])) .btn--danger { color: #ffb199; }
@media (max-width: 420px) { .acc-topup { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } .acc-pack { font-size: 13px; padding: 0 6px; height: auto; min-height: 46px; line-height: 1.2; } }

/* ---------- Which languages: the hero button and the sheet ---------- */
.hero-langs { margin-top: 16px; }
.hero-langs-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; font: inherit; text-align: left;
  transition: background var(--t-hover), border-color var(--t-hover), transform var(--t-hover) var(--ease);
}
.hero-langs-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.hero-langs-btn b { font-size: 14px; font-weight: 600; }
.hero-langs-more { font-size: 13px; color: #8cc4b3; text-decoration: underline; text-underline-offset: 3px; }
.lang-flags { display: flex; flex: none; }
.lang-flags .lp-flag { box-shadow: 0 0 0 2px #0f2620; margin-left: -7px; }
.lang-flags .lp-flag:first-child { margin-left: 0; }
.langs-card { max-width: 760px; text-align: left; align-items: stretch; gap: 12px; }
.langs-card h2 { text-align: left; }
.langs-list { list-style: none; margin: 4px 0 0; padding: 0 4px 0 0; columns: 3; column-gap: 20px; font-size: 14px; max-height: min(58vh, 520px); overflow: auto; }
.langs-list li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 4px 0; break-inside: avoid; }
.langs-native { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .langs-list { columns: 1; } .hero-langs-btn b { font-size: 13px; } }
.done-sheet .done-card.langs-card { max-width: 760px; width: min(760px, calc(100vw - 32px)); }
@media (max-width: 640px) {
  .hero-langs-btn { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; border-radius: 18px; padding: 10px 14px; width: 100%; }
  .hero-langs-btn b { grid-column: 1 / -1; }
  .hero-langs-more { text-align: right; }
}

/* ============================================================
   MeetScribe: the recording and its result
   ============================================================ */

.linklike { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { color: #fff; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-700); flex: none; }
.src-card:disabled { cursor: default; opacity: 0.55; }
.src-card:disabled:hover { transform: none; border-color: transparent; }
.ms-select select {
  height: 40px; padding: 0 34px 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface);
  font: 500 14px var(--font); color: var(--text); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%234c5e57' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.ms-select select:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.summary .estimate p { margin: 0 0 6px; }

/* segmented switch: video / text, transcript / minutes */
.ms-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.ms-seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 500 13.5px var(--font); cursor: pointer; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.ms-seg button.is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.ms-seg[hidden] { display: none; }

/* the recording screen (dark: the palette above follows #stage-live) */
.stage--live { max-width: 1440px; }
.rec-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.rec-bar .status-pill { background: rgba(240, 162, 27, 0.14); color: #f6c46a; font-weight: 600; }
.rec-time { font-size: 22px; letter-spacing: 0.02em; }
.rec-source { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.rec-spacer { flex: 1; }
.rec-mute { width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--text); }
.rec-mute .mute-slash { opacity: 0; transition: opacity var(--t-hover); }
.rec-mute.is-muted { background: rgba(217, 72, 15, 0.18); border-color: rgba(217, 72, 15, 0.5); }
.rec-mute.is-muted .mute-slash { opacity: 1; }
.rec-mute[hidden] { display: none; }
.btn--stop { height: 44px; gap: 8px; background: #fff; color: var(--brand-700); font-weight: 600; }
.btn--stop:hover { background: #e9f2ef; }
.stop-sq { width: 10px; height: 10px; border-radius: 2px; background: currentColor; }

.rec-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; height: calc(100vh / var(--z) - 64px - 100px); min-height: 520px; }
.rec-body[data-view="text"] { grid-template-columns: minmax(0, 820px); justify-content: center; }
.rec-body[data-view="text"] .rec-video { display: none; }
.rec-video { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #050d0a; box-shadow: var(--shadow-2); animation: reveal 0.6s var(--ease) both; }
.rec-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rec-caption {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); max-width: 80%; padding: 10px 18px; border-radius: 12px;
  background: rgba(5, 13, 10, 0.82); color: #fff; font-size: 19px; line-height: 1.45; text-align: center; animation: reveal 0.3s var(--ease) both;
}
.rec-video-note { position: absolute; left: 16px; right: 16px; bottom: 12px; margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); text-align: center; }
.rec-text { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow-y: auto; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); }
.rec-text-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: -18px; margin: -18px -20px 0; padding: 18px 20px 8px; background: var(--surface); z-index: 1; }
.stt-state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.stt-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.stt-state[data-state="live"]::before { background: #3ccf8e; }
.stt-state[data-state="connecting"]::before, .stt-state[data-state="reconnecting"]::before { background: var(--orange); animation: pulse 1.6s infinite; }
.stt-state[data-state="lost"]::before { background: var(--warn); }
.rec-empty:empty { display: none; }

.ms-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ms-lines li { display: flex; flex-direction: column; gap: 3px; animation: reveal 0.3s var(--ease) both; }
.ms-lines p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.ms-line-head { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--muted); }
.ms-line-head b { font-weight: 600; }
.spk-0 { color: #6fc2a9; } .spk-1 { color: #f6c46a; } .spk-2 { color: #9fb6ff; } .spk-3 { color: #f29b8b; } .spk-4 { color: #c9a6f2; } .spk-5 { color: #8fd3e8; }
.ms-partial { margin: 0; font-size: 15.5px; line-height: 1.55; color: #f6c46a; }
.ms-partial:empty { display: none; }
/* the summary during the meeting: topics that fold, and what's addressed to the person on top */
.rec-pane[hidden] { display: none; }
.rec-pane { display: flex; flex-direction: column; gap: 12px; }
.rec-text-head .ms-seg button { height: 30px; }
.digest-badge { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--orange); vertical-align: 2px; animation: pulse 1.6s infinite; }
.digest-badge[hidden] { display: none; }
.digest-me { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.digest-me input { height: 38px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); color: var(--text); font: 15px var(--font); }
.digest-mine { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--orange) 16%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent); animation: reveal var(--t-ui) var(--ease) both; }
.digest-mine[hidden] { display: none; }
.digest-mine ol, .digest-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.digest-mine ol { margin-top: 8px; }
.digest-mine li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 8px; align-items: baseline; }
.digest-mine p, .digest-topics p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.digest-kind { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text); }
.digest-topics li { animation: reveal var(--t-ui) var(--ease) both; }
.digest-topics details { border-radius: 12px; background: var(--surface-2); padding: 10px 14px; }
.digest-topics summary { display: flex; gap: 8px; align-items: baseline; cursor: pointer; list-style: none; }
.digest-topics summary::-webkit-details-marker { display: none; }
.digest-topics details[open] summary { margin-bottom: 6px; }
.digest-topics details p + p { margin-top: 4px; }
.digest-decided { color: var(--text) !important; font-weight: 600; }
.rec-digest .ts { font-size: 12px; color: var(--muted); }
#btn-digest { align-self: flex-start; }
.rec-meters { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); }
.meter { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; }
.meter[hidden] { display: none; }
.meter i { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.meter b { display: block; height: 100%; background: var(--brand-500); transform-origin: left; transform: scaleX(0); transition: transform 0.12s linear; }
#meter-mic { background: var(--orange); }
.meter-left { display: flex; justify-content: space-between; }
.meter-left b { color: var(--text); font-weight: 500; }

/* the result */
.stage--result { max-width: 1120px; }
.res-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.res-head h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
.res-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.res-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: 13px; }
.res-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.res-chip.is-muted { background: var(--surface-2); color: var(--muted); }
.res-chip.is-muted::before { background: var(--dim); }
.res-chip.is-busy::before { background: var(--orange); animation: pulse 1.6s infinite; }
.res-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.res-doc { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.res-doc .ms-seg { align-self: flex-start; }
.ms-lines--doc p { color: var(--text); }
.ms-lines--doc .spk-0 { color: #23805f; } .ms-lines--doc .spk-1 { color: #8a5a00; } .ms-lines--doc .spk-2 { color: #3a5bc7; }
.ms-lines--doc .spk-3 { color: #b4402c; } .ms-lines--doc .spk-4 { color: #7a45b8; } .ms-lines--doc .spk-5 { color: #1f7a93; }
#res-audio { width: 100%; }
.res-side { padding: 20px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 16px; }
.res-side .btn--block[hidden] { display: none; }
.res-rate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 6px; }

@media (max-width: 900px) {
  .rec-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .rec-video { aspect-ratio: 16 / 9; }
  .rec-text { max-height: 70vh; }
  .res-grid { grid-template-columns: minmax(0, 1fr); }
  .res-side { position: static; }
}

/* ---------- spaces and tabs in the top bar ---------- */
.space { position: relative; flex: none; margin-left: 6px; }
.space-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 6px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--text); font: 600 14px var(--font); cursor: pointer; transition: border-color var(--t-hover) var(--ease); max-width: 240px; }
.space-btn:hover { border-color: var(--brand-300); }
.space-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 260px; padding: 6px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 2px; transform-origin: top left; animation: lp-in var(--t-ui) var(--ease) both; }
.space-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: background var(--t-hover); }
.space-item:hover, .space-item.is-on { background: var(--surface-2); }
.space-item span { display: flex; flex-direction: column; min-width: 0; }
.space-item b { font-weight: 600; font-size: 14px; }
.space-item small { font-size: 12px; color: var(--muted); }
.space-add { color: var(--brand-500); font-weight: 600; font-size: 14px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; padding-top: 10px; }
.team-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; overflow: hidden; color: #fff; font: 800 18px var(--display); }
.team-mark img { width: 100%; height: 100%; object-fit: contain; }
.team-mark.is-app { border-radius: 0; }
.team-mark--sm { width: 28px; height: 28px; border-radius: 8px; font-size: 14px; }
.team-mark--lg { width: 64px; height: 64px; border-radius: 18px; font-size: 28px; }
.tabs { display: flex; gap: 2px; margin-left: 10px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.tabs button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 500 14px var(--font); cursor: pointer; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease); }
.tabs button.is-on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-1); }
.tabs button[hidden] { display: none; }
.auth-team { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 8px; border-radius: var(--r-md); background: var(--brand-50); }
.auth-team span:last-child { display: flex; flex-direction: column; text-align: left; }
.auth-team small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 820px) {
  /* two rows: the bar can't keep its desktop height, or the second row lies over the page */
  .topbar { flex-wrap: wrap; height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; row-gap: 0; }
  .tabs { order: 10; width: 100%; margin: 6px 0 0; }
  .tabs button { flex: 1; }
  .space-btn { max-width: 160px; }
}
@media (max-width: 480px) {
  .topbar { gap: 6px; }
  .space-btn { max-width: 130px; }
  .topbar .lang-switch .ls-btn { padding: 0 6px; }
  .user .balance { padding: 0 6px 0 4px; }
  .user .balance svg { display: none; }
  /* the space button already carries a mark: the logo would push the account onto a third row */
  .topbar .logo { display: none; }
}

/* every screen comes in the same way (Booth's layout speed) */
.stage:not([hidden]) { animation: stage-in var(--t-layout) var(--ease) both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage:not([hidden]) { animation: none; } }

/* ---------- the result: documents, speakers, chat ---------- */
.res-aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.res-aside .res-side { position: static; }
.res-side[hidden] { display: none; }
.side-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.res-head h1 { cursor: text; }
.res-make { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; border-radius: var(--r-md); background: var(--surface-2); }
.res-make[hidden] { display: none; }
.md { display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; line-height: 1.6; }
.md:empty { display: none; }
.md h3 { font-size: 18px; margin-top: 10px; }
.md h3:first-child { margin-top: 0; }
.md ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.md table { width: 100%; border-collapse: collapse; font-size: 14px; }
.md th, .md td { padding: 8px 10px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.md th { background: var(--surface-2); font-weight: 600; border-top: 0; }
.md .table-wrap { border: 1px solid var(--line); border-radius: var(--r-sm); overflow-x: auto; }
.md .spk-name { font-weight: 600; color: var(--brand-500); }
.ts { padding: 0 4px; border: 0; border-radius: 6px; background: var(--brand-50); color: var(--brand-500); font-size: 12px; cursor: pointer; }
.ts:hover { background: var(--brand-100); }
.ms-line-head .ts { background: transparent; color: var(--muted); padding: 0; }
.spk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.spk-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.spk-list li > .small { white-space: nowrap; }
.spk-list .field { height: 38px; }
.spk-list .spk-sug { grid-column: 2 / 4; justify-self: start; height: 28px; padding: 0 10px; border: 1px dashed var(--brand-300); border-radius: 999px; background: var(--brand-50); color: var(--brand-500); font: 500 13px var(--font); cursor: pointer; }
.spk-sug.is-low { opacity: 0.7; }
.spk-dot { width: 10px; height: 10px; border-radius: 50%; }
.spk-bg-0 { background: #23805f; } .spk-bg-1 { background: #c98a14; } .spk-bg-2 { background: #3a5bc7; } .spk-bg-3 { background: #b4402c; } .spk-bg-4 { background: #7a45b8; } .spk-bg-5 { background: #1f7a93; }
.field--area { height: auto; padding: 8px 12px; }
.field--area textarea { width: 100%; border: 0; outline: 0; resize: vertical; background: transparent; font: inherit; color: var(--text); }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { height: 30px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--text-2); font: 13px var(--font); cursor: pointer; transition: border-color var(--t-hover), background var(--t-hover); }
.chip-btn:hover { border-color: var(--brand-300); background: var(--brand-50); }
.chat-log { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.chat-log:empty { display: none; }
.chat-msg { padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.5; animation: reveal 0.3s var(--ease) both; }
.chat-msg.is-user { align-self: flex-end; max-width: 85%; background: var(--brand-700); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.is-model { align-self: flex-start; max-width: 95%; background: var(--surface-2); border-bottom-left-radius: 4px; }
.chat-msg .md, .chat-msg p { font-size: 14px; }
.chat-form { display: flex; gap: 6px; align-items: center; }
.chat-form .field { flex: 1; height: 42px; }
.chat-form.is-loading .chat-send { opacity: 0.4; pointer-events: none; }
.chat-send { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-700); color: #fff; }

/* ---------- the library ---------- */
.stage--library { max-width: 960px; }
.lib-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.lib-head h1, .team-head h1 { font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
.lib-search { width: min(360px, 100%); }
.lib-lock { padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 620px; }
.lib-lock[hidden] { display: none; }
.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-day { margin: 14px 0 2px; }
.lib-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 18px; border: 1px solid transparent; text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); animation: reveal 0.35s var(--ease) both; }
.lib-item:hover { border-color: var(--brand-300); transform: translateY(-1px); }
.lib-item b { font-size: 16px; font-weight: 600; }
.lib-quota { margin-top: 18px; }

/* ---------- the team ---------- */
.stage--team { max-width: 1120px; }
.team-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 16px; align-items: start; }
.tm-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.tm-card[hidden] { display: none; }
.tm-card h2 { font-size: 20px; }
.tm-wide { grid-column: 1 / -1; }
.tm-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tm-rows:empty { display: none; }
.tm-rows li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; }
.tm-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-inline .field { flex: 1; min-width: 160px; height: 40px; }
.tm-modes { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.tm-mode { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--t-hover); }
.tm-mode:has(input:checked) { border: 2px solid var(--brand-400); padding: 11px 13px; }
.tm-mode input { margin-top: 3px; accent-color: var(--brand-400); }
.tm-mode span { display: flex; flex-direction: column; }
.tm-mode small { color: var(--muted); font-size: 13px; }
.tm-keys { display: flex; flex-direction: column; gap: 10px; }
/* the account's pack buttons sit on the dark balance card; in the team card they're on white */
.tm-topup { margin: 0 0 12px; }
.tm-topup .acc-pack { border-color: var(--line-2); color: var(--brand-700); }
.tm-topup .acc-pack:hover { background: var(--surface-2); }
.tm-topup .acc-pack.is-featured { color: #0f2620; }
.tm-keys[hidden] { display: none; }
.tm-key { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); }
.tm-key .res-chip { align-self: flex-start; }
.tm-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tm-field > span:first-child { font-weight: 500; }
.tm-field .field { height: 40px; min-width: 220px; }
.tm-colors { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tm-color { width: 32px; height: 32px; border-radius: 10px; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); transition: transform var(--t-hover) var(--ease); }
.tm-color:hover { transform: scale(1.08); }
.tm-color.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.tm-color-input { width: 36px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.tm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tm-table th, .tm-table td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--line); }
.tm-table th { background: var(--surface-2); font-weight: 600; border-top: 0; }
.tm-table .num { text-align: right; font-family: var(--mono); }
.tm-table .ok { color: var(--ok); }
.tm-role { height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); font: inherit; }
.tm-member-note { margin: -6px 0 14px; }
.table-wrap { overflow-x: auto; }

/* ---------- the vault ---------- */
.vault-card { gap: 12px; }
.vault-ico { color: var(--brand-400); }
.vault-step { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.vault-step[hidden] { display: none; }
.vault-keep { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.vault-code { margin: 0; padding: 14px; border-radius: var(--r-md); background: var(--surface-2); font-size: 17px; letter-spacing: 0.06em; text-align: center; word-break: break-all; }
.vault-switch { align-self: flex-start; font-size: 13px; color: var(--brand-500); }
.team-slug .field-suffix { font-size: 13px; color: var(--muted); }

/* ---------- MeetScribe setup screen, tidied (Booth's file-source layout left gaps and overlaps here) ---------- */
/* No source-details row between the cards and the settings in MeetScribe: the gap has to be its own. */
.stage--setup .dz-src-wrap { margin-bottom: 18px; }
/* "Soon" sits in the card, under the text, not on the border; a card that's off fades its content, not its chip. */
.dz-src .src-card .src-chip { position: static; grid-column: 2; justify-self: start; margin-top: 6px; }
.dz-src .src-card:disabled { opacity: 1; background: var(--surface-2); border-color: transparent; }
.dz-src .src-card:disabled > :not(.src-chip) { opacity: 0.55; }
.dz-src .src-card:disabled .src-ico { background: var(--surface); }
/* A card that's off but could work elsewhere says why, in the same place as "Soon". */
.src-card .src-why { grid-column: 2; font-size: 12.5px; color: var(--amber-ink); margin-top: 4px; }
/* Each card as tall as it needs: the dark one no longer stretches the settings into an empty block. */
.stage--setup .setup-grid { align-items: start; }
.stage--setup .summary { position: sticky; top: 84px; }
.stage--setup .sum-space { display: none; }
.stage--setup .summary .btn--primary { margin-top: 4px; }
.opt-me input { width: 220px; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); font: 500 14px var(--font); color: var(--text); }
@media (max-width: 640px) {
  .dz-src .src-card .src-chip { display: inline-block; }
  .opt-me { flex-wrap: wrap; }
  .opt-me input { width: 100%; }
}


/* "A recording": drop zone and the row of files */
.file-zone[hidden] { display: none; }
.file-zone { display: flex; flex-direction: column; gap: 12px; }
.file-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line-2); border-radius: 16px; background: var(--surface-2); color: var(--brand-400);
  transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.file-drop b { color: var(--text); font-size: 16px; }
.file-drop:hover, .file-drop.is-over { border-color: var(--brand-400); background: var(--brand-50); }
.file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.file-list:empty { display: none; }
.file-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto 28px; align-items: center; gap: 10px; padding: 8px 10px 8px 14px;
  border-radius: 12px; background: var(--surface-2); font-size: 14px; animation: reveal var(--t-ui) var(--ease) both;
}
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file-len { color: var(--muted); font-size: 13px; }
.file-state { color: var(--muted); font-size: 13px; }
.file-item.is-working .file-state { color: var(--brand-400); }
.file-item.is-working .file-state::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--orange); animation: pulse 1.6s infinite; }
.file-item.is-done .file-state { color: var(--brand-400); font-weight: 600; }
.file-item.is-failed .file-state { color: var(--warn); }
.file-x { width: 28px; height: 28px; font-size: 18px; line-height: 1; }
.device-pick { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 300px; }
.device-pick select { max-width: 300px; }
@media (max-width: 640px) {
  .device-pick { align-items: stretch; max-width: none; width: 100%; }
  #opt-device-row { flex-wrap: wrap; }
  .file-item { grid-template-columns: minmax(0, 1fr) auto 28px; }
  .file-state { grid-column: 1 / -1; }
}

/* API key fields: plain text fields drawn as dots. A password field would make the browser's password
   manager fill every key field on the page with the saved sign-in password. */
.key-input { -webkit-text-security: disc; font-family: var(--mono, monospace); }

/* The meeting-language picker in a settings row: Booth's dropdown, row-sized, opening to the left. */
.lang-pick { flex: none; width: 230px; }
.lp--compact .lp-btn { height: 42px; font-size: 14.5px; }
.lp--compact .lp-pop { left: auto; right: 0; width: 310px; transform-origin: top right; }
.lp--compact .lp-pop.is-up { transform-origin: bottom right; }
.lp--compact .lp-list { max-height: 360px; }
@media (max-width: 640px) {
  .opt:has(.lang-pick) { flex-wrap: wrap; }
  .lang-pick { width: 100%; }
  .lp--compact .lp-pop { left: 0; right: auto; width: 100%; transform-origin: top left; }
}

/* Settings rows: every control in the right column has one width and one height, so their edges line up
   (name field, language picker, sound device, switches on the same right edge). */
:root { --opt-control-w: 260px; --opt-control-h: 42px; }
.settings .opt > :last-child:not(.switch) { flex: none; width: var(--opt-control-w); }
.opt-me input, .device-pick select, .lang-pick .lp-btn { width: 100%; height: var(--opt-control-h); box-sizing: border-box; border-radius: var(--r-sm); font-size: 14.5px; }
.opt-me input { padding: 0 14px; }
.lang-pick { width: var(--opt-control-w); }
.device-pick { max-width: none; align-items: stretch; }
.device-pick select { max-width: none; }
.device-pick .linklike { align-self: flex-end; }
@media (max-width: 640px) {
  .settings .opt:has(> :last-child:not(.switch)) { flex-wrap: wrap; }
  .settings .opt > :last-child:not(.switch) { width: 100%; }
}

/* Inline form rows (team access): field, select and button share one height. */
.tm-inline .field, .tm-inline .ms-select select, .tm-inline .btn { height: 40px; }
.tm-inline .btn { padding: 0 16px; }
.tm-inline .field input { height: 100%; }
/* The balance in the header never gives way to a long email: the email shortens instead. */
.user .balance { flex: none; }
.user-name { max-width: 170px; }

/* Team settings: two columns that fill independently (a short card no longer leaves a hole beside a tall one). */
.team-grid { display: block; columns: 2 460px; column-gap: 16px; }
.team-grid > * { break-inside: avoid; display: block; width: 100%; margin: 0 0 16px; }
.team-grid > [hidden] { display: none; }
@media (max-width: 640px) {
  /* Live screen: the recognition state gets its own line under the Transcript / Summary switch. */
  .rec-text-head { flex-wrap: wrap; row-gap: 6px; }
  .rec-text-head .stt-state { flex-basis: 100%; order: 3; }
  /* Team access rows: the field takes the line, then role and button share the next one equally. */
  .tm-inline .field { flex-basis: 100%; }
  .tm-inline .ms-select, .tm-inline .btn { flex: 1 1 0; }
  .tm-inline .ms-select select { width: 100%; }
}
@media (max-width: 640px) {
  .tm-inline .btn { height: auto; min-height: 40px; white-space: normal; line-height: 1.2; padding: 6px 12px; }
}

/* A folded stretch of talk that isn't about work, in the transcript. */
.ms-off details { border-radius: 12px; background: var(--surface-2); padding: 8px 12px; }
.ms-off summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; cursor: pointer; list-style: none; font-size: 14px; }
.ms-off summary::-webkit-details-marker { display: none; }
.ms-off summary::after { content: "▾"; margin-left: auto; color: var(--muted); transition: transform var(--t-ui) var(--ease); }
.ms-off details[open] summary::after { transform: rotate(180deg); }
.ms-off .ms-lines { margin: 10px 0 8px; opacity: 0.8; }
/* The question field gives way to the send button (a field's min-width pushed the button out of the card). */
.chat-form .field { min-width: 0; }
.chat-form .field input { width: 100%; min-width: 0; }
.chat-form .chat-send { flex: none; width: 42px; height: 42px; }

/* A setting row in the account sheet: text on the left, a two-way switch on the right. */
.acc-pref { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.acc-pref > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 480px) { .acc-pref { flex-direction: column; align-items: stretch; } }
/* The setting reads better stacked: its text across the row, the switch under it. */
.acc-pref { flex-direction: column; align-items: stretch; gap: 10px; }
.acc-pref .ms-seg { align-self: flex-start; }
.acc-pack { white-space: nowrap; font-size: 13.5px; padding: 0 6px; }

/* Library password: suggestions and the suggested one shown in the clear */
.vault-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; }
.vault-suggest[hidden], .vault-made[hidden] { display: none; }
.chip-btn { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: 500 13px var(--font); cursor: pointer; transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease); }
.chip-btn:hover { border-color: var(--brand-300); background: var(--brand-50); }
.vault-made { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 12px; background: var(--brand-50); animation: reveal var(--t-ui) var(--ease) both; }
.vault-made .mono { font-size: 15px; font-weight: 600; color: var(--brand-700); overflow-wrap: anywhere; }
.vault-made p { grid-column: 1 / -1; margin: 0; }

/* Work running in this tab: a bar at the bottom that doesn't go away while it runs */
.busy-bar { position: fixed; z-index: 60; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 99px; background: var(--brand-700); color: #fff; font: 500 14px var(--font);
  box-shadow: var(--shadow-2); }
.busy-bar[hidden] { display: none; }
.busy-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--orange); animation: pulse 1.6s infinite; }
@media (max-width: 480px) { .busy-bar { border-radius: 16px; bottom: 12px; font-size: 13px; } }
.settings .opt .ms-select select { width: 100%; height: var(--opt-control-h); }

/* ---------- Team settings, on one grid ---------- */
:root { --tm-control: var(--opt-control-w); }  /* one control width for every setting row */
.stage--team { max-width: 1180px; }
.team-grid { columns: 2 440px; column-gap: 20px; }
.team-grid > .tm-card { margin: 0 0 20px; }
.team-wide { margin-top: 0; }
.tm-card { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; }
.tm-card > h2, .tm-card .side-head h2 { margin: 0; font-size: 20px; }
.tm-card > p.small { margin: -6px 0 0; line-height: 1.5; }
.tm-card > h2 + p.small { margin-top: -8px; }
/* a setting: its name on the left, one control of one width on the right */
.tm-field { display: grid; grid-template-columns: minmax(0, 1fr) var(--tm-control); align-items: center; gap: 12px; font-size: 15px; }
.tm-field > :last-child { width: 100%; min-width: 0; }
.tm-field .ms-select select, .tm-field .field input { width: 100%; height: 42px; box-sizing: border-box; }
.tm-field .field { height: 42px; }
/* domain and invitation rows share their columns: what | role | action */
.tm-grid3 { display: grid; grid-template-columns: minmax(0, 1fr) 150px 140px; align-items: center; gap: 8px; }
.tm-grid3 .field, .tm-grid3 .ms-select select, .tm-grid3 .btn { height: 42px; width: 100%; box-sizing: border-box; }
.tm-grid3 .field input { height: 100%; }
.tm-grid3 .btn { padding: 0 12px; }
.tm-grid-label { font-size: 14.5px; color: var(--text-2); }
/* rules and invitations: compact rows */
.tm-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tm-rows:empty { display: none; }
.tm-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 4px 6px 4px 14px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.tm-rows li button { flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; }
.tm-rows li button:hover { background: var(--surface); color: var(--warn); }
/* colours: one row of swatches that wraps instead of running into the edge */
.tm-colors { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.tm-colors > * { width: 30px; height: 30px; flex: none; }
.tm-field .tm-inline { justify-content: flex-end; flex-wrap: nowrap; }
.tm-field .tm-inline .btn { height: 38px; }
/* members: the table scrolls inside its card on a narrow screen instead of spilling out */
.tm-wide .table-wrap { overflow-x: auto; margin: 0 -4px; }
.tm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tm-table th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--muted); padding: 8px 10px; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.tm-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tm-table td:first-child { overflow-wrap: anywhere; }
.tm-table select { height: 34px; }
@media (max-width: 640px) {
  .tm-card { padding: 20px 18px; }
  .tm-field { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tm-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tm-grid3 > :first-child { grid-column: 1 / -1; }
  .tm-colors { justify-content: flex-start; }
  .tm-field .tm-inline { justify-content: flex-start; }
}
.tm-field:has(.tm-colors) { grid-template-columns: auto minmax(0, 1fr); }
.tm-colors { flex-wrap: nowrap; }
@media (max-width: 640px) { .tm-colors { flex-wrap: wrap; } }
@media (max-width: 640px) {
  .tm-field:has(.tm-colors) { grid-template-columns: minmax(0, 1fr); }
  /* members: a card per person instead of a table squeezed to letters */
  .tm-table thead { display: none; }
  .tm-table, .tm-table tbody, .tm-table tr { display: block; width: 100%; }
  .tm-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tm-table td { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; text-align: left !important; }
  .tm-table td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .tm-table td[data-label]::before { content: attr(data-label); font-size: 11.5px; color: var(--muted); font-weight: 500; }
  .tm-table td:last-child:empty { display: none; }
  .tm-table td:last-child { grid-column: 1 / -1; align-items: flex-start; }
  .tm-wide .table-wrap { overflow: visible; margin: 0; }
}

/* ---------- Fixes found by tools/layout_check.mjs ---------- */
/* "Was it useful? Yes / No": words, not icons, so the button grows with the word */
.rate-btn { width: auto; min-width: 40px; padding: 0 12px; }
/* the result's Minutes / Recap / Transcript switch: on a narrow phone the three share the width */
.res-doc .ms-seg { max-width: 100%; }
@media (max-width: 380px) {
  .res-doc .ms-seg { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .res-doc .ms-seg button { padding: 0 6px; font-size: 13px; }
}
@media (max-width: 380px) {
  .tm-grid3 .btn { white-space: normal; line-height: 1.15; height: auto; min-height: 42px; }
}
/* A grid column of 1fr can't get narrower than its widest word: on a 320 px phone the sign-in page and the
   team's header scrolled sideways. */
@media (max-width: 1100px) { .view--signin { grid-template-columns: minmax(0, 1fr); } }
.signin-card, .signin-body { min-width: 0; }
.team-head > div { min-width: 0; }
.team-head h1, #tm-host { overflow-wrap: anywhere; }
.tm-invite-key { font-size: 13.5px; color: var(--text-2); }
.tm-invite-key[hidden] { display: none; }

/* Team settings: two explicit columns whose last cards stretch, so both end at the same line (CSS columns
   left a hole under the shorter one). */
.team-grid.team-cols { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-bottom: 20px; }
.team-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.team-col > .tm-card { margin: 0; }
.team-col > .tm-card:last-child { flex: 1; }
@media (max-width: 900px) { .team-grid.team-cols { grid-template-columns: minmax(0, 1fr); } }
.tm-table th, .tm-table th.num { font-family: var(--font); font-size: 12.5px; font-weight: 600; }
.tm-table th.num, .tm-table td.num { text-align: right; }
.tm-colors > input[type="color"] { border-radius: 50%; padding: 0; overflow: hidden; border: 1px solid var(--line-2); }
.tm-colors > input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.tm-colors > input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.res-doc hr { border: 0; border-top: 1px solid var(--line-2); margin: 18px 0 8px; }

/* ---------- The app's dropdown (select.js) wherever a <select> was ---------- */
.ms-select .lp, .lang-pick .lp { width: 100%; }
.ms-select { background: none !important; }
.settings .lp-btn, .tm-card .lp-btn, .tm-grid3 .lp-btn, .acc-pref .lp-btn { height: var(--opt-control-h); font-size: 14.5px; }
.lp .lp-pop { min-width: 100%; width: max-content; max-width: min(360px, calc(100vw - 32px)); left: auto; right: 0; transform-origin: top right; }
.lp .lp-pop.is-up { transform-origin: bottom right; }
.lp-list li[data-i] { height: 38px; }
.lp--sm .lp-btn { height: 34px; padding: 0 10px; gap: 6px; font-size: 13.5px; }
.lp.is-disabled .lp-btn { opacity: 0.6; cursor: default; }
.lp-btn:disabled { cursor: default; }
@media (max-width: 640px) { .lp .lp-pop { left: 0; right: auto; transform-origin: top left; } }

/* Password fields (fields.js): the eye, and whether a repeat matches */
.field-eye .eye-slash { display: none; }
.field-eye.is-on .eye-slash { display: inline; }
.key-input.is-shown { -webkit-text-security: none; }
.pw-match { margin: -4px 2px 0; font-size: 13px; color: var(--warn); text-align: left; }
.pw-match.is-ok { color: var(--brand-500); }
.pw-match[hidden] { display: none; }

/* a file being transcribed: its row fills up (upload is the first half, recognition the second) */
.file-item.is-working { position: relative; overflow: hidden; }
.file-item.is-working::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--pct, 0%); background: var(--orange); transition: width var(--t-ui) var(--ease); }

/* "Advanced" on the setup screen (Booth's block): a closed row with chips of what's on */
.settings .adv { margin-top: 0; }
.settings .adv summary { padding: 14px 0 12px; }
.settings .adv-chip { height: 24px; font-size: 12px; }
.opt.is-soon .opt-title .src-chip { position: static; margin-left: 6px; vertical-align: 2px; }
.opt.is-soon .switch { opacity: 0.45; }

/* The meeting's player (player.js; .player is Booth's video player), as in the design: a pill, a round play button, a thin brand bar, mono time */
.ms-player-audio { display: none !important; }
.ms-player { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--surface-2); }
.ms-player[hidden] { display: none; }
.ms-player-play { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--brand-700); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: transform var(--t-hover) var(--ease), background var(--t-hover) var(--ease); }
.ms-player-play:hover { transform: scale(1.05); }
.ms-player-play:active { transform: scale(0.96); }
.ms-player-play svg { margin-left: 2px; }
.ms-player.is-playing .ms-player-play svg { margin-left: 0; }
.ms-player-track { position: relative; flex: 1; min-width: 80px; height: 22px; cursor: pointer; touch-action: none; outline: 0; }
.ms-player-track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 3px; background: var(--brand-100); }
.ms-player-fill { position: absolute; left: 0; top: 8px; height: 6px; border-radius: 3px; background: var(--brand-400); }
.ms-player-knob { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--brand-700); box-shadow: 0 0 0 3px var(--surface-2);
  opacity: 0; transform: scale(0.6); transition: opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); }
.ms-player-track:hover .ms-player-knob, .ms-player-track:focus-visible .ms-player-knob, .ms-player.is-playing .ms-player-knob { opacity: 1; transform: none; }
.ms-player-track:focus-visible::before { box-shadow: 0 0 0 3px var(--brand-100); }
.ms-player-time { flex: none; font-size: 13px; color: var(--text-2); }
.ms-player-speed { flex: none; height: 30px; min-width: 44px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.ms-player-speed:hover { border-color: var(--brand-300); }
@media (max-width: 420px) { .ms-player { gap: 10px; } .ms-player-speed { display: none; } }