/* ==========================================================================
   Oernu — design system (SaaS demo)
   Monochrome and precise: plain white page and surfaces, charcoal type and controls, upright Inter
   everywhere (no italics). Colour appears only where it carries meaning (status) and in the logo mark.
   Light is the default; dark is opt-in from Settings (data-theme="dark", or "system" to follow the OS).
   ========================================================================== */

:root {
  /* type */
  --f-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-ar: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", "Segoe UI", sans-serif;
  --t-xs: 11.5px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 28px; --t-3xl: 34px;

  /* space & shape */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s20: 80px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1); --fast: 120ms; --med: 220ms;
  --side: 232px;

  /* light (default) — pure white, charcoal type, blue-gray accent */
  --bg: #FFFFFF; --bg-2: #F1F4F7; --surface: #FFFFFF; --surface-2: #F6F8FA; --sunk: #F6F8FA;
  --line: #E5E9ED; --line-2: #D5DBE1; --line-3: #BAC3CC;
  --ink: #232323; --heading: #1C1C1E; --ink-2: #3B4148; --muted: #66717D; --faint: #9AA4AE;
  /* accent: --accent is the text-safe blue-gray for buttons and links (white on it = 4.9:1, AA);
     --accent-ui (#647D95) is for bars, indicators and borders, where 3:1 is enough */
  --accent: #5A7389; --accent-2: #4C657D; --accent-ui: #647D95; --accent-ink: #FFFFFF; --accent-soft: #EDF2F6; --accent-line: #C7D3DE;
  --ok: #1E7A46; --ok-soft: #E8F5EC; --warn: #A3570A; --warn-soft: #FDF3E4; --bad: #C0362C; --bad-soft: #FCECEA;
  --run: #2160C4; --run-soft: #E8F0FC;
  --frame: #1C1C1E; --frame-ink: #F4F4F2;
  --shadow-1: 0 1px 2px rgba(35, 45, 55, .05);
  --shadow-2: 0 1px 2px rgba(35, 45, 55, .04), 0 10px 28px -16px rgba(35, 45, 55, .14);
  --shadow-3: 0 2px 4px rgba(35, 45, 55, .04), 0 20px 48px -24px rgba(35, 45, 55, .18);
  --focus: 0 0 0 3px rgba(100, 125, 149, .30);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #121213; --bg-2: #19191A; --surface: #1A1A1C; --surface-2: #1E1E20; --sunk: #161617;
    --line: #2A2A2C; --line-2: #36363A; --line-3: #4A4A4E;
    --ink: #EDEDEB; --ink-2: #C8C8C5; --muted: #929290; --faint: #68686A;
    --accent: #9DB2C7; --accent-2: #B7C8D9; --accent-ui: #8FA6BC; --accent-ink: #14191E; --accent-soft: #1F2830; --accent-line: #3A4A59; --heading: #F2F2F0;
    --ok: #4ADE80; --ok-soft: #14291B; --warn: #F2B35A; --warn-soft: #2D2312; --bad: #F87171; --bad-soft: #2E1716;
    --run: #7FAEF5; --run-soft: #162236;
    --frame: #0B0B0C; --frame-ink: #F4F4F2;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -16px rgba(0, 0, 0, .6);
    --shadow-3: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .7);
    --focus: 0 0 0 3px rgba(157, 178, 199, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121213; --bg-2: #19191A; --surface: #1A1A1C; --surface-2: #1E1E20; --sunk: #161617;
  --line: #2A2A2C; --line-2: #36363A; --line-3: #4A4A4E;
  --ink: #EDEDEB; --ink-2: #C8C8C5; --muted: #929290; --faint: #68686A;
  --accent: #9DB2C7; --accent-2: #B7C8D9; --accent-ui: #8FA6BC; --accent-ink: #14191E; --accent-soft: #1F2830; --accent-line: #3A4A59; --heading: #F2F2F0;
  --ok: #4ADE80; --ok-soft: #14291B; --warn: #F2B35A; --warn-soft: #2D2312; --bad: #F87171; --bad-soft: #2E1716;
  --run: #7FAEF5; --run-soft: #162236;
  --frame: #0B0B0C; --frame-ink: #F4F4F2;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -16px rgba(0, 0, 0, .6);
  --shadow-3: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 60px -24px rgba(0, 0, 0, .7);
  --focus: 0 0 0 3px rgba(157, 178, 199, .35);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.saas { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-md)/1.55 var(--f-ui); -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; min-height: 100vh; }
body.saas button, body.saas input, body.saas select, body.saas textarea { font: inherit; color: inherit; }
body.saas a { color: inherit; text-decoration: none; }
body.saas em, body.saas i, body.saas cite, body.saas address, body.saas dfn { font-style: normal; }   /* no italics anywhere */
body.saas h1, body.saas h2, body.saas h3 { letter-spacing: -.02em; }
body.saas :focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
[hidden] { display: none !important; }
.ar { font-family: var(--f-ar); direction: rtl; unicode-bidi: plaintext; }
.mono, .tc { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s4) var(--s3);
  border-right: 1px solid var(--line); background: var(--bg); z-index: 20; }
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px; font: 700 19px/1 var(--f-display); letter-spacing: -.02em; color: var(--heading); }   /* same type as the page headings */
body.saas .brand { color: var(--heading); }
/* the logo mark keeps its original colours in every theme — do not tie it to the tokens */
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: #1B1A17; display: grid; place-items: center; flex: none; }
.brand-mark i { display: block; width: 14px; height: 3px; border-radius: 2px; background: #0F766E; box-shadow: 0 -6px 0 -0.5px #F6F5F1; position: relative; top: 4.5px; }
.brand small { display: block; font-weight: 500; font-size: 11px; color: var(--muted); letter-spacing: 0; }
.nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-md); color: var(--ink-2); font-weight: 500; font-size: 13.5px;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease); min-width: 0; }
.nav a svg { flex: none; color: var(--muted); transition: color var(--fast); }
.nav a:hover { background: var(--bg-2); color: var(--ink); }
.nav a.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.nav a.on svg { color: var(--accent); }
.nav .sub { margin-left: 18px; padding-left: 12px; border-left: 1px solid var(--line); }
.nav .sub a { font-size: 12.5px; padding: 5px 10px; }
.nav-label { font-size: var(--t-xs); color: var(--faint); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 10px 10px 4px; }
.side .grow { flex: 1; }
.side-bal { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3); background: var(--surface); display: grid; gap: 10px; }
.bal-row { display: grid; gap: 5px; }
.bal-row .top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-sm); color: var(--muted); }
.bal-row .top b { font-family: var(--f-mono); font-weight: 500; color: var(--ink); font-size: 13px; }
.bar { height: 4px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .6s var(--ease); }
.bar.render > i { background: var(--ink-2); }
.bar.run > i { background: var(--run); }
.me { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-md); cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.me:hover { background: var(--bg-2); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }
.me .who { min-width: 0; line-height: 1.25; } .me .who b { display: block; font-size: 13px; font-weight: 500; }
.me .who small { color: var(--muted); font-size: var(--t-xs); }
.main { min-width: 0; }
.scrim { display: none; }
.topbar { display: none; }
.demo-tag { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--warn); border: 1px solid currentColor; border-radius: 4px; padding: 1px 5px; opacity: .85; }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform var(--med) var(--ease); box-shadow: var(--shadow-2); }
  .side.open { transform: none; }
  .scrim { display: block; position: fixed; inset: 0; background: rgba(10, 10, 12, .4); z-index: 15; opacity: 0; pointer-events: none; transition: opacity var(--med); }
  .scrim.on { opacity: 1; pointer-events: auto; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 10; align-items: center; gap: var(--s2); padding: 10px var(--s4); background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .topbar .brand { padding: 0; } .topbar .sp { flex: 1; }
}

/* ---------- page ---------- */
.page { max-width: 1180px; margin: 0 auto; padding: var(--s8) var(--s8) 96px; }
.page.wide { max-width: 1440px; }
.page.narrow { max-width: 760px; }
@media (max-width: 640px) { .page { padding: var(--s5) var(--s4) 80px; } }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.ph h1 { margin: 0; font: 600 var(--t-3xl)/1.05 var(--f-display); letter-spacing: -.01em; }
.ph h1 em { color: var(--accent); }
.ph p { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }
.eyebrow { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
h2.sec { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; margin: 0; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin: var(--s10) 0 var(--s4); }
.sec-h a { font-size: var(--t-sm); color: var(--muted); font-weight: 500; } .sec-h a:hover { color: var(--ink); }
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: var(--t-sm); }
.grid { display: grid; gap: var(--s4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- surfaces ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s5); min-width: 0; }
.panel.flat { box-shadow: none; } .panel.lift { box-shadow: var(--shadow-2); }
.panel h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.panel .lede { margin: 0 0 var(--s4); color: var(--muted); font-size: var(--t-sm); }
.divider { height: 1px; background: var(--line); margin: var(--s4) 0; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px var(--s5); font-size: 13.5px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; min-width: 0; }

/* ---------- controls ---------- */
.btn { --b: var(--line-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--b); background: var(--surface); color: var(--ink); font-weight: 500; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease); text-decoration: none; }
.btn:hover { --b: var(--line-3); background: var(--surface-2); }
.btn:active { transform: translateY(.5px); }
.btn.pri { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.pri:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn.acc { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.acc:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--bg-2); }
.btn.danger { color: var(--bad); } .btn.danger:hover { background: var(--bad-soft); --b: var(--bad-soft); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn.lg { height: 44px; padding: 0 20px; font-size: 14.5px; border-radius: 12px; }
.btn.icon { width: 36px; padding: 0; } .btn.sm.icon { width: 30px; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.field { width: 100%; height: 38px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  outline: none; transition: border-color var(--fast), box-shadow var(--fast); }
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--accent); box-shadow: var(--focus); }
.field:disabled { background: var(--sunk); color: var(--muted); }
textarea.field { height: auto; padding: 10px 12px; resize: vertical; }
select.field { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2375716A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
label.f { display: block; margin-bottom: var(--s4); }
label.f > span { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
label.f > span small { color: var(--faint); font-weight: 400; }
.err { color: var(--bad); font-size: 13px; min-height: 20px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; }
.check input { margin: 3px 0 0; accent-color: var(--accent); width: 15px; height: 15px; flex: none; }

/* choice tiles (radio/checkbox cards) */
.tiles { display: grid; gap: var(--s2); }
.tiles.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .tiles.c3, .tiles.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles.c2.stack-sm { grid-template-columns: minmax(0, 1fr); } }
.tile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: var(--surface); cursor: pointer; transition: border-color var(--fast), background var(--fast), box-shadow var(--fast); min-width: 0; }
.tile:hover { border-color: var(--line-3); }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile b { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile small { color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.tile:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.tile:has(input:focus-visible) { box-shadow: var(--focus); }
.tile:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.tile .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-3); flex: none; transition: .15s; }
.tile:has(input:checked) .dot { border: 4px solid var(--accent); }
.tile.locked { cursor: default; background: var(--surface-2); }

