/* Hallmark · shape: stage hero over the kept sections · genre: atmospheric · theme: brand (the duanma3 look in the AIEdit colours) · redesign: full (/), restyle (every other customer page)
 * paper: oklch(15.5% 0.018 285) · accent: oklch(88% 0.2 155) · display: Barlow Condensed · body: Be Vietnam Pro · hero: custom stage · nav: edge-aligned bar · footer: mast · signature: the clip going from raw to finished through four wired boxes
 * axes: dark/display-condensed/chromatic-green · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the system is borrowed from duanma3 by request; the stage carries this product's own flow and its own two clips */
/* Hallmark · waive 44c · the hero copy sits between the two clips and the four boxes run under it · the wired stage is the home page composition the owner asked to take from duanma3 */
/* Hallmark · waive 79 · pricing and login are restyled with their layout kept · the plans and the login form start right under their page heads */
/* Hallmark · waive 85 · the login page holds only its sign-in form · signing in is the whole job of the login page */
/* Hallmark · waive 72 · the measured text is the answer inside a closed FAQ details · each answer about the video service stays hidden until opened, it is not crowded */
/* Hallmark · waive 49b · the wrapping links are Blog post titles and links inside FAQ answers · a Blog title about TikTok video is a full sentence and wraps like a heading on a phone */
/* Hallmark · answered F19 · Be Vietnam Pro 300/400/600 and Barlow Condensed 700/800 are the duanma3 type set the owner asked for */
/* Hallmark · answered F7 · the pill is the duanma3 shape for controls, chips and progress tracks; boxes keep the card radius */
/* Hallmark · answered F25 · the pricing comparison scrolls sideways on a phone with its row names pinned */
/* Hallmark · finish-review: subagent · 8 findings · 6 resolved, 1 partial (finding 5, gate 4: billing plans now hairline rows; the choice tiles are form controls with an outline and no fill), 1 declined (uppercase nav: the owner chose sentence-case menus) · gap: the footer seller fields are placeholder local settings for the owner to fill */
/* Hallmark · hero-review: fix · 5 findings · 5 resolved (phone first screen shows both clips; review thumbnail cover-fit and a HUD crop; AI dựng shows three real frames; facts on one line at 1920; header button label in one span) */
/* Hallmark · dismissed 40 · the disabled button is exempt from contrast and carries opacity, the cursor and the native attribute */
/* Hallmark · dismissed 41 · .style-card img holds a picture, never text */
/* Hallmark · dismissed kept · the csrf_token hidden fields carry a per-session value; /login and /signup still post them */
/* Hallmark · dismissed 77 · login, signup and pricing are restyled and keep their sections */
/* Hallmark · dropped "AI dựng video cho creator Việt" · 54 names it, the eyebrow over the hero head */
/* Hallmark · dropped the hero drop box line "Video quay dọc bằng điện thoại · tạo tài khoản 1 phút để bắt đầu" and the hero's "Xem bảng giá" button · 58, the hero budget; the drop now lands on the hero's primary button and /pricing stays in the nav and the pricing section */
/* Hallmark · reworded "Video tiếp theo, để AI dựng" to "Video tiếp theo / để AI dựng" · the closing head set on two colour blocks */

/* AIEdit customer stylesheet: dark only, mobile first, no build step.
   /admin keeps the previous light/dark stylesheet (admin-base.css). Colours, faces and spacing come from the tokens
   below; neon green marks the actions, violet the second voice (selected states, links, the second headline block). */

@font-face { font-family: "Be Vietnam Pro"; src: url("/static/fonts/BeVietnamPro-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("/static/fonts/BeVietnamPro-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Be Vietnam Pro"; src: url("/static/fonts/BeVietnamPro-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/fonts/BarlowCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/static/fonts/BarlowCondensed-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* surfaces, darkest to lightest (violet-tinted) */
  --bg: oklch(15.5% 0.018 285);
  --surface-sunken: oklch(12.5% 0.016 285);
  --surface: oklch(19.5% 0.022 285);
  --surface-raised: oklch(23.5% 0.026 285);
  --surface-overlay: oklch(28% 0.03 285);
  --line: oklch(29% 0.026 285);
  --line-strong: oklch(44% 0.032 285);
  --field-edge: oklch(56% 0.03 285);
  --dot: oklch(30% 0.03 285);
  --video-black: oklch(7% 0.004 285);
  --mast: oklch(49% 0.05 290);
  --qr-bg: oklch(99.4% 0.002 285);
  /* text */
  --text: oklch(96% 0.008 285);
  --text-2: oklch(84% 0.02 285);
  --muted: oklch(70% 0.026 285);
  --text-disabled: oklch(52% 0.02 285);
  /* actions: neon green, dark ink on it */
  --accent: oklch(88% 0.2 155);
  --accent-hover: oklch(92% 0.16 155);
  --accent-active: oklch(81% 0.19 155);
  --accent-ink: oklch(22% 0.05 160);
  --accent-ring: oklch(42% 0.11 155);
  --accent-soft: oklch(26% 0.05 155);
  /* the second voice: violet */
  --primary: oklch(76% 0.14 293);
  --primary-hover: oklch(82% 0.11 293);
  --primary-ink: oklch(20% 0.07 293);
  --primary-ring: oklch(40% 0.1 293);
  --primary-soft: oklch(27% 0.06 293);
  --focus: var(--accent);
  /* states */
  --ok: oklch(82% 0.15 150);
  --ok-bg: oklch(27% 0.05 150);
  --warn: oklch(86% 0.13 85);
  --warn-bg: oklch(29% 0.05 85);
  --bad: oklch(74% 0.15 18);
  --bad-bg: oklch(27% 0.06 18);
  --busy: oklch(82% 0.1 293);
  --busy-bg: oklch(27% 0.06 293);
  --karaoke: oklch(86% 0.15 85);
  --on-video: oklch(97% 0.005 285);
  --video-veil: oklch(10% 0.01 285 / 0.72);
  /* "Đăng nhập bằng Google": Google's own dark-theme colours */
  --gsi-bg: #131314;
  --gsi-edge: #8e918f;
  --gsi-ink: #e3e3e3;
  --gsi-bg-hover: #1f1f20;
  --gsi-bg-active: #2a2a2c;

  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
  --text-hero: clamp(2.5rem, 2.4vw + 1.7rem, 4.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem);
  --text-title: clamp(1.125rem, 0.5vw + 0.95rem, 1.375rem);
  --text-lead: clamp(1.0625rem, 0.3vw + 0.98rem, 1.25rem);
  --text-page: clamp(1.75rem, 1.2vw + 1.3rem, 2.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --container: 1240px; --gutter: 16px; --app: 720px;
  --radius-card: 24px; --radius-box: 16px; --radius-field: 12px; --radius-small: 8px; --radius-pill: 999px;
  --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500;
  color-scheme: dark;
}
@media (min-width: 40rem) { :root { --gutter: 24px; } }
@media (min-width: 64rem) { :root { --gutter: 32px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-3xl); scrollbar-color: var(--line-strong) var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text); caret-color: var(--accent);
  font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; line-height: 1.6;
  -webkit-font-smoothing: antialiased; font-synthesis: none;
}
body.with-tabbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--primary-hover); }
b, strong { font-weight: 600; }
h1, h2, h3 { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { font-size: var(--text-page); font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; margin: var(--space-2xs) 0 var(--space-md); }
h2 { font-size: var(--text-lg); line-height: 1.3; margin: 0 0 var(--space-xs); }
h3 { font-size: var(--text-md); line-height: 1.35; margin: 20px 0 var(--space-xs); }
p { margin: var(--space-xs) 0; text-wrap: pretty; }
code, pre { font-family: var(--font-mono); font-size: 0.85em; }
img, video { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- app shell */
.container { max-width: var(--app); margin: 0 auto; padding: var(--space-lg) var(--gutter) var(--space-xl); }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; justify-content: space-around; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm) calc(var(--space-xs) + env(safe-area-inset-bottom));
  background: var(--surface-sunken); border-top: 1px solid var(--line);
}
.tab { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-xs) var(--space-2xs); border-radius: var(--radius-pill); color: var(--text-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.tab:hover { color: var(--text); background: var(--surface-raised); }
.tab.primary { background: var(--accent); color: var(--accent-ink); }
.tab.primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
@media (min-width: 760px) {
  body.with-tabbar { padding-bottom: 0; }
  .tabbar { display: none; }
}

.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-xs); }
.page-head h1, .page-head h2 { margin: 0; }
.crumbs { margin: 0 0 var(--space-xs); font-size: var(--text-sm); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.filename { word-break: break-word; }

/* cards and text */
.card { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; margin: 0 0 var(--space-md); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card.narrow { max-width: 440px; margin: var(--space-lg) auto; }
@media (min-width: 40rem) { .card { padding: var(--space-lg); } }
.hint { color: var(--muted); font-size: var(--text-sm); }
.small { font-size: var(--text-sm); }
.stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.row { display: flex; gap: var(--space-xs); align-items: center; }
.row.wrap { flex-wrap: wrap; }
.inline { display: inline; margin: 0; }
.list li, .prose li { margin: var(--space-xs) 0; }
.prose h2 { margin-top: 20px; }
.prose a { overflow-wrap: anywhere; }
.big-number { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }

/* messages */
.flash, .msg { border-radius: var(--radius-field); padding: var(--space-sm) var(--space-md); margin: 0 0 var(--space-sm); font-size: var(--text-sm); background: var(--surface-raised); color: var(--text); }
.msg.inline { display: inline-block; padding: var(--space-3xs) var(--space-xs); margin: 0 0 0 var(--space-xs); }
.flash.ok, .msg.ok { background: var(--ok-bg); color: var(--ok); }
.flash.bad, .msg.bad { background: var(--bad-bg); color: var(--bad); }
.flash.warn, .msg.warn { background: var(--warn-bg); color: var(--warn); }
.flash.info { background: var(--busy-bg); color: var(--busy); }

/* forms */
label { display: flex; flex-direction: column; gap: var(--space-xs); font-weight: 600; font-size: var(--text-sm); color: var(--text); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], input[type=tel], select, textarea {
  width: 100%; min-height: 44px; padding: var(--space-xs) var(--space-sm); font: inherit; font-size: var(--text-md); font-weight: 400; line-height: 1.5;
  color: var(--text); background: var(--surface-sunken); border: 1px solid var(--field-edge); border-radius: var(--radius-field);
  outline: 2px solid transparent; outline-offset: 1px;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
/* the native file picker (/styles, settings): its button as the secondary pill on the dark page */
input[type=file] { max-width: 100%; font: inherit; font-size: var(--text-sm); color: var(--muted); }
input[type=file]::file-selector-button {
  min-height: 40px; margin-right: var(--space-sm); padding: 0 var(--space-md); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--text); font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
input[type=file]:hover::file-selector-button { background: var(--surface-overlay); }
input[type=file]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, input:focus, select:focus, textarea:focus { outline-color: var(--focus); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; color: var(--text-disabled); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); }
label.check, label.choice { flex-direction: row; align-items: flex-start; gap: var(--space-sm); font-weight: 400; font-size: var(--text-md); }
label.check input, label.choice input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
legend { font-weight: 600; margin-bottom: var(--space-xs); padding: 0; }
.choices.cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); margin-bottom: var(--space-md); }
/* choice tiles are controls inside a panel: an outline, no fill of their own (one containment layer) */
.card-choice { border: 1px solid var(--line-strong); border-radius: var(--radius-box); padding: var(--space-sm); background: transparent; color: var(--text); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.card-choice:hover { border-color: var(--field-edge); }
.card-choice:has(input:checked) { border-color: var(--primary); color: var(--text); }
.card-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.card-choice.locked { opacity: 0.6; }
.card-choice small { color: var(--muted); }
.voiceover textarea { width: 100%; min-height: 9em; resize: vertical; }
.voiceover .hint.bad { color: var(--bad); }
.voice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-xs); border: 0; padding: 0; margin: 0; }
.voice-grid legend { font-weight: 600; margin-bottom: var(--space-xs); }
.voice-opt { display: flex; align-items: center; gap: var(--space-xs); border: 1px solid var(--line); border-radius: var(--radius-field); padding: var(--space-xs) var(--space-sm); background: transparent; color: var(--text); }
.voice-opt:has(input:checked) { border-color: var(--primary); color: var(--text); }
.voice-opt .voice-name { flex: 1; }

