/* 313 app styles. Layout: sidebar shell on desktop; sticky app bar + bottom tab bar under 720px. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mut { color: var(--muted); }
.sm { font-size: 12.5px; }
.xs { font-size: 11.5px; }
.label { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; min-width: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100dvh; transition: grid-template-columns .16s ease; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) { grid-template-columns: 68px minmax(0, 1fr); }
.side {
  position: sticky; top: 0; height: 100dvh;
  background: var(--side); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 18px; padding: 14px 10px 12px;
}
.ws { display: flex; gap: 10px; align-items: center; padding: 4px 8px; text-decoration: none; }
.ws b { display: block; font-weight: 600; font-size: 13.5px; }
.ws small { display: block; color: var(--muted); font-size: 11.5px; }
.clogo {
  width: 30px; height: 30px; border-radius: 8px; flex: none; overflow: hidden;
  background: var(--panel-2); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2);
  display: grid; place-items: center; font-weight: 700; font-size: 12px; letter-spacing: .02em;
}
.clogo img { width: 100%; height: 100%; object-fit: cover; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a {
  display: flex; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 7px;
  color: var(--fg-2); text-decoration: none; font-size: 13.5px;
}
.nav a:hover { background: var(--hover); }
.nav a[aria-current="page"] { background: var(--nav-on); color: var(--fg); }
.nav svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.nav a[aria-current="page"] svg { color: var(--fg); }
.nav .count, .tabbar .count { font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 600; margin-left: auto;
  background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.tabbar .count { position: absolute; top: 0; margin-left: 18px; font-size: 9.5px; padding: 0 5px; line-height: 15px; }
.tabbar a { position: relative; }

/* studio queues */
.wait { font-family: var(--font-mono); font-size: 12px; }
.wait.old { color: var(--fail); font-weight: 600; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.pqitem { background: var(--panel); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.pqhead { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.pqhead b { display: block; font-size: 14.5px; }
.pqv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.pqv .ttl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pqv .ttl b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.pqv form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pqv .inp { width: 190px; padding: 6px 9px; font-size: 13px; }
.pqv .inp.num { width: 110px; }
.pqfoot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(127,127,127,.5); }
.morelist { display: flex; flex-direction: column; }
.morelist a, .morelist button { display: flex; gap: 12px; align-items: center; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); background: none;
  color: var(--fg); text-decoration: none; font-size: 15px; text-align: left; width: 100%; cursor: pointer; }
.morelist svg { width: 18px; height: 18px; color: var(--muted); }
.sidefoot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 9px; }
.me { display: flex; gap: 9px; align-items: center; font-size: 13px; }
.av {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--line-2); color: var(--fg); display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.logo313 { color: var(--fg); --tally: var(--accent); display: inline-block; flex: none; }
.mark { color: var(--muted); display: flex; align-items: center; }
.mark .logo313 { color: var(--muted); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--fg-2); cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--faint); text-underline-offset: 3px; font-size: inherit; }
.linkbtn:hover { color: var(--fg); }

.main { min-width: 0; display: flex; flex-direction: column; }
/* pages are centred; each kind of page picks a width that suits its content */
.screen { padding: 26px 32px 40px; display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 1180px; margin-inline: auto; }
.screen.full { max-width: 1680px; }
.screen.narrow { max-width: 760px; }
.appbar, .tabbar { display: none; }

h1 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin: 0; line-height: 1.25; }
.head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--fg);
  border-radius: var(--radius); padding: 7px 12px; font-size: 13px; font-weight: 500;
  white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--hover); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.pri:hover { filter: brightness(1.06); }
.btn.ghost { background: none; border-color: transparent; color: var(--fg-2); }
.btn.lg { padding: 10px 16px; font-size: 14px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; filter: none; }
.kbd { font-family: var(--font-mono); font-size: 10.5px; padding: 0 5px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent); opacity: .75; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12.5px; font-weight: 500; }
.inp {
  font-size: 14px; color: var(--fg); background: var(--field); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 9px 11px; width: 100%;
}
.inp:focus { outline: none; border-color: var(--accent); }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fg-2); }
.check input { accent-color: var(--accent); width: 15px; height: 15px; }

/* file inputs: the browser's button styled like .btn */
input[type="file"] { font-size: 13px; color: var(--fg-2); max-width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 7px 12px; margin-right: 10px;
  cursor: pointer; transition: background .12s, border-color .12s;
}
input[type="file"]::file-selector-button:hover { background: var(--hover); border-color: var(--accent-line); }
input[type="file"]:focus-visible { outline: none; }
input[type="file"]:focus-visible::file-selector-button { border-color: var(--accent); }
.errors { background: var(--fail-soft); color: var(--fail); border-radius: var(--radius); padding: 9px 12px; font-size: 13px; }
.errors p { margin: 0; }
.field .err { color: var(--fail); font-size: 12px; }
.notice { background: var(--accent-soft); border-radius: var(--radius); padding: 10px 12px; font-size: 13px; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border-radius: 999px;
  padding: 2px 9px 2px 8px; background: var(--panel-2); color: var(--fg-2); white-space: nowrap; font-weight: 500; }
.chip.ready, .chip.run, .chip.studio, .chip.fail, .chip.ok { --dot: var(--muted); }
.chip.ready, .chip.ok { --dot: var(--accent); }
.chip.run { --dot: var(--run); }
.chip.studio { --dot: var(--studio); }
.chip.fail { --dot: var(--fail); color: var(--fail); }
:is(.chip.ready, .chip.studio, .chip.fail, .chip.ok)::before, .chip.run:not(:has(.pulse))::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); flex: none; }
.chip .pulse { background: var(--dot, var(--run)) !important; }

.card { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.usage { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.meter { width: 74px; height: 6px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--fg-2); border-radius: 4px; }
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 8px 0; color: var(--muted); font-size: 13.5px; white-space: nowrap; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.tabs a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); }
.tabs em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-left: 5px; }

.empty { background: var(--panel); border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.empty h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.empty p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 52ch; }

/* ---------- solo pages (sign-in, reset) ---------- */
.solo { min-height: 100dvh; display: flex; flex-direction: column; }
.auth { margin: auto; width: 360px; max-width: 100%; padding: 40px 20px; display: flex; flex-direction: column; gap: 16px; }
.auth h1 { font-size: 22px; }
.auth p { margin: 0; }
.authfoot { padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 8px;
  justify-content: center; color: var(--muted); font-size: 12px; }


/* ---------- forms (Django widgets inside .field) ---------- */
.field :is(input[type="text"], input[type="email"], input[type="number"], input[type="url"], input[type="password"], select, textarea) {
  font-size: 14px; color: var(--fg); background: var(--field); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 9px 11px; width: 100%;
}
.field :is(input, select, textarea):focus { outline: none; border-color: var(--accent); }
.field.bad :is(input, select) { border-color: var(--fail); }
.field input[type="file"] { font-size: 12.5px; color: var(--fg-2); max-width: 100%; }
.field .clear-row, .field a { font-size: 12.5px; color: var(--fg-2); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: contents; }
fieldset[disabled] :is(input, select, button, textarea) { opacity: .55; cursor: not-allowed; }
.mono-inp input { font-family: var(--font-mono); }
.radios { display: flex; flex-direction: column; gap: 8px; }
.radios ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.radios label { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--fg-2); cursor: pointer; font-weight: 400; }
.radios input { accent-color: var(--accent); }

/* ---------- messages ---------- */
.msgs { display: flex; flex-direction: column; gap: 8px; }
.msg { border-radius: var(--radius); padding: 10px 12px; font-size: 13px; background: var(--accent-soft); color: var(--fg); }
.msg.error { background: var(--fail-soft); color: var(--fail); }
.readonly-note { background: var(--studio-soft); color: var(--fg-2); border-radius: var(--radius); padding: 9px 12px; font-size: 12.5px; }

