/* ════════════════════════════════════════════════════════════
   VTS dashboard / account / billing / new / login — design
   handoff (sage/coral, Nunito + Plus Jakarta Sans). Shared by
   every signed-in page via pages.py's _SHARED_HEAD.

   The :root maps the legacy token names the existing components
   were written against onto the new palette, so panels, the
   transcript viewer, the queue, billing tables and login re-theme
   with no markup changes. The dashboard card is rebuilt to the
   mock's .t-card design.
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:#4a7870; --brand-dark:#335c56; --brand-mid:#6b9e96;
  --brand-light:#e3efed; --brand-pale:#f1f7f6;
  --cta:#d86035; --cta-dark:#b84d25; --cta-glow:rgba(216,96,53,.26);
  --ink:#19201f; --ink-2:#5b706c; --ink-3:#9ab5b1;
  --surface:#ffffff; --border-faint:#ecf3f2;
  --r1:12px; --r2:20px; --r3:28px; --r4:36px;
  --font-heading:'Nunito', sans-serif;
  --sh-xs:0 1px 4px rgba(25,32,31,.05);
  --sh-sm:0 2px 12px rgba(25,32,31,.07);
  --sh-md:0 6px 30px rgba(25,32,31,.10);

  /* Legacy aliases → new palette (re-themes existing components) */
  --bg:#f5f4f1; --bg-card:#ffffff; --bg-nav:rgba(245,244,241,.92);
  --text:#19201f; --text-2:#5b706c; --text-3:#9ab5b1;
  --accent:#4a7870; --accent-pale:#e3efed;
  --ok:#0d8a4f; --ok-pale:#e6f6ee;
  --warn:#c47a1e; --warn-pale:#fbf0e0;
  --err:#cf3030; --err-pale:#fbe9e9;
  --border:#dae6e4; --border-2:#c2d4d1;
  --fH:'Nunito', sans-serif; --fB:'Plus Jakarta Sans', sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--fB); font-size: 15px; line-height: 1.6;
  background: var(--bg); color: var(--ink); min-height: 100vh;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── NAV (re-skins .vts-header markup to the mock nav) ── */
.vts-header {
  position: sticky; top: 0; z-index: 100; background: var(--bg-nav);
  border-bottom: 1px solid var(--border-faint);
  box-shadow: 0 2px 20px rgba(25,32,31,.06);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.vts-header-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 52px;
  height: 62px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
}
.vts-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.vts-logo:hover { text-decoration: none; }
.vts-logo-img {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; display: block;
}
.vts-logo-text {
  font-family: var(--font-heading); font-weight: 700; font-size: 20px;
  color: var(--ink); letter-spacing: .025em; text-transform: lowercase;
}
.header-right { display: flex; align-items: center; gap: 16px; }
.header-user { font-size: 13px; color: var(--ink-2); font-weight: 400; }
.hdr-pro-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  color: var(--cta); background: rgba(216,96,53,.12);
  border: 1px solid rgba(216,96,53,.30);
  padding: 3px 8px; border-radius: 100px;
  line-height: 1;
}
.nav-balance {
  font-size: 12px; font-weight: 500; color: var(--brand);
  background: var(--brand-light); padding: 5px 14px; border-radius: 100px;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--fB); font-weight: 500; cursor: pointer;
  border: none; outline: none; transition: all .18s ease;
  padding: 11px 22px; font-size: 14px; border-radius: 100px;
  background: var(--brand); color: #fff; text-decoration: none; line-height: 1;
}
.btn:hover { background: var(--brand-dark); transform: translateY(-1px); text-decoration: none; box-shadow: 0 4px 16px rgba(74,120,112,.28); }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--sm { padding: 8px 16px; font-size: 13px; }
.btn--full { width: 100%; }
.btn--secondary { background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--border); }
.btn--secondary:hover { background: var(--surface); border-color: var(--brand-mid); color: var(--ink); box-shadow: none; transform: none; }
.btn--danger { background: none; color: #c04444; border: 1.5px solid rgba(192,68,68,.2); }
.btn--danger:hover { background: #fff5f5; border-color: rgba(192,68,68,.45); box-shadow: none; transform: none; }
/* Mock button variants */
.btn-xs { font-size: 12px; padding: 6px 12px; border-radius: var(--r1); }
.btn-sm { font-size: 13px; padding: 8px 18px; border-radius: 100px; }
.btn-md { font-size: 14px; padding: 11px 22px; border-radius: 100px; }
.btn-xs, .btn-sm, .btn-md {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--fB); font-weight: 500; border: none; text-decoration: none;
  white-space: nowrap; transition: all .18s; line-height: 1;
}
.btn-primary { background: var(--cta); color: #fff; }
.btn-primary:hover { background: var(--cta-dark); transform: translateY(-1px); box-shadow: 0 6px 22px var(--cta-glow); text-decoration: none; }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(74,120,112,.28); text-decoration: none; }
.btn-outline { background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--border); }
/* Reset the inherited .btn:hover (which fills the bg dark-green); keep the
   outline white so the brand-colored text stays high-contrast. */
.btn-outline:hover { background: var(--surface); border-color: var(--brand); color: var(--brand); box-shadow: none; transform: none; text-decoration: none; }