/* caption style picker: preview frames in a grid, the radio itself visually hidden */
.style-picker { margin: var(--space-2xs) 0 var(--space-md); }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-sm); }
.style-card { position: relative; gap: var(--space-xs); padding: var(--space-2xs); border: 2px solid var(--line); border-radius: var(--radius-field); cursor: pointer; font-weight: 400; background: transparent; color: var(--text); }
.style-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.style-card img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-small); background: var(--line); }
.style-card .style-name { font-size: var(--text-sm); line-height: 1.25; text-align: center; }
.style-card:hover { border-color: var(--line-strong); }
.style-card:has(input:checked) { border-color: var(--primary); color: var(--text); }
.style-card:has(input:checked) .style-name { font-weight: 600; }
.style-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- buttons */
.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 44px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--text); font: inherit;
  /* every button speaks in the display voice: the condensed capitals of the colour-block heads */
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--surface-overlay); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn.primary, .btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover, .btn.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn.primary:active, .btn.accent:active { background: var(--accent-active); border-color: var(--accent-active); }
.btn.outline { background: transparent; border: 2px solid var(--accent); color: var(--accent); }
.btn.outline:hover { background: var(--accent-soft); color: var(--accent-hover); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-raised); color: var(--text); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { color: var(--bad); background: var(--bad-bg); }
.btn.small { min-height: 36px; padding: 0 var(--space-md); font-size: var(--text-md); }
.btn.big { min-height: 52px; padding: 0 28px; font-size: 1.25rem; }
.btn.block { width: 100%; }
.btn[disabled], .btn.disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; background: var(--surface-raised); border-color: var(--line); color: var(--text-disabled); pointer-events: none; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.linklike:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* "Đăng nhập bằng Google": Google's dark theme (#131314 fill, #8E918F stroke, #E3E3E3 text), official G, Google Sans
   Medium 14/20 when the device has it (no web font is downloaded), else the system face. */
.gsi-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; min-height: 44px;
  padding: var(--space-sm) var(--space-sm); border: 1px solid var(--gsi-edge); border-radius: var(--radius-pill); background: var(--gsi-bg); color: var(--gsi-ink);
  font: 500 14px/20px "Google Sans", Roboto, var(--font-body); letter-spacing: 0.25px;
  text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out);
}
.gsi-btn:hover { background: var(--gsi-bg-hover); color: var(--gsi-ink); }
.gsi-btn:active { background: var(--gsi-bg-active); }
.gsi-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gsi-icon { display: inline-flex; flex: none; width: 20px; height: 20px; }
.gsi-text { overflow-wrap: anywhere; }
.or-divider { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0; color: var(--muted); font-size: var(--text-sm); }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.google-profile li span:last-child { overflow-wrap: anywhere; text-align: right; min-width: 0; }

/* ---------------------------------------------------------------- chips and progress */
.chip { display: inline-block; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; background: var(--busy-bg); color: var(--busy); white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.muted { background: var(--surface-raised); color: var(--muted); }
.chip.accent { background: var(--accent); color: var(--accent-ink); }
.chip.hot { background: var(--primary); color: var(--primary-ink); }
.progress { height: 8px; border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; margin: var(--space-sm) 0 var(--space-xs); }
.progress.big { height: 12px; }
.progress .bar { height: 100%; border-radius: inherit; background: var(--accent); }
.status-line { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.sub { color: var(--muted); font-size: var(--text-sm); }
.numbers { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- job list */
.jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
@media (min-width: 640px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.job { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-box); padding: var(--space-sm); transition: border-color var(--dur-short) var(--ease-out); }
.job:hover { border-color: var(--line-strong); }
.job-link { display: flex; gap: var(--space-sm); text-decoration: none; color: inherit; align-items: center; border-radius: var(--radius-small); }
.job-link:hover { color: inherit; }
.thumb { width: 54px; height: 96px; flex: none; border-radius: 10px; background: var(--surface-raised); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meta { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; align-items: flex-start; }
.meta .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.row-actions { display: flex; gap: var(--space-xs); justify-content: flex-end; margin-top: var(--space-xs); }
.empty { text-align: center; }

/* ---------------------------------------------------------------- review */
.player video { width: 100%; max-height: 70vh; aspect-ratio: 9 / 16; background: var(--video-black); border-radius: var(--radius-box); display: block; margin: 0 auto; }
.sentences { list-style: none; padding: 0; margin: var(--space-xs) 0 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.sentence { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-field); border: 1px solid var(--line); background: transparent; color: var(--text); }
.sentence .keep { flex-direction: column; align-items: center; gap: var(--space-3xs); font-weight: 400; }
.sentence .keep input { width: 24px; height: 24px; accent-color: var(--accent); }
.sentence .time { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.sentence .words { margin: 0; line-height: 1.9; }
.sentence:has(.keep input:not(:checked)) { background: var(--bad-bg); color: var(--text); }
.sentence:has(.keep input:not(:checked)) .words { text-decoration: line-through; opacity: 0.6; }
.word { background: none; border: 0; padding: 0 1px; margin: 0; font: inherit; color: inherit; cursor: pointer; border-radius: var(--space-2xs); text-decoration: inherit; }
.word:hover { background: var(--warn-bg); color: var(--warn); }
.word:focus-visible { background: var(--warn-bg); color: var(--warn); outline: 2px solid var(--focus); outline-offset: 1px; }
.word.fixed { background: var(--ok-bg); color: var(--ok); }
.total { font-size: var(--text-sm); }
.word-editor { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: var(--z-raised); border-color: var(--primary); }
.sticky-actions { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: var(--z-raised); }
.sticky-actions .btn { border-color: var(--accent); color: var(--accent); background: var(--surface-raised); }
@media (min-width: 760px) { .word-editor, .sticky-actions { bottom: var(--space-sm); } }
.stars { flex-direction: row; flex-wrap: wrap; gap: var(--space-xs); }
.stars legend { width: 100%; }
.star { flex-direction: row; align-items: center; gap: var(--space-2xs); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-sm); font-weight: 600; background: var(--surface-sunken); color: var(--text); }
.star:has(input:checked) { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }

/* publish, settings */
.platform textarea { font-size: var(--text-sm); }
.logo-preview { background: repeating-conic-gradient(var(--surface-overlay) 0% 25%, var(--surface-sunken) 0% 50%) 50% / 16px 16px; border-radius: var(--radius-field); padding: var(--space-sm); display: inline-block; margin-bottom: var(--space-xs); }
.logo-preview img { max-width: 160px; max-height: 120px; display: block; }
.glossary { display: flex; flex-direction: column; gap: var(--space-xs); }
.g-head, .g-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }
.g-head { font-weight: 600; font-size: var(--text-sm); color: var(--muted); }

/* key-value lists and tables */
.kv { list-style: none; padding: 0; margin: 0; }
.kv li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--line); }
.failure { border-top: 1px solid var(--line); padding-top: var(--space-sm); margin-top: var(--space-sm); }
.error-tail { max-height: 220px; overflow: auto; background: var(--surface-sunken); color: var(--text-2); padding: var(--space-sm); border-radius: var(--radius-small); white-space: pre-wrap; word-break: break-word; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--space-sm) var(--space-xs); border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-weight: 600; color: var(--text-2); }