/* ---------- tables, tiles ---------- */
.tw { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500;
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .btn { padding: 5px 9px; }
.tbl .num, .tbl th.num { white-space: nowrap; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tbl a.rowlink { text-decoration: none; display: flex; gap: 10px; align-items: center; font-weight: 500; }
.tbl a.rowlink:hover b { text-decoration: underline; text-underline-offset: 3px; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tile { background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius-lg); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile b, .bigmoney { font-size: 20px; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.bigmeter { height: 8px; border-radius: 5px; background: var(--panel-2); overflow: hidden; }
.bigmeter i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.bigmeter i.full { background: var(--run); }

/* ---------- studio ---------- */
.crumbs { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.cfg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cfg .wide { grid-column: 1 / -1; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.srow { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.srow:last-child { border-bottom: 0; }
.srow.sub { padding-left: 18px; }
.soon { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 7px; margin-left: 6px; }
input.switch { appearance: none; -webkit-appearance: none; width: 32px; height: 18px; border-radius: 10px; background: var(--faint);
  position: relative; border: 0; margin: 0; flex: none; cursor: pointer; transition: background .15s; }
input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
input.switch:checked { background: var(--accent); }
input.switch:checked::after { left: 16px; background: var(--accent-ink); }
input.switch:disabled { opacity: .45; cursor: not-allowed; }
.preset { width: 26px; height: 26px; border-radius: 7px; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px #ffffff22; }
.preset[aria-pressed="true"] { outline: 2px solid var(--fg); outline-offset: 2px; }
.swatchrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.colorpick { width: 38px; height: 38px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius); background: none; cursor: pointer; flex: none; }
.ratio { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); }
.ratio.fix { color: var(--run); }
.lim td:first-child { font-weight: 500; }
.lim input { max-width: 120px; font-family: var(--font-mono); }
.src { font-size: 11px; color: var(--muted); }
.src.client, .src.member { color: var(--studio); }
.logoprev { width: 52px; height: 52px; border-radius: 12px; }
.logoprev.clogo { font-size: 18px; }
.inline-form { display: inline; }
.show-sm { display: none; }
.studiomark { color: var(--fg); display: flex; }
.plancards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13px; }
.kv span:nth-child(even) { font-family: var(--font-mono); text-align: right; color: var(--fg-2); }


/* ---------- clips ---------- */
[x-cloak] { display: none !important; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.cliplist { display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius-lg); overflow: hidden; }
.cliprow { display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none; border-bottom: 1px solid var(--line); min-width: 0; }
.cliprow:last-child { border-bottom: 0; }
.cliprow:hover { background: var(--hover); }
.cliprow b { display: block; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cliprow .mut { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.newclip { max-width: 640px; gap: 14px; }
.seg { display: inline-flex; background: var(--panel-2); border-radius: 9px; padding: 3px; gap: 2px; align-self: flex-start; }
.seg button { border: 0; background: none; color: var(--muted); padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--panel); color: var(--fg); box-shadow: 0 1px 2px #0003; }
.field input[type="url"] { font-size: 14px; color: var(--fg); background: var(--field); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 9px 11px; width: 100%; }
.found { display: flex; gap: 10px; align-items: center; background: var(--accent-soft); border-radius: var(--radius); padding: 9px 12px; margin-top: 4px; }
.found svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.found b { display: block; font-weight: 500; font-size: 13.5px; }
.found .mut { display: block; }
.err { color: var(--fail); font-size: 12.5px; margin: 4px 0 0; }
.drop { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; text-align: center; padding: 26px 16px;
  border: 1.5px dashed var(--line-2); border-radius: var(--radius-lg); cursor: pointer; background: var(--panel-2); position: relative; }
.drop:hover, .drop.has { border-color: var(--accent); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop b { font-weight: 500; font-size: 14px; word-break: break-all; }
.cthumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; background: var(--panel-2); }
.timeline { gap: 12px; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; position: relative; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 9px; top: 30px; bottom: -6px; width: 1.5px; background: var(--line-2); }
.step .dot { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 1.5px solid var(--line-2); display: grid; place-items: center; background: var(--panel); margin-top: 1px; }
.step .dot svg { width: 12px; height: 12px; }
.step b { display: block; font-weight: 500; font-size: 13.5px; }
.step .mut { display: block; }
.step.done .dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.step.running .dot { border-color: var(--run); box-shadow: 0 0 0 3px var(--run-soft); }
.step.running .dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--run); animation: pulse 1.2s infinite; }
.step.failed .dot { background: var(--fail); border-color: var(--fail); color: var(--panel); }
.step.pending b, .step.skipped b, .step.later b { color: var(--muted); font-weight: 400; }
.step.later .dot { border-style: dashed; }
.transcript { gap: 14px; }
.turn { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.turn .who { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.turn p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-2); }


/* ---------- review ---------- */
.screen.wide { max-width: 1680px; }
.vid { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 9 / 16; width: min(100%, calc((100dvh - 120px) * 9 / 16)); margin-inline: auto; display: grid; place-items: center; container-type: inline-size; }
.vid video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }

/* our own player controls: the same in every browser */
.player-ui { outline: none; }
.player-ui:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.player-ui .frame { position: absolute; inset: 0; container-type: inline-size; }
.player-ui:fullscreen { aspect-ratio: auto; max-height: none; width: 100vw !important; height: 100vh; border-radius: 0; margin: 0; }
.player-ui:fullscreen .frame { position: relative; inset: auto; height: 100%; width: auto; aspect-ratio: 9 / 16; max-width: 100%; margin: 0 auto; }
.bigplay { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; backdrop-filter: blur(6px); transition: transform .12s, background .12s; }
.bigplay:hover { background: rgba(0,0,0,.72); transform: scale(1.05); }
.bigplay svg { width: 30px; height: 30px; margin-left: 3px; }
.vspin { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: vspin .8s linear infinite; pointer-events: none; }
@keyframes vspin { to { transform: rotate(360deg); } }
.vctl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 22px 10px 9px;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); color: #fff; opacity: 0; transition: opacity .2s; }
.vctl.show, .player-ui:focus-within .vctl, .player-ui:hover .vctl { opacity: 1; }
.player-ui.playing:not(:hover):not(:focus-within) .vctl:not(.show) { pointer-events: none; }
.vbtn { border: 0; background: none; color: #fff; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.vbtn:hover, .vbtn:focus-visible { background: rgba(255,255,255,.16); outline: none; }
.vbtn svg { width: 20px; height: 20px; }
.vtime { font-size: 11.5px; opacity: .9; flex: none; min-width: 74px; }
.vbar { position: relative; flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; touch-action: none; outline: none; min-width: 40px; }
.vtrack { position: relative; width: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); overflow: hidden; }
.vbuf { position: absolute; inset: 0 auto 0 0; background: rgba(255,255,255,.35); }
.vplayed { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.vknob { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transform: scale(0); transition: transform .12s; }
.vbar:hover .vknob, .vbar:focus-visible .vknob, .vbar:active .vknob { transform: scale(1); }
.vbar:focus-visible .vtrack { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.vid.empty { background: var(--panel); }
/* the title on the video: driven by the saved look (apps/titles/looks.py) */
/* In a player the title sits on a 1080 x 1920 stage scaled to the player (--tlscale, static/js/player.js), so it
   is laid out exactly like the export (templates/titles/render_frame.html) and wraps at the same words. */
.tlstage { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; transform: scale(var(--tlscale, 0));
  container-type: inline-size; pointer-events: none; z-index: 2; }
.tlstage .overlay.editing { outline-width: calc(1.5px / var(--tlscale, 1)); outline-offset: calc(6px / var(--tlscale, 1)); }
.tlstage .tlhandles { inset: calc(-6px / var(--tlscale, 1)); }
.tlstage .tlh { zoom: calc(1 / var(--tlscale, 1)); }
/* the text box: --tl-w wide (the words wrap inside it), its centre at --tl-x, its top at --tl-y (% of the video) */
.overlay { --tl-y: 14; --tl-x: 50; --tl-w: 86; --tl-box: #000; --tl-text: #fff; --tl-hl: #FFD60A; --tl-scale: 1;
  position: absolute; left: calc((var(--tl-x) - var(--tl-w) / 2) * 1%); width: calc(var(--tl-w) * 1%); top: calc(var(--tl-y) * 1%);
  text-align: center; pointer-events: none; touch-action: none; }
.overlay.left { text-align: left; }
/* One layer (static tiles: plan and share pages) or two (the player and the export): the box layer underneath
   (.tl-bg: the box and highlight blocks, which can get torn-paper edges) and the sharp words on top (.tl-fg).
   Both layers lay the words out the same way, so they line up exactly. */
.overlay > span, .overlay > .tl-bg > span, .overlay > .tl-fg > span { display: inline; font-family: var(--tl-font, var(--font-ui)), var(--font-ui);
  font-weight: var(--tl-weight, 800); text-transform: var(--tl-case, none);
  font-size: calc(var(--tl-px, 69) * 0.09259cqw * var(--tl-fscale, 1)); line-height: 1.32; color: var(--tl-text);
  background: var(--tl-box); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: .14em .38em;
  border-radius: calc(var(--tl-radius, 47) * .006em); }
.overlay > .tl-fg { position: absolute; inset: 0; }
.overlay > .tl-bg > span, .overlay > .tl-bg .w { color: transparent !important; text-shadow: none !important; }
.overlay > .tl-fg > span { background: none; }
.overlay.paper > .tl-bg { filter: url(#tl-paper); }
.overlay.caps > span, .overlay.caps > .tl-bg > span, .overlay.caps > .tl-fg > span { text-transform: uppercase; }
.overlay.nobox > span, .overlay.nobox > .tl-bg > span, .overlay.nobox > .tl-fg > span { background: none; padding: 0; }
.overlay.nobox > span, .overlay.nobox > .tl-fg > span { text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.55); }
.overlay.nobox.darktext > span, .overlay.nobox.darktext > .tl-fg > span { text-shadow: 0 1px 2px rgba(255,255,255,.9), 0 0 6px rgba(255,255,255,.6); }
/* highlighted words: a colour, or a block of colour behind the word (a marker) */
.overlay .w.hl { color: var(--tl-hl, #FFD60A); }
.overlay.nohl .w.hl { color: inherit; }
.overlay.hlbox .w.hl { padding: .02em .16em; margin: 0 -.06em; border-radius: calc(var(--tl-radius, 47) * .006em);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; color: var(--tl-hl-text, #111); background: var(--tl-hl, #FFD60A); text-shadow: none; }
.overlay.hlbox > .tl-fg .w.hl { background: none; }
.overlay .wd .gone { visibility: hidden; }
.overlay.editing { z-index: 4; pointer-events: auto; cursor: grab; outline: 1.5px dashed rgba(255,255,255,.55); outline-offset: 6px; border-radius: 4px; }
.overlay.dragging { cursor: grabbing; }
/* the text box's handles while styling: the sides change its width, the corner its size */
.tlhandles { position: absolute; inset: -6px; pointer-events: none; }
.tlh { position: absolute; pointer-events: auto; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4); touch-action: none; }
.tlh.l, .tlh.r { top: 50%; width: 8px; height: 26px; margin-top: -13px; border-radius: 4px; cursor: ew-resize; }
.tlh.l { left: -4px; } .tlh.r { right: -4px; }
.tlh.s { right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; cursor: nwse-resize; }
@media (pointer: coarse) { .tlh.l, .tlh.r { width: 12px; height: 34px; margin-top: -17px; } .tlh.s { width: 18px; height: 18px; right: -9px; bottom: -9px; } }
/* what the box snapped to while it moves: the middle of the video, Instagram's safe area, the usual margins */
.guides { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.guide { position: absolute; background: #ff3da6; box-shadow: 0 0 0 .5px rgba(0,0,0,.25); }
.guide.v { top: 0; bottom: 0; width: 1px; } .guide.h { left: 0; right: 0; height: 1px; }

/* title look editor (studio) */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--panel-2); border-radius: var(--radius); padding: 3px; }
.segbtn { border: 0; background: none; color: var(--fg-2); font-size: 12.5px; padding: 5px 10px; border-radius: calc(var(--radius) - 2px); cursor: pointer; }
.segbtn:hover { color: var(--fg); }
.segbtn[aria-pressed="true"] { background: var(--panel); color: var(--fg); box-shadow: 0 0 0 1px var(--line-2); }
.seg.sm .segbtn { padding: 4px 8px; font-size: 12px; }
.ok { color: var(--accent); }

/* a title shown in its look, small (plan card, approval sheet) */
.lookprev { display: inline; font-weight: 700; font-size: 14px; line-height: 1.5; color: var(--tl-text); background: var(--tl-box);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 2px 7px; border-radius: 5px; }
.lookprev[data-box="none"] { background: #2a2f36; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* rounds */
.rtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.rtab { padding: 7px 12px; font-size: 13px; color: var(--fg-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rtab:hover { color: var(--fg); }
.rtab.on { color: var(--fg); border-bottom-color: var(--accent); font-weight: 500; }
.roundrun { display: flex; flex-direction: column; gap: 8px; }
.roundfail { border-left: 3px solid var(--fail); }
.newround summary { font-weight: 600; }
.chipchecks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chipcheck { position: relative; cursor: pointer; }
.chipcheck input { position: absolute; opacity: 0; pointer-events: none; }
.chipcheck span { display: inline-block; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg-2); }
.chipcheck:hover span { color: var(--fg); background: var(--hover); }
.chipcheck input:checked + span { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.chipcheck input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.keeplist { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.keeplist .check { align-items: flex-start; }
.keeplist .check input { margin-top: 2px; flex: none; }

/* add your own title */
.addown { padding: 0; }
.addbtn { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; color: var(--fg);
  background: none; border: 1.5px dashed var(--line-2); border-radius: var(--radius-lg); padding: 12px 14px; transition: border-color .12s, background .12s; }
.addbtn:hover { border-color: var(--accent); background: var(--accent-soft); }
.addbtn b { display: block; font-size: 14px; font-weight: 600; }
.addbtn .mut { display: block; margin-top: 1px; }
.addbtn .plus { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent); font-size: 18px; font-weight: 600; line-height: 1; }
.addcard { background: var(--panel); border-radius: var(--radius-lg); padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 0 1.5px var(--accent-line); }

/* approved plan */
.plancard { border-left: 3px solid var(--accent); }
.planlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.planlist li { display: flex; gap: 10px; align-items: baseline; }

/* test plan page: every title on its own vertical frame */
.variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.variant { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vtile { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #000 center / cover no-repeat;
  container-type: inline-size; box-shadow: inset 0 0 0 1px var(--line); }
.vtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.18)); pointer-events: none; }
.vtile .overlay { z-index: 1; }
.variant.win .vtile { box-shadow: 0 0 0 2px var(--accent); }
.wintag { position: absolute; z-index: 2; left: 8px; bottom: 8px; background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.variant .meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; }
.variant .meta .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--line); border-radius: 12px; overflow: hidden; }
.steps3 > div { background: var(--panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.steps3 b { font-weight: 500; font-size: 13.5px; }
.steps3 .now { box-shadow: inset 0 2px 0 var(--accent); }
.steps3 .done b::after { content: " ✓"; color: var(--accent); }

/* confirmation sheet */
.sheetwrap { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.sheet { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; gap: 14px; box-shadow: var(--shadow); }
.sheet h2 { font-size: 17px; margin: 0; font-weight: 600; }
.opts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ohead { padding: 0 2px; }
.optlist { display: flex; flex-direction: column; gap: 10px; }
.opt { background: var(--panel); border-radius: var(--radius-lg); padding: 13px 14px; display: flex; flex-direction: column; gap: 7px;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .12s; }
.opt.sel { box-shadow: inset 0 0 0 1px var(--line-2); }
.opt.onvid { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.opt { cursor: default; }
.opt.rej { opacity: .55; }
.opt.hid { opacity: .5; box-shadow: inset 0 0 0 1px var(--line-2); background: repeating-linear-gradient(135deg, var(--panel), var(--panel) 10px, var(--panel-2) 10px, var(--panel-2) 20px); }
.studionote { border-left: 3px solid var(--studio); gap: 4px; }
.opt.rej .tt { text-decoration: line-through; text-decoration-color: var(--muted); }
.opt .top { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.cb { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-2); background: none; display: grid; place-items: center; cursor: pointer; padding: 0; color: transparent; flex: none; }
.cb[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cb svg { width: 13px; height: 13px; }
.letter { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--muted); }
.hyp { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.chip.xs { font-size: 10.5px; padding: 1px 7px; }
.iconbtn { border: 0; background: none; color: var(--muted); padding: 4px; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.iconbtn:hover, .iconbtn[aria-pressed="true"] { color: var(--fg); background: var(--hover); }
.iconbtn svg { width: 17px; height: 17px; }
.tt { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.why { margin: 0; font-size: 13px; color: var(--fg-2); }
.quote { border: 0; background: var(--panel-2); color: var(--fg-2); text-align: left; border-radius: 8px; padding: 7px 10px; font-size: 12.5px;
  display: flex; gap: 10px; align-items: baseline; cursor: pointer; line-height: 1.45; }
.quote:hover { color: var(--fg); background: var(--hover); }
.quote span:first-child { flex: 1; font-style: italic; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.editf { display: flex; flex-direction: column; gap: 8px; }
.editf textarea, .addown textarea { font: inherit; font-size: 15px; font-weight: 600; color: var(--fg); background: var(--field); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 9px 11px; resize: vertical; width: 100%; }
.reasons { display: flex; flex-direction: column; gap: 6px; }
.btnchip { border: 0; cursor: pointer; }
.btnchip:hover { color: var(--fg); background: var(--hover); }
.addown { padding: 2px; }
details.more { gap: 10px; }
details.more summary { cursor: pointer; font-size: 13.5px; font-weight: 500; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "▸ "; color: var(--muted); }
details.more[open] summary::before { content: "▾ "; }
.shortlist, .removed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shortlist li { display: flex; gap: 12px; align-items: center; }
.shortlist b { display: block; font-weight: 500; font-size: 13.5px; }
.shortlist .mut, .removed .mut { display: block; }
.removed s { font-size: 13px; color: var(--fg-2); }
.studiobanner { display: flex; gap: 12px; align-items: center; background: var(--studio-soft); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; flex-wrap: wrap; }
.studio-wait { border-left: 3px solid var(--studio); }

/* ---------- phone width ---------- */
@media (max-width: 720px) {
  .shell, :is(.shell.rail, .nav-mini .shell[data-collapsible]) { grid-template-columns: 1fr; }
  .side { display: none; }
  .appbar {
    display: flex; position: sticky; top: 0; z-index: 5; align-items: center; gap: 10px;
    height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0 16px;
    background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent; transition: border-color .15s;
  }
  .appbar.scrolled { border-bottom-color: var(--line); }
  .appbar .clogo { width: 26px; height: 26px; font-size: 10.5px; border-radius: 7px; }
  .appbar b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .appbar .abt { flex: 1; min-width: 0; text-align: center; font-size: 14.5px; font-weight: 600; opacity: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .15s; }
  .appbar.scrolled .abt { opacity: 1; }
  .appbar .abside { flex: none; display: flex; align-items: center; gap: 8px; min-width: 58px; justify-content: flex-end; }
  .abpill { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); background: var(--panel); border-radius: 999px; padding: 3px 9px; }
  .screen { padding: 10px 16px calc(90px + env(safe-area-inset-bottom, 0px)); gap: 14px; }
  h1 { font-size: 19px; }
  .head .usage, .head .newbtn { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfg, .grid2 { grid-template-columns: 1fr; }
  .crumbs { display: none; }
  .hide-sm { display: none; }
  .show-sm { display: block; }
  .turn { grid-template-columns: 1fr; gap: 2px; }
  .turn .who { flex-direction: row; gap: 8px; }
  .cliprow { padding: 12px 14px; }
  .player { position: static; }
  .vid { width: min(100%, calc(58dvh * 9 / 16)); aspect-ratio: 9 / 16; margin: 0 auto; }
  .variants { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pqv { grid-template-columns: auto minmax(0, 1fr); }
  .pqv > .row { grid-column: 1 / -1; justify-content: flex-start !important; }
  .pqv form { justify-content: flex-start; width: 100%; }
  .pqv form .inp, .pqv .inp { flex: 1 1 140px; width: auto; min-width: 0; }
  .pqfoot { flex-direction: column; align-items: stretch; }
  .pqfoot .grow { flex: none; }
  .pqfoot .btn { width: 100%; }
  .steps3 { grid-template-columns: 1fr; }
  .tbl td, .tbl th { padding: 9px 6px; }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; /* as many equal columns as tabs */ left: 0; right: 0; bottom: 0; z-index: 6;
    background: var(--side); border-top: 1px solid var(--line);
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
  }
  .tabbar a, .tabbar button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10.5px; color: var(--muted); padding: 4px 0; text-decoration: none; cursor: pointer; }
  .tabbar [aria-current="page"] { color: var(--fg); }
  .tabbar .plus { color: var(--accent); font-weight: 600; }
  .tabbar .plus[aria-disabled="true"] { opacity: .45; }
  .tabbar svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.howto { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; color: var(--fg-2); }
.howto .btn { vertical-align: middle; }

/* billing */
.bigmoney { font-size: 30px; font-family: var(--font-mono); }
.cfg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.radios .check { padding: 3px 0; }
@media (max-width: 720px) { .cfg2, .grid3 { grid-template-columns: 1fr; } }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 2px 0; width: 100%; }
.walletcard { margin: 14px 4px 0; background: var(--panel); border-radius: var(--radius-lg); padding: 11px 12px; display: flex; flex-direction: column; gap: 3px;
  text-decoration: none; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.walletcard:hover { box-shadow: inset 0 0 0 1px var(--accent-line); }
.walletcard b { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.walletcard.low b { color: var(--run); }
.walletcard .btn { margin-top: 6px; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pack { width: 100%; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--fg); border-radius: 12px; padding: 14px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: border-color .12s, background .12s; }
.pack:hover { border-color: var(--accent); }
.pack.pop { border-color: var(--accent-line); background: var(--accent-soft); }
.pack b { font-size: 20px; font-family: var(--font-mono); font-weight: 600; }
.pack span { font-size: 11.5px; color: var(--muted); }
.pricelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pricelist li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.pricelist li:last-child { border-bottom: 0; }
.pricelist b { display: block; font-weight: 500; font-size: 14px; }
.pricelist .mono { font-size: 14px; }

/* ---------- client sidebar ---------- */
.side .ws { width: 100%; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 9px; text-align: left; padding: 6px 8px; }
.side .ws:hover { background: var(--hover); }
.side .ws .chev { width: 15px; height: 15px; margin-left: auto; color: var(--muted); flex: none; }
.wsmenu, .help { position: relative; }
.menu { position: absolute; z-index: 30; left: 4px; right: 4px; top: calc(100% + 4px); background: var(--panel); border-radius: 10px; padding: 6px;
  box-shadow: var(--shadow), 0 0 0 1px var(--line-2); display: flex; flex-direction: column; gap: 1px; min-width: 200px; }
.menu.up { top: auto; bottom: calc(100% + 6px); padding: 12px; gap: 10px; }
.menu a, .menu button { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 7px; border: 0;
  background: none; color: var(--fg); font-size: 13.5px; text-decoration: none; cursor: pointer; width: 100%; text-align: left; }
.menu a:hover, .menu button:hover { background: var(--hover); }
.menu form { display: contents; }
.menu.right { left: auto; right: 0; min-width: 190px; }
.menu button.danger { color: var(--fail); }
.menu button.danger svg { width: 15px; height: 15px; }
.menu button.danger:hover { background: var(--fail-soft); }
.chatmenu { position: relative; }
.side .newclip { justify-content: center; gap: 8px; padding: 9px 12px; font-size: 13.5px; margin: 0 2px; }
.side .newclip svg { width: 15px; height: 15px; }
.navlike { display: flex; gap: 10px; align-items: center; padding: 7px 9px; border-radius: 7px; border: 0; background: none; width: 100%;
  color: var(--fg-2); font-size: 13.5px; cursor: pointer; text-align: left; }
.navlike:hover { background: var(--hover); }
.navlike svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.footrow { padding-top: 2px; }
.collapse { color: var(--muted); }
.side .walletcard { margin: 0 2px; }
/* icons-only sidebar */
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side { padding-inline: 8px; align-items: stretch; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .lbl { display: none; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side .ws { justify-content: center; padding: 6px 0; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .nav a { justify-content: center; position: relative; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .nav .count { position: absolute; top: 1px; right: 2px; margin: 0; font-size: 9.5px; padding: 0 5px; line-height: 15px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side .newclip { padding: 9px 0; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .walletcard { padding: 8px 4px; align-items: center; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .walletcard b { font-size: 12px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .navlike, :is(.shell.rail, .nav-mini .shell[data-collapsible]) .me { justify-content: center; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .footrow { justify-content: center; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .menu { left: 0; right: auto; }
.abpill { text-decoration: none; }

/* tests & results */
.testlist { display: flex; flex-direction: column; gap: 6px; }
.testrow { display: flex; gap: 14px; align-items: center; background: var(--panel); border-radius: var(--radius-lg); padding: 10px 14px 10px 10px; text-decoration: none; color: var(--fg); }
.testrow:hover { background: var(--hover); }
.testrow b { display: block; font-weight: 600; font-size: 14px; }
.testrow .sm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tthumb { width: 40px; aspect-ratio: 9 / 16; border-radius: 6px; background: var(--panel-2) center / cover no-repeat; flex: none; }
.morehelp { display: flex; flex-direction: column; gap: 2px; padding: 14px 4px; border-bottom: 1px solid var(--line); }

/* ---------- clips gallery ---------- */
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter { display: inline-flex; gap: 7px; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--fg-2);
  text-decoration: none; background: var(--panel); }
.filter em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.filter:hover { color: var(--fg); background: var(--hover); }
.filter.on { background: var(--fg); color: var(--bg); }
.filter.on em { color: var(--bg); opacity: .7; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 22px 16px; }
.ccard { display: flex; flex-direction: column; gap: 9px; text-decoration: none; color: var(--fg); min-width: 0; border-radius: 14px; }
.ccard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cover { display: block; border-radius: 14px; transition: transform .16s ease, box-shadow .16s ease; background-color: var(--panel-2); }
.ccard:hover .cover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px var(--line); }
.cover .overlay { display: block; }
.ctop { position: absolute; z-index: 2; top: 8px; left: 8px; right: 8px; display: flex; }
.ctop .chip { backdrop-filter: blur(8px); background: color-mix(in srgb, #000 55%, transparent); color: #fff; }

.cpin { margin-left: auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  backdrop-filter: blur(8px); background: color-mix(in srgb, #000 55%, transparent); color: #fff; }
.cpin .mi { width: 13px; height: 13px; }
.cdur { position: absolute; z-index: 2; right: 8px; bottom: 8px; font-size: 11px; color: #fff; background: rgba(0,0,0,.55); padding: 1px 7px; border-radius: 999px; }
.cplay { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff; opacity: 0; transition: opacity .16s; backdrop-filter: blur(6px); }
.cplay svg { width: 24px; height: 24px; margin-left: 3px; }
.ccard:hover .cplay, .ccard:focus-visible .cplay { opacity: 1; }
.cmeta { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
.cmeta b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmeta .xs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- peek: bottom sheet on the Clips page ---------- */
.peekwrap { align-items: end; padding: 0; animation: peekfade .16s ease; }
.peek { width: min(1060px, 100%); max-height: min(90dvh, 820px); background: var(--panel); border-radius: 18px 18px 0 0; box-shadow: var(--shadow);
  display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); gap: 22px; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow: auto; animation: peekup .22s cubic-bezier(.2, .8, .2, 1); }
.peekvid .vid { width: min(100%, calc(min(72dvh, 640px) * 9 / 16)); margin: 0 auto; }
.peekinfo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.peekinfo h2 { font-size: 19px; margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.peekstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.peekstats > div { background: var(--panel-2); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
.peekstats b { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.peektitles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.peektitles button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 0; cursor: pointer; color: var(--fg);
  background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 1px transparent; }
.peektitles button:hover { background: var(--hover); }
.peektitles button.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
@keyframes peekup { from { transform: translateY(40px); opacity: .4; } }
@keyframes peekfade { from { background: rgba(0,0,0,0); } }
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .peek { grid-template-columns: 1fr; gap: 14px; padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: 94dvh; }
  .peekvid .vid { width: min(100%, calc(46dvh * 9 / 16)); margin: 0 auto; }
  .cplay { opacity: 1; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .peek, .peekwrap { animation: none; } .cover { transition: none; } }

/* ---------- new clip ---------- */
.newcard { background: var(--panel); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.dropzone { position: relative; border-radius: 14px; padding: 34px 22px 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), transparent 70%), var(--panel-2);
  border: 1.5px dashed var(--accent-line); transition: border-color .15s, background-color .15s, transform .15s; }
.dropzone.over { border-color: var(--accent); background-color: var(--hover); transform: scale(1.01); }
.dropzone.ready { border-style: solid; border-color: var(--accent); }
.dzicon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
.dzicon svg { width: 26px; height: 26px; }
.dztext { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.dztext b { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.dztext .linkbtn { color: var(--accent); text-decoration-color: var(--accent-line); font-weight: 500; }
.dzor { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; color: var(--muted); font-size: 12.5px; }
.dzor::before, .dzor::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.dzlink { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.dzlink .inp { text-align: center; }

/* ---------- transcript: one sentence per line ---------- */
.transcript { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tlines { list-style: none; margin: 0; padding: 0 2px 0 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; scrollbar-width: thin; }
.tline { width: 100%; display: flex; gap: 10px; align-items: baseline; text-align: left; border: 0; background: none; cursor: pointer; color: var(--fg-2);
  font-size: 13.5px; line-height: 1.55; font-style: italic; padding: 5px 8px; border-radius: 7px; }
.tline:hover { background: var(--hover); color: var(--fg); }
.tline .tx { flex: 1; min-width: 0; }
.tline .ts { font-style: normal; font-size: 11px; color: var(--muted); opacity: 0; transition: opacity .12s; }
.tline:hover .ts, .tline:focus-visible .ts, .tline.now .ts { opacity: 1; }
.tline.now { color: var(--fg); background: var(--accent-soft); }
.tline.q { box-shadow: inset 2px 0 0 var(--accent); }
.tspk { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 8px 2px; }
.qkey { display: inline-block; width: 3px; height: 11px; background: color-mix(in srgb, var(--accent) 38%, transparent); vertical-align: -1px; margin-right: 4px; border-radius: 2px; }

/* Names that are one long word (file names) wrap instead of pushing the page sideways. */
h1, h2, .crumbs span, .ccard b, .testrow b { overflow-wrap: anywhere; }

/* ---------- option card (step C) ---------- */
.btn.danger { background: var(--fail); border-color: var(--fail); color: var(--bg); font-weight: 600; }
.btn.danger:hover { filter: brightness(1.08); }
.btn svg { width: 15px; height: 15px; flex: none; }
.prevbtn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.iconbtn.trash { margin: -4px -4px -4px 0; padding: 6px; }
.iconbtn.trash:hover, .iconbtn.trash[aria-expanded="true"] { color: var(--fail); background: var(--fail-soft); }
.removebox { scroll-margin-bottom: 96px; display: flex; flex-direction: column; gap: 9px; background: var(--panel-2); border-radius: var(--radius); padding: 10px 12px; }
.reasonchips { display: flex; flex-wrap: wrap; gap: 6px; }
.reasonchips .chip { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); padding: 4px 11px; }
.reasonchips .chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
.opt.leaving { overflow: hidden; pointer-events: none; animation: optout .3s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes optout {
  0% { opacity: 1; transform: none; max-height: var(--h, 400px); }
  45% { opacity: 0; transform: translateX(24px) scale(.98); max-height: var(--h, 400px); }
  100% { opacity: 0; transform: translateX(24px) scale(.98); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -10px; }
}
.opt.enter { animation: optin .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes optin { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.removedbox:has(#removed-items:empty) { display: none; }
.removedlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.removedlist li { display: flex; gap: 10px; align-items: center; }
.removedlist s { font-size: 13.5px; color: var(--fg-2); display: block; }
.removedlist .mut { display: block; }

/* ---------- undo toast ---------- */
.toasts { position: fixed; left: 0; right: 0; bottom: 20px; z-index: 80; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: min(520px, 100%); background: var(--fg); color: var(--bg);
  border-radius: 12px; padding: 8px 8px 8px 14px; font-size: 13.5px; box-shadow: var(--shadow); animation: toastin .18s ease-out; }
.toast .grow { min-width: 0; overflow-wrap: anywhere; }
.toastbtn { border: 0; background: color-mix(in srgb, var(--bg) 12%, transparent); color: inherit; font: inherit; font-weight: 600; border-radius: 8px;
  padding: 6px 10px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.toastbtn:hover { background: color-mix(in srgb, var(--bg) 22%, transparent); }
.toastbtn kbd { font-family: var(--font-mono); font-size: 11px; font-weight: 500; opacity: .6; }
.toastx { border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.toastx:hover { opacity: 1; }
.toastx svg { width: 14px; height: 14px; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 720px) {
  .removebox { scroll-margin-bottom: 150px; }
  .toasts { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body:has(.rvact) .toasts { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .opt.leaving { animation-duration: .01s; }
  .opt.enter, .toast { animation: none; }
}

/* ---------- pro player (step D) ---------- */
.lookprev .hl { color: var(--tl-hl, #FFD60A); }
.tt .hl { color: var(--opt-hl, var(--accent)); }
.tt.hidetext { display: none; }
.pbtn { border: 0; background: none; color: var(--fg-2); height: 32px; min-width: 32px; padding: 0 6px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; flex: none; font: inherit; font-size: 12.5px; }
.pbtn:hover, .pbtn:focus-visible { background: var(--hover); color: var(--fg); outline: none; }
.pbtn svg { width: 18px; height: 18px; }
.pbtn.play { color: var(--fg); }
.tcode { border: 0; background: none; color: var(--fg); font-size: 12.5px; padding: 4px 6px; border-radius: 6px; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tcode:hover { background: var(--hover); }
.tcode b { font-weight: 600; }
.ratepick { position: relative; }
.ratemenu { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 30; background: var(--panel); border-radius: 10px; box-shadow: var(--shadow);
  padding: 4px; display: flex; flex-direction: column; min-width: 72px; }
.ratemenu button { border: 0; background: none; color: var(--fg-2); font: inherit; font-family: var(--font-mono); font-size: 12.5px; text-align: left; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.ratemenu button:hover { background: var(--hover); color: var(--fg); }
.ratemenu button[aria-checked="true"] { color: var(--accent); }
.fpslabel { padding-right: 4px; white-space: nowrap; }
kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 4px; line-height: 1.5; }

.wchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wchip { border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; color: var(--fg); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2);
  border-radius: 8px; padding: 4px 9px; }
.wchip:hover { background: var(--hover); }
.wchip[aria-pressed="true"] { background: var(--opt-hl, var(--accent)); color: #111; box-shadow: none; }
@media (max-width: 720px) {
  .fpslabel { display: none; }
}
.acts .btn.ghost { padding-inline: 7px; }

/* ---------- review screen: video stage + timeline | one panel with tabs (Frame.io-like) ---------- */
.overlay { transform-origin: 50% 50%; will-change: opacity, transform; }
.overlay .w.gone { visibility: hidden; }
.rvpage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rv { height: 100dvh; display: grid; grid-template-rows: 56px minmax(0, 1fr); min-width: 0; }
.rvbar { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--line); min-width: 0; background: var(--bg); }
.rvback { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); text-decoration: none; font-size: 13px; padding: 6px 8px 6px 4px; border-radius: 8px; flex: none; }
.rvback:hover { background: var(--hover); color: var(--fg); }
.rvback svg { width: 15px; height: 15px; }
.rvtitle { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rvtitle h1 { font-size: 16px; margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rvmeta { display: flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }
.rvundo { display: flex; gap: 2px; flex: none; }
.rvundo .iconbtn { width: 34px; height: 34px; }
.rvundo .iconbtn:disabled { opacity: .3; cursor: default; background: none; }
.rvact { display: flex; align-items: center; gap: 12px; flex: none; padding-left: 12px; border-left: 1px solid var(--line); }
.rvmake { display: flex; align-items: center; gap: 10px; }
.rvmake #make-error:empty { display: none; }
.rvbody { display: grid; grid-template-columns: minmax(0, 1fr) 420px; min-height: 0; }

/* the stage stays dark in both themes, like an editing suite */
.stage { --fg: #ecebe7; --fg-2: #b9b8b2; --muted: #8b8a84; --hover: #282825; --line: #2b2b28; --line-2: #383834; --panel: #1b1b19; --panel-2: #22221f;
  background: #0a0b0e; color: var(--fg); display: flex; flex-direction: column; gap: 10px; padding: 12px 18px 14px; min-height: 0; min-width: 0; }
.playerwrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.playerwrap:not(.pro) .vidbox { display: contents; }
.playerwrap.pro { flex: 1; min-height: 0; }
.pro .vidbox { flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; }
.pro .vidbox .vid { height: min(100cqh, 100cqw * 16 / 9); width: auto; max-width: 100%; aspect-ratio: 9 / 16; margin: 0; box-shadow: 0 20px 60px #00000080; }
.stage > .vidbox { flex: 1; display: grid; place-items: center; }
.probar { display: flex; align-items: center; gap: 2px; min-width: 0; }
.probar .pbtn.play { width: 38px; height: 38px; border-radius: 50%; background: var(--fg); color: #131312; margin: 0 2px; }
.probar .pbtn.play:hover { background: #fff; }
.probar .tcode { font-size: 13.5px; margin-left: 6px; }

.tl { display: flex; flex-direction: column; gap: 8px; flex: none; }
.tlstatus { min-width: 40px; }
.tlgrid { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
.tllabels { display: grid; grid-template-rows: 16px 40px 30px; row-gap: 4px; font-size: 11px; color: var(--muted); text-align: right; align-items: center; }
.tltracks { position: relative; display: grid; grid-template-rows: 16px 40px 30px; row-gap: 4px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.ruler { position: relative; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); overflow: hidden; }
.ruler span { position: absolute; top: 0; bottom: 0; padding-left: 4px; border-left: 1px solid var(--line-2); line-height: 16px; }
.fstrip { display: flex; border-radius: 7px; overflow: hidden; background: var(--panel-2); }
.fstrip span { flex: 1; background-repeat: no-repeat; border-right: 1px solid #0a0b0e; opacity: .8; }
.ttrack { position: relative; background: var(--panel); border-radius: 7px; }
.tblock { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 20%, #0a0b0e); box-shadow: inset 0 0 0 2px var(--accent); min-width: 6px; }
.tltracks.editable .tblock { cursor: grab; }
.tltracks.editable .tblock.moving { cursor: grabbing; }
.tblock .handle { width: 12px; align-self: stretch; background: var(--accent); flex: none; position: relative; cursor: ew-resize; z-index: 1; }
.tblock .handle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 12px; margin: -6px 0 0 -1px; border-radius: 2px; background: var(--accent-ink); opacity: .7; }
.tbtext { flex: 1; min-width: 0; padding: 0 8px; font-size: 12px; color: #d6f5e5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ramp { position: absolute; top: 2px; bottom: 2px; pointer-events: none; max-width: 50%; }
.ramp.in { left: 2px; background: linear-gradient(90deg, #0a0b0eb3, transparent); }
.ramp.out { right: 2px; background: linear-gradient(270deg, #0a0b0eb3, transparent); }
.playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px #00000073; pointer-events: none; z-index: 2; }
.playhead::before { content: ""; position: absolute; top: -2px; left: 50%; width: 11px; height: 8px; margin-left: -5.5px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }

.rvpanel { border-left: 1px solid var(--line); background: var(--side); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.rvtabs { display: flex; gap: 4px; margin: 12px 14px 8px; padding: 4px; border-radius: 10px; background: var(--bg); flex: none; }
.rvtabs button { flex: 1; height: 34px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.rvtabs button:hover { color: var(--fg); }
.rvtabs button[aria-selected="true"] { background: var(--panel-2); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px #0003; }
.rvtab { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 4px 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.rvtab .tcard { display: flex; flex-direction: column; min-height: 0; }
.showbtn { height: 28px; padding: 0 10px; font-size: 12px; }
.acts .btn svg { width: 14px; height: 14px; }

/* Style tab: Text / Style / Animation, like CapCut's text panel */
.stylepanel { display: flex; flex-direction: column; gap: 18px; min-height: 100%; }
.stabs.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; align-self: stretch; position: sticky; top: -18px; z-index: 3; margin-top: -4px;
  box-shadow: 0 6px 12px var(--side); }
.stabs .segbtn { text-align: center; }
.stabbody { display: flex; flex-direction: column; gap: 20px; }
.valbox { min-width: 40px; text-align: right; flex: none; }
.ctlrow .seg.icons { display: inline-grid; grid-template-columns: repeat(2, 44px); width: auto; }
.seg.icons .segbtn { padding: 5px 0; display: grid; place-items: center; }
.seg.icons svg { width: 16px; height: 16px; }
.capsbtn { height: 30px; padding: 0 11px; border-radius: 8px; border: 0; cursor: pointer; font: 600 12px/1 var(--font-ui); letter-spacing: .04em;
  background: var(--panel-2); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.capsbtn[aria-pressed="true"] { background: var(--fg); color: var(--bg); box-shadow: none; }
/* the font: one compact field that opens a searchable list, each name in its own face (like shadcn's combobox) */
.fcombo { position: relative; }
.fcbtn { width: 100%; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-2); font: inherit; text-align: left; }
.fcbtn:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.fcbtn[aria-expanded="true"], .fcbtn:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent); outline: none; }
.fcname, .fcsample { font-family: var(--tl-font), var(--font-ui); font-weight: var(--tl-weight, 800); text-transform: var(--tl-case, none);
  font-size: calc(16px * var(--tl-fscale, 1)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fcname { flex: 1; }
.fcchev { width: 15px; height: 15px; color: var(--muted); flex: none; }
.fcpop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel); border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.fcsearch { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.fcsearch svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.fcsearch input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; color: var(--fg); font: inherit; font-size: 14px; outline: none; }
.fcgroups { display: flex; gap: 4px; padding: 8px 10px 4px; overflow-x: auto; scrollbar-width: none; }
.fcgroups button { flex: none; height: 26px; padding: 0 10px; border: 0; border-radius: 13px; cursor: pointer; font: inherit; font-size: 12px;
  background: none; color: var(--fg-2); }
.fcgroups button:hover { background: var(--hover); }
.fcgroups button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.fclist { list-style: none; margin: 0; padding: 4px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.fclist li { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 7px; cursor: pointer; }
.fclist li.active { background: var(--hover); }
.fclist .fcsample { flex: 1; }
.fccheck { width: 15px; height: 15px; color: var(--accent); flex: none; }
.fclist .fcnone { cursor: default; height: auto; padding: 10px; }
.fcfoot { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-top: 1px solid var(--line); }
.fcadd { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--fg-2); }
.fcadd:hover { background: var(--hover); color: var(--fg); }
.fcadd svg { width: 14px; height: 14px; }
.fcadd.busy { opacity: .6; pointer-events: none; }
.sgroup { display: flex; flex-direction: column; gap: 8px; }
.sgroup .label { margin: 0; font-size: 11.5px; }
.sgroup.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sgroup.two > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sgroup .seg { align-self: flex-start; }
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.presettile { border: 0; cursor: pointer; border-radius: 11px; padding: 14px 6px 9px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #3e3d38, #262622); color: #ecebe7; box-shadow: inset 0 0 0 1px var(--line); font: inherit; }
.presettile[aria-pressed="true"], .animtile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.psample { font-family: var(--tl-font), var(--font-ui); font-weight: var(--tl-weight, 800); text-transform: var(--tl-case, none); font-size: calc(15px * var(--tl-fscale, 1));
  padding: 3px 9px; border-radius: 6px; color: var(--tl-text); background: var(--tl-box); line-height: 1.25; }
.psample[data-box="none"] { background: none; text-shadow: 0 1px 2px #000e, 0 0 6px #0008; }
.swlabel { width: 70px; font-size: 13px; color: var(--fg-2); }
.animgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.animtile { border: 0; cursor: pointer; border-radius: 10px; padding: 8px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--panel); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 11.5px; min-width: 0; text-align: center; }
.animtile:hover { color: var(--fg); background: var(--panel-2); }
.animtile[aria-pressed="true"] { color: var(--fg); }
.animicon { width: 24px; height: 24px; }
.btn svg { width: 15px; height: 15px; }
.savebar { margin-top: auto; position: sticky; bottom: -18px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel); box-shadow: 0 -8px 20px var(--side); }

@media (max-width: 1240px) { .rvbody { grid-template-columns: minmax(0, 1fr) 360px; } .rvmeta .sm { display: none; } }
@media (max-width: 960px) {
  .rv { height: auto; display: block; }
  .rvbar { position: sticky; top: 0; z-index: 6; height: 52px; padding: 0 8px 0 4px; gap: 6px; }
  .rvbody { display: block; }
  .stage { padding: 8px 10px 12px; }
  .pro .vidbox { flex: none; height: 56dvh; }
  .tlgrid { grid-template-columns: minmax(0, 1fr); }
  .tllabels, .ruler { display: none; }
  .tltracks { grid-template-rows: 34px 32px; }
  .rvpanel { border-left: 0; }
  .rvtabs { position: sticky; top: 52px; z-index: 4; margin: 0; padding: 8px 10px; border-radius: 0; background: var(--bg); border-bottom: 1px solid var(--line); }
  .rvtab { overflow: visible; padding: 12px 12px calc(150px + env(safe-area-inset-bottom, 0px)); }
  .savebar { bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 720px) {
  body:has(.rvpage) .appbar { display: none; }
  .rvact { position: fixed; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 7; padding: 8px 12px; border: 0; border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); justify-content: space-between; }
  .rvmake { flex: 1; justify-content: flex-end; }
  .rvundo .iconbtn:last-child { display: none; }
  .animgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pdiv { width: 1px; height: 22px; background: var(--line); margin: 0 6px; flex: none; }
.tlbtn { gap: 6px; }
.tlbtn kbd { margin-left: 2px; }
.tbtime { font-size: 10.5px; color: #9fd8bb; padding-right: 8px; white-space: nowrap; pointer-events: none; }
.tl { gap: 4px; }
@media (max-width: 1240px) { .tlbtn span { display: none; } .tlbtn kbd { margin: 0; } .tbtime { display: none; } }
@media (max-width: 960px) {
  .probar { flex-wrap: wrap; row-gap: 6px; }
  .probar .tlbtn, .probar .tlstatus { order: 10; }
  .probar .tlstatus { flex-basis: 100%; order: 11; min-height: 0; }
  .probar .tlstatus:empty { display: none; }
  .tlbtn span { display: inline; }
  .pdiv { display: none; }
}
/* the undo toast sits top right on the review screen on a computer: clear of the timeline and of the title */
body:has(.rvpage) .toasts { top: 66px; bottom: auto; justify-content: flex-end; }
@media (max-width: 960px) { body:has(.rvpage) .toasts { top: 60px; justify-content: center; } }
.sgroup .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: stretch; }
@media (max-width: 480px) {
  .probar .tcode .mut { display: none; }
  .probar .tcode { margin-left: 2px; }
}

/* Style tab rows: label | control, all the same width (review fixes) */
.ctlrow { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; }
.ctllabel { font-size: 13px; color: var(--fg-2); }
.ctlrow .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.ctlrow .seg.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ctlrow .segbtn { padding: 6px 4px; text-align: center; }
.sizectl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sizectl input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.sizectl .iconbtn { width: 28px; height: 28px; flex: none; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); }
.numbox { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 0 8px 0 4px; flex: none; }
.numbox input { width: 42px; border: 0; background: none; color: var(--fg); font: inherit; font-family: var(--font-mono); font-size: 13px; text-align: right; padding: 5px 0; -moz-appearance: textfield; }
.numbox input::-webkit-outer-spin-button, .numbox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.numbox span { font-size: 11.5px; color: var(--muted); }

/* the title block never gets too thin to grab, and both handles always show */
.tblock { min-width: 30px; }
.tbtext, .tbtime { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.tbtime { flex-shrink: 2; }
.showbtn { display: inline-flex; align-items: center; gap: 6px; }
.showbtn i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.showbtn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); background: color-mix(in srgb, var(--accent) 12%, transparent); font-weight: 600; }
.showbtn[aria-pressed="true"] i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.rv:not(.has-video) .showbtn { display: none; }
/* handles sit on the block's edges whatever its width; the text squeezes in between */
.tblock .handle { position: absolute; top: 0; bottom: 0; }
.tblock .handle.in { left: 0; border-radius: 7px 0 0 7px; }
.tblock .handle.out { right: 0; border-radius: 0 7px 7px 0; }
.tblock { min-width: 28px; padding: 0 14px; }
.tltracks:not(.editable) .tblock { padding: 0 4px; }
.tbtext { padding: 0 6px; }
.tbtime { padding-right: 4px; }

/* ---------- finished videos (build step E) ---------- */
.export { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.exportbtn { gap: 6px; }
.exportbtn svg { width: 14px; height: 14px; }
.exportbtn.ready { border-color: var(--accent-line); color: var(--accent); }
.exportbar { width: 90px; height: 6px; border-radius: 6px; background: var(--panel-2); overflow: hidden; flex: none; }
.exportbar i { display: block; height: 100%; background: var(--accent); border-radius: 6px; transition: width .4s ease; }
.variant .export { padding: 6px 2px 0; }

/* ---------- no flash on load; the collapsed menu, Frame.io-style ---------- */
.preload *, .preload *::before, .preload *::after { transition: none !important; animation-duration: 0s !important; }
/* phones have no sidebar (the tab bar replaces it), so the rail width only applies above 720px */
@media (min-width: 721px) { :is(.shell.rail, .nav-mini .shell[data-collapsible]) { grid-template-columns: 64px minmax(0, 1fr); } }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side { padding: 12px 10px; gap: 10px; align-items: center; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side .ws { width: 44px; height: 44px; padding: 0; justify-content: center; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side .ws .clogo { width: 34px; height: 34px; font-size: 13px; border-radius: 9px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side .newclip { width: 44px; height: 44px; padding: 0; border-radius: 12px; margin: 4px 0; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side .newclip svg { width: 20px; height: 20px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .nav { gap: 6px; align-items: center; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .nav a { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .nav svg { width: 21px; height: 21px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .nav a[aria-current="page"] { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-2); }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .walletcard { width: 44px; padding: 7px 0; margin: 4px 0 0; align-items: center; border-radius: 12px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .walletcard b { font-size: 10.5px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .sidefoot { padding: 0; align-items: center; gap: 6px; width: 100%; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .navlike { width: 44px; height: 44px; padding: 0; border-radius: 12px; justify-content: center; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .navlike svg { width: 21px; height: 21px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .me { justify-content: center; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .me .av { width: 32px; height: 32px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .footrow { justify-content: center; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .collapse { width: 40px; height: 40px; border-radius: 10px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .collapse svg { width: 20px; height: 20px; }
/* names on hover in the collapsed menu */
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side [data-tip] { position: relative; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side [data-tip]:hover::after,
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 40;
  white-space: nowrap; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: 7px;
  box-shadow: var(--shadow); pointer-events: none; }

/* a tip under a button near the right edge (Share): it opens leftwards, so it never pushes the page wider */
.tipb[data-tip] { position: relative; }
.tipb[data-tip]:hover::after, .tipb[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: max-content; max-width: 240px;
  background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 500; line-height: 1.4; padding: 5px 9px; border-radius: 7px;
  box-shadow: var(--shadow); pointer-events: none; text-align: right; white-space: normal; }
@media (hover: none) { .tipb[data-tip]:hover::after { display: none; } }

/* ---------- moving between pages: the menu stays put, the page eases in (where the browser can) ---------- */
@view-transition { navigation: auto; }
.side { view-transition-name: side; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root) { animation: 90ms ease-out both vt-out; }
::view-transition-new(root) { animation: 180ms cubic-bezier(.2, .8, .2, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------------------------------------------------------------- share links (apps/sharing) */
.rvshare { position: relative; }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sharenew { display: flex; gap: 8px; }
.sharenew .inp { flex: 1; min-width: 0; }
.sharefresh { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: sharein .25s ease; }
@keyframes sharein { from { opacity: 0; transform: translateY(4px); } }
.sharecopy { display: flex; gap: 8px; }
.sharecopy .inp { flex: 1; min-width: 0; font-size: 12px; }
.sharelist { display: flex; flex-direction: column; gap: 4px; }
.sharerow { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.sharerow .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.votes { gap: 10px; }
.vote { display: flex; gap: 10px; align-items: flex-start; }
.vote .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vavatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--studio-soft); color: var(--studio); }
.vnote { color: var(--fg-2); overflow-wrap: anywhere; }

/* the public page: phone first, two columns on a wide screen */
.sharepage { max-width: 1040px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 18px; }
.sharehead { display: flex; gap: 12px; align-items: center; }
.sharehead .grow { display: flex; flex-direction: column; min-width: 0; }
.sharehead h1 { margin: 0; font-size: 19px; font-weight: 600; overflow-wrap: anywhere; }
.sharebody { display: grid; gap: 20px; }
.sharestage .vid { width: min(100%, calc(min(70dvh, 680px) * 9 / 16)); }
.sharepanel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sharehow { margin: 0; color: var(--fg-2); }
.sharelist2 { display: flex; flex-direction: column; gap: 8px; }
.shareopt { display: flex; gap: 12px; align-items: center; padding: 12px 12px 12px 14px; border-radius: var(--radius-lg); cursor: pointer;
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.shareopt:hover { background: var(--panel-2); }
.shareopt.on { box-shadow: inset 0 0 0 1.5px var(--fg-2); }
.shareopt.picked { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.shareopt .tt { font-size: 15px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.shareopt .tt .hl { color: var(--opt-hl, #FFD60A); }
.pick { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--line-2); color: transparent; transition: background .15s, color .15s, transform .1s; }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick svg { width: 20px; height: 20px; }
.pick:has(input:checked) { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick:active { transform: scale(.92); }
.btn.big { min-height: 48px; font-size: 15px; justify-content: center; }
.sharethanks { align-items: flex-start; gap: 10px; animation: sharein .3s ease; }
.sharethanks h2 { margin: 0; font-size: 20px; }
.bigtick { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.bigtick svg { width: 24px; height: 24px; }
.shareprivacy { margin: 0; }
@media (min-width: 820px) {
  .sharebody { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .sharestage { position: sticky; top: 18px; }
}

/* ---------------------------------------------------------------- Home, checklist, sample */
.home { gap: 22px; }
.home h2 { font-size: 16px; font-weight: 600; margin: 0; }
.chip.sample { background: var(--studio-soft); color: var(--studio); }
.samplebar { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius-lg);
  background: var(--studio-soft); color: var(--fg); }
.checklist { gap: 12px; max-width: 720px; }
.clbar { height: 4px; border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.clbar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s ease; }
.clsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.clsteps li { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius); }
.clsteps li.now { background: var(--panel-2); }
.clsteps li .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.clsteps li.done b { color: var(--muted); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--faint); }
.cltick { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--muted); }
.clsteps li.now .cltick { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.clsteps li.done .cltick { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.cltick svg { width: 14px; height: 14px; }
.homenow { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.homenow .card { gap: 10px; }
.homenow .testrow { background: var(--panel-2); }
.homenow .testrow:hover { background: var(--hover); }
.homepills { display: flex; gap: 8px; flex-wrap: wrap; }
.hpill { display: inline-flex; gap: 6px; align-items: center; padding: 7px 12px; border-radius: 999px; background: var(--panel);
  color: var(--fg-2); font-size: 13px; text-decoration: none; }
.hpill:hover { background: var(--hover); color: var(--fg); }
.homewins { display: flex; flex-direction: column; gap: 14px; }
.statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--panel); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.stat b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.angles { gap: 10px; max-width: 720px; }
.angle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.anglebar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.anglebar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.winlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.wincard { display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border-radius: var(--radius-lg); padding: 12px;
  text-decoration: none; color: var(--fg); }
.wincard:hover { background: var(--hover); }
.wincard .grow { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wincard .tthumb { width: 54px; }
.wintitle { font-size: 15px; }
.lift { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); }
.homeempty { align-items: flex-start; }
.emptyart { width: 48px; height: 48px; color: var(--accent); }
.emptyart svg { width: 100%; height: 100%; }
@media (max-width: 720px) {
  .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat b { font-size: 22px; }
  .winlist { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- My styles, Instagram safe zone */
.stylesave { display: flex; gap: 6px; }
.stylesave .inp { flex: 1; min-width: 0; }
.mystyles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mystyle { position: relative; }
.mystyle .presettile { width: 100%; }
.mystyledel { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--bg); color: var(--muted); opacity: 0; transition: opacity .15s; }
.mystyledel svg { width: 12px; height: 12px; }
.mystyle:hover .mystyledel, .mystyledel:focus-visible { opacity: 1; }
@media (hover: none) { .mystyledel { opacity: .8; } }
.mystyledel:hover { color: var(--fail); }
.safezone { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.safezone i { position: absolute; background: repeating-linear-gradient(135deg, rgba(255,90,90,.20) 0 6px, rgba(255,90,90,.08) 6px 12px);
  box-shadow: inset 0 0 0 1px rgba(255,120,120,.45); }
.safezone .sz-top { left: 0; right: 0; top: 0; height: 11.46%; }
.safezone .sz-bottom { left: 0; right: 0; bottom: 0; height: 19.79%; }
.safezone .sz-right { right: 0; width: 12.96%; top: 45%; bottom: 19.79%; }
.safewarn { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 3; display: flex; gap: 8px; align-items: center;
  padding: 8px 8px 8px 12px; border-radius: 10px; background: rgba(20, 12, 10, .86); color: #ffd2c8; font-size: 12.5px;
  backdrop-filter: blur(6px); animation: sharein .2s ease; }
.safewarn svg { width: 16px; height: 16px; flex: none; }
.safewarn span { flex: 1; min-width: 0; }
.safewarn button { border: 0; border-radius: 7px; padding: 5px 10px; background: #ffd2c8; color: #2a0d07; font-weight: 600; font-size: 12px; cursor: pointer; }
.safebtn[aria-pressed="true"] { color: var(--fail); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fail) 50%, transparent); }
.safewarn.attop { bottom: auto; top: 8px; }

/* ---------------------------------------------------------------- command palette (Ctrl/Cmd+K), shortcuts (?) */
.navkbd { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); border: 1px solid var(--line-2);
  border-radius: 5px; padding: 0 5px; line-height: 17px; }
.palwrap { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5); display: flex; justify-content: center; align-items: flex-start;
  padding: min(14vh, 120px) 16px 16px; }
.palette { width: min(620px, 100%); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--panel);
  border-radius: 14px; box-shadow: var(--shadow), 0 0 0 1px var(--line); overflow: hidden; animation: palin .14s ease-out; }
@keyframes palin { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.palsearch { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.palsearch svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.palsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--fg); font: inherit; font-size: 16px; }
.palette kbd, .keys kbd { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); background: var(--panel-2);
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.pallist { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; }
.palgroup { display: block; padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.palitem { width: 100%; display: flex; gap: 10px; align-items: center; border: 0; background: none; color: var(--fg); font: inherit; font-size: 14px;
  text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.palitem .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palitem[aria-selected="true"] { background: var(--hover); box-shadow: inset 2px 0 0 var(--accent); }
.palhint { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palempty { padding: 18px 10px; text-align: center; }
.palfoot { display: flex; gap: 14px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); }
.palfoot span { display: inline-flex; gap: 4px; align-items: center; }
.keyhelp { padding: 18px 20px; gap: 14px; max-height: min(80vh, 640px); overflow: auto; }
.keyhelp h2 { margin: 0; font-size: 17px; }
.keycols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.keycols h3 { margin: 0 0 8px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; align-items: center; font-size: 13.5px; }
.keys dt { display: flex; gap: 4px; justify-content: flex-end; }
.keys dd { margin: 0; color: var(--fg-2); }
@media (max-width: 960px) { .navsearch, .navkbd { display: none; } }

/* ---------------------------------------------------------------- studio: client Activity tab */
.feed { display: flex; flex-direction: column; gap: 18px; max-width: 860px; }
.feedday { display: flex; flex-direction: column; gap: 6px; }
.feedlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); margin-left: 5px; }
.feedline { position: relative; display: flex; gap: 12px; align-items: baseline; padding: 7px 4px 7px 18px; }
.feedline .grow { min-width: 0; color: var(--fg-2); overflow-wrap: anywhere; }
.feedline .grow b { color: var(--fg); font-weight: 600; }
.feedline a { color: var(--fg); }
.feeddot { position: absolute; left: -5px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); box-shadow: 0 0 0 3px var(--bg); }
.feedline.good .feeddot { background: var(--accent); }
.feedline.new .feeddot { background: var(--run); }
.feedline.muted .grow { color: var(--muted); }
.feedline.bystudio .feeddot { background: var(--studio); }
.chip.xs { font-size: 10.5px; padding: 1px 6px; vertical-align: 1px; }
.invitelink { gap: 8px; max-width: 720px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.studiobanner .payoffline { display: block; margin-bottom: 4px; color: var(--fg); }
.plainset { border: 0; padding: 0; margin: 0; min-width: 0; } .plainset legend { padding: 0; margin-bottom: 2px; }

/* ---------------------------------------------------------------- the clip's page: title chat (titles 3.0) */
.chatpage { flex: 1; display: flex; flex-direction: column; min-height: 100dvh; }
/* keyboard focus and "scroll into view" keep cards clear of the sticky header and the composer */
html:has(.chatpage) { scroll-padding: 80px 0 220px; }
.chathead { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px max(20px, env(safe-area-inset-right, 0px)) 10px 20px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); }
.chattitle { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.chattitle h1 { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csteps { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--muted); }
.csteps li { display: flex; align-items: center; gap: 6px; }
.csteps li + li::before { content: ""; width: 16px; height: 1px; background: var(--line-2); }
.csteps .n { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center;
  font: 500 11px/1 var(--font-mono); }
.csteps .n svg { width: 12px; height: 12px; }
.csteps .done { color: var(--fg-2); }
.csteps .done .n { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.csteps .now { color: var(--fg); font-weight: 500; }
.csteps .now .n { border-color: var(--accent); color: var(--accent); }

.thread { width: 100%; max-width: 800px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: 20px;
  padding: 22px max(20px, env(safe-area-inset-right, 0px)) 28px max(20px, env(safe-area-inset-left, 0px)); }
.msg-user { align-self: flex-end; max-width: min(580px, 88%); background: var(--panel-2); border-radius: 14px; padding: 10px 14px;
  overflow-wrap: anywhere; line-height: 1.5; }
.linkmsg { display: flex; gap: 10px; align-items: center; }
.linkmsg .ic { width: 32px; height: 32px; flex: none; border-radius: 8px; background: var(--panel); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--fg-2); }
.linkmsg .ic svg { width: 16px; height: 16px; }
.linkmsg small { display: block; font-size: 12px; }

/* the transcript, read like a script (one sentence per line) */
.txcard { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius-lg); overflow: hidden; }
.txcard header { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.txcard header .btn.xs { gap: 5px; }
.txcard .mic { width: 15px; height: 15px; color: var(--muted); }
.txcard .pill { font-size: 11px; line-height: 20px; padding: 0 8px; border-radius: 10px; background: var(--panel-2); color: var(--fg-2); }
.txbody { position: relative; padding: 10px 14px 2px; max-height: 128px; overflow: hidden; display: flex; flex-direction: column; gap: 9px;
  interpolate-size: allow-keywords; transition: max-height .38s cubic-bezier(.2, .8, .2, 1); }
.txcard.open .txbody { max-height: max-content; }
.txbody .spara p { font-size: 13px; line-height: 1.55; }
.txbody::after { content: ""; position: absolute; inset: auto 0 0 0; height: 48px; background: linear-gradient(transparent, var(--panel)); pointer-events: none; }
.txbody::after { transition: opacity .25s ease; }
.txcard.open .txbody::after { opacity: 0; }
.txfoot { display: flex; justify-content: center; padding: 2px 0 6px; }
.txfoot .linkbtn { text-decoration: none; font-size: 12px; padding: 4px 8px; border-radius: 6px; }
.txfoot .linkbtn:hover { background: var(--hover); }

/* getting the clip ready: one line per finished step, like a chat assistant reporting back */
.worklog { display: flex; flex-direction: column; gap: 8px; }
.worklog .wl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.wl-line { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--fg-2); line-height: 1.45; }
.wl-line.fresh { animation: wlin .38s cubic-bezier(.2,.8,.2,1); }
@keyframes wlin { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.wl-ic { width: 18px; height: 18px; flex: none; display: grid; place-items: center; margin-top: 1px; }
.wl-ic svg { width: 14px; height: 14px; }
.wl-ic .spin { width: 13px; height: 13px; border-width: 1.75px; }
.wl-line.done .wl-ic { color: var(--accent); }
.wl-line.failed .wl-ic, .wl-line.failed b { color: var(--fail); font-weight: 500; }
.wl-line.running .wl-text, .wl-line.pending .wl-text { color: var(--fg); }
.wl-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; column-gap: 8px; }
.wl-det { color: var(--muted); font-size: 12.5px; }
.wl-t { color: var(--faint); font-size: 11px; margin-top: 2px; }
.wl-foot { display: flex; align-items: center; gap: 10px; padding-left: 28px; }
.wl-foot:empty { display: none; }
.worklog.done > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-size: 13px;
  padding: 3px 8px 3px 4px; margin-left: -4px; border-radius: 7px; width: max-content; }
.worklog.done > summary::-webkit-details-marker { display: none; }
.worklog.done > summary:hover { color: var(--fg-2); background: var(--hover); }
.wl-chev { width: 14px; height: 14px; transition: transform .15s; }
.worklog.done[open] .wl-chev { transform: rotate(90deg); }
.worklog.done[open] .wl { padding: 4px 0 2px 4px; }
.shimmer { background: linear-gradient(90deg, var(--fg-2) 0%, var(--fg-2) 40%, var(--fg) 50%, var(--fg-2) 60%, var(--fg-2) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.2s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* one message and its answer */
.cturn { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.answer { display: flex; flex-direction: column; gap: 12px; }
.prose { font-size: 15px; line-height: 1.65; color: var(--fg); }
.prose:empty { display: none; }
.prose p { margin: 0 0 8px; } .prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 8px; padding-left: 20px; }
.writing { display: flex; align-items: center; gap: 10px; color: var(--fg-2); }
.writing[hidden] { display: none; }
.prose.picks[hidden] { display: none; }
/* while an answer is typed out: a soft caret after the last letter */
.cturn .typing > :last-child::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-inline-start: 3px;
  border-radius: 50%; background: var(--fg-2); vertical-align: middle; animation: pulse 1s infinite; }
.prose ul ul, .prose li > ul { margin-bottom: 0; }
.prose ul:dir(rtl) { padding-left: 0; padding-right: 20px; }
.msg-user:dir(rtl) { text-align: right; }
.spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: vspin .8s linear infinite; flex: none; }
.turnfail { display: flex; flex-direction: column; gap: 2px; border-left: 3px solid var(--fail); padding: 4px 0 4px 12px; }
.retryrow { flex-wrap: wrap; }

/* title cards: small and quiet, two to a row, under the answer's text */
.tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tgrid:empty { display: none; }
.tcard { position: relative; border: 1px solid var(--line); border-radius: 10px; padding-block: 7px; padding-inline: 10px 6px; min-height: 38px;
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: border-color .18s, background-color .18s; }
.tcard:hover { background: var(--hover); }
.tcard.sel { border-color: var(--accent-line); background: var(--accent-soft); }
.tcard.live { cursor: default; padding-inline-start: 12px; }
.tcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tcard::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; }
.tcard.tc-pulse::after { animation: tcring .45s cubic-bezier(.2,.8,.2,1); }
@keyframes tcring { 0% { opacity: .55; box-shadow: 0 0 0 0 var(--accent); } 100% { opacity: 0; box-shadow: 0 0 0 7px var(--accent); } }
.tc-check { width: 16px; height: 22px; display: grid; place-items: center; flex: none; }
.tc-check > span { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--line-2); display: grid; place-items: center;
  color: var(--accent-ink); transition: background-color .15s, border-color .15s; }
.tcard:hover .tc-check > span { border-color: var(--muted); }
.tc-check svg { width: 10px; height: 10px; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .22s ease .05s; }
.tcard.sel .tc-check > span { background: var(--accent); border-color: var(--accent); }
.tcard.sel .tc-check svg { stroke-dashoffset: 0; }
.tc-title { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; line-height: 22px; font-weight: 500; overflow-wrap: anywhere; }
.tc-star { flex: none; height: 22px; display: grid; place-items: center; color: var(--muted); }
.tc-star svg { width: 11px; height: 11px; }
.tc-del { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 0; background: none; border-radius: 6px; color: var(--muted);
  cursor: pointer; opacity: 0; transition: opacity .12s; }
.tcard:hover .tc-del, .tcard:focus-within .tc-del, .tc-del:focus-visible { opacity: 1; }
.tc-del svg { width: 14px; height: 14px; }
.tc-del:hover { background: var(--fail-soft); color: var(--fail); }
.tcard .err { flex-basis: 100%; margin: 0; }
.tcard.live .tc-title:empty::before { content: "\00a0"; }
.puff { position: fixed; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--muted); pointer-events: none; z-index: 60; }

/* the bottom: picked titles, quick asks, the composer */
.dock { position: sticky; bottom: 0; z-index: 5; width: 100%; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px;
  padding: 24px max(20px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: linear-gradient(transparent, var(--bg) 24px); }
/* picked titles, like Gmail: clear on the left, delete on the right (apart, so one is never hit for the other) */
.selbar { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-lg); padding: 6px; box-shadow: var(--shadow); }
.selbar .selnum { font-size: 13.5px; white-space: nowrap; }
.selbar .linkbtn { text-decoration: none; font-size: 12.5px; margin-left: 4px; white-space: nowrap; }
.selbar .seldel { color: var(--fail); }
.selbar .seldel:hover { background: var(--fail-soft); color: var(--fail); }
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.quick button { height: 28px; padding: 0 11px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--fg-2); font-size: 12px; cursor: pointer; }
.quick button:hover { border-color: var(--line-2); color: var(--fg); }
.composer { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; padding: 10px 10px 8px 14px; }
.composer:focus-within { border-color: var(--faint); }
.composer textarea { width: 100%; resize: none; border: 0; background: none; outline: none; min-height: 24px; max-height: 200px; padding: 2px 0; line-height: 1.5; font-size: 14.5px; }
.composer textarea::placeholder { color: var(--muted); }
.composer .crow { display: flex; align-items: center; gap: 8px; }
.composer .crow > span { flex: 1; }
.composer .send { width: 32px; height: 32px; border-radius: 9px; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; }
.composer .send svg { width: 16px; height: 16px; }
.composer .send:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
#chat-error:empty { display: none; }
.plannote { flex-wrap: wrap; }

/* toasts sit at the top here, clear of the composer */
body:has(.chatpage) .toasts { top: 66px; bottom: auto; justify-content: flex-end; }
@media (max-width: 720px) {
  /* one header on a phone: the chat's own (with its back arrow), not the app bar above it as well */
  body:has(.chatpage) .tabbar, body:has(.chatpage) .appbar { display: none; }
  .chathead { top: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px 8px; gap: 8px; }
  .chathead .rvundo { display: none; }
  .chatmenu { margin-left: auto; }
  .csteps .l { display: none; }
  .thread { padding-inline: 16px; }
  .dock { padding-inline: 16px; }
}
@media (max-width: 520px) { .tgrid { grid-template-columns: 1fr; } }
@media (hover: none) { .tcard:hover { background: none; } .tcard.sel:hover { background: var(--accent-soft); } .tc-del { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .tcard.tc-pulse::after, .spin, .shimmer, .wl-line.fresh { animation: none; } .shimmer { color: var(--fg); background: none; } .tc-check svg { transition: none; } }

/* ---------------------------------------------------------------- Home: a new clip starts here (phase 2) */
.homechat { width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px;
  padding: clamp(28px, 12vh, 120px) max(20px, env(safe-area-inset-right, 0px)) 48px max(20px, env(safe-area-inset-left, 0px)); }
.hc-start { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 40px; }
.hc-hello { font-size: clamp(26px, 3.6vw, 34px); font-weight: 600; letter-spacing: -.02em; text-align: center; text-wrap: balance; }
.hc-sub { text-align: center; margin: 0 0 10px; }
.hc-composer { position: relative; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px 12px 10px 16px;
  display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, box-shadow .15s; }
.hc-composer:focus-within { border-color: var(--faint); }
.hc-composer.over { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hc-composer textarea { width: 100%; resize: none; border: 0; background: none; outline: none; min-height: 48px; padding: 2px 0;
  font-size: 15px; line-height: 1.5; }
.hc-composer textarea::placeholder { color: var(--muted); }
.hc-file { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 0; }
.hc-file b { display: block; font-weight: 500; overflow-wrap: anywhere; }
.hc-file small { font-size: 12px; }
.hc-fileic { width: 36px; height: 36px; border-radius: 9px; background: var(--panel-2); display: grid; place-items: center; color: var(--fg-2); flex: none; }
.hc-fileic svg { width: 18px; height: 18px; }
.hc-found:empty { display: none; }
.hc-found .found { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hc-found .found svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.hc-found .found b { font-weight: 500; margin-right: 6px; }
.hc-hint { margin: 0; font-size: 12.5px; color: var(--run); }
.hc-checking { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.hc-checking .spin { width: 12px; height: 12px; }
.hc-bar { height: 4px; border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.hc-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.hc-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hc-attach { cursor: pointer; width: 32px; height: 32px; }
.hc-attach[aria-disabled="true"] { pointer-events: none; opacity: .5; }
.hc-chip { height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid var(--line); background: none; color: var(--fg-2); font-size: 12px; cursor: pointer; }
.hc-chip:hover, .hc-chip[aria-pressed="true"] { border-color: var(--line-2); color: var(--fg); }
.hc-sources { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 4px; text-decoration: none; border-radius: 11px; }
.hc-sources:hover .src { color: var(--fg); }
.hc-sources .src { font-size: 11.5px; padding: 0 8px; line-height: 22px; border-radius: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.hc-sources .src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.hc-sources .src.ok { color: var(--fg-2); }
.hc-sources .src.ok::before { background: var(--accent); }
.hc-send { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer; }
.hc-send svg { width: 17px; height: 17px; }
.hc-send:disabled { background: var(--panel-2); color: var(--muted); cursor: default; }
.hc-send .spin { border-color: color-mix(in srgb, var(--accent-ink) 30%, transparent); border-top-color: var(--accent-ink); }
#upload-error:empty { display: none; }
.hc-foot { text-align: center; margin: 2px 0 0; }
.hc-waiting { display: flex; flex-direction: column; gap: 10px; }
.homechat .checklist { max-width: none; }
@media (max-width: 720px) {
  .homechat { padding-top: 24px; }
    .hc-sources { display: none; }
}

/* ---------------------------------------------------------------- sidebar, vidIQ-style (phase 2) */
.side { gap: 14px; }
.navgroup .navlike { color: var(--fg-2); }
.navgroup .chev { width: 13px; height: 13px; margin-left: auto; color: var(--muted); transition: transform .15s; }
.navgroup .chev.open { transform: rotate(90deg); }
.navsub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 35px; }
.soonitem { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); padding: 5px 8px 5px 0; }
.soonitem em { font-style: normal; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.recent { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.recent .label { padding: 0 9px; }
.recent:has(.recentlist + .label) { overflow-y: auto; scrollbar-width: thin; }
.recent:has(.recentlist + .label) .recentlist { flex: none; overflow: visible; }
.recentlist + .label { margin-top: 10px; }
.recentlist { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; min-height: 0; scrollbar-width: thin; }
.recentlist a { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 7px; color: var(--fg-2); text-decoration: none; font-size: 13px; }
.recentlist a span.grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recentlist a:hover { background: var(--hover); color: var(--fg); }
.recentlist a[aria-current="page"] { background: var(--panel-2); color: var(--fg); }
.rdot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.rdot.run { background: var(--run); } .rdot.you { background: var(--accent); } .rdot.test { background: var(--studio); } .rdot.fail { background: var(--fail); }
.sidefoot { display: flex; flex-direction: column; gap: 6px; }
.walletmini { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; text-decoration: none; color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line); margin: 0 2px; }
.walletmini:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.walletmini .grow { display: flex; flex-direction: column; }
.walletmini b { font-size: 13px; }
.walletmini.low { box-shadow: inset 0 0 0 1px var(--fail); }
.walletmini .rail-only { display: none; width: 18px; height: 18px; color: var(--muted); }
.account { position: relative; }
.account .me { padding: 6px 8px; }
.account .me b { display: block; font-weight: 500; font-size: 13px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account .me small { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account .me .chev { width: 14px; height: 14px; color: var(--muted); }
.account-menu { gap: 6px; min-width: 272px; }
.themepick { display: flex !important; gap: 4px; }
.themepick button { flex: 1; justify-content: center; font-size: 12.5px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 7px;
  white-space: nowrap; }
.themepick button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); }
.account-menu .signout { color: var(--fail); margin-top: 4px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .walletmini { width: 44px; height: 44px; padding: 0; justify-content: center; margin: 0; border-radius: 12px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .walletmini .rail-only { display: block; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .account .me { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .side > .grow { flex: 1; }

/* ---------- connections (templates/clips/connections.html) ---------- */
.conns { display: flex; flex-direction: column; background: var(--panel); border-radius: var(--radius-lg); }
.conn { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: start; padding: 16px; }
.conn + .conn { border-top: 1px solid var(--line); }
.conn-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--hover); color: var(--fg-2); display: grid; place-items: center; }
.conn-ic svg { width: 20px; height: 20px; }
.conn-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.conn-body p { margin: 0; }
.conn-head { gap: 10px; }
.conn-head b { font-size: 14.5px; }
.conn-meta { overflow-wrap: anywhere; }
.conn-choose { margin-top: 8px; }
.conn-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.conn-paste { border: 1px solid var(--line-2); }
@media (max-width: 640px) {
  .conn { grid-template-columns: 36px 1fr; }
  .conn-ic { width: 36px; height: 36px; }
  .conn-act { grid-column: 2; justify-content: flex-start; }
}

/* ---------- Test on video, redesigned (titles 3.0, phase 5) ---------- */
.btn.xs { padding: 3px 8px; font-size: 12px; border-radius: 7px; gap: 5px; }
.btn.xs svg { width: 13px; height: 13px; }
.btn.xs kbd { margin-left: 2px; }
.tabcount { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
  background: var(--panel); color: var(--muted); font-size: 11px; font-weight: 600; }
.rvtabs button[aria-selected="true"] .tabcount { background: var(--accent-soft); color: var(--accent); }

/* the line between the video and the panel: drag it (like Claude's side panel) */
.rvbody { grid-template-columns: minmax(0, 1fr) 9px var(--rvpanel-w, 420px); }
.rvsplit { position: relative; cursor: col-resize; touch-action: none; display: grid; place-items: center; background: var(--side); outline: none;
  border-left: 1px solid var(--line); }
.rvsplit i { width: 3px; height: 44px; border-radius: 3px; background: var(--line-2); transition: background .15s, height .15s; }
.rvsplit:hover i, .rvsplit:focus-visible i, .rvsplit.dragging i { background: var(--accent); height: 64px; }
.rvsplit::after { content: ""; position: absolute; inset: 0 -5px; }
.rvpanel { border-left: 0; }
html.resizing, html.resizing * { cursor: col-resize !important; user-select: none !important; }
@media (max-width: 1240px) { .rvbody { grid-template-columns: minmax(0, 1fr) 9px var(--rvpanel-w, 360px); } }

/* versions: the title (outlined while it is on the video), where it comes from; edit and ✕ on hover */
.ohead { align-items: flex-start; gap: 10px; }
.ohead .ohint { display: block; margin-top: 2px; }
.opt.ver { padding: 10px 8px 8px 14px; gap: 4px; cursor: pointer; transition: box-shadow .15s, background .15s; }
.opt.ver:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.opt.ver.onvid { box-shadow: inset 0 0 0 2px var(--accent); }
.vtop { display: flex; align-items: flex-start; gap: 2px; min-width: 0; }
.vact { width: 28px; height: 28px; flex: none; color: var(--muted); opacity: 0; transition: opacity .12s; }
.opt.ver:hover .vact, .opt.ver:focus-within .vact, .vact:focus-visible { opacity: 1; }
@media (hover: none) { .vact { opacity: .8; } }
.opt.ver .tt { font-size: 15px; font-weight: 600; line-height: 1.35; padding-top: 2px; min-width: 0; overflow-wrap: anywhere; }
.vfoot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 22px; }
.qjump { border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--muted); padding: 3px 7px 3px 4px; margin-left: -4px;
  border-radius: 7px; display: inline-flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.qjump svg { width: 13px; height: 13px; color: var(--accent); }
.qjump:hover, .qjump:focus-visible { background: var(--hover); color: var(--fg); outline: none; }

/* Style tab: switches, colours with hex codes, sliders, font search */
.switch { position: relative; flex: none; width: 36px; height: 22px; border-radius: 11px; border: 0; padding: 0; cursor: pointer; background: var(--line-2);
  transition: background .18s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0005;
  transition: transform .18s cubic-bezier(.3, .7, .3, 1.2); }
.switch[aria-checked="true"], [aria-checked="true"] > .switch { background: var(--accent); }
.switch[aria-checked="true"] i, [aria-checked="true"] > .switch i { transform: translateX(14px); }
.switch.mini { width: 26px; height: 16px; border-radius: 8px; }
.switch.mini i { top: 2px; left: 2px; width: 12px; height: 12px; }
[aria-checked="true"] > .switch.mini i { transform: translateX(10px); }
.switchrow { display: flex; align-items: center; gap: 12px; }
.switchrow .grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.colourctl { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; }
.colourctl .swlabel { font-size: 12.5px; color: var(--fg-2); }
.hexctl { display: flex; align-items: center; gap: 6px; max-width: 168px; background: var(--panel); border-radius: 8px; padding: 3px 8px 3px 3px;
  box-shadow: inset 0 0 0 1px var(--line-2); }
.hexctl:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.hexchip { width: 24px; height: 24px; border-radius: 6px; background: var(--sw); box-shadow: inset 0 0 0 1px #ffffff2e; cursor: pointer; flex: none; position: relative; }
.hexhash { color: var(--muted); font-size: 12.5px; }
.hexinp { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font-size: 12.5px; text-transform: uppercase; outline: none; padding: 4px 0; }
.slider { display: flex; flex-direction: column; gap: 4px; }
.slider input[type="range"] { width: 100%; accent-color: var(--accent); }
.presets { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.pview { display: block; max-width: 100%; padding: 0 4px; text-align: center; line-height: 1.3; }
.pview > span { font-family: var(--tl-font), var(--font-ui); font-weight: var(--tl-weight, 800); text-transform: var(--tl-case, none); font-size: calc(15px * var(--tl-fscale, 1));
  color: var(--tl-text); background: var(--tl-box); padding: .14em .38em; border-radius: calc(var(--tl-radius, 47) * .006em);
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pview.nobox > span { background: none; padding: 0; text-shadow: 0 1px 2px #000e, 0 0 6px #0008; }
.pview.caps > span { text-transform: uppercase; }
.pview .w.hl { color: var(--tl-hl); }
.pview.nohl .w.hl { color: inherit; }
.pview.hlbox .w.hl { color: var(--tl-hl-text); background: var(--tl-hl); padding: .02em .16em; border-radius: calc(var(--tl-radius, 47) * .006em); text-shadow: none; }
.pview.paper .w.hl, .pview.paper:not(.nobox) > span { clip-path: polygon(0 6%, 9% 0, 22% 5%, 37% 1%, 52% 6%, 68% 0, 83% 4%, 100% 1%, 98% 32%, 100% 61%, 97% 100%,
  80% 95%, 64% 100%, 47% 94%, 31% 100%, 15% 95%, 2% 100%, 0 68%, 3% 37%); }

/* Script tab: paragraphs by speaker, like Sendcastle */
.script { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.scripthead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scripthead .mic { width: 17px; height: 17px; color: var(--muted); }
.scripthead .pill { font-size: 11px; line-height: 20px; padding: 0 8px; border-radius: 10px; background: var(--panel-2); color: var(--fg-2); }
.scriptbody { display: flex; flex-direction: column; gap: 11px; overflow: auto; scrollbar-width: thin; padding-right: 2px; }
.spara { display: flex; flex-direction: column; gap: 4px; }
.spara:not(.turn) { margin-top: -6px; }
.spk { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--muted); }
.spkname { font-weight: 600; color: var(--fg-2); letter-spacing: .02em; }
.spara p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-2); }
.tline.sline { display: inline; width: auto; padding: 1px 2px; margin: 0 -2px; border-radius: 4px; font: inherit; line-height: inherit; text-align: left;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tline.sline .tx { flex: none; }
.tline.sline.q { box-shadow: none; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.tline.sline.now { color: var(--fg); background: var(--accent-soft); }

/* Instagram's safe zone: faint lines where its buttons and caption begin, and a switch in the player bar */
.safezone i { background: none; box-shadow: none; border: 0 dashed rgba(255,255,255,.42); }
.safezone .sz-top { border-bottom-width: 1px; background: linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035)); }
.safezone .sz-bottom { border-top-width: 1px; background: linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035)); }
.safezone .sz-right { border-left-width: 1px; border-top-width: 1px; background: linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.035)); }
.safetoggle { border: 1px solid var(--line-2); background: var(--panel); color: var(--fg); font: inherit; font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; height: 30px; padding: 0 9px 0 10px; border-radius: var(--radius);
  transition: background .12s, border-color .12s; }
.safetoggle:hover { background: var(--hover); }
.safetoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.safetoggle[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.safetoggle > svg { width: 16px; height: 16px; }

/* the title's time on screen, trimmed on the frames like Google Flow */
.tl { gap: 6px; }
.tlhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px; }
.tlname { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--fg); }
.tlname i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.tlrange { color: var(--fg-2); }
.trim { position: relative; display: grid; grid-template-rows: 16px 52px; row-gap: 4px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.trimstrip { position: relative; }
.trimstrip .fstrip { position: absolute; inset: 0; border-radius: 9px; }
.trimstrip .fstrip span { opacity: 1; }
.trimdim { position: absolute; top: 0; bottom: 0; background: rgba(8, 9, 12, .66); backdrop-filter: grayscale(.8); -webkit-backdrop-filter: grayscale(.8); pointer-events: none; }
.trimdim.l { border-radius: 9px 0 0 9px; }
.trimdim.r { border-radius: 0 9px 9px 0; }
.trimsel { position: absolute; top: -3px; bottom: -3px; border-radius: 10px; box-shadow: inset 0 0 0 2.5px var(--accent), 0 0 0 1px #0008; min-width: 26px; }
.trim.editable .trimsel { cursor: grab; }
.trim.editable .trimsel.moving { cursor: grabbing; }
.trimtitle { position: absolute; left: 16px; right: 16px; top: 6px; font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.trimh { position: absolute; top: 0; bottom: 0; width: 13px; background: var(--accent); cursor: ew-resize; display: grid; place-items: center; z-index: 1; }
.trimh.in { left: 0; border-radius: 10px 0 0 10px; }
.trimh.out { right: 0; border-radius: 0 10px 10px 0; }
.trimh i { width: 3px; height: 18px; border-radius: 2px; background: var(--accent-ink); opacity: .55; box-shadow: 0 -8px 0 -1px transparent; }
.trimh:hover i { opacity: .9; }
.trimtag { position: absolute; top: -24px; font-size: 10.5px; padding: 2px 6px; border-radius: 6px; background: var(--fg); color: var(--bg); white-space: nowrap; pointer-events: none; }
.trimtag.in { left: 0; }
.trimtag.out { right: 0; }
.trim .ramp { top: 3px; bottom: 3px; }
.trim .playhead { top: -6px; bottom: -6px; }
.trim.grabbing { cursor: grabbing; }
@media (max-width: 960px) {
  .rvsplit { display: none; }
  .trim { grid-template-rows: 46px; row-gap: 0; }
  .trim .ruler { display: none; }
  .vfoot { padding-left: 0; }
}

/* ---------- the Videos page (titles 3.0, phase 6) ---------- */
.videogrid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
.vstage { position: sticky; top: 16px; display: flex; flex-direction: column; }
.vstage .playerwrap { max-width: 360px; }
.vlist { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vlead { margin: 0; max-width: 620px; }
.vcard { background: var(--panel); border-radius: var(--radius-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  transition: box-shadow .15s; }
.vcard:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.vcard.on { box-shadow: inset 0 0 0 2px var(--accent); }
.vcard.win { box-shadow: inset 0 0 0 2px var(--accent); }
.vctop { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.vthumb { position: relative; flex: none; width: 82px; aspect-ratio: 9 / 16; border-radius: 9px; overflow: hidden; border: 0; padding: 0; cursor: pointer;
  background: #000 center / cover no-repeat; container-type: inline-size; }
.vthumb .overlay.mini { z-index: 1; }
.vplay { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; transition: opacity .15s; background: rgba(0,0,0,.25); z-index: 2; }
.vplay svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 3px #0009); }
.vthumb:hover .vplay, .vthumb:focus-visible .vplay { opacity: 1; }
.vcbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vcbody .wintag { position: static; }
.vctitle { font-size: 15.5px; line-height: 1.35; overflow-wrap: anywhere; }
.vctitle .hl { color: var(--tl-hl, var(--accent)); }
.vcbody .export { align-self: flex-start; }
.vcpub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--line); }
.pubseg { display: inline-grid; grid-template-columns: repeat(3, auto); }
.pubseg .segbtn { cursor: pointer; padding: 5px 12px; }
.pubseg .segbtn:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent); }
.sendbox { gap: 12px; }
.pubhelp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pubhelp > div { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 900px) {
  .videogrid { grid-template-columns: minmax(0, 1fr); }
  .vstage { position: static; }
  .vstage .playerwrap { max-width: 300px; margin-inline: auto; }
  .pubhelp { grid-template-columns: 1fr; }
}

/* ---------- Settings, like Claude's (titles 3.0, phase 7) ---------- */
.setpage { max-width: 980px; }
.setpage > h1 { margin: 0; }
.setgrid { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 32px; align-items: start; }
.setnav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.setnav a { padding: 8px 12px; border-radius: 9px; color: var(--fg-2); text-decoration: none; font-size: 14px; }
.setnav a:hover { background: var(--hover); color: var(--fg); }
.setnav a[aria-current="page"] { background: var(--panel); color: var(--fg); font-weight: 600; }
.setbody { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.setsec { display: flex; flex-direction: column; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.setsec:last-child { border-bottom: 0; }
.setsec h2 { margin: 0; font-size: 16px; font-weight: 600; }
.setrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.setrow .grow, .setrow label.grow { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.setrow .inp { min-width: 220px; }
.themecards { display: flex; gap: 12px; flex-wrap: wrap; }
.themecard { border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: center; color: var(--fg-2); font: inherit; padding: 0; }
.themecard[aria-pressed="true"] { color: var(--fg); font-weight: 600; }
.tprev { width: 112px; height: 70px; border-radius: 10px; display: flex; flex-direction: column; gap: 6px; padding: 10px; box-shadow: inset 0 0 0 1px var(--line-2); }
.themecard[aria-pressed="true"] .tprev { box-shadow: 0 0 0 2px var(--accent); }
.tprev i { height: 7px; border-radius: 4px; }
.tprev i:first-child { width: 60%; }
.tprev i:nth-child(2) { width: 85%; }
.tprev i:last-child { width: 40%; }
.tprev.dark { background: #131312; } .tprev.dark i { background: #383834; }
.tprev.light { background: #f7f6f3; } .tprev.light i { background: #d4d1c9; }
.tprev.system { background: linear-gradient(135deg, #131312 0 50%, #f7f6f3 50% 100%); } .tprev.system i { background: #8b8a84; }
.usagerow { display: flex; flex-direction: column; gap: 8px; }
.usagerow .grow { display: flex; flex-direction: column; gap: 2px; }
.ubar { height: 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ubar i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .4s; }
.ubar.warm i { background: var(--run); }
.ubar.hot i { background: var(--fail); }
.menulink { text-decoration: none; color: var(--fg); }
@media (max-width: 760px) {
  .setgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .setnav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .setnav a { white-space: nowrap; }
}

/* ---------------------------------------------------------------- Studio: writing styles */
.stylegrid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.stylegrid .notes-editor textarea { width: 100%; min-height: 420px; height: auto; resize: vertical; font-size: 12.5px; line-height: 1.55; padding: 10px 12px; }
.stylenew { gap: 10px; flex-wrap: wrap; }
.plist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plist > li { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.plist > li:first-child { border-top: 0; }
.plist .grow { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.plist small { font-size: 12px; overflow-wrap: anywhere; }
.plist .av { width: 28px; height: 28px; font-size: 12px; flex: none; }
.stylechips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.stylechip { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 9px; border-radius: 12px; background: var(--panel-2);
  border: 1px solid var(--line-2); font-size: 12px; }
.stylechip.first { border-color: var(--accent); }
.stylechip a { color: var(--fg); text-decoration: none; }
.stylechip button { width: 20px; height: 20px; border: 0; background: none; color: var(--muted); border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.stylechip button:hover { background: var(--fail-soft); color: var(--fail); }
.stylechip button svg { width: 11px; height: 11px; }
.inp.sm { height: 30px; padding: 0 8px; font-size: 12.5px; }
@media (max-width: 1000px) { .stylegrid { grid-template-columns: 1fr; } }

/* Home: which style a clip is written in (only for people with more than one) */
.hc-style { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 10px; border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--panel-2); color: var(--fg-2); font-size: 12px; }
.hc-style svg { width: 13px; height: 13px; flex: none; }
.hc-style select { border: 0; background: none; color: var(--fg); font: inherit; font-weight: 500; padding: 0 2px; cursor: pointer; outline: none; max-width: 160px; }
.hc-style:focus-within { border-color: var(--faint); }

/* ---------------------------------------------------------------- Studio, simpler (20/10/2026)
   Hairline edges instead of filled blocks, one heading style, sentence-case labels, quiet tables. Scoped to
   the studio (.shell.studio) so the client app keeps its look. */
.studio .screen { max-width: 1120px; gap: 20px; }
.phead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.phead h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.phead .psub { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; max-width: 72ch; }
.phead .wslogo, .phead .logo { flex: none; }
.phead .btn svg { width: 14px; height: 14px; }
.studio .crumbs { margin-bottom: -10px; }
.studio .card, .studio .tile, .studio .empty { border: 1px solid var(--edge-strong); }
.phead .clogo { width: 40px; height: 40px; border-radius: 10px; font-size: 14px; }
.studio .card.row { flex-direction: row; align-items: center; }
.studio .card.flush { padding: 0; gap: 0; }
.studio .card.flush .tw { padding: 0 6px 4px; }
.cardhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.card.flush > .cardhead { padding: 14px 16px 8px; }
.cardpad { padding: 4px 16px 16px; margin: 0; }
.sect { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.005em; color: var(--fg); }
.cardhead .mut.xs { display: block; margin-top: 2px; }
.studio .label { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 500; margin: 0; }
.studio .tbl th { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.studio .tbl tr.gone { opacity: .55; }
.studio .tbl td.rowacts { text-align: right; white-space: nowrap; }
.studio .tbl td.rowacts .inline-form { display: inline; }
.studio .tile b .of { color: var(--muted); font-weight: 500; font-size: 15px; }
.studio .tabs { gap: 22px; }
.studio .tabs a { font-size: 14px; padding: 9px 0; }
.studio fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; }
.studio .readonly-note { border: 1px solid var(--edge-strong); }
.limitrow { display: flex; font-size: 13.5px; }
.who { display: flex; align-items: center; gap: 10px; }
.who .av { width: 28px; height: 28px; font-size: 12px; flex: none; }
.who small { display: block; font-size: 12px; overflow-wrap: anywhere; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
  background: var(--panel-2); color: var(--fg-2); border: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.pill.studio { background: var(--studio-soft); color: var(--studio); border-color: transparent; }
.pill.fail { background: var(--fail-soft); color: var(--fail); border-color: transparent; }
.pill.ok { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
button.pill.add { cursor: pointer; border-style: dashed; background: none; color: var(--muted); }
button.pill.add:hover { color: var(--fg); border-color: var(--line-2); }
.stylegive { display: inline-flex; }
.studio .feed.card { max-width: none; gap: 16px; }
details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg); transition: transform .15s; align-self: center; margin-right: 2px; }
details.fold[open] > summary::before { transform: rotate(45deg); }
details.fold > summary:hover .sect { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.studio .side .nav a { font-size: 13.5px; }
.phead > .grow { min-width: 0; flex: 1 1 240px; }
@media (max-width: 720px) {
  .phead h1 { font-size: 20px; }
  .studio .tbl td.rowacts { white-space: normal; }
  .studio .tbl td.rowacts .btn { padding-inline: 6px; }
  .studio .card.row { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------- the client sidebar, like Claude's (phase A)
   The 313 mark and the close button on top; New clip, Search, Clips, Results; Recent with a menu on each;
   one account menu at the bottom. */
.sidehead { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 2px 9px; min-height: 34px; }
.sidehead .mark { color: var(--fg); }
.sidehead .mark .logo313 { color: var(--fg); }
.sidehead .collapse { color: var(--muted); }
.navnew { color: var(--fg) !important; font-weight: 500; }
.plusdot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-left: -2px;
  background: var(--accent); color: var(--accent-ink); }
.plusdot svg { width: 12px !important; height: 12px !important; color: inherit !important; }
.navnew:hover .plusdot { filter: brightness(1.08); }
.ritem { position: relative; display: flex; align-items: center; border-radius: 7px; }
.ritem > a { flex: 1; min-width: 0; padding-right: 30px !important; }
.ritem:hover > a, .ritem.ctx-on > a { background: var(--hover); color: var(--fg); }
.ritem.on > a { background: var(--nav-on); color: var(--fg); }
.rmore { position: absolute; right: 3px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; opacity: 0; }
.rmore svg { width: 14px; height: 14px; }
.ritem:hover .rmore, .ritem.ctx-on .rmore, .rmore:focus-visible { opacity: 1; }
.rmore:hover { color: var(--fg); background: var(--panel-2); }
@media (hover: none) { .rmore { opacity: .7; } }
.av { overflow: hidden; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account .me .av { width: 28px; height: 28px; font-size: 12px; }
.account-menu { padding: 6px; gap: 1px; min-width: 248px; }
.account-menu .menuhead { font-size: 12.5px; color: var(--muted); padding: 6px 10px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu hr, .ctxmenu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.menu .mi { width: 16px; height: 16px; flex: none; color: var(--fg-2); }
.menu a .grow, .menu button .grow { text-align: left; }
.menusub { position: relative; }
.menusub > button .chev { width: 13px; height: 13px; color: var(--muted); }
.menu.side-menu { left: calc(100% + 6px); right: auto; top: -6px; bottom: auto; min-width: 150px; }
.side-menu .tick { width: 14px; height: 14px; color: var(--accent); }
.ctxmenu { position: fixed; left: 0; top: 0; right: auto; min-width: 210px; z-index: 90; }
.ctxmenu[hidden] { display: none; }
.ctxmenu [data-act="pin"] .mi-unpin, .ctxmenu [data-act="pin"].is-pinned .mi-pin { display: none; }
.ctxmenu [data-act="pin"].is-pinned .mi-unpin { display: block; }
.menu kbd { font-family: var(--font-mono); font-size: 11px; color: var(--muted); border: 0; background: none; padding: 0; }
.menu .danger, .menu .danger .mi { color: var(--fail); }
.menu .danger:hover { background: var(--fail-soft); }
.menu [role=menuitem]:focus-visible { outline: none; background: var(--hover); }
dialog.dlg { border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--fg); padding: 20px; width: min(420px, 92vw);
  box-shadow: var(--shadow); }
dialog.dlg::backdrop { background: #0008; backdrop-filter: blur(2px); }
dialog.dlg h2 { margin: 0; font-size: 16px; font-weight: 600; }
.dlgacts { justify-content: flex-end; gap: 8px; }
.avbig .av { width: 40px; height: 40px; font-size: 15px; }
.mehead { display: flex; align-items: center; gap: 12px; padding: 4px 0 6px; }
.mehead .av { width: 44px; height: 44px; font-size: 17px; }
.mehead b { display: block; font-size: 16px; } .mehead small { display: block; font-size: 13px; }
.morelist .mi { width: 18px; height: 18px; color: var(--muted); }
.tabbar .av { width: 20px; height: 20px; font-size: 9.5px; }  /* the icons' size, so every label sits on one line */
.appbar .mark { color: var(--fg); display: flex; }
.appbar .mark .logo313 { color: var(--fg); }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .sidehead { justify-content: center; padding: 2px 0; }
:is(.shell.rail, .nav-mini .shell[data-collapsible]) .navnew { justify-content: center; }
.menu form.side-menu { display: flex; position: absolute; }
.menu form.side-menu[style*="display: none"] { display: none; }

/* ---------------------------------------------------------------- the Videos page, one screen (20/10/2026)
   Player left (as tall as the window allows), the videos as compact rows right, what goes out with them, and
   one Send button pinned at the bottom of the right column. Scrolls only on small screens. */
.vp { display: grid; grid-template-columns: auto minmax(340px, 500px); justify-content: center; gap: 40px; align-items: start;
  padding: 24px 32px; min-height: 100dvh; box-sizing: border-box; }
.vp-stage { display: flex; flex-direction: column; min-width: 0; position: sticky; top: 24px; }
.vp-stage .vid { width: calc((100dvh - 110px) * 9 / 16); max-width: 46vw; margin: 0; }
.vp-side { max-height: calc(100dvh - 40px); display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-top: 4px; }
.vp-head h1 { margin: 6px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.vp-head .psub { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.vp-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.vp-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: auto; flex: none; max-height: 44dvh; background: var(--panel); }
.vrow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 10px 11px 16px;
  border-top: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.vrow:first-child { border-top: 0; }
.vrow:hover { background: var(--hover); }
.vrow.on { background: var(--hover); }
.vrow.on::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.vrthumb { position: relative; width: 34px; aspect-ratio: 9 / 16; border-radius: 6px; overflow: hidden; border: 0; padding: 0; cursor: pointer;
  background: #000 center / cover no-repeat; container-type: inline-size; }
.vrtext { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vrtitle { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vrtitle .w.hl { color: inherit; }
.seg.mini { padding: 2px; gap: 1px; flex-wrap: nowrap; }
.seg.mini .segbtn { padding: 4px 9px; font-size: 12px; }
.export.compact { display: flex; align-items: center; justify-content: center; width: 30px; }
.export.compact .dl { width: 30px; height: 30px; }
.export.compact .dl svg { width: 16px; height: 16px; }
.export.compact .dl.ready { color: var(--accent); }
.ring { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), var(--line-2) 0);
  -webkit-mask: radial-gradient(circle, transparent 5.5px, #000 6px); mask: radial-gradient(circle, transparent 5.5px, #000 6px); }
.vp-details { display: flex; flex-direction: column; gap: 14px; overflow: auto; min-height: 0; padding-right: 2px; }
.vp-details textarea { resize: vertical; min-height: 64px; }
.vp-two { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.vp-toggles .srow { padding: 8px 0; font-size: 13px; border-bottom: 0; border-top: 1px solid var(--line); }
.vp-note summary { cursor: pointer; color: var(--muted); list-style: none; }
.vp-note summary::-webkit-details-marker { display: none; }
.vp-note summary:hover { color: var(--fg-2); }
.vp-note textarea { margin-top: 8px; }
.vp-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; overflow: auto; }
.vp-summary dt { color: var(--muted); } .vp-summary dd { margin: 0; overflow-wrap: anywhere; }
.vp-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .vp { grid-template-columns: minmax(0, 1fr); height: auto; padding: 12px 16px 96px; gap: 16px; }
  .vp-stage, .vp-side { height: auto; }
  .vp-stage .vid { width: min(100%, calc(58dvh * 9 / 16)); margin-inline: auto; }
  .vp-list { max-height: none; }
  .vp-foot { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); background: var(--bg); padding-bottom: 10px; }
  .vp-two { grid-template-columns: 1fr; }
}
.pqdetails { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12.5px; }
.pqdetails dt { color: var(--muted); }
.pqdetails dd { margin: 0; display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.soonic { display: grid; place-items: center; width: 30px; height: 30px; color: var(--faint); }
.soonic svg { width: 16px; height: 16px; }

/* ---------- public legal pages (templates/core/_legal.html): plain, readable, no app chrome ---------- */
.legalpage { min-height: 100dvh; display: flex; flex-direction: column; }
.legalhead { display: flex; align-items: center; gap: 20px; justify-content: space-between; flex-wrap: wrap; padding: 18px max(20px, calc(50% - 360px)); border-bottom: 1px solid var(--line); }
.legalhead a { color: var(--fg); }
.legalhead nav { display: flex; gap: 4px; flex-wrap: wrap; }
.legalhead nav a { font-size: 13.5px; color: var(--fg-2); text-decoration: none; padding: 5px 10px; border-radius: 8px; }
.legalhead nav a:hover { background: var(--hover); color: var(--fg); }
.legalhead nav a[aria-current="page"] { background: var(--panel-2); color: var(--fg); }
.legal { width: 100%; max-width: 760px; margin: 0 auto; padding: 32px 20px 56px; line-height: 1.7; }
.legal h1 { font-size: 28px; margin: 0 0 4px; }
.legal h2 { font-size: 17px; margin: 30px 0 8px; }
.legal p, .legal li { color: var(--fg-2); font-size: 15px; }
.legal ul { padding-left: 20px; margin: 0 0 12px; }
.legal li { margin: 4px 0; }
.legal b { color: var(--fg); }
.legal a, .legalfoot a { color: var(--accent); }
.legalfoot { text-align: center; padding: 18px 20px 28px; border-top: 1px solid var(--line); }

/* Home: "Connect your accounts", offered once to the owner (apps/workspaces/onboarding.py connect_card) */
.connectcard { gap: 12px; }
.connectcard h2 { font-size: 15px; margin: 0; }
.ccrows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ccrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.ccrow + .ccrow { border-top: 1px solid var(--line); }
.ccrow .grow { display: flex; flex-direction: column; min-width: 0; }
.ccrow .conn-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--panel-2); color: var(--fg-2); }
.ccrow .conn-ic svg { width: 18px; height: 18px; }

/* ================================================================ motion
   Enough that things arrive instead of popping, never so much that it gets in the way. Content swapped in by
   htmx eases in from static/js/motion.js; here: what opens (menus, tabs, dialogs, sheets), the transcript, and
   icons that move a little under the pointer. All of it goes quiet with prefers-reduced-motion (see the
   global rule near the top). */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes fadein { from { opacity: 0; } }
@keyframes popin { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes popup { from { transform: translateY(4px) scale(.98); } }

/* things that open: an element shown again after display:none restarts its animation, so this runs each time */
.ctxmenu:not([hidden]) { animation: popin .14s cubic-bezier(.2, .8, .2, 1); transform-origin: top left; }
.account-menu { animation: popup .16s cubic-bezier(.2, .8, .2, 1); transform-origin: bottom center; }
.menu.side-menu { animation: popin .14s cubic-bezier(.2, .8, .2, 1); transform-origin: top left; }
.fcpop { animation: popin .14s cubic-bezier(.2, .8, .2, 1); transform-origin: top center; }
.rvtab, .stabbody { animation: fadein .18s ease-out; }
dialog.dlg[open] { animation: popin .18s cubic-bezier(.2, .8, .2, 1); }
dialog.dlg[open]::backdrop { animation: fadein .18s ease-out; }
.sheetwrap { animation: fadein .16s ease-out; }
.sheetwrap .sheet { animation: rise .24s cubic-bezier(.2, .8, .2, 1); }
.worklog.done[open] .wl { animation: fadein .2s ease-out; }

/* the transcript: eases in on the page; right after the clip got ready it arrives line by line */
.txcard { animation: rise .32s cubic-bezier(.2, .8, .2, 1) both; }
.fresh .worklog.done { animation: fadein .3s ease-out both; }
.fresh .txcard { animation-duration: .45s; animation-delay: .12s; }
.fresh .txbody .spara { animation: rise .4s cubic-bezier(.2, .8, .2, 1) both; }
.fresh .txbody .spara:nth-child(1) { animation-delay: .28s; }
.fresh .txbody .spara:nth-child(2) { animation-delay: .36s; }
.fresh .txbody .spara:nth-child(3) { animation-delay: .44s; }
.fresh .txbody .spara:nth-child(n+4) { animation-delay: .52s; }

/* icons that move under the pointer (Claude-like): small, quick, and only where there is a pointer */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ai, .ai *, .mi, .mi * { transform-box: fill-box; transform-origin: center; }
  .ai, .ai path, .ai rect, .ai g, .mi, .mi path, .mi g { transition: transform .32s cubic-bezier(.34, 1.4, .64, 1); }
  /* the control under the pointer (or keyboard focus) moves its icon */
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-plus, :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-x { transform: rotate(90deg); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-search { animation: ai-wiggle .45s ease-in-out; }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-panel path { transform: translateX(-1.5px); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-clips rect:first-child { transform: translateY(1px); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-clips rect:last-child { transform: translateY(-1px); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-bars .b1 { animation: ai-bar .5s ease-in-out; }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-bars .b2 { animation: ai-bar .5s .06s ease-in-out; }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-bars .b3 { animation: ai-bar .5s .12s ease-in-out; }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-up { animation: ai-lift .42s ease-in-out; }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-left { transform: translateX(-2px); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-right { transform: translateX(2px); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-copy rect { transform: translate(-1px, -1px); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-undo { transform: rotate(-22deg); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-redo { transform: rotate(22deg); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-share { animation: ai-pop .4s ease-in-out; }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-pen, :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .mi-rename, :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .mi-help { animation: ai-wiggle .45s ease-in-out; }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-clip { transform: rotate(-14deg); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .ai-play { transform: translateX(1.5px); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) :is(.ai-trash, .mi-delete) .lid { transform: translateY(-1.2px) rotate(-14deg); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .mi-settings { transform: rotate(90deg); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .mi-theme { transform: rotate(180deg); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .mi-usage .ndl { transform: rotate(-60deg); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .mi-logout .arw { transform: translateX(2px); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .mi-open .arw { transform: translate(1.5px, -1.5px); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .mi-link { transform: rotate(-20deg); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) .mi-switch { transform: scaleX(-1); }
  :is(a, button, label, summary, [role=menuitem]):not(:disabled):is(:hover, :focus-visible) :is(.mi-pin, .mi-unpin) { transform: rotate(-18deg); }
  :is(.ai-trash, .mi-delete) .lid { transform-origin: 10% 100%; }
  .mi-usage .ndl { transform-origin: 0 100%; }
  .ai-bars path { transform-origin: bottom; }
  .ai-pen, .mi-rename { transform-origin: 20% 80%; }
}
@keyframes ai-wiggle { 30% { transform: rotate(-12deg); } 65% { transform: rotate(8deg); } }
@keyframes ai-bar { 45% { transform: scaleY(.55); } }
@keyframes ai-lift { 45% { transform: translateY(-2.5px); } }
@keyframes ai-pop { 45% { transform: scale(1.14) rotate(-6deg); } }

/* ================================================================ Tools (templates/tools/) */
.toolgrid { display: grid; gap: 10px; }
.toolcard { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius-lg); background: var(--panel);
  border: 1px solid var(--edge); color: var(--fg); text-decoration: none; transition: border-color .15s, background .15s; }
.toolcard:hover { border-color: var(--accent-line); background: var(--hover); }
.toolcard .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.toolcard b { font-size: 15px; font-weight: 600; }
.toolcard .chev { width: 16px; height: 16px; color: var(--muted); flex: none; }
.toolic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.toolic svg { width: 22px; height: 22px; }
.trimdrop { min-height: 220px; justify-content: center; }
.trimdrop .dztext .linkbtn { color: var(--accent); }
.upbar { display: block; width: min(320px, 100%); height: 6px; border-radius: 4px; background: var(--panel); overflow: hidden; }
.upbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s ease; }
.trimrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--edge);
  color: var(--fg); text-decoration: none; }
.trimrow:hover { background: var(--hover); }
.trimrow .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trimrow b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trimrow > svg { width: 15px; height: 15px; color: var(--muted); flex: none; }

/* the editor: the review page's layout; the player takes the video's own shape (--ar = width / height) */
.trimbody { grid-template-columns: minmax(0, 1fr) 340px; }
.trimpage .pro .vidbox .vid { aspect-ratio: var(--ar, .5625); height: min(100cqh, 100cqw / var(--ar, .5625)); }
.trimpanel { padding: 16px 14px; gap: 18px; overflow-y: auto; }
.trimset { display: flex; flex-direction: column; gap: 12px; }
.trimpts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trimpt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.trimpt:hover { border-color: var(--accent-line); background: var(--hover); }
.trimpt b { font-size: 16px; font-weight: 600; }
.trimpt kbd { font-family: var(--font-mono); font-size: 10.5px; padding: 0 4px; border-radius: 4px; background: var(--panel-2); }
.trimlen b { font-size: 14px; }
@media (hover: none) { .trimpt kbd { display: none; } }
@media (max-width: 720px) { .trimmeta { display: none; } }
.trimgo { justify-content: center; padding-block: 11px; font-size: 14px; }
.trimgo svg { width: 17px; height: 17px; }
.trimcuts { display: flex; flex-direction: column; gap: 8px; }
/* no entrance of its own: the list is swapped in again every second while a cut is made (motion.js eases in
   the list when a cut is asked for, and leaves the polling alone) */
.trimcut { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.trimcut .upbar { width: auto; }
.trimcut .btn { align-self: flex-start; }
.trimwait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 40px 16px; }
.trimwait b { font-size: 16px; }
@media (max-width: 1240px) { .trimbody { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 960px) {
  .trimpanel { border-top: 1px solid var(--line); padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .trimpage .pro .vidbox { height: min(62vh, 100vw / var(--ar, .5625)); }
}

/* the scissors close under the pointer, the download arrow drops, the Tools wrench turns */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ai-cut .blade.a { transform-origin: 0% 0%; }
  .ai-cut .blade.b { transform-origin: 0% 100%; }
  :is(a, button):not(:disabled):is(:hover, :focus-visible) .ai-cut .blade.a { animation: ai-snip-a .45s ease-in-out; }
  :is(a, button):not(:disabled):is(:hover, :focus-visible) .ai-cut .blade.b { animation: ai-snip-b .45s ease-in-out; }
  :is(a, button):not(:disabled):is(:hover, :focus-visible) .ai-down { animation: ai-drop .42s ease-in-out; }
  :is(a, button):not(:disabled):is(:hover, :focus-visible) .ai-tools { transform: rotate(-20deg); }
}
@keyframes ai-snip-a { 45% { transform: rotate(14deg); } }
@keyframes ai-snip-b { 45% { transform: rotate(-14deg); } }
@keyframes ai-drop { 45% { transform: translateY(2px); } }

/* on the way to a sign-in page (templates/components/leaving.html) */
.leaving { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--fg-2); }
.leaving p { margin: 0; }

/* ================================================================ a pasted script instead of a video */
.hc-mode { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 14px; border: 1px solid var(--line-2);
  background: none; color: var(--fg-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.hc-mode svg { width: 14px; height: 14px; }
.hc-mode:hover { color: var(--fg); border-color: var(--faint); }
.hc-mode[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.hc-mode:disabled { opacity: .45; cursor: default; }
.hc-note { width: 100%; border: 0; border-top: 1px solid var(--line); background: none; outline: none; color: var(--fg); font: inherit; font-size: 13.5px; padding: 8px 0 2px; }
.hc-note::placeholder { color: var(--muted); }
.hc-words { color: var(--muted); font-variant-numeric: tabular-nums; }
.hc-words.bad { color: var(--fail); }
.hc-suggest { color: var(--fg-2); }
.hc-suggest .linkbtn { color: var(--accent); margin-left: 4px; }
.linkmsg .ic .ai-doc, .txcard .mic svg { width: 15px; height: 15px; }
.txcard span.mic { display: inline-grid; place-items: center; }
.addvideo { gap: 8px; }
.addvideo .row { gap: 12px; align-items: center; }
.addvideo .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.addvideo b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.addic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); }
.addic svg { width: 18px; height: 18px; }
.addvideo .upbar { width: 100%; }
.addvideo label.btn { cursor: pointer; }
.addvideo label.btn[aria-disabled="true"], .selbar label.btn[aria-disabled="true"] { pointer-events: none; opacity: .55; }
.selbar label.btn { cursor: pointer; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ai-doc .ln { transition: transform .3s cubic-bezier(.34, 1.4, .64, 1); transform-box: fill-box; transform-origin: left center; }
  :is(a, button, label):not(:disabled):is(:hover, :focus-visible) .ai-doc .ln { transform: scaleX(.6); }
}