/* RudraCut panel UI · every value comes from tokens.css
   Sections: base · components (icon, buttons, segmented, toggle, slider, fields, card, fold, chips, badge, progress,
   skeleton, menu, modal, toast, stepper, errors) · app chrome · Auto Cut · Reel Arranger · Caption Studio · responsive
   Motion: only transform and opacity are animated (durations/easing from tokens; 0 with reduced motion). */

/* ================================================================ base */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: var(--fw) var(--fs-3)/var(--lh) var(--font); }
html { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body { padding: var(--pad) var(--pad) 0; min-height: 100vh; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
h3 { font-size: var(--fs-5); font-weight: var(--fw-b); margin: 0; }
b, strong { font-weight: var(--fw-b); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--line-3); }
::-webkit-scrollbar-track { background: transparent; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small, small { font-size: var(--fs-1); }
small { color: var(--muted); }
code { background: var(--surface-2); padding: 0 var(--sp-1); border-radius: var(--r-ctl); font-family: var(--font-mono); font-size: var(--fs-1); }
kbd { display: inline-block; min-width: 18px; text-align: center; background: var(--surface-2); border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 var(--sp-1); font: var(--fw-b) var(--fs-1)/1.5 var(--font); color: var(--text); }
@keyframes rc-spin { to { transform: rotate(360deg); } }
@keyframes rc-pulse { to { opacity: .35; } }
@keyframes rc-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes rc-pop-in { from { opacity: 0; transform: scale(.98); } }
@keyframes rc-fade-in { from { opacity: 0; } }
@keyframes rc-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@keyframes rc-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ================================================================ components */
/* icon */
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.i.lg { width: 20px; height: 20px; }

/* buttons: primary (one per screen) · ghost (secondary) · danger · icon */
button.primary, button.ghost, button.danger, button.icon, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--hit); border-radius: var(--r-ctl);
  cursor: pointer; white-space: nowrap; font-weight: var(--fw-b); font-size: var(--fs-3);
  transition: transform var(--dur-fast) var(--ease-enter), opacity var(--dur-fast) var(--ease-enter); }
button.primary:active, button.ghost:active, button.danger:active, button.icon:active, .btn:active { transform: scale(var(--press-scale)); }
button.primary { width: 100%; border: 0; background: var(--accent-grad); color: var(--on-accent); padding: 0 var(--sp-4); box-shadow: var(--shadow-accent); }
button.primary:hover { filter: brightness(1.06); }
button.primary .i { stroke-width: 2; }
button.primary:disabled { filter: saturate(.25) brightness(.65); cursor: default; box-shadow: none; }
button.big { min-height: 40px; font-size: var(--fs-4); }
button.ghost { width: 100%; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); padding: 0 var(--sp-3); font-weight: var(--fw); }
button.ghost:hover { background: var(--surface-3); border-color: var(--line-3); }
button.danger { border: 1px solid var(--bad-line); background: var(--bad-soft); color: var(--bad-text); padding: 0 var(--sp-4); }
button.danger:hover { border-color: var(--bad); }
button.icon { border: 1px solid transparent; background: transparent; color: var(--text-2); padding: 0; min-width: var(--hit); }
button.icon:hover { background: var(--hover); color: var(--text); border-color: var(--line); }
button.icon[aria-pressed="true"] { color: var(--accent); }
button.round { border-radius: var(--r-pill); width: var(--hit); height: var(--hit); flex: none; }
.btn.sm, button.sm { min-height: var(--hit-sm); padding: 0 var(--sp-2); font-size: var(--fs-2); width: auto; }
button.ghost:disabled, button.icon:disabled, .btn:disabled { opacity: .4; cursor: default; }
button.cancel { margin: 0 0 var(--sp-2); }
.btnrow { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.btnrow .ghost { flex: 0 1 auto; width: auto; }
.btnrow .primary { flex: 1 1 160px; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-2); align-items: center; }
.toolbar input { flex: 1 1 90px; min-width: 0; }
.toolbar .ghost { width: auto; flex: 0 1 auto; padding: 0 var(--sp-2); }
.toolbar .spacer { flex: 1 1 0; }

/* segmented control (+ sliding indicator added by ui.js) */
.seg { position: relative; display: flex; background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-card); padding: 3px; gap: 2px; min-width: 0; isolation: isolate; }
.seg > button { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: var(--hit-sm); border: 0; background: transparent; color: var(--muted); padding: 0 var(--sp-2);
  border-radius: 7px; cursor: pointer; font-weight: var(--fw-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); transition: transform var(--dur-fast) var(--ease-enter); }
.seg > button:hover { color: var(--text); }
.seg > button:active { transform: scale(var(--press-scale)); }
.seg > button.active { color: var(--text); background: var(--surface-2); box-shadow: var(--shadow-1); }
.seg.has-ind > button.active { background: transparent; box-shadow: none; }
.seg > .seg-ind { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 7px; background: var(--surface-2); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease-enter); pointer-events: none; }
.seg.small > button { min-height: var(--hit-sm); font-size: var(--fs-2); padding: 0 var(--sp-1); }

/* toggle */
input.switch { appearance: none; -webkit-appearance: none; width: 36px; height: 20px; flex: none; border-radius: var(--r-pill); background: var(--surface-3);
  position: relative; cursor: pointer; margin: 0; box-shadow: inset 0 0 0 1px var(--line-2); }
input.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease-enter); }
input.switch:checked { background: var(--accent); box-shadow: none; }
input.switch:checked::after { transform: translateX(16px); }
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switches { display: flex; flex-direction: column; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 44px; padding: var(--sp-1) 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.sw-row:last-child { border-bottom: 0; }
.sw-row > span { display: flex; flex-direction: column; color: var(--text); min-width: 0; }
.sw-row > span b { font-weight: var(--fw-b); }
.sw-row small { font-size: var(--fs-1); }
.sw-row.slim { min-height: var(--hit); padding: 2px 0; border: 0; }
.sw-row.slim > span { color: var(--text-2); display: block; }
.chk { display: inline-flex; gap: var(--sp-2); align-items: center; color: var(--muted); cursor: pointer; white-space: nowrap; min-height: var(--hit-sm); }
.chk input { margin: 0; }
body.level .vad-only, body.vad .level-only { display: none; }

/* fields */
label { color: var(--muted); }
label b { color: var(--text); font-weight: var(--fw-b); font-variant-numeric: tabular-nums; }
select, input[type=text], textarea { width: 100%; min-width: 0; min-height: var(--hit); background: var(--field); border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  padding: 0 var(--sp-2); outline: none; }
textarea { padding: var(--sp-2) var(--sp-2); resize: vertical; line-height: 1.4; }
select { cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 28px; background-color: var(--field);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select option { background: var(--surface-2); color: var(--text); }
select:hover, input[type=text]:hover, textarea:hover { border-color: var(--line-3); }
select:focus, input[type=text]:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--ring); }
::placeholder { color: var(--dim); }
/* slider: saffron fill up to the value (--fill is kept in sync by ui.js), round thumb */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 20px; cursor: pointer; margin: 0; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--accent) 0, var(--accent) var(--fill, 0%), var(--surface-3) var(--fill, 0%), var(--surface-3) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--white);
  box-shadow: 0 0 0 1px var(--knob-ring), var(--shadow-1); transition: transform var(--dur-fast) var(--ease-enter); }
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.25); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); }
/* checkbox (non-switch): drawn here because CEP's Chromium has no accent-color */
input[type=checkbox]:not(.switch) { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; flex: none; margin: 0; border: 1.5px solid var(--line-3); border-radius: 4px;
  background: var(--field); display: inline-grid; place-content: center; cursor: pointer; }
input[type=checkbox]:not(.switch):checked { background: var(--accent); border-color: transparent; }
input[type=checkbox]:not(.switch):checked::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--on-accent); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
input[type=checkbox]:not(.switch):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type=color] { width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; flex: none; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 2px solid var(--line-3); border-radius: 50%; }
select.tiny { width: auto; min-height: var(--hit-sm); padding: 0 22px 0 var(--sp-2); font-size: var(--fs-2); background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%; }
select.compact { min-height: var(--hit); }
.row { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); min-width: 0; }
.row:last-child { margin-bottom: 0; }
.inline-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); min-width: 0; }
.inline-row:first-child { margin-top: 0; }
.inline-row > label { width: 92px; flex: none; }
.inline-row > .seg, .inline-row > select { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }

/* card */
.block { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3); margin-bottom: var(--gap); min-width: 0; box-shadow: var(--shadow-1); }
.block h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: var(--fw-b); display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.block h4 b { color: var(--text); text-transform: none; letter-spacing: 0; margin-left: var(--sp-1); }

/* fold (details): content fades/slides in, nothing animates height */
.fold > summary { cursor: pointer; list-style: none; font-weight: var(--fw-b); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: var(--hit-sm); margin: -2px -4px; padding: 2px var(--sp-1); border-radius: var(--r-ctl); user-select: none; }
.fold > summary > span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.fold > summary small { margin-left: auto; font-weight: var(--fw); }
.fold > summary:hover { background: var(--hover); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; width: 7px; height: 7px; flex: none; margin-right: var(--sp-1); border: solid var(--muted); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease-enter); }
.fold:not([open]) > summary::after { transform: rotate(-45deg); }
.fold[open] > summary { margin-bottom: var(--sp-2); }
.fold[open] > :not(summary) { animation: rc-in var(--dur) var(--ease-enter); }
.fold.sub { margin: var(--sp-3) 0 var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.fold.sub > summary { font-weight: var(--fw); color: var(--text-2); }

/* chips */
.chips-sel { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.chips-sel button { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--hit-sm); border: 1px solid var(--line-2); background: var(--surface-0); color: var(--text-2);
  border-radius: var(--r-pill); padding: 0 var(--sp-3); cursor: pointer; font-weight: var(--fw-b); transition: transform var(--dur-fast) var(--ease-enter); }
.chips-sel button:hover { color: var(--text); border-color: var(--line-3); }
.chips-sel button:active { transform: scale(var(--press-scale)); }
.chips-sel button.active { background: var(--accent-soft); color: var(--text); border-color: var(--accent-line); }
.chips-sel.small button { min-height: var(--hit-sm); padding: 0 var(--sp-3); font-size: var(--fs-2); }
.gmode button { min-width: var(--hit); justify-content: center; padding: 0 var(--sp-3); }

/* option cards (export format) */
.optcards { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.optcards button { text-align: left; border: 1px solid var(--line-2); background: var(--surface-0); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);
  cursor: pointer; position: relative; color: var(--text); transition: transform var(--dur-fast) var(--ease-enter); }
.optcards button:hover { border-color: var(--line-3); }
.optcards button:active { transform: scale(.99); }
.optcards button::before { content: ""; position: absolute; left: var(--sp-3); top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--line-3); }
.optcards button.active { border-color: var(--accent-line); background: var(--accent-soft); }
.optcards button.active::before { border-color: var(--accent); background: radial-gradient(var(--accent) 42%, transparent 48%); }
.optcards b { font-weight: var(--fw-b); }
.optcards small { display: block; color: var(--text-2); }

/* tiles (preset) */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.tile { border: 1px solid var(--line-2); background: var(--surface-0); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-1) var(--sp-2); cursor: pointer; min-width: 0;
  text-align: center; color: var(--text-2); transition: transform var(--dur-fast) var(--ease-enter); }
.tile:hover { border-color: var(--line-3); color: var(--text); }
.tile:active { transform: scale(var(--press-scale)); }
.tile.active { border-color: var(--accent-line); color: var(--text); background: var(--accent-soft); }
.tile .i { width: 22px; height: 22px; margin: 0 auto var(--sp-1); display: block; }
.tile.active .i { color: var(--accent); }
.tile b { display: block; font-size: var(--fs-2); color: inherit; overflow-wrap: anywhere; }
.tile small { display: block; font-size: var(--fs-1); line-height: 1.25; margin-top: 2px; color: var(--muted); }

/* badge */
.badge { display: inline-flex; align-items: center; min-width: 18px; height: 18px; justify-content: center; background: var(--surface-3); color: var(--text-2);
  border-radius: var(--r-pill); padding: 0 var(--sp-2); font-size: var(--fs-1); font-weight: var(--fw-b); font-variant-numeric: tabular-nums; }
.badge:empty { display: none; }

/* progress + spinner */
.progress { margin: 0 0 var(--sp-2); }
.bar { height: 6px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: var(--accent-grad); border-radius: var(--r-pill); transform-origin: left center; transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-enter); }
.msg { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-2); display: flex; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.msg .stage { color: var(--text-2); }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%;
  animation: rc-spin .7s linear infinite; vertical-align: -1px; margin-left: var(--sp-2); }

/* skeleton */
.skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-ctl); }
.skeleton::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, transparent, var(--sheen), transparent);
  animation: rc-shimmer 1.3s infinite; }
.fade-in { animation: rc-fade-in var(--dur) var(--ease-enter); }

/* menu (help) */
.menu { position: absolute; right: var(--pad); top: 48px; z-index: var(--z-pop); min-width: 220px; background: var(--surface-2); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop); padding: var(--sp-1); animation: rc-pop-in var(--dur) var(--ease-enter); transform-origin: top right; }
.menu button { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--hit); padding: 0 var(--sp-2); border: 0; background: transparent;
  border-radius: var(--r-ctl); cursor: pointer; text-align: left; color: var(--text); }
.menu button:hover, .menu button:focus-visible { background: var(--hover); }
.menu button kbd { margin-left: auto; }

/* modal */
.modal-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-modal); background: var(--scrim); backdrop-filter: blur(6px); display: grid; place-items: center; padding: var(--sp-4);
  animation: rc-fade-in var(--dur-slow) var(--ease-enter); }
.modal { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface-1); border-radius: 14px; box-shadow: var(--shadow-pop);
  padding: var(--sp-4); animation: rc-pop-in var(--dur-slow) var(--ease-enter); }
.modal.wide { width: min(560px, 100%); }
.modal-back.closing { opacity: 0; transition: opacity var(--dur-fast) var(--ease-exit); }
.modal h3 { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-4); }
.modal h3 .i { color: var(--accent); width: 20px; height: 20px; }
.modal-body { color: var(--text-2); }
.modal-body p { margin: 0 0 var(--sp-2); }
.modal-body ul { margin: 0 0 var(--sp-2); padding-left: var(--sp-4); }
.modal-body li { margin-bottom: 2px; }
.modal-body .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0; }
.modal-body .facts div { background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-2); }
.modal-body .facts b { display: block; font-size: var(--fs-5); color: var(--text); font-variant-numeric: tabular-nums; }
.modal-body .facts small { color: var(--muted); }
.modal-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-4); flex-wrap: wrap; }
.modal-actions button { width: auto; flex: 0 1 auto; min-width: 96px; }
.modal-actions .primary { flex: 0 1 auto; }