/* ---------------------------------------------------------------- public site */
.skip-link { position: absolute; left: var(--space-xs); top: -60px; z-index: var(--z-toast); background: var(--accent); color: var(--accent-ink); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; text-decoration: none; }
.skip-link:focus-visible, .skip-link:focus { top: var(--space-xs); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* wide pages (home, pricing): one container from the header to the footer */
.site { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) var(--space-xl); }
.section { margin: var(--space-3xl) 0; }
/* the FAQ groups and the blog categories: each opens on a large light head, like the home page's sections */
.section-tight { margin: var(--space-2xl) 0; }
.section-tight > h2 { font-size: clamp(1.75rem, 1.6vw + 1.25rem, 2.75rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px; }
@media (min-width: 64rem) { .section-tight { margin: 120px 0; } .page-hero + .section-tight { margin-top: var(--space-2xl); } }
.section-title { font-size: var(--text-section); font-weight: 300; line-height: 1.08; letter-spacing: -0.025em; text-align: center; max-width: 22ch; margin: 0 auto var(--space-md); }
.section-lead { max-width: 52ch; margin: 0 auto var(--space-xl); text-align: center; color: var(--text-2); font-size: var(--text-lead); }
.page-hero { text-align: center; margin: var(--space-md) 0 var(--space-lg); }
.page-hero h1 { font-size: clamp(2.25rem, 2.6vw + 1rem, 3.75rem); line-height: 1.08; letter-spacing: -0.025em; margin: var(--space-lg) auto var(--space-sm); max-width: 20ch; }
.lead { font-size: var(--text-lead); line-height: 1.5; color: var(--text-2); max-width: 52ch; margin: var(--space-xs) auto; }
@media (min-width: 64rem) { .section { margin: 120px 0; } }

/* Headline on slanted colour blocks: <span class="cblock">line one</span>, cblock-2 for the violet block. The padding
   leaves room inside the block for the Vietnamese marks of capitals (Ồ above, the dot of Ộ, Ự below). */
.cblock {
  position: relative; isolation: isolate; display: inline-block; padding: 0.14em 0.3em 0.12em;
  font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--accent-ink);
}
.cblock::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0.16em; background: var(--accent); transform: skewX(-6deg); }
.cblock-2 { color: var(--primary-ink); }
.cblock-2::before { background: var(--primary); }

/* ---------------------------------------------------------------- home: the stage
   Four boxes wired in order: the raw clip, AI dựng, Bạn duyệt, the finished clip. stage.js runs the loop by flipping
   data-* attributes; the markup is the last frame, so the page is whole without script and under reduced motion. */
.hero-stage { position: relative; isolation: isolate; padding: var(--space-xl) 0 var(--space-2xl); }
.hero-stage::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 45%, var(--bg) 40%, transparent 100%); mask-image: radial-gradient(75% 70% at 50% 45%, var(--bg) 40%, transparent 100%);
}
/* phone: the copy, then the raw and the finished clip side by side, the two middle boxes under them (the wires
   run down, across and back up); tablet: the three clip columns under the copy; desktop: the copy between the clips */
.stg {
  --node-w: 100%;
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-md);
  grid-template-areas: "copy copy" "in out" "pair pair" "facts facts"; align-items: start;
}
.stg-copy { grid-area: copy; justify-self: center; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; max-width: 40rem; }
.stg-title {
  position: relative; isolation: isolate; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0.14em 0.3em 0;
  font-family: var(--font-display); font-size: var(--text-hero); font-weight: 800; line-height: 1; letter-spacing: 0;
  text-transform: uppercase; text-align: center; white-space: nowrap; color: var(--accent-ink); rotate: -1.5deg;
}
.stg-title::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 1.26em; border-radius: 0.16em; background: var(--accent); transform: skewX(-6deg); }
.stg-title .grad-text { position: relative; isolation: isolate; display: table; margin: 0.22em auto 0; padding: 0.14em 0.3em 0.12em; color: var(--primary-ink); rotate: 2.5deg; }
.stg-title .grad-text::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0.16em; background: var(--primary); transform: skewX(-6deg); }
.stg-lead { margin: var(--space-lg) auto 0; max-width: 44ch; }
.stg-copy .cta-row { justify-content: center; margin: var(--space-lg) 0 0; }
.stg-facts { grid-area: facts; justify-self: center; list-style: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); margin: var(--space-md) 0 0; padding: 0; color: var(--muted); font-size: var(--text-sm); }
@media (min-width: 40rem) {
  .stg-facts { flex-direction: row; gap: 0; white-space: nowrap; }
  .stg-facts li { padding: 0 var(--space-sm); border-left: 1px solid var(--line-strong); }
  .stg-facts li:first-child { border-left: 0; }
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm); }

.stg-in { grid-area: in; }
.stg-out { grid-area: out; }
.stg-in, .stg-out { width: var(--node-w); justify-self: center; margin-top: var(--space-xl); }
.stg-pair { grid-area: pair; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-md); margin-top: var(--space-xl); align-items: start; }
@media (max-width: 43.99rem) {
  /* two boxes a row on a phone: the middle boxes drop their side note and stack their parts */
  .stg-pair .stg-meta { display: none; }
  .stg .stg-facts { margin-top: var(--space-xl); }
  .stg .stg-rbody { flex-direction: column; }
  .stg .stg-rthumb { width: 100%; }
  .stg .stg-steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xs); }
  .stg .stg-steps li { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
  .stg .stg-steps li .stg-seg { order: 2; }
  .stg .stg-actions { grid-template-columns: minmax(0, 1fr); }
}
.stg-wires { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }

.stg-node {
  position: relative; z-index: 1; min-width: 0; padding: var(--space-xs); border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); color: var(--text); text-align: left;
  transition: opacity var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out);
}
/* the working / waiting ring around a box: its own layer, faded in by opacity */
.stg-node::after { content: ""; position: absolute; inset: -6px; border: 3px solid var(--ring, var(--accent-ring)); border-radius: 25px; opacity: 0; pointer-events: none; transition: opacity var(--dur-long) var(--ease-out); }
.stg-node[data-state="idle"] { opacity: 0.38; }
.stg-node[data-state="work"] { border-color: var(--accent); }
.stg-node[data-state="wait"] { border-color: var(--primary); --ring: var(--primary-ring); }
.stg-node[data-state="work"]::after, .stg-node[data-state="wait"]::after { opacity: 1; }
.stg[data-fade="true"] .stg-node:not(.stg-out) { opacity: 0.38; }
.stg-nh { display: flex; align-items: center; gap: var(--space-xs); margin: var(--space-3xs) var(--space-2xs) var(--space-xs); font-size: var(--text-xs); line-height: 1.3; }
.stg-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.stg-node[data-state="wait"] .stg-dot { background: var(--primary); }
.stg-label { font-weight: 600; color: var(--text); }
.stg-meta { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the two video screens: true 9:16 files, the landscape clip on black bars */
.stg-screen { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius-field); background: var(--video-black); }
.stg-screen video, .stg .stg-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stg-screen video { transition: opacity var(--dur-long) var(--ease-out); }
.stg-drop[data-has="false"] video { opacity: 0; }
.stg-dropmsg {
  position: absolute; inset: var(--space-xs); display: grid; place-items: center; padding: var(--space-sm); border: 2px dashed var(--line-strong); border-radius: var(--radius-small);
  color: var(--text-2); font-size: var(--text-sm); font-weight: 600; text-align: center; opacity: 0; transition: opacity var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.stg-drop[data-has="false"] .stg-dropmsg { opacity: 1; }
.stg-drop[data-hot="true"] .stg-dropmsg { border-color: var(--primary); color: var(--text); }
/* a real file dragged over the page: the first box shows itself as the drop target */
.js .stg[data-dragging="true"] .stg-drop video { opacity: 0; }
.js .stg[data-dragging="true"] .stg-dropmsg { opacity: 1; border-color: var(--primary); color: var(--text); }
.stg-up { position: absolute; left: var(--space-xs); right: var(--space-xs); bottom: var(--space-xs); display: grid; gap: var(--space-2xs); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.stg-up[data-on="true"] { opacity: 1; }
.stg-up b { justify-self: start; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--video-veil); color: var(--on-video); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.stg-track { height: 4px; border-radius: var(--radius-pill); background: var(--video-veil); overflow: hidden; }
.stg-track i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.stg-eye { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.stg-eye::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
.stg-eye[data-on="true"] { animation: stg-eye 1.25s var(--ease-in-out) 2; }
@keyframes stg-eye { 0% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } }

/* AI dựng: three moments of the raw clip it looks at, then the product's own segmented progress */
.stg-frames { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); padding: var(--space-xs) var(--space-xs) 0; border-radius: var(--radius-field) var(--radius-field) 0 0; background: var(--surface-sunken); }
.stg-frame { display: grid; gap: var(--space-2xs); min-width: 0; transition: opacity var(--dur-long) var(--ease-out); }
.js .stg-frame[data-seen="false"] { opacity: 0.4; }
.stg-fimg { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--video-black); }
.stg-frame[data-seen="true"] .stg-fimg { outline: 1px solid var(--accent-ring); }
.stg-fscan { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.stg-fscan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
.stg-frame[data-scan="true"] .stg-fscan { animation: stg-eye 0.7s var(--ease-in-out) 1; }
.stg-ftime { font-size: var(--text-xs); line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.stg-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); margin: 0; padding: var(--space-sm) var(--space-sm) 0; background: var(--surface-sunken); }
.stg-steps li { display: grid; gap: var(--space-xs); min-width: 0; }
.stg-seg { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--surface-overlay); overflow: hidden; }
.stg-seg i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.stg-steps li[data-st="done"] .stg-seg i { transform: scaleX(1); }
.stg-steps span:last-child { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-steps li[data-st="run"] span:last-child { color: var(--accent); font-weight: 600; }
.stg-steps li[data-st="done"] span:last-child { color: var(--text-2); }
.stg-now { margin: 0; padding: var(--space-sm) var(--space-sm) var(--space-sm); border-radius: 0 0 var(--radius-field) var(--radius-field); background: var(--surface-sunken); color: var(--text); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* Bạn duyệt */
.stg-rbody { display: flex; gap: var(--space-sm); align-items: flex-start; padding: var(--space-xs); border-radius: var(--radius-field); background: var(--surface-sunken); }
.stg-rthumb { position: relative; flex: none; width: 84px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; background: var(--video-black); }
.stg-rmsg { margin: 0; min-width: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-2); }
.stg-rmsg b { display: block; font-size: var(--text-sm); color: var(--primary); }
.stg-btn {
  display: flex; align-items: center; justify-content: center; min-height: 32px; margin-top: var(--space-xs); padding: 0 var(--space-sm);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--text); font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.stg-btn.go { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.stg-btn[data-press="true"] { transform: scale(0.94); }
.stg-btn[data-done="false"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.stg-btn[data-done="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.stg-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }

/* Video xong: the export reveal over the finished clip */
.stg-gen { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.stg-screen[data-phase="rendering"] .stg-gen { opacity: 1; }
.stg-gblur, .stg-gsharp { position: absolute; inset: 0; overflow: hidden; }
.stg-gblur .stg-cover { filter: blur(10px) saturate(0.2) brightness(0.6); transform: scale(1.1); }
.stg-gsharp { clip-path: inset(0 0 calc((1 - var(--p, 1)) * 100%) 0); }
.stg-scan { position: absolute; inset: 0; transform: translateY(calc(var(--p, 1) * 100%)); }
.stg-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); }
.stg-glabel { position: absolute; top: 50%; left: 50%; translate: -50% -50%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--video-veil); color: var(--on-video); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stg-screen[data-phase="idle"] video, .stg-screen[data-phase="rendering"] video { opacity: 0; }

/* the two cursors: you (violet) and the AI (green) */
.stg-cur { position: absolute; left: 0; top: 0; z-index: var(--z-raised); pointer-events: none; opacity: 0; transition: transform 0.7s var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.stg-cur[data-on="true"] { opacity: 1; }
.stg-cur-you { --c: var(--primary); --on-c: var(--primary-ink); }
.stg-cur-ai { --c: var(--accent); --on-c: var(--accent-ink); }
.stg-tip { display: block; width: 18px; height: 20px; transform-origin: 2px 2px; transition: transform var(--dur-micro) var(--ease-out); }
.stg-tip path { fill: var(--on-video); stroke: var(--video-black); stroke-width: 1.4; stroke-linejoin: round; }
.stg-cur[data-click="true"] .stg-tip { transform: scale(0.8); }
.stg-ring { position: absolute; left: -8px; top: -8px; width: 20px; height: 20px; border: 2px solid var(--c); border-radius: 50%; opacity: 0; }
.stg-cur[data-click="true"] .stg-ring { animation: stg-ping 0.45s var(--ease-out) forwards; }
@keyframes stg-ping { from { opacity: 0.9; transform: scale(0.4); } to { opacity: 0; transform: scale(1.8); } }
.stg-tag { position: absolute; left: 14px; top: 19px; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--c); color: var(--on-c); font-size: var(--text-xs); font-weight: 600; line-height: 1.4; white-space: nowrap; }
.stg-carry { display: none; position: absolute; left: 16px; top: -30px; padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--primary); border-radius: var(--radius-small); background: var(--surface-raised); color: var(--text); font-size: var(--text-xs); white-space: nowrap; }
.stg-cur[data-carry="true"] .stg-carry { display: block; }

/* the wires */
.stg-wire path { fill: none; stroke: var(--accent); stroke-linecap: round; }
.stg-wb { stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.7; transition: stroke-dashoffset 0.75s var(--ease-out); }
.stg-wf { stroke-width: 3; stroke-dasharray: 0.012 0.09; opacity: 0; animation: stg-flow 1.8s linear infinite; }
.stg-wire circle { fill: var(--accent); opacity: 0; transition: opacity var(--dur-short) var(--ease-out); }
.stg-wire[data-on="true"] .stg-wb { stroke-dashoffset: 0; }
.stg-wire[data-on="true"] .stg-wf { opacity: 1; transition: opacity 0.3s var(--ease-out) 0.65s; }
.stg-wire[data-on="true"] circle { opacity: 1; }
.js .stg[data-fade="true"] .stg-wires, .js .stg[data-fade="true"] .stg-cur { opacity: 0; transition: opacity 0.45s var(--ease-out); }
@keyframes stg-flow { to { stroke-dashoffset: -0.102; } }
.stg[data-paused="true"] *, .stg[data-hold="true"] * { animation-play-state: paused !important; }

/* the visible pause control (the loop runs past five seconds) */
.stg-pause {
  position: absolute; right: 0; bottom: calc(-1 * var(--space-xl)); z-index: var(--z-raised); display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 36px; padding: 0 var(--space-md) 0 var(--space-sm); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-2);
  font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.stg-pause:hover { border-color: var(--accent); color: var(--text); }
.stg-pause:active { transform: translateY(1px); }
.stg-pause:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.stg-pause svg { width: 12px; height: 12px; }
.stg-pause[data-paused="false"] .ico-play, .stg-pause[data-paused="true"] .ico-pause { display: none; }
.stg-pause[hidden] { display: none; }

@media (min-width: 44rem) {
  .stg { --node-w: clamp(11rem, 21vw, 15rem); grid-template-columns: var(--node-w) minmax(0, 1fr) var(--node-w); grid-template-areas: "copy copy copy" "facts facts facts" "in pair out"; column-gap: var(--space-lg); }
  .stg-in, .stg-out { align-self: center; }
  .stg-pair { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); align-self: center; }
}
.hero-stage + .section { margin-top: 0; padding-top: 48px; }
@media (min-width: 70rem) {
  .hero-stage { padding: var(--space-xl) 0 72px; }
  .stg { --node-w: clamp(13rem, 18vw, 15.5rem); grid-template-areas: "in copy out" "in facts out" "in pair out"; column-gap: clamp(2rem, 3.5vw, var(--space-2xl)); align-items: start; }
  .stg-in, .stg-out { align-self: center; margin-top: 0; }
  .stg-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 3.5vw, 56px); align-items: start; align-self: start; }
  .stg-rev { margin-top: var(--space-xl); }
  .stg-copy { padding-top: var(--space-xs); }
}