/* ── TAB NAV (full-width band; restyles .acct-nav) ── */
.tab-nav { background: var(--surface); border-bottom: 1px solid var(--border-faint); }
.acct-nav {
  max-width: 1120px; margin: 0 auto; padding: 0 52px;
  display: flex; gap: 0; align-items: stretch; border-bottom: none;
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.acct-nav a {
  display: inline-flex; align-items: center; height: 50px;
  font-family: var(--fB); font-size: 14px; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 2.5px solid transparent; margin-right: 32px; padding: 0 2px;
  white-space: nowrap; transition: color .15s, border-color .15s;
}
.acct-nav a:hover { color: var(--ink); text-decoration: none; }
.acct-nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* ── MAIN / PAGE HEADER (restyles .dash-wrap / .dash-hero) ── */
.dash-wrap { max-width: 1120px; margin: 0 auto; padding: 40px 52px 80px; }
.dash-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.dash-hero h1 {
  font-family: var(--font-heading); font-size: 30px; font-weight: 700;
  color: var(--ink); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 4px;
}
.dash-hero .sub { color: var(--ink-3); font-size: 13px; }

/* ── EMPTY STATE ── */
.empty {
  background: var(--surface); border: 1px solid var(--border-faint);
  border-radius: var(--r3); box-shadow: var(--sh-xs);
  padding: 56px 32px; text-align: center;
}
.empty h2 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.empty p { color: var(--ink-2); font-size: 14px; line-height: 1.6; max-width: 360px; margin: 0 auto 20px; }

/* ── TRANSCRIPT LIST + CARD (mock .t-card) ── */
.t-list, .grid { display: flex; flex-direction: column; gap: 10px; }
.t-card {
  background: var(--surface); border: 1px solid var(--border-faint);
  border-radius: var(--r3); box-shadow: var(--sh-xs);
  display: grid; grid-template-columns: 158px 1fr 196px;
  align-items: stretch; overflow: hidden;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.t-card:hover { box-shadow: var(--sh-sm); border-color: var(--border); transform: translateY(-1px); }
.t-thumb {
  min-height: 112px; background: #1e1b18;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; flex-shrink: 0;
  background-size: cover; background-position: center;
}
.t-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.18) 0%, transparent 60%);
  pointer-events: none;
}
.t-thumb.audio { background: var(--brand-pale); }
.t-thumb.audio::after { display: none; }
.t-thumb-badge {
  position: absolute; top: 9px; left: 9px; z-index: 1;
  font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
}
.t-thumb-badge.yt { background: rgba(0,0,0,.45); color: rgba(255,255,255,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.t-thumb-badge.mp3 { background: var(--brand-light); color: var(--brand); }
.play-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand); border: 1.5px solid rgba(255,255,255,.72);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 2;
  box-shadow: 0 8px 22px rgba(25,32,31,.28), 0 0 0 1px rgba(0,0,0,.12);
}
.play-icon svg,
.play-icon path { fill: #fff; }
.t-body {
  padding: 18px 22px; min-width: 0;
  display: flex; flex-direction: column; gap: 5px; justify-content: flex-start;
}
.t-title {
  font-family: var(--font-heading); font-size: 15px; font-weight: 600;
  color: var(--ink); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.t-channel { font-size: 12px; color: var(--ink-2); }
.t-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.t-tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 100px; white-space: nowrap;
}
.t-tag-muted  { background: var(--bg); color: var(--ink-2); border: 1px solid var(--border-faint); }
.t-tag-brand  { background: var(--brand-pale); color: var(--brand); border: 1px solid var(--brand-light); }
.t-tag-accent { background: rgba(216,96,53,.08); color: var(--cta-dark); border: 1px solid rgba(216,96,53,.16); }
.t-actions {
  padding: 36px 20px 18px;
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; justify-content: center;
  border-left: 1px solid var(--border-faint); position: relative;
}
.t-timestamp { position: absolute; top: 10px; right: 16px; font-size: 11px; color: var(--ink-3); }
.t-btn-action { justify-content: center; border-radius: 100px; font-size: 12px; padding: 7px 14px; font-weight: 500; width: 100%; }
.t-delete {
  background: none; border: 1.5px solid rgba(192,68,68,.2); cursor: pointer;
  font-family: var(--fB); font-size: 12px; font-weight: 500; color: #c04444;
  padding: 6px 14px; text-align: center; border-radius: 100px;
  transition: all .15s; line-height: 1.4; width: 100%;
}
.t-delete:hover { background: #fff5f5; border-color: rgba(192,68,68,.45); }

/* ── PAGINATION ── */
.t-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 22px;
}
.t-pager-info { font-size: 13px; color: var(--ink-3); }
.t-pager-nav { display: flex; align-items: center; gap: 6px; }
.t-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 12px; border-radius: 100px;
  font-family: var(--fB); font-size: 13px; font-weight: 600;
  color: var(--ink-2); background: var(--surface);
  border: 1.5px solid var(--border); text-decoration: none;
  transition: all .15s; cursor: pointer;
}
.t-page:hover { border-color: var(--brand-mid); color: var(--ink); text-decoration: none; }
.t-page.is-active { background: var(--brand); border-color: var(--brand); color: #fff; cursor: default; }
.t-page.is-active:hover { background: var(--brand); color: #fff; }
.t-page.is-disabled { opacity: .45; pointer-events: none; }
.t-page.is-gap { border: none; background: none; min-width: auto; padding: 0 4px; color: var(--ink-3); font-weight: 500; }
.t-page-step { padding: 0 16px; }
@media (max-width: 600px) { .t-pager { justify-content: center; } }

/* ── WALLET / TX (billing + dashboard) ── */
.wallet-panel { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r3); padding: 24px; margin-bottom: 22px; box-shadow: var(--sh-xs); }
.wallet-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.wallet-label { color: var(--ink-2); font-size: 13px; margin: 0 0 2px; }
.wallet-balance { font-family: var(--font-heading); font-size: 28px; font-weight: 700; margin: 0; letter-spacing: -.02em; }
.wallet-note { color: var(--ink-2); font-size: 13px; margin: 12px 0 0; line-height: 1.5; }
.tx-list { margin-top: 14px; border-top: 1px solid var(--border-faint); padding-top: 10px; }
.tx { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.tx-kind { color: var(--ink-2); text-transform: capitalize; }
.tx-amt.pos { color: var(--ok); font-weight: 600; }
.tx-amt.neg { color: var(--err); font-weight: 600; }
.tx-empty { color: var(--ink-2); font-size: 13px; margin: 12px 0 0; }
.dash-topup-box { display: flex; align-items: stretch; gap: 8px; }
.dash-topup-err { color: var(--err); font-size: 13px; margin: 8px 0 0; }
#dash-topup-amount { border: 0; outline: 0; background: transparent; font-size: 16px; font-weight: 600; width: 70px; color: var(--ink); }

/* ── PANELS / KV / STATS / TXN (account + billing) ── */
.panel { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r3); padding: 28px; margin-bottom: 22px; box-shadow: var(--sh-xs); }
.panel h2 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; }
.panel .psub { color: var(--ink-2); font-size: 13px; margin: 0 0 18px; line-height: 1.55; }
.kv { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-faint); gap: 16px; }
.kv.first { border-top: 0; }
.kv .k { color: var(--ink-2); font-size: 13px; }
.kv .v { font-weight: 600; font-size: 15px; }
.acct-input { padding: 10px 14px; font-family: var(--fB); font-size: 15px; border: 1.5px solid var(--border); border-radius: 10px; outline: 0; min-width: 200px; background: var(--surface); color: var(--ink); }
.acct-input:focus { border-color: var(--brand); }
.acct-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acct-msg { font-size: 13px; margin: 12px 0 0; }
.acct-msg.err { color: var(--err); }
.acct-msg.ok { color: var(--ok); }
.otp-input { letter-spacing: .35em; text-align: center; font-size: 20px; font-family: ui-monospace, monospace; }
#name-otp-stage { display: none; margin-top: 14px; }
#name-otp-stage.on { display: block; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; margin: 6px 0; }
.stat { background: var(--bg); border-radius: var(--r2); padding: 16px; }
.stat .n { font-family: var(--font-heading); font-size: 24px; font-weight: 700; }
.stat .l { color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.txn-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.txn-table th { text-align: left; color: var(--ink-2); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--border); font-size: 12px; white-space: nowrap; }
.txn-table td { padding: 9px 8px; border-bottom: 1px solid var(--border-faint); vertical-align: top; }
.txn-id { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3); word-break: break-all; }
.txn-amt.pos { color: var(--ok); font-weight: 600; }
.txn-amt.neg { color: var(--err); font-weight: 600; }
.danger-zone { margin-top: 8px; padding: 16px 18px; border: 1px solid #f3c7c2; background: #fef3f2; border-radius: var(--r2); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.danger-zone span { color: #912018; font-size: 13px; line-height: 1.5; }
.topup-input-wrap { display: flex; align-items: center; gap: 4px; border: 1.5px solid var(--border); border-radius: 10px; padding: 6px 12px; background: var(--surface); }
.topup-input-wrap:focus-within { border-color: var(--brand); }
.topup-cur { color: var(--ink-2); font-size: 16px; }
#bill-amount { border: 0; outline: 0; background: transparent; font-size: 16px; font-weight: 600; width: 80px; color: var(--ink); }

/* ── TRANSCRIPT VIEWER MODAL ── */
.tv-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(15,14,13,.55); display: none; align-items: center; justify-content: center; padding: 24px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tv-overlay.on { display: flex; }
/* The whole card scrolls as ONE — video, tabs, transcript, foot — so the
   scrollbar spans the entire modal and the video isn't pinned. */
.tv-card { background: var(--surface); border-radius: 18px; width: min(820px,100%); max-height: 86vh; overflow-y: auto; overflow-x: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); }
.tv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border-faint); }
/* Long social-video descriptions get saved as titles (Facebook does this).
   Clamp to 2 lines with ellipsis so the close button stays reachable and the
   modal layout stays predictable. */