/* welcome cards */
.welcome-card { text-align: center; padding: var(--sp-2) var(--sp-1) 0; }
.welcome-art { width: 56px; height: 56px; margin: 0 auto var(--sp-3); border-radius: 16px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.welcome-art .i { width: 28px; height: 28px; stroke-width: 1.6; }
.welcome-card h4 { font-size: var(--fs-5); margin: 0 0 var(--sp-2); color: var(--text); font-weight: var(--fw-b); }
.welcome-card p { margin: 0 auto; max-width: 320px; }
.dots { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-4); }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); }
.dots i.on { background: var(--accent); }

/* toast */
.toast { position: fixed; left: 50%; bottom: var(--sp-4); transform: translateX(-50%); background: var(--surface-2); color: var(--text); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill); box-shadow: var(--shadow-pop); z-index: var(--z-toast); font-size: var(--fs-2); max-width: calc(100vw - 24px); width: max-content;
  text-align: center; animation: rc-toast-in var(--dur-slow) var(--ease-enter); pointer-events: none; }

/* tooltip (ui.js shows it for [title] after a short hover) */
.tooltip { position: fixed; z-index: var(--z-toast); max-width: 260px; background: var(--surface-3); color: var(--text); font-size: var(--fs-1); padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-ctl); box-shadow: var(--shadow-2); pointer-events: none; animation: rc-fade-in var(--dur-fast) var(--ease-enter); }

/* flow steps */
.stepper { list-style: none; margin: 0 0 var(--sp-1); padding: 0; display: flex; gap: var(--sp-1); counter-reset: st; }
.stepper li { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); color: var(--dim); font-weight: var(--fw-b);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper li::before { counter-increment: st; content: counter(st); flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-1); border: 1px solid var(--line-2); color: var(--dim); }
.stepper li:not(:last-child)::after { content: ""; flex: 1 1 8px; min-width: 6px; height: 1px; background: var(--line-2); margin-left: 2px; }
.stepper li.cur { color: var(--text); }
.stepper li.cur::before { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.stepper li.done { color: var(--text-2); }
.stepper li.done::before { content: "✓"; border-color: transparent; background: var(--ok-soft); color: var(--ok); }
.stepper li.done::after { background: var(--ok); opacity: .5; }
.step-hint { margin: 0 0 var(--sp-3); color: var(--muted); font-size: var(--fs-2); min-height: 18px; }
/* steps you can click (captions): the number lives on the button so the whole step is the target */
.stepper.go li::before { content: none; }
.stepper.go li > button { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 28px; min-width: 28px; max-width: 100%; margin: 0; padding: 0 2px;
  border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; border-radius: var(--r-ctl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper.go li > button::before { counter-increment: st; content: counter(st); flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--fs-1); border: 1px solid var(--line-2); color: var(--dim); }
.stepper.go li.cur > button::before { border-color: var(--accent); color: var(--on-accent); background: var(--accent); }
.stepper.go li.done > button::before { content: "✓"; border-color: transparent; background: var(--ok-soft); color: var(--ok); }
.stepper.go li > button:hover { color: var(--text); }

/* errors */
.errbox { display: flex; gap: var(--sp-2); align-items: flex-start; background: var(--bad-soft); border: 1px solid var(--bad-line); border-radius: var(--r-card);
  padding: var(--sp-3); }
.errbox .err-ic { color: var(--bad); margin-top: 2px; }
.err-main { flex: 1; min-width: 0; }
.errbox .err { color: var(--text); white-space: pre-wrap; }
.err-actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.err-detail { margin: var(--sp-2) 0 0; max-height: 160px; overflow: auto; background: var(--surface-0); border-radius: var(--r-ctl); padding: var(--sp-2);
  font: var(--fs-1)/1.4 var(--font-mono); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.note { background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn-text); border-radius: var(--r-ctl); padding: var(--sp-2) var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-2); }

/* ================================================================ app chrome */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); min-width: 0; position: relative; }
.brand { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-4); flex: none; }
.brand b { background: var(--accent-grad); -webkit-background-clip: text; color: transparent; }
.brand small { color: var(--dim); font-size: var(--fs-1); }
.logo { width: 24px; height: 24px; border-radius: 7px; background: var(--accent-grad); display: grid; place-items: center; font-weight: var(--fw-b); color: var(--on-accent); font-size: var(--fs-3); }
.topright { display: flex; gap: var(--sp-1); align-items: center; min-width: 0; justify-content: flex-end; }
.status { display: flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--line-2); background: var(--surface-1); min-width: 0; height: var(--hit-sm);
  border-radius: var(--r-pill); padding: 0 var(--sp-3) 0 var(--sp-3); cursor: pointer; font-size: var(--fs-2); color: var(--muted); }
.status:hover { border-color: var(--line-3); }
.status span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; box-shadow: 0 0 0 3px var(--bad-soft); }
.status.on { color: var(--text-2); }
.status.on i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.status.busy i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); animation: rc-pulse 1s infinite alternate; }
.engine-info { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3); margin-bottom: var(--gap); font-size: var(--fs-2); animation: rc-in var(--dur) var(--ease-enter); }
.engine-info .kv { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 3px 0; border-bottom: 1px solid var(--line); }
.engine-info .kv:last-of-type { border-bottom: 0; }
.engine-info .kv span { color: var(--muted); }
.engine-info .kv b { text-align: right; overflow-wrap: anywhere; }
.engine-info .warn { color: var(--warn); display: block; margin-top: var(--sp-2); }
.engine-info .btnrow .ghost { flex: 1 1 auto; }
.setup { border-color: var(--warn-line); }
.setup .step { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-1) 0; }
.setup .step b { flex: none; width: 18px; }

/* main tabs: sticky; the shadow paints the page colour around them */
.tabs { margin-bottom: var(--sp-3); position: sticky; top: 0; z-index: var(--z-sticky); box-shadow: 0 0 0 var(--pad) var(--bg), var(--shadow-bar); }
.tabs > button { min-height: var(--hit); }
.tabs .tab.active { color: var(--text); }
.tabs.has-ind > .seg-ind { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--accent), var(--shadow-1); }
.tabs:not(.has-ind) .tab.active { box-shadow: inset 0 -2px 0 var(--accent), var(--shadow-1); }
.tabpane { animation: rc-in var(--dur) var(--ease-enter); }

/* run bar: sticky bottom, only when it has something to show */
.runbar { position: sticky; bottom: 0; padding: var(--sp-3) 0; margin-top: var(--sp-1); z-index: 5; background: linear-gradient(180deg, transparent, var(--bg) 28%); }
body.reviewing #cut-runbar { display: none; }

/* results */
.result { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3); margin-bottom: var(--gap); animation: rc-in var(--dur) var(--ease-enter); }
.result.is-error { background: transparent; border: 0; padding: 0; }
.hero { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.hero big { font-size: var(--fs-6); font-weight: var(--fw-b); color: var(--accent); font-variant-numeric: tabular-nums; }
.hero span { color: var(--text-2); }
.result .seqname { font-weight: var(--fw-b); margin-bottom: var(--sp-2); overflow-wrap: anywhere; display: flex; gap: var(--sp-2); align-items: center; }
.result .seqname .i { color: var(--ok); }
.result .meta { color: var(--dim); font-size: var(--fs-1); margin-top: var(--sp-2); }
.result .warn { color: var(--warn); margin-top: var(--sp-2); font-size: var(--fs-2); }
.result .btnrow .ghost { flex: 1 1 auto; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.stats div { background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-2) var(--sp-2); min-width: 0; }
.stats b { display: block; font-size: var(--fs-4); font-variant-numeric: tabular-nums; }
.stats small { font-size: var(--fs-1); }

/* ================================================================ Auto Cut */
.speedhint { font-size: var(--fs-1); color: var(--muted); margin: var(--sp-2) 0 0 var(--sp-6); }
.extras { margin-top: var(--sp-2); }
.subopts { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-1); }
.review { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-soft), var(--shadow-2); animation: rc-in var(--dur) var(--ease-enter); }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.review-head h4 { margin: 0; }
#rv-strip { width: 100%; height: 44px; display: block; border-radius: var(--r-ctl); cursor: pointer; background: var(--surface-0); margin-top: var(--sp-1); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-1); color: var(--muted); margin: var(--sp-2) 0 var(--sp-3); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: var(--sp-1); vertical-align: -1px; }
.rv-head { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); flex-wrap: wrap; }
.rv-head button { margin-left: auto; }
.rv-items { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-ctl); margin-bottom: var(--sp-3); background: var(--surface-0); }
.rv-items > .muted { padding: var(--sp-3); }
.rv-item { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); padding: 2px var(--sp-2); border-bottom: 1px solid var(--line); cursor: pointer; color: var(--text); }
.rv-item:hover { background: var(--hover); }
.rv-item:last-child { border-bottom: 0; }
.rv-item input { margin: 0; }
.rv-item .words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-item .len { font: 600 var(--fs-1)/1 var(--font-mono); color: var(--muted); flex: none; }
.rv-th { display: none; }
.arr-board { display: none; }
.rv-cats { display: none; }
.rv-safe { margin: var(--sp-2) 0 0; text-align: center; }
/* the review keeps its reading order on a narrow dock: result, jump cut, strip, sliders, the list, apply */
#review { display: flex; flex-direction: column; }
#review > .rv-main, #review > .rv-side { display: contents; }
#review .review-head { order: 1; } #rv-hero { order: 2; } #rv-cats { order: 3; } #rv-pair { order: 3; } #rv-strip { order: 4; } #rv-legend { order: 5; }
#review .rv-sliders { order: 6; } #review .rv-zoomrow { order: 7; } #review .rv-head { order: 8; } #rv-items { order: 9; } #review .btnrow { order: 10; } #review .rv-safe { order: 11; }
/* the jump cut pair (Auto Cut review) */
.rv-pair:empty { display: none; }
.rv-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; margin: var(--sp-3) 0; }
.rv-pair figure { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.rv-pair .fr { height: 200px; border-radius: var(--r-card); overflow: hidden; background: #000; display: grid; place-items: center; border: 1px solid var(--line); }
.rv-pair .fr img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.rv-pair .fr.zoomed img { transform: scale(1.12); }
.rv-pair figcaption { font-size: var(--fs-1); color: var(--muted); text-align: center; }
.rv-pair .cutmark { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-2); font-size: var(--fs-1); }
.rv-pair .cutmark span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent-text); }
.rv-pair .cutmark b { font: 600 var(--fs-2)/1.2 var(--font-mono); color: var(--text); }
.rv-item .tag { font-size: var(--fs-1); font-weight: var(--fw-b); text-transform: uppercase; letter-spacing: .04em; padding: 1px var(--sp-2); border-radius: var(--r-pill); flex: none; }
.rv-item.filler .tag { background: var(--warn-soft); color: var(--warn); }
.rv-item.retake .tag { background: var(--bad-soft); color: var(--bad); }
.rv-item .txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-indic); }
.rv-item .why { color: var(--dim); font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.rv-item.off .txt { text-decoration: none; color: var(--info); }
.rv-item:not(.off) .txt { text-decoration: line-through; text-decoration-color: var(--line-3); }
.rv-item button { flex: none; font-size: var(--fs-1); font-variant-numeric: tabular-nums; min-height: var(--hit-sm); width: auto; padding: 0 var(--sp-2); }
body.reviewing #cut-setup { display: none; }

/* ================================================================ Reel Arranger */
.filelist { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); }
.filelist .f { display: flex; align-items: center; gap: var(--sp-2); background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-ctl); min-height: var(--hit); padding: 0 var(--sp-1) 0 var(--sp-2); }
.filelist .f span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: var(--sp-2); }
.filelist .f small { flex: none; }
.filelist .f button { background: none; border: 0; color: var(--muted); cursor: pointer; border-radius: var(--r-ctl); min-width: var(--hit-sm); min-height: var(--hit-sm); display: grid; place-items: center; }
.filelist .f button:hover { color: var(--text); background: var(--hover); }
#arr-tl-hint { margin: var(--sp-2) 0 0; }
.modecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.modecard { text-align: left; border: 1px solid var(--line-2); background: var(--surface-0); border-radius: var(--r-card); padding: var(--sp-3); cursor: pointer; color: var(--text);
  transition: transform var(--dur-fast) var(--ease-enter); }