/* ---------------------------------------------------------------- home: the sections */
/* three steps: a real <ol>, the numeral set large */
.how { list-style: none; counter-reset: how; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); margin: var(--space-xl) 0 0; padding: 0; }
.how-step { counter-increment: how; display: flex; flex-direction: column; padding: var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--text); }
.how-step::before { content: counter(how); font-family: var(--font-display); font-size: 4rem; font-weight: 800; line-height: 1; color: var(--primary); font-variant-numeric: tabular-nums; }
.how-step h3 { margin: var(--space-lg) 0 var(--space-xs); font-size: var(--text-title); }
.how-step p { margin: 0; color: var(--text-2); }
@media (min-width: 52rem) { .how { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* what a short video needs: rows on hairlines, no boxes */
.features { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-xl); margin: var(--space-xl) 0 0; padding: 0; }
.feature { padding: 20px 0 var(--space-lg); border-top: 1px solid var(--line); }
.feature h3 { margin: 0 0 var(--space-xs); font-size: var(--text-title); }
.feature p { margin: 0; color: var(--text-2); }
.feature.soon h3, .feature.soon p { color: var(--muted); }
.feature .chip { vertical-align: 0.15em; margin-left: var(--space-2xs); }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* old before/after timeline legend (kept for pages that still draw it) */
.ba { display: grid; gap: var(--space-md); }
.timeline { display: flex; gap: var(--space-2xs); height: 34px; }
.timeline.short { width: 55%; }
.seg { border-radius: var(--space-2xs); background: var(--primary); }
.seg.gap { background: repeating-linear-gradient(45deg, var(--bad) 0 4px, var(--bad-bg) 4px 8px); }
.seg.um { background: var(--warn); }
.seg.redo { background: var(--bad); }
.seg.hook { background: var(--karaoke); }
.legend { list-style: none; padding: 0; margin: var(--space-sm) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-size: var(--text-sm); color: var(--text-2); }
@media (min-width: 760px) { .ba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* the nine before/after demos */
.demo-tabs { display: flex; gap: var(--space-2xs); margin: 0 auto var(--space-lg); padding: var(--space-2xs); width: fit-content; max-width: 100%; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-pill); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.demo-tabs::-webkit-scrollbar { display: none; }
.demo-tab { flex: none; min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-2); font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.demo-tab:hover { color: var(--text); background: var(--surface-raised); }
.demo-tab:active { transform: translateY(1px); }
.demo-tab.on, .demo-tab.on:hover { background: var(--accent); color: var(--accent-ink); }
.demo-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (min-width: 760px) { .demo-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; border-radius: var(--radius-card); max-width: 900px; } }
.demo-video { position: relative; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: var(--radius-box); overflow: hidden; background: var(--video-black); }
.demo-video video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.demo-sound { position: absolute; right: var(--space-xs); bottom: var(--space-xs); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: var(--on-video); background: var(--video-veil); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.demo-sound:hover { background: var(--surface-overlay); }
.demo-sound:active { transform: scale(0.94); }
.demo-sound .snd-on, .demo-sound[aria-pressed="true"] .snd-off { display: none; }
.demo-sound[aria-pressed="true"] .snd-on { display: inline-flex; }
.demo-sound .snd-off { display: inline-flex; }
.demo-sound[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.demo-sound:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the original small on the left, the AI edit large on the right */
.ba-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); gap: var(--space-md) 20px; align-items: center;
  max-width: 640px; margin: 0 auto; padding: 20px var(--space-md) var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface-sunken); color: var(--text);
}
.ba-side { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); min-width: 0; }
.ba-title { font-family: var(--font-display); font-weight: 700; line-height: 1.1; text-align: center; font-size: clamp(1.125rem, 3.6vw, 1.5rem); color: var(--text-2); }
.ba-side.after .ba-title { font-size: clamp(1.5rem, 6vw, 2.25rem); font-weight: 800; color: var(--accent); }
.ba-stage .demo-video { max-width: none; }
.ba-side.before .demo-video { border: 1px solid var(--line-strong); }
.ba-side.after .demo-video { border: 2px solid var(--accent); }
.ba-ai { position: absolute; top: 10px; left: 10px; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; color: var(--accent-ink); background: var(--accent); pointer-events: none; }
.ba-time { position: absolute; top: 10px; right: 10px; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; color: var(--on-video); background: var(--video-veil); pointer-events: none; font-variant-numeric: tabular-nums; }
.ba-side.before .ba-time { top: 6px; right: 6px; font-size: 0.75rem; }
.ba-side.before .demo-sound { right: 6px; bottom: 6px; width: 36px; height: 36px; }
.ba-side.before .demo-sound svg { width: 17px; height: 17px; }
.ba-vs { position: absolute; left: -10px; top: 50%; z-index: var(--z-raised); transform: translate(-50%, -50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; color: var(--primary-ink); background: var(--primary); }
.ba-notes { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); gap: 20px; }
.ba-stage .legend { margin: var(--space-2xs) 0 0; flex-direction: column; gap: var(--space-xs); }
.ba-stage .legend li { display: flex; align-items: flex-start; gap: var(--space-xs); }
.mark { flex: none; width: 16px; height: 16px; margin-top: var(--space-2xs); }
.mark.bad { color: var(--bad); }
.mark.ok { color: var(--accent); }
@media (max-width: 380px) {
  .ba-stage { gap: var(--space-sm); padding: var(--space-md) var(--space-sm) var(--space-sm); }
  .ba-vs { left: -6px; width: 36px; height: 36px; }
  .ba-notes { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
}

/* plans */
.plan-minis, .plans, .packs { list-style: none; padding: 0; margin: 0 0 var(--space-md); display: grid; gap: var(--space-sm); }
.plan-mini, .plan, .pack { position: relative; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--space-lg); }
.plan-mini h3, .plan h2, .pack h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-title); }
.plan-mini.highlight, .plan.highlight { border: 2px solid var(--accent); }
.plan-tag { margin: 0 0 var(--space-xs); }
.price { margin: var(--space-2xs) 0; font-size: var(--text-md); color: var(--text-2); }
.price b { font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; line-height: 1.1; letter-spacing: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.price .was { color: var(--muted); text-decoration: line-through; font-size: var(--text-sm); margin-left: var(--space-xs); }
.per { color: var(--muted); }
.plan { display: flex; flex-direction: column; gap: var(--space-xs); }
.plans { margin-top: 20px; }
.plan .badge { position: absolute; top: -12px; left: var(--space-md); }
.plan-points { list-style: none; padding: 0; margin: var(--space-xs) 0 var(--space-md); flex: 1; }
.plan-points li { padding: var(--space-xs) 0 var(--space-xs) 28px; position: relative; color: var(--text-2); }
.plan-points li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.cycle-toggle { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs); max-width: 100%; padding: var(--space-2xs); margin-top: var(--space-sm); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-card); }
.cycle-toggle button { font: inherit; font-size: var(--text-sm); font-weight: 600; border: 0; background: transparent; color: var(--text-2); padding: 0 var(--space-sm); border-radius: var(--radius-pill); cursor: pointer; min-height: 40px; white-space: nowrap; }
/* pricing: only the highlighted plan's button is filled */
.plans .btn.primary { background: transparent; border: 2px solid var(--accent); color: var(--accent); }
.plans .btn.primary:hover { background: var(--accent-soft); color: var(--accent-hover); }
.cycle-toggle button:hover { color: var(--text); }
.cycle-toggle button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cycle-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
@media (min-width: 560px) { .plan-minis, .plans, .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .plan-minis, .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } .packs { max-width: 680px; margin: 0 auto; } }
.matrix th, .matrix td { white-space: normal; min-width: 92px; }
.matrix tbody th { font-weight: 600; min-width: 150px; color: var(--text); }
/* on a phone the plan names scroll sideways; the row names stay pinned */
.matrix tbody th, .matrix thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.matrix thead th.hl { background: var(--accent-soft); color: var(--accent); }
.matrix-wrap { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-card); }
.matrix tr.soon td, .matrix tr.soon th { background: var(--surface-sunken); color: var(--muted); }

/* faq */
.faq-split { display: grid; gap: var(--space-xl); align-items: start; }
.faq-split .section-title { text-align: left; margin: 0 0 var(--space-md); }
.faq-split .section-lead { text-align: left; margin: 0; }
@media (min-width: 64rem) { .faq-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-2xl); } }
.faq-list { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 760px; margin: 0 auto; }
.faq-split .faq-list { max-width: none; margin: 0; }
.faq { border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--surface); color: var(--text); overflow: hidden; }
.faq[open] { border-color: var(--line-strong); }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) 20px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--accent); transition: transform var(--dur-short) var(--ease-out); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: var(--surface-raised); }
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.faq-a { padding: 0 20px var(--space-md); color: var(--text-2); }
.faq-a p:first-child { margin-top: 0; }

