/* Colours come from the Solar logo: navy #192c58 and the orange sun (#f7941d → #ef5a24). */
:root {
  color-scheme: light;
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #eef1f8;
  --text: #16213f;
  --heading: #192c58;
  --muted: #5c6684;
  --line: #dde3ef;
  --accent: #dd5c14;        /* buttons (white text on it) */
  --accent-text: #c24f0e;   /* orange text and links on white */
  --accent-ink: #ffffff;
  --accent-soft: #fdeee3;
  --ok: #1d8a4b;
  --ok-soft: #e2f4e9;
  --warn: #a35f00;
  --px-proxy: #1f6feb; /* the editing proxy's badge (blue), the original's (amber) */
  --px-orig: #a35f00;
  --err: #c0362c;
  --err-soft: #fbe7e5;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(25, 44, 88, .06), 0 8px 28px rgba(25, 44, 88, .06);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Dark: follows the system setting unless the user picked light with the toggle… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1226;
    --surface: #121b36;
    --surface-2: #1a2547;
    --text: #e9eef8;
    --heading: #f2f5fb;
    --muted: #9aa6c6;
    --line: #26335a;
    --accent: #f7941d;
    --accent-text: #f9a23f;
    --accent-ink: #0b1226;
    --accent-soft: #33261a;
    --ok: #55c886;
    --ok-soft: #13301f;
    --warn: #eaa93e;
    --px-proxy: #58a6ff;
    --px-orig: #eaa93e;
    --err: #ff7f72;
    --err-soft: #3a1a1c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
}
/* …or when the user picked dark with the toggle. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1226;
  --surface: #121b36;
  --surface-2: #1a2547;
  --text: #e9eef8;
  --heading: #f2f5fb;
  --muted: #9aa6c6;
  --line: #26335a;
  --accent: #f7941d;
  --accent-text: #f9a23f;
  --accent-ink: #0b1226;
  --accent-soft: #33261a;
  --ok: #55c886;
  --ok-soft: #13301f;
  --warn: #eaa93e;
  --px-proxy: #58a6ff;
  --px-orig: #eaa93e;
  --err: #ff7f72;
  --err-soft: #3a1a1c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; letter-spacing: -.01em; color: var(--heading); }
h1 { font-size: 18px; }
h2 { font-size: 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 13px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row { display: flex; align-items: center; }
.row.gap { gap: 10px; }
.between { justify-content: space-between; gap: 12px; }
.push { margin-left: auto; }

/* ---------- background scene (scenes.js): behind everything, never catches clicks */
#scene {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none; display: block;
}
/* The three main cards are 75% opaque so the scene shines through. */
:root { --card-bg: rgba(255, 255, 255, .75); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --card-bg: rgba(18, 27, 54, .75); } }
:root[data-theme="dark"] { --card-bg: rgba(18, 27, 54, .75); }
:root[data-scene="off"] { --card-bg: var(--surface); }
.layout .card { background: var(--card-bg); }
/* left column: 1. Upload, then the preview under it */
.col-left { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; min-width: 0; } /* minmax: long file names never widen the column */

/* Scene picker, next to the light/dark button */
.scene-pick { position: relative; flex: none; }
.scene-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .22); padding: 6px;
}
.scene-menu[hidden] { display: none; }
.scene-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  background: none; border: 0; border-radius: 8px; font: inherit; font-size: 14px; color: var(--text);
  text-align: left; cursor: pointer;
}
.scene-menu button:hover, .scene-menu button:focus-visible { background: var(--surface-2); outline: none; }
.scene-menu button[aria-checked="true"] { color: var(--accent-text); font-weight: 600; }
.scene-menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; }
.scene-swatch { width: 20px; height: 20px; border-radius: 50%; flex: none; border: 1px solid rgba(127, 127, 127, .3); }
.sw-galaxy { background: radial-gradient(circle at 50% 50%, #ffd27a 0 12%, #6d7fd6 30%, #1b2450 70%); }
.sw-earth { background: radial-gradient(circle at 35% 35%, #7fc0ff, #2a6fb5 45%, #2f6b3a 60%, #0d2a55); }
.sw-mars { background: radial-gradient(circle at 35% 35%, #e9a070, #b5532c 55%, #5a2412); }
.sw-venus { background: radial-gradient(circle at 35% 35%, #fbe9c4, #dcb46e 60%, #8a6a35); }
.sw-sun { background: radial-gradient(circle at 50% 50%, #fff2b0, #ffb12e 45%, #e3561a); }
.sw-nebula { background: radial-gradient(circle at 30% 40%, #e05aa0, transparent 55%), radial-gradient(circle at 70% 60%, #2fa7c0, #3a1f6e 70%); }
.sw-planets { background: radial-gradient(circle at 50% 50%, #ffcf6a 0 18%, transparent 20%), repeating-radial-gradient(circle at 50% 50%, transparent 0 3px, rgba(127, 140, 200, .55) 3px 4px), #121b36; }
.sw-off { background: var(--bg); }

/* ---------- top bar */
.topbar {
  display: flex; align-items: center; gap: 10px;
  max-width: 1180px; margin: 0 auto; padding: 18px 20px 8px;
}
.brand { display: block; flex: none; line-height: 0; border-radius: 8px; }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.logo { height: 76px; width: auto; }
.logo-for-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-for-light { display: none; }
  :root:not([data-theme="light"]) .logo-for-dark { display: block; }
}
:root[data-theme="dark"] .logo-for-light { display: none; }
:root[data-theme="dark"] .logo-for-dark { display: block; }
/* Solar Video Convert, Solar Video Edit or Solar Video Studio: the logo of the page in use */
:root:not([data-page="edit"]) .logo-edit, :root:not([data-page="studio"]) .logo-studio, :root:is([data-page="edit"], [data-page="studio"]) .logo-convert { display: none !important; }
.brand { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.theme-toggle {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--surface); color: var(--heading); border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-text); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; }

.hw-chip {
  margin-left: auto; min-width: 0;
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer;
}
.hw-chip:hover { border-color: var(--accent); }
.hw-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.gpu { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.cpu { background: var(--warn); }
.dot.err { background: var(--err); }

/* Convert / Edit switch. The Convert page has Trim, Customize, Audio and Subtitles; everything
   marked as editing only shows on the Edit page. */
.page-seg button { padding: 7px 14px; font-size: 13.5px; font-weight: 600; }
:root[data-page="convert"] :is([data-edit-only], [data-edit-section], [data-fx-section], [data-cap-section], [data-up-section]) { display: none !important; }
/* Studio (the Edit prototype) has everything Edit has; what is tried out only there is marked data-studio-only. */
:root:not([data-page="studio"]) [data-studio-only] { display: none !important; }
/* What the Studio does not need (it has its own way), marked data-no-studio. */
:root[data-page="studio"] [data-no-studio] { display: none !important; }

@media (max-width: 640px) {
  .topbar { padding: 14px 16px 6px; gap: 8px; flex-wrap: wrap; }
  .logo { height: 52px; }
  .hw-chip { padding: 7px 11px; flex: 1 1 0; }
  .topbar .page-seg { order: 10; flex: 1 0 100%; } /* its own row under the logo */
  .topbar .page-seg button { flex: 1; }
}

/* a popup under the hardware badge, over the page (it does not push the page down); app.js places it */
.hw-panel {
  position: fixed; z-index: 40; top: 76px; right: 20px; width: min(1200px, calc(100vw - 32px));
  max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain;
  background: var(--pop-bg, var(--surface)); color: var(--text); border: 1px solid var(--glass-border); border-radius: 14px;
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28), inset 0 1px 0 var(--glass-shine);
  transform-origin: top right; animation: pop-in .32s var(--spring, ease-out);
}
.hw-panel[hidden] { display: none; }
.hw-panel .inner {
  padding: 16px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;
}
.hw-panel h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hw-panel ul { margin: 0; padding: 0; list-style: none; }
.hw-panel li { font-size: 13px; padding: 2px 0; display: flex; gap: 8px; align-items: baseline; }
.tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.no { background: var(--surface-2); color: var(--muted); opacity: .75; }

.banner { max-width: 1140px; margin: 12px auto 0; padding: 12px 16px; border-radius: 10px; }
.banner.error { background: var(--err-soft); color: var(--err); white-space: pre-line; }
.banner.notice { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent); font-weight: 600; white-space: pre-line; }

/* ---------- layout */
.layout {
  max-width: 1180px; margin: 0 auto; padding: 14px 20px 30px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: start;
}
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; min-width: 0;
}
.card.wide { grid-column: 1 / -1; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.step {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 13px;
}
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } }

/* ---------- upload */
.drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  min-height: 190px; padding: 22px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop svg { width: 34px; height: 34px; color: var(--accent-text); }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop.busy { pointer-events: none; opacity: .55; }
.upload-progress { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; max-height: 120px; overflow: hidden; transition: opacity .25s ease, max-height .25s ease, margin-top .25s ease; }
/* A finished upload fades and folds away, so the list below moves up into its space. */
.upload-progress.leaving { opacity: 0; max-height: 0; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .upload-progress { transition: none; } }
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .25s; }
.bar.ok i { background: var(--ok); }
.bar.err i { background: var(--err); }
.bar.indeterminate i { width: 35% !important; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

.source { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.source h3 { font-size: 14px; margin: 0 0 8px; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 13px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- form */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.span2 { grid-column: 1 / -1; }
@media (max-width: 520px) { .grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: 5px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 600; }
.hint { font-weight: 400; font-style: normal; color: var(--muted); }
select, input[type=text], input[type=number], input[type=search], input[type=email], input[type=password] {
  width: 100%; min-width: 0; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; height: 38px;
}
select:focus, input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
select:disabled { opacity: .6; }
input[type=range] { flex: 1; accent-color: var(--accent); }
.name-wrap { display: flex; align-items: stretch; }
.name-wrap input { border-radius: 9px 0 0 9px; }
.ext { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-left: 0; border-radius: 0 9px 9px 0; background: var(--surface-2); color: var(--muted); font-family: var(--mono); font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
[hidden] { display: none !important; }
/* A feature switched off for this page in the Admin Control Panel (Features): app.js applyFlags */
.flag-off { display: none !important; }

.actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.actions p { margin: 0; }
.actions .hints { flex: 1; min-width: 180px; display: grid; gap: 4px; }
button.primary {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px;
  font: inherit; font-weight: 650; padding: 10px 26px; cursor: pointer;
}
button.primary:disabled { opacity: .45; cursor: not-allowed; }
button.primary:not(:disabled):hover { filter: brightness(1.07); }
button.secondary, a.secondary {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; cursor: pointer;
}
a.download { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
button.link { background: none; border: 0; color: var(--accent-text); font: inherit; font-size: 13px; cursor: pointer; padding: 0; }

/* ---------- jobs */
.jobs { display: grid; gap: 10px; }
.empty { margin: 4px 0; }
.job { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 8px; }
.job-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.job-name { font-weight: 650; min-width: 0; }
.pill { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.pill.running { background: var(--accent-soft); color: var(--accent-text); }
.pill.done { background: var(--ok-soft); color: var(--ok); }
.pill.failed, .pill.cancelled, .pill.gone { background: var(--err-soft); color: var(--err); }
.job-meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.job-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.job-actions .push { margin-left: auto; }
.job-error { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; background: var(--err-soft); color: var(--err); border-radius: 8px; padding: 8px 10px; margin: 0; max-height: 180px; overflow: auto; }
details { font-size: 13px; }
details summary { cursor: pointer; color: var(--muted); }
details ol { margin: 6px 0 0; padding-left: 20px; }
details pre { white-space: pre-wrap; font-size: 11.5px; color: var(--muted); margin: 2px 0 8px; }
.gpu-badge { color: var(--ok); font-weight: 600; }
.fallback-badge { color: var(--warn); font-weight: 600; }

/* ---------- preview */
dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); padding: 14px; width: min(920px, 94vw); }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
#previewBody video, #previewBody img { width: 100%; max-height: 70vh; border-radius: 8px; background: #000; display: block; }
#previewBody audio { width: 100%; }

.foot { text-align: center; padding: 0 20px 30px; }
.foot .version { display: block; margin-top: 6px; opacity: .7; font-variant-numeric: tabular-nums; }
.foot .foot-links { display: block; margin-top: 6px; }
.foot a { color: var(--accent-text); }
a.help-link { text-decoration: none; }
@media (max-width: 480px) { a.help-link { display: none; } } /* phones: the help links are in the footer */
.hw-panel h3 .small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }

/* ---------- file lists (uploads and conversions): checkboxes, select all, batch delete */
.file-list { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.list-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.list-title h3 { font-size: 14px; margin: 0; color: var(--heading); }
.list-head { display: flex; align-items: center; gap: 12px; padding: 6px 2px 10px; flex-wrap: wrap; }
.list-head .check { font-size: 13.5px; font-weight: 600; }
.check input, .sel { accent-color: var(--accent); width: 16px; height: 16px; flex: none; cursor: pointer; }
button.danger { color: var(--err); }
button.danger:not(:disabled):hover { border-color: var(--err); }
button.secondary:disabled { opacity: .45; cursor: not-allowed; }
button.link.danger { color: var(--err); }
.rows { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.file-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface);
}
.file-row.current { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.file-row.checked { background: var(--accent-soft); }
.file-main { all: unset; cursor: pointer; display: grid; gap: 1px; min-width: 0; border-radius: 6px; }
.file-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.file-line .file-name { min-width: 0; }
.badge { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.badge.sel-badge { background: var(--accent-soft); color: var(--accent-text); }
.badge.busy { background: var(--accent-soft); color: var(--accent-text); }
.job-top .sel { margin-right: 2px; }
.job.checked { background: var(--accent-soft); border-color: var(--accent); }
@media (max-width: 520px) {
  .file-meta { white-space: normal; }
}
@media (max-width: 520px) { .file-line { flex-wrap: wrap; } .file-line .file-name { white-space: normal; overflow-wrap: anywhere; } }

/* file-name suggestions */
.field > label[for] { font-size: 13px; font-weight: 600; }
.name-parts { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin-top: 2px; }
.name-parts .check { font-size: 13px; gap: 6px; }
.name-parts .check input { width: 15px; height: 15px; }

.convert-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
button.secondary.big { font-size: 15px; padding: 10px 18px; border-color: var(--accent); color: var(--accent-text); }

/* per-file plan under each upload */
.file-plan { font-size: 12.5px; color: var(--accent-text); white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }
.file-plan:empty { display: none; }
.file-plan.warn { color: var(--err); }
#optFor { min-width: 0; }

/* Output details on each conversion */
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 8px 0 4px; }
.specs > div { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; min-width: 0; }
.specs dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0; }
.specs dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.specs.planned dd { font-weight: 500; }
/* picture edits: crop edges side by side, flip switches in a row */
.crop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.crop-grid label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.crop-grid input { width: 100%; min-width: 0; }
.flip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 38px; }
.field > span .link { margin-left: 8px; font-size: 12.5px; }
@media (max-width: 520px) { .crop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* subtitles: the track list (keep: tick several, burn in: pick one) and the look of burned-in text */
.sub-add { justify-self: start; }
.sub-list { display: grid; gap: 6px; }
.sub-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, 180px) 62px; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--glass-bg);
  transition: border-color .2s, opacity .2s;
}
.sub-row.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.sub-row.off { opacity: .55; }
.sub-row .check { min-width: 0; font-size: 13.5px; }
.sub-row .sub-text { display: grid; min-width: 0; line-height: 1.3; }
.sub-row .sub-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-row .sub-from { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sub-row .sub-default { color: var(--accent-text); font-weight: 600; }
.sub-row .sub-pv { color: var(--text); }
.sub-row .sub-pv::before { content: "\25C9\00a0"; color: var(--accent); }
.sub-row .sub-def { font-size: 12px; padding: 0; }
.sub-tools { display: flex; gap: 14px; justify-content: flex-end; font-size: 12.5px; margin-bottom: -2px; }
.sub-row .sub-del { font-size: 12.5px; justify-self: end; }
.sub-row input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; cursor: pointer; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: var(--glass-bg); box-shadow: inset 0 1px 0 var(--glass-shine);
  transition: box-shadow .3s var(--spring), border-color .2s;
}
.sub-row input[type="radio"]:checked { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--glass-bg), inset 0 0 0 9px var(--accent); }
.sub-row input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub-empty { font-size: 13px; color: var(--muted); padding: 2px 2px 4px; }
/* automatic subtitles (Whisper) */
.autosub { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass-bg); }
.autosub-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; }
.autosub-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px 14px; align-items: end; }
/* with "Listen to" shown: language, translation and source side by side, the button under them when narrow */
.autosub-row:has(.speech-src:not([hidden])) { display: flex; flex-wrap: wrap; }
.autosub-row:has(.speech-src:not([hidden])) > .field { flex: 1 1 150px; min-width: 0; }
.autosub-row:has(.speech-src:not([hidden])) > .speech-src { flex-basis: 200px; }
.autosub-row:has(.speech-src:not([hidden])) > button { flex: none; }
.autosub-status { display: grid; gap: 6px; }
.autosub-msg { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--muted); }
.autosub-msg.err { color: var(--err); }
@media (max-width: 560px) { .autosub-row { grid-template-columns: minmax(0, 1fr); } .autosub-row button { justify-self: start; } }
.sub-style { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .9fr); gap: 12px 14px; align-items: start; }
.sub-edges .check { font-size: 13.5px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer; flex: none; position: relative;
  border: 1px solid var(--glass-border); background: var(--sw, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .2s var(--spring), box-shadow .2s;
}
.swatch:hover { transform: scale(1.1); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.swatch.custom { background: conic-gradient(#f44, #fd0, #4e4, #4cf, #44f, #e4e, #f44); overflow: hidden; }
.swatch.custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
@media (max-width: 720px) { .sub-style { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .sub-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sub-row .gsel, .sub-row > select { grid-column: 1 / -1; grid-row: 2; }
}
.size-hint { margin: -4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--accent-text); }

/* ---------- trim, compression, tracks, QR, expected size */
.trim-row input { flex: 1 1 0; min-width: 0; }
.hint.bad { color: var(--err); }
.est { margin: 2px 0 0; color: var(--accent-text); font-weight: 600; }
.job-meta .extra { color: var(--accent-text); }
.job-meta .extra::before { content: "· "; color: var(--muted); }
button.secondary.small { font-size: 12.5px; padding: 5px 10px; }
/* Undo / redo in the head of step 2 */
.history { display: flex; gap: 6px; flex-shrink: 0; }
.history button { display: inline-flex; align-items: center; gap: 5px; }
.history svg { width: 15px; height: 15px; }
#optionsCard .card-head { flex-wrap: wrap; }
#optionsCard #optFor { flex: 1 1 0; min-width: 0; } /* a long file name gives way to the buttons */
#notifyBtn { margin-left: 8px; }
#notifyBtn[aria-pressed="true"] { border-color: var(--ok); color: var(--ok); }
dialog.qr-dlg { width: min(360px, 94vw); text-align: center; }
dialog.qr-dlg .dlg-head { text-align: left; }
#qrCanvas { width: 264px; height: 264px; max-width: 100%; border-radius: 10px; image-rendering: pixelated; margin: 6px auto; display: block; }
.qr-url { word-break: break-all; color: var(--muted); }

/* Install as an app (install.js): the iPhone and iPad steps, and the installed window: clear of the notch and home bar,
   no pull-to-refresh, and no double-tap zoom on the buttons (pinch-zoom on the page stays). */
dialog.ios-dlg { width: min(420px, 94vw); }
.ios-steps { margin: 6px 0 10px; padding-left: 22px; line-height: 1.5; }
.ios-steps li + li { margin-top: 8px; }
html.standalone { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overscroll-behavior: none; }
html.standalone button, html.standalone a, html.standalone [role="button"] { touch-action: manipulation; }

/* ======================================================================
   Glass controls (glass.js): toggles, switches, check boxes, drop-down
   lists and menus, with smooth sliding highlights
   ====================================================================== */
:root {
  --glass-bg: rgba(255, 255, 255, .55);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-border: rgba(25, 44, 88, .14);
  --glass-shine: rgba(255, 255, 255, .9);
  --thumb-bg: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .82));
  --thumb-border: rgba(25, 44, 88, .10);
  --thumb-shadow: 0 2px 8px rgba(25, 44, 88, .16), 0 1px 2px rgba(25, 44, 88, .10);
  --pop-bg: rgba(255, 255, 255, .86);
  --knob: #ffffff;
  --toggle-off: rgba(25, 44, 88, .16);
  --spring: cubic-bezier(.34, 1.36, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-bg: rgba(255, 255, 255, .06); --glass-strong: rgba(255, 255, 255, .10); --glass-border: rgba(255, 255, 255, .14); --glass-shine: rgba(255, 255, 255, .16);
    --thumb-bg: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .10)); --thumb-border: rgba(255, 255, 255, .24);
    --thumb-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
    --pop-bg: rgba(18, 27, 54, .86); --knob: #e9eef8; --toggle-off: rgba(255, 255, 255, .10);
  }
}
:root[data-theme="dark"] {
  --glass-bg: rgba(255, 255, 255, .06); --glass-strong: rgba(255, 255, 255, .10); --glass-border: rgba(255, 255, 255, .14); --glass-shine: rgba(255, 255, 255, .16);
  --thumb-bg: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .10)); --thumb-border: rgba(255, 255, 255, .24);
  --thumb-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
  --pop-bg: rgba(18, 27, 54, .86); --knob: #e9eef8; --toggle-off: rgba(255, 255, 255, .10);
}
.seg, .theme-toggle, .hw-chip, .gsel-btn, button.secondary, a.secondary:not(.download) {
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}