.modecard:hover { border-color: var(--line-3); }
.modecard:active { transform: scale(.99); }
.modecard b { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-3); margin-bottom: var(--sp-1); }
.modecard small { display: block; line-height: 1.35; color: var(--text-2); }
.modecard.active { border-color: var(--accent-line); background: var(--accent-soft); }
.modecard.active .i { color: var(--accent); }
#arr-script { font: var(--fs-3)/1.45 var(--font-indic); margin-bottom: var(--sp-2); }
.steps { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2px var(--sp-3); font-size: var(--fs-1); color: var(--dim); }
.steps li::before { content: "○ "; }
.steps li.doing { color: var(--text); }
.steps li.doing::before { content: "◔ "; color: var(--accent); }
.steps li.done { color: var(--muted); }
.steps li.done::before { content: "✓ "; color: var(--ok); }
.arr-title { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.arr-title b { font-size: var(--fs-4); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#arr-vars { margin: var(--sp-3) 0 var(--sp-2); flex-wrap: wrap; }
#arr-vars button { flex: 1 1 90px; flex-direction: column; min-height: 38px; }
#arr-vars button small { display: block; font-size: var(--fs-1); color: var(--muted); font-weight: var(--fw); }
.scorebars { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--sp-2) var(--sp-3); font-size: var(--fs-1); color: var(--muted); }
.scorebars div span { display: block; height: 4px; background: var(--surface-3); border-radius: var(--r-pill); margin-top: 3px; overflow: hidden; }
.scorebars div span i { display: block; height: 100%; background: var(--accent-grad); }
.missing { background: var(--bad-soft); border: 1px dashed var(--bad-line); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.missing b { color: var(--bad); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em; }
.missing p { margin: var(--sp-1) 0 var(--sp-2); font-family: var(--font-indic); }
select.pick { margin-top: 2px; }
.segs { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.segcard { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-3); position: relative; min-width: 0; animation: rc-in var(--dur) var(--ease-enter); }
.segcard.locked { border-color: var(--info-line); }
.segcard.drag-over { border-color: var(--accent); box-shadow: var(--ring); }
.segcard.low { box-shadow: inset 3px 0 0 var(--warn); }
.segtop { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.grip { cursor: grab; color: var(--dim); display: inline-grid; place-items: center; min-width: 20px; min-height: var(--hit-sm); user-select: none; }
.segnum { color: var(--dim); font-variant-numeric: tabular-nums; font-size: var(--fs-1); }
.role { font-size: var(--fs-1); font-weight: var(--fw-b); letter-spacing: .04em; padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--surface-3); }
.role.HOOK { background: var(--accent-soft); color: var(--accent-text); }
.role.CTA { background: var(--ok-soft); color: var(--ok-text); }
.role.PROBLEM { background: var(--bad-soft); color: var(--bad-text); }
.role.SOLUTION { background: var(--info-soft); color: var(--info-text); }
.segtime { font-size: var(--fs-1); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.segtools { margin-left: auto; display: flex; gap: 2px; }
.segtools button { background: none; border: 0; color: var(--muted); cursor: pointer; min-width: var(--hit-sm); min-height: var(--hit-sm); border-radius: var(--r-ctl);
  display: grid; place-items: center; font-size: var(--fs-2); }
.segtools button:hover { color: var(--text); background: var(--hover); }
.segtools button.on { color: var(--info); }
.segcard textarea { min-height: 36px; font: var(--fs-3)/1.4 var(--font-indic); }
.segmeta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-1); color: var(--muted); margin-top: var(--sp-2); }
.segmeta .q { color: var(--text); font-weight: var(--fw-b); }
.segmeta .why { flex-basis: 100%; color: var(--dim); }
.thumbs { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); }
.thumbs img { width: 33%; min-width: 0; border-radius: var(--r-ctl); background: var(--video-bg); }
.takes { margin-top: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-2); overflow-x: auto; }
.takes table { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
.takes td, .takes th { padding: var(--sp-1); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.takes th { color: var(--muted); font-weight: var(--fw-b); }
.takes td.t { font-family: var(--font-indic); }
.takes tr.cur td { color: var(--accent); }
.takes button { font-size: var(--fs-1); }

/* ================================================================ Caption Studio */
.empty { text-align: center; padding: var(--sp-6) var(--sp-4); }
.empty-art { width: 64px; height: 64px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); margin: 0 auto var(--sp-3); display: grid; place-items: center; }
.empty-art .i { width: 30px; height: 30px; }
.empty h3 { margin: var(--sp-2) 0; }
.empty p { max-width: 360px; margin: 0 auto var(--sp-4); }
.empty .primary { max-width: 320px; }
.empty .progress { max-width: 320px; margin: var(--sp-3) auto 0; text-align: left; }
.studio { display: block; }
.side { min-width: 0; }

/* stage: preview, transport, timeline */
.stage { background: var(--bg); padding-bottom: var(--sp-2); min-width: 0; }
.seqline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); color: var(--muted); font-size: var(--fs-1); gap: var(--sp-1); }
.seqline > span:first-child { flex: 1 1 120px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seqtools { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; align-items: center; }
.seqtools .icon { min-width: var(--hit-sm); min-height: var(--hit-sm); }
/* preview options: one button instead of three dropdowns and three checkboxes */
.viewmenu { position: relative; }
.viewmenu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--r-ctl); color: var(--text-2); }
.viewmenu > summary::-webkit-details-marker { display: none; }
.viewmenu > summary:hover, .viewmenu[open] > summary { color: var(--text); background: var(--surface-2); }
.viewmenu > summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.vm-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-pop); width: 248px; max-width: calc(100vw - 24px); background: var(--surface-2);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--sp-2) var(--sp-3); animation: rc-pop-in var(--dur) var(--ease-enter); transform-origin: top right; }
.vm-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 40px; color: var(--text); font-size: var(--fs-2); cursor: pointer; }
.vm-row + .vm-row { border-top: 1px solid var(--line); }
.vm-row > span { display: flex; flex-direction: column; min-width: 0; }
.vm-row small { color: var(--dim); font-size: var(--fs-1); }
.vm-row select { min-width: 104px; }
.preview-wrap { position: relative; background: var(--video-bg); border-radius: var(--r-card); overflow: hidden; display: flex; justify-content: center; border: 1px solid var(--line); }
#pv { display: block; max-width: 100%; cursor: default; }
.pv-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; cursor: ns-resize; background: linear-gradient(transparent, var(--sheen)); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-enter); }
.preview-wrap:hover .pv-resize, body.resizing .pv-resize { opacity: 1; }
.pv-resize::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 32px; height: 3px; margin-left: -16px; border-radius: var(--r-pill); background: var(--line-3); }
body.pv-off .preview-wrap { display: none; }
body.resizing { cursor: ns-resize; user-select: none; }
.transport { display: flex; gap: 2px; align-items: center; margin: var(--sp-2) 0 var(--sp-1); }
.transport input { flex: 1; min-width: 40px; margin: 0 var(--sp-1); }
.transport .icon { min-width: var(--hit-sm); min-height: var(--hit-sm); }
button.play { background: var(--surface-2); border-color: var(--line-2); border-radius: 50%; width: var(--hit); height: var(--hit); color: var(--text); }
#pv-label { font-variant-numeric: tabular-nums; color: var(--text-2); min-width: 64px; text-align: right; font-size: var(--fs-2); flex: none; }
.opts { display: flex; gap: 0 var(--sp-3); flex-wrap: wrap; font-size: var(--fs-2); }

/* sub-tabs: sticky, scroll sideways instead of clipping on very narrow docks */
.subtabs { margin: var(--sp-2) 0 var(--sp-3); overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--stick); z-index: 15; box-shadow: 0 0 0 6px var(--bg); }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs > button { font-size: var(--fs-2); padding: 0 var(--sp-3); flex: 1 0 auto; overflow: visible; }
.subtabs.more-r { -webkit-mask-image: linear-gradient(90deg, var(--mask) calc(100% - 36px), transparent); }
.subtabs.more-l { -webkit-mask-image: linear-gradient(270deg, var(--mask) calc(100% - 36px), transparent); }
.subtabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask) 36px, var(--mask) calc(100% - 36px), transparent); }
.subpane { animation: rc-in var(--dur) var(--ease-enter); }

/* primary action of the studio, always reachable */
.cap-cta { position: sticky; bottom: 0; z-index: 6; padding: var(--sp-3) 0; background: linear-gradient(180deg, transparent, var(--bg) 30%); }
body.sub-export .cap-cta { display: none; }

/* key words */
.kwlist { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); max-height: 96px; overflow-y: auto; }
.kw { font: var(--fs-2)/1.2 var(--font-indic); background: var(--key-soft); border: 1px solid var(--key-line); color: var(--key-text);
  min-height: 26px; padding: 0 var(--sp-1) 0 var(--sp-3); border-radius: var(--r-pill); cursor: pointer; display: inline-flex; gap: var(--sp-1); align-items: center; }
.kw.manual { border-color: var(--key); background: var(--key-strong); }
.kw i { font-style: normal; color: var(--muted); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; }
.kw i:hover { color: var(--text); background: var(--press); }

/* caption list */
.hint { font-size: var(--fs-1); margin: 2px 0 var(--sp-2); }
.caplist { max-height: 56vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-1); outline: none; contain: content; }
.caplist .more { min-height: var(--hit); display: grid; place-items: center; color: var(--accent); cursor: pointer; font-weight: var(--fw-b); border-bottom: 1px solid var(--line); }
.caplist .more:hover { background: var(--accent-soft); }
.cap { padding: var(--sp-2) var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--line); }
.cap:last-child { border-bottom: 0; }
.cap.cur { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.cap.sel { box-shadow: inset 3px 0 0 var(--info); background: var(--info-soft); }
.cap .tm { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; color: var(--muted); font-size: var(--fs-1); margin-bottom: var(--sp-2); min-height: var(--hit-sm); }
.cap .tm .num { min-width: 22px; color: var(--dim); font-variant-numeric: tabular-nums; cursor: pointer; }
.cap .tm input { width: 56px; min-height: 24px; background: var(--field); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 var(--sp-1); font-variant-numeric: tabular-nums; font-size: var(--fs-2); }
.cap .tm input:focus { border-color: var(--accent); outline: none; }
.cap .tm .dash { color: var(--dim); padding: 0 2px; }
.cap .tm .sp { flex: 1 1 0; }
.cap .rb { background: none; border: 0; color: var(--muted); cursor: pointer; min-width: var(--hit-sm); min-height: var(--hit-sm); border-radius: var(--r-ctl);
  display: inline-grid; place-items: center; transition: transform var(--dur-fast) var(--ease-enter); }
.cap .rb:hover { color: var(--text); background: var(--hover); }
.cap .rb:active { transform: scale(.92); }
.cap .rb[data-a="del"]:hover { color: var(--bad); background: var(--bad-soft); }
.cap .rb[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); }
.cap .tm2 { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0 0 var(--sp-2); padding: var(--sp-2); background: var(--surface-0); border-radius: var(--r-ctl); animation: rc-in var(--dur) var(--ease-enter); }
.cap .tm2 button { min-height: var(--hit-sm); font-size: var(--fs-1); padding: 0 var(--sp-2); width: auto; flex: 1 1 auto; font-weight: var(--fw); }
.cap textarea { min-height: 32px; padding: var(--sp-1) var(--sp-2); font: var(--fs-3)/1.35 var(--font-indic); }
.cbadge { font-size: var(--fs-1); background: var(--info-soft); color: var(--info-text); border-radius: var(--r-pill); padding: 0 2px 0 var(--sp-2); margin-left: var(--sp-1); white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.cbadge i { font-style: normal; cursor: pointer; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; }
.cbadge i:hover { background: var(--press); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.chip { font: var(--fs-2)/1.2 var(--font-indic); padding: 3px var(--sp-2); border-radius: var(--r-pill); background: var(--surface-0); border: 1px solid var(--line-2); cursor: pointer; color: var(--text); }
.chip:hover { border-color: var(--accent-line); }
.chip.emph { border-color: var(--key); color: var(--key); font-weight: var(--fw-b); }
.chip.hl { background: var(--info-soft); }
.chip.low { border-style: dashed; border-color: var(--warn); background: var(--warn-soft); }
.chip.flash { box-shadow: 0 0 0 2px var(--warn); }
.chip.styled { border-style: dotted; border-color: var(--styled); }
.chip.wsel { box-shadow: 0 0 0 2px var(--warn); }
.chip .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: var(--sp-1); vertical-align: middle; }

/* word popover */
.wpop { position: absolute; z-index: var(--z-pop); width: 300px; max-width: calc(100vw - 16px); background: var(--surface-2); border-radius: var(--r-card);
  padding: var(--sp-3); box-shadow: var(--shadow-pop); animation: rc-pop-in var(--dur) var(--ease-enter); }
.wp-title { font-weight: var(--fw-b); margin-bottom: var(--sp-2); font-family: var(--font-indic); font-size: var(--fs-4); }
.wp-why { margin: -2px 0 var(--sp-2); }
.wp-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); align-items: center; }
.wp-row:last-child { margin-bottom: 0; }
.wp-row input[type=text] { width: 72px; min-height: var(--hit-sm); }
.wp-row select { width: auto; flex: 1; min-height: var(--hit-sm); }
.sw { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-3); cursor: pointer; padding: 0; transition: transform var(--dur-fast) var(--ease-enter); }
.sw:hover { transform: scale(1.12); }
.sw.none { background: linear-gradient(45deg, var(--none-a) 45%, var(--none-b) 45%, var(--none-b) 55%, var(--none-a) 55%); }
.emo { background: none; border: 1px solid transparent; border-radius: var(--r-ctl); font-size: var(--fs-4); cursor: pointer; width: var(--hit-sm); height: var(--hit-sm); padding: 0; }
.emo:hover { border-color: var(--accent-line); background: var(--hover); }

/* style scope + preset gallery */
.scopebar { padding: var(--sp-2) var(--sp-3); }
.scopebar .seg button { font-size: var(--fs-2); flex: 1 1 auto; }
.scopebar .seg .sm { display: none; }
.scope-tools { margin: var(--sp-2) 0 var(--sp-1); gap: var(--sp-1); }
.scope-tools .ghost { flex: 1 1 auto; min-height: var(--hit-sm); font-size: var(--fs-2); padding: 0 var(--sp-2); }
.scope-mini { margin: 0 0 var(--sp-2) 2px; }
.scope-mini b { color: var(--text); }
#my-row { margin-top: var(--sp-2); }
#my-row .primary { width: auto; flex: none; }
.galtools { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.galtools .chips-sel { flex: 1 1 220px; gap: var(--sp-1); }
.galtools input { flex: 0 1 140px; min-height: var(--hit-sm); }
.gallery2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-2); max-height: 480px; overflow-y: auto; padding: 2px var(--sp-1) 2px 2px; margin-bottom: var(--sp-2); }
.gallery2 .ghead { grid-column: 1 / -1; font-size: var(--fs-1); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: var(--sp-1) 0 0; font-weight: var(--fw-b); display: flex; align-items: center; gap: var(--sp-2); }
.gallery2 .ghead.trend { color: var(--accent); }
.gallery2 .ghead.mine { color: var(--info); }
.gallery2 .pcard.is-pick .pc-tags i:first-child { background: var(--accent-soft); color: var(--accent-text); }
.gallery2 .ghead .gnew { font-size: var(--fs-1); text-transform: none; letter-spacing: 0; font-weight: var(--fw); color: var(--muted); }
.gallery2 .pcard.is-new::before { content: "NEW"; position: absolute; top: var(--sp-1); left: var(--sp-1); z-index: 1; padding: 1px 6px; border-radius: var(--r-ctl);
  background: var(--accent); color: var(--on-accent); font-size: var(--fs-1); line-height: 1.4; font-weight: var(--fw-b); letter-spacing: .06em; pointer-events: none; }
.pcard { background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; position: relative; min-width: 0;
  transition: transform var(--dur-fast) var(--ease-enter); }