.tv-head h3 { flex: 1; min-width: 0; font-family: var(--font-heading); font-size: 17px; font-weight: 700; margin: 0; letter-spacing: -.01em; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tv-close { flex-shrink: 0; }
.tv-close { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--ink-2); cursor: pointer; padding: 0 4px; }
.tv-tabs { display: flex; gap: 4px; padding: 10px 18px 0; }
.tv-tab { padding: 8px 14px; font-family: var(--fB); font-size: 13px; font-weight: 500; color: var(--ink-2); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; }
.tv-tab:hover { color: var(--ink); }
.tv-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tv-body { margin: 0; padding: 20px 22px; white-space: pre-wrap; word-break: break-word; font-family: var(--fB); font-size: 14px; line-height: 1.7; color: var(--ink); background: var(--bg); }
.tv-body.mono { font-family: ui-monospace, monospace; white-space: pre; font-size: 13px; }
.tv-edit { display: block; width: 100%; min-height: 320px; margin: 0; padding: 20px 22px; border: 0; outline: 0; resize: vertical; font-family: var(--fB); font-size: 14px; line-height: 1.7; color: var(--ink); background: var(--bg); box-sizing: border-box; }
.tv-edit:focus { box-shadow: inset 0 0 0 2px var(--brand); }
.tv-edit.mono { font-family: ui-monospace, monospace; font-size: 13px; }
.tv-edit[hidden] { display: none; }
.tv-edit-msg { margin: 0; padding: 8px 22px; font-size: 13px; color: var(--ink-2); background: var(--bg); }
.tv-edit-msg.is-error { color: var(--err); }
.tv-edit-msg[hidden] { display: none; }
/* .btn sets display:inline-flex which would otherwise override the
   HTML `hidden` attribute on Edit/Save/Cancel — be explicit. */
.tv-actions .btn[hidden] { display: none; }

/* Karaoke-style follow-along highlight. Each transcript paragraph
   (Plain / Timestamps) or SRT cue is wrapped in a .tv-cue span so the
   timeupdate handler can toggle .is-playing on the active one. */
.tv-cue { cursor: pointer; border-radius: 3px; transition: background-color .15s ease; }
.tv-cue:hover { background: var(--brand-pale); }
/* Active cue: dark-brand fill + white text for maximum contrast
   against the off-white body bg and the surrounding dark transcript
   text. Shadow padding makes the highlight a touch wider than the
   text bounds so it reads as a "spotlight" rather than a tight box. */
.tv-cue.is-playing { background: var(--brand-dark); color: #fff; box-shadow: 0 0 0 3px var(--brand-dark); }
.tv-foot { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--border-faint); }
.tv-dl { display: flex; gap: 8px; flex-wrap: wrap; }
.tv-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.tv-media { padding: 16px 22px 0; }
.tv-media:empty { display: none; }
.tv-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r2); overflow: hidden; background: #000; }
/* YouTube Shorts are vertical (9:16). Constrain by height so they
   don't tower over the modal, and center horizontally since the
   derived width is much narrower than the modal. */
.tv-embed.is-short { width: auto; aspect-ratio: 9/16; max-height: 60vh; max-width: 100%; margin: 0 auto; }
.tv-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tv-media audio { width: 100%; display: block; }
.tv-media .tv-orig { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--brand); padding: 8px 0; }

