@tikagent/video-editor-cli 0.0.0-stage → 1.5.0-preview.1

package/dist/runtime/style.css

@@ -0,0 +1,2126 @@
+/* ══════════════════ FableCut — Premiere-style dark theme ══════════════════ */
+:root {
+  --bg: #0e0e10;
+  --panel: #1b1b1f;
+  --panel-2: #232329;
+  --border: #2d2d34;
+  --text: #d7d7dc;
+  --dim: #8b8b93;
+  --accent: #7b6cff;
+  --accent-2: #4f8cff;
+  --danger: #e5484d;
+  --clip-video: var(--panel-2);
+  --track-h-video: 58px;
+  --track-h-audio: 42px;
+  --side-panel-w: 320px;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+}
+
+html,
+body {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font: 13px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  gap: 6px;
+  padding: 6px;
+}
+
+.topbar {
+  flex: 0 0 auto;
+  min-height: 46px;
+}
+
+.upper {
+  flex: 1 1 0;
+  min-height: 140px;
+  min-width: 0;
+}
+
+.timeline-panel {
+  flex: 0 0 var(--timeline-h, 400px);
+  min-height: 180px;
+  overflow: hidden;
+}
+
+.v-split {
+  flex: 0 0 6px;
+  cursor: ns-resize;
+  position: relative;
+  z-index: 5;
+  border-radius: 3px;
+}
+
+.v-split::after {
+  content: "";
+  position: absolute;
+  left: 18%;
+  right: 18%;
+  top: 2px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--border);
+  transition: background .15s;
+}
+
+.v-split:hover::after,
+.v-split.dragging::after {
+  background: var(--accent);
+}
+
+body.resizing-panels {
+  cursor: ns-resize !important;
+}
+
+body.resizing-panels * {
+  cursor: ns-resize !important;
+  user-select: none !important;
+}
+
+.hidden {
+  display: none !important;
+}
+
+/* Module visibility is applied from settings, independently of transient UI state. */
+[data-ui-setting]:not([data-ui-visible]) {
+  display: none !important;
+}
+
+.dim {
+  color: var(--dim);
+  display: inline-flex;
+}
+
+.flex-spacer {
+  flex: 1;
+}
+
+/* Visually hidden but still activatable (file picker via <label for>) */
+.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;
+}
+
+/* ── Top bar ── */
+.topbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 7px 12px;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.logo {
+  display: flex;
+  flex: none;
+  white-space: nowrap;
+  align-items: center;
+  font-size: 15px;
+  letter-spacing: .3px;
+  color: #fff;
+}
+
+.logo b {
+  color: var(--accent);
+}
+
+.logo-mark {
+  display: block;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+  margin-right: 6px;
+}
+
+.topbar-center {
+  flex: 1 1 80px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--dim);
+}
+
+.current-project-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+}
+
+.topbar-center:has(#projectSelect[data-ui-visible]) .current-project-name {
+  display: none;
+}
+
+.project-select {
+  min-width: 0;
+  width: 100%;
+  max-width: 280px;
+  height: 28px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 0 28px 0 9px;
+  background: var(--panel-2);
+  color: var(--text);
+  font: inherit;
+}
+
+.connection-status { font-size: 11px; white-space: nowrap; }
+
+.topbar-right {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  max-width: 100%;
+  margin-left: auto;
+  gap: 8px;
+  align-items: center;
+}
+
+#btnExport {
+  flex: none;
+  white-space: nowrap;
+}
+
+.layout-tools {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-right: 4px;
+}
+
+.btn-group {
+  display: inline-flex;
+  gap: 0px;
+}
+
+.btn-group .btn:first-child {
+  border-radius: 5px 0 0 5px;
+}
+
+.btn-group .btn:not(:first-child):not(:last-child) {
+  border-radius: 0;
+  margin: 0;
+}
+
+.btn-group .btn:last-child {
+  border-radius: 0 5px 5px 0;
+}
+
+.btn-group .btn.on {
+  border-color: var(--accent);
+  z-index: 1;
+}
+
+body.track-size-s .clip .clip-label {
+  font-size: 10px;
+  padding: 0 6px;
+}
+
+body.track-size-s .clip .fade {
+  display: none;
+}
+
+body.track-size-s .clip.c-audio .clip-body::after {
+  height: 12px;
+}
+
+body.track-size-s .clip {
+  border-width: 1px;
+  border-radius: 2px;
+  box-shadow: none;
+}
+
+body.track-size-s .clip .handle.l {
+  border-left-width: 1px;
+}
+
+body.track-size-s .clip .handle.r {
+  border-right-width: 1px;
+}
+
+body.track-size-s .clip.selected {
+  outline-width: 1px;
+  box-shadow: 0 0 0 1px #7b6cff55;
+}
+
+/* ── Title-style picker (inspector) ── */
+.style-picker-btn {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.style-menu {
+  position: fixed;
+  z-index: 100;
+  min-width: 190px;
+  max-height: 330px;
+  overflow-y: auto;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px;
+  box-shadow: 0 12px 32px #000c;
+}
+
+.style-opt {
+  padding: 7px 10px;
+  border-radius: 5px;
+  font-size: 15px;
+  line-height: 1.25;
+  color: var(--text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.style-opt:hover {
+  background: #7b6cff26;
+}
+
+.style-opt.on {
+  color: #cfc8ff;
+  background: #7b6cff14;
+}
+
+.ctx-menu {
+  position: fixed;
+  z-index: 200;
+  min-width: 160px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px;
+  box-shadow: 0 12px 32px #000c;
+}
+.ctx-opt {
+  padding: 7px 12px;
+  border-radius: 5px;
+  font-size: 13px;
+  color: var(--text);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ctx-opt:hover {
+  background: #7b6cff26;
+}
+/* media-replace picker reuses .style-menu/.style-opt but lists plain file
+   names, not font previews — match the app's normal UI text size */
+.style-opt.media-opt {
+  font-size: 12px;
+  line-height: 1.3;
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Buttons ── */
+.btn {
+  display: inline-block;
+  background: var(--panel-2);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 6px 12px;
+  font: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.btn:hover {
+  background: #2c2c34;
+  border-color: #3c3c46;
+}
+
+.btn:active {
+  transform: translateY(1px);
+}
+
+.btn.primary {
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  border: none;
+  color: #fff;
+  font-weight: 600;
+}
+
+.btn.primary:hover {
+  filter: brightness(1.12);
+}
+
+.btn.ghost {
+  background: transparent;
+}
+
+.btn.tiny {
+  padding: 3px 9px;
+  font-size: 12px;
+  border-radius: 5px;
+}
+
+.btn:disabled {
+  opacity: .4;
+  cursor: not-allowed;
+}
+
+.btn .ico {
+  display: inline-block;
+  vertical-align: -2px;
+  margin-right: 2px;
+}
+
+.btn.tiny.accent {
+  border-color: var(--accent);
+  color: #cfc8ff;
+}
+
+.btn.icon {
+  width: 34px;
+  padding: 6px 0;
+  text-align: center;
+}
+
+.btn.icon.big {
+  width: 44px;
+  font-size: 15px;
+}
+
+.btn.toggle.on {
+  border-color: var(--accent);
+  color: #cfc8ff;
+  background: #7b6cff1a;
+}
+
+/* ── Panels ── */
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 7px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: .4px;
+  color: var(--dim);
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--border);
+}
+
+.panel-head-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.panel-head-title .btn {
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 600;
+}
+
+.panel-head-actions {
+  display: flex;
+  gap: 6px;
+  text-transform: none;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.upper {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+  min-height: 0;
+}
+
+.panel.bin,
+.panel.inspector {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.panel.bin {
+  z-index: 1;
+}
+
+/* keep overflowing head buttons above the monitor */
+
+/* ── Media bin ── */
+.bin-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 6px 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.bin-tabs button {
+  flex: 1;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--dim);
+  font: 600 11px/1.2 "Segoe UI", sans-serif;
+  padding: 5px 2px 7px;
+  cursor: pointer;
+  letter-spacing: .2px;
+  white-space: nowrap;
+}
+
+.bin-tabs button:hover {
+  color: var(--text);
+}
+
+.bin-tabs button.on {
+  color: #cfc8ff;
+  border-bottom-color: var(--accent);
+}
+
+.bin-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.lib-item .lib-play,
+.lib-item .lib-add {
+  flex: none;
+  width: 26px;
+  padding: 3px 0;
+  text-align: center;
+}
+
+.bin-thumb.svg {
+  background-color: #2a2a33;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.bin-empty {
+  margin: auto;
+  text-align: center;
+  color: var(--dim);
+  padding: 20px 10px;
+}
+
+.bin-empty-icon {
+  font-size: 34px;
+  margin-bottom: 10px;
+  opacity: .8;
+}
+
+.bin-empty .hint {
+  margin-top: 8px;
+  font-size: 11px;
+  opacity: .7;
+}
+
+.bin-item,
+.bin-folder {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 6px;
+  padding-left: calc(6px + var(--bin-depth, 0) * 14px);
+  border-radius: 6px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  cursor: grab;
+}
+
+.bin-item:hover,
+.bin-folder:hover {
+  border-color: #454552;
+}
+
+.bin-item.selected {
+  border-color: var(--accent);
+  background: #7b6cff18;
+  box-shadow: inset 0 0 0 1px #7b6cff44;
+}
+
+.bin-item:active,
+.bin-folder:active {
+  cursor: grabbing;
+}
+
+.bin-item.bin-dragging,
+.bin-folder.bin-dragging {
+  opacity: .45;
+}
+
+.bin-folder {
+  background: #1a1a20;
+  cursor: default;
+}
+
+.bin-folder .bin-folder-twist {
+  flex: none;
+  width: 18px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--dim);
+  cursor: pointer;
+  font-size: 9px;
+  line-height: 22px;
+}
+
+.bin-folder-icon {
+  flex: none;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.bin-folder-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  outline: none;
+  border-radius: 3px;
+}
+
+.bin-folder-name[contenteditable="true"] {
+  background: var(--panel);
+  border: 1px solid var(--accent);
+  padding: 1px 4px;
+  cursor: text;
+}
+
+.bin-folder-count {
+  flex: none;
+  font-size: 10px;
+  color: var(--dim);
+  font-variant-numeric: tabular-nums;
+}
+
+.bin-folder-add {
+  flex: none;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--dim);
+  cursor: pointer;
+  opacity: 0;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.bin-folder:hover .bin-folder-add {
+  opacity: 1;
+}
+
+.bin-folder-add:hover {
+  color: var(--text);
+  background: #2a2a33;
+}
+
+.bin-item.bin-drop-over,
+.bin-folder.bin-drop-over,
+.bin-drop-root.bin-drop-over {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+  background: #7b6cff18;
+}
+
+.bin-drop-root {
+  margin-top: 4px;
+  padding: 8px;
+  border-radius: 6px;
+  border: 1px dashed transparent;
+  color: var(--dim);
+  font-size: 11px;
+  text-align: center;
+  opacity: 0;
+  transition: opacity .12s, border-color .12s;
+  pointer-events: none;
+}
+
+.bin-list:has(.bin-dragging) .bin-drop-root {
+  opacity: 1;
+  pointer-events: auto;
+  border-color: #454552;
+}
+
+.bin-thumb {
+  width: 58px;
+  height: 34px;
+  border-radius: 4px;
+  flex: none;
+  background: #000 center/cover no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+
+.bin-thumb-video {
+  background-size: contain;
+}
+
+/* 丢失提示只覆盖编辑器界面，不进入预览／导出的共享合成画布。 */
+.missing-media-notice:not([hidden]) { display: flex; }
+.missing-media-notice { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: #450f12; color: #ffe7e7; text-align: center; line-height: 1.5; overflow: auto; }
+.missing-media-icon { font-size: 28px; color: #ffaaa4; }
+.missing-media-notice strong { font-size: 18px; }
+#missingMediaNames { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
+#missingMediaHelp { max-width: 360px; color: #e7b3b5; font-size: 12px; }
+.missing-media-notice .btn { flex-shrink: 0; }
+.bin-item.media-missing .bin-thumb { background: #651e24; color: #ffc0bb; }
+.bin-item.media-missing .bin-sub { color: #ffaaa4; }
+.clip.media-missing .clip-body { background: #651e24 !important; }
+.clip.media-missing .fade { display: none; }
+.clip.media-missing .clip-label { color: #ffe7e7; }
+
+.bin-meta {
+  min-width: 0;
+  flex: 1;
+}
+
+.bin-name {
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #e8e8ee;
+}
+
+.bin-sub {
+  font-size: 11px;
+  color: var(--dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bin-del {
+  flex: none;
+  align-self: flex-start;
+  color: var(--dim);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  padding: 2px 4px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .12s;
+}
+
+.bin-item:hover .bin-del,
+.bin-folder:hover .bin-del {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.bin-del:hover {
+  color: var(--danger);
+}
+
+/* ── Monitor ── */
+.monitor-stage {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #000;
+  min-height: 0;
+  margin: 8px;
+  border-radius: 6px;
+  overflow: hidden;
+  position: relative;
+}
+
+.monitor-scroll {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.monitor-scroll.is-zoomed {
+  display: block;
+  overflow: auto;
+  cursor: grab;
+}
+
+.monitor-scroll.is-zoomed.is-panning {
+  cursor: grabbing;
+}
+
+.monitor-zoom-inner {
+  position: relative;
+  line-height: 0;
+  flex-shrink: 0;
+}
+
+/* Fit mode: fill the scrollport so #preview max-% resolves against the stage */
+.monitor-scroll:not(.is-zoomed) .monitor-zoom-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.monitor-scroll.is-zoomed .monitor-zoom-inner {
+  display: inline-block;
+}
+
+#preview {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+  background: #000;
+}
+
+.monitor-scroll.is-zoomed #preview {
+  max-width: none;
+  max-height: none;
+}
+
+/* ── Keyframe graphs (left gutter of program monitor) ── */
+.kf-graphs {
+  position: absolute;
+  left: 6px;
+  top: 6px;
+  bottom: 6px;
+  width: min(168px, 28%);
+  z-index: 4;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  pointer-events: none;
+}
+.kf-graphs[hidden] { display: none; }
+.kf-graph {
+  pointer-events: auto;
+  flex: 0 0 auto;
+  background: #000a;
+  border: 1px solid #ffffff18;
+  border-radius: 4px;
+  padding: 4px 5px 3px;
+  user-select: none;
+}
+.kf-graph-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  margin-bottom: 2px;
+  font: 700 9px/1 ui-sans-serif, system-ui, sans-serif;
+  letter-spacing: .35px;
+  color: #c8c8d0;
+}
+.kf-graph-head button {
+  margin: 0;
+  padding: 0 3px;
+  border: 0;
+  background: transparent;
+  color: #8b8b93;
+  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
+  cursor: pointer;
+  opacity: .75;
+}
+.kf-graph-head button:hover { color: #fff; opacity: 1; }
+.kf-graph canvas {
+  display: block;
+  width: 100%;
+  height: 52px;
+  cursor: crosshair;
+  border-radius: 2px;
+  background: #0a0a0ccc;
+}
+
+.insp-row label.kf-graph-toggle {
+  cursor: pointer;
+  border-radius: 3px;
+  margin: -1px -2px;
+  padding: 1px 2px;
+}
+.insp-row label.kf-graph-toggle:hover {
+  color: #cfc8ff;
+  background: #7b6cff22;
+}
+.insp-row label.kf-graph-toggle.on {
+  color: #b9baff;
+  background: #7b6cff33;
+}
+.insp-row label.kf-graph-toggle.has-kf::after {
+  content: " ◆";
+  font-size: 8px;
+  opacity: .7;
+}
+/* ── Per-track VU (RMS / LUFS / Peak) ── */
+.vu-meter {
+  position: absolute;
+  right: 8px;
+  bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  z-index: 4;
+  pointer-events: auto;
+  padding: 5px 5px 4px;
+  background: #000a;
+  user-select: none;
+}
+.vu-mode {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 2px 0 2px 14px;
+  border: 0;
+  background: transparent;
+  color: #c8c8d0;
+  font: 700 9px/1 ui-sans-serif, system-ui, sans-serif;
+  letter-spacing: .6px;
+  text-align: center;
+  cursor: pointer;
+  opacity: .85;
+}
+.vu-mode:hover { opacity: 1; color: #fff; }
+.vu-channels {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+}
+.vu-scale {
+  position: relative;
+  /* Match .vu-segs height: 16×12px + 15×2px gap */
+  width: 16px;
+  height: 222px;
+  margin-right: 0px;
+  pointer-events: none;
+}
+.vu-scale-tick {
+  position: absolute;
+  right: 0;
+  transform: translateY(-50%);
+  font: 700 8px/1 ui-sans-serif, system-ui, sans-serif;
+  color: #8b8b93;
+  letter-spacing: .2px;
+  white-space: nowrap;
+}
+.vu-scale-tick:first-child { transform: translateY(0); }
+.vu-scale-tick:last-child { transform: translateY(-100%); }
+.vu-channel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+}
+.vu-segs {
+  display: block;
+  /* size is set inline via JS (makeMeterCanvas) to match devicePixelRatio */
+}
+.vu-label {
+  font-size: 9px;
+  font-weight: 700;
+  color: #8b8b93;
+  letter-spacing: .3px;
+  line-height: 1;
+}
+
+.head-select {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 5px;
+  padding: 2px 6px;
+  font: 12px "Segoe UI", sans-serif;
+  max-width: 170px;
+}
+#fpsSel.head-select { max-width: 88px; }
+
+/* ── Safe-area guides (positioned over the canvas by JS) ── */
+#safeOverlay {
+  position: absolute;
+  pointer-events: none;
+  z-index: 5;
+}
+
+#safeOverlay .sa-action {
+  position: absolute;
+  inset: 5%;
+  border: 1px dashed #ffffff59;
+}
+
+#safeOverlay .sa-title {
+  position: absolute;
+  inset: 10%;
+  border: 1px dashed #ffffff30;
+}
+
+#safeOverlay .sa-ui-bottom,
+#safeOverlay .sa-ui-right {
+  display: none;
+}
+
+#safeOverlay.vertical .sa-ui-bottom {
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 34%;
+  background: repeating-linear-gradient(45deg, #ff4d6a14 0 8px, transparent 8px 16px);
+  border-top: 1px dashed #ff4d6a80;
+}
+
+#safeOverlay.vertical .sa-ui-right {
+  display: block;
+  position: absolute;
+  top: 30%;
+  right: 0;
+  bottom: 0;
+  width: 13%;
+  background: repeating-linear-gradient(45deg, #ff4d6a14 0 8px, transparent 8px 16px);
+  border-left: 1px dashed #ff4d6a80;
+}
+
+.transport {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 14px 10px;
+  gap: 12px;
+}
+
+.transport-btns {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.transport-btns .btn.icon {
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.transport-btns .btn.icon.big {
+  width: 40px;
+  height: 34px;
+  font-size: 16px;
+}
+
+#btnPlay.on {
+  background: #7b6cff;
+  border-color: #9a8fff;
+  color: #fff;
+  font-size: 19.2px; /* 16px × 1.2 — pause glyph reads smaller than ▶ */
+  /* ⏸ sits low in the em-box; padding shifts the flex content up to optical center */
+  padding-bottom: 3px;
+}
+
+#btnPlay.on:hover {
+  background: #8d80ff;
+  border-color: #b0a6ff;
+}
+
+.timecode {
+  font: 600 14px/1 "Consolas", monospace;
+  color: #b9b3ff;
+  min-width: 86px;
+  height: 14px;
+  line-height: 14px;
+  align-self: center;
+}
+
+.timecode.dim {
+  color: var(--dim);
+  text-align: right;
+}
+
+/* ── Inspector ── */
+.inspector-body {
+  flex: 1;
+  min-width: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.inspector-empty {
+  margin: auto;
+  text-align: center;
+  color: var(--dim);
+  padding-top: 40px;
+}
+
+.insp-multi {
+  margin-bottom: 12px;
+  padding: 7px 9px;
+  border-radius: 6px;
+  font-size: 11px;
+  color: #cfd0ff;
+  background: #7b6cff1c;
+  border: 1px solid #7b6cff44;
+}
+
+.insp-section {
+  margin-bottom: 14px;
+}
+
+.insp-section h3 {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  color: var(--dim);
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 4px;
+  margin-bottom: 8px;
+}
+
+.insp-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  min-width: 0;
+}
+
+.insp-row label {
+  flex: 0 0 72px;
+  font-size: 12px;
+  color: var(--dim);
+}
+
+.insp-row label.insp-reset {
+  cursor: help;
+}
+
+.insp-row label.insp-reset:hover {
+  color: #cfc8ff;
+}
+
+.insp-ctrls {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  gap: 6px;
+  align-items: center;
+}
+
+.insp-ctrls select,
+.insp-ctrls input[type=number] {
+  flex: 1;
+  min-width: 0;
+}
+
+.insp-ctrls .insp-dur {
+  flex: none;
+  width: 52px;
+}
+
+.insp-ctrls input[type=color],
+.insp-ctrls .btn {
+  flex: none;
+}
+
+.insp-row input[type=range] {
+  flex: 1;
+}
+
+.insp-row .val {
+  width: 42px;
+  flex: none;
+  text-align: right;
+  font-size: 11px;
+  color: var(--text);
+  font-family: Consolas, monospace;
+}
+
+.insp-row input[type=number],
+.insp-row input[type=text],
+.insp-row select {
+  flex: 1;
+  min-width: 0;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 4px;
+  padding: 4px 6px;
+  font: inherit;
+}
+
+.insp-row input[type=color] {
+  width: 40px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: none;
+}
+
+.insp-row textarea {
+  flex: 1;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 4px;
+  padding: 4px 6px;
+  font: inherit;
+  resize: vertical;
+  min-height: 48px;
+}
+
+input[type=range] {
+  accent-color: var(--accent);
+  height: 18px;
+}
+
+.kf-ctl {
+  display: flex;
+  gap: 2px;
+  flex: none;
+}
+
+.kf-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--dim);
+  border-radius: 4px;
+  font-size: 10px;
+  padding: 2px 5px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.kf-btn:hover {
+  color: #fff;
+  border-color: #4a4a56;
+}
+
+.kf-btn.has {
+  color: #ffd166;
+  border-color: #ffd16666;
+}
+
+/* ── Timeline ── */
+.thumbnail-progress {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--dim);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.thumbnail-progress[hidden] { display: none; }
+.thumbnail-progress progress { width: 64px; height: 5px; accent-color: var(--accent); }
+.timeline-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--border);
+}
+
+.tiny-label {
+  font-size: 11px;
+}
+
+#zoomSlider {
+  width: 130px;
+}
+
+.timeline {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.track-headers {
+  width: 128px;
+  flex: none;
+  border-right: 1px solid var(--border);
+  padding-top: 26px;
+  background: var(--panel);
+  z-index: 2;
+  overflow: hidden;
+}
+
+.track-head {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  padding: 0 6px;
+  border-bottom: 1px solid #232328;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--dim);
+  letter-spacing: .5px;
+}
+
+.track-head.disabled {
+  opacity: .55;
+}
+
+.track-id {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.track-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  margin: 0;
+  padding: 2px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  color: inherit;
+}
+
+.track-toggle:hover {
+  background: #ffffff12;
+}
+
+.track-toggle .track-ico {
+  display: block;
+  width: 15px;
+  height: 15px;
+  pointer-events: none;
+}
+
+.track-toggle .track-ico-off {
+  display: none;
+}
+
+.track-toggle[aria-pressed="false"] {
+  color: var(--dim) !important;
+}
+
+.track-toggle[aria-pressed="false"] .track-ico-off {
+  display: block;
+}
+
+.track.disabled {
+  opacity: .4;
+}
+
+.timeline-scroll {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: auto;
+  position: relative;
+}
+
+.ruler {
+  position: sticky;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 26px;
+  z-index: 3;
+  cursor: ew-resize;
+  background: var(--panel-2);
+}
+
+.tracks-content {
+  position: relative;
+}
+.work-dim {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background: #00000066;
+  pointer-events: none;
+  z-index: 1;
+}
+.work-dim-l {
+  left: 0;
+  border-right: 1px solid #5eead4aa;
+}
+.work-dim-r {
+  border-left: 1px solid #fb923caa;
+}
+.work-dim.hidden {
+  display: none;
+}
+
+.track {
+  position: relative;
+  border-bottom: 1px solid #232328;
+  background: repeating-linear-gradient(90deg, transparent 0 59px, #ffffff05 59px 60px);
+}
+
+.track.drop-hint {
+  background-color: #7b6cff14;
+}
+
+/* ── Clips ── */
+.clip {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  border-radius: 5px;
+  overflow: visible;
+  border: 1px solid #0007;
+  cursor: grab;
+  min-width: 8px;
+  box-shadow: 0 1px 3px #0006;
+}
+
+/* rounded clip content — trans wedges sit outside this so corners stay sharp */
+.clip-body {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+}
+
+.clip:active {
+  cursor: grabbing;
+}
+
+.clip.selected {
+  outline: 2px solid #b9baff;
+  outline-offset: -1px;
+  box-shadow: 0 0 0 3px #7b6cff55;
+}
+
+.clip.selected.primary {
+  outline-color: #fff;
+}
+
+/* rubber-band selection box drawn while dragging on empty timeline area */
+.marquee {
+  position: absolute;
+  z-index: 5;
+  pointer-events: none;
+  border: 1px solid #7b6cffcc;
+  background: #7b6cff22;
+  border-radius: 2px;
+}
+
+.clip .clip-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  color: #fff;
+  text-shadow: 0 1px 2px #000c;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  z-index: 3;
+}
+
+/* Keyframe diamonds on the clip — same size/color as ruler beat markers */
+.clip .clip-kfs {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 1px;
+  height: 8px;
+  pointer-events: none;
+  z-index: 6;
+}
+.clip .clip-kf {
+  position: absolute;
+  top: 0;
+  /* rotated square → ~8×8 tip-to-tip, matching ruler markers */
+  width: 6px;
+  height: 6px;
+  margin-left: -3px;
+  background: #ffd166;
+  transform: rotate(45deg);
+  pointer-events: auto;
+  cursor: pointer;
+}
+.clip .clip-kf:hover {
+  background: #ffe28a;
+}
+/* Count badge when ≥2 channels share this time (diamond stays rotated; numeral counter-rotates) */
+.clip .clip-kf.multi {
+  width: 8px;
+  height: 8px;
+  margin-left: -4px;
+  top: -1px;
+}
+.clip .clip-kf-n {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(-45deg);
+  font: 700 7px/1 ui-sans-serif, system-ui, sans-serif;
+  color: #1a1a1e;
+  pointer-events: none;
+  user-select: none;
+}
+body.track-size-s .clip .clip-kf-n {
+  font-size: 6px;
+}
+
+/* transition wedges — width from transition duration × pps (see transitionMarksHtml) */
+.clip .trans-mark {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: auto;
+  pointer-events: none;
+  z-index: 5;
+  overflow: hidden;
+}
+.clip .trans-mark svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.clip .trans-mark.in {
+  left: 0;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+.clip .trans-mark.out {
+  right: 0;
+  border-top-right-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+.clip .trans-mark polygon {
+  fill: #ffffff55;
+  stroke: #ffffffcc;
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  pointer-events: auto;
+  cursor: pointer;
+}
+.clip .trans-mark.focused polygon {
+  fill: #7b6cff88;
+  stroke: #cfc8ff;
+  stroke-width: 1.5;
+}
+/* duration handle — invisible drag strip at the wedge edge */
+.clip .trans-dur-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  cursor: ew-resize;
+  pointer-events: auto;
+  z-index: 3;
+}
+.clip .trans-mark.in .trans-dur-handle {
+  right: 0;
+}
+.clip .trans-mark.out .trans-dur-handle {
+  left: 0;
+}
+
+.insp-row.trans-active {
+  background: #7b6cff18;
+  border-radius: 6px;
+  margin: 0 -6px;
+  padding: 2px 6px;
+}
+
+.clip .fade {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, #ffffff1f, transparent 40%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.clip .handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  max-width: 25%;
+  cursor: ew-resize;
+  z-index: 7;
+}
+
+.clip .handle.l {
+  left: 0;
+  box-shadow: inset 3px 0 #ffffff55;
+}
+
+.clip .handle.r {
+  right: 0;
+  box-shadow: inset -3px 0 #ffffff55;
+}
+
+.clip:hover .handle.l, .clip.selected .handle.l { box-shadow: inset 3px 0 #cfc8ff; }
+.clip:hover .handle.r, .clip.selected .handle.r { box-shadow: inset -3px 0 #cfc8ff; }
+.clip .handle.trim-hover { background: #cfc8ff88; box-shadow: inset 0 0 0 1px #fff; }
+.tracks-content[data-gesture="trim-l"] .clip.primary .handle.l,
+.tracks-content[data-gesture="trim-r"] .clip.primary .handle.r { background: #cfc8ff88; }
+.timeline-gesture-hint {
+  position: fixed;
+  z-index: 210;
+  pointer-events: none;
+  max-width: min(420px, calc(100vw - 16px));
+  padding: 8px 12px;
+  border: 1px solid #6ee7b7;
+  border-radius: 6px;
+  background: #17171cf2;
+  color: #e8e8ee;
+  box-shadow: 0 4px 18px #0006;
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-line;
+  font-variant-numeric: tabular-nums;
+}
+.timeline-gesture-hint.limited { border-color: #fbbf24; }
+.timeline-menu { width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: auto; }
+.timeline-menu-heading { padding: 7px 10px; color: var(--dim); font-size: 11px; border-bottom: 1px solid var(--border); }
+.timeline-menu .ctx-opt {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 3px 12px;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  font-size: 12px;
+  white-space: normal;
+}
+.timeline-menu .ctx-opt kbd { color: var(--dim); font: inherit; }
+.timeline-menu .ctx-opt small { grid-column: 1 / -1; color: var(--dim); font-size: 10px; }
+.timeline-menu .ctx-opt:hover:not(:disabled), .timeline-menu .ctx-opt:focus-visible { background: #7b6cff26; outline: 1px solid #7b6cff77; }
+.timeline-menu .ctx-opt:disabled { opacity: .5; cursor: default; }
+.timeline-gap-preview { position: absolute; background: #fbbf242b; border-inline: 1px dashed #fbbf24; pointer-events: none; z-index: 5; }
+.timeline-zoom-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
+.timeline-toolbar .zoom-step { min-width: 24px; padding: 2px 5px; }
+@media (max-width: 700px) {
+  .timeline-toolbar #zoomSlider { width: 70px; }
+}
+
+.clip.c-video .clip-body {
+  background: var(--clip-video);
+}
+
+.clip-thumb-strip {
+  position: absolute;
+  inset: 0;
+  /* 整条胶片统一透明度，重叠边缘不会因为重复叠加而变亮。 */
+  opacity: .88;
+  pointer-events: none;
+}
+
+.clip.c-video .thumbs, .drop-ghost.c-video .thumbs {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background-repeat: no-repeat;
+  /* 等比填满每格，避免轨道边框和缩略图尺寸取整在拼接处露出底色。 */
+  background-size: cover;
+  background-position: center;
+  pointer-events: none;
+}
+
+.clip.c-image .clip-body {
+  background: linear-gradient(180deg, #2dbd8533, #2dbd8511), #1d5b45;
+}
+
+.clip.c-audio .clip-body {
+  background: linear-gradient(180deg, #7ec24933, #7ec24911), #33531f;
+}
+
+.clip.c-audio .clip-body::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 22px;
+  transform: translateY(-50%);
+  background: repeating-linear-gradient(90deg, #a5e07588 0 2px, transparent 2px 5px);
+  clip-path: polygon(0 50%, 5% 20%, 10% 70%, 15% 35%, 20% 80%, 25% 25%, 30% 60%, 35% 15%, 40% 75%, 45% 40%, 50% 85%, 55% 30%, 60% 65%, 65% 20%, 70% 78%, 75% 42%, 80% 68%, 85% 25%, 90% 72%, 95% 38%, 100% 50%, 100% 100%, 0 100%);
+  opacity: .55;
+  pointer-events: none;
+}
+
+.clip.c-audio.has-wave .clip-body::after {
+  display: none;
+}
+
+/* real waveform replaces the CSS placeholder */
+.clip .wave {
+  position: absolute;
+  inset: 3px 0;
+  width: 100%;
+  height: calc(100% - 6px);
+  pointer-events: none;
+}
+
+.clip.c-text .clip-body {
+  background: linear-gradient(180deg, #ff7ac833, #ff7ac811), #6b2a53;
+}
+
+.clip.c-svg .clip-body {
+  background: linear-gradient(180deg, #ffd16633, #ffd16611), #6b5420;
+}
+
+.clip.c-adjust .clip-body {
+  background: repeating-linear-gradient(135deg, #38bdf822 0 10px, transparent 10px 20px), #155e75;
+}
+
+/* ── Playhead ── */
+.playhead {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: #ff4d6a;
+  z-index: 4;
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.playhead::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -5px;
+  right: -5px;
+}
+
+.playhead-cap {
+  position: absolute;
+  top: 0;
+  left: -6px;
+  width: 13px;
+  height: 14px;
+  background: #ff4d6a;
+  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
+}
+
+/* ── Overlays / dialogs ── */
+.project-load-dialog { margin: auto; max-width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; color: var(--text); overflow: auto; }
+.project-load-dialog::backdrop { background: #000b; }
+.project-load-dialog p { line-height: 1.7; overflow-wrap: anywhere; }
+.project-load-dialog h2 { color: #ffaaa4; }
+.project-load-dialog .project-load-id, .project-load-dialog details { font-size: 12px; color: var(--dim); }
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: #000a;
+  backdrop-filter: blur(3px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+
+.dialog {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 24px 28px;
+  width: 420px;
+  box-shadow: 0 20px 60px #000a;
+}
+
+.dialog h2 {
+  font-size: 16px;
+  margin-bottom: 6px;
+  color: #fff;
+}
+
+.dialog p {
+  margin-bottom: 16px;
+}
+
+.progress {
+  height: 8px;
+  border-radius: 4px;
+  background: var(--panel-2);
+  overflow: hidden;
+  margin-bottom: 18px;
+}
+
+.progress-fill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, var(--accent), var(--accent-2));
+  transition: width .2s;
+}
+
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.export-dialog { width: min(526px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border-radius: 20px; background: #1e2028; border-color: #30333f; color: #e8e9ef; }
+.export-header { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 18px; border-bottom: 1px solid #2b2e38; }
+.export-header-icon { flex: none; color: #5868ff; margin-top: 1px; }
+.export-heading { min-width: 0; flex: 1; }
+.export-heading h2 { font-size: 17px; line-height: 1.45; margin: 0 0 4px; color: #e8e9ef; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.export-heading p { color: #969bac; font-size: 14px; line-height: 1.5; margin: 0; }
+.export-close { flex: none; border: 0; background: none; color: #969bac; cursor: pointer; font-size: 27px; line-height: 28px; width: 32px; height: 32px; margin: 6px -6px 0 0; border-radius: 6px; }
+.export-close:hover { color: #fff; background: #ffffff0d; }
+.export-body { display: flex; justify-content: center; padding: 26px 24px 38px; }
+.export-preview { position: relative; width: min(100%, var(--export-preview-width, 224px)); aspect-ratio: var(--export-aspect, 9 / 16); border-radius: 14px; overflow: hidden; background: #111218; }
+.export-preview video { width: 100%; height: 100%; display: block; object-fit: contain; }
+.export-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 0; background: #1c1512bb; color: #fff; cursor: pointer; }
+.export-play:disabled { cursor: default; opacity: .8; }
+.export-play svg { margin-left: 3px; }
+.export-time { position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 7px; background: #1a1616c9; color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.export-footer { padding: 0 25px 22px; }
+.export-status-row { display: flex; gap: 9px; align-items: center; margin-bottom: 11px; font-size: 14px; line-height: 1.5; }
+#exportNote { flex: 1; min-width: 0; color: #9ca1b3; overflow-wrap: anywhere; }
+#exportPercent { font-size: 14px; font-variant-numeric: tabular-nums; flex: none; margin-left: 10px; }
+.export-status-icon { width: 16px; height: 16px; border: 2px solid #353b50; border-right-color: #6573ff; border-radius: 50%; flex: none; animation: export-spin 1s linear infinite; }
+.export-footer .progress { margin: 0; background: #2b2e39; height: 8px; }
+.export-footer .progress-fill { background: linear-gradient(90deg, #4f6bff, #9258f7); }
+#exportOverlay[data-status="complete"] #exportNote { color: #4ed7a2; }
+#exportOverlay[data-status="complete"] .export-status-icon { animation: none; border-color: #4ed7a2; position: relative; }
+#exportOverlay[data-status="complete"] .export-status-icon::after { content: ""; position: absolute; width: 6px; height: 3px; border-left: 1.5px solid #4ed7a2; border-bottom: 1.5px solid #4ed7a2; transform: rotate(-45deg); left: 3px; top: 3px; }
+#exportOverlay[data-status="error"] #exportNote, #exportOverlay[data-status="error"] #exportPercent { color: #ff7373; }
+#exportOverlay[data-status="error"] .export-status-icon { animation: none; border-color: #ff7373; color: #ff7373; position: relative; }
+#exportOverlay[data-status="error"] .export-status-icon::after { content: "!"; position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 12px; font-weight: 700; }
+#exportOverlay[data-status="error"] .progress-fill { background: linear-gradient(90deg, #ff6b6b, #ff9460); }
+.export-recovery .dialog-actions:has(button:not([hidden])) { margin-top: 12px; flex-wrap: wrap; }
+.export-recovery .export-quick { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 43px; border: 0; border-radius: 11px; background: linear-gradient(90deg, #4f6bff, #7055f5); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px #4f6bff33; }
+.export-recovery .export-quick:hover { filter: brightness(1.08); }
+.export-recovery .export-quick:disabled { cursor: wait; opacity: .65; filter: none; }
+.export-save-note { margin: 12px 0 0; color: #9ca1b3; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
+.export-save-note.error { color: #ff7373; }
+.export-dialog [hidden] { display: none !important; }
+.export-dialog button:focus-visible { outline: 2px solid #9b92ff; outline-offset: 3px; }
+.export-dialog .export-track-warn { margin: 14px 0 0; }
+.export-cancel-dialog { margin: auto; width: min(420px, calc(100vw - 32px)); color: var(--text); }
+.export-cancel-dialog::backdrop { background: #0009; }
+.export-cancel-dialog p { color: var(--dim); line-height: 1.6; }
+.btn.export-cancel-confirm { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; transition: filter .15s ease; }
+.btn.export-cancel-confirm:hover { filter: brightness(1.05); }
+.export-cancel-dialog button:focus-visible { outline: 2px solid #9b92ff; outline-offset: 3px; }
+@keyframes export-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .export-status-icon { animation: none; } .export-footer .progress-fill { transition: none; } }
+@media (max-width: 420px), (max-height: 600px) {
+  .export-header { padding: 16px; gap: 9px; }
+  .export-heading h2 { font-size: 15px; }
+  .export-heading p { font-size: 12px; }
+  .export-body { padding: 18px 16px 24px; }
+  .export-footer { padding: 0 16px 18px; }
+  .export-status-row { font-size: 12px; }
+}
+
+.export-track-warn {
+  margin: 0 0 12px;
+  padding: 9px 12px;
+  border: 1px solid #8a6a28;
+  border-radius: 8px;
+  background: #3a2e12;
+  color: #f0c14a;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.export-track-warn.hidden {
+  display: none;
+}
+
+.dialog.help {
+  width: min(820px, 94vw);
+  max-height: min(90vh, 640px);
+  overflow: auto;
+}
+
+.dialog.settings {
+  width: min(440px, 92vw);
+  max-height: 90vh;
+  overflow: auto;
+}
+
+.dialog.settings .settings-intro {
+  margin-bottom: 14px;
+  font-size: 12px;
+}
+
+.dialog.settings .settings-section h3 {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .4px;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin: 0 0 8px;
+}
+
+.settings-row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: pointer;
+  background: var(--panel-2);
+}
+
+.settings-row:hover {
+  border-color: #454552;
+}
+
+.settings-row input {
+  margin-top: 2px;
+  flex: none;
+}
+
+.language-row {
+  align-items: center;
+  justify-content: space-between;
+}
+
+.language-row .settings-label {
+  margin: 0;
+}
+
+.language-row select {
+  min-width: 120px;
+  padding: 5px 8px;
+  color: var(--text);
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+
+.settings-label {
+  display: block;
+  color: #e8e8ec;
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.settings-hint {
+  display: block;
+  font-size: 12px;
+  color: var(--dim);
+  line-height: 1.35;
+}
+
+#btnSettings {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  padding: 6px 0;
+}
+
+#btnSettings .ico {
+  margin: 0;
+  vertical-align: 0;
+}
+
+.dialog.help .keys-cols {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 28px;
+  margin-bottom: 12px;
+  align-items: start;
+}
+
+.dialog.help .keys {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 0;
+}
+
+.dialog.help .keys td {
+  padding: 5px 6px;
+  border-bottom: 1px solid #26262c;
+  font-size: 12px;
+  vertical-align: top;
+}
+
+.dialog.help .keys td:first-child {
+  width: 40%;
+  color: var(--dim);
+  white-space: nowrap;
+}
+
+@media (max-width: 700px) {
+  .dialog.help .keys-cols {
+    grid-template-columns: 1fr;
+  }
+}
+
+kbd {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  padding: 1px 6px;
+  font: 11px Consolas, monospace;
+  color: #fff;
+}
+
+/* ── Scrollbars ── */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #35353e;
+  border-radius: 5px;
+  border: 2px solid var(--panel);
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ── Toast ── */
+#toast {
+  position: fixed;
+  left: 50%;
+  bottom: 26px;
+  transform: translate(-50%, 20px);
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 9px 16px;
+  border-radius: 8px;
+  font-size: 12px;
+  box-shadow: 0 8px 30px #000a;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .25s, transform .25s;
+  z-index: 80;
+  max-width: 60vw;
+}
+
+#toast.show {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+/* ── Inspector checkboxes ── */
+.insp-row input[type=checkbox] {
+  width: 15px;
+  height: 15px;
+  accent-color: var(--accent);
+  flex: none;
+}
+
+/* ── Drop highlight ── */
+body.file-drag::after {
+  content: "Drop files to import";
+  position: fixed;
+  inset: 10px;
+  border: 2px dashed var(--accent);
+  border-radius: 14px;
+  background: #7b6cff14;
+  color: #cfc8ff;
+  font-size: 18px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99;
+  pointer-events: none;
+}
+
+/* Font-family previews use real DOM options instead of an OS-native popup. */
+.font-menu { box-sizing: border-box; }
+.font-group-label { padding: 7px 10px 4px; font-size: 11px; color: var(--dim); }
+.font-opt { overflow: hidden; text-overflow: ellipsis; font-size: 18px; line-height: 1.5; }
+.font-opt.active { outline: 1px solid #7b6cff88; outline-offset: -1px; background: #7b6cff26; }
+
+/* Prospective drops remain outside the track DOM until the gesture commits. */
+.timeline-empty { height: 64px; padding: 20px; color: var(--muted); box-sizing: border-box; }
+.tracks-content { min-height: 100%; padding-bottom: 24px; box-sizing: border-box; }
+.drop-preview { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 6; box-sizing: border-box; }
+.drop-preview.new-track { border-top: 1px dashed #6ee7b7; border-bottom: 1px dashed #6ee7b7; background: #6ee7b714; }
+.drop-ghost { position: absolute; top: 2px; bottom: 2px; border: 1px solid #6ee7b7; background: #6ee7b72b; border-radius: 4px; color: #a7f3d0; font-size: 11px; padding: 0 5px; box-sizing: border-box; overflow: hidden; white-space: nowrap; }
+.drop-thumb-strip { position: absolute; inset: 0; background: var(--clip-video); }
+.drop-ghost-label { position: relative; z-index: 1; background: #17171ccc; text-shadow: 0 1px 2px #000; }
+.drag-origin { opacity: .15; }
+.drop-preview.moving .drop-ghost { top: 0; bottom: 0; border: 2px solid #eeeaff; background: #423d64; box-shadow: 0 0 0 2px #8b7bff, 0 8px 18px #000b; transform: translateY(-3px); opacity: 1; }
+.drop-preview.moving .clip-thumb-strip { opacity: 1; }
+.drop-preview.moving .drop-ghost-label { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border-radius: 3px; padding: 1px 4px; box-sizing: border-box; color: #fff; font-weight: 600; }
+.drop-slot { position: absolute; top: 2px; bottom: 2px; border: 1px dashed #a99fff; border-radius: 4px; background: #7b6cff14; box-sizing: border-box; }
+.drop-insertion { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: #b1a7ff; box-shadow: 0 0 5px #7b6cff88; z-index: 2; }
+.drop-insertion::before, .drop-insertion::after { content: ""; position: absolute; left: -2px; width: 7px; height: 3px; border-radius: 1px; background: inherit; }
+.drop-insertion::before { top: 0; }
+.drop-insertion::after { bottom: 0; }
+.reorder-preview { transition: transform 240ms cubic-bezier(.25, .1, .25, 1); }
+.tracks-content[data-gesture="move"], .tracks-content[data-gesture="move"] .clip { cursor: grabbing; }
+@media (prefers-reduced-motion: reduce) { .reorder-preview { transition: none; } }