/* toggle group with one sliding glass highlight (light / dark) */
.seg {
  position: relative; isolation: isolate; display: inline-flex; flex: none; border-radius: 999px; padding: 3px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 1px 3px rgba(0, 0, 0, .06);
}
.seg button {
  position: relative; z-index: 1; display: grid; place-items: center; border: 0; border-radius: 999px; padding: 7px 11px;
  background: none; color: var(--muted); cursor: pointer; font: inherit;
  transition: color .3s, transform .15s;
}
.seg button svg { width: 18px; height: 18px; }
.seg button:hover { color: var(--heading); }
.seg button:active { transform: scale(.92); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg button[aria-pressed="true"] { color: var(--heading); }
.seg .thumb {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px;
  background: var(--thumb-bg); border: 1px solid var(--thumb-border); box-shadow: var(--thumb-shadow);
  transition: transform .45s var(--spring), width .45s var(--spring), opacity .2s; pointer-events: none;
}
.seg .thumb::after { /* a warm glint on the chosen side */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .9;
}
.seg.no-anim .thumb { transition: none; }

/* round glass buttons (scene picker) */
.theme-toggle {
  background: var(--glass-bg); border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-shine), 0 1px 3px rgba(0, 0, 0, .06);
  transition: transform .15s, border-color .2s, color .2s;
}
.theme-toggle:active { transform: scale(.92); }
.theme-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); }
.hw-chip { background: var(--glass-bg); border-color: var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-shine); }

/* on/off switches: glass track, glass knob with a springy slide */
.check input.gtoggle, input.gtoggle {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 38px; height: 22px; border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: radial-gradient(circle at center, var(--knob) 0 7.5px, transparent 8.5px) no-repeat 2px 50% / 18px 18px, var(--toggle-off);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .14), inset 0 1px 0 var(--glass-shine);
  transition: background-position .45s var(--spring), background-color .3s, border-color .3s;
}
.check input.gtoggle:checked, input.gtoggle:checked {
  background: radial-gradient(circle at center, #fff 0 7.5px, transparent 8.5px) no-repeat 17px 50% / 18px 18px, color-mix(in srgb, var(--accent) 80%, transparent);
  border-color: var(--accent);
}
input.gtoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* check boxes (select files): glass box, the tick grows in */
.check input[type="checkbox"]:not(.gtoggle), input.sel {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; cursor: pointer;
  width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--glass-border);
  background: no-repeat center / 0 0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  transition: background-size .35s var(--spring), background-color .2s, border-color .2s, transform .15s;
}
.check input[type="checkbox"]:not(.gtoggle):checked, input.sel:checked { background-color: var(--accent); background-size: 14px 14px; border-color: var(--accent); }
.check input[type="checkbox"]:not(.gtoggle):indeterminate { background: linear-gradient(var(--accent), var(--accent)) no-repeat center / 9px 2px, var(--glass-bg); }
.check input[type="checkbox"]:not(.gtoggle):active, input.sel:active { transform: scale(.88); }
.check input[type="checkbox"]:focus-visible, input.sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* range sliders: glass track, glass knob */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-border); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-border); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--surface); border: 1px solid var(--accent); box-shadow: var(--thumb-shadow); transition: transform .2s var(--spring); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--accent); box-shadow: var(--thumb-shadow); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

/* drop-down lists: a glass button... */
select, input[type=text], input[type=number], input[type=search], input[type=email], input[type=password] { background: var(--glass-strong); border-color: var(--glass-border); }
.gsel { position: relative; min-width: 0; }
.gsel-native { position: absolute !important; inset: 0; opacity: 0; pointer-events: none; }
.gsel-btn {
  width: 100%; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; cursor: pointer;
  font: inherit; color: var(--text); text-align: left; border-radius: 9px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-shine);
  transition: border-color .2s, box-shadow .2s, transform .12s;
}
.gsel-btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--glass-border)); }
.gsel-btn:active { transform: scale(.99); }
.gsel-btn:focus-visible, .gsel-btn.open { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px 0 var(--glass-shine); }
.gsel-btn:disabled { opacity: .55; cursor: not-allowed; }
.gsel-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsel-btn svg { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .35s var(--spring); }
.gsel-btn.open svg { transform: rotate(180deg); color: var(--accent-text); }
/* ...that opens a glass list with a gliding highlight */
.gsel-pop {
  position: fixed; z-index: 1000; display: flex; border-radius: 12px; overflow: hidden;
  background: var(--pop-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28), inset 0 1px 0 var(--glass-shine);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top center;
  transition: opacity .18s ease, transform .3s var(--spring);
}
.gsel-pop.up { transform: translateY(6px) scale(.97); transform-origin: bottom center; }
.gsel-pop.show { opacity: 1; transform: none; }
.gsel-list { position: relative; isolation: isolate; flex: 1; overflow-y: auto; padding: 5px; overscroll-behavior: contain; outline: none; }
.gsel-opt {
  position: relative; z-index: 1; padding: 8px 30px 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s;
}
.gsel-opt.active { color: var(--heading); }
.gsel-opt[aria-selected="true"] { color: var(--accent-text); font-weight: 600; }
.gsel-opt[aria-selected="true"]::after { content: "✓"; position: absolute; right: 10px; }
.gsel-opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.gsel-group { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.glide-thumb {
  position: absolute; z-index: 0; left: 5px; right: 5px; top: 0; height: 0; border-radius: 8px; pointer-events: none; opacity: 0;
  background: var(--thumb-bg); border: 1px solid var(--thumb-border); box-shadow: var(--thumb-shadow);
  transition: transform .32s var(--spring), height .32s var(--spring), opacity .15s;
}
.glide-thumb::before { /* orange edge marker that travels along */
  content: ""; position: absolute; left: -1px; top: 25%; bottom: 25%; width: 3px; border-radius: 3px; background: var(--accent);
}
.glide-thumb.no-anim { transition: opacity .15s; }

/* the scene menu: glass, opens with a spring, highlight glides */
.scene-menu.glide-menu {
  isolation: isolate; background: var(--pop-bg); border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28), inset 0 1px 0 var(--glass-shine);
  transform-origin: top right; animation: pop-in .32s var(--spring);
}
.scene-menu.glide-menu .glide-thumb { left: 6px; right: 6px; }
.scene-menu.glide-menu button { position: relative; z-index: 1; background: none !important; transition: color .2s, transform .12s; }
.scene-menu.glide-menu button:active { transform: scale(.98); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.95); } to { opacity: 1; transform: none; } }

/* buttons: a small press */
button.secondary, a.secondary, button.primary { transition: transform .15s, border-color .2s, color .2s, background .2s, filter .2s; }
button.secondary:active:not(:disabled), a.secondary:active, button.primary:active:not(:disabled) { transform: scale(.96); }
button.secondary, a.secondary:not(.download) { background: var(--glass-strong); border-color: var(--glass-border); }

@media (prefers-reduced-motion: reduce) {
  .seg .thumb, .glide-thumb, input.gtoggle, .gsel-pop, .gsel-btn svg { transition: none !important; }
  .scene-menu.glide-menu { animation: none; }
}

/* ======================================================================
   Pixel shift (pixelshift.js): the static parts move a few pixels now
   and then, so nothing burns into OLED screens
   ====================================================================== */
/* the top bar (with its menus) stays above the cards */
.topbar { position: relative; z-index: 30; }
.topbar, .layout, .foot, .banner, .hw-panel, #scene {
  translate: var(--shift-x, 0) var(--shift-y, 0);
  transition: translate 3s ease-in-out;
}