/* the closing call */
.cta-band { text-align: center; margin: var(--space-3xl) 0 var(--space-lg); padding: var(--space-lg) 0 0; }
.cta-band h2 { font-size: clamp(2.25rem, 4.5vw + 1rem, 4.5rem); line-height: 1.2; margin: 0 0 var(--space-lg); }
.cta-band h2 .cblock:first-child { rotate: -1.5deg; }
.cta-band h2 .cblock-2 { rotate: 1deg; }
/* the blog's closing box takes the same two blocks, a size down */
.post-cta-title .cblock { font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem); }
.post-cta-title .cblock:first-child { rotate: -1.5deg; }
.post-cta-title .cblock-2 { rotate: 1deg; margin-top: var(--space-2xs); }
.cta-band p { color: var(--text-2); max-width: 52ch; margin: 0 auto var(--space-lg); }

/* ---------------------------------------------------------------- legal pages */
.legal h2 { scroll-margin-top: 72px; }
.toc { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-box); padding: var(--space-xs) var(--space-md); margin: var(--space-sm) 0; color: var(--text); }
.toc ol { margin: 0; padding-left: 20px; columns: 2 220px; }
.seller-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs) var(--space-md); margin: var(--space-xs) 0 var(--space-sm); }
.seller-info dt { color: var(--muted); font-size: var(--text-sm); }
.seller-info dd { margin: 0 0 var(--space-xs); font-weight: 600; word-break: break-word; }
@media (min-width: 640px) { .seller-info { grid-template-columns: max-content 1fr; } .seller-info dd { margin: 0; } }
.formula { background: var(--surface-sunken); color: var(--text); border-radius: var(--radius-field); padding: var(--space-sm) var(--space-md); font-weight: 600; }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-sm) 0; }
.prose table { font-size: var(--text-sm); }
.prose td { white-space: normal; min-width: 120px; vertical-align: top; }

/* ---------------------------------------------------------------- footer: a mast (the wordmark large under the links) */
.site-footer { margin-top: var(--space-2xl); border-top: 1px solid var(--line); background: var(--surface-sunken); color: var(--text-2); font-size: var(--text-sm); overflow: hidden; }
.footer-inner { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-xl) var(--gutter); display: grid; gap: var(--space-lg); }
.footer-brand { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-xs); color: var(--text); font-size: var(--text-lg); font-weight: 600; }
.footer-brand img { flex: none; }
.footer-about p { margin: var(--space-2xs) 0; max-width: 45ch; }
.footer-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); align-content: start; justify-items: start; white-space: nowrap; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.seller { font-style: normal; line-height: 1.7; word-break: break-word; }
.seller b { color: var(--text); }
.footer-mast { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); font-family: var(--font-body); font-size: clamp(3.5rem, 20vw, 18rem); font-weight: 600; line-height: 0.8; letter-spacing: -0.05em; color: var(--mast); white-space: nowrap; user-select: none; }
.footer-base { border-top: 1px solid var(--line); }
.copyright { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter); font-size: var(--text-xs); color: var(--muted); }
@media (min-width: 760px) { .footer-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-xl); } }
@media print { .topbar, .tabbar, .site-footer, .toc, .skip-link { display: none; } .card { border: 0; } }
.site-footer .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--text-2); text-align: left; text-decoration: underline; cursor: pointer; }
.site-footer .linkish:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* analytics-cookie bar (_analytics.html): above the mobile tab bar, never across the page */
.cookie-bar {
  position: fixed; z-index: var(--z-toast); left: var(--space-sm); right: var(--space-sm); bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto; padding: var(--space-md) var(--space-md); display: grid; gap: var(--space-sm);
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-box); font-size: var(--text-sm);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; }
.cookie-actions { display: flex; gap: var(--space-xs); justify-content: flex-end; }
.cookie-actions .btn { min-height: 40px; }
body.with-tabbar .cookie-bar { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 760px) { body.with-tabbar .cookie-bar { bottom: var(--space-md); } }

/* ---------------------------------------------------------------- drop zone: the main action on /upload */
.dropzone {
  position: relative; display: flex; align-items: center; gap: var(--space-md); width: 100%; margin: var(--space-2xs) 0 var(--space-xs);
  padding: 20px; border: 2px dashed var(--line-strong); border-radius: var(--radius-card);
  background: var(--surface-sunken); color: var(--text); text-decoration: none;
  cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.dropzone.drag { border-style: solid; }
.dropzone:focus-within, .dropzone:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.dropzone-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: var(--radius-box); background: var(--primary); color: var(--primary-ink); }
.dropzone-text { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; text-align: left; }
.dropzone-title { font-weight: 600; font-size: var(--text-lg); }
.dropzone-sub { color: var(--muted); font-size: var(--text-sm); }
.dropzone-go { margin-left: auto; flex: none; }
.dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
@media (max-width: 479px) { .dropzone { flex-wrap: wrap; } .dropzone-go { width: 100%; margin-left: 0; } }
.dropzone.tall { flex-direction: column; justify-content: center; text-align: center; padding: 32px 20px; min-height: 200px; }
.dropzone.tall .dropzone-text { text-align: center; align-items: center; }
.dropzone.tall .dropzone-go { margin-left: 0; }
/* the home page's primary action also takes a dropped file (app.js a[data-dropzone]) */
a.btn[data-dropzone].drag { outline: 3px solid var(--primary); outline-offset: 3px; }

/* ---------------------------------------------------------------- site header: an edge-aligned bar */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky-nav); padding-top: env(safe-area-inset-top);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .topbar { background: color-mix(in oklab, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
}
.topbar-inner { max-width: calc(var(--container) + 2 * var(--gutter)); height: 64px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--space-sm); }
.brand { display: flex; align-items: center; gap: var(--space-sm); flex: none; color: var(--text); text-decoration: none; font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; border-radius: var(--radius-small); }
.brand:hover { color: var(--text); }
.brand img { flex: none; }
.topnav { display: none; align-items: center; gap: var(--space-2xs); margin-left: 20px; }
.nav-link {
  display: inline-flex; align-items: center; gap: var(--space-2xs); height: 40px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--text-2); font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.nav-link:hover, .nav-dd:hover > .nav-link, .nav-dd:focus-within > .nav-link { color: var(--text); background: var(--surface-raised); }
.nav-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav-link[aria-current="page"] { color: var(--accent); }
.nav-link .ico { opacity: 0.7; transition: transform var(--dur-short) var(--ease-out); }
.nav-dd:hover > .nav-link .ico, .nav-dd:focus-within > .nav-link .ico { transform: rotate(180deg); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); }
.nav-login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--text); font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.nav-login:hover { color: var(--text); background: var(--surface-raised); }
.topbar .btn.small { min-height: 40px; }
.nav-cta { display: none; }
@media (min-width: 760px) { .topnav { display: flex; } .nav-cta { display: inline-flex; } }
@media (max-width: 479px) { .nav-login { display: none; } }
@media (max-width: 399px) { .hide-xs { display: none; } }

/* "Tính năng" mega menu: opens on hover or focus (tap) */
.nav-dd { position: relative; }
.nav-dd-panel {
  position: absolute; top: calc(100% + 10px); left: -12px; z-index: var(--z-dropdown); width: min(640px, 92vw); padding: var(--space-sm);
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--line-strong); border-radius: 20px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short);
}
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
.nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.mega { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xs) var(--space-xs); }
.mega-label { margin: var(--space-xs) var(--space-sm) var(--space-2xs); font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.mega-item { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-field); color: var(--text); text-decoration: none; }
.mega-item:hover { background: var(--surface-overlay); color: var(--text); }
.mega-item b { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); font-size: var(--text-sm); }
.mega-item small { display: block; margin-top: var(--space-3xs); color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.mega-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; color: var(--primary); }
.mega-item:hover .mega-ico { color: var(--accent); }
.mega-item.compact { align-items: center; padding: var(--space-xs) var(--space-sm); }
.mega-item.compact b { font-size: var(--text-sm); }
.mega-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-field); background: var(--surface-sunken); color: var(--text-2); font-size: var(--text-sm); text-decoration: none; }
.mega-foot b { color: var(--accent); white-space: nowrap; }
.mega-foot:hover { color: var(--text); }
.mega-foot:hover b { text-decoration: underline; }
.nav-badge { display: inline-block; padding: 0 var(--space-xs); border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; line-height: 1.6; }
.nav-badge.soon { background: var(--warn-bg); color: var(--warn); }