/* ── BATCH QUEUE (new) ── */
.q-sum { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-2); padding: 0 0 14px; }
.q-sum span { white-space: nowrap; }
.q-sum strong { color: var(--ink); }
.q-sum .qs-skipped strong { color: var(--warn); }
.q-sum .qs-error strong { color: var(--err); }
.qjob { border: 1px solid var(--border-faint); border-left: 3px solid var(--border); border-radius: var(--r2); padding: 14px 16px; margin-bottom: 10px; background: var(--surface); }
.qjob.qs-done { border-left-color: var(--ok); }
.qjob.qs-error { border-left-color: var(--err); }
.qjob.qs-skipped { border-left-color: var(--warn); background: #fffaf2; }
.qjob.qs-transcribing, .qjob.qs-fetching { border-left-color: var(--brand); }
.qjob-r1 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qjob-title { font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.qpill { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--ink-2); }
.qp-done { background: var(--ok-pale); color: var(--ok); }
.qp-error { background: var(--err-pale); color: var(--err); }
.qp-skipped { background: var(--warn-pale); color: var(--warn); }
.qp-transcribing, .qp-fetching { background: var(--brand-light); color: var(--brand); }
.qdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: qpulse 1s ease-in-out infinite; }
@keyframes qpulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }
.qjob-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.qchip { font-size: 12px; color: var(--ink-2); background: var(--bg); padding: 3px 9px; border-radius: 7px; }
.qcost { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 7px; background: var(--bg); color: var(--ink-2); }
.qcost.free { background: var(--ok-pale); color: var(--ok); }
.qcost.paid { background: var(--brand-light); color: var(--brand); }
.qjob-stage { font-size: 12px; color: var(--ink-3); }
.qjob-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.qbar { margin-top: 10px; height: 5px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.qbar span { display: block; height: 100%; width: 40%; border-radius: 99px; background: var(--brand); animation: qslide 1.2s ease-in-out infinite; }
@keyframes qslide { 0%{margin-left:-42%} 60%{margin-left:100%} 100%{margin-left:100%} }
.qmsg { margin-top: 10px; font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 9px; }
.qmsg.err { background: var(--err-pale); color: var(--err); }
.qmsg.skip { background: var(--warn-pale); color: #92600a; }

/* ── LOGIN ── */
.login-wrap { max-width: 420px; margin: 64px auto 80px; padding: 0 24px; }
.login-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r3); padding: 36px 32px; box-shadow: var(--sh-md); }
.login-card h1 { font-family: var(--font-heading); font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 8px; }
.login-card .sub { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0 0 24px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; letter-spacing: .02em; }
.field input { width: 100%; padding: 12px 14px; font-family: var(--fB); font-size: 15px; background: var(--surface); color: var(--ink); border: 1.5px solid var(--border); border-radius: 10px; outline: none; transition: border-color .15s; }
.field input:focus { border-color: var(--brand); }
.field input.otp { font-family: ui-monospace, monospace; font-size: 22px; text-align: center; letter-spacing: .4em; padding: 14px; }
.msg { padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
.msg-ok { background: var(--ok-pale); color: var(--ok); }
.msg-err { background: var(--err-pale); color: var(--err); }
.helper { text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 16px; }
.helper a { font-weight: 600; }
#code-form { display: none; }
#code-form.is-active { display: block; }
#email-form.is-hidden { display: none; }
.dev-box { background: #fffbf0; border: 1px dashed #e5b85c; border-radius: 8px; padding: 10px 12px; margin-top: 14px; font-size: 12px; color: #7a5b1c; word-break: break-all; }
.dev-box a { color: #7a5b1c; text-decoration: underline; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .vts-header-inner { padding: 0 24px; }
  .acct-nav { padding: 0 24px; }
  .dash-wrap { padding: 28px 24px 60px; }
  .t-card { grid-template-columns: 120px 1fr 168px; }
}
@media (max-width: 600px) {
  .vts-header-inner { padding: 0 16px; gap: 10px; }
  .header-user { display: none; }
  .acct-nav { padding: 0 16px; }
  .acct-nav a { margin-right: 20px; font-size: 13px; }
  .dash-wrap { padding: 20px 16px 60px; }
  .dash-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dash-hero h1 { font-size: 24px; }
  .dash-hero > a.btn, .dash-hero .btn { width: 100%; justify-content: center; }
  .t-card { grid-template-columns: 1fr; }
  .t-thumb { min-height: 170px; max-height: 200px; }
  .t-body { padding: 14px 16px 12px; }
  .t-actions { border-left: none; border-top: 1px solid var(--border-faint); padding: 12px 16px 16px; gap: 8px; }
  .t-timestamp { position: static; text-align: left; margin-bottom: 0; }
}
@media (max-width: 380px) {
  .nav-balance { display: none; }
  .t-thumb { min-height: 140px; }
}

/* ════════════ ACCOUNT PAGE ════════════ */
.acct-page { max-width: 760px; margin: 0 auto; }
.page-header { margin-bottom: 32px; }
.page-title { font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 5px; }
.page-meta { font-size: 13px; color: var(--ink-3); }
.section-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r3); box-shadow: var(--sh-xs); overflow: hidden; margin-bottom: 16px; transition: box-shadow .2s; }
.section-card:hover { box-shadow: var(--sh-sm); }
.card-header { padding: 24px 28px 0; }
.card-title { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.card-desc { font-size: 13px; color: var(--ink-2); line-height: 1.65; padding-bottom: 20px; border-bottom: 1px solid var(--border-faint); }
.avatar-row { display: flex; align-items: center; gap: 16px; padding: 20px 28px; border-bottom: 1px solid var(--border-faint); }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-light) 0%, var(--brand-pale) 100%); border: 2px solid var(--brand-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-initials { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--brand); }
.avatar-info { flex: 1; min-width: 0; }
.avatar-name { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.avatar-email { font-size: 13px; color: var(--ink-2); }
.field-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid var(--border-faint); gap: 16px; }
.field-row:last-child { border-bottom: none; }
.field-label { font-size: 13px; color: var(--ink-2); font-weight: 500; flex-shrink: 0; }
.field-value { font-size: 14px; color: var(--ink); font-weight: 600; text-align: right; word-break: break-word; }
.field-value.muted { color: var(--ink-2); font-weight: 400; }
.form-area { padding: 20px 28px 24px; }
.form-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.form-row { display: flex; gap: 10px; align-items: center; }
.form-input { flex: 1; min-width: 0; font-family: var(--fB); font-size: 14px; color: var(--ink); background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r2); padding: 10px 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.form-input:focus { border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(74,120,112,.1); background: var(--surface); }
.form-input::placeholder { color: var(--ink-3); }
.form-input.otp-input { letter-spacing: .35em; text-align: center; font-family: ui-monospace, monospace; }
#name-otp-stage { display: none; }
#name-otp-stage.on { display: block; }
.session-card { background: var(--brand-pale); border: 1px solid var(--brand-light); border-radius: var(--r2); padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.session-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; box-shadow: 0 0 0 3px var(--brand-light); }
.session-text { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.session-text strong { color: var(--brand); font-weight: 600; }
.danger-area { padding: 20px 28px 24px; }
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(192,68,68,.04); border: 1px solid rgba(192,68,68,.15); border-radius: var(--r2); padding: 16px 20px; }
.danger-text { font-size: 13px; color: #9b3434; line-height: 1.6; flex: 1; }
.btn-danger { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--fB); font-weight: 500; background: var(--surface); color: #c04444; border: 1.5px solid rgba(192,68,68,.25); font-size: 13px; padding: 9px 20px; border-radius: 100px; transition: all .18s; white-space: nowrap; }
.btn-danger:hover { background: #fff5f5; border-color: rgba(192,68,68,.55); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(192,68,68,.12); }
.btn-danger-solid { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-family: var(--fB); font-weight: 500; background: #c04444; color: #fff; border: none; font-size: 13px; padding: 10px 22px; border-radius: 100px; transition: all .18s; white-space: nowrap; }
.btn-danger-solid:hover { background: #a03333; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(192,68,68,.3); }
.acct-modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(25,32,31,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
.acct-modal-overlay.open { opacity: 1; pointer-events: all; }
.acct-modal { background: var(--surface); border-radius: var(--r4); padding: 36px; max-width: 420px; width: calc(100% - 40px); box-shadow: 0 24px 80px rgba(25,32,31,.22); transform: translateY(12px) scale(.97); transition: transform .22s; }
.acct-modal-overlay.open .acct-modal { transform: translateY(0) scale(1); }
.modal-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(192,68,68,.1); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.modal-title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.modal-body { font-size: 14px; color: var(--ink-2); line-height: 1.72; margin-bottom: 26px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 600px) {
  .acct-page .page-title { font-size: 24px; }
  .card-header { padding: 18px 20px 0; }
  .card-desc { padding-bottom: 16px; }
  .field-row { padding: 14px 20px; }
  .form-area, .danger-area { padding: 16px 20px 20px; }
  .avatar-row { padding: 16px 20px; }
  .form-row { flex-direction: column; align-items: stretch; }
  .danger-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ════════════ BILLING PAGE ════════════ */
.billing-layout { display: flex; flex-direction: column; gap: 16px; }
.billing-top { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.b-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r3); box-shadow: var(--sh-xs); }
.b-card-title { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--ink); }
.b-card-sub { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.wallet-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r3); box-shadow: var(--sh-xs); overflow: hidden; }
.wallet-hero { padding: 28px 28px 24px; background: linear-gradient(135deg, var(--brand-pale) 0%, var(--surface) 70%); border-bottom: 1px solid var(--border-faint); position: relative; overflow: hidden; }
.wallet-hero::after { content: ''; position: absolute; top: -30px; right: -20px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--brand-light) 0%, transparent 70%); opacity: .5; pointer-events: none; }
.wallet-hero-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.wallet-label-row { display: flex; flex-direction: column; gap: 3px; }
.wallet-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.wallet-status { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-light); color: var(--brand); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; flex-shrink: 0; }
.wallet-status-dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; box-shadow: 0 0 0 2px rgba(74,120,112,.25); }
.wallet-balance-amount { font-family: var(--font-heading); font-size: 52px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.025em; display: flex; align-items: baseline; gap: 3px; }
.wallet-balance-amount .cur { font-size: 26px; font-weight: 600; color: var(--ink-3); align-self: flex-start; margin-top: 8px; }
.wallet-balance-note { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.wallet-topup { padding: 22px 28px; }
.topup-label { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }
.topup-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.preset-btn { font-family: var(--fB); font-size: 14px; font-weight: 500; padding: 8px 18px; border-radius: 100px; border: 1.5px solid var(--border); background: var(--bg); color: var(--ink-2); cursor: pointer; transition: all .15s; }
.preset-btn:hover { border-color: var(--brand-mid); color: var(--brand); background: var(--brand-pale); }
.preset-btn.active { border-color: var(--brand); color: var(--brand); background: var(--brand-pale); font-weight: 600; }
.topup-row { display: flex; align-items: center; gap: 10px; }
.bill-input-wrap { display: flex; align-items: center; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r2); overflow: hidden; flex: 1; max-width: 160px; transition: border-color .15s; }
.bill-input-wrap:focus-within { border-color: var(--brand); background: var(--surface); }
.topup-prefix { padding: 0 11px; font-size: 14px; font-weight: 600; color: var(--ink-3); border-right: 1.5px solid var(--border-faint); line-height: 42px; user-select: none; }
.topup-input { flex: 1; padding: 0 12px; height: 42px; min-width: 0; font-family: var(--fB); font-size: 15px; font-weight: 600; color: var(--ink); border: none; outline: none; background: transparent; }
.topup-note { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.usage-card { padding: 24px 24px 22px; }
.usage-header { margin-bottom: 18px; }
.usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-card { background: var(--bg); border: 1px solid var(--border-faint); border-radius: var(--r2); padding: 16px 14px 14px; text-align: center; }
.stat-value { font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.02em; margin-bottom: 4px; }
.stat-label { font-size: 11px; color: var(--ink-3); font-weight: 500; letter-spacing: .04em; }
.usage-divider { height: 1px; background: var(--border-faint); margin: 18px 0; }
.usage-footnote { font-size: 12px; color: var(--ink-3); line-height: 1.6; display: flex; align-items: flex-start; gap: 7px; }
.usage-footnote svg { flex-shrink: 0; margin-top: 2px; color: var(--brand-mid); }
.rate-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.rate-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-pale); border: 1px solid var(--brand-light); color: var(--brand); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 100px; }
.rate-pill svg { color: var(--brand-mid); }
.tx-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r3); box-shadow: var(--sh-xs); overflow: hidden; }
.tx-header { padding: 24px 28px 20px; border-bottom: 1px solid var(--border-faint); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tx-count { font-size: 12px; color: var(--ink-3); font-weight: 500; background: var(--bg); padding: 4px 10px; border-radius: 100px; border: 1px solid var(--border-faint); white-space: nowrap; }
.tx-table { width: 100%; border-collapse: collapse; }
.tx-table thead th { padding: 16px 28px 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: left; border-bottom: 1px solid var(--border-faint); }
.tx-table thead th.right { text-align: right; }
.tx-table tbody td { padding: 13px 28px; font-size: 13.5px; border-bottom: 1px solid var(--border-faint); vertical-align: middle; }
.tx-table tbody tr:last-child td { border-bottom: none; }
.tx-table tbody tr { transition: background .12s; }
.tx-table tbody tr:hover { background: var(--bg); }
.tx-date { color: var(--ink-2); white-space: nowrap; font-size: 13px; }
.tx-date .tx-time { color: var(--ink-3); font-size: 12px; }
.tx-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 3px 10px; border-radius: 100px; white-space: nowrap; }
.tx-badge.topup { background: var(--brand-light); color: var(--brand); }
.tx-badge.charge { background: rgba(216,96,53,.08); color: var(--cta-dark); }
.tx-badge.topup::before { content: ''; width: 5px; height: 5px; background: var(--brand); border-radius: 50%; }
.tx-badge.charge::before { content: ''; width: 5px; height: 5px; background: var(--cta); border-radius: 50%; }
.tx-amount { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; text-align: right; font-size: 14px; }
.tx-amount.positive { color: var(--brand); }
.tx-amount.negative { color: #bf4040; }
.tx-id { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-3); letter-spacing: .04em; white-space: nowrap; }
.tx-footer { padding: 14px 28px 16px; border-top: 1px solid var(--border-faint); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tx-page-info { font-size: 13px; color: var(--ink-3); }
.tx-pages { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pg-btn { font-family: var(--fB); font-size: 13px; font-weight: 500; min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--r1); border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: all .15s; user-select: none; line-height: 1; }
.pg-btn:hover:not(:disabled) { border-color: var(--brand-mid); color: var(--brand); background: var(--brand-pale); }
.pg-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.pg-btn:disabled { opacity: .32; cursor: default; pointer-events: none; }
.chart-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--r3); box-shadow: var(--sh-xs); }
.chart-header { padding: 22px 28px 18px; border-bottom: 1px solid var(--border-faint); display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chart-legend { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.legend-swatch-cost { width: 12px; height: 12px; border-radius: 3px; background: var(--brand); flex-shrink: 0; }
.legend-swatch-items { width: 10px; height: 10px; border-radius: 50%; background: var(--cta); flex-shrink: 0; }
.chart-body { padding: 20px 28px 16px; position: relative; }
.chart-tooltip { position: absolute; pointer-events: none; background: var(--ink); color: #fff; border-radius: 10px; padding: 11px 15px; font-size: 12px; line-height: 1.65; white-space: nowrap; box-shadow: 0 10px 36px rgba(25,32,31,.28); opacity: 0; transition: opacity .12s; z-index: 20; min-width: 154px; }
.chart-tooltip.visible { opacity: 1; }
.tooltip-date { font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 9px; }
.tooltip-row { display: flex; justify-content: space-between; gap: 22px; padding: 1.5px 0; }
.tooltip-label { color: rgba(255,255,255,.5); }
.tooltip-val { font-weight: 600; }
.tooltip-val.t-cost { color: #7fd4c8; }
.tooltip-val.t-items { color: #f5a880; }
.tooltip-val.t-min { color: rgba(255,255,255,.9); }
@media (max-width: 900px) { .billing-top { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .wallet-balance-amount { font-size: 42px; }
  .tx-id { display: none; }
  .tx-table thead th, .tx-table tbody td { padding: 11px 16px; }
  .tx-header { padding: 18px 16px 14px; }
  .wallet-hero, .wallet-topup, .usage-card, .chart-header, .chart-body { padding-left: 18px; padding-right: 18px; }
}

/* ── RECORDINGS LIBRARY (slice 5 of docs/RECORDINGS_PRD.md) ── */
/* Storage meter — green by default, amber ≥80%, red ≥100%. */
.rec-meter { background: var(--card); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 14px 18px; margin: 0 0 18px;
  display: grid; gap: 8px; }
.rec-meter-track { height: 6px; background: var(--brand-pale);
  border-radius: 100px; overflow: hidden; }
.rec-meter-fill { height: 100%; background: var(--brand);
  border-radius: 100px; transition: width .25s ease, background .25s ease; }
.rec-meter-fill.warn { background: #d4a017; }
.rec-meter-fill.full { background: #c04444; }
.rec-meter-text { font-size: 13px; color: var(--muted); font-weight: 500; }

/* Empty-state install banner. */
.rec-empty { text-align: center; padding: 64px 32px; background: var(--card);
  border: 1px solid var(--border-soft); border-radius: 16px; }
.rec-empty h2 { font-family: var(--fH); font-size: 22px;
  margin: 0 0 8px; color: var(--ink); }
.rec-empty-sub { font-size: 15px; color: var(--muted); max-width: 480px;
  margin: 0 auto 24px; line-height: 1.55; }
.rec-empty-actions { display: flex; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 32px; }
.rec-empty-foot { font-size: 13px; color: var(--muted); max-width: 480px;
  margin: 0 auto; line-height: 1.55; }

/* Recording cards — design source: Claude Design / VTS Dashboard.html
   §"RECORDINGS GRID". Reuses .t-card / .t-thumb / .t-body / .t-actions
   from the transcripts list; rec-only bits are layered on with the
   .rec or #r-list scope so the transcripts page stays untouched. */
#r-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(312px, 1fr));
  gap: 16px;
}
#r-list .t-card { grid-template-columns: 1fr; }
#r-list .t-thumb { min-height: 0; aspect-ratio: 4 / 3; width: 100%; }
#r-list .t-body { padding: 16px 18px 4px; }
#r-list .t-actions {
  border-left: none;
  border-top: 1px solid var(--border-faint);
  padding: 30px 18px 16px;
  gap: 7px;
}

.t-thumb.rec {
  background:
    radial-gradient(120% 90% at 75% 15%, rgba(255,255,255,.06) 0%, transparent 55%),
    var(--rec-tint, #243330);
  cursor: pointer;
}
.t-thumb.rec::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%);
  pointer-events: none;
}
/* Thumbnail hover: play icon scales up while staying brand-colored so it
   remains visible over both dark and light video frames. */
.t-thumb.rec:hover .play-icon {
  transform: scale(1.1);
  background: var(--brand-dark);
  border-color: rgba(255,255,255,.86);
  box-shadow: 0 10px 26px rgba(25,32,31,.34), 0 0 0 1px rgba(0,0,0,.16);
}
.play-icon { transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.t-thumb-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.rec-dur {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  font-family: 'Space Grotesk', monospace;
  font-size: 10.5px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 2px 7px; border-radius: 100px;
}
.rec-cam {
  position: absolute; bottom: 8px; left: 8px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7);
  background: radial-gradient(70% 70% at 50% 38%, #cdb89a 0%, #9c8463 65%, #6f5c43 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.rec-expired-pill {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: 9px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 100px;
  background: rgba(0,0,0,.55); color: rgba(255,255,255,.85);
}

/* Source line under the title — "Entire Screen · 84 MB" etc. */
.t-source {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2);
}
.t-source svg { color: var(--ink-3); flex-shrink: 0; }

/* Transcribing status tag with a pulsing CTA-colored dot. */
.t-tag-progress {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 100px; white-space: nowrap;
  background: rgba(216,96,53,.08); color: var(--cta-dark);
  border: 1px solid rgba(216,96,53,.16);
}
.prog-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cta);
  animation: progpulse 1.1s ease-in-out infinite;
}
@keyframes progpulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

/* Per-card action-stack timestamp (absolute top-right of .t-actions). */
.t-timestamp {
  position: absolute; top: 10px; right: 16px;
  font-size: 11px; color: var(--ink-3);
}
.t-btn-action {
  justify-content: center; border-radius: 100px;
  font-size: 12px; padding: 7px 14px; font-weight: 500; width: 100%;
}
.t-delete {
  background: none; border: 1.5px solid rgba(192,68,68,.2);
  cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 500; color: #c04444;
  padding: 6px 14px; text-align: center; border-radius: 100px;
  transition: all .15s; line-height: 1.4; width: 100%;
}
.t-delete:hover {
  background: #fff5f5; border-color: rgba(192,68,68,.45);
}

/* Page header (Recordings) — matches the design's typography scale. */
.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px; gap: 16px;
}
.page-title {
  font-family: var(--fH); font-size: 30px; font-weight: 700;
  color: var(--ink); line-height: 1.1; margin-bottom: 4px;
}
.page-meta { font-size: 13px; color: var(--ink-3); }

/* Cost preview inside the orange CTA — keeps duration + price secondary. */
.rec-cost { font-size: 11px; opacity: 0.8; font-weight: 400; }

/* Video player + summary overlay. */
.rec-player-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7);
  display: none; align-items: center; justify-content: center; z-index: 100;
  padding: 24px; }