/* ---------- preview: one frame of the selected file as it will look */
.preview-card .card-head { flex-wrap: wrap; }
.preview-card .step svg { width: 14px; height: 14px; }
.preview-card .seg button { padding: 5px 11px; font-size: 12.5px; }
.preview-card #pvFor { flex: 1 1 0; min-width: 0; }
.preview-card .pv-stage { min-height: 120px; padding: 10px; }
.preview-card .pv-facts { gap: 6px; }
.preview-card .pv-fact { font-size: 12px; padding: 3px 9px; }
.preview-card .pv-badge { font-size: 11px; padding: 2px 7px; }
.pv-stage {
  display: grid; place-items: center; min-height: 160px; padding: 14px; border-radius: 12px;
  /* a soft checkerboard shows where the picture ends, so black bars are easy to see */
  background:
    repeating-conic-gradient(rgba(127, 127, 127, .10) 0% 25%, transparent 0% 50%) 50% / 22px 22px,
    var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.pv-frame {
  position: relative; max-width: 100%; border-radius: 6px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 30px rgba(0, 0, 0, .35);
  transition: width .45s var(--spring), height .45s var(--spring);
}
.pv-frame[hidden] { display: none; }
.pv-frame img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .25s, filter .25s; }
.pv-frame img[hidden] { display: none; }
/* the player fills the same box as the picture, never larger */
.pv-frame video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pv-frame video[hidden] { display: none; }
.pv-stage audio { width: 100%; margin-top: 10px; }
.pv-stage audio[hidden] { display: none; }
.pv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pv-actions[hidden], .pv-actions [hidden] { display: none; }
.pv-actions .pv-play, .ws-src-acts .pv-play { width: 38px; height: 34px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; }
.pv-actions .pv-play svg, .ws-src-acts .pv-play svg { width: 16px; height: 16px; fill: currentColor; }
.pv-frame img:not([src]) { opacity: 0; }
.pv-frame.loading img { opacity: .55; filter: blur(2px); }
.pv-badge {
  position: absolute; padding: 3px 8px; border-radius: 999px; font: 600 12px/1.3 var(--mono);
  color: #fff; background: rgba(10, 18, 40, .62); border: 1px solid rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none;
}
.pv-badge:empty { display: none; }
.pv-tl { top: 8px; left: 8px; }
.pv-br { top: 8px; right: 8px; } /* top corners: subtitles sit at the bottom */
.pv-spin {
  position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--accent); animation: pv-spin .8s linear infinite;
}
.pv-spin[hidden] { display: none; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
.pv-msg { margin: 0; padding: 30px 10px; text-align: center; color: var(--muted); }
.pv-time { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pv-time[hidden] { display: none; }
.pv-time input { flex: 1; min-width: 0; }
.pv-time output { min-width: 48px; text-align: right; }
.pv-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pv-fact {
  font-size: 12.5px; padding: 4px 10px; border-radius: 999px; color: var(--text);
  background: var(--glass-strong); border: 1px solid var(--glass-border);
}
.pv-fact b { color: var(--muted); font-weight: 600; margin-right: 3px; }
.pv-note { margin: 8px 0 0; }
@media (max-width: 520px) { .pv-stage { padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .pv-frame { transition: none; } .pv-spin { animation-duration: 2s; } }

/* joining: before / after picker and the join dialog */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba-grid label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); min-width: 0; }
@media (max-width: 520px) { .ba-grid { grid-template-columns: 1fr; } }
.join-dlg { width: min(560px, calc(100vw - 32px)); }
.join-list { margin: 12px 0; padding-left: 22px; display: grid; gap: 6px; }
.join-list li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.join-list .join-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.join-list .link { font-size: 16px; padding: 0 4px; }
.dlg-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* effects timeline: a ruler, layers (rows) with effect blocks, the moment as a line */
.fx { display: grid; gap: 10px; }
.fx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fx-bar select { max-width: 320px; }
.fx-timeline { --fx-name: 84px; --fx-end: 22px; position: relative; user-select: none; touch-action: none; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--glass-bg); padding: 4px 0 6px; }
.fx-ruler { position: relative; height: 22px; margin-left: var(--fx-name); margin-right: var(--fx-end); cursor: pointer; border-bottom: 1px solid var(--line); }
.fx-ruler span { position: absolute; top: 3px; transform: translateX(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-ruler span::after { content: ""; position: absolute; left: 50%; top: 15px; width: 1px; height: 5px; background: var(--line); }
.fx-layers { display: grid; }
.fx-row { position: relative; height: 34px; margin-left: var(--fx-name); margin-right: var(--fx-end); border-bottom: 1px dashed color-mix(in srgb, var(--line) 70%, transparent); cursor: pointer; }
.fx-row-name { position: absolute; right: 100%; top: 0; bottom: 0; width: var(--fx-name); padding-left: 6px; display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.fx-row-on { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.fx-row-on:hover { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.fx-row-on:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fx-row-on svg { width: 15px; height: 15px; }
.fx-row.off { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--text) 4%, transparent) 6px 12px); }
.fx-row.off .fx-block { opacity: .35; filter: grayscale(.8); }
.fx-row.off .fx-row-label { text-decoration: line-through; opacity: .7; }
.fx-row.off .fx-row-on { color: #e0675a; }
.fx-block {
  position: absolute; top: 4px; height: 26px; border-radius: 7px; display: flex; align-items: center; overflow: hidden; cursor: grab;
  font-size: 12px; font-weight: 600; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(0, 0, 0, .25);
  transition: box-shadow .2s, filter .2s;
}
.fx-block:active { cursor: grabbing; }
.fx-block.sel { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); z-index: 2; }
.fx-block:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fx-camera { background: linear-gradient(180deg, #4f8df5, #2f63c9); }
.fx-speed { background: linear-gradient(180deg, #f2a43a, #d07a12); }
.fx-look { background: linear-gradient(180deg, #a874f0, #7a45c9); }
.fx-label { flex: 1; min-width: 0; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.fx-h { width: 8px; align-self: stretch; cursor: ew-resize; background: rgba(255, 255, 255, .18); flex: none; }
.fx-h:hover { background: rgba(255, 255, 255, .4); }
.fx-cursor { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); pointer-events: none; box-shadow: 0 0 6px var(--accent); }
.fx-inspector { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 12px; border: 1px solid var(--glass-border); border-radius: 10px; background: var(--glass-bg); }
.fx-inspector[hidden] { display: none; }
.fx-inspector label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.fx-inspector input[type="text"], .fx-inspector input[type="number"] { width: 92px; }
.fx-inspector .fx-strength { min-width: 160px; }
.fx-inspector strong { align-self: center; min-width: 120px; }
@media (max-width: 520px) { .fx-timeline { --fx-name: 30px; --fx-end: 16px; } .fx-row-label { display: none; } .fx-row-name { padding-left: 4px; } }

/* collapsible sections in step 2 (Picture, Effects): closed until opened, remembered per browser */
#optForm.closed-edit [data-edit-section]:not(.sec-head),
#optForm.closed-fx [data-fx-section]:not(.sec-head) { display: none !important; }
.sec-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; margin: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; text-align: left;
}
.sec-toggle:hover, .sec-toggle:focus-visible { color: var(--text); }
.sec-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sec-chev { width: 14px; height: 14px; flex: none; transition: transform .3s var(--spring); }
.sec-toggle[aria-expanded="true"] .sec-chev { transform: rotate(90deg); }
.sec-sub { text-transform: none; letter-spacing: 0; opacity: .75; }
.sec-badge { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-text); }
.sec-badge[hidden] { display: none; }
@media (max-width: 520px) { .sec-sub { display: none; } }

:is(#optForm, #outputCard).closed-cust [data-cust-section]:not(.sec-head) { display: none !important; } /* outputCard: the Studio page's step 3 */

/* pixel shift moves the page up to 2 px: never a sideways scrollbar for that */
html { overflow-x: hidden; }

#optForm.closed-trim [data-trim-section]:not(.sec-head) { display: none !important; }

:is(#optForm, #outputCard).closed-audio [data-audio-section]:not(.sec-head), :is(#optForm, #outputCard).closed-audio #audioTrackField, :is(#optForm, #outputCard).closed-audio #audioHint, #optForm.closed-audio #alBox, #optForm.closed-audio #alEmpty { display: none !important; }
/* the on / off switch in a section heading (Subtitles, Captions): at the end of its line */
.sec-head .sec-switch { order: 2; }
.sec-head .sec-switch:disabled { opacity: .45; cursor: default; }
/* a section switched off stays usable, dimmed (changing it switches it on again or keeps it ready) */
:is(#optForm, #stSubs).off-subs .sec-toggle[data-sec="subs"] > span:not(.sec-badge), :is(#optForm, #stCap).off-cap .sec-toggle[data-sec="cap"] > span:not(.sec-badge) { opacity: .6; } /* stSubs, stCap: the Studio page's Subtitles and Captions */
:is(#optForm, #stSubs).off-subs [data-sub-section], :is(#optForm, #stSubs).off-subs #autoSubBox, :is(#optForm, #stCap).off-cap #capBox > :not(.cap-top) { opacity: .6; transition: opacity .25s; }
:is(#optForm, #stSubs).off-subs [data-sub-section]:is(:hover, :focus-within), :is(#optForm, #stSubs).off-subs #autoSubBox:is(:hover, :focus-within), :is(#optForm, #stCap).off-cap #capBox > :not(.cap-top):is(:hover, :focus-within) { opacity: 1; }
:is(#optForm, #outputCard).closed-subs :is([data-sub-section], #subEmpty, #subList, #subStyleBox, #subHint, #autoSubBox) { display: none !important; } /* outputCard: the Studio page's step 3 (Standard workspace) */

/* Added sounds: the effects timeline, with green blocks */
.al-sound { background: linear-gradient(180deg, #33b07a, #1f8458); }
.al .fx-inspector input[type="range"] { width: 150px; }
.al-own { max-width: 360px; }
.al-own input[type="range"] { width: 100%; }
.al-up { display: inline-flex; align-items: center; gap: 8px; }
.al-up svg { width: 18px; height: 18px; flex: none; }
.al-help { margin: -4px 0 0; }
.al-status { font-variant-numeric: tabular-nums; }
/* Timeline zoom under the timeline: -, scroll, +, whole video */
.tl-zoom { display: flex; align-items: center; gap: 8px; margin-top: -2px; }
.tl-zbtn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--glass-bg); color: var(--text); cursor: pointer; flex: none; }
.tl-zbtn:hover:not(:disabled) { border-color: var(--accent); }
.tl-zbtn:disabled { opacity: .4; cursor: default; }
.tl-zbtn svg { width: 17px; height: 17px; }
.tl-pan { flex: 1; min-width: 60px; }
.tl-pan:disabled { opacity: .35; }
.tl-fit:disabled { opacity: .45; cursor: default; text-decoration: none; }
.tl-zlabel { min-width: 9.5em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) { .tl-zlabel { display: none; } }

/* captions (premium later): looks, settings and their own timeline */
:is(#optForm, #outputCard).closed-cap [data-cap-section]:not(.sec-head) { display: none !important; }
.cap { display: grid; gap: 12px; }
.cap-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.cap-detect { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px 12px; align-items: end; }
.cap-detect:has(.speech-src:not([hidden])) { display: flex; flex-wrap: wrap; }
.cap-detect:has(.speech-src:not([hidden])) > .field { flex: 1 1 160px; min-width: 0; }
.cap-detect:has(.speech-src:not([hidden])) > .speech-src { flex-basis: 220px; }
.cap-detect:has(.speech-src:not([hidden])) > button { flex: none; }
.cap-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.cap-preset {
  display: grid; place-items: center; gap: 4px; min-height: 74px; padding: 8px 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--glass-border); background: linear-gradient(160deg, #1b2440, #0c1222); color: #fff; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s var(--spring);
}
.cap-preset:hover { transform: translateY(-1px); }
.cap-preset[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.cap-preset .cap-sample { font-size: 17px; line-height: 1.1; white-space: nowrap; letter-spacing: .01em; }
.cap-preset .cap-sample b { font-weight: inherit; display: inline-block; }
.cap-preset .cap-name { font-size: 11.5px; color: rgba(255, 255, 255, .72); font-family: inherit; }
.cap-custom { border: 1px solid var(--glass-border); border-radius: 10px; background: var(--glass-bg); padding: 8px 12px; }
.cap-custom summary { cursor: pointer; font-size: 13.5px; padding: 2px 0; }
.cap-custom[open] summary { margin-bottom: 10px; }
.cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: end; }
.cap-grid .check { font-size: 13.5px; padding-bottom: 8px; }
.cap-color input[type="color"] { width: 100%; height: 36px; padding: 2px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass-bg); cursor: pointer; }
.cap-block { background: linear-gradient(180deg, #2fb6a6, #18867a); }
.cap-inspector .cap-textfield { flex: 1 1 260px; }
.cap-inspector .cap-textfield input { width: 100%; }
@media (max-width: 760px) { .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cap-detect { grid-template-columns: minmax(0, 1fr); } .cap-detect button { justify-self: start; } }

/* upscale (premium later): factor and mode, fast to slowest */
#optForm.closed-up [data-up-section]:not(.sec-head) { display: none !important; }
.up-modes { border-radius: 16px; max-width: 100%; }
.up-modes button { display: grid; gap: 1px; padding: 6px 14px; border-radius: 13px; line-height: 1.2; min-width: 0; }
@media (max-width: 520px) { .up-modes button { padding: 6px 9px; } }
.up-modes button b { font-weight: 600; }
.up-modes button small { font-size: 11px; opacity: .8; }
.up-modes button:disabled { opacity: .4; cursor: not-allowed; }
.up-modes .thumb { border-radius: 13px; }
.up-hint { margin: -4px 0 0; }

/* ---------- Studio page: the editor workspace (studio.js)
   1 Source files | Preview, then full width: 2 Timeline, 3 Output and encoding (the exports: the Queue in the top bar) */
:root[data-page="studio"] [data-studio-hide] { display: none !important; }
:root[data-page="studio"] .layout {
  max-width: 1480px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "src pv" "tl tl" "out out";
}
:root[data-page="studio"] .col-left { display: contents; }
:root[data-page="studio"] #uploadCard { grid-area: src; align-self: stretch; }
:root[data-page="studio"] #previewCard, :root[data-page="studio"] #pvPlaceholder { grid-area: pv; align-self: stretch; }
:root[data-page="studio"] #previewCard:not([hidden]) ~ #pvPlaceholder { display: none; }
:root[data-page="studio"] #optionsCard { grid-area: tl; }
:root[data-page="studio"] #outputCard { grid-area: out; }
@media (max-width: 860px) {
  :root[data-page="studio"] .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "src" "pv" "tl" "out"; }
}
/* Sources: a smaller drop zone, the files as assets to drag */
:root[data-page="studio"] .drop { min-height: 120px; padding: 16px; }
.file-row.asset { grid-template-columns: auto minmax(0, 1fr) auto auto; cursor: grab; }
.file-row.asset.dragging { opacity: .5; }
.file-row.picked { border-color: var(--accent); }
/* Projects (projects.js): the switcher in the top bar, next to the page switch */
.pj-bar { display: flex; align-items: center; flex: none; min-width: 0; max-width: 460px; padding: 3px 10px; border: 1px solid var(--glass-border); border-radius: 12px; background: var(--glass-bg); box-shadow: inset 0 1px 0 var(--glass-shine); }
.pj-row { display: flex; align-items: center; gap: 6px 10px; flex: 1 1 auto; min-width: 0; }
.pj-pick { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.pj-pick > .gsel, .pj-pick > select, .pj-pick > input { flex: 1; width: 170px; min-width: 90px; }
.pj-pick input, .pj-pick .gsel-btn, .pj-pick select { height: 30px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
.pj-bar button.small { padding: 4px 10px; white-space: nowrap; }
.pj-bar button.link { white-space: nowrap; font-size: 13px; }
/* Studio: the top bar is as wide as the page below it */
:root[data-page="studio"] .topbar { max-width: 1480px; }
:root[data-page="studio"][data-ws="ultrawide"] .topbar { max-width: none; padding-left: 14px; padding-right: 14px; }
@media (max-width: 1100px) { :root[data-page="studio"] .topbar { flex-wrap: wrap; } :root[data-page="studio"] .topbar .pj-bar { order: 11; flex: 1 0 100%; max-width: none; } :root[data-page="studio"] .topbar .hw-chip { flex: 1 1 0; } }
/* Insert to timeline: which streams */
.stream-dlg { width: min(460px, calc(100vw - 32px)); }
.stream-opts { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.stream-opts label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.stream-opts label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.stream-opts label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.stream-opts input { accent-color: var(--accent); margin-top: 3px; }
.stream-opts label > span { display: grid; gap: 2px; }
.stream-dlg .dlg-actions { gap: 10px; align-items: center; }
/* Preview: the main view, top right */
:root[data-page="studio"] .pv-stage { display: grid; justify-items: center; }
.pv-empty { display: grid; place-items: center; min-height: 260px; padding: 24px; border: 2px dashed var(--line); border-radius: 12px; text-align: center; }
.pv-empty p { max-width: 420px; margin: 0; }
:root[data-page="studio"] .pv-frame img { cursor: pointer; }

/* Step 2: the timeline */
.studio { display: grid; gap: 10px; margin-bottom: 6px; }
.st-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.st-bar > select { width: auto; max-width: 280px; }
.st-sounds { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-sounds select { width: auto; max-width: 260px; }
.st-clock { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-empty { padding: 6px 12px; margin-bottom: 6px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; } /* no open sequence: a hint over the timeline */
.st-empty:empty { display: none; } /* an open sequence has no hint: nothing to draw or block the lanes */
.st-empty p { margin: 0; }
.st-timeline { --fx-name: 136px; }
.st-timeline:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-timeline.drop-over, .st-empty.drop-over { border-color: var(--accent); background: var(--accent-soft); }
.st-row .fx-row-name { padding-right: 6px; }
.st-row .fx-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.st-row.st-own { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.st-row.st-own { cursor: default; }
/* The caption tracks (their own, above the video tracks) and the subtitles: an eye, no target */
.st-row.st-cl { background: color-mix(in srgb, #2fb6a6 6%, transparent); }
.st-row:is(.st-cl, .st-sub).off .fx-block { opacity: .35; filter: grayscale(.8); }
.st-row.drop-on { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.st-x { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-left: auto; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.st-x:hover { color: var(--err); background: color-mix(in srgb, var(--err) 12%, transparent); }
.st-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.st-lane-hint { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 10px; font-size: 11.5px; color: var(--muted); opacity: .8; white-space: nowrap; overflow: hidden; pointer-events: none; }
/* Blocks: subtitles, sound effects (video clips and sounds: .st-vclip, .al-sound) */
.st-own { background: linear-gradient(180deg, #3aa57a, #23795a); }
.st-row.st-own.off .fx-block { opacity: .35; filter: grayscale(.8); }
.fx-block.st-sub { background: linear-gradient(180deg, #d3a63e, #a67c1d); cursor: pointer; }
.fx-sound { background: linear-gradient(180deg, #e46c84, #b9465f); }
.st-drop-tip { position: absolute; z-index: 6; max-width: 260px; padding: 5px 9px; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 12px; box-shadow: var(--shadow); pointer-events: none; }
/* Under the timeline: what is selected, notes */
.st-inspect { display: grid; gap: 10px; }
/* Subtitles and Captions (#stSubs and #stCap in #stCaps): step 3 in the Standard workspace, a tab each of the clip panels in the Ultrawide one */
.st-caps { display: grid; gap: 12px 14px; margin-top: 4px; }
.st-caps:not(:has(> .st-caps-part:not(:empty))) { display: none; }
.st-caps-part:empty { display: none; }
#stCap > #capInspector { grid-column: 1 / -1; }
.st-caps.cap-editing > #stSubs, #stCap.cap-editing > :not(#capInspector) { display: none !important; } /* a caption selected: its words and times only */
.cap-insp-head { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
:root:not([data-page="studio"]) .cap-insp-head { display: none; }
:is(#wsSubs, #wsCap) :is(.sec-chev, .sec-sub) { display: none; } /* always open in its tab; its heading on one line */
:is(#wsSubs, #wsCap) .sec-toggle { pointer-events: none; }
:is(#wsSubs, #wsCap) .sec-switch { pointer-events: auto; }
#wsCap .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-clip-body { flex: 1 1 100%; }
.st-clip-body:empty { display: none; }
/* The picture of the video or of a video layer (rotate, flip, crop, colours, stabilise) */
.st-pic { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.st-pic-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.st-pic-head .link { margin-left: auto; }
.st-pic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.st-pic-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 620px) { .st-pic-grid { grid-template-columns: minmax(0, 1fr); } }
.st-clip-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-clip-acts:empty { display: none; }
.st-notes { display: grid; gap: 6px; }
.st-notes .size-hint { margin: 0; }
@media (max-width: 520px) { .st-clock { margin-left: 0; } }

/* Step 3: output and encoding, video settings and audio settings side by side */
.out-top { margin-bottom: 14px; }
.out-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 28px; align-items: start; }
@media (max-width: 860px) { .out-cols { grid-template-columns: minmax(0, 1fr); } }
.out-col > .sec-head { grid-column: 1 / -1; }
#outActions .actions { margin-top: 16px; }

/* Export Media (the Studio's step 3): compact, every row as low as its text allows */
#outputCard .card-head { margin-bottom: 8px; gap: 8px; }
#outputCard .card-head h2 { font-size: 15px; }
#outputCard .ws-tabs { margin: -2px 0 10px; }
#outputCard .ws-tabs button { padding: 4px 10px 5px; font-size: 12.5px; line-height: 1.3; }
#outputCard .ws-tabs button:focus-visible { outline: 0; color: var(--heading); border-bottom-color: color-mix(in srgb, var(--accent) 60%, transparent); }
#outputCard .ws-tabs button[aria-selected="true"]:focus-visible { border-bottom-color: var(--accent); }
#outputCard .grid { gap: 8px 12px; }
#outputCard .out-top { margin-bottom: 8px; }
#outputCard .out-range { margin-top: 0; margin-bottom: 4px; }
#outputCard .field { gap: 3px; }
#outputCard .field > span, #outputCard .field > label[for] { font-size: 12.5px; }
#outputCard :is(select, input[type=text], input[type=number], input[type=search], .gsel-btn) { height: 32px; padding-top: 4px; padding-bottom: 4px; }
#outputCard .name-wrap input { height: 30px; }
#outputCard .ext { padding: 0 8px; font-size: 12px; }
#outputCard .name-parts { gap: 4px 12px; margin-top: 3px; }
#outputCard .name-parts .check { font-size: 12.5px; gap: 5px; }
#outputCard .name-parts input.gtoggle { width: 28px; height: 16px; background: radial-gradient(circle at center, var(--knob) 0 5px, transparent 6px) no-repeat 1px 50% / 13px 13px, var(--toggle-off); }
#outputCard .name-parts input.gtoggle:checked { background: radial-gradient(circle at center, #fff 0 5px, transparent 6px) no-repeat 12px 50% / 13px 13px, color-mix(in srgb, var(--accent) 80%, transparent); }
#outputCard #presetHint, #outputCard .sec-sub { display: none; } /* tooltips: the preset's line on its label, the sections need no subtitle */
#outputCard #exportRangeHint:empty { display: none; }
#outputCard .sec-toggle { padding: 3px 0; }
#outputCard .sec-badge { font-size: 11px; padding: 0 7px; }
#outputCard #outActions .actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); flex-wrap: nowrap; }
#outputCard .actions .hints { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
#outputCard .actions button.primary { padding: 6px 22px; line-height: 1.3; flex: none; }

/* Studio timeline: video and audio layers, each with its opacity / volume */
.st-timeline { --fx-name: 236px; }
.st-row .fx-row-name { gap: 6px; }
.st-lname { all: unset; cursor: pointer; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 5px; }
.st-lname:hover { color: var(--text); text-decoration: underline; }
.st-lname:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.st-lay { flex: 1 1 60px; min-width: 40px; max-width: 90px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.st-lay-out { flex: none; width: 36px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); }
.st-row.st-vl, .st-row.st-al { cursor: pointer; }
.st-row.st-vl .fx-block, .st-row.st-al .fx-block { opacity: calc(.3 + .7 * var(--lay, 1)); }
.st-row.st-vl.off .fx-block, .st-row.st-al.off .fx-block { opacity: .3; }
.st-row.st-own .fx-block { opacity: calc(.3 + .7 * var(--lay, 1)); }
.fx-inspector .st-lay-big, .st-lay-big { display: flex; align-items: center; gap: 10px; min-width: min(100%, 340px); font-size: 13px; font-weight: 600; }
.st-lay-big .st-lay-range { flex: 1; accent-color: var(--accent); }
.st-lay-big .st-lay-out { width: 44px; font-size: 13px; }
/* A block of a group (Group, Ctrl+G): a dashed edge */
.fx-block.grouped { outline: 1px dashed rgba(255, 255, 255, .7); outline-offset: -3px; }
/* Video clips on the video layers; a clip and its own sound are linked (a chain mark); the selected layer */
.st-vclip { background: linear-gradient(180deg, #8b6ce0, #5f45b0); }
.fx-block.linked .fx-label::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; background: currentColor; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E") center / contain no-repeat; }
.st-row.chosen { background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
/* A track the speech detection made (V4 Subtitles, V5 Captions): a tint of its own, lit up when its blocks come. */
.st-row.st-role .st-lname { font-weight: 700; }
.st-row.st-role-subtitles { background: color-mix(in srgb, #4f7cff 8%, transparent); }
.st-row.st-role-subtitles .cap-block { background: linear-gradient(180deg, #5b84ff, #3556c4); }
.st-row.st-role-captions { background: color-mix(in srgb, #2fb6a6 8%, transparent); }
.st-row.st-flash { animation: st-flash 2.4s ease-out both; }
@keyframes st-flash {
  0%, 33%, 66% { box-shadow: inset 0 0 0 2px var(--accent); background-color: color-mix(in srgb, var(--accent) 24%, transparent); }
  16%, 50%, 100% { box-shadow: inset 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) { .st-row.st-flash { animation: none; box-shadow: inset 0 0 0 2px var(--accent); } }
.speech-dlg .dlg-actions { flex-wrap: wrap; justify-content: flex-end; }
/* A caption's own look, in the Inspector (collapsed until opened). */
.cap-look { flex-basis: 100%; min-width: 0; }
.cap-look summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.cap-look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 8px; align-items: end; }
.cap-look-grid label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cap-look-grid label.check { flex-direction: row; align-items: center; gap: 6px; }
.cap-look-grid select, .cap-look-grid input[type="range"] { width: 100%; min-width: 0; }
.cap-look-acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.st-vc-field { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.st-vc-field select { width: auto; min-width: 120px; }
@media (max-width: 640px) {
  .st-timeline { --fx-name: 92px; }
  .st-row .st-lay, .st-row .st-lay-out { display: none; } /* phones: the layer's name opens its slider under the timeline */
}
@media (max-width: 520px) { .st-timeline { --fx-name: 64px; } }

/* ======================================================================
   Keyboard shortcuts (hotkeys.js): the panel to change them (a tab of Settings), the note
   that says what a key did, the full-screen preview, the Studio page's
   tools (selection, razor) and markers
   ====================================================================== */
.hk-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 0; }
.hk-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.hk-tabs button { font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.hk-tabs button:hover { color: var(--heading); }
.hk-tabs button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.hk-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.hk-intro { margin: 8px 0 0; }
.hk-msg { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: var(--surface-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hk-msg[hidden] { display: none; }
.hk-msg.listen { background: var(--accent-soft); color: var(--accent-text); }
.hk-msg.ok { background: var(--ok-soft); color: var(--ok); }
.hk-msg.bad { background: var(--err-soft); color: var(--err); }
.hk-msg-acts { display: inline-flex; gap: 8px; align-items: center; }
.hk-list { padding: 4px 0 8px; margin-top: 8px; border-top: 1px solid var(--line); min-height: 120px; }
.hk-group { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--heading); margin: 14px 0 4px; }
.hk-group .small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.hk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--line); border-radius: 6px; }
.hk-row:hover { background: var(--surface-2); }
.hk-row.changed .hk-label::after { content: "changed"; margin-left: 8px; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); vertical-align: 1px; }
.hk-what { display: grid; gap: 2px; min-width: 0; }
.hk-label { font-size: 14px; font-weight: 600; color: var(--heading); }
.hk-where { opacity: .8; }
.hk-keys { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.hk-key { display: inline-flex; align-items: center; border: 1px solid var(--glass-border); border-radius: 8px; background: var(--glass-bg); }
.hk-chip { font: inherit; font-size: 12.5px; display: inline-flex; align-items: center; gap: 2px; min-height: 28px; padding: 3px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.hk-key .hk-chip { border-radius: 8px 0 0 8px; }
.hk-chip:hover, .hk-chip:focus-visible { color: var(--accent-text); outline: none; background: var(--accent-soft); }
.hk-chip.hk-add { border: 1px dashed var(--glass-border); color: var(--muted); }
.hk-chip.listening { background: var(--accent); color: var(--accent-ink); animation: hk-pulse 1.1s ease-in-out infinite; }
@keyframes hk-pulse { 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .hk-chip.listening { animation: none; } }
.hk-x { font: inherit; font-size: 15px; line-height: 1; width: 24px; min-height: 28px; border: 0; border-left: 1px solid var(--glass-border); border-radius: 0 8px 8px 0; background: none; color: var(--muted); cursor: pointer; }
.hk-x:hover, .hk-x:focus-visible { color: var(--err); outline: none; background: var(--err-soft); }
kbd { font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface); color: var(--heading); white-space: nowrap; }
.hk-chip.listening kbd { background: transparent; color: inherit; border-color: currentColor; }
.hk-plus { color: var(--muted); font-size: 11px; padding: 0 1px; }
.hk-none { padding: 18px 0; text-align: center; }
.hk-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0 0; border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .hk-row { grid-template-columns: minmax(0, 1fr); }
  .hk-keys { justify-content: flex-start; }
}

/* What a key did, for a moment at the bottom of the screen */
.hk-hud {
  position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  max-width: min(520px, calc(100vw - 32px)); padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-align: center;
  background: var(--surface); color: var(--heading); border: 1px solid var(--glass-border); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: opacity .18s ease, transform .18s ease;
}
.hk-hud.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .hk-hud { transition: none; } }

/* The preview over the whole screen (Ctrl+`) */
#previewCard.pv-full {
  position: fixed; inset: 0; z-index: 50; margin: 0; max-width: none; width: 100%; height: 100%; border-radius: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 16px 20px; background: #05070d; color: #e8ecf6; overflow: auto;
}
#previewCard.pv-full:fullscreen { background: #05070d; }
#previewCard.pv-full .pv-facts, #previewCard.pv-full .pv-note { display: none; }
#previewCard.pv-full .card-head h2, #previewCard.pv-full .card-head .muted { color: #e8ecf6; }
#previewCard.pv-full .pv-stage { flex: none; }

/* Studio page: the selection and razor tools, markers on the ruler */
.st-tools { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.st-tools button { display: grid; place-items: center; width: 30px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.st-tools button svg { width: 18px; height: 18px; }
.st-tools button:hover { color: var(--heading); }
.st-tools button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.st-tools button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.st-razor .st-timeline .fx-block, .st-razor .st-timeline .fx-block .fx-h { cursor: crosshair; }
.st-mark { position: absolute; bottom: 0; width: 10px; height: 10px; margin-left: -5px; background: var(--warn); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); pointer-events: none; }

/* ======================================================================
   Studio workspace (workspaces.js), after Premiere Pro's: the panels in
   the places of one grid, Ultrawide editing (the only layout since 1.30)
     Effect Controls / Mixer | Source | Program | Properties / Color / Sound
     Project bin | tools + timeline (the whole width)   | audio meters
   ====================================================================== */
.file-row.ws-hide { display: none !important; }

/* Panels that only the Ultrawide workspace shows */
#wsInspCard, #wsSrcCard, #wsMeterCard, .ws-tabs, .ws-color, .st-toolcol:empty { display: none; }
:root[data-page="studio"][data-ws="ultrawide"] .ws-off { display: none !important; }
/* Upscale: its own tab, so without the collapsible head it has under the timeline */
.ws-up { align-content: start; }
.ws-up > .sec-head { display: none; }

/* Tabs, like a Premiere panel's */
.ws-tabs { gap: 2px; margin: -4px 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ws-tabs button { flex: none; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 12px 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ws-tabs button:hover { color: var(--heading); }
.ws-tabs button[aria-selected="true"] { color: var(--heading); border-bottom-color: var(--accent); }
.ws-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.ws-pane { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ws-none { margin: 0; }

/* Source monitor (its own panel): the chosen file as it is (no settings), to look at before it goes on the timeline */
.ws-src { display: grid; gap: 10px; align-content: start; min-width: 0; }
.ws-src-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-src-bar select { flex: 1 1 180px; min-width: 0; width: auto; }

/* ---------- editing proxies: Proxy | Original at the right of the Program and Source heads (proxytoggle.js).
   The two heads are one row of the same height, so the switches sit on the same line and take no
   height from the pictures; the title and its "of ..." give way first, then the badge. */
:root[data-page="studio"] :is(#previewCard, #wsSrcCard) > .card-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
  height: 36px; flex-shrink: 0; box-sizing: border-box; min-width: 0;
}
:root[data-page="studio"] :is(#previewCard, #wsSrcCard) > .card-head h2 { flex: none; white-space: nowrap; }
.px-bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.px-head { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; }
.px-head .px-badge { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.px-seg button, .px-head .px-seg button { padding: 4px 10px; font-size: 12px; line-height: 1.2; }
.px-seg button:disabled { cursor: not-allowed; opacity: .5; }
.px-seg.px-off .thumb { opacity: .45; }
.px-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font: 600 11px/1.6 var(--mono); letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
}
.px-badge:empty { display: none; }
.px-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.px-badge.px-is-proxy { color: var(--px-proxy); background: color-mix(in srgb, var(--px-proxy) 12%, transparent); border-color: color-mix(in srgb, var(--px-proxy) 40%, transparent); }
.px-badge.px-is-orig { color: var(--px-orig); background: color-mix(in srgb, var(--px-orig) 12%, transparent); border-color: color-mix(in srgb, var(--px-orig) 40%, transparent); }
.px-badge.px-gen::before { background: none; border: 2px solid currentColor; border-right-color: transparent; width: 6px; height: 6px; animation: px-spin .9s linear infinite; }
@keyframes px-spin { to { transform: rotate(360deg); } }
.px-stop { flex: none; padding: 2px 9px; border-radius: 999px; font: 600 11px/1.6 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; }
.px-stop:hover { color: var(--text); border-color: currentColor; }
.px-stop[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .px-badge.px-gen::before { animation: none; } }
.ws-src-frame { position: relative; display: grid; place-items: center; width: 100%; max-height: var(--ws-src-max, 340px); aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }
.ws-src-frame img { width: 100%; height: 100%; object-fit: contain; }
.ws-src-frame img:not([src]) { opacity: 0; }
.ws-src-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ws-src-frame video[hidden], .ws-src-frame img[hidden] { display: none; }
.ws-src-frame .pv-spin { position: absolute; }
.ws-src-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
:is(.ws-pane, .ws-src) .pv-time { margin-top: 0; }

/* Audio Clip Mixer (mixer.js), after Premiere Pro's: a channel strip per audio track, side by side.
   --mx-y6 / --mx-y0: where -6 dB and 0 dB sit on the scale (set by mixer.js). */
:root { --mx-value: #1f6fd1; --mx-meter-bg: #050505; --mx-green: #2fbf71; --mx-yellow: #e6c229; --mx-red: #e5484d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mx-value: #4ea2ff; } }
:root[data-theme="dark"] { --mx-value: #4ea2ff; }
.ws-mixer { display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; min-height: 60px; scrollbar-width: thin; }
.mx-empty { margin: 4px 0; }
.mx-strip { flex: none; width: 118px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 6px; border-right: 1px solid var(--line); color: var(--muted); user-select: none; -webkit-user-select: none; }
.mx-strip:first-child { border-left: 1px solid var(--line); }
/* Nothing of the track at the playhead: dimmed, as Premiere does (it still works). */
.mx-strip.dim .mx-panval, .mx-strip.dim .mx-dbval, .mx-strip.dim .mx-foot, .mx-strip.dim .mx-lr { opacity: .55; }
.mx-strip.dim .mx-handle { opacity: .6; }
/* Pan */
.mx-pan { display: grid; justify-items: center; gap: 2px; }
.mx-knob { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; color: var(--text); cursor: ns-resize; touch-action: none; }
.mx-knob-mark { position: absolute; left: 50%; top: -2px; width: 2px; height: 13px; margin-left: -1px; background: currentColor; border-radius: 1px; transform-origin: 50% 13px; transform: rotate(var(--rot, 0deg)); }
.mx-knob:focus-visible, .mx-handle:focus-visible, .mx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mx-lr { display: flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--mx-value); }
.mx-lr-ticks { width: 20px; height: 7px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px); opacity: .7; }
.mx-panval, .mx-dbval { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mx-value); min-height: 1.2em; }
/* M, S, ◇ */
.mx-btns { display: flex; gap: 4px; }
.mx-btn { font: inherit; font-size: 11.5px; font-weight: 700; width: 22px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); cursor: pointer; line-height: 20px; }
.mx-btn:hover { color: var(--text); background: var(--surface-2); }
.mx-m.on { background: var(--mx-yellow); color: #1b1300; }
.mx-s.on { background: var(--mx-green); color: #04210f; }
.mx-w.on { background: var(--mx-value); color: #fff; }
/* The scale with the fader, the meter */
.mx-body { display: flex; gap: 4px; width: 100%; height: clamp(200px, calc(var(--ws-top, 520px) - 250px), 560px); }
.mx-scale { position: relative; width: 38px; flex: none; padding-top: 14px; }
.mx-unit { position: absolute; top: 0; left: 2px; font-size: 9.5px; }
.mx-rail { position: relative; height: calc(100% - 6px); margin-top: 0; cursor: ns-resize; touch-action: none; }
.mx-marks { position: absolute; inset: 0 14px 0 0; }
.mx-mark { position: absolute; right: 0; transform: translateY(50%); font-size: 9.5px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mx-mark::after { content: ""; display: inline-block; width: 4px; height: 1px; margin-left: 2px; vertical-align: middle; background: currentColor; }
.mx-mark-quiet { color: transparent; }
.mx-mark-quiet::after { background: var(--muted); }
.mx-groove { position: absolute; top: 0; bottom: 0; right: 6px; width: 2px; background: var(--line); border-radius: 1px; }
.mx-handle { position: absolute; right: 0; width: 14px; height: 30px; transform: translateY(50%); border: 2px solid var(--text); border-radius: 3px; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); cursor: ns-resize; }
.mx-handle::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; margin-top: -1px; background: var(--text); }
.mx-meter { flex: 1; display: flex; gap: 3px; padding: 14px 3px 6px; background: var(--mx-meter-bg); border-radius: 2px; cursor: pointer; min-width: 0; }
.mx-ch { position: relative; flex: 1; min-width: 6px; }
.mx-fill { position: absolute; inset: 0; background: linear-gradient(0deg, var(--mx-green) 0, var(--mx-green) var(--mx-y6, 86%), var(--mx-yellow) var(--mx-y6, 86%), var(--mx-yellow) var(--mx-y0, 75%), var(--mx-red) var(--mx-y0, 75%)); clip-path: inset(100% 0 0 0); }
.mx-ch::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--mx-yellow); opacity: .7; } /* the silent line, as in Premiere */
.mx-peak { position: absolute; left: 0; right: 0; height: 2px; margin-bottom: -1px; background: var(--mx-green); display: none; }
.mx-peak.on { display: block; }
.mx-peak.hot { background: var(--mx-red); }
.mx-clip { position: absolute; left: 0; right: 0; top: -10px; height: 6px; border-radius: 1px; background: #2a1012; }
.mx-clip.on { background: var(--mx-red); }
/* The name */
.mx-foot { display: flex; align-items: baseline; gap: 8px; width: 100%; font-size: 12.5px; }
.mx-short { flex: none; font-weight: 600; color: var(--text); }
.mx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 1px; border-bottom: 1px solid var(--line); text-align: center; color: var(--text); }
.mx-strip.muted .mx-meter { opacity: .55; }
.ws-mixer-note { margin: 0; }

/* Color Correction: the colours of the selected piece of the video or video layer */
.ws-color .st-pic-grid { grid-template-columns: minmax(0, 1fr); }

/* Audio meters: two bars, L and R, from -60 dB to 0 dB */
#wsMeterCard { padding: 10px 6px 8px; }
#wsMeter { display: block; width: 100%; height: calc(100% - 18px); min-height: 160px; }
.ws-meter-lr { display: flex; justify-content: space-around; padding-right: 22px; font-size: 11px; color: var(--muted); }

/* ---- the Ultrawide workspace: two rows of panels, the page as wide as the screen */
:root[data-page="studio"][data-ws="ultrawide"] .layout { max-width: none; gap: 12px; padding: 10px 14px 24px; align-items: stretch; }
:root[data-page="studio"][data-ws="ultrawide"] .banner { max-width: none; margin-left: 14px; margin-right: 14px; }
:root[data-page="studio"][data-ws="ultrawide"] .card { padding: 12px 14px; }
:root[data-page="studio"][data-ws="ultrawide"] .card-head { margin-bottom: 8px; }
:root[data-page="studio"][data-ws="ultrawide"] #wsInspCard { display: block; grid-area: insp; }
:root[data-page="studio"][data-ws="ultrawide"] #wsSrcCard { display: block; grid-area: mon; }
:root[data-page="studio"][data-ws="ultrawide"] .ws-tabs { display: flex; }
:root[data-page="studio"][data-ws="ultrawide"] .ws-color { display: grid; gap: 10px; }
:root[data-page="studio"][data-ws="ultrawide"] #outputCard { grid-area: fin; }
:root[data-page="studio"][data-ws="ultrawide"] .out-cols { grid-template-columns: minmax(0, 1fr); }
:root[data-page="studio"][data-ws="ultrawide"] #previewCard .pv-facts { display: none; }
/* The Ultrawide workspace fits the screen (21:9, 32:9 or any other): no page scrollbar. The page is a
   column as tall as the window (top bar, banners, the panels, a one-line footer); the panels' grid
   takes the rest: the top row as tall as --ws-top (workspaces.js, the handle between the rows in
   splitters.js), the bottom row (Project bin | Timeline | Audio meters) everything under it.
   Every panel is the same shell: a column exactly as big as its grid cell that never scrolls itself.
   Its head and tabs keep their height; what is left goes to its body, which fits its content to the
   room it has: the pictures (Program, Source) and the meters scale with the panel and keep their
   shape, the mixer's faders get taller and shorter, the timeline's tracks scroll inside the timeline.
   Only forms and lists that can't get smaller than their text (Effect Controls, Output, the bin's
   files) scroll, inside their body, under a head that stays put. */
@media (min-width: 861px) {
  :root[data-page="studio"][data-ws="ultrawide"] body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  :root[data-page="studio"][data-ws="ultrawide"] body > :is(.topbar, .banner, .foot) { flex-shrink: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] body > .topbar { width: 100%; } /* auto side margins would shrink it in the column */
  :root[data-page="studio"][data-ws="ultrawide"] .layout {
    flex: 1 1 0%; min-height: 0; width: 100%; padding-bottom: 8px;
    grid-template-rows: minmax(0, min(var(--ws-top, 50%), calc(100% - 180px))) minmax(0, 1fr);
  }
  :root[data-page="studio"][data-ws="ultrawide"] .foot { display: flex; justify-content: center; gap: 14px; padding: 0 14px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; }
  :root[data-page="studio"][data-ws="ultrawide"] .foot :is(.version, .foot-links) { display: inline; margin-top: 0; }

  /* the panel shell */
  :root[data-page="studio"][data-ws="ultrawide"] :is(#wsInspCard, #wsSrcCard, #previewCard:not([hidden]), #pvPlaceholder, #outputCard, #uploadCard, #optionsCard, #wsMeterCard) {
    display: flex; flex-direction: column; height: auto; width: 100%; min-height: 0; min-width: 0;
    overflow: hidden; box-sizing: border-box; align-self: stretch;
  }
  :root[data-page="studio"][data-ws="ultrawide"] :is(#wsInspCard, #wsSrcCard, #previewCard, #pvPlaceholder, #outputCard, #uploadCard, #optionsCard, #wsMeterCard).ws-max { width: auto; } /* maximized (`): the window less its inset */
  :root[data-page="studio"][data-ws="ultrawide"] #previewCard:not([hidden]) ~ #pvPlaceholder { display: none; }
  :root[data-page="studio"][data-ws="ultrawide"] :is(#wsInspCard, #wsSrcCard, #previewCard, #pvPlaceholder, #outputCard, #uploadCard, #optionsCard) > :is(.card-head, .ws-tabs) { flex-shrink: 0; }
  /* a body that scrolls (forms and lists only) */
  :root[data-page="studio"][data-ws="ultrawide"] :is(#wsFx:not(.ws-off), #wsUp:not(.ws-off), #wsSubs:not(.ws-off), #wsCap:not(.ws-off), #outBody, #uploadList, #optForm) { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

  /* Effect Controls | Upscale | Audio Clip Mixer: the open tab is the body */
  :root[data-page="studio"][data-ws="ultrawide"] #wsInspCard > .ws-pane:not(.ws-off) { flex: 1 1 0%; min-height: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] #wsFx .ec { max-width: none; } /* as wide as the panel */
  :root[data-page="studio"][data-ws="ultrawide"] #wsMixer:not(.ws-off) { display: flex; flex-direction: column; overflow: hidden; container: wsmix / size; }
  :root[data-page="studio"][data-ws="ultrawide"] #wsMixer > .ws-mixer { flex: 1 1 0%; min-height: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] #wsMixer > .ws-mixer-note { flex-shrink: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] #wsMixer .mx-body { flex: 1 1 0%; height: auto; min-height: 48px; } /* the faders as tall as the strip lets them */

  /* Program: the picture as big as the stage between the head and the time row (fitPreviewFrame, app.js) */
  :root[data-page="studio"][data-ws="ultrawide"] #previewCard { container: wspv / size; }
  :root[data-page="studio"][data-ws="ultrawide"] #previewCard > :not(#pvStage) { flex-shrink: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] #pvStage { flex: 1 1 0%; min-height: 0; overflow: hidden; align-content: center; }
  :root[data-page="studio"][data-ws="ultrawide"] #pvPlaceholder > .pv-empty { flex: 1 1 0%; min-height: 0; overflow: hidden; }
  /* ... as big as the Source picture and as high in its panel (matchSource, workspaces.js): the same black box */
  #previewCard.pv-as-src #pvStage { flex: none; box-sizing: border-box; max-width: 100%; min-height: 0; margin-inline: auto; padding: 0; border: 0; border-radius: 6px; background: #000; }
  #previewCard.pv-as-src #pvFrame { border-radius: 0; box-shadow: none; }
  #previewCard.pv-as-src #pvTimeRow { margin-top: 10px; } /* the Source panel's gap (.ws-src): the two time rows in line */

  /* Output and encoding: the tabs stay, the settings scroll under them */
  :root[data-page="studio"][data-ws="ultrawide"] #outBody { flex: 1 1 0%; min-height: 0; display: grid; gap: 12px 14px; align-content: start; }

  /* Project bin: the drop zone stays, the files scroll under it */
  :root[data-page="studio"][data-ws="ultrawide"] #uploadCard { container: wsbin / size; }
  :root[data-page="studio"][data-ws="ultrawide"] #uploadCard > :not(#uploadList) { flex-shrink: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] #uploadList { flex: 1 1 0%; min-height: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] #uploadList .rows { max-height: none; overflow: visible; } /* one scrollbar: the list's */

  /* Timeline: the timeline fills the card; open Upscale / Subtitles / Captions sections under it take
     room from it down to a smallest height, then the card's body scrolls. Its tracks scroll inside it
     under the ruler, and the playhead runs over all of it. */
  :root[data-page="studio"][data-ws="ultrawide"] #optForm { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
  :root[data-page="studio"][data-ws="ultrawide"] #optForm > .grid { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
  :root[data-page="studio"][data-ws="ultrawide"] #optForm > .grid > :not(.studio) { flex-shrink: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] #optForm > .grid > .studio { flex: 1 1 0%; min-height: min(100%, 300px); display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] .studio > :not(.st-timeline) { flex-shrink: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] #stTimeline { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; }
  :root[data-page="studio"][data-ws="ultrawide"] #stTimeline > :not(#stTracks) { flex-shrink: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] #stTracks { flex: 1 1 0%; min-height: 0; align-content: start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  /* the rows end where the ruler ends, also with the tracks' scrollbar (--st-sb, workspaces.js) */
  :root[data-page="studio"][data-ws="ultrawide"] #stTracks > * { margin-right: max(0px, calc(var(--fx-end) - var(--st-sb, 0px))); }

  /* Audio meters: the bars as tall as the panel */
  :root[data-page="studio"][data-ws="ultrawide"] #wsMeter { flex: 1 1 0%; min-height: 0; height: auto; }
  :root[data-page="studio"][data-ws="ultrawide"] .ws-meter-lr { flex-shrink: 0; }

  /* the Source monitor: the panel is a column (head, file row, picture, scrubber, marks, play); only the
     picture grows and shrinks with the panel, so the controls stay in view whatever size the
     splitters or the window give it. The picture keeps its shape (object-fit: contain). */
  :root[data-page="studio"][data-ws="ultrawide"] #wsSource { flex: 1 1 0%; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
  :root[data-page="studio"][data-ws="ultrawide"] #wsSource > :not(.ws-src-frame) { flex-shrink: 0; }
  :root[data-page="studio"][data-ws="ultrawide"] #wsSource .ws-src-frame { flex: 1 1 0%; min-height: 0; min-width: 0; width: 100%; max-height: none; aspect-ratio: auto; display: flex; align-items: center; justify-content: center; }
  :root[data-page="studio"][data-ws="ultrawide"] #wsSource .ws-src-frame :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
}
/* the selected clip's box (its name, times and buttons) is left out of the panels: the same clip is
   on the timeline and in Effect Controls */
:root[data-page="studio"][data-ws="ultrawide"] #stClip { display: none; }
:root[data-page="studio"][data-ws="ultrawide"] #uploadCard .drop { min-height: 70px; padding: 10px; }
:root[data-page="studio"][data-ws="ultrawide"] #uploadCard .drop > svg { display: none; }
/* small panels: what only explains things gives way to the picture, the faders and the files */
@container wspv (max-height: 320px) { #pvNote { display: none; } }
@container wsmix (max-height: 400px) { .ws-mixer-note { display: none; } }
@container wsbin (max-height: 340px) {
  :root[data-page="studio"][data-ws="ultrawide"] #uploadCard .drop { min-height: 0; padding: 6px 10px; }
  :root[data-page="studio"][data-ws="ultrawide"] #uploadCard .drop > .muted { display: none; }
  :root[data-page="studio"][data-ws="ultrawide"] #uploadCard .file-list { margin-top: 8px; padding-top: 6px; }
}
/* the timeline: the tools as a column on its left */
:root[data-page="studio"][data-ws="ultrawide"] .studio { position: relative; padding-left: 50px; }
:root[data-page="studio"][data-ws="ultrawide"] .st-toolcol { position: absolute; left: 0; top: 0; display: grid; gap: 6px; }
:root[data-page="studio"][data-ws="ultrawide"] .st-toolcol .st-tools { flex-direction: column; }

:root[data-page="studio"][data-ws="ultrawide"] .layout {
  grid-template-columns: var(--ws-cols-ultrawide, minmax(0, .8fr) minmax(0, 1.075fr) minmax(0, 1.075fr) minmax(0, .95fr) 78px);
  grid-template-areas: var(--ws-areas-ultrawide, "insp mon pv fin fin" "src tl tl tl vu");
}
:root[data-page="studio"][data-ws="ultrawide"] #wsMeterCard { display: block; grid-area: vu; }

/* narrow windows: one column, whatever the workspace (the page scrolls, as on a phone) */
@media (max-width: 860px) {
  :root[data-page="studio"][data-ws="ultrawide"] .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pv" "mon" "insp" "src" "tl" "fin"; }
  :root[data-page="studio"] #wsMeterCard { display: none !important; }
}

/* Splitters (splitters.js): drag the gap between two Studio panels to resize them, after Premiere
   Pro's docked panels. The handles lie over the gaps (a 10px grip, a thin line on hover). */
.layout { position: relative; }
.ws-splits { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.ws-splits[hidden], .ws-split[hidden] { display: none; }
:root:not([data-page="studio"]) .ws-splits { display: none; }
.ws-split { position: absolute; pointer-events: auto; touch-action: none; outline: none; }
.ws-split-col { width: 10px; margin-left: -5px; cursor: col-resize; }
.ws-split-row { height: 10px; margin-top: -5px; cursor: row-resize; }
.ws-split::after { content: ""; position: absolute; border-radius: 2px; background: var(--accent); opacity: 0; transition: opacity .12s; }
.ws-split-col::after { left: 4px; width: 2px; top: 8px; bottom: 8px; }
.ws-split-row::after { top: 4px; height: 2px; left: 8px; right: 8px; }
.ws-split:hover::after, .ws-split:focus-visible::after { opacity: .55; }
.ws-split.on::after { opacity: 1; }
/* while dragging: no text selection, the resize cursor everywhere, the players and the timeline don't take the pointer */
:root.ws-splitting body { user-select: none; -webkit-user-select: none; }
:root.ws-splitting-col, :root.ws-splitting-col * { cursor: col-resize !important; }
:root.ws-splitting-row, :root.ws-splitting-row * { cursor: row-resize !important; }
:root.ws-splitting :is(#pvStage, #stTimeline, video, audio, iframe, canvas) { pointer-events: none; }
@media (max-width: 860px) { .ws-splits { display: none; } }
@media (prefers-reduced-motion: reduce) { .ws-split::after { transition: none; } }

/* ` : the panel under the pointer over the whole window, and back (Esc too) */
:root.ws-maxed .layout { translate: none; transition: none; } /* a moved .layout would hold the fixed panel inside it (also while the pixel shift eases back) */
:root.ws-maxed body { overflow: hidden; }
.layout .card.ws-max {
  position: fixed; inset: 10px; z-index: 45; height: auto !important; max-height: none !important; overflow: auto;
  box-shadow: 0 0 0 100vmax color-mix(in srgb, #000 55%, transparent), var(--shadow);
}

/* ======================================================================
   Settings (settings.js): the gear in the top bar, Ctrl+, ; tabs on the
   left, the chosen tab with a search on the right, reset / export /
   import at the bottom
   ====================================================================== */
dialog.set-dlg { width: min(1040px, 96vw); height: min(86vh, 860px); padding: 0; display: none; overflow: hidden; }
dialog.set-dlg[open] { display: flex; flex-direction: column; }
.set-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.set-head strong { font-size: 17px; color: var(--heading); }
.set-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-right: 1px solid var(--line); overflow-y: auto; background: var(--surface-2); }
.set-nav button { font: inherit; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--muted); text-align: left; cursor: pointer; }
.set-nav button svg { width: 18px; height: 18px; flex: none; }
.set-nav button span { flex: 1; min-width: 0; }
.set-nav button:hover { color: var(--heading); background: var(--surface); }
.set-nav button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); }
.set-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.set-nav button.set-none { opacity: .5; }
.set-count { font-size: 11px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--surface); color: var(--heading); text-align: center; }
.set-count[hidden] { display: none; }
.set-main { overflow-y: auto; padding: 14px 20px 18px; min-width: 0; }
.set-search { width: 100%; position: sticky; top: 0; z-index: 2; margin: 0 0 10px; box-shadow: 0 -14px 0 var(--surface), 0 6px 0 var(--surface); }
.set-title { margin: 6px 0 2px; font-size: 16px; color: var(--heading); }
.set-blurb { margin: 0 0 10px; }
.set-elsewhere { margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.set-elsewhere[hidden] { display: none; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, auto); gap: 8px 18px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--line); }
.set-row.wide { grid-template-columns: minmax(0, 1fr); }
.set-row.off .set-what { opacity: .6; }
.set-what { display: grid; gap: 3px; min-width: 0; }
.set-label { font-size: 14px; font-weight: 600; color: var(--heading); }
.set-row.changed .set-label::after { content: "changed"; margin-left: 8px; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); vertical-align: 1px; }
.set-note { color: var(--warn); font-weight: 600; }
.set-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; min-width: 0; }
.set-row.wide .set-ctl { justify-content: flex-start; }
.set-ctl select { max-width: 340px; }
.set-num { display: inline-flex; align-items: center; gap: 6px; }
.set-num input { width: 90px; }
.set-seg button { padding: 6px 14px; font-size: 13px; }
.set-tpl { display: grid; gap: 8px; width: 100%; }
.set-tpl input { width: 100%; }
.set-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.set-token { font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; padding: 3px 9px; border-radius: 8px; border: 1px dashed var(--glass-border); background: var(--glass-bg); color: var(--text); cursor: pointer; }
.set-token:hover, .set-token:focus-visible { color: var(--accent-text); background: var(--accent-soft); outline: none; }
.set-tpl p, .set-store p { margin: 0; }
.set-store { display: grid; gap: 8px; width: 100%; justify-items: start; }
.set-meter { width: 100%; height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.set-meter span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.set-none-msg { padding: 18px 0; text-align: center; }
.set-msg { margin: 8px 18px 0; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: var(--surface-2); }
.set-msg[hidden] { display: none; }
.set-msg.ok { background: var(--ok-soft); color: var(--ok); }
.set-msg.bad { background: var(--err-soft); color: var(--err); }
.set-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--line); margin-top: 8px; }
.set-foot-gap { flex: 1; }
@media (max-width: 720px) {
  dialog.set-dlg { height: 92vh; }
  .set-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .set-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .set-nav button { width: auto; flex: none; white-space: nowrap; }
  .set-row { grid-template-columns: minmax(0, 1fr); }
  .set-ctl { justify-content: flex-start; }
  .set-main { padding: 12px 14px 16px; }
}

/* Studio timeline: the In / Out range on the ruler (I, O) and the line where a dragged block snapped */
.st-inout { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); border-bottom: 3px solid var(--accent); opacity: .85; pointer-events: none; }
.st-io { position: absolute; top: 0; bottom: 0; width: 7px; border: 2px solid var(--accent); pointer-events: none; }
.st-io-in { border-right: 0; }
.st-io-out { margin-left: -7px; border-left: 0; }
.st-snap { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--warn); margin-left: -1px; pointer-events: none; z-index: 3; }
.st-snap[hidden] { display: none; }

/* ---------------------------------------------------------------- Studio: Premiere-style track heads, work area, Source In / Out
   The blue of Premiere's timeline: the playhead, its timecode, targeted tracks, the focused panel. */
:root { --st-blue: #1f7ae0; --st-blue-ink: #fff; --st-wa: #d9a91f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-blue: #4aa3ff; --st-blue-ink: #06213f; --st-wa: #f0c84a; } }
:root[data-theme="dark"] { --st-blue: #4aa3ff; --st-blue-ink: #06213f; --st-wa: #f0c84a; }

/* The sequence header: the playhead's timecode, big, and the timeline's buttons */
.st-seqhead { display: inline-flex; align-items: center; gap: 10px; margin-right: 4px; }
.st-tc { min-width: 11ch; font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--st-blue); font-variant-numeric: tabular-nums; }
.st-tlbtns { display: inline-flex; gap: 2px; }
.st-tlbtns button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.st-tlbtns button svg { width: 18px; height: 18px; }
.st-tlbtns button:hover { color: var(--heading); background: color-mix(in srgb, var(--text) 8%, transparent); }
.st-tlbtns button[aria-pressed="true"] { color: var(--st-blue); background: color-mix(in srgb, var(--st-blue) 14%, transparent); }
.st-tlbtns button:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 1px; }
@media (max-width: 520px) { .st-tc { font-size: 18px; min-width: 0; } }

/* Track heads: the target (V1 / A1, blue when targeted), the lock, the eye or M and S */
.st-timeline { --fx-name: 272px; }
@media (max-width: 1100px) { .st-timeline { --fx-name: 200px; } .st-row .st-lay, .st-row .st-lay-out { display: none; } }
@media (max-width: 520px) { .st-timeline { --fx-name: 120px; } .st-row .st-lname { display: none; } }
.st-row .fx-row-name { gap: 3px; padding-left: 4px; }
.st-tgt { flex: none; width: 26px; height: 20px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; cursor: pointer; }
.st-tgt:hover { color: var(--heading); border-color: var(--st-blue); }
.st-tgt.on { background: var(--st-blue); border-color: var(--st-blue); color: var(--st-blue-ink); }
.st-tgt:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 1px; }
.st-tgt-none { border-color: transparent; cursor: default; }
.st-hb { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--muted); font: inherit; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.st-hb svg { width: 13px; height: 13px; }
.st-hb:hover { color: var(--heading); border-color: var(--line); }
.st-hb:focus-visible { outline: 2px solid var(--st-blue); outline-offset: 1px; }
.st-mute.on { background: #2fa36b; color: #fff; }
.st-solo.on { background: #e2b93b; color: #2a1d00; }
.st-row .fx-row-on { width: 20px; height: 20px; }
/* The line between the video tracks (above) and the audio tracks (below) */
.st-row.st-divide { border-top: 3px solid color-mix(in srgb, var(--text) 22%, transparent); }

/* The playhead: a blue pentagon on the ruler and a hairline through every track */
#stCursor { width: 1px; margin-left: 0; background: var(--st-blue); box-shadow: none; z-index: 4; }
#stCursor::before { content: ""; position: absolute; top: 0; left: -7px; width: 15px; height: 17px; background: var(--st-blue); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }

/* The work area (sequence In / Out): lit on the ruler; its bar and bracket handles just under the ticks */
.st-timeline .st-inout { background: color-mix(in srgb, var(--st-wa) 16%, transparent); border-bottom: 0; opacity: 1; }
.st-timeline .st-io { border-color: var(--st-wa); }
/* The sequence's duration bar (over the work area bar): its span, ◀ at its start, ▶ at its end, its duration in the middle */
.st-sd { position: relative; height: 14px; margin-left: var(--fx-name); margin-right: var(--fx-end); background: color-mix(in srgb, var(--text) 3%, transparent); }
.st-sd-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; font-style: normal; background: color-mix(in srgb, var(--st-blue) 30%, transparent); overflow: hidden; }
.st-sd-len { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; line-height: 1; color: var(--text); white-space: nowrap; pointer-events: none; }
.st-sd-h { position: absolute; top: 0; bottom: 0; width: 13px; padding: 0; border: 0; border-radius: 2px; background: var(--st-blue); color: var(--st-blue-ink); font-size: 8px; line-height: 14px; text-align: center; cursor: ew-resize; z-index: 3; }
.st-sd-h::after { content: ""; position: absolute; inset: -2px -5px; } /* a wider grip than it looks */
.st-sd-h:focus-visible { outline: 2px solid var(--st-wa); outline-offset: 1px; }
.st-sd-start { margin-left: 0; }
.st-sd-end { margin-left: -13px; }
.st-wa { position: relative; height: 12px; margin-left: var(--fx-name); margin-right: var(--fx-end); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--text) 5%, transparent); cursor: pointer; }
.st-wa[hidden] { display: none; }
.st-wa-empty { position: absolute; left: 6px; right: 0; top: 0; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; line-height: 12px; color: var(--muted); opacity: .75; white-space: nowrap; pointer-events: none; }
.st-wa-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 45%, transparent); cursor: grab; }
.st-wa-bar.render { background: var(--st-wa); }
.st-wa-bar:active { cursor: grabbing; }
.st-wa-h { position: absolute; top: -1px; bottom: -1px; width: 7px; border: 2px solid var(--st-wa); cursor: ew-resize; z-index: 2; }
.st-wa-h::after { content: ""; position: absolute; inset: -2px -6px; } /* a wider grip than it looks */
.st-wa-in { margin-left: -1px; border-right: 0; }
.st-wa-out { margin-left: -6px; border-left: 0; }

/* The panel with the focus (I, O and Alt+X work in it), as Premiere frames it in blue */
.st-timeline.st-focused { border-color: color-mix(in srgb, var(--st-blue) 70%, transparent); }
#wsSource.ws-focused .ws-src-frame { box-shadow: 0 0 0 2px var(--st-blue); }

/* The navigator under the timeline: drag the bar to scroll, its round ends to zoom */
.tl-zoom[data-zoom="st"] .tl-pan { display: none; }
.st-nav { position: relative; flex: 1 1 160px; min-width: 120px; height: 14px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); cursor: pointer; touch-action: none; }
.st-nav-thumb { position: absolute; top: 2px; bottom: 2px; min-width: 24px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 55%, transparent); cursor: grab; }
.st-nav-thumb:active { cursor: grabbing; }
.st-nav-h { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); cursor: ew-resize; }
.st-nav-h[data-nav="l"] { left: -4px; }
.st-nav-h[data-nav="r"] { right: -4px; }
.st-nav-h:hover { border-color: var(--st-blue); }

/* Source panel: the marked part (In to Out) on its scrubber, the buttons and its length */
.ws-src-scrub { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.ws-src-scrub input { width: 100%; position: relative; z-index: 1; background: transparent; }
.ws-src-io { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: 3px; background: color-mix(in srgb, var(--st-blue) 40%, transparent); box-shadow: inset 2px 0 0 var(--st-blue), inset -2px 0 0 var(--st-blue); pointer-events: none; }
.ws-src-io[hidden] { display: none; }
.ws-src-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ws-src-dur { margin-left: auto; color: var(--st-blue); }

/* Export Range (step 3) */
.out-range { margin-top: 4px; }
#exportRangeHint.bad { color: var(--warn); }

/* An error to read: a toast over the page (the Source panel's Insert when it is blocked) */
.st-toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 61; transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  max-width: min(560px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  background: var(--surface); color: var(--heading); border: 1px solid var(--err); box-shadow: 0 10px 30px rgba(0, 0, 0, .3), inset 4px 0 0 var(--err);
  transition: opacity .18s ease, transform .18s ease;
}
.st-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .st-toast { transition: none; } }

/* ---------------------------------------------------------------- Effect Controls (studio.js, effectcontrols.js), after Premiere Pro */
.ec { max-width: 760px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 10px; font-size: .86rem; overflow: hidden; }
.ec[hidden] { display: none; }
.ec-head { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--line) 35%, var(--surface)); }
.ec-title { font-weight: 600; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-empty { margin: 0; padding: 12px 10px; }
.ec-twirl { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 0; border: 0; background: none; color: var(--heading); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.ec-twirl::before { content: ""; flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .12s ease; }
.ec-twirl[aria-expanded="true"]::before { transform: rotate(90deg); }
.ec-group-head { width: 100%; padding: 6px 10px; text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; color: var(--muted); }
.ec-group-body[hidden], .ec-fx-body[hidden] { display: none; }
.ec-fx { border-top: 1px solid var(--line); }
.ec-fx-head { display: flex; align-items: center; gap: 8px; padding: 2px 10px; }
.ec-fx-head .ec-twirl { flex: 1; }
.ec-on { flex: none; min-width: 26px; height: 20px; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; background: none; color: var(--muted); font: italic 700 .74rem/1 var(--mono); cursor: pointer; }
.ec-on[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.ec-fx-off .ec-fx-body { opacity: .5; }
.ec-fx-body { padding: 2px 10px 8px 24px; }
.ec-note { margin: 2px 0 6px; }
.ec-row { display: grid; grid-template-columns: minmax(96px, 9.5em) minmax(0, 1fr) 24px; align-items: center; gap: 8px; min-height: 30px; }
.ec-label { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-ctl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ec input.ec-range { flex: 1; min-width: 60px; height: 18px; }
/* Premiere's blue numbers: plain until pointed at (the page's fields are full width and 38 px tall). */
.ec input.ec-num { flex: none; width: 5.4em; height: 26px; padding: 2px 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--accent-text); font: 600 .84rem var(--mono); text-align: right; }
.ec input.ec-num:hover, .ec input.ec-num:focus { border-color: var(--line); background: var(--bg); outline: none; }
.ec input.ec-num:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.ec input.ec-num:disabled { color: var(--muted); }
.ec input.ec-xy { width: 6em; }
.ec-unit { flex: none; width: 1.6em; color: var(--muted); font-size: .78rem; }
.ec-check { margin: 0; }
.ec select.ec-blend { width: auto; max-width: 12em; height: 30px; padding: 3px 8px; border-radius: 6px; }
.ec-dis .ec-label, .ec-dis .ec-ctl { opacity: .45; }
.ec-reset { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.ec-reset svg { width: 15px; height: 15px; }
.ec-reset:hover:not(:disabled) { color: var(--accent-text); background: var(--accent-soft); }
.ec-reset:disabled { opacity: .3; cursor: default; }
.st-pic-older { margin: 0 0 8px; }
@media (max-width: 560px) {
  .ec-row { grid-template-columns: minmax(80px, 7.5em) minmax(0, 1fr) 24px; }
  .ec-fx-body { padding-left: 12px; }
  .ec input.ec-num { width: 4.6em; }
  .ec input.ec-xy { width: 5em; }
}
@media (prefers-reduced-motion: reduce) { .ec-twirl::before { transition: none; } }

/* The clip over the preview while its Effect Controls change (studio.js liveShow): placed with the same geometry as the server's. */
.pv-motion { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pv-motion[hidden] { display: none; }
.pv-motion.main { background: #000; }
.pv-motion-clip { position: absolute; transform-origin: 50% 50%; outline: 1px solid var(--accent); }
.pv-frame .pv-motion img { width: 100%; height: 100%; object-fit: fill; opacity: 1; filter: none; transition: none; }
.pv-frame .pv-motion img[hidden] { display: none; }

/* ======================================================================
   The Queue (app.js): a button in the top bar with a popover of the
   exports in progress and the finished ones
   ====================================================================== */
.q-wrap { position: relative; flex: none; margin-left: auto; }
.q-wrap ~ .hw-chip { margin-left: 0; }
.q-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 11px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--heading); white-space: nowrap;
  background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-shine);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: transform .15s, border-color .2s, color .2s;
}
.q-btn svg { width: 18px; height: 18px; flex: none; }
.q-btn:hover, .q-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-text); }
.q-btn:active { transform: scale(.95); }
.q-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.q-spin, .q-dot { display: none; flex: none; }
/* processing: a spinner; ready: a green dot */
.q-btn[data-state="busy"] .q-spin { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: pv-spin .8s linear infinite; }
.q-btn[data-state="busy"] svg { display: none; }
.q-btn[data-state="ready"] .q-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.q-btn[data-state="ready"] { border-color: var(--ok); }
.q-btn.pulse { animation: q-pulse .7s ease-out; }
@keyframes q-pulse { 0% { box-shadow: 0 0 0 0 var(--accent); } 100% { box-shadow: 0 0 0 12px transparent; } }

.q-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(460px, calc(100vw - 32px));
  max-height: min(72vh, 680px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--pop-bg, var(--surface)); color: var(--text); border: 1px solid var(--glass-border); border-radius: 14px;
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28), inset 0 1px 0 var(--glass-shine);
  transform-origin: top right; animation: pop-in .32s var(--spring, ease-out);
}
.q-pop[hidden] { display: none; }
.q-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.q-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.q-title strong { color: var(--heading); font-size: 14.5px; }
.q-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-tools #qClear { margin-left: auto; }
.q-body { overflow: auto; overscroll-behavior: contain; padding: 10px 14px 12px; display: grid; gap: 12px; align-content: start; }
.q-body .empty { margin: 14px 0; text-align: center; }
.q-sec h3 { margin: 0 0 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.q-sec[hidden] { display: none; }
.q-pop .job { padding: 10px 12px; gap: 6px; background: var(--surface); }
.q-pop .job-meta { font-size: 12.5px; gap: 2px 12px; }
.q-progress { display: flex; align-items: center; gap: 10px; }
.q-progress .bar { flex: 1; }
.q-pct { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; color: var(--heading); }
.q-specs summary { font-size: 12.5px; }
.q-specs .specs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.q-pop .job-actions a.download { padding: 6px 14px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.q-foot { border-top: 1px solid var(--line); padding: 8px 14px 10px; }
.q-foot[hidden] { display: none; }

/* the desktop notifications switch */
.q-switch { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px 0; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.q-switch:disabled { opacity: .5; cursor: not-allowed; }
.q-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.q-track { position: relative; width: 32px; height: 18px; border-radius: 999px; background: var(--toggle-off, var(--surface-2)); border: 1px solid var(--glass-border); transition: background .2s; flex: none; }
.q-track i { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--knob, #fff); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .25s var(--spring, ease-out); }
.q-switch[aria-checked="true"] .q-track { background: var(--accent); border-color: transparent; }
.q-switch[aria-checked="true"] .q-track i { transform: translateX(14px); }

/* "Export added to Queue", under the top bar on the right */
.q-toast {
  position: fixed; right: 20px; top: 76px; z-index: 60; opacity: 0; transform: translateY(-6px); pointer-events: none;
  max-width: calc(100vw - 32px); padding: 9px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--surface); color: var(--heading); border: 1px solid var(--ok); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: opacity .18s ease, transform .18s ease;
}
.q-toast::before { content: "✓"; color: var(--ok); margin-right: 8px; }
.q-toast.show { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .q-btn { height: 34px; padding: 0 10px; }
  .q-btn .q-word, .q-btn .q-paren { display: none; }
  /* under the whole top bar, its width less the gutters (the top bar is the box: it is moved by pixelshift, so fixed would be too) */
  .q-wrap { position: static; }
  .q-pop { left: 16px; right: 16px; top: calc(100% + 4px); width: auto; max-height: calc(100vh - 150px); }
  .q-toast { right: 16px; left: 16px; text-align: center; top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .q-pop, .q-btn.pulse { animation: none; }
  .q-btn[data-state="busy"] .q-spin { animation-duration: 2.4s; }
  .q-toast, .q-track, .q-track i { transition: none; }
}

/* ---------- the project bin (projectbin.js), after Premiere Pro's Project panel: List, Icon and Freeform views */
.pb { --pb-sel: rgba(31, 122, 224, .16); --pb-sel-line: rgba(31, 122, 224, .55); --pb-alt: var(--surface-2); --pb-bg: var(--surface);
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.pb, .pb-menu) { --pb-sel: rgba(74, 163, 255, .22); --pb-sel-line: rgba(74, 163, 255, .6); } }
:root[data-theme="dark"] :is(.pb, .pb-menu) { --pb-sel: rgba(74, 163, 255, .22); --pb-sel-line: rgba(74, 163, 255, .6); }
.pb-path { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.pb-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; white-space: nowrap; }
.pb-crumb { all: unset; cursor: pointer; padding: 2px 5px; border-radius: 5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 18em; }
.pb-crumb.here { color: var(--text); font-weight: 600; cursor: default; }
.pb-crumb:not(.here):hover, .pb-crumb.drop-in { background: var(--pb-sel); color: var(--text); }
.pb-crumb:focus-visible { outline: 2px solid var(--accent); }
.pb-sep { color: var(--muted); }
.pb-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pb-search { position: relative; flex: 0 1 260px; min-width: 110px; display: flex; }
.pb-search svg { position: absolute; left: 8px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.pb-search input { width: 100%; padding: 5px 8px 5px 30px; font-size: 13px; border-radius: 6px; }
.pb-count { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.pb-ibtn { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 30px; height: 28px; border-radius: 6px; color: var(--muted); cursor: pointer; flex: none; }
.pb-ibtn svg { width: 18px; height: 18px; }
.pb-ibtn:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }
.pb-ibtn[aria-pressed="true"] { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.pb-ibtn:disabled { opacity: .4; cursor: default; }
.pb-ibtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pb-pen:not(:disabled) { color: #3fb950; }

.pb-body { position: relative; overflow: auto; max-height: 380px; min-height: 120px; border: 1px solid var(--line); border-radius: 8px; background: var(--pb-bg); outline: none; overscroll-behavior: contain; scrollbar-width: thin; }
.pb-body:focus-visible { box-shadow: 0 0 0 2px var(--pb-sel-line); }
.pb-body.drop-files { box-shadow: inset 0 0 0 2px var(--accent); }
.pb-empty { padding: 18px 14px; line-height: 1.5; }
.pb-item { user-select: none; -webkit-user-select: none; }
.pb-item.dragging { opacity: .45; }
.pb-sw { display: inline-block; flex: none; width: 1em; height: 1em; border-radius: .2em; background: var(--lab); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pb-svg { width: 100%; height: 100%; display: block; }
.pb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-rename { min-width: 0; flex: 1 1 auto; font: inherit; padding: 1px 4px; border-radius: 4px; }
.pb-chip { flex: none; font-size: .78em; font-weight: 600; padding: 0 .45em; border-radius: 99px; background: var(--st-blue); color: var(--st-blue-ink); }
.pb-dot { flex: none; width: .45em; height: .45em; border-radius: 50%; background: #f0c84a; }

/* List view: the text from 11 to 18 px (--pb-fs, Ctrl + mouse wheel); rows, swatches and icons follow it */
.pb-table { --pb-cols: minmax(11em, 1.5fr) minmax(6em, .6fr) minmax(9.5em, .9fr) minmax(13.5em, 1.2fr); font-size: var(--pb-fs, 13px); min-width: 41em; }
.pb-head, .pb-row { display: grid; grid-template-columns: var(--pb-cols); align-items: center; }
.pb-head { position: sticky; top: 0; z-index: 1; background: var(--pb-bg); border-bottom: 1px solid var(--line); }
.pb-hcell { all: unset; cursor: pointer; padding: .5em .6em; font-size: .92em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-hcell:first-child { padding-left: calc(.6em + 2.9em); }
.pb-hcell:hover, .pb-hcell.on { color: var(--text); }
.pb-hcell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pb-arrow { margin-left: .35em; }
.pb-row { min-height: calc(var(--pb-fs, 13px) * 2.15); border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); cursor: default; }
.pb-row:nth-child(odd) { background: var(--pb-alt); }
.pb-cell { padding: 0 .6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.pb-namecell { display: flex; align-items: center; gap: .55em; }
.pb-row .pb-ico { flex: none; width: 1.45em; height: 1.45em; }
.pb-row.pb-on { background: var(--pb-sel); }
.pb-row.current .pb-name { font-weight: 600; }
.pb-row.drop-in { box-shadow: inset 0 0 0 2px var(--st-blue); }

/* Icon and Freeform views: cards from 96 to 360 px wide (--pb-cw) */
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--pb-cw, 160px)); gap: 12px; padding: 10px; justify-content: start; }
.pb-free { position: relative; }
.pb-grid .pb-card { width: var(--pb-cw, 160px); }
.pb-free .pb-card { position: absolute; width: var(--pb-cw, 160px); }
.pb-card { display: flex; flex-direction: column; border-radius: 6px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--pb-cfs, 12px); cursor: default; }
.pb-card.pb-on { box-shadow: inset 0 0 0 2px var(--pb-sel-line); background: var(--pb-sel); }
.pb-card.drop-in { box-shadow: inset 0 0 0 2px var(--st-blue); }
.pb-thumb { position: relative; flex: none; height: calc((var(--pb-cw, 160px) - 8px) * 9 / 16); margin: 4px 4px 0; border-radius: 3px; background-color: #0b0b0b; background-repeat: no-repeat; background-size: 1000% 100%; background-position: 0 0; overflow: hidden; }
.pb-tico { position: absolute; inset: 0; margin: auto; width: 34%; height: 50%; opacity: .9; }
.pb-thumb.has-pic .pb-tico { display: none; }
.pb-k-bin .pb-thumb { background-color: transparent; }
.pb-k-bin .pb-tico { width: 60%; height: 80%; }
.pb-scrub { position: absolute; top: 0; bottom: 0; left: var(--scrub, 0); width: 1px; background: #4aa3ff; opacity: 0; pointer-events: none; }
.pb-thumb.scrubbing .pb-scrub { opacity: 1; }
.pb-badges { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 2px; }
.pb-badge { display: grid; place-items: center; width: calc(var(--pb-cw, 160px) * .09); min-width: 14px; max-width: 26px; aspect-ratio: 4 / 3; padding: 1px; border-radius: 2px; background: #1f6fd1; color: #e9f2ff; }
.pb-badge svg { width: 100%; height: 100%; }
.pb-dur { position: absolute; left: 4px; bottom: 4px; padding: 0 4px; border-radius: 3px; font-size: .85em; background: rgba(0, 0, 0, .6); color: #fff; font-variant-numeric: tabular-nums; }
.pb-chip-on { position: absolute; left: 4px; top: 4px; }
.pb-cap { display: flex; align-items: center; gap: 6px; padding: 5px 7px 7px; min-width: 0; color: var(--text); }
.pb-cap .pb-name { flex: 1 1 auto; }
.pb-cap .pb-sw { width: .9em; height: .9em; }

/* the bar under the items */
.pb-bar { display: flex; align-items: center; gap: 2px; min-width: 0; flex-wrap: wrap; }
.pb-gap { flex: 1 1 auto; }
.pb-zoom { flex: 0 1 110px; min-width: 40px; margin: 0 8px; accent-color: var(--muted); }
/* a narrow bin (the Ultrawide workspace's panel, a phone): the bar stays one row, the counter goes under the search */
.pb { container: pb / inline-size; }
@container pb (max-width: 380px) {
  .pb-top { flex-wrap: wrap; row-gap: 2px; }
  .pb-search { flex: 1 1 0%; min-width: 0; }
  .pb-count { flex-basis: 100%; text-align: right; }
  .pb-ibtn { width: 24px; }
  .pb-zoom { margin: 0 3px; }
}
.pb-menu { --pb-sel: rgba(31, 122, 224, .16); position: fixed; z-index: 1000; min-width: 190px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 28px rgba(0, 0, 0, .28); display: grid; }
.pb-menu[hidden] { display: none; }
.pb-menu > button { all: unset; display: flex; align-items: center; gap: 12px; padding: 6px 10px 6px 26px; border-radius: 5px; font-size: 13px; color: var(--text); cursor: pointer; position: relative; }
.pb-menu > button[aria-checked="true"]::before { content: "✓"; position: absolute; left: 9px; }
.pb-menu > button:hover:not(:disabled), .pb-menu > button:focus-visible { background: var(--pb-sel); outline: none; }
.pb-menu > button:disabled { opacity: .45; cursor: default; }
.pb-mkey { margin-left: auto; color: var(--muted); font-size: 12px; }
.pb-msep { height: 1px; margin: 4px 6px; background: var(--line); }
.pb-swatches { display: grid; grid-template-columns: repeat(9, 18px); gap: 5px; padding: 6px 8px; }
.pb-swatches button { all: unset; width: 18px; height: 18px; border-radius: 4px; background: var(--lab); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.pb-swatches button[aria-checked="true"], .pb-swatches button:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.hk-chip.hk-gesture { cursor: default; }

/* the Studio page: no line over the bin; Ultrawide: the bin fills its panel, only its items scroll */
:root[data-page="studio"] #uploadCard .file-list { border-top: 0; padding-top: 0; }
:root[data-page="studio"][data-ws="ultrawide"] #uploadList { display: flex; flex-direction: column; overflow: hidden; }
:root[data-page="studio"][data-ws="ultrawide"] .pb { flex: 1 1 0%; }
:root[data-page="studio"][data-ws="ultrawide"] .pb > :not(.pb-body) { flex-shrink: 0; }
:root[data-page="studio"][data-ws="ultrawide"] .pb-body { flex: 1 1 0%; max-height: none; min-height: 60px; }

/* ------------------------------------------------------------------ multiple sequences (projects.js, newsequence.js) */
/* The open sequences as tabs over the timeline, after Premiere's: the active one lit, ✕ closes it, drag to reorder. */
.st-tabs { display: flex; align-items: flex-end; gap: 2px; min-height: 30px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.st-tabs:empty { display: none; }
.st-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 5px 6px 5px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface); color: var(--muted); font-size: 12.5px; cursor: pointer; user-select: none; white-space: nowrap; }
.st-tab[aria-selected="true"] { color: var(--text); background: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
.st-tab .st-tab-name { overflow: hidden; text-overflow: ellipsis; }
.st-tab .st-tab-fmt { font-size: 11px; color: var(--muted); }
.st-tab-x { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; font-size: 13px; line-height: 1; cursor: pointer; }
.st-tab-x:hover, .st-tab-x:focus-visible { background: var(--err-soft); color: var(--err); }
.st-tab.dragging { opacity: .45; }
.st-tab.drop-before { box-shadow: inset 3px 0 0 var(--accent); }
.st-tab.drop-after { box-shadow: inset -3px 0 0 var(--accent); }
.st-empty .st-empty-new { margin-top: 6px; }
/* A nested sequence on the timeline: a clip of its own colour, double-click opens it. */
.fx-block.st-nested { background: linear-gradient(180deg, #2fb7a6, #187a6e); }
.fx-block.al-sound.st-nested { background: linear-gradient(180deg, #4fc7a0, #23856a); }
.fx-block.st-nested .fx-label::before { content: '⧉ '; }
.fx-block.st-nested.rendering { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
/* The New Sequence window */
.seq-dlg { width: min(560px, calc(100vw - 32px)); }
.seq-presets { border: 0; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.seq-presets label { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.seq-presets label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.seq-presets input { position: absolute; opacity: 0; pointer-events: none; }
.seq-presets label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.seq-presets b { font-size: 13px; }
.seq-grid { display: grid; grid-template-columns: 1fr auto 1fr 1.3fr; gap: 8px; align-items: end; margin-top: 10px; }
.seq-x { padding-bottom: 9px; color: var(--muted); }
.seq-dlg .field { margin: 0; }
.seq-dlg #seqShape { margin: 6px 0 8px; }
@media (max-width: 520px) { .seq-grid { grid-template-columns: 1fr auto 1fr; } .seq-grid > label:last-child { grid-column: 1 / -1; } }

/* ---------- accounts (auth.js): Sign in / Register, the account menu and its dialogs */
.acct { position: relative; flex: none; display: flex; align-items: center; gap: 6px; }
.acct button.primary.small { font-size: 12.5px; padding: 6px 12px; border-radius: 9px; }
.acct-badge {
  display: inline-flex; align-items: center; gap: 8px; max-width: 220px; height: 40px; padding: 0 12px 0 4px;
  background: var(--surface); color: var(--heading); border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer;
}
.acct-badge:hover { border-color: var(--accent); }
.acct-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-initial { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.acct-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 230px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); padding: 6px;
}
.acct-menu button {
  display: flex; width: 100%; padding: 8px 10px; background: none; border: 0; border-radius: 8px;
  font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer;
}
.acct-menu button:hover, .acct-menu button:focus-visible { background: var(--surface-2); outline: none; }
.acct-menu button.danger { color: var(--err); }
.acct-menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.acct-who { display: grid; gap: 2px; padding: 6px 10px 8px; min-width: 0; }
.acct-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); }
@media (max-width: 900px) { .acct-email { display: none; } .acct-badge { padding: 0 4px; } }

dialog.auth-dlg { width: min(440px, 94vw); padding: 18px 20px; }
dialog.auth-dlg.auth-admin { width: min(760px, 96vw); }
dialog.auth-dlg form { display: grid; gap: 12px; }
dialog.auth-dlg .actions { margin-top: 4px; justify-content: flex-end; }
.auth-tabs { justify-self: start; }
.auth-tabs button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.auth-why { margin: 0; padding: 8px 10px; border-radius: 9px; background: var(--accent-soft); color: var(--heading); font-size: 14px; }
.auth-err { margin: 0; padding: 8px 10px; border-radius: 9px; background: var(--err-soft); color: var(--err); font-size: 13.5px; }
.auth-privacy { margin: 0; line-height: 1.45; }
.auth-rules { list-style: none; margin: -4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--muted); }
.auth-rules li::before { content: "○ "; }
.auth-rules li.ok { color: var(--heading); }
.auth-rules li.ok::before { content: "● "; color: var(--accent); }
button.primary.danger { background: var(--err); color: #fff; }
button.secondary.danger { color: var(--err); }
.auth-users { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; margin: 8px 0 12px; }
.auth-user { display: grid; grid-template-columns: minmax(0, 1fr) auto 100px auto auto auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; }
.auth-user.off { opacity: .6; }
.auth-user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-user select { height: 32px; padding: 4px 8px; }
.auth-create { display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 100px auto; gap: 8px; margin-top: 8px; }
@media (max-width: 640px) {
  .auth-user { grid-template-columns: minmax(0, 1fr) auto; }
  .auth-create { grid-template-columns: minmax(0, 1fr); }
}
/* Edit / Studio while auth.js checks the sign-in: nothing but the top bar shows */
:root[data-auth-wait] body > :not(header):not(dialog) { visibility: hidden; }