/* account and mobile menus (<details>, closed by app.js on outside click / Esc) */
.menu-dd { position: relative; }
.menu-dd > summary { list-style: none; cursor: pointer; }
.menu-dd > summary::-webkit-details-marker { display: none; }
.menu-dd > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--text); }
.acct-btn { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs) var(--space-2xs) var(--space-2xs); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); }
.menu-dd[open] > .acct-btn, .acct-btn:hover, .menu-btn:hover { border-color: var(--primary); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-size: var(--text-sm); font-weight: 600; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-dropdown); min-width: 260px; padding: var(--space-xs);
  display: flex; flex-direction: column; gap: 1px;
  background: var(--surface-raised); color: var(--text); border: 1px solid var(--line-strong); border-radius: 20px;
}
.menu-panel a, .menu-panel .linklike { display: block; width: 100%; padding: var(--space-sm) var(--space-sm); border-radius: var(--radius-field); color: var(--text); text-align: left; text-decoration: none; font-size: var(--text-sm); font-weight: 400; }
.menu-panel a:hover, .menu-panel .linklike:hover { background: var(--surface-overlay); color: var(--text); }
.menu-panel a.btn { display: flex; justify-content: center; padding: 0 var(--space-sm); font-weight: 600; text-align: center; white-space: nowrap; }
.menu-panel a.btn.accent, .menu-panel a.btn.accent:hover { background: var(--accent); color: var(--accent-ink); }
.menu-head { display: flex; flex-direction: column; min-width: 0; margin-bottom: var(--space-2xs); padding: var(--space-xs) var(--space-sm) var(--space-sm); border-bottom: 1px solid var(--line); }
.menu-head span { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.menu-foot { margin: var(--space-xs) 0 0; padding-top: var(--space-xs); border-top: 1px solid var(--line); }
.menu-foot .linklike { color: var(--bad); }
.menu-foot.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-sm) var(--space-2xs) var(--space-3xs); }
.navmenu .mega-label { margin: var(--space-sm) var(--space-sm) var(--space-2xs); }
@media (min-width: 760px) { .navmenu { display: none; } }

/* credits left, next to the account menu */
.credit-pill { text-decoration: none; border-radius: var(--radius-pill); }
.nav-credits { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); white-space: nowrap; background: var(--accent-soft); border: 1px solid var(--accent-ring); color: var(--accent); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- styles learned from a sample video (/styles) */
.style-profiles { display: grid; gap: var(--space-md); }
.style-profile { border: 1px solid var(--line-strong); border-radius: var(--radius-box); padding: var(--space-md); display: grid; gap: var(--space-sm); background: transparent; color: var(--text); }
.style-profile.is-default { border-color: var(--primary); }
.style-profile header { align-items: flex-start; }
.style-profile h3 { margin: 0 0 var(--space-2xs); font-size: var(--text-lg); }
.style-thumb { width: 54px; height: 96px; object-fit: cover; border-radius: var(--radius-small); flex: none; }
.grow { flex: 1; min-width: 0; }
.swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); vertical-align: middle; margin-left: var(--space-2xs); }
.seen-list { padding-left: var(--space-md); margin: var(--space-xs) 0; }
.seen-list li { margin: var(--space-2xs) 0; }
.seen-list li > span:first-child { color: var(--muted); }
.style-manage { justify-content: space-between; border-top: 1px solid var(--line); padding-top: var(--space-xs); }
.inline-edit summary { cursor: pointer; }
.inline-edit form { margin-top: var(--space-xs); }
.learned-styles { display: grid; gap: var(--space-xs); margin: var(--space-2xs) 0 var(--space-sm); }
label.learned-style { display: flex; flex-direction: row; gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-sm); border: 2px solid var(--line); border-radius: var(--radius-field); cursor: pointer; font-weight: 400; background: transparent; color: var(--text); }
.learned-style:has(input:checked) { border-color: var(--primary); color: var(--text); }
label.learned-style input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.learned-style img { width: 36px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; }
.learned-styles legend { font-weight: 600; margin-bottom: var(--space-2xs); }

/* ---------------------------------------------------------------- blog */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); margin: var(--space-sm) 0 0; }
.chips .chip { font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); text-decoration: none; }
.chips a.chip:hover { background: var(--primary-soft); color: var(--text); }
.chips .chip span { opacity: 0.75; font-weight: 600; margin-left: var(--space-3xs); }
.post-list { display: grid; gap: var(--space-sm); }
.post-card { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-box); padding: var(--space-md); }
.post-card h3 { margin: 0 0 var(--space-xs); font-size: var(--text-lg); line-height: 1.35; }
.post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h3 a:hover { color: var(--accent); }
.post-card p { margin: 0 0 var(--space-xs); color: var(--text-2); font-size: var(--text-sm); }
.post-card.has-cover { display: grid; gap: var(--space-sm); }
.post-thumb img { display: block; width: 100%; height: auto; border-radius: var(--radius-field); aspect-ratio: 1200 / 630; object-fit: cover; }
@media (min-width: 640px) { .post-card.has-cover { grid-template-columns: 200px minmax(0, 1fr); align-items: start; } }
.post-meta { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--space-sm); }
.post-card .post-meta { margin: 0; font-size: var(--text-xs); }
.blog-post h1 { font-size: var(--text-page); line-height: 1.2; margin: 0 0 var(--space-xs); }
.blog-post h2 { scroll-margin-top: 72px; font-size: var(--text-xl); line-height: 1.3; margin-top: 28px; }
.blog-post h3 { font-size: var(--text-lg); margin-top: 20px; }
.post-body { font-size: 1.0625rem; line-height: 1.75; color: var(--text-2); }
.post-body strong, .post-body b { color: var(--text); }
.post-body p { margin: 0 0 var(--space-md); }
.post-body blockquote { margin: var(--space-md) 0; padding: var(--space-xs) var(--space-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: var(--radius-field); }
.post-body table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; display: block; overflow-x: auto; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: var(--space-xs) var(--space-xs); text-align: left; }
.post-body th { background: var(--surface); color: var(--text); }
.post-body figure { margin: 20px auto; text-align: center; }
.post-body figure img { max-width: 100%; width: auto; height: auto; max-height: 70vh; border-radius: var(--radius-field); border: 1px solid var(--line); }
.post-body figcaption { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-xs); }
.post-body .tip { background: var(--busy-bg); color: var(--text); border-radius: var(--radius-field); padding: var(--space-sm) var(--space-md); margin: var(--space-md) 0; }
.post-body .tip p { margin: 0; }
.post-cover { display: block; width: 100%; height: auto; border-radius: var(--radius-field); margin: 0 0 var(--space-sm); }
.blog-post .toc summary { cursor: pointer; font-weight: 600; padding: var(--space-2xs) 0; }
.blog-post .toc ol { columns: 1; margin: var(--space-xs) 0 var(--space-2xs); }
/* the blog's close: an open band on a hairline, its head on the two colour blocks (no box) */
.post-cta { color: var(--text); border-top: 1px solid var(--line); padding: var(--space-xl) 0 0; margin: var(--space-2xl) 0 var(--space-md); text-align: center; }
.post-cta-title { font-size: var(--text-xl); font-weight: 600; margin: 0 0 var(--space-xs); }
.post-cta p { margin: 0 0 var(--space-sm); }
.post-cta .hint { margin: var(--space-sm) 0 0; }
.post-body .img-missing { border: 2px dashed var(--warn); background: var(--warn-bg); color: var(--text); border-radius: var(--radius-field); padding: var(--space-sm) var(--space-md); text-align: left; font-size: var(--text-sm); }
.post-body .img-missing p { margin: 0 0 var(--space-xs); }
.post-body .img-missing code { word-break: break-all; }