.pcard:hover { border-color: var(--line-3); transform: translateY(-1px); }
.pcard.sel { border-color: var(--accent); box-shadow: var(--ring); }
.pcard .pc-check { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  opacity: 0; transform: scale(.6); transition: transform var(--dur) var(--ease-enter), opacity var(--dur) var(--ease-enter); }
.pcard .pc-check .i { width: 12px; height: 12px; stroke-width: 2.5; }
.pcard.sel .pc-check { opacity: 1; transform: none; }
.pcard canvas { display: block; width: 100%; height: auto; cursor: pointer; background: var(--thumb-bg); }
.pcard canvas.skeleton { background: var(--surface-2); }
.pc-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) 0; font-size: var(--fs-2); }
.pc-meta b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-fav { cursor: pointer; color: var(--dim); flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.pc-fav:hover { background: var(--hover); color: var(--text); }
.pc-fav.on { color: var(--key); }
.pc-fav.on .i { fill: currentColor; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px var(--sp-2); min-height: 18px; }
.pc-tags i { font-style: normal; font-size: var(--fs-1); background: var(--surface-2); color: var(--muted); border-radius: 5px; padding: 0 var(--sp-1); }
.pc-btns { display: flex; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2) var(--sp-2); }
.pc-btns button { flex: 1; min-width: 0; min-height: var(--hit-sm); border: 1px solid var(--line-2); background: var(--surface-1); color: var(--text); border-radius: var(--r-ctl);
  cursor: pointer; font-size: var(--fs-2); }
.pc-btns button:hover { border-color: var(--line-3); }
.pc-btns button.pc-apply { background: var(--accent-grad); border-color: transparent; color: var(--on-accent); font-weight: var(--fw-b); }
.pc-btns button.pc-del { flex: 0 0 var(--hit-sm); }

/* inspector (Styles · Animation · Layout) */
.inspector .fold.prop { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-3); margin-bottom: var(--sp-2); }
.inspector .fold.prop > summary { font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.inspector .fold.prop[open] > summary { color: var(--text); }
.inspector .fold.prop.quick { border-color: var(--accent-line); }
.prow { margin-bottom: var(--sp-3); min-width: 0; }
.prow:last-child { margin-bottom: 0; }
.prow > label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-2); }
.prow > label.sw-row { display: flex; margin: 0; padding: 0; }
.prow .note-i { font-style: normal; color: var(--dim); cursor: help; }
.prow .seg { flex-wrap: wrap; }
.prow .seg button { font-size: var(--fs-2); flex: 1 1 auto; }
.prow.unset .hex { color: var(--dim); }
.prow.unset input[type=color] { opacity: .45; }
.pin { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.pin input[type=range] { flex: 1; }
.pin .pv { min-width: 52px; text-align: center; font-weight: var(--fw-b); font-variant-numeric: tabular-nums; color: var(--text); cursor: text; font-size: var(--fs-1);
  background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px var(--sp-2); }
.pin .pv:hover { border-color: var(--line-3); }
.pv-edit { width: 56px; min-height: 22px; padding: 0 var(--sp-1); background: var(--field); border: 1px solid var(--accent); border-radius: var(--r-pill); text-align: center; }
.pin input[type=color], .lf input[type=color], .cchip input[type=color] { width: 36px; height: 26px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: none; cursor: pointer; }
.pin .hex, .lf .hex { width: 88px; flex: 0 1 88px; min-height: 26px; padding: 0 var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-1); }
.pin .clr { min-width: 0; min-height: 26px; font-size: var(--fs-1); padding: 0 var(--sp-2); }
.clist { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.cchip { display: inline-flex; align-items: center; gap: 1px; }
.cchip button { background: none; border: 0; color: var(--dim); cursor: pointer; min-width: 24px; min-height: 24px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--r-ctl); }
.cchip button:hover { color: var(--text); background: var(--hover); }
.layers { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.layer { background: var(--surface-0); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-2) var(--sp-2); }
.lhead { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-1); color: var(--muted); font-weight: var(--fw-b); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-1); }
.lhead .icon { min-width: 24px; min-height: 24px; }
.lf { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0; font-size: var(--fs-1); min-width: 0; }
.lf span { width: 56px; flex: none; color: var(--muted); }
.lf input[type=range] { flex: 1; }
.lf b { min-width: 46px; text-align: right; font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.lf.seg { margin-top: var(--sp-2); }
.add-layer { min-height: var(--hit-sm) !important; font-size: var(--fs-2) !important; }
.bez { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.bez canvas { background: var(--field); border-radius: var(--r-ctl); border: 1px solid var(--line); }
.bez-in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1); }
.bez-in input { width: 60px; min-height: 24px; background: var(--field); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 var(--sp-1); }

/* font picker */
.fontpick { position: relative; }
.fp-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); min-height: var(--hit); background: var(--field); border: 1px solid var(--line-2);
  border-radius: var(--r-ctl); padding: 0 var(--sp-3); cursor: pointer; text-align: left; }
.fp-btn:hover { border-color: var(--line-3); }
.fp-btn .fp-name { font-size: var(--fs-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fp-btn i { font-style: normal; color: var(--muted); }
.fp-pop { position: absolute; z-index: var(--z-pop); left: 0; right: 0; top: calc(100% + 4px); background: var(--surface-2); border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  padding: var(--sp-2); animation: rc-pop-in var(--dur) var(--ease-enter); }
.fp-q { margin-bottom: var(--sp-2); }
.fp-list { max-height: 300px; overflow-y: auto; }
.fp-h { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: var(--sp-2) var(--sp-1) 3px; font-weight: var(--fw-b); }
.fp-row { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); padding: 0 var(--sp-2); border-radius: var(--r-ctl); cursor: pointer; }
.fp-row:hover { background: var(--hover); }
.fp-row.cur { background: var(--accent-soft); }
.fp-row small { font-size: var(--fs-1); }
.fp-star { color: var(--dim); font-size: var(--fs-2); }
.fp-star.on { color: var(--key); }
.fp-fam { flex: 1; min-width: 0; font-size: var(--fs-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-cov b { font: var(--fw-b) var(--fs-1) var(--font-indic); background: var(--surface-3); color: var(--muted); border-radius: 4px; padding: 0 3px; margin-left: 2px; }
.fp-foot { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.fp-foot .ghost { flex: 1 1 auto; }
.fp-foot .fp-scan { flex: 0 0 var(--hit); }

/* caption timeline */
.tl { margin-top: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface-0); }
.tl-bar { display: flex; gap: var(--sp-1); align-items: center; padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--line); background: var(--surface-1); }
.tl-bar .icon { min-width: var(--hit-sm); min-height: var(--hit-sm); padding: 0 var(--sp-2); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); }
.tl-info { margin-left: auto; font-size: var(--fs-1); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl-cv { display: block; }

/* export */
.keeps { width: 100%; border-collapse: collapse; margin: 0 0 var(--sp-3); font-size: var(--fs-2); }
.keeps td { padding: 3px var(--sp-1); border-bottom: 1px solid var(--line); color: var(--text-2); }
.keeps td:first-child { width: 22px; }
.keeps .yes { color: var(--ok); }
.keeps .no { color: var(--dim); }
#ex-progress .btn { margin-top: var(--sp-2); }

/* ================================================================ reduced motion: durations are 0 (tokens.css); decorative loops stop too.
   The spinner keeps turning: it is the only sign that work is in progress. */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after, .status.busy i { animation: none; }
  .pcard:hover { transform: none; }
}
body.reduce-motion .skeleton::after, body.reduce-motion .status.busy i { animation: none; }
body.reduce-motion .pcard:hover { transform: none; }
.menu button[aria-checked] .chk-dot { margin-left: auto; width: 34px; height: 18px; border-radius: var(--r-pill); background: var(--surface-3); position: relative; flex: none; }
.menu button[aria-checked] .chk-dot::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--white);
  transition: transform var(--dur-fast) var(--ease-enter); }
.menu button[aria-checked="true"] .chk-dot { background: var(--accent); }
.menu button[aria-checked="true"] .chk-dot::after { transform: translateX(16px); }