/* segmented control */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--sunk); border: 1px solid var(--line); border-radius: 10px; }
.seg button { border: 0; background: none; padding: 4px 11px; border-radius: 7px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg button .n { font-family: var(--f-mono); font-size: 11px; color: var(--faint); }

/* ---------- status ---------- */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--muted); }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st.ok { color: var(--ok); } .st.run { color: var(--run); } .st.run::before { animation: pulse 1.4s var(--ease) infinite; }
.st.warn { color: var(--warn); } .st.bad { color: var(--bad); } .st.mute { color: var(--faint); }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--sunk); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.tag.acc { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.tag.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.notice { display: flex; gap: var(--s3); align-items: flex-start; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); font-size: 13.5px; }
.notice b { display: block; font-weight: 600; }
.notice.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: color-mix(in srgb, var(--warn) 80%, var(--ink)); }
.notice.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.notice.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.demo-pay { border: 1px dashed color-mix(in srgb, var(--warn) 60%, transparent); background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 85%, var(--ink));
  border-radius: var(--r-lg); padding: 12px 14px; font-size: 13px; }
.demo-pay b { display: block; font-family: var(--f-mono); letter-spacing: .04em; font-size: 12px; margin-bottom: 2px; }

/* ---------- video frames & project cards ---------- */
.frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--frame); isolation: isolate; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.frame img.on { opacity: 1; }
.frame .ph-ic { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .22); }
.frame .tcode { position: absolute; right: 8px; bottom: 8px; font-family: var(--f-mono); font-size: 11px; color: var(--frame-ink); background: rgba(0, 0, 0, .55);
  padding: 2px 6px; border-radius: 5px; backdrop-filter: blur(6px); }
.frame .cap { position: absolute; left: 10%; right: 10%; bottom: 12%; text-align: center; display: grid; gap: 2px; pointer-events: none; }
.frame .cap span { justify-self: center; padding: 1px 8px; border-radius: 4px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; line-height: 1.5; }
.frame .veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .66), rgba(0, 0, 0, .1)); display: flex; align-items: flex-end; padding: 10px; color: #fff; }
.frame .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity var(--fast); background: rgba(0, 0, 0, .18); }
.frame .play span { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; color: #111; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }

.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s5) var(--s4); }
.pcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; position: relative; }
.pcard .frame { box-shadow: var(--shadow-1); transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease); }
.pcard:hover .frame { box-shadow: var(--shadow-2); }
.pcard:hover .frame img.on { transform: scale(1.025); }
.pcard:hover .frame .play { opacity: 1; }
.pcard .meta { display: grid; gap: 3px; min-width: 0; }
.pcard .row1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pcard .name { font-weight: 500; font-size: 13.5px; flex: 1; }
.pcard .row2 { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.pcard .row2 .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.pcard .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .15); }
.pcard .prog i { display: block; height: 100%; background: var(--accent); transition: width .8s var(--ease); }
.lang { font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em; color: var(--ink-2); }

.plist { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); }
.prow { display: grid; grid-template-columns: 96px minmax(0, 2.4fr) 90px 90px minmax(0, 1.2fr) 110px 44px; gap: var(--s4); align-items: center; padding: 10px var(--s4);
  border-bottom: 1px solid var(--line); transition: background var(--fast); }
.prow:last-child { border-bottom: 0; } .prow:hover { background: var(--surface-2); }
.prow .frame { border-radius: 8px; }
.prow.head { background: var(--surface-2); font-size: var(--t-xs); color: var(--muted); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; padding: 8px var(--s4); }
.prow.head:hover { background: var(--surface-2); }
.show-md { display: none !important; }
@media (max-width: 900px) { .prow { grid-template-columns: 80px minmax(0, 1fr) 44px; } .prow .hide-md { display: none; } .show-md { display: inline-flex !important; margin-left: 6px; } }

/* menus */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; } .menu > summary::-webkit-details-marker { display: none; }
.pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: 5px; z-index: 30; animation: popin var(--fast) var(--ease); }
.pop.up { top: auto; bottom: calc(100% + 6px); }
.pop .mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 13px;
  text-align: left; color: var(--ink); }
.pop .mi:hover { background: var(--bg-2); } .pop .mi small { margin-left: auto; color: var(--faint); font-family: var(--f-mono); font-size: 11px; }
.pop .mi.danger { color: var(--bad); } .pop hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
.pop .lbl { font-size: var(--t-xs); color: var(--faint); padding: 6px 10px 2px; text-transform: uppercase; letter-spacing: .05em; }
@keyframes popin { from { opacity: 0; transform: translateY(-3px); } }

/* ---------- tables (billing / admin) ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; padding: 9px 14px;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tbody tr { transition: background var(--fast); } .tbl tbody tr:hover { background: var(--surface-2); }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.plus { color: var(--ok); } .minus { color: var(--ink-2); }

/* ---------- empty & skeleton ---------- */
.empty { display: grid; place-items: center; text-align: center; gap: 10px; padding: var(--s12) var(--s6); border: 1px dashed var(--line-2); border-radius: var(--r-xl); color: var(--muted); }
.empty h3 { margin: 0; color: var(--ink); font: 600 24px/1.2 var(--f-display); }
.empty p { margin: 0; max-width: 42ch; font-size: 13.5px; }
.sk { background: linear-gradient(90deg, var(--sunk) 0%, var(--bg-2) 50%, var(--sunk) 100%); background-size: 200% 100%; animation: sk 1.3s linear infinite; border-radius: var(--r-md); }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- toasts ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; background: var(--ink); color: var(--bg); padding: 10px 16px;
  border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow-2); transition: opacity var(--med) var(--ease), transform var(--med) var(--ease); z-index: 80;
  max-width: calc(100vw - 32px); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
dialog.dlg { border: 1px solid var(--line); border-radius: var(--r-xl); padding: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); width: min(460px, calc(100vw - 32px)); }
dialog.dlg::backdrop { background: rgba(10, 10, 12, .45); }
dialog.dlg form { padding: var(--s6); } dialog.dlg h3 { margin: 0 0 6px; font-size: 17px; }
.dlg-actions { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s5); flex-wrap: wrap; }

/* ---------- auth ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: var(--s12) clamp(24px, 6vw, 88px); gap: var(--s6); }
.auth-form form { width: 100%; max-width: 380px; }
.auth-form h1 { margin: 0 0 6px; font: 600 40px/1.05 var(--f-display); }
.auth-form p.lede { margin: 0 0 var(--s6); color: var(--muted); }
.auth-art { position: relative; background: var(--frame); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: var(--s12); }
.auth-art .stage { width: min(560px, 100%); display: grid; gap: var(--s4); }
.auth-art .screen { aspect-ratio: 16 / 9; border-radius: 14px; background: radial-gradient(120% 90% at 30% 20%, #2A3B3A 0%, #15191B 55%, #0C0D0F 100%); position: relative;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.auth-art .screen .cap { bottom: 11%; }
.auth-art .screen .cap span { font-size: clamp(12px, 1.5vw, 16px); }
.auth-art .lines { display: grid; gap: 6px; font-family: var(--f-mono); font-size: 12px; color: rgba(244, 243, 239, .55); }
.auth-art .lines div { display: grid; grid-template-columns: auto minmax(0, 1fr); white-space: nowrap; gap: 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .06); }
.auth-art .lines div.on { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .06); color: rgba(244, 243, 239, .9); }
.auth-art .lines .ar { font-family: var(--f-ar); font-size: 14px; text-align: right; }
.auth-art .claim { color: rgba(244, 243, 239, .72); font-size: 13px; }
.auth-art .claim b { color: #fff; font: 600 26px/1.15 var(--f-display); display: block; margin-bottom: 6px; }
@media (max-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth-art { display: none; } }

/* ---------- drop zones ---------- */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 230px;
  padding: var(--s8) var(--s6); border-radius: var(--r-xl); border: 1.5px dashed var(--line-3); background: var(--surface); cursor: pointer;
  transition: border-color var(--fast), background var(--fast), transform var(--fast); }
.drop:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface)); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.005); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .ic { width: 48px; height: 48px; border-radius: 14px; background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.drop h3 { margin: 4px 0 0; font: 600 28px/1.15 var(--f-display); letter-spacing: -.01em; }
.drop p { margin: 0; color: var(--muted); font-size: 13.5px; } .drop p u { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.drop .fmt { font-size: 12px; color: var(--faint); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.chips span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); background: var(--surface-2); border-radius: 5px; padding: 2px 7px; }
.drop.hero { min-height: 380px; border-radius: var(--r-2xl); }
.drop.hero .ic, .drop.big .ic { width: 56px; height: 56px; border-radius: 16px; }
.drop.compact { flex-direction: row; justify-content: flex-start; text-align: left; gap: 14px; min-height: 0; padding: 16px 18px; border-radius: var(--r-xl); }
.drop.compact .ic { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.drop.compact b { display: block; font-weight: 600; font-size: 14px; }
.drop.compact .small { display: block; }

/* ---------- dashboard ---------- */
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.dash-head h1 { margin: 0; font: 600 30px/1.15 var(--f-ui); letter-spacing: -.03em; }
.dash-head p { margin: 8px 0 0; font-size: 13.5px; max-width: 60ch; }
.bal-tiles { display: flex; gap: 12px; }
.bal-tile { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); min-width: 150px;
  color: var(--ink); transition: border-color var(--fast), box-shadow var(--fast); }
.bal-tile:hover { border-color: var(--line-2); box-shadow: var(--shadow-1); }
.bal-tile > span { display: grid; line-height: 1.2; } .bal-tile b { font: 700 22px/1.1 var(--f-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bal-tile b small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; } .bal-tile > span > span { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) { .bal-tiles { width: 100%; } .bal-tile { flex: 1; min-width: 0; } }
.dash-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .dash-row { grid-template-columns: minmax(0, 1fr); } }
.create-card { position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); cursor: pointer;
  min-height: 200px; transition: border-color var(--fast), box-shadow var(--fast), background var(--fast); }