.rec-player-overlay.is-open { display: flex; }
.rec-player-card { background: var(--card); border-radius: 16px;
  padding: 20px; max-width: 900px; width: 100%; max-height: 92vh;
  overflow-y: auto; position: relative; }
.rec-player-close { position: absolute; top: 12px; right: 14px;
  background: transparent; border: 0; font-size: 28px; cursor: pointer;
  color: var(--muted); line-height: 1; padding: 4px 10px; }
.rec-player-close:hover { color: var(--ink); }
.rec-player-card h3 { font-family: var(--fH); font-size: 18px;
  margin: 0 0 12px; padding-right: 40px; }
#rec-player-video { width: 100%; max-height: 60vh; background: #000;
  border-radius: 8px; display: block; margin-bottom: 16px; }
.rec-player-summary { background: var(--brand-pale); border-radius: 8px;
  padding: 14px 18px; margin-bottom: 12px; font-size: 14px;
  line-height: 1.55; white-space: pre-wrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Share recording modal. */
.rec-share-overlay {
  position: fixed; inset: 0; z-index: 240;
  display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(25,32,31,.48);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rec-share-overlay.is-open { display: flex; }
.rec-share-card {
  width: min(460px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--surface); border-radius: var(--r3); position: relative;
  padding: 22px 22px 20px; box-shadow: 0 18px 60px rgba(25,32,31,.22);
  transform: translateY(8px) scale(.985); transition: transform .18s ease;
}
.rec-share-overlay.is-open .rec-share-card { transform: translateY(0) scale(1); }
.rec-share-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border-radius: 50%; border: 0; background: transparent; color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, color .15s;
}
.rec-share-close svg { width: 16px; height: 16px; }
.rec-share-close:hover { background: var(--brand-pale); color: var(--ink); }
.rec-share-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin: 0 40px 4px 0;
}
.rec-share-title {
  font-family: var(--fH); font-size: 18px; font-weight: 700;
  color: var(--ink); line-height: 1.25; margin: 0 40px 14px 0;
  letter-spacing: -.01em;
}
.rec-share-permission {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--brand-pale); border: 1px solid var(--border);
  border-radius: var(--r1); margin-bottom: 12px;
}
.rec-share-globe {
  width: 28px; height: 28px; border-radius: 50%; color: var(--brand);
  background: var(--brand-light); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.rec-share-globe svg { width: 14px; height: 14px; }
.rec-share-permission-copy strong {
  display: block; font-size: 13px; font-weight: 700; line-height: 1.3;
  color: var(--ink);
}
.rec-share-permission-copy span {
  display: block; font-size: 12px; color: var(--ink-2); line-height: 1.35;
}
.rec-share-select-wrap { position: relative; min-width: 0; }
.rec-share-select {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--border); border-radius: 999px; background: #fff;
  color: var(--brand); font-family: var(--fB); font-size: 12px;
  font-weight: 700; padding: 7px 26px 7px 12px; cursor: pointer;
  outline: none;
}
.rec-share-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(74,120,112,.12); }
.rec-share-select-wrap::after {
  content: ''; position: absolute; right: 11px; top: 50%;
  width: 6px; height: 6px; border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand); transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.rec-share-link-row {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 8px; align-items: center; margin-bottom: 14px;
}
.rec-share-url {
  min-width: 0; height: 38px; border: 1.5px solid var(--border);
  border-radius: 999px; color: var(--ink-2); font-size: 12.5px;
  padding: 0 14px; outline: none; background: #fff;
}
.rec-share-url:focus { border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(74,120,112,.1); }
.rec-share-copy {
  height: 38px; padding: 0 16px; border-radius: 999px; border: 0;
  background: var(--brand); color: #fff; font-family: var(--fB);
  font-size: 12.5px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.rec-share-copy svg { width: 14px; height: 14px; }
.rec-share-copy:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(74,120,112,.18); }
.rec-share-options { margin-bottom: 14px; }
.rec-share-toggle-row {
  min-height: 38px; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-family: var(--fB); font-size: 13px; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--border-faint);
  position: relative;
}
.rec-share-toggle-row:last-child { border-bottom: 0; }
.rec-share-toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.rec-share-switch {
  width: 38px; height: 22px; border-radius: 999px;
  background: #dce9e7; position: relative; flex-shrink: 0;
  transition: background .15s; cursor: pointer;
}
.rec-share-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(25,32,31,.18); transition: transform .15s;
}
.rec-share-toggle-row input:checked + .rec-share-switch { background: var(--brand); }
.rec-share-toggle-row input:checked + .rec-share-switch::after { transform: translateX(16px); }
.rec-share-via {
  font-size: 10px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.rec-share-actions {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px;
}
.rec-share-action {
  height: 64px; border-radius: var(--r1); border: 1.5px solid var(--border-faint);
  background: #fff; color: var(--ink-2); cursor: pointer;
  font-family: var(--fB); font-size: 12px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; transition: border-color .15s,
  color .15s, transform .15s, box-shadow .15s;
}
.rec-share-action svg { width: 18px; height: 18px; }
.rec-share-action:hover:not(:disabled) {
  color: var(--brand); border-color: var(--brand-mid);
  transform: translateY(-1px); box-shadow: var(--sh-sm);
}
.rec-share-action:disabled { opacity: .45; cursor: not-allowed; }

/* ── Invitees editor (share_access='invited') ── */
.rec-share-invitees {
  margin-bottom: 14px;
  padding: 14px;
  background: var(--brand-pale);
  border: 1px solid var(--border);
  border-radius: var(--r1);
}
.rec-share-invitees-head { margin-bottom: 10px; }
.rec-share-invitees-head strong {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--ink); margin-bottom: 2px;
}
.rec-share-invitees-head span {
  font-size: 12px; color: var(--ink-2); line-height: 1.4;
}
.rec-share-invite-form {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 6px; margin-bottom: 10px;
}
.rec-share-invite-input {
  height: 34px; min-width: 0;
  border: 1.5px solid var(--border); border-radius: 999px;
  padding: 0 14px; font-size: 12.5px; color: var(--ink);
  background: #fff; outline: none;
  font-family: var(--fB);
}
.rec-share-invite-input:focus {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(74,120,112,.1);
}
.rec-share-invite-btn {
  height: 34px; padding: 0 14px; border-radius: 999px; border: 0;
  background: var(--brand); color: #fff;
  font-family: var(--fB); font-size: 12.5px; font-weight: 700;
  cursor: pointer; transition: background .15s, transform .15s;
}
.rec-share-invite-btn:hover:not(:disabled) {
  background: var(--brand-dark); transform: translateY(-1px);
}
.rec-share-invite-btn:disabled { opacity: .55; cursor: not-allowed; }
.rec-share-invitees-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.rec-share-invitee {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; background: #fff;
  border: 1px solid var(--border-faint); border-radius: var(--r1);
  font-size: 12.5px; color: var(--ink);
}
.rec-share-invitee-email {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.rec-share-invitee-status {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; letter-spacing: .04em;
}
.rec-share-invitee-status.is-accepted {
  color: #0d8a4f; background: #e6f6ee;
}
.rec-share-invitee-status.is-pending {
  color: var(--ink-2); background: var(--brand-pale);
}
.rec-share-invitee-remove {
  width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-3);
  cursor: pointer; font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.rec-share-invitee-remove:hover {
  background: #fdecec; color: #c04444;
}
.rec-share-invitee-empty {
  font-size: 12px; color: var(--ink-3);
  padding: 6px 2px;
}

@media (max-width: 640px) {
  #r-list { grid-template-columns: 1fr; }
  .page-header { flex-wrap: wrap; align-items: flex-start; }
  .page-title { font-size: 24px; }
  .rec-share-overlay { padding: 12px; align-items: flex-start; }
  .rec-share-card { border-radius: var(--r2); padding: 18px; margin: 12px 0; }
  .rec-share-permission { grid-template-columns: auto 1fr; }
  .rec-share-select-wrap { grid-column: 1 / -1; }
  .rec-share-link-row { grid-template-columns: 1fr; }
  .rec-share-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ── Install-the-extension page (/recordings/install) ── */

.install-hero {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 22px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border-faint);
  border-radius: var(--r3);
  box-shadow: var(--sh-xs);
}
.install-hero-icon {
  width: 72px; height: 72px;
  border-radius: 22px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(74,120,112,.32);
  flex-shrink: 0;
}
.install-hero-body h2 {
  font-family: var(--fH);
  font-size: 22px; font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.install-hero-body p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
/* Inline links in the hero copy get the brand color; .btn anchors
   are excluded so their own background+color combo (orange CTA,
   outline secondary) keeps reading correctly. */
.install-hero-body a:not(.btn) { color: var(--brand); font-weight: 600; text-decoration: none; }
.install-hero-body a:not(.btn):hover { text-decoration: underline; }
/* Belt-and-suspenders: nail .btn-primary's white text inside the
   hero so the orange CTA never inherits the brand-green link color. */
.install-cta-row .btn-primary,
.install-cta-row .btn-primary:hover { color: #fff; }
.install-cta-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px;
}
.install-cta-pill {
  font-size: 10px; font-weight: 800;
  background: #fff;
  color: var(--cta-dark);
  padding: 3px 8px; border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-left: 6px;
  /* The pill sits on the orange CTA; the small tint lifts it off the
     button slightly so it doesn't blend into the rounded shape. */
  box-shadow: 0 1px 2px rgba(25,32,31,.18);
}
/* Tighten the outline button next to the orange CTA so the secondary
   action reads clearly. Using the brand color (not the default ink-2)
   gives the link weight even at smaller sizes. */
.install-cta-row .btn-outline {
  color: var(--brand);
  border-color: var(--brand-mid);
  font-weight: 600;
}
.install-cta-row .btn-outline:hover {
  background: var(--brand-pale);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.install-cta-sub {
  font-size: 12.5px; color: var(--ink-3);
  margin: 10px 0 0;
}

.install-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.install-card {
  background: var(--surface);
  border: 1px solid var(--border-faint);
  border-radius: var(--r3);
  padding: 20px 22px;
  box-shadow: var(--sh-xs);
}
.install-card-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.install-card-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.install-card-title strong {
  display: block;
  font-family: var(--fH);
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
}
.install-card-pill {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 100px;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.install-card-pill.ok {
  background: var(--brand-light); color: var(--brand);
}
.install-card-pill.soon {
  background: rgba(216,96,53,.10); color: var(--cta-dark);
}
.install-card-steps {
  list-style: none;
  counter-reset: steps;
  margin: 0; padding: 0;
}
.install-card-steps li {
  position: relative;
  padding: 6px 0 6px 30px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  counter-increment: steps;
}
.install-card-steps li::before {
  content: counter(steps);
  position: absolute; top: 6px; left: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand-pale);
  color: var(--brand);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fH);
}
.install-card-steps code {
  font-family: 'Space Grotesk', monospace;
  font-size: 12.5px;
  background: var(--bg);
  border: 1px solid var(--border-faint);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}
.install-card-steps strong { color: var(--ink); font-weight: 700; }

@media (max-width: 640px) {
  .install-hero { grid-template-columns: 1fr; }
  .install-hero-icon { width: 56px; height: 56px; }
}

/* ── Dark top navigation — match the marketing nav (#1f2c29 @ ~90%) ── */
.vts-header {
  background: #1f2c29e6;
  border-bottom-color: rgba(255,255,255,.10);
  box-shadow: 0 2px 24px rgba(0,0,0,.22);
}
.vts-header .vts-logo-text { color: #fff; }
.vts-header .header-user { color: rgba(255,255,255,.72); }
.vts-header .btn--secondary {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.32);
}
.vts-header .btn--secondary:hover {
  background: rgba(255,255,255,.08); border-color: #fff; color: #fff;
}