/* ================================================================ responsive (mobile-first) */
/* narrow dock (Premiere side column) */
@media (max-width: 459px) {
  .texttools .lbl { display: none; }                          /* icon-only toolbars */
  .texttools .ghost { min-width: var(--hit); padding: 0 var(--sp-2); }
  .cap .rb[data-a="play"] { display: none; }                  /* clicking a row already seeks there */
}
@media (max-width: 380px) {
  .block { padding: var(--sp-3); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { display: grid; grid-template-columns: 26px 1fr; column-gap: var(--sp-2); text-align: left; align-items: center; padding: var(--sp-2); }
  .tile .i { grid-row: span 2; margin: 0; }
  .tile small { margin-top: 0; }
  .inline-row { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .inline-row > label { width: auto; }
  .speedhint { margin-left: 0; }
  .seg.small > button { white-space: normal; line-height: 1.2; }
  .seqtools { width: 100%; justify-content: flex-start; }
  .btnrow .ghost { flex: 1 1 auto; }
  .scopebar .seg .lg { display: none; }
  .scopebar .seg .sm { display: inline; }
  .gallery2 { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-2); }
  .galtools input { flex: 1 1 100%; }
  .stepper li { font-size: var(--fs-1); }
  .stepper li:not(.cur) { font-size: 0; flex: 1 1 0; }          /* only the current step keeps its label */
  .stepper li:not(.cur)::before { font-size: var(--fs-1); }
  .stepper li.cur { flex: 0 0 auto; }
  .cap .tm input { width: 52px; }
}
@media (max-width: 340px) {
  .tabs .tab .i { display: none; }
  .tabs .tab { font-size: var(--fs-2); padding: 0 2px; }
  .status { width: var(--hit-sm); padding: 0; justify-content: center; }
  .status span { display: none; }
  .brand small { display: none; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  #pv-prev, #pv-next { display: none; }
}

/* tabs: short labels on narrow docks (four tabs must fit at 320 px) */
.tabs .tl-sm { display: none; }
@media (max-width: 459px) {
  .tabs .tab .i { display: none; }
  .tabs .tab { padding: 0 var(--sp-1); }
  .tabs .tl-lg { display: none; }
  .tabs .tl-sm { display: inline; }
}

.keys-h { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* caption check (caption brain) */
.brainbox h4 .i { color: var(--accent); }
.brainbox #br-status { color: var(--accent-text); }
.brainbox .sw-row { margin-top: var(--sp-2); }
.brainbox #br-dictbox { margin-top: var(--sp-2); }
.brlist { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); max-height: 460px; overflow-y: auto; }
.brq-head { display: flex; flex-direction: column; gap: var(--sp-2); position: sticky; top: 0; z-index: 1; background: var(--surface-1); padding-bottom: var(--sp-1); }
.brq-prog { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); color: var(--text-2); white-space: nowrap; }
.brq-prog b { color: var(--text); }
.brq-prog .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.brq-prog .bar i { display: block; height: 100%; background: var(--accent); }
.brq-filt { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.brq-filt button { min-height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: transparent; color: var(--text-2);
  font-size: var(--fs-1); font-weight: var(--fw-b); cursor: pointer; }
.brq-filt button[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-text); }
.brs { display: flex; flex-direction: column; gap: 6px; background: var(--surface-0); border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-3); }
.brs.first { border-color: var(--line-3); }
.brs:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.brs-top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.brs-top .icon { margin-left: auto; min-width: 28px; min-height: 28px; }
.brs-tc { font-family: var(--font-mono); font-size: var(--fs-1); color: var(--muted); }
.brk { font-size: var(--fs-1); font-weight: var(--fw-b); padding: 1px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.brk.k-glossary { background: var(--info-soft); color: var(--info-text); }
.brk.k-spelling, .brk.k-consistency { background: var(--key-soft); color: var(--key-text); }
.brk.k-ai, .brk.k-other { background: var(--accent-soft); color: var(--accent-text); }
.brt { margin: 0; font-size: var(--fs-3); line-height: 1.45; overflow-wrap: anywhere; }
.brt s { color: var(--bad-text); }
.brt b { color: var(--ok-text); }
.brt .cx { color: var(--text-2); }
.brs-why { color: var(--muted); }
.bra { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.bra .btn { min-height: 32px; }
.bra .accept { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.bra kbd { margin-left: 2px; background: transparent; border-color: currentColor; opacity: .75; }
.brq-keys { margin: 0; text-align: center; }
.chip.sugg { text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }

/* titles studio */
.tstudio { display: block; }
.tstage { background: var(--bg); padding-bottom: var(--sp-2); min-width: 0; }
.tside { min-width: 0; }
.tt-wrap { background: var(--video-bg); }
#tt-pv { display: block; max-width: 100%; }
.tstage .transport .chk { white-space: nowrap; font-size: var(--fs-2); margin-left: var(--sp-1); }
.tgal { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); max-height: 360px; margin-top: var(--sp-2); }
.tgal .pcard canvas { aspect-ratio: 9 / 10; }
.tgal .pc-meta { padding-bottom: var(--sp-2); }
.tgal .pc-meta small { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-h2 { margin-top: var(--sp-4) !important; }
.tt-field { margin-bottom: var(--sp-2); }
.tt-field label { display: block; font-size: var(--fs-2); margin-bottom: 2px; }
.tt-field .hint { color: var(--dim); font-size: var(--fs-1); }
.tt-colors { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; flex: 1; min-width: 0; }
.tt-colors .ghost.sm { margin-left: auto; min-height: var(--hit-sm); }
.tt-fontpick { flex: 1; min-width: 0; }
.tt-sound { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }
.tt-sound input[type=range] { flex: 1; min-width: 0; }
.tt-sound input[type=range]:disabled { opacity: 0.4; }
.tt-search { width: 100%; margin-bottom: var(--sp-2); }
.ghead small { color: var(--dim); font-weight: 500; margin-left: var(--sp-1); }
/* narrow docks: the 12 groups become one swipeable row instead of four rows of chips */
@media (max-width: 759px) {
  #gal-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  #gal-filter::-webkit-scrollbar { display: none; }
  #gal-filter button { flex: none; white-space: nowrap; }
  #tt-cats { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px;
             -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  #tt-cats::-webkit-scrollbar { display: none; }
  #tt-cats button { flex: none; scroll-snap-align: start; white-space: nowrap; }
}
.tgal .tt-empty { grid-column: 1 / -1; padding: var(--sp-3) var(--sp-1); }
.inline-row > input[type=range] { flex: 1; }
.tt-v { width: 44px; text-align: right; color: var(--text); font-size: var(--fs-2); font-variant-numeric: tabular-nums; flex: none; }
.tt-actions { margin-top: 0; }
.tt-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.tt-recent li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); color: var(--text-2); min-width: 0; }
.tt-recent li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-recent li button { min-height: var(--hit-sm); }

/* wide: 2-column studio, centred forms */
@media (min-width: 760px) {
  body { padding-top: var(--sp-3); }
  .studio { display: grid; grid-template-columns: minmax(280px, 42%) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
  .stage { position: sticky; top: calc(var(--stick) + 8px); z-index: 4; }
  .subtabs { margin-top: 0; }
  #tab-cut, #arr-setup, #arr-review, #tab-arr > .stepper, #tab-arr > .step-hint { max-width: 680px; margin-left: auto; margin-right: auto; }
  #help-card, #engine-info, #setup-card { max-width: 680px; margin-left: auto; margin-right: auto; }
  #tab-cap > .stepper, #tab-cap > .step-hint, #cap-empty { max-width: 680px; margin-left: auto; margin-right: auto; }
  .caplist { max-height: calc(100vh - var(--stick) - 300px); min-height: 240px; }
  .tstudio { display: grid; grid-template-columns: minmax(260px, 40%) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
  .tstage { position: sticky; top: calc(var(--stick) + 8px); z-index: 4; }
  #tab-tit > .stepper, #tab-tit > .step-hint { max-width: 680px; margin-left: auto; margin-right: auto; }
}

/* very wide: 3 columns: preview | captions | style tools */
/* wide dock = the Studio: the tools sit in the header row, every tab fills the panel and its columns scroll on their own */
@media (min-width: 1180px) and (min-height: 560px) {
  /* Auto Cut: settings stay a readable column; the review becomes Before / after with the result on the right */
  #tab-cut, #arr-review { max-width: none; }
  /* Reel Arranger review = a story board */
  #arr-review:not(.hidden) #arr-segs { display: none; }
  #arr-review .arr-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); align-items: center; }
  .arr-board { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-4); align-items: start; margin-bottom: var(--sp-3); }
  .b-script { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-1); padding: var(--sp-3); position: sticky; top: 0; }
  .b-script ol { list-style: none; margin: var(--sp-2) 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
  .b-script li { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: var(--sp-2) var(--sp-3); background: var(--surface-0); font-size: var(--fs-2); overflow-wrap: anywhere; }
  .b-script li.off { opacity: .55; }
  .b-script .sl-h { display: flex; justify-content: space-between; gap: var(--sp-2); margin-bottom: 2px; font-size: var(--fs-1); }
  .b-script .sl-h b { color: var(--accent-text); } .b-script .sl-h small { color: var(--muted); }
  .b-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
  .b-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: var(--sp-3); overflow-x: auto; padding-bottom: var(--sp-1); align-items: start; }
  .bcol { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; border-radius: var(--r-card); padding: 2px; }
  .bcol.drag-over { outline: 2px dashed var(--accent); outline-offset: 2px; }
  .bcol-h { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); font-weight: var(--fw-b); padding: 0 2px; }
  .bcol-h .tc, .take .tc { font: 600 var(--fs-1)/1 var(--font-mono); color: var(--muted); }
  .take { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-1); overflow: hidden; display: flex; flex-direction: column; }
  .take.kept { border: 2px solid var(--accent); background: var(--surface-2); }
  .take-img { position: relative; height: 118px; background: #000; overflow: hidden; flex: none; }
  .take-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .kept-b { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-1); font-weight: var(--fw-b); }
  .kept-b .i { width: 11px; height: 11px; }
  .take-meta { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) 0; font-size: var(--fs-1); min-width: 0; }
  .take-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .take-txt { padding: 2px var(--sp-2); font-size: var(--fs-2); color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .take-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-2) var(--sp-2); font-size: var(--fs-1); color: var(--ok); }
  .take:not(.kept) .take-foot { color: var(--muted); }
  .take .pv:empty { display: none; } .take .pv { padding: 0 var(--sp-2) var(--sp-2); }
  .reelbar { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-1); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
  .rb-h { display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; }
  .rb-blks { display: flex; gap: 4px; min-width: 0; }
  .rb-blk { min-width: 0; height: 34px; border-radius: 6px; background: var(--surface-3); display: flex; align-items: center; padding: 0 var(--sp-2); font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rb-blk:first-child { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
  #tab-cut > :not(#review) { max-width: 880px; margin-left: auto; margin-right: auto; }
  #review:not(.hidden) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: var(--sp-5); align-items: start; }
  #review .rv-main, #review .rv-side { display: flex; flex-direction: column; min-width: 0; }
  #review .rv-side { position: sticky; top: 0; border-left: 1px solid var(--line); padding-left: var(--sp-5); }
  #review .rv-side .hero { flex-direction: column; align-items: flex-start; gap: 2px; }
  #review .rv-side .hero big { font-size: 44px; line-height: 1; }
  #review .rv-sliders { grid-template-columns: 1fr; }
  #review .rv-pair .fr { height: clamp(180px, 30vh, 320px); }
  .rv-cats { display: flex; flex-direction: column; margin: var(--sp-2) 0 var(--sp-3); border-top: 1px solid var(--line); }
  .rv-cat { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; border-bottom: 1px solid var(--line); cursor: pointer; }
  .rv-cat > i { width: 10px; height: 10px; border-radius: 3px; flex: none; background: #4a4a52; }
  .rv-cat.filler > i { background: #f5b544; } .rv-cat.retake > i { background: #ff6262; }
  .rv-cat > span { flex: 1; display: flex; flex-direction: column; } .rv-cat small { color: var(--muted); }
  .rv-items { max-height: none; }
  .rv-th { display: grid; grid-template-columns: 40px 104px 84px 64px minmax(0, 1fr); gap: var(--sp-2); padding: 0 var(--sp-2); min-height: 32px; align-items: center;
    font-size: var(--fs-1); font-weight: var(--fw-b); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-0); z-index: 1; }
  .rv-item { display: grid; grid-template-columns: 40px 104px 84px 64px minmax(0, 1fr); gap: var(--sp-2); min-height: 48px; }
  .rv-item > input { justify-self: center; }
  .rv-item > .tag { justify-self: start; }
  body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
  body > .topbar { flex: none; }
  .topbar > .tabs { position: relative; top: auto; flex: 0 1 auto; margin: 0 auto 0 var(--sp-5); box-shadow: none; }
  .topbar > .tabs > button { min-height: 34px; flex: none; padding: 0 var(--sp-3); }
  body > main.tabpane { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--sp-3); }
  #tab-cap { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  #tab-cap > * { flex: none; }
  #cap-editor:not(.hidden) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #cap-editor > .studio { flex: 1 1 auto; min-height: 0; }
  .studio { grid-template-columns: minmax(320px, 1fr) minmax(300px, 30%) minmax(340px, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 0 var(--sp-4); }
  .stage { grid-column: 2; grid-row: 1 / span 3; position: relative; top: auto; overflow-y: auto; min-height: 0; }
  .side { display: contents; }
  .side > .subtabs { grid-column: 3; grid-row: 1; margin: 0 0 var(--sp-3); position: relative; top: auto; }
  .side > .subpane[data-sub="captions"] { grid-column: 1; grid-row: 1 / span 3; overflow-y: auto; min-height: 0; padding-right: 4px; }
  .side > .subpane[data-sub="captions"].hidden { display: block !important; }
  .side > .subpane:not([data-sub="captions"]) { grid-column: 3; grid-row: 2; overflow-y: auto; min-height: 0; padding-right: 4px; }
  .side > .cap-cta { grid-column: 3; grid-row: 3; position: static; }
  .subtab[data-sub="captions"] { display: none; }
  .caplist { max-height: none; }
  /* the caption column: one clean line per caption; the line you pick opens for editing */
  .colhead { display: flex; align-items: baseline; gap: var(--sp-2); margin: 2px 0 var(--sp-3); font-size: var(--fs-4); }
  #cap-list .cap:not(.edit):not(:focus-within) > .tm, #cap-list .cap:not(.edit):not(:focus-within) > .tm2,
  #cap-list .cap:not(.edit):not(:focus-within) > .tx-wrap, #cap-list .cap:not(.edit):not(:focus-within) > .chips { display: none; }
  #cap-list .cap:not(.edit):not(:focus-within) > .cap-sum { display: flex; }
  #cap-list .cap:not(.edit):not(:focus-within) { padding-top: 6px; padding-bottom: 6px; cursor: pointer; }
  #cap-list .cap:not(.edit):not(:focus-within):hover { background: var(--hover); }
  /* grouping, key words and caption check fold up above the list: the heading opens each one */
  .wfold { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .wfold > h4 { cursor: pointer; margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
  .wfold > h4::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform var(--dur-fast); flex: none; }
  .wfold.open > h4::after { transform: rotate(45deg); }
  .wfold.open > h4 { margin-bottom: var(--sp-3); }
  .wfold:not(.open) > :not(h4) { display: none !important; }
}
.colhead { display: none; }
.cap-sum { display: none; gap: var(--sp-3); align-items: baseline; min-height: 26px; min-width: 0; }
.cap-sum .cs-t { font: 600 11px/1.6 var(--font-mono); color: var(--muted); flex: none; width: 58px; font-variant-numeric: tabular-nums; }
.cap-sum .cs-x { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cap-sum b { color: var(--accent-text); font-weight: var(--fw-b); }
.cap.cur .cap-sum .cs-t { color: var(--accent-text); }
/* key word colour swatches (Look › Key word) */
.kswatch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kswatch button { width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.kswatch button.own { background: conic-gradient(from 210deg, #ffd08a, #f07a2a, #ffc873, #edc57b, #ffd08a); }
.kswatch button.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.kswatch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ================================================================ home (2.6): the start screen */
.home { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-4); padding-bottom: var(--sp-5); }
.home-h { margin: var(--sp-2) 0 0; font: 800 28px/1.12 "Bricolage Grotesque", var(--font); letter-spacing: -0.02em; text-wrap: balance; }
.home-seq { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-1); min-width: 0; }
.home-thumb { width: 40px; height: 56px; flex: none; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.home-thumb .i { width: 20px; height: 20px; }
.home-seq-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-seq-txt small { font-weight: var(--fw-b); }
.home-seq-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-seq.none b { color: var(--text-2); }
.home-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.home-tile { position: relative; min-height: 140px; padding: var(--sp-4); border-radius: 18px; border: 1px solid var(--line); background: var(--surface-1); color: var(--text);
  text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; cursor: pointer; transition: transform var(--dur-fast) var(--ease-enter); min-width: 0; }
.home-tile:hover { border-color: var(--line-3); background: var(--surface-2); }
.home-tile:active { transform: scale(var(--press-scale)); }
.home-tile b { margin-top: auto; font-size: var(--fs-5); }
.home-tile small { color: var(--muted); min-height: 2.8em; }
.home-tile kbd { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.home-tile .ht-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.home-tile .ht-ic .i { width: 22px; height: 22px; }
.home-tile.hot { border: 2px solid var(--accent); background: var(--surface-2); }
.home-tile.hot .ht-ic { background: var(--accent); color: var(--on-accent); }
.home-recent h4 { margin: 0 0 var(--sp-1); }
.home-recent ul { list-style: none; margin: 0; padding: 0; }
.home-recent li + li { border-top: 1px solid var(--line); }
.home-recent button { width: 100%; min-height: var(--hit); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-1); border: 0; background: transparent;
  color: var(--text); text-align: left; cursor: pointer; border-radius: var(--r-ctl); }
.home-recent button:hover { background: var(--hover); }
.home-recent button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-recent button small { flex: none; }
.home-recent i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); }
.home-recent i.d-info { background: var(--info); }
.home-recent i.d-ok { background: var(--ok); }
.home-recent i.d-warn { background: var(--warn); }
.home-foot { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between; color: var(--muted); font-size: var(--fs-1); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.home-engine { display: inline-flex; align-items: center; gap: var(--sp-2); }
.home-engine i { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; }
.home-engine.on i { background: var(--ok); }
.home-engine.busy i { background: var(--warn); }
@media (min-width: 760px) { .home-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .home-h { font-size: 34px; } }
/* the Home tab stays a small icon tab on narrow docks */
.tabs .tab[data-tab="home"] { flex: 0 0 auto; padding: 0 var(--sp-3); }
@media (max-width: 459px) { .tabs .tab[data-tab="home"] .i { display: inline-block; } .tabs .tab[data-tab="home"] { padding: 0 var(--sp-2); } }

/* ================================================================ 2.8 viral captions: visual pickers, picking words */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tiles.hl { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface-1);
  cursor: pointer; color: var(--text-2); font-size: var(--fs-1); text-align: center; min-width: 0; transition: border-color var(--dur-fast), background var(--dur-fast); }
.tile canvas { width: 100%; height: auto; aspect-ratio: 240 / 132; border-radius: calc(var(--r-ctl) - 2px); display: block; background: #2a333d; }
.tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px 2px; }
.tile:hover { border-color: var(--accent-line); color: var(--text); }
.tile.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prow.p-tiles > label { margin-bottom: var(--sp-2); }
.kswatch.one { gap: 7px; }
.kswatch .kcustom { position: relative; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; overflow: hidden; flex: none;
  background: conic-gradient(#ff3b3b, #ffe600, #3bff6a, #00e5ff, #9b5cff, #ff5ca8, #ff3b3b); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.kswatch .kcustom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; padding: 0; border: 0; }
.kswatch .kcustom.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.prow.p-action { display: flex; flex-direction: column; gap: var(--sp-1); align-items: stretch; }
.act-btn { width: 100%; justify-content: center; }
.act-btn.on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 2px var(--accent); }
.act-note { margin: 0; }
/* pick words to highlight */
.pickbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  border: 1px solid var(--accent); border-radius: var(--r-card); background: var(--accent-soft); }
.pickbar .pk-t { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 1 1 200px; }
.pickbar .pk-t > .i { color: var(--accent-text); width: 18px; height: 18px; flex: none; }
.pickbar .pk-t > span { display: flex; flex-direction: column; min-width: 0; }
.pickbar .pk-t small { color: var(--text-2); font-size: var(--fs-1); }
.pickbar .pk-sw { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pickbar .pk-sw .sw { width: 28px; height: 28px; }
.pickbar .pk-sw .sw.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.pickbar .pk-btns { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-left: auto; }
#pv-pick.on, #kw-pick.on { box-shadow: inset 0 0 0 2px var(--accent); }
#pv-pick.on { color: var(--accent-text); background: var(--accent-soft); }
.hl-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.hl-tools .hl-auto { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* the caption list: highlighted words */
.cap-sum .cw.k { font-weight: var(--fw-b); color: var(--text); text-decoration: underline; text-decoration-color: var(--kc, var(--accent)); text-decoration-thickness: 3px; text-underline-offset: 3px; }
body.picking #cap-list .cw, body.picking #cap-list .chip { cursor: pointer; border-radius: 4px; }
body.picking #cap-list .cw:hover { background: var(--hover); outline: 1px solid var(--accent-line); }
body.picking .cap-sum { display: flex; }
body.picking .cap-sum .cs-x { white-space: normal; }
/* the word popover */
.wp-head { display: flex; align-items: flex-start; gap: var(--sp-2); }
.wp-head .wp-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wp-hl { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 40px; padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2);
  border-radius: var(--r-ctl); border: 1px solid var(--line-2); background: var(--surface-1); color: var(--text); cursor: pointer; font-weight: var(--fw-b); text-align: left; }
.wp-hl .i { color: var(--accent-text); flex: none; }
.wp-hl .wp-hl-t { flex: 1; }
.wp-hl .wp-sw { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.wp-hl.on { border-color: var(--accent); background: var(--accent-soft); }
.wp-hl:hover { border-color: var(--accent-line); }
.wp-lbl { margin: 0 0 4px; }
.wpop .swatches .sw.on { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent); }
.wpop .btn.on { box-shadow: inset 0 0 0 2px var(--accent); color: var(--text); }
.wp-foot .sp { flex: 1; }

/* ================================================================ 2.8 studio redesign
   Wide docks (1180 × 560 and up) are the Studio: an app bar, then Captions | Preview | Style, each column with its own
   header and scroll. Narrow docks keep the tabs and share the parts (look card, scope bar, find a setting). */
.linkbtn { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--hit-sm); padding: 0 var(--sp-1); border: 0; background: none; color: var(--text-2);
  font-size: var(--fs-2); cursor: pointer; border-radius: var(--r-ctl); white-space: nowrap; }
.linkbtn:hover { color: var(--text); background: var(--hover); }
.linkbtn .i { width: 14px; height: 14px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--sp-3); border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface-1);
  color: var(--text-2); font-size: var(--fs-2); font-weight: var(--fw-b); cursor: pointer; white-space: nowrap; flex: none; }
.pill .i { width: 14px; height: 14px; }
.pill:hover { border-color: var(--line-3); color: var(--text); }
.pill.warn { border-color: transparent; background: var(--key-soft); color: var(--key-text); }
.pill.warn .i { color: var(--key); }
.pill.warn:hover { background: var(--key-strong); }
.pill[aria-pressed="true"] .i { color: var(--accent); }
.dd { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--sp-2) 0 var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  background: var(--surface-1); color: var(--text); font-size: var(--fs-2); cursor: pointer; white-space: nowrap; min-width: 0; }
.dd:hover { border-color: var(--line-3); }
.dd[aria-expanded="true"] { border-color: var(--accent-line); background: var(--accent-soft); }
.dd .dd-k { color: var(--muted); }
.dd b { font-weight: var(--fw-b); }
.dd .i { width: 14px; height: 14px; color: var(--muted); }
/* parts that only the wide Studio shows */
.vm-lbl, .vm-dd, .tp-tc, #pv-follow-btn, #pv-safe-btn, #pv-bg-btn, .captools, .capfoot, .le-head, .sb-l, #scope-btn, #scope-more, .sb-sp { display: none; }
.appacts, .appadd { display: none; }
/* scope bar (shared by Look, Motion and Layout) */
.scopebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.scopebar > #scope { flex: 1 1 100%; }
.scopebar > .scope-tools { flex: 1 1 auto; margin: 0; gap: var(--sp-1); }
.scopebar > #my-save { width: auto; flex: 0 0 auto; min-height: var(--hit-sm); font-size: var(--fs-2); padding: 0 var(--sp-2); gap: var(--sp-1); }
.scopebar > #my-row, .scopebar > #scope-hint { flex: 1 1 100%; margin: 0; }
.scopebar > #my-row:not(.hidden) { display: flex; gap: var(--sp-2); }
#scope-back { color: var(--accent-text); }
body.sub-captions #scopebar, body.sub-export #scopebar { display: none; }
.scope-mini { display: none; }
/* the look you are using */
.lookcur { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-1); }
.lookcur canvas { width: 72px; height: 40px; border-radius: var(--r-ctl); flex: none; background: var(--thumb-bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.lc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.lc-t b { font-size: var(--fs-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-t small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lookcur .btn { flex: none; gap: 6px; display: inline-flex; align-items: center; }
.gsearch { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 160px; min-height: var(--hit-sm); padding: 0 var(--sp-2); border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--field); }
.gsearch .i { color: var(--dim); width: 14px; height: 14px; }
.gsearch input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; min-height: 26px; box-shadow: none; }
.gsearch input:focus { outline: none; }
.gsearch:focus-within { border-color: var(--accent-line); }
#gal-filter .lg { display: none; }
.pc-tag { display: none; }
/* find a setting */
.ifind { display: flex; align-items: center; gap: var(--sp-2); min-height: 34px; padding: 0 var(--sp-2) 0 var(--sp-3); margin: 0 0 var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--field); cursor: text; }
.ifind .i { color: var(--dim); width: 14px; height: 14px; }
.ifind input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; min-height: 30px; box-shadow: none; }
.ifind input:focus { outline: none; }
.ifind:focus-within { border-color: var(--accent-line); }
.ifind kbd { color: var(--muted); }
.inspector.finding .fold.prop { display: none; }
.inspector.finding .fold.prop.found { display: block; }
.inspector.finding .prow:not(.found) { display: none !important; }
.ifind-none { margin: 0 0 var(--sp-3); }
/* caption rows: key words in yellow, words to check underlined */
.cap-sum .cw.low { text-decoration: underline dotted var(--warn); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cap-sum .cw.k.low { text-decoration-line: underline; }

@media (min-width: 1180px) and (min-height: 560px) {
  /* ---- app bar ---- */
  body { padding: 0; }
  body > .topbar { height: 48px; margin: 0; padding: 0 var(--sp-3) 0 var(--sp-4); gap: var(--sp-3); border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 30; }
  .brand { font-weight: var(--fw-b); }
  .brand small { display: none; }
  .topbar > .tabs { align-self: stretch; height: auto; margin: 0 auto 0 var(--sp-5); padding: 0; gap: var(--sp-1); background: none; border: 0; border-radius: 0; box-shadow: none; }
  .topbar > .tabs > .seg-ind { display: none; }
  .topbar > .tabs > button { height: 100%; min-height: 0; padding: 0 var(--sp-3); border-radius: 0; background: none !important; box-shadow: none !important; color: var(--text-2); gap: var(--sp-2); font-size: var(--fs-3); }
  .topbar > .tabs > button:hover { color: var(--text); }
  .topbar > .tabs > button.active { color: var(--text); font-weight: var(--fw-b); }
  .topbar > .tabs > button.active::after { content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
  .topright { gap: var(--sp-2); }
  .appacts { display: flex; align-items: center; gap: 2px; padding-right: var(--sp-2); border-right: 1px solid var(--line); }
  .appacts .icon { min-width: 32px; min-height: 32px; }
  .appadd { display: flex; }
  .appadd #cap-add { width: auto; min-height: 32px; padding: 0 var(--sp-4); gap: var(--sp-2); display: inline-flex; align-items: center; font-size: var(--fs-3); font-weight: var(--fw-b); border-radius: var(--r-ctl); }
  body:not([data-tab="cap"]) .appacts, body:not([data-tab="cap"]) .appadd, body:not(.cap-open) .appacts, body:not(.cap-open) .appadd { display: none; }
  .status { height: 28px; padding: 0 var(--sp-3); }
  #help { width: 32px; height: 32px; }
  #engine-info, #setup-card { margin-top: var(--sp-3); }
  /* every other tab keeps its padding; Captions runs edge to edge */
  body > main.tabpane { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  #tab-cap { padding: 0; }
  #tab-cap > .stepper { margin-top: var(--sp-4); }
  body.cap-open #cap-flow, body.cap-open #cap-hint { display: none; }

  /* ---- three columns ---- */
  #cap-editor > .studio { display: grid; grid-template-columns: 360px minmax(420px, 1fr) 400px; grid-template-rows: auto auto minmax(0, 1fr); gap: 0; align-items: stretch; }
  .stage { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; position: relative; top: auto; z-index: auto;
    background: var(--surface-0); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .side { display: contents; }
  .side > .subpane[data-sub="captions"], .side > .subpane[data-sub="captions"].hidden { grid-column: 1; grid-row: 1 / span 3; display: flex !important; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; position: relative; }
  .side > .subpane:not([data-sub="captions"]) { grid-column: 3; grid-row: 3; overflow-y: auto; min-height: 0; padding: var(--sp-3) var(--sp-4) var(--sp-5); }
  body.sub-export .side > .subpane[data-sub="export"] { grid-row: 2 / span 2; }
  .side > .cap-cta { display: none; }

  /* ---- Captions column ---- */
  .colhead { display: flex; align-items: center; gap: 2px; height: 40px; margin: 0; padding: 0 var(--sp-2) 0 var(--sp-4); border-bottom: 1px solid var(--line); flex: none; font-size: var(--fs-3); }
  .colhead > b { font-weight: var(--fw-b); margin-right: 6px; }
  .colhead #cap-colmeta { color: var(--dim); font-size: var(--fs-3); }
  .colhead .sp { flex: 1; }
  .colhead .pill { margin-right: var(--sp-1); height: 26px; }
  .colhead .icon { min-width: 30px; min-height: 30px; }
  #ch-find[aria-pressed="true"], #ch-pick[aria-pressed="true"], #ch-more[aria-expanded="true"] { color: var(--accent); background: var(--accent-soft); }
  #ch-menu { position: absolute; top: 38px; right: var(--sp-2); left: auto; }
  .captools { display: flex; align-items: center; gap: var(--sp-2); height: 48px; padding: 0 var(--sp-3); border-bottom: 1px solid var(--line); flex: none; }
  #g-quick { flex: none; }
  #g-quick > button { padding: 0 var(--sp-3); font-variant-numeric: tabular-nums; }
  /* grouping, key words and caption check open from the tool row / the ⋯ menu, above the list */
  .side > .subpane[data-sub="captions"] > .block { flex: none; margin: var(--sp-2) var(--sp-3) 0; max-height: 52%; overflow-y: auto; box-shadow: var(--shadow-2); }
  .wfold:not(.open) { display: none !important; }
  .wfold > h4 { margin-bottom: var(--sp-3) !important; }
  .wfold > h4::after { transform: rotate(-135deg) !important; margin-top: 4px; }
  .subpane[data-sub="captions"] > .texttools, .subpane[data-sub="captions"] > .hint { display: none !important; }
  #findbar { flex: none; margin: var(--sp-2) var(--sp-3) 0; }
  .caplist { flex: 1 1 0; min-height: 0; max-height: none; border: 0; border-radius: 0; background: transparent; padding: var(--sp-2); }
  .capfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-3) 0 var(--sp-2); border-top: 1px solid var(--line); flex: none; }
  .capfoot .muted { white-space: nowrap; }
  /* one line per caption: time, words; key words yellow, words to check dotted */
  #cap-list .cap { border: 0; border-radius: var(--r-ctl); margin: 0 0 2px; }
  #cap-list .cap:not(.edit):not(:focus-within) { padding: 0 var(--sp-2); min-height: 36px; display: flex; align-items: center; }
  #cap-list .cap:not(.edit):not(:focus-within):hover { background: var(--surface-1); }
  .cap-sum { width: 100%; min-height: 36px; align-items: center; gap: var(--sp-3); }
  .cap-sum .cs-t { width: 38px; font: 12px/1 var(--font-mono); color: var(--dim); }
  .cap-sum .cs-x { font: 14px/1.4 var(--font-indic); color: var(--text); }
  .cap-sum .cw.k { color: var(--key); font-weight: var(--fw-b); text-decoration: none; }
  .cap-sum .cw.k.low { text-decoration: underline dotted var(--warn); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  #cap-list .cap.cur { background: rgba(255, 138, 26, .09); box-shadow: inset 2px 0 0 var(--accent); }
  #cap-list .cap.cur .cap-sum .cs-t { color: var(--accent); }
  #cap-list .cap.has-low:not(.edit):hover .cap-sum::after { content: "check"; margin-left: auto; color: var(--dim); font-size: var(--fs-1); flex: none; }
  body.playing #cap-list .cap.cur .cap-sum::after { content: "playing"; margin-left: auto; color: var(--accent-text); font-size: var(--fs-1); flex: none; }

  /* ---- Preview column ---- */
  .stage > .seqline { height: 40px; margin: 0; padding: 0 var(--sp-2) 0 var(--sp-4); flex: none; flex-wrap: nowrap; gap: var(--sp-2); border-bottom: 1px solid var(--line); background: var(--bg); font-size: var(--fs-3); color: var(--muted); }
  #cap-seq b { color: var(--text); font-weight: var(--fw-b); margin-right: 6px; }
  .seqtools { flex-wrap: nowrap; gap: 2px; }
  .seqtools .icon { min-width: 30px; min-height: 30px; }
  #pv-safe-btn, #pv-bg-btn { display: inline-grid; place-items: center; }
  #pv-safe-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-soft); }
  .seqtools #pv-pick, .seqtools #cap-reload { display: none; }
  #pv-view > summary { width: auto; min-width: 0; gap: 4px; padding: 0 var(--sp-2); min-height: 30px; color: var(--text); font-size: var(--fs-2); font-weight: var(--fw-b); }
  #pv-view .vm-ic { display: none; }
  #pv-view .vm-lbl { display: inline; }
  #pv-view .vm-dd { display: inline-block; width: 14px; height: 14px; color: var(--muted); }
  .stage > .pickbar { flex: none; margin: var(--sp-2) var(--sp-3) 0; }
  .stage > .preview-wrap { flex: 1 1 0; min-height: 0; border: 0; border-radius: 0; background: transparent; align-items: center; padding: var(--sp-5) var(--sp-4); overflow: hidden; }
  #pv { border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line-2), 0 18px 48px rgba(0, 0, 0, .5); }
  .pv-resize { display: none; }
  .stage > .transport { flex: none; height: 52px; margin: 0; padding: 0 var(--sp-3) 0 var(--sp-4); display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, auto) minmax(0, 1fr); align-items: center; gap: var(--sp-1);
    border-top: 1px solid var(--line); background: var(--bg); }
  .transport #pv-time, .transport #pv-label { display: none; }
  .tp-tc { display: block; font: 13px/1 var(--font-mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .tp-tc span { color: var(--dim); }
  .transport .icon { min-width: 30px; min-height: 30px; }
  .transport button.play { width: 36px; height: 36px; min-width: 36px; margin: 0 var(--sp-2); background: var(--text); color: var(--bg); border: 0; }
  .transport button.play .i { fill: currentColor; stroke-width: 1.5; }
  .transport button.play:hover { background: var(--white); }
  #pv-follow-btn { display: inline-flex; justify-self: end; }
  .stage > .tl { flex: none; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--bg); position: relative; }
  .tl .tl-bar { position: absolute; top: 0; right: 0; z-index: 1; padding: 0 var(--sp-2) 0 var(--sp-3); border: 0; background: linear-gradient(90deg, transparent, var(--bg) 12px); height: 24px; gap: 2px; }
  .tl .tl-bar .icon { min-width: 22px; min-height: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--text-2); font-size: var(--fs-3); }
  .tl .tl-bar .icon:hover { color: var(--text); background: var(--hover); }
  .tl .tl-bar [data-z="fit"], .tl .tl-bar .tl-info { display: none; }

  /* ---- Style column ---- */
  .side > .subtabs { grid-column: 3; grid-row: 1; height: 40px; margin: 0; padding: 0 var(--sp-2); position: relative; top: auto; justify-content: flex-start; gap: 0;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--bg); box-shadow: none; overflow: visible; -webkit-mask-image: none !important; }
  .side > .subtabs > .seg-ind { display: none; }
  .side > .subtabs > button { flex: none; height: 40px; min-height: 0; padding: 0 var(--sp-3); border-radius: 0; background: none !important; box-shadow: none !important; color: var(--text-2); font-size: var(--fs-3); }
  .side > .subtabs > button:hover { color: var(--text); }
  .side > .subtabs > button.active { color: var(--text); font-weight: var(--fw-b); }
  .side > .subtabs > button.active::after { content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
  #scopebar { grid-column: 3; grid-row: 2; margin: 0; height: 48px; padding: 0 var(--sp-2) 0 var(--sp-4); flex-wrap: nowrap; gap: var(--sp-2); position: relative; z-index: 6;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  #scopebar .sb-l { display: inline; color: var(--muted); font-size: var(--fs-2); white-space: nowrap; }
  #scopebar #scope-btn { display: inline-flex; max-width: 190px; }
  #scopebar #scope-btn #scope-lbl { overflow: hidden; text-overflow: ellipsis; }
  #scopebar .sb-sp { display: block; flex: 1; }
  #scopebar #scope-more { display: inline-grid; place-items: center; min-width: 30px; min-height: 30px; }
  #scopebar.more-open #scope-more { color: var(--accent); background: var(--accent-soft); }
  #scopebar #scope-back { flex: none; }
  #scopebar #my-save { min-width: 30px; min-height: 30px; padding: 0; border-color: transparent; background: transparent; color: var(--text-2); justify-content: center; }
  #scopebar #my-save:hover { color: var(--text); background: var(--hover); }
  #scopebar #my-save .lbl { display: none; }
  #scopebar > #scope { display: none; position: absolute; top: 42px; left: 76px; z-index: var(--z-pop); width: 230px; flex-direction: column; gap: 2px; padding: var(--sp-1);
    background: var(--surface-2); border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-pop); }
  #scopebar.scope-open > #scope { display: flex; }
  #scope > .seg-ind { display: none; }
  #scope > button { flex: none; justify-content: flex-start; text-align: left; min-height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-ctl); font-size: var(--fs-3); }
  #scope > button .sm { display: none; }
  #scope > button .lg { display: inline; }
  #scope.has-ind > button.active, #scope > button.active { background: var(--accent-soft); color: var(--text); box-shadow: none; }
  #scopebar > .scope-tools { display: none; position: absolute; top: 42px; right: var(--sp-2); z-index: var(--z-pop); width: 200px; flex-direction: column; gap: 2px; padding: var(--sp-1);
    background: var(--surface-2); border-radius: var(--r-card); box-shadow: var(--shadow-pop); }
  #scopebar.more-open > .scope-tools { display: flex; }
  #scopebar > .scope-tools .ghost { width: 100%; flex: none; justify-content: flex-start; border: 0; background: transparent; min-height: 32px; font-size: var(--fs-3); }
  #scopebar > .scope-tools .ghost:hover { background: var(--hover); }
  #scopebar > #scope-hint { display: none; }
  #scopebar > #my-row:not(.hidden) { position: absolute; top: 42px; right: var(--sp-2); z-index: var(--z-pop); width: 300px; padding: var(--sp-2); background: var(--surface-2); border-radius: var(--r-card); box-shadow: var(--shadow-pop); }
  body.sub-export #scopebar { display: none; }

  /* Look › browse: the look in use, search, groups, two looks a row */
  .lookcur { padding: 0 0 var(--sp-3); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .look-browse { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
  .look-browse > h4 { display: none; }
  .look-browse .galtools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--sp-3); }
  .look-browse .galtools > * { flex: none; min-width: 0; }
  .gsearch { flex: none; min-height: 36px; }
  #gal-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
  #gal-filter::-webkit-scrollbar { display: none; }
  #gal-filter button { flex: none; border-radius: var(--r-pill); white-space: nowrap; }
  #gal-filter .lg { display: inline; }
  #gal-filter .sm { display: none; }
  #gal-filter button:not(.active) .i { display: none; }
  .look-browse .gallery2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-2); max-height: none; overflow: visible; padding: 0; margin: var(--sp-3) 0; }
  .gallery2 .ghead { text-transform: none; letter-spacing: 0; font-size: var(--fs-2); color: var(--text); font-weight: var(--fw-b); margin: var(--sp-2) 0 0; gap: var(--sp-2); }
  .gallery2 .ghead .i { display: none; }
  .gallery2 .ghead.trend, .gallery2 .ghead.mine { color: var(--text); }
  .gallery2 .ghead { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
  .gallery2 .ghead .gm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .gallery2 .ghead small, .gallery2 .ghead .gnew, .gallery2 .ghead .gm { color: var(--muted); font-weight: var(--fw); font-size: var(--fs-2); margin: 0; }
  .gallery2 .ghead.sec { font-size: var(--fs-3); margin-top: var(--sp-3); }
  .look-browse .pcard { background: transparent; border: 0; border-radius: 0; overflow: visible; cursor: pointer; }
  .look-browse .pcard:hover { transform: none; }
  .look-browse .pcard canvas { border-radius: var(--r-card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--dur-fast); }
  .look-browse .pcard:hover canvas { box-shadow: 0 0 0 1px var(--line-3); }
  .look-browse .pcard.sel { box-shadow: none; }
  .look-browse .pcard.sel canvas { box-shadow: 0 0 0 2px var(--accent); }
  .look-browse .pcard .pc-check { top: 8px; left: 8px; }
  .look-browse .pc-meta { padding: 6px 2px 0; gap: var(--sp-2); align-items: baseline; }
  .look-browse .pc-meta b { font-size: var(--fs-3); flex: 1 1 auto; min-width: 0; }
  .look-browse .pc-tag { display: block; flex: 0 1 auto; min-width: 0; color: var(--muted); font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .look-browse .pc-fav { position: absolute; top: 6px; right: 6px; background: rgba(0, 0, 0, .5); color: var(--white); opacity: 0; transition: opacity var(--dur-fast); }
  .look-browse .pcard:hover .pc-fav, .look-browse .pc-fav.on, .look-browse .pc-fav:focus-visible { opacity: 1; }
  .look-browse .pc-fav.on { color: var(--key); }
  .look-browse .pc-tags, .look-browse .pc-btns { display: none; }
  .look-browse .pcard.is-new::before { top: auto; bottom: 30px; left: 6px; }
  /* Look › edit: every setting of the look, one section at a time */
  #look-pane[data-view="edit"] > .lookcur, #look-pane[data-view="edit"] > .look-browse { display: none; }
  #look-pane[data-view="browse"] > .look-edit { display: none; }
  .le-head { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
  .le-head .icon { min-width: 28px; min-height: 28px; }
  .le-head canvas { width: 56px; height: 31px; border-radius: 4px; flex: none; background: var(--thumb-bg); box-shadow: inset 0 0 0 1px var(--line-2); }
  .le-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .le-t b { font-size: var(--fs-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .le-t small { color: var(--muted); }
  .le-head .sp { flex: 1; }
  /* the inspector: flat sections with a chevron, a title and what is set */
  .side .inspector .fold.prop { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
  .side .inspector .fold.prop > summary { min-height: 38px; padding: 0 2px; margin: 0; justify-content: flex-start; gap: var(--sp-2); font-size: var(--fs-3); letter-spacing: 0; text-transform: none; color: var(--text); font-weight: var(--fw-b); border-radius: var(--r-ctl); }
  .side .inspector .fold.prop > summary::after { display: none; }
  .side .inspector .fold.prop > summary::before { content: ""; width: 6px; height: 6px; flex: none; margin: 0 6px 0 4px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease-enter); }
  .side .inspector .fold.prop[open] > summary::before { transform: rotate(45deg); }
  .side .inspector .fold.prop .fsum { margin-left: auto; font-weight: var(--fw); color: var(--muted); font-size: var(--fs-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
  .side .inspector .fold.prop[open] .fsum { display: none; }
  .side .inspector .fold.prop > .props { padding: var(--sp-1) 2px var(--sp-4); }
}
/* compact Studio: 1180 – 1439 wide */
@media (min-width: 1180px) and (max-width: 1439px) and (min-height: 560px) {
  #cap-editor > .studio { grid-template-columns: 300px minmax(380px, 1fr) 360px; }
  body > .topbar { height: 40px; }
  .topbar > .tabs { margin-left: var(--sp-4); }
  .topbar > .tabs > button { padding: 0 var(--sp-2); }
  .topbar > .tabs > button.active::after { left: var(--sp-2); right: var(--sp-2); }
  .colhead, .stage > .seqline, .side > .subtabs, .side > .subtabs > button { height: 36px; }
  .captools { height: 40px; }
  #scopebar { height: 44px; }
  .stage > .transport { height: 44px; }
  .transport button.play { width: 32px; height: 32px; min-width: 32px; }
  .cap-sum, #cap-list .cap:not(.edit):not(:focus-within) { min-height: 32px; }
  .status span { max-width: 120px; }
  .tp-tc { font-size: 12px; }
  #pv-follow-btn { width: 30px; padding: 0; justify-content: center; }
  #pv-follow-btn span { display: none; }
}

/* ---------------------------------------------------------------- 2.8 studio: fixing a word, the word form */
.tx-wrap { position: relative; min-width: 0; }
.tx-mirror { display: none; }
.wbar { display: none; }
.tm2 [data-a="merge"], .tm2 [data-a="del"] { display: none; }
.p-hint { color: var(--muted); font-size: var(--fs-1); margin-left: auto; margin-right: var(--sp-2); white-space: nowrap; }
.prow > label.sw-row .p-hint + .switch { margin-left: 0; }
.acts { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.emo-row { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.emo-row .emo.on { border-color: var(--accent); background: var(--accent-soft); }
.emo-row .emo-in { width: 56px; min-height: var(--hit-sm); text-align: center; }
.kswatch button.nonesw { background: linear-gradient(135deg, var(--surface-0) 44%, var(--bad) 44%, var(--bad) 56%, var(--surface-0) 56%); box-shadow: inset 0 0 0 1px var(--line-3); }
.kswatch button.nonesw.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.fold.prop.flat > .fhead { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.fold.prop.flat > .fhead b { font-size: var(--fs-3); }
.fold.prop.flat > .fhead small { color: var(--muted); font-size: var(--fs-2); }
.wb-colors { position: fixed; top: 0; left: 0; right: auto; min-width: 0; display: flex; gap: 6px; padding: var(--sp-2); flex-wrap: wrap; max-width: 260px; }
.wb-colors.hidden { display: none; }
.wb-colors .sw { width: 26px; height: 26px; }
.wb-colors .sw.on { box-shadow: 0 0 0 2px var(--surface-2), 0 0 0 4px var(--accent); }

@media (min-width: 1180px) and (min-height: 560px) {
  /* the caption being edited: time, its text with the chosen word boxed, the word's toolbar, start → end */
  #cap-list .cap.edit { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: var(--sp-3); row-gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-2);
    margin: 2px 0 4px; border-radius: 8px; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--accent); }
  #cap-list .cap.edit > .cap-sum { display: contents; }
  #cap-list .cap.edit > .cap-sum .cs-x { display: none; }
  #cap-list .cap.edit > .cap-sum .cs-t { grid-column: 1; grid-row: 1; align-self: start; padding-top: 8px; color: var(--accent); }
  #cap-list .cap.edit > .cap-sum::after { display: none; }
  #cap-list .cap.edit > .tx-wrap { grid-column: 2; grid-row: 1; }
  #cap-list .cap.edit > .wbar { grid-column: 2; grid-row: 2; }
  #cap-list .cap.edit > .tm { grid-column: 2; grid-row: 3; margin: 0; min-height: 28px; flex-wrap: nowrap; gap: var(--sp-2); }
  #cap-list .cap.edit > .tm2 { grid-column: 1 / -1; grid-row: 4; margin: 0; }
  #cap-list .cap.edit > .chips { display: none; }
  .cap.edit .tx-mirror, .cap.edit .tx-wrap > textarea { margin: 0; padding: 4px 6px; font: 14px/1.5 var(--font-indic); letter-spacing: normal; border: 1px solid transparent; border-radius: var(--r-ctl);
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
  .cap.edit .tx-mirror { display: block; min-height: 32px; color: var(--text); }
  .cap.edit .tx-wrap > textarea { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; resize: none; overflow: hidden; background: transparent; color: transparent;
    caret-color: var(--text); box-shadow: none; }
  .cap.edit .tx-wrap > textarea:focus { border-color: var(--line-2); background: transparent; }
  .cap.edit .tx-wrap > textarea::selection { background: rgba(255, 138, 26, .35); color: transparent; }
  .tx-mirror .mw.k { color: var(--key); }
  .tx-mirror .mw.low { text-decoration: underline dotted var(--warn); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .tx-mirror .mw.on { border-radius: 3px; background: rgba(255, 138, 26, .14); box-shadow: 0 0 0 1.5px var(--accent); }
  /* the chosen word's toolbar */
  .cap.edit .wbar { display: inline-flex; justify-self: start; align-items: center; gap: 2px; max-width: 100%; padding: 2px; border-radius: var(--r-ctl); background: var(--surface-2); }
  .cap.edit .wbar.empty { background: none; padding: 0 2px; color: var(--muted); font-size: var(--fs-2); }
  .wbar button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--text-2);
    font-size: var(--fs-2); cursor: pointer; white-space: nowrap; }
  .wbar button + button { box-shadow: -1px 0 0 var(--line); }
  .wbar button:hover { background: var(--hover); color: var(--text); }
  .wbar button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
  .wbar button[aria-pressed="true"] + button { box-shadow: none; }
  .wbar button .i { width: 14px; height: 14px; }
  .wbar button[data-wb="more"] { padding: 0 6px; }
  .wbar .wb-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
  /* start → end, play, more */
  .cap.edit .tm .num, .cap.edit .tm [data-a="split"], .cap.edit .tm [data-a="merge"], .cap.edit .tm [data-a="del"] { display: none; }
  .cap.edit .tm input { width: 76px; height: 26px; min-height: 26px; padding: 0; text-align: center; font: 12px/1 var(--font-mono); color: var(--text); background: var(--field); border: 1px solid var(--line-2); border-radius: var(--r-ctl); }
  .cap.edit .tm .dash { font-size: 0; padding: 0; }
  .cap.edit .tm .dash::after { content: "\2192"; font-size: var(--fs-2); color: var(--dim); }
  .cap.edit .tm .rb { min-width: 28px; min-height: 28px; }
  .cap.edit .tm2 [data-a="merge"], .cap.edit .tm2 [data-a="del"] { display: inline-flex; }
  /* picking words: every caption is one clickable line again */
  body.picking #cap-list .cap.edit { display: flex; align-items: center; padding: 0 var(--sp-2); box-shadow: none; background: transparent; }
  body.picking #cap-list .cap.edit > :not(.cap-sum) { display: none !important; }
  body.picking #cap-list .cap.edit > .cap-sum { display: flex; }
  body.picking #cap-list .cap.edit > .cap-sum .cs-x { display: block; }
  body.picking #cap-list .cap.edit > .cap-sum .cs-t { padding-top: 0; }

  /* Look while a word is chosen: only the word form */
  #look-pane[data-scope="word"] > .lookcur, #look-pane[data-scope="word"] > .look-browse, #look-pane[data-scope="word"] .le-head, #look-pane[data-scope="word"] .ifind { display: none; }
  #look-pane[data-scope="word"] > .look-edit { display: block; }
  /* inspector rows: the label on the left, the control on the right (tiles, layers and buttons stay full width) */
  .side .inspector .prow { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; column-gap: var(--sp-3); margin: 0; padding: 6px 0; min-height: 44px; }
  .side .inspector .prow + .prow { border-top: 1px solid var(--line); }
  .side .inspector .prow > label { margin: 0; color: var(--text-2); font-size: var(--fs-2); line-height: 1.3; }
  .side .inspector .prow.p-tiles, .side .inspector .prow.p-strokes, .side .inspector .prow.p-shadows, .side .inspector .prow.p-stops, .side .inspector .prow.p-action,
  .side .inspector .prow.p-acts, .side .inspector .prow.p-toggle, .side .inspector .prow.p-toggleobj, .side .inspector .prow.p-colors, .side .inspector .prow.p-emojis { display: block; }
  .side .inspector .prow.p-tiles > label { margin-bottom: var(--sp-2); color: var(--text); }
  .side .inspector .prow.p-emojis { border-top: 0; padding-top: 0; }
  .side .inspector .prow.p-acts { border-top: 0; padding-top: var(--sp-3); }
  .side .inspector .prow > label.sw-row { min-height: 32px; }
  .side .inspector .prow > label.sw-row > span { color: var(--text-2); font-size: var(--fs-2); }
  .side .inspector .prow .seg.small > button { min-height: 28px; font-size: var(--fs-2); }
  .side .inspector .prow .pin .pv { min-width: 46px; background: none; border: 0; font-family: var(--font-mono); text-align: right; padding: 0; }
  .side .inspector .fold.prop.flat { border-bottom: 0; }
}

/* ---------------------------------------------------------------- 2.8 studio: Look, Motion, Layout and Export parts (every dock) */
/* section rows: a value on the right of a folded section, a link on the right of an open one */
.fold.prop > summary .ft { flex: none; }
.fold.prop > summary .fsum { margin-left: auto; font-weight: var(--fw); color: var(--muted); font-size: var(--fs-1); text-transform: none; letter-spacing: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.fold.prop[open] > summary .fsum { display: none; }
.fold.prop > summary .flink { margin-left: auto; display: inline-flex; align-items: center; min-height: 24px; color: var(--accent-text); font-size: var(--fs-2); font-weight: var(--fw-b); text-transform: none; letter-spacing: 0; cursor: pointer; padding: 0 6px; border-radius: var(--r-ctl); }
.fold.prop > summary .flink:hover { background: var(--accent-soft); }
.fold.prop:not([open]) > summary .flink { display: none; }
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.insp-head { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-1); }
.insp-head b { font-size: var(--fs-3); }
.insp-head small { color: var(--muted); font-size: var(--fs-2); }
/* tiles: six at a time, "All N" for the rest */
.t-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: var(--fs-2); }
.t-head > span { flex: 1; min-width: 0; }
.t-head small { color: var(--muted); margin-left: 4px; }
.t-head .t-all { color: var(--accent-text); font-weight: var(--fw-b); min-height: 24px; }
.tiles.clamp > .tile:nth-child(n+7):not(.on) { display: none; }
/* the reel recipe: one button that sets every animation */
.prow.recipe { position: relative; }
.prow.recipe .pre-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--accent); pointer-events: none; display: flex; }
.prow.recipe .presel { width: 100%; min-height: 38px; padding: 0 var(--sp-3) 0 36px; border: 1px solid var(--accent-line); border-radius: var(--r-card); background-color: var(--accent-soft);
  color: var(--text); font-weight: var(--fw-b); cursor: pointer; }
.prow.recipe .presel:hover { border-color: var(--accent); }
/* toggles with a second line */
.sw-row > span small { display: block; color: var(--muted); font-size: var(--fs-1); margin-top: 1px; }
/* numbers in a field: X 50% · Y 68% · ↻ 0° */
.nins { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); min-width: 0; }
.nin { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 var(--sp-2); border: 1px solid var(--line-2); border-radius: var(--r-ctl); background: var(--field); cursor: text; min-width: 0; }
.nin:focus-within { border-color: var(--accent-line); }
.nin > span, .nin > .i { color: var(--muted); font-size: var(--fs-2); width: 14px; height: 14px; flex: none; }
.nin input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; padding: 0; min-height: 26px; font: 12px var(--font-mono); color: var(--text); box-shadow: none; }
.nin input:focus { outline: none; }
.nin > i { font-style: normal; color: var(--dim); font: 12px var(--font-mono); }
/* icon buttons for alignment */
.isegs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.iseg { flex: none; }
.iseg > button { min-width: 32px; padding: 0 6px; }
.iseg > button .i { width: 16px; height: 16px; }
/* where the caption sits */
.place { display: flex; gap: var(--sp-4); align-items: stretch; margin: 0 0 var(--sp-2); }
.pl-frame { position: relative; flex: none; width: 128px; aspect-ratio: 9 / 16; max-height: 260px; border-radius: 10px; overflow: hidden; touch-action: none;
  background: linear-gradient(180deg, #4a5868, #1f262e); box-shadow: inset 0 0 0 1px var(--line-2); }
.pl-frame:not(.tall) { width: 168px; }
.pl-safe { position: absolute; border: 1px dashed rgba(255, 255, 255, .45); border-radius: 4px; pointer-events: none; }
.pl-ui { position: absolute; inset: 0; pointer-events: none; }
.pl-frame:not(.tall) .pl-ui { display: none; }
.pl-ui b { position: absolute; right: 5%; width: 7%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.pl-ui b:nth-child(1) { top: 58%; } .pl-ui b:nth-child(2) { top: 66%; } .pl-ui b:nth-child(3) { top: 74%; }
.pl-ui::after { content: ""; position: absolute; left: 6%; bottom: 7%; width: 46%; height: 2.4%; border-radius: 3px; background: rgba(255, 255, 255, .35); box-shadow: 0 -9px 0 -2px rgba(255, 255, 255, .25); }
.pl-cap { position: absolute; display: flex; align-items: center; justify-content: center; min-height: 8px; padding: 0 2px; border-radius: 3px; cursor: grab; overflow: hidden;
  background: rgba(255, 138, 26, .22); box-shadow: 0 0 0 1.5px var(--accent); transition: box-shadow var(--dur-fast); }
.pl-cap.drag { cursor: grabbing; }
.pl-cap.out { background: rgba(245, 181, 68, .25); box-shadow: 0 0 0 1.5px var(--warn); }
.pl-cap:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.pl-cap span { font: 700 7px/1.1 var(--font); color: var(--white); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); pointer-events: none; }
.pl-rail { position: relative; flex: 1; min-width: 0; }
.pl-line { position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--line-2); }
.pl-snap { position: absolute; left: 0; display: flex; align-items: center; gap: var(--sp-2); transform: translateY(-50%); border: 0; background: none; color: var(--text-2); cursor: pointer;
  padding: 2px 4px 2px 0; font-size: var(--fs-2); min-height: 24px; border-radius: var(--r-ctl); }
.pl-snap i { width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line-3); flex: none; }
.pl-snap b { font: 12px var(--font-mono); color: var(--dim); font-weight: var(--fw); }
.pl-snap:hover { color: var(--text); }
.pl-snap.on { color: var(--text); }
.pl-snap.on i { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), inset 0 0 0 4px var(--bg); }
.pl-snap.on b { color: var(--accent-text); }
/* says what is wrong, then one button that fixes it */
.swarn { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-card); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.swarn-i { color: var(--warn); display: flex; flex: none; }
.swarn-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.swarn-t b { color: var(--warn-text); font-size: var(--fs-2); }
.swarn-t small { color: var(--text-2); font-size: var(--fs-1); line-height: 1.35; }
.swarn .btn { flex: none; width: auto; }
/* Export: into which sequence, the outputs, what each keeps, the checklist */
.ex-into { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: 0 0 var(--sp-3); font-size: var(--fs-2); }
.ex-seq { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--sp-3); border-radius: var(--r-ctl); background: var(--surface-1); border: 1px solid var(--line-2); font-weight: var(--fw-b); color: var(--text);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obadge { font-style: normal; display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-text); font-size: 10px; font-weight: var(--fw-b);
  letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.okeeps { display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--sp-3); margin-top: var(--sp-2); }