.create-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.create-card.over { border-color: var(--ink); border-style: dashed; background: var(--bg-2); }
.create-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cc-ic { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; flex: none; color: var(--ink); }
.cc-body { display: grid; gap: 6px; justify-items: start; position: relative; z-index: 1; pointer-events: none; }
.cc-body b { font-size: 17px; font-weight: 600; letter-spacing: -.015em; } .cc-body > span:not(.btn) { color: var(--muted); font-size: 13px; max-width: 40ch; }
.cc-btn { margin-top: 14px; height: 42px; padding: 0 18px; pointer-events: auto; }
.banner { position: relative; display: block; min-height: 200px; border-radius: var(--r-xl); overflow: hidden; background: var(--frame); color: #fff; isolation: isolate; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s var(--ease), transform .6s var(--ease); z-index: -1; }
.banner img.on { opacity: 1; } .banner:hover img.on { transform: scale(1.02); }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .05) 20%, rgba(0, 0, 0, .7)); z-index: -1; }
.banner-txt { position: absolute; right: 24px; bottom: 22px; left: 40%; display: grid; gap: 4px; text-align: right; justify-items: end; }
.banner-txt .eyebrow { color: rgba(255, 255, 255, .7); }
.banner-txt b { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; max-width: 100%; } .banner-txt > span:last-child { font-size: 12.5px; color: rgba(255, 255, 255, .78); }
.banner-go { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: rgba(255, 255, 255, .94); color: #1C1C1E; font-size: 12.5px; font-weight: 500; }
.banner.plain { background: #1C1C1E; } .banner.plain::after { display: none; }
.banner.plain .banner-txt { left: 24px; text-align: right; } .banner.plain .banner-txt b { font-size: 24px; }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.run { background: var(--run-soft); color: var(--run); } .pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.mute { background: var(--sunk); color: var(--muted); }

/* ---------- new project ---------- */
.stepper { display: flex; list-style: none; margin: 0 0 var(--s8); padding: 0; gap: 0; }
.stepper li { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--faint); min-width: 0; }
.stepper li:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--line-2); margin: 0 12px; min-width: 12px; }
.stepper li.done:not(:last-child)::after { background: var(--accent); }
.stepper .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 500 12px var(--f-mono); border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); }
.stepper li.on { color: var(--ink); } .stepper li.on .n { background: var(--ink); border-color: var(--ink); color: var(--bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent); }
.stepper li.done { color: var(--ink-2); } .stepper li.done .n { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-family: var(--f-ui); }
.stepper .l { white-space: nowrap; }
@media (max-width: 640px) { .stepper li:not(.on) .l { display: none; } .stepper li:not(:last-child)::after { margin: 0 8px; } }
.np { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--s6); align-items: start; }
@media (max-width: 1000px) { .np { grid-template-columns: minmax(0, 1fr); } }
.np .aside { position: sticky; top: var(--s6); display: grid; gap: var(--s4); }
.opt-group { display: grid; gap: var(--s3); padding: var(--s5) 0; border-top: 1px solid var(--line); }
.opt-group:first-child { border-top: 0; padding-top: 0; }
.opt-group > header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.opt-group > header h3 { margin: 0; font-size: 14px; font-weight: 600; }
.opt-group > header span { font-size: var(--t-sm); color: var(--muted); }
details.more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary svg { transition: transform var(--fast); } details.more[open] > summary svg { transform: rotate(90deg); }
.file-chip { display: flex; gap: var(--s3); align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.file-chip .frame { width: 112px; flex: none; border-radius: 8px; }
.file-chip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.est-line { display: flex; justify-content: space-between; gap: var(--s3); padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.est-line:last-child { border-bottom: 0; } .est-line b { font-family: var(--f-mono); font-weight: 500; }
.est-line.total { font-weight: 600; } .est-line.short b { color: var(--bad); }
.pipeline { display: grid; gap: 0; }
.pipe { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pipe:last-child { border-bottom: 0; }
.pipe .ic { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; color: var(--faint); font-size: 11px; }
.pipe.done .ic { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pipe.now .ic { border-color: var(--run); border-top-color: transparent; animation: spin .9s linear infinite; }
.pipe.fail .ic { background: var(--bad); border-color: var(--bad); color: #fff; }
.pipe .t { font-size: 14px; font-weight: 500; } .pipe.wait .t { color: var(--faint); }
.pipe .d { font-size: var(--t-sm); color: var(--muted); }
.pipe .p { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- editor ---------- */
.ed { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr); gap: 0; height: calc(100vh - 0px); }
.ed-stage { display: flex; flex-direction: column; min-width: 0; background: var(--frame); color: var(--frame-ink); }
.ed-head { display: flex; align-items: center; gap: var(--s3); padding: 12px var(--s5); border-bottom: 1px solid rgba(255, 255, 255, .07); min-width: 0; }
.ed-head .t { font-weight: 500; font-size: 14px; } .ed-head .btn { --b: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: var(--frame-ink); }
.ed-head .btn:hover { background: rgba(255, 255, 255, .12); }
.ed-head .btn.acc { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ed-video { flex: 1; display: grid; place-items: center; padding: var(--s5); min-height: 0; }
.ed-screen { position: relative; width: 100%; max-height: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.ed-screen video { width: 100%; height: 100%; display: block; background: #000; }
.ed-ov { position: absolute; left: 6%; right: 6%; bottom: max(15%, 58px); display: grid; gap: 3px; justify-items: center; text-align: center; pointer-events: none; }
.ed-ov span { padding: 2px 10px; border-radius: 5px; background: rgba(0, 0, 0, .66); color: #fff; line-height: 1.5; max-width: 100%; }
.ed-ov .o-es { font-size: clamp(11px, 1.3vw, 14px); color: #E5E5E5; }
.ed-ov .o-ar { font-family: var(--f-ar); font-size: clamp(14px, 1.8vw, 21px); direction: rtl; unicode-bidi: plaintext; }
.ed-transport { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s5) 14px; font-size: 12.5px; color: rgba(244, 243, 239, .7); flex-wrap: wrap; }
.ed-transport .tc { color: var(--frame-ink); font-size: 13px; }
.ed-transport label { display: inline-flex; gap: 7px; align-items: center; cursor: pointer; }
.ed-transport input { accent-color: var(--accent); }
.ed-transport .sp { flex: 1; }
.ed-side { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); }
.ed-tools { display: flex; gap: var(--s2); padding: 12px var(--s4); border-bottom: 1px solid var(--line); align-items: center; }
.ed-tools .field { height: 34px; }
.cues { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.cue { display: grid; grid-template-columns: 76px minmax(0, 1fr) 30px; gap: 4px var(--s3); padding: 10px var(--s4); border-bottom: 1px solid var(--line);
  transition: background var(--fast); position: relative; }
.cue::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: transparent; transition: background var(--fast); }
.cue.cur { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); } .cue.cur::before { background: var(--accent); }
.cue textarea.ch { border-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); }
.cue.del { opacity: .45; } .cue.del textarea, .cue.del .es { text-decoration: line-through; }
.cue.new { background: color-mix(in srgb, var(--ok-soft) 60%, var(--surface)); }
.cue .when { grid-row: span 2; display: flex; flex-direction: column; gap: 2px; }
.cue .when button { border: 0; background: none; padding: 2px 0; cursor: pointer; text-align: left; font-family: var(--f-mono); font-size: 12px; color: var(--accent); }
.cue .when button:hover { text-decoration: underline; }
.cue .when small { font-family: var(--f-mono); font-size: 10.5px; color: var(--faint); }
.cue .es { font-size: 12.5px; color: var(--muted); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.cue .es input { width: 100%; border: 1px solid var(--line-2); border-radius: 6px; padding: 4px 8px; background: var(--surface); font-size: 12.5px; }
.cue textarea { grid-column: 2; width: 100%; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--surface-2); color: var(--ink);
  font: 400 15px/1.6 var(--f-ar); direction: rtl; unicode-bidi: plaintext; field-sizing: content; min-height: 38px; outline: none; transition: border-color var(--fast), box-shadow var(--fast); }
.cue textarea:focus { border-color: var(--accent); box-shadow: var(--focus); background: var(--surface); }
.cue .x { grid-row: 1 / span 2; grid-column: 3; align-self: start; }
.ed-save { display: flex; align-items: center; gap: var(--s2); padding: 12px var(--s4); border-top: 1px solid var(--line); background: var(--surface-2); }
.ed-save .msg { flex: 1; font-size: 13px; color: var(--muted); min-width: 0; }
.ed-save .msg b { color: var(--warn); font-weight: 600; }
@media (max-width: 1000px) {
  .ed { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ed-stage { position: sticky; top: 53px; z-index: 5; }
  .ed-video { padding: 0 var(--s3); } .ed-side { border-left: 0; min-height: 60vh; }
  .ed-head { padding: 8px var(--s3); } .ed-head .btn span { display: none; }
  .ed-transport { padding: 6px var(--s3) 8px; gap: 10px; flex-wrap: nowrap; font-size: 12px; } .ed-transport .faint, .ed-transport #len { display: none; }
  .cues { max-height: none; overflow: visible; }
  .ed-save { position: sticky; bottom: 0; }
}

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); position: relative; min-width: 0;
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease); }
.plan:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.plan.rec { border: 1.5px solid var(--ink); box-shadow: var(--shadow-3); }
.plan .nm { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 14.5px; min-height: 24px; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.badge.mute { background: var(--sunk); color: var(--muted); border: 1px solid var(--line); }
.plan .pr { font: 700 40px/1 var(--f-ui); letter-spacing: -.035em; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.plan .pr small { font: 400 12.5px var(--f-ui); color: var(--muted); letter-spacing: 0; }
.plan .per { font-size: 12.5px; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); } .plan .per b { color: var(--ink); font-weight: 600; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 13px; color: var(--ink-2); flex: 1; align-content: start; }
.plan li { display: flex; gap: 8px; align-items: flex-start; } .plan li svg { color: var(--ink); flex: none; margin-top: 2px; }
.plan-foot { display: grid; gap: 8px; text-align: center; margin-top: 6px; } .plan-foot small { color: var(--faint); font-size: 11.5px; }
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.balance-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: var(--s6);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); font-size: 13.5px; }
.balance-strip > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.balance-strip b.mono { font-size: 16px; font-weight: 500; } .balance-strip .muted { margin-right: 4px; }
.balance-strip a { color: var(--muted); font-weight: 500; } .balance-strip a:hover { color: var(--ink); }
.dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); margin: 0 4px; }
.included { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: var(--s6); padding: 14px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.included span:not(.eyebrow)::before { content: "✓"; color: var(--accent); margin-right: 6px; font-weight: 600; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s10); }
@media (max-width: 800px) { .faq { grid-template-columns: minmax(0, 1fr); } }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 14.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq .pm { width: 12px; height: 12px; position: relative; flex: none; }
.faq .pm::before, .faq .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; border-radius: 2px; transition: transform var(--med) var(--ease); }
.faq .pm::after { transform: rotate(90deg); } .faq details[open] .pm::after { transform: rotate(0); }
.faq p { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; max-width: 60ch; }