/* ---------------------------------------------------------------- upload page details */
/* template picker: icon, name, one-line description */
.tpl-choice { align-items: flex-start; }
.tpl-choice .tpl-ico { display: inline-flex; color: var(--primary); margin-top: 1px; flex: none; }
.tpl-choice small { display: block; font-weight: 400; font-size: var(--text-xs); line-height: 1.4; margin-top: var(--space-3xs); }
.tpl-choice input { order: 3; margin-left: auto; }
/* product photo library (settings) */
.product-list { list-style: none; margin: var(--space-xs) 0; padding: 0; display: grid; gap: var(--space-xs); }
.product-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; border: 1px solid var(--line); border-radius: var(--radius-field); padding: var(--space-xs); background: transparent; color: var(--text); }
.product-item img { width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-small); background: var(--surface-raised); }
.product-item small { display: block; color: var(--muted); }
/* review: illustration cards menu */
.visual-menu { border: 1px solid var(--line); border-radius: var(--radius-field); padding: var(--space-sm) var(--space-sm); margin: var(--space-sm) 0; }
.visual-items { list-style: none; margin: var(--space-xs) 0; padding: 0; display: grid; gap: var(--space-2xs); }
.visual-items small { font-size: var(--text-xs); }
/* show/hide password: the eye button inside the field (app.js addPasswordToggle) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px; }
.pw-toggle { position: absolute; right: var(--space-2xs); top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; padding: 0; }
.pw-toggle:hover { color: var(--text); background: var(--surface-raised); }
.pw-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pw-wrap input::-ms-reveal, .pw-wrap input::-ms-clear { display: none; }
/* /chinh-sach: all policies on one page */
.policy-part { scroll-margin-top: 72px; }
.policy-part .policy-title { font-size: var(--text-2xl); font-weight: 300; margin: 0 0 var(--space-xs); }
.policy-toc ol { columns: 2 200px; }
.consent-one span { font-size: var(--text-sm); line-height: 1.5; }
/* designed cover (_cover_box.html): the picture never takes the pointer; a shield on top gets right-click/long-press */
.cover-card .cover-frame { position: relative; max-width: 240px; margin: var(--space-2xs) auto var(--space-sm); }
.cover-card .cover-frame img { display: block; width: 100%; height: auto; border-radius: var(--radius-field); border: 1px solid var(--line); pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.cover-card .cover-shield { position: absolute; inset: 0; border-radius: var(--radius-field); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* "Phong cách vlog chủ quán" fields */
.tudo-meta { padding: var(--space-sm); border: 2px solid var(--line); border-radius: var(--radius-field); }
.tudo-series { align-items: flex-end; flex-wrap: wrap; gap: var(--space-sm); }
.tudo-series .grow { flex: 1 1 200px; }
.tudo-part { flex: 0 0 96px; }
.tudo-part input { width: 100%; }
.tudo-note { font-size: var(--text-sm); }
/* "Vlog quán ăn + B-roll": the B-roll clips */
.broll-pick { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.broll-pick legend { font-weight: 600; margin-bottom: var(--space-2xs); }
.broll-add { align-self: flex-start; flex-direction: row; cursor: pointer; }
.broll-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.broll-item { display: flex; gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-field); min-width: 0; }
.broll-item .stack { gap: var(--space-xs); }
.broll-item b { overflow-wrap: anywhere; }
.broll-item input { width: 100%; }
.tudo-meta label small.hint, .broll-pick legend small.hint { font-weight: 400; }

/* Segmented progress (job page, upload page): one bar per pipeline step (_steps.html) */
.steps { list-style: none; margin: var(--space-md) 0 var(--space-xs); padding: 0; display: flex; gap: var(--space-2xs); }
.step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.step .seg { position: relative; display: block; height: 8px; border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; }
.step .fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--accent); }
.step.done .fill { width: 100%; }
.step.run .seg {
  background: repeating-linear-gradient(-45deg, var(--accent-soft) 0 6px, var(--accent-ring) 6px 12px);
  background-size: 34px 34px; animation: steps-stripe 1s linear infinite;
}
.step.wait .seg { animation: steps-pulse 1.6s var(--ease-in-out) infinite; }
.step .lbl { font-size: var(--text-xs); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.done .lbl { color: var(--text-2); }
.step.run .lbl, .step.wait .lbl { color: var(--accent); font-weight: 600; }
.steps.single .lbl { display: none; }
.step-now { margin: var(--space-3xs) 0 var(--space-xs); font-size: var(--text-sm); }
@keyframes steps-stripe { to { background-position: 34px 0; } }
@keyframes steps-pulse { 50% { opacity: 0.45; } }
@media (max-width: 479px) { .steps.many .step.done .lbl { visibility: hidden; } }

/* Upload page, mobile first: pick the video, choose (defaults set), one sticky start button */
.upload .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.upload .linkish:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.credit-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin: 0; font-size: var(--text-sm); color: var(--muted); }
.credit-line b { color: var(--text); }
.pick-card .hint { margin: var(--space-sm) 0 0; }
.chosen { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--primary); border-radius: var(--radius-field); background: var(--primary-soft); color: var(--text); }
.chosen-ico { display: inline-flex; color: var(--primary); flex: none; }
.chosen-text { display: flex; flex-direction: column; min-width: 0; }
.chosen-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-cards { margin-bottom: var(--space-xs); }
.more-toggle { font-size: var(--text-sm); }
.more-opts { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.more-opts > summary { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; list-style: none; border-radius: var(--radius-small); }
.more-opts > summary::-webkit-details-marker { display: none; }
.more-opts > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.more-opts > summary::after { content: ""; width: 9px; height: 9px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--dur-short) var(--ease-out); margin-right: var(--space-2xs); }
.more-opts[open] > summary::after { transform: rotate(-135deg); }
.more-opts[open] > summary { margin-bottom: var(--space-md); }
.vo-entry { margin: 0; text-align: center; font-size: var(--text-sm); color: var(--muted); }
.start-bar {
  position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: var(--z-raised); display: flex; flex-direction: column; gap: var(--space-xs);
  padding: var(--space-sm); border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface-raised); color: var(--text);
}
.start-bar .msg { margin: 0; }
.start-bar small { text-align: center; }
@media (min-width: 760px) { .start-bar { bottom: var(--space-sm); } }

/* Cover versions (_cover_box.html): small pictures to pick from */
.cover-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 92px)); gap: var(--space-sm); justify-content: center; margin: var(--space-2xs) 0 var(--space-sm); }
.cover-picks form { margin: 0; }
.cover-pick { display: block; width: 100%; padding: 0; border: 2px solid var(--line); border-radius: 10px; background: none; cursor: pointer; overflow: hidden; position: relative; }
.cover-pick:hover { border-color: var(--line-strong); }
.cover-pick img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.cover-pick.on { border-color: var(--accent); cursor: default; }
.cover-pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cover-pick .cover-no { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-3xs) var(--space-2xs); font-size: 0.75rem; font-weight: 600; color: var(--on-video); background: var(--video-veil); text-align: center; }

/* AI helpers on the review page */
.ai-edit textarea { min-height: 72px; }
.ai-edit .ai-examples { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-3xs) 0 var(--space-2xs); }
.ai-edit .ai-examples button { font: inherit; font-size: var(--text-xs); min-height: 32px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: none; color: inherit; cursor: pointer; }
.ai-edit .ai-examples button:hover { border-color: var(--primary); }
.ai-edit .ai-examples button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ai-edit .ai-wait { display: flex; align-items: center; gap: var(--space-xs); }
.hook-row { display: flex; gap: var(--space-xs); align-items: stretch; }
.hook-row input { flex: 1; min-width: 0; }
.hook-ideas { list-style: none; padding: 0; margin: var(--space-xs) 0 0; display: grid; gap: var(--space-xs); }
.hook-ideas button { width: 100%; text-align: left; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-field); border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: inherit; cursor: pointer; font-weight: 600; }
.hook-ideas button:hover, .hook-ideas button:focus-visible { border-color: var(--primary); }
.hook-ideas button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hook-ideas .angle { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--muted); }
.spin { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* "AI kiểm tra bản dựng" (_qa_box.html) */
.qa-issues { list-style: none; padding: 0; margin: var(--space-2xs) 0 var(--space-sm); display: grid; gap: var(--space-xs); }
.qa-issues li { line-height: 1.45; }
.qa-issues .chip { margin-right: var(--space-2xs); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- billing pages (were inline in billing/_style.html) */
/* the plans and packs inside a billing panel: rows on hairlines, not boxes in a box */
.bl-grid { display: grid; column-gap: var(--space-lg); }
@media (min-width: 640px) { .bl-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bl-plan { border-top: 1px solid var(--line); padding: var(--space-md) 0; display: flex; flex-direction: column; gap: var(--space-xs); color: var(--text); }
.bl-plan.current .bl-price { color: var(--primary); }
.bl-plan p { margin: 0; }
.bl-price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bl-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.bl-actions.center { justify-content: center; }
.bl-sum li { gap: var(--space-sm); }
.bl-sum li > :last-child { text-align: right; }
.bl-sum li.total { font-weight: 600; font-size: var(--text-lg); border-bottom: 0; }
.bl-qr { text-align: center; }
/* a QR code needs its white quiet zone to scan */
.bl-qr img { display: block; margin: var(--space-xs) auto; width: min(100%, 300px); height: auto; background: var(--qr-bg); border-radius: var(--radius-field); border: 1px solid var(--line); }
.bl-pay { list-style: none; padding: 0; margin: var(--space-xs) 0 0; }
.bl-pay li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-sm) 0; border-bottom: 1px solid var(--line); }
.bl-pay .k { display: block; color: var(--muted); font-size: var(--text-sm); }
.bl-pay .v { font-weight: 600; word-break: break-all; font-variant-numeric: tabular-nums; }
.bl-pay .code { font-size: 1.25rem; letter-spacing: 0.06em; color: var(--accent); }
.bl-timer { font-variant-numeric: tabular-nums; font-weight: 600; }
.bl-seller { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-2xs) var(--space-sm); margin: 0; font-size: var(--text-sm); }
.bl-seller dt { color: var(--muted); }
.bl-seller dd { margin: 0; word-break: break-word; }
.bl-list { list-style: none; padding: 0; margin: 0; }
.bl-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--line); }
.bl-list li:last-child { border-bottom: 0; }
.bl-list .right { text-align: right; flex: none; }
.bl-success { text-align: center; }
.bl-success h2 { font-size: var(--text-xl); color: var(--ok); }

/* ---------------------------------------------------------------- reduced motion: every loop and move holds its end state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .step.run .seg, .step.wait .seg, .spin, .stg-wf { animation: none; }
  .btn:active, .stg-btn[data-press="true"] { transform: none; }
}