.okeeps > span { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--text-2); min-width: 0; }
.okeeps .i { width: 14px; height: 14px; flex: none; }
.okeeps .yes .i { color: var(--ok); }
.okeeps .no { color: var(--dim); }
.okeeps .no .i { color: var(--dim); }
#tab-cap #ex-keeps { display: none; }
.ex-check { margin: var(--sp-4) 0 var(--sp-3); }
.exc-h { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.exc-h b { font-size: var(--fs-3); }
.exc-h small { color: var(--muted); font-size: var(--fs-2); }
.exc-i { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.exc-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.exc-ic .i { width: 14px; height: 14px; }
.exc-i.warn .exc-ic { background: var(--warn-soft); color: var(--warn); }
.exc-i.ok .exc-ic { background: var(--ok-soft); color: var(--ok); }
.exc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.exc-t b { font-size: var(--fs-2); }
.exc-t small { color: var(--muted); font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; }
.exc-i .btn { flex: none; width: auto; }
.exc-i.warn .btn { color: var(--warn-text); border-color: var(--warn-line); background: var(--warn-soft); }
#ex-go { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }

@media (min-width: 1180px) and (min-height: 560px) {
  .side .inspector .t-head { margin-bottom: var(--sp-2); font-size: var(--fs-3); color: var(--text); }
  .side .inspector .t-head small { font-size: var(--fs-2); }
  .side .inspector .prow.p-tiles .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .side .inspector .prow.recipe, .side .inspector .prow.p-place, .side .inspector .prow.p-safewarn { display: block; border-top: 0; }
  .side .inspector .prow.p-safewarn { padding: 0 0 var(--sp-2); }
  .side .inspector .kswatch { gap: 6px; }
  .side .inspector .kswatch button, .side .inspector .kswatch .kcustom { width: 22px; height: 22px; }
  .side .inspector .fold.prop.flat + .fold.prop.flat { margin-top: var(--sp-3); }
  .side .inspector .fold.prop.flat > .fhead { margin: var(--sp-2) 0 var(--sp-1); }
  .side .inspector .fp-btn { min-height: 32px; padding: 0 var(--sp-3); }
  .side .inspector .fp-btn .fp-name { font-size: var(--fs-3); }
  .side .inspector .prow select { min-height: 30px; }
  .side .inspector .insp-head { margin-top: var(--sp-5); }
  /* Export */
  .subpane[data-sub="export"] > .block { background: none; border: 0; box-shadow: none; padding: 0; }
  .subpane[data-sub="export"] > .block > h4 { text-transform: none; letter-spacing: 0; font-size: var(--fs-3); color: var(--text); margin-bottom: var(--sp-2); }
  .subpane[data-sub="export"] .optcards button { padding: var(--sp-3) var(--sp-3) var(--sp-3) 38px; border-radius: var(--r-card); }
  .subpane[data-sub="export"] .optcards button.active { background: rgba(255, 138, 26, .07); }
  .subpane[data-sub="export"] .optcards button::before { top: 16px; margin-top: 0; }
  .subpane[data-sub="export"] #ex-go { min-height: 44px; font-size: var(--fs-4); }
}

/* ---------------------------------------------------------------- 2.8.1 Caption properties: always in view on Look */
.qprops { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-1); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-1); }
.qp-head { display: flex; align-items: baseline; gap: var(--sp-2); min-height: 28px; }
.qp-head b { font-size: var(--fs-3); }
.qp-head small { color: var(--muted); font-size: var(--fs-2); }
.qp-head .sp { flex: 1; }
.qp-head .linkbtn { color: var(--accent-text); font-weight: var(--fw-b); }
.qprops .inspector .fold.prop.flat { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
#look-pane[data-scope="word"] > .qprops { display: none; }
@media (min-width: 1180px) and (min-height: 560px) {
  .qprops { padding: var(--sp-2) 0 var(--sp-2); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  #look-pane[data-view="edit"] > .qprops { display: none; }
}