/* ---------- checkout ---------- */
.checkout { max-width: 1000px; }
.backlink { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: var(--s4); } .backlink:hover { color: var(--ink); }
.demo-pay { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--s6); }
.demo-ic { width: 22px; height: 22px; border-radius: 50%; background: var(--warn); color: #fff; display: grid; place-items: center; font: 700 12px var(--f-mono); flex: none; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (max-width: 860px) { .co-grid { grid-template-columns: minmax(0, 1fr); } }
.co-grid .panel { padding: var(--s6); }
.co-grid h3 { margin-bottom: var(--s4); }
.co-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.co-item > div { display: grid; gap: 2px; } .co-item b { font-weight: 600; } .co-item b.mono { font-size: 18px; font-weight: 500; }
.est-line.total { border-top: 1px solid var(--line); border-bottom: 0; margin-top: 4px; padding-top: 12px; }
.co-after { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px dashed var(--line-2); display: grid; gap: 8px; }
.co-bal { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: baseline; font-size: 13.5px; }
.co-bal .mono { color: var(--muted); } .co-bal b.mono { color: var(--ink); font-weight: 600; } .co-bal .arrow { color: var(--faint); }
.co-ack { padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-lg); margin-bottom: 12px; background: var(--surface-2); }
.co-ack:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); }
.co-next { list-style: none; margin: var(--s6) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; counter-reset: n; }
.co-next li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 1px 12px; counter-increment: n; font-size: 13px; }
.co-next li::before { content: counter(n); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 500 11px var(--f-mono); color: var(--muted); }
.co-next b { font-weight: 600; } .co-next span { color: var(--muted); }
.co-done { text-align: center; padding: 52px 28px; max-width: 620px; margin: 24px auto 0; }
.co-done-ic { width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--warn-soft); color: var(--warn); margin-bottom: 14px; }
.co-done h1 { font: 600 40px/1.1 var(--f-display); margin: 10px 0; } .co-done h1 em { color: var(--accent); }
.co-done p { max-width: 46ch; margin: 0 auto; }
.co-done-acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ---------- new project (extras) ---------- */
.np-hints { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.np-hints li { display: grid; gap: 2px; padding-left: 12px; border-left: 2px solid var(--accent-line); font-size: 13px; }
.np-hints b { font-weight: 600; } .np-hints span { color: var(--muted); }
@media (max-width: 640px) { .np-hints { grid-template-columns: minmax(0, 1fr); } }
.media-panel { padding: 10px; }
.media-panel .frame, .review-media .frame { border-radius: 12px; }
.media-panel video, .review-media video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.file-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 8px 6px; }
.fname { font-weight: 600; }
.route { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); flex-wrap: wrap; }
.route > div { display: grid; gap: 2px; } .route small { font-size: 11.5px; color: var(--muted); } .route b { font-weight: 600; font-size: 15px; }
.route .arrow { color: var(--accent); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); }
.always { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; } .always .muted { margin-right: 4px; }
.toggle-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color var(--fast), background var(--fast); }
.toggle-row:hover { border-color: var(--line-3); }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row > span:last-child { display: grid; gap: 2px; } .toggle-row b { font-weight: 600; font-size: 13.5px; }
.toggle-row .sw { width: 34px; height: 20px; border-radius: 99px; background: var(--line-2); position: relative; transition: background var(--fast); margin-top: 1px; }
.toggle-row .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--med) var(--ease); }
.toggle-row:has(input:checked) { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
.toggle-row:has(input:checked) .sw { background: var(--accent); } .toggle-row:has(input:checked) .sw::after { transform: translateX(14px); }
.toggle-row:has(input:focus-visible) { box-shadow: var(--focus); }
.np-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); flex-wrap: wrap; }
.review-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: var(--s5); }
.review-file { display: grid; gap: 2px; }
.review-kv { padding-top: var(--s4); border-top: 1px solid var(--line); }
.est h3 { margin-bottom: 4px; }
.est-line.sub { padding-left: 12px; color: var(--muted); font-size: 13px; }
.meters { display: grid; gap: 12px; margin: 14px 0 6px; padding: 14px 0 4px; border-top: 1px solid var(--line); }
.meter .top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .meter b { font-weight: 500; }
.meter.short .top b { color: var(--bad); } .meter.short .bar > i { background: var(--bad); }
.est-line b small { font: 500 11px var(--f-ui); color: var(--muted); }
.est-line:has(+ .est-line.total), .est-line:has(+ .divider) { border-bottom: 0; }
.mins-row .top b { font-family: var(--f-ui); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -.02em; }
@media (max-width: 640px) { .stepper li.on { flex: 0 0 auto; } .stepper li:not(.on) { flex: 1 1 0; } }
@media (max-width: 900px) { .dash .ph > .btn { display: none; } }

/* ---------- project cards (reference layout) ---------- */
.projects { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 8px 8px 14px; gap: 10px; transition: border-color var(--fast), box-shadow var(--fast); }
.pcard:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.pcard .frame { border-radius: 10px; box-shadow: none; }
.pcard .meta { padding: 0 6px; gap: 6px; }
.pcard .name { font-weight: 600; font-size: 14px; }
.frame .tcode { top: 8px; bottom: auto; }

/* ---------- new project (reference layout: upload + preview on top, settings below) ---------- */
.np-head { display: grid; gap: 20px; margin-bottom: 24px; }
.np-head h1 { margin: 0; font: 600 26px/1.2 var(--f-ui); letter-spacing: -.025em; }
.np-head .stepper { margin: 0; max-width: 720px; }
.np-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: stretch; }
@media (max-width: 900px) { .np-top { grid-template-columns: minmax(0, 1fr); } }
.np-upload { display: grid; gap: 12px; align-content: start; }
.np-upload .drop.hero { min-height: 290px; border-radius: var(--r-xl); background: var(--surface-2); border-color: var(--line-2); gap: 14px; }
.drop .drop-t { display: grid; gap: 6px; } .drop .drop-t b { font-weight: 600; font-size: 14.5px; }
.drop.slim { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 0; padding: 14px 16px; gap: 14px; border-radius: var(--r-xl); }
.drop.slim .ic { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.drop.hero .ic, .drop.slim .ic { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.np-upload .file-row { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); flex-wrap: nowrap; }
.fthumb { width: 96px; flex: none; border-radius: 8px; } .fthumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fmeta { flex: 1; min-width: 0; }
.np-preview { display: grid; gap: 8px; align-content: start; }
.np-preview .lbl, .flbl { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.np-preview .frame { border-radius: var(--r-xl); }
.np-preview video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.pv-empty { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.np-settings { padding: 22px; display: grid; gap: 18px; }
.np-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.np-grid .f { margin: 0; display: grid; gap: 6px; } .np-grid label.f > span { margin: 0; font-weight: 600; color: var(--ink); }
.np-grid select:disabled { color: var(--ink); background-color: var(--surface-2); opacity: 1; }
@media (max-width: 640px) { .np-grid { grid-template-columns: minmax(0, 1fr); } }
.seg.q { display: flex; } .seg.q label { flex: 1; position: relative; }
.seg.q input { position: absolute; opacity: 0; pointer-events: none; }
.seg.q span { display: block; text-align: center; padding: 6px 4px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; }
.seg.q input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg.q input:focus-visible + span { box-shadow: var(--focus); }
.np-sec { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.cboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.cbox { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color var(--fast), background var(--fast); }
.cbox:hover { border-color: var(--line-3); }
.cbox input { position: absolute; opacity: 0; pointer-events: none; }
.cbox .cb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--line-3); flex: none; margin-top: 2px; display: grid; place-items: center; transition: background var(--fast), border-color var(--fast); }
.cbox input:checked + .cb { background: var(--ink); border-color: var(--ink); }
.cbox input:checked + .cb::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--bg); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.cbox input:focus-visible + .cb { box-shadow: var(--focus); }
.cbox > span:last-child { display: grid; gap: 1px; } .cbox b { font-size: 13px; font-weight: 600; } .cbox small { font-size: 11.5px; color: var(--muted); }
.cbox.locked { cursor: default; background: var(--surface-2); } .cbox.locked input:checked + .cb { background: var(--muted); border-color: var(--muted); }
.cbox:has(input[name]:checked) { border-color: var(--ink); }
.np-settings .np-foot { align-items: center; margin-top: 0; }
.est-strip { font-size: 13px; min-width: 0; } .est-strip b { color: var(--ink); font-weight: 600; } .bad-t { color: var(--bad); } .bad-t b { color: var(--bad) !important; }

/* ---------- pricing & checkout (reference layout) ---------- */
.pricing .dash-head h1 { font-size: 30px; margin-top: 6px; }
.info-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; padding: 22px 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.info-row > div { display: flex; gap: 14px; align-items: flex-start; }
.info-row .ic { width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; flex: none; color: var(--ink); }
.info-row b { display: block; font-size: 13.5px; font-weight: 600; } .info-row span span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 800px) { .info-row { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.checkout { max-width: 1080px; margin: 0; }
.checkout .np-head h1 { font-size: 28px; }
.demo-pay { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: var(--r-xl); max-width: 640px; }
.demo-pay b { font-family: var(--f-ui); letter-spacing: .01em; font-size: 12.5px; font-weight: 700; }
.demo-ic { width: auto; height: auto; background: none; color: var(--warn); border-radius: 0; }
.co-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.co-item { justify-content: flex-start; align-items: flex-start; gap: 14px; background: var(--surface); padding: 12px; margin-bottom: 10px; }
.co-item > div { gap: 3px; } .co-item b.mono { font-size: 13px; font-weight: 600; }
.co-thumb { width: 64px; height: 64px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.co-thumb .brand-mark { transform: none; }
.est-line.total.big { font-size: 16px; } .est-line.total.big b { font: 700 18px var(--f-ui); letter-spacing: -.02em; }
.co-ack { margin-top: 14px; } .co-ack:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.co-side { display: grid; gap: 16px; }
.co-get { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.co-get li { display: flex; gap: 10px; } .co-get svg { flex: none; margin-top: 2px; color: var(--ink); }
.co-meter { display: grid; gap: 8px; } .co-meter + .co-meter { margin-top: 16px; }
.co-meter .top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; } .co-meter b.mono { font-size: 15px; font-weight: 600; }
.bar > i { background: var(--ink); } .bar.render > i { background: var(--muted); }
.co-done h1 { font: 600 32px/1.15 var(--f-ui); letter-spacing: -.03em; }
body.saas .banner, body.saas .banner:hover { color: #fff; }
.eyebrow { font-family: var(--f-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; color: var(--muted); }
@media (max-width: 860px) { .co-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .np-settings .np-foot .btn { width: 100%; } .co-grid .panel { padding: 18px; } }

/* ==========================================================================
   Studio top navigation (replaces the sidebar) and the editor's focus mode
   ========================================================================== */
.page { max-width: 1280px; } .page.wide { max-width: 1360px; }
.tnav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.tnav-in { max-width: 1360px; margin: 0 auto; height: 60px; padding: 0 32px; display: flex; align-items: center; gap: 24px; }
.tnav .brand { padding: 0; flex: none; }
.tnav-links { flex: 1; display: flex; justify-content: center; gap: 4px; align-self: stretch; }
.tnav-links a { position: relative; display: flex; align-items: center; padding: 0 14px; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: color var(--fast); }
.tnav-links a:hover { color: var(--ink); }
.tnav-links a.on { color: var(--ink); font-weight: 600; }
.tnav-links a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.tnav-right { display: flex; align-items: center; gap: 10px; flex: none; }
.bal-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; font-size: 12.5px; color: var(--muted); background: var(--surface); transition: border-color var(--fast); }
.bal-chip:hover { border-color: var(--line-3); color: var(--ink); }
.bal-chip b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot-bal { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.acct { position: relative; }
.avatar-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 4px; border: 1px solid transparent; border-radius: 99px; background: none; cursor: pointer; color: var(--ink); }
.avatar-btn:hover, .avatar-btn[aria-expanded="true"] { background: var(--bg-2); }
.avatar-btn svg { transform: rotate(90deg); color: var(--muted); }
.avatar-btn .who-n { font-size: 13px; font-weight: 500; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { background: var(--ink); color: var(--bg); }
.acct .pop { right: 0; top: calc(100% + 8px); width: 240px; }
.pop .mi.static { cursor: default; color: var(--muted); } .pop .mi.static:hover { background: none; }
.tnav-new, .tnav-burger { display: none !important; }
.drawer { border-top: 1px solid var(--line); background: var(--bg); padding: 10px 16px 18px; box-shadow: var(--shadow-2); max-height: calc(100vh - 60px); overflow: auto; }
.drawer nav { display: grid; gap: 2px; }
.drawer nav a { padding: 11px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.drawer nav a.on { background: var(--bg-2); color: var(--ink); font-weight: 600; }
.drawer-bal { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.drawer-bal b { color: var(--ink); }
.drawer-acct { border-top: 1px solid var(--line); padding-top: 10px; }
.drawer-acct .lbl, .drawer-acct .mi.static, .drawer-acct .mi.static + hr { display: none; } .drawer-acct hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.drawer-acct .mi { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 8px; font-size: 14px; text-align: left; color: var(--ink); cursor: pointer; }
.drawer-acct .mi:hover { background: var(--bg-2); } .drawer-acct .mi.static { color: var(--muted); cursor: default; }
.who-row { display: flex; gap: 10px; align-items: center; padding: 6px 12px 8px; } .who-row b { display: block; font-size: 14px; } .who-row small { color: var(--muted); font-size: 12px; }
@media (min-width: 900px) { .drawer { display: none !important; } }
@media (max-width: 1080px) { .avatar-btn .who-n { display: none; } .tnav-in { gap: 16px; } .tnav-links a { padding: 0 10px; } .tnav-links a.on::after { left: 10px; right: 10px; } }
@media (max-width: 899px) {
  .tnav-links, .acct, .bal-chip { display: none; }
  .tnav-new, .tnav-burger { display: inline-flex !important; }
  .tnav-right { margin-left: auto; gap: 6px; }
  .tnav-in { padding: 0 16px; height: 56px; }
}

/* editor focus mode: its own bar, no studio navigation */
#view.focus { min-height: 100vh; display: flex; flex-direction: column; }
.fbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.fbar-back { flex: none; }
.fbar-title { min-width: 0; flex: 1; line-height: 1.25; } .fbar-title .t { font-weight: 600; font-size: 14px; }
.fbar-meta { font-size: 12px; color: var(--muted); } .fbar-meta .st { font-size: 12px; }
.fbar-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fbar .msg b { color: var(--warn); font-weight: 600; }
.fbar-acts { display: flex; gap: 6px; align-items: center; flex: none; }
#view.focus .ed { height: calc(100vh - 56px); flex: 1; }
@media (max-width: 1000px) {
  #view.focus .ed { height: auto; }
  #view.focus .ed-stage { top: 56px; }
  .fbar { gap: 8px; padding: 0 10px; } .fbar-back span, .fbar-acts summary span { display: none; } .fbar .m-static { display: none; }
}
@media (max-width: 560px) { .fbar #undo { display: none; } }

/* ---------- login / sign-up ---------- */
.auth2 { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.auth-top { display: flex; justify-content: space-between; align-items: center; height: 64px; padding: 0 32px; border-bottom: 1px solid var(--line); }
.auth-top .brand { padding: 0; }
.auth-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1120px; width: 100%; margin: 0 auto; padding: 56px 32px; gap: 64px; align-items: center; }
.auth-card { width: 100%; max-width: 400px; justify-self: center; }
.auth-card h1 { margin: 0 0 6px; font: 700 30px/1.15 var(--f-ui); letter-spacing: -.03em; }
.auth-card .lede { margin: 0 0 28px; color: var(--muted); }
.auth-card .field { height: 42px; }
.ferr { display: block; min-height: 0; margin-top: 6px; font-size: 12.5px; color: var(--bad); } .ferr:empty { display: none; }
.field[aria-invalid="true"] { border-color: var(--bad); }
.pw { position: relative; display: block; } .pw .field { padding-right: 42px; }
.pw-t { position: absolute; right: 4px; top: 4px; width: 34px; height: 34px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pw-t:hover, .pw-t[aria-pressed="true"] { color: var(--ink); background: var(--bg-2); }
.auth-card .btn.lg { height: 46px; margin-top: 6px; }
.auth-switch { margin: 20px 0 0; font-size: 13.5px; color: var(--muted); text-align: center; } .auth-switch a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-fine { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.auth-fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.auth-side { display: grid; gap: 22px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--surface-2); }
.auth-player { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; color: #fff; display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding: 0 0 12%;
  background: radial-gradient(90% 80% at 30% 25%, #4A4642 0%, #2E2C2A 45%, #1A1918 100%); box-shadow: var(--shadow-3); }
.auth-player::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255, 255, 255, .3); }
.auth-player p { margin: 0; padding: 0 9%; font-size: 15px; font-weight: 500; line-height: 1.45; } .auth-player .ar { font-family: var(--f-ar); font-size: 17px; text-align: right; }
.pl-chip-l, .pl-chip-r { position: absolute; top: 12px; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 11.5px; font-weight: 500; display: inline-flex; align-items: center; }
.pl-chip-l { left: 12px; background: rgba(28, 28, 30, .72); } .pl-chip-r { right: 12px; background: #fff; color: #1C1C1E; }
.auth-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.auth-points li { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--ink); } .auth-points b { font-size: 14px; } .auth-points span { color: var(--muted); font-size: 13px; }
.auth-note { color: var(--faint); font-size: 11.5px; }
@media (max-width: 900px) { .auth-body { grid-template-columns: minmax(0, 1fr); padding: 32px 16px 48px; gap: 32px; } .auth-side { display: none; } .auth-top { padding: 0 16px; } }

/* ---------- projects library ---------- */
.lib-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.lib-search { position: relative; flex: 1; min-width: 200px; max-width: 360px; margin-left: auto; }
.lib-search > span { position: absolute; left: 11px; top: 11px; color: var(--faint); } .lib-search .field { padding-left: 34px; }
.plist { border-radius: var(--r-xl); }
.prow { grid-template-columns: 112px minmax(0, 2.2fr) 70px 110px 110px 130px auto; padding: 10px 14px; }
.prow .frame { border-radius: 8px; } .prow .frame .tcode { font-size: 10px; top: 4px; right: 4px; }
.prow.head { padding: 9px 14px; letter-spacing: .04em; font-size: 11px; }
.pname { display: grid; gap: 2px; min-width: 0; } .pname a { font-weight: 600; } .pname .show-md { margin: 4px 0 0; }
.prow-acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
@media (max-width: 900px) { .prow { grid-template-columns: 96px minmax(0, 1fr) auto; } .lib-search { max-width: none; order: 3; flex-basis: 100%; margin-left: 0; } }
@media (max-width: 640px) { .prow { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; padding: 10px; } .prow-acts .hide-sm { display: none; } .lib-bar .seg:first-child { overflow-x: auto; max-width: 100%; } }
.show-md { display: none !important; }
@media (max-width: 900px) { .show-md { display: inline-flex !important; } }
.proj-head h1 { font-size: 26px; } .proj-head p { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.pipe.done .ic { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---------- usage & billing ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.stat-strip > div { display: grid; gap: 4px; align-content: start; padding: 18px 20px; } .stat-strip > div + div { border-left: 1px solid var(--line); }
.stat-strip span { font-size: 12.5px; color: var(--muted); }
.stat-strip b { font: 700 26px/1.1 var(--f-ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .stat-strip b small { font-size: 12.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.stat-strip em { font-style: normal; font-size: 12px; color: var(--faint); }
@media (max-width: 800px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-strip > div:nth-child(3) { border-left: 0; } .stat-strip > div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.billing .tbl td b { font-weight: 600; }
.empty.slim { padding: 22px; } .empty.slim a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.tbl th { letter-spacing: .04em; font-size: 11px; }

/* ---------- settings ---------- */
.settings { max-width: 880px; }
.set-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); }
.set-row:first-of-type { border-top: 0; padding-top: 0; }
.set-l h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; } .set-l p { margin: 0; font-size: 13px; color: var(--muted); }
.set-r { display: grid; gap: 0; } .set-r .f:last-of-type { margin-bottom: 0; }
.set-foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.set-inline { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) { .set-row { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.prow { grid-template-columns: 112px minmax(0, 2.2fr) 70px 110px 110px 120px 180px; }
@media (max-width: 900px) { .prow { grid-template-columns: 96px minmax(0, 1fr) auto; } .prow.head { display: none; } }
@media (max-width: 640px) { .prow { grid-template-columns: 76px minmax(0, 1fr) auto; } }
.lib-bar .seg:first-child { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .lib-bar .seg:first-child::-webkit-scrollbar { display: none; }
.lib-bar .seg button { white-space: nowrap; flex: none; }
@media (max-width: 900px) { .lib-head > .btn { display: none; } }
@media (max-width: 640px) { .billing .tbl td, .billing .tbl th { white-space: nowrap; } .billing .tbl td .ellipsis { max-width: 200px; } }


/* ==========================================================================
   Blue-gray accent layer: every interactive accent reads from the tokens above
   ========================================================================== */
body.saas h1, body.saas h2 { color: var(--heading); }
.btn.pri, .btn.acc { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.pri:hover, .btn.acc:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 1; background: var(--sunk); border-color: var(--line); color: var(--faint); }
.btn.pri:disabled, .btn.acc:disabled { background: #C5CDD5; border-color: #C5CDD5; color: #FFFFFF; }
.bar > i, .pcard .prog i, .demo-prog i { background: var(--accent-ui); } .bar.render > i { background: var(--faint); } .bar.run > i { background: var(--accent-ui); }
.tnav-links a.on, .anav-tabs a.on { color: var(--accent-2); }
.tnav-links a.on::after, .anav-tabs a.on::after { background: var(--accent-ui); }
.dot-bal { background: var(--accent-ui); }
.avatar { background: var(--accent-soft); color: var(--accent-2); }
.drawer nav a.on { background: var(--accent-soft); color: var(--accent-2); }
.stepper li.on .n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); }
.stepper li.done .n { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-2); }
.stepper li.done:not(:last-child)::after { background: var(--accent-ui); }
.pipe.done .ic { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tile:has(input:checked) { border-color: var(--accent-ui); box-shadow: inset 0 0 0 1px var(--accent-ui); background: var(--accent-soft); }
.tile:has(input:checked) .dot { border-color: var(--accent); }
.cbox input:checked + .cb { background: var(--accent); border-color: var(--accent); }
.cbox:has(input[name]:checked) { border-color: var(--accent-ui); background: var(--accent-soft); }
.cbox.locked input:checked + .cb { background: var(--faint); border-color: var(--faint); }
.toggle-row:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); } .toggle-row:has(input:checked) .sw { background: var(--accent); }
.check input, .ed-transport input { accent-color: var(--accent); }
.co-ack:has(input:checked) { border-color: var(--accent-ui); background: var(--accent-soft); }
.plan.rec { border-color: var(--accent-ui); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-2); }
.badge { background: var(--accent-soft); color: var(--accent-2); border: 1px solid var(--accent-line); }
.plan li svg, .co-get svg, .s-facts li::before { color: var(--accent-ui); }
.seg button.on { color: var(--accent-2); }
.create-card.over { border-color: var(--accent-ui); background: var(--accent-soft); }
.drop:hover, .drop.over { border-color: var(--accent-ui); background: var(--accent-soft); }
.drop .ic, .drop.hero .ic, .drop.slim .ic { background: var(--accent-soft); color: var(--accent-2); border: 1px solid var(--accent-line); }
.cc-ic { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent-line); }
.cue.cur { background: var(--accent-soft); } .cue.cur::before { background: var(--accent-ui); } .cue .when button { color: var(--accent); }
.auth-points li { border-left-color: var(--accent-ui); }
.auth-switch a, .auth-fine a, .empty.slim a, .backlink:hover, .sec-h a:hover { color: var(--accent); }
.field:focus { border-color: var(--accent-ui); }
.pipe.now .ic { border-color: var(--accent-ui); border-top-color: transparent; }
.banner.plain { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); } body.saas .banner.plain { color: var(--ink); }
.banner.plain .banner-txt b { color: var(--heading); } .banner.plain .banner-txt > span { color: var(--muted); }
.toast { background: var(--heading); color: #fff; }
.checkout { margin: 0 auto; }
.bal-tile svg { color: var(--accent-ui); flex: none; }

/* Editor: timing row for lines added by hand */
.cue.new .when { grid-row: span 3; }
.cue .nt { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--muted); }
.cue .nt label { display: inline-flex; align-items: center; gap: 5px; }
.cue .nt input { width: 76px; height: 28px; border: 1px solid var(--line-2); border-radius: 6px; padding: 0 7px; background: var(--surface); color: var(--ink); font-size: 12px; }
.cue .nt input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.cue .nt .btn { height: 28px; padding: 0 8px; font-size: 12px; }
.cue .nt-msg { flex-basis: 100%; font-family: var(--f-mono); font-size: 11px; color: var(--faint); }
.cue .nt-msg.bad { color: var(--bad); }
.cue.bad-time .nt input { border-color: var(--bad); }

/* Editor: Spanish lines are editable in place; undo/redo */
.cue textarea.es-ta { grid-column: auto; display: block; width: calc(100% + 12px); margin: -2px -6px 0; padding: 2px 6px; min-height: 0; border-color: transparent; border-radius: 6px;
  background: transparent; color: var(--muted); font: 400 12.5px/1.45 var(--f-ui); direction: ltr; unicode-bidi: plaintext; }
.cue textarea.es-ta:hover { border-color: var(--line); }
.cue textarea.es-ta:focus { border-color: var(--accent); background: var(--surface); color: var(--ink); }
.cue textarea.es-ta.ch { border-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 70%, var(--surface)); color: var(--ink); }
.fbar .ur { gap: 5px; }
@media (max-width: 760px) { .fbar .ur span { display: none; } .fbar .ur { padding: 0 8px; } }

/* Editor (side by side): the page never grows — only the line list scrolls, so the video stays put */
@media (min-width: 1001px) {
  #view.focus .ed { flex: none; height: calc(100vh - 56px); height: calc(100dvh - 56px); min-height: 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  #view.focus .ed-stage, #view.focus .ed-side { min-height: 0; }
}

/* Editor: mini timeline + steppers for lines added by hand */
.cue .nt { display: grid; gap: 6px; }
.cue .tl { position: relative; height: 30px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; cursor: pointer; touch-action: none; user-select: none; }
.cue .tl-ctx i { position: absolute; top: 10px; height: 8px; border-radius: 3px; background: var(--line-2); }
.cue .tl-ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--heading); pointer-events: none; }
.cue .tl-rng { position: absolute; top: 3px; bottom: 3px; min-width: 8px; border-radius: 5px; background: var(--accent-ui); cursor: grab; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.cue .tl-rng:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cue.dragging .tl-rng { cursor: grabbing; background: var(--accent-2); }
.cue.bad-time .tl-rng { background: var(--bad); }
.cue .tl-rng .h { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; }
.cue .tl-rng .h.l { left: -4px; } .cue .tl-rng .h.r { right: -4px; }
.cue .tl-rng .h::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 5px; width: 2px; border-radius: 1px; background: rgba(255, 255, 255, .9); }
.cue .tl-scale { display: flex; justify-content: space-between; margin-top: -3px; font-size: 10.5px; color: var(--faint); }
.cue .nt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.cue .nt-f { display: inline-flex; align-items: center; gap: 4px; }
.cue .nt-l { min-width: 30px; color: var(--muted); }
.cue .nt-f button { height: 28px; min-width: 28px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font: 500 13px/1 var(--f-ui); cursor: pointer; }
.cue .nt-f button[data-step] { font-size: 16px; padding: 0; }
.cue .nt-f button:hover { background: var(--surface-2); border-color: var(--line-3); }
.cue .nt-f button:focus-visible { outline: none; box-shadow: var(--focus); }
.cue .nt input { width: 72px; text-align: center; }
.cue .nt-row .nt-msg { flex-basis: auto; margin-left: auto; }
html.tl-dragging, html.tl-dragging * { user-select: none !important; cursor: grabbing !important; }
html.tl-dragging .cues { overscroll-behavior: none; }
/* the signed-in email is shown as typed, never uppercased */
.pop .lbl.acct-email, .acct-email { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- caption style + "Translated by" editor (look.js) ---------- */
.lk { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.lk-preview { position: sticky; top: 72px; display: grid; gap: 8px; }
.lk-frame { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #3a3f45, #1c1d20); border-radius: var(--r-lg); overflow: hidden; }
.lk-frame video, .lk-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lk-cap { position: absolute; left: 50%; max-width: 90%; text-align: center; line-height: 1.25; white-space: pre-wrap; border-radius: 3px; pointer-events: none; }
.lk-pbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lk-controls { display: grid; gap: 14px; min-width: 0; }
.lk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.lk-grid .f { margin: 0; display: grid; gap: 6px; align-content: start; }
.lk-grid label.f > span { margin: 0; font-weight: 600; color: var(--ink); }
.lk-span { grid-column: 1 / -1; }
.lk-seg { display: flex; flex-wrap: wrap; } .lk-seg label { flex: 1 1 auto; }
.lk-range { display: flex; align-items: center; gap: 10px; }
.lk-range input { flex: 1; accent-color: var(--ink); min-width: 0; }
.lk-range output { font-family: var(--f-mono); font-size: 12px; color: var(--muted); min-width: 44px; text-align: right; }
.lk-sw { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lk-sw button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-3); cursor: pointer; padding: 0; }
.lk-sw button.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.lk-pick { position: relative; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; border: 1px dashed var(--line-3); cursor: pointer; display: inline-block; }
.lk-pick.wide { width: 100%; height: 34px; border-radius: var(--r-md); border-style: solid; }
.lk-pick input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); border: 0; padding: 0; cursor: pointer; background: none; }
.lk-credit-box { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.lk-names { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-name { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; cursor: pointer; background: var(--surface); }
.lk-name input { position: absolute; opacity: 0; pointer-events: none; }
.lk-name.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lk-name:has(input:focus-visible) { box-shadow: var(--focus); }
.lk-del { border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; font-size: 15px; line-height: 1; width: 22px; height: 22px; border-radius: 50%; }
.lk-del:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.lk-add { display: flex; gap: 8px; } .lk-add .field { height: 34px; }
.lk-credit { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; text-align: center; overflow: hidden; }
.lk-credit .t { opacity: .9; margin-bottom: .3em; } .lk-credit .n { font-weight: 700; }
.lk-credit.over .t, .lk-credit.over .n { text-shadow: 0 0 3px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .7); }
.lk-credit.run.card { animation: lk-card .7s ease both, lk-out .9s ease-in calc(var(--dur) - .9s) forwards; }
/* fade (the default): each line rises a little out of a soft blur, one after another, and leaves slowly */
.lk-credit.run.a-fade > * { animation: lk-in 1.25s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .2s + .15s) both, lk-out .9s ease-in calc(var(--dur) - .9s) forwards; }
.lk-credit.run.a-slide_up > * { animation: lk-slide var(--dur) var(--ease) both; }
.lk-credit.run.a-zoom > * { animation: lk-zoom var(--dur) var(--ease) both; }
.lk-credit.run.a-one_by_one > * { animation: lk-fade var(--dur) linear both; }
.lk-credit.run.a-one_by_one .t { animation-delay: 0s; }
.lk-credit.run.a-roll { justify-content: flex-start; }
.lk-credit.run.a-roll > * { animation: lk-roll var(--dur) linear both; }
@keyframes lk-card { from { opacity: 0 } to { opacity: 1 } }
@keyframes lk-in { from { opacity: 0; transform: translateY(.4em); filter: blur(6px) } to { opacity: 1; transform: none; filter: blur(0) } }
@keyframes lk-out { to { opacity: 0; filter: blur(3px) } }
@keyframes lk-fade { 0% { opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { opacity: 0 } }
@keyframes lk-slide { 0% { opacity: 0; transform: translateY(40%) } 15% { opacity: 1; transform: none } 90% { opacity: 1 } 100% { opacity: 0 } }
@keyframes lk-zoom { 0% { opacity: 0; transform: scale(.7) } 15% { opacity: 1; transform: scale(1) } 90% { opacity: 1 } 100% { opacity: 0 } }
@keyframes lk-roll { from { transform: translateY(110cqh) } to { transform: translateY(-110cqh) } }
.lk-frame { container-type: size; }
.np-look { margin-top: 4px; }
@media (max-width: 1000px) { .lk { grid-template-columns: minmax(0, 1fr); } .lk-preview { position: static; } }
@media (max-width: 520px) { .lk-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .lk-credit.run > *, .lk-credit.run { animation-duration: .01s !important; } }

/* ---------- Google Drive import ---------- */
.drive-row { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.drive-row .field { flex: 1; min-width: 0; }
.drive-or { font-size: 12px; color: var(--faint); margin-top: 12px; text-align: center; }
.drive-st { font-size: 12.5px; margin-top: 6px; }
dialog.dlg.dlg-wide { width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- caption style card (New Project) and panel (project page) ---------- */
.look-card { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface-2); }
.lk-mini { border-radius: var(--r-md); }
.look-body { display: grid; gap: 10px; min-width: 0; }
.look-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.look-off { margin: 0; }
.lk-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lk-sum li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; font-size: 13px; align-items: baseline; }
.lk-sum li span { color: var(--muted); font-size: 12px; }
.lk-sum li b { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.lk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line-3); margin-right: 6px; vertical-align: -1px; }
.look-panel { display: grid; gap: 12px; }
.look-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.look-h h3 { margin: 0; font-size: 15px; }
.look-panel .lk-sum li { grid-template-columns: 56px minmax(0, 1fr); }
@media (max-width: 760px) { .look-card { grid-template-columns: minmax(0, 1fr); } }
.np-mainc { display: grid; gap: 16px; align-content: start; min-width: 0; }
.look-panel .look-card { background: none; border: 0; padding: 0; }
.look-panel .look-h { justify-content: flex-start; gap: 10px; flex-wrap: wrap; }
.pcard .row3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.pcard .row3-acts .btn { height: 28px; }
.pcard .row3-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* caption style: saved vs. what the burned MP4 shows */
.lk-state { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.lk-state.ok { background: var(--ok-soft); color: var(--ok); }
.lk-state.warn { background: var(--warn-soft); color: var(--warn); }
.lk-state.sm { height: 22px; font-size: 11.5px; padding: 0 7px; }
.look-panel.stale { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.lk-notice { margin: 0 0 14px; }
.pcard .row3 .lk-state { margin-inline-start: 6px; }
#style-btn { position: relative; }
.lk-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); border: 2px solid var(--bg); }

/* ==========================================================================
   One logo in every bar (website, studio, sign-in, admin): same size, type and place.
   The bars share the website's container — 1320px wide, 40px sides (16px on phones), 68px tall.
   ========================================================================== */
/* symbol 32px (the original 26px drawing scaled 32/26), name 22px semibold charcoal, 12px gap, name raised 1px to sit centred */
body.saas .brand { padding: 0; gap: 12px; font: 600 22px/1 var(--f-display); letter-spacing: -.03em; color: #232323; }
body.saas .brand > span:last-child { position: relative; top: -1px; }
.brand-mark { width: 32px; height: 32px; border-radius: 8.6px; }
.brand-mark i { width: 14.77px; height: 3.08px; box-shadow: 0 -6.15px 0 -0.62px #F6F5F1; top: 4.92px; }
.tnav-in, .anav-top { max-width: 1320px; height: 68px; padding: 0 40px; }
.auth-top { height: 68px; padding: 0 max(40px, calc((100% - 1240px) / 2)); }
.page, .page.wide { max-width: 1320px; padding-left: 40px; padding-right: 40px; }   /* content lines up with the logo */
@media (max-width: 899px) { .tnav-in { padding: 0 40px; height: 68px; } }
@media (max-width: 900px) { .auth-top { padding: 0 40px; } }
@media (max-width: 640px) { .tnav-in, .anav-top, .auth-top { padding: 0 16px; } .page, .page.wide { padding-left: 16px; padding-right: 16px; } }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] body.saas .brand { color: var(--heading); } }
:root[data-theme="dark"] body.saas .brand { color: var(--heading); }   /* charcoal would vanish on the dark theme */

/* ==========================================================================
   Subtitle Studio: tabs (Edit text · Design captions · Timing), live captions, Export
   ========================================================================== */
.fbar .ed-status { font-size: 12.5px; color: var(--muted); white-space: nowrap; margin-right: 4px; display: inline-flex; align-items: center; gap: 6px; }
.fbar .ed-status .ok-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.ed-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); background: var(--surface); flex: none; }
.ed-tabs [role=tab] { position: relative; height: 40px; padding: 0 14px; border: 0; background: none; color: var(--muted); font: 500 13.5px/1 var(--f-ui); cursor: pointer; border-radius: 8px 8px 0 0; display: inline-flex; align-items: center; gap: 7px; }
.ed-tabs [role=tab]:hover { color: var(--ink); background: var(--surface-2); }
.ed-tabs [role=tab][aria-selected=true] { color: var(--heading); font-weight: 600; }
.ed-tabs [role=tab][aria-selected=true]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.ed-tabs [role=tab]:focus-visible { outline: none; box-shadow: var(--focus); }
.ed-tabs .lk-dot { position: static; width: 8px; height: 8px; border: 0; }
.ed-pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ed-pane[hidden] { display: none; }
.ed-note { padding: 12px 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--surface-2); flex: none; }
.ed-note .warn-t { color: var(--warn); font-weight: 600; }
.ed-design { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
.lk.lk-solo { grid-template-columns: minmax(0, 1fr); }
.lk.lk-solo .lk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* live captions on the studio video: a box over the picture itself, captions styled like the render */
.ed-ov.styled { right: auto; bottom: auto; display: block; overflow: hidden; }
.ed-ov.styled .ov-t { position: absolute; inset: 0; }
.ed-ov.styled .lk-cap { line-height: 1.25; border-radius: 3px; max-width: 90%; white-space: pre-wrap; }

/* Timing */
.tims { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.tm { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); align-items: center; }
.tm.ch { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.tm.bad-time { background: var(--bad-soft); }
.tm-go { grid-row: span 3; align-self: start; height: 28px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer; }
.tm-go:hover { color: var(--ink); border-color: var(--line-3); }
.tm-txt { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: start; }
.tm .tm-f { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; font-size: 12.5px; }
.tm .nt-l { min-width: 34px; color: var(--muted); }
.tm .tm-f button { height: 28px; min-width: 28px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font: 500 16px/1 var(--f-ui); cursor: pointer; }
.tm .tm-f button:hover { background: var(--surface-2); border-color: var(--line-3); }
.tm .tm-f input { width: 74px; height: 28px; text-align: center; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12.5px; }
.tm .tm-f input:focus { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.tm > .tm-f { grid-column: 2; }
.tm-msg { grid-column: 2; font-family: var(--f-mono); font-size: 11px; color: var(--faint); }
.tm-msg.bad { color: var(--bad); }
@media (min-width: 1200px) { .tm { grid-template-columns: 34px minmax(0, 1fr) auto auto; } .tm-go { grid-row: span 2; } .tm-txt { grid-column: 2 / -1; } .tm > .tm-f { grid-column: auto; } .tm-msg { grid-column: 2 / -1; } }

/* Export dialog */
dialog.dlg.dlg-ex { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); }
.ex-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .ex-h h3 { margin: 0; }
.ex-note { margin: 8px 0 4px; }
.ex-sec { padding: 14px 0 6px; border-top: 1px solid var(--line); margin-top: 10px; }
.ex-sec:first-of-type { border-top: 0; }
.ex-t { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--heading); margin-bottom: 6px; }
.ex-free, .ex-cost { font-weight: 500; font-size: 11.5px; padding: 2px 7px; border-radius: 5px; }
.ex-free { background: var(--ok-soft); color: var(--ok); } .ex-cost { background: var(--surface-2); color: var(--muted); }
.ex-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0 -10px; border-radius: 8px; font-size: 13.5px; color: var(--ink); }
.ex-row:hover { background: var(--surface-2); } .ex-row svg { color: var(--muted); flex: none; }
.ex-l { flex: 1; min-width: 0; } .ex-n { flex: none; }
.ex-empty { margin: 4px 0; }
.ex-make { display: grid; gap: 8px; }
.ex-mk { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.ex-mk > div { flex: 1; min-width: 0; } .ex-mk b { display: block; font-size: 13.5px; font-weight: 600; } .ex-mk small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ex-q { display: inline-flex; gap: 6px; align-items: center; } .ex-q select { height: 32px; width: auto; min-width: 92px; padding: 0 28px 0 10px; }
.ex-bal { margin: 10px 0 0; } .ex-short { color: var(--bad); } .ex-short a { text-decoration: underline; }
@media (max-width: 560px) { .ex-mk { flex-direction: column; align-items: stretch; } .ex-q { justify-content: space-between; } }
@media (max-width: 899px) { .fbar .ed-status { display: none; } .ed-tabs [role=tab] { padding: 0 10px; font-size: 13px; } .lk.lk-solo .lk-grid { grid-template-columns: minmax(0, 1fr); } }

/* Project details: one clear next step, quick downloads, steps folded away once done */
.pd-ready { display: grid; gap: 18px; }
.pd-ready-t h2 { margin: 0; font: 600 22px/1.2 var(--f-display); }
.pd-ready-t p { margin: 6px 0 0; font-size: 14px; }
.pd-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-quick, .pd-style { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
.pd-quick > .small, .pd-style > .small { min-width: 110px; }
.pd-style-v { font-size: 13.5px; color: var(--ink); }
.pd-link { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--accent-ui); text-decoration: underline; text-underline-offset: 3px; }
details.pd-steps > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; color: var(--heading); }
details.pd-steps > summary::-webkit-details-marker { display: none; }
details.pd-steps > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform var(--fast); }
details.pd-steps[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.pd-steps > summary > .small { margin-left: auto; font-weight: 400; }
details.pd-steps[open] > summary { margin-bottom: 16px; }
@media (max-width: 640px) { .pd-acts .btn { flex: 1 1 100%; justify-content: center; } .pd-link { margin-left: 0; } .pd-quick > .small, .pd-style > .small { min-width: 0; flex-basis: 100%; } }

/* studio full screen: the screen box (video + live captions) fills the display */
.ed-screen:fullscreen, .ed-screen:-webkit-full-screen { width: 100vw; height: 100vh; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #000; }
.ed-screen:fullscreen video, .ed-screen:-webkit-full-screen video { object-fit: contain; }
.ed-transport .ed-fs { color: inherit; height: 28px; padding: 0 8px; }
/* a caption placed at left:50% would otherwise only get half the width before wrapping; the render wraps at 90% */
.lk-cap { width: max-content; }

/* New Project: part of the video — a timeline like the editor's new-line one */
.pp { display: grid; gap: 10px; margin-top: 12px; }
.pp-tl { position: relative; height: 40px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; cursor: pointer; touch-action: none; user-select: none; }
.pp-rng { position: absolute; top: 4px; bottom: 4px; min-width: 10px; border-radius: 6px; background: var(--accent-ui); cursor: grab; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.pp-tl.drag .pp-rng { cursor: grabbing; }
.pp-tl.whole .pp-rng { opacity: .35; }
.pp-h { position: absolute; top: 0; bottom: 0; width: 12px; cursor: ew-resize; }
.pp-h::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 5px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .85); }
.pp-h[data-h="a"] { left: 0; } .pp-h[data-h="b"] { right: 0; }
.pp-ph { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--heading); pointer-events: none; z-index: 1; left: 0; }
.pp-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); margin-top: -4px; }
.pp-scale #pp-len { color: var(--ink-2); font-weight: 500; }
.pp-row { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: flex-end; }
.pp-edge { display: grid; gap: 6px; }
.pp-step { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pp-step .field { flex: none; width: 104px; height: 34px; text-align: center; }
.pp-here { margin-left: 4px; }
#pp-all { margin-left: auto; }
@media (max-width: 560px) { #pp-all { margin-left: 0; } }

/* Project page: the finished video plays muted in the side panel */
.pd-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.pd-player video::cue { font-family: var(--f-ar); font-size: 15px; background: rgba(0, 0, 0, .55); }
.pd-ctl { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; gap: 6px; opacity: 0; transition: opacity var(--fast); }
.pd-player:hover .pd-ctl, .pd-player:focus-within .pd-ctl, .pd-player.paused .pd-ctl { opacity: 1; }
@media (hover: none) { .pd-ctl { opacity: 1; } }
.pd-ctl button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(18, 20, 24, .55); color: #fff;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); }
.pd-ctl button:hover { background: rgba(18, 20, 24, .75); }
.pd-ctl button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pd-player .tcode { z-index: 2; }

/* learning from edits: the editor's "change it everywhere" bar and the saved terms list */
.lr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 8px 10px 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.lr-bar[hidden] { display: none; }
.lr-bar .lr-t { flex: 1 1 auto; min-width: 0; }
.lr-bar .lr-ok { font-size: 12.5px; color: var(--muted); }
.terms { list-style: none; margin: 0; padding: 0; }
.terms li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.terms li:last-child { border-bottom: 0; }
.terms .tm-lang { font-size: 11.5px; color: var(--muted); width: 52px; }
.terms .tm-pair { flex: 1 1 160px; min-width: 0; }
.terms .tm-pair s { color: var(--muted); text-decoration: none; }
.tgl { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.tgl input { width: 16px; height: 16px; accent-color: var(--ink); }

/* New Project: the customer's own subtitle file */
.subs-box { display: grid; gap: 10px; padding: 4px 0 6px; }
.subs-box p { margin: 0; }
.subs-box > .btn { justify-self: start; }
.subs-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.subs-row .fmeta { flex: 1 1 200px; min-width: 0; }
.subs-row .subs-lang { flex: 0 1 280px; min-width: 0; margin: 0; }
.np-open { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface-2); }
.np-open.subs-box { padding-block: 12px; }
.np-note { margin: 0; }
.subs-cta { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 10px 12px; min-width: 0;
  border: 1px dashed var(--line-3); border-radius: var(--r-lg); background: transparent; color: var(--ink-2); font: inherit; font-size: 13.5px; cursor: pointer; text-align: start; }
.subs-cta:hover { border-color: var(--ink-2); color: var(--ink); }
.subs-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.subs-cta b { color: var(--ink); font-weight: 600; min-width: 0; }
.subs-cta svg { flex: none; width: 16px; height: 16px; }
/* Part to subtitle: under the file, beside the one preview video — a filmstrip timeline and compact controls */
.pp-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
.pp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.pp-head b { font-size: 13.5px; color: var(--ink); }
.pp-sum { font-size: 12.5px; color: var(--muted); }
#pp-box .pp { margin-top: 0; gap: 12px; }
#pp-box .pp-tl { height: 54px; border-radius: 10px; background: #111; border-color: transparent; overflow: hidden; }
.pp-strip { position: absolute; inset: 0; display: flex; pointer-events: none; }
.pp-strip img { flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.8); }
#pp-box .pp-tl.whole .pp-rng { opacity: .9; box-shadow: inset 0 0 0 2px #F6F5F1; }
#pp-box .pp-tl.whole .pp-strip img { opacity: .8; }
#pp-box .pp-rng { top: 0; bottom: 0; border-radius: 9px; background: transparent; box-shadow: inset 0 0 0 2px #F6F5F1, 0 0 0 9999px rgba(0, 0, 0, .5); }
#pp-box .pp-h { width: 14px; }
#pp-box .pp-h[data-h="a"] { background: linear-gradient(90deg, #F6F5F1 0 4px, transparent 4px); }
#pp-box .pp-h[data-h="b"] { background: linear-gradient(270deg, #F6F5F1 0 4px, transparent 4px); }
#pp-box .pp-h::after { background: #232323; top: 30%; bottom: 30%; left: 1px; width: 2px; }
#pp-box .pp-h[data-h="b"]::after { left: auto; right: 1px; }
#pp-box .pp-ph { background: #F6F5F1; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
#pp-box .pp-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
#pp-box .pp-edge .field { width: 84px; padding-inline: 6px; text-align: center; }
.pp-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.pp-play svg { width: 13px; height: 13px; }
.pp-here svg { display: block; }
.fthumb-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.fthumb-ic svg { width: 20px; height: 20px; }
.np-upload > .file-row.over { border-color: var(--ink-2); background: var(--surface-2); }
.np-upload > .subs-cta { margin-top: 0; }
.subs-cta > span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .np-top.has-file .np-preview { order: -1; } }   /* phones: the video first, then the file and its part */

/* sign in with Google, forgot / reset password */
.g-btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 4px; }
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
label.f > span.f-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.f-link { font-size: 12.5px; color: var(--muted); }
.f-link:hover { color: var(--ink); }
.auth-body.one { grid-template-columns: minmax(0, 1fr); max-width: 520px; }